@import url('../fonts/fontface.css');
/*BASICS*/
body{
	margin:0;
	padding:0;
	font:2.8vh/3.9vh 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
	font-weight: 200;
	color:#444;
	background: #fff;
	position:relative;	
	min-height: 100vh;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
a{
	text-decoration: none;
	color: dodgerblue;
	transition:.3s all;
}
a.unclickable{
	cursor: default;
	filter:grayscale(100%);
	-webkit-filter:grayscale(100%);
}
a.button.unclickable{
	filter:none;
	-webkit-filter:none;
	background: lightgreen; 
}
p{
	margin:0;
}
nav article{
	display: inline-block;
}
*:focus{
	outline:0;
}
input{
	box-sizing:border-box;
}
input, select, option, textarea{
	transition:.5s all;
}
input:not([type=submit]),textarea, select{
	padding:5px 8px;
	border:1px solid dodgerblue;
	background: #fafafa;
	color: dodgerblue;
	border-radius: 2px;
	width: 160px;
}
input[disabled]{
	background: #fff;
	border:1px solid #eee;
	color:#444;
	border-radius: 0; 
}
input:not([type=submit]):focus,textarea:focus,option:focus,select:focus{
	color:#fff;
	border-color:#1a7bd9;
	background: dodgerblue;
}
select{
	color:#222;
}
option{
	color: #666;
}
input::-moz-selection { background-color: #fff; color:dodgerblue;}
input::selection { background-color: #fff; color:dodgerblue;}
input[type=range]{
    border: 1px solid white; 
    min-width: 150px;
    -webkit-appearance: none;
    background: transparent; 
    line-height: 16px;
    vertical-align: middle;
}

input[type=range]::-moz-range-track {
    height: 5px;
    background: #eee;
    border: none;
    border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: dodgerblue;
}

input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]:focus::-moz-range-track {
    background: #ccc;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #eee;
    border: none;
    border-radius: 3px;
    position: relative;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: dodgerblue;
    margin-top: -5px;
}

input[type=range]:focus {
    outline: none;
    background: transparent;
    border: 1px solid white; 
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}
input[type=search] {
	box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button{
    position:relative; 
    -webkit-appearance: none;
    cursor: pointer;
    height: 15px;
    width: 15px;
    background: url('../img/cross.svg') center no-repeat; /*Cross URL*/
    background-size: contain;
}
input[type=checkbox], input[type=radio]{
    display: none;
}
input[type=checkbox] + label, input[type=radio] + label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: calc(3vh + 5px);
    margin-right: 15px;
}
input[type=checkbox] + label:before, input[type=radio] + label:before{
    content: "";
    display: inline-block;
    width: 2.8vh;
    height: 2.8vh;
    margin-right: 8px;
    position: absolute;
    left: 0;
    border: 1px solid dodgerblue;
    background-color: #fafafa;
    border-radius: 4px;
    transition:.5s background-color;
}
input[type=radio] + label:before{
	border-radius: 50%;
	transition:.5s box-shadow;
}
input[type=checkbox]:checked + label:before {
	border: 1px solid #1a7bd9;
    background-color: dodgerblue;
    background-image: url('../img/check.svg');
    background-size: contain;
    background-repeat: no-repeat; 
    background-origin: border-box;
    background-position: center;
}
input[type=radio]:checked + label:before{
	border: 1px solid dodgerblue;
	background-color: #fff;
	box-shadow: inset 0 0 0 4px dodgerblue;
}
input[type=submit], input[type=button]{
	border:1px solid #1a7bd9;
	background-color: #1a7bd9;
	border-radius: 3px;
	padding: 7px 10px;
	color:#fff;
}
input[type=submit]:hover, input[type=button]:hover{
	cursor:pointer;
	background-color: dodgerblue;
}
input[type=submit]:active, input[type=button]:active{
	color:#ccc;
	background-color: #1a7bd9;
}
h1, h2, h3, h4, h5, h6{
	text-transform: uppercase;
	font-weight: 500;
	margin: 0;
	color:#555;
}
.button{
	padding: 13px 16px;
	border-radius: 2px;
	background: tomato;
	color:white;
	cursor: pointer;
}
.left, .right{
	display: block;
	position: relative;
}
.left{
	float: left !important;
}
.right{
	float: right !important;
}
.clearfix{
	clear:both !important;
}
.makhfi{
	display: none !important;
}
.all-vph{
	height:100vh;
}
.flash-msg{
	display:none;
}
#infobox{
	position: fixed;
    z-index: 1000;
    right: 7vh;
    bottom: 7vh;
    max-width: 50vw;
    box-sizing: border-box;
    padding: 3.8vh 10vh;
    font-size: 3.2vh;
    line-height: 3.5vh;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    color: #eee;
    background: darkcyan;
    border: 5px solid teal;
}
#edit-bar{
	display: block;
	height: 0;
	width: 100%;
	position: fixed;
	top:12vh;
	z-index: 100;
}
#container{
	min-height: 100%;
	position: relative;
}
#header, #main, #footer{
	position: relative;
	width:100%;
	left:0;
	bottom:0;
}
#main>.wrapper, #footer>.wrapper{
	position: relative;
	margin:0 auto;
	padding:30px 6.5%;
	width:100%;
	box-sizing: border-box; 
}
/*HEADER*/
#header{
	position: fixed;
	top:0;
	left:0;
	height: 7vh;
	background: dodgerblue;
	border-bottom:.9vh solid #1a7bd9;
	font-size: 3vh;
	z-index: 9999;
}
#header #logo{
	position: relative;
	float: left;
	height: 100%;
	background: #1a7bd9;
	display: inline-block; 
	left: -39px;
	padding-left: 10px;
	transition: all  .5s;
}
#header #logo:hover{
	left:0;
}
#header #logo:hover img{
	opacity:.9;
}
#header #logo img{
	height: 6vh;
	padding:5px; /*bar (outerheight - imgheeight)/2*/
	float:left;
	opacity: .2;
	transition: .5s all;
} 
#header #logo #title{
	font-family: 'Nexa Bold'; /*need to add nexa webfont*/
	color: #fff;
	line-height: calc(7vh + 4px); /*header outer height*/
	vertical-align:baseline;
	line-height: 7vh;
	padding: 0 14px 0 4px;
}
#header #menu{
	position: relative;
	float: right;
	height: 100%;
	margin-right:20px;
}
#header #menu article{
	display: inline-block;
	position: relative;
	height:100%;
}
#header #menu article a{
	position: relative;
	padding: 0 12px;
	font-weight: 400;
	line-height: 7vh; /*header inner height*/
	vertical-align: middle;
	color: rgba(255,255,255,.8);
	display: inline-block;
	height:100%;
}
#header #menu article a:hover{
	background: #1a7bd9;
	box-shadow:0 4px 0 rgba(0,0,0,.15);
}
/*FOOTER*/
#footer{
	background: #eee;
	border-top: 5px solid #e6e6e6;
	margin-top: 7vh; /*header height*/
	bottom:0;
}
#footer h5{
	font-weight: 200;
}
#footer .column{
	display: inline-table;
	width: calc(96.7% / 4);
	box-sizing: border-box;
}
#footer .column.alignright{
	text-align: right;
}
#footer .column-wrapper{
	display: table-cell;
}
#footer .column-wrapper>a{
	display: block;
	font-size: .99em;
	padding:1px 0;
}
#footer .social-link{
	display: inline-block;
	padding: 8px 0; 
}
#footer .social-link img{
	height: 30px;
	opacity: .6;
	transition:.5s all;
}
#footer .social-link img:hover{
	opacity: 1;
}
#footer .copywrite{
	position: absolute;
	bottom:10px;
	right: 10px;
	opacity: .8;
}
/*MAIN*/
#main{
	top:7vh; /*height of header*/
}
#main .wrapper.catalog{
	padding:30px 2.5%;
}
#main .wrapper header{
	position: relative;
	top: 0;
	width: 100%;
	text-align:center;
}
#main .wrapper header #main-title, #main .wrapper header #search-form{
	display: inline-block;
	top:0; 
}
#main .wrapper header #main-title{
	font-weight: 300;
	color: gray;
}
#main .wrapper header .page-title{
	font-weight: 500;
	color:#444;
}
#main .wrapper header #search-form{
	position: fixed;
	left:22vw;
	display: block;
	z-index: 100000;
}
#main .wrapper header #search-form input{
	padding:1.8vh;
	font-size: .98em;
	display:inline-block;
	border:0;
	margin-top: .2vh;
	margin-right:-3px;
	background: transparent;
	width:19vw;
	color: rgba(255,255,255,.8);
	position: fixed;
}
#main .wrapper header #search-form input[type=submit]{
	background-color: transparent;
	background-image: url('../img/search.svg'); /*search icon url*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-origin: content-box;
	color: transparent; 
	width:3vw;
	cursor: pointer;
	position: relative;
	right:-19vw;
}
#main .wrapper header #search-form ::-webkit-input-placeholder { /* WebKit browsers */
	color: #fff;
	opacity: .5;
}
#main .wrapper header #search-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #fff;
	opacity: .5;
}
#main .wrapper header #search-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #fff;
	opacity: .5;
}
#main .wrapper header #search-form :-ms-input-placeholder { /* Internet Explorer 10+ */
	color: #fff;
	opacity: .5;
}
#content{
	margin-top:15px;
	border-top: 1px solid #eee;
}
#content .left{
	width:25%;
	width:240px;
}
#content .left nav{
	position: relative;
	width: 100%;
	margin: 15px 0;
}
#content .left nav h5{
	font-weight: 300;
	font-size: .85em;
	padding: 0 15px;
	color:#777;
	margin-top: 20px;
}
#content .left nav article{
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 2px 8px;
}
#content .left nav.cat article{
	padding: 2px 15px;
}
#content .left nav.cat article:hover{
	background: #fafafa;
}
#content .left nav.cat article.current, #content .left nav.cat article.current:hover{
	background: #f5f5f5; 
}
#content .left nav article a{
	position: relative;
	display: inline-block;
	width:100%;
}
#content>.right{
	width:75%;
	width: calc(100% - 240px);
	box-sizing:border-box;
	padding: 15px 2%;
}
.catalog #content>.right{
	min-height: 70vh;
	border-left: 1px solid #eee;
}
#content .formation, #content .no-match{
	position: relative;
	margin: 25px 7px 7px 0;
}
#content .no-match{
	display: none;
}
#content .formation h3{
	padding: 0 0 10px 0;
	color: dodgerblue;
	width: calc(100% - 160px);
}
#content .formation h3:hover{
	text-decoration: underline; 
}
#content .formation[data-type="pack"] h3::before{
	content: 'Pack';
}
#content .formation[data-level="level-1"] h3::after{
	content: 'Débutant';
	background: url(../img/level1.svg) center right no-repeat;
}
#content .formation[data-level="level-2"] h3::after{
	content: 'Intermédiaire';
	background: url(../img/level2.svg) center right no-repeat;
}
#content .formation[data-level="level-3"] h3::after{
	content: 'Avancé';
	background: url(../img/level3.svg) center right no-repeat;
}
#content .formation[data-level] h3::after{ 
	position: absolute;
	right: 0;
	top: -8px;
	font-size: .8em;
	font-weight: 400;
	text-transform: none;
	padding-right: 11.5vh;
	height:5.5vh;
	padding-top: 1.2vh;
	background-size: contain;
	color: #666;
	opacity: .7;
}
#content .formation[data-level="level-NULL"] h3::after{
	display: none;
}
#content .formation .image-link{
	width: auto;
}
#content .formation .item-details{
	width: calc(98.5% - 200px);
	position: relative;
	left: 0;
}
#content .formation .thumb{
	height:auto;
	width: 195px;
	box-sizing:border-box;
	display: inline-block;
	position: relative;
	margin-right: 15px;
	border: 1px solid rgba(0,0,0,.1);  
}
#content .formation .summary{
	position: relative;
	margin: 0;
	text-align: justify; 
	font-size: 1.1em;
	line-height: 1.4em;
	color: #555;
}
#main .wrapper.catalog #content{
	border-top:0;
}
/*SIGNUP and SIGNIN*/
#content.form-page .left{
	width:59%;
	box-sizing:border-box;
	padding:10px 20px;
	text-align: justify;
}
#content.form-page .right{
	width:41%;
}
#content.form-page .right div.error{
	font-size: .9em;
    color: tomato;
    margin-top: -3px;
    margin-right: 4px;
    white-space: normal;	
}
#content.form-page .logoxn{
	width:30%;
	display: block;
	position: absolute;
	height:100%;
	top:0;
	left:0;
	padding:60px;
	background-color: #fafafa;
	background-image: url('../img/logo.svg');
	background-size: contain;
	box-sizing:border-box;
	background-origin: content-box;
	background-position: center;
	background-repeat: no-repeat;
}
#content.form-page .cxn{
	width:100%;
	margin:auto;
	border:1px solid #eee;
	border-top:0;
	padding: 30px 0 60px 0;
	text-align: center;
	color:#fff;
	background-color: dodgerblue;
	font-size: 1em;
}
.form-page .cxn .errors{
	background: #ff4444;
	padding:3px 5px;
}
.form-page .cxn input[type=submit]{
	background-color: dodgerblue;
}
.form-page .cxn input[type=submit], .form-page .cxn input[type=checkbox] + label:before{
	border-color: rgba(255,255,255,.5);
}
.form-page .cxn input[type=submit]:hover{
	background-color: #fff;
	color:dodgerblue;
}
.form-page .cxn input:focus{
	background-color: #1a7bd9;
}
.form-page .cxn #ins{
	position: absolute;
	bottom:0;
	padding:10px 0;
	background-color: #1a7bd9;
	display: inline-block;
	width: 70%;
	right:0;
	color:#fff;
}
.form-page #ins a{
	color: rgba(255,255,255,.6);
}
.form-page form.cxn fieldset{
	width:70%;
}
.form-page form{
	position: relative;
	box-sizing:border-box;
	padding:20px;
	background-color: #fdfdfd;
	color:#777;
	text-align: center;
	border-bottom:3px solid dodgerblue;
}
.form-page fieldset{
	display: inline-block;
	position: relative;
	margin: auto;
	width:0;
	text-align: right;
	white-space: nowrap;
	border:0;
	padding: 0;
}
.form-page .adit{
	position: absolute;
	padding:3px 0;
}
.form-page input, .form-page label, .form-page select, .form-page .adit{
	margin:3px;
	font-size:.96em;
} 
.form-page fieldset>label{
	color:#333;
}
.form-page .choice{
	display: inline-block;
	width:160px;
	text-align: left;
}
/*FORMATION*/
#formation-header{
	position: relative;
	padding:0 7.5%;
	margin:-26px 0 0 -7.5%; 
	background: url(../img/template-formation.svg);
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center;
	background-color: #0B3866;
	height: 38vh;
	overflow: hidden;
}
.pack #formation-header{
	background: url(../img/template-pack.svg);
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center;
	background-color: #008855;
}
#formation-header.has-image{
	background-size: cover;
	box-shadow: inset 0 0 0 999vh rgba(0,0,0,.3);
}
#formation-title{
	line-height: 38vh;
	vertical-align: middle;	
	color: #eee;
	font-size: 2em;
	text-shadow:0 0 5px rgba(0,0,0,.2);
}
#formation-content-header {
	padding: 3% 0;
}
#formation-content-header #icons{
	width:calc(100% - 300px);
	position:relative;
	left:-3%;
}
#formation-content-header #icons article{
	display: inline-block;
	width: calc(85% / 3);
	position: relative;
	font-size: .85em;
}
#formation-content-header #icons article img{
	width:25%;
	vertical-align: baseline;
	text-align: center;
}
#formation-content-header #icons article a{
	color:#444;
}
#formation-content-header #enroll{
	width:300px;
	box-sizing:border-box;
	position: relative;
	right: -8px;
}
#formation-content-header #enroll .button{
	display: inline-block;
	width: 100%;
	position: relative;
	box-sizing: inherit;
}
#formation-content-header #enroll .info{
	background: #fcfcfc;
	position: relative;
	padding: 2% 7% 4% 7%;
	color: #666;
	border:1px solid #f1f1f1;
	margin: auto;
	width: 95%;
	box-sizing: inherit;
	text-align: justify;
	font-size: .975em;
	line-height: 1.55;
}
#formation-content-header #enroll .info .title-item{
	padding:10px 0; 
	font-size: .95em;
}
#formation-content-header #enroll .info .title-item.note-ttl{
	padding-bottom: 0;
}
#formation-content-header #enroll .info .title-item h4{
	display: inline;
	color:#222;
}
#formation-content-header #enroll .info .title-item img{
	height:14px;
	margin-bottom: -2px;
}
#formation-content-header .partner{
	display: table;
	position: relative;
	top: 6vh;
	padding:3% 0;
	color:gray;
	text-align: left;
}
#formation-content-header .partner img{
	line-height: 40px;
	vertical-align: middle;
	height: 40px;
}
#formation-wrapper #formation-main-content{
	text-align: justify;
}
#formation-wrapper .formation-additional-info{
	background: #f6f6f6;
	border:1px solid #eee;
	color: #555;
	padding: 20px;
	margin-bottom: 10px;
	width: calc(100% + 230px);
}
#formation-wrapper #instructeurs.formation-additional-info{
	background: #fbfbfb;
	border-color: #f6f6f6;
	margin-top: 15px;
}
#formation-main-content{
	color: #333;
    width: calc(100% - 310px);
    line-height: 170%;
    font-weight: 400;
}
#formation-main-content h1, #formation-main-content h2, #formation-main-content h3, #formation-main-content h4, #formation-main-content h5, #formation-main-content h6{
	font-family: 'Nexa Bold';
	margin-bottom: 2px;
	margin-top: 5px;
}
#formation-main-content h1{
	margin-top:22px;
	margin-bottom: 5px;
	color: #307699;
}
#formation-main-content h2, #formation-main-content h3{
	color: #777;
}
#formation-wrapper .formation-additional-info{
	margin: 5px 0;
}
#formation-wrapper .formation-additional-info header{
	margin-top: -9px;
	position: relative;
}
#formation-wrapper .formation-additional-info header.show::before{
	content: 'Voir';
	float: left;
}
#formation-wrapper .formation-additional-info header.show::after{
	content: '';
	background-image: url('../img/arrow2.svg'); 
	background-position: right center;
	position: relative;
	height:26px;
	width: 26px;
	background-size: cover;
	float: right;
	right: 0;
	margin-top: calc(-26px / 8);
	margin-right: -20px;
	opacity: .8;
}
#formation-wrapper .formation-additional-info header.hide::before{
	content: 'Cacher';
	float: left;
}
#formation-wrapper .formation-additional-info header.hide::after{
	content: '';
	background-image: url('../img/arrow3.svg'); 
	position: relative;
	height:26px;
	width: 26px;
	background-size: cover;
	float: right;
	right: 0;
	margin-top: calc(-26px / 8);
	margin-right: -5px;
	opacity: .8;
}
.formation-additional-info-text{
	margin-top: 30px;
	border-top: 1px solid #eee;
	padding-top: 10px;
	color: #666;
}
.formation-additional-info-text h2, .formation-additional-info-text h3, .formation-additional-info-text h4, .formation-additional-info-text h5, .formation-additional-info-text h6{
	margin-top: 5px;
}
.formation-additional-info-text p{
	position: relative;
	box-sizing:border-box;
	width: 100%;
}
#formation-wrapper .instructeur{
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	padding: 10px;
	width:100%;
	border: 1px solid transparent;
}
#formation-wrapper .instructeur .right{
	width: calc(100% - 90px - 7px);
	box-sizing:border-box;
	padding-left:20px;
}
#formation-wrapper .instructeur .pack-formation-right{
	width: calc(100% - (90px * 1.33) - 7px);
}
#formation-wrapper .inst-img{
	height: 90px;
	width: 90px;
	float: left;
	display: inline-block;
	box-sizing:border-box;
	margin:0 7px 5px 0;
	border-radius: 50%;
}
#formation-wrapper .pack-formation-img{
	width: calc(90px * 1.33);
	height:auto;
	border-radius: 0;
}
#formation-wrapper .inst-name{
	padding-bottom: 5px;
	margin-top: 0;
}
#formation-wrapper .inst-name::after{
	content: attr(data-headline);
	position: absolute;
	display: inline-block;
	font-size: .9em;
	margin-left: 3px;
	font-weight: 300;
	color:#888;
	text-transform: none;
	font-family: 'Open Sans';
}
/**/
#terms{
	margin: 3% 0;
	color: #555;
	line-height: 1.5em;
	text-align: justify;
}
#terms h1, #terms h2, #terms h3{
	margin: 6px 0 2px 0;
	font-family: 'Nexa Bold';
}
#terms h1{
	color: dodgerblue;
	margin-top: 10px;
}
#terms h2{
	font-size: 1.3em;
	color:#555;
}
#terms h3{
	font-size: 1.15em;
	color: #666;
}
/**/
.cxn-btm{
	height:12vh;
	padding-top: 10vh;
	opacity: .1;
	display: block;
	width: 100%;
	background:url(../img/vintage-floral.svg) no-repeat center bottom;
	background-size: contain;
	background-origin: content-box;
}
#edit-bar a{
	padding:5px 15px 10px 10px;
	background: #f3f3F3;
	color:#444;
	font-size: 1.1em;
	position: absolute;
	right:20px;
	border:1px solid #e8e8e8;
	box-shadow: 0 5px 15px rgba(0,0,0,.1), -2px 2px 0 rgba(0,0,0,.02);
}
#edit-bar a:hover{
	opacity: 1;
}
#edit-bar a.edit::before{
	vertical-align: baseline;
	content: '';
	height:24px;
	width:24px;
	margin-bottom: -3px;
	display: inline-block;
	background: url(../img/pencil.svg) no-repeat bottom;
	background-size: contain; 
}
@media all and (max-width: 600px) {
	input[type=checkbox] + label, input[type=radio] + label{
		padding-left: 4vh;
		font-size: .96em;
	}
	input[type=checkbox] + label:before, input[type=radio] + label:before{
		width:2.8vh;
		height:2.8vh;
	}
	#header{
		position: fixed;
		height: 10vh; 
	}
	#header #logo{ 
		left: 0 !important;
		padding-left: 0 !important;
	}
	#header #logo img{
		height:8vh;
		padding:5px; /*bar (outerheight - imgheeight)/2*/
		opacity: 1 !important;
	} 
	#header #logo #title, .logoxn{
		display: none !important;
	}
	#header #menu::before{
		content:'';
		position: fixed;
		top:0;
		right:5px;
		height:10vh;
		width:10vh;
		cursor: pointer !important;
		box-sizing:border-box;
		background: url(../img/menu.svg) no-repeat center; 
		filter:invert(100%);
		-webkit-filter:invert(100%);
		background-size: contain;
		background-color: rgba(255,255,255,.03);
	}
	#header #menu{
		position: fixed !important;
		height: auto !important;
		width: 100% !important;
		padding: 0 !important;
		background: #1a7bd9; 
		top:10vh; /*bar*/
		text-align: right;
	}
	.panel #header #menu article{
		background-color: #555;
	}
	.panel #header #menu article:nth-child(2n+1){
		background-color: #444;
	}
	#header #menu article:nth-child(2n+1){
		background-color: #3089e0;
	}
	#header #menu article{
		display: none;
		letter-spacing: 1px;
		text-align: center;
	}
	#header #menu article a{
		display: block !important;
		padding: 1.2vh 6vw;
		color:#fff !important;
	}
	#header #menu article:active{
		background: dodgerblue !important; 
	}
	/*index*/
	#Home{
		height: 50vh !important;
		background-position: 0 10%;
	}
	#Home .wrap #Y{
		display: none !important;
	}
	#Home #become-a {
		left: 5vh !important;
		line-height: 8vh;
		max-width: calc(99vw - 5vh);
		font-size:5vh;
	}
	#home-head-nav{
		width: 90vw !important;
		text-align: center !important;
	}
	#home-head-nav article img {
		height: inherit !important; 
		width: 15vw;
	}
	#catalog #spotlight-ribbon article{
		width:100% !important;
		margin:0 0 2vh 0;
	}
	#catalog #spotlight-ribbon article:last-child{
		margin-bottom: 0;
	}
	#catalog #spotlight-ribbon .spotted-title{
		position: relative !important;
		opacity: 1 !important;
		background: #f3f3f3 !important;
		box-sizing:border-box;
		border:1px solid #eee; 
		margin-top: -6px;
		height: auto !important;
	}
	#catalog #spotlight-ribbon .spotted-title h2{
		color:#777 !important;
		margin:0;
		padding: 10px 0;
		font-size: 1.1em;
	}
	#home-catalog-bottom{
		padding-top: 5vh;
	}
	#home-catalog-bottom aside{
		display: none !important;
	}
	#contact ::-webkit-input-placeholder { /* WebKit browsers */
		color: rgba(0,0,0,.4);
	}
	#contact :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
		color: rgba(0,0,0,.4);
	}
	#contact ::-moz-placeholder { /* Mozilla Firefox 19+ */
		color: rgba(0,0,0,.4);
	}
	#contact :-ms-input-placeholder { /* Internet Explorer 10+ */
		color: rgba(0,0,0,.4);
	}
	#contact #contactform label{
		display: none;
	}
	#contact #contactform input, #contact #contactform textarea{
		width: 80vw !important;
	}
	/*catalog*/
	.catalog>#content .left, .catalog #content>.right, #content .formation .item-details{
		width: inherit !important;
		float:none !important;
		border:0;
		min-height: 0;
		overflow:auto;
	}
	.catalog>#content>.left{
	    position: relative;
	    background-color: white;
	    width: 100% !important;
	    display: flex;
	}
	#content .formation .summary p{
		display: none;
	}
	#content .formation .summary{
		line-height: auto;
		background-color: #f4f4f4;
    	border: 1px solid #eee;
	}
	#content .formation .thumb{
		width: 100% !important;
		border:0;
	}
	#content .formation[data-level] h3::after{
		display: none;
	}
	#content .formation h3{
		padding: 0 10px 10px 10px;
    	box-sizing:border-box;
    	width: 100%;
    	font-size: .9em;
    	text-align:center;
    	line-height: 1.3;
	}
	#main .wrapper header #search-form {
	    position: static !important;
	    margin: 2vh 0 1vh -8px;
	    display: inline-block;
	    z-index: inherit !important;
	}
	#main .wrapper header #main-title{
		margin-top: 3vh;
	}
	#main .wrapper header #search-form input {
		padding: 13px 15px;
		display: inline-block;
		border: 0;
	    font-size: 1.2em;
	    width: 90vw;
	    background-color: dodgerblue;
	    box-sizing: border-box;
	    color: white;
	    position: relative !important;
	}
	#main .wrapper header #search-form input[type=submit]{
		position: absolute !important;
	    right: 22px;
	    bottom: 6px;
	}
	#content .left nav article a, #content .left nav article{
		padding-top:2vh;
		padding-bottom:2vh;
	}
	/**/
	#footer .column:nth-child(1), #footer .column:nth-child(2), #footer .column:nth-child(3){
		display: none !important;	
	} 
	#footer .column:nth-child(4){
		width: 90vw !important;
		text-align: center !important;
		margin-bottom: 5vh;
		margin-left: -3vw;
	}
	#footer .social-link img{
		width: 20vw;
		margin-top:10px;
		height:auto !important;
	}
	/*inscr*/
	.form-page label:not(.radio){
		width: 60vw;
		display: block;
		text-align: left;
	}
	.form-page label.radio{
		width: 60vw;
    	float: right;
	}
	.form-page input, .form-page select{
		width: 100%;
		margin-bottom: 20px;
		padding: 8px;
	}
	/**/
	.form-page .cxn{
		float: none !important; 
	}
	.form-page .cxn fieldset{
		white-space: initial;
	}
	.form-page .cxn #ins{
		width: 100%;
		box-sizing:border-box;
	}
	/**/
	#formation-title{
		font-size:1em !important;
	}
	/**/
	#formation-main-content{
		width: 100%;
	}
	.formation-additional-info{
		width: 90% !important;
	}
	#formation-content-header>*{
		float: none !important;
		width: 100% !important;
		left: 0;
	}
	#formation-content-header #enroll{
		margin-bottom: 20px;
	}
	#formation-content-header #icons{
		margin-left: 5%;
	}
	#formation-content-header #icons article img{
		width: 100%;
	}
	#formation-content-header #icons article{
		width: calc(95% / 3);
	}
	#formation-content-header #icons article h3{
		display: none;
	}
	#formation-wrapper .inst-name::after{
		display: none;
	}
	/*HOMEPAGE*/
	/*add spaces between partner lines*/
	#partners .wrapper article{
		margin:10px !important;
	}
	#partners{
		text-align: center;
	}
	/*Fix the info width in the mobile devices*/
	#info{
		text-align: center !important;
	}
	#info .pres.left, #info #enavant.right{
		width: 100% !important;
	}
	#info p{
		width: 88% !important;
	}
	/*catalog*/
	#catalog-pres, #catalog #home-catalog-top img{
		display: none;
	}
	#catalog #home-catalog-top .button{
		width: 90%;
		text-align: center;
		float:none;
		font-weight: 400; 
	}
	#catalog #spot>h2{
		text-align: center;
    	line-height: 1.2;
	}
	#catalog #spotlight-ribbon{display:block !important;}
	/*Testimonials*/
	.cd-testimonials p{
		text-align: center !important;
   		line-height: 1.4 !important;
	}
	.cd-author{
		float: none !important;
		right:0 !important;
	}
	/*FORM*/
	#contact #contactform .button{
		margin-top:20px;
	}
	/*END-HOMEPAGE*/
	/*Formation/Pack*/
	#formation-content-header .partner{
		margin-bottom: 7vh;
	}
	/*Instructeur*/
	#formation-wrapper .inst-img{
		float: none !important;
		left: calc(50% - 45px);
	}
	#formation-wrapper .instructeur .right{
		width: 100%;
		float: none !important;
    	padding: 0;
	}
	#formation-wrapper .inst-name{
		text-align: center;
		border-bottom: 3px solid;
    	padding: 5px 0 15px 0;
    	margin-bottom: 20px;
	}
	.formation-additional-info#programme{
		overflow: hidden;
	}
	#formation-wrapper .formation-additional-info header.show::after{
		margin-top: auto;
		position: absolute;
		top: 5px;
	}
	#formation-wrapper .formation-additional-info header.show .left, #formation-wrapper .formation-additional-info header.hide .left{
		float: none !important;
    	text-align: left;
	}
	/*ADMIN PANEL*/
	.panel #content>.left{
		height:auto !important;
	}
	.panel #content>.right::before{
		outline:0 !important;
	}
	#infobox{
		bottom:0;
		right:0;
		max-width: none;
		width:100%;
		padding: 2vh 5vh;
		font-size: 2.8vh;
	}
	#dash-form input[type=checkbox] + label, #dash-form input[type=radio] + label{
		width:90% !important;
	}
	#dash-form textarea, #dash-form input, #dash-form select{
		width:100% !important;	
	}
	#dash-form label{
		float:left;
	}
	#dash-form .mce-container{
		width: 100% !important;
	}
	#dash-form .parameters label{
		width: auto !important;
	}
	.panel #dash-wrapper .item h3{
		font-size:1em;
	}
	.panel #dash-wrapper .item h3>a{
		display:block;
	}
	.panel #dash-wrapper .item h3>span.right{
		float: none !important;
		text-align: right;
		right: 0;
		z-index: 1;
		border-radius: 3px 0 3px 3px;
		position: absolute;
		top: 35px;
		background: turquoise;
		border: 1px solid mediumturquoise;
		padding: 5px 3px 0;
		display: none;
		margin-top:-1px;
	}
	.panel #dash-wrapper .item .edit-icons-trigger{
		display: block !important;
		font-size:22px;
		color:#333;
		font-weight: 500;
		padding: 2px 5px;
		position: absolute;
		right: 0;
		top: 6px;
		border-radius: 4px 4px 0 0;
		transition:.5s background;
	} 
	.panel #dash-wrapper .item .edit-icons-trigger.on{
		background: mediumturquoise;
	}
	.panel #dash-wrapper .student-info section{
		width:100% !important;
		position: static !important;
	}
	.panel #see-catalog{
		text-align: center;
		margin-bottom:4vh;
	}
	.panel #see-catalog img{
		margin: auto;
	}
	.panel #dash-bar #admin-nav	.buttonholder{
		float:none !important;
		width: 100%;
    	text-align: center;
	}
	.panel #dash-bar #admin-nav	.buttonholder .button{
		line-height:4;
	}
}