/*Background*/
* { 
  box-sizing: border-box; 
}
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
#video-foreground, .video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
  #video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  #video-foreground { width: 300%; left: -100%; }
}

body {
	font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-wrap: break-word;
    overflow-x: hidden;
    color: #ccc;
}

/*Content*/
h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 3.5em;
    line-height: 1;
    font-weight: bold;
}
p {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

.main-content {
  margin-top: 15%;
}

.main-area {
    position: relative;
    height: 100vh;
}

.right-section {
    float: right;
    width: 35%;
    height: 100%;
    position: relative;
    padding: 0 60px;
    /*background-color: rgba(255, 255, 255, 0.25);*/
    -webkit-transition: width 0.3s; /* Safari */
    -webkit-transition-timing-function: linear; /* Safari */
    transition: width 0.3s;
    transition-timing-function: linear;
}
.right-section.full-height::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -0;
    top: 0;
    right: 0%;
    width: 130%;
    height: 100%;
    /* background-color: #fff; */
    background-color: rgba(255, 255, 255, 0.25);
    transform-origin: bottom left;
    -webkit-transform: skewX(166deg);
    -moz-transform: skewX(166deg);
    -ms-transform: skewX(166deg);
    -o-transform: skewX(166deg);
    transform: skewX(166deg);
}

.right-section .logo {
    position: absolute;
    top: 40px;
    height: 70px;
}

.right-section .logo img {
    height: 100%;
    width: auto;
}

.display-table {
    display: table;
    height: 100%;
    width: 100%;
}

.display-table-cell {
    display: table-cell;
    vertical-align: middle;
}

.right-section .main-content {
    padding: 40px 0px 40px 0;
}

.main-content .title {
    margin-bottom: 15px;
    margin-top: 0;
    font-weight: 500;
}

p {
    line-height: 1.6;
    font-size: 1.05em;
    font-weight: 400;
    color: #ccc;
}

.main-content .post-desc {
    color: #999;
}

.main-content {
    margin-top: 15%;
}

li {
    list-style: none;
    display: inline-block;
}

.right-section .footer-icons{ position: absolute; bottom: 30px; padding: 0;}

.right-section .footer-icons > li > a{ display: inline-block; font-size: 1.07em; padding: 0 0px; }

.right-section .footer-icons > li:first-child{ margin-right: 10px; }

.right-section .footer-icons > li > a > i{ display: inline-block; height: 35px; line-height: 33px; 
	transition: all .2s; border-radius: 40px; text-align: center; width: 35px; }

.right-section .footer-icons > li > a:hover > i{ border: 1px solid; }

.right-section .footer-icons > li > a > i.ion-social-facebook{ color: #ccc; border-color: #ccc; }
.right-section .footer-icons > li > a > i.ion-social-instagram-outline{ color: #ccc; border-color: #ccc; }
.right-section .footer-icons > li > a > i.ion-social-vimeo{ color: #ccc; border-color: #ccc; }
.right-section .footer-icons > li > a > i.ion-email{ color: #ccc; border-color: #ccc; }
.right-section .footer-icons > li > a > i.ion-map{ color: #ccc; border-color: #ccc; }

.main-content a.underBtn {
    color: #1f777a;
    border-bottom: 2px solid transparent;
}

.main-content a.underBtn:hover {
    color: #1f777a;
    border-bottom: 2px solid #1f777a;
}

@media only screen and (max-width: 992px) {
	
	/* ---------------------------------
	1. PRIMARY STYLES
	--------------------------------- */
	
	.main-area{ position: relative; height: 100vh; }


	/* ---------------------------------
	3. RIGHT SECTION
	--------------------------------- */

	/*.right-section{ float: none; width: 100%; height: 50%; }*/
	.right-section{ 
    float: none; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    background: rgba(255, 255, 255, 0.05); 
    padding: 10px 10px;
  }

  .right-section.full-height::before {
    transform-origin: bottom left;
    -webkit-transform: skewX(0deg);
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -o-transform: skewX(0deg);
    transform: skewX(0deg);
  }
	
	.right-section .main-content{ padding: 40px 0; }
	
	.main-content .email-input-area{ width: 100%; }
	
	.main-content .email-input-area .email-input{ padding: 0 115px 0 20px; }
	
	.main-content .email-input-area .submit-btn{ width: 100px; } 
	
	.right-section .footer-icons > li > a > i{ height: 30px; line-height: 28px; width: 30px; }
	
	
	/* ---------------------------------
	4. LEFT SECTION
	--------------------------------- */

	.left-section{ position: static; width: 100%; height: 100%; }

	.left-section #normal-countdown { display: none; }

	.date-countdown{ width: 100%; }
	
	.date-countdown .time_circles > div > h4{ font-size: .7em!important; }

}

@media only screen and (max-width: 1360px) and (min-width: 992px) {
  .right-section {
    width: 45%;
  }
}