html, body {
	 width: 100vw;
	 height:100vh;
	 margin: 0 !important;
	 overflow: hidden;
}

.grid-container {
    display: grid;
    margin: 3vh;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 9vh 1fr 7vh;
    grid-gap: 0;
    grid-template-areas:
        'logo logo logo datetime datetime'
        'slide slide slide slide slide'
        'social social social social weather';
    height: 94vh;
}

 #loading-animation-container {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 z-index: 99;
}
 #logo-and-tcpu{
     grid-area: logo;
	 z-index: 2;
	 height: 10vh;
	 width: 40vw;
}
 #social-footer{
     grid-area: social;
	 display: flex;
}
 #social-footer a {
	 color: white;
	 text-decoration: none;
}
.social-footer-item {
    display: flex;
}
 .social-icon {
	 display: inline-block;
	 height: 6vh;
	 width: 6vh;
	 z-index: 2;
	 margin-right: 1vw;
}
 .social-handle {
	 display: inline-block;
	 font-family: Gotham_Light;
	 vertical-align: middle;
	 font-size: 3vh;
	 font-weight: 500;
	 color: white;
	 z-index: 2;
	 margin-right: 2vw;
}
 .social-handle a p {
	 margin: 1vh 0 0 0;
}
/*-----------------------------------BG Video---------------------------------*/
 .fullscreen-video {
	 position: fixed;
	 top: 0;
	 right: 0;
	 left: 0;
	 overflow: hidden;
	 z-index: -1;
}
 .fullscreen-video > video {
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	/*width: 100vw;
	 height: 100vh;
	 */
}
 @media (min-aspect-ratio: 16/9) {
	 .fullscreen-video > video {
		 width: 100%;
		 height: auto;
		/* actually taller than viewport */
	}
}
 @media (max-aspect-ratio: 16/9) {
	 .fullscreen-video > video {
		 width: 100%;
		/* actually wider than viewport */
		 height: 100vh;
	}
}
 #video-overlay {
	 height: 100%;
	 position: fixed;
	 width: 100%;
	 top: 0;
	 left: 0;
	 background: rgba(10,10,10,.55);
	 z-index: 1;
	 transition: .75s;
}
 #slide-container, #interstitial {
}
 #slide-container {
     grid-area: slide;
	 background-color:rgba(0,7,74,0.0);
	 width: 80vw;
	 height: 55vh;
	 overflow: hidden;
	 color:#fff;
	 z-index:2;
	 margin: auto;
 }
 #interstitial {
	 position:absolute;
	 background-color:rgba(0,7,74,0.0);
	 width: 90vw;
	 top: 15vh;
	 height: 70vh;
	 overflow: hidden;
	 left: 5vw;
	 color:#fff;
	/* line-height:400%;
	 */
	 z-index:2;
     
 }
 .slide-wrapper {
	 display:flex;
	 flex-direction: row;
	 flex-wrap: nowrap;
	 justify-content:space-between;
	 align-items: flex-start;
}
 .slide-image {
	 max-width: 33%;
	 flex: 1;
	 margin-right: 3%;
}
 .slide-image img {
	 width:100%;
}
 .slide-body {
	 flex: 3;
	 display:flex;
	 flex-direction: column;
	 overflow:hidden;
	 float: left;
}
 .slide-title {
	 overflow: hidden;
}
 .slide-title h1 {
	 font-family: museo-slab, serif;
	 font-weight: 700;
	 font-style: normal;
	 font-size: 6vh;
	 padding: 0px;
	 margin: 0px;
	 margin: 0px 0px 20px 0px;
}
 .slide-underline {
	 width:100%;
	 background-color:rgba(248,180,53,1.00);
	 height:5px;
}
 .slide-subtitle {
	 line-height: 7vh;
	 overflow:hidden;
}
 .slide-subtitle p {
	 font-family: Gotham_Bold;
	 font-size: 3vh;
	 margin:25px 0px;
}
 .slide-description {
	 font-family: Gotham_Light;
	 font-size: 4vh;
	 line-height: 5vh;
	 flex:1;
	 overflow:hidden;
}
 .slide-description p {
	 margin:10px 0px;
}
 .swiper-pagination {
	 font-family: Gotham_Light;
}
/* Weather Widget */
/* #weather-icon {
	 height: 185px;
	 width: 250px;
	 display: flex;
	 position: absolute;
	 z-index: 2;
	 clip-path: inset(15.2703% -8.2% -10.97297% 28%) !important;
	 right: 3%;
	 margin-right: 183px;
	 bottom: 3%;
	 margin-bottom: 26px;
}
 */
