@import "fonts/fonts.css";
body, div, h1, h2, h3, h4, h5, h6, p, ol, ul, blockquote{
    margin:0;
    padding:0;
}
html {
    scroll-behavior: smooth;
  }

img{
    width: 100%;
    height: auto;
}
a{
    text-decoration: none;
    color: inherit;
}

ul, ol{
    list-style: none;
}
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}
@font-face {
    font-family: ProximaNova-Regular, ProximaNova-Thin, ProximaNova-Semibold, ProximaNova-Light, ProximaNova-Black, ProximaNova-Extrabld, ProximaNova-Bold;
    src: url(assets/prox/fonts.css);
  }

body{
    font-family:  ProximaNova-Regular;
}
/*
header.main-header{
    position: fixed;
    top:0;
    left:0;
    height: 100vh;
    width: 100px;
    display: flex;
    border-right:1px solid #a1a1a1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
header.main-header .logo{
    margin-bottom: auto;
}
header.main-header h1{
    font-weight: 300;
    font-size:1em;
    writing-mode: vertical-lr;
    text-orientation: sideways-right;
    transform: rotate(180deg);
    margin-bottom: auto;
    letter-spacing: 2.3px;
}
*/

header{
    position: relative;
}

header .main-header{
    position: fixed;
    top:0;
    left:0;
    height: 100vh;
    width: 136px;
    display: flex;
    border-right:1px solid #a1a1a1;
    align-items: center;
    flex-direction: column;
    z-index: 10;
    background: #fff;
}
header .main-header .logo{
    margin-bottom: 100px;
}

header .main-header h1{
    font-weight: 300;
    font-size:1em;
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
    -webkit-text-orientation: sideways-right;
            text-orientation: sideways-right;
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
    
    letter-spacing: 2.3px;
}

@supports (display: grid) {
    header .main-header{
        justify-content: center;
    }
    header .main-header .logo{
        margin-bottom: auto;
        padding: 8px;
    }
    header .main-header h1{
        margin-bottom: auto;
    }
}

/****************   GENERAL     *********************/
.wrapper{
    margin-left:136px;
    padding: 0 2em;
}

.wrapper-left{
    margin-left:136px;
    padding-left:2em;
}

.wrapper-np{
    margin-left:136px;
}

.circle{
    position: relative;
    padding-left: 1.5em;
}
.circle:before{
    content: "";
    position: absolute;
    left: 0;
    width:1em;
    height: 1em;
    border: 1px solid;
    border-radius: 50%;
}

.rombus{
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 4px;
}

.rombus-left, .rombus-right{
    width: 0;
    height: 0;
    display: inline-block;
    margin: 0;
    padding:0;
}

.rombus.small .rombus-left, .rombus.small .rombus-right{
    border-top: 55px solid transparent;
	border-bottom:55px solid transparent;
}

.rombus.small .rombus-left{
    border-right: 100px  solid #000;
    transform: translateX(5px);
}
.rombus.small .rombus-right{
    border-left: 100px  solid #000;
}

.rombus.large .rombus-left, .rombus.large .rombus-right{
    border-top: 95px solid transparent;
	border-bottom: 95px solid transparent;
}

.rombus.large .rombus-left{
    border-right: 165px  solid #000;
    transform: translateX(5px);
}
.rombus.large .rombus-right{
    border-left: 165px  solid #000;
}

.more a{
    padding: 0.5em 1em;
    display: inline-block;
    border:1px solid;
    position: relative;
    z-index: 1;
}

.shape-container{
    position: relative;
}

.shape-container a{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    left: 0;
    padding: 0.5em;
    text-decoration: underline;
    font-size: 21px;
}

.section-header, .page-header{
    font-family: ProximaNova-Bold;
    padding: 2em 0;
    font-size:3.3em;
}

.section-header.second-header{
    font-size: 3.1em;
    padding-bottom: 20px;
}

.page-header{
    padding:0.5em 0 0.5em 2rem;
    border-bottom:1px solid;
}

.slider-arrow{
    width: 92px;
}

.share-btn{
    display: flex;
    align-items: center;
}

.share-btn span{
    font-size: 20px;
    margin-right: 1em;
}

.share-btn .share-image{
    /* width: 64px; */
    /* height: 64px; */
    border-radius: 50%;
    /* background-color: #000; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.share-image a {
    flex: 1;
    margin-right: 15px;
    cursor: pointer;
}
.share-btn .share-image img{
    width: 33%;
}

.share-btn.responsive{
    display: none;
    margin: 60px 0;
}


/****************   NAVIGATION     *********************/
nav.main-navigation{
    border-bottom: 1px solid #a1a1a1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 136px;
}
nav.main-navigation ul{
    display: flex;
    font-family: ProximaNova-Semibold;
}
nav.main-navigation .search{
    width:65px;
    height:25px;
}
nav.main-navigation .search i{
    cursor: pointer;
}

nav.main-navigation .search .searchBox{
    position: absolute;
    top: 1rem;
    left: -300vw;
    z-index: 2;
    transition: left 0.5s;
    border: 1px solid;
    display: flex;
    width: calc(100vw - 200px);
}

nav.main-navigation .search .searchBox input{
    padding: 2rem;
    font-size: 32px;
    flex-grow: 10;
    outline: none;
    border: none;
}

nav.main-navigation .search .searchBox .searchBox-close{
    background-color: #000;
    font-size: 32px;
    color: #fff;
    padding: 2rem;
    display: block;
    cursor: pointer;
}

nav.main-navigation .search .searchBox .searchBox-close img{
    width: 26px;
}

nav.main-navigation .search .searchBox.show{
    left: calc(136px + 2rem);
}

.search i{
    font-size:1.5rem;
}

nav.main-navigation ul li{
    margin-right:1.775em;
    font-size:1.125em;
}

nav.main-navigation ul li:last-of-type{
    margin-right:0;
}

/*nav.main-navigation ul li:nth-of-type(odd){
    display:none;
}*/

/****************   HERO     *********************/

.hero-wrapper{
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 150px;
}
.hero-container{
    width: 300%;
    display: flex;
    transition: left 0.5s;
    position: relative;
    left: 0;
    justify-content: space-between;
    padding-bottom: 110px;
}

/*  ie style    */

#hero .hero-content {
	position: relative;
	text-align: center;
    white-space: nowrap;
    font-size: 0;
	overflow: hidden;
}

.hero-card{
    width:100%;
    position: relative;
    height: 656px;
	display: flex;
}

.hero-card .hero-card-content{
    margin-top: 100px;
    margin-left: 2rem;
    padding-right: 50px;
    width: 40%;
}

.hero-card .hero-card-image{
    width: 60%;
}
/*  regular style   */

@supports (display: grid) {
    .hero-card{
        display: grid;
        grid-template-columns: 2rem 1fr 50px 60%;
        grid-template-rows: 100px 30px 1fr 62px;
    }

    .hero-card .hero-card-content{
        grid-column: 2/3;
        grid-row: 2/-2;
        margin-left: 0;
        margin-top: 0;
        padding-right: 0;
        width: auto;
    } 

    .hero-card .hero-card-image{
        grid-column: -2/ -1;
        grid-row: 1 / -1;
        width: auto;
    }
}




.hero-card .hero-card-content h3{
    font-family: ProximaNova-Light;
    line-height: 24px;
    font-size: 26px;
    margin-bottom: 1rem;
}

.hero-card .hero-card-content p{
    font-family: ProximaNova-Bold;
    font-size: 3.3em;
    line-height: 0.9em;
    text-transform: uppercase;
}



.hero-card .hero-card-image img{
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.hero-card .hero-more{
    position: absolute;
    bottom: -135px;
    right: 50px;
    width: 350px;
    height: 220px;
}

.hero-controls{
    width: calc(100% - 20px - 60% - 50px);
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 100px;
    margin-left: 2rem;
}

.hero-controls .next-btn,.hero-controls .prev-btn{
	position: relative;
    cursor: pointer;
}
.hero-controls .next-btn.disable, .hero-controls .prev-btn.disable{
    opacity: 0.2;
}
.hero-controls .next-btn:hover:before{
    content: "ΕΠΟΜΕΝΟ";
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    font-size: 1em;
    left: -90px;
}
.hero-controls .prev-btn:hover:after{
    content: "ΠΡΟΗΓΟΥΜΕΝΟ";
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    font-size: 1em;
    margin-left: 10px;
}

/****************   ABOUT     *********************/

#about{
    border-bottom: 1px solid;
}

#about .about-container{
    background-color: #002342;
    padding: 2em;
    display: flex;
    color: #fff;
    margin: 1em 0 2em;
}

#about .about-container h2{
    font-size: 3.1em;
    padding: 0;
    padding-right: 2rem;
}

#about .about-container .about-content{
    border-left:1px solid #fff;
    padding-left:2rem;
    width: 45%;
}

#about .about-container .about-content p{
    font-size: 1.25em;
    line-height: 1.5em;
}

#about .about-container .about-content .btn-about{
    position: relative;
    margin-left: 5rem;
    margin-top: 2rem;
}

#about .about-container .about-content .btn-about:before{
    content: "";
    position: absolute;
    width:4rem;
    height: 1px;
    background-color: #fff;
    left: -5rem;
    top: 50%;
    transform: translateY(-50%);
}


#about .about-container .about-content .btn-about a:hover{
    color:#002342;
}

#about .about-container .about-content .btn-about a:after{
    content:"";
    width:calc(100% + 2px);
    height:0;
    position: absolute;
    left:-1px;
    bottom:-1px;
    transition: height 0.2s;
    background-color: #fff;
    z-index:-1;
}
#about .about-container .about-content .btn-about a:hover:after{
    height:calc(100% + 2px);
}


/****************   VIDEO     *********************/

#video{
    border-bottom: 1px solid;
	height: 518px;
	position: relative;    
}
.video-container{
    padding: 2em 0;
	height: 100%;
	overflow: hidden;
	display: flex;
    align-items: center;
	width: calc(3 * 420px);
    margin: auto;
}

