@charset "UTF-8";

/*=========================*/
/*  Reset & Common Styles  */
/*=========================*/

* { margin: 0; padding: 0; }
body { font-size: 16px; position: relative; }
.clear::before, .clear::after { content: ""; display: table; }
.clear::after { clear: both; }
.clear { zoom: 1; }
.left { float: left; }
.right { float: right; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.strong { font-weight: bold; }
.italic { font-style: italic; }
a { text-decoration: none;}
a:hover { text-decoration: none; }
.visually-hidden { border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;width:1px;left:-9999em; }
.visually-visible { clip:auto;width:auto;height:auto;overflow:visible;left:0; }

/*=========================*/
/*      Handset Styles     */
/*=========================*/

@media (min-width:320px)  { 
	html {
		background-color: #121212;
		height: 100%;
		overflow: visible;
	}

	body {
		width: 100%;
		height: 100vh;
		padding: 30px;
		font-family: 'Roboto', sans-serif;
		color: #fff;
		background-color: #121212;
		z-index: 1;
		font-weight: 300;
	}

	body::before {
	  content: "";
	  position: fixed;
	  top: 0; 
	  left: 0;
	  width: 100%; 
	  height: 100%;  
	  opacity: .2; 
	  z-index: -1 !important;
	  background: url(../images/bg.jpg) no-repeat center center fixed;
	  background-attachment: fixed !important;  
	  -webkit-background-size: cover !important;
	  -moz-background-size: cover !important;
	  -o-background-size: cover !important;
	  background-size: cover !important;
	  -webkit-animation: fadeinBG 3s; /* Safari and Chrome */
	  -moz-animation: fadeinBG 3s; /* Firefox */
	  -ms-animation: fadeinBG 3s; /* Internet Explorer */
	  -o-animation: fadeinBG 3s; /* Opera */
	  animation: fadeinBG 3s;
	  overflow: visible;
	}

	@keyframes fadeinBG {
	    from { opacity: 0; }
	    to   { opacity: .2; }
	}

	/* Firefox */
	@-moz-keyframes fadeinBG {
	    from { opacity: 0; }
	    to   { opacity: .2; }
	}

	/* Safari and Chrome */
	@-webkit-keyframes fadeinBG {
	    from { opacity: 0; }
	    to   { opacity: .2; }
	}

	/* Internet Explorer */
	@-ms-keyframes fadeinBG {
	    from { opacity: 0; }
	    to   { opacity: .2; }
	}​

	/* Opera */
	@-o-keyframes fadeinBG {
	    from { opacity: 0; }
	    to   { opacity: .2; }
	}

	@keyframes fadein {
	    from { opacity: 0; padding-top:20px;}
	    to   { opacity: 1; padding-top: 0px;}
	}

	/* Firefox */
	@-moz-keyframes fadein {
	    from { opacity: 0; padding-top:20px;}
	    to   { opacity: 1; padding-top: 0px;}
	}

	/* Safari and Chrome */
	@-webkit-keyframes fadein {
	    from { opacity: 0; padding-top:20px;}
	    to   { opacity: 1; padding-top: 0px;}
	}

	/* Internet Explorer */
	@-ms-keyframes fadein {
	    from { opacity: 0; padding-top:20px;}
	    to   { opacity: 1; padding-top: 0px;}
	}​

	/* Opera */
	@-o-keyframes fadein {
	    from { opacity: 0; padding-top:20px;}
	    to   { opacity: 1; padding-top: 0px;}
	}
	h2 {
		font-size: 28px;
		margin:0;
		padding:0 0 20px 0;
		line-height: 35px;
	}

	p {
		font-size: 14px;
		margin:0;
		letter-spacing: 1px;
		padding:0 0 20px 0;
		line-height: 26px;
		font-weight: 400;
	}

	#container {
		height:100%;
	}

	.logo {
		height: 26px;
	}

	.about a {
		color:#fb6558;
		text-decoration: underline;
	}

	.about a:hover{
		opacity: 0.5;
		transition: all 200ms;
	}

	#header {
		width: 100%;
		display: block;
		margin-bottom: 30px;
	}

	.left, .right {]
		width: 100%;
		float:left;
		-webkit-animation: fadein 1s; /* Safari and Chrome */
	  -moz-animation: fadein 1s; /* Firefox */
	  -ms-animation: fadein 1s; /* Internet Explorer */
	  -o-animation: fadein 1s; /* Opera */
	  animation: fadein 1s;
	}

	#header .social {
		visibility: visible;
		float: right;
	}

	#content .social {
		visibility: hidden;
	}

	#header .social img,
	#content .social img {
		height: 18px;
	}

	#header .social img {
		height: 18px;
		margin-left: 20px;
	}

	#content .social img {
		margin-right: 20px;
	}

	#header .social a,
	#content .social a {
		opacity: 1;
	}

	#header .social a:hover,
	#content .social a:hover {
		opacity: 0.3;
		transition: all 200ms;
	}
}


/*=========================*/
/*      Desktop Styles     */
/*=========================*/

@media (min-width:975px) {

	#header .social {
		visibility: hidden;
	}

	#content .social {
		visibility: visible;
	}

	body {
		padding: 80px;
	}

	h2 {
		font-size: 25px;
		padding:0 0 30px 0;
	}

	p {
		font-size: 16px;
		padding:0 0 30px 0;
		line-height: 28px;
		font-weight: 300;
	}

	#header {
		margin-bottom: 50px;
	}

	.left, .right {]
		width: 50%;
	}

	.left {
		max-width: 450px;
		margin-right:50px;
	}

	.right {
		max-width: 300px;
	}
}