html{
height:100%;
}
body{
height:100%;
font-family: 'work_sanslight', sans-serif;
margin:0;
padding:0;
}
@font-face {
font-family: 'work_sanslight';
 src: url('../font/worksans-light-webfont.eot');
 src: url('../font/worksans-light-webfont.eot?#iefix') format('embedded-opentype'),
      url('../font/worksans-light-webfont.woff2') format('woff2'),
      url('../font/worksans-light-webfont.woff') format('woff'),
      url('../font/worksans-light-webfont.ttf') format('truetype'),
      url('../font/worksans-light-webfont.svg#work_sanslight') format('svg');
font-weight:normal;
}
ul, li, p {
padding: 0;
margin: 0;
}
header{
width:100%;
height:	70%;
}
header .bannerimg {
height: 70%;
width: 100%;
position: absolute;
z-index: 0;
background-image:url(../images/neosidea-web-agency-bg.png);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:bottom center;
}
header .dcol-l {
background-image: url(../images/bg-white.png);
padding-right: 1%;
position: relative;
height:30%;
}
header .dcol-r {
background-image: url(../images/bg-black.png);
position: relative;
height:70%;
}
header h1{
padding: 8% 10%;
font-weight: bold;
font-size: 2em;
text-transform: uppercase;
line-height: 0.9em;
font-family: Arial, sans-serif;	
margin:0;
}
header .social {
position:absolute;
top:30%;
width:auto;
right:24%;
}
header .social li{
display:inline-block;
vertical-align:top;
list-style:none;
height: 20px;
width: 40px;
background-repeat: no-repeat;
background-position:center;	
cursor:pointer;
}
header .social a{
display:block;	
height:20px;
}
header .social .social1{
background-image:url(../images/facebook.png);	
}
header .social .social2{
background-image:url(../images/linkedin.png);	
}
header .social .social3{
background-image:url(../images/twitter.png);	
}
header .social .social4{
background-image:url(../images/googleplus.png);	
}
header .social .social1:hover{
background-image:url(../images/facebook-over.png);	
}
header .social .social2:hover{
background-image:url(../images/linkedin-over.png);	
}
header .social .social3:hover{
background-image:url(../images/twitter-over.png);	
}
header .social .social4:hover{
background-image:url(../images/googleplus-over.png);	
}
header .logo{
position: absolute;
top: 50%;
width: 100%;
height: auto;
}
header  .logo img{
display: block;
margin: auto;
width: 50%;	
}
article{
padding:2% 5% 10% 2%;	
}
article h1{
font-family: Arial, sans-serif;	
display:block;	
font-size:2em;
text-transform:uppercase;
font-weight:bold;
margin-top:0;
word-wrap:break-word;
}
article p{
margin-top:5%;
}
article>a{
width:35%;
margin-top:5%;
}
article img{
border:1px solid #ccc;	
padding:10%;
display:block;
margin:auto;
}
.more{
margin-top:5%;
}
.more a {
background-image: url(../images/tel.png);
background-repeat: no-repeat;
background-size: contain;
height: 50px;
padding-left: 55px;
color: #000;
text-decoration: none;
font-size: 1em;
font-weight:bold;
width:80%;
margin-top:0;
display:inline-block;
}
.more a:hover {
background-image: url(../images/tel-over.png);
color: #3f81e4;
text-decoration: none;
}
@media only screen and (min-width: 980px){
	header h1{
	padding: 8% 10%;
	font-weight: bold;
	font-size: 3em;
	text-transform: uppercase;
	line-height: 0.9em;
	font-family: Arial, sans-serif;	
	}
	header .dcol-l {
	width: 35%;
	height: 100%;
	background-image: url(../images/bg-white.png);
	padding-right: 1%;
	position: relative;
	display: inline-block;
	vertical-align: top;
	}
	header .dcol-r {
	background-image: url(../images/bg-black.png);
	position: relative;
	float: right;
	height: 100%;
	width: 64%;
	position: relative;
	display: inline-block;
	vertical-align: top;
	}
	header .social {
	position:absolute;
	top:20%;
	width:auto;
	right:24%;
	}
	header .logo{
	position: absolute;
	top: 40%;
	width: 100%;
	height: auto;
	}
	article a{
	display:inline-block;
	vertical-align:top;	
	width:35%;
	margin-top:5%;
	}
	article p{
	display:inline-block;
	vertical-align:top;
	width:60%;
	float:right;
	margin-top:5%;
	}
	.more{
	padding-left:40%;
	display:inline-block;
	margin-top:5%;
	}
	article h1{
	font-family: Arial, sans-serif;	
	width:30%;
	display:block;	
	font-size:2.5em;
	text-transform:uppercase;
	font-weight:bold;
	margin-top:0;
	}
	.more a {
	background-image: url(../images/tel.png);
	background-repeat: no-repeat;
	background-size: contain;
	height: 50px;
	padding-left: 55px;
	color: #000;
	text-decoration: none;
	font-size: 1em;
	font-weight:bold;
	width:100%;
	margin-top:0;
	display:inline-block;
	}
}
@media only screen and (min-width: 1366px){
	header h1{
	font-size:4em;	
	}
	.more{
	margin-top:0;
	}
}
@media only screen and (min-width: 1700px){
	header h1{
	font-size:6em;
	}
}