@charset "UTF-8";
/* CSS Document */

body{
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	margin: 0;
	background-color: #FC4A4E; 
}
#block1{
	text-align: center;
	margin: 0 auto;
	width: 960px;
	height: 894px;
}

#block2{
	text-align: center;
	margin: 0 auto;
	width: 960px;
	height: 670px;
}

#block3{
	text-align: center;
	margin: 0 auto;
	width: 960px;
	height: 743px;
}

#block4{
	text-align: center;
	margin: 0 auto;
	width: 960px;
	height: 529px;
}

#block5{
	text-align: center;
	margin: 0 auto;
	width: 960px;
	height: 450px;
}

#block6{
	text-align: center;
	margin: 0 auto;
	width: 960px;
	height: 385px;
}

#block7{
	text-align: center;
	margin: 0 auto;
	height: 898px;
	width: 960px;
}
#block8{
	text-align: center;
	margin: 0 auto;
	width: 960px;
	height: 460px;
}

#block9{
	text-align: center;
	margin: 0 auto;
	width: 960px;
	height: 355px;
}

#block10{
	text-align: center;
	margin: 0 auto;
	width: 960px;
	height: 880px;
}




h1 {
	font-weight: 400;
	font-size: 75pt;
	text-transform: uppercase;
	padding-top: 13px;
	padding-bottom: 0px;
	height: 88px;
	color: #F3EFED;
}

	


#tagline{
	font-size: 18pt;
	font-weight: 300;
	width: 960px;
	margin: auto;
	padding-top: 215px;
	padding-bottom: 13px;
}

#topborder{
	border-bottom: #223368 2px solid;
	width: 588px;
	margin: auto;
}

#bottomborder{
	border-bottom: #223368 2px solid;
	width: 588px;
	margin: auto;
}

#variations{
	font-size: 16pt;
	font-weight: 400;
	border-bottom: #F3EFED 9px solid;
	width: 310px;
	margin: auto;
	padding-top: 105px;
	padding-bottom: 8px;
}

