html,body{
	margin: 0;
	padding: 0;
}
@font-face {
	font-family: Railway;
	src: url(../fonts/Railway.otf);
}
@font-face {
	font-family: DINPro;
	src: url(../fonts/DINPro-Medium-tr.ttf);
}
@font-face {
	font-family: DINPro-Light;
	src: url("../fonts/DINPro-Light-tr.ttf");
}
@font-face {
	font-family: Petita;
	src: url(../fonts/petitamedium.ttf);
}
@font-face {
	font-family: DINPro-Medium;
	font-weight: 100;
	src: url("../fonts/DINPro-Medium-tr.ttf")
}

@font-face{
	font-family: PetitaBold;
	font-weight: 100;
	src: url("../fonts/petitamedium.ttf");
}

@font-face {
	font-family: Lato;
	src: url("../fonts/Lato-Regular.ttf")
}

@font-face {
	font-family: ModernSans-Light;
	src: url("../fonts/ModernSans-Light.otf")
}
#preloader  {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	z-index: 999;
   height: 100%;
}

#status  {
	width: 100%;
	height: 40vh;
	position: absolute;
	top: 50%;
	background-image: url(../images/blackhole.gif);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: -20vh 0 0 0;
}
#title-text{
	z-index: 4;
    display: table;
    text-align: center;
}

#linea{
    letter-spacing: 2.3vw;
    color: #FFFFFF;
    position: fixed;
    display: table-cell;
    top: 23.6vh;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    font: calc(1.36*(.8em + 1vw + 1vh))/calc(16*0.03022*(.8em + 1vw + 1vh)) "Railway", sans-serif;
    padding-left: 9px;
}

