body {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    /*line-height: 1.5em;*/
    margin: 0;
    padding: 0;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

a:active, a:focus {
    outline: 0;
    border: none;
    -moz-outline-style: none
}

.img-logo-molecule {
    width: 2.6vw;
    height: auto;
    animation-name: molecule;
    animation-duration: 3s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

.img-logo-text {
    width: 20vw;
    height: auto;
}

.img-home-molecule {
    width: 4vw;
    height: auto;
}

.img-home-text {
    width: 30vw;
    height: auto;
}

@keyframes molecule {
    100% {
        transform: perspective(500px) scaleZ(4) rotateY(360deg);
    }
}

/* Common Classes */
.primary-text {
    color: white;
}

.primary-background {
    background: red;
}

.container {
    margin: auto;
}

/* Header */
#main-header {
    border-bottom: 1px solid black;
    /*background: #d50000;*/
    background: -webkit-linear-gradient(left top, darkred, #d50000); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, darkred, #d50000); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, darkred, #d50000); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, darkred, #d50000);
}

#main-header span {
    padding: 0 10px;
}

.logos {
    padding-top: 7px;
}

.header-contents {
    min-height: 88px;
    position: relative;
}

/* Navbar */

#navbar {
    font-family: 'Micra', arial;
    font-size: 14px;
    text-shadow: 1px 1px 1px black;
}

#navbar li.nav-li {
    display: inline;
    padding: 10px 10px;
    list-style: none;
    text-transform: uppercase;
}

#navbar li.nav-li a.nav-a {
    text-decoration: none;
    color: white;
    font-size: 1.2em;
}

div #navbar li.current a, div #navbar li.nav-li a.nav-a:hover {
    color: yellow !important;
    border-bottom: 2px solid yellow;
    padding-bottom: 3px;
}

/* SHOWCASE */
#showcase {
    height: calc(100vh - 90px);
    background: url('../images/home.jpg') no-repeat center center;
    background-size: cover;
    /*display: -webkit-box;
    display: -ms-flexbox;
    display: flex;*/
    /*-webkit-box-orient: vertical;*/
    /*-webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;*/
    /*justify-content: center;*/
    /*-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;*/
    text-align: center;
}

#showcase .home-images {
    margin: 0 auto;
    /*padding-bottom: 10rem;*/
    padding-top: 3.2rem;
}

#showcase h1 {
    line-height: 2.3em;
    font-family: 'kelson_sans_regular_bg-webfont', sans-serif;
    font-size: 2.15vw;
    display: inline-block;
    /*position: relative;*/
    color: #ddd;
    /*background: black;
mix-blend-mode: lighten;*/
    z-index: 0;
    margin: 0;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.7);
    padding-left: 2.5em;
}

/*#showcase h1:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: -webkit-linear-gradient(left, #eee, #eee, #eee, #eee, red, red);
    background: linear-gradient(to right, #eee, #eee, #eee, #eee, red, red);
    pointer-events: none;
    animation-name: showcase;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    mix-blend-mode: multiply;
}*/

/*@keyframes showcase {
    0% {
        background: -webkit-linear-gradient(left, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee);
        background: linear-gradient(to right, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee);
    }
    10% {
        background: -webkit-linear-gradient(left, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee, red, red);
        background: linear-gradient(to right, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee, red, red);
    }
    20% {
        background: -webkit-linear-gradient(left, #eee, #eee, #eee, #eee, #eee, #eee, red, red, red, red);
        background: linear-gradient(to right, #eee, #eee, #eee, #eee, #eee, #eee, red, red, red, red);
    }
    30% {
        background: -webkit-linear-gradient(left, #eee, #eee, #eee, #eee, red, red, red, red, red, red);
        background: linear-gradient(to right, #eee, #eee, #eee, #eee, red, red, red, red, red, red);
    }
    40% {
        background: -webkit-linear-gradient(left, #eee, #eee, red, red, red, red, red, red, red, red);
        background: linear-gradient(to right, #eee, #eee, red, red, red, red, red, red, red, red);
    }
    50% {
        background: -webkit-linear-gradient(left, red, red, red, red, red, red, red, red, red, red);
        background: linear-gradient(to right, red, red, red, red, red, red, red, red, red, red);
    }
    60% {
        background: -webkit-linear-gradient(left, #eee, #eee, red, red, red, red, red, red, red, red);
        background: linear-gradient(to right, #eee, #eee, red, red, red, red, red, red, red, red);
    }
    70% {
        background: -webkit-linear-gradient(left, #eee, #eee, #eee, #eee, red, red, red, red, red, red);
        background: linear-gradient(to right, #eee, #eee, #eee, #eee, red, red, red, red, red, red);
    }
    80% {
        background: -webkit-linear-gradient(left, #eee, #eee, #eee, #eee, #eee, #eee, red, red, red, red);
        background: linear-gradient(to right, #eee, #eee, #eee, #eee, #eee, #eee, red, red, red, red);
    }
    90% {
        background: -webkit-linear-gradient(left, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee, red, red);
        background: linear-gradient(to right, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee, red, red);
    }
    100% {
        background: -webkit-linear-gradient(left, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee);
        background: linear-gradient(to right, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee, #eee);
    }
}*/