#pagelink{
	margin-top: 18px;
}

	#opening{
		height: 250px;
		width: 530px;
		padding-top: 200px;
		padding-left: 85px;
		float: left;
	}

	#serifs{
		font-weight: 300;
		font-size: 50pt;
		font-style: italic;
		line-height: 59pt;
		padding-top: 300px;
	}

	#simplicity{
		font-size: 35pt;
		font-weight: 300;
		padding-bottom: 35px;
		text-align:left
	}

	#ultimate{
		font-size: 66pt;
		font-weight: 400;
		padding-bottom: 9px;
		text-align:left
	}

	#sophistication{
		font-size: 47pt;
		font-weight: 300;
		font-style: italic;
		text-align:left
	}

	#leobox{
		width: 250px;
		height: 227px;
		float: left;
		margin-top: 200px;
	}

	#leonardo{
		font-size: 20pt;
		font-weight: 400;
		line-height: 27pt;
		margin-left: 0 auto;
		margin-right: 0 auto;
		margin-top: 64px;
		margin-bottom: 36px;
	}

	#polymath{
		font-size: 15pt;
		font-weight: 300;
	}

		#inspiration{
			font-weight: 400;
			font-size: 30pt;
			padding-top: 113px;
			padding-bottom: 75px;
			height: 0px;	
		}

		#modernism{
			font-size: 20pt;
			font-weight: 300;
			font-style: italic;
			line-height: 28pt;
			padding-bottom: 36px;
		}

		#linkbox1{
			font-size: 14pt;
			font-weight: 600;
			width: 200px;
			height: 40px;
			margin: 0 auto;
		}

		#learnmore-link{
			font-size: 14pt;
			font-weight: 600;
			line-height: 46px;
			padding-top: 0px
		}

			#callout{
				margin: auto;
				padding-left: 126px;
			}

			#geometric{
				font-size: 21pt;
				font-weight: 300;
				line-height: 26pt;
				width: 220px;
				float: left;
				padding-right: 60px;
				padding-top: 197px
			}

			#ewx{
				font-size: 175pt;
				font-weight: 600;
				letter-spacing: 20px;
				width: 430px;
				height: 190px;
				float: left;
				padding-top: 120px;
			}

				#appreciate{
					font-weight: 400;
					font-size: 54pt;
					font-style: italic;
					padding-top: 113px;
					padding-bottom: 119px;
					height: 0px;
				}

				#unique{
					font-size: 21pt;
					font-weight: 300;
					line-height: 30pt;
				}

					#column1{
						width: 50%;
						float: left;
						display: inline;
						margin: 0px;
					}

					#column2{
						width: 50%;
						float: left;
						display: inline;
						margin: 0px;
					}
						
						#inuse{
						font-weight: 300;
						font-size: 20pt;
						height: 0px;
						padding-top: 97px;
						padding-bottom: 65px;
						}
					

						#aboutdesigner{
							float: left;
							display: inline;
							width: 350px;
							padding-left: 27px;
							margin-top: 110px;
						}

						#designer{
							float: left;
							padding-left: 20px;
						}

						#santiago{
							font-size: 14pt;
							font-weight: 400;
							float: left;
							padding-left: 20px;
							padding-bottom: 8px;
						}

						#designerborder{
							border-bottom: #223368 2px solid;
							width: 150px;
							float: left;
							margin-left: 20px;
						}

						#typedesigner{
							font-size: 14pt;
							font-weight: 400;
							float: left;
							padding-left: 20px;
							padding-top: 20px;
						}

						#linkbox2{
								width: 150px;
								height: 42px;
							    float: left;
							    margin-left: 20px;
								margin-top: 24px;
							}

						#typemade-link{
							font-size: 15pt;
							font-weight: 600;
							line-height: 36px;
							padding-top: 6px
						}

						#quotecontainer{
							padding-left: 137px;
							float: left;
						}


						#quotemarks-beginning{
							font-size: 25pt;
							font-weight: 600;
							float: left;
							margin-top: 110px;
						}

						#quote{
							font-size: 14pt;
							font-weight: 300;
							line-height: 30pt;
							float: left;
							text-align: justify;
							text-justify: inter-word;
							margin-left: 20px;
							margin-right: 20px;
							margin-top: 100px;
							width: 330px;
						}

						#quotemarks-end{
							font-size: 25pt;
							font-weight: 600;
							float: left;
							margin-top: 235px;
						}

							#get{
								font-weight: 300;
								font-size: 42pt;
								padding-top: 228px;
								padding-bottom: 110px;
								height: 0px;
							}

							#lowertopborder{
								border-bottom: #F3EFED 1px solid;
								width: 588px;
								margin: auto;
								padding-top: 198px;
							}

							#lowerbottomborder{
								border-bottom: #F3EFED 1px solid;
								width: 588px;
								margin: auto;
								padding-top: 55px;
							}

							#linkbox3{
								font-size: 14pt;
								font-weight: 600;
								width: 200px;
								height: 42px;
								margin: 0 auto;
							}

							#googlefonts-link{
								font-size: 19pt;
								font-weight: 400;
								line-height: 47px;
							}

							#share{
								font-weight: 300;
								font-size: 17pt;
								line-height: 23pt;
								padding-top: 28px;
								height: 0px;
							}

							#socialmedia{
								margin: auto;
								padding-left: 360px;
								padding-top: 90px;
								padding-bottom: 4px;
								height: 0px;
							}
							
							#pinterest{
								float:left;
							}

							#twitter{
								float:left;
								margin-left: 40px;
							}

							#facebook{
								float:left;
								margin-left: 40px;
							}

							#tumblr{
								float:left;
								margin-left: 40px;
							}

							#copyright{
								font-size: 10pt;
								font-weight: 400;
								padding-top: 35px;
								line-height: 12pt
							}



.expression{
	font-size: 21pt;
	font-weight: 400;
	font-style: italic;
	line-height: 26pt;
}

.isthe{
	font-size: 20pt;
	font-weight: 300;
}

.zbox{
	height: 130px;
	width: 130px;
	margin: auto;
	float: left;
	background-color: #223368;
}

.stylesbox{
	width: 100%;
	height:160px;
	float: left;
}

.styles{
	width: 100%;
	margin-top: 29px;
}

.center{
	margin: auto;
	width: 960px;
	padding-left: 47px;
	padding-top: 85px;
}




.redblock{
	background-color: #FC4A4E;
}

.whiteblock{
	background-color: #F3EFED;
}

.blueblock{
	background-color: #223368;
}

.red{
	color: #FC4A4E;
}

.white{
	color: #F3EFED;
}

.button:hover{
	color: #FC4A4E;
}


.blue{
	color: #223368;
}

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

.grow { 
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}

.grow:hover { 
	-webkit-transform: scale(1.03);
	-moz-transform: scale(1.03);
	-ms-transform: scale(1.03);
	-o-transform: scale(1.03);
	transform: scale(1.03);
}



.circlearrow {
    -webkit-filter: brightness(100%);
}

