/* FIXING BUGS */
#dnnExtensions .dnnGrid td, #dnnExtensions .dnnGrid th {
	box-sizing: initial;
}

/* 
 *----------------------------------------------+--------+--------+
 * CANOPI CONTENT STYLES
 *----------------------------------------------+--------+--------+
 */
body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
}

p {
	font-size: 16px;
	line-height: 150%;
}

h2 {
	font-weight: 300;
	font-family: 'Roboto Slab',sans-serif;
	font-size: 30px;
}

h3 {
	font-weight: 400;
	font-size: 20px;
	line-height: 25px;
	font-family: 'Roboto Slab',sans-serif;
}

h4 {
	font-weight: 300;
	font-size: 24px;
	line-height: 35px;
	font-family: 'Roboto Slab',sans-serif;
}
ul.ori li {
	 list-style: initial;
}
.bold { font-weight: bold; }
.font-weight-light {
	 font-weight: 300;
 }
.relative {
	position: relative !important;
}

.yellow {
	color: #fde016 !important;
}
.bg-yellow {
	background-color: #fde016 !important;
}
.orange {
	color: #f3b721 !important;
}
.bg-orange {
	background-color: #f3b721 !important;
}
.pink {
	color: #990066 !important;
}
.brown {
	color: #645555 !important;
}
.green {
	color: #008365 !important;
}
.green2 {
	color: #71c450 !important;
}
.lightgreen {
	color: #2ad089 !important;
}
.white {
	color: #fff !important;
}
.black {
	color: #000 !important;
}
.underline, a.underline, a:link.underline {
	text-decoration: underline !important;
}
.text-shadow {
	text-shadow: 2px 4px 6px rgba(0,0,0,0.5) !important;
}

.spacer {
	display: block;
	clear: both;
	height: 20px;
}

.spacer-lg {
	display: block;
	clear: both;
	height: 40px;
}

.spacer-xl {
	display: block;
	clear: both;
	height: 80px;
}
.d-flex {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bannerbox {
	position: relative;
}
.bannertitle {
	position: absolute;
    bottom: 0;
    z-index: 900;
}
.bgwhite {
	background-color: #fff;
}

.stripes-bg h2 {
    color: #333;
    text-align: center;
}
.stripes-bg h3, .stripes-bg p {
  	color: #445554;
}
.icon-block {
    height: 130px;
    width: 130px;
    border-radius: 50%;
    background: #75ce98;
    text-align: center;
    margin: 0 auto;
    line-height: 130px;
}
.icon-block-lg, .icon-block-md {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: #75ce98;
    text-align: center;
    margin: 0 auto;
    line-height: 200px;
	
	/* Align anything to vertical Center */
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.icon-block-md {
	width: 175px;
	height: 175px;
	line-height: 20px;
}
.icon-block-md h1 {
	line-height: 120%;
}
.icon-block .icon {
	color: #ffffff !important;
    overflow: hidden;
    display: inline-block;
    font-size: 74px;
    line-height: 74px;
    height: 74px;
    vertical-align: middle;
}
.icon-block .icon.icon-icon-canopi-blog {
	text-indent: 14px;
}
.light-green-btn, a.light-green-btn {
    background: #1d4342;
    border-radius: 30px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    padding: 12px 60px 12px 25px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    background: #75ce98;
}
.light-green-btn .icon {
	position: absolute;
    font-size: 42px;
    top: 3px;
    right: 3px;
}
.light-green-btn:hover, a.light-green-btn:hover {
	background: #0f4638;
	color: #fff;
}
.transparent-btn, a.transparent-btn {
    background: #1d4342;
    border-radius: 30px;
    color: #fff;
	font-family: Roboto Slab;
    font-size: 16px;
    font-weight: 400;
    padding: 15px 45px 15px 15px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    color: #991962;
    background: 0 0;
    font-size: 20px;
    line-height: 20px;
}
.transparent-btn .icon {
  	color: #030304;
	width: 40px;
  	height: 39px;	
  	display: inline-block;
  	position: absolute;
  	right: 7px;
    font-size: 24px;
}
.transparent-btn:hover, a.transparent-btn:hover {
  	color: #fff;
  	background: #0f4638;
  	text-decoration: none !important;
}
.transparent-btn:hover .icon {
  	color: #fff;
}

/* HEADER */
@media (max-width: 768px) {
	.is-sticky .MiniLogo {
		display: none !important;
	}
}

/* FOOTER */
.footer {
    background: #637e7d;
    padding-top: 40px;
    color: #fff;
    font-size: 16px;
    font-weight: 100;
}
.footer .nav-txt, .footer .nav-txt a {
    color: #b1d0bd;
}
.footer .nav-txt a:hover {
    color: #d1eddc;
}
.footer hr {
  border-top: solid 1px #819796;
}

/* Home Slider */
.white-arrow-icon {
    width: 40px;
    height: 39px;
    display: inline-block;
    background: url(img/white-arrow-icon.png) no-repeat;
    border: none;
}
.red-btn, .dark-green-btn, a.red-btn, a.dark-green-btn {
    border-radius: 30px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    padding: 15px 60px 15px 15px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    background: #9d045c;
}
.dark-green-btn, a.dark-green-btn {
	background: #1d4342;
}
a.red-btn:hover {
	background: #0f4638;
	color: #fff;
}
a.dark-green-btn:hover {
	background: #0f4638;
	color: #fff;
}
.red-btn .icon, .dark-green-btn .icon {
	position: absolute;
    font-size: 46px;
    top: 50%;
    right: 3px;
    margin-top: -22px;
}
.slider-caption {
    padding: 20px 40px;
    text-align: center;
    color: #189d81;
}
.slider-caption img {
    margin: 0 auto;
}
.slick-arrow {
	position: absolute;
	z-index: 10;
}
.slick-arrow.next {
	top: 85px;
	right: -40px;
}
.slick-arrow.prev {
	top: 85px;
	left: -40px;
}


/* Home Banner Slider */
#carousel {
	margin: 0 auto;
}
#carousel .brand-banner {
	position: absolute;
	bottom: -20px;
	left: 0;
	width: 100%;
	z-index: 10;
}
#carousel .item {
	background-repeat: no-repeat;
	background-size: cover;
	max-height: 535px;
}
#carousel .carousel-caption {
	top: 15%;
	text-align: left;
}
#carousel .carousel-caption p {
	font-size: 25px;
	font-family: 'Roboto Slab', sans-serif;
	line-height: 30px;
	font-weight: 300;
	text-shadow: 2px 1px 5px rgba(0,0,0,.83);
	color: #fff;
	margin-bottom: 40px;
}	
#carousel .carousel-indicators {
	text-align: left;
	bottom: 150px;
}
#carousel .carousel-indicators li {
	background: #fff;
	border-width: 2px;
	border-color: #fff;
}
#carousel .carousel-indicators li.active {
	background: #71c450;
}
#carousel .hr-login-box {
	background: url(../img/login-bg.png) repeat-y;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	width: 330px;
	z-index: 5;
	padding: 30px 60px;
}
#carousel .hr-login-box .hr-login-title {
	display: block;
	text-align: center;
	font-size: 20px;
	color: #a5b4c6;
	font-weight: 300;
	font-family: 'Roboto Slab', sans-serif;
	margin-bottom: 10px;
}
#carousel .hr-login-box form {
	margin: 5px 0;
}
#carousel .hr-login-box form input {
	background: #75ce98;
	border: none;
	width: 100%;
	font-size: 16px;
	color: #fff;
	padding: 15px;
	border-radius: 30px;
}
#carousel .hr-login-box form input::-webkit-input-placeholder {  
   color: #fff;  
}
#carousel .hr-login-box form input:focus {
	outline: none;
}
				
#carousel .hr-login-box form .submit-input {
	position: relative;
	margin: 5px 0;
}
#carousel .hr-login-box form .submit-input .white-arrow-icon {
	position: absolute;
	right: 5px;
	top: 6px;
}
#carousel .hr-login-box form .submit-input input {
	padding-right: 40px;
	margin: 0;
}
#carousel .hr-login-box form p {
	text-align: center;
	margin: 20px 0;
}
#carousel .hr-login-box form p a {
	font-size: 16px;
	color: #fff;
}







