html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

div {
    font-family: 'Rubik', sans-serif;
}

@media (min-width: 1600px) {
    .container-xxxl {
        max-width: 1500px;
    }
}

@media (min-width: 1700px) {
    .container-xxxl {
        max-width: 1600px;
    }
}

@media (min-width: 1800px) {
    .container-xxxl {
        max-width: 1700px;
    }
}

h2 {
    font-size: 60pt;
    font-family: 'Playfair', serif;
    font-style:italic;
    color: #322306;
}

.btn-hero {
    color: #fff;
    background-color: #20b6c5;
    border-color: #20b6c5;
    border-radius: 0px;
    font-size: 23pt;
    padding-left: 45px;
    padding-right: 45px;
}

@media only screen and (min-width: 500px) {
    .btn-hero {
        font-size: 30pt;
    }
}


.btn-hero:hover {
    background-color: #167983;
    border-color: #167983;
}

.bg-hero {
    background: url(/images/home/splash-bg.png) 0% 0% no-repeat padding-box;
    background-size: cover;
    height: 264px;
}

@media only screen and (min-width: 500px) {
    .bg-hero {
        height: 264px;
    }
}

.tic-tac-bg {
    background-color: #21B6C6;
    border-bottom-right-radius: 15px;
    max-width: 250px;
    margin-top: -10px;
    padding-bottom: 5px;
    padding-left: 35px;
    padding-right: 35px;
    z-index: 1000;
}


@media only screen and (min-width: 768px) {

    .bg-hero {
        height: 364px;
    }
}


@media only screen and (min-width: 992px) {

    .bg-hero {
        height: 700px;
    }

    .tic-tac-bg {
        max-width: 500px;
    }
}