@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i&subset=latin-ext);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700&subset=latin-ext);
@import url(https://fonts.googleapis.com/css?family=Dosis:400,300,500,600);
@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);

body {
    letter-spacing: 1px !important;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .frameclass {
        padding-top: 1rem !important;
        width: 100% !important;
        height: 205px !important;
    }

    .card-headercustom {
        font-size: 10px !important;
        background: lightgray !important;
    }
}

@media only screen and (min-width: 425px) {
    .frameclass {
        padding-top: 1rem !important;
        width: 100% !important;
        height: 295px !important;
    }

    .headercustom {
        font-size: 12px !important;
        background: lightgray !important;
    }

    .modal-lg {
        max-width: 100%;
    }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .headercustom {
        font-size: 14px !important;
        background: lightgray !important;
    }

    .frameclass {
        padding-top: 1rem !important;
        width: 100% !important;
        height: 330px !important;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .headercustom {
        font-size: 12px !important;
        background: lightgray !important;
    }

    .frameclass {
        padding-top: 1rem !important;
        width: 100% !important;
        height: 383px !important;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .frameclass {
        padding-top: 1rem !important;
        width: 100% !important;
        height: 570px !important;
    }

    .headercustom {
        background: lightgray !important;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .frameclass {
        padding-top: 1rem;
        width: 100% !important;
        height: 680px !important;
    }

    .headercustom {
        background: lightgray !important;
    }
}