/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) only screen and (max-device-width : 667px), only screen and (max-device-width : 736px) {
	#cont-div{
		float: left !important;
   	 	padding: 10px !important;
    	width: 200px !important;
		
	}
}



/* Smartphones (IPHONE 6) ----------- */

 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px), only screen and (min-device-width : 375px) and (max-device-width : 667px), only screen and (min-device-width : 414px) 
and (max-device-width : 736px) {
	.logo{
		margin:auto;
		width: 100%;
	}
	
	.logo img{
		width: 28%;
		display: block;
   		margin-left: auto;
   		margin-right: auto;
	}
	
	.logo-right{
		margin:auto;
		width: 100%;
		margin-top: 15px;
		text-align: center !important;
		
	}
	
	.main{
		display:none;
	}
	
	.logo-right ul{
		 display: inline-block;
		 float:none;
        margin: 0;
        padding: 0;
		margin:auto;
	
	}

	.search-bar{
		display: none;
	}
	
	#nav{
		display: none;
	}
	
	#menu{
		display:block;
		margin-bottom: 5px;
	}
	
	
	
	#menu .main-menu {
	  display: none;
	}
	
	#tm:checked + .main {
	  display: block;
	}
	
	.cbp-hrmenu{
		margin-top: 1px !important;
	}
	
	.menu-home{
		display:block !important;
	}
	
	.menu-home2{
		background:none !important;
	}
	
	#toggle-menu{
		display:block !important;
		text-transform: uppercase;
		color:#FFF;
		padding: 10px;
		margin-bottom: 2px;
	}
	
	.drop-icon{
		float:right;
	}
	
	#menu, 
	#toggle-menu {
	  background-color: #005e4e;
	}
	
		body{
		max-width: 100%;
		width: 100%;
		margin:0;
   		padding:0;
   		overflow-x:hidden;	
	}
  .facebook{
	  display: none;
	}
	
	.fancybox-lock body{
		width: 100% !important;
		max-width: 100%;	
	}
	
	.fancybox-lock{
		max-width: 100% !important;
	}
	
	
	
	
	#fancybox-overlay {
		position: fixed;
		top: 5%;
		left: 5%;
		width: 90%;
		height: 90% !important;
		}
		#fancybox-wrap {
		position: fixed;
		}

	.wrap{
		width:100% !important; 
		max-width: 100%;	
		margin:auto; 
		padding:0; 
		border: none;
		margin-right: 0;
	}


	


	.main-home-content{
		margin:10px; 
		padding:0;
		}
		
	.home-content-left{
		float:left; 
		margin-left:0px; 
		width:100%;
	}
	
	.about-content02{
		display:block;
		width: 100%;
	
	}
	
	.weatherFeed{
		width: 100%;
	    margin-top: 10px;
	}
	
	.weatherItem{
		background-size: 60%;
		
	}
	.weatherCity{
		margin-right: 30px;
		
	}
	.weatherTemp{
		margin-right: 30px;
		
	}
	.weatherDesc{
		margin-top: 10px;
	}
	.time-div{
		display: none;
    	margin-right: -74% !important;
	}
	
	.new-theme{
		
	}
	
	.logo-right li{
		    padding: 0 5px 0 8px;
	}
	
	.wizard > .content {
		    height: 350px !important;
	}
	
	.theme-img{ 
	margin-right: 15px !important;
	display:block;
	float: none;
	margin: auto !important;
	margin-bottom: 20px !important;
	margin-bottom: 20px !important;
	}

    .wizard > .steps a,
    .wizard > .steps a:hover,
    .wizard > .steps a:active
    {
        margin-top: 0.5em !important;
    }

    .wizard.vertical > .steps,
    .wizard.vertical > .actions
    {
        display: block !important;
        float: none !important;
        width: 100% !important;
    }

    .wizard.vertical > .content
    {
        display: block !important;
        float: none !important;
        margin: 0 0.5em 0.5em !important;
        width: auto !important;
		height: 500px !important
    }
	
	.qfundamental{
		width: 100% !important;
		margin-left: 0px !important;
		
	}
	
	.img-conts{
		float: none !important;
		text-align: center !important;
	}
	
	.text-conts{
		width: 100% !important;
		margin-left: 0px !important;
	}
	
	#first {
    margin-left: 2% !important;
}
	
	
	
	.video-gallery{
	 	width: 100%;
		margin-bottom: 10px;
	}
	
	.video-thumb{
		margin-left:25; 
		float:left;
		}
	
	.video-thumb img{
		width: 105%;
		margin-right: 25px;
	}
	
	.ppgi-sol{
		float:left;
	}
	
	.latest-news{
		width: 95%;
		float: left;
		border:solid 1px #d9d9d9;
		 
		margin-bottom:5px;
		}
		
	.space-div{
		display:block;
		float:left;
		width: 100%;
	}
		
	.latest-news-title{
		width: 100%;
		
		float:left;
		clear:right;
		
		
		}
		
	#news{ 
		width: 100%;
		float: left;
	  	font-size: .8em;
		
	}	
	
	
	
	.bullet ul{
		width: 95%;
	}
	
	
	.our-pro-tm img{
		max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
	}
	
	.quality-marks02 img{
		max-width: 100%;
		height: auto;
		width: auto\9; /* ie8 */
	}
	
	.member-of img{
		max-width: 100%;
		height: auto;
		width: auto\9; /* ie8 */
	}
	
	.home-content-right {
		width: 100%;
		float: left;
		
	}
	
	.our-values{
		width: 100%;
		margin-top: 8px;
		font-size: .9em;
		padding-bottom: 10px;
	}
	
	.social-responsibility{
		width: 100%;
		font-size: .9em;
		padding-bottom: 10px;
	}
	
	.safe-lead-limits{
		width: 100%;
		font-size: .9em;
	}
	
	.footer{
		width: 100%;
		height: 50px;
		background:#123c35; 
		color:#ffffff;
	}
	
	.footer-reg{
			display: none;
			
		}
		
	.footer-mobile{
		width:80%; 
   		margin-left:10%; 
    	margin-right:10%;
		display: table;
		color:#FFF;
		margin-top: 20px;
		
	
	}
	
	.footer-mobile a{
		color:#FFF;
		font-size: .8em;
	}
		
