@font-face {
    font-family: "GreatVibes";
    src: url('fonts/GreatVibes/GreatVibes-Regular.ttf');
}

@font-face {
    font-family: "Roboto Light";
    src: url('fonts/Roboto/Roboto-Light.ttf');
}
@font-face {
    font-family: "Roboto Bold";
    src: url('fonts/Roboto/Roboto-Bold.ttf');
}
@font-face {
    font-family: "Roboto Regular";
    src: url('fonts/Roboto/Roboto-Regular.ttf');
}
@font-face {
    font-family: "Roboto Thin";
    src: url('fonts/Roboto/Roboto-Thin.ttf');
}

body {
    font-family: 'Roboto Light', serif;
}

.backgroundLogin {
    background-image: url("../design/background/connexion/backgroundLogin.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.backgroundSite {
    background-image: url("../design/background/connexion/backgroundHome.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}


.bg-footer {
    background-color: #17212b;
    background-image: url("../design/background/footer/fond_footer.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.imgFooter{
    position:absolute;
    left: 25%;
    width: 55%;
    top:-8.75rem;
}

html, body {
    height: 100%;
}

h1{
    font-family: 'GreatVibes', sans-serif;
    color: #17212b;
    font-size: 6.25rem;
}

h2 {
    font-family: 'GreatVibes', sans-serif;
    color: #17212b;
    font-size: 5rem;
}

h3 {
    font-family: 'GreatVibes', sans-serif;
    color: #17212b;
    font-size: 2.5rem;
}

h4 {
    color: #17212b;
    font-weight: bold;
    font-size: 25px;
}

h5 {
    font-family: 'GreatVibes', serif;
    font-size: 2.5rem;
}

.regularTitle {
    font-family: 'Roboto Regular', serif;
    font-size: 2.5rem;
}

.regularSubtitle {
    font-family: 'Roboto Regular', serif;
    font-size: 1.563rem;
}

.bodyText{
    font-family: 'Roboto Light', serif;
    font-size: 1.125rem;
}

.bodyTextRegular{
    font-family: 'Roboto Regular', serif;
    font-size: 1.125rem;
}

.linkFamily .list-group-item {
    font-family: 'Roboto Regular', serif;
    color: #747a80;
    border: none;
    text-align: left;
}

.linkFamily .list-group-item:hover {
    text-decoration: none;
    color: #17212b;
}

.activeFamily{
    background-color: #fdeded;
    font-weight: bold;
}

.smallTitle {
    font-family: 'Roboto Bold', sans-serif;
    color: #c94244;
    font-size: 30px;
}

.content-lighten {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    background-color: white;
}

.smallBody {
    font-size: 0.688rem;
}

.card-img-top {
    height: 10rem;
    object-fit: cover;
}

hr {
    background-color: #c94244;
    width: 20%;
    height: 0.125rem;
}

.hrBig {
    background-color: #c94244;
    width: 80%;
    height: 0.125rem;
}

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
    background-color: #fdeded;
}

.textPrice{
    color: #c94244;
    font-size: 1.563rem;
    font-family: 'Roboto Bold', sans-serif;
}

.hrDark {
    background-color: #17212b;
    width: 20%;
    height: 0.125rem;
}

.borderTotal{
    border-top: solid 1px #f6c9c8 !important;
}

.hugeModal {
    max-width: 70% !important;
    width: 70% !important;
}


.hrSeparatorLeft {
    background-color: #c94244;
    width: 10%;
    height: 0.125rem;
    margin-left:0;
}

.verticalLinePoint{
    position:absolute;
    left: 12rem;
    width: 2.5rem;
}

.bg-webshop {
    background-color: #17212b;
}


.bg-webshop-light {
    background-color: white;
}

.bg-webshop-dark {
    background-color: #f6c9c8;
}

.navTitleSelect {
    border-bottom: solid 2px #c94244;
}

.underline {
    border-bottom: solid 2px #c94244;
    width: 5rem;
}

.nav-link{
    color: white !important;
}

.navTitle a:hover {
    font-weight: bold;
}

.borderPoint{
    border-left: dotted 5px #f6c9c8;
}

.vcenter-item{
    display: flex;
    align-items: center;
}

.btn-primary{
    background-color: white;
    color: #c94244;
    border: none;
}

.btn-primary:hover{
    background-color: #17212b;
    color: white;
    border: none;
}

.borderWebshop{
    border: solid #f6c9c8 1px !important;
}

.card-title a{
    color: #17212b;
}

/* KNP PAGINATOR */

.page-link{
    color: #17212b;
}

.page-link:hover{
    background-color: white;
    color: #c94244;
}


.font-white{
    font-family: 'Roboto Light', serif;
    color: white;
}

.font-grey{
    font-family: 'Roboto Light', serif;
    color: #747a80;
}

.font-white-article{
    color: white;
    font-size: 20px;
}

.font-dark-article{
    color: #c94244;
    font-size: 20px;
}

.font-dark{
    font-family: 'DroidSerif Regular', sans-serif;
    color: white;
}

.divNumber{
    width: 8em;
}

.promo{
    text-decoration:line-through;
}

.pointSeparator{
    color: #f6c9c8;
    font-size: 2rem;
    letter-spacing: 0.2rem;
}

.pagination {
    display: -ms-flexbox;
    flex-wrap: wrap;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
}

.navbar-toggler{
    background-color: #5e0707 !important;
}

.redCircle{
   color: #c94244;
}

.inputQuantity{
    background-color: #fdeded;
    color: #17212b;
}

.disableLink {
    text-decoration: none;
    color: white;
}

.disableLink:hover {
    text-decoration: none;
}

.noSpacing{
    margin-bottom:0;
}

.imgFamily{
    width: 3.125rem;
}

.certifImg img{
    width: 6.25rem;
}

.navSocial {
    width  : 2.5rem;
    height : 2.5rem;
    background-color: #c94244;
    border-radius: 4px;
}

.divSocial{
    position: absolute;
    top: -2.65rem;
    left: 11rem;
    right: 9.375rem;
}

.logoNavBar{
    width: 15.625rem
}

#navi .fa-chevron-down {
    transition: all 0.5s ease;
}

#naviTwo .fa-chevron-down {
    transition: all 0.5s ease;
}

.rotate180 {
    transform: rotate(180deg);
}

.imgArticle{
    width: 25rem;
}

.redButton{
    background-color: #c94244;
    color: white;
    font-weight: bold;
}

.cards-wrapper {
    display: flex;
    justify-content: center;
}

.cardCarousel {
    margin: 0 0.5em;
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
    border: none;
    border-radius: 0;
}
.carousel-inner {
    padding: 1em;
}
.carousel-control-prev,
.carousel-control-next {
    background-color: #e1e1e1;
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

/** ICON **/

.icon-add{
    background-image : url("../design/icon/iconAdd.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 3.75rem;
    width: 3.75rem;
}

.icon-home{
    background-image : url("../design/icon/iconHome.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-facebook{
    background-image : url("../design/icon/iconFacebook.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}


.icon-linkedin{
    background-image : url("../design/icon/iconLinkedIn.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}


.icon-cart{
    background-image : url("../design/icon/iconWhiteCart.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-cart-negative{
    background-image : url("../design/icon/iconCartNegative.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-cart-positive{
    background-image : url("../design/icon/iconCartPositive.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-cart-red{
    background-image : url("../design/icon/iconCartRed.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}
.icon-cart-red-big{
    background-image : url("../design/icon/iconCartRed.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 4rem;
    width: 4rem;
}

.icon-delete{
    background-image : url("../design/icon/iconDelete.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-logout-negative{
    background-image : url("../design/icon/iconLogoutNegative.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}


.icon-download{
    background-image : url("../design/icon/iconDownload.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}


.icon-detail{
    background-image : url("../design/icon/iconDetail.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-recommendation{
    background-image : url("../design/icon/iconRecommendation.svg");
    background-repeat: no-repeat;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-document-negative{
    background-image : url("../design/icon/iconDocumentNegative.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}


.icon-document-positive{
    background-image : url("../design/icon/iconDocumentPositive.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}


.icon-contact{
    background-image : url("../design/icon/iconContact.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-matrix{
    background-image : url("../design/icon/iconMatrix.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}


.icon-archive{
    background-image : url("../design/icon/iconArchive.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}


.icon-logout-positive{
    background-image : url("../design/icon/iconLogoutPositive.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}


.icon-phone{
    background-image : url("../design/icon/iconPhone.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-mail{
    background-image : url("../design/icon/iconMail.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-profile-negative{
    background-image : url("../design/icon/iconProfileNegative.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}


.icon-phone-negative{
    background-image : url("../design/icon/iconPhoneNegative.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-access-negative{
    background-image : url("../design/icon/iconAccessNegative.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-profile-positive{
    background-image : url("../design/icon/iconProfilePositive.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-access-positive{
    background-image : url("../design/icon/iconAccessPositive.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-search{
    background-image : url("../design/icon/iconSearch.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

.icon-document{
    background-image : url("../design/icon/iconDocument.svg");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 2.8rem;
    width: 2.8rem;
}

.page-item.active .page-link {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* DESIGN SWEETALERT*/
.swal2-icon.swal2-error {
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    background-color: #dc3545 !important;
}

.swal2-styled.swal2-confirm {
    background-color: #17212b;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border: 0.25em solid rgb(253, 237, 237) !important;
}

.swal2-success-line-tip {
    background-color: rgb(253, 237, 237) !important;
}

.swal2-success-line-long {
    background-color: rgb(253, 237, 237) !important;
}

.swal2-icon.swal2-warning {
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

/* DESIGN CALENDAR*/
.ui-widget{
    font-family: 'Roboto Regular', serif !important;
}

.ui-widget-content {
    background: #17212b 50% top repeat-x !important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background: #17212b 50% 50% repeat-x !important;
}

.radioColor{
    accent-color: #c94244;
}

/* RESPONSIVE */

@media (max-width: 500px) {
    .centerForm {
        min-width: 90%;
    }

    .homeContainer{
        width: 100% !important;
    }

    .homeHeight{
        height: 125% !important;
    }

    .footerReponsive{
        margin-top: 6.25rem
    }

    .verticalLinePoint{
        visibility: hidden;
    }

    .logoNavBar{
        width: 10rem
    }

    .titleHome{
        text-align: center;
    }

}

@media (max-width: 1600px) {

    .verticalLinePoint{
        visibility: hidden;
    }
}


@media (max-width: 1800px) {

    .imgArticle{
        width: 11rem;
    }
}