@charset "UTF-8";
@import "reset.css";


/* CSS Document */


/*
	----------------------------
	HTML SELECTORS
	____________________________
*/
 *::selection {
background:#e11075;
color:#fff;
}
*::-moz-selection {
background:#e11075;
color:#fff;
}

body { background: #333; font:14px/21px 'AllerLightRegular', Helvetica, Arial, sans-serif; color: #333; margin: 0; padding: 0; 
	  }
	  
body.about
{
background: url(../media/about-bg.jpg) no-repeat; width:100%;
}	  
a { color: #e11075; text-decoration: underline; -moz-transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease; }
a:hover { color: #fff; text-decoration:none; }
h1, h2 { font-size: 26px; line-height: 28px; font-weight: normal; letter-spacing: -1px; color: #fff; font-family:'AllerDisplayRegular'; }
h3 { font-size: 18px; font-weight: normal; margin: 8px 0; }
h4 { font-size: 14px; font-weight: normal; margin: 0; }
h5 { font-size: 12px; font-weight: normal; margin: 0; }
ul { margin-left: 15px; }
ol { margin-left: 36px; }


@font-face {
    font-family: 'AllerDisplayRegular';
    src: url('../fonts/allerdisplay-webfont.eot');
    src: url('../fonts/allerdisplay-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/allerdisplay-webfont.woff') format('woff'),
         url('../fonts/allerdisplay-webfont.ttf') format('truetype'),
         url('../fonts/allerdisplay-webfont.svg#AllerDisplayRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AllerLightRegular';
    src: url('../fonts/aller_lt-webfont.eot');
    src: url('../fonts/aller_lt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/aller_lt-webfont.woff') format('woff'),
         url('../fonts/aller_lt-webfont.ttf') format('truetype'),
         url('../fonts/aller_lt-webfont.svg#AllerLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.logo img
{
width:100%;
}

section.about
{
color:#ccc;
width:40%;
margin-left:90px;
padding-top:20px;
float:left;
}

section.work
{
width:90%;
}


a.img 
{
transition-property: opacity, left, top, width;
        transition-duration: 2s, 1s;
		-moz-transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;

}

 a.img :hover
{
background: url(../media/body_bg.png);
z-index:2000;

}

nav ul li a#active
{
float:left;
padding-right:20px;
color:#e11075;
text-decoration:none;
font-size:12px;
}



/* media query*/

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

.logo
{
position:absolute;
left:7%;
top:30px;
width:25%;
float:left;
}



h1
{
font-family:'AllerDisplayRegular';
font-size:300%;
font-weight:normal;
color:#e11075;
padding:0px;
margin:0px;
line-height:normal;
}

h3
{
font-family:'AllerLightRegular';
font-size:2em;
font-weight:normal;
color:#fff;
padding:0px;
margin:0px;
line-height:1.4em;
}

h2
{
font-size:2em;
}

nav
{
float:left;
font-family:'AllerDisplayRegular';
margin-top:100px;
padding-left:35%;
transition-property: opacity, left, top, width;
        transition-duration: 2s, 1s;

}

nav ul
{
margin:0px;
padding:0px;
list-style:none;
}

nav ul li
{
margin:0px;
padding:0px;
float:left;
}

nav ul li a
{
float:left;
padding-right:20px;
color:#787878;
text-decoration:none;
font-size:12px;
-moz-transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;
}

nav ul li a:hover
{
float:left;
padding-right:20px;
color:#e11075;
text-decoration:none;
font-size:12px;
}


h4
{
font-size:1.5em;
font-weight:normal;
}


section
{
float:left;
width:25%;
margin-left:4%;
}

header .header-content
{
left:7%;
padding-right:7%;
padding-top:200px;
width:80%;
position:relative;
}

}

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

.logo
{
position:absolute;
left:7%;
top:30px;
width:25%;
float:left;
}



h1
{
font-family:'AllerDisplayRegular';
font-size:2em;
font-weight:normal;
color:#e11075;
padding:0px;
margin:0px;
line-height:normal;
}

h3
{
font-family:'AllerLightRegular';
font-size:1.5em;
font-weight:normal;
color:#fff;
padding:0px;
margin:0px;
line-height:1.4em;
}

h2
{
font-size:1.5em;
}

nav
{
float:left;
font-family:'AllerDisplayRegular';
margin-top:60px;
padding-left:35%;
transition-property: opacity, left, top, width;
        transition-duration: 2s, 1s;

}

nav ul
{
margin:0px;
padding:0px;
list-style:none;
}

nav ul li
{
margin:0px;
padding:0px;
float:left;
}

nav ul li a
{
float:left;
padding-right:10px;
color:#787878;
text-decoration:none;
font-size:12px;
-moz-transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;
}

nav ul li a:hover
{
float:left;
padding-right:20px;
color:#e11075;
text-decoration:none;
font-size:12px;
}


h4
{
font-size:1.2em;
font-weight:bold;
}

header .header-content
{
left:7%;
padding-right:7%;
padding-top:200px;
width:80%;
position:relative;
}

}

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

.logo
{
position:absolute;
left:7%;
top:10px;
width:70%;
float:left;
}


h1
{
font-family:'AllerDisplayRegular';
font-size:1.5em;
font-weight:normal;
color:#e11075;
padding:0px;
margin:0px;
line-height:normal;
}

h2
{
font-size:1em;
}

h3
{
font-family:'AllerLightRegular';
font-size:1em;
font-weight:normal;
color:#fff;
padding:0px;
margin:0px;
line-height:1.4em;
}


nav
{
float:left;
font-family:'AllerDisplayRegular';
margin-top:150px;
padding-left:7%;
transition-property: opacity, left, top, width;
        transition-duration: 2s, 1s;

}

nav ul
{
margin:0px;
padding:0px;
list-style:none;
}

nav ul li
{
margin:0px;
padding:0px;
float:left;
}

nav ul li a
{
float:left;
padding-right:10px;
color:#787878;
text-decoration:none;
font-size:12px;
-moz-transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;
}

nav ul li a:hover
{
float:left;
padding-right:20px;
color:#e11075;
text-decoration:none;
font-size:12px;
}

h4
{
font-size:1em;
font-weight:bold;
}

section
{
float:none;
width:80%;
margin-bottom:5%;
margin-left:7%;
}

header .header-content
{
left:7%;
padding-right:7%;
padding-top:40px;
width:80%;
position:relative;

}

section.about
{
color:#ccc;
width:90%;
margin-left:20px;
padding-top:20px;
float:left;
}

}




/*
	----------------------------
	LAYOUT
	____________________________
*/


#wrapper { width: 100%; background: url(../media/body_bg.png) repeat; margin: 0 auto; height:100%; }
#main { width: 100%; float: left; height:100%; }
#main > p, #main > div { margin-left: 7px; }
#sidebar { width: 280px; float: right; }

/************************************************************************************
CIRCLE
*************************************************************************************/
.circle .image-wrap {
	-webkit-border-radius: 50em;
	-moz-border-radius: 50em;
	border-radius: 50em;
}




/*
	----------------------------
	PAGE/SECTION SPECIFIC
	____________________________
*/


#video-controls { width: 333px; }
#video-controls a { color: #ddd; text-decoration: underline; }


/*
	----------------------------
	UTILITY CLASSES
	____________________________
*/


.black-15 { background: url(../media/black-15-trans.png); color: #fff; padding: 4px 8px; }
.black-35 { background: url(../media/black-35-trans.png); color: #fff; padding: 4px 8px; }
.black-50 { background: url(../media/black-50-trans.png); color: #fff; padding: 4px 8px; }
.black-65 { background: url(../media/black-65-trans.png); color: #fff; padding: 4px 8px; }
.black-85 { background: url(../media/black-85-trans.png); color: #fff; padding: 4px 8px; }


div.clear { overflow: hidden; height: 1px; clear: both; }
img.alignRight { float: right; margin: 0 0 15px 15px; }
img.alignLeft { float: left; margin: 0 15px 15px 0; }
.error { color: #833; }







.services
{
float:left;
margin-left:7%;
color:#ccc;
width:25%;

}

span.box1
{

float:left;
display:block;
padding-right:25px;
padding-bottom:25px;
}

.work
{

float:left;
width:55%;
color:#ccc;
}

.footer
{
position:fixed;
z-index:5000;
bottom:0px;

background:#000;
color:#999;
font-size:12px;
text-align:center;
width:100%;
padding:10px 0px;

}