/*
	Theme Name: CCVPN 2023
	Text Domain: my-ccvpn
	Theme URI: http://html5blank.com
	Description: HTML5 Blank WordPress Theme
	Version: 1.4.3
	Author: Todd Motto (@toddmotto)
	Author URI: http://toddmotto.com
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */



*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/* Styling Wide and Full-Width Gutenberg Blocks in WordPress */
body {
     overflow-x:  hidden;
}

body {
	font-family: 'TT Hoves';
	font-weight: 400;
	font-size: 16px;
	color: #000000;
	line-height: 1.5;
	background-color: #ffffff;
}


b, strong{
	font-family: 'TT Hoves Pro Trial Medium';
	font-weight: 400 !important;
}

b, strong{font-weight: 400 !important;}

b, strong{font-weight: normal !important;}


/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}


.sidenav li.nolink > a {
cursor: default;
}


@media screen and (min-width: 0px) {
   html{font-size: 16px;}
}


@media screen and (min-width: 600px) {
   html{font-size: 16px;}
}


.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
	height: auto;
}



@media screen and (max-width: 400px) {

.container-partenaires img {
	max-width: 50%;
	vertical-align:bottom;
	height: auto;
}

}


a {
	color:#0085ca;
	text-decoration:none;
}
a:hover {
	color:#0085ca;
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}



/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/




/* wrapper */
.wrapper {
	max-width:1280px;
	width:95%;
	margin:0 auto;
	position:relative;
}

.wrapper-large {
	max-width:2400px;
	width:95%;
	margin:0 auto;
	position:relative;
}


/* header */
.header {

}
/* logo */
.logo {

}
.logo-img {

}





/* nav */
nav{
-webkit-box-shadow: none;
box-shadow: none;
}




/* Styling Wide and Full-Width Gutenberg Blocks in WordPress */


     .alignwide, .alignfull {
          width:  100vw;
          max-width:  100vw;
          margin-left:  calc(50% - 50vw);
     }


@media screen and (max-width: 480px) {
	 .wide-on-small {
		   width:  100vw;
		   max-width:  100vw;
		   margin-left:  calc(50% - 50vw);
	  }
  }

@media screen and (max-width: 1007px) {
.custom-entete-block.alignwide{ 
	width: 100%;
	max-width: 100%;
	margin-left: auto
}
  }

/* hr.wp-block-separator
   {border-top: 1px solid rgba(205, 205, 205, 1) !important;
	height: 0px !important;
	overflow: hidden !important;
	border-bottom: none !important;
	border-left: none !important;
	border-right: none !important;
	width: 200px;
	padding-bottom: 20px;
} */







