/*----------------------------------------------------------------------------------------------------------------*/
/*GENERAL SETTINGS*/
* {
    box-sizing: border-box;
    font-family: 'Old Standard TT', 'sans-serif';
}

html, body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-size: 100%;
}

a {text-decoration: none;}

.mobile_center {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);}

/*.section-wrapper {
    width: 100%;
    height: 100vh;
}*/

.wrapper {
 height: 100%;
 width: 100%;
 position: relative;
 float: left;
}

body {
    background-image: url('../images/background/eggy_background.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

/*END GENERAL SETTING*/
/*------------------------------------------------------------------------------------------------------------------*/

#slide_show {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #7d131e;
    float:left;
}

.images {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    margin: 0;
    transform: scale(1,1);
    animation: zoom 100s linear infinite;
    z-index: 1;
    display: none;
}

#images_1 {background-image: url('../images/slideshow/image_1.jpeg');}
#images_2 {background-image: url('../images/slideshow/image_2.jpg');}
#images_3 {background-image: url('../images/slideshow/image_3.jpg');}
#images_4 {background-image: url('../images/slideshow/image_4.jpg');}
#images_5 {background-image: url('../images/slideshow/image_5.jpg');}

/*zooming effect for slides*/
@keyframes zoom {
    0% {transform: scale(1,1);}
    10% {transform: scale(1.1,1.1);}
    20% {transform: scale(1.2,1.2);}
    30% {transform: scale(1.3,1.3);}
    40% {transform: scale(1.4,1.4);}
    45% {transform: scale(1.45,1.45);}
    50% {transform: scale(1.5,1.5);}
    55% {transform: scale(1.5,1.5);}
    60% {transform: scale(1.45,1.45);}
    70% {transform: scale(1.3,1.3);}
    80% {transform: scale(1.2,1.2);}
    90% {transform: scale(1.1,1.1);}
    100% {transform: scale(1,1);}
}

/*background color/texture you can control that becomes visible during
morphing process in slideshow, creates different moods*/
#black-background {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    background-color: black;
}



/*---------------------------------------------------------------------------------------------------------------*/
/*HEADLINE OVER SLIDE SHOW*/
#headline-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
}

.center-tag {
    width: 97%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    position: relative;
    border: 1px solid #7d131e;
    background-color: rgba(241,241,241,0.7);
    padding:1rem;
    padding-right:1.6rem;
    padding-left:1.6rem;}

#main-headline {
    color: #7d131e;
    font-size: 2.9rem;
    width: 100%;
    text-align:center;}

#intro-line {
    width: 100%;
    height: 1px;
    background-color: #7d131e;
    border: 0;}

#subline {
    color: #7d131e;
    width: 100%;
    text-align:center;
    font-size: 1.5rem;}

.maps-circle {
    height: 8rem;
    width: 8rem;
    border-radius: 50%;
    bottom: 8%;
    left:50%;
    transform:translateX(-50%);
    position: absolute;
    background-image: url('../images/maps.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #f1f1f1;
    text-align: center;
    font-size: 2rem;
    z-index: 1;}

#maps-layover{
    height: 8rem;
    width: 8rem;
    border-radius: 50%;
    bottom: 8%;
    left:50%;
    transform:translateX(-50%);
    position: absolute;
    background-color: rgba(125,19,30,0.8);
    color: #f1f1f1;
    text-align: center;
    font-size: 2rem;
    z-index: 2;
}

#tooltiptext {display: none;}
/* END HEADDDERRRR*/
/*-------------------------------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------------------------------*/
/*INTERSECTION (ZITAT + AKTION)*/
.intersection_wrapper {
    width: 100%;
    float: left;
}

.text_wrapper {
    width: 100%;
    height: 100%;
    line-height: 1.5;
}

.header {
    float: left;
    width: 100%;
    text-align: center;
    font-weight: bold;
    color: #7d131e;
    font-size: 1.6rem;
}

.line_separator_wrapper {
    width: 100%;
    float: left;
    margin-bottom: 3px;
}

