body {
  /*font-size: 1.5em;  currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family:  'Dosis', sans-serif;
  color: #fff; background:#000; font-size: 18px }

img{width:100%; height:auto}
.castphoto{width: 132px; height: 200px}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a:hover{color:#CC0000; transition:0.9s;}
a{color:#fff;}

/* --- my styles -- */
hr {border: 1px #666 dotted;}
.home {
    width: 100%;
    height: 100vh;
    min-height: 786px;
    background-color: transparent;
    position: relative;
    display: table;
}
.parallax-window {
    min-height: 400px;
    background: transparent;
}
nav {position: fixed; width: 100%;  overflow: hidden;   margin: 0; padding:10px 0 0 0; text-align: center; background:#000}
nav ul{ transition: all 1s ease-in-out;}
.menu{background: #000!important; border: none!important}
.menu ul { margin: 0!important; padding: 0; width: 100% }
.menu li { display:inline-block; list-style-type: none; padding: 0; margin:0; }
.menu  li a{text-align: center; padding: 16px 12px 0 12px; text-decoration: none; color: #fff; text-transform:uppercase; font-size:90%}

.menu  li a:hover{background:#CC0000; padding:16px;   transition:0.8s;}
.padding{padding:20px 40px 10px 40px }


h2 {font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 0 15px rgba(255,255,255,.5), 0 0 10px rgba(255,255,255,.5);}

.titlevideo{clear:both;  width:100%;  padding-top:24%; color:#fff;  text-align:center}
.titlevideo h4{ padding-left: 20px; }
.titlevideo h1{ font-family: 'Anton', sans-serif; font-size:250px; color: #fff; text-shadow: 0 0 15px rgba(255,255,255,.5), 0 0 10px rgba(255,255,255,.5); }

.titlevideo2{clear:both; padding-right:40px;  text-align:center; color:#fff}
.titlevideo2 p{padding-top: 0px; font-size:36px;  text-align:center; color:#fff}
.titlevideo2 a{text-decoration: none; color:#fff}
.titlevideo2 a:hover{ color:#CC0000}

.profilepages{color: #fff; font-size:20px;}
.profilepages li{list-style: none}
.profilepages a{color: #fff; text-decoration: none; font-weight: 700}
.profilepages a:hover{color:#4682fa; transition:0.9s;}
.uparrow {color: #666}
.uparrow.hover{color:#4682fa; }
.headshotsright{float:right; width: 100%; max-width: 280px; height: auto; padding: 10px 0 20px 40px}
.headshotsleft{ float:left; width: 100%; max-width: 280px; height: auto; padding: 10px 40px 20px 0}



@media (min-width: 780px) {	
    .titlevideo{padding-top:30%;}
.titlevideo h1{font-size:250px; line-height: 1; letter-spacing: -.02em;}
		.profilepages{}
}

@media (min-width: 581px) {
    
.titlevideo h1{font-size:200px; line-height: 1; letter-spacing: -.02em;}
	.profilepages{}

.titlevideo p{color:#ffffff; font-size:120%}
}
@media (max-width: 580px) {
     .titlevideo{padding-top:50%;}
.titlevideo h1{font-size:180px; line-height: 1; letter-spacing: -.02em;}
.titlevideo p{color:#ffffff; font-size:100%}
	.profilepages{}
	.headshotsright{max-width: 280px; }
.headshotsleft{max-width:280px }
}
@media (max-width: 480px) {
.titlevideo h1{font-size:50px; line-height: 1; letter-spacing: -.02em;}
.titlevideo p{color:#ffffff; font-size:100%}
.headshotsright{max-width: 100%; }
.headshotsleft{max-width:100% }
	p{font-size: 90%}
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* 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/status.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 */
}
/* ---- menu hamburger ----
.menu-bars{
    width: 100%;
    background-color: #333;
    text-align: right;
    box-shadow: border-box;
    padding: 10px 0px;
    cursor: pointer;
    color: #fff;
    display: none;  z-index:1
}

.menu-bars .fas{
    margin-right: 20px;
} */

/**** RESPONSIVE ****/

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

     .container {  width: 100%; padding:0}
    .titlevideo2{padding: 0}

}
/* newsletter form */
.sib-form-container .sib-form{background: #000!important}
#sib-container {background: #222!important; padding:0}

  #sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: Roboto, sans-serif; font-size:12px;
    color: #999;
    border-width: px;
  }

  #sib-container input::placeholder {
    text-align: left;
    font-family: Roboto, sans-serif; font-size:12px;
    color: #999;
    border-width: 0px;
  }

.sib-form input{color:#000!important; font-size:14px;}