@charset "UTF-8";
/* CSS Document */

* { margin: 0; padding: 0px; }



@-webkit-keyframes pulse {
      0% {background-color: #0a0024;}
     /*50% {background-color: #303539;}*/
     50% {background-color: #1b4562;}
     70% {background-color: #25494e;}
     100% {background-color: #0a0024;}
}
@-moz-keyframes pulse {
      0% {background-color: #0a0024;}
     /*50% {background-color: #303539;}*/
     50% {background-color: #1b4562;}
     70% {background-color: #25494e;}
     100% {background-color: #0a0024;}
}
@media (min-width: 1187px) {
    body {
        overflow-x: hidden;
    }
}
body {
	
	max-width: 1187px;
	min-width: 1187px;
	color:#ededed;
	animation: pulse 80s infinite normal;
    -webkit-animation: pulse 80s infinite normal;
    -moz-animation: pulse 80s infinite normal;
    background-color: #111;
	-webkit-text-size-adjust:none;
}
#top {
	position:absolute;
	width:100%;
	top:0px;
	}
#header {
	font-family:'Anton', Impact, sans-serif;
	position:fixed;
	display:block;
	width:500px;
	left:10px;
	top:-7px;
	font-size:54px;
	z-index:1100;
	letter-spacing: 0.012em;
	-webkit-transform: translate3d(0,0,0px);
	filter: alpha(opacity=88);
	opacity: 0.88;
}
#whiteline {
	position:relative;
	height:0px;
	width:124px;
	top:-12px;
	background-color:#ededed;
	-webkit-transform: translate3d(0,0,0px);
}
#nav {
	font-family:'Muli', Impact, sans-serif;
	position:fixed;
	display:block;
	width:500px;
	left:132px;
	top:10px;
	font-size:13px;
	font-weight:bold;
	z-index:1100;
	filter: alpha(opacity=88);
	opacity: 0.88;
	-webkit-transform: translate3d(0,0,0px);
}
@-webkit-keyframes getaquotepulse {
      0% {background-color: #0a0024;}
     45% {background-color: #1b4562;}
     65% {background-color: #25494e;}
     95% {background-color: #0a0024;}
     100% {background-color: #0a0024;}
}
@-moz-keyframes getaquotepulse {
      0% {background-color: #0a0024;}
     45% {background-color: #1b4562;}
     65% {background-color: #25494e;}
     95% {background-color: #0a0024;}
     100% {background-color: #0a0024;}
}
#getaquote:hover {
	animation: getaquotehover 80s infinite normal;
    -webkit-animation: getaquotehover 80s infinite normal;
    -moz-animation: getaquotehover 80s infinite normal;
}
@-webkit-keyframes getaquotehover {
      0% {background-color: #ededed;}
     1% {background-color: #303539;}
     99% {background-color: #303539;}
     100% {background-color: #ededed;}
}
@-moz-keyframes getaquotehover {
      0% {background-color: #333;}
     1% {background-color: #303539;}
     99% {background-color: #303539;}
     100% {background-color: #333;}

}

a:link {
	color: #ededed;
}
a:visited {
	color: #ededed;
}
a:hover {
	color: #fff;
}
a:active {
	color: #fff;
}

a.navlink:link {
	color: #ededed;
	text-decoration:none;
}
a.navlink:visited {
	color: #ededed;
	text-decoration:none;
}
a.navlink:hover {
	color: #fff;
}
a.navlink:active {
	color: #fff;
}


p{
	margin: 0 0 20px 0;
}

p, ul{
	font-family:'Muli', sans-serif;
	font-style:normal;
	font-size: 12px;
	font-weight:normal;
	color: #efefef;
	letter-spacing: 0.03em;
	text-align:left;
	filter: alpha(opacity=88);
	opacity: 0.88;
}


h1{
	font-family:'Anton', Impact, sans-serif;
	font-size:54px;
	font-weight:500;
	font-style:normal;
	color: #ededed;
	width:100%;
	text-align:center;
	top:200px;
	position:relative;
	filter: alpha(opacity=88);
	opacity: 0.88;
}

h2{
	font-family:'Anton', Impact, sans-serif;
	font-weight:500;
	font-style:normal;
	color: #ededed;
	font-size:28px;
	letter-spacing: 0.012em;
	filter: alpha(opacity=88);
	opacity: 0.88;
}
h3{
	font-family:'Muli', sans-serif;
	font-size-adjust:0.488;
	font-style:normal;
	font-size: 13px;
	font-weight:normal;
	letter-spacing:0.03em;
	color: #ededed;
	width:100%;
	text-align:center;
	top:174px;
	position:relative;
	filter: alpha(opacity=88);
	opacity: 0.88;

}


.float-leftWHO{
	float: left;	
	margin: 0 0 0 117px;
	display:block;
	width:500px;
}
.float-left{
	float: left;	
	margin: 0 0 0 117px;
	display:block;
	width:350px;
}

.float-right{
	float: right;
	margin: 0 117px 0 0;
	display:block;
	width:350px;
}

#float-right-webthumbs1{
	position:absolute;
	top:25px;
	right:497px;
	width:222px;
	height:230px;
	display:block;
}
#float-right-webthumbs2{
	position:absolute;
	top:25px;
	right:614px;
	margin: 0 117px 0 0;
	width:222px;
	height:230px;
	display:block;
}
#float-left-webthumbs1{
	position:absolute;
	top:25px;
	left:675px;
	margin: 0 117px 0 0;
	display:block;
	width:222px;
	height:230px;
	cursor:pointer;
}
#float-left-webthumbs2{
	position:absolute;
	top:25px;
	left:908px;
	margin: 0 117px 0 0;
	display:block;
	width:222px;
	height:230px;
	cursor:pointer;
}
.float-left-footer{
	float: left;	
	margin: 0 0 0 117px;
}

.float-right-footer{
	float: right;
	margin: 0 117px 0 0;
}
.center{
	font-size: 2.5em;
	padding: 80px 0 0 0;
	text-align: center;
}

#content {   visibility: hidden;
}
#pageintrofade {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:#121212;
	display:block;
	z-index:10000;
	}
#loading {
	position:fixed;
	width:32px;
	height:32px;
	top:470px;
	left:50%;
	margin-left:-17px;
	}
#pagereveal {
	position:absolute;
	z-index:1000;
	width:1187px;
	height:996px;
	display:block;
	background-color:#121212;
	top:0px;
	left:0px;
/*	box-shadow: 10px 50px 5px #111;*/
    -webkit-animation: getaquotepulse 80s infinite normal;
    -moz-animation: getaquotepulse 80s infinite normal;
	}
#pagescrollerSERVICES {
	position:absolute;
	z-index:300;
	width:100%;
	height:0px;
	display:block;
	background:transparent;
	top:1214px;
	left:0px;
	filter: alpha(opacity=28);
	opacity: 0.28;
	box-shadow: 10px 50px 5px #111;
		}
#pagescrollerCLIENTS {
	position:absolute;
	z-index:300;
	width:100%;
	height:0px;
	display:block;
	background:transparent;
	top:2341px;
	left:0px;
	filter: alpha(opacity=28);
	opacity: 0.28;
	box-shadow: 10px 50px 5px #111;
		}
#pagescrollerCONTACT {
	position:absolute;
	z-index:300;
	width:100%;
	height:0px;
	display:block;
	background:transparent;
	top:3566px;
	left:0px;
	filter: alpha(opacity=28);
	opacity: 0.28;
	box-shadow: 10px 50px 5px #111;
		}
#intro{
	background:url(images/backgrounds/PJN_D600-6705.jpg) no-repeat;
	
        -webkit-background-size: cover;
        -moz-background-size: cover; 
        -o-background-size: cover;
        background-size: cover;
    background-position:50%;
	height: 1000px;
	width:100%;
	position:relative;
	margin-top: 296px;
	z-index:100;
	filter: alpha(opacity=52);
	opacity: 0.52;
}
#SCROLLDOWN {
	position:relative;
}

#pressshot {
	position:absolute;
	height:250px;
	width:377px;
	top:30px;
	left:640px;
	border:#111 1px solid;
	z-index:1000;
	}
#photocredit {
	display:block;
	position:absolute;
	top:1220px;
	left:629px;
	width:252px;
	height:252px;
	filter: alpha(opacity=0);
	opacity: 0.0;
	z-index:900;
	}
#photocredittext {
	margin-top:206px;
	position:relative;
	bottom:-34px;
	right:2px;
	float:right;
	font-family:'Muli', sans-serif;
	font-size-adjust:0.488;
	font-style:normal;
	font-size: 9px;
	color: #ededed;
	text-shadow: 0px 0px 1px #000 ;
	}
	
#photocredit:hover {
	filter: alpha(opacity=60);
	opacity: 0.6;
	}
	
	
 /*.websitethumb {

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}*/
 
/*.websitethumb:hover {  
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    -o-transform:scale(1.25);
     transform:scale(1.25);
}*/
.fader {
        /* Giving equal sizes to each element */
        width:    220px;
        height:   110px;
        margin:5px;
	border:#111 1px solid;
        /* Positioning elements in lines */
        display:  inline-block;
        
        /* This is necessary for position:absolute to work as desired */
        position: relative;
        
        /* Preventing zoomed images to grow outside their elements */
        overflow: hidden; }
    
    
        .fader img {
            /* Stretching the images to fill whole elements */
            width:       100%;
            height:      100%;
        
            /* Preventing blank space below the image */
            line-height: 0;
    
            /* A one-second transition was to disturbing for me */
            -webkit-transition: all 0.3s ease;
            -moz-transition:    all 0.3s ease;
            -o-transition:      all 0.3s ease;
            -ms-transition:     all 0.3s ease;
            transition:         all 0.3s ease; 
			}
    
            .fader img:hover {
                /* Making images appear bigger and transparent on mouseover */
                opacity: 0.2;
                width:   106%;
                height:  106%; 
				}
    
        .fader .text {
            /* Placing text behind images */
            z-index: -20;  
            /* Positioning text top-left conrner in the middle of elements */
            position: absolute;
            top:      50%;
            left:     50%; }
        
            .fader .text p {
                /* Positioning text contents 50% left and top relative
                   to text container's top left corner */
                margin-top:  -6%; 
                margin-left: -95%;    
           text-align:center;
}
#second{
	background: url(images/backgrounds/PJN_D600-6703.jpg) no-repeat;
	
        -webkit-background-size: cover;
        -moz-background-size: cover; 
        -o-background-size: cover;
        background-size: cover;
    background-position:50%;
	height: 1000px;
	width:100%;
	margin: 0 auto;
	filter: alpha(opacity=52);
	opacity: 0.52;
	z-index:-100;
}
#third{
	background: url(images/backgrounds/PJN_D600-6713.jpg) no-repeat;
	
        -webkit-background-size: cover;
        -moz-background-size: cover; 
        -o-background-size: cover;
        background-size: cover;
    background-position:50%;
	height: 1000px;
	width:100%;
	margin: 0 auto;
	filter: alpha(opacity=52);
	opacity: 0.52;
	z-index:-100;
}

#fourth{
	background: url(images/backgrounds/PJN_D600-6706.jpg) no-repeat;
	
        -webkit-background-size: cover;
        -moz-background-size: cover; 
        -o-background-size: cover;
        background-size: cover;
    background-position:50%;
	height: 1000px;
	width:100%;
	margin: 0 auto;
	filter: alpha(opacity=52);
	opacity: 0.52;
	z-index:-100;
}
#fifth{
	background: #111;
	display:block;
	height: 100px;
	margin: 0 auto;
	padding: 40px 0 0 0;
	z-index:500;
	filter: alpha(opacity=100);
	opacity: 1;
	position:absolute;
	left:0px;
	top:4650px;
	width:1187px;
}

