@font-face{
	font-family:"complex";
	src:url('../data/fonts/complex.ttf') format('truetype')
}
* {
	margin:0;
	font-family:'complex', sporting_grotesque;
}

/* Title section*/

h1{
	z-index:2;
	text-align:left;
	font-size:11pt;
	padding:1.5%;
	background-color:black;
	color:white;
	display:flex;
	position:fixed;
	width:100vw;
}

a{
	text-decoration:none;
	color:white;
}

.navlinks{
	list-style:none;
	{text-decoration:none;}
}
.navlinks li{
	display:inline-block;
	{text-decoration:none;}
}
.navlinks li a:hover{
	color:#C68240;
}


.intro{
	width:100vw;
	position:relative;
}

/*google search how to make 
the heading stay when browser changes size
em is supposed to do it but having issues otherwise, 
65LH & 50FS */

.intro h2{
	position:absolute;
	top:65%;
	padding-left:10%;
	font-size:9vw;
	line-height:10vw;
	transform:rotate(-43deg);
	color:white;
}

.intro2{
	width:100vw;
	position:relative;
}


.intro2 h3{
	position:absolute;
	top:45%;
	padding-left:30%;
	font-size:9vw;
	line-height:10vw;
	transform:rotate(-43deg);
	color:white;
	margin:0;
}


.intro3{
	width:100vw;
	position:relative;
}

.intro3 h4{
	position:absolute;
	top:40%;
	padding-left:45%;
	font-size:9vw;
	line-height:10vw;
	transform:rotate(-43deg);
	color:white;
	margin:0;
}

.break{
	width:100vw;
	height:7vh;
	margin:0;
	background-color:black;
}


.topic{
	width:100vw;
	position:relative;
}

.topic h5{
	position:absolute;
	top:35%;
	padding-left:10%;
	font-size:4vw; 
	color:white;
	background-color:black;width:90%;
	text-align:center;
}


.start{
	position:relative;
	width:100vw;
}
	img{
		width:100vw;
	}

.start h6{
	top:35%;
	padding:15%;
	background-color:black;
	color:white;
	/*text-indent:3em; */
	font-size:3vw;
	text-align:center;
	margin:2%;
}
.research{
	position:relative;
	display:flex;
	box-sizing:border-box;
	width:100vw;
}

.research h5{
	position:relative;
	top:10%;
	padding-left:7%; padding-right:7%;
	font-size:3vw;
	text-align:center;
	background-color:#F4BF40;
	color:white;
	margin:2%;
}
.research p{
	position:relative;
	padding-left:3%;
	top:35%;
	font-size:2vw;
	padding:5%;
	float:left;
}
.research h6{
	position:relative;
	padding-left:3%; padding-right:5%;
	top:55%;
	font-size:2vw;
	color:white;
	background-color:#C68240;
	padding:5%;
	float:right;
	margin:2%;
}

.box1{	
	width:100vw;
	position:relative;	
}

.box1 h5{
	position:relative;
	background-color:black;	
	color:white;
	margin:0%;
	/*padding-bottom:15%;*/
	padding:5%;padding-right:5%;padding-left:5%;
	font-size:2vw;
	margin:2%;
}
.box1 ul{
	background-color:#C68240;
	color:white;
	margin:2%; margin-bottom:10%;
	padding:1%;
	float:center; 
	font-size:2vw;
}

.intimate{
	position:relative;
	width:100vw;
}

.intimate h5{
	position:relative;
	font-size:3vw;
	/*text-indent:5em;*/ 
	color:white;
	background-color:black;
	text-align:center;
}

.colorblock{
	position:relative;
	width:100vw;
	
}

.colorblock h5{
	position:relative;
	background-color:white;width:50%; 
	padding-top:5%; padding-bottom:5%; 
	font-size:2vw;
	text-align:center;
	margin-left:25%;
	line-height:5vw;
	margin-top:2%;
}

.colorblock:hover h5{
	animation:5s multicolor;
	animation-delay:0s;
}

@keyframes multicolor{
	0%{
		background-color:white;
	}
	33%{
		background-color:red;
	}
	66%{
		background-color:#FF1559;
	}
	100%{
		background-color:white;
	}
}

.intimateEX{
	width:100vw;
	display:flex;
	box-sizing:border-box;
}

.intimateEX p{
	background-color:#C68240;width:50%;
	color:white;
	padding:1%;
	float:left;
	font-size:2vw;
	margin:2%;
	padding-top:5%;
	text-align:center;

}

.intimateEX img{
	position:relative;
	width:50vw;
	float:right;
	margin:4%;
}

.Ex{
	position:relative;
	width:100vw;
}

.Ex p{
	background-color:#F4BF40;
	color:white;
	margin-left:2%; margin-right:2%; margin-top:10%; margin-bottom:10%;
	padding:1%;
	font-size:2vw;
	text-align:center;
}

.peace{
	position:relative;
	width:100vw;
}

.peace p{
	position:relative;
	font-size:3vw;
	color:white;
	background-color:black;
	text-align:center;
}

.peace1{
	width:100vw;
	display:flex;
	box-sizing:border-box;
}

.peace1 p{
	background-color:#C68240;
	color:white;
	padding:1%;
	font-size:2vw;
	margin-top:10%; margin-bottom:10%; margin-left:2%; margin-right:2%;
	text-align:center;
}


.peace2{
	width:100vw;
	display:flex;
	box-sizing:border-box;
}

.peace2 p{
	background-color:#F4BF40;width:50%;
	color:white;
	padding:3.5%;
	float:left;
	font-size:2vw;
	margin:2%;
	text-align:center;

}

.peace2 img{
	position:relative;
	width:50vw; height:90%;
	float:right;
	margin:4%;
}

.seasons{
	position:relative;
	width:100vw;
}

.seasons p{
	position:relative;
	font-size:3vw;
	color:white;
	background-color:black;
	text-align:center;
	margin-top:10%; margin-bottom:10%;
}


.seasons1{
	width:100vw;
	display:flex;
	box-sizing:border-box;
}

.seasons1 p{
	background-color:#C68240;
	color:white;
	padding:1%;
	font-size:2vw;
	margin-left:2%; margin-right:2%; margin-bottom:10%;
	text-align:center;
}

.seasons2{
	width:100vw;
	display:flex;
	box-sizing:border-box;
}

.seasons2 p{
	background-color:#F4BF40;width:50%;
	color:white;
	padding:1%;
	float:left;
	font-size:2vw;
	margin:2%;
	padding-top:20%;
	text-align:center;

}

.seasons2 img{
	position:relative;
	width:50vw;
	float:right;
	margin:4%;
}

.end{
	position:relative;
	width:100vw;
}
.end p{
	position:relative;
	font-size:2vw;
	color:white;
	background-color:#C68240;
	text-align:center;
	margin-top:10%; margin-bottom:10%;
}

.end ul{
	position:relative;
	font-size:1.5vw;
	color:white;
	background-color:black;
	list-style:none;
}
footer{
	color:white;
	background-color:black;
	text-align:center;
	padding:3%;
}