#showcase span {
    padding: 0 10px;
}

/* Foods */
#foods {
    position: relative;
    min-height: calc(100vh - 100px);
}

#foods:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/food-bg.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    z-index: -1;
}

.short-img {
    width: 50% !important;
    display: block;
    margin: 0 auto;
}

#foods .content {
    margin: 0 auto;
    padding-top: 2rem;
}

#foods .content a {
    text-decoration: none;
    -webkit-transition: 0.6s ease;
    transition: 0.2s ease;
}

#foods .content a h2 {
    font-family: 'kelson_sans_regular_bg-webfont', sans-serif;
    color: whitesmoke;
    text-transform: uppercase;
    -webkit-transition: 0.6s ease;
    transition: 0.2s ease;
    text-shadow: 3.5px 3.5px 3.5px black;
    padding: 5px 0;
}

#foods .content .first a:hover h2{
    color: yellow;
    font-size: 1.6em;
    padding: 0;
}

#foods .content .second a:hover h2 {
    color: yellow;
    font-size: 1.6em;
    padding: 0;
}

#foods .content .third a:hover h2 {
    color: yellow;
    font-size: 1.6em;
    padding: 0;
}

.link-food {
    padding: 15px 0;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.7);
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 0%;
    max-width: 0%;
    border: 3px solid white;
    box-shadow: 0px 0px 8px rgba(0,0,0,.3);
    box-sizing: border-box;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
    display: block;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    background: white;
    color: black;
    text-decoration: none;
    position: absolute;
    top: -80px;
    right: 0;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
    content: "";
    display: block;
    height: 30px;
    width: 1px;
    background: black;
    position: absolute;
    left: 26px;
    top: 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
    content: "";
    display: block;
    height: 30px;
    width: 1px;
    background: black;
    position: absolute;
    left: 26px;
    top: 10px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
    opacity: 1;
    top: 0;
    bottom: 0;
}

.lightbox-target:target img {
    max-height: 100%;
    max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
    top: 0px;
}


/* Foods Pages */
.food-page {
    position: relative;
    min-height: calc(100vh - 90px);
}

.food-page:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/food-bg.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: -2;
}

.food-page .content {
    position: relative;
    margin: 0 auto;
    font-family: 'Times New Roman', sans-serif;
    padding-bottom: 35px;
    padding-left: 15px;
    padding-right: 15px;
    min-height: calc(100vh - 90px);
    font-size: 1.2em;
}

.food-page .content:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: white;
    opacity: 0.4;
}

.food-page span{
    font-style: italic;
    font-weight: normal;
}

.food-page img.mt{
    margin-top: 1.67em;
}

.food-page img.mb{
    margin-bottom: 1.67em;
}

.food-page h4 {
    font-size: 1.1em;
}

.back-foods-btn {
    font-family: 'kelson_sans_regular_bg-webfont', sans-serif;
    color: white;
    font-style: italic;
    text-shadow: 2px 2px 2px black;
    text-decoration: none;
    transition: 0.6s ease;
}

.back-foods-btn:hover {
    color: yellow;
}

.food-page .content p {
    text-indent: 40px;
    text-align: justify;
    margin: 0 !important;
}

.food-page img {
    width: 100%;
}

.food-page ul {
    list-style: none;
    padding-left: 0 !important;
    margin: 0 !important;
}

.food-page .title {
    margin-top: 0 !important;
    padding-top: 23px;
    font-style: italic;
    font-family: 'kelson_sans_regular_bg-webfont', sans-serif;
}

/* Product Pages */

.product-page.terafert {
    position: relative;
    min-height: calc(100vh - 90px);
}

.product-page.terafert:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/terafert.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: -2;
}