.circlearrow:hover {
    -webkit-filter: brightness(550%);
    -webkit-transition: all 0s ease;
    -moz-transition: all 0s ease;
    -o-transition: all 0s ease;
    -ms-transition: all 0s ease;
    transition: all 0s ease;
}




		#z-thin{
			font-weight: 100;
			font-size: 66pt;
			line-height: 150px;
		}
		#thin{
			font-weight: 100;
			font-size: 20pt;
			border-bottom: #223368 2px solid;
			width: 240px;
			margin-left: 145px;
			padding-bottom: 5px;
			text-align: left;
		}
		#thin-ex{
			font-weight: 100;
			line-height: 13pt;
			padding-top: 20px;
			padding-left: 100px;
			text-align: justify;
			margin-left: 45px;
		}

		#z-thin-i{
			font-weight: 100;
			font-size: 66pt;
			font-style: italic;
			line-height: 150px;
		}
		#thin-i{
			font-weight: 100;
			font-size: 20pt;
			font-style: italic;
			border-bottom: #223368 2px solid;
			width: 240px;
			margin-left: 145px;
			padding-bottom: 5px;
			text-align: left;
		}
		#thin-i-ex{
			font-weight: 100;
			font-style: italic;
			line-height: 13pt;
			padding-top: 20px;
			text-align: justify;
			margin-left: 145px;
		}

		#z-light{
			font-weight: 300;
			font-size: 66pt;
			line-height: 150px;
		}
		#light{
			font-weight: 300;
			font-size: 20pt;
			border-bottom: #223368 2px solid;
			width: 240px;
			margin-left: 145px;
			padding-bottom: 5px;
			text-align: left;
		}
		#light-ex{
			font-weight: 300;
			line-height: 13pt;
			padding-top: 20px;
			text-align: justify;
			margin-left: 145px;
		
		}

		#z-light-i{
			font-weight: 300;
			font-size: 66pt;
			font-style: italic;
			line-height: 150px;
		}
		#light-i{
			font-weight: 100;
			font-style: italic;
			font-size: 20pt;
			border-bottom: #223368 2px solid;
			width: 240px;
			margin-left: 145px;
			padding-bottom: 5px;
			text-align: left;
		}
		#light-i-ex{
			font-weight: 300;
			font-style: italic;
			line-height: 13pt;
			padding-top: 20px;
			text-align: justify;
			margin-left: 145px;
		}

		#z-regular{
			font-weight: 400;
			font-size: 66pt;
			line-height: 150px;
		}
		#regular{
			font-weight: 400;
			font-size: 20pt;
			border-bottom: #223368 2px solid;
			width: 240px;
			margin-left: 145px;
			padding-bottom: 5px;
			text-align: left;
		}
		#regular-ex{
			font-weight: 400;
			line-height: 13pt;
			padding-top: 20px;
			text-align: justify;
			margin-left: 145px;
		}

		#z-italic{
			font-weight: 400;
			font-size: 66pt;
			font-style: italic;
			line-height: 150px;
		}
		#italic{
			font-weight: 400;
			font-style: italic;
			font-size: 20pt;
			border-bottom: #223368 2px solid;
			width: 240px;
			margin-left: 145px;
			padding-bottom: 5px;
			text-align: left;
		}
		#italic-ex{
			font-weight: 400;
			font-style: italic;
			line-height: 13pt;
			padding-top: 20px;
			text-align: justify;
			margin-left: 145px;
		}

		#z-semibold{
			font-weight: 600;
			font-size: 66pt;
			line-height: 150px;
		}
		#semibold{
			font-weight: 600;
			font-size: 20pt;
			border-bottom: #223368 2px solid;
			width: 240px;
			margin-left: 145px;
			padding-bottom: 5px;
			text-align: left;
		}
		#semibold-ex{
			font-weight: 600;
			line-height: 13pt;
			padding-top: 20px;
			text-align: justify;
			margin-left: 145px;
		}

		#z-semibold-i{
			font-weight: 600;
			font-size: 66pt;
			font-style: italic;
			line-height: 150px;
		}
		#semibold-i{
			font-weight: 600;
			font-style: italic;
			font-size: 20pt;
			border-bottom: #223368 2px solid;
			width: 240px;
			margin-left: 145px;
			padding-bottom: 5px;
			text-align: left;
		}
		#semibold-i-ex{
			font-weight: 600;
			font-style: italic;
			line-height: 13pt;
			padding-top: 20px;
			text-align: justify;
			margin-left: 145px;
		}

		#z-bold{
			font-weight: 700;
			font-size: 66pt;
			line-height: 150px;
		}
		#bold{
			font-weight: 700;
			font-size: 20pt;
			border-bottom: #223368 2px solid;
			width: 240px;
			margin-left: 145px;
			padding-bottom: 5px;
			text-align: left;
		}
		#bold-ex{
			font-weight: 700;
			line-height: 13pt;
			padding-top: 20px;
			text-align: justify;
			margin-left: 145px;
		}

		#z-bold-i{
			font-weight: 700;
			font-size: 66pt;
			font-style: italic;
			line-height: 150px;
		}
		#bold-i{
			font-weight: 700;
			font-style: italic;
			font-size: 20pt;
			border-bottom: #223368 2px solid;
			width: 240px;
			margin-left: 145px;
			padding-bottom: 5px;
			text-align: left;
		}
		#bold-i-ex{
			font-weight: 700;
			font-style: italic;
			line-height: 13pt;
			padding-top: 20px;
			text-align: justify;
			margin-left: 145px;
		}