View source for Team:SSTi-SZGD/css/Apply Design

body{ min-width: 1024px; min-height: 489px; position: relative;}

.SSTi-SZGD{ background: url(https://static.igem.org/mediawiki/2017/9/9a/SSTi-SZGD_Apply_Design_banner.png) no-repeat top center; padding-top: 15px; max-height: 910px; position: relative;}

/*custom header*/
.header .nav .Project span,.header .nav .Project li:nth-of-type(4) a{ color: #FAEE0D;}

/*Content*/
.Content{ background: white; width: 100%; text-align: justify; font-size: 1.8rem;font-family: "Arial Regular";font-weight: bold;}
.Content p{ line-height: 37.5px;}
.Content .left{ float: left;}
.Content .right{ float: right;}
.Content img{ width: 100%;margin:0 auto;}
.Content .img{ width: 1000px; margin: 40px auto;}
.Content .Title{ font-size: 4rem; color: white; background: #786a52; height: 78px; padding: 0 40px; line-height: 75px;}
.Content .Headline{ font-size: 2.5rem; margin: 40px 0; padding-left: 100px; font-weight: 600;}
.Content .SubTitle span{ display: inline-block;}
.Content .SubTitle span:nth-of-type(1){ font-size: 3.1rem; color: white; background: #bbb4a8; height: 55px; line-height: 47.41px; padding-left: 15px;}
.Content .SubTitle span:nth-of-type(2){ font-size: 2.7rem; color: #bbb197; line-height: 49.59px;}

.Overview{ width: 1360px; margin: auto; border-top: 3px solid #786a52;}
.Overview .Title{ width: 280px;}
.Overview p:nth-last-of-type(1){ padding: 35px 75px;}

.Core{ width: 1360px; margin: auto; border-top: 3px solid #786a52;}
.Core .Title{ width: 650px;}
.Core p:nth-last-of-type(1){ padding: 35px 75px;}
.Core .img{ padding: 0 100px;}
.Core .img img{ width: 80%;}

.Product{ width: 1360px; margin: 50px auto; border-top: 3px solid #786a52;}
.Product .Title{ width: 385px;}
.Product .section{ margin: 20px 0; padding-left: 100px;}

.Product .Proposed .OPP{ height: 350px;}
.Product .Proposed .OPP .left{ width: 610px; margin-top: 60px; margin-left: 150px;}
.Product .Proposed .OPP .left p{ font-size: 2.5rem; line-height: 75px;}
.Product .Proposed .OPP .left p:nth-of-type(1){ font-size: 3.3rem;}
.Product .Proposed .OPP .right{ width: 256px; margin-top: 50px; margin-right: 250px;}

.Product .Proposed .Enzyme{ height: 900px;}
.Product .Proposed .Enzyme span:nth-of-type(1){ width: 345px;}
.Product .Proposed .Enzyme .section{ margin-top: 35px;}
.Product .Proposed .Enzyme .img{ width: 60%;}

.Product .Proposed .Whole span:nth-of-type(1){ width: 380px;}
.Product .Proposed .Whole .Top{ height: 380px;}
.Product .Proposed .Whole .Top .left{ width: 780px; padding-top: 70px;}
.Product .Proposed .Whole .Top .right{ width: 220px; margin-right: 200px; padding-top: 50px;}

.Product .Proposed .Whole .Bottom{ height: 380px;}
.Product .Proposed .Whole .Bottom .left{ width: 660px;}
.Product .Proposed .Whole .Bottom .right{ width: 600px; padding-top: 50px;}

.Product .Proposed .Whole .considerations{ height: 460px;}
.Product .Proposed .Whole .considerations .Headline{ padding: 0;}
.Product .Proposed .Whole .considerations .section{ margin: 40px 0; padding: 0;}
.Product .Proposed .Whole .considerations .left{ width: 48%;}
.Product .Proposed .Whole .considerations .right{ width: 48%;}

.Product .Proposed .Whole .Environment{ height: 460px;}
.Product .Proposed .Whole .Environment .Headline{ padding: 0;}
.Product .Proposed .Whole .Environment .left{ width: 43%;}
.Product .Proposed .Whole .Environment .right{ width: 52%;}

.Market{ width: 1360px; margin: 50px auto; border-top: 3px solid #786a52;}
.Market .Title{ width: 385px;}

.Market .Target .Headline{ padding-left: 40px;}
.Market .Target .Top{ height: 360px;}
.Market .Target .Top .left{ width: 48%; padding-left: 40px;}
.Market .Target .Top .right{ width: 48%;}
.Market .Target .Bottom{ height: 560px;}
.Market .Target .Bottom .left{ width: 48%; padding-left: 40px;}
.Market .Target .Bottom .right{ width: 550px; padding-top: 100px; margin-right: 50px;}
.Market .Target .section{ margin-left: 40px; margin-top: 20px;}
.Market .img img{width:80%;}
.Market .Marketing .Headline{ padding-left: 40px;}
.Market .Marketing .left{ width: 48%; padding-left: 40px;}
.Market .Marketing .right{ width: 48%;}

.Market .SWOT .Headline{ padding-left: 40px;}
.Market .SWOT .section{ margin-left: 40px; margin-top: 20px;}

.Evaluation{ width: 1360px; margin: 50px auto 0 auto; padding-bottom: 50px; border-top: 3px solid #786a52;}
.Evaluation .Title{ width: 505px;}

.Evaluation .Social{ height: 480px;}
.Evaluation .Social .Headline{ padding-left: 40px;}
.Evaluation .Social .section{ margin-left: 40px; margin-top: 20px;}
.Evaluation .Social .left{ width: 54%;}
.Evaluation .Social .right{ width: 38%;}

.Evaluation .Areas{ height: 350px;}
.Evaluation .Areas .Headline{ padding-left: 40px;}
.Evaluation .Areas .section{ margin-left: 40px; margin-top: 20px;}
.Evaluation .Areas .left{ width: 54%;}
.Evaluation .Areas .right{ width: 38%;}



/*--1920--*/
@media only screen and (max-width: 1920px) {
	.Content{ font-size: 1.3rem;}
	.Content p{ line-height: 26.5px;}
	.Content .img{ width: 1000px; margin: 20px auto;}
	.Content .Title{ font-size: 2.9rem; height: 58px; padding: 0 20px; line-height: 53px;}
	.Content .Headline{ font-size: 1.7rem; padding-left: 55px;}
	.Content .SubTitle span:nth-of-type(1){ font-size: 2.2rem; height: 40px; line-height: 33.73px; padding-left: 10px;}
	.Content .SubTitle span:nth-of-type(2){ font-size: 1.9rem; line-height: 35.28px;}
	
	.Overview{ width: 1000px;}
	.Overview .Title{ width: 200px;}
	.Overview p:nth-last-of-type(1){ padding: 25px 55px;}
	
	.Core{ width: 1000px;}
	.Core .Title{ width: 465px;}
	.Core p:nth-last-of-type(1){ padding: 25px 55px;}
	
	.Product{ width: 1000px;}
	.Product .Title{ width: 275px;}
	.Product .section{ margin: 20px 0; padding-left: 55px;}
	
	.Product .Proposed .OPP{ height: 300px;}
	.Product .Proposed .OPP .left{ width: 425px; margin-top: 60px; margin-left: 150px;}
	.Product .Proposed .OPP .left p{ font-size: 1.7rem; line-height: 53px;}
	.Product .Proposed .OPP .left p:nth-of-type(1){ font-size: 2.3rem;}
	.Product .Proposed .OPP .right{ width: 178px; margin-top: 50px; margin-right: 150px;}
	
	.Product .Proposed .Enzyme{ height: 700px;}
	.Product .Proposed .Enzyme span:nth-of-type(1){ width: 245px;}
	.Product .Proposed .Enzyme .img{ width: 60%;}
	
	.Product .Proposed .Whole span:nth-of-type(1){ width: 270px;}
	.Product .Proposed .Whole .Top{ height: 280px;}
	.Product .Proposed .Whole .Top .left{ width: 600px;}
	.Product .Proposed .Whole .Top .right{ width: 160px;}
	
	.Product .Proposed .Whole .Bottom{ height: 300px;}
	.Product .Proposed .Whole .Bottom .left{ width: 460px;}
	.Product .Proposed .Whole .Bottom .right{ width: 500px; padding-top: 50px;}
	
	.Product .Proposed .Whole .considerations{ height: 340px;}
	
	.Product .Proposed .Whole .Environment{ height: 300px;}
	
	.Market{ width: 1000px;}
	.Market .Title{ width: 275px;}
	
	.Market .Target .Top{ height: 260px;}
	.Market .Target .Bottom{ height: 400px;}
	.Market .Target .Bottom .right{ width: 450px; margin: 0; padding-top: 40px;}
	
	.Evaluation{ width: 1000px;}
	.Evaluation .Title{ width: 360px;}
	
	.Evaluation .Social{ height: 360px;}
	
	.Evaluation .Areas{ height: 250px;}
}

/*--1190--*/
@media only screen and (max-width: 1190px) {
	html{ font-size: 50%;}
	.header .logo span{ margin: 15px 0;}
	.header .nav .Project{ width: 100px;}
	.header .nav .Application{ width: 100px;}
	.header .nav .Human_Practices{ width: 140px;}
	.header .nav .Achievement{ width: 120px;}
	.header .nav .Team{ width: 95px;}
	.header .nav .mainnav span{ padding-top: 8.5px; margin-bottom: 21px;}
}