:root{
    --color-rgm: #dc2025;
    --color-highlight-blue: #3498db;
    --color-grey-light: #f8f9fa;
    --color-grey: #53555c;
    --color-grey-dark: #454545;
    --color-white: white;

    --color-inkoservice-red: #af004f;
    --color-inkoservice-blue: #00659f;

    --color-shop: #448fb0;
    --color-shop-light: #a4c9dc;
    --color-shop-dark: #004055;
    --color-rezept: #efb8c2;
    --color-rezept-light: #504040;
    --color-rezept-dark: #693434;
    --color-phm: #38a0a3;
    --color-phm-dark: #002a15;

    --color-gew-gv: #F0F8FF;
    --color-gew-gv-dark: #0f3e68;
    --color-gew-gv-text: #002752;
    --color-gew-pflege: crimson;

    --color-fb: #3571B7;
}

/* ===================================
    Fonts
====================================== */

/* arimo-regular - latin */
@font-face {
    font-family: 'Arimo';
    font-style: normal;
    font-weight: 400;
    src: local(''),
    url('../fonts/arimo-v17-latin-regular.woff2') format('woff2'),
    url('../fonts/arimo-v17-latin-regular.woff') format('woff');
}

/* arimo-500 - latin */
@font-face {
    font-family: 'Arimo';
    font-style: normal;
    font-weight: 500;
    src: local(''),
    url('../fonts/arimo-v17-latin-500.woff2') format('woff2'),
    url('../fonts/arimo-v17-latin-500.woff') format('woff');
}

/* arimo-600 - latin */
@font-face {
    font-family: 'Arimo';
    font-style: normal;
    font-weight: 600;
    src: local(''),
    url('../fonts/arimo-v17-latin-600.woff2') format('woff2'),
    url('../fonts/arimo-v17-latin-600.woff') format('woff');
}

/* arimo-700 - latin */
@font-face {
    font-family: 'Arimo';
    font-style: normal;
    font-weight: 700;
    src: local(''),
    url('../fonts/arimo-v17-latin-700.woff2') format('woff2'),
    url('../fonts/arimo-v17-latin-700.woff') format('woff');
}

/* arimo-italic - latin */
@font-face {
    font-family: 'Arimo';
    font-style: italic;
    font-weight: 400;
    src: local(''),
    url('../fonts/arimo-v17-latin-italic.woff2') format('woff2'),
    url('../fonts/arimo-v17-latin-italic.woff') format('woff');
}

/* arimo-500italic - latin */
@font-face {
    font-family: 'Arimo';
    font-style: italic;
    font-weight: 500;
    src: local(''),
    url('../fonts/arimo-v17-latin-500italic.woff2') format('woff2'),
    url('../fonts/arimo-v17-latin-500italic.woff') format('woff');
}

/* arimo-600italic - latin */
@font-face {
    font-family: 'Arimo';
    font-style: italic;
    font-weight: 600;
    src: local(''),
    url('../fonts/arimo-v17-latin-600italic.woff2') format('woff2'),
    url('../fonts/arimo-v17-latin-600italic.woff') format('woff');
}

/* arimo-700italic - latin */
@font-face {
    font-family: 'Arimo';
    font-style: italic;
    font-weight: 700;
    src: local(''),
    url('../fonts/arimo-v17-latin-700italic.woff2') format('woff2'),
    url('../fonts/arimo-v17-latin-700italic.woff') format('woff');
}

/* ===================================
    Navigation
====================================== */

.header-appear .navbar-top-default {
    border-bottom: 3px solid var(--color-rgm);
}


/* ===================================
    Side Nav
====================================== */

.side-footer{
    color: var(--color-white);
}


/* ===================================
    Sections (ALL)
====================================== */

section{padding: 80px 0 80px;}


/* ===================================
    Home Section (Top)
====================================== */

section#home{
    padding:140px 0 20px;
}

