/* I am the style sheet for the creative main page */

/*typography goes here*/

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,900&display=swap');

.clientbase {
	display: block;
}

.client300, .client480, .client768, .client1280, .client1620 {
	display: none;
}

p {
}

button, input[type=submit] { cursor:pointer; }

img.flex {
width: 100%;
}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}	

body {
background-color: #333333;
color: #222222;
line-height: 1.3;
font-family: 'Roboto';
}

#header {
background-color: #333333;
color: #eeeeee;
line-height: 1;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}

#header p {
margin-bottom: 0;
}

#header a {
color: #eeeeee;
}

#header a:hover {
color: #a10000;
text-decoration: underline;
}

#topnav_home, #topnav_client, #topnav_films, #topnav_extras, #topnav_contact {
float: left;
padding: 15px 0px 13px 0px;
/* border-left: 1px solid #555555;
border-right: 1px solid #000000; */
text-align: center;
height: 16px;
/* -webkit-box-shadow:inset 0 0 10px 0 #444444;
box-shadow:inset 0 0 10px 0 #444444; */
font-family: 'Roboto', sans-serif !important;
text-transform: uppercase;
font-size: 14px;
}

#topnav_home {
width: 244px;
background-image:url('../gfx/botu_logo.png');
background-repeat: no-repeat;
background-position: 10px 8px;
padding: 11px 0 17px 34px;
}

#topnav_home h1 {
color: #eeeeee;
font-size: 22px;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 300;
}

.bold-heading {
font-weight: 900 !important;
}

a:hover #topnav_home {
display: block;
background-image:url('../gfx/botu_logo_black.png');
background-color: #a10000;
-webkit-box-shadow:inset 0 0 10px 0 #B53333;
animation: subtleboxglow 1s ease-in-out infinite, backgroundflash .25s ease-out 1;
box-shadow:inset 0 0 10px 0 #B53333;
}

a:hover #topnav_home h1 {
color: #222222;
text-decoration: none;
text-shadow: 1px 1px 0 #B53333;
}

#topnav_client {
margin-left: 250px;
}

#topnav_client, #topnav_films, #topnav_extras, #topnav_contact {
width: 108px;
}

#topnav_contact {
margin-right: 0px;
}

a:hover #topnav_client, a:hover #topnav_films, a:hover #topnav_extras, a:hover #topnav_contact  {
color: #222222;
text-decoration: none;
background-color: #a10000;
-webkit-box-shadow:inset 0 0 10px 0 #B53333;
animation: subtleboxglow 1s ease-in-out infinite, backgroundflash .25s ease-out 1;
box-shadow:inset 0 0 10px 0 #B53333;
text-shadow: 1px 1px 0 #B53333;
}



#body1{
width: 100%;
background-color: #cccccc;
background-image: url('../gfx/grey_1.jpg');
display: block;
padding-top: 40px;
padding-bottom: 40px;
}

#body1 a { 
color: #a10000;
text-decoration: underline;
}

#body1 a:visited {
color: #890000;
text-decoration: underline;
}

#body1 a:hover { 
color: #DC1A1A;
text-decoration: underline;
}

#body1_container {
background-color: #cccccc;
display: block;
}

#body_container1 h2 {
margin-left: 10px;
font-size: 36px;
border-bottom: 1px solid #aaaaaa;
padding-bottom: 10px;
margin-bottom: 27px;
font-family: 'Roboto';
}


.dateline {
float: right;
font-size: 12px;
}

#right_container {
}

.right_content h2 {
text-align: justify;
}

#films-tile a {
text-decoration: none;
color: #222222 !important;
}

#films-tile a:hover {
text-decoration: none;
color: #cccccc !important;
}

#films-tile a div.video_content {
padding: 10px;
margin-bottom: 10px;
min-height: 270px;
margin-left: -5px;
margin-right: -5px;
}

#films-tile a:hover div.video_content {
background-color: #a10000;
border-radius: 10px;
text-decoration: none !important;
color: #cccccc !important;
animation: boxglow 1s ease-in-out infinite, backgroundflash .25s ease-out 1;
}

