/* Let's start here. */
@font-face {
  font-family: 'PrivaFourPro';
  src: url('type/PrivaFourPro.eot'); /* IE9 Compat Modes */
  src: url('type/PrivaFourPro.eot') format('embedded-opentype'), /* IE6-IE8 */
       url('type/PrivaFourPro.woff2') format('woff2'), /* Super Modern Browsers */
       url('type/PrivaFourPro.woff') format('woff'), /* Pretty Modern Browsers */
       url('type/PrivaFourPro.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('type/PrivaFourPro.svg') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'PrivaOnePro';
  src: url('type/PrivaOnePro.eot'); /* IE9 Compat Modes */
  src: url('type/PrivaOnePro.eot') format('embedded-opentype'), /* IE6-IE8 */
       url('type/PrivaOnePro.woff2') format('woff2'), /* Super Modern Browsers */
       url('type/PrivaOnePro.woff') format('woff'), /* Pretty Modern Browsers */
       url('type/PrivaOnePro.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('type/PrivaOnePro.svg') format('svg'); /* Legacy iOS */
}
body {
	background-color: #35363A;
	background-repeat:no-repeat;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-text-stroke: 0.45px;
}
img {
	max-width: 100%;
	display: block;
}
iframe {
	display: block
}
/* Type styles*/
h1 {
	font-family:PrivaFourPro;
	font-size: 26px;
	text-decoration: none;
	color: #D82029;
	letter-spacing: 0.8px;
	padding: 0;
	margin: 0;
	line-height: 29px;
}
h3 {
	font-family:PrivaFourPro;
	display: block;
	text-decoration: none;
  	font-size: 100px;;
  	letter-spacing: 1px;
	color: #D82029;
	padding: 0;
	margin: 0;
}
h4 {
	font-family:PrivaFourPro;
	display: block;
	text-decoration: none;
	font-size: 40px;
	letter-spacing: 1px;
	color: #D82029;
}
p { 
	font-family:PrivaOnePro;
	font-size: 18px;
	text-decoration: none;
	color: #D82029;
	line-height: 23px;
	letter-spacing: 0.45px;
}
/* Typographic Link styling */
a:link    {color:#E45125; background-color:transparent; text-decoration:none}
a:visited {color:#E45125; background-color:transparent; text-decoration:line-through}

/*Nav Bar */
.navbarbackground {
	width: 330px;
	height: 100%;
	display:inline-block;
	left: 0;
	top: 0;
	position: fixed;
	background: -webkit-linear-gradient(left,rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,0.0)); /*Safari 5.1-6*/
	background: -o-linear-gradient(left,rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,0.0)); /*Opera 11.1-12*/
	background: -moz-linear-gradient(left,rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,0.0)); /*Fx 3.6-15*/
	background: linear-gradient(left,rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,0.0)); /*Standard*/
}
.navbar {
	width: 240px;
	height: 600px;
	margin: 100px 0px 0px 50px;
	position:fixed;
	letter-spacing: 1px;
	line-height: 1.1;
}
.navbarspace1 {
	margin:	40px 0px 0px 0px;
}
.navbarspace2 {
	margin:	120px 0px 0px 0px;
}
.symbol {
	width: 240px;
	height: 180px;
	
}
ul {
    list-style-type: none;
	list-style: none;
    margin: 0;
    padding: 0;
    width: 240px;
}
li a {
    display: block;
    text-decoration: none;
	color: #E45125;
	font-family: PrivaFourPro;
	font-size: 30px;
	opacity: 0.55;
}
	/* Change the link color on hover */
