:root {
	--main-turqoise-color: #269ba3;
	--main-turqoise-light-color: #7ebcbc;
	--main-turqoise-dark-color: #076363;
	--main-orange-color: #f08146;
	--main-orange-light-color: #f9b295;
	--main-orange-dark-color: #bc4f24;
	--main-blue-color: #1f2c52;
	--main-blue-light-color: #5c6a93;
	--main-blue-dark-color: #0c152b;
	--light-background: #ebffff;
}
/* dosis-200 - latin */
@font-face {
	font-family: 'Dosis';
	font-style: normal;
	font-weight: 200;
	src: url("../fonts/dosis-v27-latin-200-031e125c210a7d17ea7782700856276c.eot"); /* IE9 Compat Modes */
	src: local(''),
		 url("../fonts/dosis-v27-latin-200-031e125c210a7d17ea7782700856276c.eot") format('embedded-opentype'), /* IE6-IE8 */
		 url("../fonts/dosis-v27-latin-200-09cbf989543e7401c319b63c30a85393.woff2") format('woff2'), /* Super Modern Browsers */
		 url("../fonts/dosis-v27-latin-200-76ebbd78b4b35ec9d9591414e9133c4f.woff") format('woff'), /* Modern Browsers */
		 url("../fonts/dosis-v27-latin-200-3ee51ecdae875c579e329f753757731c.ttf") format('truetype'), /* Safari, Android, iOS */
		 url("../fonts/dosis-v27-latin-200-446ea63bf53fb43d519fb714d41dac1c.svg") format('svg'); /* Legacy iOS */
  }
/* dosis-regular - latin */
@font-face {
	font-family: 'Dosis';
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/dosis-v27-latin-regular-e6ee2f5e32652f6d9c39087c902039f7.eot"); /* IE9 Compat Modes */
	src: local(''),
		 url("../fonts/dosis-v27-latin-regular-e6ee2f5e32652f6d9c39087c902039f7.eot") format('embedded-opentype'), /* IE6-IE8 */
		 url("../fonts/dosis-v27-latin-regular-d809ca4c31e9c62111bdca7660e92582.woff2") format('woff2'), /* Super Modern Browsers */
		 url("../fonts/dosis-v27-latin-regular-fd2049ee03099a3e9354350bd73d689f.woff") format('woff'), /* Modern Browsers */
		 url("../fonts/dosis-v27-latin-regular-c438cf80edf015de451c8fc4195a164d.ttf") format('truetype'), /* Safari, Android, iOS */
		 url("../fonts/dosis-v27-latin-regular-1fb79ef5f80122d548b49c9ad8591bd9.svg") format('svg'); /* Legacy iOS */
  }

/* josefin-sans-regular - latin */
@font-face {
	font-family: 'Josefin Sans';
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/josefin-sans-v25-latin-regular-965f88264ae8ca76b8f206354b7b4d8a.eot"); /* IE9 Compat Modes */
	src: local(''),
		 url("../fonts/josefin-sans-v25-latin-regular-965f88264ae8ca76b8f206354b7b4d8a.eot") format('embedded-opentype'), /* IE6-IE8 */
		 url("../fonts/josefin-sans-v25-latin-regular-8fcb2026e08712d1578c4e20d4343632.woff2") format('woff2'), /* Super Modern Browsers */
		 url("../fonts/josefin-sans-v25-latin-regular-f2c56b13fcbfd32121ecb4d071407b85.woff") format('woff'), /* Modern Browsers */
		 url("../fonts/josefin-sans-v25-latin-regular-ca91d97822bea82a9b4e4368913a2c51.ttf") format('truetype'), /* Safari, Android, iOS */
		 url("../fonts/josefin-sans-v25-latin-regular-ad50177227bdd92870153aa2824959f8.svg") format('svg'); /* Legacy iOS */
  }
  /* josefin-sans-700 - latin */
  @font-face {
	font-family: 'Josefin Sans';
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/josefin-sans-v25-latin-700-157615b48ec2b5eda20891d28c910dbd.eot"); /* IE9 Compat Modes */
	src: local(''),
		 url("../fonts/josefin-sans-v25-latin-700-157615b48ec2b5eda20891d28c910dbd.eot") format('embedded-opentype'), /* IE6-IE8 */
		 url("../fonts/josefin-sans-v25-latin-700-e69c615d9c48d81c4b73ebcdbaead87d.woff2") format('woff2'), /* Super Modern Browsers */
		 url("../fonts/josefin-sans-v25-latin-700-6d86095f43e33bfa3f7591b84572d988.woff") format('woff'), /* Modern Browsers */
		 url("../fonts/josefin-sans-v25-latin-700-11ca5805031c1584b2f2b1610f62348f.ttf") format('truetype'), /* Safari, Android, iOS */
		 url("../fonts/josefin-sans-v25-latin-700-28a4423473ce18cebd95f27af60c8b6a.svg") format('svg'); /* Legacy iOS */
  }

