@font-face {
    font-family: Roboto;
    src: local("Roboto"),
    url("/fonts/Roboto-Thin.ttf");
    
}

@font-face {
    font-family: Roboto;
    src: local("Roboto"), url("/fonts/Roboto-LightItalic.ttf");
    font-style: Italic;
}


.body {
  margin: 0;
  font-family: "Verdana", "Arial" sans-serif;
  font-size: 14px;
    color: 333;
  

}

h1 {
    margin: 0;
   font-family: Roboto;
    src: url(fonts/Roboto-Thin.ttf);
}

*,
*:before,
*:after
{
box-sizing: border-box;
}

/* container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}



/* header .....................*/

.header{
  
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #2f4f4f;

}


.header.fixed {
    height: auto;
    
   position: fixed;
    
    background-color: #2f4f4f;
    
  
    
}

.header.fixed .header__inner {
    padding-top: 5px;
    padding-bottom: 5px;
    
    border-bottom: 0;
}




.header__inner {
    margin: 0 20px;
    display: flex;
    justify-content: space-between;
      padding-top: 5px;
    padding-bottom: 5px;
    align-items: center;
    
    
 
}

.header__phone {
    font-family: Roboto;
    src: url(fonts/Roboto-Thin.ttf);
    font-size: 40px;
    font-weight: 400;
    display: flex;
    color: #ffffff;
}


/* nav ........................*/

.nav {
    font-family: Roboto;
    src: url(fonts/Roboto-Thin.ttf);
    display: flex;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.nav__link {
    margin-left: 30px;
    color: #ffffff;
;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.1s linear;
}

.nav__link:first-child {
    margin-left: 0;
}

.nav__link:hover {
    opacity: 1;
}


/* icon */
.icon__phone {
    margin-right: 10px;
}

.icon__whatsapp {
    margin-right: 10px;
}



/* intro ....................*/

.intro {
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 680px;
    padding-top: 100px;
    
    background: url(images/intro.jpg) center no-repeat;
    background-size: cover;
}

.intro__title {
    margin: 0 0 0 20px;
    font-family: Roboto;
    src: url(/fonts/Roboto-Thin.ttf); 
    font-size: 40px;
    line-height: 1.5;
    text-transform: uppercase;
    text-align: left;
    color: #ffffff;
   
    
}


.intro__subtitle {
    margin: 0 0 50px 20px;
   
    font-family: Roboto; src: url(/fonts/Roboto-LightItalic.ttf);
    font-size: 20px;
    color: #ffffff;
}



.intro__inner {
    width: 100%;
    max-width: 600px;
   
}





/* Button .................... */

.btn {
    margin-left: 20px;
    display: inline-block;
    vertical-align: top;
    font-family: inherit;
    font-size: 14px;
    color: #ffffff;
    padding: 14 40;
    border-radius: 3px;
    border: 0;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    font-family: Roboto; src: url(/fonts/Roboto-LightItalic.ttf);
    transition: background 0.1s linear;
}

.btn--red {
  background-color: darkslategray;
}

.btn--red:hover {
    background-color: #1a2626;
}



/* Features .................. */

.features {
    display: flex;
    flex-wrap: wrap;
    margin: 100px 0;
}

.features__item {
    width: 33.33333%;
    padding: 0 40px;
    margin: 25px 0;
    text-align: center;
}


.features__btn {
    width: 100%;
    text-align: center;
}

.features__icon {
    margin-bottom: 20px;
}

.features__title {
    font-family: Roboto;
    src: url(/fonts/Roboto-Thin.ttf);
    font-size: 15px;
    color: rgb(47, 79, 79);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.features__text {
    font-family: Roboto;
    src: url(/fonts/Roboto-Thin.ttf);
    font-size: 15px;
    line-height: 1.5;
    color: #151313;
}


/* Works ...................... */

.works {
    display: flex;
    flex-wrap: wrap;
}

.works__item {
    width: 25%;
    height: 298px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    position: relative;
    overflow: hidden;
}

.works__item:hover .works__content {
    opacity: 1;
}

.works__photo {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    
    transform: translate3d(-50%, -50%, 0);
}

.works__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    
    background-color: rgba(47, 79, 79, 0.9);
    
    opacity: 0;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    
    transition: opacity 0.2s linear;
}

.work__title {
    font-family: Roboto;
    src: url(/fonts/Roboto-Thin.ttf);
    font-size: 30px;
    margin-bottom: 5px;
    color: #ffffff;
    text-transform: uppercase;
}

.work__text {
     font-family: Roboto;
    src: url(/fonts/Roboto-Thin.ttf);
    font-size: 20px;
    color: #ffffff;
    padding: 20px;
}

/* Partners */

.partners {
    display: flex;
    flex-wrap: wrap;
}

.partners__item {
     width: 25%;
    height: 113px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    position: relative;
    overflow: hidden;

}

.partners__logo {
     position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    
    transform: translate3d(-50%, -50%, 0);
}











/* Footer*/

.footer {
    padding: 70px 0;
    background-color: darkslategray;
}


.footer__inner {
    display: flex;
    flex-wrap: wrap;
}


.footer__block {
    width: 30%;
    
    text-align: center;
}

.footer__title {
    
    font-family: Roboto;
    src: url(/fonts/Roboto-Thin.ttf);
    margin-bottom: 10px;
    
    font-size: 14px;
    
    color: #ffffff;
    text-transform: uppercase;
}

.footer__adress {
    font-family: Roboto;
    src: url(/fonts/Roboto-Thin.ttf);
    
    font-size: 14px;
    
    font-style: normal;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
    
}




/* button-up ............. */

.upbtn {
    opacity: 0.8;
    z-index: 9999;
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: -80px;
    right: 20px;
    cursor: pointer;
    border:3px solid #BFE2FF;
    transition: all .7s ease-in-out;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: darkslategray;
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ0NC44MTkgNDQ0LjgxOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjgxOSA0NDQuODE5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTQzMy45NjgsMjc4LjY1N0wyNDguMzg3LDkyLjc5Yy03LjQxOS03LjA0NC0xNi4wOC0xMC41NjYtMjUuOTc3LTEwLjU2NmMtMTAuMDg4LDAtMTguNjUyLDMuNTIxLTI1LjY5NywxMC41NjYgICBMMTAuODQ4LDI3OC42NTdDMy42MTUsMjg1Ljg4NywwLDI5NC41NDksMCwzMDQuNjM3YzAsMTAuMjgsMy42MTksMTguODQzLDEwLjg0OCwyNS42OTNsMjEuNDExLDIxLjQxMyAgIGM2Ljg1NCw3LjIzLDE1LjQyLDEwLjg1MiwyNS42OTcsMTAuODUyYzEwLjI3OCwwLDE4Ljg0Mi0zLjYyMSwyNS42OTctMTAuODUyTDIyMi40MSwyMTMuMjcxTDM2MS4xNjgsMzUxLjc0ICAgYzYuODQ4LDcuMjI4LDE1LjQxMywxMC44NTIsMjUuNywxMC44NTJjMTAuMDgyLDAsMTguNzQ3LTMuNjI0LDI1Ljk3NS0xMC44NTJsMjEuNDA5LTIxLjQxMiAgIGM3LjA0My03LjA0MywxMC41NjctMTUuNjA4LDEwLjU2Ny0yNS42OTNDNDQ0LjgxOSwyOTQuNTQ1LDQ0MS4yMDUsMjg1Ljg4NCw0MzMuOTY4LDI3OC42NTd6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==)
}
.upbtn:hover {
    opacity: 1;
    background-color: #1a2626;
}


