/** GENERAL **/

html,
body{
    height: 100%;
}

[role="banner"]{
    background: transparent;
    max-width: 90%;
    margin: 0 auto;
    padding: 30px 0 0;
}

body{}

.ht-ctc{
    display: none !important;
}

.nologued{
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nologued form{
    max-width: 300px;
    margin: 0 auto;
}

.container{
    padding: 5% 0 10%;
}

.s-Entry{
    display: block;
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
}

.render_wrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 60%;
    padding: 50px 50px 0;
}

.configurateur_wrapper .content{
    display: flex;
    align-items: self-start;
}

.s-Entry .content_form{
    width: 30%;
}

.s-Entry .render{
    position: relative;
    width: 100%;
}

/** HEADER **/

.logo {
    font-size: 2.8em;
}

.footer{
    display: none;
}

.pageheader {
    align-items: center;
}

.pageheader_col:nth-child(1) {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
}

.pageheader_col:nth-child(2) {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: 2;
    order: 2;
}

.resume_client{
    display: flex;
    font-size: 12px;
    flex: 1;
}

.resume_client .client,
.resume_client .content{
    display: flex;
    width: 100%;
    flex-direction: column;
}

.resume_client strong{
    font-family: 'Montserrat-Regular', sans-serif;
    font-weight: 700;
}

/** RENDER **/

.hidden_tv_field{
    display: none;
}

.configurateur_wrapper[data-step="2"] input[type="submit"]{
    margin-top: 10px;
}

.mirror{
    position: relative;
    display: block;
    background: linear-gradient(32deg, rgba(213, 213, 206, 1) 0%, rgba(245, 250, 250, 1) 50%, rgba(223, 220, 223, 1) 99%);
    /*background: rgb(110,118,119);
    background: -moz-linear-gradient(20deg, rgba(110,118,119,1) 0%, rgba(172,171,168,1) 24%, rgba(140,148,149,1) 47%, rgba(172,171,168,1) 72%, rgba(110,118,119,1) 100%);
    background: -webkit-linear-gradient(20deg, rgba(110,118,119,1) 0%, rgba(172,171,168,1) 24%, rgba(140,148,149,1) 47%, rgba(172,171,168,1) 72%, rgba(110,118,119,1) 100%);
    background: linear-gradient(20deg, rgba(110,118,119,1) 0%, rgba(172,171,168,1) 24%, rgba(140,148,149,1) 47%, rgba(172,171,168,1) 72%, rgba(110,118,119,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6e7677",endColorstr="#6e7677",GradientType=1);*/
    width: 100%;
}

.outline .mirror{
    outline: 15px solid;
}

span.mirror_w,
span.screen_w{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -35px;
    border-bottom: 1px solid;
}

span.screen_w{
    top: 20px;
    color: #fff;
}

span.mirror_h,
span.screen_h{
    position: absolute;
    left: -45px;
    border-bottom: 1px solid;
    transform: translateY(-50%) rotate(-90deg);
}

span.screen_h{
    top: calc( 50% );
    color: #fff;
    font-weight: 700;
}

.arrow:after,
.arrow:before {
    content: '';
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

span.mirror_h:after,
span.screen_h:after{
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    right: 0;
    position: absolute;
    bottom: -5px;
}

span.mirror_h:before,
span.screen_h:before {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    left: 0;
    position: absolute;
    bottom: -5px;
}

span.screen_h:before,
span.screen_h:after,
span.screen_w:before,
span.screen_w:after{
    border: solid #fff;
    border-width: 0 3px 3px 0;
}

span.mirror_w:after,
span.screen_w:after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    right: 0;
    position: absolute;
    bottom: -5px;
}

span.mirror_w:before,
span.screen_w:before {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    left: 0;
    position: absolute;
    bottom: -5px;
}

.screen_wrapper{
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: auto;
    top: 50%;
    z-index: 1;
}

.screen{
    width: 100%;
    height: auto;
}

.cheminee img{
    width: 105%;
    height: auto;
    margin-left: -2.5%;
}

#infos span.message {
    display: block;
    margin: 20px 0;
    text-align: center;
}

/** FORM **/

.content_form{
    text-align: left;
}

.acf-field input,
select{
    padding: 5px 10px;
}

select[name="televiseur"]{
    width: 100%;
    margin-bottom: 10px;
}

.acf-fields > .acf-field{
    padding: 10px 0;
    border: none;
}

.acf-fields > .acf-field:first-child {
    border-top: none;
    margin-top: 0;
    width: 46% !important;
}

.acf-fields > .acf-field:nth-child(2) {
    border-top: none;
    margin-top: 0;
    width: 46% !important;
    margin-left: 8%;
}

.acf-field .acf-label{
    margin: 0;
}

.acf-field[data-width] + .acf-field[data-width]{
    border: none;
}


div[data-name="encadrement"] select,
div[data-name="taille_encadrement"] select,
div[data-name="couleur_encadrement"] select{
    width: 100%;
    padding: 5px 10px;
}

.content_form .btn{
    display: block;
    text-align: center;
    margin-top: 10px;
    border: 1px solid #97999c;
    background-color: #97999c;
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 1em;
    letter-spacing: .1em;
    color: white;
    cursor: pointer;
    text-transform: uppercase;
    padding: 5px;
    width: 100%;
}

.success-devis{
    text-align: center;
}