/* =============================================
				Custom
============================================= */
@font-face {

  font-family:'Open Sans';

  font-style:normal;

  font-weight:400;

  src:local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');

}

body {

  margin:0 auto;

  width:100%;

  background:#ffffff;

  font-family:'Open Sans', sans-serif;

}

.center {

  text-align:center;

  margin:0 auto;

}

header {

  overflow:auto;

  padding:25px 0;

}

header h1 {

  margin:0;

  float:left;

  width:24%;

}

.contentwrap {

  width:100%;

  margin:0 auto;

  max-width:1080px;

}

.crumbs {

  font-size:12px;

  color:#999999;

  background-image:url(images/divider-red.jpg);

  background-repeat:repeat-x;

  background-position:left bottom;

  overflow:auto;

  padding-bottom:20px;

  margin-bottom: 22px;

  position:relative;

}

.crumbs li {

  float:left;

  text-transform:capitalize;

}

.crumbs a {

  color:#cc0000;

  font-weight:normal;

  background:url(images/breadcrumb-arrow.jpg) no-repeat scroll right center transparent;

  padding:0pt 24px 2px 0pt;

}

#nav-below {

  clear:both;

  padding:0 0 25px 0;

  overflow:auto;

}

#nav-below a {

  color:#cc0000;

  letter-spacing:2px;

  text-transform:uppercase;

  text-decoration:none;

  font-size:15px;

  -o-transition:.5s;

  -ms-transition:.5s;

  -moz-transition:.5s;

  -webkit-transition:.5s;

  transition:.5s;

}

#nav-below a .dubquo { font-size:20px; }

#nav-below #next { float:right; }

#nav-below #prev { float:left; }

.slider { background:#ffffff; }

.slider .rslides {

  max-width:1080px;

  margin:0 auto;

}

.homepage.slider { background:#ffffff; }

.homepage.slider .rslides {

  max-width:1080px;

  margin:0 auto;

}

.posts a.cs_link {

  display:block;

  width:23%;

  margin-right:2.66%;

  float:left;

  position:relative;

  margin-bottom:24px;

}

.posts a.cs_link article .outer {

  max-height:160px;

  overflow:hidden;

  position:relative;

}

.posts a.cs_link article .outer .post_thumb img {

  width:100%;

  height:auto;

}

.posts a.cs_link article .outer .overlay {

  position:absolute;

  top:74%;

  left:0;

  background:rgba(0,0,0,0.75);

  width:100%;

  height:100%;

  padding-left:2px;

  padding-top: 4px;

  transition:.5s all;

  -ms-transition:.5s all;

  -moz-transition:.5s all;

  -o-transition:.5s all;

  -webkit-transition:.5s all;

}

.posts a.cs_link article .outer .overlay .entry-title {

  color:#eaeaea;

  font-size:12px;

  margin:0 2px 0 4px;

  padding-right:10px;

}

.posts a.cs_link article .outer .overlay h4 {

  color:#cc0000;

  font-size:12px;

  margin:0 0 0 4px;

  margin-top:50px;

  transition:.5s all;

  -ms-transition:.5s all;

  -moz-transition:.5s all;

  -o-transition:.5s all;

  -webkit-transition:.5s all;

}

.posts a.cs_link article .outer .overlay .view {

  color:#ffffff;

  position:absolute;

  bottom:8px;

  left:0px;

  margin:0;

  font-size:14px;

  opacity:0;

  text-transform:capitalize;

  font-size:11px;

  transition:.25s .5s all;

  -ms-transition:.25s .5s all;

  -moz-transition:.25s .5s all;

  -o-transition:.25s .5s all;

  -webkit-transition:.25s .6s all;

}

.posts a.cs_link article .outer:hover .overlay { top:0; }

.posts a.cs_link article .outer:hover h4 {

  opacity:1;

  margin-top:0;

}

.posts a.cs_link article .outer:hover .view {

  left:10px;

  opacity:1;

}

.posts a.cs_link:nth-of-type(4n+4) { margin-right:0; }

.posts a.cs_link:nth-of-type(4n+1) { clear:left; }

#spotlight {

  

  margin-top:-10px;

}
#SidePicture{

  width:30%;
  float:right;

}

#spotlight .featured {

  width:30%;

  margin-right:5%;

  float:left;

}

#spotlight .featured img { width:100%; }

#spotlight .featured:nth-of-type(3) { margin-right:0; }

#spotlight .featured h2 {

  margin:0;

  padding:4px 0;

  font-weight:normal;

  font-size:20px;

  color:#cc0000;

}

#spotlight .featured h2:hover {

  color: #333333;

  -o-transition:.5s;

  -ms-transition:.5s;

  -moz-transition:.5s;

  -webkit-transition:.5s;

  transition:.5s;

}

#spotlight .featured .mobile-title { display:none; }

#spotlight .featured p {

  font-family:Georgia, "Times New Roman", Times, serif;

  font-size:13px;

  color:#000000;

  margin-top:10px;

  line-height:1.5;

}

#spotlight .featured .go {

  margin-top:20px;

  font-style:italic;

}

#spotlight .featured .go a {

  color:#cc0000;

  transition:color .5s ease-in;

  -moz-transition:color .5s ease-in;

  -o-transition:color .5s ease-in;

  -ms-transition:color .5s ease-in;

  -webkit-transition:color .5s ease-in;

}

