/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2){

}

/* ============================= */
/* ! Layout for laptop version   */
/* ============================= */
@media all and (max-width: 1382px) {
  header{margin: 30px auto;}
  #home #bar-info, #contacts #bar-info, #portfolio #bar-info.project{max-height: 420px; height: 420px;}
  #bar-info.project li .image img{max-height: 90%;}
  #home #bar-info.project li .image img{max-height: 80%;}
  /**body#portfolio #projects-list .wrapper, body#portfolio .container .row .threecol{position: relative;}
  body#portfolio #projects-list .wrapper{display: inline-block; left: 50%;}
  body#portfolio .container .row .threecol{width: 30.75%; left: -50%;}
  body#portfolio .container .row .threecol.three-last{ margin-right: 0; clear: right;}
  body#portfolio .container .row .threecol.last, body#portfolio .container .row .threecol.three-last-break{margin-right: 3.8%; clear: left;}*/
  
  #home #bar-projects li a span{padding: 10% 5% 5%;}
}

@media only screen and (min-width : 768px) and (max-width : 1024px) {
.container {
    padding-left: 0px;
    padding-right: 0px;
}	
header nav li a {
    font-size: 1.1em;
	display:inline-block;
	margin: 0px 2px 0px 2px;
}
header nav li.logo a {
	width: 80px;
	height: auto;
	margin: 0px;
	display: block;
}
#home #bar-info.project, #portfolio #bar-info.project, #contacts #bar-info, #portfolio #bar-info {
    height: 280px;
	max-height: 280px;
	
}
#bar-info.project li h1, body #bar-info h1, #portfolio #bar-info h1 {
    font-size: 3.2em;
	padding-top: 120px;
	text-align: center;
}
section#services {
    margin:0px 0px 40px 0px;
    overflow: hidden;
    padding:0px 5px 5px 10px;
}

section#services a {
    display: block;
    padding: 10px 10px;
	margin-bottom: 20px;
}
section#services a h3 {
    font-size: 20px;
    line-height: 25px;
    margin-bottom: 14px;
    text-transform: uppercase;
}
section#services a p {
    line-height: 20px;
    padding: 15px 2px 0;
}
section#video-playlist {
    margin:0px 0px 40px 0px;
    overflow: hidden;
    padding:0px 5px 5px 10px;
}

#bar-info.project li .wrapper .description {
    float: left;
	width: 48%;
    margin-right: 2%;
    text-align: right;	
}

#home #bar-info li .description h2, #bar-info.project ul li .description h2, #portfolio #bar-info.project ul li .description h2 {
    margin-top: 40px;
	margin-bottom: 20px;
	font-size: 2.9em;
	text-align: right;
}
#bar-info.project ul li .description h4, #portfolio #bar-info.project ul li .description h4 {
    display: none;
}
#bar-info.project ul li .description a, #portfolio #talk-to-us aside a {
    font-size: 13px;
    padding-right: 35px;
}
#bar-info.project ul li .description h2, #bar-info.project ul li .description h4, #bar-info.project ul li .description a.button {
	clear:left;
}
#bar-info.project li .wrapper .image {
	float: left;
	width: 48%;
	padding-left: 2%;
}
#home section.news-blog {
    margin-bottom: 90px;
    padding-left: 20px;
    padding-right: 20px;
}
#home section.news-blog article div.image {
    float: left;
    width: 27%;
	margin-right: 3%;
}
#home section.news-blog article div.description {
    float: right;
    width: 70%;
}
section.proudly-working-with ul {
    border: none;        
	 width: 90%;
	margin: 0px auto;
}
section.proudly-working-with li {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;    
	box-sizing: border-box; 
    width: 16.666666%;
	border: solid 1px #eee;
}
footer .row {
    padding:20px 10px;
}
footer aside.last {
    margin-right: 20px;
}
.bottom-90 {
    margin-bottom: 60px;
}
.bottom-150 {
    margin-bottom: 60px;
}

}


