/* Main styles for the Sustainable Brandwagon index.html */


body {
    background-color: #7E84FF;
}

/*Fonts*/
@font-face {
    font-family: druk-wide-medium;
    src: url(fonts/DrukWide-Medium.otf) format("opentype");
}

h1,
h2,
h3,
h4,
p {
    font-family: 'druk-wide-medium', sans-serif;
    letter-spacing: 0.4px;

}

.display-inline-flex {

    display: inline-flex;
    margin: auto;
    align-items:center;
}

.grid-container {
    display: grid;
    grid-template-columns: auto;
    /*		75px auto 75px;*/

    grid-template-areas: ;

    "press press press"
    "main-logo main-logo main-logo"
    "train-animation-one train-animation-one train-animation-one"

    width: 100vw;
    height: auto;



}

.grid-container>section {

    /*	background-color:light blue;*/
    padding: 20px 0;
    text-align: center;
    font-size: 30px;
    text-align: center;
}


/*SECTION PRESS*/

.press {
    display: flex;
    align-items: center;

    /*	grid-template-columns: 30px; auto;*/
}

.press img {
    height: 35px;
    margin: 15px;

}

.press h2 {
    font-size: 20px;
}


.press h2 a {
    color: black;
    text-decoration:none;
}

.press h2 a:hover {
    color: #01ED00;
}

/*SECTION MAIN-LOGO*/

.main-logo {
    text-align: center;
    display:flex;
    overflow-x:hidden;
    justify-content:center;
}

.logo {
	max-width: 100vw;
}

.main-title {

}

.main-title img {
    height: 50px;
    margin: 2px 10px 0px 0px;
}

.main-title h3 {
    font-size: 25px;
    color: #fff;
    max-width: 500px;
}

/*SECTION TRAIN ONE*/

.train-animation-one {
    overflow: hidden;
    margin: 100px 0;
}

.train-animation-one img {
    height: 150px;
}

/*SECTION ABOUT & ILLUSTRAION */

.line-illustration {
	display: grid;
  position: relative;
  top: -660px;
  /* margin: auto; */
  justify-items: center;
}

.line-illustration svg {
    width: 1200px;
    margin-left: -100px;
    font-family: druk-wide-medium;
}

.line-animation {

    stroke-dasharray: 1750;
    stroke-dashoffset: 1750;
    animation: paused draw 2s ease-in-out forwards;
}

.line-animation-play {
    animation: running;

}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}



.about-sb {
    color: #fff;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-areas:
        'about-sb-copy about-sb-copy about-sb-copy'
        'sharon ramin jorrit';
    justify-content: center;
    position: relative;
/*    top: -950px;*/
    margin-left: 600px;
    justify-items: center;
    /*	padding: 20px;*/
    z-index:3;
}

.about-sb-copy {
    font-size: 20px;
    max-width: 400px;
    grid-area: about-sb-copy;
}

.about-sb h4 {
    font-size: 20px;
    justify-content: center;
}

.about-sb img {
    height: 75px;
    width: 75px;
}

.about-sb h4:hover{
    cursor: pointer;
}

    .about-sb h4 a {
    color: black;
        text-decoration: none;

    
    }

    .about-sb h4 a:hover {
    color:  #01ED00;
    cursor: pointer;
    text-decoration: underline;

    }



.sharon {
    grid-area: sharon;
    margin-top: 30px;

}
.sharon:hover{
    cursor: pointer;
}

.ramin {
    grid-area: ramin;
    margin-top: 60px;
}

.jorrit {
    grid-area: jorrit;
    margin-top: 30px;

}

.rounded-borders-element-one {

    border-radius: 100px;
    background: #7E84FF;
    padding: 0 !important;
    width: 100%;
    height: 150px;
    z-index: 2;
    margin: -530px 0 0 0;
}






/*SECTION MEET OUR PASSENGERS */

.black-bg {
    background-color: black;
    color: white;
}


.train-animation-two {

    overflow: hidden;
    height: 600px;
    margin: -450px 0 0 0;
}

.train-animation-two img {
    height: 250px;
    margin-top: 200px;
}

.meet-our-passengers {
    /*	height: 300px;
	display: flex;
	margin: 0 auto;
	background-color: black;*/

    height: 180px;
/*    max-width: 100vw;*/
    display: flex;
/*    margin: auto;*/
    align-items: center;
}

.meet-our-passengers img {
    height: 100px;
    margin: 10px 30px 0 0;

}



.passengers {
   display: flex;
    overflow: hidden;
    /* height: 480px; */
    /* margin-top: auto; */
    padding: 150px 50px !important;
    flex-wrap: wrap;
    /* margin: auto; */
    justify-content: space-evenly;
    max-width:1700px;
    margin:auto;
/*    background-color:black;*/

}

.passengers-brands {

    max-width: 750px;
    /*	min-width:300px;*/
    text-align: left;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    padding-bottom: 100px;
}

.passengers-brands h4 {

    margin: 0 20px;
    min-width: 120px
}

.passengers-brands h4 a{

    color: #01ed00;
    text-decoration: none;
}

.passengers-brands h4 a:hover{

/*    color: white;*/
    text-decoration:underline;
}


.passengers-brands img {
    min-width: 300px;

}


