/* GENERAL */
/* basic blue 25aae1 rgba(37, 170, 225, 1) */
/* basic green 82c55b rgba(130, 197, 91, 1) */
#object_one {
	border-top: 2px solid rgba(130, 197, 91, 1);
	border-left:  2px solid rgba(130, 197, 91, 1);
}
#object_two {
	border-top: 2px solid rgba(37, 170, 225, 1);
	border-left:  2px solid rgba(37, 170, 225, 1);
}
#object_three {
	border-top: 2px solid rgba(130, 197, 91, 1);
	border-left:  2px solid rgba(130, 197, 91, 1);
}
#object_four {
	border-top: 2px solid rgba(37, 170, 225, 1);
	border-left:  2px solid rgba(37, 170, 225, 1);
}

/* override the "icon always on the left" for iconList UL by adding icon-right to the icon span*/
.iconList > li [class*="icon-right"], 
.iconList > li [class^=icon-right] {position:relative;left:0;top:auto;}

/*remove the bottom border from iconlist if unwanted*/
.noBottomBorder li:not(:last-child) {
border-bottom: 0;
}

/*cancels out the vanishing header height for the scroll back to top triggered by javascript event close of pricing table modal*/
.scrollbackposition {position:absolute;top:-99px;}

/*cancel out some overflow rules on the body to avoid this bug: 
When using Google Chrome (other browsers where fine) and
going to fullscreen on a youtube video, the page would not
return to the correct page position after exitting the
fullscreen (very annoying behaviour if you want to view a
couple of video's)
cfr: https://bugs.chromium.org/p/chromium/issues/detail?id=445605
*/
.body {
	overflow-x: visible;
}
@media only screen and (min-width: 64.0625em) {
body { overflow-x: visible; }
}

/*reduce massive padding*/
/*@media only screen and (min-width: 64.0625em) {
	.padding {padding:40px 20px};
	}
@media only screen and (min-width: 40.063em) {
	.padding {padding:20px 10px;}
}
*/

body.boxed,
.bgBlue {background: #e5f4f8;}
.bgGreen {background: #ecfbe3;}
.bgGreen2 {background-color: rgba(130, 197, 91, 1, 0.9);}
.footerBig .footerWidgets .Blue, .Blue {color: #25aae1;}
.footerBig .footerWidgets .Green, .Green {color: #82c55b;}

.blue {color: rgba(37, 170, 225, 1);}

/*for individual engine pages*/
.pricing-table .bgGreen {
	background-color: #ecfbe3;
}
.pricing-table .price{color:#81C45B;border-bottom: 1px solid rgba(42, 43, 47, 0.1);padding: 1rem;}

/*for feature comparison table & academy*/
#filtercontainer {padding-top:20px;}

#features tbody tr th {background: #ecfbe3;}
#features tbody tr th.fTitle, th.fTitle {padding:30px;text-align:center;background-color:#25A9E0;font-size:150%;font-family: 'Oxygen', sans-serif;font-weight: 400;color:white;}
#features td:nth-child(n+2) {text-align:center;}

/* other academy stuff is in CMS stylesheet...*/


/* MENU HEADER */




.hero:after,
.heroSmall:after,
.heroBlack:after,
.heroSmallBlack:after,
.heroColor:after,
.heroSmallColor:after,
.heroSlide:after,
.heroSlideBlack:after,
.heroSlideColor:after {
	background: transparent;
}

/* CONTENT AREA */

.inline-block {display: inline-block;}

div.youtubeDesc {height:52px;overflow:hidden;position:relative;}/*position relative required for .ytsft*/
.gallery-item {}

/* ==============================================================
						AUTHORS AND COLLABORATORS - START
================================================================= */
.youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
}
.youtube img {
    width: 100%;
    top: -16.82%;
    left: 0;
    opacity: 0.7;
}
.youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}
.youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
    cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
    position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}






.authorsImg {
  margin-right: 15px;
  margin-bottom: 15px;
}

.authorsImg,  
.authorsImg img {
  display: inline-block;
  width: 300px;
  height: 300px;
  border-radius: 50%;
}

.authorsContent {
  position: relative;
  overflow: hidden;
}

.authorsContent p {
  margin-bottom: 0;
  font-style: italic;
}

.authorsContent p:before, 
.authorsContent p:after {
  	content: '';
}

.authorsMeta {
	display: inline-block;
  	font-size: 13px;
  	font-weight: 700;
  	text-transform: uppercase;
  	vertical-align: middle;
}

.authorsMeta span {
  display: block;
  font-weight: normal;
  color: rgba(42, 43, 47, 0.7);
  font-size: 12px;
  text-transform: none;
}

.bgColor .authorsMeta,
.bgBlack .authorsMeta,
.bgColor .authorsMeta span,
.bgBlack .authorsMeta span {
	color: rgba(255, 255, 255, 0.7);
}

#authorsScroller .authorsContent,
#authorsScroller .authorsMeta {
	text-align: center;
}

#authorsScroller .authorsImg,
#authorsScroller .authorsImg img,
#authorsScroller .authorsMeta {
	display: block;
	margin: 20px auto;
}