.home-header .home-icon {
	background-color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.home-header .home-icon:before {
	background: #fff;
	content: "";
    position: absolute;
    height: 130px;
    width: 120%;
    border-radius: 1200px / 80px;
    top: -50px;
    left: -10%;
    z-index: 0;
}
.home-header .home-icon:after {
	background: url(images/home-banner-icon.png) no-repeat 50% 0;
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
	right: 0;
    height: 126px;
    bottom: 100%;
}
.home-header .home-icon h1 {
	z-index: 1;
	position: relative;
	margin: 10px 0 30px;
    font-weight: 300;
}

.slick-dotted.slick-slider {
	margin: 0;
}
.slick-dots {
	position: absolute;
	bottom: 10px;
	left: 50%;
	z-index: 15;
	width: 60%;
	padding-left: 0;
	margin-left: -30%;
	text-align: center;
	list-style: none;
	
	
	text-align: left;
    bottom: 150px;
}
.home-slick .slick-dots li button:before {
	color: #fff;
	opacity: 1;
	border-radius: 100%;
	border: solid 2px #fff;
	background: #fff;
	width: 16px;
	height: 16px;
}
.home-slick .slick-dots li.slick-active button:before {
	opacity: 1;
	color: #71c450;
	background: #71c450;
}

.brand-banner {
	position: absolute;
	bottom: 0;
}
@media (max-width: 768px) {
	.home-slick .item {
		height: 410px;
	}
	.home-slick .item.bg-flat {
		background: url(images/sliders/home-mobile-flat.jpg) no-repeat 0 0;
		background-size: cover;
	}
	.home-slick .item.bg-athletics {
		background: url(images/sliders/home-mobile-athletics.jpg) no-repeat 0 0;
		background-size: cover;
	}
	.home-slick .item.bg-yacht {
		background: url(images/sliders/home-mobile-yacht.jpg) no-repeat 0 0;
		background-size: cover;
	}
	.home-slick .item.bg-tennis {
		background: url(images/sliders/home-mobile-tennis.jpg) no-repeat 0 0;
		background-size: cover;
	}
	.home-slick .carousel-caption {
		display: none !important;
	}
	.home-header .home-icon {
		position: relative !important;
	}
	.home-slick .slick-dots {
		display: none !important;
	}
}
@media (min-width: 769px) {
	.home-slick .item {
		height: 535px;
	}
	.home-slick .item.bg-flat {
		background: url(images/sliders/home-default-flat-background.jpg) no-repeat 50% 85px;
		background-attachment: fixed;
	}
	.home-slick .item.bg-athletics {
		background: url(images/sliders/home-athletics-background.jpg) no-repeat 50% 85px;
		background-attachment: fixed;
	}
	.home-slick .item.bg-yacht {
		background: url(images/sliders/home-yacht-background.jpg) no-repeat 50% 85px;
		background-attachment: fixed;
	}
	.home-slick .item.bg-tennis {
		background: url(images/sliders/home-tennis-background.jpg) no-repeat 50% 85px;
		background-attachment: fixed;
	}
	.home-slick .carousel-caption {
		top: 15%;
		text-align: left;
	}
	.home-slick .carousel-caption p {
		font-size: 25px;
		font-family: 'Roboto Slab', sans-serif;
		line-height: 30px;
		font-weight: 300;
		text-shadow: 2px 1px 5px rgba(0,0,0,.83);
		color: #fff;
		margin-bottom: 40px;
	}
}


/* Animation */
.anim {
	/*
    -webkit-animation: translate-title 2s linear;
    -webkit-animation-fill-mode: forwards;
    animation: translate-title 2s linear;
    animation-fill-mode: forwards;
	*/
	-webkit-transition: 0.3s ease-out 0s;
    -moz-transition: 0.3s ease-out 0s;
    -ms-transition: 0.3s ease-out 0s;
    -o-transition: 0.3s ease-out 0s;
    transition: 0.3s ease-out 0s;
}

/* Pages - Services */
.content-box-holder {
}
@media (max-width: 991px) {
	.content-box-holder .content-box {
		margin-bottom: 10px;
	}
	.content-box-holder .content-box h4 {
		background: rgba(15,70,56,0.5);
		margin-bottom: 2px;
		padding: 10px;
		color: #99ffcc;
		font-size: 18px;
	}
	.content-box-holder .content-box h4:before {
		font-family: "untitled-font-1" !important;
		font-style: normal !important;
		font-weight: normal !important;
		font-variant: normal !important;
		text-transform: none !important;
		content: "\4b";
		speak: none;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-size: 24px;
		color: #fff;
		margin-right: 5px;
		vertical-align: middle;
	}
	.content-box-holder .content-box .desc {
		background: rgba(80,100,76,0.6);
		margin-bottom: 2px;
		padding: 10px;
		color: #fff;
	}
}
@media (min-width: 992px){
	.content-box-holder .col-md-6:first-child, .content-box-holder .col-sm-6:first-child {
		padding-right: 1px;
	}
	.content-box-holder .col-md-6:last-child, .content-box-holder .col-sm-6:last-child {
		padding-left: 1px;
	}
	.content-box-holder .content-box {
		padding: 30px;
		background: rgba(15,70,56,0.5);
		margin-bottom: 2px;
		height: 200px;
		position: relative;
		
		-webkit-transition: 0.3s ease-out 0s;
		-moz-transition: 0.3s ease-out 0s;
		-ms-transition: 0.3s ease-out 0s;
		-o-transition: 0.3s ease-out 0s;
		transition: 0.3s ease-out 0s;
	}
	.content-box-holder .content-box h4 {
		color: #99ffcc;
		font-size: 24px;
		position: absolute;
		left: 0;
		min-width: 100%;
		width: auto;
		top: 50%;
		text-align: center;
		margin-top: -10px;
		height: 20px;
		padding: 0 30px;
	}
	.content-box-holder .content-box:hover h4 {
		color: #fde016;
		font-size: 20px;
		top: 10px;
		min-width: 0;
		margin-top: 10px;
	}
	.content-box-holder .content-box .desc {
		opacity: 0;
		margin-top: 30px;
	}
	.content-box-holder .content-box:hover .desc {
		opacity: 1;
	}	
}

.service-1, .service-2 {
	position: relative;
}
.service-1 .round-icon, .service-2 .round-icon {
	position: absolute;
    background: #fde016;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: -50px;
    left: 50%;
    margin-left: -25px;
}

.service-2 .round-icon {
	background: #75ce98;
}
@media (min-width: 992px) {
	.service-1 .icon-block-lg {
		margin: 0 20px;
	}
	.service-1 .desc {
		height: 200px;
	}
}
@media (max-width: 991px) {
	.service-1 .icon-block-lg {
		margin: 0 auto;
		float: none !important;
	}
	.service-1 .desc {
		text-align: center;
		margin: 20px 0;
	}
}

@media (max-width: 768px) {
	.service-2 .content-box-holder .content-box h4 {
		background: #1d4443;
		color: #fff;
	}
	.service-2 .content-box-holder .content-box .desc {
		background: #c8ebd6;
		color: #000;
	}
}
@media (min-width: 769px) {
	.service-2 .content-box-holder .content-box {
		background: #1d4443;
		color: #fff;
	}
	.service-2 .content-box-holder .content-box:hover h4 {
		color: #99ffcc
	}
	.service-2 .content-box-holder .content-box:hover {
	}
}

/* Services > Hosting */
.serv-hosting-banner {
	background: url(images/mob/mobile-Services-Hosting.jpg) no-repeat 0 0;
	background-size: cover;
	height: 300px;
	position: relative;
}
@media (min-width: 769px) {
	.serv-hosting-banner {
		background: url(images/services-hosting-background.jpg) no-repeat 50% 0;
		background-attachment: fixed;
		height: 520px;
		position: relative;
	}
	.serv-hosting-banner .SkinWidth {
		position: relative;
		height: 100%;
	}
	.serv-hosting-banner .SkinWidth:before {
		content: "";
		background: url(images/services-hosting-foreground.png) no-repeat 50% 0;
		position: absolute;
		width: 700px;
		height: 465px;
		bottom: 0;
		right: 0;
		z-index: 0;
		background-size: cover;
	}
	.serv-hosting-banner .cbanner-text > div {
		bottom: 200px;
	}
}

.cbanner-text > div {
	position: absolute;
    bottom: 100px;
    color: #fff;
}

@media (max-width: 768px) {
	.cbanner-text {
		display: none;
	}
}
.hosting-package {
	text-align: center;
	margin-top: 50px;
}
.hosting-package > img {
	margin-bottom: 25px;
}
.hosting-package .icon-block-lg {
		background-color: #4f2971;
		margin-bottom: 15px;
}
@media handheld, only screen and (min-width:769px) {
	.hosting-package {
		position: relative;
		height: 350px;
		margin-top: 200px;
	}
	.hosting-package > img {
		margin-top: 100px;
	}
	.hosting-package .hosting-package-bg {
		position: absolute;
		bottom: 0;
		width: 838px;
		height: 350px;
		left: 50%;
		margin-left: -419px;
		overflow: hidden;
	}
	.hosting-package .hosting-package-bg:before {
		background: rgba(79,41,113,0.2);
		content: "";
		position: absolute;
		height: 250%;
		width: 100%;
		border-radius: 100%;
		top: 0;
		left: 0;
	}
	.hosting-package .icon-block-lg {
		position: absolute;
		bottom: 0;
	}
	.hosting-package .pack1 {
		bottom: 22.5%;
		left: 8%;
	}
	.hosting-package .pack2 {
		bottom: 60%;
		left: 23%;
	}
	.hosting-package .pack3 {
		bottom: 80%;
		left: 41.5%;
	}
	.hosting-package .pack4 {
		bottom: 60%;
		left: 60%;
	}
	.hosting-package .pack5 {
		left: 74%;
		bottom: 20%;
	}
}

/* Services > Content Development */
.serv-contentdev-banner {
	background: url(images/mob/mobile-Services-ContentDev.jpg) no-repeat 0 100%;
	height: 365px;
	position: relative;
	background-size: cover;
}
@media (min-width: 769px) {
	.serv-contentdev-banner {
		background: url(images/services-contentdev-background.jpg) no-repeat 50% 0;
		background-attachment: fixed;
		height: 520px;
		position: relative;
	}
	.serv-contentdev-banner .SkinWidth {
		position: relative;
		height: 100%;
	}
	.serv-contentdev-banner .SkinWidth:before {
		content: "";
		background: url(images/services-contentdev-foreground.png) no-repeat 50% 0;
		position: absolute;
		width: 818px;
		height: 503px;
		bottom: 0;
		right: 0;
		z-index: 0;
	}
	.serv-contentdev-banner .cbanner-text > div {
		bottom: 200px;
	}
}
.mobile-content {
	position: relative;
	padding: 10px 20px 70px;
	text-align: center;
	color: #fff;
} 
.bg-green {
	background-color: #209c67;
}
.mobile-content.bg-green:before {
	background-color: #209c67;
    content: "";
    position: absolute;
    height: 40px;
    width: 120%;
    border-radius: 1200px / 80px;
    top: -30px;
    left: -10%;
    z-index: 0;
}
.bg-pink {
	background-color: #a71f5b;
}
.mobile-content.bg-pink:before {
	background-color: #a71f5b;
    content: "";
    position: absolute;
    height: 40px;
    width: 120%;
    border-radius: 1200px / 80px;
    top: -30px;
    left: -10%;
    z-index: 0;
}

/* Services > Training */
.serv-training-banner {
	background: url(images/mob/mobile-Services-Training.jpg) no-repeat 0 0;
	height: 300px;
	position: relative;
}
@media (min-width: 769px) {
	.serv-training-banner {
		background: url(images/services-training-background.jpg) no-repeat 50% 0;
		background-attachment: fixed;
		height: 520px;
		position: relative;
	}
	.serv-training-banner .SkinWidth {
		position: relative;
		height: 100%;
	}
	.serv-training-banner .cbanner-text > div {
		bottom: 200px;
	}
}

.ctabs {
	position: relative;
    min-height: 300px;
}
.ctabs .ctab {
	position: absolute;
    left: 0;
    right: 0;
    top: -150px;
	z-index: 900;
}
.ctabs .icon-block-lg {
	background-color: #711558;
	height: 295px;
	width: 295px;
	box-shadow: 0 3px 4px rgba(0,0,0,0.5);
	position: relative;
	display: none;
}
.ctabs .icon-block-lg span.icon {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
	display: block;
    font-size: 60px;
    height: 50px;
    line-height: 55px;
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -25px;
}
.ctabs .ctab .icon-block-lg {
	display: flex;
}
.ctabs .ctab .icon-block-lg:hover, .ctabs .ctab li.active .icon-block-lg {
	background: #ffffff;
}
.ctabs .ctab .icon-block-lg:hover h5, .ctabs .ctab .icon-block-lg:hover h5.white, .ctabs .ctab li.active .icon-block-lg h5 {
	color: #660066 !important;
}
.ctabs .ctab .icon-block-lg span.icon {
	opacity: 0;
}
.ctabs .ctab .icon-block-lg:hover span.icon, .ctabs .ctab li.active .icon-block-lg span.icon {
	opacity: 1;
	color: #66cc99;
}
.ctabs .tab-content {
	padding-top: 150px;
}
.ctabs .tab-content > .tab-pane {
	padding: 50px 0;
	text-align: center;
}

.cnav {
	list-style: none;
	display: table;
	margin: 0 auto;
}
.cnav > li {
	float: left;
    margin-bottom: -1px;
    margin-left: 5px;
    margin-right: 5px;
}
@media (min-width: 760px) {
	.d-spacer {
		display: block;
		clear: both;
		height: 150px;
	}
}
@media (max-width: 1270px) {
	.ctabs .ctab { top: -125px; }
	.ctabs .icon-block-lg { height: 250px; width: 250px; }
}
@media (max-width: 1100px) {
	.ctabs .ctab { top: -100px; }
	.ctabs .icon-block-lg { height: 200px; width: 200px;}
}
@media (max-width: 890px) {
	.ctabs .ctab { top: -100px; }
	.ctabs .icon-block-lg { height: 150px; width: 150px;}
	.ctabs .icon-block-lg span.icon {
		font-size: 30px;
		height: 30px;
		color: #a71f5b;
		line-height: 30px;
		margin-left: -15px;
		bottom: 5px;
	}
}
@media (max-width: 760px) {
	.d-spacer {
		display: block;
		clear: both;
		height: 150px;
	}
	.ctabs {
		margin: -15px -15px;
	}
	.ctabs .ctab {
		display: none;
	}
	.ctabs .tab-content {
		padding: 0;
	}
	.ctabs .tab-content > .tab-pane {
		padding: 100px 15px 115px;
		display: block;
		position: relative;
		opacity: 1;
	}
	.ctabs .tab-content > .tab-pane:before {
		background: #fff;
		content: "";
		position: absolute;
		height: 60px;
		width: 120%;
		border-radius: 1200px / 80px;
		top: -15px;
		left: -10%;
	}
	.ctabs .tab-content > .tab-pane:nth-of-type(even),
	.ctabs .tab-content > .tab-pane:nth-of-type(even):before {
		background-color: #f8ecf3;
	}
	
	.ctabs .icon-block-lg {
		display: flex;
		position: absolute;
		left: 50%;
		margin-left: -75px;
		top: -90px;
	}
	.ctabs .icon-block-lg span.icon {
		font-size: 30px;
		height: 30px;
		color: #a71f5b;
		line-height: 30px;
		margin-left: -15px;
		bottom: 5px;
	}
}

/* ------------------------------------------------------ */
/* About Us */
/* ------------------------------------------------------ */
.page-about .BannerPane {
	background: #ffde00 url(images/mob/mobile-aboutus.jpg) no-repeat 50% 0;
	background-size: 100%;
}
.about-header {
	height: 400px;
    padding: 0;
    margin: 0;
	position: relative;
}
@media (min-width: 769px) {
	.page-about .BannerPane {
		background: #ffde00 url(images/about-background.jpg) no-repeat 50% 50%;
		background-size: cover;
	}
	.about-header {
		height: 436px;
	}
}
.about-header .about-icon {
	background-color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.about-header .about-icon:before {
	background: #fff;
	content: "";
    position: absolute;
    height: 140px;
    width: 120%;
    border-radius: 1200px / 80px;
    top: -50px;
    left: -10%;
    z-index: 0;
}
.about-header .about-icon:after {
	background: url(images/about-icon.png) no-repeat 50% 0;
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
	right: 0;
    height: 126px;
    bottom: 100%;
}
.about-header .about-icon h1 {
	z-index: 1;
	position: relative;
	margin: 10px 0 30px;
    font-weight: 300;
}
.about-header .about-header-img {
	position: absolute;
    left: 50%;
    margin-left: -1275px;
    top: 0;	
	max-width: 200%;
}

.page-about .content-block {
}
.page-about .content-block h1 {
    padding: 20px 0;
	text-align: center;
    color: #fff;
    z-index: 1;
}
.page-about .content-block .col-md-4 {
	padding: 20px 15px;
	background: rgba(3,116,92,0.6);
    background: -moz-linear-gradient(bottom,rgba(3,116,92,0.6) 40%,rgba(44,149,63,.6) 100%);
    background: -webkit-gradient(linear,top,bottom,color-stop(40%,rgba(3,116,92,0.6)),color-stop(100%,rgba(44,149,63,.6)));
    background: -webkit-linear-gradient(bottom,rgba(3,116,92,0.6) 40%,rgba(44,149,63,.6) 100%);
    background: -o-linear-gradient(bottom,rgba(3,116,92,0.6) 40%,rgba(44,149,63,.6) 100%);
    background: -ms-linear-gradient(bottom,rgba(3,116,92,0.6) 40%,rgba(44,149,63,.6) 100%);
	background: linear-gradient(to bottom,rgba(3,116,92,0.6) 40%,rgba(44,149,63,.6) 100%);
}
.page-about .content-block .col-md-4:last-child {
	padding-bottom: 150px;
}

@media (min-width: 992px) {
	.page-about .content-block h1 {
		position: absolute;
		top: 90px;
		left: 0;
		right: 0;
		text-align: center;
		color: #fff;
		z-index: 1;
	}
	.page-about .content-block .col-md-4 {
		padding: 0 60px;
		height: 710px;
		display: block;
		padding-top: 240px;
		
		background: rgba(3,116,92,0.6);
		background: -moz-linear-gradient(right,rgba(3,116,92,0.6) 40%,rgba(44,149,63,.6) 100%);
		background: -webkit-gradient(linear,left,right,color-stop(40%,rgba(3,116,92,0.6)),color-stop(100%,rgba(44,149,63,.6)));
		background: -webkit-linear-gradient(right,rgba(3,116,92,0.6) 40%,rgba(44,149,63,.6) 100%);
		background: -o-linear-gradient(right,rgba(3,116,92,0.6) 40%,rgba(44,149,63,.6) 100%);
		background: -ms-linear-gradient(right,rgba(3,116,92,0.6) 40%,rgba(44,149,63,.6) 100%);
		background: linear-gradient(to right,rgba(3,116,92,0.6) 40%,rgba(44,149,63,.6) 100%);
	}
}

.page-about .content-middle .icon-first {
	margin-top: -100px;
}

/* Slick Slider */
.staff-slider .slick-slide {
	text-align: center;
	margin: 0 4px;
}
.staff-slider .slick-slide .staff-image {
	position: relative;
	border: 14px solid #fcef94;
    display: inline-block;
}
.staff-slider .slick-slide .staff-image img {
	margin: 0 auto;
}
.staff-slider .slick-slide .staff-image .overlay-green{
	opacity: 0;
	-webkit-transition: 0.3s ease-out 0s;
    -moz-transition: 0.3s ease-out 0s;
    -ms-transition: 0.3s ease-out 0s;
    -o-transition: 0.3s ease-out 0s;
    transition: 0.3s ease-out 0s;
	
	background: rgba(9,123,97,0.8);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	color: #fde016;
	font-size: 22px;
	padding: 40px 20px;
}
.staff-slider .slick-slide .slider-caption {
	position: relative;
	opacity: 0;
	/*display: none;*/
	color: #08725b;
	-webkit-transition: 0.3s ease-out 0s;
    -moz-transition: 0.3s ease-out 0s;
    -ms-transition: 0.3s ease-out 0s;
    -o-transition: 0.3s ease-out 0s;
    transition: 0.3s ease-out 0s;
}
.staff-slider .slick-slide .slider-caption img {
	// /position: absolute;
	margin-top: -80px;
	border-radius: 100%;
    border: solid 10px #990066;
    width: 120px;
}

.staff-slider .slick-slide:hover .slider-caption {
	/*display: block;*/
	z-index: 20;
	opacity: 1;
}
.staff-slider .slick-slide:hover .staff-image .overlay-green {
	opacity: 1;
}


.staff-slider .slick-arrow.next {
	top: 140px;
	right: 0;
}
.staff-slider .slick-arrow.prev {
    top: 140px;
	left: 0;
}
@media handheld, only screen and (max-width:980px) {
	.staff-slider .slick-arrow img {
		width: 50px;
	}
}
@media handheld, only screen and (min-width:1600px) {
	.staff-slider .slick-arrow.next {
		top: 140px;
		right: -100px;
	}
	.staff-slider .slick-arrow.prev {
		top: 140px;
		left: -100px;
	}
}

/* ------------------------------------------------------ */
/* Clients & CaseStudies */
/* ------------------------------------------------------ */
@media (max-width:737px) {
	.ParallaxImage.Image1,
	.ParallaxImage.Image2,
	.ParallaxImage.Image3 {
		background: none;
	}
}
/* PARALLAX GLOBAL STYLE -------------------------------------- */
.page-clients .back-bg {
	text-align: right;
	z-index: 0;
	height: 365px;
	background-size: cover;
}
.page-clients .front-bg {
	position: absolute;
    bottom: 0;
    z-index: 2;
}
.page-clients .quote em {
}
.page-clients .quote span {
	color: #000;
}
@media handheld, only screen and (min-width:200px) and (max-width:768px) {
	.page-clients .banner1 .SkinWidth, 
	.page-clients .banner2 .SkinWidth,
	.page-clients .banner3 .SkinWidth,
	.page-clients .banner4 .SkinWidth {
		height: auto;
		padding: 0;
	}
}
/* PARALLAX 1 -------------------------------------- */
.ParallaxBg1 {
	background-position: 50% 100px;
	/*background-size: 120%;*/
	background-size: inherit;
}
.ParallaxBg1 .icon-block-lg {
	width: 175px;
	height: 175px;
	background-color: #008365;
}
.page-clients .banner1 {
	position: relative;
	overflow: hidden;
}
.page-clients .banner1:after {
	background: #fff url('images/ClientsBg01.png') no-repeat 50% -500px;
	/*background-size: 100%;*/
    content: "";
    position: absolute;
    height: 190px;
    width: 120%;
    border-radius: 1200px / 80px;
    bottom: -40px;
    left: -10%;
    z-index: 1;
}
.page-clients .banner1 img {
	display: none !important;
}
.page-clients .banner1 .back-bg {
	background: url(images/mob/mobile-client-tennis.jpg) no-repeat 0 100%;
	background-size: cover;
}

@media (min-width:769px) {
	.page-clients .banner1 .SkinWidth {
		position: relative;
		height: 750px;
	}
	.page-clients .banner1 .back-bg {
		background: url(images/clients/casestudy-tennis-foreground.png) no-repeat 100% 100%;
		height: 713px;
	}
	.page-clients .banner1 .front-bg {
		background: url(images/clients/laptop.png) no-repeat 0 100%;
		width: 624px;
		height: 469px;
	}	
	.page-clients .banner1 .bold-title {
		position: absolute;
		top: 50px;
		color: #fff;
		text-align: center;
		width: 600px;
	}
	.page-clients .banner1 .quote {
		position: absolute;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 2;
		text-align: right;
		font-size: 18px;
		color: #009966;
		padding: 30px 0;
	}
	.page-clients .banner1 .quote .quote-box {
		width: 40%;
		float: right;
		line-height: 150%;
	}
}
@media handheld, only screen and (max-width:1024px) {
	.page-clients .banner1 .front-bg img {
		width: 80%;
	}
	.page-clients .banner1 .front-bg {
		background-size: 80%;
	}
	.page-clients .banner1 .quote .quote-box {
		width: 50%;
		padding-right: 10px;
	}
}
@media handheld, only screen and (max-width:768px) {
	.page-clients .banner1 .back-bg img {
		width: 100%;
	}
}
@media handheld, only screen and (min-width:200px) and (max-width:768px) {
	.ParallaxBg1 {
		background: #fff;
	}
	.page-clients .banner1:after {
		background: #fff;
		bottom: auto;
		top: 550px;
		display: none;
	}
	.page-clients .banner1 .front-bg {
		bottom: auto;
		top: auto;
		position: relative;
		float: left;
		margin-top: -250px;
	}
	.page-clients .banner1 .bold-title {
		position: relative;
		background: #fff;
		color: #009966;
		width: 100%;
		padding: 20px 10px;
		text-align: center;
		top: auto;
	}
	.page-clients .banner1 .quote {
		position: relative;
		background: #fff;
		text-align: center;
	}
	.page-clients .banner1 .quote .quote-box {
		width: 100%;
		padding: 0 20px;
		float: none;
	}
}

/* PARALLAX 2 -------------------------------------- */
.ParallaxBg2 {
	background-position: 50% 280px;
	/*background-size: 120%;*/
	background-size: inherit;
}
.ParallaxBg2 .icon-block-lg {
	width: 175px;
	height: 175px;
	background-color: #1d4443;
}
.page-clients .banner2 {
	position: relative;
	overflow: hidden;
}
.page-clients .banner2:after {
	background: #fff url('images/ClientsBg02.png') no-repeat 50% -250px;
	/*background-size: 100%;*/
    content: "";
    position: absolute;
    height: 290px;
    width: 120%;
    border-radius: 1200px / 80px;
    bottom: -40px;
    left: -10%;
    z-index: 1;
}
.page-clients .banner2 img {
	display: none !important;
}
.page-clients .banner2 .back-bg {
	background: url(images/mob/mobile-client-netball.jpg) no-repeat 0 100%;
	background-size: cover;
}

@media (min-width:769px) {
	.page-clients .banner2 .SkinWidth {
		position: relative;
		height: 780px;
	}
	.page-clients .banner2 .back-bg {
		background: url(images/clients/casestudy-netball-foreground.png) no-repeat 0 100%;
		height: 615px;
	}
	.page-clients .banner2 .front-bg {
		background: url(images/clients/tablet.png) no-repeat 100% 0;
		width: 653px;
		height: 309px;
		right: 0;
	}
	.page-clients .banner2 .bold-title {
		position: absolute;
		top: 200px;
		color: #fff;
		text-align: center;
		right: 0;
		width: 640px;
	}
	.page-clients .banner2 .quote {
		position: absolute;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 2;
		text-align: left;
		font-size: 18px;
		color: #009966;
		padding: 30px 0;
	}
	.page-clients .banner2 .quote .quote-box {
		width: 45%;
		float: left;
		line-height: 150%;
	}
}
@media handheld, only screen and (max-width:1024px) {
	.page-clients .banner2:after {
		height: 320px;
	}
	.page-clients .banner2 .quote .quote-box {
		padding-left: 10px;
		width: 50%;
	}
	.page-clients .banner2 .front-bg {
		text-align: right;
	}
	.page-clients .banner2 .front-bg img {
		width: 80%;
	}
	.page-clients .banner2 .front-bg {
		background-size: 80%;
	}
	.page-clients .banner2 .bold-title {
		width: 450px;
	}
}
@media handheld, only screen and (min-width:200px) and (max-width:768px) {
	.ParallaxBg2 {
		background: #fff;
	}
	.page-clients .banner2:after {
		background: #fff;
		bottom: auto;
		top: 550px;
		display: none;
	}
	.page-clients .banner2 .front-bg {
		bottom: auto;
		top: auto;
		position: relative;
		float: left;
		margin-top: -250px;
	}
	.page-clients .banner2 .bold-title {
		position: relative;
		background: #fff;
		color: #009966;
		width: 100%;
		padding: 20px 10px;
		text-align: center;
		top: auto;
	}
	.page-clients .banner2 .quote {
		position: relative;
		background: #fff;
		text-align: center;
	}
	.page-clients .banner2 .quote .quote-box {
		width: 100%;
		padding: 0 20px;
		float: none;
	}
}


/* PARALLAX 3 -------------------------------------- */
.ParallaxBg3 {
	background-position: 50% 100%;
	/*background-size: 120%;*/
	background-size: inherit;
	background-repeat: no-repeat;
}
.ParallaxBg3 .icon-block-lg {
	width: 175px;
	height: 175px;
	background-color: #fbd117;
}
.ParallaxBg3 .icon-block-lg h1 {
	color: #0f4638 !important;
}
.page-clients .banner3 {
	position: relative;
	overflow: hidden;
}
.page-clients .banner3:after {
	background: #fff;
    content: "";
    position: absolute;
    height: 200px;
    width: 120%;
    border-radius: 1200px / 80px;
    bottom: -40px;
    left: -10%;
    z-index: 1;
}
.page-clients .banner3 img {
	display: none !important;
}
.page-clients .banner3 .back-bg {
	background: url(images/mob/mobile-client-lifesaving.jpg) no-repeat 0 100%;
	background-size: cover;
}
@media (min-width:769px) {
	.page-clients .banner3 .SkinWidth {
		position: relative;
		height: 700px;
	}
	.page-clients .banner3 .back-bg {
		background: url(images/clients/casestudy-lifesaving-foreground.png) no-repeat 0 0;
		height: 615px;
	}
	.page-clients .banner3 .front-bg {
		background: url(images/clients/monitor.png) no-repeat 100% 0;
		width: 432px;
		height: 540px;
		left: 0;
	}
	.page-clients .banner3 .bold-title {
		position: absolute;
		top: 200px;
		color: #fff;
		text-align: center;
		right: 200px;
		width: 340px;
	}
	.page-clients .banner3 .quote {
		position: absolute;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 2;
		text-align: left;
		font-size: 18px;
		color: #009966;
		padding: 30px 0;
	}
	.page-clients .banner3 .quote .quote-box {
		width: 60%;
		float: right;
		line-height: 150%;
	}
}
@media handheld, only screen and (max-width:1024px) {
	.page-clients .banner3:after {
		height: 320px;
	}
	.page-clients .banner3 .quote .quote-box {
		padding-left: 10px;
		width: 50%;
	}
	.page-clients .banner3 .front-bg {
		text-align: right;
	}
	.page-clients .banner3 .front-bg img {
		width: 80%;
	}
	.page-clients .banner3 .front-bg {
		background-size: 80%;
	}
	.page-clients .banner3 .bold-title {
		width: 450px;
	}
}
@media handheld, only screen and (min-width:200px) and (max-width:768px) {
	.ParallaxBg2 {
		background: #fff;
	}
	.page-clients .banner3:after {
		background: #fff;
		bottom: auto;
		top: 550px;
		display: none;
	}
	.page-clients .banner3 .front-bg {
		bottom: auto;
		top: auto;
		position: relative;
		float: left;
		margin-top: -250px;
	}
	.page-clients .banner3 .bold-title {
		position: relative;
		background: #fff;
		color: #009966;
		width: 100%;
		padding: 20px 10px;
		text-align: center;
		top: auto;
	}
	.page-clients .banner3 .quote {
		position: relative;
		background: #fff;
		text-align: center;
	}
	.page-clients .banner3 .quote .quote-box {
		width: 100%;
		padding: 0 20px;
		float: none;
	}
}

/* PARALLAX 4 -------------------------------------- */
.ParallaxBg4 {
	background-position: 50% 400px;
	/*background-size: 120%;*/
	background-size: inherit;
}
.ParallaxBg4 .Image4 {
	background-position: 50% 80px;
}
.ParallaxBg4 .icon-block-lg {
	width: 175px;
	height: 175px;
	background-color: #fbd117;
}
.ParallaxBg4 .icon-block-lg h1 {
	color: #0f4638 !important;
}
.page-clients .banner4 {
	position: relative;
	overflow: hidden;
}
.page-clients .banner4:after {
	background: #fff url('images/ClientsBg04.png') no-repeat 50% -130px;
	/*background-size: 100%;*/
    content: "";
    position: absolute;
    height: 200px;
    width: 120%;
    border-radius: 1200px / 80px;
    bottom: -40px;
    left: -10%;
    z-index: 1;
}
.page-clients .banner4 img {
	display: none !important;
}
.page-clients .banner4 .back-bg {
	background: url(images/mob/mobile-client-athletics.jpg) no-repeat 50% 50%;
	background-size: cover;
}
@media (min-width:769px) {
	.page-clients .banner4 .SkinWidth {
		position: relative;
		height: 695px;
	}
	.page-clients .banner4 .back-bg {
		background: url(images/clients/kids.png) no-repeat 100% 0;
		height: 615px;
		width: 100%;
		z-index: 0;
		position: absolute;
		right: 0;
	}
	.page-clients .banner4 .front-bg {
		background: url(images/clients/tablet2.png) no-repeat 100% 0;
		width: 660px;
		height: 310px;
		right: 0;
	}
	.page-clients .banner4 .bold-title {
		position: absolute;
		top: 200px;
		color: #fff;
		text-align: center;
		left: 0;
		right: 0;
	}
	.page-clients .banner4 .quote {
		position: absolute;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 2;
		text-align: left;
		font-size: 18px;
		color: #009966;
		padding: 30px 0;
	}
	.page-clients .banner4 .quote .quote-box {
		width: 50%;
		float: left;
		line-height: 150%;
	}
}
@media handheld, only screen and (max-width:1024px) {
	.page-clients .banner4:after {
		height: 320px;
	}
	.page-clients .banner4 .quote .quote-box {
		padding-left: 10px;
		width: 50%;
	}
	.page-clients .banner4 .front-bg {
		text-align: right;
	}
	.page-clients .banner4 .front-bg img {
		width: 80%;
	}
	.page-clients .banner4 .front-bg {
		background-size: 80%;
	}
	.page-clients .banner4 .bold-title {
		width: 450px;
	}
}
@media handheld, only screen and (min-width:200px) and (max-width:768px) {
	.ParallaxBg2 {
		background: #fff;
	}
	.page-clients .banner4:after {
		background: #fff;
		bottom: auto;
		top: 550px;
		display: none;
	}
	.page-clients .banner4 .front-bg {
		bottom: auto;
		top: auto;
		position: relative;
		float: left;
		margin-top: -250px;
	}
	.page-clients .banner4 .bold-title {
		position: relative;
		background: #fff;
		color: #009966;
		width: 100%;
		padding: 20px 10px;
		text-align: center;
		top: auto;
	}
	.page-clients .banner4 .quote {
		position: relative;
		background: #fff;
		text-align: center;
	}
	.page-clients .banner4 .quote .quote-box {
		width: 100%;
		padding: 0 20px;
		float: none;
	}
}

@media (min-width: 1280px) {
	.desk-pl40 {padding-left: 40px}
	.desk-pr40 {padding-right: 40px}
}
@media (max-width: 759px) {
	.red-btn, .dark-green-btn, a.red-btn, a.dark-green-btn {
		font-size: 14px;
	}
	.mtext-center {
		text-align: center;
	}
}

/* ------------------------------------------------------ */
/* RESOURCES */
/* ------------------------------------------------------ */
.page-resources {
}
@media (max-width:768px) {
	.page-resources .BannerPane {
		background: url(images/mob/mobile-resources-bg.jpg) no-repeat 0 0;
		height: 365px;
		background-size: cover;
	}
	.page-resources .banner {
		display: none;
	}
}
@media (min-width:769px) {
	.page-resources .BannerPane {
		background: url(images/resources-background.jpg) no-repeat 50% 0;
		background-attachment: fixed;
	}
	.page-resources .banner {
		overflow: hidden;
	}
}
.page-resources .banner .SkinWidth {
	height: 600px;
	position: relative;
}
.page-resources .banner img {
	position: absolute;
	right: 0;
}
.page-resources .banner .banner-title {
	position: absolute;
	top: 200px;
	color: #fff;
    text-shadow: 2px 2px 7px #000;
}
.page-resources h2 {
	color: #2d513b;
}
.page-resources .mycontent p {
	color: #000;
}
.page-resources .icon-block-lg {
	background-color: #fff;
	width: 130px;
	height: 130px;
	font-size: 80px;
	color: #209c67;
}

#resources-tab {
}
#resources-tab.ctabs .ctab {
	position: relative;
	top: auto;
}
#resources-tab .cnav {
	display: block;
}
#resources-tab .cnav > li {
	margin-left: 0.05%;
    margin-right: 0.05%;
    width: 19.9%;
}
#resources-tab.ctabs .ctab .icon-block-lg {
	border-radius: 0;
	height: 228px;
    width: 100%;
    background: #1d4443;
	color: #ccebe0;
	box-shadow: none;
}
#resources-tab.ctabs .ctab .icon-block-lg h5 {
	font-size: 26px;
}
#resources-tab.ctabs .ctab .icon-block-lg:hover, #resources-tab.ctabs .ctab li.active .icon-block-lg {
	background: #ccebe0;
	color: #003333;
}
#resources-tab.ctabs .ctab .icon-block-lg:hover span.icon, #resources-tab.ctabs .ctab li.active .icon-block-lg span.icon {
	color: #fff;
}
#resources-tab.ctabs .tab-content {
	padding: 0;
	clear: both;
}
#resources-tab.ctabs .tab-content > .tab-pane {
    padding: 60px 40px;
    text-align: left;
    background: #ccebe0;
}

