HTML,BODY
{
background-color:#1f1315;
}

BODY.index
{
opacity:0;
transition: opacity 0.4s linear 0.5s;
}

MARQUEE
{
height:1px;
color:#000;
background:#000;
font-size:1px;
font-family:sans-serif;
position:absolute;
top:0;
left:-5000px;
}

@keyframes throbber
{
	0% {
		opacity:0.5;
	}
	100% {
		opacity:1;
	}
}

.throb
{
animation:throbber 0.5s infinite alternate;
}

#footer
{
clear:both;
padding-left:2%;
padding-right:2%;
color:#EEE;
font-size:0.7em;
}

#footer A
{
color:#FFF !important;
}

#logo1
{
height:2.1em;
margin-top:14px;
margin-left:15px;
}

#logo2
{
height:1.8em;
margin-top:5px;
margin-left:15px;
display:none;
}

#hero
{
background-color:#3ea0bb;
position:relative;
width:100%;
overflow:hidden;
color:#FFF;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight:normal;
text-align:center;
}

#hero IMG
{
width:100%;
height:100%;
}

#hero H1
{
position:absolute;
font-size:3.84em;
font-size:5.9vw;
padding:0;
width:90%;
bottom:65%;
left:0;
margin:0;
margin-left:5%;
margin-right:5%;
text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}

#hero H2
{
position:absolute;
font-weight:normal;
font-family:'Slabo 27px',serif;
font-size:2.5em;
font-size:3.5vw;
padding:0;
width:80%;
bottom:25%;
left:0;
margin:0;
margin-left:10%;
margin-right:10%;
}

#hero H3
{
position:absolute;
padding:0;
width:80%;
bottom:50%;
left:0;
margin:0;
margin-left:10%;
margin-right:10%;
}

#hero H3 A.pure-button
{
font-size:1.0890625em;
font-size:2.9vw;
font-weight:bold !important;
font-family: sans-serif;
text-transform:uppercase;
font-weight:normal;
background:transparent;
border:0.3234375em solid #FFF;
border:0.3vw solid #FFF;
color:#FFF;
}

#hero H3 A.pure-button:hover
{
background:rgba(255,255,255,0.2);
}

#content2
{
position:relative;
min-height:500px;
background-color:#FFF;
color:#111;
}

#content2 H2
{
text-align:center;
font-family: 'Yanone Kaffeesatz', sans-serif;
color:#777;
font-size:2.1140625em;
font-size:calc(0.8vw + 2.5vw);
}

#services I
{
display:block;
text-align:center;
font-size: 4vw;
}

#services
{
color:#e9322d;
margin:0 auto;
text-align:center;
width:98%;
overflow:hidden;
margin-bottom:20px;
}

#services DIV
{
position:relative;
margin-top:30px;
width:17%;
float:left;
clear:right;
border-right:1px solid #DDD;
padding-left:10px;
padding-right:10px;
text-align:center;
font-family:"Roboto Condensed",sans-serif;
height:210px;
height:21vw;
}

#services DIV:first-child
{
margin-left:2.5%;
}

#services DIV:nth-child(5)
{
border:0;
padding-right:0;
}


#services DT,
#services DD
{
display:block;
padding:0;
margin:0;
text-align:center;
width:100%;
}

#services DT
{
font-weight:bold;
font-size:1.2em;
font-size:2vw;
margin-top:10px;
min-height:6vw;
}

#services DD
{
color:#707070;
font-size:1.5vw;
}


#clients
{
padding-left:10%;
padding-right:10%;
padding-bottom:2.5625em;
padding-bottom:4vw;
width:80%;
text-align:center;
margin:20px auto;
}

HR.special
{
border: 0;
height: 1px;
background:none;
border-bottom:1px solid #CCC;
padding-bottom:3px;
width:80%;
margin-top:20px;
margin-bottom:20px;
}

HR.special:before
{
content:" ";
border: 0;
height: 1px;
display:block;
padding-bottom:3px;
border-top:1px solid #CCC;
width:93%;
margin:0 auto;
text-align:center;
}

HR.special:after
{
content:" ";
border: 0;
height: 1px;
display:block;
padding-top:2px;
border-bottom:1px solid #CCC;
width:93%;
margin:0 auto;
text-align:center;
}

#screens,
#dmarket
{
width:96%;
background-color:#EEE;
padding:2%;
overflow:hidden;
}

#ecommerce,
#coding
{
width:96%;
background-color:#FCFDFD;
padding:2%;
overflow:hidden;
}

#screens P,
#dmarket P
{
font-family:"Roboto Condensed",sans-serif;
margin-left:5%;
font-size:120%;
font-size:2vw;
}

#ecommerce P,
#coding P
{
font-family:"Roboto Condensed",sans-serif;
margin-right:5%;
margin-left:5%;
font-size:120%;
font-size:2vw;
}

#screens-left,
#dmarket-left
{
margin-top:0.1em;
width:45%;
float:left;
clear:right;
}

#ecommerce-right,
#coding-right
{
margin-top:0.1em;
width:45%;
float:right;
}

.photo
{
border:1em solid #FFF;
border:1.5vw solid #FFF;
-webkit-box-shadow: 3px 3px 4px 1px rgba(0,0,0,0.26);
-moz-box-shadow: 3px 3px 4px 1px rgba(0,0,0,0.26);
box-shadow: 3px 3px 4px 1px rgba(0,0,0,0.26);
}