#spotlight .featured .go a:hover { color:#333333; }

#spotlight .explore_more {

  font-family:'Open Sans', sans-serif;

  border-top:1px dotted #cccccc;

  color:#999999;

  font-weight:normal;

  clear:both;

  font-weight:lighter;

  font-size:18px;

  text-transform: uppercase;

  letter-spacing: 1px;

}

#spotlight .explore_more:first-of-type {

  border-top:none;

}

.contentwrap.single { overflow:auto; }

.contentwrap.single .left {

  float:left;

  width:20%;

  margin-right:3%;

}

.contentwrap.single .left h4 {

  color:#333333;

  font-size:12px;

  font-weight:bold;

  letter-spacing:2px;

  margin-bottom: -13px;

  margin-top: 25px;

  text-transform:uppercase;

}

.contentwrap.single .left ul { text-transform:capitalize; }

.contentwrap.single .left ul li { line-height:21px; }

.contentwrap.single .left ul li a {

  color:#cd0000;

  text-decoration:underline;

  font-size:12px;

  -o-transition:.5s;

  -ms-transition:.5s;

  -moz-transition:.5s;

  -webkit-transition:.5s;

  transition:.5s;

}

.contentwrap.single .left ul li a:hover {

  color:#333333;

  text-decoration:none;

}

.contentwrap.single .left .lefttop, .contentwrap.single .left .leftbot {

  background:#f7f7f7;

  border-top:5px solid #eaeaea;

  padding-bottom:1px;

}

.contentwrap.single .left .lefttop {

  padding:18px;

  margin-bottom:18px;

}

.contentwrap.single .left .leftbot h2 { font-weight:normal; }

.contentwrap.single .left .leftbot h2 a {

  display:block;

  height:36px;

  line-height:36px;

  text-align:center;

  color:#ffffff;

  font-size:15px;

  margin:0 auto;

  background:#cd0000;

  -moz-border-radius:4px;

  -webkit-border-radius:4px;

  border-radius:4px;

  -o-transition:.5s;

  -ms-transition:.5s;

  -moz-transition:.5s;

  -webkit-transition:.5s;

  transition:.5s;

  width: 180px;

}

.contentwrap.single .left .leftbot h2 a:hover { background:#333333; }

.contentwrap.single .right {

  width:77%;

  float:left;

}

.contentwrap.single .right h1 {

  color:#9e0f11;

  font-size:32px;

  margin-bottom:13px;

  margin-top:0;

}

.contentwrap.single .right h3 {

  color:#cd0000;

  font-size:13px;

  letter-spacing:1px;

  text-transform:uppercase;

  padding-top: 10px;

  margin-bottom:-13px;

}

.contentwrap.single .right p {

  font-size:12px;

  line-height:20px;

  color:#000000;

  margin-bottom:16px;

}

.contentwrap.single .right .tagline p {

  font-size:18px;

  color:#333333;

  line-height:25px;

  margin-bottom:13px;

}

.contentwrap.single .right #media .vid_embed { margin-bottom:25px; }

.contentwrap.single .mob_under { display:none; }

#related {

  background:url(img/related.png) no-repeat center top;

  overflow:auto;

  padding-top:35px;

  margin-top:35px;

  margin-bottom:20px;

}

#footer_area {

  width:100%;

  background:#333333;

  overflow:auto;

  font-family:'Open Sans', sans-serif;

  text-align:left;

  font-size:12px;

  line-height:22px;

  color:#000000;

  padding:25px 0 21px 0;

}

#footer_area .page {

  width:100%;

  max-width:1099px;

  margin:0 auto;

}

