/* ======================================================================== */
/* GENERAL STYLES */
/* ======================================================================== */
body {
    margin: 0;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #504C4B;
    position: relative;
    font-size: 1.1vw;
}

body.modal-open .rightHamburger {
    display: none;
}

body.modal-open #rightTopMenu {
    right: 8vh;
}

* {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a:hover {
    text-decoration: none;
}

.semi-bold {
    font-weight: 600;
}

.hide {
    display: none;
}

.date:hover {
    text-decoration: underline;
}

.first_fold {
    position: relative;
    width: 100%;
    height: 100%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,e4e2e2+100 */
    background: rgb(255, 255, 255);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(228, 226, 226, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(228, 226, 226, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(228, 226, 226, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e4e2e2', GradientType=0);
    /* IE6-9 */
}

/* ======================================================================== */
/* USER INTERFACE */
/* ======================================================================== */
#floatingLogo img {
    position: fixed;
    top: 0;
    left: 6vw;
    height: 8vw;
    z-index: 1269;
}

.scrollDown {
    width: 100%;
    text-align: center;
}

.scrollDown img {
    position: absolute;
    margin: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    width: 6.5vw;
}

.floatingYear {
    position: absolute;
    font-weight: 600;
    z-index: 99;
    bottom: 0.4vw;
    right: 1vw;
    font-size: 2vw;
}

#rightTopMenu {
    position: fixed;
    top: 10px;
    right: 50px;
    /* High z index to show about the popup */
    z-index: 1060;
    /*z-index: 99;*/
    /*right: 90px;*/
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.row img {
    max-width: 100%;
}

.rightNextSummit {
    display: inline-block;
    text-align: right;
    vertical-align: top;
    font-weight: bold;
    color: black;
    line-height: 1.2;
    font-size: 0.7vw;
    width: 5vw;
    margin-left: 1vw;
    margin-right: 0.6vw;
}

/* HAMBURGER */
.rightHamburger {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    color: black;
    font-size: 1.6vw;
    width: 3vw;
    margin-left: 1vw;
}

.rightHamburger a {
    color: black;
    padding: 10px;
    cursor: pointer;
}

/* COUNTDOWN */
.ClassyCountdown-minutes {
    display: none !important;
}

.rightCountdown {
    display: inline-block;
}

.countdown-wrapper {
    display: inline-block;
    width: 8.5vw;
}

#countdown-timer {
    width: 15vw !important;
}

.ClassyCountdown-wrapper .ClassyCountdown-value {
    font-weight: bold !important;
    font-size: 0.8vw !important;
    line-height: 0.6vw !important;
}

/* ======================================================================== */
/* FRONT PAGE IMAGES STYLES */
/* ======================================================================== */
.fading-images {
    position: relative;
    display: flex;
    /* establish flex container */
    flex-direction: column;
    /* make main axis vertical */
    justify-content: center;
    /* center items vertically, in this case */
    height: 100vh;
}

.fading-images .slides {
    position: absolute;
    top: auto;
    left: 0;
}

.flex-container-images {
    display: flex;
    /* establish flex container */
    flex-direction: column;
    /* make main axis vertical */
    justify-content: center;
    /* center items vertically, in this case */
    height: 100vh;
}

.slides {
    width: 37vw;
    display: none;
}

.slide-1 {
    display: block;
}

.slides img {
    max-width: 100%;
}

.slide-image-name {
    position: absolute;
    right: 0.6vw;
    bottom: 5vw;
    font-size: 1vw;
}

/* ======================================================================== */
/* FRONT PAGE STYLES */
/* ======================================================================== */
.home-left {
    height: 100vh;
}

.flex-container {
    display: flex;
    /* establish flex container */
    flex-direction: column;
    /* make main axis vertical */
    justify-content: center;
    /* center items vertically, in this case */
    align-items: center;
    /* center items horizontally, in this case */
    height: 100vh;
}

.flex-container .inner {
    position: relative;
    height: 16vw;
    width: 37vw;
}

.flex-container .images-inner {
    position: relative;
    height: 350px;
    width: 100%;
}

.frontText {
    color: #504C4B;
    position: absolute;
    color: #504C4B;
    font-size: 1.4vw;
    line-height: 1.9vw;
}

.bold {
    font-weight: bold;
    line-height: 3vw;
}

.weight-normal {
    font-weight: normal;
}

.button-left {
    color: #504C4B;
    border: 1px solid #504C4B;
    border-right: none;
    border-radius: 10px 0 0 10px;
    padding: 0.6vw 2.3vw;
    font-size: 0.8vw;
}

.button-left:hover {
    color: #504C4B;
}

.button-right {
    border: 1px solid #504C4B;
    background: #504C4B;
    color: white;
    border-radius: 0 10px 10px 0;
    padding: 0.6vw 2.3vw;
    font-size: 0.8vw;
}

.button-right:hover {
    color: white;
}

.textBlur.out {
    -webkit-filter: blur(8px);
    /*-webkit-transform: scale(1.4, 1.4);*/
    opacity: 1;
    -webkit-transition: all 0.25s linear;
    transition: all 0.5s linear;
    visibility: hidden;
}

.textBlur.in {
    -webkit-filter: blur(0px);
    /*-webkit-transform: scale(1.4, 1.4);*/
    -webkit-transition: all 0.25s linear;
    transition: all 0.5s linear;
    visibility: visible;
}

/* ======================================================================== */
/* SLIDE TEXT STYLES */
/* ======================================================================== */
#slide1-1 {
    font-size: 2.1vw;
}

#slide1-2 {
    font-size: 2.1vw;
    top: 2.2vw;
}