li a:hover {
	color: #D82029;
	font-size: 38px;
	opacity: 1;

}
.navbarmobile {
	width: 100%;
	height: 80px;
	left: 0;
	top: 0;
	position: fixed;
	background-color: #35363A;
	z-index: 1;
	
}
.symbolmobile {
	width: 60px;
	margin: auto;
	margin-top: 20px;
}
.hamburger {
	font-size: 40px;
	color: #D82029;
	padding: 0px;
	margin: 10px 0px 0px 25px;
	position: fixed;
}
/*Mobile Nav Bar */
/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
	background-color: #35363a;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 50px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	background: -webkit-linear-gradient(left,rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1), rgba(53,54,58,0.0)); /*Safari 5.1-6*/
	background: -o-linear-gradient(left,rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1), rgba(53,54,58,0.0)); /*Opera 11.1-12*/
	background: -moz-linear-gradient(left,rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1), rgba(53,54,58,0.0)); /*Fx 3.6-15*/
	background: linear-gradient(left,rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1), rgba(53,54,58,1), rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1),rgba(53,54,58,1), rgba(53,54,58,0.0)); /*Standard*/
}
/* The navigation menu links */
.sidenav a {
    padding: 0px 8px 8px 25px;
    text-decoration: none;
	list-style-type: none;
    font-size: 25px;
    display: block;
    transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
}
/* Position and style the close button (top left corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 70px;
    margin: 0px 0px 0px 0px;
	text-decoration: none;
	color: #D82029;
	opacity: 1;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left 3s;
    padding: 0px;
}
#maincontent {
    transition: margin-left 3s;
    padding: 0px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

/* The content styles start here*/
.homepagecontent {
	height: 830px;
	width: 1525px;
	padding: 100px 0px 0px 330px;
}
.homework {
	width: auto;
	height: 830px;
	margin: 0px 36px 0px 0px;
	display: inline-block;
}
.homework:hover {
	box-shadow:  10px 10px 5px 0px rgba(0,0,0,0.1);
}
.homeworkvideo {
	width: 1476px;
	height: auto;
	margin: 0px 36px 0px 0px;
	display: inline-block;
}
.homeworkvideo:hover {
	box-shadow:  10px 10px 5px 0px rgba(0,0,0,0.1);
}
.brandingpagecontent {
	width: 8766px; /*width: 7766px;*/
	height: auto;
	padding: 100px 0px 0px 330px;
}
.brandingworkcontainer {
	width: auto;
	height: auto;
	display: inline-block;
	
}
.brandingwork {
	width: auto;
	height: 640px;
	margin: 0px 36px 0px 0px;
	background-color: #D82029;
	
}
.brandingwork:hover {
	box-shadow:  10px 10px 5px 0px rgba(0,0,0,0.1);
}
.bworkinfobox {
	height: 210px;
	max-width: 600px;
	display:inline-block;
	margin-right:40px;
	float: left;
}
.bworktitle {
	height: 20px;
	max-width: 440px;
	margin: 20px 0px 0px 0px;
}
.bworkinfo {
	margin: 16px 0px 0px 0px;
	width: 450px;
}
.motionpagecontent {
	width: 1490px;
	height: auto;
	padding: 100px 0px 200px 330px;
}
.motionwork {
	width: 1138px;
	height: auto;
	margin: 0px 0px 40px 0px;
	display: inline-block;
	background-color: #D82029;
}
.motionwork:hover {
	box-shadow:  10px 10px 5px 0px rgba(0,0,0,0.1);
}
.motionwork4by4 {
	padding: 0;
	margin: 0;
	height: 320px;
	width: 569px;
	float: left;
	
}
.mworkinfobox {
	width: 340px;
	height: 630px;
	display: inline-block;
	margin: 0;
	padding: 0px 50px 0px 36px;
	position: absolute;
}
.mworktitle {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 2px 0px 0px 0px;
}
.mworkinfo {
	width: 100%;
	margin: 20px 0px 0px 0px;	
}
.webdesignpagecontent {
	width: auto;
	height: auto;
	padding: 100px 0px 0px 330px;
}
.wdworkinfobox {
	height: 210px;
	max-width: 700px;
	display:inline-block;
	margin-right:40px;
	float: left;
}
.wdworktitle {
	height: 20px;
	max-width: 700px;
	margin: 20px 0px 0px 0px;
}
/*Subpage CSS*/
.subpagebapbtscontent {
	width: 3544px;
	height: auto;
	padding: 100px 0px 0px 330px;
}
.subpageigcontent {
	width: 6428px;
	height: auto;
	padding: 100px 0px 0px 330px;
}
.subpagehupcontent {
	width: 7274px;
	height: auto;
	padding: 100px 0px 0px 330px;
}
.subpage3by3content {
	width: 6144px;
	height: auto;
	padding: 100px 0px 0px 330px;
}
.subpagefkcbcontent {
	width: 9231px;
	height: auto;
	padding: 100px 0px 0px 330px;
}
.subworkcontainer {
	width: auto;
	height: auto;
	display: inline-block;
	
}
.subworkcontainervideo {
	width: auto;
	height: auto;
	display: inline-block;
	
}
.subwork {
	width: auto;
	height: 640px;
	margin: 0px 36px 0px 0px;
	background-color: #D82029;
}
.subwork:hover {
	box-shadow:  10px 10px 5px 0px rgba(0,0,0,0.1);
}
.subworkvideo {
	width: 1138px;
	height: auto;
	margin: 0px 36px 0px 0px;
	display: inline-block;
}
.subworkvideo:hover {
	box-shadow:  10px 10px 5px 0px rgba(0,0,0,0.1);
}
.sworkinfobox {
	height: 210px;
	max-width: 600px;
	display:inline-block;
	margin-right:40px;
	float: left;
}
.sworktitle {
	height: 20px;
	max-width: 440px;
	margin: 20px 0px 0px 0px;
}
.sworkinfo {
	margin: 16px 0px 0px 0px;
	width: 450px;
}
.aboutpagecontent { 
	max-width: 700px;
	height: 0;
	padding: 100px 0px 0px 330px;
}
.aboutpagecontainer {
	width: 100%;
}
.aboutpageinfo {
	width: 93%;
	height: auto;
}
.aboutpageinfo h3 {
	font-weight: 300;
	margin: 0px 0px 0px -7px;
}
/*contact form starts here*/
.contactpagecontent {
	max-width: 700px;
	height: 0;
	padding: 100px 0px 0px 330px;
}
* {
  	margin: 0;
  	padding: 0;
  	/* These cause a layout problem across site page
  	box-sizing: border-box;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box; 
  	*/
  	-webkit-font-smoothing: antialiased;
  	-moz-font-smoothing: antialiased;
  	-o-font-smoothing: antialiased;
  	font-smoothing: antialiased;
 	 text-rendering: optimizeLegibility;
}
.contactformcontainer {
	width: 100%;
}
.contactformcontainer:hover {
	/*box-shadow:  10px 10px 5px 0px rgba(0,0,0,0.1); */
}
#contactform h3 {
	font-weight: 300;
}
#contactform h4 {
	margin: 0px 0px 20px 0px;
	font-weight: 400;
}

