@media only screen and (max-width: 900px) {


	     #topnav_drop{float:left;}  
	#topnav_drop a{ width:100%; /*background:#08A4DF;*/ color:#fff !important; border-bottom: solid 1px #FFF !important }
	#topnav_drop a:hover{ /*background:#013162 !important;*/ color:#fff !important}
	
	#qm0 div, #qm0 ul{	   background: none repeat scroll 0 0 #06727C !important;
    margin: 0 0 0 1px;
    padding: 2%;
    position: absolute;
    text-align: center;
    top: 76px;
    width: 95.5%;
    z-index: 999 !important;}
	#qm0 a	{width:100%;}
	#qm0 div a, #qm0 ul a {background:#06727C !important; font-size:15px; width:100%;}
	#qm0 div a, #qm0 ul a {
    border: 0 none;
    font-size: 14px;
    margin: 0;
	text-align:center;
    padding: 5px 0 0 2px;
	}
		     .qmpersistent{/*background:#013162 !important;*/ background: #4F64A7;}
	


.label{

			 -webkit-transition:.3s;

	 -moz-transition:.3s;

	 -o-transition:.3s;

	 transition:.3s;

	width: 99%;

	height:44px;

	font-size: 18px;

  display: inline-block;

	background-size:cover;

	margin:.1em;

	background:#ee1d3a;

	color:#fff;

	font-weight:normal;

	text-align:center;

	line-height:44px;
    display: none;

}

.label span{ float:left}

.label img{ vertical-align:middle; float:left; position:absolute}



.checkbox:checked + .label {
		 -webkit-transition:.3s;
	 -moz-transition:.3s;
	 -o-transition:.3s;
	 transition:.3s;
	box-shadow:inset 0px 0px 10px rgba(0, 135, 255,0.5);
		background:#B9CF02;
}



#mobiledropmenu:checked ~ .title {
	 -webkit-transition:1s;
	width: 100%;
	height: 156px;
	opacity: 1;
}

	

.title {

	 -webkit-transition:1s;
	width: 0%;
	display:block;
	height: 0px;
	opacity:0;

}

			

.button {

				color:#fff;
				text-decoration:none;
					border-top:1px solid #fff;
					text-align:center;
					text-transform:uppercase;
					width:100%;
					padding:0;
}				

.button:hover {
					cursor:pointer;
					background:rgba(0,132,255,0.15);
}

 
	#container {
		width:100%;
	}

	#inner{ width:100%}
	#logo{ width:100%; height:auto;padding-top:20px;}
	#logo1{ width:100%; margin:0px; padding:0px;}
	#logo1 a{   background: url("../images/logo-iphone.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    width: 100%; background-position:center}
	 #logo2{ width:100%;text-align:center;}
	 #logo3{ width:100%;text-align:center;padding:0px;margin:0px;}
	 #logo3inner{ width:100%;text-align:center;line-height:15px;}
	#content{ width:99%}
	#midhome {
    float: none;
    padding: 1%;
    position: relative;
    width: 98%;
	}
	#loginzone {
    float: none;
    padding: 0px;
    position: relative;
    width: 100%;
	}
	#loginzonefeedback {
    float: none;
    padding: 0px;
    position: relative;
    width: 100%;
	}

	#loginform {
    float: left;
    height:100%;
    position: relative;
    width: 100%;
	}

	#logindetail {
    float: left;
 	padding: 2%;
    width: 100%;
	}

	#submiter{
	
	}
	#submiterquest {
		width:100%;
	}

	.ufrmll{ width:100%;}
	ufrmll input{ width:100% !important;}
	
	.ufrmlltitle{ width:100%}
	.ufrmll2{ width:100%;}
	
	#registerbox {
    float: left;
    height: auto;
    margin: 10px 0px 0px 0px;
    position: relative;
    width:100%;
	}
	#change_details_top{
	width:100%
}

	#topnav_drop{ width:100%}
	#footer a:hover{ color:#000000 !important}
	#footer{  float: left;
	font-size: 11px;
    margin: 12px 0 0;
    padding: 2%;
    text-align: left;
    width: 92%;}

#video{
	width:100%;
}
#aquestion{
	width:100%;
}

.ufrmll2q{margin-left:auto; margin-right:auto; width:100%; margin-top:10px;}
.ufrmllq{margin-left:auto; margin-right:auto; width:100%; margin-top:10px;}
#theresults {
	
	width:100%;
	
}
.resultbox{
	width:80%;
	margin-left:-0.5%;
}
h3{
	height:60px;
}
.resright  {
	padding-top:5px;
}
.resultboxfeedback{
	width:95%;
}
.resultboxtitles{
	width:95%;		
	}