.video-container .wrapper {
	margin-left: 0;
    padding: 0;
}

.video-container .wrapper > div {
	display: block;
    white-space: nowrap;
    font-size: 0;
	position: relative;
}

.video-container .wrapper > div.no-transtition {
	transition: none;
	-webkit-transition: none;
}

.video-container .wrapper > div.shifting {
  transition: all 300ms;
  -webkit-transition: all 300ms;
}

.video-container .wrapper > .video-controls {
	white-space: normal;
    height: 48px;
    position: absolute;
    bottom: 45px;
    width: 100%;
    left: 0;
}

.video-container .wrapper > .video-controls > div {
    height: 100%;
    display: inline-block;
	position: absolute;
	transition: all 300ms;
	-webkit-transition: all 300ms;
	cursor: pointer;
}

.video-container .wrapper > .video-controls > div.disable {
	opacity: 0.2;
}

.video-container .wrapper > .video-controls .next-btn {
    right: 40px;
}

.video-container .wrapper > .video-controls .next-btn::before,
.video-container .wrapper > .video-controls .prev-btn::after {
    position: absolute;
    font-size: 16px;
    top: 14px;
    font-weight: bold;
}

.video-container .wrapper > .video-controls .next-btn::before {
	content: "ΕΠΟΜΕΝΟ";
    left: -74px;
}

.video-container .wrapper > .video-controls .prev-btn {
    left: 40px;
}

.video-container .wrapper > .video-controls .prev-btn::after {
    content: "ΠΡΟΗΓΟΥΜΕΝΟ";
	right: -118px;
}

.video-container .wrapper > .video-controls > div > img {
    height: 100%;
}

.video-container .wrapper > div > .video-details {
    display: inline-block;
    vertical-align: top;
    width: 420px;
    height: 280px;
	position: relative;
	z-index: -1;
	opacity: 0.5;
	transition: all 300ms;
	-webkit-transition: all 300ms;
}

.video-container .wrapper > div > .video-details.large {
	width: 100%;
    height: 450px;
	opacity: 1;
	z-index: 10;
}

.video-container .wrapper > div > .video-details.active #play {
	  opacity: 1;
  }
  
  .video-container .wrapper > div > .video-details.active .video-img .cta:first-of-type {
	  top: -20%;
  }
  
  .video-container .wrapper > div > .video-details.active .video-img #play::before {
	  top: 0;
  }
  
  .video-container .wrapper > div > .video-details.active .video-img #play::after {
	  bottom: 0;
  }
  
  .video-container .wrapper > div > .video-details.active .video-img #play::before,
  .video-container .wrapper > div > .video-details.active .video-img #play::after {
      height: 34%;
  }
  
  .video-container .wrapper > div > .video-details.active .video-img .cta:last-of-type {
	  bottom: -20%;
  }

@media screen and (max-width: 1420px) {
	.video-container{
		width: calc(3 * 340px);
	}
	
	.video-container .wrapper > div > .video-details {
		width: 340px;
		height: 280px;
	}
	
	/* .video-img .cta {
		font-size: 17px;
	} */
	
	.video-container .wrapper > div > .video-details #play {
		font-size: 4rem;
	}
	
	.video-container .wrapper > div > .video-details .video-img .cta {
		font-size: 17px;
	}
	
	/* #video .video-container .attach-video {
		width: 680px;
	} */
}

@media screen and (max-width: 1300px) {
	.video-container{
		width: calc(3 * 320px);
	}
	
	.video-container .wrapper > div > .video-details {
		width: 320px;
		height: 260px;
	}
	
	.video-container .wrapper > .video-controls {
		height: 42px;
	}
	
	.video-container .wrapper > .video-controls .prev-btn {
		left: 10px;
	}
	
	.video-container .wrapper > .video-controls .next-btn {
		right: 10px;
	}
	
	.video-container .wrapper > .video-controls .next-btn::before, .video-container .wrapper > .video-controls .prev-btn::after {
		font-size: 14px;
		top: 12px;
	}
	
	.video-container .wrapper > .video-controls .next-btn::before {
		left: -64px;
	}
	
	.video-container .wrapper > .video-controls .prev-btn::after {
		right: -100px;
	}
	
	/* #video .video-container .attach-video {
		width: 640px;
		height: 416px;
	} */
}

@media screen and (max-width: 1160px) {
	.video-container .wrapper > .video-controls {
		height: 36px;
	}
	
	.video-container .wrapper > .video-controls .prev-btn {
		left: 0px;
	}
	
	.video-container .wrapper > .video-controls .next-btn {
		right: 0px;
	}
	
	.video-container .wrapper > .video-controls .next-btn::before, .video-container .wrapper > .video-controls .prev-btn::after {
		font-size: 13px;
		top: 10px;
	}
	
	.video-container .wrapper > .video-controls .prev-btn::after {
		right: -84px;
	}
	
	.video-container .wrapper > .video-controls .next-btn::before {
		left: -54px;
	}
}

@media screen and (max-width: 1100px) {
	.video-container{
		width: calc(3 * 280px);
	}
	
	.video-container .wrapper > div > .video-details {
		width: 280px;
		height: 220px;
	}
	
	.video-container .wrapper > div > .video-details i#play::before,
	.video-container .wrapper > div > .video-details i#play::after {
		height: 22%;
	}
	
	.video-container .wrapper > div > .video-details .video-img .cta {
		font-size: 14px;
		letter-spacing: 1.5px;
	}
	
	/* #video .video-container .attach-video {
		width: 560px;
		height: 352px;
	} */
}

@media screen and (max-width: 900px) {
	.video-container{
		width: calc(3 * 250px);
	}
	
	.video-container .wrapper > div > .video-details {
		width: 250px;
		height: 210px;
	}
	
	#video .video-container attach-video {
		width: 500px;
		height: 336px;
	}
}

@media screen and (max-width: 800px) {
	.video-container{
		width: calc(2 * 344px);
	}
	
	.video-container .wrapper > div > .video-details {
		width: 320px;
		height: 240px;
	}
	
	#video .video-container .wrapper > div > .video-details.active{
		-webkit-transform: scale(1.3);
			-ms-transform: scale(1.3);
				transform: scale(1.3);
	}
	.video-container .wrapper > div > .video-details.active #play {
		-webkit-transform: scaleX(0.5) scaleY(0.6);
			-ms-transform: scaleX(0.5) scaleY(0.6);
				transform: scaleX(0.5) scaleY(0.6);
	}
	
	.video-container .wrapper > div > .video-details #play {
		font-size: 3rem;
	}
	
	.video-container .wrapper > div > .video-details i#play::before,
	.video-container .wrapper > div > .video-details i#play::after {
		height: 20%;
	}
	
	.video-container .wrapper > div > .video-details .video-img .cta {
		font-size: 17px;
		letter-spacing: 1.9px;
	}
	
	/* #video .video-container .attach-video {
		width: 416px;
		height: 312px;
	} */
}

@media screen and (max-width: 730px) {
	.video-container{
		width: calc(2 * 300px);
	}
	
	.video-container .wrapper > div > .video-details {
		width: 280px;
		height: 220px;
	}
	
	/* #video .video-container .attach-video {
		width: 364px;
		height: 286px;
	} */
}

@media screen and (max-width: 650px) {
	.video-container{
		width: calc(2 * 258px);
	}
	
	.video-container .wrapper > div > .video-details {
		width: 240px;
		height: 180px;
	}
	
	.video-container .wrapper > div > .video-details.large {
		height: 300px;
	}
	
	.video-container .wrapper > div > .video-details #play {
		font-size: 4rem;
	}
	
	.video-container .wrapper > div > .video-details .video-img .cta {
		font-size: 20px;
		letter-spacing: 1.9px;
	}
	
	/* #video .video-container .attach-video {
		width: 312px;
		height: 234px;
	} */
}

@media screen and (max-width: 580px) {
	.video-container{
		width: 300px;
	}
	
	.video-container.large {
		width: 100%;
	}
	
	.video-container .wrapper > div > .video-details {
		width: 300px;
		height: 260px;
	}
	
	#video .video-container .wrapper > div > .video-details.active	{
		-webkit-transform: scale(1);
		    -ms-transform: scale(1);
		        transform: scale(1);
	}
	
	.video-container .wrapper > div > .video-details.active #play {
		-webkit-transform: scaleX(0.6) scaleY(0.6);
		    -ms-transform: scaleX(0.6) scaleY(0.6);
		        transform: scaleX(0.6) scaleY(0.6);
	}
	
	/* #video .video-container .attach-video {
		width: 300px;
		height: 260px;
	} */
}

@media screen and (max-width: 480px) {
	.video-container{
		width: 270px;
	}
	
	.video-container .wrapper > div > .video-details {
		width: 270px;
		height: 230px;
	}
	
	/* #video .video-container .attach-video {
		width: 270px;
		height: 230px;
	} */
}

@media screen and (max-width: 350px) {
	.video-container .wrapper > .video-controls .prev-btn::after,
	.video-container .wrapper > .video-controls .next-btn::before {
		content: none;
	}
}


.video-container .wrapper > div > .video-details.active {
	opacity: 1;
	z-index: 10;
}

 .video-container .wrapper > div > .video-details.active {
	-webkit-transform: scale(2, 1.6);
	    -ms-transform: scale(2, 1.6);
	        transform: scale(2, 1.6);
}

 .video-container .wrapper > div > .video-details.active #play {
	-webkit-transform: scaleX(0.5) scaleY(0.6);
	    -ms-transform: scaleX(0.5) scaleY(0.6);
	        transform: scaleX(0.5) scaleY(0.6);
}

.video-container .attach-video {
	height: 448px;
    width: 840px;
	transition: all 300ms;
    -webkit-transition: all 300ms;
}

.video-container .attach-video {
	width: 100%;
	height: 100%;
    z-index: -1;
    position: absolute;
    left: 0px;
	top: 0px;
}

