/*box sizing*/
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*clearfix*/

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
 
.clearfix {  
    *zoom: 1;  
}

ul{
	list-style: none;
	padding:0;
}

a{
	text-decoration: none;
	color:#000;
}

/****html and body***/
html, body{
	width: 100%;
	font-family: 'Roboto Condensed', sans-serif;
	height: 100%;
	}

/****container***/

.container{
	width: 100%;
	max-width: 1300px;
	overflow: hidden;
	margin:0 auto;
}

header{
	width: 100%;
	max-width: 1300px;
	position: fixed;
	background-color: #fff;
	top:0;
	z-index: 200;
	text-align: center;
}

header img.logo{
	width: 11%;
	padding:1%;
	margin: 0 auto;
	margin-left: 5%;
}

nav{
	float: right;
	position: relative;
	top:20px;
	right:10px;
}

nav button{
	background-color: #fff;
	border:none;
}

nav span{
	display: block;
	width: 19px;
	height: 2px;
	margin: 4px 0;
	border-radius: 10px;
	background-color: #000;
	z-index: 99999;
	cursor: pointer;
}

nav ul{
	display: none;
	position: absolute;
	top:12px;
	right:5px;
	background-color: #fff;
	width: 100px;
}

nav ul li{
	text-transform: uppercase;
	padding:5%;
}

ul li:hover{
	color:#ccc;
}

/****************************home****************************/

section.home{
	max-height: 650px;
	width: 100%;
	overflow: hidden;
	text-align: center;
	position: relative;
}

.home img{
	width: 100%;
	position: relative;
	bottom: -50px;
}

/****************************loosies****************************/
.loosies{
	margin-top: 0;
}

.loosies h1
,.framework h1{
	text-align:center;
	text-transform: uppercase;
	font-size: 3.5em;
	line-height: 1em;
	font-weight: 300;
	margin-left: 3%;
	margin-top: 2%;
	margin-bottom: 2%;
}

.loosies ul{
	display: inline-block;
	width: 100%;
	margin:0 auto;
	text-align: center;
}

.loosies ul li{
	display: inline-block;
	width: 33%;
}

.loosies ul li:last-child{
	margin-right: 0;
}

/****************************framework****************************/
section.framework{
	text-align: center;
	margin-top:5%;
	margin-bottom:5%; 
}

.framework iframe{
	text-align: center;
	width: 50%;
}

/****************************gallery****************************/

section.gallery ul{
	width: 100%;
	padding:0;
	background: url(../img/tablebgd.png) repeat repeat fixed;
}

section.gallery ul li{
	float:left;
	vertical-align: top;
}

section.gallery ul li article img{
	width: 100%;
}

section.gallery ul li.brick{
	width: 60%;
	position: relative;
	top:-60px;
}

section.gallery ul li.frameworkad{
	width: 40%;
}

section.gallery ul li.frameworkad article{
	width: 100%;
	background-color: #fff;
	position: relative;
	top:23px;
}

section.gallery ul li.frameworkad article img{
	padding: 17%;	
}


section.gallery ul li.logocircle {
	width: 50%;
	margin-top: 3%;
	background-color: #fff;
}

section.gallery ul li.napes{
	width: 50%;
	margin-bottom: 3%;
	position: relative;
	top:-10px;
	z-index: 5;
}

section.gallery ul li.napes img{
	max-height: 600px;
}

