@charset "utf-8";
/* CSS Document */

@media all and (min-width: 768px) {
    body {
        background-image: url("images/bg.jpg");
        background-position: bottom 0px center;
        background-size: 100% calc(100% - (100vw * 2323 / 3100));
        background-size: 100% calc(100% - (100vw * 664 / 3100) - (100vw * 1673 / 3100) - (100vw * 110 / 3100));
        font-size: calc(100vw * 60 / 3100);
        line-height: 1.0;
    }
    .ui-widget {
        font-size: 0.8em;
        font-size: 1rem;
        transform: scale(1.5);
    }
    .ui-icon {
        /*
        width: calc(100vw * 60 / 3100);
        height: calc(100vw * 60 / 3100);
        background-size: auto calc(100vw * 60 / 3100);
        */
    }
    
    .mobile {
        display: none;
    }
    .desktop {
        display: inline-block;
    }
    
    .topbar {
        position: relative;
        line-height: 1;
        background-image: url("images/topbarbg.jpg");
        background-size: cover;
        background-position: center bottom;
        xxheight: calc(100vw * 664 / 3100);
        z-index: 110;
    }
    .topbar .bar {
        display: block;
    }
    .topbar .bar.top {
        height: calc(100vw * 9 / 3100);
    }
    .topbar .bar.mid {
        height: calc(100vw * 12 / 3100);
    }
    .topbar .bar.lower {
        height: calc(100vw * 11 / 3100);
    }    
    .topbar .floral {
        transform: none;
        top: 7px;
        left: -3px;
        width: 233px;
        width: calc(100vw * 904 / 3100);
    }
    .topbar .upper {
        background-image: url("images/logo-streak-desktop.png");
        background-repeat: no-repeat;
        background-position: center top -10px;
        background-size: auto 170px;
        height: calc(100vw * 523 / 3100);
    }
    .topbar .maintitle {
        padding-top: 0px;
        background-image: none;
    }
    .topbar .maintitle .mexicantile {
        font-size: calc(100vw * 244 / 3100);
        margin-top: calc(100vw * -20 / 3100);
        transform: scaleY(0.8);
    }
    .topbar .maintitle .specialists {
        width: calc(100vw * 690 / 3100);
        transform: translate( calc(100vw * 168 / 3100) , calc(100vw * -75 / 3100) );
    }
    .topbar .phoneservices {
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 6px;
    }
    .topbar .phoneservices .phone {
        margin-top: -8px;
        letter-spacing: 1px;
        font-size: 40px;
        font-size: calc(100vw * 163 / 3100);
        margin-top: calc(100vw * -30 / 3100);
    }
    .topbar .phoneservices .services {
        font-size: 16px;
        font-size: calc(100vw * 64 / 3100);
        margin-top: calc(100vw * 18 / 3100);
    }
    .topbar .logo {
        transform: none;
        position: absolute;
        top: 28px;
        right: 0px;
        width: calc(100vw * 871 / 3100);
        top: calc(100vw * 89 / 3100);
        right: calc(100vw * 59 / 3100);
    }
    .topbar .topmenu {
        padding: 0px;
        padding-left: 50px;
        font-size: 13px;
        xxpadding: calc(100vw * 33 / 3100);
        font-size: calc(100vw * 48 / 3100);
        height: calc(100vw * 110 / 3100);
        position: relative;
        z-index: 1;
    }
    .topbar .topmenu .go {
        display: inline-block;
        color: #008af0;
        font-family: "NeutraDemi";
        font-weight: bold;
    }
    .topbar .topmenu .item {
        display: inline-block;
        color: #5b5b5b;
        margin: 0;
        padding: calc(100vw * 30 / 3100) calc(100vw * 20 / 3100);
    }
    .topbar .topmenu .item .item {
        padding: 0;
    }
    .topbar .topmenu a.contact {
        font-size: bold;
        color: black;
    }
    .topbar .topmenu a.estimate {
        color: #ea6407;
    }
    .topbar .topmenu a:hover {
        color: #f30;
    }    
    .topbar .topmenu .sub {
        display: none;
        position: absolute;
        width: calc(100vw * 400 / 3100);
        background-image: url("images/topbarbg.jpg");
        background-position: center top;
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        top: calc(100vw * 110 / 3100);
        margin-left: calc(100vw * -40 / 3100);
        z-index: 110;
    }
    .topbar .topmenu .restoration:hover .sub {
        display: block;
    }
    .topbar .topmenu .restoration:hover .sub:hover {
        display: block;
    }
    .topbar .topmenu .sub .item {
        display: block;
        padding: calc(100vw * 30 / 3100) calc(100vw * 20 / 3100);
    }
    .topbar.fixed {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: auto;
        z-index: 110;
    }
    .topbar.fixed .bar.top,
    .topbar.fixed .upper,
    .topbar.fixed .floral {
        display: none;
    }
    .dekstopSubMenu {
        display: none;
        position: fixed;
        top: calc(100vw * 645 / 3100);
        width: calc(100vw * 450 / 3100);
        z-index: 110;
        background: white;
        background-image: url("images/topbarbg.jpg");
        background-position: center top;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5);
        font-size: calc(100vw * 48 / 3100);
    }
    .dekstopSubMenu.fixed {
        top: calc(100vw * 125 / 3100);
    }
    .dekstopSubMenu a {
        display: block;
        padding: calc(100vw * 30 / 3100);
        color: black;
    }
    .dekstopSubMenu a:hover {
        color: #f30;
    }
    .main {
        padding: 0px calc(100vw * 100 / 3100);
    }
    .banner {
        background-image:  url("images/bar-silver.png"), url("images/banner.jpg");
        background-position: bottom, bottom;
        background-repeat: repeat-x, no-repeat ;
        background-size: 100% 4px, cover;
    }
    .banner .slide {
        height: calc(100vw * 1671 / 3100);
    }
    .banner .slide .caption {
        width: calc(100vw * 1489 / 3100);
        font-size: calc(100vw * 240 / 3100);
        bottom: 4px;
    }
    .fifty {
        font-weight: normal;
        margin-top: 10px;
        margin-top: calc(100vw * 40 / 3100);
        font-size: calc(100vw * 120 / 3100);
        line-height: 1.2;
    }
    .customdesign {
        font-weight: normal;
        font-size: calc(100vw * 74 / 3100);
    }
    .welcome {
        color: #4591cb;
        font-family: "NeutraDemi";
        font-size: 32px;
        font-size: calc(100vw * 125 / 3100);
    }
    .welcome .inc {
        font-size: calc(100vw * 70 / 3100);
    }
    .trusted {
        color: #b97c06;
        font-family: "NeutraDemi";
        font-size: calc(100vw * 74 / 3100);
    }
    .tribanner {
        display: none;
    }
    .tribannerWide {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 5px;
        margin-top: calc(100vw * 125 / 3100);
    }
    .tribannerWide .text {
        display: flex;
        justify-content: space-around;
        font-family: "NeutraDemi";
        font-size: 32px;
        color: #b97c06;
        margin-bottom: 5px;
        font-size: calc(100vw * 130 / 3100);
        margin-bottom: calc(100vw * 35 / 3100);
    }
    .tribannerWide .text div {
        width: calc(100% / 3);
    }
    .tribannerWide .text div a {
        color: #b97c06;
        border-bottom: solid 1px #b97c06;
        border-width: calc(100vw * 6 / 3100);
    }
    .tribannerWide .text div a:hover {
        color: #f30;
        border-color: #f30;
    }
    .tribannerWide .bar {
        width: 100%;
        height: 6px;
        background-image: url("images/bar-gold.png");
        background-repeat: repeat-x;
        background-size: contain;
    }
    .GetAdvice {
        font-family: "Neutra";
        font-weight: normal;
        font-size: 50px;
        font-size: calc(100vw * 194 / 3100);
    }
    hr {
        width: 500px;
        margin: auto;
        width: calc(100vw * 1853 / 3100);
    }
    .AskQuestion {
        font-size: 60px;
        font-size: calc(100vw * 243 / 3100);
    }
    .QuickAnswer {
        font-size: 30px;
        margin-top: -10px;
        font-size: calc(100vw * 115 / 3100);
    }
    .confidence {
        font-size: 24px;
        font-size: calc(100vw * 94 / 3100);
    }
    .confidence span {
        xfont-weight: bold;
        font-family:'NeutraDemi';
    }
    
    .contacts {
        font-size: calc(100vw * 66 / 3100);
        gap: calc(100vw * 110 / 3100);
        margin-top: calc(100vw * -20 / 3100);
        margin-bottom: calc(100vw * 160 / 3100);
    }
    .contacts .phone {
        font-size: 56px;
        font-size: calc(100vw * 220 / 3100);
    }
    .contacts .col {
        gap: 5px;
    }
    .contacts .col img {
        width: calc(100vw * 226 / 3100);
    }
    
    .photoset {
        display: flex;
        justify-content: space-around;
        gap: 10px;
        margin-bottom: calc(100vw * 93 / 3100);
    }
    .photoset img {
        width: calc((100% / 3) - 10px - 10px);
    }
    .h2 {
        color: #4991c7;
        -webkit-text-stroke: 1px #4991c7;
        font-size: calc(100vw * 125 / 3100);
    }
    
    .sub1 {
        font-size: calc(100vw * 64 / 3100);
    }
    .sub2 {
        font-size: calc(100vw * 64 / 3100);
    }
    
    .GetQuotes {
        color: #89bde4;
        font-family: "NeutraDemi";
        font-size: 75px;
        line-height: 1;
        font-size: calc(100vw * 300 / 3100);
    }
    .TellUs {
        font-size: 31px;
        font-size: calc(100vw * 126 / 3100);
    }
    
    #QuoteForm {
        margin-top: calc(100vw * 85 / 3100);
    }
    #QuoteForm .space {
        font-size: calc(100vw * 126 / 3100);
        color: #b07903;
        margin-bottom: 20px;
    }
    #QuoteForm .row {
        column-gap: calc(100vw * 50 / 3100);
        margin-bottom: calc(100vw * 20 / 3100);
    }
    #QuoteForm .row.wide {
        width: 387px;
        width: calc(100vw * 1310 / 3100);
    }
    #QuoteForm .row.wide .text {
        font-size: calc(100vw * 40 / 3100);
    }
    #QuoteForm .row .toggle {
        border-radius: calc(100vw * 20 / 3100);
    }
    #QuoteForm .row div {
        width: calc(100vw * 440 / 3100);
    }
    #QuoteForm .row div:last-child { 
        width: 220px;
        width: calc(100vw * 850 / 3100);
    }
    #QuoteForm .row .field {
        font-size: calc(100vw * 60 / 3100);
        padding: calc(100vw * 10 / 3100);
        border-radius: calc(100vw * 20 / 3100);
    }
    #QuoteForm #date {
        background-size: auto calc(100vw * 60 / 3100);
    }
    #QuoteForm .button {
        width: calc(100vw * 460 / 3100);
        height: calc(100vw * 115 / 3100);
        border-radius: calc((100vw * 115 / 3100) / 2);
        font-size: calc(100vw * 74 / 3100);
    }
    #QuoteForm .button.upload .circle {
        width: calc(100vw * 115 / 3100);
        height: calc(100vw * 115 / 3100);
        border-radius: calc((100vw * 115 / 3100) / 2);
        background-size: calc((100vw * 115 / 3100) / 2) auto;
    }
    #QuoteForm .button.upload .text {
        width: calc(100vw * 340 / 3100);
    }
    .footer .projects {
        margin-bottom: 30px;
        margin-bottom: calc(100vw * 232 / 3100);
    }
    .footer .projects .title {
        color: #89bde4;
        font-weight: bold;
        line-height: 1;
        font-size: calc(100vw * 243 / 3100);
        margin-top: calc(100vw * 190 / 3100);
    }
    .footer .projects .gallery {
        display: flex;
        justify-content: center;
        column-gap: 20px;
        column-gap: calc(100vw * 110 / 3100);
    }
    .footer .projects .gallery .item {
        width: calc(27%);
    }
    .footer .projects .gallery .item .control {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        margin-top: -42px;
        margin-top: calc(100vw * -173 / 3100);
    }
    .footer .projects .PlayButton {
        width: 70px;
        height: 70px;
        width: calc(100vw * 312 / 3100);
        height: calc(100vw * 312 / 3100);
    }
    .footer .projects .control .text {
        color: #89bde4;
        font-family: "NeutraDemi";
        font-size: 30px;
        margin: 0;
        margin-top: 5px;
        font-size: calc(100vw * 125 / 3100);
    }
    .footer .areas {
        font-size: 13px;
        font-size: calc(100vw * 51 / 3100);
    }
    .footer .areas .title {
        font-size: 20px;
        margin: 0;
        font-size: calc(100vw * 74 / 3100);
    }
    .footer .areas .florida {
        font-size: 16px;
        margin: 0;
        font-size: calc(100vw * 53 / 3100);
    }
    .footer .areas .serving {
        font-size: 12px;
        margin: 0;
        font-size: calc(100vw * 41 / 3100);
    }
    .footer .areas .maps {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        column-gap: 25px;
        column-gap: calc(100vw * 134 / 3100);
        margin-top: calc(100vw * 57 / 3100);
    }
    .footer .areas .maps .map img {
        width: calc(100vw * 836 / 3100);
    }
    .footer .areas .maps .map {
        margin: 0;
        font-size: calc(100vw * 62 / 3100);
    }
    .footer .areas .maps .text {
        margin-top: 10px;
    }
    .footer .areas .maps .text .red {
        font-size: 11px;
        font-size: calc(100vw * 38 / 3100);
    }
    .footer .phone {
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 0;
        font-size: calc(100vw * 150 / 3100);
    }
    .footer .mexican {
        line-height: 1;
        font-size: calc(100vw * 101 / 3100);
    }
    .footer .fifty {
        margin: 0;
        line-height: 1;
        font-size: calc(100vw * 81 / 3100);
    }
    .footer .menu a {
        font-size: 13px;
        font-size: calc(100vw * 47 / 3100);
    }
    .footer .specialists {
        font-size: 18px;
        margin-top: 10px;
        font-size: calc(100vw * 62 / 3100);
    }
    .footer .locations {
        font-size: calc(100vw * 33 / 3100);
    }
    
    
    body.underlying {
        background-image: url("images/bg-underlying.jpg") , url("images/bg-underlying-main.jpg");
        background-size: 100% calc(100vw * 8000 / 3100), 100% auto;
        background-position: bottom 0px center , top calc(100vw * 630 / 3100) center;
        
        background-image: url("images/bg-underlying-main.png") , url("images/bg-underlying.jpg");
        background-size: 100% auto , 100% calc(100vw * 8000 / 3100);
        background-position: top calc(100vw * 630 / 3100) center , bottom 0px center ;
    }
    .underlying .main {
        width: calc(100vw * 2370 / 3100);
        margin: auto;
        padding-bottom: calc(100vw * 400 / 3100);
        xxmin-height: calc(100vw * 3900 / 3100);
    }
    .underlying h1 {
        font-size: calc(100vw * 200 / 3100);
        margin-top: calc(100vw * 150 / 3100);
        margin-bottom: calc(100vw * 40 / 3100);
    }
    .underlying .subtitle {
        font-size: calc(100vw * 88 / 3100);
        margin-bottom: calc(100vw * 100 / 3100);
    }
    
    .galleryPopup { 
        width: calc(100vh - 80px);
        height: calc(100vh - 80px);
        padding: 30px;
    }
    .galleryPopup .slideshow {
        width: calc(100vh - 140px);
        height: calc(100vh - 140px);
    }
    .galleryPopup .prevnext span {
        left: 30px;
        padding: 20px 15px;
        padding-bottom: 15px;
    }
    .galleryPopup .prevnext span.nextControl {
        right: 30px;
    }
    .galleryPopup .prevnext span img {
        width: 20px;
    }
    .galleryPopup .slide-pager {
        margin-top: -40px;
    }
    .galleryPopup .slide-pager span {
        width: 15px;
        height: 15px;
    }
}

@media all and (min-width: 900px) {
    .topbar .phoneservices .services {
        margin-top: calc(100vw * 12 / 3100);
    }    
}
@media all and (min-width: 1024px) {
    .topbar .phoneservices .services {
        margin-top: calc(100vw * -6 / 3100);
    }    
}
@media all and (min-width: 1360px) {
    .topbar .phoneservices .services {
        margin-top: calc(100vw * -28 / 3100);
    }    
}
@media all and (min-width: 1440px) {
    .topbar .phoneservices .services {
        margin-top: calc(100vw * -40 / 3100);
    }    
}
@media all and (min-width: 2600px) {
    .topbar .phoneservices .services {
        margin-top: calc(100vw * -50 / 3100);
    }    
}
@media all and (min-width: 3100px) {
    .topbar .phoneservices .services {
        margin-top: calc(100vw * -60 / 3100);
    }    
}