html,
body,
.wrapper {
  /* height: 100%; */
}

html,
body {
  padding: 0;
  margin: 0;
  background:#000;
}

body {
   font-family: "Roboto", sans-serif;
	font-size:1rem;
}

.wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

  // Dark overlay
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(33, 33, 33, 0.25);
  }
}

/* header, */
/* .content, */
/* footer { */
  /* position: absolute; */
/* } */

header,
footer {
  width: 100%;
}

header {
  top: 0;
  text-align: center;
}

.header__logo {
  max-width: 65px;
  fill: #fff;
}

.content {
  /* top: 50%; */
  /* left: 50%; */
  text-align: center;
  color: #fff;
  /* transform: translate(-50%, -50%); */
	width:100%;
  h1 {
            margin-top: 0;
        line-height: 0;
        font-size: 25px;
        font-weight: 500;
        letter-spacing: 1px;
        margin-right: 41px;
        text-align: end;
        position: relative;
        top: -16px;
  }

  form {
    margin: auto;
    display: table;
  }

  input {
    float: left;
    font-size: 16px;
    border: 1px solid #242424;
  }

  input[type="email"] {
    padding: 12px;
    background: #1c1c1c;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
	width:350px;
	   font-family: "Roboto", sans-serif;
	  color:#fff;
  }
	input[type="email"]:focus, input[type="email"]:focus-visible {
    border: 1px solid #242424;
    outline: none; /* This removes the default outline in some browsers */
}

  input[type="submit"] {
    padding: 12px 24px;
    color: #323232;
    background: #fff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
    transition: all 0.235s ease-in-out;
   font-family: "Roboto", sans-serif;
  font-weight:600;
    &:hover {
      color: #212121;
      background: #fcfcfc;
    }
  }
}

.countdown {
  margin: auto;
  display: table;
  font-size: 100px;
  font-weight: 500;
  /* line-height:1; */

  > div {
    float: left;
    width: 200px;
	margin: 55px 15px;
	margin-top:20px;
  }

  span {
    position: relative;
    display: block;
    font-size: 16px;
    text-align: center;
	text-transform:uppercase;
	margin-top:10px;

    &:before {
      content: "";
      position: absolute;
      top: -2px;
      right: 0;
      left: 0;
      margin-right: auto;
      margin-left: auto;
      width: 20px;
      height: 0px;
      background: #fff;
    }
  }
}

footer {
  padding-bottom: 12px;
  bottom: 0;
}

.footer__links {
  text-align: center;
  list-style-type: none;

  li {
    display: inline-block;

    &:nth-of-type(n + 2) {
      margin-left: 12px;
    }
  }

  a {
    padding: 8px 0;
    display: block;
    width: 41px;
    text-align: center;
    color: #fff;
    border: 1px solid;
    border-radius: 50%;
    transition: opacity 0.235s ease-in-out;

    &:hover {
      opacity: 0.5;
    }
  }

  .fa {
    vertical-align: middle;
    font-size: 21px;
  }
}

.logo_center{
	text-align:center;
	margin:60px 0;
}
.logo_center img{
	display:inline-block;
	margin:0 auto;
	vertical-align:middle
}
.number{
	background:#0c0c0c;
	padding:40px 20px;
	border-radius:8px;
	height: 200px;
	/* background: linear-gradient(90deg, #3e3e3e, #0e0e0e); */
}
/* .light_bg{ */
	/* background: url(dash_light.png); */
	/* position:absolute; */
	/* left:0; */
	/* right:0; */
	/* bottom:0; */
	/* display:block; */
/* } */

.mar_5{
	margin-right:5px !important;
}
.app_icons a{
	display:block;
}
.flex-container {
  display: flex;
      justify-content: center;
}

.flex-container > div {
  margin: 10px;
}
.app_icons{
	margin-top:36px !important;
}
.signup_section h2{
	font-size:40px;
	line-height:0
}
.signup_section span{
	color:#e31e0d
}
.signup_section p{
	font-size:20px;
	position:relative;
	top:-10px;
	font-weight: 400;
}
.signup_section img{
	margin-top:-10px;
	margin-bottom:4px;
	width:180px;
}

/* Sign up form design */
* {box-sizing: border-box;}

/* Full-width input fields */
input[type=text], input[type=email] {
  width: 100%;
  padding: 16px;
  margin: 5px 0 16px 0;
  display: inline-block;
  border: 1px solid #0c0c0c;
  background: #0c0c0c;
  border-radius:8px;
  color:#fff;
  font-family: "Roboto", sans-serif;
  font-size:14px;
  font-weight:500;
}

/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
  background-color: #0c0c0c;
  outline: none;
  border:1px solid red;
}

/* Set a style for all buttons */
button {
  background-color: #e31e0d;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  opacity: 0.9;
  border-radius:30px;
  width:100%;
  font-size:16px;
  font-family: "Roboto", sans-serif;
}

button:hover {
  opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 100%;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 12; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, .6);
  padding-top: 50px;
  color:#fff;
}

/* Modal Content/Box */
.modal-content {
background-color: #000000;
    margin: 0 auto;
    border: 1px solid #202020;
    width: 400px;
    border-radius: 10px;
    padding: 30px;
}

