html {
  scroll-behavior: smooth;
}

/* Bootstrap 4 Official Workaround */
body {
    padding-top: 62.1px;
    background-color: #EEEEEE;
}

.marginAuto {
    margin: auto;
    vertical-align: middle;
}

.containerTop {
    padding: 4em 0 1em 0;
}

.containerMiddle {
    padding: 1em 0 1em 0;
}

.containerBottom {
    padding: 1em 0 5em 0;
}

.containerComics {
    padding: 4em .5em 5em .5em;
}

.containerPartA {
    background-color: #0092ca;
}

.jumbotron {
    margin-bottom: 0;
}

.jumbotronGrey {
    background-color: rgba(154, 182, 209, 0.3);
}

.imageProfile {
    border-radius: 50%;
    width: 300px;
    height: 300px;
    background-color: rgba(0, 146, 202, 0.3);
}

.dottedHorizontal {
    border: dotted rgba(0,146,202,0.5) 10px;
    border-bottom: none;
    width: 16%;
}

#backToTop {
    width: 48px;
    height: 48px;
    position: fixed;
    bottom: 1.5em;
    right: 1.5em;
    z-index: 10:
    border: none;
    outline: none;
    background-color: #006287;
    color: white;
    cursor: pointer;
    padding: 16px;
    border-radius: 10px;
}

#backToTop:hover {
    background-color: #004e6b;
}

/******************** HEADER PICTURES ********************/

.headerComms {
    height: 30vh;
    max-height: 500px;
    background-image: url('https://www.remaniac.net/img/header_commissions.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.headerTexts {
    color: #FFFFFF;
    font-family:'Nunito', sans-serif;
    font-weight: 900;
}


/******************** INDEX HERO PICTURES ********************/

#indexBG {
    background-image: url("../img/index/image1.jpg");
    float: left;
    width: 100%;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    box-shadow:inset 0 0 0 100vh rgba(152, 165, 185, 0.9);
}

.indexBGText {
    color: white;
    font-family: Nunito, sans-serif;
    text-transform: uppercase;
}

.indexBGCentered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
}

