/*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:right}
.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{
/*background: linear-gradient(to bottom left,#77c4e3,#8176b5);*/
/*background: linear-gradient(to top,#8e847b,#0074ff);*/
	width:100%;
	background-color: #0b007a;
	background-image: url(../../../images/assets/makeweb_bg_768.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	overflow:hidden
}
@media (min-width: 768px) {
	#main_intro_wrap{
	background-image: url(../../../images/assets/makeweb_bg_1170.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
	}
}
@media (min-width: 992px) {
	#main_intro_wrap{

	background-position: left -100px;
	}
}


#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: 25px auto;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:left;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}




/*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;
}

/*2019*/
.spacing50{clear:both;margin:25px 0;overflow:hidden}
.xsmenubtn{
	color: #fff;
	background-color: #5bc0de;
	border-color: #46b8da !important;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
	background-color:#5bc0de;
}
.navbar-default .navbar-toggle .icon-bar{
	background-color:#fff !important;
}
#main_subheader{
	color:#626568;
	font-size:16px;
	line-height:28px;
}
#main_subheader .fw{/*full width*/
	width:100%;
	padding-top:80px;
	padding-bottom:80px;
}
#main_subheader .bgw{/*background white*/
	background-color:#fff
}
#main_subheader .bgg{/*background grey*/
	background-color:#f5f5f5
}
#main_subheader .bgtexture{
	color:#fff;
	background: #1b8fbe url('../../../images/assets/slider_bg_4.jpg') top left;
}
#main_subheader .half_img{
	margin-top:0px;
	margin-bottom:0px;
}
#main_subheader .xsbg1{
	color: #fff;
	text-shadow: #12192b 1px 1px 1px;
	background: #f5f5f5 url('../../../images/assets/makeweb_tablet.jpg') no-repeat top center;
}
#main_subheader #s3xs{
	background: #f5f5f5 url('../../../images/assets/hq1000x749x60.jpg') no-repeat center center;
}
#main_subheader #s0xs{
	background: #f5f5f5 url('../../../images/assets/makeweb_online_success_xs.jpg') no-repeat center center;
}
#main_subheader .leftpadding, #main_subheader .rightpadding{
	padding-left:0px;
	padding-right:0px;
}
@media (min-width: 768px) {/*SM*/
	#main_subheader .xsbg1{
		color:#626568;
		text-shadow:none;
		background-image: none;
	}
}
@media (min-width: 992px) {/*md*/
	#main_subheader .half_img{
		margin-top:-80px;
		margin-bottom:-80px;
	}
}