@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700');

/*@font-face {
font-family: 'FontAwesome';
src: url('../fonts/FontAwesome.eot?#iefix') format('embedded-opentype'),  
   url('../fonts/FontAwesome.otf')  format('opentype'),
   url('../fonts/FontAwesome.woff') format('woff'), 
   url('../fonts/FontAwesome.ttf')  format('truetype'), 
   url('../fonts/FontAwesome.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
*/

.header.container {width: fit-content !important;}

#HeaderWrapper+ br {
    display: none;
}

.portlet {border-color:#fff !important; border:0px !important; border-radius:0px !important; padding:0px !important;}
.portlet h3 {background:#d63c81; color:#fff; margin:0; padding:6px 15px; border-radius:8px 8px 0 0; }

.container{margin:0 auto; float:none;}

@media (min-width: 576px) {
.container {max-width: 540px;}
}

@media (min-width: 768px) {
.container {max-width: 740px; width: 85%;}
}

@media (min-width: 992px) {
.container {max-width: 960px;}
}

@media (min-width: 1200px) {
.container {max-width: 1120px;}
}


body{font-family: 'Montserrat', sans-serif; font-weight:300; color:#1d1d1d; font-size:16px; line-height:26px;letter-spacing: 1px; box-sizing:border-box;}
body img{max-width:100%;}
a,li{-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;}
a:hover, li:hover{-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;}

/*.banner-sec {margin: 45px 0 0;}*/
.banner-sec > .container {background: #000; position: relative; border-radius: 5px;}
.banner-sec img {opacity: 0.6;}
.banner-sec .caption {position: absolute;top: 50%;left: 50%;width: 100%;	transform: translate(-50%, -50%);text-align: center;
-webkit-transform: translate(-50%, -50%);}
.banner-sec .caption h1 {margin: 0;color: #fff; font-size:62px; font-weight:700;}

.votre-sec {padding: 40px 0 0; float: left; width: 100%;}
.votre-sec h3 {float: left;width: 100%;background: #38b5ef;color: #fff;font-size: 28px;padding:14px 30px;border-radius: 5px 5px 0 0;margin: 0 0 0;
font-weight:700; max-width: 485px; box-sizing: border-box;}
.votre-sec p {float: left;width: 100%;margin: 0;color: #171616;line-height: 26px;letter-spacing: 1px;background: #f3fbff;border: 1px solid #38b5ef;
border-radius: 0px 5px 5px 5px;padding: 20px 35px;box-sizing: border-box;}


#one-column-col1 .portlet-header {text-transform: initial; text-align: left; float: left;width: 100%;background: #38b5ef;color: #fff;font-size: 28px;padding:14px 30px;border-radius: 5px 5px 0 0;margin: 10px 0 0 0;
font-weight:700; max-width: 485px; box-sizing: border-box;}
#one-column-col1 .portlet-content {float: left;width: 100%;margin: 0;color: #171616;line-height: 26px;letter-spacing: 1px;background: #f3fbff;border: 1px solid #38b5ef;
border-radius: 0px 5px 5px 5px;padding: 20px 35px;box-sizing: border-box;}

.activity-sec {float: left;width: 100%;padding: 5px 0 0;}
.left-activity-sec {float: left;width: 240%; padding-right:8%; box-sizing: border-box;}
.left-activity-sec ul li {display: inline-block;vertical-align: top;	text-align: center; margin: 0 0 50px;width: 49%;}
.left-activity-sec ul li a {display: inline-block;text-decoration: none;}
.left-activity-sec ul li h4 {margin: 0 0 10px;font-size: 20px;font-weight: 700;letter-spacing: 1px;color: #171616;}
.left-activity-sec ul li .icon-sec {width: 180px;height: 180px;border: 3px solid #eaeaea;border-radius: 50%;	position: relative;}
.left-activity-sec ul li .icon-sec .img-2 {display: none;}
.left-activity-sec ul li .icon-sec img {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);}
.left-activity-sec ul li:hover h4{color:#ea154c;}
.left-activity-sec ul li:hover .icon-sec{background:#ea154c; border:3px solid #ea154c;}
.left-activity-sec ul li:hover .img-2 {display:block;}
.left-activity-sec ul li:hover .img-1 {display:none;}

.left-activity-sec ul {padding: 0;margin: 0;}

.left-activity-sec ul li.first-page:hover h4{color:#f3af2b;}
.left-activity-sec ul li.first-page:hover .icon-sec{background:#f3af2b; border:3px solid #f3af2b;}
.left-activity-sec ul li.second-page:hover h4{color:#ea4f53;}
.left-activity-sec ul li.second-page:hover .icon-sec{background:#ea4f53; border:3px solid #ea4f53;}
.left-activity-sec ul li.fourth-page:hover h4{color:#9bc542;}
.left-activity-sec ul li.fourth-page:hover .icon-sec{background:#9bc542; border:3px solid #9bc542;}
.left-activity-sec ul li.fifth-page:hover h4{color:#38b5ef;}
.left-activity-sec ul li.fifth-page:hover .icon-sec{background:#38b5ef; border:3px solid #38b5ef;}
.left-activity-sec ul li.sixth-page:hover h4{color:#aa87d8;}
.left-activity-sec ul li.sixth-page:hover .icon-sec{background:#aa87d8; border:3px solid #aa87d8;}



.right-activity {float: right;width: 100%;text-align: right;}
.right-activity ul {padding: 0;margin: 0;float: left; width: 100%;}
.right-activity ul li {float: left;width: 100%;text-align: left;list-style: none;margin: 50px 0 0;}
.right-activity ul li .content {float: left;width: 100%;background: #f3f3f3;padding: 10px 20px 20px; box-sizing: border-box; border-radius: 0 0 5px 5px;}
.carousel-item p {text-align: left;}
.right-activity ul li h4 {font-size: 20px;font-weight: 700;color: #fff;	padding: 12px 20px;	margin:0;	border-radius: 5px 5px 0 0;}
.right-activity ul li.actualites h4 {background: #f3af2b;}
.right-activity ul li.contact h4 {background: #9bc542;}

/* --------------   CSS pour liens utiles cadre jaune page accueil
#portlet_3 {float: right;width: 100%;text-align: left;} 
#portlet_3 .demarche .hrTop {display : none;}

#portlet_3 div:empty {display: none;}
#portlet_3 .demarche ul {float: left;width: 100%;text-align: left;list-style: none;margin: 0 0 20px;}
#portlet_3 .demarche ul {float: left;width: 100%;background: #f3f3f3;padding: 10px 20px 20px; box-sizing: border-box; border-radius: 0 0 5px 5px;}
.carousel-item p {text-align: left;}
#portlet_3 ul li {float: left;width: 100%;text-align: left;list-style: none;margin: 0 0 20px;font-weight: normal}
#portlet_3 ul li .content {float: left;width: 100%;background: #f3f3f3;padding: 10px 20px 20px; box-sizing: border-box; border-radius: 0 0 5px 5px;}
#portlet_3 ul li a {text-decoration: none;color: #1d1d1d;line-height: 22px;}
#portlet_3 ul li a:hover{color: #000;}
#portlet_3 h4 {font-size: 20px;font-weight: 700;color: #fff;	padding: 12px 20px;	margin:0;	border-radius: 5px 5px 0 0;}
#portlet_3 h4 {background: #f3af2b;}
------------------------------*/

#portlet_20 {width: 200%; left: -100%; float: left;  display: table;  margin:50px 0 40px 0;  text-align: left; background: #f5f5f5; 
border-radius: 7px !important; height:410px;}
#portlet_20 ul {padding: 0 0 0 15px;}
#portlet_20 ul li {    font-size: 18px; font-weight: 400; margin: 0 0 12px; color: #343434; list-style: none; position: relative;  padding: 0 0 0 25px; }
#portlet_20 ul li a {text-decoration: none; font-size: 18px; color: #343434;font-weight: normal;}
#portlet_20 .append-bottom {display:none}
#portlet_20 ul li::before {position: absolute;width: 10px;height: 10px;background: #16a2dc;border-radius: 50%;left: 0;
top: 8px;	content: "";}
#portlet_20 h3 {padding: 30px 35px;  background: #f5f5f5;    font-size: 28px; font-weight: 700; color: #212121;} 
@media (max-width: 767px) { #portlet_20 {    float: left;    left:0% !important;     width: 100%; margin: 0px;} }


#portlet_18 {width: 200%; left: -100%; float: left; display: table; margin: 50px 0 40px 0;text-align: left; background: #f5f5f5;
 border-radius: 7px !important; height: 410px;}
#portlet_18 ul li {    font-size: 18px; font-weight: 400; margin: 0 0 12px; color: #343434; list-style: none; position: relative;  padding: 0 0 0 25px; }
#portlet_18 ul li a {text-decoration: none; font-size: 18px; color: #343434;font-weight: normal;}
#portlet_18 .append-bottom {display:none}
#portlet_18 ul li::before {position: absolute;width: 10px;height: 10px;background: #16a2dc;border-radius: 50%;left: 0;
top: 8px;	content: "";}
#portlet_18 h3 {padding: 30px 35px;  background: #f5f5f5;    font-size: 28px; font-weight: 700; color: #212121;} 
#portlet_18 ul {padding: 0 0 0 15px;	}
@media (max-width: 767px) { #portlet_18 {    float: left;    left:0% !important;     width: 100%; margin: 0px 0px;} }



#portlet_24 {width: 200%; left: -100%; float: left; display: table; margin: 50px 0 40px 0;text-align: left; background: #f5f5f5;
 border-radius: 7px !important; height: 410px;}
#portlet_24 ul li {    font-size: 18px; font-weight: 400; margin: 0 0 12px; color: #343434; list-style: none; position: relative;  padding: 0 0 0 25px; }
#portlet_24 ul li a {text-decoration: none; font-size: 18px; color: #343434;font-weight: normal;}
#portlet_24 .append-bottom {display:none}
#portlet_24 ul li::before {position: absolute;width: 10px;height: 10px;background: #16a2dc;border-radius: 50%;left: 0;
top: 8px;	content: "";}
#portlet_24 h3 {padding: 30px 35px;  background: #f5f5f5;    font-size: 28px; font-weight: 700; color: #212121;} 
#portlet_24 ul {padding: 0 0 0 15px;	}
@media (max-width: 767px) { #portlet_24 {    float: left;    left:0% !important;     width: 100%; margin: 0px 0px;} }



form #lutece-user-new-account input {background: #a3c855;padding: 8px 20px;border-radius: 30px;letter-spacing: 0;font-size: 18px;border: none;}
#lutece-user-lost-password input {background: #a3c855;padding: 8px 20px;border-radius: 30px;letter-spacing: 0;font-size: 18px;border: none;}



body #body {left: 0;margin: 0;}
body #bandeau-utilisateur{height: 65px;}
body #bandeau-utilisateur .span-right a:hover span.infobulleUtilisateur span {background: #d63c81;border: 1px solid #d63c81;color: #fff;border-radius: 8px;
padding: 6px 0;}
#Header #iframe {height: auto !important;}
#Header .banner-sec > .container {width: 100%; max-width: 100%;}
form#loginForm, form {margin: 30px 0 0;float: left;width: 100%;}
form#loginForm fieldset, form fieldset{border: solid 2px #d63c81;	border-radius: 10px;}
body form#loginForm fieldset legend,
body form fieldset legend.formengine-legend{background: #d63c81;border: 1px solid #d63c81;width: 45%;box-sizing: border-box;color: #fff;padding: 10px 10px;
border-radius: 25px;text-align: center; letter-spacing: 0;}
form#loginForm fieldset .span-4,
form fieldset .span-3 {width: 190px; margin-top: 7px;}
form#loginForm fieldset .span-5 {width: 270px;}
form#loginForm fieldset .span-2 {width: 30px;}
form#loginForm fieldset .span-4 label span {letter-spacing: 0.5px;font-size: 16px;}
form#loginForm fieldset .span-5 input,
form fieldset input#VotreCourriel-champcalcule10 {width: 90% !important;	border: solid 1px #c5c5c5;padding:10px 20px !important;border-radius: 30px;
box-sizing: border-box; margin: 0 0 15px;}
form fieldset input#VotreCourriel-champcalcule10 {width: 320px !important;}
form#loginForm fieldset .span-2 a.info {margin: 6px 0 0;padding: 0;background: transparent;float: none;border-radius: 0;}
form#loginForm fieldset .span-2 a.info:hover span.infobulle {color: #116699;left: 19px;font-size: 12px;}
form#loginForm fieldset .prepend-top {float: left;width: 100%;}
form#loginForm fieldset a {display: inline-block;float: left;text-decoration: none;letter-spacing: 0;background: #5dc6e3;color: #fff;padding: 8px 40px 10px;
border-radius: 30px;}
form#loginForm fieldset .span-right {float: right;width: 100%;text-align: right;}	
form#loginForm fieldset .span-right span {letter-spacing: 0;}
form#loginForm #actions input {background: #a3c855;padding: 8px 20px;border-radius: 30px;letter-spacing: 0;font-size: 18px;border: none;}


.portlet-connexion form {float: left;width: 100%;margin: 0;color: #171616;line-height: 26px;letter-spacing: 1px;background: #f3fbff;border: 1px solid #38b5ef;
border-radius: 0px 5px 5px 5px;padding: 20px 35px;box-sizing: border-box;}
.portlet-connexion form input {background: #a3c855;padding: 8px 20px;border-radius: 30px;letter-spacing: 0;font-size: 18px;border: none;}
.portlet-connexion form a {display: inline-block;float: left;text-decoration: none;letter-spacing: 0;background: #5dc6e3;color: #fff;padding: 8px 40px 10px;
border-radius: 30px; margin-bottom:10px;}
.portlet-connexion form .span-3,
.portlet-connexion form .span-5 {width: 270px;}
.portlet-connexion form .span-3 label span {letter-spacing: 0.5px;font-size: 16px;}
.portlet-connexion form .span-5 input {width: 90% !important;	border: solid 1px #c5c5c5;padding:10px 20px !important;border-radius: 30px;
box-sizing: border-box; margin: 0 0 15px;}


#Wrapper.footer .textReglementaire {margin: 20px 0 20px;	float: left;width: 100%;}
#Wrapper.footer .textReglementaire span {background: #d63c81;padding: 15px;border-radius: 8px;}
#Wrapper.footer .textReglementaire span em {background: transparent;color: #fff;line-height: 22px;font-size: 14px;}
/*
#Wrapper.footer .center {float: left;width: 100%;}
#Wrapper.footer .center .w3cBG {float: none;margin: 0;display: inline-block;}
*/
#Wrapper.footer .center {display:none;}

form .center input, form .center a{background: #a3c855;padding: 8px 20px;border-radius: 30px;letter-spacing: 0;font-size: 18px;border: none; color:#fff;
margin: 20px 0 30px;}

#one-column-col1 #portlet_8 {float: left;width: 100%;margin: 0 0 20px;}
#one-column-col1 #portlet_8 .votre-sec.container {padding: 25px 0 0;}
#one-column-col1 #portlet_8 .votre-sec.container h3 {text-transform: initial; text-align: left;}

#one-column-col1 #portlet_17 {float: left;width: 100%;margin: 0 0 20px;}
#one-column-col1 #portlet_17 .votre-sec.container {padding: 25px 0 0;}
#one-column-col1 #portlet_17 .votre-sec.container h3 {text-transform: initial; text-align: left;}

#one-column-col1 #portlet_4 {float: left;width: 100%;margin: 0 0 20px;}
#one-column-col1 #portlet_4 .votre-sec.container {padding: 25px 0 0;}
#one-column-col1 #portlet_4 .votre-sec.container h3 {text-transform: initial; text-align: left;}

#one-column-col1 #portlet_14 {float: left;width: 100%;margin: 0 0 20px;}
#one-column-col1 #portlet_14 .votre-sec.container {padding: 25px 0 0;}
#one-column-col1 #portlet_14 .votre-sec.container h3 {text-transform: initial; text-align: left;}

#one-column-col1 #portlet_15 {float: left;width: 100%;margin: 0 0 20px;}
#one-column-col1 #portlet_15 .votre-sec.container {padding: 25px 0 0;}
#one-column-col1 #portlet_15 .votre-sec.container h3 {text-transform: initial; text-align: left;}

#one-column-col1 #portlet_6 {float: left;width: 100%;margin: 0 0 20px;}
#one-column-col1 #portlet_6 .votre-sec.container {padding: 25px 0 0;}
#one-column-col1 #portlet_6 .votre-sec.container h3 {text-transform: initial; text-align: left;}

#one-column-col1 #portlet_19 {float: left;width: 100%;margin: 0 0 20px;}
#one-column-col1 #portlet_19 .votre-sec.container {padding: 25px 0 0;}
#one-column-col1 #portlet_19 .votre-sec.container h3 {text-transform: initial; text-align: left;}

#one-column-col1 #portlet_9 {float: left;width: 100%;margin: 0 0 20px;}
#one-column-col1 #portlet_9 .votre-sec.container {padding: 25px 0 0;}
#one-column-col1 #portlet_9 .votre-sec.container h3 {text-transform: initial; text-align: left;}

#one-column-col1 #portlet_7 {float: left;width: 100%;margin: 0 0 20px;}
#one-column-col1 #portlet_7 .votre-sec.container {padding: 25px 0 0;}
#one-column-col1 #portlet_7 .votre-sec.container h3 {text-transform: initial; text-align: left;}

body #three-zones-first {float: left;width: 60%;box-sizing: border-box;padding-right: 8%; margin-top: 50px;}
body #three-zones-second {display: none;}
body #three-zones-third {float: right;width: 34%;text-align: right;box-sizing: border-box;}
body #three-zones-first #portlet_76 {float: left;width: 100%;margin: 0;}
body #three-zones-first #portlet_76 .left-activity-sec {width: 100%;padding: 0;margin: 50px 0 0;}
.left-activity-sec ul li h4 {background: transparent;}
.left-activity-sec ul li a {display: inline-block;text-decoration: none;color: #171616;text-transform: initial;letter-spacing: 0;font-size: 22px;}
.left-activity-sec ul li.third-page a,
.left-activity-sec ul li.fourth-page a,
.left-activity-sec ul li.sixth-page a {display: none;}
.left-activity-sec ul li.third-page h4 a, 
.left-activity-sec ul li.fourth-page h4 a,
.left-activity-sec ul li.sixth-page h4 a {display: block;}
.left-activity-sec ul li .icon-sec {margin: 0 auto;}
.left-activity-sec ul li.first-page:hover h4 a{color:#f3af2b;}
.left-activity-sec ul li.second-page:hover h4 a{color:#ea4f53;}
.left-activity-sec ul li.third-page:hover h4 a{color:#ea154c;}
.left-activity-sec ul li.fourth-page:hover h4 a{color:#9bc542;}
.left-activity-sec ul li.fifth-page:hover h4 a{color:#38b5ef;}
.left-activity-sec ul li.sixth-page:hover h4 a{color:#aa87d8;}
.left-activity-sec ul li .icon-sec a {display: block;height: 100%;}
.right-activity ul li a {text-decoration: none;color: #1d1d1d;line-height: 22px;hyphens: auto;}
.right-activity ul li a:hover{color: #000;}

#Wrapper.footer .textReglementaire {margin: 20px 0 20px;	float: left;width: 100%;}
#Wrapper.footer .textReglementaire span {background: #d63c81;padding: 15px;border-radius: 8px;}
#Wrapper.footer .textReglementaire span em {background: transparent;color: #fff;line-height: 22px;font-size: 14px;}

#Wrapper.footer .center {display: none;}
/*
#Wrapper.footer .center {float: left;width: 100%;}
#Wrapper.footer .center .w3cBG {float: none;margin: 0;display: inline-block;}
*/
.prepend-1.span-22.append-1.last {padding: 0;width: 100%;}
.inner-content .right-inner ul li a {text-decoration: none;font-size: 18px;color: #343434;}
.inner-content .right-inner ul li a:hover{color: #000;}


/*-------------- Slider CSS start here ----------------*/

.carousel-wrapper{
height:280px;
position:relative;
width:100%;
margin:0 auto;
}
.carousel-item{
position:absolute;
top:0;
bottom:0;text-align: center;
left:0;
right:0;
padding:0px;
opacity:0;
transition: all 0.5s ease-in-out;
}
.arrow{
position:absolute;
top:30%;
display:block;
width:8px;
height:12px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
background: url("../images/slider-icon.png")no-repeat;
}

.arrow-prev{
left:-20px;
}

.arrow-next{
right:-20px;
-webkit-transform: rotate(180deg);
 transform: rotate(180deg);
}

.light{
color:white;
}

/*Select every element*/
[id^="item"] {
display: none;
}


.item-1 {
z-index: 2;
opacity: 1;
}

*:target ~ .item-1 {
opacity: 0;
}

#item-1:target ~ .item-1 {
opacity: 1;
}

#item-2:target ~ .item-2, #item-3:target ~ .item-3 {
z-index: 3;
opacity: 1;
}





/*-------------- Slider CSS end here ----------------*/

.back-button {float: left;width: 100%;margin: 35px 0 30px 0;}
.back-button a {display: inline-block;background: #16a2dc;color: #fff;text-decoration: none;font-weight: 400;padding: 13px 50px;font-size: 22px;
border-radius: 5px;	border: 2px solid #16a2dc;}
.back-button a:hover{background:transparent; color:#16a2dc;}	

.inner-content {float: left;	width: 100%;display: table;margin: 0 0 40px;}
.inner-content .left-inner {float:none;	width: 32%;	text-align: center;border: 1px solid #ea4f53;border-radius: 5px;padding: 35px;
box-sizing: border-box; display: table-cell;}
.inner-content .left-inner h2 {margin: 0;font-weight: 700;font-size: 28px;color: #ea4f53;}
.inner-content .left-inner .inner-icon {width: 180px;height: 180px;text-align: center;position: relative;background: #ea4f53;margin: 30px auto 20px;
border-radius: 50%;}
.inner-content .left-inner .inner-icon img{position:absolute; transform:translate(-50%, -50%); left:50%; top:50%; 
-webkit-transform:translate(-50%, -50%);}	
.inner-content .left-inner p {margin: 0;font-weight: 400;color: #343434;} 
.inner-content .right-inner {float:none;width: 64%;background: #f5f5f5;border-radius: 5px;padding: 40px 50px;	box-sizing: border-box;
display: table-cell;}
.gap-sec {display: table-cell;}
.inner-content .right-inner > h2 {margin: 0;	font-size: 28px;font-weight: 700; color:#212121;}
.inner-content .right-inner ul {float: left;	width: 100%;padding: 0 0 0 0px;margin: 30px 0 0;}
.inner-content .right-inner ul li {font-size: 18px;	font-weight: 400;margin: 0 0 12px;color: #343434;list-style: none;position: relative;padding: 0 0 0 25px;}
.inner-content .right-inner ul li::before {position: absolute;width: 10px;height: 10px;background: #16a2dc;border-radius: 50%;left: 0;
top: 8px;	content: "";}

.inner-content .left-inner.mon-dos {border-color: #f3af2b;}
.inner-content .left-inner.mon-dos h2{color: #f3af2b;}
.inner-content .left-inner.mon-dos .inner-icon{background: #f3af2b;}

.inner-content .left-inner.act-sco {border-color: #ea154c;}
.inner-content .left-inner.act-sco h2{color: #ea154c;}
.inner-content .left-inner.act-sco .inner-icon{background:#ea154c;}

.inner-content .left-inner.act-los {border-color:#9bc542;}
.inner-content .left-inner.act-los h2{color:#9bc542;}
.inner-content .left-inner.act-los .inner-icon{background:#9bc542;}

.inner-content .left-inner.mes-pre {border-color:#38b5ef;}
.inner-content .left-inner.mes-pre h2{color:#38b5ef;}
.inner-content .left-inner.mes-pre .inner-icon{background:#38b5ef;}

.inner-content .left-inner.ma-doc {border-color:#aa87d8;}
.inner-content .left-inner.ma-doc h2{color:#aa87d8;}
.inner-content .left-inner.ma-doc .inner-icon{background:#aa87d8;}

body #one-column-col1{margin: 0 0 -50px;}
.right-activity ul li .content p strong {font-size:13px;}
body #three-zones-third #portlet_3 {margin: 50px 0 0;}



/*-------------- Media Query Start here ----------------*/

@media(max-width:1300px){
#portlet_20 {width: 180%;left: -80%;}
#portlet_18 {width: 180%;left: -80%;}
#portlet_24	{width: 180%;left: -80%;}
	
}

@media(max-width:1199px){

body #three-zones-first {padding-right: 0;}	
.left-activity-sec ul li a {font-size: 19px;}
.right-activity ul li .content p {height: auto;word-break: break-all;}
#portlet_20 {width: 170%;left: -70%;}
#portlet_18 {width: 170%;left: -70%;}
#portlet_24	{width:170%;left: -70%;}	

}


@media (max-width: 991px) {

.banner-sec .caption h1 {font-size: 42px;}	
.activity-sec .left-activity-sec {padding-right: 0;}
.activity-sec .left-activity-sec ul li h4 {font-size: 18px;}	
.activity-sec .left-activity-sec ul li .icon-sec {width: 150px;height: 150px;}	
form#loginForm fieldset {box-sizing: border-box;margin:20px 0 20px;}
body .container {left: 0;right: 0;}	
form fieldset .span-3 {width: 140px;}
.left-activity-sec ul li {margin: 0 0 30px;}
.left-activity-sec ul li a {font-size: 18px;}
.left-activity-sec ul li .icon-sec {width: 150px;height: 150px;}
.votre-sec p {text-align: left;}
#portlet_20 {width: 160%;left: -60%; height: 405px;}
#portlet_18 {width: 160%;left: -60%; height: 406px;}
#portlet_24 {width: 160%;left: -60%; height: 406px;}

}



@media (max-width: 767px) {
.banner-sec .caption h1 {font-size: 35px;line-height: 42px;}
.activity-sec .left-activity-sec {width: 100%; margin: 0 0 50px;}
.right-activity {float:left;width: 100%;text-align: center;max-width:100%;margin: 0 auto 0;	display: block;}

.inner-content {margin: 0 0 0 !important;}
.inner-content .left-inner {float: left;width: 100%;margin: 0 0 40px;}
.gap-sec {display: none;}
.inner-content .right-inner {float: left;width: 100%;}
.inner-content .right-inner > h2 {font-size: 24px;}
.inner-content .left-inner h2 {font-size: 24px;}
.inner-content .left-inner .inner-icon {width: 150px;height: 150px;}
.inner-content .right-inner ul li{font-size:16px;}

form#loginForm fieldset .span-4 {width: 160px;text-align: left;}
form#loginForm fieldset .span-5 {width: 220px;text-align: left;}
form#loginForm fieldset .span-5 input {width: 94% !important;}	

body #three-zones-first {width: 100%;}
body #three-zones-third {width: 100%;}	
.left-activity-sec ul li a {font-size: 16px;}
body #three-zones-third #portlet_3, 
body #three-zones-third #portlet_4{margin: 0 0 0;}
.back-button {margin: 35px 0 20px 0;}
#portlet_24, #portlet_20,
#portlet_18 {width: 100%;}
.portlet {margin: 0;}
body #one-column-col1{margin: 0 0 0px;}
body #three-zones-first #portlet_12 .left-activity-sec {margin: 0 0 20px;}



}

@media(max-width:575px){

form#loginForm, body form {padding: 0 20px;box-sizing: border-box;}
form fieldset input#VotreCourriel-champcalcule10 {width: 270px !important;float: left;}
#one-column-col1 {padding: 0 20px;box-sizing: border-box;}
body #three-zones-first {padding: 0 20px;}
body #three-zones-third {	padding: 0 20px;}
.prepend-1.span-22.append-1.last {padding: 0 20px;	box-sizing: border-box;}

.left-activity-sec {width:100%;}
.left-activity-sec ul li {width:100%;}
.container { margin: 0 10px !important; }
}

@media(max-width:529px){
form#loginForm fieldset .span-4 {width: 100%;margin-bottom: 4px;}	
form#loginForm fieldset .span-5 {width:90%; margin:0;}
form#loginForm fieldset .span-right {text-align: left;margin: 20px 0 0;}
form#loginForm fieldset .span-2 {width: 5%;}	
form fieldset .span-3 {width: 100%;	text-align: left;	margin: 0 0 8px;}	
form fieldset input#VotreCourriel-champcalcule10 {width: 100% !important;}


}

@media (max-width:480px) {
.votre-sec h3 {max-width: 100%;}
.votre-sec p {border-radius: 0px 0px 5px 5px;}
.banner-sec .caption h1 {font-size: 26px;	line-height: 32px;}
.votre-sec h3 {font-size: 24px;}



}

footer {
    background-color: #FFFFFF;
    color: #FFFFFF;
}

.navbar-inverse {
    border-color: #FFFFFF;
}

.navbar-brand {
    margin-left: auto !important;
}

/*
@media (max-width:426px) {
.activity-sec .left-activity-sec ul li {width: 100%;}
.activity-sec .left-activity-sec ul li h4 {float: left;width: 100%;}
.activity-sec .left-activity-sec ul li .icon-sec {display: inline-block;}
.left-activity-sec ul li {width: 100%;}
#portlet_3 {box-sizing: border-box;min-width: 100%;}
.portlet {min-width: 100%;}


} */

/*-------------- Media Query end here ----------------*/