/*
Theme Name: Hammertech
Author: B&C
*/
/* -------- Page Structure ---------- */
#wrapper_header {
                width: 100%;
                float: left;
                z-index: 9999;
                background: #000 url('../images/top-header.gif'); background-position: center top; background-repeat: no-repeat;
}
#wrapper {width: 100%; background-color: #ffffff; float: left}
#container {margin: 0 auto; width: 960px;}
 
/* -------- Header ---------- */
#header {width: 100%; float: left; position: relative }
#banner {margin: 0 auto; text-align: center; float: left;}                 
#logo {padding: 20px;  margin: 0 auto; text-align: center }
#slideshow {
    background-color: #eeeeee;
   background-position: center top;
    background-repeat: no-repeat;
    float: left;
    height: auto;
    margin: 0 auto;
    padding: 0px;
    width: 100%;
}
.facebook {
                background: url('../images/hammertech-sprite.png') no-repeat -359px 0;
                width: 70px; position: absolute;top:0px; right:50px;
                height: 45px;
}
 
.facebook:hover {
                background: url('../images/hammertech-sprite.png') no-repeat -460px 0;
                width: 70px;position: absolute;top:0px;
                height: 45px;
}
 
 
/* -------- Page Navigation ---------- */
#mobile-main-nav {display: none}
#navigation {width:100%; float: left; padding: 0px}
/**
* 4.2 Navigation
* ----------------------------------------------------------------------------
*/
.main-navigation {
                clear: both;
                margin: 0 auto;
                max-width: 1080px;
                min-height: 45px;
                position: relative;
                float: left;
                background-color: #fff;
                font-family: 'Lato', sans-serif;
                text-transform: lowercase;
                font-style: italic;
                font-weight: 700;
                width: 100%;
                text-align: center;
}
ul.nav-menu,
div.nav-menu > ul {
                margin: 0;
                padding: 0 10px 0 0;
}
.nav-menu li {
               display: inline-block;
                position: relative;
                padding: 0px;
}
.nav-menu li a {
                color: #6d6e71;
                display: block;
                font-size: 14px;
                line-height: 1;
                padding: 15px;
                text-decoration: none;
                width: 150px;
}
.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
                color: #D2232A;
                text-align: center
}
.nav-menu .sub-menu,
.nav-menu .children {
                background-image: url('../images/black-transparent.png'); background-repeat: repeat;
                border: 0px solid #f7f5e7;
                border-top: 0;
                padding: 0;
                position: absolute;
                left: -2px;
                z-index: 99999;
                height: 1px;
                width: 1px;
                overflow: hidden;
                clip: rect(1px, 1px, 1px, 1px);
}
.nav-menu .sub-menu ul,
.nav-menu .children ul {
                border-left: 0;
                left: 100%;
                top: 0;
}
ul.nav-menu ul a,
.nav-menu ul ul a {
                color: #fff;
                margin: 0;
                width: 200px;
}
ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover,
ul.nav-menu ul a:focus,
.nav-menu ul ul a:focus {
                color: #fff;
                background-color: #A5181C;
}
ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul,
ul.nav-menu .focus > ul,
.nav-menu .focus > ul {
                clip: inherit;
                overflow: inherit;
                height: inherit;
                width: inherit;
}
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
                background-color: none;
                color: #9a9a9a; padding: 15px;
}
.menu-toggle {
                display: none;
}
 
 
/* -------- Home ---------- */
 
#wrapper_services {float: left; width: 100%;padding: 5px 0}
#wrapper_service_list {float: left; background-color: #fdfdfd; width: 100%;padding: 5px 0 0 0 }
#content .services > h1  {margin-bottom: 0px;}
#content .services > h6  {margin-top: 0px;}
#service_list {float: left; width: 33.3%; padding: 0px; display: block; height:400px; cursor:pointer; }
#service_list:hover {
                -webkit-filter: grayscale(100%);
                filter: grayscale(100%);text-decoration: none; color: #fff;
}
.service-image > img {
    width:100% }
#services {width:100%;float: left; margin: 0 auto}
.service-image {                display: table; vertical-align: middle; position: relative; background-position: 50% 50% !important; height:400px; display: table;
    background-size: cover !important; width: 100%; }
