/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 640px) {
	body {
		font-family: 'Open Sans', sans-serif;
		margin: 0px auto;
		height: 100%;
		overflow: scroll;
-webkit-overflow-scrolling: touch;
	}
	
	hr{
		display: none;
	}
	#header_frame {
	  position: relative;
	  display: inline-block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 80px;
	  margin: 0;
	  border-bottom: none;
	}
	
	#main_frame {
	  position: relative;
	  display: inline-block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: auto;
	  margin: 0;
	  text-align: center;
	  overflow: scroll;
-webkit-overflow-scrolling: touch;
	}

	#header_frame {
	  position: fixed;
    display: inline-block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    margin: 0;
    border-bottom: none;
    z-index: 1000;
    background-color: #fff;
    border-bottom: 1px solid #f2f2f2;
	}	
	#content_frame {
	  position: relative;
    display: inline-block;
    margin-top: 80px !important;
    left: 0px;
    width: 100%;
    height: auto;
    margin: 0;
    margin-top: 50px !important;
    overflow: scroll;
-webkit-overflow-scrolling: touch;
	}
	
	#centerimage_frame {
	  position: relative;
	  display: inline-block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: auto;
	  float: none;
	}
	
	#text_frame {
	  position: relative;
	  display: inline-block;
	  top: 0px;
	  left: 0px;
	  width: 90%;
	  height: auto;
	  float: none;
	  margin-left: 0;
	  text-align: left;
	  color: #878787;
	  font-size: 16px;
	  margin-right: 0;
	  line-height: 25px;
	  padding: 4%;
	  padding-top: 0;
	}
	
	#logo_frame {
	  position: relative;
    display: inline-block;
    top: 7px;
    left: 2px;
    width: 80px;
    height: 35px;
    background: url(images/logo-mob.jpg) no-repeat left center;
    float: none;
    background-size: contain;
	}
	
	#logo_frame a{
		width: 100%;
	}
	
	#underline_b{
		display: none;
	}
	
	#mob-menu{
		position: absolute;
    display: block;
    left: 15px;
    top: 14px;
    width: 38px;
    height: 23px;
    background: url(images/mobmenu.png) no-repeat center center;
    background-size: contain;
	}
	
	
	#mob-close{
		position: absolute;
		display: none;
		width: 30px;
		height: 23px;
		background: url(images/close-mob-menu.png) no-repeat center center;
		background-size: contain;
		left: 16px;
    top: 13px;
	}
	#btn-gallery{
		position: absolute;
	    display: none;
	    right: 15px;
	    top: 11px;
	    width: 38px;
	    height: 29px;
		background: url(images/icon-selected.png) no-repeat center center;
	    background-size: contain;
	}

	#menu_frame {
	  position: absolute;
    display: none;
    top: 50px;
    left: 0px;
    width: 100%;
    height: auto;
    margin-left: 0px;
    margin-top: 0px;
    float: none;
    z-index: 100;
	  
	  
	}
	
	ul.mm_outer {
	  list-style: none;
	  list-style-type: none;
	  padding: 0px;
	  margin: 0px;
	  width: 100%;
	}
	
	li.mm_row {
	  position: relative;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 50px;
	  float: none;
	  margin-left: 0px;
	  line-height: 0px;
	  list-style: none;
	  list-style-type: none;
	  margin-top: 1px;
	  background: #fff;
	}
	
	li.mm_row a {
	  font-size: 13px;
	  color: #ABAFA6;
	  text-decoration: none;
	  border: 0px;
	  display: block;
	  position: relative;
	  line-height: 50px;
	  width: 100%;
	  text-align: left;
	  text-indent: 10px;
	}

	li.mm_row a:hover {
		background: #EEEAEA;
	}
	
	li.mm_row.active a {
	  color: #878787;
	  background: #EEEAEA;
	}

	#footer_frame {
	  position: relative;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 33px;
	  line-height: 33px;
	    margin-top: 30px;
	}
	
	
	.sb_container {
		width: 100%;
		height: 384px;
	}
	
	.side_banner_box {
	  position: absolute;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 384px;
	}
	
	.sb_image {
	  position: relative;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 384px;
	}
	
	.sb_image img{
		height: 100%;
		width: auto;
		}
	
	/* projects */
	#mini_projects_frame {
	  position: relative;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	 height: auto;
	 	  margin-left: 0px;
	  text-align: left;
	  color: #6D6E70;
	  font-size: 13px;
	 
	}
	
	#projects_container {
	  height: auto;
	}
	
	/*.clear:before, .clear:after {
	    content: "\0020";
	    display: block;
	    height: 0;

	}
	
	.clear:after {
	    clear: both;
	}*/
	
	.mproject_box {
	 width: 100%;
	    height: 235px;
	    float: none;
	    margin-left: 0px;
	    position: relative;
	}

	.mproject_image {
	  width: 100%;
	  height: 100%;
	  overflow: hidden;
	  margin-bottom: 2px;
	}
	
	.mproject_image img{
		width: 100% !important;
		height: auto !important;
	}

	.mproject_text {
	  position: absolute;
	  display: block;
	  top: 197px;
	  left: 15px;
	  width: 100%;
	  height: 28px;
	  margin-top: 0px;
	  text-decoration: none;
	  color: #fff;
	    text-shadow: 1px 2px 31px #000;
	}
	
	#mini_projects_frame {
	  margin-top: 0px;
	}
	
	#btn_next {
		display: none;
	}
	
	#btn_prev {
		display: none;
	}
	
	#under_image{
		display: none;
	}
	
	#all_images_link{
		display: none;
	}
	
	#ref_frame{
		display: none;
	}
	/*----------*/
	
	.grad-mob{
		display: block;
		position: absolute;
		bottom:0px;
		left:0px;
		width: 100%;
		background: url(images/backgrad.png) repeat-x;
		height: 82px;
	} 
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 641px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
	body {
		font-family: 'Open Sans', sans-serif;
	}
	
	hr{
		display: none;
	}
	
	#header_frame {
	  position: relative;
	  display: inline-block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 80px;
	  margin: 0;
	  border-bottom: none;
	}
	
	#main_frame {
	  position: relative;
	  display: inline-block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: auto;
	  margin: 0;
	  text-align: center;
	}

	#header_frame {
	  position: fixed;
	  display: inline-block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 80px;
	  margin: 0;
	  border-bottom: none;
	  z-index: 1000;
	  background-color: #fff;
	    border-bottom: none;
	}	
	#content_frame {
	  position: relative;
	  display: inline-block;
	  margin-top: 80px !important;
	  left: 0px;
	  width: 100%;
	  height: auto;
	  margin: 0;
	}
	
	#centerimage_frame {
	  position: relative;
	  display: inline-block;
	  top: 0px;
	  left: 0px;
	  width: 90%;
	  height: auto;
	  float: none;
	}
	
	#text_frame {
	  position: relative;
	  display: inline-block;
	  top: 0px;
	  left: 0px;
	  width: 90%;
	  height: auto;
	  float: none;
	  margin-left: 0;
	  text-align: left;
	  color: #878787;
	  font-size: 16px;
	  margin-right: 0;
	  line-height: 25px;
	  padding: 4%;
	}
	
	#logo_frame {
	  position: relative;
	  display: inline-block;
	  top: 13px;
	  left: 0px;
	  width: 69px;
	  height: 51px;
	  background: url(images/logo-mob.jpg) no-repeat left center;
	  float: none;
	  background-size: contain;
	}
	
	#logo_frame a{
		width: 100%;
	}
	
	#underline_b{
		display: none;
	}
	
	#mob-menu{
		position: absolute;
		display: block;
		left:15px;
		top:0px;
		width: 38px;
		height: 69px;
		background: url(images/mobmenu.png) no-repeat center center;
		  background-size: contain;
	}
	
	
	#mob-close{
		position: absolute;
		display: none;
		width: 30px;
		height: 43px;
		background: url(images/close-mob-menu.png) no-repeat center center;
		background-size: contain;
		left: 16px;
    top: 13px;
	}
	#btn-gallery{
		position: absolute;
	    display: none;
	    right: 15px;
	    top: -5px;
	    width: 38px;
	    height: 69px;
		background: url(images/icon-selected.png) no-repeat center center;
	    background-size: contain;
	}


	#menu_frame {
	  position: fixed;
	  display: none;
	  top: 69px;
	  left: 0px;
	  width: 100%;
	  height: auto;
	  margin-left: 0px;
	  margin-top: 0px;
	  float: none;
	  z-index: 100;
	  
	  
	}
	
	ul.mm_outer {
	  list-style: none;
	  list-style-type: none;
	  padding: 0px;
	  margin: 0px;
	  width: 100%;
	}
	
	li.mm_row {
	  position: relative;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 69px;
	  float: none;
	  margin-left: 0px;
	  line-height: 0px;
	  list-style: none;
	  list-style-type: none;
	  margin-top: 1px;
	  background: #fff;
	}
	
	li.mm_row a {
	  font-size: 17px;
	  color: #ABAFA6;
	  text-decoration: none;
	  border: 0px;
	  display: block;
	  position: relative;
	  line-height: 69px;
	  width: 100%;
	  text-align: left;
	  text-indent: 10px;
	}

	li.mm_row a:hover {
		background: #EEEAEA;
	}
	
	li.mm_row.active a {
	  color: #878787;
	  background: #EEEAEA;
	}

	#footer_frame {
	  position: relative;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 33px;
	  line-height: 33px;
	    margin-top: 30px;
	}
	
	
	.sb_container {
		width: 100%;
		height: 285px;
	}
	
	.side_banner_box {
	  position: absolute;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 285px;
	}
	
	.sb_image {
	  position: relative;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 508px;
	}
	
	.sb_image img{
		height: 100%;
		width: auto;
		}
	
	/* projects */
	#mini_projects_frame {
	  position: relative;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: auto;
	  margin-left: 0px;
	  text-align: left;
	  color: #6D6E70;
	  font-size: 13px;
	  /*overflow: hidden;*/
	}
	
	#projects_container {
	  height: auto;
	}
	
	
	.mproject_box {
	  width: 100%;
	  height: auto;
	  float: none;
	  margin-left: 0px;
	}

	.mproject_image {
	  width: 100%;
	  height: 381px;
	  overflow: hidden;
	  margin-bottom: 2px;
	}
	
	.mproject_image img{
		width: 100% !important;
		height: auto !important;
	}

	.mproject_text {
	  position: absolute;
	  display: block;
	  top: 340px;
	  left: 15px;
	  width: 100%;
	  height: 28px;
	  margin-top: 0px;
	  text-decoration: none;
	  font-size: 19px;
	  color: #fff;
	    text-shadow: 1px 2px 31px #000;
	}
	
	#mini_projects_frame {
	  margin-top: 0px;
	}
	
	#btn_next {
		display: none;
	}
	
	#btn_prev {
		display: none;
	}
	
	#under_image{
		display: none;
	}
	
	#all_images_link{
		display: none;
	}
	
	#ref_frame{
		display: none;
	}
	/*----------*/
	
	.grad-mob{
		display: block;
		position: absolute;
		bottom:0px;
		left:0px;
		width: 100%;
		background: url(images/backgrad.png) repeat-x;
		height: 82px;
	} 

}
/**********
iPad 3
**********/


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */

	body {
		font-family: 'Open Sans', sans-serif;
	}
	
	hr{
		display: none;
	}
	
		
	#main_frame {
	  position: relative;
	  display: inline-block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: auto;
	  margin: 0;
	  text-align: center;
	}

	#header_frame {
	  position: fixed;
	  display: inline-block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 69px;
	  margin: 0;
	  border-bottom: none;
	  z-index: 1000;
	  background-color: #fff;
	    border-bottom: none;
	}	
	#content_frame {
	  position: relative;
	  display: inline-block;
	  margin-top: 69px !important;
	  left: 0px;
	  width: 100%;
	  height: auto;
	  margin: 0;
	}
	
	#centerimage_frame {
	  position: relative;
	  display: inline-block;
	  top: 0px;
	  left: 0px;
	  width: 90%;
	  height: auto;
	  float: none;
	}
	
	#text_frame {
	  position: relative;
	  display: inline-block;
	  top: 0px;
	  left: 0px;
	  width: 90%;
	  height: auto;
	  float: none;
	  margin-left: 0;
	  text-align: left;
	  color: #878787;
	  font-size: 16px;
	  margin-right: 0;
	  line-height: 25px;
	  padding: 4%;
	}
	
	#logo_frame {
	  position: relative;
	  display: inline-block;
	  top: 13px;
	  left: 0px;
	  width: 69px;
	  height: 51px;
	  background: url(images/logo-mob.jpg) no-repeat left center;
	  float: none;
	  background-size: contain;
	}
	
	#logo_frame a{
		width: 100%;
	}
	
	#underline_b{
		display: none;
	}
	
	#mob-menu{
		position: absolute;
		display: block;
		left:15px;
		top:0px;
		width: 38px;
		height: 69px;
		background: url(images/mobmenu.png) no-repeat center center;
		  background-size: contain;
	}
	
	
	#mob-close{
		position: absolute;
		display: none;
		width: 30px;
		height: 43px;
		background: url(images/close-mob-menu.png) no-repeat center center;
		background-size: contain;
		left: 16px;
    top: 13px;
	}
	#btn-gallery{
		position: absolute;
	    display: none;
	    right: 15px;
	    top: -5px;
	    width: 38px;
	    height: 80px;
		background: url(images/icon-selected.png) no-repeat center center;
	    background-size: contain;
	}

	#menu_frame {
	  position: fixed;
	  display: none;
	  top: 69px;
	  left: 0px;
	  width: 100%;
	  height: auto;
	  margin-left: 0px;
	  margin-top: 0px;
	  float: none;
	  z-index: 100;
	  
	  
	}
	
	ul.mm_outer {
	  list-style: none;
	  list-style-type: none;
	  padding: 0px;
	  margin: 0px;
	  width: 100%;
	}
	
	li.mm_row {
	  position: relative;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 69px;
	  float: none;
	  margin-left: 0px;
	  line-height: 0px;
	  list-style: none;
	  list-style-type: none;
	  margin-top: 1px;
	  background: #fff;
	}
	
	li.mm_row a {
	  font-size: 17px;
	  color: #ABAFA6;
	  text-decoration: none;
	  border: 0px;
	  display: block;
	  position: relative;
	  line-height: 69px;
	  width: 100%;
	  text-align: left;
	  text-indent: 10px;
	}

	li.mm_row a:hover {
		background: #EEEAEA;
	}
	
	li.mm_row.active a {
	  color: #878787;
	  background: #EEEAEA;
	}

	#footer_frame {
	  position: relative;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 33px;
	  line-height: 33px;
	    margin-top: 30px;
	}
	
	
	.sb_container {
		width: 100%;
		height: 66vw;
	}
	
	.side_banner_box {
	  position: absolute;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 285px;
	}
	
	.sb_image {
	  position: relative;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 508px;
	}
	
	.sb_image img{
		height: 66vw;
		width: 100%;
		}
	
	/* projects */
	#mini_projects_frame {
	  position: relative;
	  display: block;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: auto;
	  margin-left: 0px;
	  text-align: left;
	  color: #6D6E70;
	  font-size: 13px;
	  /*overflow: hidden;*/
	}
	
	#projects_container {
	  height: auto;
	}
	
	
	.mproject_box {
	  width: 100%;
	  height: auto;
	  float: none;
	  margin-left: 0px;
	}

	.mproject_image {
	  width: 100%;
	  height: 381px;
	  overflow: hidden;
	  margin-bottom: 2px;
	}
	
	.mproject_image img{
		width: 100vw !important;
		height: auto !important;
	}

	.mproject_text {
	  position: absolute;
	  display: block;
	  top: 340px;
	  left: 15px;
	  width: 100%;
	  height: 28px;
	  margin-top: 0px;
	  text-decoration: none;
	  font-size: 19px;
	  color: #fff;
	    text-shadow: 1px 2px 31px #000;
	}
	
	#mini_projects_frame {
	  margin-top: 0px;
	}
	
	#btn_next {
		display: none;
	}
	
	#btn_prev {
		display: none;
	}
	
	#under_image{
		display: none;
	}
	
	#all_images_link{
		display: none;
	}
	
	#ref_frame{
		display: none;
	}
	/*----------*/
	
	.grad-mob{
		display: block;
		position: absolute;
		bottom:0px;
		left:0px;
		width: 100%;
		background: url(images/backgrad.png) repeat-x;
		height: 82px;
	} 

}