/* pages ----------- */

	.header-img img{
		max-width: 100%;
		height: auto;
		width: auto\9; /* ie8 */
	}
	
	.saudi-company{
		display:none;
	}
	
	
	.content-left2{
		float: right;
		display: none;
	}
	
	.content-right2{
		float: left;
		width: 95%;
		border:none;
		font-size: .9em;
		margin-left: 5px;
		padding-left: 5px;
	}
	
	.content-right2 table{
		width: 100%;
		float:left;
		margin-left: -5px;
		
	}
	
	.content-right2 td{
		 padding: 5px;
		 
		
	}
	
	.imgBorders{
		border:none;
		padding: 0px;
		margin: 10px;
		border-radius: 0px;
	}
	
	.content-right2 table img{
		max-width: 100%;
		height: auto;
		width: auto\9; /* ie8 */
	}
	
	.btn{
		margin-top: 15px;
	}

/* About Us*/

#dates li{
	    font-size: 14px !important;
		width: 70px !important;
}

#dates .selected{
	    font-size: 20px !important;
}

#issues li img{
	float:none !important;
}

#timeline {
    width: 95% !important;
    height: 550px !important;
}

#issues li h1 {
	    font-size: 30px !important;
		width: 35% !important;
}

#issues li p {
    font-size: 12px !important;
	width: 30% !important;
	padding-left: 20px;
	
}

#issues li img{
	display: none;
}

/* BOD */
.about-content{
	margin-left: 10px;
	margin-right: 10px;
}
.title-holder {
	width: 100% !important;
	font-size: .7em !important;
}
.position-holder{
	width: 100% !important;
	margin-top: 0px !important;
	margin-bottom: 10px;
	font-size: .6em !important;
    font-weight: normal !important;
}

.board-members{
    width: 130px !important;
    float: left !important;
    margin-left: 2%;
    margin-right: auto !important;
	padding: 0px !important; 
	margin-bottom: 10px;
}

.board-members02{
	width: 130px !important;
    float: left !important;
    margin-left: 2%;
    margin-right: 0px !important;
	padding: 0px !important; 
	margin-bottom: 10px;
}



.board-members02 #last{
	
}

.board-members03{
	width: 93% !important;
	float: none !important; 
    margin-right: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 10px;
    
}

.image-holder{
	width: 85% !important;
    height: auto !important;
}

.image-holder02{
	height: auto !important;
    width: 80% !important;
}

.image-holder02 img{
	width: 100% !important;
}



.image-holder03{
	height: auto !important;
    width: 30% !important;
}

.image-holder03 img{
	width: 100% !important;
}

