/* -----------------------------------------------------------------------------------------------------
	Template starts here
   ---------------------------------------------------------------------------------------------------*/

:root {
    --black: #212426;
    --crimson: #dc143c;
    --dark-blue: #407fc7;
    --dark-coral: #cd604a;
    --dark-gray: #666;
    --dark-jungle-green: #1a1f23;
    --gunmetal: #2a2f45;
    --lavender-gray: #c1c9d2;
    --light-blue: #b4d8fd;
    --light-gray: #bababa;
    --light-yellow: #ffbc5b;
    --medium-gray: #999;
    --medium-yellow: #e09f41;
    --mint-cream: #f4f9fb;
    --orange: #fa755a;
    --very-light-gray: #ccc;
    --white: #fff
}

*,
::after,
::before {
    box-sizing: inherit
}

:-moz-ui-invalid {
    box-shadow: none
}

:disabled {
    cursor: not-allowed!important
}

::-moz-selection {
    background-color: var(--light-blue)
}

::selection {
    background-color: var(--light-blue)
}

::-webkit-input-placeholder {
    color: var(--medium-gray)
}

::-moz-placeholder {
    color: var(--medium-gray)
}

:-ms-input-placeholder {
    color: var(--medium-gray)
}

::-ms-input-placeholder {
    color: var(--medium-gray)
}

::placeholder {
    color: var(--medium-gray)
}

html {
    box-sizing: border-box;
    font-size: 62.5%
}

body {
    background-color: var(--mint-cream);
    color: var(--black);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 135rem;
    width: 90%;
    overflow-wrap: break-word
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0
}

.h1,
h1 {
    font-size: 5.2rem
}

.h2,
h2 {
    font-size: 4.2rem
}

.h3,
h3 {
    font-size: 3.2rem
}

@media (max-width:64rem) {
    .h1,
    h1 {
        font-size: 4rem
    }
    .h2,
    h2 {
        font-size: 3.4rem
    }
    .h3,
    h3 {
        font-size: 2.8rem
    }
}

@media (max-width:32rem) {
    .h1,
    h1 {
        font-size: 3.4rem
    }
    .h2,
    h2 {
        font-size: 2.8rem
    }
    .h3,
    h3 {
        font-size: 2.2rem
    }
}

.a,
a {
    color: var(--dark-blue);
    text-decoration: none;
    cursor: pointer
}

.a:active,
.a:focus,
.a:hover,
a:active,
a:focus,
a:hover {
    color: var(--black);
    text-decoration: underline
}

p {
    margin-bottom: 1rem
}

article {
    padding: 1rem
}

li {
    line-height: 2
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    text-align: center
}

tr {
    height: 10rem;
    border-bottom: .2rem solid
}

img,
svg {
    vertical-align: middle
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

label {
    display: block
}

details {
    margin: 1.5rem 0
}

summary {
    cursor: pointer
}

pre {
    background-color: var(--mint-cream);
    padding: 2rem;
    white-space: pre-wrap
}

mark {
    background-color: var(--light-blue);
    border-radius: .2rem;
    padding: .5rem
}

.secondary-text {
    color: var(--dark-gray);
    font-size: 1.5rem
}

.logo {
    color: var(--black);
    font-size: 2.8rem
}

[type=email],
[type=number],
[type=password],
[type=tel],
[type=text],
[type=url],
select,
textarea {
    background-color: var(--white);
    border: .2rem solid var(--light-gray);
    border-radius: .2rem;
    font-size: 1.5rem;
    line-height: inherit;
    margin: 1rem 0;
    padding: 1rem;
    width: 100%
}

[type=email]:focus,
[type=number]:focus,
[type=password]:focus,
[type=tel]:focus,
[type=text]:focus,
[type=url]:focus,
select:focus,
textarea:focus {
    border: .2rem solid var(--black);
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    outline: 0
}

[type=email]:disabled,
[type=number]:disabled,
[type=password]:disabled,
[type=tel]:disabled,
[type=text]:disabled,
[type=url]:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--very-light-gray);
    border: .2rem solid var(--medium-gray);
    color: var(--dark-gray)
}

.button,
[type=button],
[type=reset],
[type=submit],
button {
    background-color: transparent;
    border-radius: .2rem;
    border: .2rem solid var(--black);
    color: var(--black);
    cursor: pointer;
    display: inline-block;
    font-size: 1.5rem;
    line-height: inherit;
    margin: 1rem 0;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    -webkit-transition: .5s ease-out;
    transition: .5s ease-out;
    min-width: 20rem
}