@media (max-width: 760px) {
	.d-spacer {
		display: block;
		clear: both;
		height: 150px;
	}
	#resources-tab.ctabs {
		/*margin: 15px 15px;*/
	}
	#resources-tab.ctabs .ctab {
		display: none;
	}
	#resources-tab.ctabs .tab-content {
		padding: 0;
	}
	#resources-tab.ctabs .tab-content > .tab-pane {
		padding: 0 30px 30px;
		display: block;
		position: relative;
		opacity: 1;
		margin: 10px;
		background: #ccebe0;
	}
	#resources-tab.ctabs .tab-content > .tab-pane:before {
		display: none;
	}
	/*
	#resources-tab.ctabs .tab-content > .tab-pane:nth-of-type(even),
	#resources-tab.ctabs .tab-content > .tab-pane:nth-of-type(even):before {
		background-color: #f8ecf3;
	}
	*/
	#resources-tab.ctabs .icon-block-lg {
		display: flex;
		position: relative;
		left: auto;
		margin: 0 -30px 30px;
		top: auto;
		width: calc(100% + 60px);
		border-radius: 0;
		box-shadow: none;
		background: #1d4443;
	}
	#resources-tab.ctabs .icon-block-lg h5 {
		font-size: 26px;
	}
	#resources-tab.ctabs .icon-block-lg span.icon {
		font-size: 40px;
		height: 30px;
		color: #fff;
		line-height: 40px;
		margin-left: -20px;
		bottom: -10px;
		background: #1d4443;
		border-radius: 100%;
		width: 35px;
	}
}

