@font-face {font-family: 'proximanova-regular'; src: url('../../assets/fonts/proximanova_regular.ttf');}
@font-face {font-family: 'proximanova-black'; src: url('../../assets/fonts/proximanova_black.ttf');}
@font-face {font-family: 'proximanova-light'; src: url('../../assets/fonts/proximanova_light.otf');}

body {font-family: 'proximanova-regular'}
header {background-color: rgb(0, 0, 0, 0.9); position:relative; transition: background-color 0.3s ease; width: 100%;} 
header.scrolled {background-color: rgb(0, 0, 0, 0.8)}
footer {background-color: #060606;}
h3 {color:#01F0F3; font-family: proximanova-light}
h4 {font-size: 1.5rem}

#carouselBranding {height: 234px}
#carouselTrack {height: 267px}

.about-home {margin-bottom: 4rem}
.about-home p {font-size: 1.2rem}
.approach {background-color: #000000; background-image: url('/assets/img/bg-approach.jpg'); background-size: fit; background-position:right; background-repeat:no-repeat; }
.approach .card-body {background-color: #01F0F3; background-image: url('/assets/img/bg-mission.jpg'); background-repeat: no-repeat; background-position: right bottom; border-radius: 0; color:#000000; font-size: 1.2rem; margin-top:2rem; max-width: 800px}
.approach p {color:#ffffff; background-color: rgb(0, 0, 0, 0.4); font-size: 1.2rem; line-height: 30px; margin-right: 0}
.beyond p {font-size: 1.8rem; line-height: 30px}
.brand {margin-bottom:0.5rem; margin-left:0;}
.btn {border-radius: 0}
.btn-nav {background-color: #000000!important; border: 0; color:#333333; font-size: 1rem; height: 40px; width: 90px; text-align: center; padding: 0.5rem}
.btn-custom{/*background-color: #01F0F3!important;border-bottom:1px solid #01F0F3;*/ color:#01F0F3; font-size: 1.5rem!important}
.btn-custom:hover{/*background-color: #01F0F3!important;border-bottom:1px solid #FFFFFF;*/ color:#FFFFFF;}
.btn-info{background-color: #01F0F3!important; color:#333333;}
.btn-close {color:#ffffff!important}
.card-about {background-color: #000000; background-image: url('/assets/img/bg-mission-home.jpg'); background-repeat: no-repeat; background-position: right bottom; border-radius: 0; color:#ffffff; font-size: 1.2rem; margin-top:2rem; max-width: 800px}
.carousel {height: auto}
.carousel-caption {bottom: 1rem; left: 5%; position: absolute; z-index: 10;}
.carousel-caption a {border-radius: 0; font-size: 0.9rem; margin-left: 0!important}
.carousel-caption h1 {font-size: 1.5rem;}
.carousel-caption h2 {color: #01F0F3;font-size: 1rem;}
.carousel-indicators {top:130px}
.carousel-inner {height: auto}
.carousel-item {height: auto}
.carousel-item img {height: auto; object-fit: contain;}
.carousel-control-next-icon,
.carousel-control-prev-icon {height: 50px; width: 50px;}
.carousel-control-next, .carousel-control-prev {width: 7%}
.lang-fixed {position: fixed; right:0.5rem; top: 0; z-index: 99}
.list-arrow {list-style: none; padding-left: 0;}
.list-arrow li {margin-bottom: 8px;padding-left: 25px;position: relative;}
.list-arrow li::before {color: #01F0F3;content: "➜";font-weight: bold;left: 0;position: absolute;top: 0;}
.mission {background-color: #01F0F3; background-image: url('/assets/img/bg-mission.jpg'); background-repeat: no-repeat; background-position: right bottom; color:#333333;}
.mission h3 {color:#333333}
.mission p {font-size: 1.3rem;}
.nav-desktop {font-size:1.3rem; font-family: proximanova-black; font-weight:bold; padding:2rem;text-transform: uppercase;}
.nav-link {color:#01F0F3!important}
.nav-link:hover{color:#ffffff!important;}
.nav-social {border:1px solid #ffffff; color: #ffffff; font-size: 1.2rem; padding: 10px;}
.offcanvas {background-color: #060606}
.offcanvas-top.offcanvas-80 {height: 80vh;}
.represent {background-color: #000000}
.represent p {color: #ffffff; font-size: 2.5rem}
.services {background-color: #000000;}
.services ul li {color: #ffffff; font-size: 1.2rem; line-height: 30px}
.social-fixed {margin-right: 2rem}
.social-link {background-color: #000000; border: 1px solid #01F0F3; margin: 0 0.5rem; padding: 7px}
.social-link svg path {fill: #01F0F3; transition: fill 0.3s ease;}
.social-link:hover svg path { fill: #0ff;}
.track h2 {font-size: 2rem}

@media (min-width: 768px) { 

	header {background-color: rgb(0, 0, 0, 0.4); left:0; position:fixed; top:0; z-index: 10;}
	h3 {font-size:2rem!important;}
	h4 {font-size: 2.5rem}

	#carouselBranding {height: 300px}
	#carouselTrack {height: 267px}

	.about-home p {font-size: 1.6rem}
	.about-home h4 {margin-right: 20rem}
	.approach p {color:#ffffff; font-size: 2.2rem; line-height: 50px; margin-right: 30rem}
	.brand {margin-left:3rem}
	.btn-custom{/*background-color: #01F0F3!important;border-bottom:1px solid #01F0F3;*/ color:#01F0F3; font-size: 3rem!important}
	.btn-nav {background-color: #01F0F3!important; font-size: 1.5rem; height: 80px; width: 150px; padding: 1.5rem}
	.carousel {height: 100vh}
	.carousel-caption {bottom: 12rem}
	.carousel-caption a {font-size: 1.3rem;}
	.carousel-caption h1 {font-size: 5.5rem;}
	.carousel-caption h2 {font-size: 3rem; margin-bottom: 1.5rem}
	.carousel-indicators {top:auto}
	.carousel-inner {height: 100%}
	.carousel-item {height: 100%}
	.carousel-item img {height: 100%;object-fit: cover;}
	.lang-fixed {right:0.5rem; top: 2.5rem;}
	.track h2 {font-size: 3rem}
	.services ul li {font-size: 1.4rem; line-height: 30px}
}