@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,600;1,400&display=swap');

body {
	color: #4A4A4A;
	font-size: 17px;
	padding: 0;
	margin: 0;
	/* font-family: 'Overpass', sans-serif; */
    font-family: 'Overpass', sans-serif;
	line-height: 160%; 
}

.font_2 { font-family: 'Roboto', sans-serif; }

strong, b { font-weight: 600; } /* use default bold weight is 600 for Overpass font */

/* one-way css class  */
.fl{float:left;}
.fr{float:right;}
.center{text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.upper {text-transform: uppercase;}
.strong {font-weight: bold; }
.italic {  font-style: italic; }
.upper_off {text-transform: none;}
.fullwidth { width: 100%; }
.bgwh { background-color: white; }
.wh { color: white; }
.small {font-size: 15px; }
.mt0 { margin-top: 0 !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mb0 { margin-bottom: 0 !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.ml20 { margin-left: 20px !important; }
.text-shadow { text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); }
.inline-block { display: inline-block; }

/* fancybox gallery always on top of other z-index content */
.fancybox__container {
    z-index: 1000000 !important;
}

.img_fl {
    float: left; 
    margin: 0 20px 10px 0;
}

.img_fr {
    float: right;
    margin: 0 0 10px 20px;
}

.shadow, img.shadow, .images-shadow img {
	margin: 15px 10px;
    max-width: calc(100% - 20px) !important;
-webkit-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.4);
}

/* common elements */

a {color: #00BAFF; text-decoration:underline; }
a:hover {
	color: #00BAFF; 
	text-decoration:none;
}

.link_2, .footer a {text-decoration: none;}
.link_2:hover, .footer a:not(.button):hover {text-decoration: underline;}

.footer a:not(.button):hover {color: #00BAFF;}

/* font awesome */
a.ficon {text-decoration: none; }
a.ficon:hover {text-decoration: none !important;}
.ficon { margin: 0 0.3em 0 0; }
.ficon.ml { margin: 0 0 0 0.3em; }

.hidden{
	display: none;
}
.cleaner{
	clear: both;
	font-size: 0;
	visibility: hidden;
	border: none;
	margin: 0; padding: 0;
}

.clearfix {
  position: relative;
}
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
  clear: both;
}

.bold { font-weight: bold; }
.upper { text-transform: uppercase; }

/* forms */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
select {
  background-color: #fff;
  border: 1px solid #D6D6D8;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  color: #414141;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  line-height: 21px;
  max-width: 100%;
  padding: 12px 15px;
    vertical-align: middle;
}

.forms input[type="text"],
.forms input[type="password"],
.forms input[type="email"],
.forms input[type="search"],
.forms textarea,
.forms select {
	width: 400px;
}

button, input[type=button], .button, .links-to-buttons a  {
	border: none;
	padding: 12px 42px;
    padding-bottom: 10px; /* Overpass font fix */
	display: inline-block;
	text-decoration:none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	transition:all 0.3s ease 0s;
	font-family: 'Overpass', sans-serif;
	font-size: 18px;
    line-height: 20px;
	font-weight: normal; 
	background-color: #00BAFF;
	color: #ffffff;
	border: 1px solid transparent;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	
	cursor: pointer;
}
button, input[type=button] {
    vertical-align: middle;
}

input:required, textarea:required, input.required {
 border: 1px solid #00BAFF;
}

button.small, input[type=button].small, .button.small {
	padding: 10px 30px;
    padding-bottom: 8px; /* Overpass font fix */
}

button.upper, .button.upper {
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;
}

button:hover, input[type=button]:hover, .button:hover, .links-to-buttons a:hover  {
	color: #fff;
	background: #77C94B;
	text-decoration:none;
}

.button.lightgray {
	background-color: #E5E5E5;
	color: #212021;
}

.button.lightgray:hover {
	background-color: #77C94B;
	color: #fff;
}

table.table {
	border-collapse: collapse;
}

table.table td,
table.table th
{
	border-collapse: collapse;
	padding: 6px 10px;
}

table.table.table-narrow td,
table.table.table-narrow th
{
	padding: 3px 5px;
}


table.table td {
	border-top: 1px solid #DCDCDD; 
	background-color: #fff;
}

table.table thead td {
	border-top: none;
	border-bottom: 2px solid #DCDCDD;
	font-weight: bold;
}

table.table.table-bordered {
	border: 1px solid #DCDCDD; 
}

table.table.table-bordered-td td {
	border: 1px solid #DCDCDD; 
}


table.table.table-striped tr:nth-child(odd) td {
 background-color: #F5F5F5;
}

table.table.table-striped thead tr td {
	background-color: #fff !important;
}

table.table tr.hilite td {
 background-color: #E8F7F3 !important;
}

/* template */

/* Envelope (responsive) */

.envelope_bg {width: 100%; background-color:#fff; }
.envelope_bg.bg1, .bg1 { background-color:#fff;}
.envelope_bg.bg2, .bg2 { background-color: #F2F2F2; }
.envelope_bg.bg3, .bg3 {  background-color: #191919; color: #FFFFFF;  }
.envelope_bg.bg4, .bg4 {  background-color: #006186; color: #FFFFFF;  }
.bg4 strong { color: #FFC22A; font-weight: normal; }

/*
.envelope_bg.bg4, .bg4 {  background-color: #2F3235; color: #FFFFFF;  }
.envelope_bg.bgc1, .bgc1 {  background-color: #ABABAB; color: #FFFFFF;  }
*/

h1, h2, h3, h4, h5, h6 {
	color: #333;
}

.bg3 a, .bg3 h1, .bg3 h2, .bg3 h3, .bg3 h4, .bg3 h5, .bg3 h6 {color: #fff; }


.bg_dark { color: #EFEFEF; }
.bg_dark a, .bg_dark h1, .bg_dark h2, .bg_dark h3, .bg_dark h4, .bg_dark h5, .bg_dark h6 {color: #fff; }

.bg_dark_pattern {
    background: url(../img/template/bg/prism.png) top left repeat;
}

.bg_dark_pattern .button_info {
    color: #BFC0C1;
}


/*
.c1, .c1 a { color: #4A4A4A !important;}
*/

.c2, .c2 a { color: #00BAFF !important;}
.c3, .c3 a { color: #84c461 !important;}

/*
https://www.w3schools.com/howto/howto_css_fixed_menu.asp
*/

/* The navigation bar */
.navbar {
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.92);
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    z-index: 20000;
    /* https://stackoverflow.com/questions/3971880/how-to-make-shadow-on-border-bottom */
    box-shadow:0px 3px 3px rgba(100, 100, 100, 0.2);
}

.navbar .logo { font-size: 0; }

.navbar { height: 90px; }
.navbar_space { height: 90px; }

.navbar .pad {
	padding: 30px 2% 0 30px;
    padding: 34px 2% 0 26px; /* Overpass font fix */
}

.navbar #logo {
    margin-top: -5px; /* Overpass font fix */
}


.anchor-offset {
	/*
	http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header
	*/
	display: block;
	position: relative;
	top: -100px; /* fixed header height */
}

/* Links inside the navbar */
.navbar .menu {
	color: #828282;
}

.navbar .menu a {
	font-weight: normal;
  padding: 0 16px;
  text-decoration: none;
	color: #828282;                  
	font-size: 18px;
	line-height: 23px;
	text-transform: uppercase;
}

/* Change background on mouse-over */
.navbar .menu a:hover {
  text-decoration: underline;
}

.navbar .menu a.hilite {
	color: #00BAFF;
}

.navbar .menu a.active {
	text-decoration: underline;
}

.navbar .menu .divider {
    display: inline-block;
    background-color: #e1e4e8;
    height: 15px;
    width: 1px;
    vertical-align: top;
    margin-top: 3px;
}


.header {
	width: 100%;  
	max-width: 1920px;
	margin: 0 auto 0 auto;
	position: relative;
}

.header .bg_img {	
	width: 100%;
	height: 760px;
	background-image: url('../img/template/bg/3.jpg');
	background-repeat: no-repeat;
	background-position: center top;
}

.header_admin_preview {
	position: absolute;
	bottom: -15%;
	width: 100%;
	text-align: center;
	z-index: 100;
}

.header_admin_preview img { max-width: 60%; }

.padding-after-header {
	/* #header_admin_preview bottom */
	width: 100%;
	height: 130px;
	/* background-color: yellow; */
}

.header .cont {
	width: 100%;
	padding-top: 4%;
	text-align: center;
	z-index: 101;
}

.header .cont .pad {
	max-width: 1170px;
	padding: 0 2%;	
	margin: 0 auto;
	text-align: center;
	/*
	outline: 1px solid red;
	*/
}

.header  .ht_1 {
	font-size: 27px; line-height: 45px;
	text-transform: uppercase;
	color: #464646;
	margin-top: 0;
	margin-bottom: 30px;
}

.header .ht_2 { 
	color: #959595; 
	font-size: 19px;
	line-height: 23px;
	margin-top: 0;
	margin-bottom: 30px; 
}

.header .ht_2 strong { 
	color: #646464;
}

.button_info {
	margin-top: 2px;
	color: #737576; 
	font-size: 15px;
}

.header .button_info {
	margin-top: 10px;
}

.header .button {
	font-size: 17px;
	font-weight: 600;
	padding: 12px 44px;
    padding-bottom: 9px; /* Overpass font fix */
	text-transform: uppercase;
}

.envelope {
	width: 100%;  
	max-width: 1920px;
	margin: 0 auto 0 auto; 
}
.envelope-pad-top {
	padding:  50px 3% 0 3%;
}
.envelope-pad-bottom {
	padding:  0 3% 50px 3%;
}
.envelope-pad-top-bottom {
	padding:  50px 3% 50px 3%;
}
.envelope-pad-top-bottom.footer {
	padding-bottom: 65px; /* a little more space for cookies info */
}
.envelope-pad-tiny-top-bottom {
	padding:  15px 3% 50px 3%;
}

.envelope-pad-small {
	padding:  30px 3% 30px 3%;
}


.envelope-pad-top-bottom-only {
	padding:  50px 0px 50px 0px;
}
.envelope-pad {
	padding:  0 3%;
}
.envelope-pad-button {
    padding:  25px 3% 15px 3%;
}

/*
.envelope-pad-pre-header {
	padding:  20px 3% 20px 3%;
	position: relative;
}

.envelope-pad-footer {
	padding:  50px 3% 50px 3%;
}
*/

.envelope-pad-tiny {
	padding:  15px 3%;
}

.cont-maxwidth {
	max-width: 1170px;
	margin: 0 auto;
}

.cont-maxwidth-small { 
    max-width: 840px; 
	margin: 0 auto;
}

.maxwidth-none {
	max-width: none;
}

/* titles */

h1, .h1 {
  font: 400 36px 'Overpass', sans-serif;
  margin-bottom: 20px;
  margin-top: 20px;
}
h2, .h2 {
  font: 400 30px 'Overpass', sans-serif;
  margin-bottom: 20px;
  margin-top: 20px;
}
h3, .h3 {
  font: 400 26px 'Overpass', sans-serif;
  margin-bottom: 18px;
  margin-top: 18px;
}
h4, .h4 {
 	font: 400 25px 'Overpass', sans-serif;
  margin-bottom: 18px;
  margin-top: 18px;
}
h5, .h5 {
  font: 400 22px 'Overpass', sans-serif;
  margin-bottom: 18px;
  margin-top: 18px;
}
h6, .h6 {
  font: 400 17px 'Overpass', sans-serif;
  margin-bottom: 14px;
  margin-top: 14px;
}

.content > h1:first-of-type,
.content > h2:first-of-type,
.content > h3:first-of-type,
.content > h4:first-of-type,
.content > h5:first-of-type,
.content > h6:first-of-type 
{
	margin-top: 0;
}

.title-link a {
	color: #2D2D2D;
	text-decoration: none;
}
.title-link a:hover {
	color: #F1CE65;
	text-decoration: underline;
}

/* layout */

/* grids */
.grid-row {
	clear: both;
	font-size: 0;
	visibility: hidden;
	border: none;
	margin: 0; padding: 0;
}

/* grid 2 = 2 columns, 50% width for each */
.grid-2 {
	width: 100%;
}

.grid-2-1 {
	float: left;
	width: 46%;
	margin: 5px 2%;
}

.grid-2-1.nomargin {
	float: left;
	width: 50%;
	margin: 0 0;
}

.grid-2-1.nomargin .pad {
	padding: 10% 10% 0 10%;
	text-align: left;
}

.grid-2 .grid-row {
	margin-bottom: 20px;
}

/* grid 3 = 3 columns */
.grid-3 {
	width: 100%;
}
.grid-3-1 {
	float: left;
	width: 31.2%;
	margin: 0 1% 20px 1%;
}

.grid-3-1.first {
	margin-left: 0;
}


/* grid 4 = 4 columns */
.grid-4 {
	width: 100%;
}

.grid-4-1 {
	float: left;
	width: 23%;
	margin: 5px 1%;
}

.grid-4-1 .pad {
}

.grid-4-1.last {
	margin-right: 0;
}

/* services */

.ico-services-1 h3 {
	margin: 15px 0 10px 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
}

.ico-services-1 h3 a {
	color: #202020;
	text-decoration: none;
}

.ico-services-1 h3 a:hover {
	text-decoration: underline;
}

.ico-services-1 .service_ico {
	display: block;
	margin-bottom: 10px;
}

.ico-services-1 .service_ico .image {
	width: auto;
	max-height: 80px;
}

.ico-services-1 .service_ico .ficon {
	font-size: 38px;
}

.ico-services-1 a .service_ico:hover .ficon,
.ico-services-1 a .service_ico:hover .image
{
	transition:all 0.3s ease 0s;
}

.ico-services-1 a .service_ico:hover .ficon,
.ico-services-1 a .service_ico:hover .image
{
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.ico-services-1 .item .text {
	font-size: 15px;
	line-height: 22px;
	color: #646464;
}


/* ico-services-2 */

.ico-services-2 .service_ico {
	margin-top: 10px;
	display: inline-block;
	border-radius: 50%;
	border: 1px solid #EDEDED;
	width: 80px;
	height: 80px;
	margin-bottom: 15px;
	text-align: center;
	transition:all 0.3s ease 0s;
}

.ico-services-2 a .service_ico:hover {
	border-color: #00BAFF;
}

.ico-services-2 .service_ico .ficon {
	font-size: 36px;
	margin: 0;
	padding-top: 22px;
}

.ico-services-2 a .service_ico:hover .ficon,
.ico-services-2 a .service_ico:hover .image
{
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.ico-services-2 .item .text {
	margin: 10px 0 0 0;
	font-size: 16px;
	line-height: 24px;
	color: gray;
}

.ico-services-2 .item h3 {
	margin: 0px 0 10px 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
}

.ico-services-2 .item h3 a {
	color: #202020;
	text-decoration: none;
}

.ico-services-2 .item h3 a:hover {
	text-decoration: underline;
}

.ico-services-2 .item .date {
	color: #969696;
	margin: 0 0 10px 0;
}


/* testimonials */
.testimonials .item h4 {
	font-weight: normal;
	margin-top: 5px;
	margin-bottom: 6px;
	text-transform: none;
	font-size: 17px;
	line-height: 24px;
	color: #0A0A0A;
    font-style: italic;
}

.testimonials .item .text {
	font-size: 16px;
	line-height: 24px;
	color: #9C9A9A;
    font-style: italic;
    
}

.testimonials .item h4 a {
    color: #0A0A0A;
}

.testimonials .item .text a {
    color: #898787;
}

.testimonials .item .link {
	text-decoration: none;
	font-size: 15px;
    font-style: italic;
}
.testimonials .item .link:hover {
	text-decoration: underline;
}

.testimonials .item .image  {
	height: 90px;
	text-align: center;
	white-space: nowrap;
}
/* 
https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div
*/
.testimonials .item .image .helper {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.testimonials .item img.image {
	vertical-align: middle;
	width: auto;
	max-height: 100%;
	filter: grayscale(1) opacity(0.5);
	transition:all 0.3s ease 0s;
}

.testimonials .item .image img:hover {
	filter: none;
}


.testimonials .pad {
	padding: 5px 0;
	padding-bottom: 0;
}

.testimonials .item {
}

/* newsletter */
.newsletter {
	background-image: url('../img/template/bg/newsletter.jpg');
	background-repeat: no-repeat;
	background-position: center -150px;
}

.newsletter .darken {
	background-color: rgba(0, 0, 0, 0.45);
	min-height: 340px;
}

/* newsletter_subscribe_quick */

#newsletter_subscribe_quick {
	text-align: center;
	display: inline-block;
	margin-top: 40px;
}

#nsq_input {
	float:left;
	border: none;
	background-color: rgba(255, 255, 255, 0.8);
	width:300px;
	height:46px;  
	line-height:42px;
	margin-right:0px;
	color: #202020;
	font-size: 16px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;	
	/*
	padding:0 8px;
	*/
}

#nsq_input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	 color: #3C3C3C;
}
#nsq_input::-moz-placeholder  { /* Firefox 19+ */
	color: #3C3C3C;
	opacity:  1;
}
#nsq_input:-ms-input-placeholder { /* IE 10+ */
	color: #3C3C3C;
}
#nsq_input:-moz-placeholder { /* Firefox 18- */
	color: #3C3C3C;
  opacity:  1;
}

#nsq_submit {
	float:left;
	border:0;
	margin:0; 
	padding:0 16px;
	height:46px;
	cursor:pointer;
	text-transform: none;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

#nsq_submit:hover {
}

/* logos_footer */

.logos_footer .item {
	display: inline-block;
	margin: 5px 10px;
	height: 56px;
	text-align: center;
	white-space: nowrap;
}

.logos_footer .item img {
	border: 0;
}

.logos_footer.payments .item {
	margin: 5px 6px;
	height: 40px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.6;
}

.logos_footer.payments .item:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* 
https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div
*/

.logos_footer .item .helper {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.logos_footer .item img {
	vertical-align: middle;
	width: auto;
	max-height: 100%;
}

.logos_small .logos_footer .item {
	margin: 0 12px;
	height: 45px;
}

.logos_small.envelope-pad-tiny {
	padding-top:  3px;
}

.images-gray-hover-color .item {
    filter: grayscale(1);
    opacity: 0.65;
}

.images-gray-hover-color .item:hover {
    filter: grayscale(0);
    opacity: 1;
}


/* footer */

.footer {
	font-size: 15px;
}

.footer h4 {
	margin-top: 0;
}

.footer a.button {
	width: 220px;
	text-align: center;
	overflow: hidden;
	padding: 10px 0 10px 0;
    padding-bottom: 7px; /* Overpass font fix */
	margin-bottom: 0;
	font-size: 16px;
	line-height: 140%;
	font-weight: 600;
	text-transform: uppercase;
}

.footer a.button.demo {
	background-color: #323232;
	color: #969696;
}

.footer a.button.demo:hover {
	background-color: #00BAFF;
	color: #fff;
}

.footer .button_info {
	width: 220px;
	text-align: center;
	font-size: 13px;
	line-height: 15px;
	color: #969696;
	margin-top: 0;
	padding: 0;
    margin-bottom: 17px;
}

.footer a.button.fastweb {
    padding: 6px 0 6px 0;
    padding-bottom: 4px; /* Overpass font fix */
	background-color: #202020;
	color: #969696;
    text-transform: none;
    font-family: 'Overpass', sans-serif;
    font-weight: normal;
	font-size: 13px;
	line-height: 20px;
}

.footer a.button.fastweb:hover {
	background-color: #323232;
	color: #fff;
}


.footer .signature {
	text-align: center;
	padding: 0px 0 0px 0;
	font-size: 14px;
	color: #787878;
}

.footer .signature a {
	font-size: 14px;
	color: #787878;
}

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

.footer .logo { margin-bottom: 20px; margin-right: 10px; width: 120px;}

/* subscribtion_boxes */

div.subscribtion_boxes {
	margin-top: 5px;
	text-align: center;
	font-size: 0;
}

div.subscribtion_boxes .box {
	width: 270px;
	font-size: 15px;
	display: inline-block;
	border: none;
	margin: 0; padding: 0;
	margin-top: 20px; /* the same as .best border-top size */ 
	background-color: #464648;
	vertical-align: top;
	color: #9B9EA5;
	/*
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	*/
}

div.subscribtion_boxes .title {
	font-size: 28px;
	padding: 30px;
	font-weight: normal;
	color: #fff;
}

div.subscribtion_boxes .best {
	margin-top: 0px;
	border-top: 20px solid #00BAFF;
}

div.subscribtion_boxes .best .title {
	background-color: #00BAFF;
}

div.subscribtion_boxes .cont {
	background-color: white;
	padding: 20px;
	border: 1px solid #EBEBEB;
	border-left: none;
	border-top: none;
	font-size: 15px;
}

div.subscribtion_boxes .cont.first {
	border-left: 1px solid #EBEBEB;
}

div.subscribtion_boxes .line {
	padding: 8px 0;
}

div.subscribtion_boxes .line:not(:first-child) {
	border-top: 1px solid #EBEBEB;
}

div.subscribtion_boxes .box.months_12 {   }
div.subscribtion_boxes .box.months_6 {  }
div.subscribtion_boxes .box.months_3 { background-color: #58585A; }
div.subscribtion_boxes .box.months_1 { background-color: #6B6B6D; }


div.base_licence_includes {
	margin-top: 15px;
	text-align: center;
	font-size: 0;
}

div.base_licence_includes .box {
	width: 290px;
	font-size: 16px;
	display: inline-block;
    text-align: left;
	border: none;
	margin: 0; padding: 0;
	margin-top: 0px;
	vertical-align: top;
	color: #787C87;
 }
 
div.base_licence_includes .box .item { 
    margin-bottom: 2px;
}
 

.number_of_rooms {
	margin: 30px 0 30px 0;
}

.number_of_rooms label {
	display: block;
	margin: 0 10px 0;
	font-size: 16px;
	color: #9B9EA5;
}
.number_of_rooms input {
	width: 90px;
	border: 2px solid #00BAFF;
	font-size: 30px;
	line-height: 34px;
	padding: 15px 5px;
	text-align:center;
	border-radius: 2px;
	-moz-appearance:textfield;
}

.number_of_rooms input::-webkit-outer-spin-button,
.number_of_rooms input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

div.subscribtion_boxes .price { margin: 0 4px;} 

div.subscribtion_boxes .price_per_room_discount { color: #212121; }
div.subscribtion_boxes .savings_annual { font-size: 120%; color: #00BAFF }
div.subscribtion_boxes .price_total { font-size: 130%; color: #212121; }
div.subscribtion_boxes .price_total_vat { font-size: 120%; color: #212121; }
.vat_info { 
	color: #939DA4;
	font-size: 15px;
	font-weight: 400;
}

@media (max-width: 1100px) {

	div.subscribtion_boxes .box {
		float: left;
		width: 48%;
		margin: 0 1% 20px 1%;
		margin-top: 0px;
	}
	
	div.subscribtion_boxes .best {
		border-top: 0px;
	}
	
	div.subscribtion_boxes .cont {
		border-left: 1px solid #EBEBEB;
	}
	
} /* @media (max-width: 601px) */

@media (max-width: 599px) {

	div.subscribtion_boxes .box {
		float: none;
		width: 100%;
	}
	
	div.subscribtion_boxes .title {
		padding: 15px;
	}

} /* @media (max-width: 599px) */

.subscribe_form .item {
	width: 450px;
	max-width: 100%;
	margin: 0 auto;
    margin-bottom: 8px;
	font-size: 15px;
	text-align: left;
	color: gray;
}

.subscribe_form .item .half {
	width: 48%;
	margin-right: 4%;
	float: left;
}

.subscribe_form .item .half.last {
	margin-right: 0;
}

.subscribe_form .item .label {
	display: block;
	width: 100%;
	text-align: left;
	font-size: 14px;
    line-height: 20px;
	color: gray;
}
.subscribe_form .item .input
{
	display: block;
	width: 100%;
}

.subscribe_form .button_info {
	margin-top: 0;
	font-size: 15px;
}

.subscribe_form .button_info.bi2 {
	font-size: 14px;
}

.subscribe_form_email_recap {
	font-size: 28px;
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	margin: 17px 6px;;
}

 /* text tag with some color background */
.currency_tag {
	display: inline-block; 
	padding: 6px 7px; 
	margin: 2px 2px;
	border-radius: 2px;	
	line-height: 150%;
	background-color: #6B6B6D;
	color: #fff;
}

.currency_tag input[type="radio"] {
	margin: 0 3px 0 0; padding:0;
	vertical-align: middle;
}

.currency_tag label {
	cursor: pointer;
}

.currency_tag.checked {
	background-color: #00BAFF;
}

/* Licence price calculator — visual treatment inherited from the legacy page. */
.currencies_select .currency_tag {
	margin: 0 6px;
	padding: 5px 6px;
	border: 1px solid #ebebeb;
	border-radius: 2px;
	background-color: #f6f6f6;
	color: inherit;
}

.currencies_select .currency_tag.checked {
	border-color: #00baff;
	background-color: #e9f8ff;
}

/* Flex layout keeps the different subscription cards aligned at their bottom edge. */
div.subscribtion_boxes {
	display: flex;
	justify-content: center;
	align-items: stretch;
}

div.subscribtion_boxes .box {
	display: flex;
	flex-direction: column;
}

div.subscribtion_boxes .cont {
	flex: 1 1 auto;
}

/* Small green recommendation badge from the original calculator. */
div.subscribtion_boxes .title {
	position: relative;
}

div.subscribtion_boxes .badge_best {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-block;
	margin: 0;
	padding: 3px 8px;
	border-radius: 4px;
	background-color: #4caf50;
	color: #fff;
	font-size: 12px;
	font-weight: normal;
	line-height: 14px;
}

.modules_box {
	margin: 0 auto 20px;
}

.module_row {
	display: grid;
	grid-template-columns: 40% 60%;
	align-items: center;
	margin-bottom: 10px;
}

.module_input {
	padding-right: 20px;
	text-align: right;
}

.module_label {
	text-align: left;
}

.module_price {
	color: #9b9ea5;
}

.price_calc_note {
	margin-top: 5px;
	color: #939DA4;
	font-size: 15px;
	font-weight: 400;
}

.subscribtion_boxes .breakdown {
	min-height: 21px;
	color: #787c87;
	font-size: 13px;
	line-height: 1.5;
}

/* The activation and saving lines are toggled by the calculator. */
.subscribtion_boxes [hidden],
.price_calc_note[hidden] {
	display: none;
}

@media (max-width: 1100px) {
	div.subscribtion_boxes {
		flex-wrap: wrap;
	}

	div.subscribtion_boxes .box {
		float: none;
		width: 48%;
		margin: 0 1% 20px;
	}

	div.subscribtion_boxes .best {
		border-top: 0;
	}
}

@media (max-width: 599px) {
	div.subscribtion_boxes .box {
		width: 100%;
	}

	.module_row {
		grid-template-columns: 32% 68%;
	}

	.module_input {
		padding-right: 12px;
	}
}

.langs {
	margin: 5px 0;
}

.langs a {
    font-size: 14px;
	margin-right: 7px;
}

.langs img.flag {
	width: 16px; height: 11px; vertical-align: middle;
	margin: 0 1px 3px 0;
}

/* emoticons size */
.ec.big {font-size: 23px; }

ul.tick li::marker {
  content: '✓ ';
  color: #84c461;
  font-weight: bold;
}


/* gallery_logos */

.gallery_logos {
	margin: 30px 0 0 0;
}

.gallery_logos .item {
	display: inline-block;
	margin: 10px 0.8%;
	height: 45px;
	text-align: center;
	white-space: nowrap;
}

.gallery_logos .item img {
	border: 0;
}

/* 
https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div
*/

.gallery_logos .item .helper {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.gallery_logos .item img {
	vertical-align: middle;
	width: auto;
	max-height: 100%;
}

@media (max-width: 699px) {
	.gallery_logos .item {
		margin: 10px 1.5%;
	}
} /* @media (max-width: 699px) */

.panel_category_name {
    margin-top: 5px;
    margin-bottom: 0px;
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
}

.article_search_phrases {
	margin-top: 0;
	margin-bottom: 20px;
	color: #9b9ea5;
	font-style: italic;
}

.card {
    border-radius : 20px;
    background: #fff;
    margin-bottom: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.card .cont {
    padding: 15px 30px;
}

.card .title, .card .query {
    font-weight: bold;
    font-size: 19px;
    margin-bottom: 10px;
}

.card .text, .card .answer {
    font-size: 17px;
}

/* Highlight search terms in snippets */
.search-keyword,
mark.search-keyword {
	background: #fff2a8;
	color: inherit;
	padding: 0 0.18em;
	border-radius: 0.2em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	font-weight: 600;
	text-shadow: none;
}