/* ------------------------------------------------------ */
/* CONTACTS */
/* ------------------------------------------------------ */
.canopi-form {}
.canopi-form .form-control {
	border: none;
	border-radius: 30px;
	height: 40px;
	background-color: #99cccc;
	color: #000;
}
.canopi-form .form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #777;
}
.canopi-form .form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #777;
   opacity:  1;
}
.canopi-form .form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #777;
   opacity:  1;
}
.canopi-form .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #777;
}
.canopi-form textarea.form-control {
	height: auto;
	background-color: #189d81;
	color: #fff;
	padding: 20px 15px;
}
.canopi-form textarea.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #ccc;
}
.canopi-form textarea.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #ccc;
   opacity:  1;
}
.canopi-form textarea.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #ccc;
   opacity:  1;
}
.canopi-form textarea.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #ccc;
}


.white-btn {
	background: #fff;
    border-radius: 30px;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    padding: 12px 60px 12px 25px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
	border: none;
}
.white-btn .icon {
    position: absolute;
    font-size: 42px;
    top: 50%;
    right: 3px;
    margin-top: -19px;
}

.canopi-form .white-btn .icon {
	top: 50% !important;
    right: 1px !important;
    margin-top: -20px !important;
}

/* ------------------------------------------------------ */
/* Products */
/* ------------------------------------------------------ */
.products-banner {
	background: url(images/products-background.png) no-repeat 50% 0;
	background-size: cover;
	height: 350px;
}
@media (max-width: 768px) {
	.products-banner h1 > span {
		font-size: inherit !important;
	}
}
.product-tabs {
	background: url(images/rainbow-mob.png) no-repeat 50% 0;
	margin-top: -140px;
}
.ctabs.product-tabs .tab-content > .tab-pane:before {
	display: none;
}
@media (min-width: 1401px) {
	.products-banner {
		height: 600px;
		position: relative;
	}
	.product-tabs {
		/*background: url(images/rainbow.png) no-repeat 50% 0;*/
		
		background: url(images/rainbow.png) no-repeat 50% -10px;
		margin-top: -430px;
		background-size: 85%;
	}
}
.product-tabs.ctabs .ctab {
	top: -60px;
}
@media (max-width: 1400px) {
	.product-tabs {
		/*z-index: -1;*/
	}
	.product-tabs.ctabs .ctab {
		display: none;
	}
	.product-tabs.ctabs .tab-content > .tab-pane {
		padding: 100px 15px 115px;
		display: block;
		position: relative;
		opacity: 1;
	}
}
.product-tabs.ctabs .ctab .cnav > li {
	float: left;
    margin-bottom: -1px;
    margin-left: 4px;
    margin-right: 4px;
    text-align: center;
}
.product-tabs.ctabs .ctab .cnav > li a {
	display: block;
    height: 350px;
    position: relative;
    padding: 0 45px;
	z-index: 1;
}
.product-tabs.ctabs .ctab .cnav > li a:before {
	content: "";
	position: absolute;
	left: 50%;
	border-left: dotted 2px #fff;
    top: 110px;
    bottom: 10px;
    z-index: -1;
}
.product-tabs.ctabs .ctab .cnav > li a .icon-block,
.product-tabs.ctabs .tab-content .tab-pane .icon-holder .icon-block {
	background: #1c4343;
	color: #fff;
}
.product-tabs.ctabs .ctab .cnav > li a h3 {
	position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    background: #1c4343;
	line-height: 120%;
    height: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	padding: 0 30px;
}

