/*************************************************/
/* stylesheet used on kimberlywyatt.com homepage */
/*************************************************/

html,body{
	width:100%;
	height:100%;
	padding:0;
	margin:0;
}
body{
	background:black;
	color:white;
	font-family:"proxima-nova-alt-condensed",sans-serif;
	font-size:100%;
}
a img{
	border:none;
}
h1,h2,h3,h4,h5,h6,p,ul,li{
	padding:0;
	margin:0;
}
ul,li{
	list-style:none;
}
.bgstretcher-area,
.bgstretcher-page{
	position:relative;
	height:100%;
}
#bigwrapper{
	position:relative;
	height:100%;
}
#header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:74px;
	padding:40px 0;
}
#logo{
	height:80px;
	padding:0 10px;
	max-width:1312px;
	margin:0 auto;
}
#logo img{
	display:block;
	max-width:100%;
}
#logo a,
#logo span{
	float:left;
}

/* 100% = 8.765% + 91.234% */

#logo a{
	max-width:8.765%;
}
#logo span{
	max-width:91.234%;
}
#logo img{
	max-width:100%;
}
#djbutton{
    position:absolute;
	right:5%;
	top:135px;
	width:155px;
}
#djbutton a{
	display:block;
}
#djbutton img{
	display:block;
	max-width:100%;
	height:auto;
}

#footer{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	background:rgba(0,0,0,.5);
	color:#fff;
	padding:31px 0 26px 0;
}
#footerlogo{
	display:none;
}
#menu{
	float:left;
	padding-left:40px;
	font-size:30px;
	font-weight:100;
	text-transform:uppercase;
	letter-spacing:5px;
	line-height:30px;
}
#menu li{
	display:inline;
}
#menu li a{
	color:#fff;
	text-decoration:none;
	margin-right:66px;
}
#menu li a:hover{
	color:#01cf9f;
}
#menu li.last a{
	margin-right:30px !important;
}

#social{
	float:right;
	width:276px;
	padding-right:40px;
}
#social li{
	float:left;
	padding-left:24px;
}
#social li.ab{
	padding-left:0;
}
#social li a{
	text-decoration:none;
}
#social li a span{
	display:block;
	height:30px;
	background:url(../images-bm/social.png) transparent no-repeat -1px -33px;
	position:relative;
}
#social li.ab a span{
	width:30px;
	background-position:-1px -33px;
}
#social li.fb a span{
	width:15px;
	background-position:-53px -33px;
}
#social li.tw a span{
	width:30px;
	background-position:-92px -33px;
}
#social li.yt a span{
	width:26px;
	background-position:-143px -33px;
}
#social li.ws a span{
	width:25px;
	background-position:-195px -33px;
}
#social li.ct a span{
	width:30px;
	background-position:-241px -33px;
}
#social li.ab a:hover span{
	background-position:-1px -1px;
}
#social li.fb a:hover span{
	background-position:-53px -1px;
}
#social li.tw a:hover span{
	background-position:-92px -1px;
}
#social li.yt a:hover span{
	background-position:-143px -1px;
}
#social li.ws a:hover span{
	background-position:-195px -1px;
}
#social li.ct a:hover span{
	background-position:-241px -1px;
}

#social li a span span{
	display:none;
	width:11px !important;
	height:82px !important;
	background:transparent;
	color:#01CF9F;
	font-weight:100;
	position:absolute;
	left:20%;
	bottom:75px;
}
#social li a:hover span span{
 	display:block;
}




@media screen and (max-width: 1354px) {
	#menu li a{
		margin-right:38px;
	}
}
@media screen and (max-width: 1264px) {
	#menu,
	#social{
		font-size:22px;
	}
}
@media screen and (max-width: 1126px) {
	#menu{
		padding-bottom:16px;
	}
	#menu li a{
		margin-right:66px;
	}
	#social{
		float:left;
		font-size:20px;
		padding-left:40px;
		padding-bottom:10px;
	}
	#social li{
		padding-left:0;
		padding-right:15px;
	}
	#social li{
		padding-left:15px;
		padding-right:0;
	}
	#social li a span{
		height:20px;
		background:url(../images-bm/social-small.png) transparent no-repeat 0px -22px;
	}
	#social li.ab a span{
		width:20px;
		background-position:0px -22px;
	}
	#social li.fb a span{
		width:10px;
		background-position:-35px -22px;
	}
	#social li.tw a span{
		width:20px;
		background-position:-61px -22px;
	}
	#social li.yt a span{
		width:18px;
		background-position:-97px -22px;
	}
	#social li.ws a span{
		width:17px;
		background-position:-131px -22px;
	}
	#social li.ct a span{
		width:20px;
		background-position:-163px -22px;
	}
	#social li.ab a:hover span{
		background-position:0px 0px;
	}
	#social li.fb a:hover span{
		background-position:-35px 0;
	}
	#social li.tw a:hover span{
		background-position:-61px 0;
	}
	#social li.yt a:hover span{
		background-position:-97px 0;
	}
	#social li.ws a:hover span{
		background-position:-131px 0;
	}
	#social li.ct a:hover span{
		background-position:-163px 0;
	}
	#social li a:hover span span{
 		display:none;
	}

}
@media screen and (max-width: 890px) {
	#menu li a{
		margin-right:38px;
	}
}

@media screen and (max-width: 810px) {
	#menu{
		letter-spacing:3px;
	}

}
@media screen and (max-width: 730px) {
	#header{
		padding:30px 0 8px 0;
	}

	#logo a{
		display:none;
	}
	#logo span{
		float:none;
		display:block;
		max-width:100%;
		margin:0 auto;
	}
    #djbutton{
		width:120px;
		top:100px;
	}
	#footer{
		padding:15px 0;
	}

	#footerlogo{
		display:block;
		position:absolute;
		right:15px;
		top:22px;
	}

	#footerlogo a{
		display:block;
		width:25px;
		height:38px;
	}

	#menu{
		font-size:18px;
		line-height:30px;
		padding:0 0 0 15px;
	}
	#menu li{
		display:block;
	}
	#menu li a{
		margin-right:10px;
	}
	#social{
		float:none;
		width:180px;
		position:absolute;
		right:15px;
		bottom:10px;
		padding-right:0;
	}
	#social,
	#social li,
	#social li a,
	#social li a span{
		display:block;
		height:20px;
		margin-bottom:0;
	}
}
@media screen and (max-width: 560px) {
    #djbutton{
		width:100px;
		top:80px;
	}
}
@media screen and (max-width: 400px) {
	#header{
		padding-top:15px;
	}
    #djbutton{
		width:100px;
		top:50px;
	}
	#menu,
	#social{
		font-size:16px;
		letter-spacing:3px;
	}
}