@charset "utf-8";
/* CSS Document */

/******************
*	V1 OVERRIDES
*******************/
.container{
	padding-bottom:30px !important;
}


/******************
*	Generic styles
*******************/
#contentWrapper{
	max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
	font-family: 'Roboto',sans-serif;
}
#contentWrapper h1,
#contentWrapper h2,
#contentWrapper h3,
#contentWrapper h4,
#contentWrapper h5,
#contentWrapper h6{
	font-family: 'Montserrat',sans-serif;
	margin-bottom: 20px;
}

#contentWrapper h1:not(.-bg__trans) span,
#contentWrapper h2:not(.-bg__trans) span,
#contentWrapper h3:not(.-bg__trans) span,
#contentWrapper h4:not(.-bg__trans) span{
	background-color: #00b2a9;
    color: #fff;
    font-weight: bold;
    padding: 3px 15px;
    width: auto !important;
	margin-bottom:20px;
    line-height: 3.2rem;
}

#contentWrapper h3.d-md-none{
	position: absolute;
    z-index: 99;
    bottom: 30px;
    left: 10%;
}

.no-gutters{
  margin-right: 0;
  margin-left: 0;
}
 .no-gutters > .col,
 .no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
 }

/******************
*	Utility classes
*******************/
.first-block{
	margin-top: 0;
	padding-top: 6%;
}

/*** MARGIN SUPP ***/
.mt-100{
	margin-top:100px;
}
.mt-250{
	margin-top:72px;
}

/******************
*	UTILITY MEDIA QUERIES
*******************/
@media (min-width: 576px) { 

}
@media (min-width: 768px) { 
	.mt-250{
		margin-top:250px;
	}
}

@media (min-width: 992px) { 

}

@media (min-width: 1200px) { 

}
/*******************
*	State classes
*   The following are modifier classes that have different actions depending on the target class.
*	.-active
*	.-animated
*******************/

/*******************
*	Modifier classes
*******************/
.-bg__gold{
	background-color:#D1BA9C;
}
.-bg__bleen{
	background-color:#00b2a9;
}
.-bg__cherry{
	background-color:#992C33;
}
.-bg__anthracite{
	background-color:#1C1C1C;
}
.-bg__blue{
	background-color:#053BB1;
}

/*******************
*	Hero slider
********************/
.hero .owl-carousel{
	max-width: 100%;
	margin:0 auto;
	margin-bottom:20px;
}

.hero__bg{
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 70vh;
	background-color: #18BCBF;
	top: 0;
	z-index: -1;
}

#heroTitle, #heroTitle2{
	height:103px;
	background-position:top center;
	background-size:contain;
	text-align:center;
}

#heroTitle{
	margin-top:25%;
}

.slider__pills__list{
	list-style: none;
	text-align:center;
	padding-left:0;
}

.slider__pills__list li{
	display: inline-block;
}

.slider__pills__list li a{
	display:block;
	width:20px;
	height:20px;
	border:1px solid #fff;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	-o-border-radius:50%;
	border-radius:50%;
	margin-right:10px;
}

.slider__pills__list li.-active a, .slider__pills__list li a:active,.slider__pills__list li a:hover{
	width: 30px;
    height: 30px;
    position: relative;
    top: 4px;
	margin-top: -4px;
	margin-left: -4px;
}

.hero__bg__circle{
	position: absolute;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	-o-border-radius:50%;
	border-radius: 50%;
	transition: all 3s;
}

.circle__lg{
	width: 120vw;
    height: 120vw;
    top: -87px;
   	right: -138px;
	box-shadow: -1px 1px 5px rgba(0,0,0,0.2);
}
.circle__lg.-animated{
	transform: scale(10);
	top: -228px;
	right: -111px;
}

.circle__sm{
	width: 30vw;
	height: 30vw;
	bottom: -219px;
	left: -111px;
	
}
.circle__sm.-animated{
	transform: scale(10);
	bottom: -219px;
	left: -111px;
	
}
.hero__bg img{
			width: 150vw;
			float: right;
			margin-right: -20vw;
			opacity: 1;
			-webkit-transform:scale(1);
			-moz-transform:scale(1);
			-ms-transform:scale(1);
			-o-transform:scale(1);
			transform: scale(1);
			transition: all 1.5s cubic-bezier(.17,.67,.35,1.01);
			
		}
.hero__bg img.-animated {
	opacity: 0;
	-webkit-transform:scale(5);
	-moz-transform:scale(5);
	-ms-transform:scale(5);
	-o-transform:scale(5);
	transform:scale(5);

}
/**** HERO SLIDER MEDIA QUERIES ****/

@media (min-width: 576px) { 
	.hero__bg img{
		width: 150vw;
		margin-right: -20vw;
	}
}
@media (min-width: 768px) { 
	.hero .owl-carousel{
		max-width: 400px;
		margin-left:auto;
		margin-right:auto;
	}
	.circle__lg{
		width: 71vw;
		height: 71vw;
		top: -228px;
		right: -111px;
	}
	.circle__lg.-animated{
		transform: scale(10);
		top: -228px;
		right: -111px;
	}
	.hero__bg img{
		width: 100vw;
		margin-right: -20vw;
	}
}

@media (min-width: 992px) { 
	.circle__lg{
		width: 41vw;
		height: 41vw;
		top: -228px;
		right: -111px;
	}
	.hero__bg img{
		width: 58vw;
		margin-right: 6%;
	}
}

@media (min-width: 1200px) { 
	.hero__bg img{
		width: 48%;
		margin-right: 9%;
		min-width: 48%;
	}
}
/*******************
*	Picto section
********************/

.picto__section{
	margin:40px 0 0 0;
}

/**** PICTO SECTION MEDIA QUERIES ****/

@media (min-width: 768px) { 
	.picto__section{
		padding:50px 0;
	}

}


/*******************
*	TWO COL section
********************/
.-left__img .two__section_desc,
.-right__img .two__section_desc{
		width: 80%;
		margin: 40px auto;
		margin-bottom: 70px;
	}
	

@media (min-width: 768px) { 
	.-left__img .two__section_desc{
		width: 65%;
		margin-left: 10%;
	}
	.-right__img .two__section_desc{
		width: 65%;
		margin-right: 10%;
		float:right;
	}
}