a{
	color: var(--main-turqoise-color);
	text-decoration: none;
}


header{
	background-color:var(--main-blue-color);
	color:white;
}

header a{
	color:white;
}

header a:hover{
	color:var(--main-orange-color);
}

.navbar{
	height:100px;
}

#navbarSupportedContent{
	background-color: var(--main-blue-color);
}

.navbar-brand{
	background-image: url("../images/buttonHop_logo-724ee7850b28ce8150651f9270e94edb.svg");
	background-repeat: no-repeat;
	text-indent:-3000px;
	width:250px;
	height:100px;
	background-position: center left;
}

.nav-link{
	cursor: pointer;
}

h1{
	font-family: "Josefin Sans";
	text-transform: uppercase;
	text-align:center;
	font-size:2rem;
}
h1 span{
	font-size:1.2rem;
}

h2{
	font-family: "Josefin Sans";
	font-size:1.5rem;
	text-align:center;
	padding-top:20px;
	text-transform: uppercase;
	color:var(--main-blue-color);
}

h3{
	font-family: "Josefin Sans";
	font-size:1.2rem;
	padding-top:20px;
	text-transform: uppercase;
	color:var(--main-blue-color);
}

.subtitle{
	font-family: "Dosis";
	font-size:1.5rem;
}

hr{
	width:30px;
	margin-left:auto;
	margin-right:auto;
	height: 0px;
    border: none;
	opacity: 1;
}

.blueSeparator
{
	border-top: 5px solid var(--main-blue-color);
}

.turquoiseSeparator
{
	border-top: 5px solid var(--main-turqoise-color);
}

.orangeSeparator
{
	border-top: 5px solid var(--main-orange-color);
}

.whiteSeparator
{
	border-top: 5px solid white;
}

.smallTurquoiseSeparator
{
	border-top: 2px solid var(--main-turqoise-color);
	margin-left:0;
}

.btnOrange{
	background-color:var(--main-orange-color);
	font-family: "Dosis";
	color:white;
	font-weight: 200;
	border-radius: 0;
	padding-left:40px;
	padding-right:40px;
	font-size:1.2rem;
	cursor:pointer;
	font-weight: bold;
}

.btnOrange:hover{
	background-color: var(--main-orange-dark-color);
	color:white;
}

.btnTurquoise{
	background-color:var(--main-turqoise-color);
	font-family: "Dosis";
	color:white;
	font-weight: 200;
	border-radius: 0;
	padding-left:40px;
	padding-right:40px;
	font-size:1.2rem;
	border:0;
	cursor:pointer;
}
.btnTurquoise:hover{
	background-color: var(--main-turqoise-dark-color);
	color:white;
}

.btnClear{
	background-color:transparent;
	border:1px solid var(--main-turqoise-color);
	font-family: "Dosis";
	color:var(--main-turqoise-color);
	font-weight: 200;
	border-radius: 0;
	padding-left:40px;
	padding-right:40px;
	font-size:1.2rem;
	cursor:pointer;
}

.btnClear:hover{
	background-color: var(--main-turqoise-color);
	color:white;
}

.rightDots{
	background-image: url("../images/dotsRight-b27e001188b0bda51be59dec3b299c1a.webp");
	background-repeat:no-repeat;
	background-position: left calc(95% + 300px) top;
}