#button-image{display: table-cell;vertical-align: middle;text-align: center;height:150px;position: relative;margin-top:-75px;}
span.button-image{
                background: url("../images/hammertech-sprite.png") no-repeat 0 0;
                width: 150px;
                height: 150px;
                z-index: 9999;
                padding: 70px 0;
                color: #fff;
                text-align: center;
                box-sizing: border-box;
                /* white-space: normal; */
                display:block;
                margin-left:50%;
                position:relative;
                left:-75px;
}
.servicename{ width:120px; position:relative; padding:0 15px; left:50%; margin-left:-60px;}
#content {width: 100%;  margin: 0 auto; }
#content p, #content h1, #content h2, #content h3 {font-family: 'Lato', sans-serif;}
#content p {font-size: 14px; color: #636465}
#content h1 {color: #D2232A; text-align: center; font-size: 28px; line-height: 42px; font-weight: 700; font-style: italic}
#content h2 {color: #D2232A; text-align: left; font-size: 20px; font-weight: 300}
#content h3 {color: #D2232A; font-weight: 300; line-height: 36px; margin-bottom: 20px;}
#wrapper_welcome #content {padding: 50px; float: left}
 
 
 
/* -------- Inside ---------- */
.inside {padding: 50px;}
/* -------- Service ---------- */
#service_row {width: 960px; float: left; padding: 40px 0; position: relative}
#box-image {float: left; width: 380px}
.service-content {float: left; width: 300px; }
.service-content h2 {margin-top: 0px; line-height: 18px; color: #636465 !important;}
#content .bg2 h2{ color:#FFF !important; }
#content .bg2 p{ color:#FFF; }
 
.service-img {box-shadow: 3px 3px 10px 3px #888888; }
h1.our-services {background-color: #B2B3B4 !important; padding: 20px 0; margin: 0px;}
.clear{ clear:both; }
span.readmore {
                background: url('../images/hammertech-sprite.png') no-repeat 0 -162px;
                width: 120px;
                height: 60px; position: absolute; bottom:0; left:50%;
}
span.readmore:hover {
                background: url('../images/hammertech-sprite.png') no-repeat 0 -230px;
                width: 120px;
                height: 60px;
}
.readless {
                background: url('../images/hammertech-sprite.png') no-repeat -125px -162px !important;
                width: 120px;
                height: 60px;
}
.readless:hover {
                background: url('../images/hammertech-sprite.png') nno-repeat -125px -230px;
                width: 120px;
                height: 60px;
}
 
.readmorecontent{display: none;}
.bg1 {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b1b2b3+0,d1d2d4+36,d1d2d4+100 */
background: #b1b2b3; /* Old browsers */
background: -moz-linear-gradient(top, #b1b2b3 0%, #d1d2d4 36%, #d1d2d4 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b1b2b3 0%,#d1d2d4 36%,#d1d2d4 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b1b2b3 0%,#d1d2d4 36%,#d1d2d4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1b2b3', endColorstr='#d1d2d4',GradientType=0 ); /* IE6-9 */}
                .bg2 {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3d3d3e+0,58585a+36,58585a+100 */
                background: #3d3d3e; /* Old browsers */
                background: -moz-linear-gradient(top, #3d3d3e 0%, #58585a 36%, #58585a 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top, #3d3d3e 0%,#58585a 36%,#58585a 100%); /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(to bottom, #3d3d3e 0%,#58585a 36%,#58585a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3d3e', endColorstr='#58585a',GradientType=0 ); /* IE6-9 */
}
.bg0 {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efeeee+0,efeeee+36,ffffff+100 */
background: #efeeee; /* Old browsers */
background: -moz-linear-gradient(top, #efeeee 0%, #efeeee 36%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #efeeee 0%,#efeeee 36%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #efeeee 0%,#efeeee 36%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}
 

/* -------- Portoflio ---------- */

.portfolio {float: left; width:50%}
.portfolio> img {max-width: 470px; height: auto; border: solid 10px #ccc; margin: 3px}
.portfolio p {padding: 0 20px;}


.portfolio_gallery {float: left; width:100%;}

.portfolio_gallery_image {width: 470px; height: auto; float: left;margin: 3px; border: solid 10px #ccc;  }
.portfolio_gallery_image img {width: 100%; }


.portfolio_main_gallery {
    position:relative;
    width:280px;
    height:210px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:#333;
    margin: 5px;border: solid 10px #ccc;
}

.portfolio_main_gallery p,.portfolio_main_gallery h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:150px;
    position:relative
}
.portfolio_main_gallery p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.portfolio_main_gallery h2 {
    font-size:14px !important;
    line-height:24px;
    margin:0;
    color: #fff !important;
}
.effect img {
	position:absolute;
    left:0;
    top:0;
    cursor:pointer;
    margin:-0px 0;
    -webkit-transition:top .3s ease-in-out;
    -moz-transition:top .3s ease-in-out;
    -o-transition:top .3s ease-in-out;
    transition:top .3s ease-in-out;
    max-width: 280px; height: auto;
}
.effect img.top:hover {
    top:-30px;
    padding-bottom:30px;
    max-width: 280px; height: auto;
}
h2.zero,p.zero {
    margin:0;
    padding:0
}


 
 
/* -------- Gallery ---------- */
 
#gallery {padding:0;float: left}
#gallery-image {width:280px; height: 180px; float: left; margin:10px; background-color: #fff}
.gallery {
                margin: 0 auto 18px;
}
.gallery .gallery-item {
                float: left;
                margin-top: 0;
                text-align: center;
                width: 33%;
}
.gallery-columns-2 .gallery-item {
                width: 50%;
}
.gallery-columns-4 .gallery-item {
                width: 25%;
}
.gallery-columns-5 .gallery-item {
                width: 20%;
}
.gallery-columns-2 .attachment-medium {
                max-width: 92%;
                height: auto;
}
.gallery-columns-4 .attachment-thumbnail {
                max-width: 84%;
                height: auto;
}
.gallery .gallery-caption {
                color: #333;
                font-size: 16px;
                margin: 0 0 12px;
                padding: 10px 0;
}
.gallery dl {
                margin: 0;
}
.gallery img {
                border: 0px solid #fff; margin-bottom: 15px;
}
.gallery br+br {
                display: none;
}
#content .attachment img {/* single attachment images should be centered */
                display: block;
                margin: 0 auto;
}
#galleryalbum {float: left; margin-bottom: 20px; width:100%}
.gallery img:hover {opacity: 0.7; filter: alpha(opacity=40); /* For IE8 and earlier */ }
 
 
 
/* -------- Contact Form ---------- */
 
h1.contact  {
                padding: 20px 0; margin: 0px;
                /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efeeee+0,efeeee+36,ffffff+100 */
background: #efeeee; /* Old browsers */
background: -moz-linear-gradient(top, #efeeee 0%, #efeeee 36%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #efeeee 0%,#efeeee 36%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #efeeee 0%,#efeeee 36%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}
input.wpcf7-form-control, textarea.wpcf7-form-control   {background-color: #e7e7e8; color: #333}
.wpcf7-form-control.wpcf7-submit.submit {background-color: #abacae !important; color: #fff}
.form-bg {background-image: url('../images/bg-contact.gif'); background-size: contain; background-repeat: repeat}
#form {width:50%; float: left; background-color: #dfdfe0}
#form_content {width:50%; float: right; background-color: #eceded; padding: 40px; color: #333}
#form_content strong  {color: #D22329}
 
 
 
 
 
/* -------- Footer ---------- */
#footerbackground {width: 100%; float: left; min-height: 350px; background-color: #D2232A; background-image: url('../images/footer_background.jpg'); background-position: right top; background-repeat: repeat-y}
#footer {float: left; padding: 10px; width: 100%;  text-transform: none}
#footer {font-size: 12px; color: #fff}
#footer1, #footer2, #footer3 {width: 310px; float: left; margin: 0px;}
#footer1_col {width: 49%; float: left; padding-top: 20px;}
#footer1_col a:link {text-decoration: none; color: #fff}
#footer1_col a:visited {text-decoration: none; color: #fff}
#footer1_col a:hover{color: #7E080A; text-decoration: none}
 
#footer2 h2 {font-family: "Lato",sans-serif; font-style: italic; font-weight:700 }
#footer2 a:link {color: #fff; text-decoration: none}
#footer2 a:hover{color: #7E080A; text-decoration: none}
#footer2 a:visited {color: #fff; text-decoration: none}
#footer3 {padding-top: 50px; position: relative}
.footer_facebook {position: absolute;
                background: url('../images/hammertech-sprite.png') no-repeat -359px -48px;top: -10px;
                width: 70px;
                height: 45px;
}
.footer_facebook:hover {position: absolute;
                background: url('../images/hammertech-sprite.png') no-repeat -460px -48px; top: -10px;
                width: 70px;
                height: 45px;
}
 
 
/* -------- Scroll TOP ---------- */
.scroll-top:hover {            color: #fff !important;    background-color: #b35d5f;        text-decoration: none;}
.scroll-top {display: none;             position: fixed; bottom: 1rem;   right: 1rem; width:50px;               height: 50px;      line-height: 14px; font-size: 12px; color: #fff; background-color: #93181b; text-decoration: none;      border-radius: 3px;                text-align: center;            cursor: pointer; padding: 10px}
.arrowtop {background: url("images/top.png") no-repeat}
span.arrowtop {margin:0 5px 5px 5px;float: left; width:30px; height: 10px}
 
@media screen and (max-width: 319px)
{
                .button-image  {display: none}
              
}
/* Mobile devices */
/* Minimum width of 600 pixels. */
@media screen and (min-width: 320px) and (max-width: 420px) {
#container {width: 100%}            
#service_list {float: left;width: 100%;padding: 0px;height: 150px;}
#logo img {width: 60% !important; float: left; padding-bottom: 20px;}
#navigation {display: none}
.button-image  {
                -ms-transform: scale(0.7,0.7); /* IE 9 */
    -webkit-transform: scale(0.7,0.7); /* Safari */
    transform: scale(0.7,0.7); /* Standard syntax */
              
}
#button-image { margin-top: -150px; }
 
#form, #form_content, #service_row, #box-image, #footer {width:100%; float: left;}
.service-content {width:100%; float: left; padding: 20px;}
#box-image {width:100%; float: left; padding: 0px 20px;}
#box-image img {width: 100%; height: auto}
#footer1, #footer2, #footer3 {width:100% !important; float: left;}
#footer1_col {width:40% !important; float: left;}
.service-image {height: 150px !important; float: left;}

.portfolio {
    float: left;
    width: 98%;
}
.portfolio p {
    padding: 20px;
}
.portfolio_gallery > img {width: 98%}
           
}
/* Mobile devices */
/* Minimum width of 600 pixels. */
@media screen and (min-width: 421px) and (max-width: 767px) {
#container {width: 100%}           
#service_list {float: left; width: 100%; padding: 0px;}
#logo img {width: 40% !important; float: left; padding-bottom: 20px;}
#navigation {display: none}
.button-image  {transform: none}
span.button-image {position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;}
#form, #form_content, #service_row, #box-image, #footer {width:100%; float: left;}
.service-content {width:100%; float: left; padding: 20px;}
#box-image {width:100%; float: left; padding: 0px 20px;}
#box-image img {width: 100%; height: auto}
#footer1, #footer2, #footer3 {width:100% !important; float: left;}
#footer1_col {width:40% !important; float: left;}
.portfolio, .portfolio_main_gallery {
    float: left;
    width: 98%;
}
.portfolio p {
    padding: 20px;
}
.portfolio_gallery > img {width: 98%}
.portfolio > img {width: 100% !important}
}            
 
 
 
 
 
 
/*
@media screen and (min-width: 400px) and (max-width: 767px) {
                #container {
    margin: 0 auto;
    width: 100%;
}
#logo img {width: 40% !important; float: left; padding-bottom: 20px;}
#footer1 {width: 40%}
#footer2 {width: 40%}
#footer3 {width: 20%}
}
*/