/**
 * Project style sheet.
 *
 * Many thanks to http://thenounproject.com/ for the icons.
 */

/*-------------------------------------
	DEFAULTS
--------------------------------------*/

/* One page Love */
.opl {
	position:fixed;
	top:100px;
	left:0px;
	z-index:99999;
}
.opl a {
	width:73px;
	height:56px;
	text-indent:-9999px;
	display:block;
	background:url('https://s3.amazonaws.com/onepagelove/one-page-love-award-left.png') no-repeat;
}

/* declare the default font and color here */
html { font-size: 62.5%; }
body, button, input, select, textarea { font-size: 15px; font-size: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Fonts */
.font-0 { font-family: 'AvenirLTStd-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.font-1 { font-family: 'AvenirLTStd-Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.font-2 { font-family: 'AvenirLTStd-Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.font-3 { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; }

/* Colors */
.cl-0 { color: #cc0033; }
.cl-1 { color: #4b4b4b; }
.cl-2 { color: white; }

/* Links */
a { color: #cc0033; text-decoration: underline; }
a:hover { text-decoration: none; }

/* Headings */
h1 { font-weight: normal; font-size: 48px; font-size: 4.8rem; margin: 0; }
h2 { font-weight: normal; font-size: 35px; font-size: 3.5rem; margin: 0; text-transform: lowercase; margin-bottom: 45px; } 
h2:after { display: block; content: ""; width: 55px; height: 6px; background: #cc0033; margin-top: 10px; }
h3 { font-weight: normal; margin: 0; text-transform: uppercase; font-size: 15px; font-size: 1.5rem; } 
h4 { font-weight: normal; margin: 0; text-transform: uppercase; font-size: 13px; font-size: 1.3rem; letter-spacing: 1px; }

/* Paragraphs */
h2 + p { margin-top: -30px; }
h3 + p { margin-top: 5px; }
p { line-height: 20px; }

/* Buttons */
.btn { padding: 14px 20px 12px 20px; display: inline-block; text-transform: uppercase; outline: none; position: relative; color: white; -webkit-transition: border-radius 300ms ease-in-out; -moz-transition: border-radius 300ms ease-in-out; transition: border-radius 300ms ease-in-out; font-size: 13px; font-size: 1.3rem; letter-spacing: 1px; background: #cc0033; border-radius: 20px; text-decoration: none; }
.btn:hover { border-radius: 0; text-decoration: none; }

/* Blockquote */
.cite { margin: 0; padding: 0; text-align: center; position: relative; padding-top: 100px; margin-bottom: 100px; }
.cite-text { font-size: 22px; font-size: 2.2rem; margin: 15px 0 10px 0; }
.cite-author-pic { position: absolute; top: 0; left: 50%; margin-left: -46px; }
.cite-author-title { margin: 0; }
.cite:after { content: ""; display: block; width: 154px; height: 6px; background: url(images/separator.png) left top repeat-x; margin: 50px auto 0 auto; }

/* Misc */
img { max-width: 100%; height: auto; }
::-moz-selection { color: white; background: #cc0033; }
::selection      { color: white; background: #cc0033; } 


/*-------------------------------------
	STRUCTURE
--------------------------------------*/
#wrapper { max-width: 100%; margin: 0 auto; overflow: hidden; z-index: 100; margin-bottom: 253px; position: relative; z-index: 5; background: white; }
#content { }
.sitewidth { max-width: 1020px; margin: 0 auto; position: relative; }
.section { position: relative; padding: 90px 0; border-bottom: 1px solid #ccc; }
.section:last-child { border-bottom: none; }
.col { width: 50%; float: left; }


/*-------------------------------------
	HEADER
--------------------------------------*/
#header { background: black url(../images/giphy1.gif) left top no-repeat; background-size: cover; background-attachment: fixed; text-align: center; color: white; position: relative; }
	.header-wrapper { height: 700px; position: relative; }
	.header-logo { position: absolute; z-index: 5; top: 50px; left: 50%; margin-left: -147px; display: block; }
	.header-headline { height: 100px; position: absolute; top: 50%; margin-top: -50px; left: 0; right: 0; }
	.header-headline span { font-size: 50px; font-size: 5rem; color: #cc0033; }
	.header-subtitle { font-size: 20px; font-size: 2rem; line-height: 28px; }
	
	.header-btn { position: absolute; bottom: 50px; width: 300px; left: 50%; margin-left: -170px; }
	.header-btn:after { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 10px solid #cc0033; content: ""; display: block; position: absolute; left: 50%; bottom: -10px; margin-left: -20px; bottom: 0; -webkit-transition: bottom 300ms ease-in-out; -moz-transition: bottom 300ms ease-in-out; transition: bottom 300ms ease-in-out; }
	.header-btn:hover:after { bottom: -10px; }



/*-------------------------------------
	ANIMS
--------------------------------------*/

/* For all animations */
.anim { width: 100%; max-width: 360px; background: white; overflow: hidden; position: relative; overflow: hidden; margin: 20px auto; }

/* Shapes */
.anim:after { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; background-repeat: no-repeat; background-size: contain; }
.anim-round:after { background-image: url(images/shape-round.png); }
.anim-star:after { background-image: url(images/shape-star.png); }
.anim-triangle:after { background-image: url(images/shape-triangle.png); }
.anim-exagone:after { background-image: url(images/shape-exagone.png); }
.anim-drop:after { background-image: url(images/shape-drop.png); }
.anim-triangle { top: -40px; left: -30px; }

/*-------------------------------------
	GRID LIST
--------------------------------------*/
.grid { width: 100%; margin-left: -40px; }
.grid-item { margin-bottom: 35px; display: inline-block; vertical-align: top; width: 50%; padding-left: 40px; }
.grid-x4 .grid-item { width: 25%; }

.grid-item-text { margin: 0; }
.grid-item-icon:before { content:""; display: block; width: 50px; height: 50px; background: #cc0033; background-image: url(images/sprite.png); background-repeat: no-repeat; border-radius: 100%; margin-bottom: 10px; }
.grid-item-01:before { background-position: left top; }
.grid-item-02:before { background-position: -50px top; }
.grid-item-03:before { background-position: -100px top; }
.grid-item-04:before { background-position: -150px top; }
.grid-item-05:before { background-position: -200px top; }
.grid-item-06:before { background-position: -250px top; }
.grid-item-07:before { background-position: -300px top; }
.grid-item-08:before { background-position: -350px top; }
.grid-item-09:before { background-position: -400px top; }
.grid-item-10:before { background-position: -450px top; }



/*-------------------------------------
	FOOTER
--------------------------------------*/
#footer { padding: 90px 0; background: #cc0033; text-align: center; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1; }
.footer-title { margin-bottom: 15px; }
.footer-link { color: white; font-size: 20px; font-size: 2rem; border-bottom: 1px solid white; padding-bottom: 5px; text-decoration: none; display: inline-block; -webkit-transition: padding-bottom 300ms ease-in-out; -moz-transition: padding-bottom 300ms ease-in-out; transition: padding-bottom 300ms ease-in-out; }
.footer-link:hover { padding-bottom: 10px; }
.footer-col { float: left; width: 25%; }

#footer .btn { background: white; color: #cc0033 }






/*-------------------------------------
	MEDIA QUERIES
--------------------------------------*/

.lt-ie9 .header-logo { position: relative; margin-left: 0; left: auto; }

@media not all {
	body > * {
		font-size: 15px;
		font-size: 1.5rem;
	}
}

/* For small height screen */
@media screen and (max-height: 800px) {
	.cite { margin-bottom: 50px; }
	.header-wrapper { height: 650px; }
	.section { padding: 50px 0; }
}


@media screen and (max-width: 1100px) {
	
	.sitewidth { width: 90%; }
	.opl { position: absolute; }
	
}


@media screen and (max-width: 950px) {
	
	#wrapper { margin-bottom: 0; }
	#footer { position: relative; padding: 30px 0; z-index: auto; }
	.footer-col { width: 50%; padding: 30px 0; height: 150px; }
		
}


@media screen and (max-width: 850px) {
	
	.col { float: none; width: 100%; }
	.grid-x4 .grid-item { width: 50%; }
	
	.header-wrapper { height: auto; padding: 60px 0; }
	.header-logo { position: relative; left: auto; top: auto; margin-left: 0; }
	.header-btn { position: relative; bottom: auto; left: auto; margin-left: 0; width: auto; padding-left: 15px; padding-right: 15px; }
	.header-headline { position: relative; height: auto; margin-top: 0; top: auto; padding: 60px 0; }
	.header-subtitle { font-size: 20px; font-size: 2rem; }
	
	.grid-item:before,
	h2:after { margin-left: auto; margin-right: auto; }
	#content { text-align: center; }
	#content .anim { margin: 0 auto; float: none; display: block; margin: 30px auto; width: 50%; }
	#content .anim-triangle { top: auto; left: auto; }
		
}

@media screen and (max-width: 480px) {
	
	.opl { display: none; }
	
	.grid { margin: 0; }
	.grid-item,
	.grid-x4 .grid-item { width: 100%; display: block; padding-left: 0; }
	
	#header { background: #cc0033; }
	.header-btn { display: none; }
	.header-headline { padding-bottom: 0; }
	.header-headline span { color: white; }
	.header-title,
	.header-headline span { font-size: 35px; font-size: 3.5rem; }
	.footer-col { width: 100%; padding: 30px 0; height: auto; float: none; }
		
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	.grid-item-icon:before { background-image: url('images/sprite@x2.png'); background-size: 500px 50px; }
}