
/* Main CSS
-------------------------------------------------------------------------------

    0. CSS Reset & Clearfix
    1. Document Setup
    2. Content - Logo, Title, Subscribe, Social icons
    3. Parallax
    4. Countdown
    5. Background
    6. Footer
    7. Media Queries

---------------------------------------------------------------------------------- */


/*	0.  Reset & Clearfix (http://meyerweb.com/eric/tools/css/reset/)
/* ------------------------------------------------------------------------------- */

	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea,select{margin:0;padding:0;outline:0;border:0;background:transparent;vertical-align:baseline;font-size:100%;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}del{text-decoration:line-through;}hr{width: 200px;background: #000000;clear:both;margin-left: 0;margin-bottom: 10px;padding:0;height:1px;border:0;}mark{background-color:#ffffb3;font-style:italic;}input,select{vertical-align:middle;}ins{background-color:red;color:#fff;text-decoration:none;}ol,ul{list-style:none;}table{border-collapse:collapse;border-spacing:0;}

	.clear{clear:both;display:block;visibility:hidden;overflow:hidden;width:0;height:0;}.clearfix:after{clear:both;display:block;visibility:hidden;width:0;height:0;content:' ';font-size:0;line-height:0;}* html .clearfix,:first-child+html .clearfix{zoom:1;}


/*	1.  Document Setup
/* ------------------------------------------------------------------------------- */

html {
	min-height: 100%;
	width: 100%;
	overflow-x: hidden;
}

body {
	min-height: 100%;
	width: 100%;
	background: rgb(160,172,182);
	color: #333;
	font: normal 16px 'Open Sans',Helvetica,Arial;
	
}
.indent {
	text-indent: 1.5em;
}

p {
	text-align: left;
	margin-bottom:25px;
	font: normal normal 400 16px/normal 'Open Sans',Helvetica,Arial;
}

/*	2.  Content - Logo, Title, Subscribe, Social icons
/* ------------------------------------------------------------------------------- */

.content-wrapper {
	width: 100%;
	height: 1000px;
	top: 0;
	position: relative;
	
}

#content {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	margin-left: -460px;
	margin-top:40px;
	margin-bottom:40px;
	padding: 40px;
	width: 920px;
	text-align: left;
	border-radius:6px;
	background:rgba(255, 255, 255, 0.3);
}

#logo {
	margin: 0;
	padding: 0 10px;
	max-width: 600px;
	max-height: 160px;
}

#logo img {
	max-width: 100%;
	max-height: 100%;
}

.main-title{
	margin: 30px 0 10px;
	text-transform: uppercase;
	font: normal 48px 'Oswald', Impact, sans-serif;
}

/* --- subscribe --- */

.subscribe_field {
	position: relative;
    display: inline-block;
    margin-top: 40px;
    width: 400px;
    height: 40px;
    border: 1px solid #aaaeb3;
    border-radius: 5px;
    background: #fff;
}

.subscribe_field input {
	float: left;
	margin-left: 10px;
    width: 280px;
	height: 40px;
	color: #808080;
    font-size: 14px;
    font-family: 'Open Sans';
}

.subscribe_field button {
	position: relative;
	right: 0;
    float: right;
    margin: 4px;
    width: 100px;
    height: 32px;
    border: none;
    border-radius: 3px;
    background: #414141;
    color: #fff;
    font-size: 14px;
    font-family: 'Open Sans';
    cursor: pointer;
    -webkit-transition: background .5s ease;
	-moz-transition: background .5s ease;
	-o-transition: background .5s ease;
	transition: background .5s ease;
	-ms-transition: background .5s ease;
}

.subscribe_field button:hover {
    background: #a5b0ba;
}

.subscribe_field button:active {
    right: -1px;
}

.subscribe_field .flabel {
    position: absolute;
    left: 10px;
    height: 40px;
    color: #808080;
    font-size: 14px;
    line-height: 42px;
}

/* --- error --- */

.error {
    border: 1px solid #d43333;
}

/* --- good --- */

.good {
    background: #80909f;
    border: 1px solid #80909f;
    line-height: 40px;
    color: #fff;
}

.good:after {
	content: 'Thanks for subscribing';
}

.good input {
	display: none;
}

.good button {
	display: none;
}

.good .flabel {
    display: none;
}

/* --- social --- */

.social {
	margin: 10px auto;
	text-align: center;
}

.social li {
	display: inline-block;
	margin: 5px 5px 5px 0;
	width: 26px;
	height: 26px;
	border-radius: 3px;
	background-color: #414141;
	-webkit-transition: background-color .5s ease;
	-moz-transition: background-color .5s ease;
	-o-transition: background-color .5s ease;
	transition: background-color .5s ease;
	-ms-transition: background-color .5s ease;
}