/* Style the horizontal ruler */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
 
/* The Close Button (x) */
.close {
    position: absolute;
    right: 35px;
    top: -35px;
    font-size: 20px;
    font-weight: bold;
    color: #f1f1f1;
    background: #323232;
    width: 32px;
    height: 32px;
    text-align: center;
    border-radius: 40px;
    line-height: 34px;
	    display: flex;
    align-items: center;
    justify-content: center;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.modal-content h1{
	margin:0;
	padding-bottom:20px;
}
.modal-content label{
	font-size:12px;
	color:#979797
}
.margin_0 {
    margin: 0 !important;
    margin-bottom: 20px !important;
    margin-left: -7px !important;
}
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
     width: 100%;
  }
}
.modal_show{
	display:block;
}


#result {
  visibility: hidden;
  width: 400px;
  background-color: #04AA6D;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 10;
  left:0px;
  right:0;
  margin:0 auto;
  top: 30px;
  font-size: 17px;
}
 
#result.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
 
@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;} 
  to {top: 30px; opacity: 1;}
}
 
@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}
 
@-webkit-keyframes fadeout {
  from {top: 30px; opacity: 1;} 
  to {top: 0; opacity: 0;}
}
 
@keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

.flex-container{
	padding-top: 20px;
}
.modal_animation{
	animation: zoom-in-popup .3s ease-out forwards;
}
@keyframes zoom-in-popup {
    from {
        transform: scale(0.5); /* Start smaller */
        opacity: 0; /* Start invisible */
    }
    to {
        transform: scale(1); /* Final size */
        opacity: 1; /* Fully visible */
    }
}
#popmodal{
    z-index:11;
    position: relative;
 
}
.home_video{
	width: 875px;
    height: 480px;
    /* border: 1px solid #232323; */
    border-radius: 10px;
}
.home_video img {
    border-radius: 10px;
    
}

.modal_video {
    right: 0;
    margin: 0 auto;
    text-align: center;
    overflow: initial;
    align-items: center;
    height: 100%;
    background-color: #ffffff42;
}
.modal_video video{
    width:100%;
    border-radius: 10px;
}
.home_video_w {
width:59%;
margin:0 auto;
border:3px solid #fff;
border-radius: 10px;
display: flex;
}
.modal_video .close{
      right: -35px;      
}
@media (max-width: 767px) {
    .home_video img {
    width:95%;
    
}
    
    .modal_video video{
        width: 100%;
    }
    .home_video_w {
width:90%;
margin-top:40%;
}
.modal_video .close {
    right: 0;
    top: -47px;
}
.home_video {
    width: 100%;
    height: auto;
}
.modal{
	animation: zoom-in-popup .3s ease-out forwards;
}
.modal_animation{
	animation:auto;
}

.margin_0{

    margin-left: -2px !important;
}

#result{
	width:100%;
}
.countdown {
		font-size:30px;
    > div {
        float: left;
        width: 80px;
        margin: 0px 3px; 
    }
}
.content {
    input[type="email"] {
		width:auto;
	}
    h1 {
		font-size: 11px;
		margin-right: 20px;
		top: 0;
		letter-spacing: .2px;
		margin-top: 5px;
		/* margin-bottom:90px; */
	}
}
	.logo_center {
		margin: 30px 0;
	}
	.countdown {
		span{
			font-size:12px;
		}
	}
	.content {
    input {
        float: left;
        font-size: 14px;
        border: 1px solid #242424;
		}
	}
	.number{
		height: 80px;
		padding: 22px 20px;
	}
	.logo_center img.mar_5{
		width:70px !important;
	}
	.logo_center .text_logo{
			width:150px !important
	}
	.app_icons img{
		width:90px;
	}
	.app_icons {
		margin-top: 10px !important;
	}
	.signup_section h2 {
		font-size: 19px;
		margin-top:100px
	}
	.signup_section p {
		font-size: 10px;
		top: -3px;
		font-weight: 400;
	}
	.signup_section img {
		margin-top: 5px;
		margin-bottom: 40px;
		width:120px;
	}
	.modal-content{
		width:100%;
		border:0px solid #000;
		    padding: 20px 30px;
	}
	.modal{
		    padding-top: 0px;
			    background-color: rgba(0, 0, 0, 1);
	}
	.scale_8 {
        transform: scale(1);
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        z-index: 0;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        transition: initial;
    }
	.close {
		right: 10px;
        top: 10px;
        z-index: 1;
	}
	.cancelbtn {
		position: fixed;
		left: 0;
		width: 90%;
		right: 0;
		text-align: center;
		margin: 0 auto;
		bottom: 30px;
		z-index:2;
	}
	.signupbtn {
		position: relative;
		left: 0;
		width: 90%;
		right: 0;
		text-align: center;
		margin: 0 auto;
		bottom: -8px;
		z-index:2;
	}
	.items_center{
		align-items: center;
		text-align: center;
	}
	.modal_show{
		display:block;
	}
	.wrapper {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}
	.modal_video{
       background-color: #ffffff42;
    }
    #controlsmute {
        left: 62px;
    }
}