@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Reddit Sans Condensed:100,200,300,400,500,600,700,800,900|Jost:100,200,300,400,500,600,700,800,900');

/* Define the keyframes for the animation */
@keyframes playGif {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Apply the animation to the GIF element */
.mygif {
    opacity: 0; /* Start with the GIF hidden */
    animation: playGif 3s forwards, /* Play the animation */
               last-frame 0s 3s forwards; /* Go to the last frame after the animation */
}

@keyframes last-frame {
    to {
        opacity: 1; /* Set opacity to 1 to show the last frame */
    }
}

/* navbar */
.navbar {
	overflow:inherit;
	background-color: #111111;
	font-family: Reddit Sans Condensed;
	position: fixed;
	top: 0;
	width: 100%;
	border-bottom: 1px solid #dfdfdf;
	z-index: 90;
}

.navbar-left {
	float: left;
	padding: 20px;
}

.navbar-left a {
	float: left;
	color: #FFF8F0;
	text-align: center;
	text-decoration: none;
	font-size: 20px;
	font-weight: 700;
	padding-left: 15px;
}

.navbar-right {
	float: right;
	padding: 20px;
}

.navbar-right a {
	float: left;
	color: #FFF8F0;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
	padding-left: 40px;
	padding-right: 15px;
}

.dropdown {
	float: left;
	overflow: hidden;
}

.dropdown .dropbtn {
	font-size: 18px;
	border: none;
	outline: none;
	color: #FFF8F0;
	background-color: inherit;
	font-family: inherit; 
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #3F3F3F;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 89;
}

.dropdown-content a {
	float: none;
	color: #FFF8F0;
	font-size: 16px;
	padding: 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.navbar-right a:hover, .dropdown-content a:hover, .dropdown:hover .dropbtn {
	font-weight: bold;
}

.navbar-left a:hover {
	color: #1ED4BB;
}

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

/*---------------------------------------------------------------------------------------------------------------------*/


/* header */
.grid-container {
	display: grid;
	grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
	grid-template-rows: 12.5vw 12.5vw 12.5vw 12.5vw;
	grid-template-areas:
		"item1 item2 item3 item4 item5 item6 item7 item8"
		"item9 title1 title1 item10 img1 img1 item11 item12"
		"item13 item14 item15 item16 subtitle subtitle img2 item17"
		"item18 img3 img3 img3 paragraph paragraph item19 item20";
	overflow: hidden;
	margin-top: 62px;
}

.grid-container > div {
	text-align: left;
	border: 1px solid;
	border-color: rgba(255,248,240,0.3)
}

.title1 { 
	grid-area: title1; 
	display: flex; 
	align-items:center;
}

.subtitle {
	grid-area: subtitle;  
	display: flex; 
	align-items:center;
}

.paragraph {
	grid-area: paragraph; 
	display: flex; 
	align-items:center;
}

.img1 {grid-area: img1; }
.img2 {grid-area: img2; }
.img3 {grid-area: img3; }
.img4 {grid-area: img4; }
.img5 {grid-area: img5; }
.img6 {grid-area: img6; }
.item1 {grid-area: item1; }
.item2 {grid-area: item2; }
.item3 {grid-area: item3; }
.item4 {grid-area: item4; }
.item5 {grid-area: item5; }
.item6 {grid-area: item6; }
.item7 {grid-area: item7; }
.item8 {grid-area: item8; }
.item9 {grid-area: item9; }
.item10 {grid-area: item10; }
.item11 {grid-area: item11; }
.item12 {grid-area: item12; }
.item13 {grid-area: item13; }
.item14 {grid-area: item14; }
.item15 {grid-area: item15; }
.item16 {grid-area: item16; }
.item17 {grid-area: item17; }
.item18 {grid-area: item18; }
.item19 {grid-area: item19; }
.item20 {grid-area: item20; }
.item21 {grid-area: item21; }
.item22 {grid-area: item22; }
.item23 {grid-area: item23; }
.item24 {grid-area: item24; }
.item25 {grid-area: item25; }
.item26 {grid-area: item26; }
.item27 {grid-area: item27; }
.item28 {grid-area: item28; }
.item29 {grid-area: item29; }
.item30 {grid-area: item30; }
.item31 {grid-area: item31; }
.item32 {grid-area: item32; }
.item33 {grid-area: item33; }
.item34 {grid-area: item34; }
.item35 {grid-area: item35; }
.item36 {grid-area: item36; }
.item37 {grid-area: item37; }
.item38 {grid-area: item38; }
.item39 {grid-area: item39; }
.item40 {grid-area: item40; }
.item41 {grid-area: item41; }
.item42 {grid-area: item42; }
/*---------------------------------------------------------------------------------------------------------------------*/

/* header small */
.grid-container-small {
	display: grid;
	grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
	grid-template-rows: 12.5vw;
	grid-template-areas:
		"item1 title1 title1 item2 img3 img3 img3 item3";
	overflow: hidden;
	margin-top: 62px;
}

.grid-container-small > div {
	text-align: left;
	border: 1px solid;
	border-color: rgba(255,248,240,0.3)
}

/*---------------------------------------------------------------------------------------------------------------------*/

/* header home */
.grid-container-home {
	display: grid;
	grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
	grid-template-rows: 12.5vw 12.5vw 12.5vw 12.5vw;
	grid-template-areas:
		"item21 item22 item23 item24 item25 item26 img4 item27"
		"item28 img5 title1 title1 title1 title1 img4 item29"
		"item30 img5 subtitle subtitle subtitle img6 item31 item32"
		"item33 item34 item35 item36 item37 img6 item38 item39";
	overflow: hidden;
	margin-top: 65px;
}
.grid-container-home > div {
	text-align: left;
	border: 1px solid;
	border-color: rgba(255,248,240,0.3)
}


/*---------------------------------------------------------------------------------------------------------------------*/



/* Main content*/
img {
	max-width: 100%;
	height: 100%;
	object-fit: cover;
}

.row-full {
    max-width: 1920px;
    margin: 0;
	padding: 0 0 150px;
    position: relative;
}

.row-center {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 150px;
	position: relative;
}

.row-center-150 {
	max-width: 1200px;
	margin: 0 auto;
	padding: 150px 0;
	position: relative;
}

.row-center-150-0 {
	max-width: 1200px;
	margin: 0 auto;
	padding: 150px 0 0 0;
	position: relative;
}

.row-center-0 {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

.row-center-border {
	max-width: 800px;
	margin: 20px auto;
	padding: 20px 0 0 0;
	position: relative;
	border-top: 1px solid #dfdfdf;
	border-bottom: 1px solid #dfdfdf;
}

.row-small {
	max-width: 720px;
	margin: 0 auto;
	padding: 300px 0;
	position: relative;
}

.row-small-0 {
	max-width: 720px;
	margin: 0 auto;
	padding: 0px 0 0;
	position: relative;
}

.row-small-150 {
	max-width: 720px;
	margin: 0 auto;
	padding: 150px 0 0;
	position: relative;
}


.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.col-100 {
    width: auto;
	height: 900px;
}

.col-100a {
	float: left;
	width: 100%;
}
.col-60 {
	float: left;
	width: 60%;
}

.col-60r {
	float: right;
	width: 60%;
}

.col-50 {
	float: left;
	width: 50%;
	
}

.col-50c {
	width: 50%;
	margin: auto;
}

.col-40 {
	float: left;
	width: 40%;
}

.col-40r {
	float: right;
	width: 40%;
}

.col-33 {
	width: 33.3%;
	float: left;
}

.col-33 a {
	float: left;
	color: #FFF8F0;
	text-align: center;
	text-decoration: none;
	padding: 20px;
}

.col-33 a:hover{
opacity: 50%;
}

.col-50 a {
	float: left;
	color: #FFF8F0;
	text-align: center;
	text-decoration: none;
	padding: 20px;
}

.col-50 a:hover{
	opacity: 50%;
}

.biblio {
	float: left;
	width: 50%;
	display: block;
	font-family: Jost;
	font-size: 15px;
	font-weight: 400;
	color: #FFF8F0;
	padding: 0px 30px;
	line-height: 1.6;
}

.biblio a {
	color: #FFF8F0;
}

.biblio a:hover {
	font-weight: 500;
}
.parallax {
	background-image: url("../images/1/earth.png");
	min-height:600px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/*---------------------------------------------------------------------------------------------------------------------*/

/* previous & next */
.pages {
	overflow: hidden;
	font-family: Reddit Sans Condensed;
	position: relative;
	width: 100%;
}

.previous {
	float: left;
	width: 50%;
	background: linear-gradient(-90deg, rgba(6,184,192,0.5) 0%, rgba(6,184,193,0)90%);
}

.previous a {
	float: right;
	color: #FFF8F0;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
	font-weight: 400;
	padding: 30px;
}

.next {
	float: right;
	width: 50%;
	background: linear-gradient(90deg, rgba(5,204,124,0.5) 0%, rgba(5,204,124,0) 90%);
}

.next a {
	float: left;
	color: #FFF8F0;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
	font-weight: 400;
	padding: 30px;
}

.previous a:hover, .next a:hover {
	font-weight: bold;
}

/*------------------------------------------------------------------------------*/

/*footer*/
.footer {
	overflow: hidden;
	background-color: #111111;
	font-family: Reddit Sans Condensed;
	width: 100%;
	border-top: 1px solid #dfdfdf;
	padding: 0px;
}

.footer-left {
	float: left;
	padding: 30px 20px;
}

.footer-left a {
	float: left;
	color: #06B8C0;
	text-align: center;
	text-decoration: none;
	font-size: 14px;
	font-weight: 400;
	padding-left: 15px;
}

.footer-right {
	float: right;
	padding: 30px 20px;
}

.footer-right a {
	float: left;
	color: #06B8C0;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
	padding-right: 15px;
}

.footer-left a:hover, .footer-right a:hover {
	font-weight: bold;
}

/*----------------------------------------------------------------------------------------------------*/

/* Font style */
p {
	display: block;
	font-family: Jost;
	font-size: 18px;
	font-weight: 400;
	color: #FFF8F0;
	padding: 0px 30px;
	line-height: 1.6;
}

h1-blue {
	display: block;
	font-family: Reddit Sans Condensed;
	font-size: 40px;
	font-weight: 600;
	color: #FFF8F0;
	margin: 20px 0px;
	text-align: center;
	background-color: rgba(6,184,192,0.32);
}

h1-green {
	display: block;
	font-family: Reddit Sans Condensed;
	font-size: 40px;
	font-weight: 600;
	color: #FFF8F0;
	margin: 20px 0px;
	text-align: center;
	background-color: rgba(5,204,124,0.32);
}

h1-orange {
	display: block;
	font-family: Reddit Sans Condensed;
	font-size: 40px;
	font-weight: 600;
	color: #FFF8F0;
	margin: 20px 0px;
	text-align: center;
	background-color: rgba(255,104,6,0.52);
}

h2 {
	display: block;
	font-family: Reddit Sans Condensed;
	font-size: 34px;
	font-weight: 600;
	color: #FFF8F0;
	padding: 0px 30px;
	margin: 5px 0;
}

h2-blue {
	display: block;
	font-family: Reddit Sans Condensed;
	font-size: 34px;
	font-weight: 600;
	color: #06B8C0;
	padding: 0px 30px;
	margin: 5px 0;
}

h2-green {
	display: block;
	font-family: Reddit Sans Condensed;
	font-size: 34px;
	font-weight: 600;
	color: #05CC7C;
	padding: 0px 30px;
	margin: 5px 0;
}

h2-orange {
	display: block;
	font-family: Reddit Sans Condensed;
	font-size: 34px;
	font-weight: 600;
	color: #FF6806;
	padding: 0px 30px;
	margin-bottom: 5px;
}

h3 {
	display: block;
	font-family: Jost;
	font-size: 22px;
	font-weight: 500;
	font-style: italic;
	color: #FFF8F0;
	padding: 0px 30px;
	margin-bottom: 5px;
}

h3-blue {
	display: block;
	font-family: Jost;
	font-size: 23px;
	font-weight: 500;
	font-style: italic;
	color: #06B8C0;
	padding: 0px 30px;
	margin-bottom: 5px;
}

h3-green {
	display: block;
	font-family: Jost;
	font-size: 23px;
	font-weight: 500;
	font-style: italic;
	color: #05CC7C;
	padding: 0px 30px;
	margin: 5px 0;
}

title {
	display: block;
	font-family: Reddit Sans Condensed;
	font-size: 50px;
	font-weight: 700;
	color: #FFF8F0;
	padding: 0 30px;
}

landing-title {
	display: block;
	font-family: Reddit Sans Condensed;
	font-size: 74px;
	font-weight: 600;
	color: #06B8C0;
	padding: 0 30px;
}

landing-quote {
	display: block;
	font-family: Jost;
	font-size: 24px;
	font-weight: 300;
	color: #FFF8F0;
	padding: 0 30px;
}

mark { 
  	background-color: rgba(255,104,6,0.5);
  	color: #FFF8F0;
	font-weight: 400;
}
/*-----------------------------------------------------------------------------------------------*/


/*responsive*/

@media only screen and (max-width: 1680px){
	.grid-container {
	grid-template-columns: 14.2% 14.2% 14.2% 14.2% 14.2% 14.2% 14.2%;
	grid-template-rows: 14.2vw 14.2vw 14.2vw 14.2vw;
	grid-template-areas: 
	"item1 item2 item3 item4 item5 item6 item7"
	"item8 title1 title1 item9 img1 img1 item10"
	"item11 item12 item13 item14 subtitle subtitle img2 "
	"item15 img3 img3 img3 paragraph paragraph item16";
	}
	 .item17, .item18, .item19, .item20, .item36, .item37, .item38, .item39 {
		display:none;
	}
	
	.grid-container-home {
	grid-template-columns: 14.2% 14.2% 14.2% 14.2% 14.2% 14.2% 14.2%;
	grid-template-rows: 14.2vw 14.2vw 14.2vw 14.2vw;
	grid-template-areas:
		"item21 item22 item23 item24 item25 item26 img4"
		"item27 img5 title1 title1 title1 title1 img4"
		"item28 img5 subtitle subtitle subtitle img6 item29"
		"item30 item31 item32 item33 item34 img6 item35";
}
	
	.grid-container-small {
	display: grid;
	grid-template-columns: 14.2% 14.2% 14.2% 14.2% 14.2% 14.2% 14.2%;
	grid-template-rows: 14.2vw;
	grid-template-areas:
		"title1 title1 item1 img3 img3 img3 item2";
	overflow: hidden;
	margin-top: 45px;
	}
}

@media only screen and (max-width: 1440px){
	.grid-container {
	grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
	grid-template-rows: 16.6vw 16.6vw 16.6vw;
	grid-template-areas: 
	"title1 title1 item1 img1 img1 item2"
	"item3 item4 item5 subtitle subtitle img2"
	"img3 img3 img3 paragraph paragraph item6";
	}	
	.item7, .item8, .item9, .item10, .item11, .item12, .item13, .item14, .item15, .item16, .item17, .item18, .item19, .item20 {
		display:none;
	}
	
	.grid-container-small {
	display: grid;
	grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
	grid-template-rows: 16.6vw;
	grid-template-areas:
		"title1 title1 item1 img3 img3 img3";
	overflow: hidden;
	margin-top: 45px;
	}
}

@media only screen and (max-width: 1200px){
	.grid-container {
	grid-template-columns: 20% 20% 20% 20% 20%;
	grid-template-rows: 20vw 20vw 20vw;
	grid-template-areas: 
	"title1 title1 img1 img1 item1"
	"item2 item3 subtitle subtitle img2"
	"img3 img3 paragraph paragraph item4 ";
	}
	.item5, .item6, .item7, .item8, .item9, .item10, .item11, .item12, .item13, .item14, .item15, .item16, .item17, .item18, .item19, .item20 {
		display:none;
	}
		.grid-container-small {
	display: grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
	grid-template-rows: 20vw;
	grid-template-areas:
		"title1 title1 img3 img3 img3";
	overflow: hidden;
	margin-top: 45px;
	}
}

@media only screen and (max-width: 960px){
	.grid-container {
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 25vw 25vw 25vw;
	grid-template-areas: 
	"title1 title1 img1 img1"
	"item1 item2 subtitle subtitle"
	"img3 img3 paragraph paragraph";
	}
	
	.grid-container-small {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 25vw;
	grid-template-areas:
		"title1 title1 img3 img3";
	overflow: hidden;
	margin-top: 45px;
	}
	
	.item3, .item4, .item5, .item6, .item7, .item8, .item9, .item10, .item11, .item12, .item13, .item14, .item15, .item16, .item17, .item18, .item19, .item20, .img2 {
		display:none;
	}
	
	.col-100 {
		height: 470px;
	}
	
	.col-33 {
		width: 50%;
	}
		
	.col-50c {
		width: 100%;
	}
	
}

@media only screen and (max-width: 720px){
	.grid-container {
	grid-template-columns: 33.3% 33.3% 33.3%;
	grid-template-rows: 33.3vw 33.3vw 33.3vw;
	grid-template-areas: 
	"title1 title1 img1"
	"item1 subtitle subtitle"
	"img3 paragraph paragraph";
	}
	
	.grid-container-small {
	display: grid;
	grid-template-columns: 33.3% 33.3% 33.3%;
	grid-template-rows: 33.3vw;
	grid-template-areas:
		"title1 title1 img3";
	overflow: hidden;
	margin-top: 45px;
	}
	
	.item2, .item3, .item4, .item5, .item6, .item7, .item8, .item9, .item10, .item11, .item12, .item13, .item14, .item15, .item16, .item17, .item18, .item19, .item20, .img2 {
		display:none;
	}	
	
	.col-60, .col-60r, .col-40, .col-40r, .col-50, .col-33{
		width: 100%;
		float:none;
	}
}

@media only screen and (max-width: 480px){
	.grid-container {
	grid-template-columns: 50% 50%;
	grid-template-rows: 50vw 50vw 50vw 50vw;
	grid-template-areas: 
	"title1 title1"
	"img3 img3"
	"subtitle subtitle"
	"paragraph paragraph";
	}
	
	.grid-container-small {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 50vw 50vw;
	grid-template-areas:
		"title1 title1"
		"img3 img3";
	overflow: hidden;
	margin-top: 45px;
	}
	.item1, .item2, .item3, .item4, .item5, .item6, .item7, .item8, .item9, .item10, .item11, .item12, .item13, .item14, .item15, .item16, .item17, .item18, .item19, .item20, .img2, .img1 {
		display:none;
	}	
}