@keyframes backgroundflash {
0%	{background-color: #e36052;}
100%	{background-color: #a10000;}
}

@keyframes boxglow {
0%	{-webkit-box-shadow: inset 0px 0px 20px 0px rgba(233, 39, 39,1);
-moz-box-shadow: inset 0px 0px 20px 0px rgba(233, 39, 39,1);
	box-shadow: inset 0px 0px 20px 0px rgba(233, 39, 39,1);
background-color: #ac0000; }
50%	{-webkit-box-shadow: inset 0px 0px 10px 0px rgba(233, 39, 39,1);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(233, 39, 39,1);
	box-shadow: inset 0px 0px 10px 0px rgba(233, 39, 39,1);
background-color: #a10000; }
100%	{-webkit-box-shadow: inset 0px 0px 20px 0px rgba(233, 39, 39,1);
-moz-box-shadow: inset 0px 0px 20px 0px rgba(233, 39, 39,1);
	box-shadow: inset 0px 0px 20px 0px rgba(233, 39, 39,1); 
background-color: #ac0000; }
}

@keyframes subtleboxglow {
0%	{box-shadow:inset 0 0 2px 0 #B53333;}
50%	{box-shadow:inset 0 0 10px 0 #B53333;}
100%	{box-shadow:inset 0 0 2px 0 #B53333;}
}

@keyframes subtlefooterboxglow {
0%	{box-shadow:inset 0 0 2px 0 #555555;}
50%	{box-shadow:inset 0 0 10px 0 #555555;}
100%	{box-shadow:inset 0 0 2px 0 #555555;}
}

@keyframes textglow {
0%	{color: #ffffff; text-shadow:0px 0px 20px #B53333;}
100%	{color: #cccccc; text-shadow:0px 0px 2px #B53333;}
}

@keyframes figurewrapperflash {
0%	{border: 2px solid #ffffff;}
100%	{border: 2px solid #cccccc;}
}


.figure-wrapper {
padding: 2px;
border: 2px solid #a10000;
}

#films-tile a:hover div.video_content div.figure-wrapper {
border: 2px solid #cccccc;
animation: figurewrapperflash .5s infinite alternate;
}


figure.sixteen-nine-img {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding-top: 56.25%;
  position: relative;
}

figure.sixteen-nine-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}

figure.group-banner-img {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding-top: 48%;
  position: relative;
}

figure.group-banner-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  filter: grayscale(100%);
}

div#groupbanner {
margin-top: 44px;
height: 300px;
overflow: hidden;
border-bottom: 10px solid #a10000;
}

#films-tile a div.video_content p.films-tile-title {
margin-left: 10px;
overflow: visible;
color: #a10000;
margin-bottom: 0px;
}

#films-tile a:hover div.video_content p.films-tile-title {
animation-name: textglow;
animation-duration: .5s;
animation-iteration-count: infinite;
animation-direction: alternate;
color: #cccccc;
margin-bottom: 0px;
}

#films-tile a div.video_content p.films-tile-genre {
color: #222222;
background: none;
border: none;
}

#films-tile a div.video_content p.films-tile-year {
color: #222222;
background: none;
border: none;
margin-bottom: 0px;
padding-bottom: 0px;
}

#films-tile a:hover div.video_content p.films-tile-genre {
animation-name: textglow;
animation-duration: .5s;
animation-iteration-count: infinite;
animation-direction: alternate;
color: #cccccc;
}

#films-tile a:hover div.video_content p.films-tile-year {
animation-name: textglow;
animation-duration: .5s;
animation-iteration-count: infinite;
animation-direction: alternate;
color: #cccccc;
}


#body2 {
background-color: #eeeeee;
background-image: url('../gfx/grey_1.jpg');
padding-top: 40px;
padding-bottom: 40px;
}

#body2 div a div img {
width: 100% !important;
}

#body2 div a:hover div img {
-webkit-box-shadow: 0 0 0 2px #a10000;
box-shadow: 0 0 0 2px #a10000;
width: 100% !important;
}

.body2_content h3 {
padding-bottom: 5px;
border-bottom: 1px solid #cccccc;
margin-bottom: 10px;
text-shadow: 1px 1px 0 #ffffff;
}

#body2 div a:hover h3 {
color: #a10000;
border-bottom: 1px solid #a10000;
}

.body2_content p {
margin-top: 5px;
margin-bottom: 5px;
text-shadow: 1px 1px 0 #ffffff;
}

#footer {
background-image: url('../gfx/px_by_Gre3g.png');
background-color: #333333;
border-top: 20px solid #a10000;
}