@media only screen and (min-width: 320px) and (max-width : 620px){
header {
	margin: 0px auto 25px;
}

header nav ul {
	height: auto;
	padding-top: 100px;
	
}	
header nav li {
    float: none;
    margin: 0px;
	display:inline;
	position: relative;
}
header nav li a {
    font-size: 1.1em;
	display:inline-block;
	margin: 0px 4px 0px 4px;
}
header nav li.logo  {
	position:absolute;
	top: 20px;
	left: 50%;
    margin: 0px 0px 0px -35px;
}
header nav li.logo a {
	width: 70px;
	height: auto;
	margin: 0px;
	display: block;
}
header nav a.blog {
	display: none;
}
#home #bar-info.project, #portfolio #bar-info.project, #contacts #bar-info {
    height: 200px;
	max-height: 200px;
	
}
#bar-info.project li h1, body #bar-info h1 {
    font-size: 2.2em;
	padding-top: 80px;
	text-align: center;
}
#home #bar-projects {
    display: none;
}
.bottom-90 {
    margin-bottom: 40px;
}
.container section.intro h2, #portfolio .project p.description {
    font-size: 1.3em;
    padding: 0 30px;
	display:block;
	text-align:center;
	line-height:22px;
}
section#services {
    margin:0px 0px 40px 0px;
    overflow: hidden;
    padding:0px;
}
section#services .twocol-fix {
    width: 100%;
	display: inline-block;
	clear:left;
	margin:0px;
	padding:0px;
}
section#services a {
    display: block;
    padding: 10px 20px;
	margin-bottom: 20px;
}
h1.intro-section {
    font-size: 3.6em;
}
#home section.news-blog, footer.container aside.recruitment, footer.container aside.newsletter {
    display: none;
}
#video-playlist div.fourcol {
    width: 90%;
	margin: 0px auto;
	padding:0px;
	clear: left;
}
#video-playlist p {
    margin-top: 10px;
	margin-bottom: 20px;
}
.bottom-150 {
    margin-bottom: 40px;
}

section.proudly-working-with ul {
    border: none;        
	 width: 90%;
	margin: 0px auto;
}
section.proudly-working-with li {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;    
	box-sizing: border-box; 
    width: 33.333333%;
	border: solid 1px #eee;
}
.row address.twocol-fix {
    width: 50%;
    float: left;
}
footer aside.last {
    margin-right: 20px;
}

#portfolio #bar-services li a:hover span, #portfolio #bar-services li a.selected span, #portfolio nav.secondary li a:hover span, #portfolio nav.secondary li a.selected span {
    display: none;
}
#portfolio #bar-services, #portfolio nav.secondary {
	height: auto;
	min-height: 40px;
	padding: 0px;
	margin: 30px 0px 0px 0px;
}
#portfolio #bar-services li a, #portfolio nav.secondary li a {
    font-size: 12px;
    overflow: visible;
    padding: 5px 10px 5px 10px;
}
#portfolio #talk-to-us {
    float: left;
	clear:left;
	margin: 0;
	padding: 20px;
}
#portfolio #talk-to-us h1 {
    display: none;
}
#portfolio #talk-to-us aside {
    float: left;
    padding-bottom: 0px;
    width: 100%;
}
#portfolio #bar-holder.bottom{margin-bottom: 40px;}
#portfolio #bar-info.project li a.list{display: none;}
#portfolio .project section.gallery article, #portfolio .project section.videos article {
	width: 90%;
	clear:left;
	margin: auto;
    text-align: center;
	margin-bottom: 20px;
}
#bar-info.project li .wrapper {
	width: 90%;
}
#bar-info.project li .wrapper .description {
    margin: 0px;
	width: 42%;
	display: table;
	text-align: center;
	padding-right: 4%;
	padding-left: 4%;
	float: left;
    text-align: left;
}
#bar-info.project ul li .description h2, #portfolio #bar-info.project ul li .description h2 {
    margin: 0px;
	font-size: 2.2em;
	vertical-align: middle;
	display: table-cell;
	text-align: left;
}
#bar-info.project ul li .description h4, #portfolio #bar-info.project ul li .description h4 {
	display: none;
	
}
#bar-info.project li .wrapper .image {
	float: left;
	width: 46%;
	padding-right: 2%;
	padding-left: 2%;
	vertical-align: middle;
	display: table-cell;
	
}