.resultboxgreen{
	width:100%;
}
.whiteres{
	font-size:110%;
}
.whiterestext{
	font-size:80%;
}
.whiterestextbig{
	font-size:110%;
}
#gold IMG{
	width:100%;
}
.myanswers{
	width:100%;
}
#quizbuttoninner{
	margin-left:auto;
	margin-right:auto;
	width:95%;
}
#qbutton1{
	width:50%;
	margin-left:0%;
	margin-right:0%;
}
#qbutton2{
	width:50%;
	margin-left:0%;
	margin-right:0%;
}
.buttonimage{
	width:40%;
}
.buttonwords{
	width:60%;
	padding-top:13px;
	font-size:70%;
}
#brandzone{
	width:100%;
}
.brands{
	
	width:100%;
	
}

}







/* Mobile Landscape */



@media only screen and (min-width: 480px) and (max-width: 767px) {




#video{
	width:100%;
}
#aquestion{
	width:100%;
}
.ufrmll2{ width:100%;}
.ufrmll2q{width:100%;}
.ufrmllq{width:100%;}
.resultbox{
	width:100%;
	font-size:60%;
}
.resultboxfeedback{
	width:95%;
}
.resultboxtitles{
	width:95%;		
	}
#quizbuttoninner{
	margin-left:auto;
	margin-right:auto;
	width:100%;
}
.buttonwords{
font-size:50%;
}
h3{
	font-size:60%;
}
#brandzone{
	width:100%;
}
.brands{
	
	width:100%;
	
}

 #topnav_drop{ float:left }



 



 #footer{ text-align:left; padding:2%; width:86%; font-size:11px;}



 	#minitrolley {



    background-image: url("../images/contentimages/basket-1.jpg" )!important;



}



#minitrolleyinner{padding-top: 28px;}



#minitrolley{ float:right;}



#logo_search {



    float: left;



    margin:20px 0 0 12px;



    width: 62%;



}



#minitrolleyinner{ width:auto}







.frmlr_register INPUT{ width:100%}







/*--------------------------------------------*/ 



	



}







/* Tablet Portrait */



@media only screen and (max-width: 959px) and (min-width: 768px) {



	



#container {



		width:100%;}



#topnav_drop{ width:100%}



#midhome {



    float: left;



    padding: 0px;



    position: relative;



    width:100%;



}



#content { width:100%}



	#inner{ width:100%}



	#logo{ width:100%;}



	#logo1{ width:100%; margin:0px; padding:0px;}



	#loginzone{ width:100%}



	#loginform{ float:left; width:48%;}



	#registerbox{ float:left; width:48%; margin:0px 0px 0px 5px;}



	.ufrmll input {



    width: 88%;



}



#footer{ width:100%;}



#logo3{ width:100%;}



#logo{ height:auto}



#logo_search{ margin:10px 0px 0px 0px;}



#mid { width:100%; padding:0px;}



#mid h1 { padding:0px 5px;}



#mid  p{ padding:0px 5px;}



#mid strong{padding:0px 5px;}



#mid li{ padding:0px 10px 0px 0px;}







 #theproducts{ width:100%; padding:0px;}



 .fprodlink{ width:98%}



 .rcatitle {



    float: left;



    font-size: 120%;



    font-weight: bold;



    height: 30px;



    padding:2%;



    position: relative;



    width: 96%;



	}



#caton{ width:70%}







.rcatitleon{ width:96%; padding:2%; height:auto}



#popupContact{ width:88%;}



#poptopper{ width:100%;}



#trolley{ width:99%}



#tbaskettxt{ float:left; width:60%}



#trolley_inner_mid{ width:96%; padding:2%;}



#trolley_buttons{ width:66%}



#display_trolley_totals{}



.trolley_table{ width:100%}



#account_top{ width:94%; padding:3%;}



#contactformed{ width:99%}



#himage{ width:100%}



#himage img{ width:99%}



#midhome p{ padding:0 5px;}



#midhome h1{ padding:0 5px;}



#pstlogbutton{ margin:0px 0px 0px 10px}



#contform1{ height:auto;}











	/*------------------------------*/



	



} 







