@media (max-width: 1600px) {
    html {font-size: 14px;}
}
@media (max-width: 1300px) {
    html {font-size: 13px;}
}
@media (max-width: 1200px) {
    html {font-size: 12px;}
}
@media (max-width: 1100px) {
    html {font-size: 11px;}
}
@media (max-width: 1000px) {
    html {font-size: 10px;}
}

@import url('https://fonts.googleapis.com/css?family=Archivo+Black&display=swap');
@font-face {font-family: "AvantGarde";src: url(itc-avantgardegothic-book.ttf);}
@font-face {font-family: "AvantGarde Medium";src: url(itc-avantgardegothic-medium.ttf);}
@font-face {font-family: "AvantGarde Bold";src: url(itc-avantgardegothic-bold.ttf);}
@font-face {font-family: "SanofiSerif-Regular";src: url(SanofiSerif-Regular.ttf);}
@font-face {font-family: "SanofiSans-Regular";src: url(SanofiSans-Regular.ttf);}
@font-face {font-family: "SanofiSans-Light";src: url(SanofiSans-Light.ttf);}
@font-face {font-family: "SanofiSans-Bold";src: url(SanofiSans-Bold.ttf);}
@font-face {font-family: "SanofiSerif-BoldItalic";src: url(SanofiSerif-BoldItalic.ttf);}
@font-face {font-family: "SanofiSerif-Bold";src: url(SanofiSerif-Bold.ttf);}