#footer_area .page .footer-header {

  color:#cccccc;

  text-transform:uppercase;

  letter-spacing:1px;

  font-weight:700;

}

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

  .contentwrap {

    width:98%;

    overflow:auto;

    padding:0 1%;

  }

  .custom #logo { padding-left:0; }

}

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

  .custom #content { padding-top:0px; }

  .contentwrap.single .left {

    width:25%;

    margin-right:3%;

  }

  .contentwrap.single .right { width:70%; }

  .posts a.cs_link {

    width:25%;

    margin-bottom:0;

    margin-right:0;

  }

  .posts a.cs_link article .outer .overlay { top:72%; }

  .posts a.cs_link article .outer .overlay .entry-title { font-size:11px; }

}

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

  .mob_hide { display:none; }

  .contentwrap.posts { max-width:320px; }

  .contentwrap.posts .crumbs ul, .contentwrap.posts .crumbs #tagSelector { display:none; }

  .contentwrap.posts #spotlight .featured {

    width:100%;

    margin-right:0;

    padding-bottom:20px;

    margin-bottom:20px;

    border-bottom:1px dotted #cccccc;

  }

  .contentwrap.posts #spotlight .featured:nth-of-type(3) {

    margin-bottom:0;

    border-bottom:none;

  }

  .contentwrap.posts #spotlight .featured img { width:100%; }

  .contentwrap.posts #spotlight .featured .entry-title { display:none; }

  .contentwrap.posts #spotlight .featured .mobile-title { display:block; }

  .contentwrap.posts #spotlight .featured .go {

    float:right;

    padding-bottom:0;

    margin:0 0 10px 0;

  }

  .contentwrap.posts .cs_link {

    width:100%;

    float:none;

    margin:0 auto 25px auto;

  }

  .contentwrap.single .crumbs ul, .contentwrap.single .crumbs #tagSelector { display:none; }

  .contentwrap.single .right { width:100%; }

  .contentwrap.single .mob_under {

    display:block;

    clear:both;

    background:#f7f7f7;

    border-top:2px solid #eaeaea;

    border-bottom:2px solid #eaeaea;

    padding:0 16px 0 16px;

  }

  .contentwrap.single .mob_under .center { display:none; }

  .contentwrap.single .mob_under h4 {

    color:#333333;

    font-size:12px;

    font-weight:bold;

    letter-spacing:2px;

    margin-bottom:6px;

    margin-top:18px;

    text-transform:uppercase;

  }

  .contentwrap.single .mob_under ul { margin:0 0 10px 0; }

  .contentwrap.single .mob_under ul {

    margin-bottom:20px;

    overflow:auto;

  }

  .contentwrap.single .mob_under ul li { float:left; }

  .contentwrap.single .mob_under ul li:after { content:" | "; }

  .contentwrap.single .mob_under ul li:last-of-type:after { content:none; }

  .contentwrap.single .mob_under ul li a { color:#cc0000; }

  .contentwrap.single .mob_under h2 { font-weight:normal; }

  .contentwrap.single .mob_under h2 a {

    clear:both;

    max-width:320px;

    margin:20px auto;

    display:block;

    height:36px;

    line-height:36px;

    text-align:center;

    color:#ffffff;

    font-size:15px;

    margin:0 auto;

    background:#cd0000;

    -moz-border-radius:4px;

    -webkit-border-radius:4px;

    border-radius:4px;

    -o-transition:.5s;

    -ms-transition:.5s;

    -moz-transition:.5s;

    -webkit-transition:.5s;

    transition:.5s;

  }

  .contentwrap.single .mob_under h2 a:hover { background:#333333; }

}

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

  .contentwrap.posts { max-width:480px; }

  .contentwrap.posts #spotlight .featured {

    width:100%;

    margin-right:0;

    padding-bottom:20px;

    margin-bottom:20px;

    border-bottom:1px dotted #cccccc;

  }

  .contentwrap.posts #spotlight .featured:nth-of-type(3) {

    margin-bottom:0;

    border-bottom:none;

  }

  .contentwrap.posts #spotlight .featured img {

    max-width:50%;

    float:left;

    margin-right:2%;

  }

  .contentwrap.posts #spotlight .featured .go {

    float:right;

    padding-bottom:0;

  }

  .contentwrap.posts a.cs_link {

    width:48%;

    float:left;

    margin-bottom:15px;

    margin-right:4%;

  }

  .contentwrap.posts a.cs_link:nth-of-type(even) { margin-right:0; }

  .contentwrap.posts a.cs_link:nth-of-type(odd) { clear:left; }

  .contentwrap.posts a.cs_link article .outer .overlay { top:75%; }

}

@media only screen and (max-width: 767px) and (orientation: portrait) {

}


/* =============================================
			General 
============================================= */

* {
margin:0;
padding:0;
}

html,body {
	height: 100%;
	font-family: 'Open Sans', sans-serif;
	color: #000;
}

#wrapper {
min-height:100%;
}

.clear {
clear:both;
}

#content {
padding-bottom:180px;
margin:0 auto;
}

#main,
#navigation,
#headwrap,
.inwrap {
width:100%;
max-width:1080px;
margin:0 auto;
}
#Content{
float:left;
width:66%;
max-width:1080px;
margin:0 auto;
margin:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:13px;
color:#000000;
}
#Content a{
color:#cc0000;
text-decoration:none;
}
#Content a:hover{
color:#920000;
text-decoration: underline;
}

#Content h1{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
font-style:italic;
color:#cc0000;
}

input[type=submit] {
-webkit-appearance: none;
}

img {
max-width: 100%;
height: auto;
}

/* - - - - - - - - - - - - -  BREADCRUMBS */

#breadcrumbs {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
padding-top: 10px;
background-color:#fff;
line-height: 20px;
overflow:auto;
text-align:center;
}
#breadcrumbs ul, #breadcrumbs li {
list-style-type:none; 
padding:0;
margin:0;
}
#breadcrumbs li {
float:left;
padding-left:0px;
}
#breadcrumbs li a {
padding:0 24px 2px 0;
background:url(images/breadcrumb-arrow.jpg) no-repeat right center;
}
#breadcrumbs li a:link, #breadcrumbs li a:visited {
text-decoration:none;
color:#cc0000;
}
#breadcrumbs li a:hover, #breadcrumbs li a:focus {
underline; color:#000000;
}
#breadcrumbs li a.current{
color:#000000;
}

#breadcrumbs li {
color: #999999;
}

/* =============================================
			Header 
============================================= */
#header {
width:100%;
position:fixed;
background-color:#FFF;
z-index:99999;
top:0;
height:26px;
margin:0 auto;
}

.custom #logo {
width:240px;
float:left;
text-align:left;
padding-top:11px;
padding-left: 10px;
}

/* =============================================
			Navigation 
============================================= */

#navshadow {
width:100%;
height: 15px;
max-width:1080px;
position:fixed;
z-index:100;
margin-top:-24px;
padding:0;
background: url(../images/navshadow.png);
background-position: center top;
}

.custom #nav {
font-family:'Open Sans', sans-serif;
max-width:1093px;
padding-top:25px;
margin:0 auto;
}

