/*
Fond Beige  : #f5f2ec
Vert Select : #4E7770
Doré        : #B48A1E ???
*/



/* HTML5 ready */
article, aside, audio, canvas, datalist, details, dialog, figure, footer, header, menu, nav, section, video,
om-list, om-list-item, om-list-vins,  om-list-millesime {display: block;}
abbr, eventsource, mark, meter, time, progress, output {display: inline;}

*, *:after, *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}
img {border: 0;image-rendering: optimizeQuality;vertical-align: middle;-ms-interpolation-mode: bicubic;}
ul, ol, li {list-style : none;}
p {margin-bottom:0.8em}
table, table td {border-spacing: 0;	border-collapse: collapse;}
input:focus {outline : none;}
input[type="search"] {-webkit-appearance: none;-webkit-border-radius: 0;} 
input[type="button"]::-moz-focus-inner, button::-moz-focus-inner{border:0;padding:0;}
img, table, td, blockquote, code, pre, textarea, input {height: auto;max-width: 100%;}
a {cursor:pointer} 
textarea {border: none; overflow: auto; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}

.anim { -webkit-transition: all 800ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 800ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 800ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 800ms cubic-bezier(0.25, 0.1, 0.25, 1) }

input:-internal-autofill-selected,
input:-internal-autofill-selected:focus,
input:-webkit-autofill,
input:-webkit-autofill:focus{background-color:#fff !important; color:#000 !important; transition: background-color 0s 600000s, color 0s 600000s !important;}

/* material ovverride */
md-select {border:solid 1px #DEDEDE; background-color:#fff;padding:4px}
md-select-value {border-bottom-width:0 !important}
md-select-menu.md-default-theme md-content md-option:not([disabled]):focus, md-select-menu md-content md-option:not([disabled]):focus, md-select-menu.md-default-theme md-content md-option:not([disabled]):hover, md-select-menu md-content md-option:not([disabled]):hover {background-color: #4E7770 !important;color:#fff}
md-option .md-text {white-space:normal !important}
md-select .md-select-value>span:not(.md-select-icon) {white-space:normal}
button {cursor:pointer;background-color:transparent;color: #B48A1E; width:100%;display:block;text-align:center;border:0;margin-top:24px}


a.button-shape {position:relative;display:block;cursor:pointer;}
a.button-shape > svg {image-rendering:optimizeQuality;}
a.button-shape:hover > svg path {fill:#fff !important;}
a.button-shape.dore:hover > svg path {fill:#B48A1E !important;}
a.button-shape > p {position:absolute;width:100%;top:10px;text-align:center;color:#fff;font-size:15px}
a.button-shape.dore > p  {color:#B48A1E}
a.button-shape:hover > p {color:#000}
a.button-shape.dore:hover > p {color:#fff}
button:disabled > a.button-shape > svg path,button:disabled > a.button-shape.dore:hover > svg path {fill: #cbcbcb !important;opacity: 0.5}
button:disabled > a.button-shape.dore:hover > p {color:#000;opacity:0.5}
button:disabled > a.button-shape  > p {opacity:0.2} 
button:disabled,button:disabled > a.button-shape {pointer-events:none}

html, body {height:100%; padding:0; margin:0}
body {background-image: url(images/background.png);background-size:cover;background-repeat: no-repeat; background-position: top left; font-family: "Sohne-Buch"; font-size: 14px;line-height: 20.5px;;opacity:0}
body.active {opacity:1}
body > section {height:100%}

header {color:#fff;padding: 0;}
header > a, header > a div {color: #fff; text-decoration:none;}
header > a div.top {font-size:14px;font-family:"205TF-Immortel-InfraG2Roman"}
header > a div.center {font-size:32px;margin:12px;font-family:"205TF-Immortel-InfraG2Roman"}
header > a div.bottom {font-size:14px;font-family:"205TF-Immortel-InfraG2Roman"}
header > a {margin: 36px 0}
header nav {width:100%}
header nav a {border:solid 1px #fff; text-decoration:none;text-align:center;padding:12px}
header nav a.selected {text-decoration:underline}
header nav a:first-child {border-left:none;border-right:none}
header nav a:last-child {border-left:none;border-right:none}

section.step-0 header > a {margin-bottom: 90px}

article {background:#f5f2ec;padding-top:40px;max-width: 1200px!important; margin: 0 auto;width: 100%;overflow:auto}
article::-webkit-scrollbar-track:horizontal,
article::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px transparent; border-radius: 0px; background-color: transparent;}
article::-webkit-scrollbar {width: 6px;background-color: transparent;}
article::-webkit-scrollbar:horizontal {height: 6px;background-color: transparent;}
article::-webkit-scrollbar-thumb,
article::-webkit-scrollbar-thumb:horizontal {border-radius: 0px; -webkit-box-shadow: inset 0 0 6px transparent; background-color: #fff;}
article > div {width:600px;}
article > div  h3 {margin-top: 40px;margin-bottom: 10px;font-family: "205TF-Immortel-InfraG2Roman";font-size: 20px;font-weight: normal}
article > div .sub-title {color:#6B6565;font-style:italic;margin-bottom: 20px;}

footer {position:fixed;bottom:32px;right:32px}
footer > span {margin:0 4px}
footer > div {cursor:pointer}

article.intro {color:#fff;background-color:transparent;margin-bottom:120px}
article.intro > div {}
article.intro > footer {background:#f5f2ec;position:fixed;right:0;bottom:0;left:0;top:auto}
article.intro > footer > div {width:500px;margin:auto}
article.intro > footer > div > img {max-width:200px}
article.intro > footer > div > img:last-of-type{max-height: 120px}


article.step1 {}
article.step1 > div {}
article.step1 > .sub-title {color:#222;font-style:italic;width:auto;text-align:center;margin-top:24px}


article.step2 {}
article.step2 > div {}
article.step2 > div > form > div {height:39px}
article.step2 > div > form > div > md-select,article.step2 > div > form > div > input, article.step2 > div > form > div > textarea  {margin: 0; border: solid 1px #dedede !important}
article.step2 > div > form > div > input {padding-left:6px}
article.step2 > div > form > div > textarea {padding:6px}
md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md-select-value.md-select-placeholder, article.step2 > div > form > div > input::placeholder {color:rgba(0,0,0,0.38)}
article.step2 > div > form > div > md-select {}
article.step2 > div > form > div > #ddlCivility {border-right:none !important}
article.step2 > div > form > div > #tbLastName {border-right:none !important}
article.step2 > div > form > div > #tbFirstName {}
article.step2 > div > form > div > #ddlPhonePrefix {border-right:none !important;border-top:none !important}
article.step2 > div > form > div > #tbPhone {border-top:none !important}
article.step2 > div > form > div > #tbEmail {border-top:none !important}
article.step2 > div > form > div > #tbAddress {border-top:none !important}
article.step2 > div > form > div > #tbPostalCode {border-right:none !important;border-top:none !important}
article.step2 > div > form > div > #tbCity {border-top:none !important}
article.step2 > div > form > div > #ddlCountry {border-top:none !important}
article.step2 > div > form > div > #ddlLanguage {border-top:none !important}


article.step3 {}
article.step3 > div {}

article.cgv {}
article.cgv > div {}

article.success,
article.error {}
article.success p.bold {font-weight:800}

div.type-option {max-width:600px}
div.type-option .name {font-weight:600}
div.type-option .details {font-size:89%}

@media (max-width:959px) {
    body {background-position: -250px 0;}

    .layout-column>.flex {min-height: inherit}    
    a.button-shape > svg {width:100% !important}
    section.step-0 header > a {margin-bottom:36px}
    header nav.step-1 a:first-child {border-right:solid 1px #fff}
    header div.bottom {margin-bottom:0px}
    footer.step-1,footer.step-2,footer.step-3 {display:none;}
    footer {top:12px;right:12px;color:#fff;bottom:inherit;}

    article > div {padding:16px}
    article > div > h3 {margin-top:0px}
    article.intro {padding-top:0}
    article.intro > div {color:#fff;width:100%;}
    article.intro > footer > div > img {max-width:130px}
    article.intro > footer {position:static}
    article.intro {margin-bottom:0}

    
    article.step2 > div > form > div > #ddlCivility {border-right:solid 1px #dedede !important}
    article.step2 > div > form > div > #tbLastName {border-right:solid 1px #dedede !important;border-top:none !important}
    article.step2 > div > form > div > #tbFirstName {border-top:none !important}
    article.step2 > div > form > div > #ddlPhonePrefix {border-right:solid 1px #dedede !important;border-top:none !important}
    article.step2 > div > form > div > #tbPhone {border-top:none !important}
    article.step2 > div > form > div > #tbEmail {border-top:none !important}
    article.step2 > div > form > div > #tbAddress {border-top:none !important}
    article.step2 > div > form > div > #tbPostalCode {border-right:solid 1px #dedede !important;border-top:none !important}
    article.step2 > div > form > div > #tbCity {border-top:none !important}
    article.step2 > div > form > div > #ddlCountry {border-top:none !important}
    article.step2 > div > form > div > #ddlLanguage {border-top:none !important}

    form > div.sub-title {margin-bottom:20px}
}