@font-face{
	font-family: "GRANDISSIMO";
	src: url("../fonts/GRANDISSIMO.otf");
}

@font-face{
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-VariableFont_wght.ttf");
}

@fon-face{
	font-family: "jura";
	src: url("../fonts/Jura-VariableFont_wght.ttf");
}
/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #525252; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #36b64b;
  border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #36b64b;
}

html{
	scroll-behavior: smooth;	
}

body{
	margin: 0;
	padding: 0;
}

li a{
	color: #fff;
	text-decoration: none;
}

.list a {
  color: #fff;
  position: relative;
  text-decoration: none;
}

.list a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-image: linear-gradient(90deg, #02787c,#02787c);
  bottom: -5px;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.list a:not(.nohover):hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

h1{
	color: white;
	font-family: "GRANDISSIMO";
	font-size: 45px;
}

h2{
	color: black;
	font-family: "GRANDISSIMO";
	font-size: 20px;
}

p{
	font-family: "GRANDISSIMO";
	font-size: 18px;
}

.dropbtn {
    font-family: "GRANDISSIMO";
    background-color: transparent;
    color: white;
	padding: 10px 0 10px 0;
    font-size: 1em;
	font-weight: bold;
    border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: -70%;
  background-color: transparent;
  min-width: 180px;
  min-height: 73px;
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {background-color: transparent;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: transparent;}

.teams {
	font-family: "GRANDISSIMO";
    background-color: transparent;
    color: white;
	padding: 10px 0 10px 0;
    font-size: 1em;
    border: none;
	text-align: center;
	
}

.main_photo{
	display: flex;
	padding: 25rem;
	position: relative;
	background-color: #000;
	background-image: url("../Photos/Eco team_v2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 2;
}

.list{
	font-family: "jura";
	font-size: 1.1em;
	font-weight: bold;
	display: flex;
	width: 90%;
	position: absolute;
	top: 20px;
	left: 9.2%;
	justify-content: center;
	align-items: center;
	gap: 8%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.logo-responsive{
	display: none;
	
}

/*Hanburger Menu*/
#menu-bar{
	display: none;
}

#menu{
	width: 35px;
	height: 30px;
	margin: 30px 0 20px 20px;
	cursor: pointer;
}
.bar{
	height: 5px;
	width: 100%;
	background-color: white;
	display: flex;
	border-radius: 5px;
	transition: 0.3s ease;
}
#bar1{
	transform: translateY(-4px);
}
#bar3{
	transform: translateY(4px);
}
.nav li a{
	color: white;
	text-decoration: none;
	font-family: "jura";
	font-size: 1.1rem;
}
.nav li a:hover{
	font-weight: bold;
  	color: white;
}
.nav li{
	list-style: none;
	padding: 16px 0;
}
.nav{
	padding: 0;
	margin: 0 20px;
	transition: 0.3s ease;
	display: none;
}
.menu-bg, #menu-bar{
	top: 0;
	left: 0;
	position: absolute;
}
.menu-bg{
	z-index: 1;
	width: 0;
	height: 0;
	margin: 100px 0 20px 20px;
	background-color: black;
	border-radius: 20px;
	transition: 0.3s ease;
}
#menu-bar{
	z-index: 2;
}
.change-bg{
	width: 550px;
	height: 435px;
	transform: translate(-60%,-30%);
}
.change .bar{
	background-color: white;
}
.change #bar1{
	transform: translateY(4px) rotateZ(-45deg);
}
.change #bar3{
	transform: translateY(-6px) rotate(45deg);
}
.change #bar2{
	opacity: 0;
}
.change{
	display: block;
}

.title{
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	top: 95%;
	left: 15%;
	justify-content: center;
	align-content: center;
	background-color: #1A1A1A;
	width: 70%;
	height: 250px;
	
}

.title img{
	padding: 2rem;
	width: 700px;
	height: 167px;
}

.container-nav{
	display: flex;
	background-image: url("../Photos/pattern-bgArtboard-4.png");
	padding-top: 15rem;
}

.navigation{
	position: fixed;
	top: 30%;
	font-family: "jura";
	font-size: 18px;
	text-transform: uppercase; 
	width: 15%;
	margin: 0;
	padding: 0;
	z-index: 0;
}

.navigation li{
	margin: 0;
	padding: 1rem;
	text-decoration: none;
	list-style: none;
}

.navigation a{
	color: white;
}

.navigation a:hover{
	color: #36B64B;
}

.navigation a:active{
	color: #36B64B;
}