.product-page.terasem {
    position: relative;
    min-height: calc(100vh - 90px);
}

.product-page.terasem:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/terasem.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: -2;
}

.product-page.teragransm {
    position: relative;
    min-height: calc(100vh - 90px);
}

.product-page.teragransm:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/terrahelp.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: -2;
}

.product-page.teragran {
    position: relative;
    min-height: calc(100vh - 90px);
}

.product-page.teragran:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/teragran-bg.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: -2;
}

.product-page .content {
    position: relative;
    margin: 0 auto;
    font-family: 'Times New Roman', sans-serif;
    padding-bottom: 35px;
    padding-left: 15px;
    padding-right: 15px;
    min-height: calc(100vh - 90px);
    font-size: 1.2em;
}

.product-page .content:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: white;
    opacity: 0.4;
}

.product-page span{
    font-style: italic;
    font-weight: normal;
}

.product-page img.mt{
    margin-top: 1.67em;
}

.product-page img.mb{
    margin-bottom: 1.67em;
}

.product-page h4 {
    font-size: 1.1em;
}

.product-page .content p {
    text-indent: 40px;
    text-align: justify;
    margin: 0 !important;
}

.product-page img {
    width: 100%;
}

.product-page ul {
    list-style: none;
    padding-left: 0 !important;
    margin: 0 !important;
}

.product-page .title {
    margin-top: 0 !important;
    padding-top: 23px;
    font-style: italic;
    font-family: 'kelson_sans_regular_bg-webfont', sans-serif;
}

/* Terra Active | Policies | Standarts */
.about-page {
    position: relative;
    min-height: calc(100vh - 90px);
}

.about-page:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/about-bg.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: -2;
}

.about-page .content {
    position: relative;
    margin: 0 auto;
    font-family: 'Times New Roman', sans-serif;
    padding-bottom: 35px;
    padding-left: 15px;
    padding-right: 15px;
    min-height: calc(100vh - 90px);
    font-size: 1.4em;
}

.about-page .content:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: white;
    opacity: 0.4;
}

.about-page .content p {
    text-indent: 40px;
    text-align: justify;
    margin: 0 !important;
}

.about-page ul {
    list-style: none;
    padding-left: 0 !important;
    margin: 0 !important;
}

    .about-page .title {
        margin-top: 0;
        padding-top: 23px;
        font-style: italic;
        font-family: 'kelson_sans_regular_bg-webfont', sans-serif;
    }

/* ABOUT */
#about {
    position: relative;
    min-height: calc(100vh - 90px);
}

#about:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/about-bg.jpg') no-repeat center center;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: -1;
}

#about a {
    text-decoration: none;
    color: white;
    min-height: calc(100vh - 90px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    font-size: 1.5vw;
    text-transform: capitalize;
    line-height: 2em;
}

    #about h2 {
        font-family: 'kelson_sans_regular_bg-webfont', sans-serif;
        margin: 15px;
        padding: 35px;
        color: whitesmoke;
        border: 5px solid #d50000;
        text-transform: uppercase;
        -webkit-transition: 0.6s ease;
        transition: 0.6s ease;
        text-shadow: 3px 3px 3px black;
        /*box-shadow: inset 0 0px 120px 4px rgba(0,0,0,0.7);*/
        width: 8.5em;
    }

#about a:hover h2 {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    z-index: 3;
    box-shadow: inset 0 0px 120px 4px rgba(0,0,0,0.7);
}

#about .link-about h2 {
    padding: 50px 35px;
}

/* PRODUCTS */
#products a {
    text-decoration: none;
    color: white;
    min-height: calc(100vh - 90px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    font-size: 1.4vw;
    line-height: 2em;
}

#products a:hover h2 {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    z-index: 3;
    display: inline-block;
    position: relative;
}

#products .terasem {
    background: url('../images/terasem.jpg') no-repeat;
    background-size: cover;
    -webkit-transition: 0.6s ease;
    transition: 0.6s ease;
    z-index: 2;
}

#products .terafert {
    background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ), url('../images/terafert.jpg') no-repeat center center;
    background-size: cover;
    -webkit-transition: 0.6s ease;
    transition: 0.6s ease;
    z-index: 2;
}

#products .teragran {
    background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ), url('../images/terrahelp.jpg') no-repeat center center;
    background-size: cover;
    -webkit-transition: 0.6s ease;
    transition: 0.6s ease;
    z-index: 2;
}

#products .terasem:hover {
    background: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ), url('../images/terasem.jpg') no-repeat;
    background-size: cover;
}