nav{background-color: #ffffff}

nav ul a{
	font-weight: 400;
	color: #000000;
	text-transform: none;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 0 15px
}


nav ul a.dropdown-trigger {padding: 0 4px 0 12px}


nav ul a i.right{margin-left: 0;}

nav.woocommerce-MyAccount-navigation ul li {float: none;}

nav.woocommerce-MyAccount-navigation ul  {padding-left: 0px;}
nav.woocommerce-MyAccount-navigation ul li a {padding: 0px}

nav.woocommerce-MyAccount-navigation a:hover {
	background-color: #ffffff;
	color: #000000  /* This is a light blue color. Adjust as needed. */

}


	.woocommerce-MyAccount-navigation-link.is-active a {
		text-decoration: underline;
	}



nav a:hover {
	background-color: #5EC9FA;  /* This is a light blue color. Adjust as needed. */
	color: #ffffff;  /* Keeps the text color black upon hover */
	border-radius: 60px;  /* Gives the rounded effect on the background */
	/* padding: 0px 15px;   */
	transition: background-color 0.3s ease; 
}





nav a.sidenav-trigger:hover {
	background-color: inherit;
	color: #141414;
	border-radius: inherit;
	/* whatever other overrides you want */
}







.navbar-fixed{
	/* margin-top: 30px; */
	margin-bottom: 8px;
z-index: 1}



nav .nav-wrapper{
	margin-top: 20px;
	margin-bottom: 20px;
}



img.nav-logo{vertical-align: middle}

@media screen and (max-width: 600px) {
	
	img.nav-logo{vertical-align: middle;
		width: 150px;
		margin-left: 15px;
	
	}

}



a.sidenav-trigger{color: #3b3c41;}


ul.topmenu{margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;}


.topmenu-extra a .fab{font-size: 18px;
	margin-left: 6px;
	margin-right: 6px;
}

nav i.material-icons.mysearch{
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
	}

.topmenu-extra{color: #3b3c41; margin-left: 10px;}

.topmenu-extra a{color: #3b3c41;}



.nav-inner-wrapper{max-width: 1280px;
	width: 95%;
	margin: 0 auto;
}

.nav-sep{font-size: 19px;
	display: inline-block;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-left: 10px;
	margin-right: 10px;
}


/* Sous menu */



ul.dropdown-content{background-color: #ffffff;
	padding: 0;
	margin: 0;
	box-shadow: none;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	margin-top: 55px !important;
}



.dropdown-content {
  top: -20px;
}

.dropdown-content li > a, .dropdown-content li > span{ font-size: 14px;
	color: #000000
}


.dropdown-content li:hover, .dropdown-content li.active{background-color: transparent !important;}


.select-dropdown.dropdown-content li:hover{background-color: rgba(0, 0, 0, 0.04) !important;}
.select-wrapper input.select-dropdown:focus{border-bottom: 1px solid #5EC9FA;}

.dropdown-content li a:hover {
	background-color: #5EC9FA;  /* This is a light blue color. Adjust as needed. */
	color: #ffffff;  /* Keeps the text color black upon hover */
	border-radius: 60px;  /* Gives the rounded effect on the background */
	
	transition: background-color 0.3s ease; 

}


.dropdown-content li > a, .dropdown-content li > span{line-height: 10px;
	margin-top: 5px;
}


/* Menu nav side responsive */

.sidenav li > a{
	font-size: 15px;
	padding: 0px 11px;
	text-transform: uppercase;
	height: 36px;
	line-height: 36px;
}

.sidenav li > a > i{display: inline-block !important;
	float: none;
}

.sidenav li > a:hover, .sidenav-close a:hover{background-color: transparent;
	color: #000000;
	
}


.wrapper-logo-menu > a:hover, .sidenav-close a:hover {background-color: transparent !important
}

.nav-inner-wrapper > a img:hover {background-color: #fff !important; }

.nav-inner-wrapper > a.logoresp:hover {background-color: #fff !important; }



@media only screen and (max-width: 1112px) {
.logoresp img{width: 120px;}
}

@media only screen and (min-width: 1px) {
.logoresp img{width: 180px;}
}

@media only screen and (min-width: 1008px) {
.logoresp img{width: 120px;}
}


@media only screen and (min-width: 1113px) {
.logoresp img{width: 220px;}
}



ul.children{margin-left: 10px;
	padding-left: 0;
}

.sidenav ul.children li > a{text-transform: none; padding-left: 10px;}

a.sidenav-close{color: #000000; padding-left: 16px;}

.sidenav{background-color: #fcfcfc;
	width: 100%;
	max-width: 340px;
}


@media only screen and (min-width:530px) {
	.sidenav{max-width: 480px;}
	
}


.sidenav-ccvpn a img{width: 150px;}

ul.sub-menu li > a{
/* 	padding-left: 70px; */
	text-transform: none;
	height: 36px;
	line-height: 36px;
	}


ul.sub-menu {margin-bottom: 20px;}

.wrapper-logo-menu{padding: 0px 0px 25px 26px;}

.social-side{padding-left: 35px;
	margin-top: 10px;
}



.sidenav li.nolink > a{cursor: default}

.social-side.nopad{padding-left: 0;}



.social-side a:hover{background-color: initial;}

ul.social-sidemenu{padding-left: 4px;}




ul.social-sidemenu li > a > i{
	color: #3b3c41; 
	margin: 0 15px 0 0;
	}

ul.social-sidemenu{line-height: 12px;}


ul.social-sidemenu li{display: inline-block;
/* 	padding: inherit; */
	line-height: inherit;
	font-size: inherit;
}

.courriel-menu{ padding: 0 0 0 22px;}
.courriel-menu a:hover{background-color: initial;}
.courriel-menu a{color: #3b3c41; font-size: 12px;}
.courriel-menu a:hover{color: #3b3c41;}

a.icon-footer{font-size: 9px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-left: 4px;
}

i.fab.fa-facebook-f.fa-stack-1x{font-size: 0.95em;}
i.fab.fa-instagram.fa-stack-1x{font-size: 1.1em;}
i.fab.fa-twitter.fa-stack-1x{font-size: 95%;}
i.far.fa-envelope.fa-stack-1x{font-size: 1.1em;}
i.fas.fa-paper-plane.fa-stack-1x{font-size: 0.9em; margin-left: -1px;}
i.fab.fa-linkedin-in.fa-stack-1x{
	margin-top: -1px;
font-size: 1em;
}

a.icon-footer span.fa-stack.fa-2x{font-size: 1.9em}

.fa-stack{width: 2em !important}




nav {
    
    height: initial;
}


nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i { 
	height: initial;
	line-height: 40px;
}





/* sidebar */
.sidebar {

}
/* footer */


.lien-termes{text-transform: uppercase;
	letter-spacing: 1px;
}


.footer {
	background-color: #5EC9FA;
	color: #ffffff;
	padding: 20px 0px;
	font-size: 12px;
}
	


address{font-style: normal; 
	font-size: 12px;
}

@media only screen and (max-width:400px) {
	.footer {font-size: 14px;}
	address {font-size: 14px;}
	
}



/* Form email */

.footer .input-field > label{color: rgba(255, 255, 255, 0.631);
	font-size: 12px;
}
.footer input[type=email]:not(.browser-default){
	border-bottom: 1px solid rgba(255, 255, 255, 0.796);
	font-size: 14px;
	height: 2.5rem;
}
.footer input[type=email]:not(.browser-default).validate + label{
	font-size: 14px;
}
.footer input[type=email]:not(.browser-default):focus:not([readonly]) + label {color: #ffffff}
.footer input[type=email]:not(.browser-default):focus:not([readonly]) {border-bottom: 1px solid rgba(255, 255, 255, 0.796)}

/* Search Form Styles */

/* Positioning and General Styles */
/* Positioning and General Styles */
.search.input-field {
	position: relative;
}

.search.input-field .search-input {
	border-bottom: 1px solid white !important;
	box-shadow: 0 1px 0 0 white !important;
	padding-right: 10px; /* Prevent text overlap with icon */
	background-color: transparent !important; /* Background remains transparent on focus */
}




/* Search Icon Button Styles */
.search.input-field .search-icon-btn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
}

/* Search Icon Styles */
.search.input-field .search-icon-btn .fa-thin.fa-magnifying-glass {
	font-size: 18px;
	color: white; /* Set the color for the icon */
}

/* Text and Placeholder Styles */
.search.input-field .search-input::placeholder {
	color: rgba(255, 255, 255, 0.7); /* White text with half opacity */
}



.search.input-field input[type=search]:focus:not(.browser-default){
	color: white; /* Text color becomes white when focused */
}





.pub-footer img{max-width: 250px}





.footer a{color: #ffffff;}

.footer-menu {margin-top: 30px;}
.footer-menu a{ display: inline-block; margin-right: 10px;}


.social-footer{font-size: 16px; margin-top: 24px;}

.social-footer a{margin-left: 4px;
	margin-right: 4px;
	color: #283EF0
}


@media only screen and (min-width:680px) {
	.footer {padding: 50px 0px 30px 0px}
}



p.contact-footer{font-size: 12px;
	font-weight: 300;
	margin-top: 40px;
}


.btn-large:hover{color: #fff;}

/*------------------------------------*\
    Parallax
\*------------------------------------*/

 .parallax-container {
      height: 110px;
    }

@media only screen and (min-width:321px) {

  .parallax-container {
      height: 150px;
    }
    
}





@media only screen and (min-width:680px) {

  .parallax-container {
      height: 250px;
    }
    
}



@media only screen and (min-width:880px) {

  .parallax-container {
      height: 460px;
    }
    
}




/*------------------------------------*\
    Materialize modifications
\*------------------------------------*/


input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]){
	border-bottom: 1px solid #000000;
-webkit-box-shadow: 0 1px 0 0 #000000;
box-shadow: 0 1px 0 0 #000000;
}




.tg-search-holder input:not([type]):focus:not([readonly]), 
.tg-search-holder input[type=text]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=password]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=email]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=url]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=time]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=date]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=datetime]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=datetime-local]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=tel]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=number]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder input[type=search]:not(.browser-default):focus:not([readonly]), 
.tg-search-holder textarea.materialize-textarea:focus:not([readonly]){
	border-bottom: 0px solid #000000;
-webkit-box-shadow: 0 0px 0 0 #000000;
box-shadow: 0 0px 0 0 #000000;
}





/*------------------------------------*\
   collapsible
\*------------------------------------*/



ul.collapsible{list-style-type: none;
	padding-left: 0;
}


.collapsible {
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  margin: 0.5rem 0 1rem 0;
}

.collapsible-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
  padding: 1rem;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.collapsible-header:focus{outline: none;}

.collapsible-header i {
  width: 1.5rem;
  font-size: 24px;
  display: inline-block;
  text-align: center;
  margin-right: 1rem;
}

.collapsible-body {
  display: none;
  border-bottom: 1px solid #ddd;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 2rem;
}


.collapsible {
border: none;
box-shadow: none;
-webkit-box-shadow: none;}


.collapsible-header {
font-size: 32px;
font-weight: 600 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: transparent;
color: #202124}





.collapsible-header.small {font-size: 24px;
	line-height: 1.2;
}


@media only screen and (max-width: 680px) { 
	.collapsible-header {font-size: 20px;
		padding: 1rem 0rem;
	}
	.collapsible-header i{margin-right: 0.8rem;}
	.collapsible-body img{display: none}
	.collapsible-body{padding: 1rem 0rem;}
	
}


.liens-ext a.btn{margin-bottom: 10px;}


.iconadd{
  display:inline-block ;
}
.iconremove{
  display:none !important;
}

li.active .collapsible-header .material-icons.iconadd{
  display: none;
}

li.active .collapsible-header .material-icons.iconremove{
  display: inline-block !important;
}


.collapsible li.disabled .collapsible-body {
    display: none !important; /*or using id of the app to avoid the use of !important*/
}

.collapsible li.disabled .collapsible-header {
    color: rgba(175, 175, 175, .7);
    
    pointer-events: none;
}




.collapsible li.disabled:hover{cursor: default;}

.collapsible-header small{font-size: 70%}






/*------------------------------------*\
    
\*------------------------------------*/


@media only screen and (min-width: 993px), all{
	
	.container{width: 80%;}
}




.container-footer {
  margin: 0 auto;
  max-width: 1480px;
  width: 90%;
}

@media only screen and (min-width: 601px) {
  .container-footer {
	width: 85%;
  }
}

@media only screen and (min-width: 993px) {
  .container-footer {
	width: 90%;
  }
}


.container-repertoire{width: 90%;
	margin: 0 auto;
}



/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/


.small{font-size: 80%}

p.lead{font-size: 24px;}



h1.hero-title{text-transform: none;
	text-shadow: 4px 2px 8px black;
	color: #000000;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;

}

@media only screen and (min-width:1px) {
	h1.hero-title{font-size: 18px}
}


@media only screen and (min-width:321px) {
	h1.hero-title{font-size: 21px}
}



@media only screen and (min-width:680px) {
	h1.hero-title{font-size: 36px}
}

@media only screen and (min-width:880px) {
	h1.hero-title{font-size: 48px}
}







h1 a, h1 a:hover {color: #000000}
h2 a, h2 a:hover {color: #000000}
h3 a, h3 a:hover {color: #000000}

h2{
	font-family: 'TT Hoves Pro Trial Medium';
	color: #000000;
	font-size: 28px;
/* 	text-transform: uppercase; */
	font-weight: 400;
}

@media screen and (min-width: 768px) {	
h2{
	font-family: 'TT Hoves Pro Trial Medium';
	color: #000000;
	font-size: 40px;
/* 	text-transform: uppercase; */
	
}
}


.footer h2{
	font-family: 'TT Hoves';
	color: #ffffff;
	font-size: 18px;
	font-weight: 400;
	margin-top: 0px;
}

@media screen and (min-width: 768px) {	
	.footer h2{
		font-family: 'TT Hoves';
		color: #ffffff;
		font-size: 24px;
		font-weight: 400;
		margin-top: 0px;
	}
	
}


@media only screen and (min-width:600px) {
	h2{font-size: 40px;}
}

@media only screen and (max-width:600px) {
	h2{margin-top: 1rem;}
}


@media only screen and (max-width:600px) {
   .home .wp-block-spacer{height: 30px !important}
}

@media only screen and (max-width:600px) {
.wp-block-spacer.hide-on-med-and-up{display: none !important}
}



h3.titre-3colonnes{font-size: 28px;}

@media only screen and (min-width:780px) {
	h3.titre-3colonnes{font-size: 21px;}
}

@media only screen and (min-width:1000px) {
	h3.titre-3colonnes{font-size: 28px;}
}




h3{
	color: #000000;
	font-size: 28px;
	font-weight: 400;
	line-height: 130%;
}



#flex-hero {
    height: 90%; 
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}




/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (min-width:320px) {

}
@media only screen and (min-width:480px) {

}
@media only screen and (min-width:768px) {

}
@media only screen and (min-width:1024px) {

}
@media only screen and (min-width:1140px) {

}
@media only screen and (min-width:1280px) {

}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
	   only screen and (min-resolution:144dpi) {

}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {

}
.bypostauthor {

}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}




@font-face {
	font-family: 'TT Hoves';
	src: local('TT Hoves Regular'), local('TT-Hoves-Regular'),
		url('TTHoves-Regular.woff2') format('woff2'),
		url('TTHoves-Regular.woff') format('woff'),
		url('TTHoves-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
  }
  
  
  
  @font-face {
  font-family: 'TT Hoves Pro Trial Regular';
  font-style: normal;
  font-weight: normal;
  src: local('TT Hoves Pro Trial Regular'), url('TT Hoves Pro Trial Regular.woff') format('woff');
  }
  
  
  


  @font-face {
  font-family: 'TT Hoves Pro Trial Medium';
  font-style: normal;
  font-weight: normal;
  src: local('TT Hoves Pro Trial Medium'), url('TT Hoves Pro Trial Medium.woff') format('woff');
  }


  @font-face {
  font-family: 'TT Hoves Pro Trial Medium Italic';
  font-style: normal;
  font-weight: normal;
  src: local('TT Hoves Pro Trial Medium Italic'), url('TT Hoves Pro Trial Medium Italic.woff') format('woff');
  }




	  h1{
		  font-family: 'TT Hoves Pro Trial Medium';
			color: #5EC9FA;
			font-size: 32px;
			text-transform: none;
			font-weight: 400;
			
		}	
	


@media screen and (min-width: 768px) {
	h1{
		font-family: 'TT Hoves Pro Trial Medium';
		  color: #5EC9FA;
		  font-size: 48px;
		  text-transform: none;
		  font-weight: 400;
		  
	  }	
  }
  
  
  

  
  
  
  @media only screen and (min-width:600px) {
	  h1{font-size: 42px;}
  }




@media screen and (min-width: 1008px) {
  h1{
	  font-family: 'TT Hoves Pro Trial Medium';
		color: #5EC9FA;
		font-size: 72px;
		text-transform: none;
		font-weight: 400;
		
	}	
}


/* Ajustement pattern Bloc photo + texte */
.col-padding-left{padding-left: 4%}

/* Ajustement pattern Texte 2 colonnes */
.colonne-droite-padding {padding-top: 10%}


@media only screen and (max-width:781px) {
.colonne-spacer{display: none}
}

/* Carousel */

/* .siema-carousel-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
} */

.siema-carousel-wrapper {
  width: 100vw;  /* 100% of the viewport width */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}


.siema-carousel {
  overflow: hidden;
  white-space: nowrap;
}




.slide {background-color: #ffffff;

}

.slide p {
  white-space: normal;
}

.slide h2{font-size: 24px;
	margin-top: 0px;
	margin-bottom: 0px;
	white-space: normal;
}

.slidehead {
	border-bottom: 1px solid #000000;
	width: 100%;
	padding: 0px 30px;
	height: 60px;
	display: flex;  /* This sets up the flex container */
	align-items: center;  /* Vertically center align items */
}

.slidehead-left {
	flex: 0 0 85%;  /* This ensures the div takes up 75% of the parent's width */
	vertical-align: super;
}

.vertical-line {
	width: 1px; 
	background-color: black;
	height: 100%; 
	flex: 0 0 1px;  /* This ensures the div doesn't grow or shrink and is 1px wide */
}

.slidehead-right {
	flex: 0 0 25%;  /* This ensures the div takes up 20% of the parent's width */
	display: flex;
	align-items: center;
	justify-content: center;  /* Horizontally center the image */
}


.slide .fa-circle-arrow-right{font-size: 32px;
	color: #000000;
	margin-top: 20px;
}

.slidebody{padding: 30px;}

.date-rounded{background-color: #5EC9FA;
	padding: 8px 15px;
	border-radius: 20px;	
	color: #ffffff;
	width: fit-content;
	margin: 10px 0px 20px 0px;
	font-size: 12px;
}

.calendar-button {
  position: absolute;
  top: 50%;
  left: -20px;  /* Adjust as needed */
  transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
  
}

.slide {
  width: 340px;
  height: auto;
  display: inline-block;
}


.carousel-arrow {
	position: absolute;
	top: -80px; /* Adjust this as needed */
	right: 10px;
	z-index: 10; /* Ensure arrows appear above other content */
	background-color: #5EC9FA; /* Optional: Adds a slight white background for visibility */
	border: none;
	cursor: pointer;
	color: #ffffff;
	margin-top: 20px;
	padding: 5px 7px;
}

.carousel-arrow-left {
	right: 60px; /* Adjust based on the size of your arrows and desired spacing */
}

.carousel-arrow-right {
	right: 20px; /* Adjust as needed */
}



/* Other CSS styles here */
.calendar-button {
  position: absolute;
  top: 50%;
  left: 0px; /* Adjust as needed */
  transform: translateY(-50%) rotate(-90deg);
  z-index: 1;
  color: #000000
  /* Additional styles like background, padding etc. */
}

/* Responsive styles for the slides */
@media (min-width: 1200px) {
  .siema-carousel-wrapper {
	padding-left: 150px; /* Empty space on the left */
  }
}

@media (max-width: 1199px) and (min-width: 768px) {
  /* Medium screen styles here */
  .siema-carousel-wrapper {
	  padding-left: 120px; /* Empty space on the left */
	}
}

@media (max-width: 767px) {
  /* Small screen styles here */
  .siema-carousel-wrapper {
	  padding-left: 20px; /* Empty space on the left */
	}
}



.fa-brands.fa-facebook-f{margin-right: 4px;
	vertical-align: top;
	margin-top: 2px
}
.fa-brands.fa-linkedin-in{font-size: 18px;}


/* Add your custom styles here */
/* Add your custom styles here */
.custom-hover:hover {
  border-bottom: 1px solid white !important;
  box-shadow: 0 1px 0 0 white !important;
}

.custom-hover:focus {
  border-bottom: 1px solid white !important;
  box-shadow: 0 1px 0 0 white !important;
}

.desjardins img{margin: 0 12px}

.no-margin-top{margin-top: 0px;}

.container-footer .row > .col:nth-child(1) {
 /* Adjust the value as per your requirement 
	/* padding-left: 0px; */
	
}


/* Custom breakpoint for medium screens */
@media only screen and (min-width: 700px) and (max-width: 850px) {
	.container-footer .col.m3  /*... add all medium-specific column classes ...*/ {
		width: 33%;
		margin-left: auto;
		left: auto;
		right: auto;
	}
}

/* Custom breakpoint for large screens */
@media only screen and (min-width: 851px) {
	.container-footer .col.l3  /*... add all medium-specific column classes ...*/ {
		width: 33%;
		margin-left: auto;
		left: auto;
		right: auto;
	}
}






/* custom-home-header */

/* custom-home-header */
#custom-home-header {
	position: relative;
	padding-top: 60px;
}

#custom-home-header.header-mobile {
	position: relative;
	padding-top: 10px;
}


#custom-home-header .blue-bg {
	background-color: #5EC9FA;
	position: absolute;
	top: -60px;  /* This assumes your navbar is 60px tall. Adjust as necessary */
	left: 0;
	width: 45%;
	height: calc(100% + 60px); /* Adjust this value if your navbar height is different */
	z-index: 2;  /* Higher z-index than .navbar-fixed */
}

#custom-home-header .blue-bg-mobile {
	background-color: #5EC9FA;
	position: absolute;
	top: -60px;  /* This assumes your navbar is 60px tall. Adjust as necessary */
	left: 0;
	width: 100%;
	height: calc(100% + 60px); /* Adjust this value if your navbar height is different */
	z-index: 2;  /* Higher z-index than .navbar-fixed */
}


