/*--------------------------------------------------------
Responsive elements  
orden of the media important for chrome!
--------------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 959px) { 
h1 { font-size: 68px;}                                 
.one-text { font-size: 16px;}
#slidecaption { font-size: 68px }
.slidedescription { font-size: 12px }
.slider-text { bottom: 7%; padding-left: 34%;} 
.bg1{background-size: 150%}
.bg5 {background: url("../images/parallax/black-map-london.png") repeat  fixed center 230px; background-size: 120%; height: 350px;
}
.bg2 { background-size: 1280px;}
#contact { background-size: 1437px; }
nav { height: 60px; }
.title{font-size: 35px;} 
a#next_page_button{left:-30px;top:45%;}
.bg-map{ max-height: 300px;}

}
@media only screen and (width: 1024px) {  
#contact { background-size: 1000px; } 
.slider-text {  padding-left: 35%; } 
.card { margin: 60px 0 0 0; }
a#next_page_button{left:-30px;top:45%;}
}

@media only screen and (max-width: 767px) { 
h1 { font-size: 54px; line-height: 1; }
.one-text { font-size: 14px; }
.project-title { font-size: 14px; }
.project-description { font-size: 11px; }
#slidecaption { font-size: 36px}
.lines { font-size: 24px; }
#contact { height: auto;}
.contact-social-icons img { width: 40px; height: 40px; }
.contact-social-icons li { margin: 0 5px 0 5px; }
.links { display: none; }
.dropmenu { display: block; margin-top: 5px; } 
.logo { width: 180px; height: auto; }
.slidedescription { display: none; } 
p4{
	font-size:14px;
	margin:5px 5px 5px 15px;
}

img.scaleimg4 {
    height: auto;
    width: 100%;
}
#pies { display: none; }
#tree { top: 200px; left:0px; position: absolute; }
#click{top: 0px; left:50px; position: absolute;width:30%}
.btn_zero{ top: -20px; left:0px; position: absolute; }
#overlay0 div { left: 40px;  top: 25px; }

.btn_one{ top: 162px; left:0px; position: absolute; }
#overlay1 div { right: -680px;  top: 20px;  }

.btn_two{ top: 270px; left:0px; position: absolute; }
#overlay2 div { left: 40px; top: 85px; }

.btn_three{ top: 376px; left:0px; position: absolute; }
#overlay3 div { left: 40px;   top: 25px;}

.btn_four{ top: 468px; left:0px; position: absolute; }
#overlay4 div { right: -270px; top: -45px;  }

.btn_five{ top:560px; left:0px; position: absolute; }
#overlay5 div { left: 40px;  top: 35px; }

.line { width: 80px; margin-bottom: 20px; }
.social-icons { position: absolute; top: 6px; right:10px; margin-top: 0;}
nav { height: 30px; }
#homepage { margin-bottom: -30px; }
.slider-text { bottom: 7%;  padding-left: 35%; } 
#about, #culture, #services, #portfolio { padding-top: 32px; padding-bottom: 40px; } 
#prevslide, #nextslide{ position:absolute; height:15px; width:15px; top:50px; margin-top:-21px; opacity:0.6; }
#culture h4 { padding-top: 27px; }
.bg1, .bg2 { background-size: 1000px;}
.bg5 { background: url("../images/parallax/black-map-london.png") repeat  fixed center -250px;
background-size: 150%; height: 350px;

}
.column .img-wrp { margin: 40px 0px 14px; }
#prevslide{ right:55px; background:url('../images/back-15.png'); }
#nextslide{ right:30px; background:url('../images/forward-15.png'); }
#contact { background-size: 720px; }
.title{font-size: 25px;}
#f1_container {height: 35%; width: 50%;}
a#next_page_button{left:-30px;top:45%;}
.bg-map{ max-height: 170px;}
}
@media only screen and (max-width: 479px) { 

.bg0{
    background: url("../images/like4.jpg") no-repeat center center; 
 height:100%;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}
.bg-map{ max-height: 120px;}
#location{ margin-top: 100px;}
.lines, .adress{ font-size: 18px; }
.slider-text { bottom: 40px; padding-left: 25%;}
#prevslide, #nextslide{ position:absolute; height:15px; width:15px; top:100px; opacity:0.6; }
#prevslide{ left:0; }
#nextslide{ left:25px; }
.logo { top: 20px; }
#f1_container {height: 23%; width: 50%;}
a#prev_page_button{left:-10px;}
a#next_page_button{left:-10px;top:45%;}
.title{font-size: 15px;} 
/*twelve .columns #pies{width:30%}*/
/*.scalimag3{width:50%}*/
.bg5 { background: url("../images/parallax/black-map-london.png") repeat  fixed center 50px;
background-size: 230%; height: 350px; }

}

