/*
Theme Name: Metal Art & Fabrications
Theme URI: http://underscores.me/
Author: Ryan Bowen
Author URI: http://underscores.me/
Description:Metal Art & Fabrications theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: MAF
Tags:

Metal Art & Fabrications is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/


@font-face {
    font-family: "Impact";
    src: url("font/impact.ttf");
    src: url('font/impact.eot'); /* IE9 Compat Modes */
    src:url('font/impact.ttf')  format('truetype');
    src: url('font/impact.svg#impactRegular') format('svg');
}

/*set up flat styles*/
.cparallax {display:none;}
.flat_alternative {display:block;}
/*.flat_alternative .below_slider {position:absolute; top:100%; width:100%; }*/
.flat_alternative .navbar {position:absolute; width:100%;z-index:99;}
.cparallax__layer .cparallax__layer--shallow {

}

.flat_alternative .navbar,.flat_alternative .navbar {position:relative;}
.flat_alternative #group2 {height:auto;} 
.flat_alternative #group3 {display:none}
#maf_home .flat_alternative  .container, #maf_home .flat_alternative #main-container {background:none;}
.flat_alternative #group4 {margin-top:0em;}
.scroll-down-link {display:none;}
#maf_home nav {position:relative;}
.slider.slide_mob {clear: both;}
.slider.slide_mob  ul.slides {height:440px;} 
#header-container {float: left;
    width: 100%;}


.group3_bg {height:280px;padding-top:2em;}
.group3_bg .container {background: rgba(0,0,0,.8); color:#fff; padding-top:0.5em;} 
#group3 { margin-bottom:2em;}
.flat_alternative #footer-container {
  position:relative;
}


/*progressive enhancement of homepage*/
@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) ) {
#maf_home nav {position: absolute;}
  .scroll-down-link {display:block;}
  .flat_alternative {display:none;}
  .cparallax {display:block;}
  .cparallax, .cparallax_cp {
    -webkit-perspective:300px;
    perspective: 300px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background:#fff;
    position:relative;
  }
  .cparallax_inner {
    -webkit-perspective:300px;
    perspective: 300px;
    height: 10vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .cparallax__layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .cparallax__group {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;
    -webkit-transform-style:preserve-3d;
  }
  .cparallax__group.group_cp {
    height: 33vh;
  }
  .cparallax__group_small {
    position: relative;
    height: 26vh;
    transform-style: preserve-3d;
    -webkit-transform-style:preserve-3d;
  }
  .cparallax__group_xsmall {
    position: relative;
    height: 18vh;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  .cparallax__layer--cp {
    -webkit-transform: translateZ(-50px) scale(1.5);
    transform: translateZ(-50px) scale(1.5);
  }
  .cparallax__layer--base {
     -webkit-transform:  translateZ(0);
    transform: translateZ(0);
  }
  .cparallax__layer--shallow {
    -webkit-transform: translateZ(5px);
    transform: translateZ(5px);
  }
  .cparallax__layer--vdeep {
    -webkit-transform: translateZ(-50px) scale(1.25);
    transform: translateZ(-50px) scale(1.25);
  }
  #group2 {z-index:0; }
  #group3 {z-index:-1;position:relative;}
  #group3 .container {
    color:#fff;
    background-color:rgba(0,0,0,0.6);
    padding:1em;
  }
  #group3 .container h3 {
    margin-top:0;
  }
  #group3 .container a {margin-bottom:0;}
  #group4 {z-index:1;position:relative; }
  .cparallax__layer--back {transform: translateZ(-300px) scale(2);}
  .cparallax__layer--deep {
    transform: translateZ(-400px) scale(2.5);
    -webkit-transform: translateZ(-400px) scale(2.5);
    
  }
  #group3 .cparallax__layer--back {transform: translateZ(-300px) scale(2);}
  .cparallax__layer--front {
    transform: translateZ(300px) scale(-1);
    -webkit-transform: translateZ(300px) scale(-1);
  }
  .cparallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
  }


}