/* #weather-text {
	 height: 185px;
	 width: 250px;
	 display: flex;
	 position: absolute;
	 z-index: 2;
	 clip-path: inset(15.1352% -114.6% -13.37838% 105.2%) !important;
	 */
	/* margin-right: 243px;
	 */
	/* right: 3%;
	 bottom: 3%;
	 */
	/* margin-bottom: 38px;
	 */
	/* 
}
 */
 .weatherwidget-io {
	 min-width: 221px;
	 z-index: 2;
	 -ms-zoom: 2.5;
	 -moz-transform-origin: 0 0;
	 -o-transform-origin: 0 0;
	 -webkit-transform: scale(2.5);
	 -webkit-transform-origin: 0 0;
}
 .weather-wrapper {
     grid-area: weather;
	 z-index: 2;
}
 .weather-wrapper #weather-icon {
	 clip-path: none !important;
	 display: block;
	 width: 7vh;
	 height: 7vh;
	 grid-area: weather-icon;
	 padding-right: 1.5em;
}
.weather-wrapper p {
    margin-block-start: 0;
    margin-block-end: 0;
    font-family: Gotham_Bold;
    color: white;
    text-transform: capitalize;
    margin: 0; padding: 0;
}
 .weather-wrapper #weather-icon img, .weather-wrapper #weather-icon-day1 img, .weather-wrapper #weather-icon-day2 img {
	 height: 11vh;
	 margin: -2vh;
	/* margin-left: auto;
	 */
	/* margin-right: auto;
	 */
	 ;
}
#weather-icon-day1 {
    grid-area: weather-day1-icon;
}
#weather-icon-day2 {
    grid-area: weather-day2-icon;
}
 .weather-wrapper #weather-text {
	 clip-path: none !important;
	 display: block;
	 margin-right: 3%;
	 position: static;
	 float: right;
	 height: 7vh;
	/* padding-top: 20px;
	 */
	 width: auto;
	/* margin-right: 5em;
	 */
	 margin-bottom: 0;
}
#weather-spacer {
    grid-area: spacer;
}
 #weather-temp {
	 font-family: Gotham_Bold;
	 color: white;
	 font-size: 5vh;
	 text-align: center;
	 margin: 0;
	 padding: 0;
	 line-height: 100%;
}
#weather-temp p, #weather-current p {
	 margin-block-start: 0;
	 margin-block-end: 0;
}
 #weather-current {
     display: grid;
	 grid-template-columns: 1fr auto auto;
	 grid-template-rows: 1fr auto auto;
	 grid-gap: 0;
	 grid-template-areas: 'spacer weather-icon weather-temp' 'spacer weather-icon weather-condition';
 }
 #weather-day1 {
     display: none;
     grid-area: weather-day1;
 }
 #weather-day2 {
     display: none;
     grid-area: weather-day2;
 }
 #weather-condition {
	 font-family: Gotham_Bold;
	 color: white;
	 font-size: 2vh;
	 text-align: center;
	 text-transform: capitalize;
	 margin: 0;
	 padding: 0;
	 line-height: 100%;
	 grid-area: weather-condition;
}
#weather-day1-low-temp {
    grid-area: weather-day1-low;
}
#weather-day1-high-temp {
    grid-area: weather-day1-high;
}
#weather-day1-condition {
    grid-area: weather-day1-condition;
}
#weather-day2-low-temp {
    grid-area: weather-day2-low;
}
#weather-day2-high-temp {
    grid-area: weather-day2-high;
}
#weather-day2-condition {
    grid-area: weather-day2-condition;
}
#datetime {
    grid-area: datetime;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 6vh 2.5vh;
    grid-template-areas: 'clock' 'date';
}

 #clock {
     grid-area: clock;
	 font-family: Gotham_Bold;
	 font-size: 6vh;
	 color: white;
	 z-index: 2;
	 text-align: right;
}
 #date {
     grid-area: date;
	 font-family: Gotham_Bold;
	 font-size: 2.5vh;
	 color: white;
	 z-index: 2;
	 text-align: right;
}
 @font-face {
	 font-family: Gotham_Book;
	 src: url(../fonts/gotham-book.otf);
}
 @font-face {
	 font-family: Gotham_Light;
	 src: url(../fonts/gotham-light.otf);
}
 @font-face {
	 font-family: Gotham_Light_Italic;
	 src: url(../fonts/gotham-lightitalic.otf);
}
 @font-face {
	 font-family: Gotham_Bold;
	 src: url(../fonts/gotham-bold.otf);
}
 @font-face {
	 font-family: Gotham_Black;
	 src: url(../fonts/gotham-black.otf);
}
 @font-face {
	 font-family: Roboto Slab Regular;
	 src: url(../fonts/robotoslab-regular.ttf);
}
 @font-face {
	 font-family: Roboto_Slab_Bold;
	 src: url(../fonts/robotoslab-bold.ttf) 
}
 @font-face {
	 font-family: Roboto_Slab_SemiBold;
	 src: url(../fonts/robotoslab-bold.ttf) 
}