/* formerly screen.css */

/* Custom, iPhone Retina */ 
	
@media only screen and (min-width : 300px) and (max-width : 880px) { 

		.wrapper {
			width: 100%;
			margin: 0;
			padding: 0;
			box-shadow: none;
			background: none;
		}
		header {
			padding-left: 0;
			padding-right: 0;
			margin-right: 0;
		}
		#main {
			padding-left: 0;
			padding-right: 0;
		}
    
    
    	#header-bar li#bar-phone {
			cursor: pointer;
			position: absolute;
			right: 0px;
			height: 48px;
			width: 48px;
			overflow: hidden;
			margin: 0;
			padding: 0;
			color: rgba(255,255,255,.01);
			background: url('../images/screen/icon-phone.svg') center center no-repeat;
		}
		#header-bar li#bar-phone a {
			color: rgba(255,255,255,.01);
		}
		#header-bar li#bar-phone:focus {
			background: #004D96 url('../images/screen/icon-phone.svg') center center no-repeat;
		}

}

@media only screen and (min-width : 300px) and (max-width : 719px) {
	
		#hero-rotator {
			height: 250px;
			margin-bottom: 1px;
		}
		[id^="carousel"],
		[id^="carousel"] .buttons,
		[id^="carousel"] .viewport,
		[id^="carousel"] .overview li[id|="rotator"] {
			height: 250px;
		}
		[id^="carousel"] .next {
			width: 48px;
			background: url('../images/icons/bit-rotator-arrows.png') 24px center no-repeat;
			background-size: 48px 48px;
		}
		[id^="carousel"] .prev {
			width: 48px;
			background: url('../images/icons/bit-rotator-arrows.png') -24px center no-repeat;
			background-size: 48px 48px;
		}
		[id^="carousel"] .overview li[id|="rotator"] {
			box-sizing: border-box;
			padding: 16px 20px;
			overflow: hidden;
		}
		[id^="carousel"] li[id|="rotator"] [class^="button-"] {
			height: 84px;
			line-height: 0.9em;
			font-size: 18px;
			width: 84px;
			border-radius: 42px;
			text-align: center;
			min-width: initial; min-width: auto;
			padding: 16px 0 0 0;
			font-weight: 600;
			display: block;
		}
		[id^="carousel"] li[id|="rotator"] [class^="button-"]:after {
			right: 0px;
			bottom: -4px;
			width: 100%;
			top: initial; top: auto;
		}
		[id^="carousel"] li[id|="rotator"] [class^="button-"]:before,
		[id^="carousel"] li[id|="rotator"] p [class^="button-"]:before {
			width: 420px;
			height: 280px;
		}
		[id^="carousel"] #rotator-home3d {
			background: url('../images/heroes/home2.png') right center no-repeat;
			background-size: cover;
		}
		#rotator-home3d p {
			padding: 0;
			text-transform: none;
			font-size: 20px;
			width: 160px;
		}
		#rotator-home3d p strong {
			font-size: 24px;
			display: inline;
		}
		[id^="carousel"] #rotator-home3d p [class|="button"] {
			margin-top: 18px;
			margin-left: 24px;
		}
		[id^="carousel"] #rotator-home3d p [class^="button-"]:before {
			top: -112px;
			left: -48px;
		}
		[id^="carousel"] #rotator-active {
			background: url('../images/heroes/rotator_active.jpg') left center no-repeat;
			background-size: cover;
		}
		[id^="carousel"] #rotator-active p {
			width: 280px;
			padding: 48px 0 0 56px;
		}
		[id^="carousel"] #rotator-active p [class|="button"] {
			margin-top: 20px;
		}
		[id^="carousel"] #rotator-introducing {
			background: url('../images/heroes/home3.png') right center no-repeat;
			background-size: cover;
		}
		[id^="carousel"] #rotator-introducing p,
		[id^="carousel"] #rotator-introducing p:first-child {
			padding: 36px 0 0 12px;
			font-size: 17px;
			text-transform: none;
			font-weight: 100;
			line-height: 1.2em;
			width: 170px;
			text-shadow: 0 0 8px rgba(0,0,0,.6);
		}
		[id^="carousel"] #rotator-introducing p strong,
		[id^="carousel"] #rotator-introducing p:first-child strong {
			font-size: 22px;
			font-weight: 500;
			display: inline;
			line-height: 0.8em;
			letter-spacing: -.04em;
		}
		[id^="carousel"] #rotator-shower {
			background: url('../images/heroes/home5.png') right center no-repeat;
			background-size: cover;
		}
		[id^="carousel"] #rotator-shower p, [id^="carousel"] #rotator-shower p:first-child, [id^="carousel"] #rotator-shower ul, [id^="carousel"] #rotator-shower [class^="button-"] {
			position: static;
			top: initial; top: auto;
			left: initial; left: auto;
		}
		[id^="carousel"] #rotator-shower p, [id^="carousel"] #rotator-shower p:first-child, [id^="carousel"] #rotator-shower li {
			font-size: 16px;
			text-transform: none;
			font-weight: 400;
			line-height: 1.2em;
			width: 280px;
		}
		[id^="carousel"] #rotator-shower p, 
		[id^="carousel"] #rotator-shower ul {
			margin-left: 8px;
		}
		[id^="carousel"] #rotator-shower p, 
		[id^="carousel"] #rotator-shower li {
			padding-top: 4px;
		}
		[id^="carousel"] #rotator-shower p:first-child {
			padding: 0 0 4px 0;
			margin: 0;
		}
		[id^="carousel"] #rotator-shower p:first-child strong {
			font-size: 21px;
			letter-spacing: -.03em;
			font-weight: 800;
			display: inline;
			white-space: nowrap;
		}
		[id^="carousel"] #rotator-shower [class^="button-"] {
			position: relative;
			margin-left: 48px;
		}
		[id^="carousel"] #rotator-shower [class^="button-"]:before {
			top: -162px;
			left: -72px;
		}
		[id^="carousel"] #rotator-cwbs {
			background:url('../images/heroes/home6.png') right center no-repeat;
		    background-size: 90%;	
		}
		[id^="carousel"] #rotator-cwbs .herotitle {
			margin: 28px 0 0 0;
			font-size: 20px;
		}
		[id^="carousel"] #rotator-cwbs p {
			margin: 8px 0;
			font-size: 12px;
		}
		/*.promo-home .drinking:after,
		.promo-home .aquaman:after,
		.promo-home .pwfs:after {
			bottom: 4px;
			left: 20px;
			width: 64px;
			height: 80px;
		}*/

}