@media only screen and (max-width: 220px), only screen and (max-device-width: 480px) {



	



	#container {



		width:100%;



	}



	#inner{ width:100%}



	#logo{ width:100%; height: auto}



	#logo1{ width:100%; margin:0px; padding:0px;height: auto;}







	#logo1 a{   background: url("../images/logo-iphone.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);



    display: block;



  



    width: 100%; background-position:center}



	#content{ width:100%}



	#midhome {



    float: none;



    padding: 2%;



    position: relative;



    width: 100%;
box-sizing: border-box;


	}



	#loginzone {



    float: none;



    padding: 0px;



    position: relative;



    width: 100%;



	}



	#loginform {



    float: left;



    height:100%;



    position: relative;



    width: 100%;



	}



	#logindetail {



    float: left;



 	padding: 2%;



    width: 96%;



	}



	.ufrmll{ width:100%;}



	ufrmll input{ width:100% !important;}



	#registerbox {



    float: left;



    height: auto;



    margin: 10px 0px 0px 0px;



    position: relative;



    width:100%;



	}



	#footer {



    float: left;



    font-size: 100%;



    padding-top: 5px;



    position: relative;



    text-align: center;



    width:95%;



	}



	


	.ufrmlltitle{ width:100%}



	.ufrmll2{ width:100%;}



	#footer a:hover{ color:#000000 !important}



	#footer{  float: left;



    font-size: 11px;



    margin: 12px 0 0;



    padding: 2%;



    text-align: left;



    width: 92%;}



	#himage{ width:100%; padding:0px; margin:0px;}



	#himage img{ width:100%; height:auto;}



	#minitrolley{ width:auto}



	#logo_search{  float: left;



    margin: 7px 0 0 12px;



    width: 97%;}



	#pstlogtext{ width:100%; padding:0px; margin:0px;}



	#topnav_drop{  float:left }



	#topnav_drop a{ width:100%; /* background:#08A4DF; */ color:#fff !important; border-bottom: solid 1px #FFF !important }



	#topnav_drop a:hover{ background:#013162 !important; color:#fff !important}







	#logo3{ width:95%}



	#minitrolley {background-image: url("../images/contentimages/basket-1.jpg" )!important;}



	#minitrolleyinner{padding-top: 28px;}



	#mid {



    float: none;



    padding: 2%;



    position: relative;



    width: 96%;}



	



	.rcatitle {



    float: left;



    font-size: 120%;



    font-weight: bold;



    height: 30px;



    padding:2%;



    position: relative;



    width: 97%;



	}



	.rcatitleon{    float: left;



    font-size: 120%;



    font-weight: bold;



    height: 30px;



    padding:2%;



    position: relative;



    width: 97%;}



	



	.product{ width:99%}



	.prodtitle{ width:99%; text-align:center}



	.prodimage{ text-align:center; width:99%; padding:0px; margin:0px;}



	.prodprice{ width:100%; text-align:center}



	/************************

	.prodbutton{display: block;



    float: inherit;



    text-align: center;



    width: 68%;}

	********/



	.fprodlink{ width:100%;}



	#theproducts{ width:100%;}



	#leftprodnav{ width:100%}



	.catnav{ width:94%}



	#catadvert{ width:100%}



	#catadvert img{ width:100%}



	#caton{ width:100%}



	#popupContact{ width:85%}



	



	#popupContact {border: 6px solid #013162 !important; left:10px !important;}



	



	#popprodform{ width:96%; padding:2px;}



	#poptopper{ width:100%}



	#thetitlebox{ width:100%}



	#popprodimagelarge{ width:100%; padding:0px; margin:0px;padding-top:3%;}



	.descrightpp{ padding:0px; width:100%}



	.prodimagepop img{width:100%; }



	.descrightpp li{font-size:90%;}







	#trolley{ width:100%; margin:0px;}



	#trolley_top{ width:100%}



	#tbaskettxt{ width:60%; float:left}



#trolley_inner_mid{ width:96%; padding:2%}



.trolley_table{ width:100%}



#trolley_top, #checkout_top{ background:#013162 !important}



#contactformed{ width:96%; padding:2% 3% 2% 1%}



#cont_main{ width:96%; margin:2%}



#contactform{ width:100%; font-size:80%}



.contstep1{ width:100% !important; font-size:11px;}



.contform1{ width:100% !important;}



#contform1 {



    float: left;



    height: auto;



    position: relative;



    width:100%;



}



.contfieldback{width:100%;}



.contfieldback input{ width:100%;}



#rightcont{ width:96%; padding:2%; margin:0px;}



#trolley_buttons{ width:100%;}



#trolley_buttons{ width:100%;}



