/******/
/*** SECTIONS ***/
/******/

/* INTRO VIDEO */

.height-100 {
	height: 100vh;
}

#intro-mask-zoom {
  	height: 100vh;
  	position: relative;
}

.frame-overlay {
  	position: absolute;
  	top: 0;
  	left: 0;
  	z-index: 3;
  	width: 100%;
  	height: 100%;
  	transform: scale(3);
  	pointer-events: none;
}

.frame-border {
  	width: 100%;
  	height: 100%;
  	border: 2rem solid white;
  	border-radius: 3.5rem;
  	box-sizing: border-box;
}

.border-2 {
	border-radius: 0rem;
}

.video-background-layer {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	z-index: 1;
}

.video-background-layer video {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
}

#intro-mask-zoom .content-layer {
  	position: relative;
	z-index: 2;
}

.intro-video .content-container {
	gap: 1rem;
}

.intro-video p {
	font-size: var(--text-2xl);
}

/* SERVICES ACCORDION */

.services-accordion .accordion-panel p {
  color: var(--color-white);
  -moz-transform: translateX(1.875rem);
  -webkit-transform: translateX(1.875rem);
  -o-transform: translateX(1.875rem);
  -ms-transform: translateX(1.875rem);
  transform: translateX(1.875rem);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.services-accordion #wrapper .accordion-panel:nth-child(1) {
  z-index: 10;
  background-color: rgba(4, 8, 37, 1);
}

.services-accordion #wrapper .accordion-panel:nth-child(2) {
  z-index: 20;
  background-color: rgba(4, 8, 37, .95);
}

.services-accordion #wrapper .accordion-panel:nth-child(3) {
  z-index: 30;
  background-color: rgba(4, 8, 37, .9);
}

.services-accordion #wrapper .accordion-panel:nth-child(4) {
  background-color: rgba(4, 8, 37, .85);
  z-index: 40;
}

.services-accordion #wrapper .accordion-panel:nth-child(5) {
  background-color: rgba(4, 8, 37, .8);
  z-index: 50;
}

/* IMAGE SCROLLER */

.logo-overlay, .logo-overlay-right {
	z-index: 4;
	background-image: linear-gradient(90deg,var(--color-white),transparent);
	width: 7rem;
	height: 100%;
	position: absolute;
	inset: 0% auto 0% 0%;
}

.logo-overlay-right {
	background-image: linear-gradient(270deg,var(--color-white),transparent);
	inset: 0% 0% 0% auto;
}

/* CARDS */

.cards .container {
  position: relative;
  max-width: 80rem;
  gap: 1.5rem;
  margin: 3.125rem auto;
  align-items: center;
}

.cards .card {
  margin: 0;
  padding-left: 4.5rem;
  padding-right: 4.5rem;
  box-sizing: border-box;
  border-radius: var(--radius-3xl);
  position: sticky;
  color: var(--color-white); 
}

.cards .card-0 {
  top: 3rem;
  background-color: rgba(4, 8, 37, 1);
}

.cards .card-1 {
  top: 6rem;
  background-color: rgba(4, 8, 37, .95);
}

.cards .card-2 {
  top: 9rem;
  background-color: rgba(4, 8, 37, .9);
}

.cards .card-3 {
  top: 12rem;
  background-color: rgba(4, 8, 37, .85);
}

.cards a.button {
	background-color: transparent!important;
	color: var(--color-white)!important;
	border: solid .0625rem var(--color-white)!important;
}

.rotating-wrapper {
	padding: 1rem 0;
}

.rotating-wrapper p {
	height: 3.125rem;
	float: left;
	margin-right: 0.3em;
}

.rotating-wrapper span {
	float: left;
	overflow: hidden;
	position: relative;
	height: 6.125rem;
	top: .125rem;
}

.rotating-wrapper .rotating-inner {
	display: inline-block;
	position: relative;
	white-space: nowrap;
	top: 0;
	left: 0;

/*animation*/
-webkit-animation:move 6s;
   -moz-animation:move 6s;
    -ms-animation:move 6s;
     -o-animation:move 6s;
        animation:move 6s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
     -o-animation-iteration-count:infinite;
        animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:2s;
   -moz-animation-delay:2s;
    -ms-animation-delay:2s;
     -o-animation-delay:2s;
        animation-delay:2s;
}

.rotating-wrapper .rotating-inner h2 {
	margin-top: -1.625rem;
}

@keyframes move {
	0%  { top: 0; }
	33.3333% { top: -8.3125rem; }
	66.6666% { top: -16.625rem; }
	/* 75% { top: -25.875rem; } */
}

@-webkit-keyframes move {
	0%  { top: 0; }
	33.3333% { top: -8.3125rem; }
	66.6666% { top: -16.625rem; }
	/* 75% { top: -25.875rem; } */
}

@-moz-keyframes move {
	0%  { top: 0; }
	33.3333% { top: -8.3125rem; }
	66.6666% { top: -16.625rem; }
	/* 75% { top: -25.875rem; } */
}

@-o-keyframes move {
	0%  { top: 0; }
	33.3333% { top: -8.3125rem; }
	66.6666% { top: -16.625rem; }
	/* 75% { top: -25.875rem; } */
}

