@charset "UTF-8";



body {
	margin: 0;
	margin-top: 0;
}

a:link {
	color: #115FB1;
	text-decoration: none;	
}

a:visited {
	color: #115FB1;
	text-decoration: none;	
}


/*PC user*/


.PC{
	visibility: visible;
}





h1 {
	color: #115FB1;
	font-family: Helvetica, Arial;
	text-decoration: none;
	font-size: 60px;
	max-width: 600px;
}




h2 {
	color: #115FB1;
	font-family: Helvetica, Arial;
	font-size: 40px;
}

h3{
	color: #115FB1;
	font-family: Helvetica, Arial;
	text-decoration: none;
	font-size: 22px;
	margin: 0px;
}

h4{
	color: #115FB1;
	font-family: Helvetica, Arial;
	text-decoration: none;
	font-size: 13px;
	max-width: 500px;
	margin: 0px;
}





p{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.8;
	max-width: 520px;
	color: #115FB1;
	
}



.Cover{
	margin-top: 10%;
	width: 75%;
	margin-left: 15%;
	height: auto;
	vertical-align: top;
}

#project1{
	margin-top: 91px;
	width: 65%;
	margin-left: 20%;
	height: auto;
	vertical-align: top;
}

#project2{
	margin-top: 10%;
	width: 65%;
	margin-left: 20%;
	height: auto;
	vertical-align: top;
}

#project3{
	margin-top: 10%;
	width: 65%;
	margin-left: 20%;
	height: auto;
	vertical-align: top;
}

#project4{
	margin-top: 10%;
	width: 65%;
	margin-left: 20%;
	height: auto;
	vertical-align: top;
}


.two{
	display: grid;
	grid-template-columns: 50% 50%;
	grid-gap: 5%;
	width: 74%;
	margin-left: 13%;
	margin-right: 13%;
	margin-top: 10%;
}

.three{
	display: grid;
	grid-template-columns: 70% 70%;
	grid-template-rows: 10% 10% 5% 40%;
	grid-column-gap: 18%;
	grid-row-gap: 7%;
	width: 70%;
	margin-left: 20%;
	margin-top: 25%;
}



.four{
	position: relative;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-gap: 5%;
	width: 74%;
	margin-left: 13%;
	margin-right: 13%;
	margin-top: 10%;
}



.six{
	display: grid;
	grid-template-columns: 18% 16% 16% 16% 16% 18%;
	grid-gap: 5%;
	width: 74%;
	margin-left: 13%;
	margin-right: 13%;
	margin-top: 10%;
}

.About{
	font-family: Helvetica, Arial, sans-serif;
	line-height: 2;
}


.Nav {
	position: fixed;
	left: 60px;
	top: 91px;
}
.Nav1 {
	position: fixed;
	left: 60px;
	top: 140px;
}
.Nav2 {
	position: fixed;
	left: 60px;
	top: 160px;
}
.Nav3 {
	position: fixed;
	left: 60px;	
	top: 180px;
}




.D1 {
	width: 400px;
	height: 400px;
	position: absolute;
	left: 13%;
	top: 40%;
}

/*
@media (max-width: 1920px){
}
*/

.D2 {
	width: 400px;
	height: 400px;
	position: absolute;
	top: 40%;
	left: 43%;
}
.D3 {
	width: 400px;
	height: 400px;
	position: absolute;
	top: 40%;
	left: 73%;
}
.D4 {
	width: 400px;
	height: 400px;
	position: absolute;
	top: 40%;
	left: 103%;
}

.D5 {
	width: 400px;
	height: 400px;
	position: absolute;
	top: 40%;
	left: 133%;
}

.D6 {
	width: 400px;
	height: 400px;
	position: absolute;
	top: 40%;
	left: 163%;
}

.D7 {
	width: 400px;
	height: 400px;
	position: absolute;
	top: 40%;
	left: 193%;
}

.D8 {
	width: 400px;
	height: 400px;
	position: absolute;
	top: 40%;
	left: 223%;
}

.D9 {
	width: 400px;
	height: 400px;
	position: absolute;
	top: 40%;
	left: 253%;
	
}

.D1Title {
	position: absolute;
	left: 13%;
	top: 90%;
	width: 400px;
	margin-top: 1%;
}
.D2Title {
	position: absolute;
	left: 43%;
	top: 90%;
	width: 400px;
	margin-top: 1%;
}

.D3Title {
	position: absolute;
	left: 73%;
	top: 90%;
	width: 400px;
	margin-top: 1%;
}

.D4Title {
	position: absolute;
	left: 103%;
	top: 90%;
	width: 400px;
	margin-top: 1%;
}

.D5Title {
	position: absolute;
	left: 133%;
	top: 90%;
	width: 400px;
	margin-top: 1%;
}

.D6Title {
	position: absolute;
	left: 163%;
	top: 90%;
	width: 400px;
	margin-top: 1%;
}

.D7Title {
	position: absolute;
	left: 193%;
	top: 90%;
	width: 400px;
	margin-top: 1%;
}

.D8Title {
	position: absolute;
	left: 223%;
	top: 90%;
	width: 400px;
	margin-top: 1%;
}

.D9Title {
	position: absolute;
	left: 253%;
	top: 90%;
	width: 400px;
	margin-top: 1%;
}