.title-holder02 {
	width: 100% !important;
	font-size: .7em !important;
}

.position-holder02{
	width: 100% !important;
	margin-top: 0px !important;
	margin-bottom: 10px;
	font-size: .6em !important;
    font-weight: normal !important;
}

.title-holder03{
	
}

.position-holder03{
	
	margin-bottom: 10px;
	font-size: .6em !important;
    font-weight: normal !important;
}

.education-holder02 {
	margin-right: 5%;
	font-size: 1.1em !important;
    float: right !important;
    margin-top: -135px !important;
    width: 60% !important;
}

/* With Side Bar */
.content-left {
	display: none !important;
}

.content-right {
    margin-right: 0px !important;
    border-left: solid 0px #d6d6d6 !important;
    float: none !important;
    padding: 10px !important;
    width: 95% !important;
}

#toPopup{
	width: 85% !important;
	overflow:auto !important;
	left: 5% !important;
}

.newsletter-image{
	display:none;
}

.newsletter-message {
	width:85% !important;
	padding: 1.5em !important;
	padding-bottom: 2em;
}

div.close{
	right: auto !important;
}

.newsletter-message{
	width: 85% !important;
	   
    height: 75vh !important;
    overflow-y: auto !important;
}

	#my-div{
		height: 2900px !important;
		width: 100% !important;

	}
	
	#my-iframe{
		    position: absolute !important;
  			top: -170px !important;
    		left: -30px !important;
    		max-width: 100% !important;
  		    height: 3100px !important;
    		border: none !important;
			width: inherit !important;
	}
	
	.pro-conts{
		float: none !important;
		margin: auto !important;
    	margin-top: 20px !important;
    	margin-bottom: 20px !important;
	}
	
	#mogalvin-info{
		width: 90% !important;
		padding: 10px !important;
	}
	
	.fancybox-inner div{
		width: 90% !important;
		padding: 10px !important;
	}
	
	#mogalvin-info p a{
			width: 100%;
		    background: #004d28;
   			color: #ffffff;
   			font-size: 15px !important;
    		padding: 10px !important;
    		text-decoration: none;
    		text-align: center !important;
			display:inherit;
	}
	
	.fancybox-inner div p img{
		    max-width: 90%;
    		height: auto;
	}
	
	#cont-div{
		margin: 10px !important;
		margin-top: 10px !important;
   		
	}
	
	.responstable{
		width: 98% !important;
	}
	
	.responstable th{
		    font-size: .85em !important;
	}
	
	.prod-img {
		margin: 0 !important;
		margin-top: 15px !important;
		max-width: 100% !important;
    	height: auto !important;
	}
	
	.img-prod-cont{
		float:left !important;
		margin-top: -45px !important;
	}
	
	.tabs{
		display:none !important;
	
	}
	
	.tabs-hide{
		display:block !important;
	}
	
	#mainwrapper{
		width: 85% !important;
	}
	
	.prod-cont01{
		width:100% !important;
	}
	
	.prod-cont01 div{
		width: 150px !important;
		margin-left: 5px !important;
		
	}
	
	.tab label{
		padding: 5px !important;
		font-size: 10px !important;
	}
	
	.content{
		width: 100% !important;
	
	}
	
	.color-chart-bullet{
		margin-left:0px !important;  
		line-height: 1.5em !important;
	}
	
	.color-picker-iframe{
		width: 100% !important;
		height: 520px !important;
	}
	
	.product-preview .swatch a.active span{
		width: 60px !important;
    	height: 60px !important;
		
	}
	
	.swatch a{
		width: 60px !important;
    	height: 60px !important;
		margin-right: 25px !important;
    	margin-bottom: 30px !important;
	}
	
	.swatch h4{
		    padding-top: 70px !important;
	}
	
	.product-preview .product img{
		max-width: 100%;
    	height: auto;
	}
	
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
	
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}