@media only screen and (min-width: 1400px) {
nav .container,
#homepage .container,
#homepage .container
.sixteen.columns
{ width: 65%; }
nav .four.columns { float: right; }
.slider-text { width: 100%; /*margin-left:10px;*/ min-height: 100px;} 
.line { width: 825px; display: none;}

#parallax1, #parallax3, 
#parallax1 .vertical-text, 
#parallax3 .vertical-text, #parallax1 .pattern,
#parallax3 .pattern
{ height: 440px; }

#parallax2, #parallax2 .vertical-text, #parallax2 .pattern{height: 580px }





#prevslide, #nextslide{ position:absolute; height:30px; width:30px; top:210px; margin-top:-21px; opacity:0.6; }
.bg1, .bg2 { background-size: 100%; }
 .bg5 { background-size: 100%; } 
.title2{font-size: 50px;}
}
@media only screen and (min-width: 1600px) {

nav .container,
#homepage .container,
#homepage .container
.sixteen.columns
{ width: 56%; }
nav .four.columns { float: right; }
.slider-text { width: 100%; /*margin-left:10px;*/  }
.line { width: 825px; display: none;}
#parallax1, #parallax2, #parallax3,
#parallax1 .vertical-text, #parallax2 .vertical-text,
#parallax3 .vertical-text, #parallax1 .pattern,
#parallax2 .pattern, #parallax3 .pattern
{ height: 600px; }


#prevslide, #nextslide{ position:absolute; height:30px; width:30px; top:210px; margin-top:-21px; opacity:0.6; }
.bg1, .bg2{ background-size: 100%; }
.bg5 { background-size: 150%; } 
.title2{font-size: 60px;}

}
@media only screen and (min-width: 1800px) {
nav .container,
#homepage .container,
#homepage .container
.sixteen.columns
{ width: 53%; }
nav .four.columns { float: right; }
.slider-text { width: 100%; /*margin-left:10px;*/  }
.line { width: 825px; display: none;}
#parallax1, #parallax2, #parallax3,
#parallax1 .vertical-text, #parallax2 .vertical-text,
#parallax3 .vertical-text, #parallax1 .pattern,
#parallax2 .pattern, #parallax3 .pattern
{ height: 600px; }
#prevslide, #nextslide{ position:absolute; height:30px; width:30px; top:210px; margin-top:-21px; opacity:0.6; }
.bg1, .bg2{ background-size: 100%; }
.bg5 { background-size: 150%; } 
.title2{font-size: 60px;}

}
@media only screen and (min-width: 1900px) { 
nav .container,
#homepage .container,
#homepage .container
.sixteen.columns
{ width: 50%; }
nav .four.columns { float: right; }
.slider-text { width: 100%; /*margin-left:10px;*/  }
.line { width: 825px; display: none;}
#parallax1, #parallax2, #parallax3,
#parallax1 .vertical-text, #parallax2 .vertical-text,
#parallax3 .vertical-text, #parallax1 .pattern,
#parallax2 .pattern, #parallax3 .pattern
{ height: 600px; }
#prevslide, #nextslide{ position:absolute; height:30px; width:30px; top:210px; margin-top:-21px; opacity:0.6; }
.bg1, .bg2{ background-size: 100%; }
 .bg5 { background-size: 150%; } 
}