.video-container .attach-video.show-video {
	z-index: 10;
}

.video-container .wrapper > div > .video-details .video-img img {
	width: 100%;
    height: 100%;
	object-fit: cover;
	opacity: 1;
	transition: all 300ms;
    -webkit-transition: all 300ms;
}

.video-container .wrapper > div > .video-details .video-img img.show-video {
	opacity: 0;
}

.video-container blockquote{
    font-family: ProximaNova-Semibold;
    font-size: 3.1em;
    line-height: 68px;
}

#video span.bq-name{
    display: block;
    font-size: 1.2em;
    line-height: 27px;
    margin-top: 2em;
}
.video-img{
    /* width: 80%;
    max-width: 1200px;
    margin: 3em auto 2em;
    position: relative;
    z-index: 1; */
	width: 100%;
    height: 100%;
    margin: 0;
    position: relative;
    z-index: 1;
}

.no-transition {
	transition: none !important;
	-webkit-transition: none !important;
}

.no-transition .card-image {
	transition: none !important;
	-webkit-transition: none !important;
}

.pointer-none {
	pointer-events: none;
}
.video-img > .card-image {
	width: 100%;
	height: 100%;
	transition: all 300ms;
    -webkit-transition: all 300ms;
}
.video-background {
    max-width: 980px;
    position: relative;
    height: 480px;
    margin: auto;
    overflow: hidden;
  }
  .video-background img {
    position: relative;
    z-index: 1;
  }
  .video-foreground,
  .video-background iframe, .video-img iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .3s;
  }
  #play {
    z-index: 2;
    font-size: 5rem;
    cursor: pointer;
    color: #fff;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
	opacity: 0;
	/* transition: all 300ms;
	-webkit-transition: all 300ms; */
  }
  
  
  
  #play.show-video {
	  opacity: 0;
  }

  i#play:before, i#play:after{
    content: '';
    background-color: #fff;
    width: 2px;
    height: 20%;
    position: absolute;
    left: 50%;
  }
  i#play:before {      
      top: 20%;
  }
  i#play:after {
      bottom: 20%;
  }
  .video-img .cta {
	  position: relative;
      font-size: 19px;
      letter-spacing: 1.9px;
      cursor: pointer;
      display: block;
      color: #fff;
      z-index: 2;
      font-family: ProximaNova-Regular;
  }  
/****************   TEAM     *********************/

#team {
    border-bottom:1px solid;
}

#team .team-grid{
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 7em;
    position: relative;
    width: calc(100% - 260px);
}

#team .team-grid .team-member{
    width:260px;
    margin-right: 2rem;
    margin-bottom: 43px;
    height: 350px;
}

/*  regular style   */

@supports (display: grid) {
    #team .team-grid{
        display: grid;
        grid-template-columns: 260px 260px 260px 1fr;
        /*grid-template-rows: repeat(2, 350px);*/
        grid-column-gap:36px;
        grid-row-gap:43px;
        width: auto;
    }
    #team .team-grid .team-member{
        margin: 0;
    }
}



#team .team-grid .team-member .member-image{
    height: 100%;
    width: 100%;
}

#team .team-grid .team-member .member-image img{
    display: block;
    height: 100%;
    width: 100%;
    object-position: center;
    object-fit: cover;
}

#team .team-grid .member-info.hide{
    display:none;
}
#team .team-grid .member-info.show{
    position: absolute;
    /*
    top = 1*image_height + 1*row_gap
    left = 3*image_width + 1*column_gap
    */
    top : calc(353px + 43px);
    left : calc(260px * 3 + 36px *3);
}

#team .team-grid.seven .member-info.show{
    top : calc(350px + 43px);
    left : calc(260px * 3 + 36px *3);
}

#team .team-grid.six .member-info.show{
    top : calc(350px + 43px);
    left : calc(260px * 2 + 36px *2);
}

.team-member.selected .member-image img{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

/*  ie style    */
.team-member.selected .member-image img{
    border:10px solid #000;
}

/* regular style    */
@supports (display: grid){
    .team-member.selected .member-image img{
        border:none;
    }   
}


#team .team-grid .member-info{
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#team .team-grid .member-info h3{
    font-family: ProximaNova-Bold;
    font-size: 60px;
    line-height: 65px;
    width: 65%;
}

#team .team-grid .member-info .info-more{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
}
#team .team-grid .member-info .info-more .btn-team{
    position: relative;
}

#team .team-grid .member-info .info-more h4{
    font-family: ProximaNova-Semibold;
    font-size: 1.25em;
    position: relative;
    line-height: 27px;
}
#team .team-grid .member-info .info-more h4:after{
    content : "";
    position: absolute;
    /* container_width - more_width - h4_margin_right - more_margin_left - h4_width*/
    width: calc(600px - 186px - 2rem - 100%);
    height: 1px;
    background-color: #000;
    top: 50%;
    transform: translateY(-50%);
    left: calc(100% + 1rem);
}
#team .team-grid .member-info p{
    font-size: 21px;
    line-height: 30px;
    width: 90%;
    margin-top: 18px;
}

#team .team-grid .member-info a.more-responsive{
    display: none;
}

#team .controls{
    display: none;
    cursor: pointer;
}

/****************   NEWS     *********************/

#news{
    border-bottom: 1px solid;
}
.news-container{
    display: flex;
    justify-content: space-between;
    margin-bottom: 4em;
    flex-wrap: wrap;
}
.news-card{
    border-top:1px solid;
    padding-top: 2em;
    width: 31%;
}

.news-card img{
    object-fit: cover;
    object-position: center;
    height: 400px;
    display: block;
}

.news-card.card-main-page img{
    height: 350px;
    object-fit: cover;
    object-position: center;
}

.news-card.large, .news-card.reverse{
    width: 66%;
}
.news-card span.date{
    margin: 1rem 0;
    font-size: 1.25em;
    display: block;
    font-family: ProximaNova-Light;
}
.news-card h3{
    font-size: 1.8em;
    line-height: 34px;
    text-transform: uppercase;
    font-family: ProximaNova-Bold;
    margin-top: 1rem;
}
.news-card.reverse{
    display: flex;
    flex-direction: column;
}

.news-card.reverse h3{
    width: 100%;
    margin-bottom: 1em;
    font-size: 2.4em;
    line-height: 40px;
}
.news-card.large h3{
    width: 50%;
}

.news-card.reverse img {
    width:60%;
    order: 4;
    margin-left: auto;
}
.news-card.reverse .ordr {
    order: 4;
}
/****************   EVENTS     *********************/
#news .events-container{
    border-bottom: none;
    margin-bottom: 0;
}
.event-card{
    display: flex;
    border-top: 1px solid;
    justify-content: flex-end;
    padding: 2em 0;
}
.event-card .date, .event-info .date{
    padding-right: 1rem;
}

@supports (display: grid) {
    .event-card .date, .event-info .date{
        margin-right: auto;
    }   
}

.event-card .date{
    /*
    min-width: 150px;
    */
}

.event-card .date .dm, .event-info .date .dm{
    display: flex;
    font-family: ProximaNovaT-Thin;
}

.event-card .date .weekday, .event-info .date .weekday{
    display: block;
    font-size: 1.75em;
    font-family: ProximaNova-Bold;
}
.event-card .date .day, .event-info .date .day{
    font-size:4.4em;
}
.event-card .date .month, .event-info .date .month{
    font-size:1.25em;
    margin: 10px 0 0 5px;
}

.event-card .event-content{
    width: 400px;
    padding:0 2em 0 1em;
    border-left: 1px solid;
}
.event-card  .event-content .time{
    font-size: 1.55em;
    font-family: ProximaNova-Bold;
}
.event-card  .event-content h3{
    font-size: 1.7em;
    margin: 0.5em 0;
    line-height: 27px;
    word-wrap: break-word;
}
.event-card  .event-content p{
    font-size: 1.15em;
    line-height: 22px;
    font-family: ProximaNova-Light;
}
.event-card  .event-image{
    width: 490px;
}

/****************   CONTACT     *********************/
.contact-container{
    margin-bottom: 2em;
    display: flex;
    padding: 2em 0;
}

.contact-container p{
    width: 40%;
    margin-right: auto;
    font-size: 1.25em;
}

.contact-container .contact-form{
    width: 50%;
    margin-left: auto;
    position: relative;
}

.contact-container .contact-form input#email{
    display: block;
    border: none;
    border-bottom: 1px solid #000;
    width: 100%;
    font-size:21px;
    font-weight: 400;
    padding:5px 130px 5px 5px;
}

.contact-container .contact-form input#email:focus {
    outline: none;
}

.contact-container .contact-form label{
    font-size: 15px;
    display: inline-flex;
    position: relative;
    top: -8px;
}

.contact-container .contact-form input#terms{
    margin-top: 0.75em;
    margin-right: 8px;
    width: 26px;
    height: 26px;
}


.contact-container .contact-form input#submit{
    position: absolute;
    border: 0;
    color: #fff;
    background-color: transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 21px;
    padding: 1em;
}

.contact-rombus{
    margin-top: 0;
    top: -20px;
}

/****************   FOOTER     *********************/

.footer-container{
    font-family: ProximaNova-Semibold;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10em 0 1em;
}

.footer-container .left{
    display: flex;
    align-items: flex-end;
    width: 70%;
}

.footer-container ul{
    display: flex;
}

.footer-container ul li{
    margin-right: 1em;
    font-size: 1.1em;
}

.footer-container .social{
    margin-left: 50px;
}

.footer-container .left .social ul{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.footer-container h6.copyrights{
    width: 240px;
    font-size: 1em;
    line-height: 1.15em;
    margin-left:auto;
}

.footer-container .logo{
    width : 314px;/*314*/
    height: 72px;/*72*/
    width : 315px;/*314*/
    height: 76px;/*72*/
    margin-left: auto;
    background: url('../assets/aclcf-horizontal.jpg');/*'../assets/aclcf_logo_GR_horizontal.png'*/
    background-size: cover;
}


  


  /********************
  *********************
  *********************
  *********************
  *********************

        NEWS.HTML

**********************/


#news-wrapper{
    border-bottom: 1px solid;
}

