/*
===========
Grid
===========
*/

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

.container {
	margin: 0 auto;
}


html, body {
  height: 100%;
  margin: 0;
}


/*
===========
Typography
===========
*/

h3,h4,h5, p{
	margin-bottom: 22px;
}

/*
========
Buttons
========
*/

.btn {
	border-radius: 5px;
	color: #ffff;
	cursor: pointer;
	display: inline-block;
	font-weight: 400;
	letter-spacing: .5px;
	margin: 0;
	text-transform: uppercase;
}

.btn-alt {
	border: 1px solid #ffff;
	padding: 10px 30px;
}

.btn-alt: hover{
	background: #ffff;
	color: #648880;
}

/*
======================
Buttons Previous Next
======================
*/

.previous:hover {
  background-color: #ffff;
}

.next:hover {
  background-color: #ffff;

}

.previous {
  border:1px solid #ffff;
  border-radius: 5px;
  color:#faa51a;
  padding: 5px 10px;
}

.next {
  border:1px solid #ffff;
  border-radius: 5px;
  color: #faa51a;
  padding: 5px 10px;
}

/*
=======
Home
=======
*/

.slideshowContainer {
  flex-direction: column;
  overflow: hidden;
  justify-content: center;
  padding: 0px;
  width: 100%;
  height: 85%;
}

.imageSlides {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  opacity: 0;
  transition: opacity 3s ease-in-out;
  z-index: -1;
}

/* add 'visible' class via Javascript */


.visible {
  opacity: 1;
}

.slideshowArrow {
  font-size: 7em;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.slideshowArrow:hover {
  opacity: 0.75;
}

#leftArrow {
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translate(-40%, -40%);
}

#rightArrow {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translate(40%, -40%);
}

