@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 700;
    src: local('Merriweather Bold'), local('Merriweather-Bold'),
            url('../fonts/merriweather-v19-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
            url('../fonts/merriweather-v19-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

*{margin: 0; padding: 0; box-sizing: border-box;}
body{background: #f1f1f1; font-family: arial; font-size: 16px; line-height: 1.4;}

h1{font-size: 28px; margin-bottom: 18px; font-family: "Merriweather", serif;}
h2{font-size: 24px; margin-bottom: 10px; font-family: "Merriweather", serif;}
h3{font-size: 22px; margin-bottom: 7px; font-family: "Merriweather", serif;}

img{max-width: 100%;}
img.mood{margin-bottom: 20px;}

hr{border: 0; border-bottom: 1px solid #eee; margin: 45px auto; clear: both; width: 80%;}

ul li{margin: 0 0 10px 0;}
ul {padding-left: 35px;}

.voucher-info {text-align: center;}
.voucher {border: #333 2px solid; border-radius: 3px; padding: 10px 16px; font-size: 25px; display: inline-block; margin-bottom: 20px;}

p{margin-bottom: 20px;}
p:last-child{margin-bottom: 0;}
p img{max-width: 100%; margin-left: 10px;}

table.login-data tr td:first-child{font-weight: bold;}
table.login-data td{padding: 2px; display: block;}

input{display: block; padding: 10px 8px; width: 100%; border: #ddd 1px solid; border-radius: 3px; margin-bottom: 15px;}
input.voucher{font-size: 18px;}

footer{padding: 20px;}
footer a{text-decoration: none; color: #333; font-weight: normal;  font-size: 12px;}

.alignright{float: right;}
.alignleft{float: left; margin-right: 10px;}

a{font-weight: bold; color: #e85498;}

.wrapper{max-width: 800px; background: #fff; box-sizing: border-box; padding: 20px; width: 100%; box-shadow: 0px 3px 25px rgb(51 51 51 / 10%);}
.logo{max-width: 100px; width: 100%; margin: 0 auto 40px; display: block;}
.images{width: 100%; margin: 0 auto;}

a.btn,
button{background: #4284ae; border: 0; text-align: center; padding: 15px 23px; border-radius: 3px; color: #fff; display: table; margin: 10px auto; transition: all 0.2s; cursor: pointer; font-size: 16px;}
a.btn:hover,
button:hover{background: #f5609d; transform: translate(0, -3px); box-shadow: #f5609d 0px 10px 15px -9px;}

.alert {box-sizing: border-box; width: 100%; padding: 12px 16px; border-radius: 4px; border-style: solid; border-width: 1px; margin-bottom: 20px;}
.alert.alert-success {background-color: rgba(227, 253, 235, 1); border-color: rgba(38, 179, 3, 1); color: rgba(60, 118, 61, 1);}
.alert.alert-info { background-color: rgba(217, 237, 247, 1); color: rgba(49, 112, 143, 1); border-color: rgba(126, 182, 193, 1);}  
.alert.alert-warning {background-color: rgba(252, 248, 227, 1); border-color: rgba(177, 161, 129, 1); color: rgba(138, 109, 59, 1);}
.alert.alert-danger {background-color: rgba(248, 215, 218, 1); border-color: rgba(220, 53, 69, 1); color: rgba(114, 28, 36,1);}

@media screen and (min-width: 800px){
    .wrapper{margin: 20px auto 0;  padding: 50px;}
}