.textbackground {
	display:block;
	position:absolute;
	height:300px;
	width:600px;
	left:-117px;
	background:#111;
	z-index:10;
	}
.story{
	z-index:300;
	min-width: 980px;
	overflow: auto;
	width: 100%;
	min-height:350px;
	display:block;
	overflow:hidden;
	background-color: #303539;
	box-shadow: 0px 6px 15px #121212;
	border-top: 92px rgba(250, 250, 250, 0.1) solid;
	animation: pulse 80s infinite normal;
    -webkit-animation: pulse 80s infinite normal;
    -moz-animation: pulse 80s infinite normal;
}
#storyblocker {
	position:relative;
	width:1187px;
	height:60px;
	display:block;
	}
#WHO{
	position:absolute;
	left:0px;
	top:936px;
	width:1187px;
	z-index:1000;
	}
#SERVICES{
	position:absolute;
	left:0px;
	top:2066px;
	width:1187px;
	z-index:1000;
	}
#CLIENTS{
	position:absolute;
	left:0px;
	top:3196px;
	width:1187px;
	z-index:1000;
	}
#CONTACT{
	position:absolute;
	left:0px;
	top:4406px;
	width:1187px;
	z-index:700;
	}
.contactstory{
	min-width: 980px;
	overflow: auto;
	width: 100%;
	z-index:300;
	display:block;
	overflow:hidden;
	box-shadow: 0px 6px 6px #111;
	border-top: 92px rgba(250, 250, 250, 0.1) solid;
	animation: pulse 80s infinite normal;
    -webkit-animation: pulse 80s infinite normal;
    -moz-animation: pulse 80s infinite normal;
}
.footerstory{;
	height:100px;
	min-width: 980px;
	width: 100%;
	z-index:300;
	display:block;
	overflow:hidden;
}
.fade {
    opacity: 0;
}