#footer h4 {
color: #888888 !important;
}

#footersocial {
background-color: #a10000;
}

#footer1 {
padding-bottom: 5px;
}

#footer1 div {
border-bottom: 1px solid #a10000;
}

#footer1 a {
float: left;
display: block;
width: 160px;
text-decoration: none;
color: #888888 !important;
font-size: 12px;
height: 23px;
padding: 17px 0px 13px 0px;
text-align: center;
}

#footer1 a:hover {
font-weight: bold;
color: #a10000 !important;
text-shadow: 1px 1px 0 #000000;
background-color: #444444;
animation: subtlefooterboxglow 1s ease-in-out infinite;
}

#footer1 a.footersocial {
width: 53px;
height: 33px;
padding: 10px 0px 10px 0px;
}

#footer2 {
padding: 10px;
}

#footer2 p {
color: #888888;
}

#footer2 a {
color: #a10000;
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 0 #000000;
}

#footer2 a:hover {
text-decoration: underline;
}

.vid-footer:hover {
background-color: #444444;
}

.films-tile-title {
font-weight: bold;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
color: #999999;
}

.films-tile-genre {
font-size: 14px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 0px;
display: block;
background-color: #444444;
margin-bottom: 0px;
border-left: 10px solid #555555;
}

.films-tile-year {
font-size: 14px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 10px;
display: block;
background-color: #444444;
margin-bottom: 0px;
border-left: 10px solid #555555;
}

#about-footer: {
margin-left: -10px !important;
margin-right: 0px;
}

#about-footer H4 {
font-size: 20px;
color: #999999 !important;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 0px;
margin-top: 10px;
}

#about-footer p {
font-size: 18px;
margin-top: 14px;
margin-bottom: 0px;
padding-left: 10px;
}

#about-footer a {
display: block;
padding-left: 10px;
font-size: 18px;
padding-right: 10px;
margin-top: 5px;
padding-top: 10px;
padding-bottom: 10px;

}

#about-footer a:hover {
color: #cccccc;
display: block;
background-color: #a10000;
animation: boxglow 1s ease-in-out infinite, backgroundflash .25s ease-out 1, textglow .5s alternate infinite;
border-radius: 5px;
}

#footer2 label {
color: #222222;
text-shadow: 1px 1px 0 #888888;
font-weight: bold;
width: 85px;
padding-right: 15px;
display: block;
float: left;
height: 20px;
}

#footer2 input, #footer2 textarea {
width: 196px;
border-radius: 5px;
background-color: #222222;
border-right: 1px solid #888888;
border-bottom: 1px solid #888888;
border-left: none;
border-top: none;
display: block;
margin-bottom: 5px;
color: #dddddd;
}

#footer2 input {
height: 20px;
}

#footer2 div div a:hover {
text-decoration: none;
text-shadow: none;
}

#footer2 div div a:hover p {
/* color: #888888 !important; */
}

#footer2 div div a:hover div.figure-wrapper {
/* border: 2px solid #888888 !important; */
}


div#footer2 div#films-tile a:hover div.video_content p.films-tile-title {
/* color: #888888 !important; */
}

div#footer2 div#films-tile a div.video_content p.films-tile-genre {
color: #888888;
}

div#footer2 div#films-tile a div.video_content p.films-tile-year {
color: #888888;
}

#footer3 {
padding-top: 20px;
padding-bottom: 20px;
}

#footer3 div {
border-top: 1px solid #a10000;
padding-top: 20px;
}

#footer3 p {
margin: 0px;
line-height: 0px;
color: #888888;
font-size: 14px;
}