#custom-home-header .container {
	position: relative;
	z-index: 3;
}

#custom-home-header .featured-image {
	position: relative;
	overflow: hidden;
}

#custom-home-header .featured-image::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black; adjust opacity as needed */
	z-index: 1;
}

#custom-home-header .featured-image img {
	width: 100%;
	display: block;
	z-index: 0; 
}

#custom-home-header .featured-image h2,
#custom-home-header .featured-image p {
	position: absolute;
	color: white;
	z-index: 2;
	left: 10%; 
	max-width: 80%; 
}

#custom-home-header.header-mobile .featured-image h2,
#custom-home-header.header-mobile .featured-image p {
	position: relative;
	color: white;
	z-index: 2;
}

#custom-home-header.header-mobile .contenu-hotspot{
	position: absolute;
	color: white;
	z-index: 2;
	left: 0px; 
	max-width: 100%; 
	top: 90px; 
	transform: translateY(-50%); 
}


#custom-home-header .featured-image h2 {
	top: 35%; 
	transform: translateY(-50%); 
}

#custom-home-header .featured-image p {
	top: 55%; 
	transform: translateY(0%); 
}


#custom-home-header.header-mobile .featured-image h2 {
	top: 0%; 
	transform: translateY(0%); 
}

#custom-home-header.header-mobile .featured-image p {
	top: 0%; 
	transform: translateY(0%); 
}