#contactform input[type="name"],
#contactform input[type="email"],
#contactform textarea {
	max-width: 88%;
	width: 100%;
	border: 0px solid #ccc;
	background: #FFF;
	margin: 0px 0px 20px 0px;
	padding: 2.5%;
	border-radius: 25px;
	font-family: "PrivaOnePro";
	font-size: 14px;
}
#contactform input[type="name"]:hover, 
#contactform input[type="email"]:hover,
#contactform textarea:hover {
	-webkit-transition: border-color 0.3s ease-in-out;
	-moz-transition: border-color 0.3s ease-in-out;
	transition: border-color 0.3s ease-in-out;
	box-shadow:0px 0px 0px 3px #D82029 inset;
}
textarea {
 	height: 140px;
  
}
.g-recaptcha {
    transform: scale(1.0); /* Scale up the size */
    transform-origin: 0 0; /* Adjust positioning */
    display: flex;
    justify-content: center;
    margin: 0px 0px 20px 0px;
    }
#submit {
  	cursor: pointer;
  	width: 93%;
  	border: none;
  	background: #E45125;
 	color: #fff;
  	margin: 0px;
  	padding: 2%;
  	font-size: 15px;
  	border-radius: 25px;
  	font-family: "PrivaFourPro";
}
#submit:hover {
  	background: #d82029;
  	-webkit-transition: background 0.3s ease-in-out;
  	-moz-transition: background 0.3s ease-in-out;
  	transition: background-color 0.3s ease-in-out;
}
#submit:active {
  	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contactform input:focus,