#products .terafert:hover {
    background: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ), url('../images/terafert.jpg') no-repeat center center;
    background-size: cover;
}

#products .teragran:hover {
    background: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ), url('../images/terrahelp.jpg') no-repeat center center;
    background-size: cover;
}

#products h2 {
    font-family: 'kelson_sans_regular_bg-webfont', sans-serif;
    margin: 15px;
    padding: 35px;
    border: 5px solid white;
    text-transform: uppercase;
    -webkit-transition: 0.6s ease;
    transition: 0.6s ease;
    z-index: 1;
}

/* MOBILE MENU */

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

.menu-mobile {
    display: none;
    /*position: fixed;*/
    /*width: 100%;*/
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: -webkit-linear-gradient(left top, darkred, #d50000); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, darkred, #d50000); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, darkred, #d50000); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, darkred, #d50000);
    border-right: 1px solid black;
    width: 51%;
    min-height: 100vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    z-index: 8888;
}

#navbar-mobile li {
    font-size: 4.5vw;
    line-height: 2em;
    padding: 10px 10px;
    list-style: none;
    text-transform: uppercase;
    font-family: 'Micra', arial;
    text-shadow: 2px 2px 2px black;
}

#navbar-mobile li a {
    text-decoration: none;
    color: white;
}

#navbar-mobile li.current a, #navbar-mobile li a:hover {
    color: yellow !important;
    border-bottom: 2px solid yellow;
    padding-bottom: 3px;
}

.flex {
    display: flex;
}

.menu-button {
    font-family: 'kelson_sans_regular_bg-webfont', sans-serif;
    display: none;
    position: absolute;
    top: 32%;
    right: 6%;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    z-index: 9999;
}

.menu-button:hover {
    background: rgba(0, 0, 0, 0.2);
}

.menu-button h3 {
    font-size: 2.5vw;
    letter-spacing: 1px;
    margin: 0;
    padding: 7px;
    color: white;
}

/* CONTACTS */
#contacts {
    position: relative;
    min-height: calc(100vh - 90px);
    font-family: 'kelson_sans_regular_bg-webfont', sans-serif;
}

#contacts:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/footer-bg.jpg');
    background-size: cover;
    width: 100%;
    height: 100%;
    filter: blur(8px);
    opacity: 0.7;
    z-index: -2;
}

#contacts ul {
    list-style: none;
    padding: 0;
}

#contacts .title {
    margin-top: 0;
    padding-top: 23px;
    font-style: italic;
}

#contacts ul.contacts li {
    padding: 18px 0;
    color: #003366;
}

#contacts ul.contacts li a, #contacts ul.contacts li a:visited {
    color: #003366;
}

#contacts ul.contacts li a:hover {
    color: yellow;
}

#contacts ul.contacts li i {
    margin: 0 9px 10px 0;
    /*background-color: green;
    padding: 7px 10px;*/
    /*color: white;*/
}

#contacts .fa-map-marker, #contacts .fa-phone, #contacts .fa-envelope {
    color: green;
}

.justify-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

div #map {
    min-height: calc(100vh - 90px);
}

/* FOOTER */

footer {
    padding: 15px 0;
    background: black;
    font-size: 13px;
    color: #555;
}

footer p {
    margin: 10px 0 !important;
}

.info {
    padding: 0 15px;
}

.info h4 {
    font-size: 17px;
    color: white;
    margin-top: 0;
}

.info h4.pad {
    padding-left: 10px;
}

.info p {
    color: white;
    font-size: 12.5px;
    letter-spacing: 0;
    line-height: 1.9em;
    text-align: justify;
    margin-bottom: 0;
}

.info p.f-title {
    margin: 0;
    text-align: center !important;
}

.info ul {
    list-style: none;
    padding-left: 10px;
    font-size: 12.5px;
}

.info ul.links {
    line-height: 3em;
}

.info ul.links li:hover {
    background: -webkit-linear-gradient(left top, darkred, black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, darkred, black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, darkred, black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, darkred, black);
}

.info ul.links li {
    border-bottom: 1px solid #777;
    color: white;
    padding: 6px 5px;
    text-decoration: none;
}

.info ul.links a, .info ul.links a:visited {
    text-decoration: none;
}

.info ul.contact {
    margin-bottom: 0;
}

.info ul.contact li {
    padding: 18px 0;
}

.info ul.contact li .first {
    color: white;
}

.info ul.contact li .second {
    color: white;
}