#footer3 a {
color: #888888;
text-decoration: underline;
}

#footer3 a:hover {
color: #dddddd;
}

a.topofpage {
line-height: 0px;
font-size: 14px;
float: right;

}

div#welcometext p {
font-size: 24px;
text-align: justify;
text-align-last: left;
margin-bottom: 1em;
}

div#welcometext h2 {
margin-left: 0px;
padding-left: none;
border-bottom: none;
text-align: center;
font-size: 36px;
text-transform: uppercase;
font-family: 'Roboto';
color: #666666;
}

.clientpage h3 {
color: #999999;
font-size: 24px;
padding-bottom: 5px;
border-bottom: 1px solid #cccccc;
}

.portfolioheading {
border-bottom: 1px solid #aaaaaa !important;
}

.clientpage p {
font-size: 16px;
}

.clientpage img {
padding-bottom: 10px;
}

#body1 a.contactbutton, #body2 a.contactbutton {
text-align: center;
border-radius: 8px;
background-color: #a10000;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
color: #cccccc;
text-decoration: none !important;
margin-left: 25%;
margin-right: 25%;
margin-bottom: 20px;
display: block;
}

a.contactbutton:hover {
animation: boxglow 1s ease-in-out infinite, backgroundflash .5s ease-out 1, textglow .5s infinite alternate;}


iframe .vimeo {
background-color: #000000;
display: block;
}

.services_page h2 {
color: #666666;
width: 100%;
border-bottom: 1px solid #a10000;
padding-bottom: 5px;
text-shadow: 1px 1px 0 #ffffff;
margin-bottom: 20px;
}

.services_page p.smalltag {
color: #888888;
font-style: italic;
margin-top: 10px;
}

.services_page li {
list-style-type: disc;
}

.landingpage {
background-image: url('../images/landingbg_01.jpg') !important;
background: no-repeat center top fixed;
background-size: 1452px auto;
max-height: 820px; 
}

#landingtitle {
margin-top: 350px;
margin-bottom: 50px;
}

#landingtitle h2 {
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
text-shadow: 2px 2px 5px #000000;
}

#bigclientbox {
background-color: rgba(161, 0, 0, .75);
height: auto;
}

#bigcreativebox {
background-color: rgba(161, 0, 0, .75);
height: auto;
margin-left: 120px;	
}

#boxinner {
padding: 60px;
display: flex;
align-items: center; /* horizontal */
justify-content: center; /* vertical */
}

#boxinner p {
font-size: 24px;
color: #ffffff;
text-align: justify;
padding: 0px;
margin: 0px;

}

a:hover div#bigclientbox, a:hover div#bigcreativebox {
animation: boxglow 1s ease-in-out infinite, backgroundflash .5s ease-out 1, textglow .5s infinite alternate;
background-color: #a10000;
}

a:hover div#bigclientbox #boxinner p, a:hover div#bigcreativebox #boxinner p {
animation: textglow .5s infinite alternate;
}

.contactpage {
background-image: url('../images/contactbg_01.jpg') !important;
background: no-repeat center top fixed;
max-height: 870px;
background-size: 1550px auto;
}

#contactform {
margin-top: 40px;
background-color: rgba(161, 0, 0, .50);
padding: 20px;
color: #dddddd;
}

#contactform p {
font-weight: 900;
font-size: 32px;
text-transform: uppercase;
margin-bottom: 30px;
}

.contact input {
border: 2px solid #a10000;
padding: 10px;
box-shadow: 0px 0px 10px #999999 inset;
border-radius: 5px;
width: 436px;
margin-bottom: 20px;
margin-top: 5px;
font-size: 16px;
font-family: 'Roboto';
background-color: #eeeeee;
}

.contact textarea {
border: 2px solid #a10000;
padding: 10px;
box-shadow: 0px 0px 10px #999999 inset;
border-radius: 5px;
width: 436px;
margin-bottom: 20px;
min-height: 200px;
font-size: 16px;
margin-top: 5px;
font-family: 'Roboto';
background-color: #eeeeee;
}