#custom-home-header .featured-image a i {
	position: absolute;
	color: white;
	z-index: 2;
	font-size: 2rem;
	left: 10%; 
	bottom: 10%; 
}

/* Additional styles */
.big-title {
	font-size: 2rem;
}

.bottom-image {
	position: relative;
	bottom: -50%; 
	margin-bottom: -50%; 
	z-index: 1; 
}

.searchbar {
	margin-top: 50px;
	margin-bottom: 50px;
	max-width: 350px;
}

.header-mobile .searchbar {padding-bottom: 20px;}

h2.grand-titre {
	font-family: 'TT Hoves Pro Trial Medium Italic';
	color: #5EC9FA;
	font-size: 78px;
	text-transform: none;
	font-weight: 400;
	line-height: 90%;
	margin-bottom: 80px;
	margin-top: 120px;
}

h2.grand-titre-accueil {
	font-family: 'TT Hoves Pro Trial Medium Italic';
	color: #5EC9FA;
	font-size: 60px;
	text-transform: none;
	font-weight: 400;
	line-height: 90%;
	margin-bottom: 80px;
	margin-top: 120px;
}





.nav-logo {
	z-index: 4; /* or a higher value than the blue-bg and other overlapping elements */
	position: relative; /* This is important, as z-index only works on positioned elements */
}

