
a{display:block;}
body{margin:0;font-family:sans-serif;}
h1,h2,h3,h4{font-family: 'Sansita One', cursive; font-weight:normal;}
.head{border:1px solid #45484d; background:#45484d;padding:20px 10px;}
.head h1{margin:10px;padding:5px;color:#efefef; text-shadow:2px 2px 2px black;}
.head h1 span{color:#cc0000;}
.head p{margin:10px;padding:5px;color:#efefef; text-shadow:2px 2px 2px black;}


.left_content{background:#cc0000;padding:20px 10px;box-shadow:0 2px 3px 3px black;box-shadow:inset 0 0 30px 1px black;}
.left_content div{border:5px solid #a50303;margin:10px;padding:10px;background:#a50303;border-radius:10px;
}
.left_content div h2{color:#efefef;}
.left_content div p{color:#efefef;}
.left_content div ul{color:#efefef;}
.left_content a{color:#efefef;padding:10px;text-decoration:none; background:#45484d; text-shadow:2px 2px 2px black;border-radius:10px;}
.left_content a:link{color:#efefef;}
.left_content a:visited{color:#e5e5e5;}
.left_content a:hover{text-decoration:underline;color:#cc0000;}
.left_content a:active{color:#45484d;}

.right_content{ background: #2e9ef2;padding:20px 10px;box-shadow:0 2px 3px 3px black;}
.right_content div{border:5px solid #1a649c;margin:10px;padding:10px;background:#1a649c;border-radius:10px;}
.right_content a{color:#efefef;padding:10px;text-decoration:none; background:#45484d; text-shadow:2px 2px 2px black;}
.right_content a:link{color:#efefef;}
.right_content a:visited{color:#efefef;}
.right_content a:hover{color:#2e9ef2; text-decoration:underline;}
.right_content a:active{#2e9ef2;}

a.image{color:none; text-decoration:none;background:none;box-shadow:inset 0 0 15px 1px black;}
a.image:link{}
a.image:visited{}
a.image:hover{}
a.image:active{}



.footer{border:1px solid #45484d; background:#45484d;padding:20px 10px;}
.contact_link{text-align:center;color:#efefef; background:#cc0000; text-decoration:none; margin:10px; padding:10px; text-shadow:2px 2px 2px black;font-weight:bold;border-radius: 10px;}
.contact_link:link{color:#efefef;}
.contact_link:visited{color:#efefef;}
.contact_link:hover{color:#a50303;}
.contact_link:active{color:#efefef;}
.copy{ margin:10px;padding:10px;text-align:center;color:#efefef;}



/* Responsive elements */
@media all and (max-width:320px) {
.zenfolio a.image{display:none;}
.youtube a.image{display:none;}
.facebook a.image{display:none;}
}

@media all and (min-width:321px) and (max-width:480px) {
.zenfolio a.image{display:none;}
.youtube a.image{display:none;}
.facebook a.image{display:none;}
}
.right_content a{}
@media all and (min-width:481px) and (max-width:720px) {
.zenfolio a.image{margin-top:-20px; margin-bottom:-16px; background-image:url('../img/marfilm_zenfolio.jpg');height:200px;}
.youtube a.image{margin-top:-20px; margin-bottom:-16px; background-image:url('../img/marfilm_you_tube.jpg');height:200px;}
.facebook a.image{margin-top:-20px; margin-bottom:-16px; background-image:url('../img/marfilm_facebook.jpg');height:200px;}
}
@media all and (min-width:721px) and (max-width:960px) {
.zenfolio a.image{margin-top:-20px; margin-bottom:-16px; background-image:url('../img/marfilm_zenfolio.jpg');height:200px;}
.youtube a.image{margin-top:-20px; margin-bottom:-16px; background-image:url('../img/marfilm_you_tube.jpg');height:200px;}
.facebook a.image{margin-top:-20px; margin-bottom:-16px; background-image:url('../img/marfilm_facebook.jpg');height:200px;}
div.left_content{width:41%; float:left; border-radius:0;box-shadow:none;box-shadow:inset 0 0 20px 0px black;}
div.right_content{margin:0;padding:20px 1% 0 0;}
.right_content div{margin:10px 0 0 45%;}
.right_content .image{box-shadow:inset 0 0 15px 1px black; border-left:1px solid #45484d;border-right:1px solid #45484d;}
.right_content h2 a{border-radius:10px 10px 0 0;}
.right_content p a{border-radius:0 0 10px 10px;}
a.image:hover{box-shadow:inset 0 0 50px 1px black;}
a.image:active{box-shadow:inset 0 0 60px 1px black;}

}

@media all and (min-width:961px){
.zenfolio a.image{margin-top:-20px; margin-bottom:-16px; background-image:url('../img/marfilm_zenfolio.jpg');height:200px;}
.youtube a.image{margin-top:-20px; margin-bottom:-16px; background-image:url('../img/marfilm_you_tube.jpg');height:200px;}
.facebook a.image{margin-top:-20px; margin-bottom:-16px; background-image:url('../img/marfilm_facebook.jpg');height:200px;}
div.left_content{width:41%; float:left; border-radius:0;box-shadow:none;box-shadow:inset 0 0 20px 0px black;}
div.right_content{margin:0;padding:20px 1% 0 0;}
.right_content div{margin:10px 0 0 45%;}
.right_content .image{box-shadow:inset 0 0 15px 1px black; border-left:1px solid #45484d;border-right:1px solid #45484d;}
.right_content h2 a{border-radius:10px 10px 0 0;}
.right_content p a{border-radius:0 0 10px 10px;}
a.image:hover{box-shadow:inset 0 0 50px 1px black;}
a.image:active{box-shadow:inset 0 0 60px 1px black;}

}

/*
.left_content a{}
.left_content a:link{}
.left_content a:visited{}
.left_content a:hover{}
.left_content a:active{}
*/
/* clearfix by Nicolas Gallagher (http://nicolasgallagher.com/micro-clearfix-hack/) */
.cf:before,
.cf:after {content: " "; /* 1 */ display: table; /* 2 */}
.cf:after {clear: both;}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {*zoom: 1;	}


