html {
    height: 100%;
    background-color: #000000;
}
.htmlBg {
    background-color: #000000;
    background: url("../img/HBM0003.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body {
    background-color: transparent !important;
}

.jumbotron {
    background-color: rgba(255,255,255,0.9);
    /*margin-top: 76px !important;*/
    /*margin-bottom: 25px;*/
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.about-header {
    background-color: rgba(255,255,255,0.9);
    margin-top: 76px !important;
    margin-bottom: 25px;
    border-top-left-radius: 10px;
    /*border-top-right-radius: 10px;*/
}

nav {
    background-color: #000000;
}

.navbar {
    border-radius: 0px;
    border: 0px;
    border-bottom: 1px solid;
    position: fixed;
    width: 100%;

    z-index: 15;
}
.fixed-bottom {
    border: 0px;
    border-top: 1px solid;
    position: fixed;
}
.card {
    border: 0px;
}

.maintenance-message {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qs_main {
    color: #000000;
    margin-top: 61px;
    z-index: 10 !important;
}
.qs_content label {
    color: #000000 !important;
}
.qs_checkbox input {
    margin-top: 2px !important;
    left: 2px !important;
}

.experiments {
    padding-bottom: 75px;
}
/*label {*/
/*    color: #ffffff;*/
/*}*/
.home-page {
    padding: 0px;
    margin: 0px;
    /*margin-top: -20px;*/
}

/* = = = PROGRESS BAR = = = */
#pBarWrapper {
    width: 100%;
    height: 0px;
    background-color: #333;
    position: fixed;
    top: 53px;
    z-index: 100;
}
#pBar {
    height: 100%;
    background-color: #de466c;
    width: 0;
}
.disable-scroll {
    position: fixed;
    overflow-y: hidden;
}

/* = = = ABOUT PAGE = = = */

.about-page .jumbotron {
    margin-bottom: 0px;
}
.about-page [class*="col"]:first-of-type{
    padding-right: 0px;
}
.about-page [class*="col"]:last-of-type{
    padding-left: 0px;
    padding-bottom: 0px;
}
.about-page .about-page-text {
    background-color: rgba(255,255,255,0.9);
    width: 100%;
    height: 100%;
    display: block;
    padding: 2.5rem;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.about-photo {
    background-image: url("../img/me.jpg");
    background-position: right;
    background-size: cover;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    display: block;
    width: 100%;
    min-height: 550px;
    height: 100%;
    border-bottom-right-radius: 10px;
}

/* = = = PROJECT PAGE = = = // */

.inplay-link {
    width: 100%;
    min-height: 0vh;
    padding: 0;
    /*padding-top: 23.99%;*/
    display: block;
    background-color: black;
    margin-top: 0px;
    background-image: url("../img/inplay/IH-web-match-event.jpg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.inplay-link div {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 23.99%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    top: 0px;
    float: top;
}
.inplay-link .text {
    width: 100%;
    font-size: 66px;
    line-height: 80px;
    font-weight: 800;
    text-transform: uppercase;
    background: url(../img/inplay/IH-web-match-event.jpg) 0 0 / cover no-repeat;
    color: #de466c;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#projectRoot {
    margin-top: 69px;
}

.project-link .jumbotron {
    margin-bottom: 0px;
}
.project-link [class*="col"]:first-of-type{
    padding-right: 0px;
}
.project-link [class*="col"]:last-of-type{
    padding-left: 0px;
    padding-bottom: 0px;
}
.project-link .project-image {
    background-color: rgba(255,255,255,0.9);
}
.project-link .inplay-image {
    background-color: rgba(255,255,255,0.9);
    background-image: url("../img/inplay/inplay-link-image.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /*-webkit-transform: scaleX(-1);*/
    /*transform: scaleX(-1);*/
    display: block;
    width: 100%;
    /*min-height: 550px;*/
    height: 100%;
    /*border-bottom-right-radius: 10px;*/
}
.project-link .inplay-image:hover {
    cursor: pointer;
}
.project-link .ondemand-image {
    background-color: rgba(0,0,0,0.9);
    background-image: url("../img/ondemand/on-demand-link-image.jpg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /*-webkit-transform: scaleX(-1);*/
    /*transform: scaleX(-1);*/
    display: block;
    width: 100%;
    /*min-height: 550px;*/
    height: 100%;
    /*border-bottom-right-radius: 10px;*/
}
.project-link-text {
    background-color: rgba(255,255,255,0.9);
    width: 100%;
    height: 100%;
    display: block;
    padding: 1.9rem;
    /*border-top-right-radius: 10px;*/
    /*border-bottom-right-radius: 10px;*/
}
.project-link .sports-viewer-image {
    background-color: rgba(0,0,0,0.9);
    background-image: url("../img/sports-viewer/race-sports-viewer-pre.jpg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /*-webkit-transform: scaleX(-1);*/
    /*transform: scaleX(-1);*/
    display: block;
    width: 100%;
    /*min-height: 550px;*/
    height: 100%;
    /*border-bottom-right-radius: 10px;*/
}
.project-link .riads-image {
    background-color: rgba(0,0,0,0.9);
    background-image: url("../img/riads/riad-tzarra-home-page.jpg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /*-webkit-transform: scaleX(-1);*/
    /*transform: scaleX(-1);*/
    display: block;
    width: 100%;
    /*min-height: 550px;*/
    height: 100%;
    /*border-bottom-right-radius: 10px;*/
}
.project-link .league-image {
    background-color: rgba(0,0,0,0.9);
    background-image: url("../img/football-league/football_league_web_pre.jpg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /*-webkit-transform: scaleX(-1);*/
    /*transform: scaleX(-1);*/
    display: block;
    width: 100%;
    /*min-height: 550px;*/
    height: 100%;
    /*border-bottom-right-radius: 10px;*/
}
.project-link:nth-of-type(2) .project-link-text {
    border-top-right-radius: 10px;
}
.project-link:last-of-type .project-link-text {
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 10px;
}
.project-link:last-of-type {
    padding-bottom: 75px;
}

/* = = = CONTACT PAGE = = = */

.contact-page .jumbotron {
    margin-bottom: 0px;
}
.contact-page [class*="col"]:first-of-type{
    padding-right: 0px;
}
.contact-page [class*="col"]:last-of-type{
    padding-left: 0px;
    padding-bottom: 0px;
}
.contact-page .contact-page-text {
    background-color: rgba(255,255,255,0.9);
    width: 100%;
    height: 100%;
    display: block;
    padding: 2.5rem;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.contact-photo {
    background-image: url("../img/me.jpg");
    background-position: right;
    background-size: cover;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    display: block;
    width: 100%;
    height: 550px;
    border-bottom-right-radius: 10px;
}


.full-size {
    display: block;
    margin-top: 57px;
    position: absolute;
    width: 100%;
    height: calc(100% - 114px);
    background-color: black;
}


.breadcrumb {
    margin-bottom: 0;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.breadcrumb .breadcrumb-item {
    color: rgba(255,255,255,0.55);
}
.breadcrumb .breadcrumb-item:before {
    color: rgba(255,255,255,0.55);
}
.breadcrumb .breadcrumb-item .nav-link:hover {
    color: rgba(255,255,255,0.75);
}
#canvas {
    position: absolute;
    z-index: 5;
}

#target {
    position: absolute;
    z-index: 1;
}


/* = = = EXPERIMENTS = = = */

/*.tangentLineCircle {*/
/*    display: block;*/
/*    max-width: 100%;*/
/*    !*height: 400px;*!*/
/*    background-image: url("../img/thumbnails/tangentLineCircle_low.jpg");*/
/*    background-repeat: no-repeat;*/
/*    background-position: center top;*/
/*}*/
/*.tangentLineCircle.visible {*/
/*    background-image: url("../img/thumbnails/tangentLineCircle.jpg");*/
/*}*/

@media only screen and (max-width: 768px) {
    .about-page [class*="col"]:first-of-type{
        padding-right: 12px;
    }
    .about-page [class*="col"]:last-of-type{
        padding-left: 12px;
    }
    .about-page .about-page-text {
        border-top-right-radius: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding: 1rem;
        margin-bottom: 72px;
    }
    .about-page .about-photo {
        border-bottom-right-radius: 0px;
    }
    .project-link .jumbotron {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
    .project-link [class*="col"]:first-of-type{
        padding-right: 12px;
    }
    .project-link [class*="col"]:last-of-type{
        padding-left: 12px;
    }
    .project-link .project-link-text {
        border-top-right-radius: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding: 1rem;
        margin-bottom: 72px;
    }
    .project-link .inplay-image {
        border-bottom-right-radius: 0px;
    }

    .contact-page [class*="col"]:first-of-type{
        padding-right: 12px;
    }
    .contact-page [class*="col"]:last-of-type{
        padding-left: 12px;
    }
    .contact-page .contact-page-text {
        border-top-right-radius: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

        margin-bottom: 72px;
    }
    .contact-page .about-photo {
        border-bottom-right-radius: 0px;
    }
}