#contactform textarea:focus {
  	outline: 0;
	box-shadow:0px 0px 0px 3px #D82029 inset;
}
::-webkit-input-placeholder {
	color: #6E727A;
}
:-moz-placeholder {
	color: #6E727A;
}
::-moz-placeholder {
	color: #6E727A;
}
:-ms-input-placeholder {
 	color: #6E727A;
}
#contactmessagecontainer {
	height: 100%;
	margin: 10%;
}

#contactmessage {
	width: 100%;
	height: 20%;
	text-align: right;
}
/* The footer styles start here */
footer {
	height: 250px;
	width: 100%;
	background-color: #35363A;
	bottom: 0;
	left: 0;
	position: fixed;
	background: -webkit-linear-gradient(bottom,rgba(53,54,58,1),rgba(53,54,58,0)); /*Safari 5.1-6*/
	background: -o-linear-gradient(bottom,rgba(53,54,58,1),rgba(53,54,58,0)); /*Opera 11.1-12*/
	background: -moz-linear-gradient(bottom,rgba(53,54,58,1),rgba(53,54,58,0)); /*Fx 3.6-15*/
	background: linear-gradient(bottom rgba(53,54,58,1),rgba(53,54,58,0)); /*Standard*/
	}
footer:hover {
	margin: 0px 0px -0px 0px;
}
/* Social Media Icons */
.socialmediaicons {
	position: fixed;
	width: 240px;
	bottom: 0;
	left: 0;
	margin: 0px 0px 50px 50px;
	display: inline-block;
}
.instagramicon {
	width: 32px;
	display: inline-block;
	margin-right:20px;
}
.instagramicon:hover {
	width: 40px;
}
.twittericon {
	width: 40px;
	display:inline-block;
}
.twittericon:hover {
	width: 48px;
}
.slogan {
	position: fixed;
	bottom: 0;
	right:0;
	margin: 50px;
}
.discovermore {
	height: 3.75em;
	width: 9.25em;
	display: inline-block;
	opacity: 0.01;
	-webkit-animation: fadeinout 24s linear infinite;
	animation: fadeinout 24s linear infinite;
}
@-webkit-keyframes fadeinout {
  50% { opacity: 1; }
}
@keyframes fadeinout {
  50% { opacity: 1; }
}
@media /*Desktop*/(min-width: 769px) {
	.navbarmobile {
		display: none;
	}
	.motionpagecontentmobile {
		display: none;
	}
	}