.nav-inner-wrapper, .nav-wrapper {
	background-color: transparent; 
	/* Optionally, if these containers are positioned, you can also set a higher z-index */
	z-index: 4;
}

.navbar-fixed {
	position: relative;
	z-index: 5; /* Ensure this value is higher than that of .blue-bg */
	margin-bottom: 8px;
}


.btnccvpn-outline a{border: 1px solid #ffffff !important;
	padding: 15px 25px !important;
}

/* Custom Gap Between Columns */
.col.custom-gap {
	margin-left: 2.5%; /* Increase from default 0.75% */
	margin-right: 2.5%; /* Increase from default 0.75% */
}

/* Adjust the width to accommodate the increased margin */
@media only screen and (min-width: 600px) {
	.col.m8.custom-gap {
		width: calc(66.6666666667% - 5%); /* Original width minus double the increased margin */
	}

	.col.m4.custom-gap {
		width: calc(33.3333333333% - 5%); /* Original width minus double the increased margin */
	}
}


/* Nouvelles accueil */

.ccvpn-nouvelles-recent-posts-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2%;
}

.ccvpn-nouvelles-post-column {
	width: 49%;
	position: relative;
}

@media screen and (max-width: 768px) {
	.ccvpn-nouvelles-post-column {
		width: 100%;
		margin-bottom: 20px;
	}
}

