/*@ * Box Theme * Created by : Ahmed Eissa * website : www.ahmedessa.net * behance : https://www.behance.net/3essa */
/* Table of Content ================================================== - Google fonts & font family - - General - - typography - - Preloader - - Header - - box intro section - - Portfoilo section - - Footer - - About page - - Services page - - contact page - - Portfolio single page - - Responsive media queries - */
/* Google fonts & font family ==================================================*/
@import url(https://fonts.googleapis.com/css?family=Poppins:400,500,600,700);
/* General ==================================================*/
 html, body {
     height: 100%;
     font-family: 'Poppins', sans-serif;
     line-height: 1.8;
     color: #999;
     display: flex;
     flex-direction: column;
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100%;
}

 .no-padding {
     padding-left: 0;
     padding-right: 0;
}
 .no-padding [class^="col-"] {
     padding-left: 0;
     padding-right: 0;
}
 .main-container {
     padding: 100px 0;
}
 .center {
     text-align: center;
}
 a {
     -webkit-transition: all .3s;
     transition: all .3s 
}
 .uppercase {
     text-transform: uppercase;
}
 .h-30 {
     height: 30px 
}
 .h-10 {
     height: 10px 
}
 .color {
     color: #ffbf00;
     font-size: 11px;
}
/* typography ==================================================*/
 h1 {
     color: #393939;
     font-size: 60px;
     text-transform: uppercase;
}
 h3 {
     color: #393939;
}
 h5 {
     color: #ffbf00;
     position: relative;
     z-index: 1;
     /* color: #fff; */
     margin-top: 10px;
     font-size: 1.5em;
}
/* preloader ==================================================*/
 #preloader {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #000;
    /* change if the mask should be a color other than white */
     z-index: 1000;
    /* makes sure it stays on top */
}
 .pre-container {
     position: absolute;
     left: 50%;
     top: 50%;
     bottom: auto;
     right: auto;
     -webkit-transform: translateX(-50%) translateY(-50%);
     transform: translateX(-50%) translateY(-50%);
     text-align: center;
}
 .spinner {
     width: 40px;
     height: 40px;
     position: relative;
     margin: 100px auto;
}
 .double-bounce1, .double-bounce2 {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background-color: #ffbf00;
     opacity: 0.6;
     position: absolute;
     top: 0;
     left: 0;
     -webkit-animation: bounce 1.0s infinite ease-in-out;
     animation: bounce 1.0s infinite ease-in-out;
}
 .double-bounce2 {
     -webkit-animation-delay: -0.5s;
     animation-delay: -0.5s;
}
 @-webkit-keyframes bounce {
     0%, 100% {
         -webkit-transform: scale(0.0) 
    }
     50% {
         -webkit-transform: scale(1.0) 
    }
}
 @keyframes bounce {
     0%, 100% {
         transform: scale(0.0);
         -webkit-transform: scale(0.0);
    }
     50% {
         transform: scale(1.0);
         -webkit-transform: scale(1.0);
    }
}
/* headr ==================================================*/
 .box-header {
     position: absolute;
     top: 0;
     left: 0;
     background: rgba(0, 0, 0, 0.95);
     height: 70px;
     width: 100%;
     z-index: 3;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}
 .box-header {
     height: 100px;
     background: transparent;
     box-shadow: none;
}
 .box-header {
     -webkit-transition: background-color 0.3s;
     transition: background-color 0.3s;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
}
 .box-header.is-fixed {
     position: fixed;
     top: -80px;
     background-color: rgba(255, 255, 255, 0.96);
     -webkit-transition: -webkit-transform 0.3s;
     transition: -webkit-transform 0.3s;
     transition: transform 0.3s;
     transition: transform 0.3s, -webkit-transform 0.3s;
}
 .box-header.is-visible {
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
}
 .box-header.menu-is-open {
     background-color: rgba(0, 0, 0, 0.96);
}
 .box-logo {
     display: block;
     padding: 10px;
}
 .box-primary-nav-trigger {
     position: absolute;
     right: 0;
     top: 0;
     height: 200%;
     width: 200px;
     background-color: #fff;
}
 .box-primary-nav-trigger .box-menu-text {
     color: #c4c4c4;

     text-transform: uppercase;
     font-weight: 700;
     display: none;
}
 .box-primary-nav-trigger .box-menu-icon {
     display: inline-block;
     position: absolute;
     left: 50%;
     top: 50%;
     bottom: auto;
     right: auto;
     -webkit-transform: translateX(-50%) translateY(-50%);
     transform: translateX(-50%) translateY(-50%);
     width: 24px;
     height: 2px;
     background-color: #c4c4c4;
     -webkit-transition: background-color 0.3s;
     transition: background-color 0.3s;
     list-style: none;
}
 .box-primary-nav-trigger .box-menu-icon::before, .box-primary-nav-trigger .box-menu-icon:after {
     content: '';
     width: 100%;
     height: 100%;
     position: absolute;
     background-color: #c4c4c4;
     right: 0;
     -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
     -webkit-transition: top .3s, background-color 0s, -webkit-transform .3s;
     transition: top .3s, background-color 0s, -webkit-transform .3s;
     transition: transform .3s, top .3s, background-color 0s;
     transition: transform .3s, top .3s, background-color 0s, -webkit-transform .3s;
}
 .box-primary-nav-trigger .box-menu-icon::before {
     top: -5px;
}
 .box-primary-nav-trigger .box-menu-icon::after {
     top: 5px;
}
 .box-primary-nav-trigger .box-menu-icon.is-clicked {
     background-color: rgba(255, 255, 255, 0);
}
 .box-primary-nav-trigger .box-menu-icon.is-clicked::before, .box-primary-nav-trigger .box-menu-icon.is-clicked::after {
     background-color: #393939;
}
 .box-primary-nav-trigger .box-menu-icon.is-clicked::before {
     top: 0;
     -webkit-transform: rotate(135deg);
     transform: rotate(135deg);
}
 .box-primary-nav-trigger .box-menu-icon.is-clicked::after {
     top: 0;
     -webkit-transform: rotate(225deg);
     transform: rotate(225deg);
}
 .box-primary-nav-trigger {
     width: 130px;
     padding-left: 1em;
     background-color: transparent;
     height: 50px;
     line-height: 50px;
     right: 10px;
     top: 50%;
     bottom: auto;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
}
 .box-primary-nav-trigger .box-menu-text {
     display: inline-block;
}
 .box-primary-nav-trigger .box-menu-icon {
     left: auto;
     right: 1em;
     -webkit-transform: translateX(0) translateY(-50%);
     transform: translateX(0) translateY(-50%);
}
 .box-primary-nav {
     position: fixed;
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
     background: rgb(0, 0, 0, 0.96);
     z-index: 2;
     text-align: center;
     padding: 50px 0;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     -webkit-transform: translateY(-100%);
     transform: translateY(-100%);
     -webkit-transition-property: -webkit-transform;
     transition-property: -webkit-transform;
     transition-property: transform;
     transition-property: transform, -webkit-transform;
     -webkit-transition-duration: 0.4s;
     transition-duration: 0.4s;
     list-style: none;


}
 .box-primary-nav li {
     font-size: 22px;
     font-size: 1.375rem;
     font-weight: 300;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     margin: .2em 0;
     text-transform: capitalize;
     margin: 10px 0;
}
 .box-primary-nav a {
     display: inline-block;
     padding: .4em 1em;
     border-radius: 0.25em;
     -webkit-transition: all 0.2s;
     transition: all 0.2s;
     color: #fff;
     text-decoration: none;
     font-weight: bold;
}
 .box-primary-nav a:focus {
     outline: none;
}
 .no-touch .box-primary-nav a:hover {
     text-decoration: none;
     color: #ddd;
}
 .box-primary-nav .box-label {
     color: #ffbf00;
     text-transform: uppercase;
     font-weight: 700;
     font-size: 17px;
     margin: 2.4em 0 .8em;
}
 .box-primary-nav .box-social {
     display: inline-block;
     margin: 10px .4em;
}
 .box-primary-nav .box-social a {
     width: 30px;
     height: 30px;
     padding: 0;
     font-size: 30px 
}
 .box-primary-nav.is-visible {
     -webkit-transform: translateY(0);
     transform: translateY(0);
}
 .box-primary-nav {
     padding: 150px 0 0;
}
 .box-primary-nav li {
     font-size: 18px;
}
/* box-intro ==================================================*/
 .box-intro {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
 /*    text-align: center;
     display: table;
     height: 100vh;
     width: 100%;
     */
}
.table-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0; /* Убираем отступы */
    box-sizing: border-box;
}
 .box-intro em {
     font-style: normal;
     text-transform: uppercase 
}
 b i:last-child {
     color: #ffbf00 !important;
}
 .box-intro h5 {
     position: relative;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: #c4c4c4;
     line-height: 1.7 
}
/* mouse effect */
 .mouse {
     position: absolute;
     width: 22px;
     height: 42px;
     bottom: 40px;
     left: 50%;
     margin-left: -12px;
     border-radius: 15px;
     border: 2px solid #888;
     -webkit-animation: intro 1s;
     animation: intro 1s;
}
 .scroll {
     display: block;
     width: 3px;
     height: 3px;
     margin: 6px auto;
     border-radius: 4px;
     background: #888;
     -webkit-animation: finger 2s infinite;
     animation: finger 2s infinite;
}
 @-webkit-keyframes intro {
     0% {
         opacity: 0;
         -webkit-transform: translateY(40px);
         transform: translateY(40px);
    }
     100% {
         opacity: 1;
         -webkit-transform: translateY(0);
         transform: translateY(0);
    }
}
 @keyframes intro {
     0% {
         opacity: 0;
         -webkit-transform: translateY(40px);
         transform: translateY(40px);
    }
     100% {
         opacity: 1;
         -webkit-transform: translateY(0);
         transform: translateY(0);
    }
}
 @-webkit-keyframes finger {
     0% {
         opacity: 1;
    }
     100% {
         opacity: 0;
         -webkit-transform: translateY(20px);
         transform: translateY(20px);
    }
}
 @keyframes finger {
     0% {
         opacity: 1;
    }
     100% {
         opacity: 0;
         -webkit-transform: translateY(20px);
         transform: translateY(20px);
    }
}
/* text rotate */
 .box-headline {
    /* font-size: 60px;
     line-height: 0.5;
     color: #c4c4c4; */

     position: relative;
     z-index: 1;
     color:#c4c4c4;
     font-size: 3em;
     margin: 0;
}
 .box-words-wrapper {
     display: inline-block;
     position: relative;
}
 .box-words-wrapper b {
     /* display: inline-block;
     position: relative; */
     white-space: nowrap;
     /* left: 0;
     top: 0; */
}
 .box-words-wrapper b.is-visible {
     position: relative;
}
 .no-js .box-words-wrapper b {
     opacity: 0;
}
 .no-js .box-words-wrapper b.is-visible {
     opacity: 1;
}
 .box-headline.rotate-2 .box-words-wrapper {
     -webkit-perspective: 150px;
     perspective: 150px;
}
 .box-headline.rotate-2 i, .box-headline.rotate-2 em {
     display: inline-block;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
}
 .box-headline.rotate-2 b {
     opacity: 0;
}
 .box-headline.rotate-2 i {
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     -webkit-transform: translateZ(-20px) rotateX(90deg);
     transform: translateZ(-20px) rotateX(90deg);
     opacity: 0;
}
 .is-visible .box-headline.rotate-2 i {
     opacity: 1;
}
 .box-headline.rotate-2 i.in {
     -webkit-animation: box-rotate-2-in 0.4s forwards;
     animation: box-rotate-2-in 0.4s forwards;
}
 .box-headline.rotate-2 i.out {
     -webkit-animation: box-rotate-2-out 0.4s forwards;
     animation: box-rotate-2-out 0.4s forwards;
}
 .box-headline.rotate-2 em {
     -webkit-transform: translateZ(20px);
     transform: translateZ(20px);
}
 .no-csstransitions .box-headline.rotate-2 i {
     -webkit-transform: rotateX(0deg);
     transform: rotateX(0deg);
     opacity: 0;
}
 .no-csstransitions .box-headline.rotate-2 i em {
     -webkit-transform: scale(1);
     transform: scale(1);
}
 .no-csstransitions .box-headline.rotate-2 .is-visible i {
     opacity: 1;
}
 @-webkit-keyframes box-rotate-2-in {
     0% {
         opacity: 0;
         -webkit-transform: translateZ(-20px) rotateX(90deg);
    }
     60% {
         opacity: 1;
         -webkit-transform: translateZ(-20px) rotateX(-10deg);
    }
     100% {
         opacity: 1;
         -webkit-transform: translateZ(-20px) rotateX(0deg);
    }
}
 @keyframes box-rotate-2-in {
     0% {
         opacity: 0;
         -webkit-transform: translateZ(-20px) rotateX(90deg);
         transform: translateZ(-20px) rotateX(90deg);
    }
     60% {
         opacity: 1;
         -webkit-transform: translateZ(-20px) rotateX(-10deg);
         transform: translateZ(-20px) rotateX(-10deg);
    }
     100% {
         opacity: 1;
         -webkit-transform: translateZ(-20px) rotateX(0deg);
         transform: translateZ(-20px) rotateX(0deg);
    }
}
 @-webkit-keyframes box-rotate-2-out {
     0% {
         opacity: 1;
         -webkit-transform: translateZ(-20px) rotateX(0);
    }
     60% {
         opacity: 0;
         -webkit-transform: translateZ(-20px) rotateX(-100deg);
    }
     100% {
         opacity: 0;
         -webkit-transform: translateZ(-20px) rotateX(-90deg);
    }
}
 @keyframes box-rotate-2-out {
     0% {
         opacity: 1;
         -webkit-transform: translateZ(-20px) rotateX(0);
         transform: translateZ(-20px) rotateX(0);
    }
     60% {
         opacity: 0;
         -webkit-transform: translateZ(-20px) rotateX(-100deg);
         transform: translateZ(-20px) rotateX(-100deg);
    }
     100% {
         opacity: 0;
         -webkit-transform: translateZ(-20px) rotateX(-90deg);
         transform: translateZ(-20px) rotateX(-90deg);
    }
}
/* portfolio section ==================================================*/
 .portfolio .categories-grid span {
     font-size: 30px;
     margin-bottom: 30px;
     display: inline-block;
}
 .portfolio .categories-grid .categories ul li {
     list-style: none;
     margin: 20px 0;
}
 .portfolio .categories-grid .categories ul li a {
     display: inline-block;
     color: #60606e;
     padding: 0 10px;
     margin: 0 10px;
     -webkit-transition: all .2s ease-in-out .2s;
     transition: all .2s ease-in-out .2s;
}
 .portfolio .categories-grid .categories ul li a:hover, .portfolio .categories-grid .categories ul li a:focus {
     text-decoration: none;
}
 .portfolio .categories-grid .categories ul li a.active {
     margin-left: 0;
     background-color: #ffbf00;
     padding: 0px 20px;
     color: white;
     border-radius: 25px;
     text-decoration: none;
}
 .portfolio_filter {
     padding-left: 0;
}
 .portfolio_item {
     position: relative;
     overflow: hidden;
     display: block;
}
 .portfolio_item .portfolio_item_hover {
     position: absolute;
     top: 0px;
     left: 0px;
     height: 100%;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: rgba(0, 0, 0, .8);
     -webkit-transform: translate(-100%);
     transform: translate(-100%);
     opacity: 0;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
}
 .portfolio_item .portfolio_item_hover .item_info {
     text-align: center;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     padding: 10px;
     width: 100%;
     font-weight: bold;
}
 .portfolio_item .portfolio_item_hover .item_info span {
     display: block;
     color: #fff;
     font-size: 18px;
     -webkit-transform: translateX(-100px);
     transform: translateX(-100px);
     -webkit-transition: all .2s ease-in-out .2s;
     transition: all .2s ease-in-out .2s;
     opacity: 0;
}
 .portfolio_item .portfolio_item_hover .item_info em {
     font-style: normal;
     display: inline-block;
     background-color: #ffbf00;
     padding: 5px 20px;
     border-radius: 25px;
     color: #333;
     margin-top: 10px;
     -webkit-transform: translateX(-100px);
     transform: translateX(-100px);
     -webkit-transition: all .3s ease-in-out .3s;
     transition: all .3s ease-in-out .3s;
     opacity: 0;
     font-size: 10px;
     letter-spacing: 2px;
}
 .portfolio_item:hover .portfolio_item_hover {
     opacity: 1;
     -webkit-transform: translateX(0);
     transform: translateX(0);
}
 .portfolio_item:hover .item_info em, .portfolio_item:hover .item_info span {
     opacity: 1;
     -webkit-transform: translateX(0);
     transform: translateX(0);
}
 .portfolio .categories-grid .categories ul li {
     float: left;
}
 .portfolio .categories-grid .categories ul li a {
     padding: 0 10px;
     -webkit-transition: all .2s ease-in-out .2s;
     transition: all .2s ease-in-out .2s;
}
 .portfolio_filter {
     padding-left: 0;
     display: inline-block;
     margin: 0 auto;
     text-align: center;
     margin-bottom: 50px;
}
 .portfolio-inner {
     padding-bottom: 0 !important;
     padding-top: 55px;
}
/* footer ==================================================*/
 footer {
     display: flex;
     min-height: 10vh;
     flex-direction: column;
     flex: 1 0 auto;
     padding: 30px 0;
     text-align: center;
     background: #f5f5f5 
}
 footer1 {
     display: flex;
     min-height: 27vh;
     flex-direction: column;
     flex: 1 0 auto;
     padding: 30px 0;
     text-align: center;
     background: #f5f5f5 
}
 .copyright {
     font-size: 30px;
     color: #ccc;
     margin-bottom: 10;
}
 footer img {
     margin: 0 auto;
}
/* backto top ==================================================*/
 .cd-top {
     display: inline-block;
     height: 40px;
     width: 40px;
     position: fixed;
     bottom: 20px;
     line-height: 40px;
     font-size: 20px;
     right: 10px;
     text-align: center;
     color: #fff;
     background: rgba(255, 191, 0, 0.8);
     visibility: hidden;
     opacity: 0;
     -webkit-transition: opacity .3s 0s, visibility 0s .3s;
     transition: opacity .3s 0s, visibility 0s .3s;
}
 .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
     -webkit-transition: opacity .3s 0s, visibility 0s 0s;
     transition: opacity .3s 0s, visibility 0s 0s;
}
 .cd-top.cd-is-visible {
    /* the button becomes visible */
     visibility: visible;
     opacity: 1;
}
 .cd-top.cd-fade-out {
     opacity: .5;
}
 .no-touch .cd-top:hover, .no-touch .cd-top:focus {
     background-color: #ffbf00;
     opacity: 1;
     color: #fff;
}
/* About page ==================================================*/
 .top-bar {
     color: #333;
     padding: 20px 0 20px;
     background: -webkit-linear-gradient( rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url(../img/01.jpg);
     background: linear-gradient( rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url(../img/01.jpg);
     background-size: cover;
     background-attachment: fixed;
     background-position: center center;
     text-align: center;
}
 .top-bar h1 {
     font-size: 60px;
     text-transform: uppercase;
     font-weight: 700;
     color: #999;
     line-height: 50px;
}
 .top-bar p {
     font-size: 15px;
     text-transform: uppercase;
     font-weight: 500;
     color: #777;
}
 .top-bar p a {
     color: #777;
}
 .top-bar p a:hover, .top-bar p a:focus {
     color: #555;
     text-decoration: none;
}
 .social-ul {
     list-style: none;
     display: inline-block;
     padding-left: 0;
}
 .social-ul li {
     margin: 0 10px;
     float: left;
}
 .social-ul li a {
     font-size: 25px;
     color: #555;
     -webkit-transition: all .3s;
     transition: all .3s;
}
 .social-ul li a:hover {
     color: #888;
}
/* Services page ==================================================*/
 .size-50 {
     font-size: 50px;
}
 .service-box {
     margin-bottom: 30px;
}
 .service-box h3 {
     margin-top: 0;
}
/* contact page ==================================================*/
 .details-text i {
     margin-right: 10px;
}
 .textarea-contact {
     height: 200px;
     width: 100%;
     border: solid 1px rgba(0, 0, 0, .1);
     position: relative;
}
 .textarea-contact textarea {
     height: 100%;
     width: 100%;
     border: 0;
     padding: 20px;
     background-color: transparent;
     float: left;
     z-index: 2;
     font-size: 14px;
     color: #9a9a9a;
     resize: none;
}
 .textarea-contact > span {
     position: absolute;
     top: 20px;
     left: 20px;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     font-size: 12px;
     text-transform: uppercase;
     color: #cdcdcd;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     z-index: 1;
}
 .input-contact {
     height: 40px;
     width: 100%;
     border: solid 1px rgba(0, 0, 0, .1);
     position: relative;
     margin-bottom: 30px;
}
 .input-contact input[type="text"] {
     height: 100%;
     width: 100%;
     border: 0;
     padding: 0 20px;
     float: left;
     position: relative;
     background-color: transparent;
     z-index: 2;
     font-size: 14px;
     color: #9a9a9a;
}
 .input-contact > span {
     position: absolute;
     top: 50%;
     left: 20px;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     font-size: 12px;
     text-transform: uppercase;
     color: #cdcdcd;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     z-index: 1;
}
 .input-contact > span.active, .textarea-contact > span.active {
     color: #ffbf00;
     font-size: 10px;
     top: 0px;
     left: 5px;
     background-color: #fff;
     padding: 5px 
}
 input:focus, textarea:focus {
     outline: none;
}
 .contact-info {
     margin-top: 20px;
}
 .contact-info i {
     height: 30px;
     width: 30px;
     display: inline-block;
     background: #ffbf00;
     text-align: center;
     line-height: 33px;
     margin-right: 10px;
     color: #fff;
     font-size: 21px;
}
 .contact-info p {
     display: inline-block;
     margin-right: 20px;
}
 .btn-box {
     background: #ffbf00;
     padding: 10px 50px;
     border-radius: 0;
     color: #fff;
     margin-top: 20px;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-weight: 500;
}
 .btn-box:hover, .btn-box:focus {
     background: #F5B700;
     color: #fff;
}
/* single project page ==================================================*/
 .cat-ul {
     padding-left: 0;
     list-style: none 
}
 .cat-ul li i {
     margin-right: 10px;
     color: #ffbf00;
}
/* Responsive media queries ==================================================*/
 @media (max-width: 991px) {
     .portfolio .categories-grid span {
         margin-bottom: 0;
         text-align: center;
         width: 100%;
    }
     .portfolio .categories-grid .categories ul li {
         text-align: center;
    }
     .portfolio .categories-grid .categories ul li a {
         margin-left: 0;
    }
     .col-md-6 h3 {
         margin-top: 30px;
    }
}
@media (max-width: 768px) {
    .image-container {
        grid-template-columns: 1fr; /* Один столбик на мобильных устройствах */
    }

    .image {
        height: auto; /* Автоматическая высота для адаптивности */
    }

    /* Обеспечиваем отступы и центрирование для хедера */
    .header {
        padding: 10px;
    }

    body {
        padding: 10px;
        box-sizing: border-box;
    }
    .box-intro {
        height: auto; /* Высота автоматически подстраивается */
        padding: 20px; /* Добавляем отступы */
    }
    .box-headline {
        font-size: 2em;
    }
    .fullscreen-bg__video {
        width: 100%;
        height: auto;
        min-height: 100%;
        object-fit: cover;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .table-cell {
        padding: 20px;
    }
    .box-primary-nav-trigger {        
        .box-menu-text {
            display: none;
        } 
    }
    .mouse {
        display: none;
      
   }
   .calculator {
    width: 100%; /* Почти вся ширина экрана на мобильных устройствах */
}
}
 /* @media only screen and (max-width: 670px) {
     .box-headline {
         font-size: 100px;
    }
     .box-intro h5 {
         font-size: 12px;
    }
     .box-primary-nav a {
         padding: 5px 1em;
         font-size: 14px;
    }
     .box-primary-nav {
         padding: 80px 0 0;
    }
     .box-primary-nav .box-social a {
         font-size: 23px;
    }
     .top-bar h1 {
         font-size: 40px;
         line-height: 30px;
    }
     .portfolio .categories-grid .categories ul li {
         float: none;
    }
}
 @media only screen and (max-width: 520px) {
     .box-headline {
         font-size: 80px;
    }
     .box-intro h5 {
         font-size: 12px;
    }
     .main-container {
         padding: 50px 0;
    }
}
 @media only screen and (max-width: 420px) {
     .box-headline {
         font-size: 50px;
    }
     .box-intro h5 {
         font-size: 12px;
    }
     .top-bar h1 {
         font-size: 30px;
         line-height: 30px;
    }
} */
 @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300&subset=latin,cyrillic);
 body {
     padding:0;
     margin: 0;
     font-family: 'Roboto Condensed', sans-serif;
     display: flex;
     flex-direction: column;
}
 .fullscreen-bg {
     overflow: hidden;
     z-index: -100;
     position: relative;
     height: 100%;
     width: 100%;
     padding-top:45%;
}

/* Стили для видео */
.fullscreen-bg__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -1;
}
 .overlay {
     background: rgba(0,0,0,0.6);
     position: absolute;
     top:0;
     left:0;
     width: 100%;
     height: 100%;
     z-index: 4;
}
 .content {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     flex: 1 0 auto;
}
 .content p {
     text-align: justify;
     font-size: 20px;
}
 /* @media (max-width: 767px) {
     .fullscreen-bg {
         background: url('../images/logo.jpg') center center / cover no-repeat;
    }

     .overlay h1 {
         font-size: 40px;
    }
} */
/* Основные стили для изображений */
.image {
    width: 100%;
    height: auto;
}

/* Стили для контейнера изображений */
.image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
}

