/*Mayor Arts & Culture Styles*/
/*Collapse Subnav to Mobile Style*/
.page{
    overflow:hidden;
    display: grid;
    grid:
    "subNav ." 3em
    "subNav content" 1fr / [c1] 1fr
    [c2] minmax(0, 1fr);
}
.subNav{
    justify-content: flex-end;
    flex-direction: row-reverse;
    float: left;
    max-width: 100%;
    height: fit-content;
}
.subNav > input{
    width: 145px;
    height: 3em;
    flex-direction: row-reverse;
    flex-shrink: 0;
    padding: 0;
    justify-content: space-evenly;
}
.subNav > :is(input, input:checked):after {
    content: ' ';
    display: inline-block;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    height: 12px;
    width: 12px;
    transition: transform .3s;
}
.subNav > input:after{
    transform: rotate(135deg) translateX(-2px) translateY(-2px);
}
.subNav > input:before {
    color: white;
    width: 75px;
    content: 'Navigation';
    padding-top: 1px;
}
.subnavBackgroundGradient{
    display:none;
}
.subNavList.nestedLinkList--d1.nestedLinkList--d1.nestedLinkList__manualDropDown:not(:checked){
    position: absolute;
    height:3em;
}
.subNavList.nestedLinkList--d1.nestedLinkList--d1.nestedLinkList__manualDropDown:checked{
    position: relative;
    animation: slideOut 0.3s 1 ease-out;
    height:3em;
}
.subNavList.nestedLinkList--d1.nestedLinkList--d1.nestedLinkList__manualDropDown:checked ~ .subNavList{
    translate: 0;
    position: relative;
}
.subNav .nestedLinkList__manualDropDown.nestedLinkList--d1{
    display: flex;
    opacity: 1;
}
.subNav .nestedLinkList__manualDropDown.nestedLinkList--d1:checked{
    height:3em;
    width: 3em;
}
.subNavList.nestedLinkList--d1.nestedLinkList--d1.nestedLinkList__manualDropDown:not(:checked) ~ .subNavList{
    translate: -100%;
    position: absolute;
    animation: KeepRel 0.3s;
}
.subNav .nestedLinkList__manualDropDown.nestedLinkList--d1:checked:before, .subNav .nestedLinkList__manualDropDown.nestedLinkList--d1:checked:after{
    position: absolute;
    width: 36px;
    height: 4px;
    background-color: white;
    border-radius: 2px;
    transition: transform 0.6s;
    cursor: pointer;
    content: '';
}
.subNav .nestedLinkList__manualDropDown.nestedLinkList--d1:checked:after{
    transform: rotate(-45deg);
}
.subNav .nestedLinkList__manualDropDown.nestedLinkList--d1:checked:before{
    transform: rotate(45deg);
}
@keyframes slideOut {
    from {left: calc(-100%);}
    to {left: 0;}
}
@keyframes KeepRel {
    from {position: relative;}
    to {position: relative;}
}
/*SBS Box Styles*/
.sbs-image{
    position: relative;
    width:100%;
    height:100%;
}
.sbs-image img{
    max-width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sbs-box{
    margin-left: -50px;
    margin-right: -50px;
    margin-top:30px;
    margin-bottom:30px;
}
.sbs-box:first-of-type{
    margin-top:0px;
}
.sbs-box:last-of-type{
    margin-bottom:0px;
}
@media screen and (max-width:1280px){
    .sbs-box{
        margin-left: -15px;
        margin-right: -15px;
        margin-top:15px;
        margin-bottom:15px;
    }
    .sbs-box:first-of-type{
        margin-top:0px;
    }
    .sbs-box:last-of-type{
        margin-bottom:0px;
    }
}
.sbs-box .content-boxes--cols-two{
    display: table;
    min-height: 330px;
}
@media screen and (max-width:1280px){
    .sbs-box .content-boxes--cols-two{
        min-height:25.78vw;
    }
}
@media screen and (max-width:600px){
    .sbs-box .content-boxes--cols-two{
        display:block
    }
}
.sbs-box .content-boxes--cols-two .sbs-text{
    padding:50px;
    position:relative;
    display: table-cell;
    width: calc(50% - 100px);
    vertical-align: middle;
}
@media screen and (max-width:1280px){
    .sbs-box .content-boxes--cols-two .sbs-text{
        padding:15px;
    }
}
@media screen and (max-width:600px){
    .sbs-box .content-boxes--cols-two .sbs-text{
        display:block;
        width:auto;
    }
}
.sbs-box .content-boxes--cols-two .sbs-image{
    position: relative;
    display: table-cell;
    width: 50%;
}
@media screen and (max-width:600px){
    .sbs-box .content-boxes--cols-two .sbs-image{
        display:block;
        min-height:250px;
        width:100%;
    }
}
.sbs-box h2{
    margin-top:0px;
}
.sbs-box p:last-of-type{
    margin-bottom:0px;
}
.sbs-image .contentBoxBG{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
}
.sbs-large{
    margin-left: -50px;
    margin-right: -50px;
    min-height: 720px;
    margin-top: 30px;
    margin-bottom: 30px;
    position: relative;
}
@media screen and (max-width:1280px){
    .sbs-large{
        margin-left:-15px;
        margin-right:-15px;
        margin-top:15px;
        margin-bottom:15px;
        min-height:56.25vw;
    }
}
@media screen and (max-width:720px){
    .sbs-large{
        min-height:auto;
    }
}
@media screen and (max-width:600px){
    .sbs-large{
        margin-bottom:0px;
    }
}
.sbs-large .contentBoxBG{
    position:absolute;
}
@media screen and (max-width:720px){
    .sbs-large .contentBoxBG{
        position:relative;
    }
}
.sbs-large .contentBoxCorner{
    padding-top:0px;
}
@media screen and (max-width:720px){
    .sbs-large .contentBoxCorner{
        padding-top:56.25%;
    }
}
.sbs-large .content-boxes--cols-one{
    display: block;
    width: 100%;
    height: 100%;
    top:0px;
    left:0px;
    position: absolute;
}
@media screen and (max-width:720px){
    .sbs-large .content-boxes--cols-one{
        position:relative;
    }
}
.gallery-photo .contentBoxLink {
    display:none;
}
.gallery-photo .contentBoxBG{
    cursor: pointer;
}
.sbs-tripple{
    margin-left:-50px;
    margin-right:-50px;
    margin-top:30px;
    margin-bottom:30px;
    overflow:hidden;
}
@media screen and (max-width:1280px){
    .sbs-tripple{
        margin-left:-15px;
        margin-right:-15px;
        margin-top:15px;
        margin-bottom:15px;
    }
}
.sbs-tripple .content-boxes{
    min-height:330px;
    margin-right:-30px;
}
@media screen and (max-width:1280px){
    .sbs-tripple .content-boxes{
        min-height: 25.78vw;
        margin-right:-15px;
    }
}
@media screen and (max-width:600px){
    .sbs-tripple .content-boxes{
        grid-template-columns: repeat(1, 1fr);
    }
}
.sbs-tripple .content-boxes .contentBox {
    margin-right:30px;
    width: calc(100% - 30px);
}
@media screen and (max-width:1280px){
    .sbs-tripple .content-boxes .contentBox {
        margin-right:15px;
        width: calc(100% - 15px);
    }
}
@media screen and (max-width:600px){
    .sbs-tripple .content-boxes .contentBox {
        margin-bottom:15px;
    }
    .sbs-tripple .content-boxes .contentBox:last-of-type{
        margin-bottom:0px;
    }
}
.sbs-tripple .sbs-image .contentBoxBG{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-position:center;
    background-size:cover;
}
@media screen and (max-width:600px){
    .sbs-tripple .sbs-image .contentBoxBG{
        position:relative;
        height:auto;
    }
}
.sbs-tripple .sbs-image .contentBoxBG .contentBoxCorner{
    height:0px;
}
@media screen and (max-width:600px){
    .sbs-tripple .sbs-image .contentBoxBG .contentBoxCorner{
        height:56.25vw;
    }
}
.sbs-infoBox{
    background-color:#d07544;
}
.sbs-infoBox .contentBoxBG{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
}
@media screen and (max-width:600px){
    .sbs-infoBox .contentBoxBG{
        position:relative;
        width:100%;
        height:auto;
    }
    .sbs-infoBox .contentBoxBG .contentBoxCorner{
        padding-top:56.25%;
    }
}
.sbs-infoBox .content-boxes--cols-one {
    display:table;
    min-height:720px;
    padding-left:100px;
    width:100%;
}
@media screen and (max-width:1600px){
    .sbs-infoBox .content-boxes--cols-one {
        padding-left:50px;
    }
}
@media screen and (max-width:1280px){
    .sbs-infoBox .content-boxes--cols-one {
        padding-left:15px;
        min-height: 56.25vw;
    }
}
@media screen and (max-width:600px){
    .sbs-infoBox.sbs-large{
        min-height:0px;
    }
    .sbs-infoBox .content-boxes--cols-one{
        padding-left: 0px;
        min-height: 0px;
        display: block;
        position: relative;
        width: 100%;
    }
}
.sbs-infoBox .contentBox{
    display:table-cell;
    vertical-align:middle;
}
@media screen and (max-width:600px){
    .sbs-infoBox .contentBox{
        display:block;
    }
}
.sbs-infoBox .contentBox .contentBoxContent{
    background-color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 1.4em;
    color: black;
    padding: 50px;
    position: relative;
    display: inline-block;
    width: calc(50% - 15px);
    max-width:720px;
}
@media screen and (max-width:1280px){
    .sbs-infoBox .contentBox .contentBoxContent{
        padding:30px;
        width:calc(60% - 15px);
        max-width:512px;
    }
}
@media screen and (max-width:600px){
    .sbs-infoBox .contentBox .contentBoxContent{
        width: auto;
        max-width: none;
        padding: 15px;
        background-color: rgb(253 233 229);
    }
}
.sbs-infoBox .contentBox .contentBoxContent h2, .page__content .sbs-infoBox .contentBox .contentBoxContent h2, .page__content .sbs-infoBox .contentBox .contentBoxContent .header2{
    color:black;
    margin-top:0px;
    margin-bottom:15px;
}
.sbs-infoBox .contentBox .contentBoxContent p:last-of-type{
    margin-bottom:0px;
}
/*Navy*/
.sbs-navy{ background-color: #042f65; }
/*Purple*/
.sbs-purple{ background-color: #623282; }
.sbs-purple h2, .sbs-purple .contentBoxContent{ color:white; }
.page__content-wrapper .sbs-purple a, .page__content-wrapper .sbs-purple a:active, .page__content-wrapper .sbs-purple a:visited{ color:white; text-decoration:none; font-weight:bold;  }
.page__content-wrapper .sbs-purple a:hover{ color:white; text-decoration:underline; }
/*Blue*/
.sbs-blue{ background-color: #0f3aa3;}
.sbs-blue h2, .sbs-blue .contentBoxContent{ color:white; }
.page__content-wrapper .sbs-blue a, .page__content-wrapper .sbs-blue a:active, .page__content-wrapper .sbs-blue a:visited{ color:white; text-decoration:none; font-weight:bold;  }
.page__content-wrapper .sbs-blue a:hover{ color:white; text-decoration:underline; }
/*Indigo*/
.sbs-indigo{ background-color: #5910a3;}
.sbs-indigo h2, .sbs-indigo .contentBoxContent{ color:white; }
.page__content-wrapper .sbs-indigo a, .page__content-wrapper .sbs-indigo a:active, .page__content-wrapper .sbs-indigo a:visited{ color:white; text-decoration:none; font-weight:bold; }
.page__content-wrapper .sbs-indigo a:hover{ color:white; text-decoration:underline; }
/*Magenta*/
.sbs-magenta{ background-color: #a31064;}
.sbs-magenta h2, .sbs-magenta .contentBoxContent{ color:white; }
.page__content-wrapper .sbs-magenta a, .page__content-wrapper .sbs-magenta a:active, .page__content-wrapper .sbs-magenta a:visited{ color:white; text-decoration:none; font-weight:bold; }
.page__content-wrapper .sbs-magenta a:hover{ color:white; text-decoration:underline; }
/*Salmon*/
.sbs-salmon{ background-color: #b0004c;}
.sbs-salmon h2, .sbs-salmon .contentBoxContent{ color:white; }
.page__content-wrapper .sbs-salmon a, .page__content-wrapper .sbs-salmon a:active, .page__content-wrapper .sbs-salmon a:visited{ color:white; text-decoration:none; font-weight:bold; }
.page__content-wrapper .sbs-salmon a:hover{ color:white; text-decoration:underline; }
/*Animation Controls*/
.sbs-box .content-boxes .contentBox{
    opacity:0;
}
.sbs-box.show .content-boxes .contentBox:first-of-type{
    opacity:1;
    animation-name:SBSBoxLeft;
    animation-duration:1s;
}
@keyframes SBSBoxLeft{
    from{ left:-100px; opacity:0; }
    to{ left:0px; opacity:1; }
}
.sbs-box.show .content-boxes .contentBox:last-of-type{
    opacity:1;
    animation-name:SBSBoxRight;
    animation-duration:1s;
}
@keyframes SBSBoxRight{
    from{ left:100px; opacity:0; }
    to{ left:0px; opacity:1; }
}
.sbs-large .content-boxes .contentBox{
    opacity:0;
}
.sbs-large.show .content-boxes .contentBox{
    opacity:1;
    animation-name:SBSBoxUp;
    animation-duration:1s;
}
@keyframes SBSBoxUp{
    from{ top:100px; opacity:0; }
    to{ top:0px; opacity:1; }
}
.sbs-tripple .content-boxes .contentBox{
    opacity:0;
}
.sbs-tripple.show .content-boxes .contentBox{
    opacity:1;
    animation-name:SBSTrippleMiddle;
    animation-duration:1s;
}
.sbs-tripple.show .content-boxes .contentBox:first-of-type{
    animation-name:SBSTrippleLeft;
    animation-duration:1s;
}
.sbs-tripple.show .content-boxes .contentBox:last-of-type{
    animation-name:SBSTrippleRight;
    animation-duration:1s;
}
@keyframes SBSTrippleLeft{
    0%{ left:-50px; opacity:0; }
    50%{ left:0px; opacity:1; }
    100%{ top:0px; opacity:1; }
}
@keyframes SBSTrippleMiddle{
    0%{ left:-50px; opacity:0; }
    25%{ left:-50px; opacity:0; }
    75%{ left:0px; opacity:1; }
    100%{ top:0px; opacity:1; }
}
@keyframes SBSTrippleRight{
    0%{ left:-50px; opacity:0; }
    50%{ left:-50px; opacity:0; }
    100%{ left:0px; opacity:1; }
}
.sbs-tripple-even.show .content-boxes .contentBox{
    animation-name:SBSTrippleEvenMiddle;
}
.sbs-tripple-even.show .content-boxes .contentBox:first-of-type{
    animation-name:SBSTrippleEvenLeft;
}
.sbs-tripple-even.show .content-boxes .contentBox:last-of-type{
    animation-name:SBSTrippleEvenRight;
}
@keyframes SBSTrippleEvenLeft{
    0%{ left:50px; opacity:0; }
    50%{ left:0px; opacity:1; }
    100%{ top:0px; opacity:1; }
}
@keyframes SBSTrippleEvenMiddle{
    0%{ left:50px; opacity:0; }
    25%{ left:50px; opacity:0; }
    75%{ left:0px; opacity:1; }
    100%{ top:0px; opacity:1; }
}
@keyframes SBSTrippleEvenRight{
    0%{ left:50px; opacity:0; }
    50%{ left:50px; opacity:0; }
    100%{ left:0px; opacity:1; }
}
.sbs-infoBox .content-boxes{
    opacity:0;
}
.sbs-infoBox.show .content-boxes{
    opacity:1;
    animation-name:SBSInfoBoxUp;
    animation-duration:1s;
}
@keyframes SBSInfoBoxUp{
    from{ top:100px; opacity:0; }
    to{ top:0px; opacity:1; }
}
/*FlipBoxes*/
.flipboxes {
    margin-left:-50px;
    margin-right:-50px;
    margin-bottom:-20px;
}
@media screen and (max-width:1280px){
    .flipboxes{
        margin-bottom:0px;
        margin-left:-15px;
        margin-right:-15px;
    }
}
.flipboxes h2{ 
    margin:0px;
}
.flipboxes .content-boxes{
    margin-right:-30px;
    grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width:1280px){
    .flipboxes .content-boxes{
        margin-right:-15px;
    }
}
@media screen and (max-width:600px){
    .flipboxes .content-boxes{
        margin-right:-15px;
        grid-template-columns: repeat(1, 1fr);
    }
}
.flipboxes .contentBox {
    width: calc(100% - 30px);
    margin-right: 30px;
    position: relative;
    min-height: 330px;
    overflow:hidden;
}
@media screen and (max-width:1280px){
    .flipboxes .contentBox {
        margin-right:15px;
        width:calc(100% - 15px);
    }
}
@media screen and (max-width:600px){
    .flipboxes .contentBox {
        margin-top:15px;
    }
}
.flipboxes .contentBoxBG{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size:cover;
    background-position:center;
}
.flipboxes .contentBoxLink {
    position: relative;
    font-size: 20px;
    line-height: 1.2em;
    padding: 15px;
    color: white;
    transition: top 0.6s;
    top:0px;
}
.flipboxes .contentBox:hover .contentBoxLink{
    top: -55px;
}
.flipboxes .contentBoxContent{
    position: relative;
    top: 100%;
    left: 0px;
    padding: 30px;
    width: 100%;
    height: 100%;
    transition:top 0.6s;
}
@media screen and (max-width:1280px){
    .flipboxes .contentBoxContent{
        padding:15px;
    }
}
.flipboxes .contentBox:hover .contentBoxContent{
    top:-54px;
}
.flipboxes .contentBoxContent h2, .flipboxes .contentBoxContent p{
    color:white;
}
.flipboxes .contentBox:nth-of-type(n+1) .contentBoxLink{
    background: rgba(89,16,163,1)
}
.flipboxes .contentBox:nth-of-type(n+1) .contentBoxContent{
    border-top: 54px solid rgba(89,16,163,1);
    background: rgba(89,16,163,0.74)
}
.flipboxes .contentBox:nth-of-type(n+2) .contentBoxLink{
    background:rgba(176,0,76,1);
}
.flipboxes .contentBox:nth-of-type(n+2) .contentBoxContent{
    border-top: 54px solid rgba(176,0,76,1);
    background: rgba(176,0,76,0.74)
}
.flipboxes .contentBox:nth-of-type(n+3) .contentBoxLink{
    background:rgba(15,58,163,1);
}
.flipboxes .contentBox:nth-of-type(n+3) .contentBoxContent{
    border-top: 54px solid rgba(15,58,163,1);
    background: rgba(15,58,163,0.74)
}
.page__content-wrapper .flipboxes a, .page__content-wrapper .flipboxes a:active, .page__content-wrapper .flipboxes a:visited{
    color:white;
    text-decoration:none;
    line-height:1.2em;
}
.page__content-wrapper .flipboxes a:hover{
    color:white;
    text-decoration:underline;
}
/*Arts & Culture Gallery*/
.gallery_show{
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 90000; 
    background-color: rgba(16,42,67,0.8);
    display:none;
}
.gallery_show.show{ 
    display:block; 
    animation-name:fadegalleryin; 
    animation-duration:0.5s; 
}
@keyframes fadegalleryin {
    from{opacity:0;}
    to{opacity:1;}
}
.gallery_margins{
    max-width: 1650px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.slide_in {
    position: absolute; 
    margin-top: 100px; 
    margin-left: 200px; 
    top: 0px; left: 0px; 
    width: calc(100% - 400px); 
    height: calc(100% - 250px); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    overflow: hidden;
}
@media screen and (max-height:720px){
    .slide_in{
        margin-top:7.2vh;
        height: calc(100% - 14.4vh);
    }
}
@media screen and (max-height:500px){
    .slide_in{
        margin-top:0px;
        height: calc(100%);
    }
}
@media screen and (max-width:1680px){
    .slide_in{
        margin-left: 11.8vw;
        width: calc(100% - 23.809vw);
    }
}
@media screen and (max-width:1000px){
    .slide_in{
        margin-left: 100px;
        width: calc(100% - 200px);
    }
}
@media screen and (max-width:900px){
    .slide_in{
        margin-top:0px;
        height:100%;
    }
}
@media screen and (max-width:720px){
    .slide_in{
        margin-left:0px;
        width:100%;
    }
}
.slide_out {
    position:absolute;
    margin-top:100px;
    margin-left:200px;
    top:0px;
    left:-100%;
    width:calc(100% - 400px);
    height:calc(100% - 250px);
    background-size:contain; 
    background-repeat:no-repeat;
    background-position: center; 
    overflow:hidden;
}
@media screen and (max-height:720px){
    .slide_out{
        margin-top:7.2vh;
        height: calc(100% - 14.4vh);
    }
}
@media screen and (max-height:500px){
    .slide_out{
        margin-top:0px;
        height: calc(100%);
    }
}
@media screen and (max-width:1680px){
    .slide_out{
        margin-left: 11.8vw;
        width: calc(100% - 23.809vw);
    }
}
@media screen and (max-width:1000px){
    .slide_out{
        margin-left: 100px;
        width: calc(100% - 200px);
    }
}
@media screen and (max-width:900px){
    .slide_out{
        margin-top:0px;
        height:100%;
    }
}
@media screen and (max-width:720px){
    .slide_out{
        margin-left:0px;
        width:100%;
    }
}
.description{
    position:absolute;
    bottom: 15px; 
    left: 0px; 
    width: 100%; 
    text-align: center;
}
.description.hide{
    display:none;
}
.description_text .title_text{
    font-weight:bold;
}
.descriptionBorder{    
    font-size: 16px; 
    color: white; 
    background-color: rgba(11,32,53,0.8); 
    font-weight: normal; 
    display: inline-block; 
    padding: 15px; 
    border: 2px solid white; 
    line-height: 1.4em; 
    max-width: 1220px; 
    margin-left: 15px; 
    margin-right: 15px;
}
.descriptionBorder .overflow{
    max-height: 44px;
    overflow: hidden;
}
.descriptionBorder .webitBox{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.description_text{
    line-height: 1.4em; 
    margin-top: 0px;    
}
@media screen and (max-width:640px){ 
    .description_text{ 
        display:none;
    }
}
.pageContent .description a:link, .pageContent .description a:active, .pageContent .description a:visited{
    color:rgba(0,0,0,0);
    text-shadow:0px 0px white;
    text-decoration:none;
}
.pageContent .description a:hover{
    color:rgba(0,0,0,0);
    text-shadow:0px 0px white;
    text-decoration: underline;
}
.prev{
    width: 200px;
    top: 0px;
    Left: 0px;
    height: 100%;
    Display: block;
    position: absolute;
    z-index: 1;
}
@media screen and (max-width:1680px){
    .prev{
        width: 11.9vw;
    }
}
@media screen and (max-width:1000px){
    .prev{
        width: 100px;
    }
}
.prev.hide{
    display:none;
}
.prev .arrow{
    background-image: url('/content/images/mayor/gallery/arrowPrevious.png');
    left: 0px;
    position: absolute;
    font-size: 0px;
    background-position: center;
    background-size: 65px;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
@media screen and (max-width:1000px){
    .prev .arrow {
        background-size:6.5vw;
    }
}
@media screen and (max-width:800px){
    .prev .arrow {
        background-size:52px;
    }
}
.next{
    width:200px;
    top:0px;
    right:0px;
    height:100%;
    Display:block;
    position: absolute;
    z-index: 1;
}
@media screen and (max-width:1680px){
    .next{
        width: 11.9vw;
    }
}
@media screen and (max-width:1000px){
    .next{
        width: 100px;
    }
}
.next.hide{
    display:none;
}
.next .arrow {
    position: absolute;
    font-size: 0px;
    background-image: url('/content/images/mayor/gallery/arrowNext.png');
    background-position: center;
    background-size: 65px;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
@media screen and (max-width:1000px){
    .next .arrow {
        background-size:6.5vw;
    }
}
@media screen and (max-width:800px){
    .next .arrow {
        background-size:52px;
    }
}
.closeGallery{
    background-image: url('/content/images/mayor/gallery/closeX.png');
    position: absolute;
    width: 70px;
    height: 70px;
    font-size: 0px;
    display: block;
    right: 60px;
    top: 40px;
    background-size: 35px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 70px;
    z-index:1;
}
@media screen and (max-height:720px){
    .closeGallery{
        top: 8.333vh;
    }
}
@media screen and (max-height:500px){
    .closeGallery{
        top: 10px;
    }
}
@media screen and (max-width:1000px){
    .closeGallery{
        top: 10px;
        right: 20px;
    }
}