/* ==============================================================
						AUTHORS AND COLLABORATORS - END
================================================================= */


/* ==============================================================
						ADVERTISEMENTS - START
================================================================= */
.adImg {
  margin-right: 15px;
  margin-bottom: 15px;
}

.adImg,  
.adImg img {
  display: inline-block;
height:280px;
}

.adVid {
  margin-right: 15px;
  margin-bottom: 15px;
  display: inline-block;
  max-height:280px;
  max-width:500px;
}

/* override the streching set in main.css to allow for variable image sizes >> doesn't seem to break anything... */
.owl-carousel  .owl-item img { width: auto; }

.adContent {
  position: relative;
  overflow: hidden;
}

.adContent p {
  margin-bottom: 0;
  font-style: italic;
}

.adContent p:before, 
.adContent p:after {
  	content: '';
}

.adContent p:first-child {font-size:140%;font-weight:bold;}

.adMeta {
	display: inline-block;
  	font-size: 13px;
  	font-weight: 700;
  	text-transform: uppercase;
  	vertical-align: middle;
}

.adMeta span {
  display: block;
  font-weight: normal;
  color: rgba(42, 43, 47, 0.7);
  font-size: 12px;
  text-transform: none;
}

.bgColor .adMeta,
.bgBlack .adMeta,
.bgColor .adMeta span,
.bgBlack .adMeta span {
	color: rgba(255, 255, 255, 0.7);
}

#adScroller .adContent,
#adScroller .adMeta {
	text-align: center;
}

#adScroller .adImg,
#adScroller .adImg img,
#adScroller .adVid,
#adScroller .adMeta {
	display: block;
	margin: 20px auto;
}

/*.ad {
padding: 60px 50px;
}

.adImg {
  margin-right: 15px;
  margin-bottom: 15px;
}

.adImg,  
.adImg img {
  display: inline-block;
  max-width: 64px;
  max-height: 64px;
  border-radius: 50%;
float:left;
}

.adText {
	display: inline-block;
  	font-size: 13px;
  	font-weight: 700;
  	text-transform: uppercase;
  	vertical-align: middle;
}

.adText span {
  display: block;
  font-weight: normal;
  color: rgba(42, 43, 47, 0.7);
  font-size: 12px;
  text-transform: none;
}*/

