/*
Theme Name: Perfect Bathroom Solutions
Theme URI:http://www.perfectbathroomssolutions.co.uk
Description:
Version:1.0
Author:MJT Web Designs - http://www.mjtwebdesigns.co.uk


/*******************************************************************************************************************
*  Colours                                                                                            
*******************************************************************************************************************

color: rgb(114, 190, 205); color: #72BECD   370E42


/*******************************************************************************************************************
*  IMPORT OTHER STYLES                                                                                             
*******************************************************************************************************************/

/*******************************************************************************************************************
*  Font Face                                                                                                            
*******************************************************************************************************************/


/*******************************************************************************************************************
*  Google Fonts                                                                                                            
*******************************************************************************************************************/

@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700);
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
/*******************************************************************************************************************
*  Global                                                                                            
*******************************************************************************************************************/

* { border:0; margin:0 auto; padding:0; outline:none; }
html {		padding: 0px;		margin: 0px;}
body { margin:0; padding:20px 0 ; color:#9A9EA1; background:#fff; 
      -webkit-font-smoothing: antialiased; 
      font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; border-top: 2px #72BECD solid;
	  overflow: hidden; }
a { color:#72BECD; text-decoration:none; }
a:hover { text-decoration: underline; }

p.clr,
.clr { clear:both; padding:0; margin:0; background:none; }

li { list-style:none; /*float:left; */ }

h2 { color:#1c1c1c; font-size:1.5em; font-weight:normal; letter-spacing:-1px; margin:0 0 0.5em; font-size:24px; 
font-family: 'News Cycle', sans-serif; margin-top:10px; }
h3 { color:#fff; font-size:50px; margin:15px 0; background:#ededed; padding:20px; }
h4 { color:#1c1c1c; font-size:1.1em; font-weight:normal; letter-spacing:-1px; margin:0 0 0.5em; font-size:18px; 
font-family: 'News Cycle', sans-serif; margin-top:10px;  }
p { margin:8px 0; padding:0 0 8px; }
strong{ font-weight:bold;}
em { text-decoration:underline; font-size:0.8em;}
ul,ol {		padding: 0;		margin: 0 0 10px 25px;		display: block;		list-style-type: square;}
ul ul,
ul ol,
ol ol,
ol ul {		margin-bottom: 0;		display: block;list-style-type: square;}
li {		line-height: 20px;}
ul li.square { list-style:square; padding-bottom:5px;}

blockquote {
		font-size: 14px;
		line-height: 22px;
		background: #f9f9f9;
		border-left: 10px solid #ccc;
		margin: 20px;
		quotes: "\201C""\201D""\2018""\2019";
		padding: 20px 10px 20px 90px;
		background: url("images/quotes.png") 10px 10px no-repeat #f3f3f3;
}


/*******************************************************************************************************************
*  Layout                                                                                            
*******************************************************************************************************************/

#page { margin:0 auto; padding:10px 20px; width:1040px; background:#fff; border:#ccc solid 0px;
  	position:relative;      }


/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../images/preloader.GIF); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}
 
/*******************************************************************************************************************
*  flex_ Grid                                                                                           
*******************************************************************************************************************/
#columns{ border-bottom:1px solid #e0e0e0; clear:both; padding-bottom:20px; }
.outer_wrap {		margin: 0 auto; width: 960px;}
.inner_wrap {		padding: 20px 0px 20px 0px;}
.flex_10,
.flex_20,
.flex_25,
.flex_33,
.flex_40,
.flex_50,
.flex_60,
.flex_66,
.flex_75,
.flex_80,
.flex_90,
.flex_100 {
		display: inline;
		float: left;
		position: relative;
		margin-bottom:10px;
}
.push {		margin: 1px 0px 0px 0px;}
.last{ float:right;}
.flex_10 {		width: 10%;}
.flex_20 {		width: 20%;}
.flex_25 {		width: 23%;margin-right:2%;}
.flex_25 p, .flex_40 p{
	margin-bottom:5px;
}
.flex_33 {		width: 33%;}
.flex_40 {		width: 40%;}
.flex_50 {		width: 47%;	margin-right:3%;}
.flex_60 {		width: 60%;}
.flex_66 {		width: 66%;}
.flex_75 {		width: 75%;}
.flex_80 {		width: 80%;}
.flex_90 {		width: 90%;}
.flex_100 {		width: 100%;}

