@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700');
@import url('fonts.css');
@import url('reset.css');
/*-----------------------------------------------------------------*/
/*--- Custom Form Element ---*/
/*-----------------------------------------------------------------*/
input[type="text"], 
input[type="password"], 
input[type="tel"], 
input[type="email"], 
select, 
textarea ,
.form-control{ padding-left: 4px; height: 42px; font-size: 15px; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border-radius: 0; -webkit-appearance: none; }

.form-control,
.form-control:focus,
.form-control:hover,
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="tel"]:focus, 
input[type="email"]:focus, 
textarea:focus { border: none; border-bottom: 1px solid #cfcfcf; }

.has-error .form-control{ border-color: #9e0000; }
.has-error{ color: #9e0000; font-size: 12px; }
.has-error .form-control{ color: #9e0000 !important; }
.has-error .form-control::-webkit-input-placeholder { color: #9e0000 !important; }
.has-error .form-control:-moz-placeholder { color: #9e0000 !important;}
.has-error .form-control::-moz-placeholder { color: #9e0000 !important;  }
.has-error .form-control:-ms-input-placeholder { color: #9e0000 !important;}

.has-success .form-control{ color: #3c763d !important; }
.has-success .form-control::-webkit-input-placeholder { color: #3c763d !important; }
.has-success .form-control:-moz-placeholder { color: #3c763d !important;}
.has-success .form-control::-moz-placeholder { color: #3c763d !important;  }
.has-success .form-control:-ms-input-placeholder { color: #3c763d !important;}

textarea { resize: none; overflow: auto; margin-top: 5px; min-height: 107px; }


.scrollTop { position:fixed;  right: 10px; bottom:10px; z-index:99999; background: #fff; border-radius: 100%; }

.clearfix { clear:both;}
/*-----------------------------------------------------------------*/
/*--- Custom Buttons Slant ---*/
/*-----------------------------------------------------------------*/

.btn,
.btn:focus,
.btn:hover{ outline: none !important; border: none !important; box-shadow: none; }

.bttn-slant{ padding: 11px 52px 9px 20px; position: relative; z-index: 1; font-style: italic; border: none; background: url(../images/shadow-02.png) 100% 0 no-repeat; }

.bttn-slant.bttn-primary{ color: #fff; }

.bttn-slant.bttn-primary:focus,
.bttn-slant.bttn-primary:hover{ color: #a1b4d0; }

.bttn-slant:before,
.bttn-slant:after{ display: block; position: absolute; top: 0; z-index: -1; content: ''; 
    transform: skew(-13deg, 0deg);
    -ms-transform: skew(-13deg, 0deg);
    -webkit-transform: skew(-13deg, 0deg);
}

.bttn-slant:before{ left: 0; right: 20px; height: 100%; }
.bttn-slant:after{ top: -12px; right: 18px; bottom: 0; width: 11px; }

.bttn-slant.bttn-primary:before { background-color: #003f9e; }
.bttn-slant.bttn-primary:after{ background-color: #f3f3f3; }

.bttn-slant.bttn-default:before { background-color: #fff; }
.bttn-slant.bttn-default:hover { color: #000; text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff; }
.bttn-slant.bttn-default:after{ background-color: #f3f3f3; }

.bttn-more{ max-width: 155px; width: 100%; }
.fancybox-can-drag .fancybox-content {  max-width:90%;}

@media only screen and (max-width: 767px) {
	.bttn-more { max-width: none;}
}

/*-----------------------------------------------------------------*/
/*--- Block Slant Styles ---*/
/*-----------------------------------------------------------------*/
.block-slant{ position: relative; }
.block-slant:before,
.block-slant:after{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; content: ''; 
    transform: skewX(-13deg);
    -ms-transform: skewX(-13deg);
    -webkit-transform: skewX(-13deg);
}

.btn-block{ clear: both; }

/*-----------------------------------------------------------------*/
/*--- Canvas Styles ---*/
/*-----------------------------------------------------------------*/
#wrapper { overflow: hidden; min-width: 320px; }


/*-----------------------------------------------------------------*/
/*--- Global Styles ---*/
/*-----------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {  margin-top: 0 !important;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }

i{ color: #909090; }
i a{ color: #909090; }
p{ margin-bottom: 25px; }
@media only screen and (max-width: 1178px) {
    h2, .h2{ font-size: 1.764705882352941em; }
}

.list-unstyled { margin-bottom: 0;}
.inline-block{ display: inline-block; float: none; margin-left: -4px;}

.container { width: 100%; max-width: 1200px; position: relative; z-index: 2; }
.row-0 { margin-left: 0 !important; margin-right: 0 !important;}
.row-3 { margin-left: -3px; margin-right: -3px;}
.row-3 > [class^="col-"]{ padding-left: 3px; padding-right: 3px;}


/*-----------------------------------------------------------------*/
/*--- Header Styles ---*/
/*-----------------------------------------------------------------*/
#header { background: #003f9e; color: #fff; 
    -webkit-box-shadow: 0 10px 46px rgba(0, 0, 0, 0.4);
    box-shadow: 0 10px 46px rgba(0, 0, 0, 0.4); }

/*-----------------------------------------------------------------*/
/*--- Logo Styles ---*/
/*-----------------------------------------------------------------*/
.logo { display: block; position: relative; margin: 0; padding: 3px 0 0; max-width: 117px; width: 100%; }
.logo:after { display: block; position: absolute; top: 0; left: 11px; right: 10px; bottom: 0; z-index: -1; content: '';  background-color: #fff;
    transform: skewX(-13deg);
    -ms-transform: skewX(-13deg);
    -webkit-transform: skewX(-13deg);
}
@media only screen and (min-width: 1200px) {
    .logo-wrap{ padding-left: 0; }
}
@media only screen and (min-width: 992px) {
    .logo-wrap{ width: auto; padding-right: 0; }
}

/*-----------------------------------------------------------------*/
/*--- Main Menu Styles ---*/
/*-----------------------------------------------------------------*/
#main-menu { vertical-align: middle; font-size: 0.9411764705882353em; }
#main-menu ul { white-space: nowrap; }
#main-menu ul li a{  color: #fff; }
#main-menu ul > li{ position: relative; margin: 0 -1px; padding: 0; }
#main-menu ul > li > a{ display: block; padding: 35px 1.1em 32px; color: inherit; }
#main-menu ul > li > a:focus,
#main-menu ul > li > a:focus{ text-decoration: none; }

#main-menu ul > li:before,
#main-menu ul > li:after{ display: block; position: absolute; top: 0; border-top: 4px solid transparent; z-index: -1; content: ''; 
    transform: skewX(-13deg);
    -ms-transform: skewX(-13deg);
    -webkit-transform: skewX(-13deg);
}

#main-menu ul > li:focus,
#main-menu ul > li:hover{ color: #a1b4d0; 
    text-shadow: 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f; 
}

#main-menu ul > li.active,
#main-menu ul > li.active:focus,
#main-menu ul > li.active:hover,
#main-menu ul > li:last-child{ color: #000; text-shadow: none; }

#main-menu ul > li:after{ left: 0; right: 0; height: 100%; }
#main-menu ul > li.active:after,
#main-menu ul > li:last-child:after { border-color: #505050;
     -webkit-box-shadow: inset 7px 0px 10px -6px #888;
    -moz-box-shadow:inset  7px 0px 10px -6px #888;
    box-shadow:inset  7px 0px 10px -6px #888;
    background: #f3f3f3;
    background: -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #f3f3f3 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #f3f3f3 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ffffff',GradientType=0 );
}

#main-menu ul > li:before { top: 50%; right: -3px; height: 34px; margin-top: -17px; width: 1px; background: rgba(255,255,255,.5); }
#main-menu ul > li.active:before,
#main-menu ul > li:last-child:before{ background: none; }

#main-menu ul > li > ul { display:none; position:absolute; top:100%; left:-11px; list-style-type:none; padding: 0; width:100%;
	box-shadow: 5px 5px 4px 0 rgba(0,0,0,0.1); background:#003f9e; white-space: normal;
}

#main-menu ul > li:hover > ul {display:block;}
#main-menu ul > li:hover > ul > li { text-shadow:none; color:#fff;}
#main-menu ul > li > ul > li > a {  padding:10px 20px; }
#main-menu ul > li > ul > li.active > a,
#main-menu ul > li > ul > li > a:hover { background:#fff; color:#000;}

#main-menu ul > li > ul > li:before,
#main-menu ul > li > ul > li:after{ background: none; box-shadow: none; border: none; 
    transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg); }

		
 #mobile-header { position:fixed; top:0; left:0; width:100%; min-width:320px;}
	#nav-icon { float: right; width: 42px; height: 20px; position: relative; margin: 15px auto;  transform: rotate(0deg);  transition: 0.5s ease-in-out; cursor: pointer; }
	#nav-icon span { display: block; position: absolute; height: 3px; width: 100%; background: #fff; opacity: 1; left: 0;transform: rotate(0deg);  transition: .25s ease-in-out; }
	#nav-icon span:nth-child(1) { top: 0px; }
	#nav-icon span:nth-child(2), 
	#nav-icon span:nth-child(3) { top: 9px; }
	#nav-icon span:nth-child(4) { top: 18px; }
	.mm-opening #nav-icon span:nth-child(1) { top: 18px; width: 0%; left: 50%; }
	.mm-opening #nav-icon span:nth-child(2) { transform: rotate(45deg); }
	.mm-opening #nav-icon span:nth-child(3) { transform: rotate(-45deg); }
	.mm-opening #nav-icon span:nth-child(4) { top: 18px; width: 0%; left: 50%; }		

@media only screen and (max-width: 1166px) {
    #main-menu ul > li > a{ padding: 36px 1.2em 32px ; font-size: 14px;}    
}

@media only screen and (max-width: 1078px) {
    #main-menu ul > li > a{ padding: 36px 10px 32px ; }    
}

@media only screen and (max-width: 991px) {
    #main-menu ul > li > a{ padding: 36px 7px 32px; }    
}

@media only screen and (min-width: 768px) {
    #main-menu{ margin-left: -20px; }
}
.mm-listview > li > a, .mm-listview > li > span{ color: #000; }
.mm-listview > li {display:block !important;}


/*-----------------------------------------------------------------*/
/*--- Header Phone Styles ---*/
/*-----------------------------------------------------------------*/
#header .phone img { margin-right: 6px; display: inline-block; vertical-align: middle; }
#header .phone a { color: #fff; font-size: 1.1em; font-weight: 300; display: inline-block; vertical-align: middle; text-decoration: none; }

@media only screen and (max-width: 991px) {
    #header .phone a{ font-size: 1em; }
}
/*-----------------------------------------------------------------*/
/*--- Banner Section ---*/
/*-----------------------------------------------------------------*/
.banner{ position: relative; text-align: center;  margin-top:90px;}
.banner .banner-item{  height: 100%; overflow: hidden; position: relative; max-height:360px;}
body:not(.home) .banner .banner-item.imgLiquid_ready { padding-top: 30%;}

.banner-item:after{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 63, 158, 0.25); content: ''; z-index: 0; }
.home .banner .banner-item{ max-height: 610px; }
.banner img { width:100%;}
/* .banner .banner-item > img { display: block; width: 100%; } */
.banner .container{ text-align: center; }
.banner h2{ position: relative; z-index: 2; padding: 0.36em 1.04em; margin: 0; font-size: 2.94117647em; font-weight: 700; color: #fff; display: inline-block; vertical-align: middle;}
.banner h2.block-slant:after{ background-color: #003f9e; }
.banner .text-holder{ padding: 23px 1.434782608695652em 10px; font-size: 1.352941176470588em; color: #000; display: inline-block; vertical-align: middle;}
.banner .text-holder.block-slant:after{ background-color: #fff; }

@media only screen and (min-width: 1201px) {
	body:not(.home) .banner .banner-item.imgLiquid_ready { padding-top: 21%;}
	
}
@media only screen and (max-width: 1200px) and (min-width: 480px) {

    .banner .container { padding-left: 70px; padding-right: 56px; }
		
}
@media only screen and (max-width: 991px) {

    .banner { font-size: 10px;  }
		
}
@media only screen and (max-width: 991px) {

    .banner {  margin-top: 51px; }
	
}
@media only screen and (min-width: 479px) {
    .banner h2{  margin: 0 0 -10px; }
    .banner .container{ margin-top: 22px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }    
}
@media only screen and (max-width: 479px) {
    .banner .container { padding-top: 20px; margin-bottom: 52px;  }
		
	
}
@media only screen and (min-width: 480px) {
    .banner h2,
    .banner .text-holder {  }
}

/*-----------------------------------------------------------------*/
/*--- Arrow Styles ---*/
/*-----------------------------------------------------------------*/
.arrows{ position: absolute; top: 50%; margin-top: 30px; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.arrows .arrow { display: block; height: 58px; width: 65px;  cursor: pointer; }
.arrows .arrow.block-slant:after{ background-color: #003f9e; }
.arrows .arrow.disabled { cursor: default; }
.arrow-prev { float: left; margin-left: -6px; }
.arrow-next { float: right; margin-right: -6px; }
.arrows .arrow span{ display: block; position: relative; top: 50%; height: 25px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url(../images/arrows.png); background-repeat: no-repeat; }

.arrows .arrow-prev.disabled:focus span,
.arrows .arrow-prev.disabled:hover span,
.arrows .arrow-prev span{ background-position: 50% 0; }

.arrows .arrow-next.disabled:focus span,
.arrows .arrow-next.disabled:hover span,
.arrows .arrow-next span{ background-position: 50% -50px; }

.arrows .arrow-prev:focus span,
.arrows .arrow-prev:hover span{ background-position: 50% -100px; }

.arrows .arrow-next:focus span,
.arrows .arrow-next:hover span{ background-position: 50% -150px; }

@media only screen and (max-width: 991px) {
    .arrows .arrow{ width: 44px; height: 51px; }
}

@media only screen and (max-width: 479px) {
    .arrows {  display: none; }
}

/*-----------------------------------------------------------------*/
/*--- Dots Styles ---*/
/*-----------------------------------------------------------------*/
.dots{ position: absolute; z-index: 2;width: 100%; margin-top: -90px; }
.dots .dot{ margin: 0 5px; width: 10px; height: 10px; display: inline-block; vertical-align: top; background: rgba(255,255,255,.75); -webkit-border-radius: 50%; border-radius: 50%; cursor: pointer; }
.dots .dot.active{  background: #003f9e; }

@media only screen and (max-width: 991px) {
    .dots{  margin-top: -70px; }
}
@media only screen and (max-width: 767px) {
    .dots{  margin-top: -30px; }
}
@media only screen and (max-width: 479px) {
    .dots{  margin-top: -40px; }
    .dots .dot{  width: 20px; height: 20px; background: #f3f3f3; }
}

/*-----------------------------------------------------------------*/
/*--- Aside Styles ---*/
/*-----------------------------------------------------------------*/
#main-content{
    background: #f3f3f3;
    background: -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 26%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #f3f3f3 0%,#ffffff 26%,#ffffff 100%);
    background: linear-gradient(to bottom, #f3f3f3 0%,#ffffff 26%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ffffff',GradientType=0 );
}

/*-----------------------------------------------------------------*/
/*--- Aside Styles ---*/
/*-----------------------------------------------------------------*/
aside{ }

/*-----------------------------------------------------------------*/
/*--- Skew Holder Styles ---*/
/*-----------------------------------------------------------------*/
.skew-holder{ padding-left: 2.470588235294118em; margin-left: 4px; padding-bottom: 15px; position: relative; z-index: 2; }
.home .skew-holder{ padding-left: 2.235294117647059em; padding-right: 0; margin-left: 1.176470588235294em; }

.skew-holder:before { position: absolute; top: -76px; left: 10px; height: 79px; width: 16px; background-color: #003f9e; content: ''; 
    transform: skewX(-13deg);
    -ms-transform: skewX(-13deg);
}
.home .skew-holder:before { top: -73px; }

.skew-holder:after { display: block; position: absolute; z-index: -1; top: -60px; left: 0; width: 49px; height: 62px; background: url(../images/shadow-01.png) 0 0 no-repeat; content: '';}

.skew-holder h2{ margin-bottom: 27px; color: #003f9e; }
.home .skew-holder h2{ margin-bottom: 30px; }

.slant-item{ margin-top: 3.235294117647059em; padding-left: 2.352941176470588em; padding-right: 15px; position: relative; z-index: 2; }
.slant-item:before { position: absolute; top: -28px; left: 4px; height: 57px; width: 11px; background-color: #f3f3f3; content: ''; 
    transform: skewX(-13deg);
    -ms-transform: skewX(-13deg);
}
.slant-item:after { display: block; position: absolute; z-index: -1; top: -15px; left: -3px; width: 49px; height: 62px; background: url(../images/shadow-02.png) 0 0 no-repeat; content: '';}
.slant-item h3 { margin-bottom: 13px; }

@media only screen and (max-width: 992px) {
    .slant-item{ padding-right: 0; }
}

@media only screen and (min-width: 900px){
   .skew-holder { padding-right: 2.941176470588235em; }
}


/*-----------------------------------------------------------------*/
/*--- Heading Style ---*/
/*-----------------------------------------------------------------*/
section h2 { line-height: 1.08108em; text-transform: uppercase; }
section h3,
section h4 { line-height: 1.296296em; }

/*-----------------------------------------------------------------*/
/*--- Section Style ---*/
/*-----------------------------------------------------------------*/
section {  padding-top: 3.294117647058824em; padding-bottom: 0; }
.home section {  padding-bottom: 3.294117647058824em; }

.home section:nth-child(odd){ background-color: #003f9e; color: #fff; }

.home section:nth-child(odd) .skew-holder:before { background-color: #f3f3f3; }
.home section:nth-child(odd) .skew-holder h2 { color:  inherit; }

.home section:nth-child(odd) ul li a:focus,
.home section:nth-child(odd) ul li a:hover{ color: #a1b4d0; text-shadow: 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f; }

section:nth-child(odd) i{ color: inherit; }
section:first-child i{ color: #909090; }
.home section:first-child{ background: none; color: #000; }
.home section:first-child .skew-holder:before { background-color: #003f9e; }

.home section:nth-child(even) { color: #505050; }
.home section:nth-child(even) h2 { color: #003f9e; }

section ul{ margin-bottom: 30px; padding-left: 0; list-style-type: none; line-height: 1.842105263157895em; }
section ul li{ position: relative;  padding-left: 20px; }
section ul li a { color: inherit; }
section ul li:before{ display: block; position: absolute; top: 13px; left: 0; width: 8px; height: 8px; background-color: #003f9e; border-radius: 50%; content: ''; }
section ul li > ul{ padding-left: 20px; }

.capabilities ul li:before{ background-color: #fff; }

.home section ul{ font-size: 1.117647058823529em; }

@media only screen and (max-width:767px) {
  section { padding-bottom: 20px;}
}

.content img { margin-bottom:10px;}
/*-----------------------------------------------------------------*/
/*--- About Section ---*/
/*-----------------------------------------------------------------*/
section.about .text-holder{ padding: 8px 37px 10px 0; color: #505050; }
section.about .skew-holder{ padding-left: 26px; padding-top: 0; }
section.about .skew-holder:before{ top: -73px; left: -7px;  }
section.about .skew-holder:after{ top: -56px; left: -15px; }
section.about .container .content{ padding-bottom: 0; }



@media only screen and (min-width: 768px) {
    .container .content{ padding: 3.294117647058824em 15px 4.470588235294118em; margin-top: -5.70588em; background-color: #fff; 
        -webkit-box-shadow: 0 10px 80px 0 rgba(0,0,0,0.1), 0 6px 20px 0 rgba(0,0,0,0.1); 
        box-shadow: 0 10px 80px 0 rgba(0,0,0,0.1), 0 6px 20px 0 rgba(0,0,0,0.1); 
    }

.home .container .content{ padding-top: 3.117647058823529em; }
}
@media only screen and (max-width: 992px) {
    section.about h3 { font-size:1.1em;}
}
@media only screen and (max-width: 767px) {
    section .container .content { padding-bottom: 40px; }
    .about .text-holder { padding-right:0;}
    .about h3{ font-size: 18px; }
}

/*-----------------------------------------------------------------*/
/*---  Capabilities Section ---*/
/*-----------------------------------------------------------------*/
section.capabilities{ position: relative; min-height: 370px }
section.capabilities .section-bg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: .15; background: url(../images/backgrounds/capabilities-bg.jpg) 50% 50% no-repeat; -webkit-background-size: cover; background-size: cover; } 

section.capabilities h2{ margin-bottom: 4px; }
section.capabilities ul{ margin-top: -6px; }

section.capabilities .btn-block{ padding: 0 29px; }

section.capabilities .text-holder{ margin-bottom: 30px; }

@media only screen and (min-width: 992px) {
    section.capabilities .text-holder{ padding-right: 1.176470588235294em; }

}
@media only screen and (max-width: 992px) {
    section.services .skew-holder { padding-right: 0; }
    section.gallery .skew-holder { padding-right: 0; }
}
@media only screen and (max-width: 992px) {
	section.capabilities .btn-block { padding-left:0; padding-right:0;}
}

/*-----------------------------------------------------------------*/
/*--- Services Section ---*/
/*-----------------------------------------------------------------*/
section.services { padding-top: 30px; padding-bottom: 85px; }

section.services .skew-holder { padding: 71px 20px 15px 38px; }
section.services .skew-holder:before { top: -6px; }
section.services .skew-holder:after{ top: 11px; }
section.services .skew-holder h2 { margin-bottom: 4px; }
@media only screen and (max-width:767px) {
   	section.services .skew-holder { padding-top: 0; padding-right:0; margin:0;}
}

/*-----------------------------------------------------------------*/
/*--- Card Skew Style ---*/
/*-----------------------------------------------------------------*/
.items-skew{ overflow: hidden; }
.card-skew { margin: 15px 0; position: relative; }
.card-skew:before {width: 115px; height: 100%; position: absolute; z-index: 2; top: 0; left: 15px; background: url(../images/backgrounds/card.png) 0 0 no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; content: ''; }
.card-skew .inner{  display: block; position: relative; padding-top: 57%; }
.card-skew .inner:before,
.card-skew .inner:after{ position: absolute; top: 0; width: 50px; bottom: -1px; content: ''; background-color: #fff;
    transform: skewX(-13deg);
    -ms-transform: skewX(-13deg);
    -webkit-transform: skewX(-13deg);
}
.card-skew .inner:before{ left: -26px; z-index: 3; }
.card-skew .inner:after{ right: -26px; z-index: 2;}
.card-skew .inner .title{ margin: 0;  position: absolute; z-index: 2; bottom: 0; left: 16px; right: 28px; }
.card-skew .inner h3{ position: relative; margin: 0; padding: 13px 35px 8px; font-size: 1.1176em; text-transform: uppercase; color: #fff; }
.card-skew .inner:focus h3,
.card-skew .inner:hover h3{color: #a1b4d0; text-shadow: 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f, 0 0 4px #124c9f; }

.card-skew .inner h3:before,
.card-skew .inner h3:after{ display: block; position: absolute; bottom: 0; content: '';  }

.card-skew .inner h3:before{ top: -10px; left: 0; bottom: -1px; width: 16px; background-color: #fff;
    transform: skewX(-13deg);
    -ms-transform: skewX(-13deg);
    -webkit-transform: skewX(-13deg);   
}

.card-skew .inner h3:after{ z-index: -1;  left: 0; right: 0; height: 100%; background-color: rgba(0,63,158,.95); background-image: url(../images/shadow-02.png); background-repeat: no-repeat; background-position: 0 0;
    transform: skewX(-13deg);
    -ms-transform: skewX(-13deg);
    -webkit-transform: skewX(-13deg);
}
.card-skew .inner img{ width: 100%; }

@media only screen and (max-width: 991px) {
    .card-skew .inner:before, .card-skew .inner:after{ width: 60px; }  
    .card-skew .inner:before{ left: -30px; }
    .card-skew .inner:after{ right: -30px; }
    .card-skew .inner .title{ right: 40px; } 
}
@media only screen and (max-width: 639px) {
    section.services .item{ width: 100%; float: none; }
    section.gallery .item{ width: 100%; float: none; }
}

/*-----------------------------------------------------------------*/
/*--- Contact Section ---*/
/*-----------------------------------------------------------------*/
section.contact .form { padding: 6px 0 22px; }
section.contact .info strong { display: block; }
section.contact .info a { font-size: 1.352941176470588em; }
section.contact .info img { margin-top: 6px; margin-right: 20px; }

section.contact .info-phone{ padding: 27px 0 0 5px; }
section.contact .info-phone img { margin-right: 10px; margin-top: 033; }

section.contact .bttn-slant { max-width: 176px; width: 100%; }
section.contact .bttn-slant { margin-top: 30px; }

section.contact .skew-holder  { padding-right: 0; }
section.contact .message-holder { display: none; margin-bottom:2em;}

@media only screen and (max-width: 640px) {
	section.contact .bttn-slant { max-width:100%; }
}

/*-----------------------------------------------------------------*/
/*--- Map Canvas Styles ---*/
/*-----------------------------------------------------------------*/
.map-holder { margin-top: 90px; padding-top: 16.2%; position: relative; z-index: 1; }
.map-holder #mapCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
@media only screen and (max-width: 1024px){
    
    .map-holder { padding-top: 20%; }    

}
@media only screen and (max-width: 780px){
    
    .map-holder { margin-top: 67px; }

}
@media only screen and (max-width: 767px){
    
    .map-holder { margin-top: 0; padding-top: 220px; }

}


@media only screen and (max-width: 992px){
    section.contact .content { padding-right: 10px; }
    section.contact .form{ padding-bottom: 40px; }
}
@media only screen and (max-width: 768px){
    section.contact .content { padding-bottom: 40px; }
    section.contact .form{ padding-bottom: 40px; }
}
/*-----------------------------------------------------------------*/
/*--- Services Section ---*/
/*-----------------------------------------------------------------*/

.items { padding: 0 7px; }
.items ul li { margin-bottom: 10px; }
section .items ul li:before{ top: 8px; left: 5px; background-color: #003f9e; }
.items ul li a:focus,
.items ul li a:hover{ text-decoration: underline; }

@media only screen and (max-width: 768px){
   section.section-services .items { padding-right: 0; }
}

@media only screen and (max-width: 767px){
	.home .skew-holder:before,
	section.about .skew-holder:before,
   .skew-holder:before { top: -10px; left:0;}
	 section.about .skew-holder:after,
	 .skew-holder:after { top:-5px; left:0;}
}
/*-----------------------------------------------------------------*/
/*--- laser-cutting-services Styles ---*/
/*-----------------------------------------------------------------*/
.video-iframe { width:50%; padding-right:30px; margin-bottom:15px;}
.video-iframe .holder {  padding-top:56%; position:relative; overflow:hidden; }
.video-iframe iframe { position:absolute; top:50%; left:50%; transform: translateX(-50%) translateY(-50%); width:100%; height:100%;}
@media only screen and (max-width: 767px){
  .video-iframe  {width:100%; padding-right:0;}
}
/*-----------------------------------------------------------------*/
/*--- Footer Styles ---*/
/*-----------------------------------------------------------------*/
#footer { padding-top: 3.117647058823529em; padding-bottom: 3.529411764705882em; }
.home #footer { padding-bottom: 2.3529em; }

#footer .skew-holder{ margin-left: 18px;  }
.home #footer .skew-holder{ margin-left: 0; padding-left: 45px; }

#footer .copyright{padding: 0 7px; font-size: 13px; }
.footer .info { margin-top: 2px; }
.footer .info h4{  margin-bottom: 12px; }
.info a {color: inherit; }
.info .icon{ width: 65px; display: inline-block; vertical-align: baseline; font-size: 11px; color: #909090; }
.info .icon + *{ display: inline-block; vertical-align: baseline; }
.info > img { float: left; clear: both; }
.info > img + *{ overflow: hidden; }
.info .icon > img{ float: none; display:inline-block; vertical-align:bottom;}
.info img{ margin-right: 5px; }
.footer .info a[href^="tel:"] { font-size: 1.117647058823529em; }
.footer-copyright { padding: 0 13px; }
.footer-copyright img{margin: 0 8px 7px; }

@media only screen and (max-width: 1024px){
    #footer .skew-holder{ padding-right: 0; }
}

@media only screen and (max-width: 970px){
   #footer .info{ width: 100%; margin-bottom: 10px; }
}

@media only screen and (max-width: 639px){
    #footer .item{ width: 100%; padding-top: 20px; }
    #footer .item:first-child{ padding-top: 0; }
    #footer .text-right{ text-align: center; }
    .footer-copyright { padding: 0; }
}
@media only screen and (max-width: 767px){
    .info img,
    .info img + *{ margin-bottom: 5px; }
}

/*-----------------------------------------------------------------*/
/*--- Mobile Style ---*/
/*-----------------------------------------------------------------*/
.item-fancybox{ display: none; }

/*-----------------------------------------------------------------*/
/*--- Mobile Style ---*/
/*-----------------------------------------------------------------*/
#header.mm-slideout { position:fixed; z-index: 10; top:0; left:0; width:100%; min-width:320px;}


@media only screen and (min-width: 1201px){
  .row-51 { margin-left: -51px; margin-right: -51px;}
  .row-51 > [class^="col-"]{ padding-left: 51px; padding-right: 51px;}

}

/*-----------------------------------------------------------------*/
/*--- Mobile Style ---*/
/*-----------------------------------------------------------------*/
@media only screen and (min-width: 1200px) {
	.pull-left-lg {	float: left;}
	.pull-right-lg { float: right;}
	.rtl-ld { float: right;	}
}

@media only screen and (min-width: 992px) {
	.pull-left-md { float: left; }
	.pull-right-md { float: right }
	.rtl-md { float: right;	}
	.pull-md-none { float: none; }
    
    
}
@media only screen and (min-width: 991px) {
	.pull-sm-none { float: none;}
}

@media only screen and (min-width: 768px) {
	.pull-left-sm { float: left;}
	.pull-right-sm { float: right;	}
    
    .text-center-sm { text-align:center;}
    .text-left-sm { text-align:left;}
    .text-right-sm { text-align:right;}

    /* Phone */
    a[href^="tel:"] { pointer-events: none; cursor: default;  }

    /* flexbox center */
    .aligner { 
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex; 
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;

        align-items: center;
    } 
        
}
@media only screen and (max-width: 991px) {
  .logo { max-width: 65px; }
  .logo:after { right: 6px; }
  .logo img{ vertical-align: top; }
}

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

    #main-menu{ margin-left: -17px; }
    #main-menu ul > li > a { padding: 22px 5px 22px; }
  
    .logo:after{ left: 8px; }
		 .mm-listview > li.active { background:#fff;}
}

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

  .mm-listview, .mm-listview > li{ display: block; }
	.col-xs-6 { clear: none; }
	.pull-xs-none { float: none;}
     
	.text-center-xs { text-align:center;} 
	.text-left-xs { text-align:left;}
	.text-right-xs { text-align:right;}
	
	body { font-size: 14px; }

}
@media only screen and (max-width: 480px) {
	.pull-left-xs { float: left;	}
	.pull-right-xs { float: right;	}
}

@media only screen and (max-width: 479px) {	
	.col-xxs-6  { width: 50%; float: left;	}
	.col-xxs-12  { width: 100%; float: none;	}
}

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