@media /*Mobile*/ (max-width: 768px) {
	h1 {
		font-family:PrivaFourPro;
		font-size: 22px; /*-4px From Desktop*/
		text-decoration: none;
		color: #D82029;
		line-height: 1.13636364em;
		letter-spacing: 0.7px; /*-.1px From Desktop*/
		padding: 0;
		margin: 0;
	}
	p { 
		font-family:PrivaOnePro;
		font-size: 16px; /*-1px From Desktop*/
		text-decoration: none;
		color: #D82029;
		line-height: 25px;
		letter-spacing: 0.35px;  /*-10px From Desktop*/
		font-kerning: auto;
	}
	.navbarbackground {
		display: none;
	}
	.homepagecontent {
		width: 100%;
		height: auto;
		padding: 80px 0px 100px 0px;
		margin: 0;
	}
	.homework {
		width: 100%;
		height: auto;
		margin: 0px 0px 10px 0px;
	}
	.homeworkvideo {
		width: 100%;
		height: auto;
		padding-bottom: 56.25%;
		margin: 0px 0px 10px 0px;
		position: relative;
	}
	.homeworkvideo iframe {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.brandingpagecontent {
		width: 100%;
		height: auto;
		padding: 80px 0px 50px 0px;	
		margin: 0;
	}
	.brandingwork {
		width: 100%;
		height: auto;
		margin: 0;
		padding-bottom: 0px;
	}
	.brandingwork:hover {
		width: 100%;
		height: auto;
		box-shadow:  10px 10px 5px 0px rgba(0,0,0,0.1);
		padding: -80px 0px -50px 0px;
	}
	.bworkinfobox {
		width: 86.5%;
		height: auto;
		margin: 0% 6.75%;
		margin-top: 20px;
		margin-bottom: 40px;
		padding: 0;
		position: relative;
	}
	.bworktitle {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0px 0px 0px 0px;
		position: relative;
		display:inline-block;
	}
	.bworkinfo {
		width: 100%;
		height: auto;
		margin: 20px 20px 0px 0px;
	}
	.motionpagecontent {
		width: 100%;
		height: auto;
		padding: 80px 0px 100px 0px;
		margin: 0;
	}
	.motionwork {
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
		margin: 0px 0px 0px 0px;
		position: relative;
		display: block;
	}
	.motionwork iframe {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.mworkinfobox {
		width: 86.5%;
		height: auto;
		margin: 0% 6.75%;
		margin-top: 20px;
		margin-bottom: 40px;
		padding: 0;
		position: relative;
	}
	.mworktitle {
		width: 100%;
		margin: 0;
		padding: 0px 0px 0px 0px;
		position: relative;
	}
	.mworkinfo {
		width: 100%;
		padding: 20px 0px 0px 0px;
		margin: 0;
	}
	.webdesignpagecontent {
		width: 100%;
		height: auto;
		padding: 80px 0px 100px 0px;
		margin: 0;
	}
	.wdworkinfobox {
		width: 86.5%;
		height: auto;
		margin: 0% 6.75%;
		margin-top: 20px;
		margin-bottom: 40px;
		padding: 0;
		position: relative;
	}
	.wdworktitle {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0px 0px 0px 0px;
		position: relative;
		display:inline-block;
	}
	.subpagebapbtscontent, .subpageigcontent, .subpagehupcontent, .subpage3by3content, .subpagefkcbcontent {
		width: 100%;
		height: auto;
		padding: 80px 0px 100px 0px;	
		margin: 0;
	}
	.subworkcontainervideo {
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
		margin: 0px 0px 5px 0px;
		position: relative;
	}
	.subwork {
		width: 100%;
		height: auto;
		margin: 0;
		padding-bottom: 0px;
	}
	.subworkvideo {
		width: 100%;
		height: auto;
		padding-bottom: 56.25%;
		margin: 0px 0px 0px 0px;
		position: relative;
	}
	.subworkvideo iframe {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.sworkinfobox {
		width: 86.5%;
		height: auto;
		margin: 0% 6.75%;
		margin-top: 20px;
		margin-bottom: 40px;
		padding: 0;
		position: relative;
	}
	.sworktitle {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0px 0px 0px 0px;
		position: relative;
		display:inline-block;
	}
	.sworkinfo {
		width: 100%;
		height: auto;
		margin: 20px 20px 0px 0px;
	}
	.aboutpagecontent {
		width: 85%;
		height: auto;
		margin: auto;
		padding: 0px;
		padding-top: 80px;
	}
	.aboutpagecontainer {
		width: 100%;
		height: auto;
		padding: 0px 0px 90px 0px;
	}
	.aboutpageinfo {
		width: 100%;
	}
	.contactpagecontent{
		width: 85%;
		height: auto;
		margin: auto;
		padding: 0px;
		padding-top: 80px;
	}
	.contactformcontainer {
		width: 100%;
		height: auto;
		padding: 0px 0px 90px 0px;
	}
	#contactform input[type="name"],
	#contactform input[type="email"],
	#contactform textarea {
		max-width: 93%;
		padding: 3.5%;
	}
	#submit {
		width: 100%;
	}		
	footer {
		width: 100%;
		height: 100px;
	}
	.socialmediaicons {
		margin: 0px 0px 25px 25px;
	}
	.slogan {
		margin: 25px;
	}
	.discovermore {
		width: 74px;
		height: 30px;
	}	
}