/* ==============================================================
						ADVERTISEMENTS - END
================================================================= */
.pricing-table.easy { border-top: 4px solid rgba(37, 170, 225, 1); }
.pricing-table.light { border-top: 4px solid rgba(130, 197, 91, 1); }
.pricing-table.pro {border-top: 4px solid rgba(37, 170, 225, 1); }
.procheat {height:4px;width:100%;top:-4px;position:relative;

background: rgba(40,169,224,1);
background: -moz-linear-gradient(left, rgba(40,169,224,1) 0%, rgba(40,169,224,1) 26%, rgba(140,192,72,1) 86%, rgba(140,192,72,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(40,169,224,1)), color-stop(26%, rgba(40,169,224,1)), color-stop(86%, rgba(140,192,72,1)), color-stop(100%, rgba(140,192,72,1)));
background: -webkit-linear-gradient(left, rgba(40,169,224,1) 0%, rgba(40,169,224,1) 26%, rgba(140,192,72,1) 86%, rgba(140,192,72,1) 100%);
background: -o-linear-gradient(left, rgba(40,169,224,1) 0%, rgba(40,169,224,1) 26%, rgba(140,192,72,1) 86%, rgba(140,192,72,1) 100%);
background: -ms-linear-gradient(left, rgba(40,169,224,1) 0%, rgba(40,169,224,1) 26%, rgba(140,192,72,1) 86%, rgba(140,192,72,1) 100%);
background: linear-gradient(to right, rgba(40,169,224,1) 0%, rgba(40,169,224,1) 26%, rgba(140,192,72,1) 86%, rgba(140,192,72,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28a9e0', endColorstr='#8cc048', GradientType=1 );

}


/*canceling out the moving of the tables as the usage of tooltips makes this go up/down when hovinging a tooltip*/
.pricing-table:hover {
	margin-top: 0px;
}

ul.pricing-table li.bullet-item {line-height:1.5em;}

/**/

.button.btnBlue {
	background-color: rgba(37, 170, 225, 1);
	border: 2px solid rgba(37, 170, 225, 1);
}

.button.btnBlue:hover,
.button.btnBlue:focus,
.button.btnBlue:active {
	background-color: rgba(37, 170, 225, 0.9);
	border: 2px solid rgba(37, 170, 225, 0.2);
}

.button.btnGreen {
	background-color: rgba(130, 197, 91, 1);
	border: 2px solid rgba(130, 197, 91, 1);
}

.button.btnGreen:hover,
.button.btnGreen:focus,
.button.btnGreen:active {
	background-color: rgba(130, 197, 91, 1, 0.9);
	border: 2px solid rgba(130, 197, 91, 1, 0.2);
}
.button.btnPro {
background: rgba(40,169,224,1);
background: -moz-linear-gradient(left, rgba(40,169,224,1) 0%, rgba(40,169,224,1) 26%, rgba(140,192,72,1) 86%, rgba(140,192,72,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(40,169,224,1)), color-stop(26%, rgba(40,169,224,1)), color-stop(86%, rgba(140,192,72,1)), color-stop(100%, rgba(140,192,72,1)));
background: -webkit-linear-gradient(left, rgba(40,169,224,1) 0%, rgba(40,169,224,1) 26%, rgba(140,192,72,1) 86%, rgba(140,192,72,1) 100%);
background: -o-linear-gradient(left, rgba(40,169,224,1) 0%, rgba(40,169,224,1) 26%, rgba(140,192,72,1) 86%, rgba(140,192,72,1) 100%);
background: -ms-linear-gradient(left, rgba(40,169,224,1) 0%, rgba(40,169,224,1) 26%, rgba(140,192,72,1) 86%, rgba(140,192,72,1) 100%);
background: linear-gradient(to right, rgba(40,169,224,1) 0%, rgba(40,169,224,1) 26%, rgba(140,192,72,1) 86%, rgba(140,192,72,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28a9e0', endColorstr='#8cc048', GradientType=1 );
border: 0;
}

.button.btnPro:hover,
.button.btnPro:focus,
.button.btnPro:active {
background: rgba(40,169,224,0.9);
background: -moz-linear-gradient(left, rgba(40,169,224,0.9) 0%, rgba(40,169,224,0.9) 26%, rgba(140,192,72,0.9) 86%, rgba(140,192,72,0.9) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(40,169,224,0.9)), color-stop(26%, rgba(40,169,224,0.9)), color-stop(86%, rgba(140,192,72,0.9)), color-stop(100%, rgba(140,192,72,0.9)));
background: -webkit-linear-gradient(left, rgba(40,169,224,0.9) 0%, rgba(40,169,224,0.9) 26%, rgba(140,192,72,0.9) 86%, rgba(140,192,72,0.9) 100%);
background: -o-linear-gradient(left, rgba(40,169,224,0.9) 0%, rgba(40,169,224,0.9) 26%, rgba(140,192,72,0.9) 86%, rgba(140,192,72,0.9) 100%);
background: -ms-linear-gradient(left, rgba(40,169,224,0.9) 0%, rgba(40,169,224,0.9) 26%, rgba(140,192,72,0.9) 86%, rgba(140,192,72,0.9) 100%);
background: linear-gradient(to right, rgba(40,169,224,0.9) 0%, rgba(40,169,224,0.9) 26%, rgba(140,192,72,0.9) 86%, rgba(140,192,72,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28a9e0', endColorstr='#8cc048', GradientType=1 );
border: 0;
}

/* Solid Grid Icon Boxes
-----------------------------------------------------------------*/

.solidBox { overflow: hidden; }

.solidBox li { padding: 60px 40px; }

.solidBox li:before, 
.solidBox li:after {
  	content: '';
  	position: absolute;
  	display: block;
}

.solidBox li:before, 
.solidBox li:after {
  	content: '';
  	position: absolute;
  	display: block;
}

.solidBox li:before {
	height: 100%;
	top: 0;
	left: -1px;
	border-left: 1px solid rgba(42, 43, 47, 0.5);
}

.solidBox li:after {
	width: 100%;
	height: 0;
	top: auto;
	left: 0;
	bottom: 0;
	border-bottom: 1px solid rgba(42, 43, 47, 0.5);
}

.solidBox li.bgBlack:before,
.solidBox li.bgColor:before,
.solidBox li.bgColor:after,
.solidBox li.bgBlack:after {
	border-color: rgba(255, 255, 255, 0.5);
}

.solidBoxIcon {
  display: block;
  position: absolute;
  font-size: 12rem;
  color: rgba(0, 0, 0, 0.5);
  bottom: -10px;
  right: -30px;
}

.bgBlack .solidBoxIcon {
	color: rgba(0, 0, 0, 0.7);
}


li {
font-family: 'Merriweather', serif;
font-size: 0.875rem;
line-height: 1.9;
}

/*Override the labels for the demo form*/
#mc-embedded-subscribe-form label {
color:black;
font-family: 'Oxygen', sans-serif;
font-style: normal;
}
#mc-embedded-subscribe-form, #mc-embedded-subscribe-form div.error-message, input, textarea, select, button, span {
font-family: 'Oxygen', sans-serif;
}

/* FOOTER */
.footerBig #copyrights, .footerBig #copyrights p, .footerBig #copyrights a {
    color: rgba(255, 255, 255, 0.8);
}

.footerBig #copyrights a {
	display: inline;
	text-transform: none;
	font-size: 100%;
	padding: 0;
	margin: 0;
}
.footerBig #copyrights p {
line-height: 25px;
}
.footerBig #copyrights p:first-child {
padding-top:15px;
}