#lineb{
    color: #FFFFFF;
    position: fixed;
    display: table-cell;
    top: 29.6vh;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    letter-spacing: 0.5vw;
    font: calc(115*0.03022*(.8em + 1vw + 1vh))/calc(29*0.03022*(.8em + 1vw + 1vh)) "Railway", sans-serif;
}
#linec{
	z-index: 1;
    position: fixed;
    display: table-cell;
    top: 37.6vh;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    font: calc(0.59*(.8em + 1vw + 1vh))/calc(96*0.03022*(.8em + 1vw + 1vh)) "Railway", sans-serif;
    color: #FFFFFF;
    letter-spacing: 1.16vw;
}
.myBtn {
	z-index: 3;
	position: fixed;
	outline: none;
	width: 239px;
	height: 75px;
	background: transparent linear-gradient(105deg, #0287D0E6 0%, #49AADCE8 52%, #48DBD8E8 100%) 0% 0% no-repeat padding-box;
	border: 1px solid #27D3FF;
	border-radius: 38px;
	background-size:439px 200px;
	background-position: -100px;

	
	color: #ffffff;
	cursor: pointer;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	display: block;
	transform-style: preserve-3d;
	transform: perspective(1000px);
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	transition: all 0.2s linear;
	align-items: center;
	margin-bottom: 5em; /*change this to specify distance from bottom*/
	bottom: 0;
}

.myBtn:hover {
	transition: 0.4s ease-in-out;
	background-position:-200px; 
	border: 2px solid #ffffff;
}

.btntext {
	transform: translateZ(20px);
	display: inline-block;
	vertical-align: bottom;
	color: white;
	font-size: 2em;
	font-weight: 100;
}

@keyframes animate {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.logo {
	height: 55px;
	width: 92px;
	border-collapse: collapse;
	padding: 0px;
	margin-top: 0em;
}

ul {
	position: fixed;
	right: 30px;
}
li {
	margin-left: 15px;
	padding-left: 5px;
}

/* Let's style the wrapper */
.wrapper {
	z-index: 6;
	position: absolute;
	bottom: 10em;
	right: 0;
	width: 50px;
}

/* Style the Un-order list by setting its list-style to none */
.wrapper ul {
	list-style: none;
}

/* Style the list items inside the UL list, by setting its width, height and line-height
  and float them to left
 */
.wrapper ul li {
	width: 100%;
	height: 75px;
	line-height: 75px;
	margin: 0 2px;
	text-align: center;
	cursor: pointer;
	float: left;
	transition: all 0.5s ease;
}

/* Style the icons by setting its color and margin-top value to 20px
to align it properly */
.wrapper ul li .fa {
	color: #d8e2dc;
	margin-top: 5px;
	transition: all 0.5s ease;
}

/* Now target the specific li classes for styling and use box-shadow effect to border and text-shadow effect
  to icons for glowing effect and use transition property for smooth transition effect. */
/*facebook*/
.wrapper ul li:hover.facebook {
	transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-facebook {
	color: #7298e9;
	text-shadow: 0 0 15px #7298e9;
	transition: all 0.5s ease;
}

/* instagram */
.wrapper ul li:hover.instagram {
	transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-instagram {
	color: #e952b9;
	text-shadow: 0 0 15px #e952b9;
	transition: all 0.5s ease;
}

/* media queries */

@media screen and (max-width: 600px) {
	.border2 {
		display: inline;
	}
	.border1 {
		display: none;
	}
	.myBtn {
		height: 50px;
		width: 130px;
	}
	.myBtn .btntext {
		color: white;
		font-size: 1.5em;
		font-weight: 100;
	}
	svg {
		top: 0;
	}
	.wrapper {
		width: 50px;
		margin-left: 3em;
		right: -10em;
		bottom: 7em;
	}
	.wrapper ul li {
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin-top: 1px;
	}
}

.navbar
{
	z-index: 4;
	position: fixed;
	top: 0px;
	left: 0px;

	width: 100%;
	height: calc((80/768) * ((100vw + 100vh) / 2));

	padding: 0px;
	margin: 0px;
}

.navbar .logo
{
	position: absolute;
	top: 0px;
	left: 0px;

	height: calc((40/768) * ((100vw + 100vh) / 2));
	width: calc((110/768) * ((100vw + 100vh) / 2));

	margin: calc((20/768) * ((100vw + 100vh) / 2));

	background-image: url('../images/logo-transparent.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.navbar .navbuttons
{
	position: absolute;
	top: calc((80/768) * ((100vw + 100vh) / 2));
	right: calc((40/768) * ((100vw + 100vh) / 2));

	height: calc((80/768) * ((100vw + 100vh) / 2));
}

.navbar .navbuttons .navbutton
{
	position: relative;
	top: 0px;
	left: 0px;

	width: calc((80/768) * ((100vw + 100vh) / 2));

	float: none;
	padding: calc((15/768) * ((100vw + 100vh) / 2)) 0px;

	text-align: right;
	font-family: 'Roboto', sans-serif;
	font-size: calc((12/768) * ((100vw + 100vh) / 2));
	color: #ffffff;
	cursor: pointer;

	opacity: 0;
	transform: translateX(calc((40/768) * ((100vw + 100vh) / 2)));
	transition: opacity 500ms ease-in-out 0s, transform 500ms ease-in-out 0s, all 500ms ease-in-out 0s;
	-webkit-transition: opacity 500ms ease-in-out 0s, transform 500ms ease-in-out 0s,  all 500ms ease-in-out 0s;
}
.navbar .navbuttons .navbutton:hover{
	color: #21BBFF;
}

.navbar .togglebutton
{
	position: absolute;
	top: 0px;
	right: 0px;

	width: calc((100/768) * ((100vw + 100vh) / 2));
	height: calc((80/768) * ((100vw + 100vh) / 2));
}

.navbar .togglebutton svg
{
	position: absolute;
	top: 0px;
	left: 0px;

	width: 100%;
	height: 100%;
	fill: #ffffff;
}

.navbar .togglebutton svg .line
{
	transition: width 500ms ease-in-out 0s, x 500ms ease-in-out 0s;
	-webkit-transition: width 500ms ease-in-out 0s, x 500ms ease-in-out 0s;
}

@media only screen and (min-width: 768px) {
	.navbar .navbuttons
	{
		position: absolute;
		top: 0px;
		right: calc((100/768) * ((100vw + 100vh) / 2));
	}
	.navbar .navbuttons .navbutton
	{
		float: left;
		padding: calc((34/768) * ((100vw + 100vh) / 2)) 0px;

		text-align: center
	}
}


	.circle{
		height: 30px; 
		width: 60px; 
		border-radius: 30px 30px 0 0;
		transform: rotate(90deg);
		background-image: linear-gradient(-90deg, #48DBD8E8, #0287D0E6);
		display: inline-block;
	}

@media (min-width: 501px){
	.section-2{
		scroll-snap-align: start;
		position: relative;
		width: 100%;
		top: 122vh;
		z-index: 5;
		margin: 0;
		padding: 0;
		background: transparent linear-gradient(180deg, #000000 0%, #191919 100%) 0% 0% no-repeat padding-box;
		overflow-y: hidden;
		height: auto;
	}
	
	.image-container-1{
		display: inline-block;
		width: 46%;
		height: auto;
		margin: 0 auto;
		padding: 0;
	}

	.image-container-1 img{
		display: block;
		width: 100%;
		height: auto;
		mix-blend-mode: lighten;
	}

	.text-container{
		position: relative;
		margin: 3vh auto;
		display: inline-block;
		width: 45%;
		height: auto;
	}

	.section-2 .text{
		display: inline;
		font: 3vw PetitaBold;
		font-weight: 100;
		color: #FFFFFF;
	}

	.section-2 p{
		color: #8B9AB5;
		font: 1.5vw ModernSans-Light;
		padding-left: 0.9rem;
		margin-top: 7vh;
		margin-bottom: 7vh;
		line-height: 1.75vw;
	}

	.myBtn2{
		z-index: 2;
		width: 14.641288433382138vw;
		padding:9px;
		height: auto;
		outline: none;
		background: transparent linear-gradient(105deg, #0287D0E6 0%, #49AADCE8 52%, #48DBD8E8 100%) 0% 0% no-repeat padding-box;
		border: 1px solid #27D3FF;
		border-radius: 38px;
		background-size:66.92073170731707vw 31.695721077654518vh;
		background-position: -100px;
		color: #ffffff;
		cursor: pointer;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		text-align: center;
		text-decoration: none;
		display: block;
		margin-left: 1vw;
		margin-right: 0;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
		transition: all 0.2s linear;
		align-items: center;
		margin-bottom: 0; /*change this to specify distance from bottom*/
		bottom: 0;
		display: inline-block;
		transform-style: preserve-3d;
		transform: perspective(1000px);
		
}

.myBtn2:hover {
	transition: 0.4s ease-in-out;
	background-position:-200px; 
	border: 2px solid #ffffff;
}

.btntext {
	display: inline-block;
	vertical-align: bottom;
	color: white;
	font-size: 1.581259150805271vw;
	font-weight: 200;
	transform: translateZ(20px);
}

.text-container .btn2{
	transform-style: preserve-3d;
	transform: perspective(1000px);
	background: none;
	outline: none;
	border: 2px solid #707070;
	margin-right: 0;
	display: inline-block
}

.btn2 .btntext{
	color: #707070;
	transform: translateZ(20px);
}

.section-2 .btn2:hover > .btntext{
	transition: 0.4s ease-in-out;
	color: white;
}
.section-2 .btn2:hover{
	border-color: #FFFFFF;
	transition: 0.4s ease-in-out;
}
}

@media only screen and (max-width: 501px){
	.section-2{
		position: relative;
		width: 100%;
		top: 100vh;
		z-index: 5;
		margin: 0;
		padding: 0;
		height: 25vh;
		background: transparent linear-gradient(180deg, #000000 0%, #191919 100%) 0% 0% no-repeat padding-box;
	}
	
	.image-container-1{
		display: inline-block;
		width: 46%;
		height: auto;
		margin: 0 auto;
		padding: 0;
	}
	.image-container-1 img{
		display: block;
		width: 100%;
		height: auto;
		mix-blend-mode: lighten;
	}
	.text-container{
		position: relative;
		margin: 3vh auto;
		display: inline-block;
		width: 45%;
		height: auto;
	}
	.section-2 .text{
		display: inline;
		font: 0.8rem PetitaBold;
		font-weight: 100;
		color: #FFFFFF;
	}
	.section-2 p{
		color: #8B9AB5;
		font: 8px ModernSans-Light;
		padding-left: 0.3rem;
		margin-top: 10px;
		margin-right: 0;
		padding-right: 0;
		line-height: 10px;
	}
	.section-2 .circle{
		height: 10px; 
		width: 20px; 
		border-radius: 10px 10px 0 0;
		transform: rotate(90deg);
		background-image: linear-gradient(-90deg, #48DBD8E8, #0287D0E6);
		display: inline-block;
	}
	.myBtn2{
		z-index: 2;
		width: 65px;
		padding:0;
		height: 25px;
		outline: none;
		background: transparent linear-gradient(105deg, #0287D0E6 0%, #49AADCE8 52%, #48DBD8E8 100%) 0% 0% no-repeat padding-box;
		border: 1px solid #27D3FF;
		border-radius: 38px;
		background-size:66.92073170731707vw 31.695721077654518vh;
		background-position: -100px;
		color: #ffffff;
		cursor: pointer;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		text-align: center;
		text-decoration: none;
		display: block;
		margin-left: 1vw;
		margin-right: 0;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
		transition: all 0.2s linear;
		align-items: center;
		margin-bottom: 0; /*change this to specify distance from bottom*/
		bottom: 0;
		display: inline-block;
		transform-style: preserve-3d;
		transform: perspective(1000px);
		
}

.myBtn2:hover {
	transition: 0.4s ease-in-out;
	background-position:-200px; 
	border: 2px solid #ffffff;
}
.btntext {
	display: inline-block;
	vertical-align: bottom;
	color: white;
	font-size: 8px;
	font-weight: 100;
	transform: translateZ(20px);
}
.text-container .btn2{
	background: none;
	outline: none;
	border: 2px solid #707070;
	margin:0;
	display: inline-block;
	height: 25px;
	width: 65px;
	transform-style: preserve-3d;
	transform: perspective(1000px);
}

.btn2 .btntext{
	color: #707070;
	transform: translateZ(20px);
}
.section-2 .btn2:hover > .btntext{
	transition: 0.4s ease-in-out;
	color: white;
}
.section-2 .btn2:hover{
	border-color: #FFFFFF;
	transition: 0.4s ease-in-out;
}

}

	.section-3{
		scroll-snap-align: start;
		z-index: 5;
		color: white;
		position: relative;
		width: 100%;
		height: auto;
		top:122vh;
		background: transparent linear-gradient(180deg, #191919 0%, #191919 10%, #00000000 52%, #00000000 100%) 0% 0% no-repeat padding-box;
		opacity: 1;
	}

	.section-3 img{
		position: relative;
    height: 1000px;
    width: auto;
		mix-blend-mode: hue;
		margin-left: 50%;
		transform: translateX(-50%);
  }
  
	.section-3 .content-3{
		position: absolute;
		top: 1vh;
	} 

	.section-3 h1{
		align-items: center;
		position: absolute;
		top: 28px;
    left: 138px;
		display: inline-block;
		font: 3rem PetitaBold;
		font-weight: 100;
		margin-left: 10px;
	}

	.section-3 .circle{
		position: absolute;
		top: 72px;
		left: 77px;
		display: inline-block;
	}

	.section-3 p{
		position: absolute;
		top: 150px;
		left: 90px;
		width: 611px;
		color: #8B9AB5;
		font: 1.25rem ModernSans-Light;
		margin-top: 5vh;
		line-height: 1.75rem;
	}
	.section-3 .btn2{
		position: absolute;
		outline: none;
		background: none;
		border: 2px solid #707070;
		left: 77px;
		top: 375px;
		margin-top: 10px;
		transform-style: preserve-3d;
    transform: perspective(1000px);
		height: 60px;
		width: 200px;
		padding: 9px;
	}
	.section-3 .btn2:hover{
		border-color: #FFFFFF;
		transition: 0.4s ease-in-out;
	}
	.section-3 .btn2:hover > .btntext{
	color: #FFFFFF;
	transition: 0.4s ease-in-out;
	}
	.section-3 .btn2 .btntext{
		transform: translateZ(20px);
		}

    @media (max-width: 970px){
      .section-3 p{
        left: 10vw;
        width: 60vw;
      }

      .section-3 .btn2{
        top: 420px;
        left:9vw;
      }

      .section-3 .circle{
        left:8.5vw;
      }

      .section-3 h1{
        left: 15vw;
      }
    }

    @media (max-width: 700px){
      .section-3 p{
        left: 5vw;
      }

      .section-3 .btn2{
        top: 500px;
        left:3vw;
      }

      .section-3 .circle{
        left:3vw;
      }

      .section-3 h1{
        left:11vw;
      }
    }

#ham{
	position: fixed;
    z-index: 6;
    display: block;
    right: 0;
    top: 47vh;
    width: 4vw;
    height: 6vh;
    opacity: 1;
}

#ham .rectangle{
	z-index: 6;
	margin-top: 1vh;
	left: 1865px;
	width: 3vw;
	float: right;
	height: .3vh;
	background: #FFFFFF 0% 0% no-repeat padding-box;
	opacity: 1;
	transition: all 0.5s ease;
}
#ham .rectanglebig{
    width: 4vw;
}

.section-4{
	margin: 0;
	padding: 0;
	z-index: 10;
	position: relative;
	top:131vh;
	width: 100%;
	height: auto;
	}

.section-4 .circle{
	position: relative;
	top:0;
	transform: rotate(180deg);
	background-image: linear-gradient( #48DBD8E8, #0287D0E6);
}

.section-4 h1{
	color: white;
	font: 3rem PetitaBold;
	font-weight: 200;
	margin-top:2vh;
}

.section-4 p{
	position: relative;
	color: #8B9AB5;
	text-align: center;
	font: 1.25rem ModernSans-Light;
	width: 45vw;
	margin-top: 4vh;
	line-height: 1.75rem;
}

.cards{
	margin-top: 15vh;
	height: 12.5vw;
  	display: grid;
 	grid-template-columns: 13.5vw 13.5vw 13.5vw 13.5vw;
	grid-gap: 0 10vw;
	resize: both;
}

.cell img{
	height: 12.5vw;
	width: 13.5vw;
	padding: 0;
	margin: 0;
}

.celltitle{
	position: absolute;
	font-weight: 100;
	font-family: 'Lato', sans-serif;
	letter-spacing: 1.25px;
	text-align: center;
	color: white;
	z-index: 20;
}

.section-4 .btn2{
	transform-style: preserve-3d;
	transform: perspective(1000px);
	background: none;
	outline: none;
	border: 2px solid #707070;
	margin-top: 10vh;
  display: inline-block;
	height: 60px;
  width: 200px;
}


.btn2 .btntext{
  font-size: x-large;
	color: #707070;
	transform: translateZ(20px);
}

.section-4 .btn2:hover > .btntext{
	transition: 0.4s ease-in-out;
	color: white;
}
.section-4 .btn2:hover{
	border-color: #FFFFFF;
	transition: 0.4s ease-in-out;
}


.section-5{
	z-index: 5;
    background: transparent linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(9, 9, 9, 0.07) 41%, rgba(10, 10, 10, 0.05) 74%, rgba(0, 0, 0, 1) 104%) 0% 0% no-repeat padding-box;
    position: relative;
    height: auto;
    width: 100%;
    top: 135vh;
}


.section-5 img{
	position: relative;
  top: 0;
	width: auto;
  height:  1675.35px;
	mix-blend-mode: color;
}

.section-5 .circle{
	position: absolute;
	top: 132px;
	left: 80px;
	display: inline-block;
}

.section-5 h1{
		align-items: center;
		position: absolute;
		top: 87px;
    left: 135px;
		display: inline-block;
		font:3rem PetitaBold;
		font-weight: 100;
		margin-left: 10px;
		z-index: 10;
		color: white;
	}

.section-5 .text-0{
	z-index: 20;
	position: absolute;
	top:215.1275px;
	left: 93px;
	color: #8B9AB5;
	font: 1.25rem ModernSans-Light;
	margin-top: 0;
	line-height: 1.75rem;
	width: 650px;
	font-weight: 100;
}	

.section-5 .number-1{
	z-index: 20;
	color:rgba(62, 131, 136, 1);
	font: 147px DINPro-Light;
	letter-spacing: 0;
	position: absolute;
	left: 85px;
	top: 292.7675px;
}

.section-5 .heading-1{
	z-index: 20;
	color: rgba(255, 255, 255, 1);
	font:1.75rem DINPro-Light;
	font-weight: 100;
	position: absolute;
	top:  451.0475px;
	left: 205px;
	letter-spacing: 0.4px;
	margin-left: 35px;
}

.section-5 .text-1{
	color: rgba(105, 118, 138, 1);
	z-index: 20;
	position: absolute;
	top: 542.01px;
	left: 205px;
	font: 1.25rem DINPro-Medium;
	margin-top: 0;
	line-height: 1.75rem;
	width: 611px;
	font-weight: 100;
	margin-left: 35px;
}

.section-5 .number-2{
	z-index: 20;
	color:rgba(62, 131, 136, 1);
	font: 147px DINPro-Light;
	letter-spacing: 0;
	position: absolute;
	right: 720px;
	top: 519.2175px;
}

.section-5 .heading-2{
	z-index: 20;
	color: rgba(255, 255, 255, 1);
	font-weight: 100;
	position: absolute;
	font:1.75rem DINPro-Light;
	top: 678.3px;
	right: 570px;
	letter-spacing: 0.4px;
	margin-left: 35px;
}

.section-5 .text-2{
	color: rgba(105, 118, 138, 1);
	z-index: 20;
	position: absolute;
	top: 769.595px;
	right: 85px;
	font: 1.25rem DINPro-Medium;
	margin-top: 0;
	line-height: 1.75rem;
	width: 611px;
	font-weight: 100;
	margin-left: 35px;
}

.section-5 .number-3{
	z-index: 20;
	color:rgba(62, 131, 136, 1);
	font: 147px DINPro-Light;
	letter-spacing: 0px;
	position: absolute;
	left: 85px;
	top: 745.6675px;
}

.section-5 .heading-3{
	z-index: 20;
	color: rgba(255, 255, 255, 1);
	font:1.75rem DINPro-Light;
	font-weight: 100;
	position: absolute;
	top: 905.5525px;
	left: 220px;
	letter-spacing: 0.4px;
	margin-left: 35px;
}

.section-5 .text-3{
	color: rgba(105, 118, 138, 1);
	z-index: 20;
	position: absolute;
	top: 997.18px;
	font: 1.25rem DINPro-Medium;
	margin-top: 0;
	line-height: 1.75rem;
	font-weight: 100;
	width: 611px;
	left: 220px;
	letter-spacing: 0.4px;
	margin-left: 35px;
}

.section-5 .number-4{
	z-index: 20;
	color:rgba(62, 131, 136, 1);
	font: 147px DINPro-Light;
	letter-spacing: 2.03px;
	position: absolute;
	right: 720px;
	top: 972.1175px;
}

.section-5 .heading-4{
	z-index: 20;
	color: rgba(255, 255, 255, 1);
	font:1.75rem DINPro-Light;
	font-weight: 100;
	position: absolute;
	top: 1132.805px;
	right: 430px;
	letter-spacing: 0.4px;
	margin-left: 35px;
}

.section-5 .text-4{
	color: rgba(105, 118, 138, 1);
	z-index: 20;
	position: absolute;
	top: 1224.765px;
	right: 85px;
	font: 1.25rem DINPro-Medium;
	margin-top: 0;
	line-height: 1.75rem;
	font-weight: 100;
	width: 611px;
	margin-left: 35px;
}

.section-5 .number-5{
	z-index: 20;
	color:rgba(62, 131, 136, 1);
	font: 147px DINPro-Light;
	letter-spacing: 2.03px;
	position: absolute;
	left: 85px;
	top:  1198.5675px;
}

.section-5 .heading-5{
	z-index: 20;
	color: rgba(255, 255, 255, 1);
	font:1.75rem DINPro-Light;
	font-weight: 100;
	position: absolute;
	top: 1360.0575px;
	left: 230px;
	letter-spacing: 0.4px;
	margin-left: 35px;
}

.section-5 .text-5{
	color: rgba(105, 118, 138, 1);
	z-index: 20;
	position: absolute;
	top: 1447px;
	left: 230px;
	font: 1.25rem DINPro-Medium;
	margin-top: 0;
	line-height: 1.75rem;
	font-weight: 100;
	width:611px;
	margin-left: 35px;
}

@media (max-width: 970px){
	.section-5 .text-1, .section-5 .text-3,
	.section-5 .text-5, .section-5 .heading-1,
	.section-5 .heading-3, .section-5 .heading-5,
	.section-5 .text-2, .section-5 .text-4, 
	.section-5 .heading-2, .section-5 .heading-4{
		right: unset;
		left: 25vw;
	}

	.section-5 .text-1,	.section-5 .text-2,
	.section-5 .text-3,	.section-5 .text-4, 
	.section-5 .text-5{
		width: 55vw;
	}

	.section-5 .number-2, .section-5 .number-4,
	.section-5 .number-1, .section-5 .number-3,
	.section-5 .number-5{
		right: unset;
		left: 9vw;
	}

	.section-5 .text-0{
		width: 75vw;
		left: 4vw;
	}

	.section-5 .circle{
		left: 2vw;
	}

	.section-5 h1{
		left:60px;
	}
}

@media (max-width: 700px){
	.section-5 .number-2, .section-5 .number-4,
	.section-5 .number-1, .section-5 .number-3,
	.section-5 .number-5{
		left: 2vw;
	}
}

.section-6{
		display: flex;
		justify-content: center;
		z-index: 5;
    position: relative;
    height: auto;
    width: 100%;
		top: 124vh;
		background: transparent linear-gradient(180deg, #000010 0%, #09090912 15%, #00000000 100%) 0% 0% no-repeat padding-box;
}

.section-6 .drop{
	position: absolute;
	top: -1px;
	background-color: #000;
	height: 1px;
	width: 100%;
}

.section-6 img{
	position: relative;
  top: 0;
	width: auto;
	height:  555.06px;
	mix-blend-mode: color;
}

.section-6 .circle{
	position: absolute;
	top:-7px;
	transform: rotate(180deg);
	background-image: linear-gradient( #48DBD8E8, #0287D0E6);
	z-index: 50;
}

.section-6 h1{
	position: absolute;
	top:6.45px;
	width: 100%;
	text-align: center;
	font:3rem PetitaBold;
	color: white;
}

.section-6 p{
	position: absolute;
	width: 650px;
	text-align: center;
	color: #8B9AB5;
	font: 1.25rem ModernSans-Light;
	font-weight: 100;
	top: 109.65px;
	letter-spacing: 0px;
	line-height: 1.75rem;
}

@media (max-width: 670px) {
	.section-6 p{
		width: 480px;
	}
}

.section-6 .btn2{
		position: absolute;
		outline: none;
		background: none;
		border: 2px solid #707070;
		bottom: 60vh;
		height: 60px;
		top: 315.36px;
		margin-top: 10px;
		transform-style: preserve-3d;
		transform: perspective(1000px);
		width: 200px;
		padding: 9px;
	}
	.section-6 .btn2:hover{
		border-color: #FFFFFF;
		transition: 0.4s ease-in-out;
	}
	.section-6 .btn2:hover > .btntext{
	color: #FFFFFF;
	transition: 0.4s ease-in-out;
	}
	.section-6 .btn2 .btntext{
		font-size: x-large;
		transform: translateZ(20px);
	}

	footer {
		display: flex;
		justify-content: center;
		position: relative;
		top: 125vh;
		height: auto;
	}

	.footer-heading {
		position: absolute;
		top: 50px;
		width: 100%;
		background-color: white;
		height: 3px;
	}

	.footer-heading-text {
		position: absolute;
		top: 26px;
		width: 25%;
		height: 30px;
		font: 1.4rem DINPro-Medium;
		text-transform: uppercase;
		color: white;
		text-align: center;
		background-color: black;
	}

	.bits-down {
		font-family: DINPro-Light;
		font-size: 1.3rem;
	}

	.footer-list {
		position: absolute;
		top: 70px;
		display: flex;
		width: 80%;
		justify-content: space-between;
		color: white;
		font: 1.2rem DINPro-Light;
		text-decoration: none;
		list-style: none;
		line-height: 50px;
		font-family: 100;
		letter-spacing: 0.9px;
	}
	.footer-list li{
		cursor: pointer;
		transition: opacity 500ms ease-in-out 0s, transform 500ms ease-in-out 0s, all 500ms ease-in-out 0s;
	}
	.footer-list li:hover{
		color: #21BBFF;
	}

	.newsletter {
		display: flex;
		position: absolute;
		top: 250px;
		font: 0.9rem DINPro-Medium;
		color: white;
	}

	.subscribe-form input {
		height: 2.7rem;
	}

	.subscribe-form input[type="submit"]{
		z-index: 2;
		width: 150px;
		padding:0;
		height: 50px;
		outline: none;
		background: transparent linear-gradient(105deg, #0287D0E6 0%, #49AADCE8 52%, #48DBD8E8 100%) 0% 0% no-repeat padding-box;
		border: 1px solid #27D3FF;
		border-radius: 38px;
		background-size:66.92073170731707vw 31.695721077654518vh;
		background-position: -100px;
		color: #ffffff;
		cursor: pointer;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		text-align: center;
		text-decoration: none;
		display: block;
		margin-left: 1vw;
		margin-right: 0;
		font-size: 0.95rem;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
		transition: all 0.2s linear;
		align-items: center;
		margin-bottom: 0; /*change this to specify distance from bottom*/
		bottom: 0;
		display: inline-block;
		transform-style: preserve-3d;
		transform: perspective(1000px);
		transform: translateX(-70px);
		opacity: 1;
		z-index: 10;
	}
	
	.subscribe-form input[type="text"]{
	transform-style: preserve-3d;
	transform: perspective(1000px);
	background: none;
	outline: none;
	border: none;
	background-color:#202021;
  display: inline-block;
	height: 50px;
	width: 200px;
	color: #707070;
	transform: translateZ(20px);
	border-radius: 38px;
	margin-top: -10px;
	margin-left: 20px;
	font-size: 0.9rem;
	padding-left: 30px;
}

	.copyright {
		position: absolute;
		top: 350px;
		color: #515151;
		font: 1.25rem DINPro-Medium;
		margin-bottom: 30px;
	}


/*basically (width of img/height of image)*height specified in vh */	
@media (min-width: 1327.13px){
	.section-6 img{
		width: 100vw;
		height: auto;
	}
}
@media (min-width: 1437.677162px){
	.section-5 img{
		width: 100vw;
		height: auto;
	}
}
@media (min-width: 1778px){
	.section-3 img{
		width: 100vw;
		height: auto;
	}
}

.centerer{
	position: relative;
	display: flex;
	justify-content: center;
}

#social-footer{

	position: absolute;
	top: 140px;
	display: grid;
  	justify-content: center;
  	align-content: center;

  	gap: 2.5vw;
  	grid-auto-flow: column;
}
@media (max-width: 600px){
	#social-footer{
		top: 160px;
	}
}
@media (max-width: 500px){
	#social-footer{
		top: 200px;
	}
}

/* Style the icons by setting its color and margin-top value to 20px
to align it properly */
#social-footer .fa {
	color: #d8e2dc;
	margin-top: 5px;
	transition: all 0.5s ease;
}

/* Now target the specific li classes for styling and use box-shadow effect to border and text-shadow effect
  to icons for glowing effect and use transition property for smooth transition effect. */
/*facebook*/
#social-footer .facebook-footer:hover.facebook {
	transition: all 0.5s ease;
}

#social-footer .facebook-footer:hover .fa-facebook {
	color: #7298e9;
	text-shadow: 0 0 15px #7298e9;
	transition: all 0.5s ease;
}

/* instagram */
#social-footer .instagram-footer:hover.instagram {
	transition: all 0.5s ease;
}

#social-footer .instagram-footer:hover .fa-instagram {
	color: #e952b9;
	text-shadow: 0 0 15px #e952b9;
	transition: all 0.5s ease;
}
/*linkedin*/
#social-footer .linkedin-footer:hover.linkedin {
	transition: all 0.5s ease;
}

#social-footer .linkedin-footer:hover .fa-linkedin {
	color: #0e76a8;
	text-shadow: 0 0 15px #0e76a8;
	transition: all 0.5s ease;
}

/* github */
#social-footer .github-footer:hover.github {
	transition: all 0.5s ease;
}

#social-footer .github-footer:hover .fa-github {
	color: #6cc644;
	text-shadow: 0 0 15px #6cc644;
	transition: all 0.5s ease;
}