@charset "utf-8";
/* CSS Document */
* {
  box-sizing: border-box;
	margin:0;
	padding: 0;
}
a {text-decoration: none;}
body {
	font-family: "Roboto", sans-serif;
		color: #515151;
    background-color: #333;
	
}
border {border: 1px #f0f solid;}
/* headings */
h1, h2, h3, h4 {
	font-weight: bold;
}
h1 {font-size: 1.8em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.2em;
}
h4 {font-size: 1.1em;}

.clearboth {
	clear: both;
}
.phone, .email {
	background-color: #515151;
	color: #e6e6e6;	
	width: 50%;
}
.width50 {
	width: 50%;
}
.width33 {
	width: 33.333333%;
}
.ltgrey {
	background: #fbf5f5;
}
.phone {
	background-image: url("../images/phone.png");
background-size: 20px ;
	background-repeat: no-repeat;
	background-position: 50px center;
	padding: 5px 5px 5px 90px;
} 
.email {
background-image: url("../images/email.png");
background-size: 35px ;
	background-repeat: no-repeat;
	background-position: 25px 5px;
	padding: 5px 5px 5px 80px;
}
.phone:hover, .email:hover  {
	background: #e6e6e6;
	color: #515151;
}
.phone:hover {
		background-image: url("../images/phoneg.png");
	background-size: 20px ;
	background-repeat: no-repeat;
	background-position: 50px center;
}
.email:hover {
	background-image: url("../images/emailg.png");
background-size: 35px ;
	background-repeat: no-repeat;
	background-position: 25px 5px;
}

.nav-button {
  text-decoration: none; 
	display: inline-block;
	  position: relative;
	width: 20%;
	padding-top: 60px;
	padding-bottom: 10px;
	text-align: center;
	background-position: center 15px;
	background-repeat: no-repeat;
	color:  #515151;
	background-color: #c8c8c8;
}

.home {background-image: 
	url("../images/homeg.png");
	background-size: 50px;
}
.about  { background-image: 
	url("../images/persong.png");
	background-size: 50px;
}

.tools  { background-image: 
	url("../images/toolsg.png");
	background-size: 50px;
}

.film  { background-image: 
	url("../images/filmg.png");
	background-size: 50px;
}

.contact  { background-image: 
	url("../images/emailg.png ");
	background-size: 50px;
}

.dropdown {
			display: inline;
		}
.dropdown:hover  .form-content {
			display: block;
		}

.contact:hover .form-content{
 display: block;
}

.form-content-main{
	margin: auto;
	width: 75%;
	border: 1px #515151 solid; 
	max-width: 900px;
	 background-color:  #c8c8c8;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	margin-top: 10px;
	margin-bottom: 0px;
	padding: 5px 20px 15px;
}

a.home:hover, a.film:hover, a.tools:hover, a.about:hover , a.contact:hover {
background: #e6e6e6;
	color: #990000;
}

a.home:hover {
background-image: 
	url("../images/homer.png");
	background-size: 50px;
	background-repeat: no-repeat;
	background-position: center 15px; 
	
}
a.film:hover {
	background-image: url("../images/filmr.png");
		background-size: 50px;
	background-repeat: no-repeat;
	background-position: center 15px;
}
a.about:hover {
	background-image: url("../images/personr.png");
		background-size: 50px;
	background-repeat: no-repeat;
	background-position: center 15px;
	
}
a.tools:hover {
	background-image: 
	url("../images/toolsr.png");
	background-size: 50px; 
	background-repeat: no-repeat;
	background-position: center 15px;
}

a.contact:hover {
	background-image: 
	url("../images/emailr.png");
	background-size: 50px;
	background-repeat: no-repeat;
	background-position: center 15px;
}

@keyframes opacity {
	from {opacity: 0;}
	to {opacity: 1;} 
}

@keyframes spin {
	from {left: 80%; bottom: 0px; }
	to {left:170%; bottom: 0px;} 
	0% {transform: rotate(0deg); }
  100% {transform: rotate(60deg); 	 }
	from {opacity: 0;}
	to {opacity: 1;} 
}

@keyframes draw{
	from {left: 0%; bottom: -100%; }
	to { left: 50%; bottom: 100%;} 
}

@keyframes drawdown {
	from {left: -50%; bottom: 100%;}
	to {left: 20%; bottom: -100%;}
}

@keyframes draw4 {
	from {left: 30%; bottom: -100%;}
	to {left: 70%; bottom: 200%;}
}
@keyframes draw3 {
	from {left: 0%; bottom: 100%;}
	to {left: -100%; bottom: -100%;}
}
.abra {
	animation: spin 5s 1 ease-in;
	animation-fill-mode: forwards;
	position: relative;
}
/*
.wand-stable {
	float: left;
	transform: rotate(50deg);
	}
*/
.floatr {
	float: right;}
.floatl {
	float: left;
}
.container {
	max-width: 1200px;
	margin: auto;
	background: #fbf5f5;
}

.wand {
width: 55px;
	padding-top: 10px;
	opacity: 100%;
	position: absolute;
}

.star {
	animation: draw 15s infinite;
	height: 130px;
	position: relative;
}

.stardown {
	animation: drawdown 15s infinite;
	height: 130px;
	position: relative;
}
.star3 {
	animation: draw3 15s infinite;
	height: 130px;
	position: relative;
	animation-delay: 5s;
}
.star4 {
	animation: draw4 15s infinite;
	height: 130px;
	position: relative;
	animation-delay: 5s;
	animation-fill-mode: forwards;
	
}
.imgcenter {
	display: block;
	margin: auto;
	padding-top: 25px;
}

.divl, .divr {float: left;
width: 33.25%;
background: #222222; 
height: 130px;	
		overflow: hidden;	
	background-size: 80px;
	background-repeat: no-repeat;
}

.divc {
	float: left;
width: 33.5%;
height: 130px;
background: #222222;
	color: #e6e6e6;
/*	background-image: url(  "file:///E:/Documents/Brian%20Ives/website/images/wandleanleft.png"),
		url( "file:///E:/Documents/Brian%20Ives/website/images/wandleanright.png");
	background-size: 88px;
	background-repeat: no-repeat, no-repeat;
	background-position: 0% 0%, 100% 0;
	*/
}

	

.divl {
	background-image: url("../images/wandleanleft.png");
	background-position: 80% 0%;
}
.divr {
	background-image: url( "../images/wandleanright.png");
}

.divcl {
width: 100%;
height: 130px;
	color: #e6e6e6;
background: #222222; 
 background-image: url( "../images/wandleanright.png"); 
	background-repeat: no-repeat;
	background-size: 55px;
	background-position: 500px 5px;
	overflow: hidden;
}
.divcl p{
	text-align: center;
	width: 100%;
	top: 120px;
	position: absolute;
}
.divcl p.tagline{
	top: 210px;
	position: absolute;
}

.divcc {
	margin: auto;
	width:  150px;
}
.name-animate {
	animation: draw 4s  3s  steps(60, end) backwards ;
}
.tag-animate {
	animation: draw  8s 5s steps(60, end)  backwards ;
}
.name {
font-size: 1.9em;
	padding-top: 35px;
	text-align: center;
	
	white-space: nowrap;
  overflow: hidden;
	/*need width for animation to work!
	font-weight: 450;*/	
	font-weight: bold;
	letter-spacing: .3em;	
}

.tagline {
	font-size: .9em;
	padding-bottom: 10px;
	white-space: nowrap;
  overflow: hidden;
text-align: center;
	letter-spacing: .15em;	
	
}
.main-content{
	background: #c8c8c8; 
	padding: 12px  40px 20px ;
	clear: both;
}
.home-back {
	background: #fbf5f5;
}
.film2 {
	background: url("../images/filmgw.png");
	background-size: 500px;
}
/*
.w3-half {border: #300 2px solid;}
*/
 ul.inside {
	list-style-position: inside;
	 padding-left: 50px;
}

 ul.outside {
	list-style-position: outside;
	 padding-left: 50px;
	 margin-left: 50px;
}
/* need margin for about page here to match list with picture*/

.center {
	text-align: center;
}
.right {
	text-align: right;
}
.nolist {	
	list-style: none;
}
.aboutpad {
	padding: 16px;
}
.main-content h4{
	font-weight: bold;
}
h3.smimages,
h4.smimages {
	padding-left: 180px;
}
h4.zoom{
	padding-left: 65px;
}
h4.youtube {
	padding-left: 120px;
}
.imgprofile{
	width: 100%;
	padding: 5px;
	background: #515151;
}
.padding-description {
padding: 12px 0px ;
	
}
.toolbox {
	background-image: url("../images/toolboxg.png") ;
	background-repeat: no-repeat;
  background-position: 50% 70px;
	background-size: 70px;
}
.border {
	border: 1px #f0f solid;
}

.brown-background,
.hover-brownback:hover {
	background: #515151;
}

.smimages {
	background-image: url("  ../images/facebook-logo.png"), url("../images/instagram.png"), url("../images/Twitter_Logo_Blue.png"), url("../images/zoom.png");
	background-position: left center, 43px center, 73px center, 120px center;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: 33px , 30px, 50px, 33px;
}
.bkimage {height: 50px;}

.youtube {
	background-image: url("../images/yt_logo_rgb_light.png");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 100px;
}
.zoom {
	background-image: url("../images/zoom.png");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 50px;
}

.footer {
	font-size: .9em;
	color: #e6e6e6;
	clear: both;
}
.footer a{
	float: left;
	width: 33.333333%;
	padding: 5px  ;
	background-color: #515151;
	 text-decoration: none;
	color: #e6e6e6;
	text-align: center;
}

.footer a:hover{
	background: #e6e6e6;
	color: #515151;
}

/* form formatting */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #515151;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
	outline: none;
}
		
		label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #515151; 
  padding: 5px 0;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  cursor: pointer;
 text-align: center;
	color: #fcfcfc;
	width: 25%;
	display: block;
  margin: auto;
}


input[type=submit]:hover {
  background-color: #990000;
	color: #fcfcfc;
	border: 1px solid #515151;
}
		
		.row:after {
  content: "";
  display: table;
  clear: both;
}
#myVideo, 
.BriansVideo {
  max-width:100%;
	max-height: 350px; 
}


.hidden {
	display: none;
}