.rounded-borders-element-two {

    border-radius: 100px;
    background: #7E84FF;
    padding: 0 !important;
    width: 100%;
    height: 150px;
    z-index: 3;
    margin: -65px 0 0 0;
}



/*SECTION EMAIL US */

.subscribe {

		display:flex;
		flex-direction:column;
    justify-content: center;
    align-items:center;
    overflow:hidden;







}

.subscribe h1 {
    min-width: 40%;
    max-width: 75%;
    color: #fff;
    font-size: 25;
    margin: auto;
}


.submit-email {}

.submit-email img {

    max-height: 200px;
    margin: 150px auto;
}

.train-animation-three {

    overflow: hidden;
    height: 500px;
    margin: -250px 0 0 0;
}

.train-animation-three img {
    height: 250px;
    margin-top: 200px;
}

.field form{
/*	max-width:250px;*/
	text-align:center;
	margin:auto;
}

.field input {
  background: #F5F5F5;
  border: 0;

  outline: none;
  width: 80vw;
  max-width: 400px;
  font-size: 0.7em;
  transition: padding 0.3s 0.2s ease;
  font-family: druk-wide-medium;
/*  color: #d7d7d7;*/
  text-align:center;
  border-radius: 25px;

}
.field input::placeholder{
	color:#01ED00;


};
.field input:focus {
 color:#a4ffa4;

}
/*
.field input.field:hover {
 color:#a4ffa4;

}*/


.field input[type=submit]{

width:100px;
heigh: 100px;

border-radius: 25px;
background-image: url("images/arrow_right_green.svg");
background-repeat: no-repeat;

}


.field {
  position: relative;
  top: 265px;
}

.field form{
	display: flex;
  flex-direction: column;
  align-items: center;

  }



/* SECTION QUESTIONS */

.questions {
    height: 500px;
    display: flex;
    margin-top: 100px;
    align-items: center;
    justify-content:center;

}

.questions h1 {
    color: white;

}

.questions img {
    margin: 0 50px;
    height: 100px;

}

.questions h1 a {
    color: black;
}

.questions h1 a:hover {
    color: #01ED00;
}

.rounded-borders-element-three {

    border-radius: 100px;
    background: #7E84FF;
    padding: 0 !important;
    width: 100%;
    height: 150px;
    z-index: 3;
    margin: -65px 0 0 0;
}



/* SECTION FOOTER */


.footer {

    height: 600px;
    z-index: 1;
    margin-top: -75px;

}
.footer p {

    font-size: 15px;
    margin: 0px auto;

}
.footer h1{
	margin-top: 100px;
	color: #01ED00;
}

.supported-by{
    display: flex;
    justify-content:center;
    align-items: center;
}

.supported-by img {
    padding: 20px 50px;   

}
.supported-by:hover{
    cursor: pointer;


}

.creatives-for-climate{
    max-height: 200px; 
}

.stay-grounded{
    max-height: 100px; 
}
.made-with-urgency{
    margin-top: 75px !important;
}

.b-lab{
    max-height: 200px;
/*    margin-top: 75px !important;*/
}


/* MEDIA QUERIES */

@media only screen 
 and (max-width: 1400px){

 	.line-illustration svg{
 		max-width:100%;
 		padding: 0 50px;
 		margin:0;
 	}
 }



@media only screen 
 and (max-width: 1120px){

/* 	.line-illustration svg{
 		max-width:100%;
 		padding: 0 50px;
 		margin:0;
 	}
*/
	.line-illustration {
		display: none;
	/*  top: -130px;*/
	}
	.about-sb {

		margin-left:0;


	 }

 
	 .rounded-borders-element-one{
	 	margin: -100px 0 0 0;
	 }
	 .train-animation-two{
	 	margin:-70px 0 0 0;
	 }
	.passengers{
		flex-direction: column;
		align-items: center;
		padding: 200px 30px;
	}


	.questions{
		flex-direction:column;

	}


	.questions h1{

		font-size: 1.5em;

	}
	.questions img{
		height:75px;

	}
}


/* Mobile */

@media screen 
  and (min-width: 375px) 
  and (max-width: 812px) 
/*  and (-webkit-min-device-pixel-ratio: 2)*/
  and (orientation: portrait) 

  { 


  	h1, h2{
  		font-size: 35px;
  	}



  	.main-title{
  		padding: 20px 50px !important;
  	}

  	.green-arrow-top{
  		display: none !important;
  	}
  	.main-title h3{
  		font-size: 28px;
  	}

  	.about-sb{
  		grid-template-columns: 115px 115px 115px;
  	}

  	.ramin{
  		margin-top: 100px;
  	}



  	.passengers{
  		padding: 80px 0 !important;
  	}

  	.passengers-brands{
  		padding-bottom: 50px;
  	}

		.meet-our-passengers{



		}
		.passengers-arrow{
			display:none;
		}

		.passengers-brands{
			flex-direction: column;
			padding: 40 20px;
		}
			.passengers-brands img{
			padding: 40px 0;
			max-width: 300px;
		}

		.passengers-brands h4{
			padding: 0 60px;
		}

		.subscribe h1{
			font-size: 30px;
		}

		.submit-email img {
    max-height: 200px;
    margin: 50px auto;
		}
		.field  {

			top:165px;

		}
		.field input{
			font-size: 12px;
		}
		.questions h1{
			font-size: 35px;
		}

    .supported-by{
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
}




	}