section.gallery ul li.graffiti {
	display: block;
	width: 100%;
	max-width: 1400px;
	min-height:525px;
	background: url(../img/atmosvideo1.png)no-repeat center center fixed;
	background-size: cover;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

section.gallery ul li.atmosface {
	display: block;
	width: 100%;
	max-width: 1400px;
	min-height:525px;
	background: url(../img/atmoselevator.png)no-repeat center center fixed;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

section.gallery ul li:nth-of-type(7) 
,section.gallery ul li:nth-of-type(8) 
,section.gallery ul li:nth-of-type(9) {
	width:33%;
}

section.gallery ul li:nth-of-type(7) img
,section.gallery ul li:nth-of-type(8) img
,section.gallery ul li:nth-of-type(9) img{
	min-height: 410px;
	max-height: 410px;
}

section.gallery ul li.lillies{
	margin-top: 5%;
	position: relative;
	top:5px;
	z-index: 5;
}

section.gallery ul li.atmosa{
	width: 34%;
}

section.gallery ul li.max{
	width: 35%;
	margin:0;
}

section.gallery ul li.openmic{
	width: 65%;
}

section.gallery ul li.logoanim{
	background-color: #fff;
	text-align: center;
	padding:20%;
}

.logoanim svg{
	width:100%;
}

.path {
  stroke-dasharray: 250;
  -webkit-animation: atmos 10s linear forwards infinite;
  -moz-animation: atmos 10s linear forwards infinite;
  -o-animation: atmos 10s linear forwards infinite;
 animation: atmos 10s linear forwards infinite;
}

@-webkit-keyframes atmos {
  to {
    stroke-dashoffset: 1000;
  }
}

@-moz-keyframes atmos {
  to {
    stroke-dashoffset: 1000;
  }
}

@-o-keyframes atmos {
  to {
    stroke-dashoffset: 1000;
  }
}

@keyframes atmos {
  to {
    stroke-dashoffset: 1000;
  }
}

section.gallery ul li.logoanim
{
	max-height: 300px;
}

section.gallery ul li.logoanim
,section.gallery ul li.blurry
,section.gallery ul li.stripe
,section.gallery ul li.pink
,section.gallery ul li.chicago{
	position: relative;
	z-index: 4;
	width: 50%;
}

section.gallery ul li.musicvideo{
	width: 50%;
}

section.gallery ul li.musicvideo article iframe{
	width: 100%;
}

/****************************footer****************************/
footer{
	width:100%;
	padding-top: 1%;
	background-color: #fff;
	position: fixed;
	bottom:0;
	z-index: 5;
	text-align: center;
}

footer ul{
	margin-left: 3%;
	list-style: none;
}

footer ul li{
	display: inline-block;
	font-size: 1.2em;
	margin-right: 2.5%;
}

footer ul li:hover i{
	color:#ccc;
}

footer ul li:last-child{
	margin-right: 0;
}
/****************************media queries****************************/

@media screen and (max-width:1200px){
	header img.logo{
		width: 14%;
	}

	.loosies h1,
	.framework h1{
		width: 25%;
		font-size: 4em;
	}

	.loosies li{
		width: 45%;
	}

		section.gallery ul li:nth-of-type(7) img
	,section.gallery ul li:nth-of-type(8) img
	,section.gallery ul li:nth-of-type(9) img{
		min-height: 290px;
		max-height: 290px;
	}
}

@media screen and (max-width:940px){

	.loosies h1,
	.framework h1{
		width: 25%;
		font-size: 3em;
	}	

	section.gallery ul li.frameworkad{
		display: none;
		}

	section.gallery ul li.brick{
		width: 100%;
		position: static;
	}
}

@media screen and (max-width:740px){

	header img.logo{
		width: 20%;
		padding-top: 3%;
	}

	.loosies h1,
	.framework h1{
		float: none;
		display:block;
		width: 100%;
		margin:0;
		margin-top:3%;
		margin-bottom: 3%;
		text-align: center;
	}

	.loosies ul{
		width: 100%;
		margin:2%;
	}

	.loosies ul li:first-child{
		margin-bottom: 3%;
	}

	.loosies ul li:nth-of-type(2){
		float:none;
		margin-left: 4%;
	}

	.loosies li iframe{
		height: 150px;
	}

	.framework iframe{
		width: 100%;
		margin:0;
	}

	section.gallery ul li.logoanim{
		width: 100%;
	}

	.logoanim svg{
		width: 35%;
	}

}

@media screen and (max-width:640px){

	header img.logo{
		width: 25%;
	}

	.loosies ul li{
		width: 100%;
	}

	.loosies ul li iframe{
		height:450px;
	}

	section.gallery ul li:nth-of-type(7) img
	,section.gallery ul li:nth-of-type(8) img
	,section.gallery ul li:nth-of-type(9) img{
		min-height:220px;
		height: auto;
	}

	section.gallery ul li.max
	,section.gallery ul li.stripe
	,section.gallery ul li.logoanim{
		display: none;
	}

	section.gallery ul li.pink
	,section.gallery ul li.elevator
	,section.gallery ul li.openmic
	,section.gallery ul li.musicvideo
	,section.gallery ul li.blurry{
		width: 100%;
		float:none;
		margin:0;
		margin-bottom: 3%;
		display: block;
	}

	section.gallery ul li.atmosface
	,section.gallery ul li.graffiti {
		min-height: 300px;
		background-attachment: scroll;
		-webkit-background-size: 100% 17em;
		-moz-background-size: 100% 17em;
		background-size: 100% 17em;
	}
}

@media screen and (max-width:480px){

	section.gallery ul li.graffiti{
		min-height: 350px;
		background-color: #fff;
	}

	section.gallery ul li.atmosface{
		min-height: 225px;
	}
	
	section.gallery ul li.graffiti 
	,section.gallery ul li.atmosface{
		background-attachment: scroll;
		-webkit-background-size: 100% 12.5em;
		-moz-background-size: 100% 12.5em;
		background-size: 100% 12.5em;
	}

	section.gallery ul li.atmosa,
	section.gallery ul li.lyrics{
		float:right;
		width: 50%;
	}

	section.gallery ul li.lillies{
		display: block;
		top:-10px;
		left:40px;
		width: 80%;
		}
}