:root {
    --color-white: #fff;
    --color-black: #333;
    --color-gray: #75787b;
    --color-gray-light: #bbb;
    --color-gray-disabled: #e8e8e8;
    --color-green: #53a318;
    --color-blue: #0c8296;
    --primary: #0c8296;
    --color-green-dark: #383;
    --font-size-small: .75rem;
    --font-size-default: .875rem;
}

.btn-outline-primary, .btn-outline-success{
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.btn-success {
    border-color: var(--primary) !important;
    color: white !important;
    background-color: var(--primary) !important;
}

.btn-outline-primary:hover, .btn-outline-success:hover,
.btn-outline-primary:focus, .btn-outline-success:focus,
.btn-outline-primary:active, .btn-outline-success:active{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

.btn-outline-primary:focus, .btn-outline-success:focus,
.btn-outline-primary:active, .btn-outline-success:active,
.btn-success:focus, .btn-success:active {
    box-shadow: 0 0 0 0.2rem rgba( 12, 130, 150, .5) !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
}

header {
    width: 100%;
    margin: 3vh 0;
    margin-top: 2vh;
}

header .banner {
    max-width:350px;
}
header .banner > div{
    width: 50%;
}
header .banner > div img{
    width: 100%;
}
header .banner > div.logo img{
    height: 100%;
    max-height: 140px;
    width: auto;
}

.bottom{
    position: relative;
}

.bottom .alert-message{
    display: none;
}

.bottom .recipe-slider {
    position: relative;
    overflow: hidden;
    height: 28vh;
}

.bottom .recipe-slider > div{
    display: none;
    position: relative;
    position: absolute;
    width: 100%;
    padding: 0 5px;
}

.bottom .recipe-slider .first{
    display: block;
}

li{
    list-style: none;
}

.bottom-buttons button{
    width: 100%; 
    max-width: 530px;
}

.bottom-buttons .next-screen button i{
    font-size: 18px; 
    margin-bottom: -5px;
}

@media screen and (max-width: 1000px) {
    #final-buttons button,
    .next-screen button {
        max-width: 100% !important;
    }

    #final-buttons button:last-child {
        margin-bottom: 20px !important;
    }
}

@media screen and (max-width: 550px) {
  header .banner{
      width: 100%;
      max-width: 100%;
      justify-content: center;
      align-items: center;
  }

  header .banner > div{
      width: auto ;
  }

  header .banner img{
      height: 100px !important;
      max-height: 100px !important;
      width: auto !important;
  }

  header .banner .icon img {
      height: 150px;
  }

  .jumbotron h1{
      font-size: 28px !important;
  }

  .jumbotron p.lead {
      font-size: 16px;
  }

  .top{
      overflow: hidden;
  }

  .top .title h2 {
      font-size: 20px !important;
  }
}