.leftDots{
	background-image: url("../images/dotsLeft-5383ef8f2b9e5dc7bac28f8c85e3ac25.webp");
	background-repeat:no-repeat;
	background-position: bottom left;
}

.barDots{
	background-image: url("../images/dotsBar-7665aa0f8a7b412f1f9c5933b7027ee6.webp");
	background-repeat:repeat-x;
	height:31px;
}


.darkblueContainer
{
	background-color: var(--main-blue-color);
	-webkit-box-shadow: 0px 7px 12px 0px rgba(0,0,0,0.26); 
	box-shadow: 0px 7px 12px 0px rgba(0,0,0,0.26);
}
.whiteContainer, .turquoiseContainer, .orangeContainer, .rightDots, .leftDots
{
	padding-top:8vh;
	padding-bottom:8vh;
}

.whiteContainer .row{
	margin-left:0;
	margin-right:0;
}

.whiteContainer img{
	width:100%;
}

.whiteContainerContent{
	margin-top:6vh;
}

.whiteContainerRight .whiteContainerContent{
	padding-left:5vh;
	padding-right:25vh;
}

.whiteContainerLeft .whiteContainerContent{
	padding-left:25vh;
	padding-right:5vh;
}

.whiteContainerContent p{
	margin-top:35px;
	margin-bottom:10px;
}

.darkblueContainer h2{
	color:white;
}

.turquoiseContainer{
	background-color:var(--main-turqoise-color);
}

.orangeContainer{
	background-color:var(--main-orange-color);
}
.orangeContainer h2, .orangeContainer p{
	color:white;
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
}


#bookAppointment{
	background: var(--main-blue-color);
	background: linear-gradient(90deg, var(--main-turqoise-color) 0%, var(--main-blue-color) 80%);
	padding-top:6vh;
	padding-bottom:6vh;
}

#bookAppointment p{
	text-align: center;
	padding-bottom:0;
	margin-bottom:0;
}

#bookAppointment p a{
	font-size: 1.5rem;
	text-transform: uppercase;
}

#faq{
	background-color: var(--light-background);
	padding-top:6vh;
	padding-bottom:6vh;
}

#faq h3{
	font-size:0.9rem;
	text-transform: uppercase;
	font-family: "Josefin Sans";
}

#faq p{
	/*text-align: center;*/
}

#links {
	padding-top:6vh;
	padding-bottom:6vh;
}

#links h3{
	font-size:0.9rem;
	text-transform: uppercase;
}

#links ul{
	list-style-type: none;
	padding-left:0;
	font-size:0.8rem;
}

#credits{
	border-top:1px solid #00000042;
}

#credits p{
	text-align: center;
	font-family: sans-serif;
	font-size:0.7rem;
	padding-top:12px;
}

.innerMainBanner{
	padding-top:5vh;
	padding-bottom:5vh;
	background-color:var(--main-blue-color);
}

.innerMainBanner .content{
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
	background-color:white;
	padding-left:40px;
	padding-right:40px;
	padding-top:40px;
	padding-bottom: 10px;
	text-align:center;
	-webkit-box-shadow: 2px 5px 11px 1px rgba(0,0,0,0.51); 
	box-shadow: 2px 5px 11px 1px rgba(0,0,0,0.51);
}
.innerMainBanner h1{
	text-transform: uppercase;
	font-size:2.1rem;
}
.innerMainBanner p{
	color:var(--main-orange-color);
	font-size:1rem;
}

.innerSecondaryBanner{
	padding-top:3vh;
	padding-bottom:3vh;
	background-color:var(--main-blue-color);
}

.innerSecondaryBanner .content{
	max-width:540px;
	margin-left:auto;
	margin-right:auto;
	background-color:white;
	padding-left:30px;
	padding-right:30px;
	padding-top:20px;
	padding-bottom: 10px;
	text-align:center;
	-webkit-box-shadow: 2px 5px 11px 1px rgba(0,0,0,0.51); 
	box-shadow: 2px 5px 11px 1px rgba(0,0,0,0.51);
}
.innerSecondaryBanner h3{
	text-transform: uppercase;
	font-size:1.5rem;
	color:var(--main-turqoise-color);
	font-family: "Josefin Sans";
}
.innerSecondaryBanner p{
	color:black;
	font-size:1rem;
}

