html {
  background: url("../img/bg001.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

a {
  decoration: none;
}

nav ul ul {
  display: none;
}

  nav ul li:hover > ul {
    display: block;
  }


nav ul {
  background: #efefef; 
  background: linear-gradient(top, #057188 0%, #74eaeb 100%);  
  background: -moz-linear-gradient(top, #057188 0%, #74eaeb 100%); 
  background: -webkit-linear-gradient(top, #057188 0%,#74eaeb 100%); 
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 10px;  
  list-style: none;
  position: relative;
  display: inline-table;
}
  nav ul:after {
    content: ""; clear: both; display: block;
  }

  
nav ul li {
  float: left;
}
  nav ul li:hover {
    background: #057188;
    background: linear-gradient(top, #057188 0%, #74eaeb 40%);
    background: -moz-linear-gradient(top, #057188 0%, #74eaeb 40%);
    background: -webkit-linear-gradient(top, #057188 0%,#74eaeb 40%);
  }
    nav ul li:hover a {
      color: #fff;
    }
  
  nav ul li a {
    display: block; padding: 25px 40px;
    color: #ffffff; text-decoration: none;
  }

  
nav ul ul {
  background: #057188; border-radius: 0px; padding: 0;
  position: absolute; top: 100%;
}
  nav ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
  }
    nav ul ul li a {
      padding: 15px 40px;
      color: #fff;
    }  
      nav ul ul li a:hover {
        background: #4b545f;
      }
      
nav ul ul ul {
  position: absolute; left: 100%; top:0;
}

.special1 { float: left; width:20%; background-color:white; border-style:solid; 
      border-width:10px; border-color:white; border-radius: 10px; }

      
.special2 { float: left; width:66%; background-color:white; border-style:solid; 
      border-width:10px; border-color:white; border-radius: 10px; }

      
.special3 {   background: #efefef; 
        background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
        background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
        background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
        box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
        padding: 0 20px;
        border-radius: 10px; }

        
.special4 { float: left; width:5% }

.iframe1 {
  -moz-transform: scale(0.25%, 0.25%); 
  -webkit-transform: scale(0.25%, 0.25%);  
  -o-transform: scale(0.25%, 0.25%); 
  -ms-transform: scale(0.25%, 0.25%); 
  transform: scale(0.25%, 0.25%);  
  -moz-transform-origin: top left;
  -webkit-transform-origin: top left;
  -o-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
}

/* For the changing-size div tags: */

.div1 {
    height:300px;
    width:100px;
    display: inline-block;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.div1a {
  opacity: 0.3;
  filter: alpha(opacity=00); /* For IE8 and earlier */
    min-width:80px;
    display: inline-block;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.div1a:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
    min-width:80px;
    display: inline-block;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.div1b {
    height:200px;
    width:400px;
    display: inline-block;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.img1a {
  opacity: 0.5;
  filter: alpha(opacity=00); /* For IE8 and earlier */
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.img1a:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

#black {
	color:white;
	font-family:helvetica;
  background-color:#000000;
  background: linear-gradient(top, #FFFFFF 0%, #333333 100%);  
  background: -moz-linear-gradient(top, #FFFFFF 0%, #333333 100%); 
  background: -webkit-linear-gradient(top, #FFFFFF 0%,#333333 100%); 
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 5px;  
  list-style: none;
  position: relative;
  display: inline-block;
}

#gray {
	font-family:helvetica;
  background-color:#000000;
  background: linear-gradient(top, #FFFFFF 0%, #777777 100%);  
  background: -moz-linear-gradient(top, #FFFFFF 0%, #777777 100%); 
  background: -webkit-linear-gradient(top, #FFFFFF 0%,#777777 100%); 
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 5px;  
  list-style: none;
  position: relative;
  display: inline-block;
}

#white {
	color:black;
	font-family:helvetica;
  background-color:#777;
  background: linear-gradient(top, #FFFFFF 0%, #aaa 100%);  
  background: -moz-linear-gradient(top, #FFFFFF 0%, #aaa 100%); 
  background: -webkit-linear-gradient(top, #FFFFFF 0%,#aaa 100%); 
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 5px;  
  list-style: none;
  position: relative;
  display: inline-block;
}

#red {
	color:white;
	font-family:helvetica;
  background-color:#000000;
  background: linear-gradient(top, #f00 0%, #000 100%);  
  background: -moz-linear-gradient(top, #f00 0%, #000 100%); 
  background: -webkit-linear-gradient(top, #f00 0%,#000 100%); 
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 5px;  
  list-style: none;
  position: relative;
  display: inline-block;
}

#black {
	color:white;
	font-family:helvetica;
  background-color:#000000;
  background: linear-gradient(top, #777 0%, #000 100%);  
  background: -moz-linear-gradient(top, #777 0%, #000 100%); 
  background: -webkit-linear-gradient(top, #777 0%,#000 100%); 
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 5px;  
  list-style: none;
  position: relative;
  display: inline-block;
}

#gray01 {
    background-color:#999999;
}

#gray02 {
    background-color:#777777;
}

#gray03 {
    background-color:#555555;
}

/* Slide-in/out size for element:*/

.div2{
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

a {text-decoration: none;
  cursor: default;
}

.centerVandH {
  position:absolute;
  left:50%;
  top:50%;
  margin:-75px 0 0 -135px;
}

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

.largerinputs {
	font-size: 100px;
	width: 400px;
}

/*
For hiding the inputs, in order to use styled buttons:
*/

.inputfile {
	width:0.1px;
	height:0.1px;
	opacity:0;
	overflow:hidden;
	position:absolute;
	z-index:-1;
}

.uploadfile {
	width:0.1px;
	height:0.1px;
	opacity:0;
	overflow:hidden;
	position:absolute;
	z-index:-1;
}

/*Style the inputs:
*/
.inputfile + label {
    font-size:1.25em;
    font-weight:700;
    color:white;
    background-color:black;
    display:inline-block;
}
/*Style the inputs:
*/
.inputfile:focus + label,
.inputfile + label:hover {
    background-color:red;
}

/*Style the upload:
*/
.uploadfile + label {
    font-size:1.25em;
    font-weight:700;
    color:white;
    background-color:black;
    display:inline-block;
}
/*Style the upload:
*/
.uploadfile:focus + label,
.uploadfile + label:hover {
    background-color:red;
}

#whitebutton {
	color:white;
	background-color:black;
	padding:10px;
	border-radius:10px;
}

#blackbutton {
	color:black;
	background-color:white;
	padding:10px;
	border-radius:10px;
}

#redbutton {
	color:red;
	background-color:white;
	padding:10px;
	border-radius:10px;
}

#whitebutton:hover {
	color:black;
	background-color:white;
	padding:10px;
	border-radius:10px;
	cursor:pointer;
}

#blackbutton:hover {
	color:white;
	background-color:black;
	padding:10px;
	border-radius:10px;
	cursor:pointer;
}

#redbutton:hover {
	color:white;
	background-color:red;
	padding:10px;
	border-radius:10px;
	cursor:pointer;
}

#darkbutton {
	color:white;
	background-color:gray;
	padding:10px;
	border-radius:10px;
}

#darkbutton:hover {
	color:white;
	background-color:red;
	padding:10px;
	border-radius:10px;
	cursor:pointer;
}

#bigredbutton {
	color:white;
	background-color:red;
	padding:10px;
	border-radius:30px;
	border-style:solid;
	border-color:white;
}

#bigredbutton:hover {
	color:red;
	background-color:darkred;
	padding:10px;
	border-radius:30px;
	border-style:solid;
	border-color:red;
	cursor:pointer;
}

#darkredbutton {
	color:white;
	border-style:solid;
	border-color:white;
	border-radius:10px;
	padding:10px;
	background-color:#911;
}

#darkredbutton:hover {
	color:red;
	border-style:solid;
	border-color:red;
	border-radius:10px;
	padding:10px;
	background-color:#911;
}

#wh {
	background: url("lib/img/alignment/WHC.png") no-repeat;
	opacity:0.1;
	display: inline-block;
	-moz-transition: all 1.0s ease-out;  /* FF4+ */
    -o-transition: all 1.0s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 1.0s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 1.0s ease-out;
}

#bh {
	background: url("lib/img/alignment/BHC.png") no-repeat;
	opacity:0.1;
	display: inline-block;
	-moz-transition: all 1.0s ease-out;  /* FF4+ */
    -o-transition: all 1.0s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 1.0s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 1.0s ease-out;
}

#rh {
	background: url("lib/img/alignment/RHC.png") no-repeat;
	opacity:0.1;
	display: inline-block;
	-moz-transition: all 1.0s ease-out;  /* FF4+ */
    -o-transition: all 1.0s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 1.0s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 1.0s ease-out;
}

#anon {
	background: url("lib/img/alignment/AC1.png") no-repeat;
	opacity:0.1;
	display: inline-block;
	-moz-transition: all 1.0s ease-out;  /* FF4+ */
    -o-transition: all 1.0s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 1.0s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 1.0s ease-out;
}

#wh:hover {
	background: url("lib/img/alignment/BHC.png") no-repeat;
	opacity:1.0;
	display: inline-block;
	-moz-transition: all 1.5s ease-out;  /* FF4+ */
    -o-transition: all 1.5s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 1.5s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 1.5s ease-out;
	cursor:pointer;
}

#bh:hover {
	background: url("lib/img/alignment/WHC.png") no-repeat;
	opacity:1.0;
	display: inline-block;
	-moz-transition: all 1.5s ease-out;  /* FF4+ */
    -o-transition: all 1.5s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 1.5s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 1.5s ease-out;
	cursor:pointer;
}

#rh:hover {
	background: url("lib/img/alignment/RHC.png") no-repeat;
	opacity:1.0;
	display: inline-block;
	-moz-transition: all 1.5s ease-out;  /* FF4+ */
    -o-transition: all 1.5s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 1.5s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 1.5s ease-out;
	cursor:pointer;
}

