/*GENERAL*/
*{
margin: 0;
padding: 0;
}

html{
height: 100%;
width: 100%;
background: #000;
}

body{
height: 100%;
width: 100%;
min-width: 320px;
min-height: 480px;
background: url(/img/hobby_flow/bg_hobby.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
}

/*CONTENT*/
.content{
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
}

.wrap{
margin-bottom: 20px;
padding: 25px 20px 20px;
background-color: rgba(0, 0, 0, 0.50);
box-shadow: 0 25px 25px -25px rgba(0, 0, 0, 1);
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

.slogan {
font-size: 1.1rem;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
text-align: center;
}

.features{
font-family: 'Raleway', sans-serif;
font-size: 0.9rem;
display: flex;
justify-content: center;
margin: 10px 0 15px;
}

.features li{
list-style-type: none;
}

.features li:before {
content: '✓ ';
color: #43b108;
}

.wrap a {
text-decoration: none;
}

.button {
border-radius: 3px;
background-color: #ffb706;
color: #000;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-size: 0.9rem;
font-weight: bold;
padding: 20px 45px;
text-align: center;
}

/*FOOTER*/
.footer{
padding: 0 5px;
background: #000;
text-align: center;
}

.termsWrap{
display: flex;
justify-content: center;
padding: 20px 25px;
}

.terms{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 960px;
color: #fff;
font-family: 'Raleway', sans-serif;
font-size: 0.7rem;
}

.terms span{
max-width: 595px;
}

.terms a{
color: #fff;
}

/*MEDIA*/

/*widthFrom420px*/
@media screen and (min-width: 420px){
 .slogan {
  font-size: 1.2rem;
 }
 .features{
  font-size: 1.0rem;
 }
 .button {
  font-size: 1.0rem;
 }
}

/*widthFrom600px*/
@media screen and (min-width: 600px){
 .wrap {
  margin-bottom: 40px;
 }
 .slogan {
  font-size: 1.3rem;
 }
 .features{
  font-size: 1.1rem;
 }
 .button {
  font-size: 1.1rem;
 }
}