input:focus, textarea:focus {
background-color: #ffffff;
}

.contact label {
margin-bottom: 50px;
font-family: 'Roboto';
}

::placeholder {
color: #888888;
font-style: italic;
}

.alert-successful {
animation-name: successful;
animation-duration: 1s;
}

@keyframes successful {
  0%   {color: #ffffff; text-shadow: 0 0 10px #FFFFFF;}
  25%  {color: #eeeeee; text-shadow: 0 0 15px #FFFFFF;}
  50%  {color: #dddddd; text-shadow: 0 0 7px #FFFFFF;}
  100% {color: #dddddd; text-shadow: 0 0 0px #FFFFFF;}
}

input[type=submit], input[type=reset] {
width: 40%;
background-color: #a10000;
padding: 10px;
color: #FFFFFF;
text-transform: uppercase;
font-weight: 900;
font-family: 'Roboto';
border: 2px solid #cc3121;
box-shadow: 0px 0px 10px #750707 inset;
}

input[type=submit]:hover, input[type=reset]:hover {
animation: boxglow 1s ease-in-out infinite, backgroundflash .5s ease-out 1, textglow .5s infinite alternate;
border: 2px solid #e36052;
}

div .g-recaptcha {
margin-bottom: 20px;
}


#contactmarketing p {
font-weight: 900;
font-size: 58px;
text-transform: uppercase;
color: #eeeeee;
margin-top: 50px;
}






/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */
	
    @media only screen and (max-width: 479px) {

.client300 {
	display: block;
}

.client480, .client768, .clientbase, .client1280, .client1620 {
	display: none;
}
		
#landingspacer {
height: 80px;
display: block;
}

.landingpage {
background-image: url('../images/landingbg_01.jpg') !important;
background: no-repeat center center;
background-size: 600px auto;
max-height: 337px;
}	

#landingtitle {
margin-top: 20px;
margin-bottom: 10px;
}

#landingtitle h2 {
font-size: 30px;
}

#bigclientbox {
height: auto;
width: 140px;
}

#bigcreativebox {
height: auto;
width: 140px;
margin-left: 20px;
margin-bottom: 20px;	
}

#boxinner {
padding: 15px;
display: flex;
align-items: center; /* horizontal */
justify-content: center; /* vertical */
}

#boxinner p {
font-size: 13px;
}

#welcometext {
margin-top: 20px;
}

div#welcometext h2 {
margin-bottom: 10px;
}

div#welcometext p {
font-size: 18px;
}

.contactpage {
background-image: url('../images/contactbg_01.jpg') !important;
background: no-repeat center top;
background-size: 1250px auto;
max-height: 650px;
}

#contactform {
margin-top: 0px;
background-color: rgba(161, 0, 0, .50);
padding: 15px;
color: #dddddd;
margin-bottom: 30px;
}

#contactform p {
font-weight: 900;
font-size: 24px;
text-transform: uppercase;
margin-bottom: 5px;
}

.contact input {
padding: 5px;
box-shadow: 0px 0px 10px #999999 inset;
width: 286px;
margin-bottom: 8px;
margin-top: 5px;
font-size: 11px;
}

.contact textarea {
padding: 6px;
box-shadow: 0px 0px 10px #999999 inset;
width: 286px;
margin-bottom: 10px;
min-height: 180px;
font-size: 11px;
margin-top: 5px;
}

.contact label {
font-size: 13px;
margin-bottom: 40px;
}


input[type=submit], input[type=reset] {
width: 50%;
padding: 10px;
box-shadow: 0px 0px 10px #750707 inset;
margin-bottom: 10px;
}

div .g-recaptcha {
margin-bottom: 10px;
}
	
#topnav_home {
width: 268px;
padding: 15px 0 13px 30px;
}

#contactmarketing {
display: none;
}

#topnav_home h1 {
font-size: 18px;
margin-bottom: 0;
}

#topnav_client, #topnav_films, #topnav_extras, #topnav_contact {
width: 75px;
font-size: 11px;
height: 10px;
}