/* Home Page */

#homeMainBanner
{
	background: var(--main-blue-color);
	background: linear-gradient(90deg, var(--main-turqoise-color) 0%, var(--main-blue-color) 80%);
	min-height:500px;
	color:white;
	text-align:center;
	padding-top: 5vh;
	padding-bottom: 5vh;
}

#homeMainBanner img{
	max-width:100%;
}

#profits{
	text-align:center;
	padding-top:5vh;
}

.missionsCol .col-lg:nth-child(even){
	background-color:var(--light-background);
}

.missionsCol .innerBox{
	padding-top: 10vh;
	margin:5px;
}

#philippeBox{
	background-image: url("../images/jemappellephilippe-5e873e63262b94217a040ced5da3d65d.webp");
	background-position: left calc(50% - 600px) bottom;
	background-repeat: no-repeat;
	min-height:601px;
	color:white;
}
#philippeBox a{
	color:white;
}
#philippeAstuce{
	border: 3px solid;
	border-image:  linear-gradient(145deg, rgba(240, 130, 70, 0) 10.5%, var(--main-orange-color) 12%) 10;
	margin-left:300px;
	margin-right:100px;
	margin-top:70px;
	min-height:150px;
	padding-left:100px;
	padding-top:30px;
	padding-right:20px;
	font-size: 1.2rem;
}

@media screen and (max-width: 1500px){
	#philippeBox{
		background-image: none;
	}

	#philippeAstuceContainer{
		background-image: url("../images/jemappellephilippe-5e873e63262b94217a040ced5da3d65d.webp");
		background-position: left bottom;
		min-height:601px;
		background-repeat: no-repeat;
		padding-top:150px;
		padding-bottom: 230px;
	}

	#philippeAstuce{
		margin-left:500px;
		border-color:var(--main-orange-color);
		border-image: none;
		margin-top:0px;
		padding:30px;
		
	}
}

@media screen and (max-width: 992px){
	#philippeAstuceContainer{
		background-position: center bottom;
		background-size: contain;
		padding-bottom:500px;
		padding-top:50px;
	}

	#philippeAstuce{
		margin-left:0px;
		margin-right:0px;
		border-color:var(--main-orange-color);
		border-image: none;
		margin-top:0px;
		padding:30px;
		
	}
}

#howItWorks h2, #howItWorks p{
	text-align: left !important;
}

#howItWorks hr{
	margin-left:0;
}

#solutions{
	background-image: url("../images/solutionsBackground-a1bdde5c94eee13c82f99b14caed7cf5.webp");
	background-size: cover;
	padding-top:15vh;
	padding-bottom:15vh;
}

#solutions .solution{
	background-color:white;
	padding:3rem 2rem;
	text-align: center;
	-webkit-box-shadow: 2px 5px 11px 1px rgba(0,0,0,0.51); 
	box-shadow: 2px 5px 11px 1px rgba(0,0,0,0.51);
}

.logosContainer{
	display:flex;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	justify-content: center;
}
.logoItem{
	 background-color:white;
	 height:100px;
	 width:180px;
	 margin:10px;
	 padding:10px;
	 display: flex;
	 justify-content: center;
	 align-items: center;
}

.logoItem img{
	max-width:100%;
	max-height: 100%;
}

#ourBelovedCustomers{
	background-image: url("../images/buttonHand-81c7594904edd74e7bade64551b953ee.webp");
	background-position: -200px -50px;
	min-height:410px;
	background-repeat: no-repeat;
}

#ourBelovedCustomersContent{
	color:white;
	text-align:center;
	padding-left:350px;
	max-width:1200px;
}

#ourBelovedCustomersContent h2, #ourBelovedCustomersContent p{
	color:white;
	text-align:left;
}

#ourBelovedCustomersContent hr{
	margin-left:0px;
}