.product-tabs.ctabs .ctab .cnav > li:nth-child(1) a {
	padding-top: calc(41px + 32px);
}
.product-tabs.ctabs .ctab .cnav > li:nth-child(2) a {
	padding-top: 32px;
}
.product-tabs.ctabs .ctab .cnav > li:nth-child(3) a {
}
.product-tabs.ctabs .ctab .cnav > li:nth-child(4) a {
}
.product-tabs.ctabs .ctab .cnav > li:nth-child(5) a {
	padding-top: 32px;
}
.product-tabs.ctabs .ctab .cnav > li:nth-child(6) a {
	padding-top: calc(41px + 32px);
}

.product-tabs.ctabs .ctab .cnav > li:nth-child(1) a .icon-block,
.product-tabs.ctabs .ctab .cnav > li:nth-child(6) a .icon-block,
.product-tabs.ctabs .tab-content .tab-pane:nth-child(1) .icon-holder .icon-block,
.product-tabs.ctabs .tab-content .tab-pane:nth-child(6) .icon-holder .icon-block {
	background: #fff;
}
.product-tabs.ctabs .ctab .cnav > li:nth-child(2) a .icon-block,
.product-tabs.ctabs .tab-content .tab-pane:nth-child(2) .icon-holder .icon-block {
	background: #f3b721;
}
.product-tabs.ctabs .ctab .cnav > li:nth-child(1) a .icon-block .icon,
.product-tabs.ctabs .ctab .cnav > li:nth-child(6) a .icon-block .icon,
.product-tabs.ctabs .tab-content .tab-pane:nth-child(1) .icon-holder .icon-block .icon,
.product-tabs.ctabs .tab-content .tab-pane:nth-child(6) .icon-holder .icon-block .icon {
	color: #209c67 !important;
}
.product-tabs.ctabs .ctab .cnav > li:nth-child(2) a .icon-block .icon,
.product-tabs.ctabs .tab-content .tab-pane:nth-child(2) .icon-holder .icon-block {
	color: #fff !important;
}
.product-tabs.ctabs .ctab .cnav > li:nth-child(1) a h3,
.product-tabs.ctabs .ctab .cnav > li:nth-child(6) a h3 {
	background: #209c67;
}
.product-tabs.ctabs .ctab .cnav > li:nth-child(2) a h3 {
	background: #f3b721;
	color: #1c4343 !important;
}