.info ul.contact li a, .info ul.contact li a:visited {
    color: white;
}

.info ul.contact li a:hover {
    color: yellow;
}

.info ul.contact li i {
    float: left;
    text-align: center;
    width: 16px;
    top: 0;
    left: 0;
    margin: 0 9px 10px 0;
    font-size: 1.3em;
    position: static !important;
}

.fa-map-marker, .fa-phone, .fa-envelope {
    color: white;
}

#info-panel {
    background: -webkit-linear-gradient(left top, darkred, black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, darkred, black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, darkred, black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, darkred, black);
    padding: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 1299px) {
    .info ul.contact li {
        padding: 15px 0;
    }
    #showcase .home-images {
        padding-top: 5rem;
    }
}

@media screen and (max-width: 991.5px) {
    .img-home-molecule {
        width: 5vw;
    }

    .img-home-text {
        width: 40vw;
    }

    .img-logo-molecule {
        width: 5vw;
    }

    .img-logo-text {
        width: 40vw;
    }

    #products a, #about a {
        min-height: calc((100vh - 60px)/3);
    }

    #products a {
        font-size: 2.8vw;
    }

    #about .link-about h2 {
        padding: 35px 2rem;
        font-size: 6vw;
    }

    .menu-desktop {
        display: none;
    }

    .menu-button {
        display: block;
    }

    #showcase h1 {
        font-size: 2.8vw;
        padding-left: 3em;
    }

    .info h4 {
        font-size: 19px;
    }

    .info p {
        font-size: 14.5px;
    }

    .info ul {
        padding-left: 0;
        font-size: 14.5px;
    }

    .info h4.pad {
        padding-left: 0;
        padding-top: 22px;
    }

    #about h2 {
        width: 10em;
    }
}

@media screen and (max-width: 768px) {
    #foods .content {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    #foods .link-food {
        padding: 0;
    }
}

@media screen and (max-width: 700px) {
    .img-home-molecule {
        width: 6.5vw;
    }

    .img-home-text {
        width: 50vw;
    }

    .menu-button {
        top: 25%;
    }

    .menu-button h3 {
        font-size: 3vw;
    }

    #showcase h1 {
        font-size: 3.5vw;
    }
}

@media screen and (max-width: 650px) {
    .header-contents {
        min-height: 68px;
    }

    #showcase, #contacts {
        height: calc(100vh - 68px);
    }

    div #map {
        min-height: 50vh;
    }

    #info-panel {
        background: -webkit-linear-gradient(left top, darkred, #111111);
        background: -o-linear-gradient(bottom right, darkred, #111111);
        background: -moz-linear-gradient(bottom right, darkred, #111111);
        background: linear-gradient(to bottom right, darkred, #111111);
    }
}

@media screen and (max-width: 610px) {
    /*#showcase h1 {
        font-size: 2.9vw;
    }*/

    .food-page .content:after {
        opacity: 0.2;
    }

    .about-page .content:after {
        opacity: 0.5;
    }

    .about-page:after {
        opacity: 0.8;
    }
}

@media screen and (max-width: 450px) {
    .img-home-text {
        width: 50vw;
    }

    .img-logo-text {
        width: 50vw;
    }

    .img-logo-molecule {
        width: 6.5vw;
    }

    .header-contents {
        min-height: 58px;
    }

    #showcase, #contacts {
        height: calc(100vh - 2px);
    }

    .menu-button h3 {
        /*top: 19%;*/
        font-size: 4vw;
    }

    #showcase h1 {
        font-size: 3.4vw;
        padding-left: 4em;
    }

    #showcase .home-images {
        padding-top: 6rem;
    }

    .short-img {
        width: 100% !important;
    }
}

@media screen and (max-width: 385px) {
    #showcase, #contacts {
        height: calc(100vh + 40px);
    }
}

@media screen and (max-width: 370px) {
    #map {
        min-height: 45vh;
    }
}

@media only screen and (min-device-width : 700px) and (max-device-width : 960px) and (orientation : landscape) {
    #showcase .home-images {
        padding-bottom: 20px;
    }

    .header-contents {
        min-height: 100px;
    }
}

@media only screen and (min-device-width : 300px) and (max-device-width : 700px) and (orientation : landscape) {
    #showcase .home-images {
        padding-bottom: 0;
    }
}

@media only screen and (min-device-width : 300px) and (max-device-width : 650px) and (orientation : landscape) {
    #navbar-mobile li {
         font-size: 4vw;
    }
}