@keyframes move {
	0%  { top: 0; }
	33.3333% { top: -8.3125rem; }
	66.6666% { top: -16.625rem; }
	/* 75% { top: -25.875rem; } */
}

.video-container {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 0;
	margin-bottom: 0;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* FOOTER */

.footer-menu ul, .socials-menu ul {
	display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
  	align-items: flex-start;
  	justify-content: flex-start;
	flex-wrap: wrap;
}

.footer-menu li, .socials-menu li {
	width: calc(50% - .75rem);
	margin-bottom: .75rem;
}

.socials-menu li {
	width: calc(100% - .75rem);
	margin-bottom: .75rem;
}

.footer-watermark img {
	opacity: .05;
	margin-bottom: -7.5rem;
}

/* SECTIONS */

@media screen and (min-width: 64.0625rem) and (max-width: 100rem) {
	
	.intro-video .content-container {
		padding-top: 5rem;
	}
	
	.rotating-wrapper {
		padding: .75rem 0;
	}
	
	.rotating-wrapper h1 {
		max-width: 80%;
	}
	
	.rotating-wrapper p {
		height: 2.4375rem;
		float: left;
		margin-right: 0.3em;
	}
	
	.rotating-wrapper span {
		float: left;
		overflow: hidden;
		position: relative;
		height: 4.59375rem;
		top: .1rem;
	}

	.rotating-wrapper .rotating-inner {
		display: inline-block;
		position: relative;
		white-space: nowrap;
		top: 0;
		left: 0;

	/*animation*/
		-webkit-animation:move 6s;
   		-moz-animation:move 6s;
    	-ms-animation:move 6s;
     	-o-animation:move 6s;
        animation:move 6s;
	/*animation-iteration-count*/
		-webkit-animation-iteration-count:infinite;
   		-moz-animation-iteration-count:infinite;
    	-ms-animation-iteration-count:infinite;
     	-o-animation-iteration-count:infinite;
        animation-iteration-count:infinite;
	/*animation-delay*/
		-webkit-animation-delay:2s;
   		-moz-animation-delay:2s;
    	-ms-animation-delay:2s;
     	-o-animation-delay:2s;
        animation-delay:2s;
	}

	.rotating-wrapper .rotating-inner h2 {
		margin-top: -1.1875rem;
	}

	@keyframes move {
		0%  { top: 0; }
		33.3333% { top: -6.234375rem; }
		66.6666% { top: -12.46875rem; }
		/* 75% { top: -18.703125rem; } */
	}

	@-webkit-keyframes move {
		0%  { top: 0; }
		33.3333% { top: -6.234375rem; }
		66.6666% { top: -12.46875rem; }
		/* 75% { top: -18.703125rem; } */
	}

	@-moz-keyframes move {
		0%  { top: 0; }
		33.3333% { top: -6.234375rem; }
		66.6666% { top: -12.46875rem; }
		/* 75% { top: -18.703125rem; } */
	}

	@-o-keyframes move {
		0%  { top: 0; }
		33.3333% { top: -6.234375rem; }
		66.6666% { top: -12.46875rem; }
		/* 75% { top: -18.703125rem; } */
	}

	@keyframes move {
		0%  { top: 0; }
		33.3333% { top: -6.234375rem; }
		66.6666% { top: -12.46875rem; }
		/* 75% { top: -18.703125rem; } */
	}
	
	.cards .card {
		padding-left: 6rem;
		padding-right: 6rem;
	}
	
}

@media screen and (min-width: 48rem) {
	
	.services-accordion .accordion-panel p {
  		opacity: 0;
  		margin: 0 3rem 3rem 3rem;
  		flex-basis: 100%;
	}
	
	.services-accordion .accordion-panel p.h2 {
		margin-left: 3rem;
		margin-bottom: 1rem;
	}

	.services-accordion .accordion-panel p.description {
		height: 10rem;
	}

	.services-accordion #wrapper {
		display: flex;
		flex-flow: row nowrap;
		height: 40rem;
		min-height: 40rem;
		align-items: stretch;
	}
	
	.services-accordion .accordion-panel {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-flow: row wrap;
		transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1);
		align-items: flex-end;
		align-content: flex-end;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	
	.services-accordion .accordion-panel:hover {
		background-position: left center;
		flex-grow: 2.8;
	}
	
	.services-accordion .accordion-panel:hover > p {
		transition-delay: 0.8s;
		opacity: 1;
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-o-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
	
	.services-accordion .accordion-panel:hover > p.h2 {
		transition-delay: 0.4s!important;
	}
	
	.cards .card {
		min-height: 25rem;
	}
}

@media screen and (max-width: 47.9375rem) {
	
	.services-accordion .accordion-panel p {
		margin: 0;
	}
	
	.frame-border {
		border-width: 1rem;
		border-radius: 2rem;
	}

	.border-2 {
		border-radius: 0rem;
	}
	
	.cards .card {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

}

@media screen and (max-width: 37.5rem) {
	
  .services-accordion #wrapper {
    display: flex;
    flex-flow: column wrap;
    height: auto;
    min-height: 100vh;
  }
  
  .services-accordion .accordion-panel {
    min-height: 25rem;
    background-position: center top;
  }
	
}