/* ---------------------------
	Reset
--------------------------- */
*,
*:before,
*:after {
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
}
abbr, address, article, aside, audio, b, blockquote, body, canvas,
caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset,
figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,
object, ol, p, pre, q, samp, section, small, span, strong, sub, summary,
sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background-color: transparent; }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
address, cite, q, dfn { font-style: normal; }
h1, h2, h3, h4, h5, h6 { font-weight: 300; line-height:1; }
a, ins, del { text-decoration:none }
q, blockquote { quotes: none; }
th, td {  vertical-align: top; }
th { text-align: left; }
nav li { display:inline-block; list-style:none; }
img { display:inline-block; max-width:100%; height:auto; }


/* ---------------------------
	Layout
--------------------------- */
body {
	font: 100 18px/26px 'Lato', arial, serif;
	background: #0f1f36 url(../images/bg.jpg) left top no-repeat;
	background-size: cover;
	color: #fff;
}
a {
	color: #fff;
}
a:hover {
	text-decoration: underline;
}
p {
	margin-bottom: 20px;
}

#header {
	position: absolute;
	top: 60%;
	left: 20px;
}
#header a {
	display: block;
	text-indent: -9999px;
	background: url(../images/paperdolls-logo.png) center no-repeat;
	width: 140px;
	height: 120px;
    -webkit-transition: background .3s;
       -moz-transition: background .3s;
		 -o-transition: background .3s;
		    transition: background .3s;
}
#header.social-tw a {
	background-image: url(../images/logo-tw.gif);
}
#header.social-fb a {
	background-image: url(../images/logo-fb.gif);
}
#header.social-ig a {
	background-image: url(../images/logo-ig.gif);
}

#main {
	margin: 150px 0 0 180px;
	max-width: 300px;
	min-height: 600px;
}
#main .social {
	position: absolute;
	right: 5%;
	top: 60%;
	padding-left: 20px;
}

#footer {
	color: #aaa;
	padding: 80px 0 30px 180px;
	font-size: 12px;
}

.container {
	max-width: 1140px;
	margin: 0 auto;	
	position: relative;	
}

.mobile-visible {
	display: none;
}
.mobile-hidden {
	display: block;
}


/* ---------------------------
	Media query
--------------------------- */
@media only screen and (max-width: 959px){
	
	body {
		background-position: top right;	
		background-image: url(../images/bg-mobile.jpg);
	}
	
	#header {
		padding: 30px;
		position: static;
	}
	
	#main {
		margin: 0;
		padding: 0 40% 25px 25px;	
		max-width: none;
	}
	#main .social {
		position: static;
		padding-top: 50px;
	}
	
	#footer { 
		padding: 0 25px;
	}

	.mobile-visible {
		display: block;
	}
	.mobile-visible h4 {
		margin-bottom: 20px;
		text-decoration: underline;
		cursor: pointer;
	}
	.mobile-visible .inner {
		display: none;
	}
	.mobile-hidden {
		display: none;
	}
	
}