/* =Reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
ol,
ul {
	list-style: none;
}
blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption,
th,
td {
	font-weight: normal;
	text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
}
html {
	overflow-y: scroll;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
a:focus {
	outline: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}
audio,
canvas,
video {
	display: inline-block;
}
audio:not([controls]) {
	display: none;
}
del {
	color: #333;
}
ins {
	background: #fff9c0;
	text-decoration: none;
}
hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin: 24px;
	margin-bottom: 1.714285714rem;
}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
small {
	font-size: smaller;
}
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
}

/* Clearing floats */
.clear:after,
.wrapper:after,
.format-status .entry-header:after {
	clear: both;
}
.clear:before,
.clear:after,
.wrapper:before,
.wrapper:after,
.format-status .entry-header:before,
.format-status .entry-header:after {
	display: table;
	content: "";
}

/* 
==========================================================================
   Re-usables
========================================================================== 
*/

.elastic { width: 100%; display: block; }
.center { margin:0 auto; margin-top: 29px; }
.transition { -o-transition: opacity .2s linear; -ms-transition: opacity .2s linear; -moz-transition: opacity .2s linear; -webkit-transition: opacity .2s linear; transition: opacity .2s linear; }
.noTouch { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.antiAlias { font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; }
.circle { border-radius: 50%; }
/*.outer { width: 100%; height: 100%; position: absolute; top: 0; }*/
.inner { display: table; width: 100%; height: 100%; }
.cell { display: table-cell; vertical-align: middle; }

/* 
==========================================================================
   Style
========================================================================== 
*/

body { font-family: 'Roboto'; background-image: url(images/bg-2.png); background-color:#000; background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}

h1 { width:479px; height:365px; background-image:url(images/logo.png); background-size:100%; text-indent:-5000px; margin-top:0px!important; background-repeat: no-repeat; background-position-y: 50%; }
.socialsWrapper { width:100%; margin: 0 auto; text-align: center; }
.dj-text{ color:#fff; font-size: 16px; font-weight: 300; text-align:center; width:400px; margin: 0 auto; line-height: 2em;  padding-bottom:20px; margin-bottom:20px; border-bottom: 1px solid rgba(255,255,255,0.1)}
.footerWrapper {     background: rgba(0,0,0,0.7); padding-bottom: 30px; padding-top: 15px; position: absolute; bottom: 0; width: 100%;}
.social { width:70px; height:70px; margin:0 18px; background-size:100%; }
.social:hover { /*background: #3a589b; color: #ffffff; */}
/*.tw { background-image:url(images/tw.png) }*/
.fb {/* background-image:url(images/fb.png) */}
/*.ig { background-image:url(images/ig.png) }
.sc { background-image:url(images/sc.png) }
.yt { background-image:url(images/yt.png) }
.sp { background-image:url(images/sp.png) }
.mail { background-image:url(images/mail_icon.png) }*/
.fa {
    width:70px;
    height:70px;
    font-size: 40px;
    background-color:#fff;
    color:#000;
    border-radius:100%;
    line-height:70px;
    text-align:center;
    vertical-align:middle;
    display:inline-block;
}
.fb .fa:hover { background: #3a589b; color: #ffffff; border:1px solid #3a589b!important; }
.tw .fa:hover { background: #00aced; color: #ffffff; border:1px solid #00aced!important; }
.ig .fa:hover { background: #517fa4; color: #ffffff; border:1px solid #517fa4!important; }
.sc .fa:hover { background: #ff3a00; color: #ffffff; border:1px solid #ff3a00!important; }
.mail .fa:hover { background: #dd4b39; color: #ffffff; border:1px solid #dd4b39!important; }

.social i.fa:hover {
    -o-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

.social i.fa {
    -o-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    border: 1px solid #fff !important;
}
html, body{
    height: 100%;
    background-position-x:right;
}
.siteWrapper{
    height: Calc(100% - 200px)!important;
}
/* 
==========================================================================
   iPad
========================================================================== 
*/
@media all and (max-width: 768px) {

}



/* 
==========================================================================
   iPhone
========================================================================== 
*/

@media all and (max-width: 400px) {

h1 { width:98%; height:405px }
.socialsWrapper { width:100%; }
.dj-text{ width:100%;}
.social { width:43px; height:43px; margin:0 8px; }
.yt { margin-left:37px; }
}

@media all and (min-width: 320px) and (max-width: 768px){ h1{background-position-y:100%!important;} }

@media all and (max-width: 609px) {
h1 { width:98%; height:319px; }
.socialsWrapper { width:100%; }
.social { width:53px; height:53px; margin:0 10px; }
.yt { margin-left:46px; }
.fa { width:35px; height:35px; font-size: 20px; line-height:35px; }

}


@media all and (min-width: 568px) and (max-width: 736px){ h1{width:50%; height:11em;} }

@media all and (min-width: 768px) and (max-width: 1024px){ h1{width:50%; height:25em; background-position-y:100%!important; } }

@media all and (max-width: 768px) { .siteWrapper{ height: Calc(100% - 117px)!important; } }