.line_separator {
    width: 80%;
    background-color: #7d131e;
    border: 0;
    height: 1px;
    margin-top: 1px;
    margin-bottom: 2px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.intersection_subline {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    color: #7d131e;}


.intersection_text {
    float: left;
    width: 100%;
    text-align: center;
    padding: 3px;
    font-size: 1.3rem;
    opacity: 0.9;
}

.intersection-image {
    float: left;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

#desktop_intersection_image {;display: none}

.center-image {
    height: 10rem;
    width: 10rem;
    border-radius: 50%;
    border: 1px solid #7d131e;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
/*END INTERSECTION*/
/*---------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------------------------*/
/*AKTION SPECIAL*/
#sale {
    width: 100%;
    padding: 1rem;
    margin-top: 40px;
    height: auto;
    float: left;}

#double_border {
    width: 100%;
    height: 100%;
    float: left;
    padding: 1rem;
    border: 4px solid #7d131e;
    text-align: center;}

#sale_header {font-size: 1.8em;font-weight: bold;}
#sale_text{font-size: 1.2rem;}
#sale_image_mobile {background-image: url('../images/background/QuasiColdBrew.jpg');}
/*END AKTION SPECIAL*/
/*-----------------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------------------------------*/
/*UNVERPACKT*/
.unverpackt {display: none;}

.unverpackt-mobile {
    width: 100%;
    position: relative;
    float: left;
    padding: 0.8rem;
}

.unverpackt-mobile img {
    width: 100%;
    float: left;
}
/*ENDE UNVERPACKT*/
/*-----------------------------------------------------------------------------------------------------------------*/

.product_slider {display:none;}

/*----------------------------------------------------------------------------------------------------------------*/
/*PRODUCT SLIDER*/

.mobile_slider {
    width: 100%;
    float: left;
    position: relative;
    padding-left: 1rem;
    padding-right:1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size:100%;}

.myslides {
    display: none;
    float: left;
    width: 100%;
    height: 100%;}

.mobile_product_picture_wrapper {
    width: 100%;
    float: left;
    height: 20rem;
    margin: 0;
}

.product_picture {
    display: block;}

.height_limit {height: 90%;}
.width_limit {width: 70%;}

.mobile_product_header {
    width: 100%;
    float: left;
    text-align: center;
    color: #7d131e;
    font-weight: bold;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    }

.mobile_product_description {
    line-height: 1.5;
    width: 100%;
    float: left;
    padding: 0.5rem;
    text-align: center;
    font-size: 1.2rem;
    }

.link_to_shop {
    width: 100%;
    float: left;
    text-align: center;
    padding: 1rem 0;
    font-size: 1.2rem;}

#mobile_link {color: #7d131e;}

.mobile_arrows {
    font-family: 'Open Sans', sans-serif;
    position: absolute;
    top: 8rem;
    height: 4rem;
    z-index: 3;
    width: 4rem;
    text-align: center;
    color: #7d131e;
    font-size: 4rem;
    border-radius: 50%;
    border: 1px solid #7d131e;
}

.mobile_arrows:hover {
    cursor: pointer;
}

.mobile_right {right:3%;}
.mobile_left {left:3%;}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/*END PRODUCT SLIDERS*/
/*------------------------------------------------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------------------------------------------*/
/*ZOOM CIRCLES*/
#second_section {
    width: 100%;
    height: auto;
    float: left;
    padding-left: 3px;
    padding-right: 3px;}

.circles_background {display: none;}
.circle {display: none;}

.picture_title_wrapper {
    width: 50%;
    height: auto;
    float: left;
    margin-top: 1rem;
    margin-bottom: 1rem;}

.mobile_circle_wrapper {
    width: 100%;
    height: 8.5rem;
    float: left;
    position: relative;}

.mobile_circle_title {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 1rem;
    padding: 1px 0;
    font-size: 1.2rem;
    font-variant: small-caps;
    }

.mobile_circle {
    height: 8.5rem;
    width: 8.5rem;
    border-radius: 50%;
    border: 1px solid #7d131e;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    }

.click_icon_wrapper {
    height: 8.5rem;
    width: 8.5rem;
    position: absolute;
    z-index: -1;
    }

.double_border_circle {
    height: 9rem;
    width: 9rem;
    position: absolute;
    border-radius: 50%;
    border: 1px solid #7d131e;
    z-index: -2;
}

.triple_border_circle {
    height: 9.6rem;
    width: 9.6rem;
    position: absolute;
    border-radius: 50%;
    border: 1px solid #7d131e;
    z-index: -3;
}

.click_icon {
    width: 20%;
    height: 20%;
    position: absolute;
    bottom: 0;
    right: 0;}

#mobile_gewurz {background-image: url('../images/sortiment/gewuerze.jpg');}
#mobile_sonstige_feinkost {background-image: url('../images/sortiment/ol-feinkost.JPG');}
#mobile_schokolade {background-image: url('../images/sortiment/schokolade.jpg');}
#mobile_kaffee_hardware {background-image: url('../images/sortiment/zubereiter.jpg');}
#mobile_bohnen {background-image: url('../images/sortiment/kaffee.jpg');}
#mobile_ums_kaffeetrinken {background-image: url('../images/sortiment/tassenUndCo.jpg');}

.circle_layover {display: none;}
.circle_text_box {display: none;}

#mobile_modal {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: modal_zoom 0.8s;}

#mobile_modal_content {
    width: 80%;
    height: auto;
    float: left;
    }

#mobile_modal_circle_wrapper {
    width: 100%;
    height: 100%;
    float: left;
    margin-bottom: 2rem;}

#mobile_modal_circle {
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    border: 1px solid #7d131e;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    }

#mobile_modal_text_wrapper {
    display: none;
    width: 100%;
    float: left;
    padding: 0.5rem;
    border: 1px solid #7d131e;
    background-color: rgba(245,245,245,1);
    }

