/*
 * #id    = Use for one tag only on the page.
 * .class = Use for multiple tags on the page.
 */


/* Reset styles */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}


/* CSS variables */

:root {
	--color-dark: #0A0A09;
	--color-gray-1: #F2F2F2;
	--color-gray-2: #C4C4C4;
	--color-orange: #EF8A12;

	--color-border: #C4C4C4;

	--transition-duration: .2s;

	--z-index-header: 10;
	--z-index-footer: 10;
}


/* Global styles */

	html,
	body {
	  height: 100%;
	}

	body {
	  margin: 0;
	  font-family: "Switzer", sans-serif;
	  background-color: var(--color-gray-1);
	}

	.root {
	  position: relative;
	  height: 100%;
	}

	@media (min-width: 768px) {
	  .root {
	    display: contents;
	    overflow-x: hidden;
	  }
	}


	.root > * {
	  flex-shrink: 0;
	}

	a {
	  font-weight: 500;
	  font-size: 16px;
	  color: var(--color-gray-2);
	  opacity: 1;
	}

  a:hover{
    color: var(--color-gray-1);
  }




	/* Header (fixed) */

	.header {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding-left: 2rem;
	  border-bottom: 0.5px solid var(--color-border);
	  z-index: var(--z-index-header);
	  background-color: var(--color-dark);
	}

	.logo {
	  filter: drop-shadow(0 2px 2px rgb(10 10 9 / 0.10));
	  transition: opacity var(--transition-duration);
	}

	.logo {
	  display: block;
	  height: 30px;
	}

	.logo:hover {
	  opacity: 0.5;
	}

	.nav {
	  display: flex;
	  align-items: center;
	}

	.header-item {
	  padding: 0rem !important;
	  border-right: 0.5px solid var(--color-border);
	}

	.header-item-2{
	  padding: 1.5rem !important;
	  border-left: 0.5px solid var(--color-border);
	}

	.header-item-3{
	  padding: 1.5rem !important;
	  border-left: 0.5px solid var(--color-border);
	}

  .header-item-4{
    padding: 0rem !important;
    border-left: 0.5px solid var(--color-border);
  }

	.header-item:first-child {
	  padding-left: 0;
	}

	.header-item:last-child {
	  padding-right: 0;
	}

	.header-item:not(:last-child) {
	  padding-right: 1rem;
	  border-right: 0.5px solid var(--color-border);
	}

	.header-link {
	  transition: opacity var(--transition-duration);
	}

	.nav-link {
	  text-transform: uppercase;
	}



	@media (min-width: 768px) {
	  .header {
	    padding-left: 4rem;
			width: 50vw;
	    background-color: transparent;
	  }

	  .header-item {
	    padding: 0rem !important;
	    border-right: 0.5px solid var(--color-border);
	  }

	  .header-item-2{
	    padding: 3rem !important;
	    border-left: 0.5px solid var(--color-border);
	  }
    .header-item-2:hover{
      background-color: var(--color-orange);
    }

	  .header-item-3{
	    padding: 3rem !important;
	    border-right: 0.5px solid var(--color-border);
	    border-left: 0.5px solid var(--color-border);
	  }
    .header-item-3:hover{
      background-color: var(--color-orange);
    }

    .header-item-4{
      padding: 0rem !important;
      border-left: 0.5px solid var(--color-border);
    }
	}

	@media (min-width: 1280px) {
	  .header {
			padding-left: 4rem;
	  }
	}











#space{
	padding-right: 2vw;
}

.leftContent {
  height: auto;
  width: 100vw;
  position:relative;
  float: none;
}
.leftCCon {
  padding: 10.5vh 16vw 10.5vh 16vw;
}
.rightContent {
  width: 100vw;
  float: none;
}
.video-app{
  height: 80vh;
}
.video-website{
  width: 100vw;
}
@media (min-width: 768px) {
  .leftContent {
    height: 100vh;
    width: 50vw;
    position: fixed;
    float:left;
    background-color: var(--color-gray-1);
  }
  .leftCCon {
    padding: 10.5vh 0 0 10vw;
  }
  .rightContent {
    float: right;
    width: 50vw;
  }
  .video-app{
    height: 80vh;
    margin:0 13vw 0 13vw;
  }
  .video-website{
    width: 50vw;
  }
}


.text_container{
  width: 68vw;
}
#text_container{
  width: 68vw;
}

