@font-face {
    font-family: ATHELAS-REGULAR;
    src: url(/static/fonts/ATHELAS-REGULAR.TTF);
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: ATHELAS-BOLDITALIC;
    src: url(/static/fonts/ATHELAS-BOLDITALIC.TTF);
    font-weight: 700;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: ATHELAS-BOLD;
    src: url(/static/fonts/ATHELAS-BOLD.TTF);
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: ATHELAS-ITALIC;
    src: url(/static/fonts/ATHELAS-ITALIC.TTF);
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Poppins-bold;
    src: url(/static/fonts/Poppins-Bold.ttf);
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Poppins-bold-extra;
    src: url(/static/fonts/Poppins-ExtraBold.ttf);
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Poppins-regular;
    src: url(/static/fonts/Poppins-Regular.ttf);
    font-weight: 400;
    font-style: normal;
    font-display: swap
}


body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden
}

body {
    max-width:1920px;
    margin:0 auto;
    background: white;
    font-family:ATHELAS-REGULAR !important;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    background: white;
    z-index: 1;
}

.img-100{
    width:100%
}

.text-green-2 {
    color: #395542;
    font-family: ATHELAS-BOLD;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}

.text-green-1-5 {
    color: #395542;
    font-family:ATHELAS-BOLD;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}

.text-green-1-2 {
    color: #395542;
    font-family: ATHELAS-REGULAR;
    font-size: 1.2rem;
    font-style: normal;
    line-height: 100%;
}

.text-green-1 {
    color: #395542;
    font-family: ATHELAS-REGULAR;
    font-size: 1rem;
    font-style: normal;
    line-height: 100%;
}

input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.font-08rem{
    font-size:0.8rem
}

a {
    text-decoration: none !important;
}

.display-inline {
    display: inline-block;
}

/*.body-content{
  padding-top:5%
}*/

.color-black{
    color:black;
}

.border-2px-top{
    border-top: 2px solid
}

.padding-main{
   padding-left:5%;
   padding-right: 5%
}

h1 {
    font-size: 3.5rem !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 120%; /* 85.5px */
    letter-spacing: 1.9px;
    font-family: Poppins-regular!important
}

h2 {
    font-size: 3.1rem !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 120%; /* 85.5px */
    letter-spacing: 1.9px;
    font-family: Poppins-regular !important
}


h3 {
    font-size: 2.5rem !important;
    font-weight: 500 !important;
    line-height: 120% !important;
    letter-spacing: 1px;
    font-family: Poppins-regular !important
}

.img-220{
    width:220px;
}
.img-300 {
    width: 300px;
}

.style-1{
    color:red
}
.style-2 {
    color: orange
}
.style-3 {
    color: darkgreen
}

.style-4 {
    color: darkblue
}

h4 {
    font-size: 2rem !important;
    font-weight: 500 !important;
    line-height: 120% !important;
    letter-spacing: 1px;
    color: black !important;
    font-family: Poppins-regular !important
}

.font-1-8{
    font-size:1.8rem;
    line-height:120%;
}

.font-1-3rem{
    font-size: 1.3rem;
    line-height: 120%;
}

a:hover{
    color:black
}

input {
    border-radius: 31px;
    background: #FFF;
    width: 100%;
    height: 3rem;
    padding-left:20px;
}

input::placeholder{
    font-size:1.1rem;
    color:grey;
    opacity:0.6;
}

textarea {
    border-radius: 31px;
    background: #FFF;
    min-height: 15rem;
    width: 100%;
    padding-left: 20px;
    padding-top: 20px;
}

    textarea::placeholder {
        font-size: 1.1rem;
        color: grey;
        opacity: 0.6;
    }

.button-green {
    padding: 1rem;
    border-radius: 12px;
    background: #395542;
    color:white;
    font-size:1rem
}

    .button-green:hover {
        padding: 1rem;
        border-radius: 12px;
        background: white;
        color: #395542;
        font-size: 1rem
    }


.button-green-mag {
    padding: 1rem;
    background: #395542;
    color: white !important;
    font-size: 1rem
}

    .button-green-mag:hover {
        font-size: 1.2rem
    }

    .cursor-pointer{
        cursor: pointer
    }


.button-green-form {
    padding: 1rem 1.3rem;
    border-radius: 12px;
    background: #395542;
    color: white;
    font-size: 1.2rem
}

    .button-green-form:hover {
        padding: 1rem 1.5rem;
        border-radius: 12px;
        background: #395542;
        color: white;
        font-size: 1.4rem
    }

    .button-green-form:disabled{
        opacity: 0.6;
        background: #395542;
        color: white;
    }

.modal-content {
    border-radius: 15px !important;
    background: #DDA46F !important;
    text-align: center !important;
}

.modal-header{
    border: none !important
}

input.ng-invalid.ng-touched {
    border: 1px solid red !important
}

textarea.ng-invalid.ng-touched {
    border: 1px solid red !important
}

.line-div {
    border-bottom: 2px solid black;
    width: 90%;
    margin: 0 auto;
}

