@font-face {font-family: azonix;  src: url('../fonts/Azonix.otf');}
.azonix {font-family: 'azonix', serif;}

.yellow {color: #ffc83f;}
.blue {color: #325b93;}
.black {color: black;}
.dark-grey {color: #646464;}

a.yellow:hover {color: #ffc83f;}
a.blue:hover {color: #325b93;}

.hr-yellow {border-top: 2px solid #ffc83f;}
.img-cover {width: 100%; height: 100%; object-fit: cover;}
.cursor-pointer {cursor: pointer;}
.hidden-input-file {opacity: 0; position: absolute; z-index: -1; width: 1px; height: 1px;}
.small-text-8 {font-size: 0.8em;}
.small-text-9 {font-size: 0.9em;}
.border-none {border: none;}
.border-none:focus {outline: none;}

.bg-yellow {background-color: #ffc83f; transition: all 0.2s ease-in-out;}
.bg-blue {background-color: #325b93; transition: all 0.2s ease-in-out;}
.bg-grey {background-color: #f7f7f7; transition: all 0.2s ease-in-out;}
.bg-red {background-color: #f72e29; transition: all 0.2s ease-in-out;}

.border-yellow {border: 1px solid #ffc83f;}
.border-blue {border: 1px solid #325b93;}
.border-yellow-hover:hover {border: 1px solid #ffc83f;}
.border-blue-hover:hover {border: 1px solid #325b93;}

.border-yellow-bold {border: 2px solid #ffc83f;}
.border-blue-bold {border: 2px solid #325b93;}
.border-yellow-bold-hover:hover {border: 2px solid #ffc83f;}
.border-blue-bold-hover:hover {border: 2px solid #325b93;}

.border-top-yellow {border-top: 2px solid #ffc83f;}
.border-top-blue {border-top: 2px solid #325b93;}

.border-left-yellow {border-left: 1px solid #ffc83f;}
.border-left-blue {border-left: 1px solid #325b93;}

.border-radius {border-radius: 10px!important;}
.border-radius-bigger {border-radius: 20px;}
.border-radius-top {border-radius: 10px 10px 0 0;}
.border-radius-bottom {border-radius: 0 0 10px 10px;}
.border-radius-bottom-left {border-radius: 0 0 0 10px;}

.hr-trait {border-top: 2px dotted #325b93;}

.bg-yellow.btn-yellow-hover:hover{background-color: #325b93;}

.form-btn {border: none; outline: none; background-color: transparent;}
.form-btn:hover {text-decoration: underline;}

.btn-posteo {
    display: inline-block;
    background-color: #ffc83f;
    text-transform: uppercase;
    border-radius: 10px;
    font-size: 2em;
    font-weight: bold;
    padding: 0 10px;
}

@media (min-width: 1200px) {
    .container.smaller {max-width: 960px;}
}

.btn-posteo a {color: #325b93;}

.btn-no-style {background-color: transparent; border: none; padding: 0;}
.text-decoration-hover:hover {text-decoration: underline;}

label {font-weight: bold;}
.custom-control-input:checked ~ .custom-control-label::before {color: #fff; border-color: #ffc83f; background-color: #ffc83f;}
.custom-control-label::before {border: 1px solid black;}
.form-control {border-radius: 40px; border: 1px solid black; height: 24px;}

html, body, #app {height: 100%;}

header {min-height: 72vh; background-color: white;}

nav {min-height: 8vh;}
nav #logo object {width:50px; height: 50px;}
nav #logo {font-weight: bold;}
nav #logo:hover {text-decoration: none;}

nav .links {font-size: 1.2em;}
nav .links a:nth-child(1) {border-right: 2px solid #ffc83f; padding-right: 20px;}
nav .links a:nth-child(2) {padding-left: 20px;}

nav .phone {font-size: 1.4em;}

.navbar {padding: 0rem 1rem;}

header {position: relative; overflow: hidden;}

header .background,header .background-color  {
    width: 100%;
    height: 70%;
    position: absolute;
    border-radius: 0 0 250px 250px;
}

header .background {
    background: url('../img/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

header .background-color {background-color: rgba(207, 237, 255, 0.7)}

section {position: relative;}

.btn-send-letter {max-width: 400px; margin: auto; max-height: 220px; width: 100%; height: 100%; transition: all 0.2s ease-in-out;}
.btn-send-letter a:hover {text-decoration: none;}

.block-steps {
    border-radius: 10px;
    border: 1px solid #ffc83f;
    max-width: 170px;
    margin: auto;
}

.block-steps > div {
    padding: 0 10px;
}

.block-steps > div:nth-child(1) {
    background-color: #ffc83f;
    color: #325b93;
    text-align: center;
    font-size: 2em;
    border-radius: 10px 10px 0 0;
}

.block-steps > div:nth-child(2) {
    background-color: white;
    color: black;
    border-radius: 0 0 10px 10px;
    font-weight: bold;
    font-size: 0.9em;
}

.block-steps .number {
    color: #325b93;
    font-size: 2.5em;
    text-transform: uppercase;
}

.block-steps .dot {
    color: #ffc83f;
    font-size: 2.5em;
}

.block-send-letter {
    border: 1px solid #325b93;
    border-radius: 10px;
    background-color: white;
    width: 98%;
    height: 98%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: auto;
    transition: all 0.2s ease-in-out;
}

.block-send-letter > div:nth-child(1) {
    padding: 20px;
    height: 100%;
}

.block-send-letter > div:nth-child(2) {
    border-radius: 0 0 10px 10px;
    background-color: #ffc83f;
    text-align: center;
    padding: 10px;
    transition: all 0.2s ease-in-out;
}

.block-send-letter a {
    color: #325b93;
    font-weight: bold;
    font-size: 1.2em;
    transition: all 0.2s ease-in-out;
}

.block-send-letter:hover div:nth-child(2) {background-color: #325b93;}
.block-send-letter:hover h4 {color: white;}

.small-img {max-width: 110px;}

.section-blue {
    background-color: #325b93;
    padding: 20px;
    min-height: 20vh;
}

.section-blue object {
    width: 50px;
    height: 50px;
}


.block-avantages > div:nth-child(1) {
    width: 150px;
    height: 150px;
    margin: 1em auto;
}

.block-avantages > div:nth-child(2) {
    font-weight: bold;
    color: #f7bb25;
    text-align: center;
    font-size: 1.8em;
}

.block-avantages > div:nth-child(3) {
    font-weight: bold;
    text-align: center;
    font-size: 1em;
    margin-top: 1em;
}

.notre-offre {
    border: 1px solid #ffc83f;
    border-radius: 10px;
}

.notre-offre .price {
    background: url('../img/felt-pen.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    margin: auto;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    color: #325b93;
}

.notre-offre .slash {font-size: 6em;}

.notre-offre .section-blue {color: white; font-size: 2em; text-align: left; padding: 20px;}
.notre-offre .section-blue i {color: #ffc83f;}

#how-to-use .service-letter {margin: auto; text-align: center;}
#how-to-use .service-letter object {max-height: 300px; width: 100%;}

#review-customers .review {margin: 10px;}
#review-customers .review h3 {font-weight: bold;}
#review-customers .review h3 {font-weight: bold;}
#review-customers .review .stars {color: #ffc83f; font-size: 1.5em;}

#steps {position: relative;}
#steps .breadcrumb-steps {
    width: 100%;position: absolute;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 5px;
    text-align: center;
    max-width: 550px;
}
#steps .breadcrumb-steps hr {border-top: 2px solid white;}
#steps .blocks {display: flex; justify-content: center; align-items: flex-start; z-index: 20;}

@media screen and (max-width: 768px) {
    #steps .blocks {flex-wrap: wrap;}
}

#steps .step-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    width: 170px;
    margin: 0 1em 1em 1em;
    z-index: 20;
    max-width: 100px;
}

@media (max-width: 968px) {
    #steps .step-container {margin: 0 0.5em 1em 0.5em;}
}

#steps .step-container .description {font-weight: bold; line-height: 1; font-size: 0.8em;}
#steps .step-container .description a {color: black;}

#steps .step {
    border: 1px solid #ffc83f;
    width: 100%;
    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 auto 1em auto;
}

#steps .step > div:nth-child(1) {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#steps .step .number {color: #325b93; font-weight: bold; font-size: 2em; line-height: 1.2;}
#steps .step .dot {color: #ffc83f; font-weight: bold; font-size: 2em; line-height: 1.2;}

#steps .step > div:nth-child(2) {
    background-color: #ffc83f;
    padding: 5px;
    border-radius: 0 0 10px 10px;
}

#steps .step.selected > div:nth-child(2) {background-color: #325b93;}

.editeur-text {
    border: 1px solid #325b93;
    border-radius: 10px;
    background-color: white;
}

.editeur-text > div:nth-child(1) {
    padding: 20px 20px;
}

.editeur-text > div:nth-child(2) {
    background-color: #ffc83f;
    padding: 8px;
    border-radius: 0 0 10px 10px;
    text-align: center;
    font-weight: bold;
}

#editor {
    width: 100%;
    min-height: 350px;
}

.import {border: 2px solid #ffc83f; padding: 20px; margin: auto; max-width: 400px;}
#preview-image {margin: 2em; width: 200px;}
#preview-pdf {margin: 2em; width: 200px;}

.confirm-payment {border-radius: 20px; padding: 10px 20px; color: white; font-weight: bold; background-color: #ffc83f; border: none;}
.confirm-payment:hover {color: white; text-decoration: underline;}
.confirm-payment:focus {outline: none;}

.check-with-label:checked + .label-for-check {
    border: 2px solid #325b93;
}

.label-for-check img {
    max-height: 70px;
}

.StripeElement {
    height: 30px;
    padding: 5px 12px;

    color: #32325d;
    background-color: white;
    border: 1px solid black;
    border-radius: 10px;

    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

#history {
    border-collapse: separate;
    border-spacing: 0 20px;
}

#history tbody tr:nth-child(odd) {
    background-color: #f8f8f8;
}

#history th {padding: 0 1em 0 1em;}
#history td {padding: 1em; font-weight: bold;}
#history tbody td:first-child {border-left: 1px solid #ffc83f;}
#history tbody td:last-child {border-right: 1px solid #ffc83f;}
#history tbody td {border-top: 1px solid #ffc83f; border-bottom: 1px solid #ffc83f;}

footer {
    background-color: #325b93;
    color: white;
    font-size: 0.8em;
    padding: 80px 40px 20px 40px;
    margin-top: 2em;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    content: 'Small';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    font-size: 10px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: 'Large';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    font-size: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="40px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="40px"]::before {
    content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="40px"]::before {
    font-size: 40px;
}

.bg-letter {
    background: url('../img/enveloppe.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 80%;
    height: 280px;
}

.preview-letter {
    width: 300px;
    min-height: 150px;
    background-color: white;
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.3);
    padding: 1em;
    font-size: 0.65em;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 5px;
}

.preview-letter .destinataire {
    float: right;
    margin-right: 20px;
}

#form-expediteur-destinataire label {font-size: 0.9em;}
#form-expediteur-destinataire .form-group {margin-bottom: 0.5em;}

@media (max-width: 767px) {
    #form-expediteur-destinataire .border-left-yellow {border-left: none;}
    .header-contact {display: none;}
}

.link-my-account {display: flex; margin-bottom: 2em;}

.link-my-account a {
    height: 35px;
    width: 100%;
    min-width: 120px;
    padding: 5px 10px 5px 20px;
    color: white;
    background-color: #76a4d4;
    transition: all 0.2s ease-in-out;
    font-size: 0.9em;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.triangle {
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-bottom: 35px solid transparent;
    border-left: 20px solid #76a4d4;
    display: inline-block;
    transition: all 0.2s ease-in-out;
}

.link-my-account:hover a {
    min-width: 103%;
    background-color: #ffc83f;
}

.link-my-account.active a {
    background-color: #ffc83f;
}

.link-my-account:hover .triangle, .link-my-account.active .triangle {
    border-left: 20px solid #ffc83f;
}

.page-link {
    color: #325b93;
}

.page-item.active .page-link {
    background-color: #ffc83f;
    border-color: #ffc83f;
}