#topnav_client {
margin-left: 0px;
}

div#groupbanner {
margin-top: 80px;
height: 80px;	
border-bottom: 6px solid #a10000;
min-width: 300px;
}

figure.group-banner-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  filter: grayscale(100%);
  min-width: 300px;
}

figure.group-banner-img {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding-top: 48%;
  position: relative;
  min-width: 300px;
}

#body1 {
padding-bottom: 0px;
}

h2.gamma {
font-size: 16px;
padding-top: 10px;
margin-bottom: 5px;
}

#showcase_container {
display: none !important;
}

#latest_container h2 {
font-size: 20px;
}

#latest_container h3 {
font-size: 18px;
}

#latest_container p {
font-size: 12px;
}

.dateline {
font-size: 8px !important;
}

#footer1 a {
width: 100px;
text-align: center;
}

#footer1 a.footersocial {
width: 29px;
padding-top: 14px;
padding-bottom: 6px;
padding-left: 2px;
padding-right: 2px;
}

#footer1 a.footersocial img {
width: 20px;
height: 20px;
}

div#footer2 div div#films-tile {
display: none;
}

#about-footer {
margin-left: -10px;
}

#about-footer H4 {
margin-top: 0px;
font-size: 18px;
}

#about-footer p {
font-size: 12px;
margin-bottom: 8px;
}

#about-footer a {
font-size: 12px;
}

.services_page h2 {
font-size: 28px;
}

	}
	



/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

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

.client480 {
	display: block;
}

.client300, .client768, .clientbase, .client1280, .client1620 {
	display: none;
}

.landingpage {
background-image: url('../images/landingbg_01.jpg') !important;
background: no-repeat center top fixed;
background-size: 800px auto;
max-height: 450px;
}	

#landingtitle {
margin-top: 140px;
margin-bottom: 20px;
}

#landingtitle h2 {
font-size: 34px;
}

#bigclientbox {
height: auto;
width: 200px;
}

#bigcreativebox {
height: auto;
width: 200px;
margin-left: 20px;
margin-bottom: 20px;	
}

#boxinner {
padding: 20px;
display: flex;
align-items: center; /* horizontal */
justify-content: center; /* vertical */
}

#boxinner p {
font-size: 16px;
}

#welcometext {
margin-top: 20px;
}

div#welcometext h2 {
margin-bottom: 10px;
}

div#welcometext p {
font-size: 20px;
}

.contactpage {
background-image: url('../images/contactbg_01.jpg') !important;
background: no-repeat center top fixed;
background-size: 1360px auto;
max-height: 685px;
}

#contactmarketing {
display: none;
}

#contactform {
margin-top: 20px;
background-color: rgba(161, 0, 0, .50);
padding: 15px;
color: #dddddd;
margin-bottom: 20px;
}

#contactform p {
font-weight: 900;
font-size: 32px;
text-transform: uppercase;
margin-bottom: 10px;
}

.contact input {
padding: 6px;
box-shadow: 0px 0px 10px #999999 inset;
width: 400px;
margin-bottom: 10px;
margin-top: 5px;
font-size: 12px;
}

.contact textarea {
padding: 6px;
box-shadow: 0px 0px 10px #999999 inset;
width: 400px;
margin-bottom: 20px;
min-height: 180px;
font-size: 12px;
margin-top: 5px;
}

.contact label {
font-size: 14px;
margin-bottom: 40px;
}


input[type=submit], input[type=reset] {
width: 50%;
padding: 10px;
box-shadow: 0px 0px 10px #750707 inset;
margin-bottom: 10px;
}

div .g-recaptcha {
margin-bottom: 20px;
}

#topnav_home {
/*width: 390px;*/
width: 150px;
padding: 14px 0 14px 30px;
}

#topnav_home h1 {
/*font-size: 21px;*/
font-size: 13px;
margin-bottom: 0;
}

#topnav_client, #topnav_films, #topnav_extras, #topnav_contact {
/*width: 105px;*/
width: auto;
font-size: 11px;
padding-left: 6px;
padding-right: 6px;
}

#topnav_client {
margin-left: 0px;
}