.ccvpn-nouvelles-featured-image img {
	width: 40%;
	height: 40%; /* Setting height same as width to ensure it's square */
	display: inline-block;
	vertical-align: top;
	object-fit: cover; /* This ensures the image covers its container without distorting */
}








.ccvpn-nouvelles-white-square {
	position: absolute;
	width: 80%;
	bottom: 10px;
	right: 10px;
	background-color: white;
	border: 1px solid black;
	padding: 20px;
	padding-bottom: 50px; /* Giving more padding at the bottom to accommodate the button */
	z-index: 1;
}

.ccvpn-nouvelles-date {
	display: block;
	margin-bottom: 10px;
	font-weight: bold;
	text-align: right;
}

.ccvpn-nouvelles-view-more {
	display: inline-block;
	color: black;
	background-color: white;
	padding: 5px 10px;
	text-decoration: none;
	border-radius: 0;
	border-top: 1px solid black;
	border-left: 1px solid black;
	margin-top: 15px; /* Spacing between the button and text */
}

.ccvpn-nouvelles-view-more:hover {
	background-color: #f7f7f7;
}


/* test dropdown width */

/* ul#menu-menu2023 .dropdown-content {
width: 43% !important;
left: initial !important;
right: 15% !important;
} */

.dropdown-content li > a, .dropdown-content li > span
{padding: 14px 15px;}


