// *{
//     margin:0px!important;
//     padding:0px!important;
// }
html, body {
    height: 100%;
    @extend %body-font;
    color: $primary-color;
}

img{
	max-width:100%;
	border:none;
	height:auto;
} 

// for WordPress dashboard default p tags
div:empty,
p:empty {
    display: none;
}

// for WordPress dashboard default br tags
br{
    display: none;
}

%gradient-fertility {
    background: $fertility-color;
    background: linear-gradient(90deg, $fertility-color 45%, rgba(0, 153, 70, 0) 115%);
}

.title-one,
%title-one,
h1 {
    font-family: $font-title;
    font-size: 42px;
    line-height: 51px;
    font-weight: 500;
    @include media-breakpoint-down(md) {
        font-size: 28px;
        line-height: 32px;
    }
} 

.title-two,
%title-two,
h2 {
    font-family: $font-title;
    font-size: 36px;
    line-height: 54px;
    @include media-breakpoint-down(md) {
        font-size: 22px;
        line-height: 30px;
    }
} 

.title-three,
%title-three,
h3 {
    font-family: $font-title;
    font-size: 32px;
    line-height: 51px;   
    @include media-breakpoint-down(md) {
        font-size: 18px;
        line-height: 26px; 
    }
}

.title-forth,
%title-forth,
h4 {
    font-family: $font-title;
    font-size: 28px;
    line-height: 34px;   
    @include media-breakpoint-down(md) {
        font-size: 16px;
        line-height: 22px; 
    }
}

.title-blog,
%title-blog{
    @extend %title-forth;
    font-weight: 600;
}

.title-sub,
%title-sub{
    font-family: $font-title;
    font-size: 18px;
    line-height: 28px;   
    @include media-breakpoint-down(md) {
        font-size: 15px;
        line-height: 22px; 
    }
}

.big-text,
%big-text{
    font-family: $font-primary;
    font-size: 22px;
    line-height: 42px;   
    font-weight: 600;
    @include media-breakpoint-down(md) {
        font-size: 18px;
        line-height: 22px; 
    }   
}

.body-font,
%body-font {
    font-family: $font-primary;
    font-size: 14px;
    line-height: 28px;
    font-weight: normal;
}

.button-primary,
%button-primary {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    padding: 12px 20px;
    font-family: $font-title;
    font-size: 14px;
    line-height: 18px;
    border-radius: 0px;
    color: $title-darker;
    background: $white;
    text-transform: uppercase;
    border: none;
    &:hover{
        background: $button-color;
        color: $white;
        transition: all 0.5s ease;
        text-decoration: none;
        border: none;
    }
    & a{
        color: inherit;
        text-decoration: none;
    }
}

.button-fill,
%button-fill {
    @extend %button-primary;
    background: $button-color;
    color: $white;
    &:hover{
        color: $title-darker;
        background: $white;
    }
}

.text-button {
    letter-spacing: 0.6px;
    text-transform: uppercase;
    width: 100%;
    color: #57656E;
    cursor: pointer;
    &:hover {
        text-decoration: none;
        color: $title-darker;
        i {
            margin-left: 8px;
            transition: all ease-in-out .3s;
        }
    }
    i {
        margin-left: 2px;
        transition: all ease-in-out .3s;
    }
}

.button-lutigest,
%button-lutigest{
    @extend %button-primary;
    background: $lutigest-color;
    color: $white;
    &:hover{
        color: $title-darker;
        background: $white;
    }
}

.background,
%background{
    background-repeat: no-repeat!important;
    background-size: cover!important;
    background-position: top center!important;
}

.fades {
-webkit-animation-name: fades;
-webkit-animation-duration: 2s;
animation-name: fades;
animation-duration: 2s;
}
@-webkit-keyframes fades {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fades {
from {opacity: .4}
to {opacity: 1}
} 


@include media-breakpoint-down(md) {
    .hide-sm{
        display: none;
    }
}
@include media-breakpoint-up(md) {
    .hide-lg{
        display: none;
    }
}