.slideshowCircles {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.circle {
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: solid 2px rgba(255, 255, 255, 0.5);
  transition: 1s ease-in-out;
}

.dot {
  background-color: rgba(255, 255, 255, 0.7);
  border: solid 2px rgba(255, 255, 255, 0.5);
}


.main p {
	font-size: 18px;
}


.main h1{
  font-family: "Facit", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
  font-size: 6rem;
  position: absolute;
  top: 40%;
  left: 60%;
  transform: translate(-40%, -40%);
  line-height: 1.1;
  color: yellow;
  text-align: left;
}

.main h3{
  font-family: "Facit", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
  font-size: 3.5rem;
  position: absolute;
  top: 65%;
  left: 56%;
  transform: translate(-50%, -50%);
  color: white;
}

.main a.btn {
  color: #fff;
  font-family: "Facit", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
  background-color: green;
  position: absolute;
  text-transform: uppercase;
  transition: linear 1s;
  letter-spacing: 3px;
  font-size: 1.3rem;
  cursor: pointer;
  text-align: center; 
  padding: 18px 18px;
  top: 68%;
  left: 53%;
  transform: translate(-50%, -50%);
  border: solid 2px;
  border-radius: 0px;
  box-shadow: 0px 0px 10px rgb(7 9 5 / 5%);
}

.main a:hover.btn {
  color: green;
  text-decoration: none;
  background: #fdeb01;
}


/*
==========
Challenges
==========
*/

.background-1 {
	background: #005f2a;	
}

.start {
	font-size: 14px;	
}

/*
=========
Clearfix
=========
*/

.group: before,
.group: after {
	content: "";
	display: table;
}
.group: after {
	clear: both;
}
.group {
	clear: both;
	*zoom: 1;
}

/*
===================
Primary footer
===================
*/

.bottom-row{
font-family: "Helvetica", Arial, sans-serif;
background-color: #029347;
height: auto;
width: 100%;
padding: 0px 40px;
text-align: center;
color: #fff;
letter-spacing: 1px;
}

/*
==============
Custom Styles
==============
*/

body {
	background: #029347;
	color: #888;
	font: 300 16px/22px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h2,h3{
	color: #faa51a;
}

h2 {
	font-size: 24px;
	line-height: 44px;
}

h3 {
	font-size: 21px;
}

h4 {
	font-size: 18px;
	color: #888;
	line-height: 25px;
}

h5 {
	color: #385640;
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
}

strong {
	font-weight: 400;
}

.centered {
	text-align:center;
}

/*
=======
Links
=======
*/

a {
	color: #029347;
	background-color: #fdeb01;
	text-decoration: none;
}
a:hover {
	color: #fdeb01;
}
p a {
	border-bottom: 1px solid: #ffff;
}

.challenges-nav{
	text-align: center;
	margin: -20px 10px 0px 10px;
	font-weight: 400;
	color: orange;
	font-size: 18px;
	padding-bottom: 5px;
	padding-top: 15px;

}

.logo {
	border-top: 6px; 
	float: left;
	padding: 50px 0 25px 50px;
	z-index: 2;
}

.primary-nav {
	position:absolute;
	font-family: "Facit", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
	top:20px;
	right:0px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 2.0px;
	text-transform: uppercase;
}

.primary-footer {
	color: #ffff;
	font-weight: 400;
	font-size: 12px;
	padding-bottom: 44px;
	padding-top: 44px;	
}

.primary-footer small{
	float: left;
	font-weight: 400;
}

.teaser a:hoover h3 {
	color: #a9b2b9;
}

.primary-header a{
    padding: 7px 20px 7px 10px;
    line-height: 250%;
    background-color:#029347;
	color: #fdeb01;
}

.primary-footer a {
    background-color:#029347;
	color: #fdeb01;
}

.primary-header a:hover,
.primary-footer a:hover {
	background-color:#fdeb01;
	color: #029347;
}

/*
===========
Navigation
===========
*/

.nav {
	text-align: right;
}

.subnav {
	margin: 0px 6px 0px 6px;
}
 
.subnav-guide {
	color: #63b770;
}

/*
=====
Rows
=====
*/

.row {
	background: #ffff;
	min-width: 980px;
	padding: 66px 0 44px 0;
}

.middle-row {
	background: #0e6621;
	min-width: 980px;
	padding: 66px 20px 44px 20px;
}

.top-row {
	background: #ffff;
	padding: 20px 50px 30px 50px;
}

.teaser img {
		border-radius: 5px;
		display: block;
		margin-bottom: 22px;
		max-width: 100%;
}

/*
==========
Animation
==========
*/

.media-image {
	max-width:100%;
	vertical-align: middle;
}

.gallery-item {
	display:inline-block;
	position:relative;
	overflow:hidden;

	width:270px;
}
.gallery-description {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	background-color:green;
	color:white;
	font-size:1.3em;

	transition:all 300ms;
}
.gallery-image {
	transition:all 300ms;
}

.variation1 .gallery-description {
	transform: translateY(100%);
	border:1px solid: green;
  	border-radius: 5px;
}

.variation1:hover .gallery-description {
	transform: translateY(0);
}

.variation .gallery-image {
	transform:scale(1,1);
}

.variation:hover .gallery-image {
	transform: scale(1.2,1.2);
}

.centered-child{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

/*
===================
Subscribe
===================
*/

.why-suscribe {
	list-style: dots;
	margin: 00 22px 30px;
}

form{
	margin-bottom: 22px;
}

input, textarea{
	font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue", 
	Helvetica, Arial, sans-serif;
}

.suscribe-group label {
	color: #648880;
	cursor: pointer;
	font-weight: 400;
}

.suscribe-group input,
.suscribe-group textarea, {
	border:1px solid #c6c9cc;
	border-radius: 5px;
	color:#8888;
	display:block;
	margin: 5px 0 27px 0;
	padding: 5px 8px;
}

.suscribe-group input,
.suscribe-group textarea {
	width: 100%;
}

.btn-default {
	border: 0;
	font-size: 14px;
}

.btn-default:hover {
	background: #faa51a;
}

/* --------------------------------- */


/*==============
  Media Query
==============*/


/* ============== Mobile ============== */


@media screen and (max-width: 320px) {

}


@media screen and (min-width: 321px) and (max-width: 767px) {
      .main h1{
        font-size: 2.5rem;
        width: max-content;
    }
}

/* ============== Tablet ============== */

@media screen and (min-width: 768px) and (max-width: 1025px) {
      .main h1{
        font-size: 3rem;
        width: max-content;
    }
 
}
 
/*============== Laptop ==============*/

@media screen and (min-width: 1026px) and (max-width: 1400px)  {
    .main h1{
        font-size: 4rem;
        width: max-content;
    }
    
    .main a.botton{
        top: 70%;
        left: 80%;
    }
}
 
@media screen and (min-width: 1401px) and (max-width: 1656px) {
     .main h1{
        font-size: 4.5rem;
        width: max-content;
    }
    
     .main a.botton{
        top: 70%;
        left: 80%;
    }
}

/*============== Desktop ==============*/

@media screen and (min-width: 1657px) and (max-width: 2143px) {
 
}

@media screen and (min-width: 2144px){
  
}

/*============== Pics Page ==============*/

.gallery { 
    height: 400px; 
    width: 600px;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.gallery img {
    height: 100%;
    width: 100%;
    flex-shrink: 0;
    object-fit: cover;
    position: sticky;
    top: 0;
}