/* motif */

.motif-col-padding{padding: 30px;}


.wp-block-column.bloc-overlay-col-right.has-background.is-layout-flow.wp-block-column-is-layout-flow{
	position: relative;
	top: 260px;
	z-index: 10;
}


@media screen and (max-width: 480px) {
	.wp-block-column.bloc-overlay-col-right.has-background.is-layout-flow.wp-block-column-is-layout-flow{
		position: relative;
		top: 0px;
		z-index: 10;
	}
	.wp-block-column.bloc-overlay-col-right.has-background.is-layout-flow.wp-block-column-is-layout-flow h2{padding-top: 30px;}
	
	.bloc-overlay-icon{display: none}
	

}


.bloc-cover-overflow{overflow: visible;
	margin-bottom: 200px
}

@media screen and (max-width: 480px) {
	.bloc-cover-overflow{overflow: visible;
		margin-bottom: 10px
	}
}

.bloc-overlay-icon figure{position: relative;
	top: 60px;
	z-index: 10;}

.bloc-overlay-col-icon{margin-bottom: 0px;}



/* WooCommerce custom */


.woocommerce-products-header__title .page-title{color: #000000 !important}

.woocommerce-input-wrapper select{display: block !important}


.woocommerce form .form-row label.checkbox, .woocommerce-page form .form-row label.checkbox{display: block}


.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button{border-radius: 18px;}


.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button{font-family: 'TT Hoves Pro Trial Medium';
	font-weight: 400 !important;}


.single-product .sidebar {
	display: none;
}
.single-product .content-area {
	width: 100%;
	margin: 0;
	margin-top: 50px;
	
}

nav.woocommerce-breadcrumb{display: none}

.wc-block-grid__product{text-align: left !important}
.wc-block-grid__product .wc-block-grid__product-title{max-width: 250px !important}



.wc-block-grid__product-add-to-cart a,
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button, 
.woocommerce #respond input#submit,
.woocommerce #content input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page #respond input#submit,
.woocommerce-page #content input.button {
	background-color: #5EC9FA !important;
	border-color: #5EC9FA !important;
	color: #FFFFFF !important; /* Change text color */
}


