@font-face {
    font-family: 'Acre';
    src: url("../fonts/Acre-Medium.otf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'MesBd';
    src: url("../fonts/mesmerize-bd.ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'MesExBd';
    src: url("../fonts/mesmerize-eb.ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBMplexSansReg';
    src: url("../fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBMplexSansBold';
    src: url("../fonts/IBM_Plex_Sans/IBMPlexSans-Bold.ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

header {
    border-bottom: black thin solid;
    border-top: black 5px solid;
    /* top: 0; */
}

.homeLink {
    float: left;
    z-index: 2000;
}

a {
    color: rgb(138, 46, 46);
}

body {
    width: 90%;
    max-width: 700px;
    margin: auto;
    margin-top: 5%;
    /* margin-bottom: 5%; */
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    color: rgb(74, 68, 68);
    text-align: center;
    /* font-family: Georgia, serif; */
    font-family: IBMplexSansReg, 'helvetica neue', helvetica, arial, sans-serif;
    /* font-family: 'helvetica neue', helvetica, arial, sans-serif;
        text-decoration: none; */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.textColor {
    color: rgb(74, 68, 68);
}

.atticRed {
    color: rgb(184, 17, 17);
}

main {
    padding-bottom: 20px;
}

footer {
    /* background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
    width: 100%; */
    /* margin-top: auto;     */
    background-color: rgba(255, 255, 255, 0.565);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

body p {
    text-align: justify;
    text-indent: 20px;
    max-width: 600px;
    margin: auto;
}

footer p {
    text-align: center;
}

h1,
h2,
h3,
h4 {
    font-family: IBMplexSansBold, 'helvetica neue', helvetica, arial, sans-serif;
    color: #6911af;
    max-width: 600px;
    margin: auto;
}

.BBGpurple {
    color: #6911af;
}


/* .BI p,
h1,
h2,
h3 {
    color: rgb(46, 46, 130);
} */


/* THIS IS THE STUFF FOR THE POPOVER MENU below */

.wrapper {
    overflow: hidden;
}

.centered {
    text-align: center;
}


/* section {
        padding: 30px 30px 30px 80px;
        -moz-transition: all 200ms ease-in;
        -webkit-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
    } */

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    margin: 0 0 0 -250px;
    -moz-transition: all 200ms ease-in;
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}

nav ul {
    width: 250px;
    height: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    background: #222;
    overflow: hidden;
}

nav li {
    margin: 0;
}

nav a {
    color: #fff;
    font-size: 1em;
    font-family: 'helvetica neue', helvetica, arial, sans-serif;
    text-decoration: none;
    display: block;
    padding: 12px 15px;
    font-weight: 300;
    letter-spacing: 2px;
    border-bottom: 1px solid #333;
}

nav a:hover {
    background: #111;
}

.burgerDiv {
    width: 35px;
    height: 5px;
    /* background-color: rgb(255, 253, 253); */
    background-color: rgb(168 58 91);
    margin: 6px 0;
}

.spacer {
    clear: both;
    height: 60px;
}

.banner {
    width: 100%;
    max-width: 500px;
    height: auto;
}

.aticText {
    color: rgb(101, 91, 91);
}

.aticH2 {
    color: rgb(74, 68, 68);
    margin: auto;
    margin-top: 15px;
}

.aticH3 {
    color: rgb(74, 68, 68);
    font-size: 1em;
    text-align: left;
    margin: auto;
    margin-top: 10px;
}

label {
    display: block;
    font-family: 'helvetica neue', helvetica, arial, sans-serif;
    /* font-weight: 700; */
    /* background: #6811af88; */
    background: rgba(2, 2, 2, 0.389);
    /* width: 42px; */
    /* height: 42px; */
    line-height: 42px;
    color: #fff;
    text-align: center;
    /* font-size: 2em; */
    font-size: 12;
    line-height: 1.1em;
    position: fixed;
    top: 10px;
    left: 10px;
    -moz-transition: all 200ms ease-in;
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    z-index: 500;
    border-radius: 5px;
    padding: 5px;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]:checked~nav {
    margin: 0;
}

input[type="checkbox"]:checked~label {
    left: 260px;
}

input[type="checkbox"]:checked~section {
    -webkit-transform: translate3d(260px, 0, 0);
    -moz-transform: translate3d(260px, 0, 0);
    -o-transform: translate3d(260px, 0, 0);
    transform: translate3d(260px, 0, 0);
}

.videoPlayer {
    border-style: solid;
    border-width: 5px;
    border-color: rgb(190, 11, 11);
    /* border-color: black; */
}


/* THIS IS THE STUFF FOR THE POPOVER MENU above ˆˆˆ */