/* html5doctor.com Reset v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) - http://cssreset.com */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,input,textarea,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; box-sizing: border-box;}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
a,label[for],button,select{cursor:pointer;}
ins{background-color:transparent;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select,textarea,button,a{font-family:inherit;color:inherit;font-size:inherit}
input,select{vertical-align:middle;height:auto;line-height:1.2em}

* {
	margin: 			0;
	padding:			0;
	border: 			0;
	box-sizing: 		border-box;
}

.hide 		{	display:	none!important		}
.tcenter 	{	text-align:	center!important;	}
.tleft		{	text-align:	left!important;		}
.tright		{	text-align:	right!important;	}

.s08        {   font-size:  .8em!important      }
.s09        {   font-size:  .9em!important      }
.s11        {   font-size:  1.1em!important     }
.s12        {   font-size:  1.2em!important     }

.pad0       {   padding:    0!important         }
.pad05      {   padding:    .5em!important      }
.pad1       {   padding:    1em!important       }
.pad2       {   padding:    2em!important       }

.w10p { width: 10%; }
.w20p { width: 20%; }
.w25p { width: 25%; }
.w30p { width: 30%; }
.w33p { width: 33%; }
.w40p { width: 40%; }
.w50p { width: 50%; }
.w60p { width: 60%; }
.w66p { width: 66%; }
.w70p { width: 70%; }
.w75p { width: 75%; }
.w77p { width: 77%; }
.w80p { width: 80%; }
.w90p { width: 90%; }
.w100p { width: 100%; }

.hidden-input {
    position:           absolute;
    z-index:            -1;
    appearance:         none;
    visibility:         hidden;
    width:              1px;
    height:             1px;
    padding:            0!important;
    margin:             0!important;
}

/* BODY */
html {
	min-height:       	100vh;
}
body {
    --header-back:      #2e2e2e;
    --header-text:      #fff;

    --prompt-valid-back:#00b100;
    --prompt-valid-text:#eee;
    --prompt-error-back:#da0000;
    --prompt-error-text:#eee;

    --form-color1:      #09a9e3;

    --red:              #c70000;
    --green:            #00c600;

    --menu-width:       18rem;
    --menu-border:      #fff;
    --menu-text:        #fff;
    --menu-text-hover:  #ddd;
    --menu-text-active: #09a9e3;
    --menu-back:        #222;
    --menu-back-active: #444;
    --menu-group-text:  #fff;
    --menu-group-back:  #444;
    --menu-group-border:#777;
}

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #444; }
h1 { font-size: 2.6em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
h6 { font-size: 1.2em; }

h1[data-num],h2[data-num],h3[data-num],h4[data-num],h5[data-num],h6[data-num]{
    position: relative;
}
h1[data-num]::after,h2[data-num]::after,h3[data-num]::after,h4[data-num]::after,h5[data-num]::after,h6[data-num]::after{
    content:    attr(data-num);
    position:   absolute;
    top:        0;
    right:      0;
    padding:    1em;
    height:     1em;
    font-size:  .7em;
    text-align: right;
    opacity:    .5;
}

h1.title,h2.title,h3.title,h4.title,h5.title,h6.title,
h1.subtitle,h2.subtitle,h3.subtitle,h4.subtitle,h5.subtitle,h6.subtitle {
    position:       relative;
    padding:        .5em;
    border-bottom:  1px solid #ccc;
}
h1.title.noborder,h2.title.noborder,h3.title.noborder,h4.title.noborder,h5.title.noborder,h6.title.noborder{
    border:         0;
}
h1.title-toggle::after,h2.title-toggle::after,h3.title-toggle::after,h4.title-toggle::after,h5.title-toggle::after,h6.title-toggle::after {
    content:        '';
    position:       absolute;
    top:            .5em;
    right:          1em;
    display:        block;
    width:          .5em;
    height:         .5em;
    border-left:    .2em solid #666;
    border-bottom:  .2em solid #666;
    transform:      rotate(-45deg);
}
h1.title-toggle.toggle-closed::after,h2.title-toggle.toggle-closed::after,h3.title-toggle.toggle-closed::after,h4.title-toggle.toggle-closed::after,h5.title-toggle.toggle-closed::after,h6.title-toggle.toggle-closed::after {
    transform:      translateY(.25em) rotate(-225deg);
}

ul{ list-style-type: none; }

a { text-decoration: none; }

select {
    appearance:     initial;
    font-size:      inherit;
    font-family:    inherit;
    border:         0;
    border-radius:  0;
	background: 	none;
}
select.rounded {
    padding: 0 1em;
    border: 1px solid #ccc;
    border-radius: 2em;
}


/**********************************************************/
/**** ANIMATIONS ******************************************/
/**********************************************************/

@keyframes fadeIn {
	0%		{ opacity:	0; }
	100% 	{ opacity:	1; }
}
@keyframes fadeOut {
	0%		{ opacity:	1; }
	100% 	{ opacity:	0; }
}

@keyframes menuSlideIn {
	0%		{ transform:	translateX(-100%); }
	100% 	{ transform:	translateX(0); }
}
@keyframes menuSlideOut {
	0%		{ transform:	translateX(0%); }
	100% 	{ transform:	translateX(-100%); }
}

@keyframes slideInRight {
	0%		{ transform:	translateX(100%); }
	100% 	{ transform:	translateX(0); }
}
@keyframes slideInLeft {
	0%		{ transform:	translateX(-100%); }
	100% 	{ transform:	translateX(0); }
}
@keyframes slideInTop {
	0%		{ transform:	translateY(-100%); }
	100% 	{ transform:	translateY(0); }
}
@keyframes slideInBottom {
	0%		{ transform:	translateY(100%); }
	100% 	{ transform:	translateY(0); }
}



/**********************************************************/
/**** MAIN ************************************************/
/**********************************************************/
body {
	width:        		100%;
	height:       		100%;
	font-family:		Arial, Helvetica, sans-serif;
	font-size:			16px;
    padding-left:       var(--menu-width);
    background-color:          #ddd;
    -webkit-font-smoothing:    antialiased;

    overflow-x: hidden;
}
#main {
    position:           relative;
    padding-top:        3.5rem;
}



/**********************************************************/
/*** 	MENU
/**********************************************************/

/**********************************************************/
/**** NAV *************************************************/
/**********************************************************/
#menu {
    position:           fixed;
    z-index:            2;
    top:                0;
    left:               0;
	width: 				var(--menu-width);
	height: 			100%;
    min-height:         100vh;
    color: 				var(--menu-text);
    overflow-y: 		auto;
    border-right: 		1px solid rgba(255,255,255,.2);
}
#menu-wrapper {
    display:            flex;
    flex-direction:     column;
    justify-content:    space-between;
	min-height:         100%;
	margin:             0;
	background:         var(--menu-back);
}