section#home h2{
    color: var(--color-highlight-blue);
    font-size: 64px;
    font-weight: 600;
    margin-bottom: 30px;
}

section#home h2 span{
    color: var(--color-grey);
    display: block;
    font-size: 20px;
    font-weight: normal;
}

section#home p:last-child{
    margin-bottom: 30px;
}

section#home .logo{
    margin: 0 30% 10px;
}

section#home .top-text{
    font-size: 20px;
    margin-bottom: 30px;
    line-height: 30px;
}

section#home .top-description{
    color: var(--color-grey);
    font-size: 20px;
    margin-bottom: 30px;
    line-height: 30px;
}

/* Small */
@media screen and (min-width: 576px) {}

/* Medium */
@media screen and (min-width: 768px) {
    section#home{
    }

    section#home .top-text{
        margin-top: 25px;
    }

    section#home .logo{
        margin: 30px 0 0 0;
    }
}

/* Large */
@media screen and (min-width: 992px) {
    section#home{
        padding:160px 0 160px;
        background-image: url("../img/background-main.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    section#home .top-text{
        margin: 45px 0 20px;
    }

    section#home .logo{
        margin-right: 10%;
    }
}

/* XL */
@media screen and (min-width: 1200px) {}

/* ===================================
    Feature Section
====================================== */

section#rgm-feature{
    display: none;
}

section#rgm-feature .divlink{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

section#rgm-feature.feature-content{
    /*margin-bottom: -60px;*/
}

section#rgm-feature .rgm-feature-col-shop, section#rgm-feature .rgm-feature-col-rezept, section#rgm-feature .rgm-feature-col-phm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

section#rgm-feature .rgm-feature-col-shop h3, section#rgm-feature .rgm-feature-col-rezept h3, section#rgm-feature .rgm-feature-col-phm h3 {
    font-size: 24px;
    font-weight: normal;
    text-align: center;
}

section#rgm-feature .rgm-feature-col-shop p, section#rgm-feature .rgm-feature-col-rezept p, section#rgm-feature .rgm-feature-col-phm p {
    text-align: center;
}

section#rgm-feature .rgm-feature-col-shop .front, section#rgm-feature .rgm-feature-col-rezept .front, section#rgm-feature .rgm-feature-col-phm .front {
    padding: 20px 30px;
}

section#rgm-feature .rgm-feature-col-shop .back, section#rgm-feature .rgm-feature-col-rezept .back, section#rgm-feature .rgm-feature-col-phm .back {
    padding: 40px 30px 10px;
}

section#rgm-feature .rgm-feature-col-shop .back .box, section#rgm-feature .rgm-feature-col-rezept .back .box, section#rgm-feature .rgm-feature-col-phm .back .box {
    position: relative;
}

section#rgm-feature .rgm-feature-col-shop .back .button-footer, section#rgm-feature .rgm-feature-col-rezept .back .button-footer, section#rgm-feature .rgm-feature-col-phm .back .button-footer {
    margin: 20px auto 10px;
}

.rgm-feature-col-rezept img, .rgm-feature-col-phm img {
    margin-bottom: 20px;
    max-height: 40px;
}

.rgm-feature-col-shop img{
    margin-top: -5px;
    margin-bottom: 10px;
    max-height: 80px;
}

.rgm-feature-col-rezept{
    max-width: 30%; margin: 10px 20px 10px 0;
}

.rgm-feature-col-rezept .front{
    background-color: var(--color-rezept);
    color: var(--color-white);
}

.rgm-feature-col-rezept .back{
    background-color: var(--color-white);
    color: var(--color-grey);
}

.rgm-feature-col-shop{}

.rgm-feature-col-shop .front{
    background-color: var(--color-shop);
    color: var(--color-white);
}

.rgm-feature-col-shop .back{
    background-color: var(--color-white);
    color: var(--color-grey);
}

.rgm-feature-col-phm{
    max-width: 30%; margin: 10px 0 10px 20px;
}