.team_eco{
    margin: 0;
    padding-top: 1rem;
    padding-right: 0;
    padding-left: 20rem;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.subteam{
	margin: 0%;
	text-align: center;
}

.members{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
}

.card-per{
	position: relative;
  	width: 250px;
  	height: 400px;
  	margin: 1%;
	border-radius: 20px;
	text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	background-color: #D9D9D9;
}

.card-per img{
	padding: 1.5rem;
	height: 50%;
}

.onoma-ex{
	position: absolute;
    top: 40%;
    left: 4%;
}

.social{
	display: flex;
	justify-content: center;
	position: absolute;
	padding: 0;
	margin: 0;
	gap: 0.5rem;
	width: 100%;
	height: 50px;
	bottom: 3%;
}

.social li{
	list-style: none;
	text-decoration: none;
}

input {

    display: none;
}

.container {
	padding-top: 5rem;
	margin: 0;
    width: 100%;
    height: 55rem;
    display: flex;
    transform-style: preserve-3d;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #000;
    overflow-x: hidden;
}

.container h1{
	padding: 3rem;
}

.cards {
    position: relative;
    height: 500px;
    width: 60%;
    margin-bottom: 20px;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.cards label {

    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    transition: transform 0.55s ease;
}

.cards .card{

    position: relative;
    height: 100%;
    background-color: #525252;
    border-radius: 10px;
    padding: 20px 35px;
	padding-bottom: 35px;
}

.card .image{

    display: flex;
    justify-content: space-between;
}

.card .image img{

    border-radius: 5px;
    box-shadow: 15px 15px 15px rgba(0, 0, 0, 30%);
    margin-top: 23px;
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.card .image .dots{

    text-align: center;
}

.dots div{

    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-bottom: 10px;
}

.dots div:nth-child(1){

    background-color: var(--current-color1);
}

.dots div:nth-child(2){

    background-color: #5B85F9;
}

.dots div:nth-child(3){

    background-color: #000;
}

#s1:checked~.cards #slide4,
#s2:checked~.cards #slide5,
#s3:checked~.cards #slide1,
#s4:checked~.cards #slide2,
#s5:checked~.cards #slide3 {
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%);
    transform: translate3d(-70%, 0, -220px);
    --current-color1: #ECEAED;
    --current-color2: #404457;
}

#s1:checked~.cards #slide5,
#s2:checked~.cards #slide1,
#s3:checked~.cards #slide2,
#s4:checked~.cards #slide3,
#s5:checked~.cards #slide4 {
    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%);
    transform: translate3d(-35%, 0, -120px);
    --current-color1: #ECEAED;
    --current-color2: #404457;
}

#s1:checked~.cards #slide1,
#s2:checked~.cards #slide2,
#s3:checked~.cards #slide3,
#s4:checked~.cards #slide4,
#s5:checked~.cards #slide5 {
    box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 50%);
    transform: translate3d(0, 0, 0);
    --current-color1: #fad00c;
    --current-color2: #ECEAED;
}

#s1:checked~.cards #slide2,
#s2:checked~.cards #slide3,
#s3:checked~.cards #slide4,
#s4:checked~.cards #slide5,
#s5:checked~.cards #slide1 {
    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%);
    transform: translate3d(35%, 0, -120px);
    --current-color1: #ECEAED;
    --current-color2: #404457;
}

#s1:checked~.cards #slide3,
#s2:checked~.cards #slide4,
#s3:checked~.cards #slide5,
#s4:checked~.cards #slide1,
#s5:checked~.cards #slide2 {
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%);
    transform: translate3d(70%, 0, -220px);
    --current-color1: #ECEAED;
    --current-color2: #404457;
}

footer{
	background-color: black;
	background-image: url("../Photos/final_logo_resized.png");
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	padding: 10rem;
	z-index: 0;
}

footer ul{
	padding:0;
}

.social-footer {
	display: flex;
	position: relative;
	top: 80px;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.Rights {
	font-family: "jura";
	display: flex;
	position: absolute;
	top: 80%;
	color: #fff;
}

@media screen (max-width: 1600px) {
	.logo-responsive{
		position: relative;
		top: -390px;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	
	.list{
		display: none;
	}
	
	#menu-bar{
		display: block;
	}
}

@media (max-width: 1440px) {
	.logo-responsive{
		position: relative;
		top: -390px;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.list{
		display: none;
	}
	#menu-bar{
		display: block;
	}

@media (max-width: 1200px){
	.navigation{
		display: none;
	}
	.team_eco{
		padding-left: 0;
	}
	.logo-responsive{
		top: -390px;
	}
}

@media (max-width: 1100px){
	.title img{
		width: 500px;
		height: 95px;
	}
	.main_photo{
		padding-top: 6rem;
		padding-bottom: 25rem;
	}
	.logo-responsive{
		top: -84px;
	}
}

@media (max-width: 852px){
	.main_photo{
		padding-left: 10rem;
		padding-right: 10rem;
	}
}

@media (max-width: 750px){
	.title img{
		width: 300px;
		height: 71px;
	}
	.main_photo{
		padding-top: 2rem;
	}
	.logo-responsive{
		top: -24px;
	}
}

@media (max-width: 570px){
	.main_photo{
		padding-left: 0rem;
		padding-right: 0rem;
		padding-top: 0rem;
		padding-bottom: 19rem;
		width: 100%;
	}
	.card .image img{
		height: 250px;
	}
	.container{
		height: 38rem;
	}
	.logo-responsive{
		top: 7px;
	}
}
	
@media (max-width: 520px){

}

@media (max-width: 450px){
	.logo-responsive{
		top: -147px;
	}
	.logo-responsive img{
		width: 220px;
	}
	.main_photo{
	padding-bottom: 0rem;
	padding-top: 10rem;
	}
}

@media (max-width: 420px){
	.title img{
		width: 200px;
		height: 48px;
	}	
	h1{
		font-size: 30px;
	}
}

@media (max-width: 335px){
	.logo-responsive img{
		width: 200px;
	}
	footer{
		background-size: 200px;
	}
}