div#groupbanner {
height: 150px;
border-bottom: 8px solid #a10000;
}

#body1 {
padding-bottom: 0px;
}

#showcase_container {
display: none !important;
}

#latest_container h2 {
font-size: 24px;
}

#latest_container h3 {
font-size: 20px;
}

#latest_container p {
font-size: 14px;
}

.dateline {
font-size: 10px !important;
}

h2.gamma {
font-size: 22px;
padding-top: 10px;
margin-bottom: 5px;
}

#body_container2 {
margin-bottom: 10px;
baclground-color: red !important;
}



#footer1 a {
width: 70px;
padding-top: 15px;
padding-bottom: 15px;
}

#footer1 a.footersocial {
width: 19px;
padding-top: 14px;
padding-bottom: 6px;
padding-left: 2px;
padding-right: 2px;
}

#footer1 a.footersocial img {
width: 18px;
height: 18px;
}

div#footer2 div div#films-tile {
display: none;
}

#about-footer {
margin-left: -10px;
}

#about-footer H4 {
margin-top: 0px;
font-size: 20px;
}

#about-footer p {
font-size: 14px;
margin-bottom: 10px;
}

#about-footer a {
font-size: 14px;
}

.services_page h2 {
font-size: 32px;
}

	
	}
	

	

/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {

.client768 {
	display: block;
}

.client300, .client480, .clientbase, .client1280, .client1620 {
	display: none;
}


.landingpage {
background-image: url('../images/landingbg_01.jpg') !important;
background: no-repeat center top fixed;
background-size: 1200px auto;
max-height: 675px;
}

#landingtitle {
margin-top: 240px;
margin-bottom: 20px;
}

#landingtitle h2 {
font-size: 38px;
}

#bigclientbox {
height: auto;
}

#bigcreativebox {
height: auto;
margin-left: 90px;	
}

#boxinner {
padding: 30px;
display: flex;
align-items: center; /* horizontal */
justify-content: center; /* vertical */
}

#boxinner p {
font-size: 22px;
}

#contactform {
margin-top: 30px;
padding: 20px;
}

#contactform p {
font-size: 28px;
margin-bottom: 10px;
}

.contact input {
padding: 10px;
box-shadow: 0px 0px 10px #999999 inset;
width: 340px;
margin-bottom: 15px;
margin-top: 5px;
font-size: 14px;
}

.contact textarea {
padding: 10px;
box-shadow: 0px 0px 10px #999999 inset;
width: 340px;
margin-bottom: 20px;
min-height: 180px;
font-size: 14px;
margin-top: 5px;
}

.contact label {
font-size: 14px;
margin-bottom: 40px;
}


input[type=submit], input[type=reset] {
width: 50%;
padding: 10px;
box-shadow: 0px 0px 10px #750707 inset;
margin-bottom: 10px;
}

#contactmarketing p {
font-size: 44px;
margin-top: 40px;
}
	
#topnav_home {
width: 206px;
padding: 15px 0 13px 30px;
}

#topnav_home h1 {
font-size: 18px;
margin-bottom: 0;
}

#topnav_client, #topnav_films, #topnav_extras, #topnav_contact {
width: 103px;
}

#topnav_client {
margin-left: 120px;
}

div#groupbanner {
height: 200px;
border-bottom: 10px solid #a10000;
}

#showcase_container h2 {
font-size: 24px;
}

#social_left {
margin-left: 10px;
margin-right: 10px;
}

#social_left a {
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 0px;
border-radius: 20px;
}

#latest_container h2 {
font-size: 24px;
}

h2.gamma {
font-size: 28px;
margin-bottom: 25px;
}

#films-tile a div.video_content {
min-height: 245px;
}

p.films-tile-title {
font-size: 17px;
}

p.films-tile-genre, p.films-tile-year {
font-size: 13px;
}

#footer1 a {
width: 128px;
}

#footer1 a.footersocial {
width: 42px;
}

#about-footer {
margin-left: 0px;
}

#about-footer a {
font-size: 16px;
}

#about-footer h4 {
margin-top: 0px;
}