@media screen and (min-width: 1366px) {
    #main_frame { width: 1130px; }
	#header_frame { width: 1130px; }
    #menu_frame { float: right; }
	#content_frame { width: 1130px; }
    #text_frame { width: 334px; font-size: 15px; line-height: 20px;}
	#centerimage_frame { width: 734px; }
	.sb_container { width: 734px; height: 431px !important; }
	.sb_container { width: 734px; }
	.sb_image { width: 734px;  height: 431px !important; }
	.sb_image img { width: 734px !important;     height:  434px; }
	h5 { font-size: 15px; }
	h2 { font-size: 20px; }
	#footer_frame { width: 1130px; }
	#underline_b { bottom: -81px; }
	#mini_projects_frame { width: 1125px; height: 480px; }
	.mproject_box { width: 299px; height: 499px;}
	.mproject_image { width: 299px; height: 399px; }
	.mproject_image img { width: 299px !important; height: 399px !important; }
	#btn_next { top: 201px; right: -45px; }
	#btn_prev { display: block; top: 201px; left: -15px;}
	li.mm_row { margin-left: 90px; }
	#menu_frame {   width: 806px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
}
@media screen and (min-width: 1920px) {
	#main_frame { width: 1588px; }
	#header_frame { width: 1588px; }
    #menu_frame { float: right; }
	#content_frame { width: 1588px; height: 700px;}
    #text_frame { width: 477px; font-size: 15px; line-height: 20px;}
	#centerimage_frame { width: 1034px; }
	.sb_container { width: 1044px; height: 679px !important; }
	.sb_container { width: 1044px; }
	.sb_image { width: 1044px;  height: 679px !important; }
	.sb_image img { width: 1044px !important;     height:  679px; }
	h5 { font-size: 15px; }
	h2 { font-size: 20px; }
	#footer_frame { width: 1588px; }
	#underline_b { bottom: -81px; }
	#mini_projects_frame { width: 1580px; height: 663px; }
	.mproject_box { width: 386px; height: 663px;}
	.mproject_image { width: 386px; height: 563px; }
	.mproject_image img { width: 386px !important; height: 563px !important; }
	#btn_next { top: 201px; right: -45px; }
	#btn_prev { display: block; top: 201px; left: -15px;}
	li.mm_row { margin-left: 120px; }
	#menu_frame {   width: 985px; }

}