.story .float-left, .story .float-right, .contactstory .float-right{
	padding: 20px 0 30px 0;
	position: relative;
	max-width: 500px;	
}

iframe {
    border: none;
}
#video1, video2, video3, video4 {
	position:relative;
	}
#videoclose {
	font-family:'Anton', Impact, sans-serif;
	position:relative;
	display:block;
	width:17px;
	height:25px;
	left:-26px;
	top:-0px;
	font-size:13px;
	letter-spacing: 0.012em;
	text-shadow: 1px 1px 1px #111 ;
	font-weight:bold;
	z-index:300;/*
	border: solid #ededed 1px;
	-webkit-border-radius: 15px;
	-khtml-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;*/
	cursor:pointer;
	color:#ededed;

}
.videobox {
	-webkit
	cursor:pointer;
	z-index:800;
	background-color:rgba(17, 17, 17, 1);
	margin-bottom:-5px;
	margin-right:-5px;
	padding:30px;
	padding-top:5px;
	box-shadow: 0px 6px 6px #111;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;">

	}
	
#mediaexamplesheader {
	text-align:right;
	position:absolute;
	font-family:'Anton', Impact, sans-serif;
	display:block;
	width:500px;
	height:50px;
	left:635px;
	top:265px;
	font-size:28px;
	z-index:300;
	letter-spacing: 0.012em;
	filter: alpha(opacity=88);
	opacity: 0.88;
	}