/******* Navigation *******/
nav {
  background-color:  #222;
  height:80px;
  line-height: 80px;
  position:absolute;
  z-index:20;
  width:100%;
  opacity:0.95;
}
nav.nobanner {position:relative;}
nav ul a {
  color: #fff;
}
nav ul li.current-menu-item a, .current_page_ancestor a {
  border-bottom:2px solid #568BD8;
  height:80px;
}
nav ul a:hover {
  background-color:   rgba(255,255,255,0.1);
}
ul.side-nav li.current-menu-item , .current_page_ancestor {background-color:#222; border-bottom:1px solid #568BD8;}
ul.side-nav .current_page_ancestor a  {border:none;}
i.mdi-navigation-menu {color:#3572CD;}
.btn {background-color:#222 }
nav  .brand-logo {
  background: url('images/logo_maf.svg') no-repeat;
  font-family:'Impact';
  text-indent: -9999px;
  top:12px;
}
nav .nav-wrapper .brand-logo { 
  font-size: 3rem;  
  display: block;
  width: 242px;
}
.dropdown-content {
  background-color:#111; 
}
.dropdown-content li:hover {background-color:#222;}
.dropdown-content li>a, .dropdown-content li>span {color:#fff;}
ul.side-nav {
  background-color:rgba(0,0,0,1); 
}
ul.side-nav li {
  transition:background-color 0.3s;
}
ul.side-nav li:hover {
  background-color: #333;
}
ul.side-nav li a {
  height:80px;
  line-height:80px;
  color:#e9e9e9;
  font-size: 1.1rem;
  color:#fff;
  display:inline-block;
  padding:0px 15px;
}
.navbar-fixed {height:0;}



/******* Layout *******/
html, body {background:#222;}
.progresswrap {height:100%; width:100%; background:#fff;position:absolute;z-index:9999;}
.preloader-wrapper.big {left: 49%;top: 40%;}
.progressinner {position:relative;height:100%;}
#main-container {padding-top:2em;padding-bottom:1em;background:#fff;clear:both;}
.spacer {margin:10px 0;}
.sidebar {margin-top:1em;}
.widget {margin:10px 0;}
.cta .item { margin-bottom:30px;}
.parallax-container { color:#fff; padding-top:40px;margin:60px 0 70px 0;}
.parallax-container a { margin:20px;}

.titlebanner {
  height: 250px;
  margin:0;
  padding:0;
}
.cta {overflow: auto; margin-bottom:10px;}
.cta i{font-size:1.6em;}
.cta span {font-size:1.2em;}
.cta i, .cta p {  }
.cta i {color:#fff; float:right;}
.cta p {margin:0;}
.cta {padding-bottom:1em;}

/*  layout - homepage */
.container {background:#fff;}
.welcome_text p {
  /*padding:0.6em 0;*/
}
.welcome_text {
  padding-right:2em;
}
.getintouchbg {
  background:url('../images/homebgbottom.png');
  background-size:cover;
}
.searchall{ width:100%;}
.searchall i{
  font-size: 1rem;
  margin-right: 0.3em;

}
.testimonials-widget-testimonial div.credit:before {
    content: "";
    
}

.btn:hover, .btn-large:hover {
  background-color:#FFC984!important;
}
.featured_image .card .card-image .card-title {
  width:100%;
  background:rgba(0,0,0,0.6);
  padding:0.3em 0.5em;
  margin-bottom: 0.3em;
}
.featured_image .card-image, .featured_image img{
 /*height:13em;*/
}
.featured_image .card-content {
  padding:0.8em;
}
.featured_image .card .card-image .card-title {
  font-size: 1em;
}
.featured_image a {color:#222;}

.scroll-down-link {
    height: 60px;
    width: 80px;
    margin: 0px 0 0 -40px;
    line-height: 60px;
    position: absolute;
    cursor: pointer;
    left: 50%;
    bottom: 0px;
    color: #222;
    text-align: center;
    font-size: 40px;
    z-index: 9999;
    text-decoration: none;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
    -webkit-animation: movedown 2s ease-in-out infinite;
    -moz-animation: movedown 2s ease-in-out infinite;
    animation: movedown 2s ease-in-out infinite;
}
.scroll-down-link:hover {color:#222;}

/* layout - footer */
#footer-container {
  position:fixed;
  bottom:0;
  width:100%;
  border-bottom:5px solid #222;
  z-index:0;
  background:#f5f5f5;
}
#footer-container .container {background:#f5f5f5;}
.np #footer-container{
  position:static;
}
ul.footer-contact-social li a {
    color:#000;
    transition: color 0.2s ease-in-out 0s;
}
ul.footer-contact-social li:hover a {
  color:#fff;
}
ul.footer-contact-social li {
  float:right;
  padding:10px 10px;
}
ul.footer-contact-social li {
  background-color: #d0d0d0;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  height: 30px;
  margin-left:10px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-top: 0px;
  padding: 0px;
  text-align: center;
  transition: background 0.2s ease-in-out 0s;
  width: 30px;  
  padding-top:5px;
}
ul.footer-contact-social li:hover {
   transition: all 0.2s ease-in-out 0s;
}
li.facebook:hover { background-color: #4c66a4; color:#fff;}
li.twitter:hover { background-color: #15b4c9; color:#fff;}
li.google:hover { background-color: #DD4B39;color:#fff;}
li.linkedin:hover { background-color: #006599; color:#fff;}

/* layout - products */
.car .details { 
  color:#fff;
  padding:0.8em;
  position: absolute;
  bottom: 0px;
  background-color:rgba(0,0,0,0.6);
  transition: background-color 0.6s ease;
  width:100%;
}

.car {background:#111;margin-bottom:1em;position:relative;}
.car:hover {cursor:pointer; }
.grow { transition: all .4s ease; }
.grow:hover { transform: scale(1.015); }
.products_filter {margin-bottom:1em; margin-top:0;}

.car {
  overflow: hidden;
  transition: background-color 0.6s ease;
  background-color: #111;
  color:#fff;
}
.car:hover .details {
  background-color: rgba(53,114,205, .6)
}
.car:hover  {
  background-color: #000;;
}
.js-loader {
  left:2em;
  margin-top:2em;
}



/* layout - details */
.details h3,.details h4,.details h5 {
  margin-top:0.1em;
}
.details h3 {border-bottom:1px solid #E53935; padding-bottom: 0.1em;}
.details_gallery .col {
  padding:0;
}
.details_gallery img{
  border:2px solid; 
  border-color:#fff;
  transition: border-color 0.7s ease;
  -webkit-transition: border-color .7s;
}

.details_gallery img:hover {cursor:pointer; }
.action_details .right{ text-align:right;}
.action_details {margin:2em 0;overflow:auto; border-bottom: 1px solid #568BD8;}
.callus {overflow:auto;}
.details_gallery img:hover {border-color:#568BD8;}
.details_gallery .thumbnails {/*max-height:140px;min-height:140px;*//*margin-bottom:1em;*//*overflow: hidden;*/}

.cardetails {background: #fff;overflow:auto; padding:0.5em;}
.specification, .description {margin-top:2em;}
.description {border-top: 1px solid #568BD8; padding-top:1.5em;}
.details h6 {font-weight:bold;}
.details > .left, .details > .right {
  width:50%;
}
.mfp-arrow i{font-size: 3em;color:#f5f5f5;}
.mfp-arrow:before {
  content:none !important; border:none !important;
}
.mfp-arrow-right:after, .mfp-arrow-right , .mfp-a, .mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
  border:none!important;
}

/* search results*/
.search-results-image {height:5em; width:auto; margin-right: 1em;}
#results article, .news-item { display: block; position: relative; clear: both; float: left; width: 100%; }
#results h5 {float:left;}
#results .entry-summary {clear:left; float:left;}


/*theme color testing here*/

h1,h2,h3,h4,h5,h6 {font-weight:200; }
.caption h1,.caption h2,.caption h3,.caption h4,.caption h5,.caption h6 {font-weight:300; border:none;}
.caption {/*background: rgba(0,0,0,0.3);*/ padding:1em; border-radius:  0.5em }
.caption h3 {margin-top:0; font-}
.slider ul.slides li .caption { text-shadow: 2px 2px 2px black; top: 20%;left: 5%;width: 90%;}
.divider{background-color:#568BD8; border-color:#568BD8;}
#results .card-panel {overflow:auto;}
.details h3 { border-color:#568BD8;}
.select-wrapper input.select-dropdown, .select-wrapper i {color:#fff;}
a,div,ul,li,blockquote, p {color:#fff; font-weight:300;}
a {color:#80A9E5; transition: all 0.2s ease-in-out 0s;}
a:hover  {color:#fff;transition:all 0.2s ease-in-out 0s;}
a.content_link:hover {color:#E676E1;transition:all 0.2s ease-in-out 0s;}

.card, .featured_image .card-content {background:#222;}
body, .card-panel,  .card, #main-container, .container {
  /* IE10+ */ 
  background-image: -ms-linear-gradient(top left, rgba(51,51,51,1) 0%, rgba(59,59,59,1) 100%);
  /* Mozilla Firefox */ 
  background-image: -moz-linear-gradient(top left, rgba(51,51,51,1) 0%, rgba(59,59,59,1) 100%);
  /* Opera */ 
  background-image: -o-linear-gradient(top left, rgba(51,51,51,1) 0%, rgba(59,59,59,1) 100%);
  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(51,51,51,1)), color-stop(100, rgba(59,59,59,1)));
  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-linear-gradient(top left, rgba(51,51,51,1) 0%, rgba(59,59,59,1) 100%);
  /* W3C Markup */ 
  background-image: linear-gradient(to bottom right, rgba(51,51,51,1) 0%, rgba(59,59,59,1) 100%);
}
.cparallax,.cparallax__layer--back, #maf_home #main-container, #maf_home .container {background:#333;}

#footer-container,#footer-container .container,.featured_image .card-content, .card-image , .progresswrap{
  background:#222222;
}
img.progress-logo {
    position: absolute;
    left: 18%;
    top: 13%;
    width: 70%;
}
.details_gallery img {border-color:#333;}
#main-container {padding-bottom:0;}
table.striped tbody tr:nth-child(odd) {
    background-color: #222222;
}
#maf_home #group3 .container {
    background: rgba(0,0,0,0.5);
    border-radius:0.5em;
      margin-top: 0.8em;
      text-align:center;
}
.titlebanner img {width:100%; }
.titlebanner {height:auto;}
nav {position:relative;}

.maf_text_blue {color:#0A4293;}
.maf_text_purple {color:#E676E1;}
.maf_text_green {color:#BDF754;}
.card-panel.maf_default { background:#222!important;}
blockquote {border-color:#BDF754;}

/*maf buttons*/
.btn.maf_default, .btn-large.maf_default {
   background-color:#333;
}
.btn.maf_blue, .btn-large.maf_blue{
   background-color:#0A4293;
}
.btn.maf_blue:hover,.btn-large.maf_blue:hover,.btn.maf_default:hover, .btn-large.maf_default:hover{
   background-color:#3572CD !important;
}
.btn.maf_purple, .btn-large.maf_purple {
   background-color:#95008E;
}
.btn.maf_purple:hover {
   background-color:#CE26C7 !important;
}
.error {color: #F44336;}

input+label ~ span.errormsg,
textarea+label ~ span.errormsg {content: "\00a0";}
input.invalid+label ~ span.errormsg:after,
textarea.invalid+label ~ span.errormsg:after {
  content: attr(data-error);
  color: #F44336;
  opacity: 1;
  font-size:0.9em;
}
label {
    width: 100%;
}
#maf_contact_frm input,#maf_contact_frm textarea {margin-bottom:0.5em;}




/******* Media Queries *******/
@media only screen and (max-width: 1780px) {
  #group3 {margin-top:4em;}
  .cparallax__group_small {height: 30vh;}
}

@media only screen and (max-width: 1780px) and (max-height: 670px) {
  #group3 {margin-top:12em;}
  .cparallax__group_small {height: 34vh;}
}

@media only screen and (max-width: 1365px) {
 .cparallax__group_small {height: 36vh;}
  #main-container {    
    padding-bottom: 0em;
  }
  #group3 {margin-top:7em;}
}

@media only screen and (max-width: 992px) { 
  #group3 {/*margin-top:17em;*/display:none;}
  #group4 {margin-top:16em; z-index: 0;}
  #group2 {height:170vh;}
  .featured_image .card-content {padding: 0.3em 0.8em;}
  .featured_image .card .card-image .card-title {
    font-size: 0.85em;
}
  .featured_image .card .card-image .card-title {
 
    padding: 0.2em 0.2em 0.2em 0.4em;

} 

  #group3 .container {
    margin:1em;
  }
  .row .s12.sidebar .col, .row .s12.sidebar h5.widget-title {padding:0}
  .row .s12.sidebar blockquote  {
    padding-left: 1em;}
}


.navigation.post-navigation {display:none;}


@media only screen and (min-width: 1740px) { 
   .parallax img {
    background-position:center 40px;
   }
}

@media only screen and (min-width: 992px) { 
   nav .brand-logo {
   top: 12px;
  }
  .parallax img {
    background-position:center 10px;
   }
}

@media only screen and (max-width: 1740px) {
  .container {width:98%;}
}
@media only screen and (max-width: 1340px) {
  #group3 .container {width:96%;}
}

@media only screen and (max-width: 992px) {
nav .brand-logo {
  top: 35px;
  left:53%;
  }
  nav, nav a.button-collapse i, nav .nav-wrapper i, nav a.button-collapse {
    height:64px;
    line-height: 64px;
  }
  ul.side-nav li a {
     height:55px;
    line-height: 55px;
  }
  .action_details div, .action_details a {width:100%;}
  ul.side-nav li {
    float: none;
    padding: 0;
  }
  ul.side-nav li a {
    width:100%;
  }
 

}
@media only screen and (max-width: 413px) {
  #group2 {
    height:174vh;
  }
  #group4 {
    margin-top:23em;
  }
}

@media only screen and (max-width: 401px) {
   nav .brand-logo {
   top: 35px;
  }
   nav, nav a.button-collapse i, nav .nav-wrapper i, nav a.button-collapse,nav .nav-wrapper a i, {
    height:80px;
    line-height: 80px
  }
}
@media only screen and (min-width: 601px) {
   nav, nav a.button-collapse i, nav .nav-wrapper i, nav a.button-collapse {
    height:80px;
    line-height: 80px
  }
}

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

}
@media only screen and (max-width: 993px) { 
 
}
@media only screen and (max-width: 860px) { 
 
}
@media only screen and (max-width: 840px) { 

}
@media only screen and (max-width: 800px) { 
 
}
@media only screen and (max-width: 750px) { 

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

}
@media only screen and (max-width: 600px) { 
/*.s12.sidebar {border-top:1px solid #568BD8;}*/
}
@media screen and (min-width: 40em) {
  @supports ((perspective: 300px) and (not (-webkit-overflow-scrolling: touch))) {
   
  }
}

/*iPad in portrait & landscape*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
  .cparallax #group2 {
    height:126vh;
  }
  .cparallax #group {
    margin-top:14em;
  }
  .cparallax #footer-container {
   position: relative;
  }
  .cparallax__group_small {
     height: 26vh; 
}
}
/*iPad in landscape*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
  .cparallax #group2 {
    height:100vh;
  }
  .cparallax  #footer-container {
    position:fixed;
  }
}

/*iPad in portrait*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
   .cparallax #group3 {
    margin-top:8em;
  }
}

/******* Animation/Transitions *******/

/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
.mfp-img {
  -webkit-animation: fadein 0.9s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -moz-animation: fadein 0.9s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
  animation: fadein 0.9s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
  -webkit-transition: all 9s ease-out;
  -moz-transition: all 9s ease-out;
  transition: all 9s ease-out;
}
/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  transition: all 1s ease-out;
}
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0.;
  -webkit-transition: all 2s ease-out;
  -moz-transition: all 2s ease-out;
  transition: all 2s ease-out;
}
.mfp-arrow i {
  transition: transform 0.5s ease;
}
.mfp-arrow:hover i {
  transform: scale(1.4);
}


/*fade in animattion*/
@-webkit-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/*animated arrow animattion*/
@-webkit-keyframes movedown {
  0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,20px); opacity: 0; }
}
@-moz-keyframes movedown {
  0%   { -moz-transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,20px); opacity: 0; }
}
@keyframes movedown {
  0%   { transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,20px); opacity: 0; }
}