/*--- page section (intro) ---*/
.webp #s1{ background-image:url("/images/bgs/where_we_cover.webp"); }
.no-webp #s1{ background-image:url("/images/bgs/where_we_cover.jpg"); }

#s1 #s1_t1{
    top:170px;
    left:300px;
    height:210px;
    width:610px;
    background-position: top left;
    background-size:100% auto;
    background-repeat: no-repeat;
}
.webp #s1 #s1_t1{ background-image:url("/images/headings/nationwide_building_and_window_cleaning_specialists.webp"); }
.no-webp #s1 #s1_t1{ background-image:url("/images/headings/nationwide_building_and_window_cleaning_specialists.png"); }
 
#s1.animate #s1_t1{
    left:100px;
    opacity: 1;
}

/*--- page section (where we cover) ---*/
#s14{
    position: relative;
    margin:0 auto;
    width:1198px;
    padding:30px 0;
    background-position:45% -50px;
    background-size:auto 950px;
    background-repeat: no-repeat;
    background-color:#F7F6F4;
    transition: background-size 3s, background-position 3s;
    overflow: auto;
}
.webp #s14{ background-image:url("/images/where_we_cover/map.webp"); }
.no-webp #s14{ background-image:url("/images/where_we_cover/map.png"); }

#s14.animate{
    background-size:auto 725px;
    background-position:45% 20px;
}
#s14 div:nth-child(1){
    position: absolute;
    top:-130px;
    left:100px;
    width:280px;
    text-align: center;
    opacity: 0;
    transition: top 2s, opacity 4s;
}
#s14.animate div:nth-child(1){
    top:30px;
    opacity: 1;
}
#s14 div:nth-child(1) h2{
    font-family: 'Archivo Black';
    font-size:36px;
    color:#217EC0;
}
#s14 div:nth-child(1) h3{
    padding:3px 0 7px 0;
    font-family: 'Archivo Black';
    font-size:32px;
    color:#C9DA2F;
}
#s14 div:nth-child(1) h4{
    font-family: 'Archivo Black';
    font-size:22px;
    color:#217EC0;
}
#s14 div:nth-child(2){
    width:870px;
    margin:635px auto 100px auto;
    padding:15px;
    color:#FFF;
    background:linear-gradient(0deg, #52C5F1 0%, #416CB2 100%);
    border:5px solid #217EC0;
    border-radius: 15px; 
    opacity: 0;
    transition: margin 2s, opacity 4s; 
}
#s14.animate div:nth-child(2){
    margin:735px auto 0 auto;
    opacity: 1;
}
#s14 div:nth-child(2) h1{
    font-size:24px;
    text-transform: uppercase;
}
#s14 div:nth-child(2) p{
    padding-top:0.8em;
    line-height:1.3em;
}
#s14 .ring{
    position: absolute;
    top:580px;
    left: 730px;
    display: block;
    width: 60px;
    height: 60px;
    border: 5px solid #217EC0;
    border-radius: 100%;
    opacity:0;
    transition: top 1s linear, left 1s linear, width 1s linear, height 1s linear, opacity 3s linear;
    transition-delay: 0s, 0s, 0s, 0s, 3s;
}
#s14.animate .ring{
    opacity:1;
}
#s14 .ring.pulse{
    top:590px;
    left:740px;
    width:40px;
    height:40px;
}

/*--- your specialist ---*/
#your_specialist{
    top:760px;
    left:calc(50% + 135px);
}
.webp #your_specialist{ background-image:url("/images/your_specialist/high_rise_and_window_cleaning_service.webp"); }
.no-webp #your_specialist{ background-image:url("/images/your_specialist/high_rise_and_window_cleaning_service.png"); }

/*--- tablet landscape ---*/
@media (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape){
    #your_specialist.v2{
        display:none;
    }
    #s14 div:nth-child(1) {
        left: 50px;
    }
    #s14 .ring{
        left: 655px;
    }
    #s14 .ring.pulse{
        left:665px;
    }
}

/*--- mobile landscape and portrait ---*/
@media (max-width: 1023px), (max-width: 1024px) and (orientation: portrait){
    #s1 #s1_t1 {
        height: 22vw;
        width: 60vw;
    }
    #s14 .ring {
        display:none;
    }
}