.rgm-feature-col-phm .front{
    background-color: var(--color-phm);
    color: var(--color-white);
}

.rgm-feature-col-phm .back{
    background-color: var(--color-white);
    color: var(--color-grey);
}


/* Small */
@media screen and (min-width: 576px) {
}

/* Medium */
@media screen and (min-width: 768px) {
    section#rgm-feature{
        display: block;
    }
}

/* Large */
@media screen and (min-width: 992px) {
}

/* XL */
@media screen and (min-width: 1200px) {
}


/* ===================================
    Shop Section
====================================== */

section#shop{
    /*margin: 80px 0;*/
}

section#shop .overlay-outer{
    background-color: #6E9DBC;
}

section#shop .parallax-slide{
    background-image: url(../img/background-shop11.jpg);
    background-position: top center;
    background-repeat: no-repeat;
}

section#shop .overlay-inner{
    padding: 120px 0;
}

section#shop .content-box{
    background-color: var(--color-shop);
    opacity: 0.9;
    padding: 35px 0;
}

section#shop .content-box .content-box-left{
    margin-top:-40px;
}

section#shop .content-box .content-box-left img{
    transform: rotate(0deg);
    margin: 20px 0 0 0;
    width: 90%;
}

section#shop .content-box .content-box-left h2{
    color: var(--color-white);
    font-size: 20px;
    line-height: 24px;
}

section#shop .content-box .content-box-left p{
    font-size: 38px;
    font-weight: bold;
    line-height: 48px;
    color: var(--color-shop-dark);
    margin-top: 30px;
}


section#shop .content-box .content-box-right{
    color: var(--color-white);
    font-size: 18px;
    line-height: 30px;
}

section#shop .content-box .content-box-right i{
    color: var(--color-shop-dark);
    margin-right: 10px;
}

section#shop .content-box .content-box-right ul{
    font-size: 18px;
    line-height: 30px;
}

section#shop .content-box .content-box-right .btn-drk-blue{
    background: var(--color-inkoservice-red);
    border-color: var(--color-inkoservice-red);
}

section#shop .content-box .content-box-right .btn-drk-blue:hover{
    background: var(--color-white);
    color: var(--color-inkoservice-red)!important;
}

/* Small */
@media screen and (min-width: 576px) {
}

/* Medium */
@media screen and (min-width: 768px) {
    section#shop .content-box .content-box-left p{
        margin-top: 30px;
        font-size: 24px;
        line-height: 36px;
    }
    section#shop .content-box .content-box-left p span{font-size: 30px;}
}

/* Large */
@media screen and (min-width: 992px) {
    section#shop .content-box .content-box-left p{
        font-size: 38px;
        line-height: 48px;
    }
    section#shop .content-box .content-box-left p span{font-size: 40px;}
}

/* XL */
@media screen and (min-width: 1200px) {
}


/* ===================================
    Rezept Section
====================================== */

section#rezept{
    padding: 80px 0;
}

section#rezept .container{
    background-image: url(../img/background-rezept4.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 150px;
}

section#rezept .content-box{
    padding: 60px 0;
    background-color: var(--color-rezept);
    margin: 5% 3% 5% 3%;
    padding: 20px;
    color: var(--color-rezept-light);
    opacity: 0.8;
    box-shadow: 4px 4px 25px 0 rgba(0,0,0,0.2);
}

section#rezept  p.sub{
    margin-top: 15px;
}

section#rezept .content-box h2 {
    color: var(--color-rezept-dark);
}

section#rezept .content-box h2 span{
    font-weight: bold;
}

/* Small */
@media screen and (min-width: 576px) {
    section#rezept .content-box{
        margin: 5% 6% 5% 3%;
    }
}

/* Medium */
@media screen and (min-width: 768px) {
    section#rezept .content-box{
        margin: 5% 34% 5% 3%;
    }
}

/* Large */
@media screen and (min-width: 992px) {
}

