html {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
/*	background-attachment:scroll;
	background-position:center;
	background-position:top;	*/
}

.brands {
    height: 97px; /* Original height */
    width: 100%; /* Original width */
    transition:height 0.5s; /* Animation time */
    -webkit-transition:height 0.5s; /* For Safari */
	overflow:hidden;
	background-image:url(../graphics/brands_closed.png);
}
.brands:hover {
    height: 161px; /* This is the height on hover */	
	background-image:url(../graphics/brands_open.png);
}

/*Home Split Page*/
.home-left{width:64%; float:left}
.home-right{width:34%; float:left; margin-left:2%;}

.contact-left{float:left; width:67%; margin-right:5%}
.contact-right{float:left; width:28%}
.contact-clear{ clear:left; }

/*Home News Display*/
.large-news-box {width: 100%; border:#999999 thin solid;}
.news-box{margin:1%; width:98%; height:180px} 
.news-small-title{display: flex; align-items: center; height:99px; margin-left:20px; margin-right:10px}
.news-small-right{float:left; width:74%; margin-bottom:1%; height:99px; background:url(../layout/graphics/more_news_background.gif) no-repeat left center;} 
.news-small-text{width:100%; margin-bottom:1%; height:99px; background:url(../layout/graphics/more_news_background.gif) no-repeat left center;}
.news-small-left{float:left; width:25%; margin-right:1%; margin-bottom:1%}
.news-small-left img{width:100%; height:99px}


/*Contact Form*/
.cf-input{width:50%}
.cf-comments{width:100%}

.header-background{width:100%; height:438px; background-image:url(../graphics/header-my-teen-skin.jpg); background-repeat:no-repeat; background-position:center top; }
.header{width:1000px; height:438px; margin-left:auto; margin-right:auto; position:relative;}
.footer{width:100%; padding-top:10px; background-color:#ececec; height:auto}
.footer-left{width:10%; margin-left:3%; text-align:right; font-weight:bold; float:left}
.footer p{color:#9c9c9c;}
.footer-left-1{width:85%; margin-left:1%; float:left }


.main-container {width:996px; margin-left:auto; margin-right:auto;  border-left:2px solid #f4f4f4; border-right:2px solid #f4f4f4;}
.main-container {overflow:hidden;} /*Important if slider in place*/
.main-content {width:96%; padding-left:2%; padding-right:2%; min-height:300px; background-image:url(../graphics/page-bottom.jpg); background-position:center bottom; background-repeat:no-repeat; padding-bottom:30px}

img.largebutton:hover {opacity: 0.6; filter: alpha(opacity=60);}
img.clients:hover {opacity: 0.5; filter: alpha(opacity=50);}

.main-menu-sys{position:absolute; top:370px; right:20px; width:600px;}

/*Social Media Icons and Search*/
.header-sm{position:absolute; top:40px; right:16px; width:150px; text-align:right; /*background-color:#000033*/}
.header-sm-left{float:left; width:111px}

.mob-basket{visibility:hidden; display:none;}

.SearchBox{float:left; width:190px; background-image:url(../graphics/search_box.gif)}
.SearchBox form{height:37px; margin:0px; padding:0px;}
.SearchBox form input[type=text]{height:20px; margin:6px; border: 2px solid white;}	

#s-button{
    background-image:url('../graphics/search_off.gif');
    width: 37px;
    height: 37px;
    border-style: none;
    background-color: transparent;
    text-indent: 480px;    /* hack to hide the text */
  }

#s-button:hover {
    background-image: url('../graphics/search_on.gif')
  }

.shop-cats-img{padding:2%; border:#CCC thin solid;}



/*Home Page Tabs*/
.tabs-container{background-color:#e0e0e0; width:auto; background-color: #e0e0e0; background-image:url(../layout/graphics/tabs_pointer_blank.png); background-position: bottom; background-repeat: repeat-x;}

ul#tabs {
  list-style-type: none;
  margin: 0 0 10px 0;
  padding: 0;
  text-align: left;}
  ul#tabs li {
    display: inline-block;
    background-color: #e0e0e0;
	background-position: bottom;
	background-repeat: no-repeat;
	background-image:url(../layout/graphics/tabs_pointer_blank.png);
    /*border-bottom: solid 2px #e0e0e0;*/
    padding: 15px 10px;
    margin-bottom: 0px;
    color: #000;
	font-weight: bold;
    cursor: pointer; }
    ul#tabs li:hover 
		{
	  background-image:url(../layout/graphics/tabs_pointer.png);
	  /*border-bottom: solid 2px #31b7c1;*/
	  color: #31b7c1;
	  	}
    ul#tabs li.active {
	  background-image:url(../layout/graphics/tabs_pointer.png);
	 /* border-bottom: solid 2px #31b7c1;*/
	  color: #31b7c1;
	  }

ul#tab {
  list-style-type: none;
  margin: 0;
  padding: 10px 0px 0px 0px; 
  }
  
  ul#tab li {
    display: none;
    padding: 0px;
    /* border: solid 20px #d2f4e9; */
	}
    ul#tab li.active {
      display: block; 
	  margin-left:10px;
	  margin-right:10px;
	  }
    ul#tab li h2 {
      font-weight: 400;
      margin-bottom: 14px;
      padding-bottom: 5px;
      border-bottom: solid 1px #31b7c1; }