#about-footer p {
font-size: 16px;
}

#welcometext {
margin-top: 0px;
}

div#welcometext p {
font-size: 20px;
}

div#welcometext h2 {
margin-left: 0px;
padding-left: none;
border-bottom: none;
text-align: center;
font-size: 30px;
text-transform: uppercase;
font-family: 'Roboto';
color: #666666;
}

a.contactbutton {
margin-left: 20px !important;
margin-right: 20px !important;
}

.contactpage {
background-image: url('../images/contactbg_01.jpg') !important;
background: no-repeat center top fixed;
background-size: 1400px auto;
max-height: 900px;
}

@keyframes movingmarketingtext {
0%	{top: 0px}
18%	{top: 0px}
20% { top: -57px;}
38% { top: -57px;}
40% { top: -114px;}
58% { top: -114px;}
60% { top: -171px;}
78% { top: -171px;}
80% { top: -228px;}
98% { top: -228px;}
100%	{top: -285px;}
}

#movingmarketingtext {
animation: movingmarketingtext 10s ease-in-out infinite !important;
color: #a10000 !important;
position: relative;
}
#movingmarketingtextwrapper {
	display: block;
overflow: hidden !important;
height: 55px !important;
}

.services_page h2 {
font-size: 36px;
}

#clientbase, #client480, #client300 {
	display: none;
}
	
	}
	
/* #Additional - Large Screens beyond 1280px
================================================== */

    /* Note: Design for a width of 1280px */

    @media only screen and (min-width: 1280px) {

.client1280 {
	display: block;
}

.client300, .client480, .client768, .clientbase, .client1620 {
	display: none;
}
	
div.filmspage div.one-third {
width: 300px !important;
}

div.clientpage div.two-thirds {
width: 822px !important;
}

div#landingtitle {
margin-left: 175px;
}

div#bigclientbox {
width: 400px;
margin-left: 175px;
}

div#bigcreativebox {
width: 400px;
}

.landingpage {
background-image: url('../images/landingbg_01.jpg') !important;
background: no-repeat center top fixed;
background-size: 1620px auto;
max-height: 820px; 
}

#topnav_home {
width: 244px;
}

#topnav_client {
margin-left: 316px;
}

#topnav_client, #topnav_films, #topnav_extras, #topnav_contact {
width: 170px;
}

.contactpage {
background-image: url('../images/contactbg_01.jpg') !important;
background: no-repeat center top fixed;
background-size: cover;
}

.contact input {
width: 594px;
}

.contact textarea {
width: 594px;
}

input[type=submit], input[type=reset] {
width: 40%;
}	

#footer1 a {
width: 213px;
}

#footer1 a.footersocial {
width: 71px;
}	
		
		
}


/* #Additional - Large Screens beyond 1620px
================================================== */

    /* Note: Design for a width of 1620px */

    @media only screen and (min-width: 1620px) {

.client1620 {
	display: block;
}

.client300, .client480, .client768, .clientbase, .client1280 {
	display: none;
}

div.clientpage div.two-thirds {
width: 1056px !important;
}

div#landingtitle {
margin-left: 235px;
}	

div#bigclientbox {
width: 500px;
margin-left: 235px;
}

div#bigcreativebox {
width: 500px;
}

.landingpage {
background-image: url('../images/landingbg_01.jpg') !important;
background: no-repeat center top fixed;
background-size: cover;
}

#topnav_home {
width: 244px;
}

#topnav_client {
margin-left: 540px;
}

#topnav_client, #topnav_films, #topnav_extras, #topnav_contact {
width: 200px;
}	

div#groupbanner {
margin-top: 14px;
height: 330px;
overflow: hidden;
border-bottom: 10px solid #a10000;
}

.contactpage {
background: no-repeat center bottom fixed;
background-size: cover;
}

.contact input {
width: 774px;
}

.contact textarea {
width: 774px;
}

input[type=submit], input[type=reset] {
width: 40%;
}

#footer1 a {
width: 270px;
}

#footer1 a.footersocial {
width: 90px;
}



	
		
}