.contfieldback2{width:100%;}



#contform2{ width:100%;}



#trolley_buttons{ padding:0px;}



.tbutton{ margin: 0 0 4px;text-align: center;width: 96%;}



#trolley_titles{ width:100%}



.descleft{ width:90%;}



.descright{ width:90%}



#poppedform{ width:100%}



#account_top{ width:94%; padding:3%}}



#checkout_details{ width:96%; padding:2%;}



.cfield{ width:100%}



.leftcheckout{ width:50%; font-size:12px;}



.rightcheckout{ width:50%; font-size:12px;}



#account_table{ width:100%}



.troltitle{ font-size:12px;}



.troltitle1{width:33%; }



.troltitle2{width:33% !important;  }







#checkout_top{ width:96%; padding:2%}



.rightcheckout TEXTAREA{ width:98%; padding:0px;}



#trolley_titlesnew1{ width:100%; padding:5px 0px;}



.troltitle3{ width:15%; padding:0px;/* font-size:70%*/}



.trolstuff3{ width:15%; font-size:80%}



#formdetail_register{ width:95%; padding:2%}



.frmlr_register{ width:100%}



.rfrm_all{ width:100%}



.frmlr_register INPUT{ width:97%;}



#confirm_inner_mid{ width:100%;}



.trolstuff{ font-size:70%}



.trolstuff{ width:14%;}



 #formdetail{ width:96%; padding:2%}



 .frmur{ width:95%;}



 



 .troltitle1{ width:70%; float:left;  }



 .troltitle02{ width:15%; float:left;  }



 .troltitle3{ width:14%; float:left; }



 .troltitle4{ width:12%; float:left;  }



 .troltitle5{ width:13%; float:left;  }



 .troltitle6{ width:13%; float:left;  }



 .troltitle7{ width:15%; float:left;  } 



 



  .trolstuff1{ width:70%; float:left;  }



 .trolstuff02{ width:14%; float:left; }



 .trolstuff3{ width:14%; float:left;   }



 .trolstuff4{ width:12%; float:left;  }



 .trolstuff5{ width:13%; float:left; }



 .trolstuff6{ width:13%; float:left;  }



 .trolstuff7{ width:10%; float:left;   } 



 



.troltitle031{ width:70%; float:left; }



.troltitle032{ width:15%; float:left; }



.troltitle033{ width:20%; float:left; }



.troltitle034{ width:15%; float:left; }



.troltitle035{ width:11%; float:left;}



.troltitle036{ width:15%; float:left;}







.trolstuff31{ width:70%; float:left;}



.trolstuff32{ width:15%; float:left; }



.trolstuff33{ width:20%; float:left;}



.trolstuff34{ width:15%; float:left;}



.trolstuff35{ width:11%; float:left; }



.trolstuff36{ width:15%; float:left; }











}







@media only screen 



and (min-width : 1224px) {



 



 .troltitle1{ width:70%; float:left; font-size:100% ; font-weight:bold; }



}











/***********POPUP CHANGES BY JULIAN**********************/



/* This css is applied to includes/modules/LWSpopup-page/ajax-pull-iframe.php ****/







@media only screen and (max-width: 220px), only screen and (max-device-width: 479px) {



 #logindetail2{ width:96%; padding:2%}



.descleft1{width:45%;}



.descrightpp1{width:50%;}







.descleft2{width:100%;}



.descrightpp2{width:100%;}



.descrightpp2 li{font-size:90%;}



 #loopmain{width:100%;}



 #loopmaintext{width:100%;padding:0px;}



 #loopimagemain{width:100%;}



#popprodimagelarge{ width:100%; padding:0px; margin:0px;padding-top:3%;}

 .checkbox {

  display: none;

} 

.product2{ width:100%; margin-left:0px;}



 }



@media only screen and (max-width: 480px) {



 



 



.descleft1{width:50%;}



.descrightpp1{width:50%;}

.descleft2{width:100%;}

.descrightpp2{width:100%;}

.descrightpp2 li{font-size:90%;}

 #loopmain{width:100%;}


#loopmaintext{width:100%;padding:0px;}

 #loopimagemain{width:100%;}


 }

/* body{display: none;} */

 @media only screen and (min-width: 481px) and (max-width: 767px) {



.descleft1{width:50%;}


.descrightpp1{width:50%;}


.descleft2{width:100%;}



.descrightpp2{width:100%;}



.descrightpp2 li{font-size:90%;}



 #loopmain{width:100%;}



#popprodimagelarge{padding-top:5%;}



#loopmaintext{width:100%;padding:0px;}



 #loopimagemain{width:100%;}


 }

