/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 24, 2019 */



@font-face {
    font-family: 'nesdate_october_tenregular';
    src: url('nesdate_october_ten_font_by_situjuh_7ntypes_d-webfont.woff2') format('woff2'),
         url('nesdate_october_ten_font_by_situjuh_7ntypes_d-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


px;

@font-face {
    font-family: 'quicksandbook';
    src: url('quicksand_book-webfont.woff2') format('woff2'),
         url('quicksand_book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}/* General For All
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body{background-color:#ffffff;}
img{max-width: 100%;}

.container{width:100%; 
    max-width: 1024px;
    margin: auto;
    padding-top: 20px;
clear: both;
align-content: center;
text-align: center;}

nav{width: 100%; height:60px;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-top: 20px;
background-color:#001C24;
}
#logo{margin-top: 20px;
    text-align: center;
}

nav a {color: white; width:10%;
padding-top: 8px;
text-decoration: none;
font-family: quicksand;}

nav a:hover{
    color: #698A91;
}
.summary{
    margin: auto;
    font-family: quicksand;
    color: white;
    background-color: #001C24;
    padding-bottom: 30px;
}
.summary h1{
    color: white;
    padding-top: 30px;
}
.summary p{
    width: 80%;
    margin: auto;
     font-family: quicksand;
    
}
h1{
    font-family: nesdate_october_tenregular;
    color: #001C24;
}
#flow{
    margin-top: 50px;

}90

#personas{

}
.button{padding: 15px;
background-color: #001C24;
color: white;
text-transform: uppercase;
    height:40px;}
.button:hover{
    background-color: #698A91;
}
#design h1{
    padding-top: 50px;
    
}
#Pain p{
    font-family: quicksand;
    text-align: center;
    margin: auto;
    justify-content: center;
    font-size: 20px;
    color: white;
    background-color: #001C24;

    padding-bottom: 30px;
    padding-top: 30px;
}
#Pain h1{
    color: white;
    background-color: #001C24;
   padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
}
#personas{
    width: 40%;
    text-align: center;
    margin: auto;
}
#compete{
    width: 70%;
    text-align: center;
    margin: auto;
}
#conclusion{
    width: 80%;
    margin: auto;
    font-family: quicksand;
    margin-bottom: 90px;
    
}

/* Tablet
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 481px) and (max-width: 800px) {
 body {background-color:  white}


}
/* Mobile
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 480px)
{
 body {background-color:  white;}
nav{flex-direction: column;
height: 300px;
    position: relative;}

}