.news-intro{
    margin:2em 0;
    width: 60%;
}

.load-more{
    width:200px;
    margin:100px auto;
    text-align: center;
    font-size: 1.2em;
    font-family: ProximaNova-Bold;
}

  /********************
  *********************
  *********************
  *********************
  *********************

        TYPHOON.HTML

**********************/
.page-article{
    margin-bottom: 20px;
}

.page-article .project-info{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1em;
    padding-left: 2rem;
}

.page-article .project-info h2.project-title{
    padding-top: 1em;
    border-top: 1px solid;
    width: 38%;
    font-size: 1.25em;
    font-family: ProximaNova-Light;
}

.page-article .project-info .project-image{
    width: 60%;
}

.page-article .header-content{
    display: flex;
    align-items: baseline;
}

.page-article .header-content .share-btn{
    margin-left: auto;
    margin-right: 2rem;
    font-family: ProximaNova-Bold; 
}


.page-article h3{
    font-family: ProximaNova-Bold; 
    font-size:3.3em;
    line-height: 47px;
    width: 60%;
    text-transform: uppercase;
    padding-left: 2rem;
}

.article-content {
    width: 60%;
    margin: 0 auto;
}

.article-content p{
    font-size: 1.4em;
    line-height: 28px;
    margin-bottom: 1em;
}

.article-content ul{
    list-style-type: disc;
    margin-bottom: 1em;
}

.article-content ol{
    list-style-type: decimal;
    margin-bottom: 1em;
}

.article-content ul, .article-content ol{
    font-size: 1.4em;
    line-height: 28px;
    padding-inline-start: 40px;
}

.article-content .article-image{
    width: 80%;
    margin: 6em auto;
}

.article-content .article-image span.image-caption{
    display: block;
    text-align: center;
    color: #AFAFAF;
    font-size: 1.1em;
    margin-top: 0.25em;
}

.article-content .embed-container{
	width: 80%;
	margin: 2em auto;
}

.article-content .embed-container iframe{
	width: 100%;
	height: 365px;
}


.article-footer{
    /*border-top: 1px solid;*/
    border-bottom: 1px solid;
    padding: 1em 2rem;
    margin-top: 100px;
}
.article-footer h5, .article-footer h6{
    display: inline-block;
    font-size: 1.55em;
    margin: 0.25em 0.5em 0.25em 0;
}
.article-footer h5:after{
    content: ",";
}

.article-footer h5:last-of-type:after{
    content: "";
}


.more-news{
    border-bottom:1px solid;
}


  /********************
  *********************
  *********************
  *********************
  *********************

        FOUNDATION.HTML

**********************/
.inside-navigation{
    margin-top: 1.25em;
    margin-bottom: 6em;
}

.inside-navigation ul{
    display: flex;
}

.inside-navigation ul li{
    font-family: ProximaNova-Semibold;
    font-size:0.95em;
    margin-right: 1.25em;
}
.inside-navigation ul li.active{
    border-bottom: 1px solid;
}

                                                                                                                                                                                                            
.divider{
    border-bottom: 1px solid;
    margin-top: 150px;
}

.divider .divider-rombus{
    width: 350px;
    position:relative;
    margin-left:auto;
    margin-right: 0em;
    transform: translateY(-100px);
}

.divider .divider-rombus a{
    text-decoration: none;
}

  /********************
  *********************
  *********************
  *********************
  *********************

        TEAM.HTML

**********************/

/*  ie style    */

.team-grid{    
    margin-bottom: 100px;
}

.member-card{
    margin-bottom: 3em;
}

/*  regular style    */

@supports (display: grid) {
    .team-grid{
        display: grid;
        grid-template-columns: 150px 150px 150px 150px 1fr;
        grid-row-gap: 4em;
    }
    .member-card{
        margin-bottom: 0;
    } 

}

.member-card{
    display: flex;
    justify-content: space-between;
    width: 850px;
}

.member-card .member-image{
    width: 260px;
}
.member-card .member-image img{
    object-fit: cover;
    object-position: center;
    height: 100%;
}
.member-card .member-content{
    width: 550px;
}
.member-card .member-content h3{
    width: 70%;
    font-size: 3.75em;
}
.member-card .member-content h4{
    font-family: ProximaNova-Semibold;
    font-size:1.25em;
    margin-top: 1em;
}
.member-card .member-content p{
    font-size:18px;
    line-height: 23px;
    margin-top: 1em;
}

.member-card .member-content p span.more{
    font-weight: bold;
    text-decoration: underline;
}

/*     ie   style   */

.member-card:nth-child(1){
    margin-left: 100px;
}
.member-card:nth-child(2){
    margin-left: 350px;
}
.member-card:nth-child(4){
    margin-left: 100px;
}
.member-card:nth-child(5){
    margin-left: 350px;
}
.member-card.board-member:nth-child(1){
    margin-left: 0;
}
.member-card.board-member:nth-child(2){
    margin-left: 100px;
}

/*  regular style   */

@supports (display: grid) {
    .member-card:nth-child(1){
        grid-column: 2 / -1;
        margin-left:0;
    }
    .member-card:nth-child(2){
        grid-column: 4 / -1;
        margin-left:0;
    }
    .member-card:nth-child(3){
        grid-column: 1 /-1;
        margin-left:0;
    }
    .member-card:nth-child(4){
        grid-column: 2 / -1;
        margin-left:0;
    }
    .member-card:nth-child(5){
        grid-column: 4 / -1;
        margin-left:0;
    }
    .member-card.board-member:nth-child(1){
        grid-column: 1 / -1;
        margin-left:0;
    }
    .member-card.board-member:nth-child(2){
        grid-column: 2 / -1;
        margin-left:0;
    }
}

h2.team-header{
    font-size: 3.75em;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 0.5em 0;
    text-align: center;
    margin-bottom: 3em;
}


  /********************
  *********************
  *********************
  *********************
  *********************

        PARTNERS.HTML

**********************/

.partners-container{
    padding: 3em 0;
}

.partners-container .partners-row{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0 3em;
    max-width: 800px;
    margin: 0 auto;
}

.partners-container .partners-row .partners-logo{
    width: 22%;   
}
.partners-container .partners-row .partners-logo.large{
    width: 30%;   
}

  /********************
  *********************
  *********************
  *********************
  *********************

        EVENTS.HTML

**********************/

.event-select-month{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3em 0;
}

.event-select-month .event-month{
    margin: 0 1em;
    width: 310px;
    text-align: center;
}

.event-select-month .event-month h3{
    font-size: 3.8em;
    letter-spacing: 1.2px;
}

.events-container{
    border-bottom: 1px solid;
}

.load-more.more-events{
    width: 300px;
    margin: 2em auto 200px;
}

  /********************
  *********************
  *********************
  *********************
  *********************

        EVENT.HTML

**********************/

article.event{
    margin-bottom: 300px;
}

/*      ie style     */

header.event-header .event-info{
    padding-top: 4em;
}

header.event-header h4{
    display: none;
}

header.event-header h3{
    border-top : 1px solid;
    font-size: 3.2em;
    line-height:47px;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
    margin-top: 0.5em;
    text-transform: uppercase;
    font-family: ProximaNova-Bold;
    grid-row: 2/3;
    letter-spacing: 0.52px;
}


/*      regular style   */

@supports (display: grid) {
    header.event-header{
        display: grid;
        grid-template-columns: 1fr 2rem minmax(auto, 1000px);
        grid-template-rows: 200px 400px;
        grid-template-rows: 200px minmax(400px, min-content);
        overflow: hidden;
    }

    header.event-header h3{
        padding-bottom: 0;
    }
    
    header.event-header .image{
        grid-column: -2/-1;
        grid-row: 1/-1;
    } 
    header.event-header .image img{
        
        width: 100%;
        height: 100%;
        
        object-fit: cover;
        object-position: center;
    } 
}



.event .share-btn{
    justify-content: flex-end;
    margin:2rem 2rem 0 0;
}

.article-content{
    margin-top: 180px;
}
/*
.article-content p:first-of-type::first-letter{
    float: left;
    font-size: 150px;
    line-height: 120px;
    padding-top: 4px;
    padding-right: 8px;
    text-transform: capitalize;
}
*/
/*      ie style    */

.event .image-gallery{
    width: 60%;
    margin:2em auto;;
    padding-bottom: 2em;
    border-bottom: 1px solid;
}

.event .image-gallery .image-gallery-item{
    margin-bottom: 2em;
}

/*      regular style    */

@supports (display: grid) {
    .event .image-gallery{
        display: grid;
        width: 60%;
        margin:2em auto;
        grid-template-columns: 1fr 40%;
        grid-gap: 2em;
        padding-bottom: 2em;
        border-bottom: 1px solid;
    }
    .event .image-gallery .image-gallery-item{
        margin-bottom: 0;
    }
    .event .image-gallery .image-gallery-item img{
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
    }
    .event .image-gallery .image-gallery-item.small{
       grid-column: -2 / -1;
    }
    .event .image-gallery .image-gallery-item.large{
        grid-column: 1 / 2;
    }
    .event .image-gallery .image-gallery-item.wide{
        grid-column: 1/-1;
    }
    
    .event .image-gallery .image-gallery-item:nth-of-type(3n){
        grid-column: 1/-1;
    }
}


.event-footer{
    width: 60%;
    margin: 0 auto;
}

.event-footer h3{
    margin:1em 0;
    font-size:1.85em;
    font-family: ProximaNova-Bold;
}

.event-footer .next-event{
    display: flex;
    max-width: 700px;
    justify-content: space-between;
}

.event-footer .next-event .next-event-image{
    padding-right: 2em;
    border-right: 1px solid;
    flex: 1;
}
.event-footer .next-event .next-event-info{
    padding-left: 2em;
    flex: 1;
}

