@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed&family=Roboto+Condensed:wght@400&display=swap');

body{font-family: 'Fira Sans Condensed', sans-serif; color: #555555;}
a{text-decoration: none; color: #000000; cursor: pointer;}
ul{padding: 0;}
h1, h2, h3, h4, #header-menu{font-family: 'Roboto Condensed', sans-serif;}
h1{color: #000000; margin-bottom: 0;}
h1:after{content: url("../file/line.png"); padding-bottom: 10px; position: relative; top: -15px; display: block;}
.frame{width: 1280px; margin: 0 auto;}
.button{font-size: 16px; padding: 12px 30px; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; font-family: arial; display: inline-block;}
.color-1{color: #fe0000;}
.color-1-bg, .button{background-color: #fe0000; color: #ffffff;}
.color-2{color: #131d27;}
.color-2-bg, .button:hover{background-color: #131d27; color: #aaaaaa;}
.color-3{color: #aaaaaa;}
.color-4{color: #284fa0;}
.color-4-bg{background-color: #284fa0; color: #ffffff;}

.learn-more .Text{display: inline-block; margin-right: 5px;}
.learn-more i{transition: 0.3s;}
.learn-more:hover i{margin-left: 10px;}
.contact-field{padding: 10px;}
.contact-field input[type="text"], .contact-field textarea{width: 100%; border: 3px solid #555555; padding: 10px 15px; box-sizing: border-box; outline: none; font-size: 20px;}
#contact-message{height: 140px;}

#search-page{ display: table; width: 80%; margin: 0 auto; list-style-type: none;}
#search-page li{border-bottom: 1px solid; padding-bottom: 10px;}
.search-title{color: #fe0000;}

/* menu */
#header{position: relative; z-index: 3;}
#header-menu{ width: 100%; top: 0; padding: 20px 40px; color: #000000; transition: 0.5s;}
#header-menu a{color: inherit;}
#header-menu.homemenu, #header-menu .sub-menu{position: absolute; color: #ffffff;}
#header-menu .languages{padding-top: 30px;}
#header-menu .languages a{ border-right: 1px solid #fe0000; padding: 0 5px;}
#header-menu .languages a:last-child{border: none;}
#header-menu .sub-menu .sub-item:hover a, #header-menu .sub-item.active{color: #000000;}
.sticky #header-menu{position: fixed; top: -200px; transform: 0.5s; background-color: #ffffff; color: inherit;}
.active #header-menu{top: 0;}
.sticky #header-menu a,.sticky #header-menu .button{color: inherit;}
#header-menu #menu-header{padding: 20px 0;}
#header-menu #logo{width: 200px; height: 70px; display: block;}
#header-menu .menu-item a{color: inherit; font-size: 18px;}
#header-menu .menu-item.active, #header-menu .menu-item:hover{color: #fe0000;}
.logger a{font-size: 13px; margin: 0 2px; display: block;}
.menu .menu-content .menu-item{display: inline-block; margin: 0 20px;}

#menu-header .menu-item{display: inline-block; margin: 0 15px; font-size: 14px;}
#menu-header .with-sub:after{content: ">"; font-size: 12px; position: absolute; right: -12px; top: 13px; transform: rotate(90deg); color: inherit;}
#menu-header .menu-item a{padding: 10px 0; display: block;}
#menu-header .menu-item{position: relative;}
#menu-header .sub-menu{visibility: hidden; position: absolute; top: 150%; left: -40px; padding: 0;}
#menu-header .sub-menu:before{content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: #fe0000; opacity: 0.9; box-shadow: 0 0 3px #aaaaaa;}
#menu-header .sub-menu a{position: relative; font-size: 16px; padding: 6px 0;}
#menu-header .sub-menu .sub-item{padding: 5px 15px; width: 120px;  text-align: center;}
#menu-header .with-sub:hover .sub-menu{visibility: visible; top: 100%; transition: 0.3s;}

/* socials */
#socials{top: 50%; left: 0; transform: translateY(-50%); padding: 0; margin: 0; z-index: 2;}
#socials li{list-style-type: none; background: #fe0000; margin: 3px 0;  width: 30px; transition: 0.3s; padding-right: 10px;}
#socials li:hover{width: 40px;}
#socials li a{ font-size: 20px; color: #ffffff; display: block; padding: 10px 0; width: 100%; transition: 0.2s; text-align: right;}

/* HOME */

/* home carousel */
.carousel{height: 700px; margin-bottom: 200px;}
.carousel .jew{left: 0; width: 100%; padding-top: 200px; color: #fff;}
.carousel .active.jew{font-size: 18px; line-height: 22px; z-index: 2;}
.carousel .jew .slide-title{font-size: 24px; transition: 0.5s;}
.carousel .jew .slide-text{font-size: 10px; position: relative; letter-spacing: 2px;}
.carousel .active.jew .slide-title{font-size: 48px; line-height: 60px;}
.carousel .active.jew .slide-text{font-size: 14px;}
.carousel .jew .slide-content{padding: 10px 0; width: 70%;}
.carousel .jew:before, .carousel .jew:after{padding-top: 40px; position: relative; z-index: 2; width: 70%; left: 15%; border-width: 15px; border-color: #fe0000; box-sizing: border-box;}
.carousel .number-right .changer-item{color: #ffffff;}
.carousel .jew .background{top: 0!important; opacity: 1;}
.carousel .jew .carousel-background .image{position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: grayscale(0.8) brightness(0.6);}
.carousel .carousel-png{height: 400px;}

/* home services */
.service-home-content{box-shadow: 0 0 10px #aaaaaa; padding: 20px; overflow: hidden; transition: 0.5s; display: block; height: 200px;}
.service-number{height: 40px; width: 40px; font-size: 24px;}
.service-number .background:first-child{ transform: rotate(25deg) skew(3deg, 2deg);}
.service-number .background:nth-child(2){ transform: rotate(25deg) skew(14deg, -12deg); opacity: 0.5; }
.service-home h3{padding-left: 60px;}
.service-home .service-home-content .service-overlay{bottom: -25%; left: -25%; top: unset; width: 0; height: 0; transition: 0.5s; border-radius: 100%;}
.service-home .service-home-content .learn-more{transition: 0.5s;}
.service-home .service-home-content:hover, .service-home .service-home-content:hover .learn-more{color: #ffffff;}
.service-home .service-home-content:hover .service-overlay{width: 150%; height: 150%; }

/* home media */
#home-media{margin: 100px 0;}
#home-media #home-video .File{position: relative; top: -50px;}
#home-media #play-video{top: 50%; left: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); cursor: pointer; visibility: visible; opacity: 1; transition: 0.5s;}
#home-media #play-video.hidden{visibility: hidden; opacity: 0; height: 150px; width: 150px;}

/* home clients */
#home-clients h1{margin-bottom: 30px;}
.slider{overflow: hidden; width: 100%; height: 250px; position: relative;}
#client-slider .slider-content .slider-item-content{width: 250px;}
.slider .slider-content .slider-item .client-file{width: 150px; height: 150px;}

/* Equipment */
.equipment-item{margin-bottom: 40px;}
.equipment-item .equipment-title{margin: 0; }
.equipment-item .equipment-text{padding-left: 60px; border-left: 3px solid #fe0000; margin: 50px 0;}
.equipment-item .equipment-file{height: 500px;}
.equipment-item:nth-child(odd) .equipment-file{float: right;}

/* Services */
.service-listing{display: flex; flex-direction: row; flex-wrap: wrap;}
.service-text{margin: 20px 0;}
.service-preview .service-container{box-shadow: 0 0 10px #aaaaaa; display: block;}
.service-preview .service-file{height: 200px; }
.service-preview .service-number{top: 50px; left: 50px;}
.service-preview .service-content h3{margin: 0;}

.service-item{margin-bottom: 150px; padding-bottom: 50px;}
.service-item .service-content{color: #999999; padding-left: 100px; top: 100px;}
.service-item .service-content h1{margin: 0;}

/* Media */
#media .media-preview, .media .media-embed{height: 400px;}
#media .media-title{transition: 0.5s; overflow: hidden;}
#media .media-title .media-name{opacity: 0;}
#media .media-title:hover .media-name{opacity: 1; transition: 1s;}
#media .media-title .background{bottom: -25%; left: -25%; top: unset; width: 0; height: 0; transition: 0.5s; border-radius: 100%;}
#media .media-title:hover .background{width: 150%; height: 150%; }

.embed-preview{height: 100px; width: 200px;}
.embed-preview iframe, .media iframe{width: 100%; height: 100%;}

/* About us */
#team .team-heading, #client h1{margin-top: 100px;}
#team .team-file{height: 400px;}
#team .team-file .team-contacts{ padding: 30px; opacity: 0;}
#team .team-file:hover .team-contacts{opacity: 1; transition: 0.5s;}

#team .team-socials li{display: inline-block;margin: 0 5px; top: 50%; position: relative; transition: 0.5s;}
#team .team-socials li a{display: block; width: 40px; line-height: 40px;height: 40px;font-size: 20px; color: #ffffff; background-color: #fe0000;}
#team .team-file:hover .team-socials li{top: 40%;}
.team-item .team-title{margin-top: 0;}

#client .client-file{width: 150px; height: 150px;}
#client-single .client-item .client-file{ height: 300px;}

/* Contact */
.contact-socials{list-style-type: none;}
.contact-socials li{display: inline-block; margin: 0 10px; font-size: 24px;}
.contact-socials li a{color: #fe0000;}

/* procedure-cj-motion */
.eu-project-files{list-style-type: numeric; padding-left: 20px;}
#eu-project-files{height: auto;}
#recovery-and-resillience{display: flex; justify-content: flex-end; align-items: center;}
#recovery-and-resillience-text{font-size: 18px;}
#recovery-and-resillience-logo{height: 90px; width: 140px;}
#eu-project-files:hover #recovery-and-resillience-logo .image{animation: rotate-plan 3s;}
@keyframes rotate-plan{from{transform: rotate(0deg);} to {transform: rotate(360deg);}}
.eu-project-files a:hover{font-weight: bold; color: floralwhite;font-size: 17px;}
#eu-finances-logo{max-width: 400px; margin-bottom: 40px;}

/* footer */
#subfooter{padding: 400px 0 50px; margin-top: 70px;}
#subfooter #footer-overlay{background-image: linear-gradient(to top, #131d27 50%, transparent);}
#subfooter .menu-item{display: block; margin: 0;}
#subfooter .menu-item a:before{content: ""; width: 5px; height: 5px; display: inline-block; background-color: red; margin: 0 10px 3px 0;}
#subfooter a{color: white;}
#subfooter .with-sub:after{content: "";}
#subfooter .with-sub:hover .sub-menu{display: none;}
#subfooter .sub-menu{display: none;}
#subfooter #search #find{padding: 9px 15px; font-size: 18px; outline: none;}
#subfooter #footer-socials{margin: 60px 0 20px; border-bottom: 1px solid; padding-bottom: 20px; font-size: 28px;}
#subfooter #footer-socials a{margin: 0 5px;}
#eu-procedure-button{padding: 0 20px 20px 0;}

@media(max-width: 1280px){
    .frame{width: 90%;}
}

@media(max-width: 1080px){
    #header #menu-header a{color: #000000;}
    #header #mobile-container{width: 100%;}
    #header-menu #logo{float: right;}
    #header #mobile-open{position: absolute; top: 8px; left: 0;width: 50px; height: 50px; overflow: hidden;}
    #header #mobile-open ul{width: 80%; padding: 0; margin: 0; position: absolute; left: 10%; transition: 0.5s;}
    #header #mobile-open ul li{display: block; height: 1px; width: 100%; background-color: #fe0000; margin: 11px 0; border-radius: 1px;}
    #header #mobile-open span{font-size: 46px; color: #fe0000; position: absolute; left: 110%; transition: 0.5s; width: 70%; height: 70%; top: 15%; display: block;}
    #header #mobile-open.open ul{left: -110%;}
    #header #mobile-open.open span{left: 15%;}
    
    #header-menu-wrapper{display: block; position: fixed; top: 100px; width: 100%; height: calc(100% - 100px); background-color: #fff; left: -100%; transition: 0.5s; overflow-y: auto;}
    #header-menu-wrapper .menu-content{display: block; position: relative;}
    #header-menu-wrapper.open{left: 0;}
    #header-menu-bottom{padding-bottom: 30px; display: block;}
    #header-menu .languages{padding: 0;}
    
    #header #menu-header .menu-item{display: block; padding: 8px 0; border-bottom: 1px solid; width: 70%; margin: 0; left: 15%;}
    #header #menu-header .sub-menu{display: none;}
    #header #menu-header .with-sub:after{content: none; display: none;}
    
    .service-item .service-content{width: 60%;}
    .equipment-item .equipment-file .image{object-fit: cover;}
    
    #media .media-title{transition: 0s; position: absolute; width: 100%; height: 60px; bottom: 0; top: unset;}
    #media .media-title .media-name{opacity: 1; font-size: 18px;}
    #media .media-title .background{width: 100%; height: 100%; bottom: 0%; border-radius: 0; left: 0;}
    
    .carousel .active.jew .slide-title{font-size: 38px; line-height: 46px;}
    .carousel .carousel-text{width: 100%;}
}

@media(max-width: 768px){
    .carousel .jew .slide-content{width: 90%;}
    .carousel .jew:before, .carousel .jew:after{width: 90%; left: 5%;}
    
    #footer, #footer .text-right{text-align: center;}
    .service-item{margin-bottom: 30px;}
    .service-item .service-file{position: relative; height: 350px;}
    .service-item .service-content{ top: 0; padding-left: 30px; width: 100%;}
    .carousel .number-right{display: none;}
    .equipment-item .equipment-file{height: 300px;}
    .service-home-content{height: auto;}
    
}

@media(max-width: 600px){
    .carousel{height: 1000px;}
}

@media(max-width: 460px){
    .carousel .jew .carousel-text{padding: 10px;}
    .carousel .jew .slide-text{width: 90%; left: 5%;}
    .service-item .service-file{position: relative; height: 250px;}
    .team-content{padding: 40px 0;}
    #recovery-and-resillience-text{font-size: 13px;}
    #recovery-and-resillience-logo{height: 60px; width: 110px;}
}

@media(max-width: 320px){
    #recovery-and-resillience{display: block; text-align: center;}
    #recovery-and-resillience-logo{margin: 0 auto;}
}