.icon-facebook,.icon-twitter,.icon-google,.icon-flickr,.icon-pinterest,.icon-vimeo,.icon-youtube,.icon-linkedin,.icon-instagram,.icon-skype,.icon-vkontakte,.icon-tumblr,.icon-rss,.icon-picasa,.icon-deviant,.icon-wordpress,.icon-dribble {
	width: 26px;
	height: 26px;
}

.icon-facebook {
	background: url(../images/social.png);
}
.facebook:hover {
	background-color: #3c5a98;
}

.icon-twitter {
	background: url(../images/social.png) -26px 0;
}
.twitter:hover {
	background-color: #00aced;
}

.icon-google {
	background: url(../images/social.png) -52px 0;
}
.google:hover {
	background-color: #cf3616;
}

.icon-flickr {
	background: url(../images/social.png) -78px 0;
}
.flickr:hover {
	background-color: #ff0084;
}

.icon-pinterest {
	background: url(../images/social.png) -104px 0;
}
.pinterest:hover {
	background-color: #cc2127;
}

.icon-vimeo {
	background: url(../images/social.png) -130px 0;
}
.vimeo:hover {
	background-color: #1ab7ea;
}

.icon-youtube {
	background: url(../images/social.png) -156px 0;
}
.youtube:hover {
	background-color: #ff3333;
}

.icon-linkedin {
	background: url(../images/social.png) -182px 0;
}
.linkedin:hover {
	background-color: #0092be;
}

.icon-instagram {
	background: url(../images/social.png) -208px 0;
}
.instagram:hover {
	background-color: #205c81;
}

.icon-skype {
	background: url(../images/social.png) -234px 0;
}
.skype:hover {
	background-color: #009fe3;
}

.icon-vkontakte {
	background: url(../images/social.png) -260px 0;
}
.vkontakte:hover {
	background-color: #4e729b;
}

.icon-tumblr {
	background: url(../images/social.png) -286px 0;
}
.tumblr:hover {
	background-color: #44546b;
}

.icon-rss {
	background: url(../images/social.png) -312px 0;
}
.rss:hover {
	background-color: #ff7e00;
}

.icon-picasa {
	background: url(../images/social.png) -338px 0;
}
.picasa:hover {
	background-color: #a5b0ba;
}

.icon-deviant {
	background: url(../images/social.png) -364px 0;
}
.deviant:hover {
	background-color: #4f5e55;
}

.icon-wordpress {
	background: url(../images/social.png) -390px 0;
}
.wordpress:hover {
	background-color: #21759b;
}

.icon-dribble {
	background: url(../images/social.png) -416px 0;
}
.dribble:hover {
	background-color: #ea4c89;
}

/*	3.  Parallax
/* ------------------------------------------------------------------------------- */

.parallax-viewport {
    position: relative;     /* relative, absolute, fixed */
    overflow: hidden;
}

.parallax-layer {
    position: absolute;
}

#parallax-section {
	position: absolute;
	left: 50%;
	margin-left: -800px;
	top: 800px;
	width: 1600px;
	height: 500px;
}

#front-layer {
	width: 1700px;
	height: 570px;
	position: absolute; 
    left: 0; 
    top: 0;
	background: url(../images/parallax-front-layer-clouds.png);
	background-position: 0 0;
}

#back-layer {
	width: 1650px;
	height: 550px;
	position: absolute;
    left: 0; 
    top: 0;
	background: url(../images/parallax-back-layer-clouds.png);
	background-position: 0 0;
}

#countdown-wrapper {
	padding-top: 200px;
	width: 1620px;
	height: 320px;
}

#countdown {
	margin: 0 auto;
	width: 720px;
}

/*	4.  Countdown
/* ------------------------------------------------------------------------------- */

.artrow-countdown {
    width: 100%;
    margin: 0 auto;
    display: inline-block;
    height: 100%;
    text-align: center;
}

.artrow-countdown label {
    display: block;
    margin: 0 auto;
}

.artrow-countdown .time {
    margin-bottom: 40px;
}

.artrow-countdown .separator,
.artrow-countdown .time {
    display: inline-block;
    height: 110px;
}

.artrow-countdown .separator {
    width: 30px;
    background: none;
    height: 10px;
}

.artrow-countdown .number {
    display: block;
    background: url(../images/digits.png) no-repeat; /* Comment this for disable 3D digits. Read documentation for more info */
    width: 70px;
    height: 110px;
    float: left;
}

.artrow-countdown .number .value {
    visibility: hidden; /* Change to "visible" for display digits */
    font: normal 120px/120px Impact, sans-serif;
    color: #89979f;
}

.artrow-countdown .clearfix {
    clear: both;
}