#slide1-3 {
    top: 7vw;
}

#slide1-4 {
    top: 13.5vw;
}

#slide1-6,
#slide1-8,
#slide1-10 {
    font-size: 2.7vw;
    top: 5vw;
}

/* ======================================================================== */
/* SPEAKER OVERVIEW */
/* ======================================================================== */
.speaker-overview {
    height: 100vh;
    color: white;
}

.large {
    font-weight: bold;
    font-size: 4.5vw;
}

.speaker-list {
    text-align: left;
    font-weight: lighter;
    font-size: 1.3vw;
    line-height: 2.5vw;
}

.speaker-list.long-list {
    font-size: 1vw;
    line-height: 1.8vw;
}

.overview {
    height: 100vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;
    /* establish flex container */
    flex-direction: column;
    /* make main axis vertical */
    justify-content: center;
    /* center items vertically, in this case */
    align-items: center;
    /* center items horizontally, in this case */
}

.overview-2018 {
    background-image: url("assets/images/backgrounds/2018.png");
}

.overview-2016 {
    background-image: url("assets/images/backgrounds/2016.png");
}

.overview-2014 {
    background-image: url("assets/images/backgrounds/2014.png");
}

.overview .large {
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.overview-2018:hover .large {
    color: #3E69AC;
}

.overview-2016:hover .large {
    color: #4B9329;
}

.overview-2014:hover .large {
    color: #9A4833;
}

/* ======================================================================== */
/* Speaker overview by year */
/* ======================================================================== */
#speakerOverview {
    position: relative;
}

#speakerOverview a {
    color: white;
}

#speakerOverview2018 a:hover {
    color: #3E69AC;
}

#speakerOverview2016 a:hover {
    color: #4B9329;
}

#speakerOverview2014 a:hover {
    color: #9A4833;
}

/* ======================================================================== */
/* Speaker Years  */
/* ======================================================================== */
.speaker-overview-year {
    height: 100vh;
    padding-left: 17vh;
    position: relative;
    padding-right: 6%;
}

.speaker-overview-year .col {
    text-align: center;
    margin-bottom: 3%;
}

.speaker-overview-year .row img {
    max-width: 10vw;
}

#sectionYear2018,
#sectionYear2016,
#sectionYear2014 {
    position: relative;
}

#sectionYear2018 .speaker-name {
    color: #3E69AC;
}

#sectionYear2016 .speaker-name {
    color: #4B9329;
}

#sectionYear2014 .speaker-name {
    color: #9A4833;
}

.speaker-name {
    text-align: center;
    font-size: 1.2vw;
}

.description {
    text-align: center;
    font-size: 0.9vw;
}

/* ======================================================================== */
/* SCROLL SPY  */
/* ======================================================================== */
#myScrollspy {
    position: fixed;
    top: 42%;
    left: 0;
    padding-right: 0;
    padding-left: 0;
    z-index: 99;
    width: 7vw;
}

.scrollspy-area {
    position: relative;
}

#myScrollspy {
    display: none;
}

#myScrollspy a.nav-link {
    border-radius: 0px !important;
    text-align: right;
    border-bottom: 1px solid black;
    color: black;
    margin-right: 1.7vw;
    padding-right: 0;
    padding-bottom: 0vw;
    font-size: 1.1vw;
}

#myScrollspy .nav-link.active {
    background-color: transparent;
    left: 0;
    border-radius: 0;
    text-align: right;
    transition: all 0.8s linear;
    padding-bottom: 0px;
    font-size: 1.6vw;
    margin-right: 0px;
    font-weight: 600;
}