@media only screen and (min-width : 480px) and (max-width : 719px) {
		[id^="carousel"] #rotator-shower {
			background: url('../images/heroes/rotator_shower_320.jpg') right -80px no-repeat;
			background-size: cover;
		}
}

@media only screen and (min-width : 720px) and (max-width : 880px) {
		
		#hero-rotator {
			margin-bottom: 1px;
		}
		[id^="carousel"] li[id|="rotator"] [class^="button-"] {
			height: 48px;
			line-height: 48px;
		}
		[id^="carousel"] #rotator-shower p, [id^="carousel"] #rotator-shower ul, [id^="carousel"] #rotator-shower p:first-child, [id^="carousel"] #rotator-shower [class^="button-"] {
			left: 50%;
		}
		[id^="carousel"] #rotator-cwbs {
			background: #092e3e url('../images/heroes/rotator_cwbs_320.jpg') right center no-repeat;
		    background-size: 60%;	
		}
		[id^="carousel"] #rotator-cwbs .herotitle {
		    margin: 1.6vw 0 0 48px;
    		width: 54vw;
		}
		[id^="carousel"] #rotator-cwbs .herotitle strong {
			display: inline;
		}
		[id^="carousel"] #rotator-cwbs .herocopy {
			font-size: 2.8vw;
    		width: 42vw;
    		margin: 1.6vw 0 0 48px;
		}
    
    
       footer .bar-end {
			height: initial; height: auto;
			padding-bottom: 24px;
		}
       footer .bar-end ul.foot-links {
			display: block;
			float: none;
			padding: 16px 4% 0 4%;
			column-count: 2;
			column-gap: 0;
			-moz-column-count: 2;
			-moz-column-gap: 0;
			-webkit-column-count: 2;
			-webkit-column-gap: 4px;
		}
		footer .bar-end ul.foot-links li {
			border: none;
			width: 100%;
			margin: 1% 0;
			padding: 0;
			display: inline-table;
			text-align: left;
			color: rgba(255,255,255,.4);
		}
		footer .bar-end .foot-links li:first-child {
			padding: 6px 4%;
			border: none;
			position: absolute;
			bottom: 0px;
			left: 0px;
			width: 92%;
			text-align: center;
		}
		footer .bar-end ul.foot-links li a {
			color: #fff;
			display: table-cell;
			padding: 0 4%;
			text-align: center;
			height: 48px;
			vertical-align: middle;
			font-size: 12px;
			box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset;
		}
		footer .bar-end .share-foot {
			display: block;
			padding: 16px 0;
			float: none;
			text-align: center;
			position: relative;
			width: initial; width: auto;
		}
		footer .share-foot li {
			padding: 0;
			display: inline;
		}
		footer .share-foot li a {
			height: 48px;
			width: 48px;		
			display: inline-block;
			margin: 0 8px;
		}
		footer .share-foot li a[href*="facebook"] {
			background: url('../images/icons/bit-social-white-32.svg') center 4px no-repeat;
			background-size: 36px 540px;
		}
		footer .share-foot li a[href*="twitter"] {
			background: url('../images/icons/bit-social-white-32.svg') center -68px no-repeat;
			background-size: 36px 540px;
		}
		footer .share-foot li a[href*="google"] {
			background: url('../images/icons/bit-social-white-32.svg') center -140px no-repeat;
			background-size: 36px 540px;
		}
		footer .share-foot li a[href*="pinterest"] {
			background: url('../images/icons/bit-social-white-32.svg') center -212px no-repeat;
			background-size: 36px 540px;
		}
		footer .share-foot li a[href*="instagram"] {
			background: url('../images/icons/bit-social-white-32.svg') center -284px no-repeat;
			background-size: 36px 540px;
		}
		footer .share-foot li a[href*="youtube"] {
			background: url('../images/icons/bit-social-white-32.svg') center -356px no-repeat;
			background-size: 36px 540px;
		}
		footer .share-foot li a[href*="linkedin"] {
			background: url('../images/icons/bit-social-white-32.svg') center -428px no-repeat;
			background-size: 36px 540px;
		}

}