.event-footer .next-event .next-event-info h4{
    font-size: 1.7em;
    margin-bottom: 1em;
}

.event-footer .next-event .next-event-info p{
    font-size: 1.1em;
    line-height: 22px;
    font-family: ProximaNova-Light;
}

h2.more-events-header{
    font-size: 3.15em;
    font-family: ProximaNova-Bold;
    padding-bottom: 20px;
}

  /********************
  *********************
  *********************
  *********************
  *********************

        CONTACT.HTML

**********************/

/*  ie style    */

.contact-page-grid{
    border-bottom: 1px solid;
    padding-bottom: 400px;
}

/*  regular style   */

@supports (display: grid) {
    .contact-page-grid{
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-columns: 1fr 1fr;

    }
}


.contact-page-grid .contact-main{
    padding-right:3em;   
}
.contact-page-grid .contact-main h2{
    font-family: ProximaNova-Bold;
    font-size: 3.25em;
    padding: 0.5em 0;
    border-bottom:1px solid;
    line-height: 40px;
    text-transform: uppercase;
}
.contact-page-grid .contact-main h3{
    font-family: ProximaNova-Semibold;
    width: 50%;
    font-size:2.2em;
    padding:1em 0;
    line-height: 40px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}
.contact-page-grid .contact-sec{
    max-width: 1064px
}

.contact-page-grid .contact-sec .contact-image{
    height: 600px;
}
.contact-page-grid .contact-sec .contact-image img{
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}
.contact-page-grid .contact-info{
    font-family: ProximaNova-Regular;
    font-size:1.4em;
    width: 320px;
    line-height: 25px;
    margin-bottom: 2em;
    letter-spacing: 0.4px;
}
.contact-page-grid .contact-info address{
    font-style: normal;
    margin-bottom: 1em;
}
.contact-page-grid .contact-info h4{
    font-family: ProximaNova-Semibold;
    font-size: 1.35em;
    margin-bottom: 0.6em;
    line-height: 40px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.contact-page-grid .contact-info .person{
    margin-bottom: 1em;
}

.contact-sec .contact-sec-content {
    display: flex;
    flex-wrap: wrap;
    padding-top: 4em;
    max-width: 650px;
}



@media screen and (max-width: 1560px) {
    .wrapper, .wrapper-left, .wrapper-np{
        margin-left:100px;
    }
    header .main-header{
        width: 100px;
    }
    nav.main-navigation{
        height:100px;
    }
    nav.main-navigation .search .searchBox{
        width: calc(100vw - 100px - 4rem);
    }
    nav.main-navigation .search .searchBox.show{
        left: calc(100px + 2rem);
    }
    nav.main-navigation .search .searchBox input, nav.main-navigation .search .searchBox .searchBox-close{
        padding: 1rem;
    }
    .hero-wrapper{
        margin-bottom: 100px;
    }
    .hero-card{
        max-height: 500px;
        grid-template-rows: 2rem 30px 1fr 62px;
    }
    .hero-card .hero-card-content{
        font-size: 13px;
    }
    #about .about-container h2{
        font-size: 40px;
    }
    .video-container blockquote{
        font-size:38px;
        line-height: 50px;
    }
    #team .team-grid .member-info h3{
        font-size: 40px;
        line-height: 45px;
        width: 50%;
    }
    .page-article h3{
        font-size: 38px;
        line-height: 34px;
    }
    .member-card .member-content h3 {
        font-size: 40px;
        line-height: 45px;
        width: 50%;
    }
    header.event-header h3{
        font-size: 40px;
        line-height: 36px;
    }

}
@media screen and (max-width: 1360px) {
    /* index */

    /*
    .hero-container{
        grid-template-columns: 1fr 550px 1fr;
        grid-template-rows: 600px auto;
    }
    .hero-container .hero-card-image{
        grid-column: 1/-1;
        grid-row: 1/2;
    }

    .hero-container .hero-card-content{
        grid-column:1/-1;
        grid-row: 2/3;
        padding:2em 0;
    }

    .hero-container .hero-card-content p{
        font-size: 2.5em;
    }

    .hero-container .hero-controls{
        grid-column: 2/3;
        grid-row: 3/4;
    }

    .hero-container .hero-more{
        top: 555px;
        right: -65px;
    }
    */
    .hero-container{
        padding-bottom: 80px;
    }

    .hero-inner-wrapper{
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;   
    }

    .hero-inner-wrapper::-webkit-scrollbar {
        display: none;
      }

    .hero-card{
        grid-template-columns: 2rem 1fr 2rem;
        grid-template-rows: 600px auto auto;
        height: auto;
        max-height: none;
        scroll-snap-align: center;
    }
    .hero-card .hero-card-content h3{
        margin-top: 2em;
    }
    .hero-card .hero-card-image {
        grid-column: 2/ -1;
        grid-row: 1 / 2;
    }

    .hero-card .hero-more{
        top: 560px;
        display: none;
    }

    .hero-controls{
        position: relative;
        width: 600px;
        margin: 0 auto;
        bottom: 0;
        left: calc(2rem + 50%);
        transform: translateX(-50%);
        position: absolute;
    }


    #about .about-container h2, .video-container blockquote{
        font-size: 2.5em;
    }

    .news-card img{
        height: 300px
    }

    .news-card.card-main-page  img{
        height: 250px;
    }

    /* news.html */
    .news-container.news-page{
        font-size: 14px;
    }
    .news-card.large h3{
        width: 85%;
    }
    .contact-container .contact-form label{
        width: 50%;
    }
}

@media screen and (max-width: 1232px) {
    /* event.html*/
    .article-content, .event .image-gallery, .event-footer{
        width: 80%;
    }
    /* typhoon */
    .page-article h3 {
        width: 68%;
        margin-bottom: 2em;
    }
}

@media screen and (max-width: 1192px) {
    /* contact.html*/
  .contact-page-grid .contact-main{
      grid-column: 1/-1;
  }
  .contact-page-grid{
      padding-bottom: 200px;
  }
}

@media screen and (max-width: 1120px) {
    nav.main-navigation ul li{
        margin-right:1.25em;
    }
}

@media screen and (max-width: 1060px) {
    /* partners.html */
    .partners-container{
       margin-left:135px;
    }
    /* typhoon */
    .page-article h3 {
        width: 90%;
        margin-bottom: 2em;
    }
}

@media screen and (max-width: 1024px) {
    
}


@media screen and (max-width: 1010px) {
   
}

@media screen and (max-width: 936px) {
    /* event.html */
    .article-content, .event .image-gallery, .event-footer{
        width: 95%;
    }
}