.show-menu #menu {
    display:            block;
}
.show-menu #menu-wrapper {
	animation:          menuIn 250ms cubic-bezier(0,.6,.4,1);
}

@keyframes menuIn {
	0%   { transform: translate3d(-100vw,0,0);}
	100% { transform: translate3d(0,0,0);}
}



#menu #menu-items {
    display:            inline-block;
    width:              100%;
}
#menu #menu-items::before {
	content:            '';
	display:			block;
	width:				100%;
	padding-top:		55%;
	background-image:	url(../images/header_logo.jpg);
    background-position:  center;
    background-repeat:  no-repeat;
    background-size:    cover;
}
#menu .menu-item {
	display:		    list-item;
    width:              100%;
	border-bottom: 		1px solid var(--menu-border);
}
#menu .menu-item .menu-link {
    display:		    inline-block;
    width:              100%;
	color:			    var(--menu-link);
	padding:		    1.5em 1em;
	text-decoration: 	none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select:        none;
}

#menu .menu-item a:hover {
    color:			    var(--menu-link-hover);
    background-color:   var(--menu-back-hover);
}
#menu .menu-item a.active {
    color:			    var(--menu-link-active);
    border-left:        var(--menu-link-active);
    background-color:   var(--menu-back-active);
}

#menu .menu-group .group-link {
	position: 			relative;
	display:		    block;
	padding:		    .7em 1em;
	text-decoration: 	none;
	color:			    var(--menu-group-text);
	background:			var(--menu-group-back);
	border-bottom: 		1px solid var(--menu-group-border);
	user-select: 		none;
}
#menu .menu-group .group-link:hover {
    color:              var(--menu-group-text-hover);
}
#menu .menu-group .group-link::before {
	content:			'';
	position: 			absolute;
	top:				.9em;
	right:				1em;
	width:				.4em;
	height:				.4em;
	border-right:		1px solid #fff;
	border-bottom:		1px solid #fff;
	transform:			rotateZ(45deg);
}
#menu .menu-group.open .group-link::before {
	top:				1.1em;
	transform:			rotateZ(-135deg);
}