.type-font {
    color: #395542;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: 3.802px;
    text-transform: uppercase;
}

.tag-font {
    text-transform: uppercase;
    font-size: 0.6rem;
    font-weight:700;
}

.date-font {
    color: #000;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 1.901px;
}

.bg-grey-1 {
    background: #E5E1E6
}

.bg-grey-2 {
    background: #BFCEC2
}

article, footer, header, hgroup, menu, nav, section {
    display: block
}

/*h1 {
    font-size: 32px;
    color: #343742;
    line-height: 3rem
}
*/
.img-contact {
    width: 220px;
}

.text-align-contact {
    text-align: right
}


h2 {
    font-family: ATHELAS-BOLD !important;
    font-size: 34px;
    color: #343742;
    line-height: 3rem
}

.subscribe-button {
    border-radius: 10px;
    border: 2px solid #DDA46F;
    padding: 0.5rem 1rem 0.5rem 1rem;
    font-size: 1.2rem;
    color:black;
    text-transform: uppercase
}

    .subscribe-button:hover {
        border-radius: 10px;
        border: 2px solid #DDA46F;
        padding: 0.5rem 1rem 0.5rem 1rem;
        background: #DDA46F;
        font-size: 1.2rem;
        color: black;
        text-transform: uppercase
    }

.display-desk{
    display: block;
}

.display-mob{
    display:none;
}

#floating-icon > div {
    position: fixed;
    left: 0;
    top: 50%;
    transform: rotate(-90deg) translate(-50%, 50%);
    transform-origin: left;
}

.say-it-float {
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    background: #DDA46F;
    box-shadow: 2px 2px 6px #DDA46F;
}

.say-it-a {
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    color: white;
    padding:0.8rem
}

.say-it-a:hover {
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    color: white;
    padding: 0.9rem
}

.background-grey {
    background: #E5E1E6;
}

.hover-image{
    width:40px;
}

.hover-image:hover{
    width:60px;
}

.right-items {
    position: fixed;
    bottom: 0;
    right: 0;
    background: #E5E1E6;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

/*Menu*/
#menu__toggle {
    opacity: 0;
}

    #menu__toggle:checked + .menu__btn > span {
        transform: rotate(45deg);
    }

        #menu__toggle:checked + .menu__btn > span::before {
            top: 0;
            transform: rotate(0deg);
        }

        #menu__toggle:checked + .menu__btn > span::after {
            top: 0;
            transform: rotate(90deg);
        }

    #menu__toggle:checked ~ .menu__box {
        left: 0 !important;
    }

.menu__btn {
    position: fixed;
    top: 35px;
    left: 1%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    z-index: 3;
}

    .menu__btn > span,
    .menu__btn > span::before,
    .menu__btn > span::after {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #616161;
        transition-duration: .25s;
    }

        .menu__btn > span::before {
            content: '';
            top: -8px;
        }

        .menu__btn > span::after {
            content: '';
            top: 8px;
        }

.menu__box {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 35rem;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: white;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition-duration: .25s;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    z-index: 2
}

.menu__item {
    display: block;
    color: #000000;
    font-size: 1.7rem;
    font-weight: 400;
    text-decoration: none;
    transition-duration: .25s;
    text-align: center;
    padding: 0 2.5rem;
}

    .menu__item:hover {
        background-color: white;
        color: #395542;
    }
/**/

/*Menu*/
#menu {
    z-index: 2;
}

#menu-bar {
    width: 45px;
    height: 40px;
    margin: 30px 0 20px 20px;
    cursor: pointer;
}

.bar {
    height: 3px;
    width: 100%;
    background-color: black;
    display: block;
    border-radius: 5px;
    transition: 0.3s ease;
}

#bar1 {
    transform: translateY(-4px);
}

#bar3 {
    transform: translateY(4px);
}

.menu-nav {
    transition: 0.3s ease;
    display: none;
    padding-left: 2%;
}

    .menu-nav ul {
        padding: 0 22px;
    }

    .menu-nav li {
        list-style: none;
        padding: 12px 0;
    }

        .menu-nav li a {
            color: white;
            font-size: 20px;
            text-decoration: none;
        }

            .menu-nav li a:hover {
                font-weight: bold;
            }

.menu-bg, #menu {
    top: 0;
    left: 0;
    position: absolute;
}

.menu-bg {
    z-index: 1;
    width: 0;
    height: 0;
    background: radial-gradient(circle, #E5E1E6, #E5E1E6);
    transition: 0.3s ease;
}

.change {
    display: block;
}

    .change .bar {
        background-color: white;
    }

    .change #bar1 {
        transform: translateY(4px) rotateZ(-45deg);
    }

    .change #bar2 {
        opacity: 0;
    }

    .change #bar3 {
        transform: translateY(-6px) rotateZ(45deg);
    }

.change-bg {
    width: 280px !important;
    height: auto;
    min-height: 30rem;
    border-top-right-radius: 71px;
    border-bottom-left-radius: 71px;
    border-bottom-right-radius: 71px;
}