@media screen and (max-width: 1010px) {
    /*******
    *******
    ******          GENERAL

    ******/

    .wrapper, .wrapper-left, .wrapper-np{
        margin: 0;
        padding:0;
    }
    .wrapper-responsive{
        padding: 0 2rem;
    }
    .page-header{
        font-size: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .section-header.second-header{
        font-size: 30px;
    }

    .section-header.third-header{
        font-size: 26px;
        line-height: 34px;
        padding: 1em 0;
    }

    .share-btn.responsive{
        display: flex;
        justify-content: center;
    }

    /*******
    *******
    ******          HEADER

    ******/

    header{
        display: flex;
        border-bottom: 1px solid;
        align-items: center;
    }
    header .main-header{
        position: relative;
        width: 100%;
        height: auto;
        flex-direction: row;
        justify-content: space-between;
        padding:0;
        border-right: none;
        padding: 20px 2rem;
    }
    

    header .main-header h1{
        -webkit-transform: none;
        -ms-transform: none;
            transform: none;
        -webkit-text-orientation: initial;
            text-orientation: initial;
        -webkit-writing-mode: initial;
        -ms-writing-mode: lr-tb;
            writing-mode: initial;
        margin-bottom: 0;
        max-width: 300px;
        padding: 0 0.25em;
    }

    header .main-header .logo{
        width: 80px;
        margin-bottom: 0;
    }

    header nav.main-navigation{
       position: absolute;
       top: -1798px;
       left: 0;
       z-index: 7;
       width: 100%;
       transition: top 0.5s;
       height: auto;
    }

    header nav.main-navigation.show{
        top: 121px;
    }

    header nav.main-navigation ul{
        flex-direction: column;
        width: 100%;
        align-items: center;
        background-color: #fff; 
        padding: 4em 0;
        box-shadow: 2px 5px 10px;
    }

    header nav.main-navigation ul li{
        padding: 1em 0;
        margin: 0;
	display: block;
    	width: 100%;
    	text-align: center;
    }

    header nav.main-navigation .search{
        display: none;
    }

    header .main-header .burger-menu{
        width:36px;
        /*
        display: flex;
        flex-direction: column;
        */
    }

    header .main-header .burger-menu i{
        /*
        width: 100%;
        height: 3px;
        border-radius: 5px;
        background-color: #000;
        margin-bottom: 5px;
        */
        display: block;
        width: 30px;
        height: 3px;
        margin-bottom: 4px;
        position: relative;
        background: #000;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
    }

    header .main-header .burger-menu i:last-of-type{
        margin-bottom:0;
    }

    header .main-header .burger-menu.close i:first-of-type{
        transform: rotate(37deg) translateX(2px);
    }
    header .main-header .burger-menu.close i:nth-of-type(2){
        opacity: 0;
    }
    header .main-header .burger-menu.close i:last-of-type{
        transform: rotate(-37deg);
    }
     /*******
    *******
    ******          HERO SECTION

    ******/

    .hero-wrapper{
        margin-bottom: 50px;
    }

    .hero-container{
        /*
        grid-template-columns: 2rem 1fr 2rem;
        grid-template-rows: auto;
        margin-bottom: 4em;
        */
    }

    .hero-card{
        grid-template-rows: 500px auto;
    }

    .hero-container .hero-card-image {
        grid-column: 1/ -1;
        grid-row: 1 / 2;
    }

    .hero-container .hero-card-content{
        grid-column: 2/ 3;
        grid-row: 2 / 3;
    }
    .hero-controls{
        width: 100%;
        padding: 0 2rem;
        left: 0;
        transform: translateX(0);
        position: relative;
    }
    .hero-more{
        display: none;
    }

    .hero-container .hero-card-content h3{
        font-size:16px;
        margin-top: 1em;
        line-height: 20px;
    }

    .hero-container .hero-card-content p{
        font-size: 28px;
        line-height: 27px;
    }
     /*******
    *******
    ******          ABOUT SECTION

    ******/

    #about .about-container{
        flex-direction: column;
    }

    #about .about-container h2{
        font-size: 28px;
        padding-right: 0;
        border-bottom: 1px solid;
        padding-bottom: 0.5em;
        margin-bottom: 1em;
    }

    #about .about-container .about-content{
        padding-left: 0;
        border-left: none;
        width: 100%;
    }

    #about .about-container .about-content p{
        font-size: 18px;
        line-height: 24px;
    }

    #about .about-container .about-content .btn-about{
        text-align: right;
    }

    #about .about-container .about-content .btn-about:before{
        width: calc(100% - 153px);
    }

    #video{
        border-bottom : none;
    }

    .video-container blockquote{
        font-size: 25px;
        border-top:1px solid;
        padding-top: 20px;
        line-height: 37px;
    }

    #video span.bq-name{
        border-bottom: 1px solid;
        padding-bottom: 20px;
    }

    .video-img{
        width: 100%;
        order: -1;
    }


    #team .section-header{
        text-align: center;
        font-size: 28px;
    }
    
     /*******
    *******
    ******          NEWS SECTION

    ******/

    #news .section-header{
        text-align: center;
        font-size: 28px;
        padding-top: 1em;
        padding-bottom: 1em;
    }
    .news-responsive-container{
        width: 100%;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;
        
    }

    .news-responsive-container::-webkit-scrollbar {
        display: none;
      }

      
    .news-container.news-responsive-scroll{
        width: calc(100vw*3 - 8rem);  
        padding-right: 2rem;
    }
    .news-card.card-main-page{
        width: calc(100vw - 4rem);
        scroll-snap-align: center;
    }
    .news-card.card-main-page  img{
        height: 550px;
        object-fit: cover;
        object-position: center;
    }
    .news-card.card-main-page h3{
        font-size: 26px;
        line-height: 34px;
    }


    #news .event-card:last-of-type{
        border-bottom: none;
    }
     /*******
    *******
    ******          CONTACT SECTION

    ******/

    .contact-container{
        flex-direction: column;
        padding: 1em 0;
    }

    .contact-container p{
        width: 100%;
        padding-bottom: 40px;
    }

    .contact-container .contact-form{
        width: 100%;
    }

    .contact-container .contact-form input#email{
        margin-bottom: 18px;
    }

    .contact-container .contact-form label{
        display: inline-flex;
        width: 50%;
    }

    .contact-container .rombus{
        top: 40px;
    }
    /*******
    *******
    ******          FOOTER

    ******/
    .footer-container{
        padding-top: 0;
        height: 300px;
        margin-top: 100px;
    }

    .footer-container .left{
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
    }

    .footer-container .left ul{
        flex-direction: column;
        margin-bottom: auto;
    }

    .footer-container .left ul li{
        margin-bottom: 1.5em;
    }

    .footer-container .left .social{
        margin: 0 0 1em 0;
    }

    .footer-container .left .social ul li{
        margin-bottom: 0;
    }

    .footer-container .left .copyrights{
        margin:0;
    }

    .footer-container .logo{
        align-self: end;
        width : 90px;
        height: 72px;
        margin-left: auto;
        background: url(assets/Image\ 12\ min@2x.png) center right;
        background-size: cover;
    }

    /*******
    *******
    ******         news

    ******/

    .news-intro{
        width: 100%;
    }

    .news-container-responsive{
        flex-wrap: wrap;
    }

    .news-container-responsive .news-card:first-of-type{
        width: 100%;
        margin-bottom: 2em;
    }


    .news-container-responsive .news-card:first-of-type h3{
        font-size: 1.6em;
        line-height: 34px;
    }

    .news-card.large h3{
        width: 100%;
    }
    /*******
    *******
    ******         typhoon

    ******/

    header.article-header{
        display: block;
        border-bottom: none;

    }

    .page-article{
        margin-left: 0;
    }

    .page-article .project-info{
        flex-direction: column-reverse;
        padding-left: 0;
    }

    .page-article .project-info h2.project-title{
        width: 100%;
        border-top: none;
        padding-left:calc(3em + 60px)!important;
    }

    .page-article .project-info h2.project-title:before{
        left: calc(2rem + 60px);
    }

    .page-article .project-info .project-image{
        width: 100%;
    }

    .page-article h3{
        width:calc(100% - 4rem - 120px);
        margin: 0 auto;
        border-bottom: 1px solid;
        padding-bottom: 1em;
        font-size: 1.6em;
        line-height: 34px;
        padding-left: 0;
    }

    .page-article h3:after{
        content: "";
        width: 100%;
        border-bottom:1px solid;
    }

    .page-article .header-content .share-btn{
        display: none;
    }

    .article-footer{
        margin-top: 0;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .article-footer h5{
        font-weight: 300;
    }

    .article-footer h5, .article-footer h6{
        font-size: 20px;
    }


    /*******
    *******
    ******         foundation

    ******/

    .article-content{
        width:100%;
        padding: 0 4rem;
    }
	.article-content .embed-container{
		margin: 0 auto;
		width: 80%;
	}
	.article-content .embed-container iframe{
		width: 100%;
		height: 380px;
	}


    @supports (display: grid) {
        .article-content{
            display: grid;
            grid-template-columns: 2em 60px 1fr 60px 2em;
            width: 100%;
            padding: 0;
        }

        .article-content p{
            grid-column: 3/-3;
            font-size: 18px;
            line-height: 24px;
            letter-spacing: 0.54px;
        }

	.article-content ul, .article-content ol{
            grid-column: 3/-3;
	        font-size: 18px;
            line-height: 24px;
        }

        .article-content .article-image{
            grid-column: 1/-1;
            width:100%;
        }
	.article-content .embed-container{
		grid-column: 3/-3;
	}
    }

    .divider.show-responsive{
        display: block;
        border-bottom: none;
    }

    .divider.show-responsive.responsive-space{
       margin-top: 100px;
       height: 135px;
    }

    .divider .divider-rombus{
        width: 100%;
        height: 135px;
        transform: translateY(0px);
    }

    .rombus.middle{
        right: calc((100% - 334px)/2);
    }

    /*******
    *******
    ******         team

    ******/
    .team-grid{
        display: block;
        padding-bottom: 5em;
    }

    .member-card{
        flex-direction: column;
        width: 100%;
        margin:40px 0 120px;
    }

    .member-card .member-content{
        width: 100%;
    }

    .member-card .member-image{
        margin: 0 auto 40px;
    }

    .member-card .member-content h3{
        width: 100%;
        border-bottom: 1px solid;
        font-size: 25px;
        padding-bottom : 8px;
    }
    .member-card .member-content h4{
        width: 100%;
        color: #9A9A9A;
        font-size: 20px;
        padding-top: 8px;
    }
    .member-card .member-content p{
        margin-top: 20px;
        font-size: 18px;
    }

    .member-card .member-content p span.more{
        display: block;
        margin-top: 20px;
        font-size: 20px;
    }

    h2.team-header{
        font-size: 30px;
        padding: 1em 0;
    }

    /*******
    *******
    ******         partners

    ******/

    .inside-navigation ul{
        margin: 1em 2em;
    }

    

    .partners-container{
        width: 100%;
        margin-left:0;
    }

    .partners-container .partners-row{
        margin-top: 50px;
        padding-bottom: 200px;
    }

    .partners-container .partners-row .partners-logo, .partners-container .partners-row .partners-logo.large{
        width: 150px;
        padding: 1em 0;
    }

    /*******
    *******
    ******         events

    ******/


    .event-select-month{
        padding-top:2em;
        padding-bottom:2em;
    }
    .slider-arrow{
        width: 50px;
    }
    .event-select-month .event-month h3{
        font-size:2em;
    }
    .events-container{
        border-bottom: none;
    }
    .load-more{
        border-top: 1px solid;
        border-bottom: 1px solid;
        padding-top:1.5em;
        padding-bottom:1.5em;
        margin: 2em auto;
        width: calc(100% - 4em);
    }

    .load-more.more-events{
        margin-bottom: 0;
    }

    .divider{
        display: none;
    }

    .news-card.reverse, .news-card, .news-card.large{
        width: 48%;
    }

    .news-card.reverse img {
        margin-left: 0;
        order: 0;
        width: 100%;
    }
    .news-card.reverse .ordr {
        order: 0;
    }
    .news-card h3, .news-card.reverse h3{
        font-size: 18px;
        line-height: 22px;
    }

    .news-card span.date{
        font-size: 15px;
    }



    /*******
    *******
    ******         event

    ******/

     /* event.html*/
     header.event-header{
        display: block;
    }

    header.event-header .event-info{
        width: calc(100% - 4rem);
        margin: 0 auto;
        border-bottom: 1px solid;
    }
    header.event-header h4{
        margin: 1rem 0 1rem 2rem;
        display: block;
    }
    
    header.event-header h3{
        margin-left: 2rem;
        border: none;
        margin-top: 0;
        padding-top: 0;
    }


    @supports (display: grid) {
        header.event-header{
            display: grid;
            grid-template-columns: 2em 60px 1fr 60px 2em;
            grid-template-rows: auto;
            border-bottom: none;
        }
        header.event-header .event-info{
            grid-row:1/2;
            grid-column: 3/-3;
            padding: 2em 0 1em;
            border-bottom:1px solid;
            margin-left: 0;
            margin-right: 0;
            width: 100%;
        }
        header.event-header .image{
            grid-column: 1/-1;
            grid-row: 2/3;
            width: 100%;
            margin-top: 2em;
        }
        header.event-header h4{
            grid-column: 3/-3;
            grid-row: 3/ 4;
            display: block;
            font-family: ProximaNova-Light;
            font-size: 13px;
            padding-top: 25px;
            margin: 0;
        }

        header.event-header h3{
            grid-column: 3/-3;
            grid-row: 4/ 5;
            margin-top: 0;
            border-top:none;
            border-bottom: 1px solid;
            padding-bottom: 12px;
            padding-top: 12px;
            font-size: 26px;
            margin-left: 0;
        }
    }
    header.event-header .image img{
        object-position: 0 0;
    }

    .event .share-btn{
        display: none;
    }

    .event .share-btn.responsive{
        display: flex;
        margin: 2rem 0;
    }

    .article-content{
        margin-top: 3em;
    }

    .event .image-gallery{
        border-bottom: none;
        padding-bottom: 0;
        width:100%;
        grid-gap: 1em;
    }

    .event-footer h3{
        margin-top: 0;
        padding-top : 1em;
        border-top: 1px solid;
    }

    /*  ie style    */

    .event-card{
        flex-wrap: wrap;
    }


    .event-card .date{
        width: 50%;
    }

    .event-card .event-content{
        width: 50%;
    }

    .event-card .event-image{
        width: 100%;
        margin-top: 2rem;
    }

    /*  regular style   */

    @supports (display: grid) {
        .event-card{
            display: grid;
            justify-content: normal;
            grid-template-columns: 50% 50%;
            grid-template-rows: auto auto;
            grid-row-gap: 1em;
        }
        .event-card .event-image{
            grid-column: 1/2;
            grid-row:1/2;
            width: 100%;
            padding-right: 1em;
        }
    
        .event-card.responsive-large .event-image{
            grid-column: 1/-1;
            padding-right: 0;
            height: 500px;
        }
        .event-card .date{
            width: 100%;
            grid-row:2/3;
            padding-right: 1em;
            padding-bottom: 6em;
            font-size:14px;
        }
        .event-card .event-content{
            width: 100%;
            padding-right: 0;
            grid-row:1/-1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            font-size: 14px;
        
        }
        .event-card.responsive-large .event-content{
            grid-row: 2/3;
            padding-top: 4em;
            font-size: 14px;
        }
	#news .event-card.responsive-large .event-content{
            padding-top: 0;
        }
        #news .event-card .event-content{
            justify-content: flex-start;
        }
    }

    

    .event-card:last-of-type{
        border-bottom: 1px solid;
    }
    
    .event-card.responsive-large .event-image img{
        object-fit: cover;
        object-position: center;
        height: 100%;
    }
    

    article.event{
        margin-bottom: 2em;
    }
    .article-content{
        width:100%;
    }

    .event-footer{
        width:100%;
    }
    .event-footer .next-event{
        width: 100%;
    }
    .event-footer .next-event .next-event-image{
        padding-right: 1em;
        border-right: none;
        flex: 1;
    }
    .event-footer .next-event .next-event-info{
        width: 50%;
        padding-left: 1em;
        padding-right: 0;
        border-left: 1px solid;
        font-size: 14px;
    }


    h2.more-events-header{
        font-size: 30px;
        line-height: 34px;
        border-top: 1px solid;
        padding-top: 20px;
    }

     /*******
    *******
    ******          contact

    ******/
   
    .contact-page-grid{
        display: block;
    }
    .contact-page-grid .contact-main h2{
        font-size:30px;
    }

    .contact-page-grid .contact-main{
        padding-right: 2em;  
    }
    .contact-page-grid .contact-main h3{
        width: 100%;  
    }
    .contact-sec .contact-sec-content{
        flex-direction: column;
        width: auto;
    }

    .contact-page-grid .contact-sec .contact-image{
        height: auto;
    }

    .contact-page-grid .contact-info{
        width: 100%;
        font-size: 18px;
    }

    .contact-page-grid .contact-info h4,  .contact-page-grid .contact-main h3{
        font-size: 29px;
    }
}