.product-tabs.ctabs .ctab .cnav > li.active a h3 {
	border-bottom: solid 10px #1c4343;
    height: 122px;
    bottom: 0;
}
.product-tabs.ctabs .ctab .cnav > li.active:nth-child(1) a h3,
.product-tabs.ctabs .ctab .cnav > li.active:nth-child(6) a h3 {
	border-bottom: solid 10px #209c67;
}
.product-tabs.ctabs .ctab .cnav > li.active:nth-child(2) a h3 {
	border-bottom: solid 10px #f3b721;
}

.product-tabs.ctabs .tab-content {
	padding: 10px;
    padding-top: 120px;
}
.product-tabs.ctabs .tab-content .icon-holder {
	margin-top: -180px;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 20px;
	position: relative;
}
.product-tabs.ctabs .tab-content .icon-holder:before {
	content: "";
    position: absolute;
    left: 50%;
    border-left: dotted 2px #fff;
    top: 110px;
    bottom: 10px;
    z-index: -1;
}
.product-tabs.ctabs .tab-content .icon-holder > h3 {
    padding: 20px 0 10px;
    text-align: center;
    margin-top: 20px;
    border-bottom: solid 1px #990066;
}
.product-tabs.ctabs .tab-content .icon-holder > h3 span.icon {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    display: block;
    font-size: 30px;
    height: 30px;
    line-height: 30px;
	color: #fff;
}
.product-tabs.ctabs .tab-content > .tab-pane {
	background-color: #1c4343;
	padding: 20px;
	text-align: left;
	margin-bottom: 200px;
}
@media (min-width: 1400px) {
	.product-tabs.ctabs .tab-content {
		padding: 0;
		padding-top: 290px;
	}
	.product-tabs.ctabs .tab-content .icon-holder {
		display: none;
	}
	.product-tabs.ctabs .tab-content > .tab-pane {
		padding: 50px;
		margin: 0;
	}
}
.product-tabs.ctabs .tab-content > .tab-pane:nth-child(1),
.product-tabs.ctabs .tab-content > .tab-pane:nth-child(6) {	
	background-color: #209c67;
}
.product-tabs.ctabs .tab-content > .tab-pane:last-child {
	margin-bottom: 0;
}
.product-tabs.ctabs .tab-content > .tab-pane:nth-child(2) {
	background: #f3b721;
	background: rgba(243,183,33,1);
    background: -moz-linear-gradient(bottom,rgba(243,183,33,1) 40%,rgba(191,79,72,.8) 100%);
    background: -webkit-gradient(linear,top,bottom,color-stop(40%,rgba(243,183,33,1)),color-stop(100%,rgba(191,79,72,.8)));
    background: -webkit-linear-gradient(bottom,rgba(243,183,33,1) 40%,rgba(191,79,72,.8) 100%);
    background: -o-linear-gradient(bottom,rgba(243,183,33,1) 40%,rgba(191,79,72,.8) 100%);
    background: -ms-linear-gradient(bottom,rgba(243,183,33,1) 40%,rgba(191,79,72,.8) 100%);
	background: linear-gradient(to bottom,rgba(243,183,33,1) 0%,rgba(191,79,72,.8) 100%);
	
	padding-left: 0;
	padding-right: 0;
}
.product-tabs.ctabs .tab-content > .tab-pane:nth-child(2) hr {
	border-color: #f3b721;
	margin-top: 30px;
    margin-bottom: 30px;
}
.product-tabs.ctabs .tab-content > .tab-pane:nth-child(2) h3 {
	color: #990465;
}
.product-tabs.ctabs .tab-content > .tab-pane:nth-child(2) .plr50 {
	padding-left: 20px;
	padding-right: 20px;
}
.product-tabs.ctabs .tab-content > .tab-pane:nth-child(2) .red-btn {
	width: 90%;
	max-width: 300px;
}
@media (min-width: 769px) {
	.product-tabs.ctabs .tab-content > .tab-pane:nth-child(2) .plr50 {
		padding-left: 50px;
		padding-right: 50px;
	}
}
.product-tabs ul.ori li {
    font-size: 16px;
}