#navwrap {
width:100%;
position:fixed;
top:0;
left:0;
background-color:#FFF;
padding-bottom:25px;
z-index:99;
}

.custom #links {
max-width:825px;
float:right;
color:#C00;
font-size:12px;
text-align:right;
padding-top:13px;
padding-right:14px;
letter-spacing:1px;
}

.custom #links a {
margin-left:30px;
color:#666;
text-decoration:none;
-webkit-transition:.5s;
-moz-transition:.5s;
-o-transition:.5s;
transition:.5s;
}

.custom #links a.current {
color:#C00;
}

#links a:hover {
color:#c00;
}

.divider-red {
display: block;
width: auto;
max-width: 1080px;
height: 8px;
background: url('../images/divider-red.jpg') repeat-x;
padding: 10px 0px;
margin-top: 12px;
}

/* =============================================
			Index  
============================================= */

/* ============================ Camera Slider	 */

#banner-container {
height:36%;
background:url() #fff top center no-repeat;
margin-top:89px;
position:relative;
}

#banner {
height:36%;
width:100%;
max-width:1080px;
margin:89px auto 0 auto;
}

#back_to_camera {
clear:both;
display:block;
height:80px;
line-height:40px;
padding:20px;
}

#headeroverlay {
display:block;
position:absolute;
width:100%;
top:0;
background:url(../images/header-overlay.png) no-repeat;
background-size:contain;
background-position:50% 50%;
height:396px;
}

#banner-overlay {
margin:0 auto;
}

.outwrap {
width:auto;
}

#banner-container2,
#headeroverlay-mob,
.camera_loader,
.camera_prev,.camera_next,
.camera_commands,
.camera_pag,
div#creditfooter,
#mobile-slider {
display:none;
}

/* =========================== Client Logos */

#client-logos-mobile {
display:none;
text-align:center;
}

#divider {
background:url(http://www.magnetmediafilms.com/what-we-do/images/divider-dots.jpg) repeat-x;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:13px;
font-style:italic;
text-align:center;
color:#666;
margin-top:25px;
margin-bottom:25px;
}

.divider-short {
display:block;
background:url(http://www.magnetmediafilms.com/what-we-do/images/divider-dots.jpg) repeat-x;
height:10px;
}

.red-divider {
display:block;
height:8px;
background:url(http://www.magnetmediafilms.com/what-we-do/images/divider-red.jpg) repeat-x;
margin-bottom:5px;
}

#client-logos img,
#client-logos-mobile img,
#banner-overlay img,
#headeroverlay-mob img {
max-width:100%;
height:auto;
}

/* ============================ Feeds */

#feeds {
margin-top:25px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#666;
line-height:19px;
}

#feeds a {
text-decoration:none;
color:#333;
font-family:'Open Sans', sans-serif;
font-size:12px;
font-style:normal;
font-weight:700;
}

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

#blogfeed,#resourcesfeed {
width:30%;
float:left;
font-size:13px;
margin-right:2%;
padding-bottom:25px;
font-style:italic;
}

#blogfeed {
padding-left:1%;
}

#clientfeed {
padding-right:1%;
width:30%;
float:left;
font-size:13px;
padding-bottom:25px;
font-style:italic;
}

#resourcesfeed,#clientfeed {
margin-top:0;
}

#blogfeed li,#resourcesfeed li,#clientfeed li {
margin-bottom:15px;
list-style-type:none;
padding:0;
}

#blogfeed a.feed-header,#resourcesfeed a.feed-header,#clientfeed a.feed-header {
color:#c00;
font-style:normal;
font-family:'Open Sans', sans-serif;
font-weight:300;
letter-spacing:1px;
font-size:18px;
text-decoration:none;
-o-transition:.75s;
-ms-transition:.75s;
-moz-transition:.75s;
-webkit-transition:.75s;
transition:.75s;
}

#blogfeed a.feed-header:hover,#resourcesfeed a.feed-header:hover,#clientfeed a.feed-header:hover {
color:#333;
}

.feed-subheader {
font-style:normal;
font-family:'Open Sans', sans-serif;
color:#999;
}

#feeds .viewmore {
font-family:Georgia, serif;
color:#c00;
font-style:italic;
font-weight:400;
}

#feeds .viewmore a {
font-family:Georgia, serif;
color:#c00;
font-style:italic;
font-weight:400;
-o-transition:.75s;
-ms-transition:.75s;
-moz-transition:.75s;
-webkit-transition:.75s;
transition:.75s;
}

#feeds .viewmore a:hover {
color:#333;
text-decoration:none;
}

/* =============================================
			About Us 
============================================= */

#banner-container2 {
width: 100%;
}   

#aboutpage p {
margin-bottom: 30px;
font-size: 14px;
}

