@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

body { font: 400 16px/1.5 'Open Sans', sans-serif; color: #000; -webkit-font-smoothing: antialiased; background-color: #F1F1F1; overflow-x: hidden; position: relative; right: 0; }

h1, .h2, h2, h3, h4 { margin-top: 1rem; margin-bottom: 1rem; }

h1 { font-size: 24px; font-weight: 700; color: #008AD2; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 20px; font-weight: 400; }
h4 { font-size: 18px; font-weight: 400; }

a:hover,
a { text-decoration: none !important; color: inherit; }

ul { padding-left: 20px; }

html { overflow-y: auto !important; height: auto !important; }

::-moz-selection { background-color: #008AD2; color: #FFF; }
::selection { background-color: #008AD2; color: #FFF; }

.background-white { background-color: #FFF; }
.background-blue { background-color: #008AD2; }
.background-grey { background-color: #3F3F3F; }
.color-white { color: #FFF; }
.color-blue { color: #008AD2; }
.color-grey { color: #888; }

.image-background { background-repeat: no-repeat; background-size: cover; background-position: center; }


body,
#nav-backdrop,
.product-detail .hover,
#header .header-nav,
.button-blue,
.button-white,
.nav-button:before,
.nav-button:after,
.fraction-slider .prev,
.fraction-slider .next {
	-webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
	    -ms-transition: all 0.5s ease;
	     -o-transition: all 0.5s ease;
	     	transition: all 0.5s ease;
}

.button-blue,
.button-white { border-style: solid; border-width: 2px; padding: 5px 15px; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.5); display: inline-block; }

.button-blue { background-color: #008AD2; border-color: #008AD2; color: #FFF; }
.button-blue:hover:not(:disabled) { background-color: transparent; color: #008AD2; }
.button-blue:disabled { opacity: 0.6; }
.button-white { background-color: #FFF; border-color: #FFF; color: #008AD2;  }
.button-white:hover { background-color: transparent; color: #FFF; }
.button-white:disabled { opacity: 0.6; }

section { width: 100%; max-width: 1330px; margin: auto; }


#top-content { background: url(../images/background.jpg) center no-repeat; }

#header { padding: 10px 0; background-color: #FFF; }
#header .header-nav { vertical-align: middle; }
#header .header-nav ul { padding: 0; margin: 0; list-style: none; font-size: 0; }
#header .header-nav ul li { display: block; font-size: 15px; }
#header .header-nav ul li a { padding: 10px 20px; font-weight: 700; display: block; border-bottom: 1px solid #E9E9E9; }
#header .header-nav ul li.show,
#header .header-nav ul li:hover,
#header .header-nav > ul > li > a:hover { color: #008AD2; }
.active { color: #008AD2 !important; }
#header .header-logo { width: 150px; }

.dropdown:after { content: ''; position: absolute; top: 24px; right: 10px; border-top: 5px solid #008AD2; border-right: 5px solid transparent; border-left: 5px solid transparent; }
.dropdown .dropdown-menu { border-radius: 0; border-width: 0; z-index: 10000; background-color: #008AD2; }
.dropdown .dropdown-menu li { display: block !important; white-space: nowrap; }
.dropdown .dropdown-menu li a { padding: 10px 30px !important; border-bottom: 1px solid rgba(0,0,0,0.1) !important; color: #FFF !important; }
.dropdown .dropdown-menu li a.active,
.dropdown .dropdown-menu li a:hover { background-color: #037FBF; }

.header-details { margin: 0; font-weight: 700; font-size: 14px; padding: 10px 0 10px 20px; border-bottom: 1px solid #E9E9E9; }
.header-details span { color: #888; }
.header-heading { font-size: 16px; font-weight: 700; padding: 15px 30px; border-bottom: 2px solid #008AD2; margin-bottom: 0; }

.nav-button { float: right; padding: 18px 5px; position: relative; z-index: 10000; }
.nav-button:before, .nav-button:after { content: ''; position: absolute; left: 5px; right: 0; width: 30px; height: 3px; background-color: #888; }
.nav-button:before { top: 10px; }
.nav-button:after { top: 26px; }
.nav-button span { display: block; width: 30px; height: 3px; background-color: #888; }

.show-nav .nav-button span { opacity: 0; }
.show-nav .nav-button:before,
.show-nav .nav-button:after { background-color: #FFF; }

.show-nav .nav-button:before { top: 18px; -moz-transform: rotate(223deg); -webkit-transform: rotate(223deg); -o-transform: rotate(223deg); -ms-transform: rotate(223deg); transform: rotate(223deg); }
.show-nav .nav-button:after { top: 18px; -moz-transform: rotate(-223deg); -webkit-transform: rotate(-223deg); -o-transform: rotate(-223deg); -ms-transform: rotate(-223deg); transform: rotate(-223deg); }



#banner { background-color: rgba(0, 0, 0, 0.6); }
#banner .slide-title { font-size: 50px; font-weight: 700; color: #FFF;  }
#banner .slide-sub-title { font-size: 50px; color: #FFF;  }
#banner .slide-desc { font-size: 24px; color: #FFF; line-height: 1.6 !important; }
#banner a { padding: 0.5% 1%; }



.product-detail { position: relative; display: block; overflow: hidden; }
.product-detail .hover { position: absolute; left: 0; right: 0; bottom: -55px; background-color: #008AD2; margin: 0; padding: 15px; color: #FFF; }
.product-detail .hover h4 { margin-top: 0; padding: 5px 0; }
.product-detail:hover .hover { padding: 50px 0; bottom: 0; background-color: rgba(0, 138, 210, 0.9); }

.footer { font-size: 14px; color: #d2d2d2; }

.product-table { border-bottom: 1px solid #F1F1F1; }
.product-table tr:nth-of-type(odd) { background-color: #F9F9F9; }
.product-table tr td { padding: 6px 10px; }
.product-table tr td:first-child { font-weight: 700; }

@media (max-width: 991px) {
	#header .header-nav { position: fixed; top: 0; bottom: 0; left: 0; right: -150px; opacity: 0; z-index: -1; }
	#header .header-nav > div { z-index: 10; background-color: #F1F1F1; width: 250px; margin-left: auto; height: 100%; overflow-y: auto; padding-bottom: 30px; }
	.show-nav { right: 250px; overflow: hidden !important; position: relative; width: 100%; }
	.show-nav #header .header-nav { right: 0; opacity: 1; }

	#nav-backdrop { position: absolute; left: 0; right: 100%; top: 0; bottom: 0px; z-index: 9999; background-color: rgba(0, 0, 0, 0.6); }
	.show-nav #nav-backdrop { right: 0px; }

	.dropdown .dropdown-menu { position: relative !important; transform: none !important; float: none; }
}

@media (min-width: 576px) {
	#header .header-logo { width: 150px; }

}

@media (min-width: 768px) {

}

@media (min-width: 992px) {
	#header { padding: 20px 0; }
	#header .header-nav ul li { display: inline-block; font-size: 14px; }
	#header .header-nav ul li a { padding: 8px 10px; border-bottom: 0px; }
	.header-details { font-size: 13px; padding: 0; border-bottom: 0px; }
	.dropdown .dropdown-menu { top: 20px !important; }

}

@media (min-width: 1200px) {
	.container { max-width: 1300px; }

	#header .header-logo { width: 180px; }
	#header .header-nav ul li { font-size: 15px; }
	#header .header-nav ul li a { padding: 15px 25px; }
	.header-details { font-size: 14px; margin-top: 5px; }
}