.nav-link.speakerOverview {
    display: none;
}

#myScrollspy .year-2020.nav-link {
    color: #bbb;
    border-bottom: 1px solid #bbb;
}

#myScrollspy .year-2018.nav-link.active {
    color: #3E69AC;
    border-bottom: 1px solid #3E69AC;
}

#myScrollspy .year-2016.nav-link.active {
    color: #4B9329;
    border-bottom: 1px solid #4B9329;
}

#myScrollspy .year-2014.nav-link.active {
    color: #9A4833;
    border-bottom: 1px solid #9A4833;
}

/* ======================================================================== */
/* Speaker Year Pages */
/* ======================================================================== */
.floating-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    overflow: hidden;
}

#sectionYear2014,
#sectionYear2016,
#sectionYear2018 {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#sectionYear2018 {
    background-image: url("assets/images/backgrounds/lines.png");
}

#sectionYear2016 {
    background-image: url("assets/images/backgrounds/lines.png");
}

#sectionYear2014 {
    background-image: url("assets/images/backgrounds/lines.png");
}

#sectionYear2018 .colour,
.year-2018 .colour {
    color: #3E69AC !important;
}

#sectionYear2016 .colour,
.year-2016 .colour {
    color: #4B9329 !important;
}

#sectionYear2014 .colour,
.year-2014 .colour {
    color: #9A4833 !important;
}

.rightNextSummit {
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

body.dark .rightNextSummit {
    color: white;
}

body.dark .countdown-wrapper {
    /*display: none;*/
}

.countdown-wrapper {
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

body.modal-open .rightNextSummit {
    color: white;
}

body.modal-open .countdown-wrapper {
    filter: invert(1);
}

body.dark .countdown-wrapper {
    color: #fff;
    -webkit-filter: invert(1);
    filter: invert(1);
    overflow: hidden;
}

body.dark .countdown-wrapper.dark {
    /*display: inline-block;*/
}

.rightHamburger a {
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

body.dark .rightHamburger a {
    color: white;
}

.modal-backdrop {
    /*opacity: 0.3;*/
    opacity: 0 !important;
    /*background-color: white;*/
}

#modalHamburgerMenu .modal-content {
    height: auto;
    min-height: 100%;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0.85);
    width: 23%;
    right: 0;
    /* margin-right: auto; */
    position: absolute;
}

#modalHamburgerMenu .modal-content .container-fluid {
    height: 100vh;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    /*justify-content: center; */
    flex-direction: column;
    margin-top: 170px;
}

#modalHamburgerMenu button {
    color: white;
}

.flex-menu-item {
    font-size: 20px;
    text-align: left;
    width: 60%;
    line-height: 2;
}

.flex-menu-item a {
    color: white;
}

.flex-menu-item.bold a {
    font-weight: bold;
}

/* ======================================================================== */
/* MODALS */
/* ======================================================================== */
.modal .fas {
    font-size: 2vw;
    vertical-align: bottom;
    margin-top: 0px;
    margin-right: 8px;
}

.modal .flex-container .inner {
    height: auto;
}

.speaker-header {
    font-size: 3vw;
    margin-bottom: 1vw;
    line-height: 3.2vw;
    font-weight: 600;
}

.speaker-body {
    margin-bottom: 50px;
    font-size: 1vw;
}

.speaker-link {
    font-weight: bold;
    font-size: 1.2vw;
}

.modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.modal-content {
    height: auto;
    min-height: 100%;
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.9);
}

.modal-content .flex-container .speaker-name {
    font-weight: bold;
}

.modal-content .flex-container .description {
    font-weight: 600;
}

.ClassyCountdown-wrapper>div {
    margin: 10px 4px;
}

button.close {
    font-size: 60px;
    font-weight: 200;
    position: absolute;
    z-index: 10;
    opacity: 1;
    right: 1.3vw;
    top: 0.2vw;
}

.face-block:hover .speaker-name {
    text-decoration: underline;
}

.face-block {
    cursor: pointer;
}

/* ======================================================================== */
/* LARGER SCREENS
/* ======================================================================== */
@media (min-width: 767px) and (orientation: landscape) {
    .overlay {
        background: black;
        position: absolute;
        width: 100%;
        height: 100vh;
        opacity: 0.5;
        z-index: 1;
        -webkit-transition: all 0.5s linear;
        transition: all 0.5s linear;
    }

    .overview:hover .overlay {
        opacity: 0;
    }

    .infront {
        position: absolute;
        width: 100%;
        height: 100vh;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0.5;
        -webkit-transition: all 0.5s linear;
        transition: all 0.5s linear;
    }

    .overview:hover .infront {
        opacity: 1;
    }

    .speaker-overview-year {
        padding-left: 17vh;
    }

    .rows-3.speaker-overview-year .row img {
        max-width: 9vw;
    }

    .rows-3.speaker-overview-year .col {
        margin-bottom: 0.5%;
    }
}

