/* ==========================================================================
CUSTOM CSS
========================================================================== */

#pre-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
}

#status {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

body {
    padding-top: 0px;
    font-family: "Avenir Next W01 Regular", 'Nunito Sans', sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
}

.doc-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

h1 {font-family: "Avenir Next W01 Regular", 'Nunito Sans', sans-serif; font-size: 3.5rem; font-weight: 300;}

h2 {font-family: "Avenir Next W01 Regular", 'Nunito Sans', sans-serif; font-size: 3rem; font-weight: 300; margin-top: 10px;}

h3 {font-family: "Avenir Next W01 Regular", 'Nunito Sans', sans-serif; font-size: 2.5rem; font-weight: 300; margin-top: 0px; margin-bottom: 40px;}

h4 {font-family: "Avenir Next W01 Regular", 'Nunito Sans', sans-serif; font-size: 2rem; font-weight: 300;}

h5 {font-family: "Avenir Next W01 Regular", 'Nunito Sans', sans-serif; font-size: 1.6rem; font-weight: 300;}

b {
    font-family: "Avenir Next W01 Bold", 'Nunito Sans', sans-serif; font-weight: 600;
}

header, section {
    padding-top: 60px;
    padding-bottom: 60px;
}

header.full-height-section, section.full-height-section {
    min-height: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

header.timeline-full-height-section, section.timeline-full-height-section {
    padding: 0px;
    min-height: 100%;
    height: 100%;
    min-height: 100vh;
    width: 100%;
}

a {
    color: #3B90B3;
}

.display-5 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.2;
}

.w-max-100 {
    max-width: 100%!important;
}

.alert#cookie-consent {margin-bottom: 0px;}