#copyrights {padding-top:10px;}



/*Correction to avoid height issues for the displayed text when using tiny or small or large buttons*/
button.tiny,.button.tiny,button.small,.button.small,button.large,.button.large {
    height: auto;
    line-height: normal;
}

/*Some extra tooltipster styles*/
.tooltipster {display:block;}
/*Position the extra youtube show for touch button*/
.ytsft {position:absolute;top:0;right:0;border:1px solid green;}

/* whatsnew.html styles */
div.bgColor div ul.whatsnew li p a {text-transform: uppercase;color:#fff;}
div.bgWhite div ul.whatsnew li p a {text-transform: uppercase;color:#000;}
ul.whatsnew li p a:hover,
ul.whatsnew li p a:focus,
ul.whatsnew li p a:active {opacity: 0.8;filter: alpha(opacity=80);}


/*magnific gallery close button*/
/*https://stackoverflow.com/a/36726082*/
.myDisplayOverride{
  display:block !important
}

/*other custom rules*/
.bgWhiteTransparent {
    background: rgb(255, 255, 255); /* Fallback for older browsers without RGBA-support */
    background: rgba(255, 255, 255, 0.7);
}

.bgWhiteTransparent2 {
    background: rgb(255, 255, 255); /* Fallback for older browsers without RGBA-support */
    background: rgba(255, 255, 255, 0.8);
}
.roundedCorners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.roBlue, h1.roBlue, h2.roBlue, h3.roBlue, h4.roBlue, h5.roBlue, .roBlue h1, .roBlue h2, .roBlue h3, .roBlue h4, .roBlue h5, .roBlue [class^="icon-"], .iconBox [class~="roBlue"] {color:#25a9e0}
.roGreen, h1.roGreen, h2.roGreen, h3.roGreen, h4.roGreen, h5.roGreen, .roGreen h1, .roGreen h2, .roGreen h3, .roGreen h4, .roGreen h5, .roGreen [class^="icon-"], .iconBox [class~="roGreen"]  {color:#81c45b}

/*home page list*/
.homePageList > li [class*="icon-"], .homePageList > li [class^=icon-] {font-size:140%}
.homePageList li [class^="icon-"] + .link {font-size:140%;line-height:140%;font-weight:normal;text-transform: none;}
.homePageListImg, .roundedImg {
border-radius: 50%;
border:2px solid #25AAE1;
-webkit-box-shadow: 5px 5px 10px 10px rgba(0,0,0,0.14);
-moz-box-shadow: 5px 5px 10px 10px rgba(0,0,0,0.14);
box-shadow: 5px 5px 10px 10px rgba(0,0,0,0.14);
}
/*home page get started*/
a.getStarted {font-size:300%;}

/*Academy detail page*/
/*cfr https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
/*maybe check this to disable showing of related video's https://www.maxlaumeister.com/blog/hide-related-videos-in-youtube-embeds/*/
.YouTubeContainer {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.YouTubeIframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



p, a, li, label, blockquote, span, strong {font-family: 'Oxygen', sans-serif;}