.big-button {
    font-size: 1.8rem;
    min-width: 24rem;
    width: 25%
}

.button-selected,
.button:focus,
.button:hover,
[type=button]:focus,
[type=button]:hover,
[type=reset]:focus,
[type=reset]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover {
    box-shadow: .4rem .4rem 0 0 var(--black);
    outline: 0;
    text-decoration: none
}

.button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled,
button:disabled {
    background-color: var(--very-light-gray);
    border: .2rem solid var(--medium-gray);
    box-shadow: none;
    color: var(--dark-gray)
}

.button-action {
    background-color: var(--light-blue);
    color: var(--black)
}

.button-danger {
    background-color: var(--crimson);
    color: var(--white)
}

.flex {
    display: flex!important
}

.block {
    display: block!important
}

.inline-block {
    display: inline-block!important
}

.hidden {
    display: none!important
}

@media (max-width:640px) {
    .sm\:block {
        display: block!important
    }
}

.flex-wrap {
    flex-wrap: wrap!important
}

.justify-around {
    justify-content: space-around!important
}

.justify-between {
    justify-content: space-between!important
}

.justify-center {
    justify-content: center!important
}

.items-center {
    align-items: center!important
}

@media (max-width:640px) {
    .sm\:justify-center {
        justify-content: center!important
    }
    .sm\:flex-grow {
        flex-grow: 1!important
    }
}

.p-0 {
    padding: 0!important
}

.p-1 {
    padding: 1rem!important
}

.p-2 {
    padding: 2rem!important
}

.py-1 {
    padding-top: 1rem!important;
    padding-bottom: 1rem!important
}

.py-2 {
    padding-top: 2rem!important;
    padding-bottom: 2rem!important
}

.m-0 {
    margin: 0!important
}

.m-1 {
    margin: 1rem!important
}

.m-2 {
    margin: 2rem!important
}

.m-3 {
    margin: 3rem!important
}

.mr-2 {
    margin-right: 2rem!important
}

.mr-4 {
    margin-right: 4rem!important
}

.mt-1 {
    margin-top: 1rem!important
}

.mt-2 {
    margin-top: 2rem!important
}

.mb-0 {
    margin-bottom: 0!important
}

.mb-2 {
    margin-bottom: 2rem!important
}

.mb-12 {
    margin-bottom: 12rem!important
}

.my-1 {
    margin-top: 1rem!important;
    margin-bottom: 1rem!important
}

.my-2 {
    margin-top: 2rem!important;
    margin-bottom: 2rem!important
}

.my-3 {
    margin-top: 3rem!important;
    margin-bottom: 3rem!important
}

.mx-05 {
    margin-left: .5rem!important;
    margin-right: .5rem!important
}

.m-0-auto {
    margin: 0 auto!important
}

.border-0 {
    border: 0!important
}

.border-b-2 {
    border-bottom: .2rem solid!important
}

.border-l-2 {
    border-left: .2rem solid!important
}

.border-t-2 {
    border-top: .2rem solid!important
}

.border-r-2 {
    border-right: .2rem solid!important
}

.border-t-3 {
    border-top: .3rem solid!important
}

.border-b-3 {
    border-bottom: .3rem solid!important
}

.min-width-25 {
    min-width: 25rem!important
}

.min-width-30 {
    min-width: 30rem!important
}

.w-60 {
    width: 60%!important
}

.w-46 {
    width: 46%!important
}

.w-45 {
    width: 45%!important
}

.w-30 {
    width: 30%!important
}

.h-80 {
    height: 80vh!important
}

.text-center {
    text-align: center!important
}

.text-left {
    text-align: left!important
}

.no-underline {
    text-decoration: none!important
}

.underline {
    text-decoration: underline!important
}

.dotted {
    -webkit-text-decoration-style: dotted!important;
    text-decoration-style: dotted!important
}

.font-lg {
    font-size: 3.6rem!important
}

.font-m {
    font-size: 2.8rem!important
}

.text-sm {
    font-size: 1.4rem!important
}

.font-bold {
    font-weight: 700!important
}

@media (max-width:640px) {
    .font-lg {
        font-size: 2.2rem!important
    }
    .font-m {
        font-size: 1.8rem!important
    }
}

.list-none {
    list-style-type: none!important
}

.crimson {
    color: var(--crimson, #dc143c)!important
}

.black {
    color: var(--black, #000)!important
}