/* Smartphones (portrait and landscape) ----------- */
@media only screen 
   and (min-width : 320px) 
   and (max-width : 768px) {
   
   h3{
   	font-size: 19px;
	font-weight: bold;
   }
   
   #is_mobile { display: block!important; }
   
   #nav .mobile_show_nav {
	  width: 50px;
	  height: 50px;
	  background: url(/img/menu3.png) no-repeat center;
	  background-size: 20px;
	  float: right;
	  margin: 2px 2px 0 0;
   }
   
   #nav .nav_items {
   	  display: none;
	  position: fixed;
	  top: 56px;
	  width: 100%;
	  left: 0 ;
	  background: #4EA1D5;
   }
   
   #nav .nav_items.show { display: block; }
   
   #nav .nav_item, #nav .nav_item.selected {
	  display: block;
	  text-align: center;
   }
   
   #nav .container .logo {
	  width: 200px;
	  top: 0px;
	  background-size: 180px;
	  height:56px;
	  background-position: 2px;
	  left:5px;
   }
   
   h1{
	  font-size: 35px;
   }
   
   h2{
	  font-size: 35px;
	  width: 95%;
	  padding: 0 5px;
   }
   
   .container {
	  width: 100%;
   }
   
   .section {
	  padding: 30px 0;
   }
   
   #footer {
	  height:auto;
	  overflow:hidden;
   }
   
   #footer .info, 
   #footer .social {
	  float: none;
	  width: 100%;
	  text-align: left;
	  padding: 0 20px;
   }
   
   #footer .info {
	  margin: 30px 0;
   }
   
   #footer .social {
	  margin-top: 20px;
   }
   
   #footer .info p {
	  margin: 5px 0;
   }
   
   .contact_options {
	  width: 100%;
	  margin-left: 20px;
   }
   
   .enquiry_outer {
	  width: 95%;
	  float: left;
	  padding: 20px;
	  margin-top: 20px;
   }
   
   .enquiry_left, 
   .enquiry_right {
	  width: 100%;
   }
   
   .enquiry_form input.enquiry_input, 
   .enquiry_form textarea {
	  width: 302px;
	  }
   
   .enquiry_form input.enquiry_input.not_valid, 
   .enquiry_form input.enquiry_input.valid {
	  background-position: 267px 4px;
	  }
   
   .enquiry_right {
	  margin-top: 0;
   }
   
   .mobile_scroll_to { display: block; }
   
   #projects .portfolio {
	  width: auto;
   }   
   
   #projects .portfolio .case,
   #projects .portfolio .case,
   #projects .portfolio .case_info,
   #projects .portfolio .case,
   #projects .portfolio .case img {
	  height: 180px;
	  width: 100%;
	  }
   
   #projects .portfolio a {
	  width: 100%;
	  height: 100%;
	  float: left;
   }
   
   #projects .portfolio .case{
	  float: left;
	  width: 50%;
   }
   
   #projects .portfolio .case_info {
	  width: 100%;
   }
   
   #projects .case_info p {
	  display:none;
   }

	#projects .view_website {
		padding: 12px 3px;
		width: 136px;
		font-size: 17px;
	}

.portfolio_page .slide {
	width: 100%;
	left: 0;
	margin-left: 0;
}

.portfolio_page .slide img {
width: 100%;
}

   #services .services a,
   #services .service_circle,
   #services a:hover .service_circle  {
	  width: 144px;
	  background-size: 115px;
   }
   
   .service_title {
	  font-size: 17px;
   }
   
   #about .col{
   	width: 100%;
	padding: 0 20px;
   }
   
   #about .padding-right.last{
	   padding-right: 30px;
   }
   
   .enquiry_form h3 {
   	padding-right: 30px;
	font-size: 19px;
   }

#we_are {
	height: 326px;
}

#we_are h1 {
	margin-top: 16px;
	font-size: 300%;
}
   
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 480px) and (max-width: 767px) and (orientation : landscape) {
   #projects .portfolio .case,
   #projects .portfolio .case,
   #projects .portfolio .case_info,
   #projects .portfolio .case,
   #projects .portfolio .case img {
	  height: 168px;
   }
#we_are{
	height: 237px;
}