#bar-info.project li .image img.photo.bottom, #bar-info.project li .image.bottom {
    bottom: -25px;
}
#bar-info.project li .wrapper .image img {
	max-width: 100%;
	
}
#services section#services {
    display: none;
}
#services .timeline article.left {
    display: none;
}
#services .timeline article.last p {
    display: none;
}
#portfolio .project section.videos article span iframe {
	max-width: 480px;
}
#clients div.video-list ul {
	padding-top: 30px;
}
#contacts #bar-info .address {
    float: left;
    margin: 0 auto;
    overflow: visible;
    width: 100%;
	display: block;
}
#contacts #bar-info .address h1 {
    font-size: 2.3em;
	padding-top: 40px;
	text-align: center;
}
#contacts #bar-info ul {
	clear: left;
    margin: 1.3em auto 0 auto;
	text-align: center;
}
#contacts #bar-info .photo {
    display: none;
}
#contacts #google-maps {
    height: 20em;
}
form.form p .left, form.form p .right, form.form p .dd-container {
    float: left;
	clear: left;
	width: 100% !important;
	margin-bottom: 10px;
}
#aboutus #instagram-list .row .threecol {
   width: 39%;
	float: left;
	padding-left: 30px;
	padding-right: 30px;
}

}

/* ============================= */
/* ! Layout for 480   */
/* ============================= */
@media screen and (max-width: 480px) {
#aboutus #instagram-list .row .threecol {
	width: 30.75%;
	padding-left: 60px;
	padding-right: 0px;
}

}
@media screen and (max-width: 320px) {
header nav li a {
	margin: 0px 2px 6px 2px;
}
#bar-info.project li h1 {
	padding-top: 70px;
}
header nav a.aboutus {
	display: none;
}
.container section.intro h2, #portfolio .project p.description {
	padding: 0 20px;
	text-align:left;
}

/*portfolio*/
#portfolio #bar-services, #portfolio nav.secondary {
padding: 20px 0px 0px 0px;
position: relative;
height: auto;
min-height: 40px; 
width: 150px; 
text-align: center;
margin-left: 20px;
}

#portfolio #bar-services ul, #portfolio nav.secondary ul {
width: 150px;
padding: 5px 0;
border: solid 1px #eee;
height: auto;
position:absolute;
top: 0;
left:0;
/*border-radius: 5px;*/
background: #fff url(../images/common/list-view.png) no-repeat 10px 11px;
z-index: 100;
}

#portfolio #bar-services li:first-child, #portfolio nav.secondary li:first-child {
display: block;
}
#portfolio #bar-services li, #portfolio nav.secondary li {
display: none; 
margin: 0;
}

#portfolio #bar-services li, #portfolio nav.secondary li {
	height: auto;
	margin: 0 5px;
	padding: 0;
}

#portfolio #bar-services li a, #portfolio nav.secondary li a {
	padding: 5px 5px 5px 32px;
	text-align: left;
}

#portfolio #bar-services li a:hover, #portfolio nav.secondary li a:hover {
	color: #000;
}

#portfolio #bar-services li a.selected {
color: #666;
}
#portfolio #bar-services ul:hover li {
	display: block;
	margin: 0 0 5px;
}
#portfolio section.bottom-90 {
    margin-bottom: 30px;
}
#bar-info.project li .wrapper {
	width: auto;
}
#bar-info.project li .wrapper .description {
    margin: 0px auto;
	width: 100%;
	display: table;
	text-align: center;
	float: none;
    margin-right: 0;
    text-align: left;
}
#bar-info.project ul li .description h2, #portfolio #bar-info.project ul li .description h2 {
    margin: 0 auto;
	font-size: 2.2em;
	vertical-align: middle;
	display: table-cell;
	/*padding-top: 40px;*/
	text-align: center;
}
#bar-info.project li .wrapper .image {
	display: none;
	
}
#portfolio #bar-info.project li a.previous, #portfolio section ul.nav li a.previous{top: 80%; left: 86%; }
#portfolio #bar-info.project li a.next {top: 80%; right: 3%;}
#services .timeline .list-areas li.odd {
    margin-right: 0;
}
#services .timeline .list-areas li {
	display:block;
    width: 100%;
	text-align:center;
}
#services .timeline section article.middle a.button {
    display: none;
}
#services .timeline section article.middle h3 {
    margin-bottom: 20px;
}
#portfolio .project section.videos article span iframe {
	display: block;
	width: 300px;
	height:auto;
}
#contacts #bar-info .address h1 {
    font-size: 1.9em;
}
#contacts #bar-info li {
	border: none;
    display: block;
    font-size: 1.1em;
    margin: 0px 0px 5px 0px;
    padding: 0px;
}

}