.ui-accordion .ui-accordion-header.ui-state-active{border: 1px solid #000;}
      .ui-accordion .ui-accordion-header:focus{outline: none;}
#content{padding-top: 30px !important;}
.apet img {max-width: 100%;}
#container{padding-bottom: 30px;}
#container::after{display: block; content: ""; clear: both;}  
#container::before{display: block; content: ""; clear: both;}  
 /*-------------------------nav------------------------------*/


@media (max-width: 1599px){
.apet::after{display: block; content: ""; clear: both;}	
.apet::before{display: block; content: ""; clear: both;}	
.apet{width: 80%; float: none; margin:0 auto;}	
}


 @media (max-width: 1365px){
.ufrmll INPUT{width: 100%;}
#footer-image1{margin-left: 0px; margin-right: 5px;}
#footer-image2{margin-left: 5px; margin-right: 0px;}
#footer-image-area{width: 100%; text-align: center;}
#footer-image1, #footer-image2{float: none; display: inline-block;}
#container::after{display: block; content: ""; clear:both;}	
#container::before{display: block; content: ""; clear:both;}	
#container {padding: 0 15px 30px;box-sizing: border-box;}



.frmur{width: 100%; box-sizing: border-box;}
INPUT[type=text], INPUT[type=password], SELECT, TEXTAREA{width: 100% !important; box-sizing: border-box;} 
div#logo1 img{max-width:80%;}
}


@media (max-width: 1279px){  
 
.apet{width: 100%; padding: 15px; box-sizing: border-box; margin: 0px;}
.appointswide{width: 100%; box-sizing: border-box;}
#inner{width: 100%; padding-top: 15px;}
#logo{display: flex; flex-wrap: wrap; justify-content: space-between;}
#logo3 div#logo3inner {width: 100%;text-align: center;} 
#logo2{padding-top: 0px; line-height: normal; align-self: center;} 
#content{padding-top: 20px !important;}
.petimage{float: right;}
.petname{margin-bottom: 10px;}  
.petdetails {margin-top: 10px;}
}

@media (max-width: 1023px){    	
#footercw{padding: 10px 15px;box-sizing: border-box;}
.ui-accordion .ui-accordion-content{padding:15px; height: auto !important;}
#order_details_top tr{width: 70%; display: inline-block;}
#order_details_top tr:first-child {width: 30%;}  
#order_details_top td {width: 100% !important;display: block; padding: 5px 0px;} 
#order_details_top{width: 100%;}
#submitersmall{width: auto; display: inline-block; padding:3px 10px;}
#logo1, #logo2, #logo3{text-align: center; width: 100%;}
#logo3 #logo3inner{width: 100%; text-align: center; float: none; clear: both;}
#logo2{padding-top: 0px; margin-bottom: 15px; margin-top: -10px;}
#logo3{padding-bottom: 15px;}
#logo {padding-top: 0px;}
.ufrmll2{width: 100%;}
#change_details_top INPUT[type=text], #change_details_top INPUT[type=password], #change_details_top SELECT, #change_details_top TEXTAREA{font-size: 16px;}   
}


@media (max-width:990px){
#qm0{display:none;}	
ul#qm0.flexnav-show{display: block;}
#qm0 a{border-right: none;}
.qmmc li{margin:0px;}
.flexnav li a, .flexnav li{border-bottom: none !important;}
#qm0 a{text-align: left; padding: 10px 15px;}
}


@media (max-width:767px){    
#logindetail{padding: 15px; width:100%; box-sizing: border-box;} 
#midhome{padding: 0px; width: 100%;} 
#logo1 img {max-width: 100%;}    
#legal{padding-bottom: 0px;}
.ui-accordion .ui-accordion-content{padding: 10px !important;} 
.ui-accordion .ui-accordion-header{font-size: 12px !important}
#logo2{font-size: 32px; line-height: normal; margin-top: -10px;}
#submiterlong{font-size: 12px; padding: 10px; box-sizing: border-box; width: 100%;}
.petdetails{width: 100%; order: 2;}
.petimage {margin-left: 0px; width: 100%; order: 1;}
.clerleftrightb {display: flex;flex-wrap: wrap;width: 100%;}      
.petimage{float: left;}
}



@media (max-width:374px){ 
.ui-accordion .ui-accordion-header{font-size: 11px !important}	
#submiterlong {font-size: 11px;}
}