@charset "utf-8";
/* CSS Document */

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

header .socialNetworkNavBar {
	text-align: center;
	display: block;
	margin-top: 60px;
	clear: both;
}
@font-face {
	src: url("fonts/Lato-Regular.ttf");
	font-family: true;
	
	}

carousel-indicators {
	margin-top: 0rem !important;

}

.carousel-indicators {
	margin-bottom: 10rem;

}
header .socialNetworkNavBar .socialNetworkNav {
	border-radius: 50%;
	cursor: pointer;
}
header .socialNetworkNavBar .socialNetworkNav img:hover {
	opacity: 0.5;
}
.navbar {
	align-content: center
	}
          
.brsmall {
            display: block;
            margin-bottom: -.2em;
        }

.nav-link{
	color: black;
	
}

.h1 	{
	color: cadetblue;
	font-size: 300%;

		}

.motor
	{
		position: absolute !important;
		left: 80% !important;
	    }


.lulu {
  position: absolute;
  right: 20%;
  bottom: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #5E4040;
  text-align: right;
}
.li{
	color: black;
}

.dropdown-toggle{
	color: black;
}


.bg-light{
	color: black
}
.a{
	color: black;
}


.paragraph {
	font-size: 50px;
	line-height: 62;
	font-family: true;	
	font-family: "FontsFree Net fdhjuhu woff2";
}

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}




body
{
	background: #FFFFFF;
	min-height: 1500px;
}



section
{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}



section img
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	}

#mountain
{
z-index: 2;
}

#road
{
z-index: 2;
}


 #myBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: rgba(0, 0, 0, 0);
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: rgba(0, 0, 0, 0);
  color: black;
		  }
page-container {
  position: relative;
  min-height: 100vh;
}

content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  background-color: #333333;/* Footer height */
}

p.copyright {
        position: absolute;
        width: 100%;
        color: #fff;
        line-height: 40px;
        font-size: 0.7em;
        text-align: center;
        bottom:0;
    }
	
/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

.hexagon {
  position: relative;
  width: 300px; 
  height: 173.21px;
  background-color: #64C7CC;
  margin: 86.60px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 86.60px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 86.60px solid #64C7CC;
}

@media (min-width: 650px) {
.footer-1 {
  display: flex;
  background-color: rgba(50,50,50,1);/* Footer height */
}
}

.footer-1 div{
  border: 0px rgba(50,50,50,1) solid;
  padding: 10px;/* Footer height */
}

.box-1 {
flex: 2;
background-color: rgba(50,50,50,1);
}

.box-2 {
flex: 1;
background-color: rgba(50,50,50,1);
}

.box-3 {
flex: 6;
background-color: rgba(50,50,50,1);
}

.box-4 {
flex: 2;
background-color: rgba(50,50,50,1);
}

.video-container {
    height: 300px;
    width: 300px;
    position: relative;
}

.video-container video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}

/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
  z-index: 1;
  position: relative;
  text-align: center;
  color: #dc0000;
  padding: 10px;
}

@keyframes load{
  from{
    transform: rotate(0deg);
  } to{
    transform: rotate(360deg);
  } }
  
  #fadeshow1 {
margin-top: 96px;
min-height: 85vh;
max-width: 100%
} 

	
@media only screen and (max-width: 1026px) {
    #fadeshow1 {
        display: none;
    }
}
  
  #fadeshow2 {
margin-top: 30vh;
margin-bottom: -5vh;
min-height: 10vh;
max-width: 100%;
width: 100%;
color: rgba(255,255,255,1.00);
display:block;
height: auto;
} 

  @media only screen and (min-width: 1026px) {
    #fadeshow2 {
        display: none;
    }
}

#fadeshow1 {
margin-top: 0px;
min-height: 85vh;
max-width: 100%
} 

	
@media only screen and (max-width: 1026px) {
    #fadeshow1 {
        display: none;
    }
}

 #fadeshow4 {

} 
	  @media only screen and (max-width: 1026px) {
    #fadeshow4 {
        display: none;
    }}
	
#fadeshow1 {
margin-top: 96px;
min-height: 85vh;
max-width: 100%
} 

	
@media only screen and (max-width: 1026px) {
    #fadeshow1 {
        display: none;
    }
}
  
  #fadeshow2 {
margin-top: 30vh;
margin-bottom: -5vh;
min-height: 10vh;
max-width: 100%;
width: 100%;
color: rgba(255,255,255,1.00);
display:block;
height: auto;
} 

  @media only screen and (min-width: 1026px) {
    #fadeshow2 {
        display: none;
    }
}	


  #fadeshow17{
margin-top: 96px;
min-height: 85vh;
max-width: 100%
} 

	
@media only screen and (max-width: 425px) {
    #fadeshow17 {
        display: none; 
		}
}

 #fadeshow3 {

} 
	  @media only screen and (min-width: 1026px) {
    #fadeshow3 {
        display: none;
    }
}

#fadeshow5 {

} 
	  @media only screen and (min-width: 1026px) {
    #fadeshow5 {
        display: none;
    }
 }
 	 #fadeshowm {
margin-top: 30vh;
margin-bottom: -5vh;
min-height: 10vh;
max-width: 100%;
width: 100%;
color: rgba(255,255,255,1.00);
display:block;
height: auto;
} 

  @media only screen and (max-width: 1026px) {
    #fadeshowm {
        display: none;
    }}
	
	
 #fadeshowv {
margin-top: 0vh;
margin-bottom: -5vh;
min-height: 10vh;
max-width: 100%;
width: 100%;
color: rgba(255,255,255,1.00);
display:block;
height: auto;
} 

  @media only screen and (min-width: 1026px) {
    #fadeshowv {
        display: none;
    }
	
}

 #fadeshow7 {

} 
	  @media only screen and (max-width: 1026px) {
    #fadeshow7 {
        display: none;
    } }
	
	.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}


:root {
  --bg-color: hsl(0, 100%, 100%);
  --typewriterSpeed: 6s;
  --typewriterCharacters: 24;
}


.type {
  font-size: clamp(1rem, 3vw + 1rem, 4rem);
  position: relative;
  font-family: "Source Code Pro", monospace;
  position: relative;
  width: max-content;
}

.type::before,
.type::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.type::before {
  background: var(--bg-color);
  animation: typewriter var(--typewriterSpeed)
    steps(var(--typewriterCharacters)) 1s forwards;
}

.type::after {
  width: 0.125em;
  background: black;
  animation: typewriter var(--typewriterSpeed)
      steps(var(--typewriterCharacters)) 1s forwards,
    blink 750ms steps(var(--typewriterCharacters)) infinite;
}



@keyframes typewriter {
  to {
    left: 100%;
  }
}

@keyframes blink {
  to {
    background: transparent;
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#yt-link {
  position: absolute;
  bottom: 2em;
  width: 100%;
  color: hsl(0 0 0 / 0.7);
 }
 
  &:hover,
  &:focus {
    color: teal;
  }