/* ==========================================================================
Import
========================================================================== */
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.lexend-deca-light {
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
.lexend-deca-medium {
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.lexend-deca-regular {
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.montserrat-regular {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* ==========================================================================
Base
========================================================================== */

*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {font-size: 1em}
body {
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px;
  font-weight: 400;
	height: 100%;
	padding-top: 0px;
}

td {
	padding: 10px;
	text-align: left;
}

a, a:visited, a:focus, a:active { color: #F9471A; text-decoration: none; }
a:hover { text-decoration: none; }
a, a:active, a:focus{ outline: none }
a:focus { color: #159133; text-decoration: none; }

.well-blue a,  .well-blue  a:hover { font-weight: 700; color: #fff; }

h1 { margin-top: 0; font-weight: 700; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h1, h2, h3, h4, h5 { font-family: "Lexend Deca", Arial, Helvetica, sans-serif; color: #F9471A; font-weight: 700; }

ul { list-style-type: '\2713'; }
li { padding-left: 10px; }

/* ==========================================================================
Typography
========================================================================== */
.text-caps 				{ text-transform: uppercase }
.text-justify 		{ text-align: justify }
.text-right				{ text-align:right; }
.text-center			{ text-align:center; }
.text-bold 				{ font-weight: 700 !important; }
.text-light 			{ font-weight: 300 !important;  }
.text-italic 			{ font-style: italic; }
.text-underline 	{ text-decoration: underline; }
.text-white 			{ color:white; }
.text-black 			{ color:black !important; }
.text-red	 	  		{ color: #c6171e; }
.text-grey 				{ color: #707475 !important }
.text-darkgrey  		{ color: #444 !important }
.text-green 			{ color: #159133 !important }
.text-blue				{ color: #1E1CB0 !important }
.text-lightblue			{ color: #00C9FF !important }
.color-primary	 	    { color: #F9471A !important }
.color-secondary    	{ color: #707475 !important }
.error 					{ color: red; }
.pointer 				{ cursor: pointer; }

.page-header 		{ font-size: 48px !important; }
.level1					{ font-size: 24px !important; }
.level2-header	{ font-size: 20px !important; }
.level2-body 		{ font-size: 18px !important; }

.text-xl 			{ font-size: 32px !important; }
.text-lg 			{ font-size: 28px !important; }
.text-md 			{ font-size: 24px !important; }

.text-sm 			{ font-size: 0.8em !important; }
.text-xs 			{ font-size: 0.6em !important; }

@media screen and (max-width: 992px) {
	/*col-md*/
	.page-header 		{ font-size: 34px !important; line-height: 1.2; }
	.level1					{ font-size: 18px !important; }
	.level2-header	{ font-size: 18px !important; }
	.level2-body 		{ font-size: 16px !important; }

	.text-xl 			{ font-size: 28px !important; line-height: 1.2; }
	.text-lg 			{ font-size: 24px !important; }
	.text-md 			{ font-size: 18px !important; }
}
@media screen and (max-width: 576px) {
	/*col-xs*/
}

.lh1   { line-height: 1 !important; }
.lh1-1 { line-height: 1.1 !important; }
.lh1-2 { line-height: 1.2 !important; }
.lh1-3 { line-height: 1.3 !important; }
.lh1-6 { line-height: 1.6 !important; }

.text-mobile { text-align: left; }
@media screen and (max-width: 768px) {
		.text-mobile { text-align: center; }
}

/* ==========================================================================
Helper Classes
========================================================================== */
.cursor-pointer { cursor: pointer; }
.display-none { display: none !important; }
.list-no-indent { padding-left: 18px; list-style-position: outside; }
.no-indent { list-style-position: inside; padding-left: 0; }
.no-padding { padding: 0; }
.no-wrap { white-space:nowrap; }
.relative { position: relative; }
.wrap { white-space: normal; }
.float-left { float: left !important; }
.float-right { float: right; }

.well { background-color: #c2c2c2; padding: 20px; }
.well-radius { border-radius: 20px; }
.well-lightgrey { background-color: #e1e1e1; padding: 20px; }
.well-gutcal   { background-image: linear-gradient(to right, #159133 , #0091BF); padding: 20px; }
.well-gutpro-r { background-image: linear-gradient(to right, #E30F81 , #FAAC17); padding: 20px; color: #fff; }
.well-gutpro-o { background-image: linear-gradient(to right, #6BC0D9 , #E30F81); padding: 20px; color: #fff; }
.well-gutpro-m { background-image: linear-gradient(to right, #1F2A90 , #249B46, #6BC0D9); padding: 20px; color: #fff; }
.well-gutlinx  { background-image: linear-gradient(to right, #E10B90 , #FFAC1B, #0091BF); padding: 20px; color: #fff; }
.well-gut16    { background-image: linear-gradient(to right, #00C9FF , #1E1CB0); padding: 20px; color: #fff; }
.well-border-blue  { border: 1px solid #1E1CB0; padding: 30px 50px; }
.well-border-green { border: 1px solid #159133; padding: 30px 50px; }
.well-border-grey  { border: 1px solid #BDBDBD; padding: 20px 25px; }

.img-responsive { max-width:100%; }
.img-center { display:block; margin-left:auto; margin-right:auto; }
.img-fill { width: 100%; height: 100%; object-fit: cover; }

.background-grey 			{ background-color: #666666; }
.background-lightgrey { background-color: #e9e9e9; }
.background-white 		{ background-color: #fff; }
.background-secondary { background-color: #e9e9e9; }
.background-green 		{ background-color: #DDF0DC; }
.background-orange 		{ background-color: #e9e9e9; }
.background-orange2 		{ background-color: #F9F3E0; }
.background-cta 			{ background-color: #F9471A; }

.border-grey { border: 1px solid #ccc; }
.border-white { border: 1px solid white; }
.border-none { border: none !important; }

/* ==========================================================================
Buttons
========================================================================== */
.btn    { border-radius: 10px; font-size: 14px; font-weight: bold; line-height: 1.2; padding: 5px 20px; }
.btn-xs { border-radius: 10px; font-size: 10px !important; font-weight: bold; }
.btn-sm { border-radius: 10px; font-size: 12px !important; font-weight: bold; }
.btn-lg { border-radius: 10px; font-size: 16px; font-weight: bold; }
.btn-xl { border-radius: 10px; font-size: 20px; font-weight: bold; padding: 15px 30px; }

.btn-default { background-color: #F9471A; padding: 10px 30px; color: #fff !important; }
.btn-default:hover { color: #000 !important; }

.btn-gutlinx { background-color: #FF0087; padding: 5px 20px; color: #fff !important; }
.btn-gutlinx:hover { color: #000; }

.btn-gutcal { background-image: linear-gradient(to right, #159133 , #0091BF); padding: 5px 20px; color: #fff !important; }
.btn-gutcal:hover { color: #000; }

.btn-gutpro { background-image: linear-gradient(to right, #E10B90 , #FFAC1B); padding: 5px 20px; color: #fff; }
.btn-gutpro:hover { color: #000; }

.btn-gut16 { background-image: linear-gradient(to right, #00C9FF , #1E1CB0); padding: 5px 20px; color: #fff; }
.btn-gut16:hover { color: #000; }

.btn-outline { border: 1px solid #FFF; padding: 15px 30px; color: #fff !important; }
.btn-outline:hover { border: 1px solid #000; color: #000 !important; }

.btn-outline2 { border: 1px solid #000; padding: 15px 30px; color: #000 !important; }
.btn-outline2:hover { border: 1px solid #666; color: #666 !important; }

.btn-white { background-color: #FFF; padding: 15px 30px; color: #F9471A !important; }
.btn-white:hover { background-color: #000; color: #FFF !important; }

/* ==========================================================================
Masthead
========================================================================== */
#masthead {
	background-color: #e1e1e1;
	font-size: 15px;
	line-height: 1.2;
	/*position: fixed;
	top: 0;*/
	width: 100%;
	z-index: 999;
	height: 34px;
}

@media screen and (max-width: 992px) {
	#masthead { height: 50px; font-size: 18px; position: fixed; top: 0; }
	body { padding-top: 50px; }
}
@media screen and (max-width: 768px) {
}

.breadcrumb { background-color: transparent; margin-bottom: 0; }

/* ==========================================================================
Footer
========================================================================== */
#footer > .container { padding-top: 50px; padding-bottom: 50px; }
#footer section { background-color: #fff; color: #000;}
#footer section img { margin-left: 20px; }
#footer a { color: #000; font-size: 14px; }

.social { font-size: 28px !important; }

@media screen and (max-width: 768px) {
	.social { font-size: 20px !important; }
}
@media screen and (max-width: 992px) {
	#footer { margin-bottom: 50px; }
}

/* ==========================================================================
Bottom Navbar (Mobile)
========================================================================== */
.navbar-footer {
	position: fixed;
	bottom: 0;
	background-color: #F9471A;
	width: 100%;
	z-index: 10;
}

/* ==========================================================================
NavBar
========================================================================== */
#navbar {
	/*border-top: 1px solid #999;
	border-bottom: 1px solid #999;*/
	z-index: 200;
	background-color: #e9e9e9;
}
.navbar-nav li a {
	color: #000;
	font-size: 18px;
	font-weight: normal;
	margin-right: 10px;
	line-height: 1.1;
	padding-right: 5px !important;
}
.dropdown-menu {
	border: none;
	margin: 0;
}
.dropdown-item {
	padding: .75rem 1rem;
}
.dropdown-item, .dropdown-menu a {
	color: #000 !important;
}
.dropdown-item:hover {
	background-color: #999;
	color: #fff !important;
}
.dropright .dropdown-menu {
	margin-left: 0;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
	top: 32px;
}
@media screen and (max-width: 1200px) {
	.navbar-nav li a { font-size: 15px; margin-right: 5px; }
}
@media (min-width: 992px) {
	.dropdown:hover>.dropdown-menu { display: block; }
	.dropright:hover>.dropdown-menu { display: block; }
}

#search div { height: auto !important }
#search .dropdown-menu { left: auto; right: 0; }

@media screen and (max-width: 992px) {
	#navbar { display: none; }
}

.navbar-footer a, .navbar-footer a:hover { color: #fff !important; }
/* ==========================================================================
Carousel
========================================================================== */
.carousel-indicators {
	bottom: -45px;
}
.carousel-indicators li { background-color: #ccc !important;}
.carousel-indicators .active { background-color: #ca392c !important;}

.carousel-control-prev {
	left: -120px;
}

.carousel-control-next {
	right: -120px;
}

.carousel-control-prev-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

/* ==========================================================================
Back to Top
========================================================================== */
.cd-top {
	display: inline-block;
	height: 40px; width: 40px;
	position: fixed; bottom: 40px;right: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.05);
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: transparent url(../img/back-to-top.png) no-repeat center 50%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .3s 0s,visibility 0 .3s;
	-moz-transition: opacity .3s 0s,visibility 0 .3s;
	transition: opacity .3s 0s,visibility 0 .3s;
}

.cd-top.cd-is-visible,.no-touch .cd-top:hover, {
	-webkit-transition: opacity .3s 0s,visibility 0 0;
	-moz-transition: opacity .3s 0s,visibility 0 0;
	transition: opacity .3s 0s,visibility 0 0;
}

.cd-top.cd-is-visible {visibility: visible;opacity: 1}

.cd-top:hover,
.no-touch .cd-top:hover {
	background-color: ##7e7e7e;
	opacity: 1;
}

@media only screen and (min-width: 768px) {
	.cd-top {right: 20px;bottom: 20px}
}

@media only screen and (min-width: 1024px) {
	.cd-top {
		height: 40px;width: 40px;
		right: 30px;bottom: 30px;
	}
}

/* ==========================================================================
Image Zoom on Hover
========================================================================== */
.zoom {
  transition: transform .2s; /* Animation */
}

.zoom:hover {
  transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* ==========================================================================
Forms
========================================================================== */
.ceForm {
	padding-bottom: 1.25rem;
}
.ceForm input, .ceForm select {
	margin: 0 .25rem;
	border: 1px solid #ccc;
	border-left: 3px solid;
	border-radius: 5px;
	padding-left: 5px;
	transition: border-color .5s ease-out;
}
.ceForm input:optional, .ceForm select:optional {
	border-left-color: #999;
}
.ceForm input:required:valid, .ceForm select:required:valid {
	border-left-color: green;
}
.ceForm input:invalid, .ceForm select:invalid {
	border-left-color: red;
}

/* Hide Spinner in Numeric Input Fields */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
}
option { color: #ccc !important; }

.invalid-feedback { margin-left: 10px; }

input[type="text"], input[type="text"]:focus,
input[type="email"], input[type="email"]:focus,
select, select:focus {
	outline: 0;
	box-shadow:none;
}

input[type="text"], input[type="email"], input[type="number"] {
	padding: 10px 20px !important;
}

input[type="submit"]:valid {
	background-image: none !important;
}

/* ==========================================================================
Sticky Menu
========================================================================== */
.sticky {
  position: fixed;
  top: 0px;
  width: 100%;
  padding-bottom: 20px;
}

/* ==========================================================================
Modals
========================================================================== */
.modal-dialog { max-width: 800px; }
.modal .close { float: right; }

/* ==========================================================================
Pagination
========================================================================== */
.pagination { flex-wrap: wrap; }
.pagination li { padding: 0px 4px 2px 4px; }
.pagination .current { border: 1px solid #ccc; }

/* ==========================================================================
Animations
========================================================================== */
.fade-in-image1 { animation: fadeIn 1s; }
.fade-in-image3 { animation: fadeIn 3s; }
.fade-in-image5 { animation: fadeIn 5s; }

.fade-in-text1 	{ animation: fadeIn 1s; }
.fade-in-text3 	{ animation: fadeIn 3s; }
.fade-in-text5	{ animation: fadeIn 5s; }

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* ==========================================================================
B2B backround
========================================================================== */
.b2b {
	min-height: 400px;
}
@media screen and (max-width: 768px) {
	.b2b { min-height: 200px; }
}

/* ==========================================================================
Miscellaneous
========================================================================== */
.cookiefooter {
	width: 70%;
	left: 15%;
	height: 140px;
	position: fixed;
	bottom: 0px;
	background-color:#ccc;
	color:#333;
	padding:10px 40px;
	text-align:center;
	z-index: 9999;
	opacity: 0.9;
	filter: alpha(opacity=90); /* For IE8 and earlier */
}
@media screen and (max-width: 992px) {
	.cookiefooter { width: 100%; left: 0; }
}
@media screen and (max-width: 768px) {
	.cookiefooter { height: 180px; }
}
@media screen and (max-width: 576px) {
	.cookiefooter { height: 200px; }
}

.modal-backdrop.in {
	opacity:0.5 !important;
	position:fixed;// This makes it cover the entire scrollable page, not just browser height
	height:100%;
}

.sr .reveal { visibility: hidden; }

.thumbnail { border: 1px solid #ddd; }