#mobile_modal_header {font-size: 1.6rem;}
#mobile_modal_text {color: black;font-size: 1.1rem;}


@keyframes modal_zoom {
    from {transform: scale(0,0);}
    to {transform: scale(1,1);}
}
/*END ZOOM CIRCLES*/
/*----------------------------------------------------------------------------------------------------------------*/
#tablet_circles {display: none;}

.modal {display: none;}
/*-------------------------------------------------------------------------------------------------------------------*/
/*EMPLOYEES SECTION*/
#employees_section {display: none;}

.mobile_employee_slider {
    margin-top: 40px;
    margin-bottom: 40px;
    width: 100%;
    float: left;
    position: relative;}

.mobile_employee_header {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
    color: #7d131e;
    }

.mobile_slide_box {
    position: relative;
    width: 100%;
    float: left;
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    margin-top: 1rem;
}


.mobile_employee {
    width: 50%;
    height: 100%;
    display: inline-block;
}

.mobile_portrait_wrapper {
    width: 100%;
    float: left;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 0;
    margin-right: 0;
    height: 10.5rem;
    position: relative;}

.mobile_portrait {
    height: 9.5rem;
    width: 9.5rem;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    border: 1px solid #7d131e;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.employee_click_icon {
    height: 9.5rem;
    width: 9.5rem;
    position: absolute;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
    }

.employee_click {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 20%;
    width: 20%;}

.double_border_employ {
    height: 10rem;
    width: 10rem;
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    border: 1px solid #7d131e;
}

.triple_border_employ {
    height: 10.5rem;
    width: 10.5rem;
    position: absolute;
    z-index: -3;
    border-radius: 50%;
    border: 1px solid #7d131e;
}

#adriana {background-image: url('../images/portrait/adriana.jpg');}
#sophia {background-image: url('../images/portrait/sophia.jpg');}
#clara {background-image: url('../images/portrait/clara.jpg');}
#celine {background-image: url('../images/portrait/celine.jpg');}
#imran {background-image: url('../images/portrait/imran.jpg');}

.mobile_employee_name {
    width: 100%;
    float: left;
    text-align: center;
    font-size: 1.2rem;}

#mobile_modal_profile {
    display: none;
    width: 100%;
    float: left;}

#mobile_modal_portrait {
    display: block;
    float: left;
    width: 100%;}
/*END EMPLOYEES SECTION*/
/*----------------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------------------------------------------*/
/*ROASTING LOCATIONS*/
#world_map {
    margin-top: 3rem;
    width: 100%;
    float: left;
    margin-bottom: 3rem;
}

#world_map_header {
    color: #7d131e;
    width: 100%;
    float: left;
    text-align: center;
    font-size: 1.7rem;
    padding: 0 1rem;
}

#world_map_image {
    margin-top: 1rem;
    width: 100%;
    display: block;
    padding-left: 4px;
    padding-right: 4px;
}
/*END ROASTING LOCATIONS*/
/*------------------------------------------------------------------------------------------------------------------*/


#mobile_quote_image_wrapper {display: none;}
/*----------------------------------------------------------------------------------------------------------------*/
/*QUOTE SECTION*/
#quote_section {
    width: 100%;
    padding: 0.8rem;
    margin-top: 3rem;
    height: auto;
    float: left;
}

#autor {
    margin-top: 2rem;
    padding-top: 2rem;
    width: 100%;
    text-align: right;
    font-size: 1.1rem;
}

#quote_image {
    background-image: url('../images/portrait/atabay_zitatbild.jpg');
    height: 13rem;
    width: 13rem;}
/*END QUOTE SECTION*/
/*---------------------------------------------------------------------------------------------------------------*/


#general_info {display: none;}
#impressum {display: none;}
/*------------------------------------------------------------------------------------------------------------------*/
/*FOOTER; IMPRESSUM; INFORMATION*/
footer {
    width: 100%;
    float: left;
    height: auto;
    padding: 1rem;
    display: block;
}

#float_foot {float: left;}

#footer_line {width: 70%; float:none;}

.link {color: rgba(125, 19, 30, 0.9);}

.foot_wrapper {
    float: left;
    width: 100%;
    text-align: center;
    color: rgba(125, 19, 30, 0.9);
}

#mobile_general_info {
    font-size: 1.6rem;
    color: rgba(125, 19, 30, 1);
}

#mobile_tel {
    font-size: 1.3rem;
    color: rgba(125, 19, 30, 0.9);}

#call_number {color: rgba(125, 19, 30, 0.9);}

#mobile_email {color: rgba(125, 19, 30, 0.9);}

#sm_wrapper {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.social_media{
    float: left;
    height: 43px;
    width: 43px;
    margin-left: 4px;
    margin-right: 4px;
}

.social_media_icons {
    width: 100%;
    height: 100%;
}

.round_icons {
    width: 100%;
    height: 100%;
}

#mobile_impressum  {font-size: 1rem; text-align: center;}
/*END FOOTER*/
/*------------------------------------------------------------------------------------------------------------------*/