.footer{
	background-color: white;
	width: 3px;
	height: 300px;
	position: absolute;
	top: 95%;
}

.divider{
	background-color: white;
	width: 3px;
	height: 300px;
}

#note{
	position: fixed;
	margin-left: 13%;
	margin-top: 18%;
}

.Introduction{
	left: 15%;
	top: 6%;
	width: 70%;
}

.FF{
/*	position: absolute;*/
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	top: 40%;
	margin-left: 15%;
	color: #308483;
	
}

.MAGS{
	position: absolute;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	top: 135%;
	margin-left: 35%;
	color: #367DC2;
}

.SIT{
	position: absolute;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	top: 228%;
	margin-left: 35%;
	color: #827971;
}






@media (min-width: 700.1px) and (max-width: 1100px){
	h1{
		font-size: 30px;
	}
	
	.FF{
		position: absolute;
	top: 30%;
	margin-left: 35%;
	
}

.MAGS{
	position: absolute;
	top: 80%;
	margin-left: 35%;
}

.SIT{
	
	position: absolute;
	top: 125%;
	margin-left: 35%;

}
	
}


@media  (max-width: 700px){
	h1{
		font-size: 20px;
	}
	
	.FF{
		position: absolute;
	top: 30%;
	margin-left: 35%;
	
}

.MAGS{
	position: absolute;
	top: 50%;
	margin-left: 35%;
}

.SIT{
	
	position: absolute;
	top: 70%;
	margin-left: 35%;

}
	
}





/*Mobile version*/


h5{
	font-family: Helvetica, Arial;
	position:absolute;
	font-size: 55px;
}

p1{
	font-family: Helvetica, Arial;
	font-weight: 500;
	font-size: 46px;
	line-height: 70px;
	
}

.mbText{
	position: static;
	margin-left: 12%;
	margin-right: 12%;
	max-width: 76%;
}

.mbTitle{
	position: static;
	font-family: "Ibarra Real Nova Bold", "Libre Baskerville Bold", Ovo, "serif";
	margin-left: 12%;
	margin-right: 12%;
	max-width: 76%;
}

.mbSubTitle{
	position: static;
	margin-left: 12%;
	margin-right: 12%;
	max-width: 76%;
}

.mbDescrip{
	position: static;
	margin-left: 12%;
	margin-right: 12%;
	max-width: 76%;
}

.mbNav{
	
	position: fixed;
	font-size: 75px;
	left: 12%;
	top: 3%;
	
	
}


.mbNav1{
	
	position: fixed;
	font-size:  43px;
	left: 12%;
	top: 15%;
}
.mbNav2{
	
	position: fixed;
	font-size: 43px;
	left: 12%;
	top: 19%;
}
.mbNav3{
	
	position: fixed;
	font-size: 43px;
	left: 12%;	
	top: 23%;
}


.mobile{
	position: absolute;
	visibility: hidden;
}


#mbHighlights{
	margin-top: 60%;
}





/*Main*/



.mbCover{
	width: 76%;
	height: auto;
	vertical-align: top;
	margin-left: 12%;
	margin-right: 12%;
	margin-top: 8%;
	margin-bottom: 10%;
}


#mbFF{
	
	position: absolute;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	top: 28%;
	margin-left: 17%;
	color: #308483;
	
}


#mbMAGS{
	position: absolute;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	top: 50%;
	margin-left: 17%;
	width: 25%;
	color: #367DC2;
}


#mbSIT{
	position: absolute;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	top: 75%;
	margin-left: 17%;
	color: #827971;
}


/*About*/


#mbAboutResearch{
	margin-top: 20%;
	color: #115FB1;
}


#mbAboutDesign{
	
	margin-top: 20%;
	margin-bottom: 30%;
	color: #115FB1;
	
}

#mbAboutIntro{
	color: #115FB1;
}




@media (min-width: 1000px){
	
	
	.mbNav{
	
	position: fixed;
	font-size: 28px;
	left: 12%;
	top: 90px;
	
	
}


.mbNav1{
	
	position: fixed;
	font-size: 15px;
	left: 12%;
	top: 170px;
}
.mbNav2{
	
	position: fixed;
	font-size: 15px;
	left: 12%;
	top: 195px;
}
.mbNav3{
	
	position: fixed;
	font-size: 15px;
	left: 12%;	
	top: 220px;
}




.mbCover{
	width: 0%;
	height: auto;
	vertical-align: top;
	margin-left: 0%;
	margin-right: 0%;
	margin-top: 0%;
}
	
	
	#mbFF{
	top: 0%;
	margin-left: 0%;
	color: #308483;
	
}


#mbMAGS{
	
	top: 0%;
	margin-left: 0%;
	width: 27%;
	color: #367DC2;
}


#mbSIT{
	top: 0%;
	margin-left: 0%;
	color: #827971;
}
	
	
	#mbAboutResearch{
	margin-top: 0%;
	font-size: 0px;
	line-height: 0px;
}

	
	
	p1{
		font-size: 0px;
	line-height: 0px;
		
	}
	
	h5{
		font-size: 0px;
	line-height: 0px;
	}
	
	#mbHighlights{
		margin-top: 0;
	}
	
	
}