/* XL */
@media screen and (min-width: 1200px) {
}


/* ===================================
    Pflege Section
====================================== */

/*
section#pflege{
    padding:80px 0;
}

section#pflege .container{
    background-color: var(--color-phm);
    overflow: auto;
    position: relative;
    background-image: url(../img/background-phm3.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 4px 4px 25px 0 rgba(0,0,0,0.2);
}

section#pflege .logobubble{
    background-color: var(--color-phm);
    z-index: 100;
    position: absolute;
    top: 10px;
    right: 2%;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    padding: 25px;
    opacity: 1;
}

section#pflege .content-box{
    background-color: var(--color-phm);
    margin: 5% 8% 5% 30%;
    padding: 20px;
    color: var(--color-white);
    opacity: 1;
}

section#pflege h2{
    margin-right: 15%;
}

section#pflege p{
    margin-bottom: 15px;
}

section#pflege .content-box p:first-of-type{
    color: var(--color-phm-dark);
    margin-right: 15%;
}

section#pflege ul{
    display: inline-block;
    padding-left: 15px;
    margin-bottom: 15px;
}

section#pflege li{
    list-style: outside;
    float: left;
    min-width: 200px;
}

section#pflege li:nth-child(3n){
    clear:left;
}*/

section#pflege{
    padding:80px 0;
}

section#pflege .container{
    background-color: var(--color-phm);
    overflow: auto;
    position: relative;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 4px 4px 25px 0 rgba(0,0,0,0.2);
}

section#pflege .logobubble{
    background-color: var(--color-phm);
    z-index: 100;
    position: absolute;
    top: 10px;
    right: 2%;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    padding: 25px;
    opacity: 1;
}

section#pflege .content-box{
    background-color: var(--color-phm);
    margin: 5% 3% 5% 6%;
    padding: 20px;
    color: var(--color-white);
    opacity: 1;
}

section#pflege .mobilelogo{
    float: right;
    width: 25%;
    padding: 0 0 0 10px;
}

section#pflege h2{
    margin-right: 20%;
}

section#pflege p{
    margin-bottom: 15px;
}

section#pflege .content-box p:first-of-type{
    color: var(--color-phm-dark);
    margin-right: 20%;
}

section#pflege ul{
    display: inline-block;
    padding-left: 15px;
    margin-bottom: 15px;
}

section#pflege li{
    list-style: outside;
    min-width: 200px;
}


/* Small */
@media screen and (min-width: 576px) {

}

/* Medium */
@media screen and (min-width: 768px) {
    section#pflege .container {
        background-image: url(../img/background-phm3.png);
    }
    section#pflege .content-box{
        margin: 5% 8% 5% 30%;
    }

    section#pflege li{
        float: left;
    }
    section#pflege li:nth-child(3n){
        clear:left;
    }
}

/* Large */
@media screen and (min-width: 992px) {
}

/* XL */
@media screen and (min-width: 1200px) {
}


/* ===================================
    Gewerbe Section
====================================== */

section#gewerbe{
    padding:80px 0;
}


section#gewerbe .blingbox{
    box-shadow: 4px 4px 25px 0 rgba(0,0,0,0.2);
    border: 2px solid transparent;border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-source: none;
    border-image-width: 1;
    -moz-border-image: -moz-linear-gradient(bottom left, #e73089 0%, #418cca 100%);
    -webkit-border-image: -webkit-linear-gradient(bottom left, #e73089 0%, #418cca 100%);
    border-image: linear-gradient(to top right, #e73089 0%, #418cca 100%);
    border-image-slice: 100%;
    border-image-slice: 1;
}

section#gewerbe .gv{
    padding: 30px 40px 30px;
    background-color: var(--color-gew-gv);
    box-shadow: 4px 4px 25px 0 rgba(0,0,0,0.2);
}

section#gewerbe .gv h2 {
    color: var(--color-gew-gv-dark);
    margin-bottom: 20px;
    font-size: 23px;
    line-height: 32px;
}

