/* Global reset//////////////////////////////////////////////*/
/*DONT TOUCH///////////////////////////////////////////*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/*CURRENT-TOUCH THIS///////////////////////////////////////////*/

html,body{
	width:100%;
	height: 100%;
	margin: 0;
	padding: 0;
  -webkit-cursor: default;
  -khtml-cursor: default;
  -moz-cursor: default;
  -ms-user-cursor: default;
  -o-user-cursor: default;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -moz-text-decoration: none;
  -webkit-text-decoration: none;
  font-family: 'Monda', sans-serif;
  background-color: #fff;
/*	background-color: #999;  */
}

main{
	position: relative;
	display: block;
	width:100%;
	min-height: 0px;
    padding: 0;
    padding-bottom: 50px;
    margin: 0 auto;
    background-color: #fff;
}

header{
	position: fixed;
	width: 107%;
/*	width: 100%; */
	min-height: 0px;
	display: block;
	background: rgba(255, 255, 255, .8); 
/*	background: rgba(0, 34, 102, .7); */
/*    background: rgba(25, 25, 25, .5);    */
	z-index: 4;}

header nav{
	position: relative;
	width:625px;
  /*width:850px; */
	min-height: 0px;
	left: 70px;
	float: right;
 	margin:0 auto;
 /*	background-color: blue;   */
}

header nav a{
	position: relative;
	width:15.5%;
  /*width:13.75; */
	font-size: .85em;
	display: inline-block;
	vertical-align: top;
	padding: 15px 0px 10px 0px;
/*	padding: 10px 0px 10px 0px; */
	color: #949494;
 /* color: #fff;  */
 	list-style: none;
	text-decoration: none;
	text-align: center;
 /* background-color: red;  */
}

#button4{
	width:11.5%;
}

header nav a:hover{
	color:#000;
 /*	color:white;
	background-color: black; */
}

header nav a.nowactive {
	font-weight: bolder;
    color: #b20000;
}

/*header nav a:active {
    color: orange;
}*/


section{
	position: relative;
	display: block;
	width:1024px;
	min-height: 0px;
	margin: 0 auto;
	background-color: #fff;
	padding-top: 50px;
}

img{
	position: relative;
	width: 55%;
	display: block;
	margin:0 auto;}

h1,h2,p{font-family: 'Monda', sans-serif;}
h3,h4,{font-family: 'Oxygen Mono', sans-serif;}

.brandlogo{							/*  SMALLER 1  */
	position: relative;
	display: block;
	width:15%;       /*  25%;   */
	height: auto;
	margin: 0 auto;
	padding-top: 32px;    /*  50px;   */
}

/*BRANDS NAV /////// .brandlogo2 - 4  are new additions ///////////////*/

.brandlogo2{							/*  SMALLER 2  */
	position: relative;
	display: block;
	width:10%;       /*  25%;   */
	height: auto;
	margin: 0 auto;
	padding-top: 32px;    /*  50px;   */
}

.brandlogo3{							/*  BIGGER 1  */
	position: relative;
	display: block;
	width:20%;       /*  25%;   */
	height: auto;
	margin: 0 auto;
	padding-top: 32px;    /*  50px;   */
}

.brandlogo4{							/*  BIGGER 2  */
	position: relative;
	display: block;
	width:28%;       /*  25%;   */
	height: auto;
	margin: 0 auto;
	padding-top: 32px;    /*  50px;   */
}


.brandlogo5{							/*  BIGGER 2  */
	position: relative;
	display: block;
	width:37%;       /*  25%;   */
	height: auto;
	margin: 0 auto;
	padding-top: 32px;    /*  50px;   */
}

/*BRANDS NAV /////// .brandlogo2 - 4 are new additions ///////////////*/


h3{
	position: relative;
	display: block;
	width: 70%;
	margin: 0 auto;
  	font-size: 1.5em;
  	padding: 10px 0px 10px 0px;   /*  10px 0px 10px 0px; change? */
}

.about{
	position: relative;
	display: block;
	width: 70%;
	margin: 0 auto;
	min-height: 0px;
	line-height: 1.6em; 
 /* line-height: 1.5em;  */
 /*	padding-bottom: 50px; */
	padding-bottom: 27px;
}