.modal {
    overflow: hidden !important;
}

@media (min-width: 1920px) {
    #rightTopMenu {
        width: 20vw;
    }

    .countdown-wrapper {
        display: inline-block;
        width: 10.5vw;
    }

    .speaker-overview-year {
        padding-left: 27vh;
    }
}

/* ======================================================================== */
/* THIS IS THE RESOLUTION WHERE THE MOBILE STYLE COMES IN */
/* ======================================================================== */
@media (max-width: 767px),
(max-width: 1024px) and (orientation: portrait) {
    #floatingLogo img {
        left: 6vw;
        height: 22vw;
    }

    .overview {
        height: auto;
        padding: 50px 0px;
    }

    #rightTopMenu {
        right: 15px;
        position: absolute;
    }

    .home-left {
        height: 50vh;
    }

    /* HAMBURGER */
    .rightHamburger {
        font-size: 5vw;
        width: 7vw;
        margin-left: 1vw;
    }

    .rightHamburger a {
        padding: 0px;
    }

    #modalHamburgerMenu .modal-content {
        width: 100%;
    }

    .slide-image-name,
    .scrollDown,
    .floatingYear {
        display: none;
    }

    /*.flex-container,*/
    .floating-background,
    .speaker-overview-year,
    .flex-container-images {
        height: auto;
    }

    #speakerOverview {
        height: inherit;
    }

    .flex-container,
    .fading-images {
        height: 50vh;
    }

    .fading-images {
        justify-content: flex-end;
    }

    .fading-images .slides {
        left: 0;
        right: 0;
        margin: 0px auto;
    }

    /* Left Text Slides */
    .flex-container .inner {
        width: 70vw;
        height: 25vh;
    }

    .bold {
        line-height: 7vw;
    }

    .frontText {
        font-size: 4vw;
        line-height: 5.2vw;
    }

    .button-left,
    .button-right {
        padding: 2vw 2.3vw;
        font-size: 3vw;
    }

    /* .slide-image-name {
        font-size: 1.5vw;
    } */
    #slide1-1 {
        font-size: 6vw;
    }

    #slide1-2 {
        font-size: 6vw;
        top: 7vw;
    }

    #slide1-3 {
        top: 17vw;
    }

    #slide1-4 {
        top: 35vw;
    }

    #slide1-6, #slide1-8, #slide1-10 {
        font-size: 5.5vw;
        top: 15vw;
    }

    #sectionYear2018,
    #sectionYear2016,
    #sectionYear2014 {
        background-size: 1150px;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .large {
        font-size: 12vw;
    }

    .speaker-name {
        font-size: 5.2vw;
    }

    .description {
        font-size: 3vw;
    }

    #myScrollspy {
        width: 18vw;
    }

    #myScrollspy a.nav-link {
        font-size: 3vw;
    }

    #myScrollspy a.nav-link.active {
        font-size: 5vw;
    }

    .speaker-body {
        margin-bottom: 6.5vw;
        font-size: 2.5vw;
    }

    .speaker-link {
        font-size: 3vw;
    }

    .modal .fas {
        font-size: 5vw;
    }

    .speaker-overview-year .col {
        margin-bottom: 6vw;
    }

    .speaker-overview-year .row img {
        max-width: 30vw;
    }

    button.close {
        right: 2.4vw;
        top: 1vw;
    }

    .speaker-overview-year {
        padding-left: 17vh;
    }

    .infront {
        margin-left: 17vw;
    }

    /* Style overrides for portrait tablets */
    .speaker-list {
        font-size: 3.6vw;
        line-height: 9.3vw;
    }

    .speaker-list.long-list {
        font-size: 3.6vw;
        line-height: 9.3vw;
    }

    .rightNextSummit {
        font-size: 1.7vw;
        width: 18vw;
        margin-left: 1vw;
        margin-right: 0.6vw;
    }

    .rightCountdown {
        display: inline-block;
    }

    .countdown-wrapper {
        width: 25vw;
    }

    #countdown-timer {
        width: 40vw !important;
    }

    .ClassyCountdown-wrapper .ClassyCountdown-value {
        font-size: 2.3vw !important;
        line-height: 1.8vw !important;
    }

    .slides img {
        margin-bottom: -8vw;
    }

    .slides {
        width: 53vw;
    }

    .modal .first-link {
        margin-bottom: 10px;
    }
}

