/* =============================================================================
   webfonts
   ========================================================================== */


@font-face {
    font-family: 'light';
    src: url('/app_fonts/proximanova-light-webfont.eot');
    src: url('/app_fonts/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/app_fonts/proximanova-light-webfont.woff') format('woff'),
         url('/app_fonts/proximanova-light-webfont.ttf') format('truetype'),
         url('/app_fonts/proximanova-light-webfont.svg#light') format('svg');
    font-weight: normal;
    font-style: normal;

}
@media screen and (-webkit-min-device-pixel-ratio:0) 
{
	@font-face {
	font-family: 'light';
	src: url('/app_fonts/proximanova-light-webfont.svg#light') format('svg');
    font-weight: normal;
    font-style: normal;
	}
}



@font-face {
    font-family: 'regular';
    src: url('/app_fonts/proximanova-regular-webfont.eot');
    src: url('/app_fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/app_fonts/proximanova-regular-webfont.woff') format('woff'),
         url('/app_fonts/proximanova-regular-webfont.ttf') format('truetype'),
         url('/app_fonts/proximanova-regular-webfont.svg#regular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@media screen and (-webkit-min-device-pixel-ratio:0) 
{
	@font-face {
	font-family: 'regular';
	src: url('/app_fonts/proximanova-regular-webfont.svg#regular') format('svg');
    font-weight: normal;
    font-style: normal;
	}
}



@font-face {
    font-family: 'bold';
    src: url('/app_fonts/proximanova-extrabold.eot');
    src: url('/app_fonts/proximanova-extrabold.eot?#iefix') format('embedded-opentype'),
         url('/app_fonts/proximanova-extrabold.woff') format('woff'),
         url('/app_fonts/proximanova-extrabold.ttf') format('truetype'),
         url('/app_fonts/proximanova-extrabold.svg#bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
	@font-face {
	font-family: 'bold';
	src: url('/app_fonts/proximanova-extrabold.svg#bold') format('svg');
	font-weight: normal;
    font-style: normal;
	}
}













body{ 
font:normal normal normal 100%/1.4 Helvetica, Arial, sans-serif;
background-color:#26211e;
background-image:url(/app_images/bgs/texture-dark-large.jpg);
background-repeat:repeat-y;
font-family:"regular";
color:#ffffff;

}



p {margin:0.5em auto 0.5em auto;}
p.sub {font-size:75%; line-height:1.6em;}
article p {width:100%;}
hr {width:100%; margin:20% auto;border-top-style:dotted; border-width:2px; border-color:#929497; border-color:rgba(146,148,151,0.5);}
strong {font-weight:normal;font-family:"bold";}
ul li {list-style-type:none;}
.altcolor {color:#a87c54;}
.altcolor1 {color:#be9e82;}
.altcolor2 {color:#cccccc;}
.altcolor3 {color:#252525;}
.uppercase {text-transform:uppercase;}
.forceleft {text-align:left;}
.nopad {padding:0;}
.nopad-vertical {padding-top:0; padding-bottom:0;}


a { color: #ffffff; text-decoration:none;  border-bottom:1px dotted #FFF;}
a:visited { color: #ffffff; }
a:hover { color: #ffffff; text-decoration:none; border-bottom:none; }
a:focus { outline: none; }
a:hover, a:active {outline: 0;}
a.noborder {border:none;}

h1, h2, h3 {line-height:1.2em;}
h4, h5, h6 {line-height:1.2em;}
h1 {font-size:1.8em; font-weight:normal; font-family:"light";}
h2 {font-size:1.7em; font-weight:normal; font-family:"light";}
h3 {font-size:1.5em;font-weight:normal; font-family:"light";}
h4 {font-size:1.4em;font-weight:normal; font-family:"regular";}
h5 {font-size:1.2em;font-weight:normal; font-family:"regular";}
h6 {font-size:1.1em;font-weight:normal; font-family:"regular";}

h1 strong, h2 strong {font-weight:normal;font-family:"bold";}
h3 strong, h4 strong {font-weight:normal;font-family:"bold";}
h5 strong, h6 strong {font-weight:normal;font-family:"bold";}


/************* SVG **************/
a#logo, a#logo2 {border-bottom:none; }
nav .logo1, header .logo1 {width:40px; height:40px;  }
nav .logo1 path, header .logo1 path {fill: #c8c8c8; fill: rgba(200,200,200,1.0);}
nav .logo1:hover, header .logo1:hover {filter: none;}
#logotype {width:160px; height:40px;}
#logotype path {fill: #ffffff; fill: rgba(255,255,255,1.0); }

a#nav-activate {width:20px; height:20px; padding:10px; background-color:#000000; float:right; display:block; margin-top:10px;
/* background-color:#a77c54; background-color:rgba(167,124,84,1.0);-webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; */}
svg#nav-activate rect {fill:#ffffff;}
a#nav-activate svg {}

#mobilenav {width:14px; height:40px;padding:0px;}
#mobilenav polygon {fill: #000000; fill: rgba(0,0,0,1);}

#plussym {fill: #222222; fill: rgba(255,255,255,0.09);}


a#logo {display:inline-block; padding-right:5%; float:left; padding:0;}
#vivlogo {width:36px; height:36px; padding:2px; background-color:#000000;margin-top:10px; }
#logo-frost2 g.frost path {fill:#ffffff;}
#logo-frost2 g.wear path {fill:#ffffff;}
#logo-frost2 g.mark path {fill:#ffffff;}
a#title p { line-height:1em; margin-top:10px; color:#c8c8c8; color:rgba(200,200,200,1.0);}

a#close, a#top {color: #000000; color: rgba(0,0,0,0.8); width:40px; height:40px; display:block; border-bottom:none; margin-top:0px; font-size:80%; line-height:42px; text-align:center; font-family:"bold";  background-color:#a87c54;  -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%;}
a#close {background-color:#ff0000;}
a#top {position:fixed; bottom:2em; right:10%; margin-right:-20px; z-index:3001;}

header {padding:0; color:#cccccc; z-index:2000; position:relative; width:100%; -webkit-transform: translateZ(0);-o-transform: translateZ(0);}
main {position:relative; z-index:1000;}

nav { padding:10px 5% 10px 5%;}
nav hr {display:none;}
nav p {line-height:1.2em; margin-top:1.7em; margin-bottom:1.7em;}
nav p.cart a { display:inline; }
p.cart { display:inline-block; margin-left:5%; float:left; margin-top:22px; margin-bottom:0;}
nav a.activeLink {color:#a87c54;}
div.slidenav {display:none; clear:both; padding-top:10px;}
div.slidenav br {display:none;}

div#cart {position:fixed; top:1em; left:0%; margin:0px; width:9%; z-index:3001; padding:0 2%; text-align:center;}


/* .fullnav {display:none;} */
nav a#logo2, nav a#close, header a {display:block; border-bottom:none; margin:0px auto; }
nav a#close, header a:hover {font-style:normal; border:none; text-decoration:none;}
	
article {width:80%; padding-left:5%; padding-right:15%; padding-top:4em; padding-bottom:4em; background-repeat:no-repeat;background-position: center center;  }
div.contain {position:relative;}
article img {margin-top:2em; margin-bottom:2em; }
article hr {margin:2em auto; clear:both;}



article.threecol section { margin-bottom:3em;}
article.threecol section:last-child { margin-bottom:0;}

article.fullscreen {height:100%; min-height:100%; padding-top:0; padding-bottom:0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; *zoom: 1; }
article.fullscreen div.contain {height:100%; min-height:100%; }
article.fullscreen section { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width:100%;}

article .inpage-bg {position: absolute; width:100%; height:100%;}
article .resize * {width:auto; height:70%; margin-top:10%;} /* inpage image control when a background */
article .resize1 * {width:45%; height:auto;} /* inpage image control */
article .resize2 * {width:45%; height:auto; margin:2em 0;} /* inpage image control */
article .smallimage * {width:300px; height:300px; margin:3em 0;}
.trans {opacity:0.05;}



/* custom article element styling */
article.odd {background-color:rgba(0,0,0,0.4);}
article.even { background-color:rgba(0,0,0,0.6);}
article.light {background-color:#ffffff; color:#252525; background-image: url(/app_images/bgs/texture-white.jpg); background-repeat:repeat;}
article.light a, article.light:visited {color:#252525; border-color:#252525;}
article.light a:hover {color:#a87c54;}
article.brown {background-color:#a87c54; background-image:url(/app_images/bgs/texture-gold.jpg); background-repeat:repeat;}
article.black {background-color:#121212; color:#a87c54;}
article.black a:hover {color:#a87c54;}
article.wood {background-color:#40322f; background-image:url(/app_images/bgs/wood3.jpg); /*background-size:cover;*/ background-position:0% 0%; background-repeat:repeat;}

article.product section img, img.rounded {-webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%;}
article.product section div.ordering p {color:#a87c54;}
article.product section div.info {margin-bottom:2em;}

span.owl-carousel article {min-height:350px; display: -webkit-box; display: -webkit-flex; display:flex; -webkit-align-items:flex-end; align-items:flex-end;}
span.owl-carousel article {background-size:auto 100% ; background-position:50% 0%;}

article.human {background-image:url(/app_images/bgs/humanicon.png); background-position:50% 50%; background-color:rgba(20,20,20,0.8);}
article.human div.contain {/*background:url(/app_images/bgs/humanbg.png); background-position:50% 50%; background-repeat:no-repeat; background-size:100% auto;*/}

article.grid {width:90%; padding-right:5%;}
article.grid section { width:100%; margin-right:0%; float:none; border-bottom:1px dotted #fff;}
article.grid section img { display:none;}

body.contact article img {margin:0;}



/* bulleted list with inline images */
ul.bulleted li {margin-top:1em;}
ul.bulleted li img {width:5%; margin:0; margin-right:20px;}




/* ordering and forms */
div.ordering {margin-top:1em;}
select, input, div.ordering select, div.ordering input[type=submit] {padding:5px; font-family:"regular";}
select option, div.ordering select option {font-family:"regular"; padding:3px;}
select option:first-child, div.ordering select option:first-child {font-family:"bold";}
input[type=submit], textarea, div.ordering input[type=submit] {padding:7px;}
article.product.other section h1 {font-size:1.5em;}
img.loading {display:inline-block; margin-bottom:0; margin-top:0;}
div.ordering select, div.ordering input {margin:5px;}

label h3 {margin:1em 0 0.5em 0;}
body.contact select, body.contact textarea, body.shop textarea {width:90%; margin-bottom:1em;}
body.contact input[type=text], body.shop input[type=text] {width:90%; margin-bottom:1em;}
body.shop textarea, body.shop input[type=text] {width:80%; margin-bottom:1em;}
div.ordering span, span.validationitem { background-color:#F00; color:#FFF !important; font-family:"bold"; display:inline-block; padding:10px; line-height:20px; width:20px; height:20px; text-align:center;-webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%;}





/* video */
.video-bg {
			position: fixed;
			right: 0;
			bottom: 0;
			width: auto;
			min-width: 100%;
			height: auto;
			min-height: 100%;
			z-index: -100;
			background-image:url(/app_video/desk2.png);
			background-repeat:no-repeat;
			background-position:100% 100%;
			background-size: cover;
}
span.dots { position:fixed; top:0; left:0;
			width: auto;
			min-width: 100%;
			height: auto;
			min-height: 100%;
			z-index: -99;
			background-image:url(/app_images/dots.png);
}

/* google map */
div.googlemap {background-color:#111111 !important; width:100%; height:100%;}
#map-canvas { width:100%; min-height:500px;}







footer { width:80%; padding-left:5%; padding-right:15%; padding-top:3em; padding-bottom:4em; position:relative; z-index:1001; float:right; }
footer section {vertical-align:top; margin-bottom:1em; }
footer aside {clear: both;}
footer .logo1 {width:40px; height:40px;}
footer .logo1 path {fill: #ffffff; fill: rgba(255,255,255,0.1);}
footer h5 { font-family:"light";}
footer p, footer p * {color: rgba(255,255,255,0.8);}
footer ul { margin-top:1em;}
footer ul li {font-size:80%; text-transform:uppercase;}

div#strip {border-top:3px solid #ffffff; display:block; clear:both; 
background-image:url(/app_images/bgs/texture-gold.jpg); height:40px; line-height:10px;}

div.sharethis {margin-top:10px; min-height:40px; margin-bottom:20px;}
span.stButton {margin:0px 0.3em 5px 0em;}
#sthoverbuttons {top:45% !important;}


table thead {border-bottom:1px solid #ffffff;}
table th {font-size:80%; text-transform:uppercase; font-weight:normal;}
table th, table td {padding:5px 10px;}

#phlCheckout table {max-width:900px; margin-top:20px;}
#phlCheckout table tr:first-child {border-bottom:1px solid #ffffff; text-transform:uppercase;  font-size:80%;}
#phlCheckout table td {width:auto !important; font-weight:normal !important; padding-top:10px;}
#phlCheckout table h5 {font-size:120%; line-height:1.2em; font-family:"bold";}



@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(-85px);
    -moz-transform: translateY(-85px);
    -ms-transform: translateY(-85px);
    transform: translateY(-85px);
  }
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(-85px);
    -moz-transform: translateY(-85px);
    -ms-transform: translateY(-85px);
    transform: translateY(-85px);
  }
}
@-ms-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(-85px);
    -moz-transform: translateY(-85px);
    -ms-transform: translateY(-85px);
    transform: translateY(-85px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  
  20% {
    -webkit-transform: translateY(-85px);
    -moz-transform: translateY(-85px);
    -ms-transform: translateY(-85px);
    transform: translateY(-85px);
  }
}


  
  .bounce {
  -webkit-animation: bounce 5s infinite;
  -moz-animation: bounce 5s infinite;
  -ms-animation: bounce 5s infinite;
  animation: bounce 5s infinite;
}
  












/************************************************************************************
large phone and smaller 
*************************************************************************************/
@media screen and (min-width:450px) {
article.grid section { width:41%; margin-right:7%; float:left; border:none;}
article.grid section img {display:block;}	
}






@media screen and (min-width:1000px) {
a#top {position:fixed; bottom:6em; right:4%;  z-index:3001;}	
#vivlogo {min-width:75px; width:75px; height: auto; padding:0px; background:none;margin-top:0px; }	
.fullnav {display:inline;}

a#logo {display:block; padding-right:0%; float:none;}
a#nav-activate {display:none;}  /* hide for desktop */

h1 {font-size:2.4em;}
h2 {font-size:2em;}
h3 {font-size:1.7em;}
h4 {font-size:1.5em;}
h5 {font-size:1.3em;}
h6 {font-size:1.2em;}

header {padding:2em 0; width:13%; min-height:100%; height:100%; float:left;}
main {width:87%; float:right;}

nav { padding:0 20%;  text-align:center; font-size:100%;}
nav hr {margin-bottom:2em; display:block;}
nav p.cart a { display:block;}
p.cart {  display:block; margin-left:0%; float:none;}
div.slidenav {display:block; padding-top:0;}
div.slidenav br {display:inline-block;}


span.owl-carousel article {min-height:540px;  height:540px;}
span.owl-carousel article {background-size:cover;}
span.owl-carousel article h1,
span.owl-carousel article h2 {margin-top:2em;}
span.owl-carousel article h3 {margin-top:0.2em; margin-bottom:0em;}

span.owl-carousel article {background-position:50% 50%;}

article.masthead {min-height:250px;}
article.masthead p {width:70%; margin-left:0;}

body.home article.masthead, body.about article.masthead , body.wholesale article.masthead, body.locations article.masthead {position:absolute; z-index:4000;}
body.shop article.masthead {background-image:url(/app_images/bgs/shop.jpg); background-position:center; background-repeat:no-repeat;}
/*body.about article.masthead {background-image:url(/app_images/bgs/about.jpg); background-position:center; background-repeat:no-repeat;}*/

article.threecol section, footer section {width:29%; margin-right:4%; float:left; margin-bottom:0;}
article.threecol section:last-child, footer section:last-child {margin-right:0%;}

article.product section div.ordering {width:70%; float:left; margin-bottom:2em;}
article.product section img.shopimage {width:25%; float:right; margin-left:2%; margin-top:0em; margin-bottom:2em;}
article.product.other section div.ordering {width:80%; float:right; margin-bottom:2em;}
article.product.other section img.shopimage {width:15%; float:left; margin-left:0%; margin-top:0em; margin-bottom:2em; margin-right:2%;}

article.grid section {width:25%;margin-right:7%; float:left;clear:none;}
article.grid section img { float:none; width:auto; margin-right:0; margin-top:2em; margin-bottom:2em; }
article.grid section p { float:none; width:auto;}

article aside p {width:85%; margin-left:0; margin-right:0;}

body.contact select, body.contact textarea {width:60%;}
body.contact input[type=text] {width:60%;}
body.shop textarea, body.shop input[type=text] {width:70%; margin-bottom:1em;}


}





@media screen and (min-width:1650px) {
article.product section {width:45%; margin-right:5%; float:left;}	
article.product section img.shopimage {margin-top:1em;}
article.product.other section div.ordering {margin-bottom:2em; margin-top:0em;}

article.grid section {width:15%;margin-right:5%; float:left;}


}