.gapstop{	
	margin-top: -45px;
}

.copydeck{
	position: absolute;
	display: block;
	top:50%; 
	left:50%;
	width:65%;
/*	width:70%;  */
	min-height:0px;
	border-radius: 15px 55px;
/*	font-family: 'Fira Sans', sans-serif;   tried to change font of copydeck, no effect */
/*	background-color: rgba(139,0,0, .83); /* maroon */
/*	background-color: rgba(184,38,1, .93); /* red? */
    background-color: rgba(70,130,180, .95);   /* steelblue */
/*  background-color: rgba(161,178,116, .93); /* paler gold drk */
/*  background-color: rgba(161,178,122, .93); /* paler gold */
/*	background-color: rgba(139, 139, 139, .93);   */ 
	opacity:0;
	color: #fff;
	padding:50px;
  	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.copydeck h4{padding-bottom: 10px;}
.copydeck p{ line-height:20px;}
.copydeck:hover{ opacity:1;}

.copydeck{cursor: pointer;}


iframe{ 
	display: block;
	margin: 0 auto;
	border: 0;
	outline: 1px solid gray;
}

footer{
	position: relative;
	display: block;
	width:100%;
	min-height: 0px;
	text-align: center;
	background-color: #fff; 
/*/ background-color: #999;  /*/
}

footer img{
	position: relative;
	display: block;
	margin:0 auto;
	width:80px;
	padding-top: 20px;
	height:auto;
	padding-bottom: 10px;
}

footer div{
	position: relative;
	display: block;
/*	top:50%;*/ 
	left:50%;
	width:100%;
	min-height:0px;
  	-moz-transform: translate(-50%, 20%);
	-webkit-transform: translate(-50%, 20%);
	transform: translate(-50%, 20%);
}

footer p,
footer a{
	position: relative;
	display: block;
	text-align: center;
	text-decoration: none;
	color:black;
	margin:0;
	padding-bottom:10px;
}

.copyright{
	font-size: .85em;
	padding-bottom: 30px;
}

video{
	display: block;
/*	width:50%; */
	width:55%;
	margin: 0 auto;
}

/*.video_nonHD{
	display: block;
	width:40%; 
	margin: 0 auto;
}*/

.hugoaward {
    position: relative;
    display: block;
    margin: 0 auto;
   	padding-top: 20px;
   	width:20%;
}

.spread{ width:75%;
}

/*BRANDS NAV ///////matches side nav///but already open///////////////*/

.brands-nav{
	position: fixed;
	display: block;
	top:0px;
	padding-top: 50px;
	min-height:0px;
	width:115px;
/*	width:110px;  */
}

.brands-nav img{
	position: relative;
	display: block;
	width:45%;
	cursor: pointer;
}

.brands-nav span{
	position: relative;
	display: block;
	padding-top: 5px;
	font-size: 1.30em;
	text-indent: 22px;   
	color: #ffffff; 
/*  color: #999; 	 */
    font-weight:800;
}

.brands-nav a{
	display: block;
	width:100%;
	min-height: 0px;
	text-indent: 9px; 
	padding:10px;
	text-decoration: none;
	color: black;
	font-size: .9em;
	outline: none;
}

.brands-nav a:hover{
	color:white;
	background-color: black;
}

.brands-nav a:hover{ 
	cursor: pointer;

}
.brands-nav p {
  text-indent: 33px;
}

/*/  BELOW IS FOR PASSKEY WORK /*/
a#key:hover{
	color:white;
	background-color: rgba(139, 139, 139, .93); 
/*	background-color: red; */
}

/*SIDE NAV ////////////////////////////*/

.side-nav{
	position: fixed;
	display: block;
	top:0px;
	padding-top: 50px;
	min-height:0px;
	width:110px;
}

.side-nav img{
	position: relative;
	display: block;
	width:45%;
	cursor: pointer;
}

.side-nav span{
	position: relative;
	display: block;
	padding-top: 5px;
	font-size: 1.30em;
	text-indent: 22px;
 	color: #ffffff; 
/*  color: #999; */
	font-weight:800;
}