/* Titles under digits.

.artrow-countdown .days:after,
.artrow-countdown .hours:after,
.artrow-countdown .minutes:after,
.artrow-countdown .seconds:after {
    display: block;
    color: #89979f;
    width: 140px;
    height: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.artrow-countdown .days:after {
	max-width: 210px;
    width: 100%;
    content: 'DAYS';
}

.artrow-countdown .hours:after {
    content: 'HOURS';
}

.artrow-countdown .minutes:after {
    content: 'MINUTES';
}

.artrow-countdown .seconds:after {
    content: 'SECONDS';
}
--------------------------------------------------------------------- */

/* Titles over digits */

.artrow-countdown .days:before,
.artrow-countdown .hours:before,
.artrow-countdown .minutes:before,
.artrow-countdown .seconds:before {
    display: block;
    color: #89979f;
    width: 140px;
    height: 20px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.artrow-countdown .days:before {
    width: 100%;
    content: 'DAYS';
}

.artrow-countdown .hours:before {
    content: 'HOURS';
}

.artrow-countdown .minutes:before {
    content: 'MINUTES';
}

.artrow-countdown .seconds:before {
    content: 'SECONDS';
}

/*	5.  Background
/* ------------------------------------------------------------------------------- */

.bg-light {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -800px;
	width: 1600px;
	height: 786px;
	background: transparent url(../images/bg-light.png);
}

.bg-clouds {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -730px;
	width: 1460px;
	height: 500px;
	background: transparent url(../images/bg-clouds.png);
}

#bg-animation-clouds {
	position: absolute;
	top: 890px;
	width: 100%;
	height: 215px;
	background: url(../images/bg-animation-clouds.png);
}

/*	6.  Footer
/* ------------------------------------------------------------------------------- */

.footer {
	margin: 0 auto;
	margin-top: 530px; 
	padding-bottom: 30px;
	width: 200px;
	color: #606e7a;
	text-align: center;
	font-size: 14px;
}

.footer span {
	font-size: 12px;
}

/*	7.  Media Queries
/* ------------------------------------------------------------------------------- */

/* Smaller than 720px (devices and browsers) */
@media screen and (max-width: 720px) {
	
	#logo {
		max-width: 420px;
	}

	#countdown {
		width: 420px;
	}

	#bg-animation-clouds {
		top: 500px;
	}
}

/* Smaller than 480px (devices and browsers) */
@media screen and (max-width: 480px) {

	.content-wrapper {
		height: 1300px;
	}

	#content {
		margin-left: -160px;
		width: 320px;
	}

	#logo {
		max-width: 320px;
	}

	.subscribe_field {
	    width: 300px;
	}

	.subscribe_field input {
	    width: 180px;
	}

	#countdown {
		width: 250px;
	}

	#bg-animation-clouds {
		top: 900px;
	}

	.footer {
		margin-top: 850px; 
	}
}

/* Smaller than 320px (devices and browsers) */
@media screen and (max-width: 320px) {

	.content-wrapper {
		height: 1400px;
	}

	#content {
		margin-left: -120px;
		width: 240px;
	}

	#logo {
		max-width: 240px;
		overflow: hidden;
	}
	
	.subscribe_field {
	    width: 240px;
	}

	.subscribe_field input {
	    width: 140px;
	}

	.subscribe_field button {
	    width: 80px;
	}

	#parallax-section {
		top: 400px;
	}

	.artrow-countdown .separator {
		width: 0;
	}

	#bg-animation-clouds {
		top: 1000px;
	}
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	.icon-facebook,.icon-twitter,.icon-google,.icon-flickr,.icon-pinterest,.icon-vimeo,.icon-youtube,.icon-linkedin,.icon-instagram,.icon-skype,.icon-vkontakte,.icon-tumblr,.icon-rss,.icon-picasa,.icon-deviant,.icon-wordpress,.icon-dribble {
		background-image: url(../images/social@2x.png);
		background-size: 442px 26px;
	}
	#back-layer {
		background-image: url(../images/parallax-back-layer-clouds@2x.png);
		background-size: 1650px 550px;
	}
	#front-layer {
		background-image: url(../images/parallax-front-layer-clouds@2x.png);
		background-size: 1700px 570px;
	}
	.artrow-countdown .number {
	    background-image: url(../images/digits@2x.png);
		background-size: 700px 1210px;
	}
	.bg-light {
		background-image: url(../images/bg-light@2x.png);
		background-size: 1600px 786px;
	}
	.bg-clouds {
		background-image: url(../images/bg-clouds@2x.png);
		background-size: 1460px 500px;
	}
	#bg-animation-clouds {
		background-image: url(../images/bg-animation-clouds@2x.png);
		background-size: 492px 215px;
	}
}