.indexBGCenteredBottom {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/******************** TEXT STYLING ********************/

.textLightBlue {
    color: #0092ca;
}

.textThick {
    font-weight: 900;
}

.textSlightThick {
    font-weight: 700;
}

.textCollapseTitle {
    color: #EEEEEE;
    font-weight: 700;
    font-size: 1.5em;
}

.textNunito {
    font-family:'Nunito', sans-serif;
}

.textSmall {
    font-size: 0.8em;
}

.textHTags {
    color: #0092ca;
    font-family:'Nunito', sans-serif;
    font-weight: 700;
}


/******************** BUTTONS ********************/

.btnDefault {
    background-color: #0092ca;
}

.btnDefault:hover {
    background-color: #007aa9;
}

.btnDefault a, a:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.faMiddle.fa {
    text-align: center;
    display: table-cell; 
    vertical-align: middle;
}


/******************** TABLE ********************/

.tableWidth, .rowWidth {
    margin: auto;
    width: 80%;
}

.columnLeft {
    padding-left: 0;
}

.columnMiddle {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

.columnRight {
    padding-right: 0;
}

.theadDefault {
    background-color: #0092ca;
    color: #FFFFFF;
}

.theadDefault th:first-child {
    border-top-left-radius: 10px;
}

.tbodyDefault {
    background-color: #FFFFFF;
}

/******************** CARDS ********************/

.cardWidth {
    margin: auto;
    width: 80%;
}

.cardBodyPadding {
    padding: 20px 2.5em 20px 2.5em;
}

.cardCenter {
    margin: auto;
    text-align: center;
}

/******************** DIRECTIONALS ********************/

.arrowDown {
    margin: 1em auto 1em auto;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #0092ca;
}



/******************** FONT AWESOME ********************/

.fa-inactive {
    color: rgba(238,238,238,0.75);
}

.fa-inactive:hover {
    color: rgba(238,238,238,1);
}


/******************** NAVBAR ********************/

.navbar {
    margin-bottom: 0;
}

.navbarName {
    text-decoration: none;
    font-family:'Nunito', sans-serif;
    color: #EEEEEE;
    font-weight: 700;
    font-size: 1.5em;
}

.navbar-brand a, .navbar-brand a:link, .navbar-brand a:active, .navbar-brand a:hover, .navbar-brand a:visited {
    color: #EEEEEE;
}

.navbarLinkFormat {
    color: #EEEEEE;
}

.navbarPadding {
    padding: 0 0 0 1em;
}

#navigationBar {
    background-color: #393e46;
    /*background-color: #222831;*/
    padding: .5em 3em;
    text-decoration: none;
    text-transform: uppercase;
}


/******************** ACCORDION STYLE ********************/

.collapsedCardOuter {
    border: rgba(0,146,202,1);
    background-color: rgba(0,146,202,1);
    background-image: linear-gradient(rgba(0,146,202,1), rgba(0,125,173,1));
}

.collapsedCardContent {
    border: dashed rgba(0,146,202,1) 3px;
    border: none;
    background-color: #FFFFFF;
}


/******************** SVG SHAPES ********************/

.doujinPlaceholder {
    width: 150px;
    height: 212px;
    fill: rgba(100,100,100,1);
}

.doujinType {
    width: 80px;
    height: 20px;
    float: left;
}

.doujinCover {
    width: 150px;
    height: 212px;
}

.doujinType-red {
    fill: #cc0000;
}

.doujinType-green {
    fill: #6aa84f;
}


/******************** COMICS PAGE ********************/

.containerComicsMain {
    margin: auto;
    width: 80%;
}

.containerParagraph {
    margin: auto;
    width: 70%;
}

.comicTextResponsive {
    text-align: left;
}

.comicDetails{
    border: none;
    width: 100%;
}

.comicDetailsTitles {
    width: 40%;
    font-weight: bold;
}

.comicDetailsParticulars {
    width: 60%;
}

.comicContainer {
    padding: 2em 0 2em 0;
}

.comicHorizontals {
    border: dashed rgba(0,146,202,0.5) 3px;
    border-bottom: none;
    width: 90%;
}

.comicPDFShop {
    padding-top: 1em;
}


/******************** FOOTER ********************/

.footerText {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    color: rgba(238,238,238,0.8);
}

.socmedContainer {
    text-align: right;
}

.socmedIcons {
    display: inline-block;
    padding-left: .5em;
}

#footerEx {
    position: absolute;
    width: 100%;
    background-color: #0092ca;
    padding: 2em 0;
}

#footerExHome {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #0092ca;
    padding: 2em 0;
}


/******************** @MEDIA ********************/
/******************** @MEDIA ********************/
/******************** @MEDIA ********************/

@media only screen and (max-width: 800px) {
    body {
        padding-top: 78px;
    }

    .imageProfile {
        width: 200px;
        height: 200px;
    }

    .navbarPadding {
        padding: .5em 0 .5em 0;
    }

    #navigationBar {
        padding: 1em 3em;
    }


    /******************** FOOTER ********************/

    .footerText {
        text-align: center;
        padding-bottom: .5em;
    }

    .socmedContainer {
        text-align: center;
    }


    /******************** CONTAINERS ********************/

    .containerTop {
        padding: 2em 3em 1em 3em;
    }

    .containerMiddle {
        padding: 1em 3em 1em 3em;
    }

    .containerComicsMain {
        width: 100%;
    }

    .containerBottom {
        padding: 1em 3em 2em 3em;
    }

    .containerParagraph {
        width: 80%;
    }

    .containerComics {
        padding: 4em 2.5em 5em 2.5em;
    }


    /******************** COMICS PAGE ********************/

    .comicCoverResponsive {
        padding-bottom: 1em;
    }

    .comicTextResponsive {
        text-align: center;
    }

    .comicDetailsTitles {
        width: 40%;
    }

    .comicDetailsParticulars {
        width: 60%;
    }

    .comicPDFShop {
        text-align: center;
    }


    /******************** TABLES ********************/
    
    .tableWidth, .rowWidth {
        width: 90%;
    }

    .columnLeft {
        padding-left: 15px;
        padding-bottom: 1em;
    }

    .columnMiddle {
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 1em;
    }

    .columnRight {
        padding-right: 15px;
    }

}

@media only screen and (max-width: 767px) {
    .navbarPadding {
        padding: .5em 0 .5em 2em;
    }
}