/*CSS RESET*/

*,
*::after,
*::before {
    box-sizing: border-box;
}

@font-face {
    font-family: 'VTF Redzone Classic-Oblique';
    src: url('../fonts/VTFRedzone-ClassicOblique/VTFRedzone-ClassicOblique.woff2') format('woff2'),
        url('../fonts/VTFRedzone-ClassicOblique/VTFRedzone-ClassicOblique.woff') format('woff'),
        url('../fonts/VTFRedzone-ClassicOblique/VTFRedzone-ClassicOblique.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    size-adjust: 100%;
}

@font-face {
    font-family: 'VTF Redzone Classic';
    src: url('../fonts/VTFRedzone-Classic/VTFRedzone-Classic.woff2') format('woff2'),
        url('../fonts/VTFRedzone-Classic/VTFRedzone-Classic.woff') format('woff'),
        url('../fonts/VTFRedzone-Classic/VTFRedzone-Classic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


:root {
    --color-neutral-light: #eee;
    --color-neutral-medium: #999;
    --color-neutral-dark: #555;

    --color-main-light: #9bc6ba;
    --color-main-medium: #2b3985;
    --color-main-dark: #262d66;

    --color-black: #000;
    --color-white: #fff;
    --color-orange: #f15a22;
    --color-off-black: #141921;

    --header-height: 5rem;
    /*always based on relative size of the document*/
    --spacing: 1rem;

    --font-serif: Georgia, "Times New Roman", serif;
    --font-sans: Helvetica, Arial, sans-serif;
    --font-text: 'Open Sans', sans-serif;
    --font-condensed: 'Roboto Condensed', sans-serif;
    --font-hero-italic: 'VTF Redzone Classic-Oblique', sans-serif;
    --font-hero-regular: 'VTF Redzone Classic', sans-serif;
}

body {
    margin: 0;
    font-size: 100%;
    /*dont use pizel for text, is better to use relative sizing or em*/
    font-family: var(--font-text);
    /* font-size: 12px; */
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-serif);
}


a {
    color: inherit;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/*LAYOUT CLASSES*/

.container {
    /*for handleing large screen, to keep things center*/
    max-width: 1200px;
    /*you want it to be between 800 to 1200*/
    margin-right: auto;
    margin-left: auto;
}

.container-fluid {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
}

.display-flex {
    display: flex;
}

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

.display-box {
    display: flex;
}

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

.flex-stretch {
    flex: 1 1 auto;
    /*will grow and shrink together at the same rate but will start at the original size*/
}

.flex-none {
    flex: none;
}

.flex-align-center {
    align-items: center;
}

.flex-justify-center {
    justify-content: center;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}



/*Small Classes*/
.media-image {
    max-width: 100%;
    vertical-align: text-bottom;
}

.hidden {
    display: none;
}

/*COMPONENT CLASS*/
.nav ul {
    list-style-type: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

.nav a {
    display: block;
    padding: 0.2em 0.5em;
}

.nav a:hover {
    background-color: var(--color-main-medium);
    color: var(--color-white);
    text-decoration: none;
}

.nav .active a {
    background-color: var(--color-main-light);
    color: inherit;
}

.nav-material ul,
.nav-crumbs ul,
.nav-pills ul,
.nav-stretch ul,
.nav-flex ul {
    display: flex;
}

.nav-material li,
.nav-stretch li {
    flex: 1 1 auto;
    text-align: center;
}

.nav-pills a {
    border-radius: 2em;
    padding: 0.5em 1em;
}

.nav-crumbs a {
    display: inline-block;
}

.nav-crumbs .active a,
.nav-crumbs a:hover {
    background-color: transparent;
    color: inherit;
    text-decoration: underline;
}

.nav-crumbs li:not(:first-child)::before {
    content: '/';
}

.nav-material a {
    padding: 0.5em 1em;
    position: relative;
}

.nav-material .active a {
    background-color: transparent;
    color: inherit;
}

.nav-material a:hover {
    background-color: var(--color-neutral-light);
    color: inherit;
}

.nav-material a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: var(--color-main-medium);
    transition: all 0.3s;
}

.nav-material .active a::after {
    height: 4px;
}

/*NAVBAR*/



.navbar {
    background-color: var(--color-off-black);
    color: var(--color-white);
    line-height: 5rem;
    margin-bottom: 1em;
}

.navbar h1 {
    font-size: 1em;
    margin: 0;
    font-family: var(--font-sans);
}

.navbar a {
    padding: 0 0.5em;
}

.flush>.navbar {
    margin-bottom: 0;
}


/*CARD*/
.card {
    background-color: var(--color-white);
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;

    overflow: hidden;
    position: relative;
    /*this will make sure we can use our card as a position absolute parent in the future*/

}

.card.soft {
    border-radius: 0.5em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card.hard {
    border-radius: 0.2em;
    border: 2px solid var(--color-neutral-medium);
}

.card.dark {
    background-color: var(--color-neutral-dark);
    color: var(--color-neutral-light);
}

.card.medium {
    background-color: var(--color-neutral-medium);
}

.card.flat {
    padding: 0;
}

.card-section~.card-section {
    border-top: 1px solid var(--color-neutral-light);
}

.card-section {
    padding: 1em;
}

[class*='col-']>.card {
    height: 100%;
    margin: 0;
}


.view-window {
    height: 50vh;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /*background-attachment it does not work in mobile*/
}


/*FORMS*/
.form-control {
    margin: 1em 0;
}

.form-select>select,
.hotdog input,
.hotdog,
.form-button,
.form-input,
.form-item {
    display: inline-block;
    background-color: transparent;
    border-width: 0;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    color: inherit;
    width: 100%;
    outline: 0;
}

.form-input {
    border-bottom: 1px solid var(--color-neutral-light);
    padding: 0.5em 1em;
}

.form-input:focus {
    border-bottom-color: var(--color-main-light);
}

.form-label {
    font-size: 0.8em;
    color: var(--color-neutral-medium);
    display: block;
    width: 100%;
}

.form-button {
    background-color: var(--color-neutral-light);
    padding: 0.5em 1em;
    border-radius: 0.2em;
    cursor: pointer;
    text-align: center;
}

.form-button.inline {
    width: initial;
}

.form-button:hover {
    text-decoration: none;
    background-color: var(--color-main-medium);
    color: var(--color-neutral-light);
}

.form-button:active {
    background-color: var(--color-main-light);
}

.hotdog {
    background-color: var(--color-neutral-light);
    border-radius: 2em;
    padding: 0.5em 1.5em;
    display: flex;
}

.hotdog.dark {
    background-color: var(--color-neutral-dark);
    color: var(--color-neutral-light);
}

.hotdog.light {
    background-color: var(--color-white);
    color: var(--color-black);
}

.form-select>select {
    padding: 0.5em 1.3em;
    background-color: var(--color-neutral-light);
    border-radius: 0.3em;
    cursor: pointer;
}

.form-select {
    position: relative;
}

.form-select::after {
    content: '▾';
    font-family: arial, sans-serif;
    font-size: 1.2em;
    position: absolute;
    top: 50%;
    right: 0.2em;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-neutral-medium);
}


/*TOGGLE*/

.toggle label {
    font-size: 1.3em;
    display: inline-block;
    width: 2em;
    height: 1em;
    border: 0.1em solid var(--color-neutral-medium);
    background-color: var(--color-white);
    border-radius: 1em;
    position: relative;
}

.toggle label::after {
    /*everytime you want to design an after element you need to give it a content even if is empty*/
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    border-radius: 1em;
    position: absolute;
    background-color: var(--color-neutral-medium);
    transition: all 0.3s;
}

.toggle input:checked+label::after {
    transform: translateX(1em);
}






/*TABLE*/
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    text-align: left;
    padding: 0.2em 0.5em;
}

.table.striped tbody tr:nth-child(odd) {
    background-color: var(--color-main-light);
}


.table.lined.all th:not(:first-child),
.table.lined.all td:not(:first-child),
.table.lined.vertical th:not(:first-child),
.table.lined.vertical td:not(:first-child) {
    border-left: 1px solid var(--color-main-dark);
}

.table.lined.all tbody tr,
.table.lined.horizontal tbody tr {
    border-top: 1px solid var(--color-main-dark);
}

.table.lined.border,
.table.lined.all {
    border: 1px solid var(--color-main-dark);
}

/*FIGURE*/
.figure {
    margin: 0;
    background-color: var(--color-white);
}

.figure img {
    width: 100%;
    vertical-align: text-bottom;
}

.figure figcaption {
    padding: 1em;
}