/* roboto-regular - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/roboto-v30-greek_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-500 - greek_latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/roboto-v30-greek_latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-700 - greek_latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/roboto-v30-greek_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-900 - greek_latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url('/fonts/roboto-v30-greek_latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

body{
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto';
}
h1,h2,h3,h4,h5,ul{margin: 0px;padding: 0px;}
ul{padding-left:0px!important;}
p{margin: 1rem 0rem!important;}

#pagewrap{margin: 0px 80px;}

.espa{text-align: right;position: relative;margin-top: 30px;}
.espa img{width: 300px;}

.more-btn{
    display: block;
    width: 200px;
    padding: 10px 0px;
    background-color: #DE323B;
    text-decoration: none;
    color: #fff;
    text-align: center;
}
.more-btn:hover{
    background-color: #fff;
    color: #DE323B;
    border: 1px solid #DE323B;
}

.menuholder{width:100%;border-bottom: 1px solid #000;padding: 20px 0px;display: flex;background-color: #fff;}
.computer{width:100%;padding: 20px 0px;display: flex;background-color: #fff;}

#menuholder-left{width: 15%; float:left;}
#menuholder-left img{width: 80px;}

#menuholder-center{width: 70%;float: left;text-align: center;border-left: 1px solid #000;border-right: 1px solid #000;}
#menuholder-center ul{list-style: none;}
#menuholder-center ul li{display: inline-block;}
#menuholder-center ul li a{margin-right: 20px;text-transform: uppercase;text-decoration: none;color: #000;font-weight: 500;font-size: 18px;}
#menuholder-center ul li a:hover{border-bottom: 2px solid red;}
#menuholder-center .menu-menu-1-container, #menuholder-center .menu-menu-1-en-container{padding-top: 30px;}

#menuholder-right{width: 15%;float: right;text-align: center;margin: auto 0;}
#menuholder-right .iglossa{padding-left: 30px;}
#menuholder-right .iglossa li{padding-right: 15px;}
.social-header{display: inline-flex;}
.social-header a{margin: auto;}
#menuholder-right a{padding-right: 30px;text-decoration: none;}
#menuholder-right .iglossa a{padding-right: 10px;}
.social-header a:nth-child(2){padding-right: 0px!important;}
.iglossa ul li a{color: #000;text-transform: uppercase;}
.mobile{width: 100%;}
.menuholder-mobile-left{width: 50%;float: left;text-align: left;}
.menuholder-mobile-right{width: 50%;float: right;}
.menuholder-mobile-left img{max-width: 100%;width: 50px;}
#menu-button{
    width: 40px;
    cursor: pointer;
    position: relative;
    font-size: 12px;
    background: transparent;
    color: #000;
    font-weight: 600;
    cursor: pointer;
    float: right;
    z-index: 100;
    transition: opacity .25s ease;
}
#menu-button span{
    background: #DE323B;
    border: none;
    height: 3px;
    width: 0px;
    position: absolute;
    transition: all .35s ease;
    cursor: pointer;
    z-index: 100;
}
#menu-button span:nth-child(1){
    width: 40px;
    top: 10px;
}
#menu-button span:nth-child(2){
    width: 40px;
    top: 20px;
}
#menu-button span:nth-child(3){
    width: 40px;
    top: 30px;
}
/*front-page starts*/
.section-swiper{
    padding-top: 100px;
}
.section-swiper .swiper {
    width: 100%;
    height: 900px;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-we-are{
    padding: 100px 0px;
    max-width: 100%;
    margin: 0 auto;
}
.section-we-are #text div{
    height: 15px;
}
.section-we-are #title h1{
    font-size: 50px;
    font-weight: 400;
    text-transform: uppercase;
    color: #000;
    text-align: center;
}
.section-we-are #text p{
    font-size: 20px;
    font-weight: 400;
    color: #000;
    line-height: 1.5;
}
.section-last-projects{
    margin: 0px 0px 100px 0px;
}
#last-projects-top{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 0;
    padding: 100px 0px;
    opacity: 0.8;
}
#last-projects-top .title{
    text-align: center;
}
#last-projects-top .title h1{
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-size: 50px;
    position: relative;
    text-align: center;
}
#last-projects-top .title a{
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
}
#last-projects-top .title a:hover{
    border: 2px solid #133d71;
    padding: 10px;
}
#last-projects-bottom{
    position: relative;
    top: -50px;
    width: 100%;
}
.row{margin: 0px;padding: 0px;}
#project{padding-bottom: 30px;position: relative;}
#project .image a:hover{opacity: 0.7;}
#project img{width: 100%;}
#project .image-text{
    position: absolute;
    bottom: 40px;
    left: 30px;
}