@media (max-width: 1280px) {}

@media (max-width: 840px) {}

@media (max-width: 600px) {}

@media (max-width: 500px) {}

@media (max-width: 420px) {
    .speaker-overview-year {
        padding-left: 8vh;
    }

    .speaker-list {
        font-size: 5vw;
        line-height: 11vw;
    }
    .speaker-list.long-list {
    font-size: 5vw;
    line-height: 11vw;
}

    .rightNextSummit {
        font-size: 3vw;
        width: 18vw;
        margin-left: 1vw;
        margin-right: 0.6vw;
    }

    .slides {
        width: 65vw;
    }

    .rightCountdown {
        display: inline-block;
    }

    .countdown-wrapper {
        width: 35vw;
    }

    #countdown-timer {
        width: 60vw !important;
    }

    .ClassyCountdown-wrapper .ClassyCountdown-value {
        font-weight: bold !important;
        font-size: 2.8vw !important;
        line-height: 2.4vw !important;
    }
}

/* ======================================================================== */
/* OVERRIDES FOR CELL PHONE HOTIZONTALLY */
/* ======================================================================== */
@media (max-width: 992px) and (orientation: landscape) {
    #floatingLogo img {
        height: 14vw;
    }

    .container-fluid {
        /*height: 100vh;*/
    }

    .modal .col-md-6,
    .home-right,
    .home-left {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .home-right {
        /*order: 1;*/
    }

    .flex-container {
        height: 100vh;
    }

    .fading-images {
        justify-content: center;
        height: 100vh;
    }

    .frontText {
        font-size: 2vw;
        line-height: 2.6vw;
    }

    .button-left,
    .button-right {
        padding: 1vw 1.2vw;
        font-size: 1.5vw;
    }

    #slide1-1 {
        font-size: 3vw;
    }

    #slide1-2 {
        font-size: 3vw;
        top: 3.5vw;
    }

    #slide1-3 {
        top: 8.5vw;
    }

    #slide1-4 {
        top: 17.5vw;
    }

    #slide1-6, #slide1-8, #slide1-10 {
        font-size: 2.7vw;
        top: 7.5vw;
    }

    .flex-container .inner {
        height: 39vh;
        width: 37vw;
    }

    .slides {
        width: 40vw;
    }

    .slides img {
        margin-bottom: 0;
    }

    .large {
        font-size: 8vw;
    }

    .speaker-list {
        font-size: 2.4vw;
        line-height: 5.8vw;
    }

    #myScrollspy a.nav-link {
        font-size: 2vw;
    }

    #myScrollspy a.nav-link.active {
        font-size: 4vw;
    }

    /* Modal */
    .speaker-name {
        font-size: 2vw;
    }

    .description {
        font-size: 1.7vw;
    }

    .speaker-body {
        margin-bottom: 2vw;
        font-size: 1.4vw;
    }

    .speaker-link {
        font-size: 1.5vw;
    }

    .modal .fas {
        font-size: 2.5vw;
    }

    body.modal-open #rightTopMenu {
        right: 19vh;
    }

    /*div[class^='col-xs'], div[class*='col-xs']{
        width: 100%;
    }*/
    #modalHamburgerMenu .modal-content .container-fluid {
        justify-content: center;
        margin-top: 0;
    }
}

/* ======================================================================== */
/* OVERRIDES FOR IPAD PORTRAIT*/
/* ======================================================================== */
@media (min-width: 767px) and (max-width: 1024px) and (orientation: portrait) {

    .col-md-6,
    .col-md-4,
    .col-md-3 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .modal .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .modal .flex-container {
        height: 100vh;
    }

    .modal .flex-container .inner {
        width: 45vw;
    }

    .modal .speaker-body {
        margin-bottom: 6.5vw;
        font-size: 1.8vw;
    }

    .modal .speaker-link {
        font-size: 2vw;
    }

    .modal .fas {
        font-size: 3vw;
    }

    home-right,
    .home-left {
        height: 50vh;
    }

    .slides img {
        margin-bottom: 0;
    }

    .home-right {
        order: 1;
    }

    .fading-images {
        justify-content: flex-end;
    }

    .home-left {
        height: 50vh;
        margin-top: 50vh;
    }

    .home-right {
        /* order: 1; */
        position: absolute;
        top: 0;
        z-index: 9999;
        height: 50vh;
    }
}