#menu .menu-item .menu-link:hover {
    background-color:   var(--menu-back-hover);
}
#menu .menu-item .menu-link.active {
	color:			    var(--menu-text-active);
    border-left:        .4em solid var(--menu-text-active);
}
#menu .menu-group .menu-submenu {
	display:		none;
    list-style:     none;
}
#menu .menu-group.open .menu-submenu {
	display:		block;
}
#menu .menu-group .menu-submenu .menu-link {
	padding-left:	1.4em;
}

#menu #menu-logout {
    font-size:          .8em;
    text-align:         center;
    opacity:            .7;
}
#menu #menu-logout span {
    display:            block;
    padding:            1em;
    color:              var(--menu-link);
}




/**********************************************************/
/**** CONTENT *********************************************/
/**********************************************************/
#content {
    width:              100%;
    max-width:          1150px;
    padding:            .5em;
    margin:             0 auto;
}

#content .content-block {
	display: 			block;
    margin-bottom:      1em;
    width:              100%;
    height:             100%;
    background:         #fff;
    overflow-x:         auto;
    border:             1px solid #aaa;
    box-shadow:         0 .1em .25em rgba(0,0,0,.3);
}
#content > div:last-child {
    margin-bottom:      0;
}

#content > div p {
    padding-bottom:     .5em;
}

#content .content-footer {
    display:        flex;
    flex-direction: row;
    gap:            1em;
    margin-top:     2em;
    padding:        1em;
    border-top:     1px solid #ccc;
    background-color: rgba(0,0,0,.03);
}





/**********************************************************/
/**** BOUTONS *********************************************/
/**********************************************************/
a.button,
button.button,
input[type='submit'].button {
    display: 			inline-block;
    width: 				100%;
    color: 				#ffffff;
    cursor:				pointer;
    text-decoration: 	none;
    text-transform:  	uppercase;
    text-align:         center;
    font-size:          .9em;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: 	none;
    user-select: 			none;
}

a.button, button.button {
    position:       relative;
	width:			auto;
    height:         auto;
    color: 			#666;
}
a.button,
button.button,
.row span label[for],
.segments a {
	background-color:		rgba(0,0,0,0);
}
a.button:hover,
button.button:hover,
.row span label[for]:hover,
.segments a:hover {
	background-color:		rgba(0,0,0,.05);
}


a.button > span,
button.button > span {
	display: 			block;
	padding:			1em 1.5em;
	font-size: 			1em;
}
a.button > span,
button.button > span,
input[type='submit'].button {
	color:              #09a9e3;
}

.button.button__delete > span, button.button.button__delete > span { color: var(--red); }
.button.button__valid > span, button.button.button__valid > span { color: var(--green); }


a.button.rounded,
button.button.rounded,
input[type='submit'].button.rounded {
	background-color:		#09a9e3;
	-webkit-border-radius: 	5em;
	border-radius: 			5em;
}
a.button.bordered,
button.button.bordered,
input[type='submit'].button.bordered {
	-webkit-border-radius: 	5em;
	border-radius: 			5em;
	box-shadow: 			inset 0 0 0 .1em #09a9e3;
	overflow: 				hidden;
}
a.button.bordered:hover,
button.button.bordered:hover,
input[type='submit'].button.rounded:hover {
    color:		#fff;
	background-color:		rgba(0,0,0,0);
}

a.button.rounded > span,
button.button.rounded > span,
input[type='submit'].button.rounded > span {
	color:					#fff!important;
}