/* Burger .................*/

.burger {
    display: none;
    padding: 15px 0;
    background: none;
    border: 0;
    cursor: pointer;
    
    
}

    .burger__item {
        display: block;
        width: 30px;
        height: 3px;
        background-color: #333333;
        font-size: 0;
        color: transparent;
        position: relative;
    }

.burger__item:before,
.burger__item:after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #333333;
    position: absolute;
    left: 0;
    z-index: 1;
}

.burger__item:before {
    top: -8;
}

.burger__item:after {
    bottom: -8;
}

/* Social*/

.social {
    display: flex;
    justify-content: center;
}

.social__item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin-right: 4px;
    
    
    
   
    
    transition: background 0.1s linear;
    
}


.social__item:hover {
    background-color: #ffffff;
}


.social__item:hover .social__icon {
    fill: #4C75A3;
}

 .social__icon {
    display: block;
    width: 40px;
    height: 40px;
    fill: #666666;
}


.links {
   display: flex;
    justify-content: center; 
}






/* Children............... */

.children {
    margin: 20px 40px;
}






















/* Media .................. */








@media (max-width: 1200px) {
    
    /* header */
    
   
     .header__whatsapp {
      display: none;
    }
/* icon */
    .icon__phone {
        display: none;
    }
  
 
 
}




@media (max-width: 1040px) {
   
   
    
    
     /* nav */
    
    .nav {
        display: none;
        width: 50%;
        flex-direction: column;
        position: absolute;
        background-color: #2f4f4f;
        opacity: 0.75;
        right: 0;
        top: 100%;
        text-align: left;
    }
    
    
    .nav.show {
        display: flex;
    }
    
    .nav__link {
        padding: 10px 15px;
    }
    
           /* burger */
    
     .burger {
        display: block;
    }
    

    
        /* intro */
    .intro__title {
        font-size: 25px;
    }
} 



@media (max-width: 950px) {
/*  Works  */
.works__item {
        width: 50%;
    }
    
.features__item {
        width: 50%;
    }
    
    .partners__item {
        width: 50%;
    }

}





@media (max-width: 768px) {
     
     /* header */
    
    .header__phone {
        font-size: 30px;
    }
    
    
    /* intro */
    .intro {
        height: auto;
        padding-top: 160px;
        padding-bottom: 30px;
    }
   
    .intro__title {
        margin: 0;
       text-align: center;
    }
    
    .intro__subtitle {
        margin: 0;
        text-align: center;
    }
    
    
    .btn {
        margin-top: 20px;
    }
    

    
} 




@media (max-width: 460px) {
    
     /* header */
    
    .header__phone {
        font-size: 20px;
    }
    
    .footer__block {
           width: 100%;
       }
      .works__item {
        width: 100%;
    } 
    
    .features__item {
        width: 100%;
    }
    
    .partners__item {
        width: 100%
    }
} 


   @media (max-width: 380px) {
    
     /* header */
    
    .header__phone {
        font-size: 16px;
    }
    
        .footer__block {
           width: 100%;
       }
         
   
} 
    


   @media (max-width: 335px) {
    
     /* header */
    
    .header__phone {
        font-size: 14px;
    }
       
       
       .footer__block {
           width: 100%;
       }
           
   
}