﻿#lobby {padding-right: 60px;width: 95%; padding-top:45px;padding-bottom:65px;}
#GridContent {margin: 0% auto 0% auto;}
.topImage{margin-bottom:0px;}
#body h2 {
    font-size: 145%;
}
@media (max-width:1440px){
        #lobby{padding-right: 140px;}
        }


@media (max-width:991px) {
    #lobby #body { max-width: 95%; }
    #lobby{padding-right:110px}
}
#stem-wrapper-overlay {position: absolute;width: 6px;background: #fff;height: 405px;z-index: 1;right:0px; top:0px;margin-right:-1px;}
.topImage #headline{width:84%;}
.stem-wrapper                               {position: fixed;bottom: 0px;top: 15vh;z-index:0;-webkit-animation: fadein 5s;-moz-animation: fadein 5s;-ms-animation: fadein 5s;-o-animation: fadein 5s;animation: fadein 5s;}
.getGridContent .stem-wrapper {top: 0;}
.stem-wrapper .stem-background              {background: #b3bfad;height: 0%;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;}
.getGridContent .stem-wrapper .stem-background                      {height: 50%;}

.stem-wrapper .stem, .stem-wrapper .stem-background {position: absolute;top: 0px;right: 0px;width: 4px;}
.stem-wrapper .stem                                 {background: #686868;height: 100%;}

.stem-padding,.single-stem-icon     { width: 60px;height: 60px;margin: 0px auto;background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/stem-mask.png) repeat-y top center; }

.stem-overlay                   {position: absolute;top: 0;bottom: 0px;width: 0;right: 0;}
.stem-overlay .icon             {height: 50px;width: 50px;cursor: pointer;border-radius: 50%;text-align: center;position: absolute;margin-top: 0px;z-index: 1;transition:all 150ms ease-in-out;-webkit-transition:all 150ms ease-in-out;transform:  translateY(-50%);top: 50%;background: #686868;}
.stem-overlay .icon span        {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);height:  100%;width: 100%;}
/*.stem-overlay .stem-mask        {position: absolute;top: 260px;bottom: 0px;right: 0px;background: #979798;width: 4px;}*/
.stem-overlay .icon svg {width: 36px;height: 28px;position: absolute;z-index: -1;top: 50%;left: 50%;transform: translate(-50%, -50%);fill: #fff;}
.galleryItem .stem-overlay .icon .st0 {fill: #fff;}
.galleryItem.active .stem-overlay .icon .st0 {fill: #4d4d4f;}

.pageItem .stem-overlay .icon {height:  22px;width: 22px;margin-right: -61px;}
.galleryItem .stem-overlay .icon {margin-right: -75px;}



.timeLineItems          { max-width: 95%;position:relative;    padding: 0px 85px 0 0; }
.timelineItem           {margin-bottom: 70px;position:relative;}

.timelineItem:nth-last-child(1){position:relative;margin-bottom:0px;}

.timelineItem.hidden            { display: block !important; visibility: visible !important; }

.timelineItem .contentImg                  {margin-bottom: 10px; -webkit-transform: translateY(20px);transform: translateY(20px);opacity: 0;transition: all 350ms ease-in-out;-webkit-transition: all 350ms ease-in-out; }
.timelineItem .contentImg .flexslider     {margin-bottom:  0px;border-radius:0px}
.timelineItem .contentImg .flexslider-item{padding-bottom: 49.065%;}
.timelineItem .contentImg .flex-control-nav li {margin: 0 3px;}
.timelineItem.showText .contentImg         { opacity: 1;-webkit-transform: translateY(0px);transform: translateY(0px); }
.timelineItem:first-child .contentImg          {opacity: 1;transform:translateY(0);-webkit-transform:translateY(0);position:  relative;}
.timelineItem .mainContent                  {-webkit-transform: translateY(20px);transform: translateY(20px);opacity: 0;transition: all 650ms ease-in-out;-webkit-transition: all 650ms ease-in-out;font-size: 100%;padding: 0 10px;max-width:600px;}
.timelineItem.showText .mainContent         { opacity: 1;-webkit-transform: translateY(0px);transform: translateY(0px);}
.timelineItem:first-child .mainContent      { opacity: 1;transform:translateY(0); -webkit-transform:translateY(0); }
.timelineItem.active .icon  {background: #b3bfad;}
.timelineItem.active .icon svg {fill: #4d4d4f;}
.timelineItem .flex-control-paging li a.flex-active {background:  #fff;box-shadow: none;}
.timelineItem .flex-control-paging li a {background:  transparent;border: 2px solid #fff;}
.timelineItem.galleryItem .mainContent      {font-size: 120%;    max-width: 700px;padding-top:10px;}
.timelineItem.withImg .mainContent           {padding-top: 10px;}
.timelineItem.galleryItem .contentImg       {margin-bottom:0px;}
.timelineItem.withImg .contentImg           {margin-bottom: 0px;}
.timelineItem.pageItem.showText.withoutImg .mainContent:before {content:  "";position:  absolute;width: 4px;height: 40px;background-color: #b3bfad;right: -4px;top: 1px;height:100%;}

#GridFooter         { padding-top: 150px;background: #ffffff;padding-bottom: 50px;margin-top:0; }
#SiteFooterContainer,#UnderSiteFooterContainer {z-index: 2;position: relative;}


@media(max-width:1440px){
    .timeLineItems{padding-right: 150px;}
    }

@media(max-width:1250px){
    .timeLineItems{padding-right: 11.5vw}
    }

@media(max-width:1250px) and (min-width:992px){
    .timelineItem.galleryItem {width: 660px;}
}
@media (max-width:1170px) {
    #GridContent p{ font-size: 115%;}  
}
@media(max-width:1024px){
.timeLineItems{padding-right: 12.2vw;}
}





@media(max-width:991px){
     #GridFooter{padding-top:230px;}
.timeLineItems{padding-right: 110px;}

}

@media(min-width:768px){

    .timelineItem.galleryItem {width: 748px;}
    .timelineItem .contentImg .contentImgLabel     {position:  absolute;top: 50%;left: 50%;transform:  translate(-50%, -50%);background:  #fff;z-index: 2;font-size: 40px;width: 300px;height:  60px;text-align:  center;line-height:  60px;}
}



@media(max-width:991px) and (min-width:768px){
    .timelineItem.galleryItem, .timelineItem {width:95%}
    .stem-overlay .icon{    transition: all 50ms ease-in-out;-webkit-transition: all 50ms ease-in-out;} 
}

@media(max-width:767px){
    /*.timelineItem:nth-last-child(1) .whiteStrip{    margin-right: -15px;}
    .timeLineItems, #lobby{padding-right:0px}
    #lobby #body {max-width: 100%;}
    #body h2{font-size:20px;}
    .topImage #headline{width:92%;}
    .timelineItem.pageItem.showText.withoutImg:before{height:38px;}
    .timelineItem .contentImgLabel{font-size: 180%;    padding: 0 10px;}
    .flexslider .flexslider-item {padding-bottom: 48%;min-height: 0px;}
    .timeLineItems,
    #lobby  {max-width: 80%; margin:0 auto;}
    .timeLineItems{ max-width: 100%;padding: 0 4.5% 0;}
    .itemContent {padding-right: 10%;}
    .stem-overlay .icon{height:30px; width:30px;}
    .stem-overlay .icon svg {width:16px;height:16px;}
    .galleryItem .stem-overlay .icon{    margin-right: -3vw;}
    .pageItem .stem-overlay .icon{margin-right: -3vw;}
    .timelineItem{margin-bottom:50px;}
    .galleryItem .stem-overlay {top: -10%;}
    .withImg .stem-overlay {top: -3%;}*/
    .topImage #headline {width: 100%;right: 0;padding:  30px;}
    .stem-overlay .icon{height:30px; width:30px;}
    .stem-overlay .icon svg {width:16px;height:16px;}
    .stem-wrapper {right: 30px !important;top:50vh;}
    #stem-wrapper-overlay {right: 30px !important;}
    #lobby {padding: 0;width: 100%;padding-top:  45px;padding-bottom: 65px;}
    .timeLineItems {max-width:  100%;padding-right: 0;}
    #lobby #body {max-width:  100%;}
    #GridContent {max-width: 100%;padding: 0 10px;}
    #subheadline {padding-right:  50px;}
    #body h2 {padding: 0 50px 0 30px;}
    .itemContent {padding: 0 50px 0 30px;}
    #GridContent #body p {padding: 0 50px 0 30px;}
    .galleryItem .stem-overlay .icon {margin-right: 7px;}
    .pageItem .stem-overlay .icon {margin-right: 11px;}
    .flexslider .flexslider-item {padding-bottom: 48%;min-height: 0px;}
    .timelineItem .contentImgLabelMobile{font-size: 180%;padding: 0 10px;padding-top: 10px;}
    #GridFooter {padding-top: 120px;}
}
   

@media(max-width:375px) {

}

@keyframes fadein {from { opacity: 0; } to { opacity: 1; }}
@-moz-keyframes fadein {from { opacity: 0; } to { opacity: 1; }}
@-webkit-keyframes fadein {from { opacity: 0; } to { opacity: 1; }}
@-ms-keyframes fadein {from { opacity: 0; } to { opacity: 1; }}
@-o-keyframes fadein {from { opacity: 0; } to { opacity: 1; }}


#SiteContainer {background:  transparent;}
#stem-wrapper-overlay {background-image: url(../../../000Frames/site/images/homePage/aboutBg.jpg);}

#GridFooter {background-image: url(../../../000Frames/site/images/homePage/aboutBg.jpg);}

/*Changes 18/11/18*/
@media(max-width: 1024px) {
    iframe { width: 100%; }
    #lobby { padding-right: 0; width: 83%;}
    #lobby #body {margin: 0 auto; }
}

@media(max-width:767px) {
    #lobby {width: 100%; }
    #body h2 { padding: 0 30px; }
    #subheadline { padding-right: 30px; }
}