#bottomlinks {
width: 100%;
max-width: 1080px;
padding: 25px 0px 50px 0px;
text-align: center;
}
#bottomlinks a {
background-color: #EAEAEA;
padding: 18px 35px;
color: white;
text-decoration: none;
border: 1px solid #900;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#cc0000', endColorstr = '#970000');
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#cc0000', endColorstr = '#970000')";
background-image: -moz-linear-gradient(top, #C00, #970000);
background-image: -ms-linear-gradient(top, #C00, #970000);
background-image: -o-linear-gradient(top, #C00, #970000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#C00), to(#970000));
background-image: -webkit-linear-gradient(top, #C00, #970000);
background-image: linear-gradient(top, #C00, #970000);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-o-transition: .75s;
-ms-transition: .75s;
-moz-transition: .75s;
-webkit-transition: .75s;
transition: .75s;
margin-right: 25px;
}

#bottomlinks a:hover {
border: 1px solid #333;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#444444', endColorstr = '#222222');
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#444444', endColorstr = '#222222')";
background-image: -moz-linear-gradient(top, #444, #222);
background-image: -ms-linear-gradient(top, #444, #222);
background-image: -o-linear-gradient(top, #444, #222);
background-image: -webkit-gradient(linear, center top, center bottom, from(#444), to(#222));
background-image: -webkit-linear-gradient(top, #444, #222);
background-image: linear-gradient(top, #444, #222);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}

/* =============================================
			Contact Us
============================================= */

#contactpage #main {
margin-top: 85px;
}
#contactpage h1 {
font-size: 28px;
font-weight: 300;
color: #C00;
}
.af-body .af-textWrap textarea {
max-width: 100%;
}
#form {
width: 100%;
max-width: 702px;
padding: 15px;
display: block;
background-color: #eaeaea;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-top: 20px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}
#left {
float: left;
width: 64.8%;
text-align: left;
font-size: 14px;
}
#right {
float: right;
width: 30%;
text-align: left;
font-size: 12px;
line-height: 22px;
margin-top: 25px;
margin-bottom: 25px;
}
#right img {
max-width: 100%;
height: auto;
}
#right a,
#left a {
color: #C00;
-o-transition: .75s;
-ms-transition: .75s;
-moz-transition: .75s;
-webkit-transition: .75s;
transition: .75s;
text-decoration: none;
}
#right a:hover,
#left a:hover {
text-decoration: underline;
}
#conbottomlinks {
margin-top: 75px;
text-align: center;
}

#conbottomlinks a {
background-color: #eaeaea;
padding: 2% 5%;
color: white;
text-decoration: none;
border: 1px solid #990000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#cc0000', endColorstr = '#970000');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#cc0000', endColorstr = '#970000')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #cc0000, #970000);
background-image: -ms-linear-gradient(top, #cc0000, #970000);
background-image: -o-linear-gradient(top, #cc0000, #970000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#cc0000), to(#970000));
background-image: -webkit-linear-gradient(top, #cc0000, #970000);
background-image: linear-gradient(top, #cc0000, #970000);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
-o-transition:.75s;
-ms-transition:.75s;
-moz-transition:.75s;
-webkit-transition:.75s;
transition:.75s;
margin: 0 2%;
font-size: 14px;
}
#conbottomlinks a:last-of-type {
margin-right: 0;
}
#conbottomlinks a:first-of-type {
margin-left: 0;
}
#conbottomlinks a:hover {
border: 1px solid #333333;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#444444', endColorstr = '#222222');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#444444', endColorstr = '#222222')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #444444, #222222);
background-image: -ms-linear-gradient(top, #444444, #222222);
background-image: -o-linear-gradient(top, #444444, #222222);
background-image: -webkit-gradient(linear, center top, center bottom, from(#444444), to(#222222));
background-image: -webkit-linear-gradient(top, #444444, #222222);
background-image: linear-gradient(top, #444444, #222222);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
}
#conbottomlinks a:active {
background: #222222;
}
#conbottomlinks a img {
position: relative;
top: 2px;
left: -3px;
}
#confirmpage #main {
padding-top: 89px;
min-height: 413px;
}

/* =============================================
			What We Do
============================================= */

#services {
margin-top: 12px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #666;
line-height: 20px;
overflow: auto;
border: 1px solid #CCC;
}
#services:hover {
color: #333;
}
#services-1,
#services-2 {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
width: 50%;
float: left;
position: relative;
border: 1px solid #CCC;
border-bottom: 0;
text-align: center;	
font-style: italic;
padding: 25px 15px;
}
#services-2 {
border-left: 0px;
}
/*
#services-3 {
float: left;
position: relative;
width: 328px;
border: 1px solid #CCC;
padding: 25px 15px;
text-align: center;
font-style: italic;
}
*/
#services-1 a, #services-2 a, #services-3 a {
color: #cc0000;
text-decoration: none;
}
#services-1 a:hover, #services-2 a:hover, #services-3 a:hover {
color: #000000;
text-decoration: none;
}
#services-1:hover , #services-2:hover, #services-3:hover {
background-color: #eaeaea;
}
.services-title {
font-family: 'Open Sans', sans-serif;
font-size: 25px;	
font-weight: 400;
font-style: normal;
}
.services-title a {
color: #333333;
}
#services-1-full {
border-bottom: 1px dotted #cccccc;
padding: 40px 10px 60px 10px;
font-size: 14px;
line-height: 22px;
}
#services-2-full {
border-bottom: 1px dotted #cccccc;
padding: 60px 10px;
font-size: 14px;
line-height: 22px;
}
#services-3-full {
font-size: 14px;
padding: 60px 0px;
border: 0px;
line-height: 22px;
}
#services-a-left {
width: 47%;
float: left;
padding-right: 3%;
}
#services-a-right, 
#services-b-left {
width: 50%;
float: left;
}
#services-a-right img, 
#services-b-left img {
max-width: 100%;
height: auto;
}
#services-b-right {
width: 47%;
float: right;
padding-left: 3%;
}
.services-overview-title {
font-size: 25px;	
color: #cc0000;
line-height: 32px;
font-weight: normal;
float: left;
}
.services-overview-title  a:hover {
color: #333333;
}
#services-1-full a, #services-2-full a, #services-3-full a {
color: #cc0000;
text-decoration: none;
}
#services-1-full a:hover, #services-2-full a:hover, #services-3-full a:hover {
color: #333333;
}