/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
 		
	
	
}

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

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  #issues li img{
	display: block !important;
	
}
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles */
  #spacer02{
	display:block !important;
}
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	body{
		max-width: 100%;
		width: 100%;
		margin:0;
   		padding:0;
   		overflow-x:hidden;	
	}
	.wrap{
		max-width: 100%;
		width: 100%;
		padding: 0px;
	}
	.logo-right{
		margin-top: 20px;
	}
	
	.main{
		display:none;
	}
	
	

	
	
	#nav{
		display: none;
	}
	
	#menu{
		display:block;
		margin-bottom: 5px;
	}
	
	
	
	#menu .main-menu {
	  display: none;
	}
	
	#tm:checked + .main {
	  display: block;
	}
	
	.cbp-hrmenu{
		margin-top: 1px !important;
	}
	
	.menu-home{
		display:block !important;
	}
	
	.menu-home2{
		background:none !important;
	}
	
	#toggle-menu{
		display:block !important;
		text-transform: uppercase;
		color:#FFF;
		padding: 10px;
		margin-bottom: 2px;
	}
	
	.drop-icon{
		float:right;
	}
	
	#menu, 
	#toggle-menu {
	  background-color: #005e4e;
	}
	
	.cbp-hrmenu > ul > li{
		display:block;
	}
	
	.about-content02{
		width: 65% !important;
	}
	
	.wizard.vertical > .steps{
		    width: 30% !important;
	}
	
	.wizard.vertical > .content{
		    width: 70% !important;
	}
	
	#nt-example1 li{
		height: 110px !important;
	}
	
	.footer-reg{
		background-size: 100%;
		width: 100% !important;
		background-repeat:no-repeat;
		height: 100px !important;
		
	}
	
	.footer-reg td{
		width: 70% !important; 
	}
	
	
	.footer{
		width: 100% !important;
	}
	
	/* Pages ----------- */
	.header-img img{
		max-width: 100%;
		height: auto;
		width: auto\9; /* ie8 */
	}
	
	#issues li img{
		    margin: 25px 30px 10px 50px !important;
			
	}
	
	
	
	#issues li h1{
		    margin: 20px !important;
   			padding-right: 150px !important;
	}
	
	#issues li p{
		font-size: 12px !important;
		width: 80% !important;
		
	}
	
	.content-left{
	position: absolute;
	display: none;
	}
	
	.content-left2{
		display: none;
		position: absolute;
	}
	
	.vnav{
		margin-left: -270px !important;
	}
	
	.nav-trigger{
		display:block;
	}
	
	/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: absolute;
  left: 0px; top: 0px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
  background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .vnav {
  transition: left 0.2s;
 
}

.nav-trigger:checked + label {
  left: 230px;
}


.nav-trigger:checked ~ .vnav {
 	margin-left: -20px !important;
 
}
	
	.content-right{
		border-left: solid 0px #d6d6d6;
    	float: left;
   	 	padding-left: 0px;
    	width: 95%;
	}
	
	.content-right2{
		border-left: solid 0px #d6d6d6;
    	float: left;
   	 	padding-left: 0px;
    	width: 100%;
	}

	
	.head-main{
		position:fixed;
		top:0;
		background:#FFF;
		width:100%;
		z-index:999;
	}
	.header-img{
		margin-top:
	}
	
	.header{
		    margin-bottom: 140px;
	}
	
	#first{
		margin-left: 0px;
	}
	
	.board-members{
		margin-right: 50px !important;
   		margin-left: 60px !important;
	}
	
	.board-members03{
		width: 85% !important;
		margin: auto !important;
		margin-left: 45px !important;
    	margin-top: 35px !important;
   		 margin-bottom: 25px !important;
		     padding: 20px !important;
			     border: #CCC 0px solid !important;
	}
	
	.image-holder03{
		width: 200px !important;
  		  height: 200px !important;
  		  margin: auto !important;
		  
	}
	
	.image-holder03 img{
		    width: 200px !important;
	}
	
	.title-holder03{
		    margin: auto !important;
			width: 250px !important;
	}
	
	.education-holder02{
		width: 100% !important;
	}
	
	#management-board{
		 margin-left: 80px; !important;
	}
	#management-board #last{
		margin-right: 25px !important;
	}
	
	
	#my-div{
		height: 2000px !important;
	}
	
	#my-iframe{
		    position: absolute !important;
    		top: -300px !important;
    		left: 0 !important;
    		width: 80% !important;
   			height: 2500px !important;
   			border: none !important;
	}
	
	.newspaper-category{
		display:block !important;
	}
	.page-title{
		display:none;
	}
	
	.mobile-link{
		display:block !important;
	}
	

	
	
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
  /* Styles */
}

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

/* iPhone 4 - 5s ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
}

/* iPhone 6 ----------- */
@media
only screen and (max-device-width: 667px) 
only screen and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6+ ----------- */
@media
only screen and (min-device-width : 414px) 
only screen and (-webkit-device-pixel-ratio: 3) {
  /*** You've spent way too much on a phone ***/
}