.side-nav a{
	display: block;
	width:100%;
	min-height: 0px;
	text-indent: 9px; 
	padding:10px;
	text-decoration: none;
	color: black;
	font-size: .9em;
	outline: none;
}

.side-nav a:hover{
	color:white;
	background-color: black;
}
.side-nav a:hover{ 
	cursor: pointer;

}
.side-nav p {
  text-indent: 33px;
}

/*HAMBURGER + LABEL////////EM/////////////////////////////////*/

/*#printMenuBtn, #webMenuBtn, #threeMenuBtn, #brandsMenuBtn {
	position: fixed;
	top:0px;
}
*/
/*nav svg{ 
	position:relative;
	display: block;
	width:40px; 
	height: 60px;
	padding-left: 20px;
	cursor: pointer;
}
nav svg line{ 
	stroke:#000;
	stroke-width:5px;}
nav svg text{
	fill:#000;
	font-size: .85em;
	font-weight: 700;
	text-anchor:middle;}
nav svg:hover{	cursor: pointer;}*/



/*TABLET////////////////////////////////////////////////////////////*/
@media only screen and (min-device-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){

    main{width:100%;}
    section{width:100%;}
      
  /*	  img{width:50%;}

    video{width:50%;}   */

    .brandlogo{width:60%;}

    header nav{
    	width:100%;
     /*	background-color:red; */
    }

    header nav a{
        width:11%;
        text-align: center;
        font-size: .8em;
        padding: 12px;
      }

    h1,h2{ font-size: 2.5em;}
    h1{ padding-bottom: 10px;}

    .copydeck{ 
        width:80%;
        font-size: .635em;
/*      font-size: .7em;   */
        padding: 15px;
        cursor: pointer;
      }


    .copydeck h4{width:100%;}

  }

/*TABLET///////////previous just added//image?///////////////////////////////////////////////*/
/*@media only screen and (min-device-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){

    main{width:100%;}
      
    img{width:100%;}

    header nav{width:100%;}
    header nav a{
        width:11%;
        text-align: center;
        font-size: 1.5em;
        padding: 10px;
      }

    h1,h2{ font-size: 2.5em;}
    h1{ padding-bottom: 10px;}

    .copydeck{ 
        width:80%;
        font-size: .7em;
        padding: 15px;
      }

    .copydeck h4{width:100%;}

  } */



  
/*MOBILE////////////////////////////////////////////////////////////*/
@media only screen and (max-device-width: 767px) and (-webkit-min-device-pixel-ratio: 2){


    main{
    width:100%;
	padding-top: 90px;  /* added to add mobile top space  */
    }

    section{width:100%;}
      
    img{width:50%;}
   
    .brandlogo{width:35%;}

    header nav{
    	width:100%;
    /*    background-color: orange;   */ 
    }

  /*  header nav a{
        width:11%;
        text-align: center;
        font-size: 2em;
        padding: 12px;
      } */

   header nav a{
        width:18%;   /* spreads categories across  */
     /* width:11%;  */
        text-align: center;
        font-size: 2em;
        padding: 10px;
      }

    h1,h2{ font-size: 2.5em;}
    h1{ padding-bottom: 10px;}

 /*   .copydeck{ 
        width:70%;
        font-size: .8em;
        padding: 25px;
      }  */
      .copydeck{ 
        width:90%;
        font-size: 1.25em;
        padding: 25px;
        cursor: pointer;
      }

   	.hugoaward{ width:40%; }

   	.brands-nav, .side-nav{padding-top: 115px}

  }

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

    header nav{ 
    	width:100%;
    	left: 30px;
   /*     background-color: green;  */
    }

    header nav a{
        font-size: .85em;
        width:14%;
     /* width:9%;  */
        padding: 6px;
      }

    video{
	  position: relative;
	  display: block;
	  width:90%;  
	  margin:0 auto;  
	  
	}

	.hugoaward{ width:40%;}

  }

/*///////BELOW MORE CUSTOM ADD-ONS FOR INDIVIDUAL ITEMS, EMPTY for now  ///////*/



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