/* =============================================
							Video Production
============================================= */

#videos {
padding: 15px 0;	
font-size: 13px;
text-align: center;
}
#videos-1,
#videos-2,
#videos-3,
#videos-4,
#videos-5 {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
height: 60px;
float: left;
}
#videos-1 {
width: 19%;
border: 1px solid #CCC;
border-right: 0px;
padding: 15px 5px;
}
#videos-2 {
width: 19%;
border: 1px solid #CCC;
border-right: 0px;
padding: 15px 5px;
}
#videos-3 {
width: 24%;
border: 1px solid #CCC;
border-right: 0px;
padding: 15px 17px;
}
#videos-4 {
width: 19%;
border: 1px solid #CCC;
border-right: 0px;
padding: 15px 5px;
}
#videos-5 {
width: 19%;
border: 1px solid #CCC;
padding: 15px 5px;
}
#videos-1:hover, #videos-2:hover, #videos-3:hover, #videos-4:hover, #videos-5:hover {
background-color: #eaeaea;
}
#videos-1 a, #videos-2 a, #videos-3 a, #videos-4 a, #videos-5 a{
font-family: 'Open Sans', sans-serif;
font-size: 18px;	
font-weight: 400;
color: #333;
text-decoration: none;
}
#videos-1 a:hover, #videos-2 a:hover, #videos-3 a:hover,  #videos-4 a:hover, #videos-5 a:hover {
color: #cc0000;
}
#videos-1-full {
border-bottom: 1px dotted #cccccc;
padding: 40px 0px 60px 0px;
font-size: 14px;
line-height: 22px;
}
#videos-2-full {
border-bottom: 1px dotted #cccccc;
padding: 60px 0px;
font-size: 14px;
line-height: 22px;
}
#videos-3-full {
border-bottom: 1px dotted #cccccc;
padding: 60px 0px;
font-size: 14px;
line-height: 22px;
}
#videos-4-full {
border-bottom: 1px dotted #cccccc;
padding: 60px 0px;
font-size: 14px;
line-height: 22px;
}
#videos-5-full {
border: 0px;
padding: 60px 0px;
font-size: 14px;
line-height: 22px;
}
#videos-a-left {
width: 47%;
float: left;
padding-right: 3%;
}
#videos-a-right {
width: 50%;
float: left;
}
#videos-b-left {
width: 50%;
float: left;
}
#videos-b-right {
width: 47%;
float: right;
padding-left: 3%;
}
#videos-a-right img,
#videos-b-right img,
#videos-a-left img,
#videos-b-left img {
max-width: 100%;
height: auto;
}
.videos-overview-title {
font-size: 25px;	
color: #cc0000;
line-height: 32px;
font-weight: normal;
}
#videos-1-full a, #videos-2-full a, #videos-3-full a, #videos-4-full a, #videos-5-full a {
color: #cc0000;
text-decoration: none;
}
#videoslistmob {
display: none;
}
.mobilevideocontainer {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}
.mobilevideocontainer iframe,
.mobilevideocontainer object,
.mobilevideocontainer embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videocaption {
font-family: 'Open Sans', sans-serif; 
color: #666; 
font-style: italic;
text-align: right; 
font-size: 12px;
}

/* =============================================
					Social Media Interactive
============================================= */

#social {
	padding: 15px 0;	
	font-size: 13px;
	text-align: center;
}
#social-1,
#social-2,
#social-3,
#social-4,
#social-5 {
padding: 15px 15px 10px 15px;
float: left;
height: 4em;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}
#social-1 {
	width: 19%;
	border: 1px solid #CCC;
	border-right: 0px;
}
#social-2 {
	width: 19%;
	border: 1px solid #CCC;
	border-right: 0px;
}
#social-3 {
	float: left;
	width: 20%;
	border: 1px solid #CCC;
	border-right: 0px;
}
#social-4 {
	float: left;
	width: 19%;
	border: 1px solid #CCC;
	border-right: 0px;
}
#social-5 {
	width: 23%;
	border: 1px solid #CCC;
}
#social-1:hover, #social-2:hover, #social-3:hover, #social-4:hover, #social-5:hover {
	background-color: #eaeaea;
}
#social-1 a, #social-2 a, #social-3 a, #social-4 a, #social-5 a {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;	
	font-weight: 400;
	color: #333;
	text-decoration: none;
}
#social-1 a:hover, #social-2 a:hover, #social-3 a:hover, #social-4 a:hover, #social-5 a:hover {
	color: #cc0000;
}
#social-1-full {
	border-bottom: 1px dotted #cccccc;
	padding: 40px 0  60px 0px;
	font-size: 14px;
	line-height: 22px;
}
#social-2-full {
	border-bottom: 1px dotted #cccccc;
	padding: 60px 0px;
	font-size: 14px;
	line-height: 22px;
}
#social-3-full {
	border-bottom: 1px dotted #cccccc;
	padding: 60px 0px;
	font-size: 14px;
	line-height: 22px;
}
#social-4-full {
	border: 0px;
	padding: 60px 0px;
	font-size: 14px;
	line-height: 22px;
}
#social-a-left {
width: 47%;
float: left;
padding-right: 3%;
}
#social-a-right {
width: 50%;
float: left;
}
#social-b-left {
width: 50%;
float: left;
}
#social-b-right {
width: 47%;
float: right;
padding-left: 3%;
}
.social-overview-title {
	font-size: 25px;	
	color: #cc0000;
	line-height: 32px;
	font-weight: normal;
}
#social-1-full a, #social-2-full a, #social-3-full a, #social-4-full a {
	color: #cc0000;
	text-decoration: none;
}
#social-1-full a:hover, #social-2-full a:hover, #social-3-full a:hover, #social-4-full a:hover {
	color: #333333;
}