@media screen and (max-width: 992px){
	#ourBelovedCustomers{
		background-image: url("../images/buttonHand-81c7594904edd74e7bade64551b953ee.webp");
		background-position: top center;
	}
	
	#ourBelovedCustomersContent{
		padding-left:0px;
		padding-top:410px;
	}	
}

#faqContainer p{
	text-align:center;
}

#faqContent{
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
}

details{
	font-family: "Josefin Sans";
	font-size:1.0rem;
}

summary{
	font-size:1.2rem;
}

details[open] summary{
	color:var(--main-turqoise-color);
	
}

details[open]{
	margin-bottom:10px;
}

#emailFormInput{
	border:1px solid var(--main-turqoise-color);
	padding-top:3px;
	padding-bottom:2px;
	padding-left:5px;
}

.link404{
	display:block;
	background-color: var(--light-background);
	color:var(--main-blue-color);
	border: 2px solid var(--main-blue-color);
	line-height:30px;
	margin-top:20px;
	padding:5px 15px;
	border-radius: 15px;
}

.link404right{

}

#headerText
{
	margin-left:8%;
}

@media screen and (max-width: 992px){
	.navbar-brand{
		height:52px;
	}

	#headerText	{
		margin-left:0%;
	}

	.whiteContainerRight .whiteContainerContent {
		padding-right:5vh;
	}
	.whiteContainerLeft .whiteContainerContent{
		padding-left:5vh;
	}
	.logosContainer{
		flex-direction: column;
	}
	.logoItem{
		margin-left: auto;
    	margin-right: auto;
	}
	#navbarSupportedContent{
	    margin-left: -13px;
    margin-right: -13px !important;
    padding: 13px;	
	}
}

#buttonhopDemoLeftSide, #buttonhopDemoRightSide{
	width:25%;
	float:left;
}
#buttonhopDemoCenter{
	width:50%;
	float:left;
}
.buttonKeyDesc{
	height:150px;
	opacity:0;
	color:black;
	transition: opacity 0.8s;
}
#buttonhopDemoLeftSide .buttonKeyDesc .buttonKeyDescContainer{
	border-top-left-radius:15px;
	border-bottom-left-radius:15px;
	background-color:white;
	height:100%;
	width:100%;
}
#buttonhopDemoRightSide .buttonKeyDesc .buttonKeyDescContainer{
	border-top-right-radius:15px;
	border-bottom-right-radius:15px;
	background-color:white;
	height:100%;
	width:100%;
}
#buttonhopDemoCenter img{
	width:100%;
}
.buttonKeyDesc.buttonKeyDescLoaded{
	opacity:1;
}
.buttonKeyDescFlipper{
	perspective: 1000px;
	height:100%;
}
 .buttonKeyDesc.hover .buttonKeyDescFlipper { /*.buttonKeyDesc:hover .buttonKeyDescFlipper,*/
	transform: rotateX(180deg);
}

.buttonKeyDescFlipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.buttonKeyDescContainer.front, .buttonKeyDescContainer.back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.buttonKeyDescContainer.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateX(0deg);
}

/* back, initially hidden pane */
.buttonKeyDescContainer.back {
	transform: rotateX(180deg);
}
.buttonKeyTitle{
	text-transform:uppercase;
	color:gray;
	font-size:11px;
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-top:6px;
	padding-left:12px;
	text-align:left;
	margin-bottom:3px;
}
.buttonKeyDetails{
	font-family: sans-serif;
	text-align:left;
	padding-left:12px;
	padding-right:12px;
}
.buttonKeyIcon{
	float:left;
	width:20%;
	margin-left:12px;
	margin-right:12px;
	margin-top:6px;
}
.verytinyButtonDemo .buttonKeyTitle{
	font-size:9px;
	margin-bottom:3px;
}
.verytinyButtonDemo .buttonKeyDetails{
	font-size:11px;
	padding-right:6px;
}
.tinyButtonDemo .buttonKeyTitle{
	font-size:10px;
	margin-bottom:3px;
}
.tinyButtonDemo .buttonKeyDetails{
	font-size:12px;
	padding-right:6px;
}