/*custom*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700|Roboto+Slab:300');
body{padding-top:62px}
#pagebody{padding-top:0}
#headerpadding{margin:0px}
#secondaryfooter{background:#fff;margin-bottom:20px}
.wow{visibility:hidden}
.navbarlogo{margin-top:-15px}
.navbar-toggle{margin-top:6px;margin-bottom:6px}
.txt{color:#585858}
.center{text-align:center}
.absolute{position:absolute;top:0;}


#servicestop{position:relative;min-height:320px}
#servicestop h1{color:#fff;text-shadow:1px 1px #000, 1px -1px #000, -1px 1px #000, -1px -1px #000;}
#servicestop img {width: 100%; height: auto;}
#servicestop .inserttext{padding:20px;background:#fff;opacity:0.8;color:#000}

.btn-orange{background-color:#ff6600;border-color:#EA5E00}
h2.listheader small{color:#fff}
#pagefooter a{color:#c8c8c8}
#pagefooter a:hover{color:#fff}
#pagefooter{padding:20px 0}
#footercols ul{padding-left:0;list-style-type: none;}
#footercols li{bullet-style:none}

#productInfo .btn-primary, .prodListEach .btn-primary{color:#fff}

/*features list*/
.solutionWrap{}
.solutionEach{border-radius:4px;
	margin-bottom:5px;border:1px solid #efefef;padding:15px;text-align:center;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+47,ededed+100;White+3D+%231 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}

.solutionTitle{font-size:24px;color:#000}
.solutionPrice{font-size:18px;color:#f60}
.price{font-size:30px}
.solutionDescr{color:#2c2c2c}

.featureslist{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
.featureslist > li{
	background-image: url('../../../images/green_yes.png');
	background-repeat: no-repeat;
	background-position: 0px 5px;
	padding: 3px 30px;
	border-bottom:1px solid #dedede;
}

.listheader{background:#0078d4;color:#fff;}
.featuretable td.featureYes{background-image: url('../../../images/green_yes.png')}
.featuretable td.featureNo{background-image: url('../../../images/red_no.png')}
.featuretable td.featureYes, .featuretable td.featureNo{
	background-repeat: no-repeat;
	background-position: 8px 5px;
	padding: 3px 0 3px 35px
}
th.featureTH2,th.featureTH3,th.featureTH4{width:16%}
.featuretable .featurename{font-weight:bold}
.featuretable .featurenote{font-weight:normal;font-style:italic}
.featuretable .featuresStd{background:#efefef}
.featuretable{
	border-spacing: 10px 0px;
	border-collapse: separate
}
#comodoTL{padding-left:0 !important}

/*we want to have youtube videos responsive, so we wrap a div class="video-container" around it*/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*Firefox has some awkward fieldset styling involving width that interferes with the responsive table.*/
@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

@media print {
  /*hide all content to only print selected DIV*/
  body * {
    visibility: hidden;
  }
  #pagecontent, #pagecontent * {
    visibility: visible;
  }
  #pagecontent {
    position: absolute;
    left: 0;
    top: 0;
  }
}







/*2018*/
/*
1024x1024 gradient #00fcd8 -> #0074ff -> #00b2ec then resize 1024x512
gradient, primary colours:
#00fcd8
#00b2ec midpoint
#0074ff
*/
.navbar-default .navbar-nav > li > a:hover{background:rgba(0, 50, 110, 0.7)}

body{background-size:cover;font-family: 'Noto Sans', sans-serif}
#pagebody{padding-bottom: 0px}
#body_index #pagecontent{padding-left:0px;padding-right:0px}
#page{margin-left:-15px;margin-right:-15px}
#pagefooter{padding:25px}
	@media screen and (min-width: 992px) {/*MD*/#pagefooter{padding:100px}}
#footer_ready{padding:50px 15px;background:#ff6600;font-size:20px;color:#fff}

div.pageHeading{border-bottom:1px solid #dedede;text-align:center;padding:30px 0 20px 0;margin-bottom:50px}
.pageHeading h1{font-family: 'Roboto Slab', sans-serif;font-weight:300;text-transform:uppercase}

div.pageSubHeading{border-bottom:1px solid #dedede;text-align:center;padding:15px 0 00px 0;margin-bottom:25px}
.pageSubHeading h1{font-family: 'Roboto Slab', sans-serif;font-weight:300;text-transform:uppercase}

#main_intro_img_sm{text-align:center}
.category_breadcrumbs{display:none}

.mw_em{color:#ff6600}
.bigtext{font-size:16px}
	@media screen and (min-width: 768px) {/*SM*/.bigtext{font-size:16px}}
.no-list{list-style:none}

.navbar{}
.navbar_logo{float:left;padding:6px 0}
.navbar_line1, .navbar_line2{display:block;}
.navbar_line1{overflow:hidden}
	@media (min-width: 768px) {/*SM*/.navbar-nav > li > a{padding-top:5px;padding-bottom:5px}}

#body_index .video-container {position: relative;padding-top: 30px;overflow: hidden}

.pageInformationContent{font-size:16px}



#mainpage h1, #main_intro h1{font-size:35px;font-weight:bold}
	@media (min-width: 768px) {/*SM*/#mainpage h1, #main_intro h1{font-size:50px;font-weight:bold}}
/*main_intro*/
/*#main_intro_wrap{width:100%;background-color:#5596e6;overflow:hidden}*/
#main_intro_wrap{
	width:100%;
background: #00b2ec;
/*background: linear-gradient(to bottom left,#77c4e3,#8176b5);*/
/*background: linear-gradient(to top,#8e847b,#0074ff);
*/background: linear-gradient(to top,#00447a,#3aa6fa);
	overflow:hidden
}

#main_rocket_science{
	margin-bottom:50px;
	display: flex;justify-content: center;flex-direction: column;/*to vertical align middle inside*/
	height:120px;
	padding-left:82px;
	overflow:hidden;
	font-weight:bold;
	background:url(../../../images/assets/rocket_round.png) no-repeat left 26px;
}

#main_intro{width: 100%; margin: 50px auto 25px;overflow:hidden;position:static}
	@media screen and (min-width: 1200px) {/*LG*/#main_intro{width: 80%}}
/*#main_intro_bg{background: url(../../../images/assets/13.svg) no-repeat center top; background-size:cover;position:absolute;top:0;left:0;width:100%;z-index:1}*/
/*height for below set by js: $("#main_intro_bg").height($("#main_intro_wrap").height());*/
.main_intro_content{position:relative;z-index:2;color:#fff}
#main_intro_content_b{font-size:22px;margin-top:50px}
#main_intro_content_c{font-size:16px;margin:50px 0}
#main_intro_content_c li{font-size:14px}
#main_intro_content_d{font-size:18px;margin:50px 0 0;text-align:center}
	@media (min-width: 768px) {/*SM*/#main_intro_content_d{text-align:left}}
#main_intro_img_xs{text-align:center;margin-top:50px}
.main_intro_power{font-size:18px;margin:25px 0}
#logo{position:absolute;top:12px;left:10%;z-index:3}
#main_subheader{z-index:4}

.full_section{overflow:hidden;padding:25px}
	@media screen and (min-width: 992px) {/*MD*/.full_section{padding:100px}}
.full_section_bg_blue{background-color:#4178be;color:#fff;}
.full_section_bg_navy{background-color:#00326E;color:#fff;}
.full_section_bg_charcoal{background-color:#2f2f2f;color:#fff;}
.full_section_bg_grey{background-color:#cecece;color:#333;}
.full_section_bg_brown{background-color:#cecece;color:#7b3f16;}

/*structure for half-section with fixed background*/
.fixed_bg_area_half{position: relative;clear: both}
.half_section{overflow:hidden;height: 100%;width: 100%;padding:25px}
	@media screen and (min-width: 992px) {/*MD*/.half_section{padding:100px}}
.half_section_left{left:0}
.half_section_right{right:0}
.half_section_bg_brown{background: rgba(123, 113, 106, 1);color:#ffffff}
.half_section_bg_lightblue{background: rgba(119, 171, 235, 1);color:#ffffff}
.half_section_bg_blue{background: rgba(0, 116, 255, 1);color:#ffffff}
.half_section_bg_navy{background: rgba(0, 50, 110, 1);color:#ffffff}
.half_section_bg_navy_half{background: rgba(0, 50, 110, 1);color:#ffffff}
.half_section_bg_orange{background: rgba(234, 102, 59, 1);color:#ffffff}
	@media screen and (min-width: 992px) {/*MD*/.half_section{padding:100px}}
	@media screen and (min-width: 1200px){/*LG*/
		.half_section{
			position: absolute;top:0;
			width:50%;
			z-index:2
		}
		.half_section_bg_brown{background: rgba(123, 113, 106, 0.85)}
		.half_section_bg_brown_half{background: rgba(123, 113, 106, 0.5)}
		.half_section_bg_lightblue{background: rgba(119, 171, 235, 0.85)}
		.half_section_bg_blue{background: rgba(0, 116, 255, 0.85)}
		.half_section_bg_navy{background: rgba(0, 50, 110, 0.85)}
		.half_section_bg_navy_half{background: rgba(0, 50, 110, 0.5)}
		.half_section_bg_orange{background: rgba(234, 102, 59, 0.85)}
	}


/*set images*/

.fixed_bg_image_cycle{background:url('../../../images/assets/retail.jpg') no-repeat;height:250px;width:100%;background-position:center top 60px; background-size: cover !important;background-attachment:fixed; -moz-background-attachment:fixed; -o-background-attachment:fixed; -webkit-background-attachment:fixed}
	@media screen and (min-width: 992px) {/*MD*/.fixed_bg_image_cycle{height:550px}}

.fixed_bg_image_design{background:url('../../../images/assets/design.jpg') no-repeat;height:400px;width:100%;background-position:center center; background-size: cover !important;background-attachment:fixed; -moz-background-attachment:fixed; -o-background-attachment:fixed; -webkit-background-attachment:fixed}
	@media screen and (min-width: 992px) {/*MD*/.fixed_bg_image_design{height:550px}}

.fixed_bg_image_retail{background:url('../../../images/assets/shop.jpg') no-repeat;height:400px;width:100%;background-position:right top; background-size: cover !important;background-attachment:fixed; -moz-background-attachment:fixed; -o-background-attachment:fixed; -webkit-background-attachment:fixed}
	@media screen and (min-width: 992px) {/*MD*/.fixed_bg_image_retail{height:550px}}

.fixed_bg_image_b2b{background:url('../../../images/assets/internal.jpg') no-repeat;height:400px;width:100%;background-position:left top; background-size: cover !important;background-attachment:fixed; -moz-background-attachment:fixed; -o-background-attachment:fixed; -webkit-background-attachment:fixed}
	@media screen and (min-width: 992px) {/*MD*/.fixed_bg_image_b2b{height:550px;background-position:left top}}

.fixed_bg_image_wholesale{background:url('../../../images/assets/wholesale.jpg') no-repeat;height:400px;width:100%;background-position:right top; background-size: cover !important;background-attachment:fixed; -moz-background-attachment:fixed; -o-background-attachment:fixed; -webkit-background-attachment:fixed}
	@media screen and (min-width: 992px) {/*MD*/.fixed_bg_image_wholesale{height:650px}}

.fixed_bg_image_internal{background:url('../../../images/assets/internal.jpg') no-repeat;height:250px;width:100%;background-position:left top; background-size: cover !important;background-attachment:fixed; -moz-background-attachment:fixed; -o-background-attachment:fixed; -webkit-background-attachment:fixed}
	@media screen and (min-width: 992px) {/*MD*/.fixed_bg_image_internal{min-height:600px}}

.fixed_bg_image_seo{background:url('../../../images/assets/seo.jpg') no-repeat;height:250px;width:100%;background-position:center top; background-size: cover !important;background-attachment:fixed; -moz-background-attachment:fixed; -o-background-attachment:fixed; -webkit-background-attachment:fixed}
	@media screen and (min-width: 992px) {/*MD*/.fixed_bg_image_seo{height:550px}}

.fixed_bg_image_cafe{background:url('../../../images/assets/cafe.jpg') no-repeat;height:400px;width:100%;background-position:left top; background-size: cover !important;background-attachment:fixed; -moz-background-attachment:fixed; -o-background-attachment:fixed; -webkit-background-attachment:fixed}
	@media screen and (min-width: 992px) {/*MD*/.fixed_bg_image_cafe{height:600px}}

/*Cost elements & Packages*/
.cost_element_title{font-size:20px;margin-bottom:20px}
.packages{width:100%;margin-bottom:10px}
.packages_a{border-color:#77abeb}
.packages_b{border-color:#4178be}
.packages_c{border-color:#00326e}
.packages_d{border-color:#011e41}
.package_heading{margin:-10px -10px 0 -10px;padding:10px 0;text-align:center;font-size:26px;font-weight:bold;color:#fff}
.package_footer{text-align:center}
.package_price{text-align:center;padding:10px;font-size:26px;;border-bottom:1px solid #dedede}
.package_price_sub{font-size:11px}
.packages_a .package_heading{background-color:#77abeb}
.packages_b .package_heading{background-color:#4178be}
.packages_c .package_heading{background-color:#00326e}
.packages_d .package_heading{background-color:#011e41}
.package_list ul{padding-left:0}
.package_list li{list-style:none;text-align:center;padding:1em 0;border-bottom:1px dashed #dedede}

div.quoteblock{
	position:relative;
	padding:30px 100px 20px 100px;
	border-top:1px dashed orange;
	border-bottom:1px dashed orange;
	font-style:italic;
	font-size:18px;
	color:orange;
	margin-top:30px;
	margin-bottom:50px;
}
div.quoteblock img{/*added and amended in JS*/
	position:absolute;
	left:50%;
	bottom:-21px;
}