@media (min-width: 768px) {
  .text_container{
  	display:flex;
    position:relative;
    align-items: flex-start;
    justify-content: center;
  	width: 28vw;
  }
  #text_container{
  	width: 28vw;
  	display: block;
  }
}


.title{
		margin: 4vh 0 6vh 0;
		font-weight: 500;
		font-size: 6vh;
		color: var(--color-dark);
		text-align: right;
		justify-content: flex;
	}
.heading{
		margin-bottom: 1.5vh;
		font-weight: 600;
		font-size: 18px;
		color: var(--color-gray-2);
		text-align: left;
		justify-content: flex;
		text-transform: uppercase;
	}
.description{
		margin-bottom: 5vh;
		font-weight: 200;
		font-size: 16px;
		color: var(--color-dark-1);
		text-align: left;
		justify-content: flex;
	}

@media (min-width: 768px) {
  .title{
      margin: 8vh 0 5vh 0;
      font-weight: 500;
      font-size: 6vh;
      color: var(--color-dark);
      text-align: right;
      justify-content: flex;
    }
  .heading{
      margin-bottom: 1.5vh;
      font-weight: 600;
      font-size: 18px;
      color: var(--color-gray-2);
      text-align: left;
      justify-content: flex;
      text-transform: uppercase;
    }
  .description{
    	margin-bottom: 5vh;
    	font-weight: 200;
    	font-size: 16px;
    	color: var(--color-dark-1);
    	text-align: left;
    	justify-content: flex;
    }
}



/* Bar animation*/
.bar {
	display: inline-flex;
  position: relative;
}
.bar::after {
	content: '';
	position: absolute;
	top: 5%;
	width: 100%;
	height: 100%;
	background: currentColor;
	backface-visibility: visible;
	animation: bar-after 1.7s cubic-bezier(0.5,0,.15,1) forwards;
	transform: scaleX(1);
	animation-delay: 0.5s;
	transform-origin: bottom right;
}
@keyframes bar-after{
    100% {transform: scaleX(0%)}
    0% {transform: scaleX(100%)}
}
/* FIN - Bar animation*/

#text{
	padding: 0;
	display: block;
	justify-content: center;
}


/* next project slide animation */
.animated-button {
	font-weight: 600;
	font-size: 20px;
  color: var(--color-orange);
  text-decoration: none;
  cursor: pointer;
	display: block;
  padding: 18px 20px;
	position: relative;
  width: 25vw;
  text-align: right;
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
.animated-button::before{
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    background: var(--color-orange);
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
  }
.animated-button:hover{
    color: var(--color-gray-1);
    background-color: transparent;
		opacity:1;
	}
.animated-button:hover::before {
    left: 0%;
    left: auto;
    width: 100%;
	}

.animated-button-2 {
		font-weight: 600;
		font-size: 20px;
	  color: var(--color-orange);
	  text-decoration: none;
	  cursor: pointer;
		display: block;
	  padding: 18px 20px;
		position: relative;
	  width: 25vw;
	  text-align: left;
		transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
	}
.animated-button-2::before{
	 display: block;
	 position: absolute;
	 top: 0px;
	 left: 0px;
	 height: 100%;
	 width: 0px;
	 z-index: -1;
	 content: '';
	 background: var(--color-orange);
	 transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
	}
.animated-button-2:hover{
	 color: var(--color-gray-1);
	 background-color: transparent;
	 opacity:1;
	}
.animated-button-2:hover::before {
	 right: 0%;
	 right: auto;
	 width: 100%;
	}

@media (max-width: 768px) {
  .animated-button-2 {
    width: 50vw;
    background-color: var(--color-dark);
  }
  .animated-button {
    width: 50vw;
    background-color: var(--color-dark);
  }
}



.heightImg_regular{
  width:100vw;
  justify-content: flex-end;
}
.row_content{
  padding: 0 25vw 0 0;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
}
.separator{
  margin-top: 5rem;
}
@media (min-width: 768px) {
	.heightImg_regular{
		width:50vw;
		justify-content: flex-end;
	}
  .row_content{
    padding: 0 25vw 0 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 50vw;
  }
  .separator{
    margin-top: 3rem;
  }
}






  .footer {
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 0.5px solid var(--color-border);
    z-index: var(--z-index-footer);
  }
  .footer .header-item {
    padding: 1rem;
  }
@media (min-width: 768px) {
  .footer {
    width: 50vw;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 0.5px solid var(--color-border);
    z-index: var(--z-index-footer);
  }
  .footer .header-item {
    padding: 1rem;
  }
}