#anon:hover {
	background: url("lib/img/alignment/anonymous.png") no-repeat;
	opacity:1.0;
	display: inline-block;
	-moz-transition: all 1.5s ease-out;  /* FF4+ */
    -o-transition: all 1.5s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 1.5s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 1.5s ease-out;
	cursor:pointer;
}

#hiddenfadein {
	opacity:0.0;
	-moz-transition: all 1.0s ease-out;  /* FF4+ */
    -o-transition: all 1.0s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 1.0s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 1.0s ease-out;
}

#hiddenfadein:hover {
	opacity:1.0;
	-moz-transition: all 1.5s ease-out;  /* FF4+ */
    -o-transition: all 1.5s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 1.5s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 1.5s ease-out;
	cursor:pointer;
}

.circle {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}

.chevron {
-webkit-clip-path: polygon(50% 100%, 0% 70%, 0% 0%, 100% 0%, 100% 70%);
clip-path: polygon(50% 100%, 0% 70%, 0% 0%, 100% 0%, 100% 70%);
}

.lpoint {
-webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
}

.rpoint {
-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.lchevron {
-webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

.rchevron {
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

.mbox{
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 70% 75%, 50% 100%, 30% 75%, 0% 75%);
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 70% 75%, 50% 100%, 30% 75%, 0% 75%);
}

a:hover {cursor:pointer;}

#pic:hover {cursor:pointer;}