#screens IMG,
#dmarket IMG
{
width:50%;
float:right;
border:1em solid #FFF;
border:1.5vw solid #FFF;
-webkit-box-shadow: 3px 3px 4px 1px rgba(0,0,0,0.26);
-moz-box-shadow: 3px 3px 4px 1px rgba(0,0,0,0.26);
box-shadow: 3px 3px 4px 1px rgba(0,0,0,0.26);
}

#ecommerce IMG,
#coding IMG
{
width:50%;
float:left;
clear:right;
border:1em solid #FFF;
border:1.5vw solid #FFF;
-webkit-box-shadow: 3px 3px 4px 1px rgba(0,0,0,0.26);
-moz-box-shadow: 3px 3px 4px 1px rgba(0,0,0,0.26);
box-shadow: 3px 3px 4px 1px rgba(0,0,0,0.26);
}

#btnquote,
#btncontact
{
color: #000;
border-bottom: 5px solid rgba(0,0,0,0.2);
font-size:32px;
min-width:306px;
text-align:center;
}

#btnquote
{
background-color: #6f444b;
color:#FFF;
border-bottom: 5px solid rgba(0,0,0,0.5);
}

.pure-button
{
border-bottom: 5px solid rgba(0,0,0,0.2);
}

.pure-button-primary
{
background-color: #6f444b;
border-bottom: 5px solid rgba(0,0,0,0.5);
}

.pure-button-secondary
{
background-color: #dec8ac;
}

#btncontact
{
background-color: #dec8ac;
}

#sub #header
{
width:100%;
background:#281819 url(../img/header2.jpg) 0 center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-top: -55px;
height:204px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
border-bottom:20px solid #1f1315;
}

#sub #header H1
{
position: relative;
top: 60%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'Yanone Kaffeesatz', sans-serif;
color: #FFF;
font-size: 5em;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
margin-left:130px;
}

#sub #content2
{
padding:20px;
}

#pricing *,
#about *
{
font-family:"Roboto Condensed",sans-serif;
}

#about
{
background:#EEE;
}

#about #team
{
width:90%;
overflow:hidden;
padding:20px;
}

#about #team IMG
{
width:20%;
float:left;
clear:right;
margin:0 auto;
}

#about #team #team-right
{
width:60%;
float:left;
margin-left:2%;
}

#about #team #team-right *
{
text-align:left;
}
		
#pf .pfsection
{
overflow:hidden;
font-family:"Roboto Condensed",sans-serif;
font-size:16px;
margin-bottom:20px;
border: 1px solid #AAA;
padding: 20px;
}

#pf .pfsection H4
{
font-size:13px;
font-weight:normal;
}

#pf .pfsection .pfleft
{
width:50%;
float:left;
clear:right;
}

#pf .pfsection .pfleft IMG
{
border:4px ridge #EEE;
cursor:pointer;
width:90%;
}

#pf .pfsection .pfright
{
float:left;
width:50%;
}


@media all and (min-width:767px) and (max-width:800px) {
	#services
	{
	padding-left:30px;
	}
	
	#hero H2
	{
    width: 58%;
    margin-left: 22%;
	}
}

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

	#services DIV
	{
	width:15%;
	}
	
	#btnquote,
	#btncontact
	{
	font-size:110%;
	min-width:160px;
	}

}

@media all and (max-width:767px) {
	
	#about #team IMG
	{
	margin:0 auto;
	text-align:center;
	}

	#about #team IMG,
	#about #team #team-right
	{
	width:90%;
	}
	
	#pf .pfsection .pfleft
	{
    width: 100%;
    float:none;
    clear:both;
    text-align:center;
    }
    
    #pf .pfsection .pfleft IMG
    {
    width:95%;
    }
    
    #pf .pfsection .pfright
    {
    text-align:left;
    width:100%;
    }

}

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

	#btnquote,
	#btncontact
	{
	font-size: 95%;
    min-width: 130px;
	}

	#hero H1
	{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    font-size: 180%;
    font-size:7vw;
    bottom:55%;
	}
	
	#hero H2
	{
	margin-left: 40px;
    margin-right: 0;
    width: 79%;
    font-size: 85%;
    font-size:4.2vw;
    font-weight:bold;
    }
	
	#hero H3
	{
	display:none;
	}
	
	#services DIV
	{
	width:90%;
	padding:0 !important;
	margin:0 !important;
	border:0;
	display:block;
	overflow:hidden;
	height:inherit;
	padding-left:5% !important;
	padding-right:5% !important;
	padding-bottom:4% !important;
	}
	
	#services DIV:first-child
	{
	margin-top:2vw !important;
	}
	
	#services I
	{
	font-size:300%;
	}
	
	#services DT
	{
	font-size:130%;
	margin-bottom:1%;
	}
	
	#services DD
	{
	font-size:100%;
	}
	
	.nomobile
	{
	display:none;
	}
	
	#sub #header
	{
	background:#281819 url(../img/header2-mobile.jpg) center center no-repeat;
	}
	
	#sub #header H1
	{
	margin-left:0;
	text-align:center;
	}
	
	
	
}

@media all and (min-width:1390px) {

	#sub #header H1
	{
	margin-left:11%;
	}

	#hero H1
	{
	font-size:5em;
	bottom:80%;
	}
	
	#hero H3
	{
	bottom:65%;
	}
	
	#hero H3 A.pure-button
	{
	font-size:1.8em;
	}
	
	#hero H2 
	{
	font-size:2.5em;
	bottom:40%;
	}
	
	

}