@media screen and (max-width: 950px) {
	.article-content .embed-container iframe{
		height: 350px;
	}
}

@media screen and (max-width: 850px) {
	.article-content .embed-container{
		width: 90%;
	}
}


@media screen and (max-width: 768px) {
    .hero-container{
        padding-bottom: 1rem;
    }
    .hero-card{
        display: flex;
        flex-direction: column;
    }
    .hero-container .hero-card-image{
        height:300px;
    }
    .hero-container .hero-card-content{
        order: 2;
        padding:0 2rem;
    }
    .hero-controls .next-btn, .hero-controls .prev-btn{
        width: 75px;
    }
    .article-content{
        padding:0 2rem; 
    }
    @supports (display: grid) {  
        header.event-header{
            grid-template-columns: 2em 1fr 2em;
        }
        header.event-header .event-info{
            grid-column: 2/-2;        
        }
        header.event-header h4{
            grid-column: 2/-2; 
        }
        header.event-header h3{
            grid-column: 2/-2; 
        }
        .article-content{
            grid-template-columns: 2em 1fr 2em;
            padding: 0;;
        }
        .article-content p{
            grid-column: 2/-2;
        }

    }
    .page-article h3{
        width:calc(100% - 4rem);
    }
    .page-article .project-info h2.project-title{
        padding-left:4em!important;
        font-size: 13px;
        line-height: 16px;
    }

    .page-article .project-info h2.project-title:before{
        left: 2rem;
    }
    .news-container{
        margin-bottom : 2em;
    }
    .news-card >img{
        height: 250px;
    }
    .contact-container p{
        font-size: 18px;
        line-height: 24px;
    }
    .contact-container .contact-form input#email{
        padding-right: 5px;
    }
    .contact-container .contact-form input#submit{
        font-size: 18px;
	top: 47%;
    }
    .rombus.small .rombus-left, .rombus.small .rombus-right{
        border-top: 40px solid transparent;
        border-bottom: 40px solid transparent;
    }
    .rombus.small .rombus-left{
        border-right: 70px solid #000;
    }
    .rombus.small .rombus-right{
        border-left: 70px solid #000;
    }
    .shape-container a{
        width: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .rombus.large .rombus-left, .rombus.large .rombus-right{
        border-top: 70px solid transparent;
        border-bottom: 70px solid transparent;
    }
    .rombus.large .rombus-left{
        border-right: 145px solid #000;
    }
    .rombus.large .rombus-right{
        border-left: 145px solid #000;
    }
    .rombus.middle{
        right: calc((100% - 294px)/2);
    }
}


@media screen and (max-width: 650px) {
    #play{
        justify-content: center;
        font-size: 2.5rem;
    }
    .video-img .cta{
        font-size: 15px;
        letter-spacing: 1.5px;
    	margin-top: 8px;
    }
    .video-img .cta:first-of-type{
        display: none;
    }
    i#play:before, i#play:after{
        display: none;
    }
    .event-card.responsive-large .event-image{
        height: auto;
    }
    .news-card.card-main-page img{
        height: 350px
    }
    .contact-container .contact-form label{
        font-size: 12px;
        line-height: 14px;
        top: -15px;
    }
	.article-content .embed-container{
		width: 100%;
	}


}


@media screen and (max-width: 640px) {
	header nav.main-navigation.show{
		top: 101px;
	}
}

@media screen and (max-width: 600px) {
    .news-card img{
        height : 200px;
    }
}

@media screen and (max-width: 550px) {
    .article-content .embed-container iframe{
		height: 300px;
	}
}


  @media screen and (max-width: 520px) {
    .hero-controls .prev-btn, .hero-controls .next-btn{
        width: 60px;
    }
        /*****
        *****
                partners
        */
        .inside-navigation{
            overflow-x: scroll;
	    overflow-x: hidden;
            scrollbar-width: none;
            -ms-overflow-style: none;  /* IE and Edge */
        }
        .inside-navigation ul{
            width: 700px;
        }
        .inside-navigation::-webkit-scrollbar {
            display: none;
        }
  }

  @media screen and (max-width: 482px) {
        header .main-header{
            height: 100px;
            padding: 1rem 2rem;
        }
        header nav.main-navigation.show{
            top: 101px;
        }
        header nav.main-navigation ul{
            padding: 2rem 0;
        }
        .news-card img{
            height : 150px;
        }
        .news-card.card-main-page img{
            height: 250px
        }
        .contact-container .contact-form input#terms{
            width: 18px;
            height: 18px;
            margin-right: 5px;
        }
        .contact-container .contact-form label {
            top: 10;
            width: 100px;
        }
    
  }

  @media screen and (max-width: 380px) {
    /* Small width screens */
    .event-card .date .dm, .event-info .date .dm{
        flex-direction: column;
    }
    .event-card .date .month, .event-info .date .month{
        margin: 0;
    }
    .rombus.large .rombus-left, .rombus.large .rombus-right{
        border-top: 60px solid transparent;
        border-bottom: 60px solid transparent;
    }
    .rombus.large .rombus-left{
        border-right: 130px solid #000;
    }
    .rombus.large .rombus-right{
        border-left: 130px solid #000;
    }
    .rombus.middle{
        right: calc((100% - 264px)/2);
    }
    .shape-container a{
        font-size: 16px;
    }
  }

  @media screen and (max-width: 1490px) {
    .member-card:nth-child(1){
        margin-left: 50px;
    }
    .member-card:nth-child(2){
        margin-left: 150px;
    }
    .member-card:nth-child(4){
        margin-left: 50px;
    }
    .member-card:nth-child(5){
        margin-left: 150px;
    }
    .member-card.board-member:nth-child(1){
        margin-left: 0;
    }
    .member-card.board-member:nth-child(2){
        margin-left: 50px;
    }
    @supports (display: grid) {
        .team-grid{
            grid-template-columns: 100px 100px 100px 100px 1fr;
        }
        .member-card:nth-child(1){
            margin-left: 0;
        }
        .member-card:nth-child(2){
            margin-left: 0;
        }
        .member-card:nth-child(4){
            margin-left: 0;
        }
        .member-card:nth-child(5){
            margin-left: 0;
        }
        .member-card.board-member:nth-child(1){
            margin-left: 0;
        }
        .member-card.board-member:nth-child(2){
            margin-left: 0;
        }
    }  
  }

  @media screen and (max-width: 1350px) {
    @supports (display: grid) {
        .team-grid{
            grid-template-columns: 70px 70px 70px 70px 1fr;
        }
    }
  }

  @media screen and (max-width: 1250px) {
    @supports (display: grid) {
        .team-grid{
            grid-template-columns: 50px 50px 50px 50px 1fr;
        }
    }
  }
  @media screen and (max-width: 1170px) {
    .member-card{
        width: 800px;
    }
    .member-card:nth-child(1){
        margin-left: 0;
    }
    .member-card:nth-child(2){
        margin-left: 0;
    }
    .member-card:nth-child(4){
        margin-left: 0;
    }
    .member-card:nth-child(5){
        margin-left: 0;
    }
    .member-card.board-member:nth-child(2){
        margin-left: 0;
    }
    
    .member-card .member-content{
        width: 500px;
    }
    @supports (display: grid) {
        .member-card:nth-child(even){
            grid-column: 1 / -1;
        }
        .member-card:nth-child(odd){
            grid-column: 2 / -1;
        }
    }
    
  }

  @media screen and (max-width: 1090px) {
    @supports (display: grid) {  
        .member-card:nth-child(odd), .member-card.board-member:nth-child(even){
            grid-column: 1 / -1;
        }
    }
  }

  @media screen and (max-width: 1010px) {
    .member-card{
        width: 100%;
    }
    
    .member-card .member-content{
        max-width: 600px;
        width: 100%;
        margin:0 auto;
    }
    
}


  /****************   RESPONSIVE - TEAM GRID     *********************/