/* - - - - - - - - - - Strategic Consultation */

.social-full {
	border-bottom: 1px dotted #cccccc;
	padding: 15px 0;
	font-size: 14px;
	line-height: 22px;
}
.social-full-last {
	border: 0px;
	padding: 15px 0;
	font-size: 14px;
	line-height: 22px;
}
.social-left {
	width: 7%;
	float: left;
}
.social-right {
	width: 90%;
	float: right;
	padding-left: 3%;
}
.social-title {
	font-size: 20px;	
	color: #cc0000;
}

/* =============================================
					Careers
============================================= */

#careerspage #jobs a {
color: #C00;
background: none;
font-weight: normal;
text-decoration: none;
}
#careerspage #jobs a:hover {
color: #C00;
text-decoration: underline;
}
#careerspage #jobs {
margin: 30px auto;
padding-top: 30px;
}
#careers {
margin: 30px 0;
list-style: none;
}
#careers li {
margin-bottom: 15px;
}
#careers p {
margin-bottom: 30px;
}
#founded {
font-size: .85em;
font-style: italic;
color: #333;
}
#jobs {
border-top: 1px dotted #ccc;
}

/* =============================================
			404 Page
============================================= */

#fourofour {
background: url(../images/404bg.png) center center no-repeat;
background-size: contain;
position: relative;
min-height: 496px;
text-align: center;
}
#fourofour h1 {
position: relative;
top: 136px;
font-weight: lighter;
color: #C00;
font-size: 36px;
}
#fourofour h2 {
position: relative;
top: 240px;
font-weight: 500;
}
#fourofour p {
position: relative;
top: 212px;
font-size: 14px;
line-height: 1.5;
}
#buttons {
width: 422px;
margin: 134px auto;
}
.button {
font-size: 18px;
font-weight: 500;
padding: 18px 35px;
color: white;
text-decoration: none;
border: 1px solid #900;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #cc0000; /* Old browsers */
background: -moz-linear-gradient(top,  #cc0000 0%, #970000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc0000), color-stop(100%,#970000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cc0000 0%,#970000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cc0000 0%,#970000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cc0000 0%,#970000 100%); /* IE10+ */
background: linear-gradient(to bottom,  #cc0000 0%,#970000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#970000',GradientType=0 ); /* IE6-9 */
margin: 0 27px;
}
.button:hover {
border: 1px solid #333;
background: #444444; /* Old browsers */
background: -moz-linear-gradient(top,  #444444 0%, #222222 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#222222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #444444 0%,#222222 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #444444 0%,#222222 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #444444 0%,#222222 100%); /* IE10+ */
background: linear-gradient(to bottom,  #444444 0%,#222222 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
}
#widthfix {
padding: 18px 41px;
}



/* =============================================
			Footer
============================================= */

#foot {
position:relative;
height:200px;
clear:both;
font-family:'Open Sans', sans-serif;
background-color:#333;
text-align:left;
font-size:12px;
line-height:22px;
color:#666;
}

#footer-container {
background-color:#333;
width:100%;
max-width:1099px;
overflow:auto;
padding-top:25px;
margin:0 auto;
}

#foot a {
color:#666;
text-decoration:none;
border:0;
-o-transition:.75s;
-ms-transition:.75s;
-moz-transition:.75s;
-webkit-transition:.75s;
transition:.75s;
}

#foot a:hover {
color:#ccc;
}

.footer {
float:left;
background:#333;
}

#f1 {
width:220px;
}

#f2 {
width:225px;
}

#f3 {
width:120px;
}

#f5 {
float:right;
width:290px;
padding-bottom:21px;
text-align:center;
}

.footer-header {
color:#ccc;
text-transform:uppercase;
letter-spacing:1px;
font-weight:700;
}

.footer-address {
color:#ccc;
letter-spacing:1px;
font-weight:700;
}

.footer-img {
float:left;
margin:4px 4px 0 0;
}

/* =============================================
			Media Queries
============================================= */

/* ---------------------------- iPad (Short Content Fix) */   

@media only screen and (max-width: 1023px) {
#main {
min-height: 600px;
}
#contactpage #main {
min-height: 730px;
}
}

/* ---------------------------- iPad (General)	 */   

@media only screen and (min-width: 768px) and (max-width: 1099px) {
.custom #logo {
width:195px;
}

#mobtabpad {
padding: 0 1%;
}

.custom #links {
width:73%;
max-width:750px;
font-size:10px;
padding-right:2%;
}

.custom #links a {
margin-left:2%;
}

.custom #links a:nth-of-type(1) {
margin-left:0;
}