.button.rounded.button__delete, button.button.rounded.button__delete { background-color: red!important; }
.button.rounded.button__valid, button.button.rounded.button__valid { background-color: darkgreen!important; }
.button.bordered.button__delete { box-shadow: inset 0 0 0 .1em red!important; }
.button.bordered.button__delete > span { color: red!important; }
.button.bordered.button__delete:hover { background: red!important; }
.button.bordered.button__delete:hover > span { color: #fff!important; }
.button.bordered.button__valid { box-shadow: inset 0 0 0 .1em darkgreen!important; }
.button.bordered.button__valid > span { color: darkgreen!important; }
.button.bordered.button__valid:hover { background: darkgreen!important; }
.button.bordered.button__valid:hover > span { color: #fff!important; }

/**********************************************************/
/**** BUTTONS LIST ****************************************/
/**********************************************************/


/**********************************************************/
/**** GRID LIST *****************************************/
/**********************************************************/

.content-grid {
    display:        flex;
    flex-direction: row;
    align-content:  flex-start;
}
.content-grid.grid-vertical {
	flex-direction: column;
}
.content-grid .grid-cell {
    display:        flex;
    flex-direction: row;
    align-items:    center;
}
.content-grid .grid-cell.vtop      { align-items: flex-start;  }
.content-grid .grid-cell.vmiddle   { align-items: center;      }
.content-grid .grid-cell.vbottom   { align-items: flex-end;    }

.content-grid .grid-cell.cell-left    { justify-content: flex-start;  }
.content-grid .grid-cell.cell-center  { justify-content: center;      }
.content-grid .grid-cell.cell-right   { justify-content: flex-end;    }

/**********************************************************/
/**** FORM ************************************************/
/**********************************************************/
.content-form {
    display:            flex;
    flex-direction:     row;
    width:              100%;
}
.content-form-col {
    display:            flex;
    flex-direction:     row;
    align-items:        center;
}
.content-form-col.vtop      { align-items: flex-start;  }
.content-form-col.vmiddle   { align-items: center;      }
.content-form-col.vbottom   { align-items: flex-end;    }

.content-form label,
.content-form input,
.content-form select,
.content-form textarea {
    padding:            .7em;
	max-width:			100%;
}
.content-form input.text,
.content-form select.text,
.content-form textarea.text {
    color:              inherit;
    background:         rgba(0,0,0,.1);
    outline:            0;
    border:             0;
    outline-color:      rgba(0,0,0,0);
}
.content-form input.text:focus,
.content-form select.text:focus,
.content-form textarea.text:focus,
.content-form input.text:active,
.content-form select.text:active,
.content-form textarea.text:active {
    outline-color:      rgba(0, 178, 255, 0.6);
    outline-width:      1px;
    outline-style:      auto;
    background:			rgba(0,0,0,.15);
}
.content-form input[readonly],
.content-form select[readonly],
.content-form textarea[readonly] {
    opacity:        .5;
    outline-style:  none!important;
}


.content-form label.icon-flag::before {
    content:        '';
    display:        inline-block;
    vertical-align: baseline;
    margin-right:   .35em;
    width:          1em;
    height:         .8em;
    background-size:    cover;
    background-position: center;
    background-repeat:  no-repeat;
}

.content-form-fakeinput {
    display:            block;
    padding:            .7em;
	max-width:			100%;
    color:              inherit;
    background:         rgba(0,0,0,.05);
    border:             0;
    outline:            0;
    outline-color:      rgba(0,0,0,0);
}




/**********************************************************/
/*** 	LIBRARY AVAILABLE AT
/***	admin/assets/images/icons/
/**********************************************************/

.icon-add::before {
	background-image:	url(../images/icons_custom/icon_add.png);
}
.icon-delete::before {
    background-image:	url(../images/icons/white/close.png);
}
.icon-cancel::before {
	background-image:	url(../images/icons_custom/icon_cancel.png);
}
.icon-list::before {
	background-image:	url(../images/icons/white/list.png);
}
.icon-prev::before {
	background-image:	url(../images/icons/white/arrow-left2.png);
}
.icon-next::before {
	background-image:	url(../images/icons/white/arrow-right2.png);
}
.icon-valid::before {
    background-image:	url(../images/icons_custom/icon_tick.png);
}
.icon-search::before {
	background-image:	url(../images/icons/white/search.png);
}
.icon-filter::before {
	background-image:	url(../images/icons/white/filter2.png);
}

.icon-zoomin::before {
	background-image:	url(../images/icons/white/zoom-in.png);
}
.icon-zoomout::before {
	background-image:	url(../images/icons/white/zoom-out.png);
}

.icon-stat::before {
	background-image:	url(../images/icons/white/stats.png);
}
.icon-pie::before {
	background-image:	url(../images/icons/white/pie.png);
}
/*
.icon-upload::before {
	background-image:	url(../images/icons/white/cloud-upload.png);
}*/
.icon-upload::before {
    background-image:	url(../images/icons_custom/icon_download.png);
}
.icon-mobile::before {
	background-image:	url(../images/icons/white/mobile.png);
}
.icon-tablet::before {
	background-image:	url(../images/icons/white/tablet.png);
}
.icon-desktop::before {
	background-image:	url(../images/icons/white/screen.png);
}
.icon-tv::before {
	background-image:	url(../images/icons/white/tv.png);
}

.icon-location::before {
	background-image:	url(../images/icons/white/location.png);
}
.icon-lock::before {
	background-image:	url(../images/icons/white/lock.png);
}
.icon-link::before {
	background-image:	url(../images/icons/white/link.png);
}
.icon-web::before {
	background-image:	url(../images/icons/white/earth.png);
}
.icon-email::before {
	background-image:	url(../images/icons/white/mail4.png);
}
.icon-folder::before {
	background-image:	url(../images/icons/white/folder-open.png);
}
.icon-image::before {
	background-image:	url(../images/icons/white/image2.png);
}
.icon-info::before {
	background-image:	url(../images/icons/white/info.png);
}
.icon-key::before {
	background-image:	url(../images/icons/white/key2.png);
}
.icon-overview::before {
	background-image:	url(../images/icons/white/eye2.png);
}

.icon-pdf::before {
	background-image:	url(../images/icons/white/file-pdf.png);
}

.icon-social-fb::before {
	background-image:	url(../images/icons/white/facebook.png);
}
.icon-social-tw::before {
	background-image:	url(../images/icons/white/twitter.png);
}
.icon-social-vimeo::before {
	background-image:	url(../images/icons/white/vimeo.png);
}
.icon-social-gp::before {
	background-image:	url(../images/icons/white/google-plus.png);
}
.icon-social-yt::before {
	background-image:	url(../images/icons/white/youtube.png);
}

.icon-flag.flag-fr::before {
	background-image:	url(../images/flag-fr.png);
}
.icon-flag.flag-en::before {
	background-image:	url(../images/flag-en.png);
}
.icon-flag.flag-es::before {
	background-image:	url(../images/flag-es.png);
}
.icon-flag.flag-nl::before {
	background-image:	url(../images/flag-nl.png);
}







/**********************************************************/
/**** PROMPT ***********************************************/
/**********************************************************/
#prompt {
    position:       fixed;
    z-index:        99;
    bottom:         1em;
    right:          1em;
    width:          20em;
	max-width:      90vw;
    transition:     transform 200ms ease-in-out;
    transform:      translateX(105%);
}
#prompt.show {
    transform:      translateX(0);
}
#prompt.hide {
	display:		none;
}
#prompt > span {
    display:        flex;
    flex-direction: row;
    flex-wrap:      nowrap;
    align-items:    center;
    justify-content: flex-start;
    width:          100%;
    padding:        2em 1em;
    color:          #fff;
    background:     #333;
    border-radius: 	.5em;
}
#prompt > span.valid {
    color:          var(--prompt-valid-text);
    background:     var(--prompt-valid-back);
}
#prompt > span.error {
    color:          var(--prompt-error-text);
    background:     var(--prompt-error-back);
}