@media screen and (max-width: 1672px) {
    #team .team-grid.seven{
        grid-template-columns: 200px 200px 200px 1fr;
    }
    #team .team-grid.seven .team-member{
        width:200px;
        height: 270px;
    }
    #team .team-grid.seven .member-info{
        width: 600px;
    }
    #team .team-grid .member-info .info-more h4:after{
       /* width: calc(550px - 186px - 2rem - 100%);   */
    }

    #team .team-grid .member-info.show{
        /*
        top = 1*image_height + 1*row_gap
        left = 3*image_width + 3*column_gap
        */
        top : calc(271px + 43px);
        left : calc(200px * 3 + 36px *3);
    }

    #team .team-grid.seven .member-info.show{
        top : calc(270px + 43px);
        left : calc(200px * 3 + 36px *3);
    }  
}

  
  @media screen and (max-width: 1515px) {
    #team .team-grid{
        width: auto;
    }

    @supports (display: grid) {
        #team .team-grid.seven{
            grid-template-columns: repeat(5, 200px);
        }
    }
    
    #team .team-grid .member-info .info-more h4:after{
        width: calc(600px - 186px - 2rem - 100%);   
    }
    #team .team-grid .member-info.show{
        /*
        top = 1*image_height + 1*row_gap
        left = 2*image_width + 2*column_gap
        */
        top : calc(271px + 43px);
        left : calc(200px * 2 + 36px *2);
    }

    #team .team-grid.seven .member-info.show{
        top : calc(270px + 43px);
        left : calc(200px * 2 + 36px *2);
    }
  }

 @media screen and (max-width: 1350px) {
    #team .team-grid.six .member-info.show{
        width: 550px;
    }
    #team .team-grid.six .member-info .info-more h4:after{
        width : calc(550px - 186px - 2rem - 100%);
    }

  }

  @media screen and (max-width: 1289px) {
    #team .team-grid{
        width: 1000px;
    }
    @supports (display: grid) {
        #team .team-grid.seven, #team .team-grid.six{
            grid-template-columns: repeat(3, 250px);
            width: auto;
        }
        #team .team-grid.six .team-member:nth-of-type(6){
            grid-column: 1;
        }
    }
    #team .team-grid.six .team-member, #team .team-grid.seven .team-member{
        width:250px;
        height: 335px;
    }
    #team .team-grid .member-info{
        width: 500px;
    }
    #team .team-grid .member-info .info-more h4:after{
        width: calc(536px - 186px - 2rem - 100%);   
    }
    #team .team-grid.six .member-info .info-more h4:after{
        width: calc(536px - 186px - 2rem - 100%);   
    }
    #team .team-grid .member-info.show{
        /*
        top = 2*image_height + 2*row_gap
        left = 1*image_width + 1*column_gap
        */
        top : calc(339px*2 + 43px*2);
        left : calc(250px + 36px);
        width: calc(250px*2 + 36px);
    }
    #team .team-grid.seven .member-info.show{
        top : calc(335px*2 + 43px*2);
        left : calc(250px + 36px);
        width: calc(250px*2 + 36px);    
    }
    #team .team-grid.six .member-info.show{
        top : calc(335px*2 + 43px*2);
        left : calc(250px + 36px);
        width: calc(250px*2 + 36px);    
    }
    #team .team-grid .member-info p{
        width: 100%;
    }
  }

   @media screen and (max-width: 1010px) {
    #team .team-container{
        padding-left: 2rem;
    }
    #team .team-grid.seven, #team .team-grid.six{
        grid-template-columns: repeat(3, 220px);  
    }
    #team .team-grid.six .team-member, #team .team-grid.seven .team-member{
        width: 220px;
        height: 295px;
    }

    #team .team-grid .member-info .info-more h4:after{
        width: calc(476px - 186px - 2rem - 100%);   
    }
    #team .team-grid.six .member-info .info-more h4:after{
        width: calc(476px - 186px - 2rem - 100%);   
    }

    #team .team-grid.seven .member-info.show{
        /*
        top = 2*image_height + 2*row_gap
        left = 1*image_width + 1*column_gap
        */
        top : calc(295px*2 + 43px*2);
        left : calc(220px + 36px);
        width: calc(220px*2 + 36px);
    }
    #team .team-grid.six .member-info.show{
        top : calc(295px*2 + 43px*2);
        left : calc(220px + 36px);
        width: calc(220px*2 + 36px);
    }
  }

  @media screen and (max-width: 850px) {
    #team .team-grid.six, #team .team-grid.seven{
        grid-template-columns: repeat(3, 200px);  
    }
    #team .team-grid .member-info h3{
        width: 60%;
    }
    #team .team-grid.six .team-member, #team .team-grid.seven .team-member{
        width: 200px;
        height: 270px;
    }
    #team .team-grid .member-info .info-more h4:after{
        /*width: 10px;*/
        width: calc(436px - 186px - 2rem - 100%); 
        min-width: 5px;  
    }
    #team .team-grid.six .member-info .info-more h4:after{
        /*width: 10px;*/
        width: calc(436px - 186px - 2rem - 100%); 
        min-width: 5px;  
    }

    #team .team-grid.seven .member-info.show{
        /*
        top = 2*image_height + 2*row_gap
        left = 1*image_width + 1*column_gap
        */
        top : calc(270px*2 + 43px*2);
        left : calc(200px + 36px);
        width: calc(200px*2 + 36px);
    }

    #team .team-grid.six .member-info.show{
        /*
        top = 2*image_height + 2*row_gap
        left = 1*image_width + 1*column_gap
        */
        top : calc(270px*2 + 43px*2);
        left : calc(200px + 36px);
        width: calc(200px*2 + 36px);
    }
  }

  @media screen and (max-width: 768px) {
    #team .team-container{
        width: 100%;
        overflow: hidden;
        position: relative;
        padding-left: 0;
    }

   #team .team-grid.six, #team .team-grid.seven{
        width: 700vw;
        position: relative;
        left: 0;
        grid-template-columns: repeat(7, 100vw);
        grid-template-rows: none;
        grid-auto-flow: column;
        grid-gap: 0;
        transition: left 0.5s;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    #team .team-grid.six .team-member, #team .team-grid.seven .team-member{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        transition: all 0.5s;
        height: auto;
    }

    #team .team-grid .team-member .member-image{
        width: 260px;
        height: 350px;
    }

   
    #team .team-grid .team-member.center{
        
    }

    #team .team-grid .member-info{
        width: 100vw;
        padding: 0 2rem;
    }

    #team .team-grid.six .team-member:nth-of-type(6){
        grid-column: auto;
    }

    #team .team-grid.seven .member-info.show , #team .team-grid.six .member-info.show{
        position: relative;
        top: 0;
        left: 0;
        width:100%;
    }

    #team .team-grid .member-info h3{
        width: 100%;
        font-size: 25px;
        margin-top: 1em;
        line-height: 36px;
    }

    #team .team-grid .member-info .info-more{
        margin-bottom: 1em;
        margin-top: 0;
    }

    #team .team-grid .member-info .info-more h4{
        border-top: 1px solid;
        color: #9A9A9A;
        width: 100%;
        padding-top: 8px;
    }

    #team .team-grid .member-info .info-more h4:after{
        display: none;
    }

    #team .team-grid .member-info .info-more .btn-team{
        display: none;
    }

    #team .team-grid .member-info p{
        width: 100%;
        margin-top: 0;
        font-size: 18px;
        line-height: 24px;
    }

    #team .team-grid .member-info a.more-responsive{
        display: block;
        font-size: 20px;
        text-decoration: underline;
        margin: 1.5rem 0 3rem;
        font-family: ProximaNova-Semibold;
    }

    #team  .controls{
        display: block;
        position: absolute;
        top: 155px;
        z-index: 10;
        padding:1em;
        width: 70px;
    }

    #team  .controls.left{
        left: 0;
        padding-left: 0;
    }

    #team  .controls.right{
        right: 0;
        padding-right: 0;
    }

    #team  .controls.disable{
        opacity: 0.2;
    }

  }

  @media screen and (max-width: 460px) {
    /* Small width screens */
    #team .controls{
        width: 50px;
    }
  }

/* on the fly css */
.sub-logo {
    max-width: 50%;
}