.flex_60 img, .flex_50 img, .flex_10 img, .flex_20 img, .flex_25 img, .flex_33 img, .flex_40 img, .flex_40 img,
.flex_66 img, .flex_75 img, .flex_80 img, .flex_90 img, .flex_100 img{ max-width:100%; height:auto;}
/*******************************************************************************************************************
*  Header                                                                                           
*******************************************************************************************************************/

#header { margin:0 auto 20px auto; padding:0; border-bottom:4px double #e0e0e0;}

/*******************************************************************************************************************
*  Logo                                                                                         
*******************************************************************************************************************/

.logo { margin:0; padding:0 0 20px 0; float:left; }
.logo h1 a:hover { text-decoration:none; }
.logo h1 small { display:block; margin:0; padding:0; color:#464545; font:normal 12px "Liberation sans", Arial, Helvetica, sans-serif; }

.contact{ float:right;  color:#A5A5A5; padding:0px 0px 0px 0; height: 40px; margin-bottom:0px; width:650px;
  font-family: 'News Cycle', sans-serif;
  font-size:1.9em;
  font-weight:normal;
  text-align:right;letter-spacing:-1px;
 
}
.contact p{ padding:0px 0 0 0; text-align:right;line-height:1.0em;}
.contact a{ color:#1c1c1c;}
.contact span{ color:#1c1c1c; font-weight:bold;font-family: 'Quicksand', sans-serif;}
.contact a:hover{ text-decoration: none;}
/*******************************************************************************************************************
*  Top Nav                                                                                          
*******************************************************************************************************************/

/* ------------------------------------------
  NAVIGATION STYLES
  (+ responsive-nav.css file is loaded in the <head>)
--------------------------------------------- */

.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

nav select{ display:none;}
.nav-collapse,
.nav-collapse * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: auto;
  float: right;
  margin:0px 0 0 0;
  font-family: 'News Cycle', sans-serif;
  font-size:1.15em;
  font-weight: normal;
}

.nav-collapse li {
  float: left;
display: inline-block;
  padding: 0.7em 1.0em;
  text-transform:uppercase;

}
.nav-collapse li:last-child{ padding:0.7em 0 0 1.0em;}


.nav-collapse a {
  color: #868686;
  text-decoration: none;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid white;
  padding: 0.7em 0.1em;
  float: right;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.nav-collapse a:hover {
	color:#000;}
.nav-collapse li.current a {color:#000; }

#nav>li>a.current, #nav>li.current>a{color:#000;}

.nav-collapse ul ul a {
  background: #ca3716;
  padding-left: 2em;
}


/*******************************************************************************************************************
* Brands                                                                                           
*******************************************************************************************************************/
.brands { padding:25px 0}
.brands ul{margin: 0px;text-align: center;}
.brands ul li{    display: inline; padding:0}
.brands ul li img{ padding:7px 5px}

/*******************************************************************************************************************
* Footer                                                                                           
*******************************************************************************************************************/

#footer {  text-decoration:none; font-size:12px; margin:0 auto; padding:10px 0 0 0 ; border-top:4px double #e0e0e0; }
#footer p { padding:15px 0; text-align:left;padding:0; }
#footer a:hover{ color:#9A9EA1; text-decoration:none;}
.social { font-size:2.5em; text-align:right; float:right; padding:0 10px; letter-spacing:0.2em;}


/* ----------------------------------------------------------------
    Form
-----------------------------------------------------------------*/

#responsive-form{
	margin:10px 0 10px 0;
	max-width:80%;
}
.hidden{
	display:none;
}

/* ----------------------------------------------------------------
    Label, select, text area
-----------------------------------------------------------------*/

label {
	display: inline-block;
	margin-bottom: 5px;
}

select { min-height: inherit !important;
 padding: 5px;
   font-size: 12px;
   line-height: 1;
   border: #666 1px solid;
   border-radius: 0;
   height: 34px; 
   }
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea{
	width:100%;
	
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea {
    display: block;
	background: #FFF;
	padding: 7px;
    margin: 0px 0 10px 0;
	border: 1px solid #868686;
    border-top-width: 2px;
	outline: 0;
    color: #666;
	border-radius:0px;
	font-family: Arial, Helvetica, sans-serif
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;

}

input[type="checkbox"],
input[type="radio"] {
    display: inline-block;
    position: relative;
    top: 2px;
}

textarea { 
	height: 150px;
	line-height: 150%;
	font-family: Arial, Helvetica, sans-serif

}

textarea.short-textarea { height: 80px; }

input[type="text"]:active,
input[type="password"]:active,
input[type="email"]:active,
input[type="number"]:active,
textarea:active,
select:active,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus { border-color: #CCC; }

label.error {
    display: block;
    font-style: italic;
    font-weight: normal;
    color: #BD091B;
    margin-bottom: 15px;
}

input.error,
textarea.error,
select.error { border-color: #BD091B !important; }

.captcha{
	border: 1px solid #868686;
	 display: block;
    margin: 10px 0 10px 0;
	outline: 0;
	border-radius:0px;
}
/* ----------------------------------------------------------------
    Buttons
-----------------------------------------------------------------*/

.btn {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

  *zoom: 1;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #333333;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #e6e6e6;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  border: 1px solid #cccccc;
  *border: 0;
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  *margin-left: .3em;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  color: #333333;
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
}
.btn:active,
.btn.active {
  background-color: #cccccc \9;
}
.btn:first-child {
  *margin-left: 0;
}
.btn:hover,
.btn:focus {
  color: #333333;
  text-decoration: none;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
}
.btn:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn.active,
.btn:active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
}
.btn.disabled,
.btn[disabled] {
  cursor: default;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.btn-large {
  padding: 11px 19px;
  font-size: 17.5px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
  margin-top: 4px;
}
.btn-small {
  padding: 2px 10px;
  font-size: 11.9px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
  margin-top: 0;
}
.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
  margin-top: -1px;
}
.btn-mini {
  padding: 0 6px;
  font-size: 10.5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.btn-block {
  display: block;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* ----------------------------------------------------------------
    Alert Messages
-----------------------------------------------------------------*/

.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border: 1px solid #fbeed5;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.alert,
.alert h4 {
  color: #c09853;
}
.alert h4 {
  margin: 0;
}
.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 20px;
}
.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #468847;
}
.alert-success h4 {
  color: #468847;
}
.alert-error
{
  background-color: #FFC4C4;
  border-color: #eed3d7;
  color: #333;
}
.alert-error h4,
.alert-error a {
  color: #000;
}
.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #3a87ad;
}
.alert-info h4 {
  color: #3a87ad;
}
.alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
}
.alert-block > p,
.alert-block > ul {
  margin-bottom: 0;
}
.alert-block p + p {
  margin-top: 5px;
}
.close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}
.close:hover,
.close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  filter: alpha(opacity=40);
}
button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}


/*******************************************************************************************************************
*  Slider                                                                                           
*******************************************************************************************************************/

	.container{ margin:0 0 20px 0;}
    #slides .slidesjs-navigation {
      margin-top:5px;

    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      background-image: url(../images/btns-next-prev.png);
      background-repeat: no-repeat;
      display:block;
      width:12px;
      height:18px;
      overflow: hidden;
      text-indent: -9999px;
      float: left;
      margin-right:5px;
    }

    a.slidesjs-next {
      margin-right:10px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    a.slidesjs-play {
      width:15px;
      background-position: -25px 0;
    }

    a:hover.slidesjs-play {
      background-position: -25px -18px;
    }

    a.slidesjs-stop {
      width:18px;
      background-position: -41px 0;
    }

    a:hover.slidesjs-stop {
      background-position: -41px -18px;
    }

    .slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(../images/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }

    .navbar {
      overflow: hidden
    }

/*******************************************************************************************************************
*  Tooltips                                                                                          
*******************************************************************************************************************/



/*******************************************************************************************************************
*  Image Hover effects                                                                                         
*******************************************************************************************************************/
	
span.roll {
	background:url(../images/zoom-small.png) center -20px no-repeat;
	height: 100%;
	position: absolute;
	width:100%;
	z-index: 10;	
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px  #000;
	box-shadow: 0px 0px 4px  #000; 
	   -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
}	
span.roll:hover{
		background:url(../images/zoom-small.png) center center no-repeat #000;

}

/*******************************************************************************************************************
*  Ligthbox                                                                                       
*******************************************************************************************************************/

		#imagelightbox
		{
			cursor: pointer;
			position: fixed;
			z-index: 10000;

			-ms-touch-action: none;
			touch-action: none;

			-webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
			-moz-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
			box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
		}


		/* WITH ACTIVITY INDICATION */

		#imagelightbox-loading,
		#imagelightbox-loading div
		{
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
		}
		#imagelightbox-loading
		{
			width: 2.5em; /* 40 */
			height: 2.5em; /* 40 */
			background-color: #fff;
			background-color: rgba( 255, 255, 255, .9 );
			position: fixed;
			z-index: 10003;
			top: 50%;
			left: 50%;
			padding: 0.625em; /* 10 */
			margin: -1.25em 0 0 -1.25em; /* 20 */
  			 background: url(../images/preloader.GIF) no-repeat center; 

		}
			
		



		/* WITH OVERLAY */

		#imagelightbox-overlay
		{
			background-color: #fff;
			background-color: rgba( 255, 255, 255, .9 );
			position: fixed;
			z-index: 9998;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}


		/* WITH "CLOSE" BUTTON */

		#imagelightbox-close
		{
			width: 2.5em; /* 40 */
			height: 2.5em; /* 40 */
			text-align: left;
			text-indent: -9999px;
			background-color: #666;
			position: fixed;
			z-index: 10002;
			top: 2.5em; /* 40 */
			right: 2.5em; /* 40 */

			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;

			-webkit-transition: color .3s ease;
			-moz-transition: color .3s ease;
			-ms-transition: color .3s ease;
			-o-transition: color .3s ease;
			transition: color .3s ease;
		}
			#imagelightbox-close:hover
			{
				background-color: #111;
			}
			#imagelightbox-close:before,
			#imagelightbox-close:after
			{
				width: 2px;
				background-color: #fff;
				content: '';
				position: absolute;
				top: 20%;
				bottom: 20%;
				left: 50%;
				margin-left: -1px;
			}
			#imagelightbox-close:before
			{
				-webkit-transform: rotate( 45deg );
				-moz-transform: rotate( 45deg );
				-ms-transform: rotate( 45deg );
				-o-transform: rotate( 45deg );
				transform: rotate( 45deg );
			}
			#imagelightbox-close:after
			{
				-webkit-transform: rotate( -45deg );
				-moz-transform: rotate( -45deg );
				-ms-transform: rotate( -45deg );
				-o-transform: rotate( -45deg );
				transform: rotate( -45deg );
			}


		/* WITH CAPTION */

		#imagelightbox-caption
		{
			text-align: center;
			color: #fff;
			background-color: #666;
			position: fixed;
			z-index: 10001;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 0.625em; /* 10 */
		}


		/* WITH NAVIGATION */

		#imagelightbox-nav
		{
			background-color: #444;
			background-color: rgba( 0, 0, 0, .5 );
			position: fixed;
			z-index: 10001;
			left: 50%;
			bottom: 3.75em; /* 60 */
			padding: 0.313em; /* 5 */

			-webkit-transform: translateX( -50% );
			-moz-transform: translateX( -50% );
			-ms-transform: translateX( -50% );
			-o-transform: translateX( -50% );
			transform: translateX( -50% );

			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
		}
			#imagelightbox-nav a
			{
				width: 1em; /* 20 */
				height: 1em; /* 20 */
				border: 1px solid #fff;
				display: inline-block;
				margin: 0 0.313em; /* 5 */

				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
			}
			#imagelightbox-nav a.active
			{
				background-color: #fff;
			}

	#imagelightbox-loading,
	#imagelightbox-overlay,
	#imagelightbox-close,
	#imagelightbox-caption,
	#imagelightbox-nav
	{
		-webkit-animation: fade-in .25s linear;
		-moz-animation: fade-in .25s linear;
		-o-animation: fade-in .25s linear;
		animation: fade-in .25s linear;
	}
		@-webkit-keyframes fade-in
		{
			from	{ opacity: 0; }
			to		{ opacity: 1; }
		}
		@-moz-keyframes fade-in
		{
			from	{ opacity: 0; }
			to		{ opacity: 1; }
		}
		@-o-keyframes fade-in
		{
			from	{ opacity: 0; }
			to		{ opacity: 1; }
		}
		@keyframes fade-in
		{
			from	{ opacity: 0; }
			to		{ opacity: 1; }
		}

	@media only screen and (max-width: 41.250em) /* 660 */
	{
		#container
		{
			width: 100%;
		}
		#imagelightbox-close
		{
			top: 1.25em; /* 20 */
			right: 1.25em; /* 20 */
		}
		#imagelightbox-nav
		{
			bottom: 1.25em; /* 20 */
		}
	}

/*******************************************************************************************************************
*  Responsive                                                                                          
*******************************************************************************************************************/



@media only screen and (min-width: 991px) and (max-width: 1122px) {
body {padding: 0px;}
#page { width:940px; }
.contact{ width:450px; padding-top:10px;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
#page { padding:10px 20px; width:724px;}
.container {        width: 724px      }
.logo img {max-width:230px;}
.contact{ width:400px; padding-top:0px;}
.nav-collapse li {
float: left;
display: inline-block;
padding: 0.2em 0.3em;
text-transform: uppercase;
}
.nav-collapse li:last-child{ padding:0.2em 0 0 0.3em;}

.brands ul li{    display: inline; padding:0 10px}


}


@media only screen and (min-width: 480px) and (max-width: 767px) {
#page { padding:10px 20px; width:460px;}

.flex_10,.flex_20,.flex_25,.flex_33,.flex_40,.flex_50,.flex_66,.flex_75,.flex_80,.flex_90{
	width:47%;
}
.flex_60, .flex_100 {		width: 100%;}
.flex_25{	margin-left:0px;}

.last{ float:left;}
#header{ height:230px;}
.contact{ width:100%; padding-top:10px;font-size: 1.4em;text-align: center;}
.logo { padding: 0; margin:0 auto; width:100%; float:none; text-align:center;}
.logo img {max-width:480px;}

 .container {        width: auto      }
.sf-menu{ display:none;}
nav select {display:block;}
.nav-collapse, .nav-collapse ul{ float:left; width:100%; margin:5px 0;}

}


@media only screen and (min-width: 320px) and (max-width: 479px) {
	body {padding: 0px 0;}
#page { padding:10px 20px; width:90%; margin: 0 auto;}
.contact{ width:100%; padding-top:10px;font-size: 1.4em;text-align: center;}
.logo { padding: 0; margin:0 auto; width:100%; float:none; text-align:center;}
.logo img {max-width:250px;}

.brands ul li {display: inline-block;}
.flex_10,.flex_20,.flex_25,.flex_33,.flex_40,.flex_50,.flex_66,.flex_75,.flex_80,.flex_90{	width:100%; margin-bottom:20px;}
.flex_60, .flex_100 {		width: 100%;}
.flex_25{	margin-left:0px;
}
.last{ float:left;}
 .container {        width: auto      }
.sf-menu{ display:none;}
nav select {display:block;}
.nav-collapse, .nav-collapse ul{ float:left; width:100%; margin:5px 0;}
#responsive-form{	max-width:95%;}
}