/*
-------------------------------------------------
URI: http://www./
Created by Forte Trinity
-------------------------------------------------

CONTENTS

1: SITE MASTER SETUP (including reset from Tripoli)

2: TYPOGRAPHY/DESIGN 

3: LAYOUT
	3.1 main form
	3.2 container
	3.3 header
	3.4 content
	3.5 primary content
	3.6 secondary content
	3.7 tertiary content
	3.8 footer
	
4: GLOBAL ELEMENTS / CONTROLS
	4.1 accessibility
	
5: TEMPLATE / PAGE SPECIFIC
	
6: USEFUL CLASSES

/* -----------------------------------------------
1. SITE MASTER SETUP
----------------------------------------------- */


* { margin:0; padding:0; text-decoration:none; outline:none } 

/* -----------------------------------------------
2. TYPOGRAPHY / DESIGN
----------------------------------------------- */

html {color:#000;}
body {font-family: 'freightsans_lightregular', Helvetica, sans-serif;}
code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size:1.0em; }
h1 { font-size:24px; color:#249387; margin:0 0 20px 0; text-transform: uppercase; line-height: 30px; font-family: 'freightsans_boldregular', Helvetica, sans-serif;}
h2 { font-size:24px; color:#249387; margin:0 0 20px 0; border-bottom: 1px solid #249387; font-family: 'freightsans_boldregular', Helvetica, sans-serif;text-transform: uppercase; padding: 0 0 10px;}
.sub h2 {font-size: 16px;}
h3 { font-size:1.4em; color:#000; margin:0 0 20px 0 }
h4 { font-size:1.3em; color:#000; margin:0 0 20px 0 }
h5 { font-size:1.2em; color:#000; margin:0 0 20px 0 }
h6 { font-size:1.2em; color:#000; margin:0 0 20px 0 }
p { font-size: 16px; color:#000; margin:0 0 20px 0; line-height: 20px;}
a { color: #249387;-webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease;}
a:hover { }
hr { display:block; background:#aaa; color:#aaa; width:100%; height:1px; border:none }
#skiplinks {display: none;}
footer p {color: #FFF; font-size: 11px;}
footer a {color: #FFF; text-decoration: underline;}
p.compliance {font-size: 11px; line-height: 10px;}

/* 2.1 - font face 


@font-face {
    font-family: 'freightsans_lightregular';
    src: url('../fonts/freightsans_light-webfont.eot');
    src: url('../fonts/freightsans_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/freightsans_light-webfont.woff2') format('woff2'),
         url('../fonts/freightsans_light-webfont.woff') format('woff'),
         url('../fonts/freightsans_light-webfont.ttf') format('truetype'),
         url('../fonts/freightsans_light-webfont.svg#freightsans_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'freightsans_boldregular';
    src: url('../fonts/freightsans_bold-webfont.eot');
    src: url('../fonts/freightsans_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/freightsans_bold-webfont.woff2') format('woff2'),
         url('../fonts/freightsans_bold-webfont.woff') format('woff'),
         url('../fonts/freightsans_bold-webfont.ttf') format('truetype'),
         url('../fonts/freightsans_bold-webfont.svg#freightsans_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/
/* -----------------------------------------------
3. LAYOUT
----------------------------------------------- */

/* 3.1 - main form */
.wrapper { width:980px; margin:0 auto;}

/* 3.2 - container */
div#container {}

/* 3.3 - header */
header {height: 100px; width: 100%; -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.35);-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.35);box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.35); z-index: 999; position: absolute; background: #FFF;}
#logo { width: 300px; float: left;}
#slider {border-bottom: 8px solid #249487; background-image: url(../images/slider/1.jpg); background-size: cover; width: 100%; height: 257px; padding: 100px 0 0;}
#slider2 {border-bottom: 8px solid #249487; background-image: url(../images/slider/1.jpg); background-size: cover; width: 100%; height: 365px; padding: 100px 0 0;}

/* 3.4 - content */
#content {padding: 50px 0;}

/* 3.5 - primary content */
#primary-content {width: 333px; float: left;}
.sub #primary-content {width: 100%; float: left;}

#full-width {width: 100%;}

.contact-l {width: 35px; float: left;}
.contact-r {width: 298px; float: left;} 

.categories {width: 100%; margin: 0 0 20px;}
.category {width: 30%; float: left; margin: 0 3% 0 0;}
.category:nth-child(3), .category:nth-child(6) {width: 30%; margin: 0;}
.category img {max-width: 100%; width: 100%;}

/* 3.6 - secondary content */
#secondary-content  {width: 627px; float: left; margin: 0 0 0 20px;}

/* 3.7 - tertiary content */
#tertiary-content {}

/* 3.8 - footer */
footer {background-color: #249487; padding: 50px 0 80px; width: 100%;}
#footer-fore {width: 100%;}

/* Form */

fieldset {border: none;}

label {width: 100%; display: block; margin: 0 0 10px;}

input {
	background-color: #249487;
	padding: 10px 2%;
	border: 0;
	width:96%;
	margin: 0 0 20px;
	font-family: 'freightsans_lightregular', Helvetica, sans-serif;
	font-size: 16px;
	color: #FFF; 
}

input:hover {
	background-color: #666;
}

.btn-submit {
	background-color: #249487;
	margin: 20px 0 0;
	color: #FFF;
	font-family: 'freightsans_boldregular', Helvetica, sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	padding: 10px 15px;
	display: inline-block;
	width: auto;
	cursor: pointer;
}

.btn-submit:hover {
	background-color: #008276;
}

textarea {
	background-color: #249487;
	padding: 10px 2%;
	border: 0;
	width: 96%;
}

textarea:hover {
	background-color: #666;
}

li {
	list-style: none;
}

.owl-theme .owl-controls {
    position: absolute;
    z-index: 999999;
    top: 90%;
    left: 0;
    right: 0;
}


/* -----------------------------------------------
4. GLOBAL ELEMENTS / CONTROLS
----------------------------------------------- */

/* 4.1 - accessibility */
ul#skiplinks { display:none }
ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden } 
ul#skiplinks a:active, ul#skiplinks a:focus { position:static; width:auto; height:auto }


/* -----------------------------------------------
5. TEMPLATE/PAGE SPECIFIC
----------------------------------------------- */

.bulletsarea {width: 100%;}
ul.bullets {width: 100%; float: left; margin: 0 0 0 5%;}
.bullets li {list-style: none; margin: 0 0 10px;}
.bullets li .fa {color: #249487; margin: 0 10px 0 0;} 

a.button {background: #249487; border-radius: 5px; padding: 10px 20px; color: #FFF;font-family: 'freightsans_boldregular', Helvetica, sans-serif; font-size: 24px; display: inline-block; margin: 50px 0 0; cursor: pointer;}
a.button:hover {background: #008276;}
/* -----------------------------------------------
6. USEFUL CLASSES
----------------------------------------------- */


.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden }
.clr { overflow:hidden; clear:both; height:1px; margin-top:-1px }
.la { text-align:left }
.ra { text-align:right }
.ca { text-align:center }
.fl { float:left; }
.fr { float:right }
.center { margin: 0 auto; margin-top: 20px; margin-bottom: 15px; }
.vt { vertical-align:top }
.vm { vertical-align:middle }
.vb { vertical-align:bottom }
.nb { border:0 none }
iframe {margin: 0 0 30px;}

.hidden { display:none }

/* MENU */


#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: 'freightsans_boldregular', Helvetica, sans-serif;
  line-height: 1;
  text-transform: uppercase;
  float: right;
}

#cssmenu ul {}

#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li > a {
  padding: 40px 25px 20px;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
  color: #249487;
}
#cssmenu #menu-indicator {
  position: absolute;
  top: 0;
  display: block;
  height: 0;
  width: 0;
  border: 15px solid transparent;
  border-top-color: #249487;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}



#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center > ul > li {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li > a {
  padding: 18px 25px;
}
#cssmenu.small-screen > ul > li:after,
#cssmenu.small-screen > ul > li:before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 18px 25px;
  cursor: pointer;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fd8a17;
  background: url('images/bg.png');
}
#cssmenu.small-screen #menu-button.menu-opened {
  color: #444444;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 19.5px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #fd8a17;
  border-bottom: 2px solid #fd8a17;
  width: 18px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #444444;
  border-bottom: 2px solid #444444;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 25px;
  top: 29.5px;
  display: block;
  width: 18px;
  height: 2px;
  background: #fd8a17;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #444444;
}
#cssmenu.small-screen #menu-indicator {
  display: none;
}




.product-title {
    font-size: 24px;
    color: #249387;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    line-height: 30px;
    font-family: 'freightsans_boldregular', Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 40px !important;
    
}

.product-header {
        color: #249387;
    margin: 0 0 20px 0;
    border-bottom: 1px solid #249387;
    font-family: 'freightsans_boldregular', Helvetica, sans-serif;
    text-transform: uppercase;
    padding: 0 0 10px;
    font-size: 16px;
    font-weight: bold;
    
}


.data-box p {
    background-color: #249387;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 80%;
    color: #fff;
    margin-bottom: 20px;
    float: right;
}

.type-box p {
    background-color: #249387;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 80%;
    color: #fff;
    margin-bottom: 20px;

}


.mag-glass {
    float: left;
    padding-right: 10px;
    font-size: 20px !important;
    padding-left: 10px;
    padding-top: 30px;
    color: #249387;
}

.larger-image {
    float: left;
    padding-top: 30px;
    color: #249387;
}