/* COURSES */
.courses-list {
	margin-top: -100px;
}
@media (min-width: 769px) {
	.courses-list {
		margin-top: -100px;
	}
}
.courses-list .course-title {
	/*
	background: #a7225a;
    background: -moz-linear-gradient(bottom,#a7225a 40%,#990465 100%);
    background: -webkit-gradient(linear,top,bottom,color-stop(40%,#a7225a),color-stop(100%,#990465));
    background: -webkit-linear-gradient(bottom,#a7225a 40%,#990465 100%);
    background: -o-linear-gradient(bottom,#a7225a 40%,#990465 100%);
    background: -ms-linear-gradient(bottom,#a7225a 40%,#990465 100%);
	background: linear-gradient(to bottom,#a7225a 0%,#990465 100%);
	*/
	background: #7c0055;
	color: #fff;
	padding: 10px;
}
.courses-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.courses-list > ul > li {
	background: #f3b721;
    background: -moz-linear-gradient(bottom,#f3b721 40%,#ff9933 100%);
    background: -webkit-gradient(linear,top,bottom,color-stop(40%,#f3b721),color-stop(100%,#ff9933));
    background: -webkit-linear-gradient(bottom,#f3b721 40%,#ff9933 100%);
    background: -o-linear-gradient(bottom,#f3b721 40%,#ff9933 100%);
    background: -ms-linear-gradient(bottom,#f3b721 40%,#ff9933 100%);
	background: linear-gradient(to bottom,#f3b721 0%,#ff9933 100%);
}
.courses-list > ul > li > a h3 {
	color: #a9245d;
	padding: 10px;
	display: block;
	font-size: 16px;
}
.courses-list > ul > li li {
	background: #fff;
	-webkit-transition: 0.3s ease-out 0s;
    -moz-transition: 0.3s ease-out 0s;
    -ms-transition: 0.3s ease-out 0s;
    -o-transition: 0.3s ease-out 0s;
    transition: 0.3s ease-out 0s;
}
.courses-list > ul > li li:nth-of-type(odd) {
	background: #f1f1f1;
}
.courses-list > ul > li li:hover {
	background: #cce3d9;
}
.courses-list > ul > li li a {
	display: block;
	padding: 10px;
	color: #000;
	font-size: 14px;
}

@media (min-width:769px) {
	.courses-list .course-title,
	.courses-list > ul > li > a h3,
	.courses-list > ul > li li a {
		padding: 20px 70px;
	}	
	.courses-list > ul > li > a h3 {
		font-size: 24px;	
	}
	.courses-list > ul > li li a {
		font-size: 18px;
	}
}

/* LOGIN Page */
.canopi-login {
}
.canopi-login .loginContent {
}
.canopi-login .loginContent .LoginPanel {
	padding: 0;
    float: none;
    margin: 0 auto;
	max-width: 500px;
    width: auto;
}
.canopi-login .dnnFormItem {
	text-align: center;
    width: 100%;
	margin-bottom: 10px;
}
.canopi-login .dnnLabel {
	float: none;
    width: 100%;
    text-align: left;
}
.canopi-login .dnnLabel label {
	font-weight: normal;
	font-size: 14px;
	color: #ccc;
}
.canopi-login .dnnLoginService input[type="text"], 
.canopi-login .dnnLoginService input[type="password"],
.canopi-login div.dnnRegistrationForm .dnnForm input[type="text"], 
.canopi-login div.dnnRegistrationForm .dnnForm input[type="password"] {
	border: none;
	width: 100%;
	max-width: 100%;
	border-radius: 30px;
	background: #99cccc;
	color: #000;
	height: 40px;
	font-size: 14px;
}
.canopi-login .dnnBoxLabel {
	color: #fff;
    font-weight: normal;
}
.canopi-login .dnnFormItem > label.dnnFormLabel {
	display: none;
}
.canopi-login .dnnLoginActions {
	text-align: center;
}

.canopi-login .dnnFormItem .dnnPrimaryAction,
.canopi-login .dnnRegistrationForm ul.dnnActions .dnnPrimaryAction {
	background: #fede00;
    border-radius: 30px;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    padding: 12px 25px 12px 25px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    border: none;
    box-shadow: none;
    margin-right: 10px;
	text-shadow: none;
}
.canopi-login .dnnFormItem > .dnnSecondaryAction,
.canopi-login .dnnRegistrationForm ul.dnnActions .dnnSecondaryAction {
	background: #fff;
    border-radius: 30px;
    color: #333;
    font-size: 16px;
    font-weight: 400;
    padding: 12px 25px 12px 25px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    border: none;
    box-shadow: none;
    margin-right: 10px;
}
.canopi-login .dnnLoginActions .dnnSecondaryAction {
    background: none;
    text-shadow: none;
    color: #fff;
    font-weight: normal;
    border: solid 2px #fff;
    padding: 7px 20px;
    border-radius: 30px;
    box-shadow: none;
    font-size: 13px;
    margin: 0 5px;
}
.canopi-login .dnnFormMessage.dnnFormError, .canopi-login .dnnFormMessage.dnnFormValidationSummary {
	background-color: rgba(255,0,0,0.3);
    margin: 0 auto 20px;
    border-color: rgba(255,0,0,0.6);
    color: #fff;
}

/* Registration */
.canopi-login .dnnSocialRegistration {
	float: none;
	width: 100%;
}
.canopi-login .dnnSocialRegistration #mainContainer {
	padding: 0;
}
.canopi-login div.dnnRegistrationForm {
	width: 100%;
	min-width: 300px;
	text-align: center;
}
.canopi-login div.dnnRegistrationForm .dnnFormMessage {
	margin: 0 auto 20px;
	color: #c4c4c4;
}
.canopi-login div.dnnRegistrationForm span.dnnFormMessage.dnnFormError {
	bottom: 18%;
    right: 0;
}
.canopi-login div.dnnRegistrationForm .dnnForm {
	padding: 0;
    float: none;
    margin: 0 auto;
    max-width: 500px;
    width: auto;
}
.canopi-login .dnnRegistrationForm .password-strength-container, 
.canopi-login .dnnFormPassword .password-strength-container, 
.canopi-login .dnnPasswordReset .password-strength-container, 
.canopi-login .dnnPassword .password-strength-container {
	background: transparent;
    margin: 0;
	padding: 0;
    width: auto;
    max-width: 100%;
    display: block;
}
.canopi-login .dnnRegistrationForm .min-length-text {color: #ccc; float: left; margin-left: 20px;}
.canopi-login .dnnRegistrationForm .meter {margin-right: 20px;}
.canopi-login .dnnRegistrationForm .meter, .meter div {border-radius: 20px; }

.canopi-login .dnnRegistrationForm ul.dnnActions {
	margin: 0;
    padding-top: 10px;
	display: inline-block;
}

.canopi-login div.dnnRegistrationForm div.dnnCaptcha {
	width: auto;
    max-width: 500px;
    margin: 0 auto 10px;
}
.canopi-login div.dnnRegistrationForm div.dnnCaptcha .dnnLeft {
	margin: 0 auto;
    background: #99cccc;
    padding: 10px;
    border-radius: 20px;
	float: none;
}
.canopi-login div.dnnRegistrationForm div.dnnCaptcha input[type="text"] {
	width: 100%;
    border-radius: 20px;
    border: solid 1px #aaa;
}


.hidden{display:none;visibility:hidden;}
.visible-phone{display:none !important;}
.visible-tablet{display:none !important;}
.hidden-desktop{display:none !important;}
.visible-desktop{display:inherit !important;}
@media (min-width:769px) and (max-width:979px){
	.hidden-desktop{display:inherit !important;}
	.visible-desktop{display:none !important;}
	.visible-tablet{display:inherit !important;}
	.hidden-tablet{display:none !important;}
}
@media (max-width:768px){
	.hidden-desktop{display:inherit !important;}
	.visible-desktop{display:none !important;}
	.visible-phone{display:inherit !important;}
	.hidden-phone{display:none !important;}
}