section#gewerbe .gv p {
    color: var(--color-gew-gv-dark);
}

section#gewerbe .pflege{
    padding: 30px 40px 30px;
    background-color: #FFFAF1;
    box-shadow: 4px 4px 25px 0 rgba(0,0,0,0.2);
}

section#gewerbe .pflege h2{
    color: var(--color-gew-pflege);
    color: #b07150;
    margin-bottom: 20px;
    font-size: 20px;
    font-size: 22px;
    line-height: 23px;
}

section#gewerbe .pflege h2 span{
    line-height: 40px;
}

section#gewerbe .pflege p {
    color: #b07150;
}

section#gewerbe .pflege p .angebot{
    margin-right: 60%;
    font-weight: bold;
}

section#gewerbe .pflege p .kontakt{
    font-size: 18px;
    line-height: 30px;
}


/* Large */
@media screen and (min-width: 992px) {
    section#gewerbe .content-bottom{
        position: absolute;
        bottom:20px;
    }

    section#gewerbe .gv, section#gewerbe .pflege {
        padding: 30px 40px 70px;
    }
}


/* ===================================
    Facebook Section
====================================== */

section#fb{
    background-color: var(--color-fb);
    padding:60px 0;
}

section#fb img{
    float:left;
}

section#fb p{
    font-size:18px;
    color: var(--color-white);
    padding-left: 100px;
    line-height: 30px;
}

section#fb a{
    color: var(--color-white);
}

section#fb a:hover{
    padding-left: 2px;
}


/* ===================================
    Kontakt Section
====================================== */

section#kontakt{
    background-color: var(--color-grey-light);
    color: var(--color-grey);
}

section#kontakt .laden{
    color: var(--color-grey-dark);
}

section#kontakt h2{
    font-size: 16px;
}

section#kontakt p:first-of-type{
    font-size: 18px;
}

section#kontakt p, section#kontakt ul{
    font-size: 14px;
}

section#kontakt p{
    display: block;
}

section#kontakt .ul{
    text-decoration: underline;
}

section#kontakt span.tab{
    font-size: 14px;
    left: 80px;
}

section#kontakt li span.tab{
    left: 170px;
}

section#kontakt a{
    color: var(--color-grey);
}

section#kontakt a:hover{
    text-decoration: underline;
}

section#kontakt #osmap{
    height:400px;
    border:5px solid var(--color-white);
}

/* Small */
@media screen and (min-width: 576px) {

}

/* Medium */
@media screen and (min-width: 768px) {
    section#kontakt span.tab{
        position: absolute;
    }
}

/* Large */
@media screen and (min-width: 992px) {
}

/* XL */
@media screen and (min-width: 1200px) {
}


/* ===================================
    Footer Section
====================================== */

section#footer{
    padding: 20px 0;
    border-top: 3px solid var(--color-rgm);
}


/* ===================================
    Impressum / Datenschutz Page
====================================== */

section#impressum, section#datenschutz{
    padding-top: 200px;
}

section#impressum .content-box, section#datenschutz .content-box{
    margin: 0 5%;
}

section#impressum h1, section#datenschutz h1{
    font-size: 16px;
    font-weight: bold;
}

section#impressum h2, section#datenschutz h2{
    font-size: 16px;
    font-weight: bold;
}

section#impressum h3, section#datenschutz h3{
    font-size: 14px;
    font-weight: bold;
}

section#impressum p, section#impressum li,
section#datenschutz p, section#datenschutz li{
    font-size: 12px;
}

section#datenschutz .widerspruch{
    border: 1px solid #7e8186;
    margin: 20px 2px;
    padding: 10px 20px;
}

/* Small */
@media screen and (min-width: 576px) {

}

/* Medium */
@media screen and (min-width: 768px) {

}

/* Large */
@media screen and (min-width: 992px) {
}

/* XL */
@media screen and (min-width: 1200px) {
}