@media only screen and (min-width : 300px) and (max-width : 880px) {
		header {
			margin: 0;
			padding: 0;
			height: 48px;
			text-align: center;
			font-size: 14px;
		}
		header > nav {
			position: initial;
			float: left;
			z-index: 120;
			cursor: pointer;
			/* top: 0px; */
			/* left: 0px; */
			width: 48px;
			height: 48px;
			display: inline-block;
		}

		div[id|="homecat"] {
			margin: 0 0 1px 0;
			width: 92%;
			padding: 66px 4% 22px 4%;
			float: none;
			height: 198px;
		}
		div[id|="homecat"].drinking {

		}
		div[id|="homecat"].shower {

		}
		div[id|="homecat"].whf {

		}
		div[id|="homecat"].cwf {
			background-size: cover;
		}
		div[id|="homecat"] img {
			right: 0px;
			height: initial; height: auto;
		}
		[class^="button-"]
		/*, input[class|="button"], button[class|="button"],
		[class|="product"] button.cart, [class|="button"].cart,
		[class|="product"] .button-inactive.cart, .button-inactive.cart, 
		.product-list .button-inactive, .fivecol .product-list .button-inactive,
		.fivecol .product-list button.cart*/ {
			height: 48px;
			line-height: 48px;
			font-size: 18px;
			letter-spacing: -.04em;
			min-width: 160px;
			padding: 0 48px 0 16px;
		}
		[class^="button-"]:after {
			position: absolute;
			right: 6%;
			content: '';
			background-size: cover; 
			background-size: 30px 600px;
			height: 48px;
			width: 26px;
			top: 0px;
		}
		.button-white:hover:after, .button-blue::after {
			content: '';
			background-size: cover; 
			background-size: 30px 600px;
		}
		.button-white::after, .button-blue:hover:after {
			content: '';
			background-size: cover;
			background-size: 30px 600px;
		}
	
}

@media only screen and (max-width : 479px) {
		
		[id^="carousel"] #rotator-active {
			background: url('../images/heroes/home4.png') -300px bottom no-repeat;
			background-size: cover;
		}
	/*	[id^="carousel"] #rotator-active:before {
			position: absolute;
			content: '';
			top: 0px;
			left: 0px;
			display: block;
			width: 100%;
			height: 48px;
			background: #092e3e url('../images/heroes/rotator_active.png') calc((100vw - 320px)/2) -15px no-repeat;
			background-size: 960px;
		}*/
		[id^="carousel"] #rotator-active p {
			width: initial; width: auto;
			padding: 48px 0 0 0;
			font-size: 8vw;
			text-align: center;
			text-shadow: 0 0 8px #000, 0 0 16px #000;
		}
		[id^="carousel"] #rotator-active p [class|="button"] {
			margin-top: 54px;
			float: right;
			box-shadow: 2px 1px 4px rgba(0,0,0,.4), 0 0 32px rgba(0,0,0,.6);
		}
		
}

 /*	 @media only screen and (min-width : 561px) and (max-width : 880px) {*/
@media only screen and (min-width : 590px) and (max-width : 880px) {

		header {
			font-size: 14px;
		}
		
	}

@media only screen and (min-width : 590px) and (max-width : 719px) {

		div[id|="homecat"] {
			width: 41.9%;
			height: 260px;
		}

}

@media only screen and (min-width : 720px) and (max-width : 880px) {

		div[id|="homecat"] {
			width: 29.2%;
			height: 260px;
			padding: 66px 2% 22px 2%;
		}
	
}


/*@media only screen and (min-width : 561px) and (max-width : 880px) {*/

@media only screen and (min-width : 300px) {
		header {
			font-size: 11px;
		}
		
		
}
	
@media only screen and (min-width : 319px) { 
		header {
			font-size: 14px;
		}
}

		/* CREATED BY CT */
		
		ul {
			margin: 0;
			padding: 0;
		}
		/*section {
			width: 100%;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		section * {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		} */
	
}