/* Медиазапросы для экранов больше 1920 пикселей */
@media (min-width: 1920px) {
    .image-container {
        display: flex;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 0px;
    }

    .image {
        max-width: none;
    }
}
/**/
 .backToSitehereBtn{
     display: block;
     width: 150px;
     height: 150px;
     background: #01BC78;
     text-align: center;
     line-height: 170px;
     font-size: 20px;
     border-radius: 50%;
     color:#fff;
     position: absolute;
     text-decoration: none;
     top:-40px;
     left:-40px;
     transform:rotate(-45deg) scale(1);
     transition:all 0.25s linear;
}
 .backToSitehereBtn:hover {
     text-decoration: none;
     top:-10px;
     left:-10px;
     transform:rotate(-45deg) scale(1.3);
}
.calculator-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

.calculator {
    border: 1px solid #cccccc00;
    padding: 20px;
    border-radius: 15px;
    font-size: 16px;
    background-color: #f9f9f900;
    width: 50.67%; /* 2/3 ширины экрана */
    max-width: 800px; /* Максимальная ширина для крупных экранов */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.calculator h2 {
    margin-top: 0;
    font-size: 20px;
}

.calculator label,
.calculator input,
.calculator button,
.calculator p {
    display: block;
    margin: 10px auto; /* Центрирование с помощью автоматических отступов */
    width: 33.33%; /* 1/3 ширины блока калькулятора */
}

.calculator input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
}

.calculator button {
    padding: 10px;
    background-color: #ff6600;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 20 px;
}

.calculator button:hover {
    background-color: #cc5200;
}

@media (max-width: 768px) {
    .calculator {
        width: 90%; /* Почти вся ширина экрана на мобильных устройствах */
    }

    .calculator label,
    .calculator input,
    .calculator button,
    .calculator p {
        width: 90%; /* Почти вся ширина экрана на мобильных устройствах */
    }
}