/*
Theme Name: Triconn Theme
Author: SWD
Author URI: https://swd.ca
Version: 1.0.0

*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0; }
body {margin: 0; padding:0; font-family: 'Open Sans', sans-serif; color: #181617; font-size: 20px; text-rendering: optimizeLegibility; overflow-x: hidden;}

*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}




/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/


article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}


mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  font-size: 0.875rem;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}



/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/

blockquote, q {
  quotes: "" ""; }
  blockquote:before, blockquote:after, q:before, q:after {
    content: ""; }

hr {
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul, ol {margin: 0 0 1.75em 1.25em; padding: 0;}
ul {list-style: none;}
ol {list-style: decimal; margin-left: 1.5em;}
li > ul, li > ol {margin-bottom: 0;}
dl {margin: 0 0 1.75em;}
dt {font-weight: 700;}
dd {margin: 0 0 1.75em;}



img {
  height: auto;
  /* Make sure images are scaled correctly. */
  max-width: 100%;
  /* Adhere to container width. */
}

figure {
  margin: 1em 0;
  /* Extra wide images within figure tags don't overflow the content area. */
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
::-webkit-input-placeholder {color: #9aa7b8;}
:-moz-placeholder {color: #9aa7b8;}
::-moz-placeholder {color: #9aa7b8; opacity: 1;}
:-ms-input-placeholder {color: #9aa7b8;}




input {line-height: normal;}

.button, button, button[disabled]:hover, button[disabled]:focus, input[type="button"], input[type="button"][disabled]:hover, input[type="button"][disabled]:focus, input[type="reset"], input[type="reset"][disabled]:hover, input[type="reset"][disabled]:focus, input[type="submit"], input[type="submit"][disabled]:hover, input[type="submit"][disabled]:focus 
{margin:0 auto; padding:10px 20px 9px; text-align: center; width: auto; line-height: 1; font-size: 22px; color: #fff; border: 0 !important; background-color: #dc382c; transition-property: all; transition-duration: 1s; transition-timing-function: ease-out; text-transform: uppercase;}

.button:hover, button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus 
{background-color: #a7d7e1; color: #181617 !important;}


/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
  color: #dc382c; text-decoration: none;
}

a:hover, a:focus, a:active {
  color: #dc382c;
}

a:focus {
  outline: thin dotted;
}

a:hover, a:active {
  outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/

.alignleft,
.alignright {
	max-width: 580px !important;	/* Let's work to make this !important unnecessary */
}

.alignleft img,
.alignright img,
.alignleft figcaption,
.alignright figcaption {
	max-width: 50%;
	width: 50%;
}

.alignleft figcaption {
	clear: left;
}

.alignright figcaption {
	clear: right;
}

.alignleft img,
.alignleft figcaption {
  float: left;
  margin-right: 1.5em;
}

.alignright img,
.alignright figcaption {
  float: right;
  margin-left: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget-area {
	width: 25%;
}

.widget {
  margin: 0 0 1.5em;
  /* Make sure select elements fit in widgets. */
}

.widget select {
  max-width: 100%;
}


/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  /* Theme Footer (when set to scrolling) */
  display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {margin-bottom: 1.5em; max-width: 100%;}
.wp-caption img[class*="wp-image-"] {display: block; margin-left: auto; margin-right: auto;}
.wp-caption .wp-caption-text {margin: 0.8075em 0;}
.wp-caption-text {text-align: center;}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {margin-bottom: 1.5em;}
.gallery-item {display: inline-block; text-align: center; vertical-align: top; width: 100%;}
.gallery-columns-2 .gallery-item {max-width: 50%;}
.gallery-columns-3 .gallery-item {max-width: 33.3333333333%;}
.gallery-columns-4 .gallery-item {max-width: 25%;}
.gallery-columns-5 .gallery-item {max-width: 20%;}
.gallery-columns-6 .gallery-item {max-width: 16.6666666667%;}
.gallery-columns-7 .gallery-item {max-width: 14.2857142857%;}
.gallery-columns-8 .gallery-item {max-width: 12.5%;}
.gallery-columns-9 .gallery-item {max-width: 11.1111111111%;}
.gallery-caption {display: block;}




/* ============================================================================
GENERAL STYLES 
===============================================================================*/
.container {margin: 0 auto; width: 100%; max-width: 1170px;}
section {margin: 0 auto; width: 100%; max-width: 2560px; padding: 50px 0;}
h1, h2, h3, h4, h5, h6 {margin:0; padding:0 0 10px 0; font-family: 'Lato', sans-serif;}
p {margin: 0 0 20px 0; padding: 0; font-size: 18px; line-height: 1.3;}




/* ============================================================================ 
HEADER STYLES
==============================================================================*/
header {margin: 0 auto; width: 100%; max-width: 2560px; padding: 15px 0 0;}
header .custom-logo {margin:5px 0 15px; width:380px; height: auto; float: left;}
header .span7 p {margin:0; padding:20px 0 0 6%; font-size: 30px; color: #000000; line-height: 1.2; font-family: 'Lato', sans-serif;}

/* ============================================================================
MAIN MENU STYLE 
===============================================================================*/
header nav {margin:0; padding:0; background-color: #181617;}
header .primary-menu {margin:0; padding:5px 0; }
header .primary-menu li {margin:0; padding:0 20px 0 0; height: auto; display: inline-block; position: relative;}
header .primary-menu li a {display: block; margin:10px 0 7px; padding: 0 0 3px; color: #fff; font-size: 20px; line-height: 1; text-transform: uppercase; font-family: 'Lato', sans-serif; border-bottom: 4px solid transparent;}
header .primary-menu li.bookInspection {margin:0; padding:0; background-color: #dc382c; transition-property: all; transition-duration: 1s; transition-timing-function: ease-out; text-transform: uppercase;}
header .primary-menu li.bookInspection:hover {background-color: #a7d7e1; color: #181617 !important;}
header .primary-menu li.bookInspection a {margin:10px 0 0; padding: 0 15px 13px 15px; transition-property: all; transition-duration: 1s; transition-timing-function: ease-out; text-transform: uppercase;}
header .primary-menu li.bookInspection a:hover {color: #181617 !important; border-bottom: 4px solid #a7d7e1;}


header .primary-menu li .sub-menu {display: none; position: absolute; width: auto; top:40px; left:-10px; margin:0; padding:15px 20px; height: auto; z-index: 9999999; background-color: #181617;}
header .primary-menu li .sub-menu li  {margin:0; padding:0; white-space: nowrap;  width: 100%;}
header .primary-menu li .sub-menu li a {display: block; margin:0; padding: 4px 10px; text-transform: none; color: #fff; font-size: 20px; text-align: left; line-height: 1; }

header .primary-menu li a:hover {border-bottom: 4px solid #dc382c;}
header .primary-menu li.current-menu-item a  {border-bottom: 4px solid #dc382c;}
header .primary-menu li .sub-menu li.current-menu-item a  {border-bottom: 4px solid transparent; background-color: #dc382c;} 
header .primary-menu li .sub-menu li a:hover {border-bottom: 4px solid transparent; background-color: #dc382c;}


header .primary-menu li.current-menu-item .sub-menu li a {border-bottom: 4px solid transparent; background-color: #dc382c;}
header .primary-menu li.current-menu-item .sub-menu li.current-menu-item a  {border-bottom: 4px solid transparent; background-color: #dc382c;}


/* ============================================================================ 
HOME STYLE
==============================================================================*/
.heroImage {margin: 0 auto; width: 100%; max-width: 2560px; padding: 9% 0 4%; background-repeat: no-repeat; background-size: cover;}
.heroImage .heroContent {margin:0 0 0 -50px; padding: 40px 60px 55px; background-color: rgba(0, 0, 0,.6); width: 63%; color: #fff !important;}
.heroImage .heroContent h1 {margin:0 0 50px 0; padding:0; font-size: 76px; font-weight: 400; line-height: 1.1;}
.heroImage .heroContent h1 strong  {text-transform: uppercase; font-weight: 400;}
.heroImage .heroContent .button {margin: 0 !important; padding: 18px 20px 20px !important; text-transform: none; font-weight: 700; font-size: 25px !important;}
.heroImage .heroContent .button a {color: #fff;}

.intro {margin: 0 auto; width: 100%; max-width: 2560px; padding: 50px 0 30px;}
.intro p {font-size: 22px !important;}

.serviceHome {margin: 0 auto; width: 100%; max-width: 2560px; padding:0 0 70px;}
.serviceHome h2 {margin:0 0 50px 0; padding:0; text-align: center; font-size: 36px; text-transform: uppercase; position: relative;}
.serviceHome h2:after {content: ''; display: block; margin:-26px 0 0 0; padding:0; width: 100%; height: 18px; background-color: #a7d7e1;}
.serviceHome h2 span {display: inline-block; margin:0; padding: 0 20px; width: auto; background-color: #fff; position: relative;}
.serviceHome h2 span:before {content:''; display: block; position: absolute; top: 18px; left: -18px; width: 0; height: 0; border-top: 18px solid #fff; border-left: 18px solid transparent;}
.serviceHome h2 span:after {content:''; display: block; position: absolute; top: 18px; right: -18px; width: 0; height: 0; border-top: 18px solid #fff; border-right: 18px solid transparent;}


.serviceHome .span3 {margin:0 !important; padding:0 50px !important; width: 25% !important; height: 530px;}
.serviceHome .span3 .iconBox {margin:0; padding:0; height: 220px; display: flex; justify-content: center; align-items: center;}
.serviceHome .span3 h3 {margin:0; padding:15px; font-size: 26px;}
.serviceHome .span3 h3 a {color: #181617;}
.serviceHome .span3 ul {margin:0; padding:0 0 0 32px; list-style-type: disc;}
.serviceHome .span3 ul li {margin:0; padding:0 0 5px 0;}


@media (max-width : 1610px) {
.serviceHome .span3 {margin:0 !important; padding:0 20px !important; width: 33.33333333333333% !important; height: 530px;}  
  
}

.viewAll {text-align: center;}
.viewAll p .button {margin: 0 !important; padding: 18px 20px 20px !important; text-transform: none; font-weight: 600; font-size: 25px !important;}







/* ============================================================================ 
INTERNAL PAGES
==============================================================================*/
.pageTitle {margin: 0 auto; width: 100%; max-width: 2560px; padding: 0; vertical-align: text-top; background-size: cover; background-repeat: no-repeat; background-position: center center; background-size: cover; height: 400px; display: flex; justify-content: left; align-items: center;}
.pageTitle h1 {margin:0 0 0 -50px; padding: 40px 50px; display: inline-block; width: auto; box-shadow: inset 0 0 0 10000px rgba(0, 0, 0,.5); font-size: 60px; font-weight: 400; color: #fff; line-height: 1;}

.internalContent {margin: 0 auto; width: 100%; max-width: 2560px; padding: 70px 0;}
.internalContent p {margin:0; padding:0 0 20px; font-size: 20px; line-height: 1.4;}

.internalContent h2 {margin:20px 0 0 0; padding:0 0 15px; line-height: 1; font-size: 36px; text-transform: uppercase; font-weight: 400;}
.internalContent h3, .internalContent h4, .internalContent h5, .internalContent h6 {margin: 20px 0 0 0; padding:0 0 10px 0; font-size: 26px; text-transform: uppercase; font-weight: 400;}

.internalContent ul {margin:10px 0 20px 0; padding:0;}
.internalContent ul li {margin:0; padding:0 0 4px 20px; position: relative; text-align: left;}
.internalContent ul li:before {content:''; position: absolute; top: 11px; left: 0; display: block; margin:0; padding:0; width: 8px; height: 8px; background-color: #000000; border-radius: 50%;}

.internalContent a {color: #dc382c;}
.internalContent a:hover {text-decoration: underline;}
.internalContent .gform_body ul {margin:0 !important; padding:0 !important;}
.internalContent .gform_body ul li:before {display: none !important;} 
.internalContent .button, .internalContent .button a {color: #fff !important;}
.internalContent .button:hover, .internalContent .button a:hover {color: #181617 !important;}

.blocks-gallery-grid li:before {display: none !important;}
.blocks-gallery-grid li {padding: 0 !important;}

.internalContent .wp-block-column h2 {margin:0;}
.internalContent .wp-block-column ul {margin:0; padding: 0;}
.internalContent .wp-block-column ul li {margin: 0 0 0 20px;}

.noHover:hover {text-decoration: none !important;} 

#gform_wrapper_27 .gform_body span.address_zip {padding-left: 0 !important;}
.gform_wrapper.gravity-theme .ginput_container_address .ginput_right {padding-left: 0 !important;}

/* ============================================================================ 
FOOTER
==============================================================================*/
.CTAbox {margin: 0 auto; width: 100%; max-width: 2560px; padding:35px 0; background-color: #181617; text-align: center; color: #a7d7e1 !important;}
.CTAbox h3 {margin:0; padding:0; font-size: 32px; font-weight: 400; line-height: 1.6;}
.CTAbox h3 a {color: #fff;}
.CTAbox h3 a:hover {text-decoration: underline;}


.badges {margin: 0 auto; width: 100%; max-width: 2560px; padding: 50px 0; text-align: center;}
.badges ul {margin:0; padding: 0; display: inline-block; width: auto;}
.badges ul li {margin:0; padding: 0 50px; display: inline-block; width: auto;}


footer {margin: 0 auto; width: 100%; max-width: 2560px; padding:50px 0 0; text-align: left; background-color: #181617; color: #fff !important;}
footer a {color: #fff;}
footer h4 {margin:0; padding:0 0 8px; font-size: 18px; line-height: 1; font-family: 'Open Sans', sans-serif;}
footer p {margin:0; padding:0 0 20px; font-size: 18px; line-height: 1.6;}

footer .footer-menu {margin: 0 0 50px 0 !important; padding:0; list-style-type: none; width: 100%;}
footer .footer-menu ul {margin:10px 0 0 0; padding:0;}
footer .footer-menu li {margin:0; padding:0 0 5px 15px; font-size: 18px !important; position: relative;}
footer .footer-menu li a {color: #fff;}
footer .footer-menu li a:hover {text-decoration: underline;}
footer .footer-menu li:before {content:''; position: absolute; top: 10px; left: 2px; display: block; margin:0; padding:0; width: 6px; height: 6px; background-color: #fff; border-radius: 50%;}


footer .social-menu {margin:10px 0 50px; padding:0; display: inline-block; width: auto;}
footer .social-menu li {margin:0 10px 0 0; padding:0; display: inline-block; width: auto;}
footer .social-menu li a {color: transparent; font-size: 0;}
footer .social-menu li a i {margin:0; padding:0; font-size: 40px; color: #fff;}

.copyrights {margin:0; padding:0; background-color: #000000;}
.copyrights p {margin:0; padding: 10px 0; font-size: 18px !important; color: #fff; text-align: center;}


/* ============================================================================ 
CSS ANIMATIONS
==============================================================================*/

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-ms-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-ms-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }

#fade-in {opacity:0; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s;}
:root #fade-in { opacity:1 \0/IE9; } 
#fade-in.first {-webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; animation-delay: 0.25s;}
#fade-in.second {-webkit-animation-delay: 0.5s; -moz-animation-delay:0.5s; animation-delay: 0.5s;}
#fade-in.third {-webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s;}
.fade-out.first {-webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; animation-delay: 0.25s;} 
.fade-out.second {-webkit-animation-delay: 0.5s; -moz-animation-delay:0.5s; animation-delay: 0.5s;}
.fade-out.third {-webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s;}



/**
=======================================================================================================================================================================================================
=======================================================================================================================================================================================================
MEDIA QUERIES
=======================================================================================================================================================================================================
=======================================================================================================================================================================================================
*/

/* ============================================================================ 
HAMBURGER MENU
==============================================================================*/
#hamburgericonmenuwrapper {display: none; z-index: 10000; position: absolute; font-size: 16px;}

#hamburgerui {overflow: hidden; position: fixed; right: 0; top: 0; z-index: 2; width: 100%;}
#hamburgerui ul {margin: 0; padding:0 10px; list-style-type: none; width: 100%; background: #dc382c; height: 50px;}
#hamburgerui li {display: block; margin: 0; padding:0; width: 50%; float: left;}
#hamburgerui li a.toggleButton {float: right; display: block; width: 40px; height: 40px; position: relative; text-decoration: none; margin: 7px 0 0 0; padding: 10px 20px; color: #ffffff; outline: none;   -webkit-transition: all 0.5s; transition: all 0.5s;}
#hamburgerui li .logoMobile {margin:0; padding:0; float: left; width: 40px; height: 40px; text-indent: -9000px; background-size: auto 100%;}
#hamburgerui li:last-of-type a:after{content: 'Menu'; visibility: hidden;}
#hamburgerui li a:visited {color:#ffffff;}
#hamburgerui li a:hover{background: transparent;}

#navtoggler{display: block; position: absolute; top: 50%; left: 50%; font-size: 8px; width: 4em; height: 2.5em; padding: 0; text-indent: -1000px; border: 0.6em solid #ffffff; border-width: 0.6em 0; cursor: pointer; -webkit-transform: translate3D(-50%, -50%, 0); transform: translate3D(-50%, -50%, 0); -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}
#navtoggler::before, #navtoggler::after{content: ""; display: block; position: absolute; width: 100%; height: 0.6em; top: 50%; margin-top: -0.3em; left: 0; background: #ffffff;  -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}

/* ###### CSS for Full Screen Menu NAV ###### */
.menu-mobile-menu-container {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #dc382c; padding-top: 80px; z-index: 1; visibility: hidden; overflow: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3D(0, -100%, 0); transform: translate3D(0, -100%, 0);  -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s; transition: transform 0.5s, visibility 0s 0.5s;}


/* #### Menu Hamburger Icon UI when shrinked CSS ######## */
#hamburgerui.shrink li:nth-last-of-type(n+2) a{opacity: 0; pointer-events: none;}

/* #### Menu Opened State CSS ######## */
#hamburgericonmenuwrapper.open .menu-mobile-menu-container{visibility: visible; -webkit-transform: translate3D(0, 0, 0);  transform: translate3D(0, 0, 0); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s;}
#hamburgericonmenuwrapper.open #navtoggler{ border-width: 0;}
#hamburgericonmenuwrapper.open #navtoggler::before{-webkit-transform: rotate(-45deg); transform: rotate(-45deg); /* rotate line to create "x" */}
#hamburgericonmenuwrapper.open #navtoggler::after{-webkit-transform: rotate(45deg); transform: rotate(45deg); /* rotate line to create "x" */}
#hamburgericonmenuwrapper.open #hamburgerui li:nth-last-of-type(n+2) a{ opacity: 0; pointer-events: none;}
#hamburgericonmenuwrapper.open .menu-mobile-menu-container ul{ opacity: 1; -webkit-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); /* restore UL to original positon */}


/* begin media for smartphone */
@media (min-width : 230px) 
and (max-width : 767px) {

body {overflow-x: hidden; max-width: 100%;}
 

.menu-main-menu-container {display: none;}
#hamburgericonmenuwrapper {display: block !important;}


#hamburgericonmenuwrapper .menu-item-has-children .sub-menu {display: none;}	
#hamburgericonmenuwrapper .menu-item-has-children .sub-menu li a {display: block !important;}


section {padding:40px 0;}
.container {margin: 0; padding: 0 10px;}	
.row-fluid [class*="span"], .row-fluid [class*="span"]:first-child {margin:0; padding:0;  width: 100%;}
.row-fluid [class*="span"]:first-child {margin-left: 0;}

#menu-mobile-menu {margin:0; padding:0;} 
#menu-mobile-menu li {margin:0; padding: 10px; text-align: center;}
#menu-mobile-menu li a {color: #ffffff;  font-size: 24px; text-transform: uppercase;} 

#menu-mobile-menu li ul {margin-top: 5px;} 
#menu-mobile-menu li ul li {margin:0; padding: 5px; text-align: center;}
#menu-mobile-menu li ul li a {color: #ffffff;  font-size: 20px;} 

  
header {text-align: center;}  
header .custom-logo {margin: 48px auto 10px; width: 80%; height: auto; float: none;}
header .span7 p {margin: 0 0 30px; padding: 0px; font-size: 22px;}
  
/* ============================================================================ 
HOME STYLE
==============================================================================*/
.heroImage {margin:0; padding: 0;}
.heroImage .heroContent {margin:0; padding: 20px; background-color: rgba(0, 0, 0,.6); width: 98%; color: #fff !important;}
.heroImage .heroContent h1 {margin:0 0 50px 0; padding:0; font-size: 44px; font-weight: 400; line-height: 1.1;}
.heroImage .heroContent h1 strong  {text-transform: uppercase; font-weight: 400;}
.heroImage .heroContent .button {margin: 0 !important; padding: 18px 20px 20px !important; text-transform: none; font-weight: 700; font-size: 18px !important;}


.intro {margin:0; padding: 50px 0 30px;}
.intro p {font-size: 22px !important;}

.serviceHome {margin:0; padding:0 0 70px;}
.serviceHome h2 {margin:0 0 50px 0; padding:0; text-align: center; font-size: 36px; text-transform: uppercase; position: relative;}
.serviceHome h2:after {content: ''; display: none; margin:-26px 0 0 0; padding:0; width: 100%; height: 18px; background-color: #a7d7e1;}

.serviceHome h2 span:before {content:''; display: none; position: absolute; top: 18px; left: -18px; width: 0; height: 0; border-top: 18px solid #fff; border-left: 18px solid transparent;}
.serviceHome h2 span:after {content:''; display: none; position: absolute; top: 18px; right: -18px; width: 0; height: 0; border-top: 18px solid #fff; border-right: 18px solid transparent;}


.serviceHome .span3 {margin:0 !important; padding:0 10px 20% !important; width: 98% !important; height: auto !important;}
.viewAll p .button {font-size: 18px !important;}
  

.page-id-175 .internalContent span.button {padding: 10px 10px 9px; font-size: 20px;}  
  
  
  
  
}
/* end media for smartphone */






/* iPads (portrait) ----------- */
@media (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : portrait) {

body {overflow-x: hidden; max-width: 100%;}
 

.container {margin: 0; padding: 0 10px;}	

header .span7 p {padding: 20px 0 0 3%; font-size: 20px;}
.heroImage .heroContent {width: 90%;}  
.serviceHome .span3 {padding: 0 20px !important; width: 50% !important;}  
.badges ul li {padding: 0 30px;}  
footer .social-menu li a i {font-size: 30px;}  
  
 
}
 
/* end iPads (portrait) ----------- */




/* iPads (landscape) ----------- */
@media (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : landscape) {

body {overflow-x: hidden; max-width: 100%;}

 
.container {margin: 0; padding: 0 20px;}	
 
header .span7 p {padding: 27px 0 0 3%; font-size: 28px;}
.heroImage .heroContent {width: 65%;}	
.serviceHome .span3 {padding: 0 10px !important; width: 33% !important; height: 550px;}  
  
  
  
	
}
/* end iPads (landscape) ----------- */