.section-last-news{
    width: 100%;
}
.section-last-news .news-image img{width: 100%;}
.section-last-news .news-text{padding-top: 15px;}
.footer{
    width: 100%;
    border-top: 1px solid #000;
    margin: 50px 0px 30px 0px;
    padding: 35px 0px 0px 0px;
}

.footer .row{ border-bottom: 1px solid #000;}
.footer .image-footer img{width: 50%;}
.footer .footer-bottom, .footer-menu, .footer-social{padding-top: 30px;}
.footer .title-footer a{text-decoration: none;color: #000;}
.footer .title-footer a:hover{color: #000;}
.footer .title-footer h5{font-weight: 700;}
.footer .footer-bottom span{font-weight: 700;}
.footer .footer-bottom a{text-decoration: none;color: #000;}
.footer .footer-menu ul{list-style: none;padding: 0;margin: 0;}
.footer .footer-menu ul li{padding-bottom: 20px;}
.footer .footer-menu ul li a{text-decoration: none;color: #000;text-transform: uppercase;}
.footer .footer-menu ul li a:hover{border-bottom: 2px solid red;}
.footer-social a{text-decoration: none;}
.footer-social a:first-child{margin-right: 50px;}
.footer-end{width: 100%;padding-top: 35px;}
#end-left{width:33%;float:left;}
#end-center{width: 33%;float: left;}
#end-center img{width: 100%;display: block;}
#end-right{width:33%;float:right;text-align: right;}
.footer-end a, #informations .elements a{text-decoration: none;color: #000;}
.footer-end a:hover, #informations .elements a:hover{color: #000;}
/*overlay code starts*/
.overlay {
    position: fixed;
    background: #000 !important;
    color: #fff !important;
    top: 0;
    left: 0;
    right: 0;
    height: 0%;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: auto;
    z-index: 99;
    display: flex;
    justify-content: space-between;
}

.overlay-left {
    width: 49%;
    float: left;
    background-color: #000;
}

.open {
    height: 100%;
}

.overlay nav {
    max-width: 100%;
    margin: 150px 0 0 20%;
}

.overlay ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: block;
    position: relative;
}

.overlay ul li {
    display: block;
    position: relative;
    opacity: 1;
}
.overlay li:hover{
    animation: fadeInRight 1s ease forwards;
    animation-delay: .35s;
}

.overlay ul li a {
    display: block;
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    color: #FFFFFF;
    margin-bottom: 25px;
    transition: all 1s ease;
    text-transform: uppercase;
    text-decoration: none;
}
.overlay ul li a:hover{
   color: #DE323B;
}
#menu-button.active .top{
    transform: translateY(12px) translateX(0) rotate(45deg);
    background: #DE323B !important;
}
#menu-button.active .middle{
    display: none;
}
#menu-button.active .bottom{
    transform: translateY(-8px) translateX(0) rotate(-45deg);
    background: #DE323B !important;
}
.social-overlay{border-top: 1px solid #DE323B;padding-top: 30px;}
.social-overlay a, .overlay .iglossa a{margin-right: 20px;}
.social-overlay a{text-decoration: none;}
.social-overlay a img{width: 30px;}
.wpml-ls-legacy-list-horizontal a, .wpml-ls-legacy-list-horizontal{padding: 0px!important;}
.overlay .iglossa{margin-top: 30px;}

@media only screen and (max-width:645px) and (min-width:375px){
    .overlay nav{margin: 150px 0 0 10%;}
}
@media only screen and (max-width:374px) and (min-width:200px){
    .overlay nav{margin: 110px 0 0 10%;}
}
/*overlay code ends*/

/*front-page ends*/

/*about-us starts*/
.section-2-elements{
    width: 100%;
    display: flex;
    margin: 100px 0px 0px 0px;
}
#element-left{width: 50%;float: left;margin: auto;}
#element-left .text{width: 800px;max-width: 100%;}
#element-right img{width: 100%;}
#element-right{width: 50%;float: right;padding-left: 50px;margin: auto;}
.section-about-swiper{margin-bottom: 100px;}
.section-people{margin-bottom: 100px;}
.section-people h1{text-align: left;margin-bottom: 40px;}
.parousiasi-people{width: 100%;display: flex;}
#person-left{width: 50%;float: left;}
#element-left img{width: 100%;}
#person-right{width: 50%;float: right;padding-left: 40px;}
.section-2-elements .text h1{margin-bottom: 40px;}
.section-people-link{padding-top: 15px;}
.section-people-link a{text-transform: uppercase;text-decoration: none;color: #000;font-size: 20px;font-weight: 700;}
.section-people-link a:hover{color: #000;border-bottom: 2px solid #DE323B;}
@media only screen and (max-width:822px) and (min-width:200px){
    .section-people-link{text-align: center;margin: 10px 0px;}
}
/*about-us ends*/

/*services starts*/
.section-top-title{margin: 50px 0px;}
#service .title{padding-bottom: 20px;font-size: 20px;font-weight: 700;}
.parousiasi-services{margin: 50px 0px;}
#service{margin-bottom: 30px;}
.section-about-us-link{text-align: center;}
.section-about-us-link a{text-transform: uppercase;font-size: 20px;font-weight:700;color: #000;text-decoration: none;}
.section-about-us-link a:hover{border-bottom: 2px solid #DE323B;color: #000;}
/*services ends*/

/*projects,news starts*/
#project .item-image, .item-image-news{background-repeat:no-repeat;background-position: center;background-size: cover;height: 400px;}
#project .item-image:hover, .item-image-news:hover{opacity: 0.8;}
#project .item-text, .item-text-news{text-decoration: none;color: #000;font-weight: 500;font-size: 20px;margin-top: 15px;}
.news-inside .periexomeno pre{text-align: center;}
/*projects,news ends*/

/*project inside starts*/
.news-inside{width: 100%;}
.news-inside .periexomeno{display: flex;}
.news-inside h1{margin: 50px 0 0 0;}
.news-inside .periexomeno #periexomeno-left{width: 50%;float: left;}
.news-inside .periexomeno #periexomeno-left img{width: 100%;display: block;}
.news-inside .periexomeno #periexomeno-right{width:50%;float: right;margin: auto;padding-left: 40px;}
.swiper-button-next, .swiper-button-prev{color: #7f7f7f!important;}
.project-inside, .parousiasi-news{margin: 50px 0px;}
.project-inside #project-inside-right{margin: auto;padding-left: 40px;}
.project-inside #project-inside-right .right-text h1{margin-bottom: 50px;}

.news-inside .periexomeno{padding: 50px 0px 0px 0px;}
html :where(img[class*="wp-image-"]){width: 100%!important;}

@media only screen and (max-width:960px) and (min-width:200px){
    .news-inside .periexomeno{display: block;}
    .news-inside .periexomeno #periexomeno-left{width: 100%;}
    .news-inside .periexomeno #periexomeno-right{width: 100%;padding-top: 40px;padding-left: 0px;}
}

@media only screen and (max-width:874px) and (min-width:200px){
    .news-inside{width: 100%;}
}
/*project inside ends*/

/*page contact starts*/
.elements a{color: #000;text-decoration: none;}
.elements span{font-weight: 700;}
.social-media{margin-top: 50px;}
.social-media h3{margin-bottom: 40px;}
.social-media a{padding-right: 20px;text-decoration: none;}
.contact{margin-bottom: 50px;}
.ff-btn{background-color: #DE323B!important;}
@media only screen and (max-width:758px) and (min-width:200px){
    #contact-form{margin-top:50px}
}
/*page contact ends*/

/*media starts*/
@media only screen and (max-width:1329px) and (min-width:1122px){
    .parousiasi-people #element-left img{width: 80%;}
    .section-2-elements #element-right img{width: 100%;}
}
@media only screen and (max-width:1121px) and (min-width:710px){
    .parousiasi-people #element-left img{width: 90%;}
    #menuholder-center ul li a{margin-right: 10px;}
}
@media only screen and (max-width:1454px) and (min-width:1059px){
    .social-header a:nth-child(1){padding-left: 15px!important;}
}
@media only screen and (min-width:1270px){
    .menuholder .mobile{display: none;}
}
@media only screen and (max-width:1269px){
    #pagewrap{margin: 0px 15px;}
    .menuholder .computer{display: none;}
}
@media only screen and (max-width:1338px) and (min-width:200px){
    .section-2-elements, .section-people, .parousiasi-people{display: block;}
    #element-left,#element-right{width: 100%;}
    #element-left .text{width: 100%;}
    #element-right{padding: 30px 0 0 0;margin: 0px;}
}
@media only screen and (max-width:1600px) and (min-width:1000px){
    .section-swiper .swiper{height: 700px;}
}
@media only screen and (max-width:999px) and (min-width:100px){
    .swiper{height: 500px;}
}
@media only screen and (max-width:1000px) and (min-width:844px){
    #element-left img, #element-right img{width: 90%;}
}
@media only screen and (max-width:648px) and (min-width:522px){
    .section-people h1{font-size: 25px;}
}
@media only screen and (max-width:521px) and (min-width:200px){
    .section-people h1{font-size: 20px;}
}

@media only screen and (max-width:984px) and (min-width:200px){
    .footer .image-footer img{width: 20%;}
    #footer-elements{width: 100%;margin-bottom: 40px;}
}
@media only screen and (max-width:1418px) and (min-width:200px){
    #project .image-text h1{font-size: 30px!important;}
}
@media only screen and (max-width:767px) and (min-width:550px){
    #last-projects-bottom #project, .section-last-news #news{width: 80%;margin: 0 auto;}
    .section-last-projects{margin: 0px;}
    .section-we-are #title, .section-last-news #title{margin-bottom: 30px;}
    .section-last-news #title h1{font-size: 40px;}
    .section-last-news #news-parousiasi{margin-bottom: 40px;}
    .section-last-news #news-parousiasi .news-text h5{font-weight: 500;}
}
@media only screen and (max-width:549px) and (min-width:200px){
    #last-projects-bottom #project, .section-last-news #news{width: 95%;margin: 0 auto;}
    .section-last-projects{margin: 0px;}
    .section-we-are #title, .section-last-news #title{margin-bottom: 30px;}
    .section-last-news #title h1{font-size: 40px;}
    .section-last-news #news-parousiasi{margin-bottom: 40px;}
    .section-last-news #news-parousiasi .news-text h5{font-weight: 500;}
}
@media only screen and (max-width:552px) and (min-width:200px){
    #last-projects-top .title h1{font-size: 30px;}

}
@media only screen and (max-width:1390px) and (min-width:200px){
    .project-inside .row{display: block!important;}
    #project-inside-left, #project-inside-right{width: 100%;}
    #project-inside-right{padding-top: 50px;padding-left: 0px;margin: 0px;}
    .project-inside #project-inside-right{padding-left: 0px;}
    .project-inside #project-inside-right{margin: 0px;padding-left: 10px;}
} 
@media only screen and (max-width:994px) and (min-width:200px){
    .news-inside .periexomeno{width: 100%;}
}
@media only screen and (max-width:480px) and (min-width:200px){
    .section-we-are #title h1{font-size: 35px;}
}
@media only screen and (max-width:940px) and (min-width:733px){
    #project .item-image, .item-image-news{height:250px}
}
@media only screen and (max-width:997px) and (min-width:550px){
    .section-swiper .swiper{height: 500px;}
    #news-front{margin-bottom: 30px;}
}
@media only screen and (max-width:549px) and (min-width:200px){
    .section-swiper{padding-top: 50px;}
    .section-swiper .swiper{height: 300px;}
    #news-front{margin-bottom: 30px;}
}
@media only screen and (max-width:849px) and (min-width:200px){
    .footer-end, #end-left, #end-right{width:100%;text-align: left;}
    #end-right, #end-center{padding-top: 20px;}
}
/*media ends*/