@charset "UTF-8";

/* Responsive */

@media screen and (max-width: 999px){
	/* nav-wrap */
	#header .toplinks{
		position: relative;
	}
	/* menu icon */
	#header #menu-icon{
		width:52px;
		height:51px;
		background:url(../images/menuicon.png) no-repeat;
		padding:0;
		cursor: pointer;
		display: block; /* show menu icon */
		text-indent:-9999em;
		position:absolute;
		left:0;
		top:0;
	}
	/* main nav */
	#header .topinfo{
		display: none; /* visibility will be toggled with jquery */
	}
	#header .expand{
		display:block !important;
	}
}
  
/*--- Mobile Portrait ---*/
@media only screen and (max-width: 495px){
	body{
  		-webkit-text-size-adjust: none;
  	}
	#header .headerc{ width:auto;}
	#header a.logo{float:none; margin:0 auto !important; clear:both; width:250px; height:61px; background-size:100%;}
	#header #menu-icon{ width:40px; height:39px; background-size:100%;}
	#header .topinfo{ font-size:14px;}
	.buyyourkit .ordernow{ width:100%; background-size:contain;}
	#content img{ float:none; clear:both; margin:0 0 20px 0 !important; }
	a.ordersample{ font-size:20px; width:auto; margin:0 20px; }
	#footer .footerc{ width:auto; padding:0 20px;}
	#footer .leftcolumn,#footer .rightcolumn{ float:none; clear:both; width:auto !important;}
	#footer .footerlinks a{ font-size:16px; margin-right:10px;}
}

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) {
	#header .searchform .input{ font-size:13px !important; width:275px !important;}
}

/* Landscape Mode */
@media only screen and (max-width: 999px){
	body{
  		-webkit-text-size-adjust: none;
  	}
	#wrapper{ overflow:hidden;}
	#header .headerc{ width:auto;}
	#header a.logo{ float:none; clear:both; margin:0 auto;}
	#header .topinfo{ float:none; clear:both; margin:10px 10px;}
	#content{ width:auto; padding:20px;}
	#content br{ display:none;}
	#content h1{ padding:0 0 20px 0;}
	#content h2{ line-height:normal;}
	#content a.more{ font-size:20px; display:block; clear:both; margin:0 0 20px 0; text-align:center;}
	#wrapper .sunlovebenefits{ background:#fff; padding:0 20px 20px 20px; margin:0; width:auto;}
	#wrapper .sunlovebenefits .container{ width:auto;}
	#wrapper .sunlovebenefits .sunlovec,#wrapper .sunlovebenefits .sunlovecalt{ float:none; clear:both; width:auto; margin:0; padding:0;}
	#wrapper .sunlovebenefits .sunlovecalt h6,#wrapper .sunlovebenefits .nobullet{ background:url(../images/bullet.png) no-repeat left 35px !important;}
	#wrapper .royalSlider{ width:auto;}
	#wrapper .royalSlider .img,#wrapper .royalSlider .txt{ float:none; clear:both;width:auto;}
	#wrapper .royalSlider .img{ text-align:center;}
	#wrapper .royalSlider .txt{padding:50px 20px 0 20px; margin:20px 0 0 0; }
	#wrapper .rsOverflow{ height:700px !important;}
	#content img{ width:100%; height:auto;}
	#content img.widthauto{ width:auto !important; display:block; clear:both;}
	.asseenon{ width:220px; height:240px; margin:40px auto; background:url(../images/asseenonmobile.png) no-repeat center top;}
	.ourguarantee{ width:auto; height:auto; background:url(../images/ourguaranteemobile.png) no-repeat center 20px; padding:120px 0 20px 0; margin:20px 0; border-top:solid 1px #cbcdc8;border-bottom:solid 1px #cbcdc8;}
	#tabs .tablinks{ width:auto;}
	a#ourstorybtn, a#allaboutsunlovebtn, a#faqbtn{ width:auto; float:none; clear:both; display:block;}
	#allaboutsunlove .allaboutsunlovec,#faqs ul,#ourstory ul{ width:auto; padding:20px; margin:0;}
	
	.specificresults{ width:auto; padding:20px;}
	
	#footer .footerc{ width:auto; padding-left:20px; padding-right:20px;}
	#footer .leftcolumn{ width:60%;}
	#footer .rightcolumn{ width:35%;}
	#footer .footerlinks a{ font-size:16px; margin-right:10px;}
	#footer p small br,#footer h4 br{ display:none;}
	#footer .emailsignup .input{ width:90% !important;}
}

/* iPad in Portrait orientation */
@media screen and (min-width: 768px) and (orientation: portrait) {
	body{
  		-webkit-text-size-adjust: none;
  	}
	#header .searchform .input{width:600px !important;}
}

/* iPad in Landscape orientation */
@media only screen and (device-width: 768px) and (orientation: landscape) {
	body{
  		-webkit-text-size-adjust: none;
  	}
	#header a.logo{ margin-left:50px;}
	#header .searchform .input{width:850px !important;}
}