.full-size-background {
    background: url(../img/default-hero-image.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/default-hero-image.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/default-hero-image.jpg', sizingMethod='scale')";
}

.header-background {
    background: url('../img/header-background.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/header-background.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/header-background.jpg', sizingMethod='scale')";
}

.background-content-01 {
    background: url(../img/content-backgrounds/background-content-01.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-01.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-01.jpg', sizingMethod='scale')";
}

.background-content-02 {
    background: url(../img/content-backgrounds/background-content-02.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-02.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-02.jpg', sizingMethod='scale')";
}

.background-content-03 {
    background-color: #ffffff;
    background: url(../img/content-backgrounds/background-content-03.png) no-repeat bottom center;
    background-size: 100% auto;
}

.background-content-04 {
    background: url(../img/content-backgrounds/background-content-04.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-04.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-04.jpg', sizingMethod='scale')";
    border-left: 3px solid #005F9E;
}

.background-content-05 {
    background: url(../img/content-backgrounds/background-content-05.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-05.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-05.jpg', sizingMethod='scale')";
    border-right: 3px solid #005F9E;
}

.background-content-06 {
    background: url(../img/content-backgrounds/background-content-06.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-06.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-06.png', sizingMethod='scale')";
    border-right: 3px solid #005F9E;
}

.background-content-07 {
    background: url(../img/content-backgrounds/background-content-07.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-07.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-07.jpg', sizingMethod='scale')";
    border-left: 3px solid #005F9E;
}

.background-content-08 {
    background: url(../img/content-backgrounds/background-content-08.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-08.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-08.jpg', sizingMethod='scale')";
    border-left: 3px solid #005F9E;
}

.background-content-09 {
    background: url(../img/content-backgrounds/background-content-09.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-09.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-backgrounds/background-content-09.jpg', sizingMethod='scale')";
    border-right: 3px solid #005F9E;
}

.modal-background-01 {
    background: url(../img/modal-content/new-perspective-cover.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/modal-content/new-perspective-cover.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/modal-content/new-perspective-cover.jpg', sizingMethod='scale')";
}

.modal-background-02 {
    background: url(../img/info-graphics/1997-CG_50_Infographic-02.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/info-graphics/1997-CG_50_Infographic-02.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/info-graphics/1997-CG_50_Infographic-02.jpg', sizingMethod='scale')";
}




.our-views-header-01 {
    background: url(../img/our-views/our-views-01.jpg?version=2.1) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/our-views/our-views-01.jpg?version=2.1', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/our-views/our-views-01.jpg?version=2.1', sizingMethod='scale')";
}

.our-views-header-02 {
    background: url(../img/our-views/our-views-02.jpg?version=2.1) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/our-views/our-views-02.jpg?version=2.1', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/our-views/our-views-02.jpg?version=2.1', sizingMethod='scale')";
}

.timeline-gradient {
    /*display: flex;
    flex-wrap: nowrap;
    width: 100%;
    flex-shrink: 0;*/
    background: rgb(0,95,158);
    background: linear-gradient(180deg, rgba(0,95,158,1) 0%, rgba(46,136,228,1) 100%);
}

.background-chart {
    background: url('../img/line-chart-7.svg') no-repeat 0 0 transparent;
    background-size: 4000px 100%;
    background-position: 600px center;
}


/* ==========================================================================
GENERAL STYLES
========================================================================== */

.content-separator-left {
    border: 3px solid #021522;
    width: 50px;
    margin-left: 0px;
}

.block-description {
    position: relative;
}

.block-page-link, .block-page-link:hover {
    text-decoration: none;
    color: initial;
}

.block-page-link:hover img {
    opacity: 0.8;
}

.block-description span {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 0.8rem;
    padding: 10px 25px;
}

.btn-style {
    padding: 0.8rem 2rem;
    border-radius: 3.4rem;
    text-transform: uppercase;
    font-family:"Avenir Next W01 Demi", 'Nunito Sans', sans-serif;
    font-weight: 600;
}

.btn-style-square {
    padding: 0.5rem 2rem 0.6rem 2rem;
    border-radius: 0;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-family: "Avenir Next W01 Regular", 'Nunito Sans', sans-serif; font-weight: 300;
}

.btn-timeline-style {
    padding: 0.6rem 1rem;
    border-radius: 0rem;
    text-transform: uppercase;
    font-family:"Avenir Next W01 Regular", 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.06rem;
    line-height: 0.7rem;
}

hr.content-separator {
    width: 80px;
    border-top: 3px solid #009CDC;
    margin-bottom: 2rem;
}

.panel .h-20 {
    height: 20%;
}

.panel .h-30 {
    height: 30%;
}

.panel .h-40 {
    height: 40%;
}

.panel .h-50 {
    height: 50%;
}



.img-fluid-100 {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.play-icon-link img {
    opacity: 0.8;
}

.play-icon-link:hover img {
    opacity: 1;
}

.play-icon-link-dark-blue {

}

.border-top-dark-blue {
    border-top: 2px solid #005F9E;
}

/* ==========================================================================
COLOURS
========================================================================== */

.bg-dark-blue {
    background-color: #005F9E;
}

.bg-darker-blue {
    background-color: #002e52;
}

.bg-light-blue {
    background-color: #009CDC;
}

.bg-light-grey {
    background-color: #eeeeee;
}

.bg-rich-black {
    background-color: #021522;
}

.bg-blue-green {
    background-color: #3B90B3;
}

.bg-brink-pink {
    background-color: #F9627D;
}

.bg-pink {
    background-color: #B21E6A;
}

.border-pink {
    border-color: #B21E6A!important;
}

.text-dark-blue {
    color: #005F9E;
}

.text-light-blue {
    color: #009CDC;
}

.text-light-grey {
    color: #eeeeee;
}

.text-regular-grey {
    color: #cccccc;
}

.text-blue-green {
    color: #3B90B3;
}

.text-brink-pink {
    color: #F9627D;
}

.text-pink {
    color: #B21E6A;
}

.btn-light-blue {
    background-color: #009CDC;
    color: #ffffff;
}

.btn-light-blue:hover {
    background-color: #008dc6;
    color: #ffffff;
}

.btn-dark-blue {
    background-color: #005F9E;
    color: #ffffff;
}

.btn-dark-blue:hover {
    background-color: #004b7c;
    color: #ffffff;
}

.btn-ocean-blue {
    background-color: #2E88E4;
    color: #ffffff;
}

.btn-ocean-blue:hover {
    background-color: #005F9E;
    color: #ffffff;
}

.btn-rich-black {
    background-color: #021522;
    color: #ffffff;
}

.btn-rich-black:hover {
    background-color: #052236;
    color: #ffffff;
}

.btn-brink-pink {
    background-color: #F9627D;
    color: #ffffff;
}

.btn-brink-pink:hover {
    background-color: #db4560;
    color: #ffffff;
}

.btn-white {
    background-color: #ffffff;
    color: #021522;
}

.btn-white:hover {
    background-color: #f9f9f9;
    color: #021522;
}

.btn-pink {
    background-color: #B21E6A;
    color: #ffffff;
}

.btn-pink:hover {
    background-color: #981458;
    color: #ffffff;
}

.btn-outline-black {
    border: 2px solid #000000;
    color: #000000;
    background-color: #ffffff;
}

.btn-outline-black:hover {
    border: 2px solid #009CDC;
    color: #ffffff;
    background-color: #009CDC;
}

#uuid-9129bc35-0072-44a8-96a5-074e613564d1:hover {
    fill: #981458!important;
}

.border-rich-black {
    border-color: #021522;
}

.border-blue-green {
    border-color: #3B90B3;
}

.border-brink-pink {
    border-color: #db4560;
}

.bg-gradient {
    background: linear-gradient(45deg, #021522, #3b90b3);
    background-size: 400% 400%;
    background-position: 0% 100%;
    -webkit-animation: gradient-animation 5s ease;
    -moz-animation: gradient-animation 5s ease;
    animation: gradient-animation 5s ease;
}
@-webkit-keyframes gradient-animation {
    0% {background-position: 100% 0%}
    100% {background-position: 0% 100%}
}
@-moz-keyframes gradient-animation {
    0% {background-position: 100% 0%}
    100% {background-position: 0% 100%}
}
@keyframes gradient-animation {
    0% {background-position: 100% 0%}
    100% {background-position: 0% 100%}
}

/* ==========================================================================
NAVIGATION
========================================================================== */

.navbar {
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.50);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.50);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.50);
}

.navbar .navbar-nav .nav-link {
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-family:"Avenir Next W01 Demi", 'Nunito Sans', sans-serif;
    font-weight: 600;
    color: #000000;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #3B90B3;
}

.secondary-nav .nav-link {
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-family: "Avenir Next W01 Regular", 'Nunito Sans', sans-serif;
    font-weight: 300;
    padding: 2rem 2rem;
}

.bg-light-blue .secondary-nav .nav-link {
    color: #ffffff;
}

.secondary-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
HEADER
========================================================================== */

.header-content-inner {
    padding: 2rem 2rem;
}

.header-video-container {
    padding: 4rem;
    text-shadow: 2px 2px 4px #000000;
}

.header-50-years-logo-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0px auto;
}

/* ==========================================================================
CAROUSEL
========================================================================== */

.carousel-inner {
    padding-bottom: 3rem;
/*    min-height: 300px;*/
}

.carousel-control-next, .carousel-control-prev {
    align-items: flex-end;
    width: auto;
}

.carousel-control-prev {
    left: 46%;
}

.carousel-control-next {
    right: 46%;
}

.carousel-indicators {
    display: none;
}

/* ==========================================================================
CARDS
========================================================================== */

.card-columns .card {
    border-radius: 0px;
    border: 0px;
}

/* ==========================================================================
GRID SLIDER
========================================================================== */

.grid-slider-container {
    position: relative;
    /*display: flex;
    min-height: 100%;
    height: 100%;
    min-height: 100vh;*/
    height: 400px;
    width: 100%;
    max-width: 100%;
    background-color: #eeeeee;
    border: 1px solid red;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

/*.grid-slider-stage {
    display: flex;
    width: 100%;
    height: 100%;
    max-height: 100%;
    background-color: #cccccc;
}*/

.grid-slider-panel {
/*    display: flex;*/
    float: left;
    width: 100%;
    margin-right: -100%;
    width: 100%;
    height: 100%;
}

.grid-slider-box {
/*    display: flex;*/
    float: none;
    display: inline-block;
    width: 25%;
    height: 50%;
    background-color: #2b2b2b;
    margin-right: 15px;
    margin-bottom: 15px;
}




.grid-slider-container-flex {
    display: flex;
    height: 400px;
    width: 100%;
    max-width: 100%;
    background-color: #eeeeee;
    border: 1px solid red;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.grid-slider-panel-flex {
    display: flex;
    background-color: #2b2b2b;
    width: 800px;
    min-width: 800px;
    align-content: flex-start;
    flex-wrap: wrap;
}

.grid-slider-box-flex {
    display: flex;
    background-color: #1b1b1b;
/*    margin-right: 2%;
    margin-bottom: 2%;*/
    align-content: flex-start;
    flex-wrap: wrap;
}

.grid-slider-content {
    width: 100%;
    height: 100%;
    margin-right: 15px;
    margin-bottom: 15px;
    background-color: #cccccc;
}

.grid-slider-box-flex > .grid-slider-box-flex {
    /*margin-right: 4%;
    margin-bottom: 4%;*/
}

.grid-slider-box-flex.gw-25 {
    width: 25%;
}

.grid-slider-box-flex.gw-50 {
    width: 50%;
}

.grid-slider-box-flex.gw-75 {
    width: 75%;
}

.grid-slider-box-flex.gw-100 {
    width: 100%;
}

.grid-slider-box-flex.gh-25 {
    height: 25%;
}

.grid-slider-box-flex.gh-50 {
    height: 50%;
}

.grid-slider-box-flex.gh-75 {
    height: 75%;
}

.grid-slider-box-flex.gh-100 {
    height: 100%;
}

/* ==========================================================================
AGENDA
========================================================================== */

.table tbody tr td:nth-child(4) {
    text-align: center;
}

.table .thead-dark th {
    background-color: #021522;
}

.vertical-agenda-status-overlay {
    display: none;
}

.vertical-agenda-item {
    margin-left: 40px;
    margin-right: 40px;
}

.vertical-agenda-item .card-body {
    position: relative;
}

.line-segment {
    position: absolute; height: 100%; border: 4px solid #cccccc; top: 0%;
}

.line-segment.line-segment-left {
    left: 20px;
}

.line-segment.line-segment-right {
    left: 20px;
}

.line-segment:after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    background-color: #f9f9f9;
    border: 4px solid #3B90B3;
    top: 20px;
    border-radius: 50%;
    z-index: 1;
}

.line-segment.line-segment-left:after {
    right: -13px;
}

.line-segment.line-segment-right:after {
    left: -13px;
}

/* ==========================================================================
SPEAKERS
========================================================================== */

.image-container {
    position: relative;
    overflow: hidden;
}

.image-container:hover .image-overlay {
    opacity: 1;
}

.image-overlay {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 21, 34, 0.9);
    opacity: 0;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

/* ==========================================================================
BOARDROOMS
========================================================================== */

.boardroom-synopsis {
    margin-top: 20px;
}

.boardroom-synopsis p {
    margin-bottom: 0px;
}

.boardroom-synopsis.collapse:not(.show) {
    height: 60px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}

.boardroom-synopsis.collapsing {
    min-height: 60px !important;
}

.btn-read-more {
    margin-top: 20px;
}

/* ==========================================================================
MAP
========================================================================== */

.map-container {
    position: relative;
    color: #222;
    background-attachment: scroll;
    background-image: url(../img/map-image.jpg);
    background-position: center center;
    background-repeat: none;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    min-height: 500px;
}

#map {
    position:absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */
}

/* ==========================================================================
OUR VIEWS
========================================================================== */

.over-views-box-container {
    position: relative;
    background-color: #ffffff;
    margin: 0 2rem;
    border: 1px solid #707070;
}

.over-views-box-header {
    min-height: 120px;
}

.over-views-box-content {
    padding: 2rem;
    /*border-left: 1px solid #707070;
    border-bottom: 1px solid #707070;
    border-right: 1px solid #707070;*/
}

.over-views-box-container .background-box {
    left: 20px;
    top: 20px;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
TIMELINE
========================================================================== */

.bookmark {
/*    opacity: 0;*/
/*    margin-top: -2rem;*/
/*    position: absolute;
    left: 50px;*/
}

.timeline-container {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;

/*    align-items: flex-start;*/
}

.timeline-container .panel {
    width: 100%;
    min-width: 1600px;
    max-width: 1600px;
    /*min-width: 100%;
    max-width: 100%;*/
    height: 80%;
/*    height: 100%;*/
/*    display: flex;*/
    /*justify-content: center;
    align-items: center;*/
    justify-content: center;
    align-items: center;
/*    margin-top: 40px;*/
    /*scale: 0.7;
    margin-top: -5%;*/
    margin-top: 40px;
}

.timeline-container .panel:last-child {
    /*min-width: 80%;
    width: 80%;*/
}

.timeline-container .panel-1{
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.timeline-content-box-container {
    height: 100%;
    margin-bottom: 2rem;
/*    border: 3px solid #009CDC;*/
    max-width: 300px;
}

.timeline-content-box p {
    line-height: 1.2rem;
}

.content-box {
    position: absolute;
    left: 0px;
    top: 0px;
}

.box-1 {
    width: 25%;
}

.box-2 {
    width: 50%;
}

.ball {
    position: absolute;
    top: 10%;
    left: 10%;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: red;
}

.timeline-logo {
    max-width: 300px;
}

/* ==========================================================================
CONTENT BOX STYLE 4
========================================================================== */

.content-box-style-04 {
    position: relative;
}

.content-box-style-04 .content-box-header {
    padding: 2rem 1rem;
}

.content-box-style-04 h4.title, .content-box-style-06 h4.title {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
}

/* ==========================================================================
CONTENT BOX STYLE 6
========================================================================== */

.content-box-style-06 {
     position: relative;
}

.year-box {
    margin-bottom: 0.4rem;
}

.year-box .year {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: "Avenir Next W01 Bold", 'Nunito Sans', sans-serif;
    line-height: 0.8rem;
}

.year-lg {
    font-size: 2rem;
    font-weight: 700;
    font-family: "Avenir Next W01 Bold", 'Nunito Sans', sans-serif;
    line-height: 2rem;
}


.svg-newspaper-item {
    z-index: 999;
}

.content-box-style-01 {
    position: relative;
}

.content-box-style-01 .content-box-header {
    padding: 2rem 1rem;
}

.content-box-style-02 .content-box-header {
    padding: 0rem;
}



.content-box-inner {
    position: relative;
}

.content-box-header .title {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: "Avenir Next W01 Bold", 'Nunito Sans', sans-serif;
}

.content-box-header .description {
    margin-bottom: 0px;
}

.content-box-footer {
    border-top: 4px solid #009CDC;
    padding: 1rem;
}

.content-box-footer .year {
    font-size: 2.2rem;
    font-weight: 700;
    font-family: "Avenir Next W01 Bold", 'Nunito Sans', sans-serif;
    line-height: 1.8rem;
}

.year-box {
    display: inline-block;
    padding: 0.6rem 1.4rem;
}

.year-box-offset {
    display: block;
    margin-top: -30px;
}

.year-box-offset .year-box {
    border: 1px solid #ffffff;
}

.year-box-offset-2 {
    display: block;
    margin-top: -36px;
}

.year-box-offset-2 .year-box {
    border: 1px solid #ffffff;
}

.bg-dark-blue.year-box .year {
    color: #ffffff;
}

.background-box {
    z-index: -100;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border: 3px solid #B21E6A;
}

.background-box.border-light-blue {
    border: 3px solid #009CDC;
}

.background-box.border-pink {
    border: 3px solid #B21E6A;
}

.play-icon-container {
    position: relative;
}

.play-icon {
    height: 100%;
    width: auto;
/*    margin-left: -50%;*/
}

.play-icon-filler {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 50%;
    background-color: #ffffff;
    opacity: 0;
    z-index: -100;
}

.play-icon-side-container {
    opacity: 0;
/*    margin-left: -20%;*/
}

.play-icon-50-years {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.timeline-navigation {
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
    padding: 0rem 2.4rem;
    z-index: 1000;
}

.timeline-navigation-inner {
    width: 100%;
    padding: 0.8rem 0rem;
    border-bottom: 3px solid #ffffff;
}

.timeline-navigation-inner a i {
    font-size: 1.2rem;
}

.timeline-navigation-inner a {
    color: rgba(255, 255, 255, 0.8);
}

.timeline-navigation-inner a:hover {
    color: rgba(255, 255, 255, 1.0);
}

.content-box-outer-background {
    padding: 1rem;
}

.content-box-inner-background {
    padding: 1rem 1rem 0rem 1rem;
    background-color: #ffffff;
}

.double-column-outer {
    position: absolute;
    width: 150%;
    max-width: 500px;
    top: 0px;
    left: 0px;
}

.double-column-outer .timeline-content-box-container {
    max-width: 500px;
}

.double-column-right {
    left: -30%;
}

.double-column-left {
    left: 30%;
}

.right-30 {
    position: absolute;
    top: 0px;
    left: -30%;
}

.bubble {
    max-width: 200px;
}

.max-width-200px {
    max-width: 200px;
}

.max-width-250px {
    max-width: 250px;
}

/* ==========================================================================
FORM
========================================================================== */

/*.checkbox-btn input[type=checkbox] {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

.rating-btn {
    background-color: #f8f9fa;
    color: #cccccc;
    border-color: #eeeeee;
    margin-right: 10px;
}

.rating-btn:hover {
    background-color: #0069d9;
    border-color: #0062cc;
    color: #ffffff;
}

.rating-btn:not(:disabled):not(.disabled).active, .rating-btn:not(:disabled):not(.disabled):active, .show>.rating-btn.dropdown-toggle {
    color: #ffffff;
    background-color: #007bff;
    border-color: #007bff;
}*/

/* ==========================================================================
MODAL
========================================================================== */

.modal.content-modal-style-1, .modal.content-modal-video, .modal.content-modal-graphic {
    padding-right: 0px !important;
}

.content-modal-style-1 .modal-dialog, .modal.content-modal-video .modal-dialog, .modal.content-modal-graphic .modal-dialog {
    margin: 0px;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.modal.content-modal-style-1 .modal-content {
    height: 100%;
    min-height: 100vh;
    border-radius: 0px;
    border: 0px;
}

.modal.content-modal-video, .modal.content-modal-graphic  {
    border-radius: 0px;
    border: 0px;
}

.modal.content-modal-video .modal-dialog, .modal.content-modal-video .modal-dialog, .modal.content-modal-graphic .modal-dialog  {
    padding: 0 3rem;
    max-width: 1200px;
    margin: 0px auto;
}

.modal.content-modal-style-1 .modal-content > .row, .modal.content-modal-style-1 .modal-content > .row > div {
    max-height: 100%;
/*    padding: 0px;*/
}

.modal.content-modal-style-1 .modal-content > .row, .modal.content-modal-style-1 .modal-content > .row > div:first-child {
    padding-right: 0px;
}

.modal-content-inner {
    max-height: 100%;
    overflow-y: auto;
    padding: 4rem;
}

.modal-content-featured {
    max-height: 100%;
    overflow-y: auto;
    padding: 4rem 6rem 4rem 4rem;
}

.modal.content-modal-style-1 .modal-content .content-modal-footer {
    font-size: 0.8rem;
}

.modal-content-close {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #ffffff;
    font-size: 4rem;
    z-index: 100;
}

.modal-content-close a {
    display: flex;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 2px 2px 4px #000000;
}

.modal-content-close a:hover {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
}


#disclaimerModal .modal-content, #disclaimerModal .modal-header {
    border-radius: 0px;

}

/* ==========================================================================
FOOTER
========================================================================== */

footer {
    padding-top: 80px;
    padding-bottom: 80px;
}