html {
	height:100%;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

body {color: var(--colorBrightPurple); font-family: Arial, Helvetica, sans-serif; font-size: 16px; height: 100%;}
body#enter {box-sizing: border-box;}

a {text-decoration: none; color: #111c4e}
img {border: none;}

:root {
  --colorBrightPurple: #7a00e6;
  --colorBrightPurple50: #b389d7;
  --colorBackground: #f4f2f6;

}

.bold {font-weight:bold;}
.italic {font-style: italic;}
.uppercase {text-transform: uppercase;}
.percent100 {width: 100%;}
.percent50 {width: 49%; box-sizing: border-box;}
.percent75 {width: 75%;}
.percent33 {width: 33%;}
.percent66 {width: 65%;}
.inline {display:inline-block; vertical-align: top;}
.textCenter {text-align: center;}

.bgWhite {background-color: #fff}
.bgBlue {background-color: #23004c; color: #fff}
.bgBlueLight {background-color: #becce9; color: #fff}
.bgRed {background-color: #df0024; color: #fff}

.bgGreen1 {background-color:#6f00d0; color:#fff;}

.blueFont {color: #525ca3;}


div.container {min-height: 85%; width: 100%;}
a.hrefDownload {display: block; width: 1em; height: 1em; background-image: url('../images/icon_download_off.png'); background-size: cover;}
a.hrefDownload:hover {background-image: url('../images/icon_download_on.png')}

div.flash-danger {background-color:red; color: white; padding: 0.25em 1em; margin-top: 1em;}
div.flash-success {background-color:green; color: white; padding: 0.25em 1em; margin-top: 1em;}
div.flash-notice {background-color:orange; color: white; padding: 0.25em 1em; margin-top: 1em;}


/****** ENTER *******/
div.enter {width: 49.5%; float:right;}
div.enterBG {background: url('../images/background-enter.jpg'); background-size: cover; width: 50%; height: 100%; float:left; vertical-align: top;}
div.enterLogo {width: 32%; padding: 15% 0 5% 0;  margin-left:5%; }
div.enterLogo img {width: 40vh; vertical-align: middle;}
div.enterTitle {font-family: SanofiSerif-BoldItalic; font-size: 1.4em; width: 55%;margin-bottom: 0.8em;  font-weight: bold; line-height: 1.2em; color: var(--colorBrightPurple); }
div.enterText {margin-left:10%; font-size: 1.4rem; line-height: 1.3em; font-weight: bold; color:#000;}
div.enterTextSteps {font-family: SanofiSerif-BoldItalic; font-weight: bold; margin: 3rem 0 0 0; font-size:1.1em; color: var(--colorBrightPurple); font-style: italic;}
div.enter a {display: inline-block; border-radius: 0.4rem; text-transform: uppercase; text-align: center; width:12rem; padding: 1rem; font-size: 1.5rem; margin-top: 1.8rem; }
div.enter a:hover {background-color: var(--colorBrightPurple);}

/****** LOGIN *******/
div.login {}
div.login-content {margin: auto; margin-top: 4em; width:fit-content; padding: 2em; color:#525ca3;}
div.login-form {margin-top: 1.5em;}
div.login h1 {}
div.login button {border-radius: 0.4rem; text-transform: uppercase; text-align: center; padding: 0.5rem 4em; font-size: 1.1rem; margin-top: 1.8rem; background-color:#525ca3; border: none; color:#fff; font-weight: bold;}
div.login button:hover {background-color: #5f6bbc;}

/****** LOGIN *******/
div.register label {margin-right: 1em;}
div.register form div {margin: 0.2em 0em;}
div.register button {margin-top: 1em;}

/****** HEADER *******/
div.header {width: 98%; padding: 0.8rem; position: fixed; top: 0; left: 0; box-shadow: 0px 0.15rem 0.5rem #666; z-index: 1000;}
div.header img {height: 6rem; padding-left: 4em;}
div.header .menu {position: absolute; bottom: 1rem; left: 75%;}
div.header .menu a {color: #fff; font-size: 1.3rem;}
div.header .menu a:hover {color: #becce9;}
div.header .menu li {display: inline-block; list-style: none; margin-left: 1rem;}
div.header .menu .href_view_list {margin-left: 2rem;}
div.header .menu .href_view_list a {display: block; width: 1.3rem; height: 1rem; background: url('../images/icon_list_off.png'); background-size: cover; }
div.header .menu .href_view_list:hover a {background: url('../images/icon_list_on.png'); background-size: cover;}
div.header .menu .href_view_icon {margin-left: 0;}
div.header .menu .href_view_icon a {display: block; width: 1.3rem; height: 1rem; background: url('../images/icon_icon_off.png'); background-size: cover; }
div.header .menu .href_view_icon:hover a {background: url('../images/icon_icon_on.png'); background-size: cover;}
div.header .menu .href_view_home {margin-left: 1.3rem; }
div.header .menu .href_view_home a {display: block; width: 1.7rem; height: 1.7rem; background: url('../images/icon_home_off.png'); background-size: cover; }
div.header .menu .href_view_home:hover a {background: url('../images/icon_home_on.png'); background-size: cover;}
div.header .menu .href_admin a {display: block; width: 1.3rem; height: 1rem; background: url('../images/icon_key_off.png'); background-size: cover; }
div.header .menu .href_admin:hover a {background: url('../images/icon_key_on.png'); background-size: cover;}
div.header .menu .href_admin_front a {display: block; width: 1rem; height: 1rem; background: url('../images/icon_config_off.png'); background-size: cover; }
div.header .menu .href_admin_front:hover a {background: url('../images/icon_config_on.png'); background-size: cover;}
div.header .menu .href_admin_logout a {display: block; width: 1.2rem; height: 1.2rem; background: url('../images/icon_logout_off.png'); background-size: cover; }
div.header .menu .href_admin_logout:hover a {background: url('../images/icon_logout_on.png'); background-size: cover;}
div.header a.editTemplate {background-color: #df0024; color: #FFF; border-radius:1em; padding: 0.25em 0.7em; margin-left: 2em; font-size:0.8em; letter-spacing: 0.05em; font-weight: bold;}
div.header .nav a.editTemplate:hover {color:#fff; background-color: red;}
div.header div.nav {position: fixed; top: 5.5rem; left: 36%; font-size: 1.35rem; letter-spacing: 0.1em;}
div.header div.nav a {color: #ffffff;}
div.header div.nav a:hover {color: #becce9; }

/****** FOOTER *******/
div.footer {width: 100%; position: fixed; bottom: 0; left: 0; text-align: center; font-size: 0.8rem; padding: 0.5em;}

/****** POPUP *******/
div.designDownload {display: none;}
div.designNewPicto {display: none;}
div.popUpBG {position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); top: 0; left: 0; text-align: center; z-index: 1000}
div.designFormPopUp {width: 30%; margin-left: 30%; margin-top: 20vh; }
div.designFormPopUpTitle {color: #fff; text-align: left; padding: 1rem 2rem; font-size: 1.5em; font-weight: bold; position: relative;}
div.designFormPopUpTitle a {display: block; font-size: 1.2em; position: absolute; top: 20%; right: 2rem;color: #fff; font-weight: normal;}
span.designFormUploadText {color:#df0024}
div.designFormPopUpForm {text-align: left; padding: 1rem; color: #111c4e; }
div.designFormPopUpFormText {font-size: 0.8em; line-height: 1.5em; padding: 0.5rem 0.2rem 0.3rem 0.2rem;}
div.designFormPopUpFormTitle {padding: 0.2rem 1rem; margin-bottom: 0.5rem;}
div.designFormPopUpFormDownload {text-align: center; padding: 1rem;}
div.designFormTitle div.designFormPopUpFormDownload {text-align: right; padding: 0;}
div.designFormPopUpFormDownload div {display: inline-block; vertical-align: top; margin-top: 0.75rem; margin-right: 1rem;}
div.designFormPopUpFormDownload a {display: inline-block; vertical-align: top; width: 2.5rem; height: 2.5rem; background: url('../images/icon_download_off.png'); background-size: cover;}
div.designFormPopUpFormDownload a:hover {background: url('../images/icon_download_on.png'); background-size: cover;}
div.designFormPopUpForm input, div.designFormPopUpForm textarea {border: none; box-shadow:inset 0 0.1rem 0.25rem #BBB; padding: 0.3rem 0.8rem; width: 90%;}
div.designFormPopUpForm textarea {height: 3rem;}
div.designFormPopUpForm button, .designFormDownload button {background-color: rgba(17,28,78,1); border-radius: 0.5rem; color: #fff; border: none; padding: 0.3rem 2rem; font-size: 1.1rem; margin-top: 0.5rem; margin-left: 75%;}
div.designFormPopUpForm button:hover, .designFormDownload button:hover {background-color: rgba(17,28,78,0.7); }
div.designFormPopUpFormRadio {text-align: center; width: 100%; margin: 0.8rem 0 1.5rem 0;}
a.designFormPopUpFormARadio {cursor: pointer; border-radius: 50%; width: 16px; height: 16px; border: 1px solid #111c4e;margin-top: 7px;}
div.designFormPopUpFormARadioLabel {display: inline-block; vertical-align: top;margin: 0.5rem;}
div.designFormPopUpFormARadioOn {background-color: #111c4e; border-radius: 50%; width: 6px; height: 6px; margin: 5px; }
div.designFormPopUpFormText ul {padding-left: 2rem;}
div.designFormPopUpFormText li {padding-bottom: 0.3rem; font-size: 1.1em;}
div.designFormContentPicto {display: inline-block; text-align: left;}
div.designFormContentPicto img {width:13%; padding:1.25%; cursor: pointer;}
div.designFormContentPicto button {display: none;}
div.designFormContainerPicto {display: none; background-color: #f1f4fa; width: 90%; text-align: center; padding:5%; border-radius:2em; margin: 5%; box-sizing: border-box;}

/****** DESIGN *******/
div.designForm {width: 35%; color:#fff; margin-bottom: 1.5em;}
div.designSheet { padding: 1rem 1rem; text-align: center; margin-left: 5%; position: fixed; top: 9.5rem; left: 30%;  }
div.designSheet .designTitle {position: fixed; text-align:left; margin-left:1rem; z-index:1000; top:8.5rem;}
div.designSheet h1 {text-transform: uppercase; margin: 0.5rem 0 1rem 0; }
div.designFormBlock {position: relative;}
div.designFormTitle {padding: 0.7rem 2% 0.7rem 12%; width: 86%; position: relative; margin-top: 1px; border-bottom: 1px solid #fff;}
div.designFormTitleInput {margin-left:4rem; display: inline-block; font-size: 0.8em; color: var(--colorBrightPurple50); font-weight: bold;}
div.designFormTitle input {width: 2.5rem; background-color: var(--colorBrightPurple50); color: rgba(0,0,0,0.5); border: none; padding: 0.2em 0.3em; font-size: 0.9em;}
div.designFormBlockText, div.designFormBlockPicto {display: none;}
div.designFormTextColor, div.designFormPictoBGColor, div.designFormPictoColor, div.designFormIllusColor, div.designFormLabelColor {width:1em; height: 1em; border-radius: 0.5em; cursor: pointer;}
div.designFormPictoBGColorW, div.designFormPictoColorW {width:1em; height: 1em; border-radius: 0.5em; cursor: pointer;border: 0.1em solid #000; box-sizing: border-box;}
div.designFormContent input.inputPictoSize {font-size: 0.75em; border: 1px solid var(--colorBrightPurple50); color: var(--colorBrightPurple); background-color:rgba(0,0,0,0.05)}
div.designFormContent div.designFormTextColor:nth-child(8), div.designFormContent div.designFormIllusColor:nth-child(8), div.designFormContent div.designFormLabelColor:nth-child(8), {border: 1px solid #333; box-sizing: border-box;  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width:0.95em;}
a.designFormImage {background: url('../images/icon_upload_off.png'); background-size: cover; width: 1.2rem; height: 1.5rem; position: absolute; top: 0.5rem; display: inline-block; margin-left: 1rem;}
a.designFormImage:hover {background: url('../images/icon_upload_on.png'); background-size: cover;}
div.designFormTitleHelp {position: absolute; top: 33%; right: 1.5rem;}
div.designFormTitleHelp img {height: 1rem;}
div.designFormTitleHelpText {display: none; position: absolute; background-color: rgba(140,202,29,0.75); color: #fff; padding: 0.7rem; z-index: 1; font-size: 0.85rem; width: 15rem; line-height: 1.5em;}
div.designFormExpand {position: absolute; top: 15%; right: 2rem; font-size: 1.7rem; cursor: pointer;}
div.designFormCollapse {position: absolute; top: 4%; right: 2rem; font-size: 2rem; cursor: pointer;}
div.designFormContent {padding: 0.5rem 2% 0.5rem 12%; width: 86%; position: relative; border-bottom: 1px solid #fff; font-size: 0.9rem; background-color: #fff;}
div.designFormContent input, div.designFormContent textarea {background-color: #fff; border: none; color: #81807d; width: 90%; padding: 0.4rem 0.8rem; padding-right: 2rem; box-sizing: border-box;}
div.designFormContentText {padding: 0.5rem 0% 0.5rem 12%; color: var(--colorBrightPurple); display: block;}
div.designFormContent textarea {height: 4.5rem; /*resize: none;*/ resize: vertical; font-size: 0.8em; box-shadow:inset 0 0.1rem 0.25rem #BBB;}
div.designFormContent textarea.textinput {height: 1rem; resize: none;}
div.designFormContent .inputNumber, div.designFormContent .inputLineHeight {width: 3rem; padding: 0.2rem 0.2rem 0.2rem 0.5rem; border: 1px solid #666; font-size: 0.9em;}
div.designFormContentTextArea {display: inline-block; width:100%; position:relative}
div.designFormContentTextArea textarea:read-only {background-color: #EEE; border: 1px solid #666;}
div.designFormContentTextArea div {position: absolute; left: -1.7rem; top:0; background-color: rgba(255,255,255,0.7); color: #000;  padding: 0.3rem; font-weight: bold; vertical-align: middle; font-size: 0.8em;}
div.designFormContentTextArea_new {display: none;}
div.designFormContentText select {border: none; background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0; overflow: hidden; background: transparent; background-color: #fff; color: rgba(0,0,0,0.8); border-radius: 4px; padding: 2px 5px; border: 1px solid #666; font-size: 0.9em;}
a.hrefDesignFormAddText, a.hrefDesignFormAddTextFront {padding: 0.4rem 12%; font-size: 1.2em; font-weight: bold; display: block; }
div.designFormContent .jqte_editor {background-color: #efe5d2; }
div.designFormContent .jqte {width: 85%;}
div.designFormContentImages {padding: 0.5rem 0; white-space: normal; font-size:0; width: 100%;}
div.designFormContentImage {width: 19.5%; padding-bottom: 19.5%; position: relative; overflow: hidden; margin: 0.5% 0 0 0.5%;}
div.designFormContentImage img {height: 100%; position: absolute;}
div.designFormContentImage img.designFormContentImageVert {width: 100%; height: auto;}
div.designFormContentImage img.alignRight {right: 0;}
div.designFormContentImage img.alignLeft {right: 0;}
div.designFormContentImage a.hrefDeleteImage {position: absolute; bottom: 0; right: 0; display: block; width: 1.5rem; height: 1.5rem; background: url('../images/icon_delele_off.png'); background-size: cover;}
div.designFormContentImage a:hover {background: url('../images/icon_delele_on.png'); background-size: cover;}
div.designFormContentLogos, div.designFormContentLabels, div.designFormContentIllus {overflow: hidden; height: 4rem; position: relative; /*width: 90%;*/ padding: 0.5rem 0; padding-bottom: 1rem;}
div.designFormContentIllus {padding: 0; padding-bottom: 1em;}
div.designFormContentLogosContent, div.designFormContentIllusContent {position: absolute; height: 4rem; top: 1rem; left: 0rem; width: 1000%;}
div.designFormContentLogo img, div.designFormContentIllus img {height: 3rem; margin: 0.5rem 1rem; cursor: grab;}
div.designFormContentLabelsContent {position: absolute; height: 5rem; top: 0.5rem; left: 0rem; width: 1000%;}
div.designFormContentLabel img {height: 4rem; margin: 0.5rem 0.5rem; cursor: grab;}
div.designFormContentLanguage {color:#111c4e;}
div.designArrowNext {width: 1.3rem; height: 2.6rem; position: absolute; left: 95%; top: 2rem; background: url('../images/icon_logo_next_off.png'); background-size: cover; cursor: pointer;}
div.designArrowNext:hover {background: url('../images/icon_logo_next_on.png'); background-size: cover;}
div.designArrowPrev {width: 1.3rem; height: 2.6rem; position: absolute; left: 3%; top: 2rem; background: url('../images/icon_logo_prev_off.png'); background-size: cover; cursor: pointer;}
div.designArrowPrev:hover {background: url('../images/icon_logo_prev_on.png'); background-size: cover;}
.textColor {width: 1.2rem; height: 1.2rem; padding: 2px; cursor: pointer; margin-right: 0.1rem}
.textColorNone {background: url('../images/icon_color_none.jpg'); background-size: cover;}
.textColorSelected {border: 2px dashed #df1717; padding: 0px;}
div.designFormDownload {text-align: right;}
div.designFormDownload label {display: none;}
button#template_Save {display: none;}
div.designFormContentImageUploaded {display: none;}
div.designFormTitle input#filePhoto {width: auto; font-size: 0.7em;}
img.designFormPictoImg {box-shadow: 0px 0.15rem 0.5rem #BBB; border-radius:50%;}
a.designFormContentImageCreditRotate, a.designFormContentTextRotate {cursor: pointer;}
div.designFormContent textarea#template_label_initiatives {height: 3rem;}

/****** ZOOM *******/
div.designZoom button {position: fixed; bottom: 3rem; right: 11%; border-radius: 0.5rem; background-color: #d8c19c; color: #fff; padding: 0.3rem 2rem; font-size: 1.1rem; border: none;}
div.designZoom button:hover {background-color: #d8c19c; background-color: #b5a891;}
div.designZoom label {display: none;}
div.designZoomContent {position: fixed; right: 5%; top: 9rem; border-radius: 1em; border: 1px solid #111c4e; padding: 0.2em; background-color: white;}
div.designZoomContent img {height: 35vh;}
div.designZoomContent img.designZoomCursor {height: 1.7vh; position: absolute; top: 0; left: 1rem; margin-top:20vh;}
div.designZoomTitle {padding: 0.2em 1.3em 0 1.3em; font-weight: bold;}
a.hrefDesignZoomPlus {background: url('../images/icon_zoom_plus_off.png'); background-size: cover; width: 1.5em; height: 1.5em; display: block;}
a.hrefDesignZoomPlus:hover {background: url('../images/icon_zoom_plus_on.png'); background-size: cover;}
a.hrefDesignZoomMoins {background: url('../images/icon_zoom_moins_off.png'); background-size: cover; width: 1.5em; height: 1.5em; display: block;}
a.hrefDesignZoomMoins:hover {background: url('../images/icon_zoom_moins_on.png'); background-size: cover;}
/*div.designSeeExample {position: fixed; right: 5%; top: 18vh;}
div.designSeeExample a {display: block; width: 5.5rem; height: 4rem; padding-top: 1.5rem; border-radius: 4rem; background-color: #d8c19c; color: #fff; text-align: center; cursor: pointer;}
div.designSeeExample a:hover {background-color: #97876d; color: #b1b0b0;}
div.designSeeExample a.hrefClear {padding-top: 2rem; height: 3.5rem;}*/
a.designEditExample {color: #df0024;font-size: 0.8rem; vertical-align: baseline; margin-left: 1em; margin-top: 1.5em;}
a.hrefDesignControls, div.designFormSave button {border-radius: 1em; border: 1px solid #111c4e; padding: 0.4em 1em 0.3em 1em; font-weight: bold; background-color: white;}
a.hrefDesignControls:hover, div.designFormSave button:hover {background-color: #111c4e; color: #fff; border: 1px solid #fff;}
a.hrefDesignElementDelete {font-size: 0.8em; border-radius: 1em; border: 1px solid var(--colorBrightPurple); padding: 0.2em 0.8em 0.2em 0.8em; font-weight: bold; background-color: #fff; text-transform: uppercase; color: var(--colorBrightPurple);}
a.hrefDesignElementDelete:hover {opacity: 0.8em;}
a.hrefDesignElementDelete img {width:0.75em; margin-top: 0.05em; }
div.designFormBlockTexts a.hrefDesignElementDelete {position: absolute; top: 0.5em; right: 0em;}
a.hrefCanvasMove {position: fixed; right: 15%; top: 9rem;}
a.hrefCanvasMove img {width: 1em; vertical-align: top; margin-left: 0.5em; }
div.designFormSave button {position: fixed; right: 5%; top: auto; bottom: 2.5rem; color: #111c4e}
div.designFormSave button:hover {color: white; border: 1px solid #fff;}
div.designPagination {position: fixed; left: 37%; bottom: 2.5rem; border-radius: 1em; border: 1px solid #fff; padding: 0.4em 1em 0.3em 1em; font-weight: bold; background-color: white; color: #111c4e;}
div.designPagination a {display: inline-block; background-color: #111c4e; color: white; border-radius: 0.3em; padding: 0.2em 0.7em; font-size: 0.8em; margin: 0 0.2em}
div.designPagination a:hover {background-color: #2e3170;}
a.hrefTitle {position: absolute; right: 12%; bottom: 20%;; color: #fff; border-radius: 1em; border: 1px solid rgba(255, 255, 255, 0.75); padding: 0.2em 1em 0.2em 1em; font-size:0.9em; background-color: rgba(255, 255, 255, 0.25); }
a.hrefTitle:hover {background-color: rgba(255, 255, 255, 0.5);}
a.hrefSave {position: fixed; right: 5%; bottom: 2.5rem;}
/*a.hrefDeleteObject {position: fixed; right: 20%; bottom: 2.5rem;}*/
a.hrefCreateThumbnail {position: fixed; right: 32%; bottom: 2.5rem;}

/****** WORKSPACE *******/
div.canvas-container {margin: auto; overflow: hidden; transform-origin: 0 0; box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.15)}
div.canvas-move {width: 100%; height: 100%; cursor: move; background-color: rgba(17,28,78,0.5); position: absolute; z-index: 100; display: none;}
div.workspace {background: #fff; background-size: auto; white-space: pre; text-align:left; overflow: hidden; position: relative; transform-origin: 0 0; margin: auto; display: none;}
div.workspaceText {position: absolute; left: 0; top: 0; padding: 0.5em 0; width: 100%;}
div.workspace .workspaceBg {position: absolute; height: 110%;}
div.workspace .workspaceWeServe {position: absolute; width: 80%; top: 3%; left: 5%;}
div.workspace .workspaceLogo {position: absolute; top:0; left: 0; padding: 0.5em 0; width: 100%; text-align: center;}

/****** COLORSCHEME ********/
div.designFormContentColor {width: 2.75rem; height: 1.6rem; margin-right: 0.1rem; cursor: pointer; padding: 2px; /*border-radius: 1rem;*/ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
div.designFormContentColorWhite {border: 1px solid #333867; padding: 0px;}
div.designFormContentColorTranspa {border: 1px solid #333867; padding: 0px; background-image: url('../images/color-transpa.jpg');margin-left:1em;}
div.designFormContentColor div {color: #e4cda7; padding-top: 0.5rem; text-align: center; font-size: 0.75rem;}
div.designFormContentColorSelected {border: 2px dashed #df1717; padding: 0px;  box-sizing: border-box;  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
div.designFormWeServe {margin-left: 4rem; vertical-align: middle;}
div.designFormWeServe input {margin-top: 0.4rem; margin-left: 0.8rem;}
div.designFormWeServe div.WeServePercent {margin-top: 0.6rem; font-size: 1.1rem}
div.designFormContent div.designFormContentTextOptions {color: #333867; width: 100%; margin-top: 1rem;}
div.designFormContent div.designFormContentTextOptions input.inputLineHeight {width: 4.5em;}
#colorScheme_878787, #colorScheme_1d1d1b, #template_illus_color_878787, #template_illus_color_1d1d1b, #template_labelInitiatives_color_878787, #template_labelInitiatives_color_1d1d1b {display:none;}

/******* VIEW LIST MODELS *******/
div.viewList {padding: 0 11% 3rem 12%;}
div.viewList h1 {text-transform: uppercase; margin: 1.5rem 0 2rem 0; text-align: center; padding: 1em 0;}
div.viewListModel {width: 100%; line-height: 4vw; position: relative; margin-bottom: 1.5rem;}
div.viewListModelThumb, div.viewListModelThumbVert {width: 9vw; height: 9vw; margin-right: 6vw; text-align: center; line-height: 9vw; overflow: hidden; background-color: #bfcce9;}
div.viewListModelThumb img {width: 6.5vw; vertical-align: middle;}
div.viewListModelThumbVert img {height: 6.5vw; width: auto; vertical-align: middle;}
div.viewListModelName {width: 30vw; text-align: left; font-size: 2rem; height: 9vw; line-height: 9vw; margin: auto; vertical-align:middle; font-weight: bold; position: relative;}
div.viewListModelDesc {width: 23vw; text-align: left; font-size: 1.3rem; height: 9vw; line-height: 9vw; vertical-align: middle; padding-right: 2em;}
div.viewListModelDesc span {vertical-align:middle; display:inline-block; line-height:1em; text-align:left; }
div.viewListModelButon {width: 4.5vw; height:4.5vw; border-radius: 50%;color:#fff; vertical-align: middle;}
div.viewListModelButonDesign {background-color: rgba(236,109,9,1);}
div.viewListModelButonDesign:hover {background-color: rgba(236,109,9,0.7);}
div.viewListModelButonDownload {background-color: rgba(188,189,28,1);}
div.viewListModelButonDownload:hover {background-color: rgba(188,189,28,0.75);}
div.viewListModelButon a {display:block;float:left; width:100%; text-align:center; color:inherit;text-transform: uppercase; display: block;}
div.viewListModelButon img {width: 1.8vw; padding-top: 1.4vw;}
div.viewListModel a.viewListDownload:hover {background-image: url('../images/icon_download_on.png'); background-size: cover;}
div.viewListModelButonAdmin {position: absolute; left: 0vw; top: 5.8vw; line-height: 0.8rem; width: 100%;}
div.viewListModelButonAdmin a {color: #df0024; font-size: 0.8rem; text-transform: uppercase; padding: 0.3em 1em 0.2em 1em; display: inline-block; border-radius: 1em; border: solid 1px #df0024;}
div.viewListModelButonAdmin a:hover {background-color: #df0024; color:#fff; }
div.guidelinesDoc div.viewListModelButonAdmin {position:inherit; margin-bottom: 1em;}
div.viewListModelButonAdmin a {background-color: #df0024; color:#fff; }
div.viewListNewModel a {margin: 1rem; font-size: 1.1rem; font-weight: bold; display: block; background-color: #df0024; border-radius: 1rem; color: #fff; width: 9rem; padding: 0.3rem 1rem; text-align: center;}
div.viewListNewModel a:hover {background-color: rgba(200,20,20,0.8);}
div.viewListModelDesc a {margin-left: 2rem; color: #df0024; }
div.viewListLabels img {width: 60%; padding: 20% 20%;}
div.viewListLabels h1 {text-align: left; text-transform: none; color: var(--colorBrightPurple); font-family: AvantGarde; margin-bottom: 0.8em;}
div.viewListLabels h2 {text-align: left; text-transform: none; font-family: AvantGarde; margin-top: 1.5em; }
div.viewListLabels p {margin-top: 1.5em; font-family: AvantGarde; color:#000;}
div.viewListLabelsLegend {position: absolute; width: 100%; text-align: center; bottom: 5%; left: 0; font-size: 0.8em; font-family: AvantGarde;}
a.hrefChooseTemplate img {border: 1px solid rgba(0,0,0,0.2); margin: 0.25em 1em; box-shadow: 0px 0.15rem 0.5rem #ccc;}


/******* VIEW ICON MODELS *******/
div.viewIconModel {width: 17.25%; position: relative; display: inline-block; vertical-align: top ; margin-right: 2.5%;}
div.viewIconModelThumb {width: 13vw; height: 13vw; margin-right: 5%; text-align: center; line-height: 13vw; position: relative; background-color: var(--colorBackground); }
div.viewIconModelThumb img.viewIconModelThumbImg {width: 10vw; vertical-align: middle;}
div.viewIconModelThumbVert img.viewIconModelThumbImg {width: auto; height: 10vw; vertical-align: middle;}
div.viewIconModelThumb div {display: none; background-color: rgba(35,0,76,0.7); position: absolute; top: 0; left: 0; width: 13vw; height: 13vw; color:#fff; font-weight: normal; letter-spacing: 0.02em; font-size: 1.4em; padding: 0 2em; padding-top:28%; line-height: 1.4em; box-sizing: border-box; }
div.viewIconModelThumb div.iconModelThumbHover {background-color: rgba(243,117,89,0.75); }
div.viewIconModelThumb img {width:18%; }
div.viewIconModelName img {width: 1.4rem; height: 1.4rem; margin-left: 1rem;}
div.viewIconModelName {text-align: center; font-size: 1.3rem; width: 13vw; padding: 0.7rem 0px 2rem 0px; font-weight: bold;}
a.hrefViewModelEdit {color: #df0024; font-size: 0.6em;}

/********* NEW MODEL **********/
div.newModel {width: 76%; padding: 1.5rem 12%;}
div.newModelForm {width: 49%; height: 100%;}
div.newModelForm input, div.newModelForm textarea {padding: 0.2rem 0.8rem; margin: 0.2rem; width: 60%; }
div.newModelForm textarea {height: 2.8em; font-family: Arial, Helvetica, sans-serif;}
div.newModelForm input#form_width, div.newModelForm input#form_height {width: 3rem; text-align: center}
div.newModel button#form_create {height: 2rem; background-color: #111c4e; padding: 0.2rem 0.8rem; border: none; color: #fff; border-radius: 0.5rem; text-transform: uppercase; position: absolute; left: 32%; top: 40%; }
div.newModel button#form_create:hover {background-color: #4b5378; }
div.newModelFormArea {background-color: #fff; margin: auto;}
div.newModelFormWidth {margin-bottom: 1rem;}

/********* ITEM TO DOWNLOAD **********/
div.viewItem {text-align: center; padding: 1em 0; font-size: 1.3em;}
div.viewItemDelete {background-color: #d8baba; padding: 1em; font-size: 1.3em; text-align:center;}
a.viewItemAdmin {background-color:#df0024; color: #FFF; border-radius: 1em; padding: 0.25em 0.7em; margin-left: 2em; font-size: 0.9em; text-decoration: none;}
div.viewItem img {display: inline-block; vertical-align: top; width:20%; padding: 0 2%;}
div.viewItemIllus {background-color: #ffffff; padding: 2em; font-size: 1.3em; border-radius: 2em; border: solid 1px #525ca3; box-shadow: 0px 0.15rem 0.5rem #EEE;}
div.viewItemIllus img {display: inline-block; vertical-align: top; padding: 2% 2%; height: 200px;}
div.viewItemPictogram {display: inline-block; position: relative; width: 30%; text-align: left; padding: 1em; box-sizing: border-box; border-radius: 1em; border: 1px solid #525ca3; margin: 0.5em; background-color: #edf0f6; padding-bottom:2em;}
div.viewItemPictogram img {width: 11%; padding-top: 2%;}
div.viewItemPictogram a.viewItemPictogramDownload {position:absolute; bottom: 0.5em; right: 2em; padding: 0.2em 1em; background-color:#fff; border-radius: 1em; border: 1px solid #525ca3; font-size:0.7em;}
div.viewItemPictogram a.viewItemPictogramDownload:hover {background-color:rgba(82,92,163,0.1);}
div.viewItemPictogram a.viewItemPictogramDelete {position:absolute; bottom: 0.5em; left: 2em; padding: 0.2em 1em; background-color:#df0024; border-radius: 1em; color:#fff; font-size:0.7em;}
div.viewItem img.viewItemImgIcons {width:100%; padding: 0; padding-top: 1em;}
a.viewItemSubCat {color: #7a00e6; padding: 0.3em 1em; display: inline-block; text-transform: uppercase; word-break: keep-all; width:16.4%; box-sizing: border-box; text-align: center;}
a.viewItemSubCat img {width:auto; display: inline-block;}

/********* GUIDELINES **********/
div.guidelines {text-align: center; padding: 0 5%;}
div.guidelines h1 {margin: 2.5rem 15%; font-size: 1.8rem; color:#525ca3;}
div.guidelinesDoc {width: 31%; margin: 0 6%; text-align: center; background-color: var(--colorBrightPurple); margin-top: 5vh;}
div.guidelinesDoc h2 {text-transform: uppercase; padding: 1rem 0; font-size: 1.3rem; color:#fff;}
div.guidelinesThumb {margin: 0 15%;}
div.guidelinesDownload {margin: 1rem 0;}
div.guidelinesDownload a {color: #fff;}
div.guidelinesDownloadText {line-height: 2rem; vertical-align: middle; margin-right: 0.5rem;}
div.guidelinesDownloadA {font-size: 2rem;}

/********* HELP **********/
div.help {text-align: center; padding: 0 5%; font-size: 1.2rem; width: 90%;}
div.help h1 {margin: 2.5rem 15% 0.3rem 15%; font-size: 1.8rem;}
div.helpContent {width: 60%; margin: 2rem 20%; text-align: left; padding: 0.8rem 1rem; }
div.helpContent a {font-size: 1rem; color: black; font-weight: bold;}
div.helpBox {margin-bottom: 0.8rem;}
div.helpText {font-size: 0.9rem; line-height: 1.4em; display: none; margin-top: 0.2rem;}
div.helpExpand {background-image: url('../images/icon_arrow_off.png'); background-size: cover; width: 0.9rem; height: 0.9rem; margin-right: 0.5rem;}
div.helpCollapse {background-image: url('../images/icon_arrow_on.png'); background-size: cover; width: 0.9rem; height: 0.9rem; margin-right: 0.5rem;display: none;}

/********* CONFIG FRONT **********/
div.configFront {margin: 2rem 0 0 2rem;}
div.configFront h1 {margin-bottom: 1rem}
div.configFront div {margin: 0.2rem 0;}
div.configFront input {margin-left: 1rem;}
div.configFront div.configFrontLinks {margin-left:10rem;}
div.configFrontLinks a {font-size: 1.1rem;}
div.configImages {width: 100%;}
ul.configImagesList {width:30%}
ul.configImagesList li {display: inline-block; width: 19.5%; padding-bottom: 19.5%; position: relative; overflow: hidden; margin: 0.5% 0 0 0.5%;}
ul.configImagesList img {height: 100%; position: absolute;}
ul.configImagesList img.alignRight {right: 0;}
ul.configImagesList img.alignLeft {right: 0;}
ul.configImagesList img.imageVert {width: 100%; height: auto;}
ul.configImagesList div.configImagesListA {position: absolute; top: 0; left: 0; width: 100%;}
div.configImagesListA a {color: white; background-color: #df0024; display: inline-block; padding: 0.2rem 0.3rem; text-align: center; font-size: 0.8rem; font-weight: bold;}
.configImagesList a.configImagesUpload {display: block; background-image: url('../images/icon_upload_thumb.png'); background-size: cover; width: 1.1rem; height: 1.1rem; right: 0; bottom: 0; position: absolute; z-index: 10;}


/******* LOGIN *******/
div.mylogin {margin-left:12%; margin-top:4rem; width: 25rem; padding: 2rem;}
div.mylogin input {border: none; margin-left: 1rem; padding: 0.2em;}
div.mylogin #_submit {border: none; background-color: #8cca1d; color: #fff; padding: 0.3rem 2rem; font-weight: bold;}
div.mylogin #_submit:hover {background-color: rgba(140,202,29,0.8);}