.edit-post-visual-editor .editor-block-list__block .wc-block-grid__product-title, .editor-styles-wrapper .wc-block-grid__product-title, .wc-block-grid__product-title{font-weight: 400 !important;
	font-family: 'TT Hoves Pro Trial Medium' !important;
	
}

button.btn.no-boxshadow {
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

/* You might also want to remove the shadow on focus or active states */
.no-boxshadow:focus, .no-boxshadow:active {
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}



/* Répertoire des membres */

.subscribers-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0px; /* Adjust spacing as needed */
}

.subscriber-column {
	flex: 0 1 calc(33% - 20px); /* Adjust for 3 columns taking spacing into account */
	/* Additional styling for the column */
}


@media (max-width: 800px) {
	.subscriber-column {
		flex-basis: 100% !important;
	}
}

/* For screens between 800px and 960px, show as two columns */
@media (min-width: 801px) and (max-width: 960px) {
	.subscriber-column {
		flex-basis: calc(50% - 20px) !important;
	}
}

/* nouvelles 2023 */

h2.titre-nouvelles-23, h2.titre-calendrier{
	font-family: 'TT Hoves Pro Trial Medium'  !important;
		color: #000000 !important;
		
	/* 	text-transform: uppercase; */
		font-weight: 400 !important;
		
		word-wrap: normal !important;
		-webkit-hyphens: none !important;
		-moz-hyphens: none !important;
		-ms-hyphens: none !important;
		hyphens: none !important;
		
		
} 




h2.titre-nouvelles-23 a, h2.titre-calendrier a{
	ord-wrap: normal !important;
	-webkit-hyphens: none !important;
	-moz-hyphens: none !important;
	-ms-hyphens: none !important;
	hyphens: none !important;
}

.date-nouvelles-23{font-family: "TT Hoves" !important;}

p.extrait-nouvelles-23, p.extrait-calendrier{
	font-family: "TT Hoves"  !important;
	
}

a.lireplus-nouvelles-23{	font-family: "TT Hoves"  !important;
}


a.has-bleu-fonce-background-color {background-color: #283EF0}
a.has-bleu-fonce-background-color:hover {color: #ffffff;
	background-color: #1b2cb6
}


.has-bleu-pale-background-color {background-color: #5EC9FA}

a.has-bleu-pale-background-color {background-color: #5EC9FA}
a.has-bleu-pale-background-color:hover {color: #ffffff;
	background-color: #50b5e3
}

.has-beige-background-color{background-color: #faf7f3}

.text-black a{color: #000000}

.myinner-group {
	max-width: 80%; /* Adjust the percentage as needed */
	margin: 0 auto; /* Center the inner group horizontally */
}


#mc-embedded-subscribe{border: none !important
}


.titre-3colonnes h3 {
	font-size: 100%; /* Start with 100%, will be adjusted by JS */
	max-font-size: 20px; /* Adjust this value based on your preference */
}


/* Ajustements responsive */

@media screen and (max-width: 767px) {
.resp-margin-top{
	margin-top: 20px;
}
}

@media screen and (min-width: 768px) {
.ordi-margin-top{
	margin-top: 70px;
}
}

.input-field .prefix.active{color: #5EC9FA}

input:not([type]):focus:not([readonly]) + label, input[type=text]:not(.browser-default):focus:not([readonly]) + label, input[type=password]:not(.browser-default):focus:not([readonly]) + label, input[type=email]:not(.browser-default):focus:not([readonly]) + label, input[type=url]:not(.browser-default):focus:not([readonly]) + label, input[type=time]:not(.browser-default):focus:not([readonly]) + label, input[type=date]:not(.browser-default):focus:not([readonly]) + label, input[type=datetime]:not(.browser-default):focus:not([readonly]) + label, input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label, input[type=tel]:not(.browser-default):focus:not([readonly]) + label, input[type=number]:not(.browser-default):focus:not([readonly]) + label, input[type=search]:not(.browser-default):focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label{color: #5EC9FA}