/**********************************************************/
/**** RESPONSIVE ******************************************/
/**********************************************************/
@media (min-width:1px)  { body { font-size: 4.5vw } }
@media (min-width:500px){ body { font-size: 3vw } }
@media (min-width:710px){ body { font-size: 2.2vw } }
@media (min-width:800px){ body { font-size: 1em } }
@media (min-width:2000px){ body { font-size: 1.1em } #content { max-width: 1600px } }


@media (max-width: 1100px){
    body {
        --menu-width:   11rem;
    }
}

@media (max-width: 800px){
    body {
        padding-left:   0;
    }
    #menu {
        display:        none;
    }
}

@media (max-width: 600px){
    .tab-hide,.mob-hide { display:none }
    .content-form.mob-vertical {
        display:    block;
        width:      100%;
    }
    #content .content-footer.mob-vertical {
        flex-direction: column;
    }

    .mob-w10p { width: 10%; }
    .mob-w20p { width: 20%; }
    .mob-w25p { width: 25%; }
    .mob-w30p { width: 30%; }
    .mob-w33p { width: 33%; }
    .mob-w40p { width: 40%; }
    .mob-w50p { width: 50%; }
    .mob-w60p { width: 60%; }
    .mob-w66p { width: 66%; }
    .mob-w70p { width: 70%; }
    .mob-w75p { width: 75%; }
    .mob-w77p { width: 77%; }
    .mob-w80p { width: 80%; }
    .mob-w90p { width: 90%; }
    .mob-w100p { width: 100%; }

}
@media (max-width: 800px){
    .tab-hide { display:none }

    .tab-w10p { width: 10%; }
    .tab-w20p { width: 20%; }
    .tab-w25p { width: 25%; }
    .tab-w30p { width: 30%; }
    .tab-w33p { width: 33%; }
    .tab-w40p { width: 40%; }
    .tab-w50p { width: 50%; }
    .tab-w60p { width: 60%; }
    .tab-w66p { width: 66%; }
    .tab-w70p { width: 70%; }
    .tab-w75p { width: 75%; }
    .tab-w77p { width: 77%; }
    .tab-w80p { width: 80%; }
    .tab-w90p { width: 90%; }
    .tab-w100p { width: 100%; }

    #menu {
        padding-top:    3rem;
        z-index:    10;
        width:      100%;
        background: rgba(0,0,0,.3);
    }
    #menu #menu-wrapper {
        width:      80%;
        border-right:   1px solid rgba(255,255,255,.1);
    }
}