﻿html {
    position: relative;
    min-height: 100%;
}

.hidden {
    display: none;
}

/*
COLORS
BLUE: #35376C
WHITE: #FFFFFF
DUST STORM(Darker): #E7C7C0
CORAL CANDY(Lighter): #F0D6D1
OLD LACE: #FFF6E5
ROSE WHITE: #FFEFEB
FLORAL WHITE: #FFFEFC
FADE: #E7C7C0 - #FFF6E5
FADE: #FFEFEB - #FFFEFC
*/


/*typographic*/

/*@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');*/

@font-face {
    font-family: qualy;
    src: url(../fonts/Qualy.ttf);
}
@font-face {
    font-family: montserrat;
    src: url(../fonts/Montserrat-Regular.ttf);
}
@font-face {
    font-family: montserrat-medium;
    src: url(../fonts/Montserrat-Medium.ttf);
}
@font-face {
    font-family: montserrat-semibold;
    src: url(../fonts/Montserrat-SemiBold.ttf);
}
@font-face {
    font-family: montserrat-bold;
    src: url(../fonts/Montserrat-Bold.ttf);
}

h1, h2, h3, h4, h5, h6 {
    color: #35376C;
    font-family: qualy, sans-serif;
}

h1 {
    font-size: 28px;
}

h2 {
    font-size: 20px;
}

p {
    color: #35376C;
    font-size: 16px;
    font-family: montserrat, sans-serif;
    margin: 0;
}

a {
    font-family: qualy, sans-serif;
}

a:hover {
    color: #E7C7C0 !important;
    text-decoration: none !important;
}

button {
    font-family: montserrat, sans-serif;
}

.montserrat-regular {
    font-family: montserrat;
}
.montserrat-medium {
    font-family: montserrat-medium;
}
.montserrat-semibold {
    font-family: montserrat-semibold;
}
.montserrat-bold {
    font-family: montserrat-bold;
}

button:focus {
    outline: none !important;
}

input:focus {
    outline: none !important;
}

@media only screen and (min-width: 1080px) {
    h1 {
        font-size: 45px;
    }

    h2 {
        font-size: 25px;
    }

    h2 {
        font-size: 20px;
    }

    p {
        font-size: 20px;
    }
}

/*BUTTONS*/

.btn-default {
    font-size: 20px;
    width: 326px;
    height: 53px;
    border-radius: 27px;   
}

.btn-default:focus {
    transform: scale(1.05);
}

.btn-default--filled {
    background: #35376C;
    color: #FFFFFF;
    border: none;
}

.btn-default--filled:disabled {
    opacity: 0.2;
}

.btn-default--filled:disabled:hover {
    width: 234px;
    height: 53px;
}

.btn-default--border {
    background: none;
    color: #35376C;
    border: #35376C 3px solid;
}

.btn-inactive {
    background: #DEDEDE;
}

.btn-symptoms {
    background: #E7C7C09F;
    color: #35376C;
    font-size: 20px;
    width: 100%;
    min-height: 33px;
    border-radius: 33px;
    border: none;
    padding: 2px 50px;
    margin: 0 0 35px 0;
    font-family: montserrat, sans-serif;
}

.btn-symptoms:focus {
    background: #35376C;
    color: #FFFFFF;
}

@media only screen and (min-width: 400px) {
    .btn-symptoms {
        width: 318px;
    }
}

/*@media only screen and (min-width: 700px) {

    .btn-symptoms {
        min-width: 150px;
        width: auto;
        margin: 0 0 0 30px;
    }
}*/

@media only screen and (min-width: 1080px) {
    .btn-default {
        width: 260px;
    }

    .btn-default:focus {
        width: 234px;
    }

    .btn-default:hover {
        transform: scale(1.05);
    }

    .btn-symptoms {
        min-width: 150px;
        width: auto;
        margin: 0 0 35px 30px;
    }

    .btn-symptoms:hover {
        background: #35376C;
        color: #fff;
    }

    #categoryForm,
    .take-container,
    .filter-container {
        margin: 0 32px;
    }

/*    .btn-symptoms:hover:after {
        content: '\f061';
    }*/
}

body {
    margin: 0;
    line-height: 1.7;
    text-align: left;
    background-color: #fff;
    /*background-image: url('../gfx/barn_1920_1230px.jpg');*/
    /*background-image: url('../gfx/main_page_ready.png');*/
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
}