#we_are h1 {
margin-top: -15px;
}

}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 400px) {
   
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
   and (min-width : 768px) 
   and (max-width : 1024px) {
   
   #is_tablet { display: block!important; }
   
   h1 {
	  font-size: 300%;
   }
   
h2 {
	font-size: 40px;
}
   
   #device {
	  display: block;
   }
}

/* iPads (landscape) ----------- */
@media only screen 
   and (min-width : 768px) 
   and (max-width : 1024px) 
   and (orientation : landscape) {
   
   .container {
	  width: 900px;
   }
   
   #nav .logo {
	  background: url(../img/logoX2.png) no-repeat;
	  background-size: 200px 50px;
   }
   
   .enquiry_form input.enquiry_input, .enquiry_form textarea {
	  /* width: 68%; */
	  }
   
   .enquiry_form input.enquiry_input.not_valid, .enquiry_form input.enquiry_input.valid {
	  /* background-position: 212px 4px; */
	  }
   
   #services .services a {
	  width: 215px;
	  margin-top: 20px;
   }
   
   #services .service_circle {
	  width: 215px;
	  height: 170px;
	  background-size: 140px;
   }
}

/* iPads (portrait) ----------- */
@media only screen 
   and (min-width : 768px) 
   and (max-width : 1024px) 
   and (orientation : portrait) {
    .container {
        width: 700px;
    }

    #nav .container {
        padding: 0 20px;
        /* margin: 0 20px; */
        width: 100%;
    }
   
   #nav .nav_item{
	  font-size: 19px;
   }
   
   #nav .nav_item, 
   #nav .nav_item:hover, 
   #nav .nav_item.selected {
	  padding: 16px 10px;
   }
   
   .contact_options, 
   .enquiry_outer {
	  width: 95%;
	  float: none;
   }
   
   .contact_options { margin-left: 20px; }
   
   .enquiry_outer { 
	  margin-top: 20px; 
	  min-height: 300px;
	  overflow: hidden;
	  height:auto;
   }
   
   #nav .container .logo {
	  background-size: 200px;
	  top: 0px;
	  }
   
   .enquiry_outer {
	  margin-top: 40px;
	  width: 100%;
	  }
   
   #services .services a, #services .service_circle {
	  width: 165px;
   }
   
   .service_title {
	  font-size: 19px;
   }
   
   #projects .portfolio .case, 
   #projects .portfolio .case, 
   #projects .portfolio .case_info, 
   #projects .portfolio .case, 
   #projects .portfolio .case img {
	  height: 176px;
	  width: 233px;
	  }
   
   .portfolio_page .slide {
	  width: 700px;
	  margin-left: -350px;
   }
   
   .portfolio_page .slide img {
	  width: 700px;
   }
   
   #projects .case_info p {
	  font-size: 19px;
   }
}

/* Desktops and laptops ----------- */
@media only screen 
   and (min-width : 1224px) {
   /*.section {
   width: 1200px;
   margin: 0 auto;
}*/
}

/* Large screens ----------- */
@media only screen 
   and (min-width : 1824px) {
   /* Styles */
}

/* Retina displays ----------- */
@media
   only screen and (-webkit-min-device-pixel-ratio : 1.5),
   only screen and (min-device-pixel-ratio : 1.5) {
   
   #nav .logo {
	  background: url(../img/logoX2.png) no-repeat;
	  background-size: 200px 50px;
   }
   
   .contact_option.email {
	  background: url(../img/mailX2.png) no-repeat;
	  background-size: 53px;
   }
   
   .contact_option.phone {
	  background: url(../img/phoneX2.png) no-repeat;
	  background-size: 53px;
   }
   
   .contact_option.skype {
	  background: url(../img/skypeX2.png) no-repeat;
	  background-size: 53px;
   }
   
   .enquiry_form input.enquiry_input.not_valid {
	  background-image: url(../img/error_smallX2.png);
	  background-size: 25px;
   }
   
   .enquiry_form input.enquiry_input.valid {
	  background-image: url(../img/tick_smallX2.png);
	  background-size: 25px;
   }
   
   .enquiry_done .large_tick { 
	  background-size: 70px; 
	  height: 70px;
   }
   
   .enquiry_form input[type="submit"] {
	  background-image: url(../img/tickX2.png);
	  background-size: 30px;
   }
   
}