/*End tabs*/


.burger-sm{visibility:hidden; display:none;}  

.paging{padding-top: 20px; text-align:center}
.paging-container, .paging-chosen{padding: 5px; border:thin solid #31b7c1; text-align:center; margin-right:2px; display:inline-block}
.paging-container {background-color:#FFFFFF;}
.paging-container:hover{background-color:#31b7c1;}
.paging a{border-bottom:none;}
.paging a:hover{color:white;}

.shopbuts{
  background-image: url(../layout/graphics/shop-buttons.png);
  background-repeat: no-repeat;
  height: 50px;
}
.shopbuts:hover{
opacity:0.7;
}
.shopbut1 {background-position: 0px 0px; width: 70px;} 
.shopbut2 {background-position: 0px -50px; width: 60px;}
.shopbut3 {background-position: 0px -100px; width: 180px;}
.shopbut4 {background-position: 0px -150px; width: 180px;}
.shopbut5 {background-position: 0px -200px; width: 180px;}
.shopbut6 {background-position: 0px -250px; width: 180px;}
.shopbut7 {background-position: 0px -300px; width: 70px;}
.shopbut8 {background-position: 0px -350px; width: 70px;}
.shopbutform{border:none; background-color: Transparent; cursor: pointer;}


@media screen and (max-width:700px)
{ 
.prod_main_im img {padding:3%; width:94%}
.navbuts{
  background-image: url(../layout/graphics/buttons.png);
  background-repeat: no-repeat;
  height: 48px;
}
.navbut1 {background-position: 0px 0px; width: 220px;}
.navbut2 {background-position: 0px -48px; width: 220px;}
.navbut3 {background-position: 0px -96px; width: 220px;}
.navbut4 {background-position: 0px -144px; width: 220px;}
.navbut5 {background-position: 0px -192px; width: 220px;}
.navbutmain {background-position: 0px -240px; width: 120px; margin-left:auto; margin-right:auto} 
.navbutbasket {background-position: -150px -240px; width: 60px; float:right}

html {background: none;}
/*.burger-sm{text-align:center; padding-top:10px}  // Social media icons not required on this site as part of search*/

.header-background{width:100%; height:375px; background-image:none;}
.header{width:100%; height:375px; background:url(../graphics/header-mob.jpg) no-repeat top center; position:relative;}
.main-container {width:100%; border-left:none; border-right:none; }

.footer{width:100%; padding-top:10px; background-color:#ececec; height:auto}
.footer-left{visibility:hidden; display:none;}
.footer-left-1{width:90%; margin-left:auto; margin-right:auto; text-align:center }

.footer-bottom{visibility:hidden; display:none;}

.home-left{float:none; width:94%; margin-left:auto; margin-right:auto;}
.home-right{float:none; width:94%; margin-left:auto; margin-right:auto;}
.contact-left, .contact-right{float:none; width:94%; margin-left:auto; margin-right:auto;}

.main-menu-sys{visibility:hidden; display:none;}
#AWMEL0{visibility:hidden; display:none;}
.brands{visibility:hidden; display:none;}

.header-sm{position:absolute; top:14px; right:16px; width:150px; text-align:right; /*background-color:#000033*/}
.mob-basket{visibility:visible; display:block; position:absolute; bottom:0px; text-align:center; width:100%;}
.mob-basket p{line-height:0px}
}

/*
   Layout of content pages
    -----------------------------
*/

/* Left and right content divs casestudies and news/articles/blog */
.left_side{width:680px; float:left;}
.right_side{width:200px; margin-left:26px; float:left; margin-top:51px}

.heading_c, .heading_d {font-size: 16px; font-weight: bold; margin-top:0px; color:#31b7c1;}
.heading_d {font-size: 12px;}

/* Image Box Layout(Used in casestudies) */

.cimage_case {float:left; width: 186px; height: 186px; border:#999999 thin solid; background-color:#FFFFFF;}
.cimage_case img {padding: 3px; width:180px; height:180px}
.cimage_case a {border:none; margin: 0px}

.cimage_large {float:left; width: 136px; height: 136px; border:#999999 thin solid; background-color:#FFFFFF;}
.cimage_large img {padding: 3px; width:130px; height:130px}
.cimage_small_container {float:left; width: 69px; margin-left:3px; margin-top:14px}

.cimage_small {width: 69px; border:#999999 thin solid; background-color:#FFFFFF; margin-bottom: 3px}
.cimage_small img {padding: 3px; width:63px; height:63px}
.c_content_im {position: relative; overflow: hidden; padding-left:16px;}
.c_content {position: relative; overflow: hidden;}

.gal_image_large {width: 268px; height: 268px; border:#999999 thin solid; background-color:#FFFFFF; margin-left:auto; margin-right:auto;}
.gal_image_large img {padding: 3px; width:262px; height:262px}
.gal_container {float:left; width:50%;}
.gal_container_content {width:262px; margin-left:auto; margin-right:auto; }

.related-files{border:thin solid #CCCCCC; width:92%; margin-left:auto; margin-right:auto; padding: 0px 15px 0px 15px; margin-top:20px; background-color:#FFFFFF}

.date_text {font-size: 11px; font-weight: bold;}

.c_title {font-size: 16px; font-weight: bold; border-bottom: thin dotted #31b7c1; display:block; color: #31b7c1;}

.c_title a{font-size: 16px; border:none; text-decoration:none;}
.c_title a:link {color: #31b7c1; border:none; text-decoration:none;}
.c_title a:visited {color: #31b7c1; border:none; text-decoration:none;}
.c_title a:active {color: #31b7c1; border:none; text-decoration:none;}
.c_title a:hover {color: #000000; border:none; text-decoration:none;}

.breadcrumb {font-size: 10px;}
.breadcrumb a{font-size: 10px; text-decoration:none;}
.breadcrumb a:link {color: #31b7c1; font-size: 10px;  text-decoration:none;}
.breadcrumb a:visited {color: #31b7c1; font-size: 10px;  text-decoration:none;}
.breadcrumb a:active {color: #31b7c1; font-size: 10px;  text-decoration:none;}
.breadcrumb a:hover {color: #000000; font-size: 10px;  text-decoration:none;}

.right_side a:link {font-size: 12px;}
.right_side a:visited {font-size: 12px;}
.right_side a:active {font-size: 12px;}
.right_side a:hover {font-size: 12px;}

#slidercontainer{margin:30px 0px 30px -120px;}

.login-box, .login-box-right {border:thin solid #31b7c1; margin-top:15px; padding: 2%; float:left; min-height:400px}
.login-box {width:52%;}
.login-box-right{width:36%; margin-left:2%;}
.mob-log{visibility:hidden; display:none;}

/* Product Pages */
.prod_medium_container {width:42%; float:left; margin-left:4%; margin-right:2%; padding: 0px}
.prod_medium {width: 180px; height: 180px; border:#999999 thin solid; background-color:#FFFFFF; margin-left:auto; margin-right:auto}
.prod_medium img {padding: 3px; width:174px; height:174px}

.prod_large_container {width:42%; float:left; margin-left:4%; margin-right:2%; padding: 10px 0px 14px 0px}
.prod_large {width: 240px; height: 240px; border:#999999 thin solid; background-color:#FFFFFF; margin-left:auto; margin-right:auto}
.prod_large img {padding: 3px; width:234px; height:234px}
.prod_content_large {width: 90%; position: relative; overflow: hidden; text-align:center; margin-left:auto; margin-right:auto}

.prod_title {font-weight: bold; display:block; color: #31b7c1;}
.prod_title a{font-weight: bold; border-bottom: thin dotted #31b7c1; color: #31b7c1;}
.prod_title a:hover {color: #000000; border-bottom: thin dotted #000000; text-decoration:none;}

.prod_main_im {border:#999999 thin solid; background-color:#FFFFFF; display: inline-block; margin:20px 0px 20px 0px}
.prod_main_im img {padding:6px;}

.basket_im {width: 120px; height: 120px; border:#999999 thin solid; background-color:#FFFFFF; float:left}
.basket_im img {padding: 3px; width:114px; height:114px}
.basket_content{float:left; width:70%; margin-left:3%}

.basket-container{width:100%;}
.basket-sub-1{float:left; width: 30%; text-align:right}
.basket-sub-2{float:left; width: 68%; margin-left:2%}
.basket-but{width:80%; text-align:right;}

.order-container{width: 68%}

.form-left{float:left; width:20%; margin-right:2%; text-align:right;}
.form-left-large{float:left; width:30%; margin-right:2%; text-align:right;}
.form-right{float:left; width:50%;}
.form-right input[type="text"]{width:100%}

.shop-cats-home{width:31%; margin-left:1%; margin-right:1%; margin-top:20px; margin-bottom:10px; float:left}
.shop-cats-cat{width:21%; margin-left:1%; margin-right:1%; margin-top:20px; margin-bottom:10px; float:left}
/*.shop-cats-img in CSS folder layout.css*/

.shop-mini-basket{width:80%; margin-left:auto; margin-right:auto; margin-bottom:26px}

.options-left{float:left; width:15%; margin-left:5%; text-align:right}
.options-right{float:left; width:79%; margin-left:1%}
.options-req-left{float:left; width:200px; margin-left:20px; padding-right:10px;}
.options-req-right{float:left; width:400px;}

@media screen and (max-width:700px)
{ 
#wowslider-container1{visibility:hidden; display:none;}
.left_side{margin-left:auto; margin-right:auto; width:94%; float:none;}
.right_side{visibility:hidden; display:none;}

.cimage_large {float:left; width: 96px; height: 96px;}
.cimage_large img {padding: 3px; width:90px; height:90px}

.cimage_case {float:left; width: 146px; height: 146px;}
.cimage_case img {padding: 3px; width:140px; height:140px;}

.gal_container {float:none; width:100%;}

.order-container{width: 100%}

.shop-cats-home, .shop-cats-cat{width:44%; margin-left:2%; margin-right:2%; margin-top:20px; margin-bottom:10px; float:left}

.prod_medium, .prod_large {width: 100%; height: auto; border:#999999 thin solid; background-color:#FFFFFF; margin-left:auto; margin-right:auto}
.prod_medium img {padding: 2%; width:96%; height:auto}
.prod_large img {padding: 2%; width:96%; height:auto}
.prod_large_container {width:92%; float:left; margin-left:auto; margin-right:auto; padding: 10px 0px 14px 0px}

.options-left{float:none; width:90%; margin-left:auto; margin-right:auto; text-align:left}
.options-right{float:none; width:90%; margin-left:auto; margin-right:auto}

.options-req-left{float:none; width:90%; margin-left:auto; margin-right:auto; padding-right:0px; text-align:left}
.options-req-right{float:none; width:90%; margin-left:auto; margin-right:auto}

.basket_im {width: 120px; height: 120px; float:none; margin-left:auto; margin-right:auto}
.basket_im img {padding: 3px; width:114px; height:114px}
.basket_content{float:none; width:90%; margin-left:auto; margin-right:auto; padding-top:20px}

.basket-sub-1{float:none; width: 100%; text-align:center}
.basket-sub-2{float:none; width: 100%; margin-left: auto;  text-align:center}
.basket-but{width:100%; text-align:right;}

.login-box select{width:100%;}
.login-box, .login-box-right {width:94%; float:none; margin-left:auto; margin-right:auto}
.mob-log{visibility:visible; display:block}
.form-right{width:60%;}
.form-left{width:28%;}
}

/* @group Blink */


/* Blinks 3 times */
/*.blink {
    -webkit-animation: blink .3s linear 3;
    -moz-animation: blink .3s linear 3;
    -ms-animation: blink .3s linear 3;
    -o-animation: blink .3s linear 3;
    animation: blink .3s linear 3;
}*/
/* Blinks forever times */
.blink {
    -webkit-animation: blink 2s infinite;
    -moz-animation: blink 2s infinite;
    -ms-animation: blink 2s infinite;
    -o-animation: blink 2s infinite;
    animation: blink 2s infinite;
}

@-webkit-keyframes blink {/* percentages are the times so 0% is the start and 100% is the end of the cycle */
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    50.01% { opacity: 1; }
    100% { opacity: 0.3; }
}

@-moz-keyframes blink {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    50.01% { opacity: 1; }
    100% { opacity: 0.3; }
}

@-ms-keyframes blink {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    50.01% { opacity: 1; }
    100% { opacity: 0.3; }
}

@-o-keyframes blink {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    50.01% { opacity: 1; }
    100% { opacity: 0.3; }
}

@keyframes blink {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    50.01% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* @end */