#videos-1,
#videos-2,
#videos-3,
#videos-4,
#videos-5 {
height: 50px;
}

#videos-1 a, #videos-2 a, #videos-3 a, #videos-4 a, #videos-5 a{
font-size: 14px;	
}

#social-1, #social-2, #social-3, #social-4, #social-5 {
height: 5em;
}

#aboutpage p {
padding: 0 1%;
}

#breadcrumbs {
padding-left: 1%;
}

#conbottomlinks a {
font-size: 12px;
padding: 2% 3%; 
}
}
#left {
padding-left: 1%;
}
#right{
padding-right: 1%;
}

/* ---------------------------- iPad (Portrait)	 */   

@media only screen and (max-width: 820px) and (min-width: 768px) {
.custom #logo {
width:160px;
}

.custom #logo img {
max-width:160px;
height:auto;
}

#navwrap {
padding-bottom:30px;
}
}

/* ---------------------------- Mobile			 */   

@media only screen and (max-width: 767px) {
#header,#navwrap {
position:static;
padding-left:0;
}

#navshadow {
display: none !important;
}

.custom #logo {
width:100%;
float:left;
text-align:center;
padding-left: 0;
}

#mobtabpad {
padding: 0 1%;
}

.custom #links {
width:100%;
float:right;
color:#C00;
font-size:12px;
text-align:left;
letter-spacing:1px;
padding:14px 0;
}

#breadcrumbs {
padding-left: 1%;
}

.custom #links a {
float:left;
width:33%;
text-align:center;
margin:0;
padding:9px 0;
}

#header_area .page,#footer_area .page {
width:100%;
margin:0 auto;
}

#blogfeed,#resourcesfeed,#clientfeed {
width:98%;
clear:left;
padding:0 1%;
}

#resourcesfeed,#clientfeed {
margin-top:40px;
}

#foot {
margin-top:25px;
height:auto;
clear:both;
padding:10px 0 5px;
}

#f1,#f2,#f3,#f5 {
clear:both;
padding-left:2px;
}

#f5 {
float:left;
padding-bottom:0;
text-align:left;
}

#mobile-slider img {
max-width:100%;
height:auto;
}

.divider-short {
position:relative;
top:30px;
}

#headeroverlay-mob {
display:block;
position:absolute;
width:100%;
background:url(../images/header-overlay-mob.png) no-repeat;
background-size:contain;
background-position:50% 50%;
height:200px;
}

#banner-container,#client-logos,#headeroverlay,#SidePicture {
display:none;
}

#banner-container2,#mobile-slider,#client-logos-mobile {
display:block;
}

#fourofour {
min-height: 300px;
margin: 0px auto;
background-position: center top;
}

#fourofour h1,
#fourofour h2 {
position: static;
margin-bottom: 60px;
}

#fourofour p {
position: static;
margin-bottom: 30px;
}

#buttons {
width: auto;
margin: 60px auto;
}

.button {
font-size: 12px;
padding: 9px 17px;
margin: 0 27px;
}

#widthfix {
padding: 9px 22px;
}

#banner {
margin-top: 0;
}

#aboutpage p {
padding: 0 1%;
}

#bottomlinks a {
background-color: #EAEAEA;
padding: 12px 17px;
font-size: 14px;
display: block;
width: 50%;
margin: 15px auto;
}

#breadcrumbsbread {
padding-left: 1%;
}

.social-left {
display: none;
}
.social-right {
padding-left: none;
width: 100%;
}

/* - - - - - - - - SERVICES */
#services,
#fullsizepagetitle,
#bottomborder,
#services-a-right img, 
#services-b-left img {
display: none;
}
#services-1-full {
padding: 0 0 20px 0;
}
#services-2-full {
padding: 20px 0;
}
#services-a-right,
#services-b-right,
#services-a-left, 
#services-b-left {
width: auto;
float: left;
padding: 0 2%;
}

/* - - - - - - - - VIDEOS */

#videospagenav,
#videoslistfull {
display: none;
}
#videoslistmob {
display: block;
padding: 0 1%;
}
#videos-a-left,
#videos-a-right,
#videos-b-left,
#videos-b-right {
width: 100%;
float: none;
padding: 0;
}
#videos-1-full {
padding: 0;
}
.videos-overview-title,
#videoslistmob p {
margin-bottom: 20px;
}

/* - - - - - - - - SOCIAL MEDIA INTERACTIVE */

#socialpagenav,
#social-a-right,
#social-b-left {
display: none;
}

#social-a-left,
#social-b-right {
width: 100%;
float: none;
padding: 0;
}
#social-1-full,
#social-2-full,
#social-3-full,
#social-4-full {
padding: 20px 0;
}


/* - - - - - - - - CONTACT */
#contactpage h1 {
font-size: 28px;
}
#left, #right {
width: auto;
float: none;
}
#left {
background: url(../images/divider-grey.png);
background-repeat: repeat-x;
padding: 20px 2% 0 2%; 
}
#right {
padding: 0 2%;
}
#contactpage #main {
margin-top: 0;
}
#conbottomlinks,
#map {
display: none;
}
.af-body label.previewLabel {
display: block !important;
float: none !important;
width: auto !important;
text-align: left !important;
margin: 10px 0;
}
#af-form-614268221 .af-body .af-textWrap {
display: block !important;
float: left !important;
margin-left: 0 !important;
}
#form {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#contactpage .divider-red {
margin-top: 30px;
}
}
