/*-----APPLIES TO ALL/REUSABLE-----*/

*{
    margin:0;
padding:0;
    font-family: 'Lato', sans-serif;
}

.dark-background{
    background-color:#292E37;
}

.section-headline{
    color: white;
    text-align: center;
    font-size:50px;
    font-weight:300;
}

.line{
    height:2px;
    width:80px;
    background-color:lightgray;
   margin: 0 auto;
    margin-top:30px;
    margin-bottom:60px;
}

section{
    padding: 70px 0;
}


.row{
    width:80%;
    margin:0 auto;
    overflow:auto;
}

.one-of-two{
    width:50%;
    float:left;
}

.one-of-three{
    width:33.3%;
    float:left;
}
.one-of-four{
    width:25%;
    float:left;
}

.two-of-three{
    width:66.66%;
    float:left;
}

.three-of-four{
    width:75%;
    float:left;
}

/*-----HEADER-----*/
#header{
    background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('../img/wasteimg1.jpg');
    height:100vh;
    background-position: center;
    background-size: cover;
    color: white;
    position: relative;
}

#header .dots{
    background-image:url(../img/pattern-bg.png);
    height:100%;
}

#header nav{
  position:absolute;
    padding: 20px 10px;
    width:100%;
        z-index:2;
}


 nav ul{  
    list-style: none;
    position: absolute;
    right:3%;
    top:50%;
    transform: translate(0, -50%);
}
nav li{
float: left;
    margin:0 15px;
}
#header nav img{
    width:200px;
    margin-top: 20px;
    margin-left:20px;
}
#header nav a{
    color:white;
    text-decoration: none;
    font-weight:300;
}

#header .headline-container{
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%)
}

#header .headline-container h1{
    font-size:60px;
    font-weight:400;
}

#header .headline-container h2{
    font-size:45px;
    font-weight:300;
    margin-bottom:45px;
}

#header .headline-container a{
    color:white;
    text-decoration: none;
    border: 1px solid white;
    font-size:25px;
    font-weight:300;
    padding: 5px 15px;
}

#header i{
    position:absolute;
    bottom:0;
    left:50%;
    transform:translate(-50%,0%);
        font-size:50px;
    color:bisque;
}


#header .headline-container a:hover{
    background-color:#24e098;
    transition: background-color 1s;
}


/*-----PROBLEM-----*/

#problem{

    background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('../img/problem1.jpg');
    height:100vh;
    background-position: center;
    background-size: cover;
    position: relative; 
}

#problem .steps-title{
    font-size:25px;
}

#problem h1{
    position: absolute;
    top: 40%;
    left:2%;
    transform:(translate(-50%, -50%));
    color: white;
    text-align: center;
    padding-left:150px;
    padding-right: 150px;
}

/*-----SOLUTION-----*/

#solution{
    background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('../img/solution1.jpg');
    height:100vh;
    background-position: center;
    background-size: cover;
    position: relative;
    text-align:center;
    
}

#solution h1{
    padding-top:110px;
    color: white;
    padding-left:150px;
    padding-right:150px;
    
}



/*-----STATS-----*/

#stats{
   background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('../img/0705_pond_0.jpeg');
    background-size:cover;
    background-position:center;
    text-align:center;
    padding:150px 0;
    background-attachment:fixed;
}

#stats i{
    font-size:50px;
    color:#549dc5;
}

#stats h3, #stats p{
    color:white;
}

#stats p{
    font-weight:700;
    font-size:50px;
    
}

#stats h3{
    font-weight:300;
    font-size:25px;
}

/*-----EVIDENCE-----*/

#evidence{

background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('../img/fountains.jpeg');
    background-size:cover;
    background-position:center;
    text-align:center;
    padding:150px 0;
    
}
#evidence p{
    font-size:25px;
    color:#24e098;

}
#evidence a{
    color:#24e098;
}
#evidence h1{
    font-size: 20px;
    color:white;
}

/*---------------------------*/
/*--------MEDIA QUERIES-----*/
/*---------------------------*/

/*-----HEADER-----*/

@media only screen and (max-width: 470px){
    #header .headline-container h1{
        font-size:40px;
    }
    #header .headline-container h2{
        font-size:25px;
    }
    #header .headline-container a{
        font-size:20px;
    }
}

/* START MOBILE NAV */

.mobile-menu{
    display:none;
}

.show{
    max-height:300px;
    transition:ease 0.5s;
}

@media only screen and (max-width:700px){
    #header nav img{
        display:none;
    }
    nav ul{
        max-height:0;
        overflow:hidden;
        position:static;
        transform:translate(0,0);
    }
    nav{
        background-color:#292E37;
        
    }
    
    .mobile-menu{
        display:block;
    }
    
    nav li{
        float:none;
        padding-bottom:25px;
    }
 

    
    
}


/*--------STEPS-------*/

@media only screen and (max-width: 1200px){
    #steps .one-of-two{
        width:100%;
    }
    #steps .one-of-two img{
        float:none;
    }
    #steps .iphone{
        text-align:center;
        margin-bottom:50px;
    }
}
@media only screen and (max-width:550px){
    #steps .circle{
        float:none;
        margin:0 auto;
    }
    
    #steps .steps-container{
        text-align:center;
        margin-left:0;
    }
    #steps .one-of-two img{
        width:70%;
    }
}


/*-------BENEFITS-------*/

@media only screen and (max-width: 900px){
    #benefits .one-of-three{
        width:100%;
    }
    #benefits .one-of-three h3{
        margin:0;
    }
 
    #benefits p{
        margin-bottom:40px;
    }
    
    
}

@media only screen and (max-width:600px){
    #benefits img{
        display:none;
    }
}




/*------STATS-------*/

@media only screen and (max-width: 1250px){
    #stats .one-of-four{
          width:100%;
    margin-bottom:60px;
    }
  
}
@media only screen and (max-width:550px){
    #stats p{
        font-size:65px;
    }
}


/*-------PRICING-------*/

@media only screen and (max-width: 1550px){
    #pricing ul{
        width:275px;
        padding:0 25px;
        
    }
}
    
@media only screen and (max-width: 1250px){
    #pricing ul{
        width: 220px;
        
    }
}
    
@media only screen and (max-width: 1100px){
    #pricing .one-of-three{
        width:100%;
        margin-bottom:40px;
    }
}
    
@media only screen and (max-width: 370px){
    #pricing ul{
        width:200px;
    }
}


/*------TEAM------*/

@media only screen and (max-width: 1440px){
    #team img{
        width:80%;
        
    }
}
    
@media only screen and (max-width: 850px){
    #team .one-of-three{
        width:100%;
        margin-bottom:50px;
    }
    #team img{
        width:50%;
    }
}
    
@media only screen and (max-width: 550px){
    #team img{
        width:75%;
    }
}


/*------REQUEST-----*/

@media only screen and (max-width:700px){
    #request .one-of-three, #request .two-of-three{
        width:100%;
        text-align:center;
    }
    #request input[type="text"]{
        margin: 0 auto;
        width:80%;
    }
}


/*----FOOTER-----*/

@media only screen and (max-width:1150px){
    #footer .three-of-four, #footer .one-of-four{
        width:100%;
        
    }
    #footer li{
        float: none;
        display: inline-block;
        
    }
    #footer ul{
        text-align: center;
        margin-bottom:15px;
    }
}