.text-align-logo{
    text-align:center;
}
/**/

/**/
/*turn.js*/
#flipbook {
    width: 400px;
    height: 300px;
}

    #flipbook .page {
        width: 400px;
        height: 300px;
        background-color: white;
        line-height: 300px;
        font-size: 20px;
        text-align: center;
    }

    #flipbook .page-wrapper {
        -webkit-perspective: 2000px;
        -moz-perspective: 2000px;
        -ms-perspective: 2000px;
        -o-perspective: 2000px;
        perspective: 2000px;
    }

    #flipbook .hard {
        background: #ccc !important;
        color: #333;
        -webkit-box-shadow: inset 0 0 5px #666;
        -moz-box-shadow: inset 0 0 5px #666;
        -o-box-shadow: inset 0 0 5px #666;
        -ms-box-shadow: inset 0 0 5px #666;
        box-shadow: inset 0 0 5px #666;
        font-weight: bold;
    }

    #flipbook .odd {
        background: -webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
        background-image: -webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image: -moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image: -ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image: -o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image: linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        -webkit-box-shadow: inset 0 0 5px #666;
        -moz-box-shadow: inset 0 0 5px #666;
        -o-box-shadow: inset 0 0 5px #666;
        -ms-box-shadow: inset 0 0 5px #666;
        box-shadow: inset 0 0 5px #666;
    }

    #flipbook .even {
        background: -webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
        background-image: -webkit-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image: -moz-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image: -ms-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image: -o-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image: linear-gradient(left, #fff 95%, #dadada 100%);
        -webkit-box-shadow: inset 0 0 5px #666;
        -moz-box-shadow: inset 0 0 5px #666;
        -o-box-shadow: inset 0 0 5px #666;
        -ms-box-shadow: inset 0 0 5px #666;
        box-shadow: inset 0 0 5px #666;
    }
/**/

/*Footer*/
.footer {
    color: black
}
.menu-footer {
    color: #000000;
    font-size: 1.3rem;
    font-weight: 400;
    text-decoration: none;
    list-style-type: none
}

    .menu-footer:hover {
        color: #DDA46F;
    }
/**/


.section-img-width {
    width: 180px;
}
@media only screen and (max-width: 1650px) and (min-width: 1300px) {
    h3 {
        font-size: 2rem !important;
    }
}

@media only screen and (max-width: 1300px) and (min-width: 1000px) {
    h3 {
        font-size: 2.1rem !important;
    }

    .section-img-width {
        width: 150px;
    }
}

@media only screen and (max-width: 999px) and (min-width: 768px) {

    .img-300 {
        width: 220px;
    }

    .type-font {
        font-size: 1rem;
    }

    h3 {
        font-size: 1.7rem !important;
    }

    h1{
        font-size: 2.5rem !important;
    }

    .font-1-3rem{
        font-size:1rem !important
    }

    .font-1-8 {
        font-size: 1.2rem !important
    }

    .img-100 {
        width: 100%
    }

    .text-green-2 {
        font-size: 1.2rem;
    }

    .text-green-1-5 {
        font-size: 1.1rem;
    }

    .text-green-1-2 {
        font-size: 0.9rem;
    }

    .text-green-1 {
        font-size: 0.7rem;
    }

    .img-220 {
        width: 150px;
    }

    .img-contact {
        width: 150px;
    }

    h4 {
        font-size: 1.5rem !important
    }

    .body-content{
        padding-top: 5%
    }

    .subscribe-button {
        font-size: 1rem;
        padding: 0.4rem 0.8rem 0.4rem 0.8rem;
    }

    .section-img-width{
        width: 120px;
    }

}

@media only screen and (max-width: 767px) and (min-width: 577px) {
    .display-desk {
        display: none
    }

    .display-mob {
        display: block;
    }

    .img-100 {
        width: 75%;
        text-align:center;
    }

    .img-220 {
        width: 75%;
        text-align: center;
    }


    .img-contact {
        width:300px;
    }

    .text-align-contact {
        text-align: center
    }


    .img-300 {
        width: 300px;
    }

    .footer-center {
        text-align: center
    }
}




@media (max-width:576px) {
    .text-align-logo {
        text-align: right;
    }

    .footer-center{
        text-align:center
    }

    .display-desk {
        display: none
    }

    .display-mob {
        display: block;
    }

    .menu__btn {
        position: fixed;
        top: 3%;
        left: 3%;
        width: 35px;
        height: 35px;
        cursor: pointer;
        z-index: 3;
    }

    .text-center-mob{
        text-align:center
    }

    .body-content {
        padding-top: 20%;
    }

    .menu__box {
        height: 40rem
    }

    .img-100{
        width:100%
    }

    .img-220 {
        width: 100%;
    }

    .img-300 {
        width: 100%;
    }

    .img-contact{
        width: 220px;
    }

    .text-align-contact{
        text-align:center
    }


    h1 {
        font-size: 2rem !important;
    }
}

@media (max-width:350px) {
    .menu__box {
        width:250px
    }
    }