/*
Theme Name: imago.studio theme
Theme URI: https://imago.studio
Description: Standard Theme
Author: imago.studio
Author URI: https://imago.studio
*/



@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-MediumItalic.woff2') format('woff2'),
        url('/fonts/Roboto-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Italic.woff2') format('woff2'),
        url('/fonts/Roboto-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Thin.woff2') format('woff2'),
        url('/fonts/Roboto-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Medium.woff2') format('woff2'),
        url('/fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-ThinItalic.woff2') format('woff2'),
        url('/fonts/Roboto-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Light.woff2') format('woff2'),
        url('/fonts/Roboto-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-BlackItalic.woff2') format('woff2'),
        url('/fonts/Roboto-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Regular.woff2') format('woff2'),
        url('/fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-LightItalic.woff2') format('woff2'),
        url('/fonts/Roboto-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-BoldItalic.woff2') format('woff2'),
        url('/fonts/Roboto-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Black.woff2') format('woff2'),
        url('/fonts/Roboto-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Bold.woff2') format('woff2'),
        url('/fonts/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



html{
  margin:0px;
  padding:0px;
  -webkit-box-shadow: none!important;
	-moz-box-shadow: none!important;
	scroll-behavior: smooth; 
	
}

 body{
font-family: 'Roboto', Arial, sans-serif;
font-size:23px;
color:#333333;
margin:0px;
padding:0px;
line-height:170%;
background:#ebebeb;
}

.entry-title {
  display: none;
}

main {max-width:3840px;margin:auto; background:white;}
.schatten {box-shadow: 0px 0px 15px rgba(0,0,0,0.15);}

.margin1 {margin-top:30px;}
.bluecolor {background:blue;}

.food_mobile {display:none;}
.body_start {overflow:hidden;}

.work_leistungen ul
{margin-top:-20px;}

img
{
max-width:100%; height:auto;
}

a:link      {color:#008ddb; text-decoration:none;}
a:visited   {color:#008ddb; text-decoration:none;}
a:active    {color:#008ddb; text-decoration:none;}
a:hover     {color:#008ddb; text-decoration:underline;}
a:focus     {color:#919191; outline: none;}

h1 {font-family: 'Roboto', Arial, sans-serif!important;font-size:50px!important; margin:0px!important; font-weight:900!important; text-transform:uppercase; line-height:120%; color:black; }
h2 {font-family: 'Roboto', Arial, sans-serif!important;font-size:40px!important; font-weight:100!important; text-transform:uppercase;line-height:140%; margin:0px!important; padding:0px!important;}
h3 {line-height:140%;}

.datenschutz h2 {margin-top:60px;}
.datenschutz h3 {margin-top:30px;}

.startseite h1 {font-size:60px; margin:0px; font-weight:900; text-transform:uppercase; line-height:120%;}
.startseite-header{font-size:60px; margin:0px; font-weight:900!important; text-transform:uppercase; line-height:120%;}

.lizenzen h2 {margin-top:50px;}

.startseite h2 {font-weight:100; margin:0px; text-transform:uppercase;}
.startseite h3 {font-weight:100; margin:0px; text-transform:uppercase;}

.leistungen-index h1 {font-size:60px; margin:0px; font-weight:900; text-transform:uppercase;}
.leistungen-index h2 {font-family:'Roboto', arial, sans-serif; font-weight:100; margin:0px; text-transform:uppercase; }

.about h1 {font-size:60px; margin:0px; font-weight:900; text-transform:uppercase;}
.about h2 {font-family:'Roboto', arial, sans-serif; font-weight:100; margin:0px; text-transform:uppercase; }

.impressum h1  {font-size:60px; margin:0px; font-weight:900; text-transform:uppercase;}
.impressum h2  { font-weight:100; margin:0px; text-transform:uppercase;}

.sub-about h2 {font-size:60px!important; margin:0px; font-weight:900!important; text-transform:uppercase;}
.sub-about h3{font-size:35px; font-family:'Roboto', arial, sans-serif; font-weight:100; margin:0px; text-transform:uppercase; }


.leistungen-header h2 {font-size:60px; margin:0px; font-weight:900; text-transform:uppercase;}
.leistungen-header h3 {font-size:37px; font-family:'Roboto', arial, sans-serif; font-weight:100; margin:0px; text-transform:uppercase;}

.preise-index h1 {font-size:60px; margin:0px; font-weight:900; text-transform:uppercase;}
.preise-index h2 {font-family:'Roboto', arial, sans-serif; font-weight:100; margin:0px; text-transform:uppercase; }


.work-index h1 {font-size:60px; margin:0px; font-weight:900; text-transform:uppercase;}
.work-index h2 {font-family:'Roboto', arial, sans-serif; font-weight:100; margin:0px; text-transform:uppercase; }

.kalender_index h1 {font-size:60px; margin:0px; font-weight:900; text-transform:uppercase;}
.kalender_index h2 {font-family:'Roboto', arial, sans-serif; font-weight:100; margin:0px; text-transform:uppercase; }


.work-container-header {position:absolute; transform: rotate(-5deg);bottom:75px; left:30px;background:rgb(0,0,0,0.7);  color:white; padding:30px; box-sizing:border-box; font-weight:900; text-transform:uppercase; letter-spacing:2px; font-size:40px;  line-height:120%;}
.work-container-header2 {position:absolute; transform: rotate(-2deg);bottom:75px; left:30px;background:rgb(0,0,0,0.7);  color:white; padding:30px; box-sizing:border-box; font-weight:900; text-transform:uppercase; letter-spacing:2px; font-size:40px;  line-height:120%;}

.work-image {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;}
.work-image a:hover {filter:brightness(0.7); -webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;}



.work-container-sub {font-weight:300; position:absolute; transform: rotate(0deg);bottom:35px; letter-spacing:1px;left:50px; padding:10px; text-transform:uppercase; font-size:30px; background:whitesmoke; color:black;}

.startseite-leistungen h2 {font-size:60px; font-weight:200; padding-top:10px; margin:0px; text-transform:uppercase;}

.startseite-leistungen a {filter:brightness(1); -webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;-o-transition: all 0.4s linear;-ms-transition: all 0.4s linear;transition: all 0.4s linear;}

.startseite-leistungen a:hover {filter: brightness(0.7);}

.leistungen-startseite {position:absolute; bottom:150px; right:20px; color:white;}
.leistungen-startseite1 {position:absolute; bottom:150px; left:20px; color:black;}
.leistungen-startseite2 {position:absolute; bottom:150px; left:20px; color:white;}
.leistungen-startseite3 {position:absolute; bottom:150px; right:20px; color:black;}


.leistungen-startseite-back {position:absolute; bottom:150px; left:0px; background:white; width:100%; height:95px; opacity:0.7;}
.leistungen-startseite-back1 {position:absolute; bottom:150px; left:0px; background:black; width:100%; height:95px; opacity:0.4;}

.animation-wrapper {width:150%;overflow:hidden; background:black;}
.animation {animation-name: slider; position:relative;
animation-duration: 10s;  
animation-fill-mode: both;
 animation-iteration-count: infinite;}

.lizenzbedingungen h1 {font-size:60px; margin:0px!important; padding:0px!important; font-weight:900; text-transform:uppercase;}
.lizenzbedingungen2 {font-size:40px; font-weight:200; margin:0px; text-transform:uppercase; line-height:140%;}

.lizenzbedingungen h2 {margin:0px; padding-top:80px!important;}
.lizenzbedingungen h3 {margin:0px; padding-top:40px;}


@keyframes slider {
  0%   {left:-100px; top:0px;} 
  50%  {left:0px; top:0px;}
 100%  {left:-100px; top:0px;}
}

.logos {display:flex; width:100%; flex-wrap: wrap; justify-content:center; align-items:center;}

.logos1 {width:170px; height:auto; margin:25px;}
.logos2 {height:60px; width:auto; margin:25px;}
.logos3 {height:80px; width:auto; margin:25px;}

.work h1 {margin:0px; padding:0px; font-size:20px;}
.work h2 {margin:0px; padding:0px; font-size:50px;}
.work h3 {padding:0px; margin:0px;}

.leistungen h1 {margin:0px; padding:0px; font-size:20px;}
.leistungen h2 {margin:0px; padding:0px; font-size:70px; line-height:120%;}
.leistungen h3 {padding:0px; margin:0px;}


.standard h1 {margin:0px; padding:0px; font-size:30px; font-weight:bold;}
.standard h2 {margin:0px; padding:0px; font-size:30px; font-weight:bold;}



.datenschutz h1 {font-size:60px; margin:0px; padding:0px; font-weight:900; text-transform:uppercase;}
.datenschutz-main h2 {font-weight:100!important; padding-top:0px!important; margin:0px; text-transform:uppercase;}
.datenschutz h2 {padding-top:50px;}
.datenschutz h3 {padding-top:20px; margin:0px;}



video
{
height:auto;
max-width:100%;
}


.menubox h2 {font-size:20px; margin:0; padding:0px;}


.menubox_item {font-size:18px;}

.menubox_links div {background:white; padding-left:5px; padding:10px; box-sizing:border-box;}
.menubox_links ul {margin:0px; padding:0px; list-style-type:none;}
.menubox_links li {font-size:25px; line-height:170%;}
.menubox_links li a {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;display:block;}
.menubox_links li a:link {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;color:#000000; text-decoration:none;}
.menubox_links li a:visited {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;color:#000000; text-decoration:none;}
.menubox_links li a:active {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;color:#000000; text-decoration:none;}
.menubox_links li a:hover {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;color:#008ddb;}
.menubox_links li a:focus {outline: none;}

.menubox_links li img {width:20px; height:auto; position:relative; top:2px; padding-right:5px;filter: grayscale(1); opacity:0.5; -webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;}
.menubox_links li:hover img {filter: grayscale(0); opacity:1; -webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;}

 

.work_container div {background:white; padding-left:5px; padding:10px; box-sizing:border-box;}
.work_container ul {margin:0px; padding:0px; list-style-type:none;}
.work_container li {font-size:25px; line-height:170%;}
.work_container li a {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;display:block;}
.work_container li a:link {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;color:#000000; text-decoration:none;}
.work_container li a:visited {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;color:#000000; text-decoration:none;}
.work_container li a:active {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;color:#000000; text-decoration:none;}
.work_container li a:hover {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;color:#008ddb;}
.work_container li a:focus {outline: none;}

.work_container li img {filter: grayscale(1); opacity:0.5; -webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;}
.work_container li:hover img {filter: grayscale(0); opacity:1; -webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;}
.work_container li img {width:20px; height:auto; position:relative; top:2px; padding-right:5px;}




.produkte
{padding-top:70px; width:100%; max-width:3840px; background:white;}

 
.work
{padding-top:70px; width:100%; max-width:3840px; background:white;}

.leistungen
{padding-top:70px; width:100%; max-width:3840px; background:white;}

.standard
{padding-top:120px; width:100%; max-width:3840px; background:white;}

.standard-template
{padding-top:120px; width:100%; max-width:3840px; background:white;}


.work-halbe-seite
{
padding-left:20px; padding-right:20px; box-sizing:border-box;
width:1200px; max-width:100%; margin:auto;
}

.kalender-mobil {display:none;}



.produkte-halbe-seite
{
padding-left:20px; padding-right:20px; box-sizing:border-box;
width:1200px; max-width:100%; margin:auto;
}


.standard-halbe-seite
{
width:1200px; max-width:100%; margin-left:auto; margin-right:auto;
}


.work-wrapper {width:100%; background:whitesmoke;}

.leistungen-wrapper {width:100%; background:white;}

.produkte-wrapper {width:100%; background:white;}

.padding1 {padding-top:15px;}

.leistungen-halbe-seite
{
padding-left:20px; padding-right:20px; box-sizing:border-box;
width:1200px; max-width:100%; margin:auto;
}

.work-halbe-seite
{
padding-left:20px; padding-right:20px; box-sizing:border-box;
width:1200px; max-width:100%; margin:auto;
}


.logo {width:250px; height:auto;}

.logobar-resp
{
display:none;
}

.logobar
{
position:absolute; left:10px; top:10px;z-index:10002;
}

.mobile {display:none;}

.startbutton {position:absolute;left:0px; top:50px; width:100%; z-index:10004;}
.startbutton img {padding-left:5px; padding-right:5px; width:80px; height:auto; }

.menubox_wrapper {width:100%; position:absolute; top:0px; right:0px; height:100%; background:black; z-index:10001;}

.spacer {padding-top:50px;}
.menubox {
position:fixed; 
width:500px; 
height:calc(100% + 10px);
bottom:-10px; 
right:0px; 
background:whitesmoke; 
z-index:10006;
box-sizing:border-box;
color:black;
animation-name: favwindow;
animation-duration: 0.5s;  
animation-fill-mode: both;
padding-left:20px;
padding-right:20px;
padding-top:20px;
padding-bottom:20px;
overflow:scroll;
max-width:100%;
font-size:19px;
} 


.menu-responsive {
position:fixed; 
width:600px;
max-width:100%; 
height:calc(100% + 10px);
bottom:-10px; 
right:0px; 
background:black; 
z-index:10006;
box-sizing:border-box;
color:white;
animation-name: favwindow;
animation-duration: 0.5s;  
animation-fill-mode: both;
padding-left:15px;
padding-right:15px;
padding-top:15px;
padding-bottom:15px;
overflow:scroll;

} 


.menubox_close
{
position:fixed;
width:50px;top:15px; text-align:right;
right:25px;
z-index:10006;}

.menubox_item
{
position:relative; 
animation-name: fadein;
animation-duration: 0.5s; 
animation-fill-mode: both;
animation-timing-function: ease-in-out;   
-webkit-animation-timing-function: ease-in-out; 
z-index:10005;
}


.kontakt_resp_submenu
{font-size:17px; line-height:150%;}



.responsive-kontakt a:hover {text-decoration:underline!important;}

.menubox_item a {color:#333333;}


.menubox_delay{animation-delay: 0s; -webkit-animation-delay: 0s;}
.menubox_delay1{animation-delay: 0.1s; -webkit-animation-delay: 0.1s;}
.menubox_delay2{animation-delay: 0.12s; -webkit-animation-delay: 0.12s;}
.menubox_delay3{animation-delay: 0.14s; -webkit-animation-delay: 0.14;}
.menubox_delay4{animation-delay: 0.16s; -webkit-animation-delay: 0.16s;}
.menubox_delay5{animation-delay: 0.18s; -webkit-animation-delay: 0.18s;}
.menubox_delay6{animation-delay: 0.20s; -webkit-animation-delay: 0.20s;}
.menubox_delay7{animation-delay: 0.22s; -webkit-animation-delay: 0.22s;}
.menubox_delay8{animation-delay: 0.24s; -webkit-animation-delay: 0.24s;}
.menubox_delay9{animation-delay: 0.26s; -webkit-animation-delay: 0.26s;}
.menubox_delay10{animation-delay: 0.28s; -webkit-animation-delay: 0.28s;}
.menubox_delay11{animation-delay: 0.30s; -webkit-animation-delay: 0.30s;}
.menubox_delay12{animation-delay: 0.32s; -webkit-animation-delay: 0.32s;}
.menubox_delay13{animation-delay: 0.34s; -webkit-animation-delay: 0.34s;}

.kontakt_resp
{
background:black;
}

.resp-button {animation-name: button_close;
animation-duration: 0s; 
animation-fill-mode: both;
animation-timing-function: ease-in-out;   
-webkit-animation-timing-function: ease-in-out; ;}

 
.respmenu {border-bottom: dimgray solid 1px;} 
 
.menu-responsive-button {display:none; position:fixed; top:8px;right:10px; color:white;}





.respmenu-submenu li:first-child {padding-top:15px;line-height:200%!important;}
.respmenu-submenu li {margin-left:15px; font-size:20px!important; line-height:200%!important;}
.respmenu-submenu li:last-child {margin-bottom:30px;line-height:200%!important;}

.respmenu_header { height: 55px;position:fixed; width:100%; top:0px; left:0px; background:black; border-bottom:solid dimgray 1px; z-index:10006;}
.button_close 
{
width:30px; height:30px;
} 

.button_close:hover 
{animation-name: button_close;
animation-duration: 0.5s; }

@keyframes menu_button {
from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
}

@keyframes button_close {
from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(180deg); 
        }
}

.work_info
{
line-height:170%; 
}

@keyframes favwindow {
  from {right: -500px;}
  to {right: 0px;}
}


@keyframes fadein {
    from {left: 200px;}
    to {left: 0px;}
    }

.logostyle {color:#008ddb; font-weight:bold;}
.imago-work {margin-top:50px;}




.kontakt {font-weight:300;font-size:25px;}

.overlay {position:absolute; z-index:10005; left:0px; top:0px; width:100%; height:100%; background:black; opacity:0.5;}

.flex-webdesign
{
display:flex; justify-content: space-around;
}


.flex-webdesign-item
{
width:30%
}

.bubble-wrapper {position:absolute; top:0px; left:0px; width:100%; box-sizing:border-box;}

.bubble-inside {width:2560px; max-width:100%; margin:auto; padding:50px; box-sizing:border-box; display:flex; justify-content:space-between;}

.bubble {
box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.4);
display:flex;
flex-direction: column; 
align-items:center; 
justify-content:center;
background:white; 
color:black; 
font-size:28px; 
border-radius:50%; 
width:300px; height:300px;
}


.bubble-wrapper a {color:black;}
.bubble-wrapper a:hover {text-decoration:none; color:#008ddb;}

.bubble-titel {font-weight:100; text-transform:uppercase; text-align:center;}

.bubble-sub {font-size:20px; text-align:center;}
.mail {font-size:20px; width:250px; text-align:center;background:#008ddb; padding:20px; color:white; margin-right:15px; border-radius: 10px; border:transparent;}
.phone {font-size:20px; width:250px; text-align:center; padding:20px; color:white; margin-right:15px; border-radius: 10px; border:transparent;}
.phone_ja {background:#17a521;;}
.phone_nein {background:red;}

.mail:hover {cursor:pointer; background:#0476a8;}
.phone_ja:hover {cursor:pointer; background:green;}
.phone_nein:hover {cursor:not-allowed; background:red;}
.available {font-size:15px;background:#d9ffdc; border:solid 1px #bfffc4;padding:10px; color:green; margin-right:10px; border-radius: 10px;}
.none_available {font-size:15px;background:#fee3e3; border:solid 1px #fee3e3;padding:10px; color:red; margin-right:10px; border-radius: 10px;}



.webdesign-header {padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:10px; background:#008ddb; color:white; border-radius:20px 20px 0 0;}
.webdesign-content {background:whitesmoke; padding:20px;}

.fotografie_leistungen ul {margin-left:40px; margin-top:0px; padding:0px; list-style-type:none; list-style-image: url('/images/food_pfeil.png');}

.fotografie_leistungen li {margin-top:20px;}
.fotografie_leistungen li:last-child {margin-bottom:20px;}

.druckdesign_leistungen ul {margin:40px; padding:0px; list-style-type:none; list-style-image: url('/images/food_pfeil.png');}
.druckdesign_leistungen li {margin-top:20px;}

.webanwendungen_leistungen ul {margin:40px; padding:0px; list-style-type:none; list-style-image: url('/images/food_pfeil.png');}
.webanwendungen_leistungen li {margin-top:20px;}

.webseitenbetreuung_leistungen ul {margin:40px; padding:0px; list-style-type:none; list-style-image: url('/images/food_pfeil.png');}
.webseitenbetreuung_leistungen li {margin-top:20px;}



.menu_container ul {margin:0px; padding:0px; list-style-type:none;}
.menu_container li {font-size:20px; line-height:250%;}
.menu_container li a {color:white; -webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;display:block;}
.menu_container li a:link {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;color:white; text-decoration:none;}
.menu_container li a:visited {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;color:white; text-decoration:none;}
.menu_container li a:active {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;color:white; text-decoration:none;}
.menu_container li a:hover {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;color:white;}
.menu_container li a:focus {outline: none;}
.ueber_mich {max-width:400px; width:100%; margin:auto;}



.produkte_index {margin-bottom:40px; display:flex; justify-content:space-between;}
.produkte_item {width:47%; box-sizing:border-box;}
.produkte_item img {border-top:solid 1px #ebebeb;border-left:solid 1px #ebebeb; box-shadow: 10px 10px 10px lightgray;}
.produkte_item img:hover {border-top:solid 1px #ebebeb;border-left:solid 1px #ebebeb; box-shadow: 10px 10px 10px gray;}

.produkte_weitere_index {margin-bottom:40px; display:flex; gap:50px;}
.produkte_weitere img {margin-top:30px; margin-bottom:20px; box-shadow: 10px 10px 10px gray;}
.produkte_weitere img:hover {box-shadow: 10px 10px 10px dimgray;}

.kalender_vert {width:100px; height:auto;}


.kalender {box-shadow: 10px 10px 10px lightgray; margin-bottom:10px;}
.kalender1 {box-shadow: 10px 10px 10px lightgray; margin-bottom:10px;}

.kalender_thumbnail {padding-left:30px;}
.kalender_thumbnail img {-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;}
.kalender_thumbnail img:hover {transform: scale(1.1);-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;}

h2.kalender_plus {font-size:35px; margin-top:50px;}


.logo-resp {width:150px; height:auto;}



/** Responsive Layout **/



@media only screen and (max-width: 1400px)
{
.food_desktop {display:none;}
.food_mobile {display:inline;}
.startseite-leistungen h2 {font-size:50px;}
.leistungen-startseite {}
.leistungen-startseite1 {}
.leistungen-startseite-back {height:80px;}
.leistungen-startseite-back1 {height:80px;}
}


@media only screen and (max-width: 1250px)
{
.startseite-leistungen h2 {font-size:40px;}
.leistungen-startseite {bottom:100px;}
.leistungen-startseite1 {bottom:100px;}
.leistungen-startseite2 {bottom:100px;}
.leistungen-startseite3 {bottom:100px;}
.leistungen-startseite-back {bottom:100px; height:65px;}
.leistungen-startseite-back1 {bottom:100px; height:65px;}
.bubble {width:250px; height:250px;}
.bubble-titel {font-size:18px;} 
.bubble-sub {font-size:18px;}
}

@media only screen and (max-width: 1150px)
{
.kalender1 {display:none;}
.kalender-mobil {display:inline; text-align:right;}
.work-container-header {font-size:25px; letter-spacing:1px; padding:15px; bottom:80px;}
.work-container-header2 {font-size:25px; letter-spacing:1px; padding:15px; bottom:80px;}
.work-container-sub {font-size:20px; padding:5px;}
}


@media only screen and (max-width: 1000px)
{
.flex-webdesign
{
display:block;
}

.menubar {display:none;}
.work {margin-top:-20px;}
.leistungen{margin-top:-20px;}

.menu-responsive-button {display:inline;}

.flex-webdesign-item
{
width:800px; max-width:100%; padding:20px; box-sizing:border-box;margin:auto;
}
.logobar {width:150px; height:auto; position:fixed;}
.logo {width:150px; height:auto;}

}

@media only screen and (max-width: 950px)
{
.startseite-leistungen h2 {font-size:30px;}
.leistungen-startseite {bottom:100px;}
.leistungen-startseite1 {bottom:100px;}
.leistungen-startseite2 {bottom:100px;}
.leistungen-startseite3 {bottom:100px;}
.leistungen-startseite-back {bottom:100px; height:50px;}
.leistungen-startseite-back1 {bottom:100px; height:50px;}
.bubble-sub {display:none;}
.bubble {display:none;}
.bubble-titel {display:none;}
}


@media only screen and (max-width: 780px) 
{
.standard {margin-top:70px;}
.work-halbe-seite {padding-left:15px; padding-right:15px;font-size:18px; line-height:200%;}
.leistungen-halbe-seite {padding-left:15px; padding-right:15px;font-size:18px; line-height:200%;}
.produkte_index {display:inline; margin-top:0px;}
.produkte_item {width:100%; margin-bottom:20px;}
.produkte_item img {filter: drop-shadow(5px 5px 5px lightgray);}
.produkte_item img:hover {filter: drop-shadow(5px 5px 5px gray);}
.produkte h2 {font-size:25px;}
.produkte h3 {font-size:20px;}
.preise-index h1 {font-size:30px;}
.preise-index h2 {font-size:25px; font-weight:300;}
.work-index h1 {font-size:30px;}
.work-index h2 {font-size:25px;}
.preise_index h1 {font-size:25px;}
.preise_index h2 {font-size:25px;}
.kalender_index h1 {font-size:30px;}
.kalender_index h2 {font-size:25px; font-weight:300;}
.leistungen-index h1 {font-size:30px;}
.leistungen-index h2 {font-size:25px; font-weight:300;}
.leistungen-header h3 {font-weight:300;kalender_index}
.impressum h2 {font-weight:300;}

.lizenzbedingungen h1 {font-size:30px;}
.lizenzbedingungen2 {font-size:25px; font-weight:300;}

.work h2 {font-size:25px;}
.work h3 {font-size:20px;}

.about h1 {font-size:30px;}
.about h2 {font-size:25px; font-weight:300;}
.sub-about h2 {font-size:30px; font-weight:900;}
.sub-about h3 {font-size:25px; font-weight:300;}

.leistungen h2 {font-size:30px;}
.leistungen h3 {font-size:25px;}
.standard h2 {font-size:30px;}
.standard h3 {font-size:25px;}
body {font-size:20px;}
.produkte_weitere_index {gap:25px;}
.startseite-leistungen h2 {font-size:50px;}
.leistungen-startseite {right:20px; left:initial;}
.leistungen-startseite1 {right:20px; left:initial;}
.leistungen-startseite2 {right:20px; left:initial;}
.leistungen-startseite3 {right:20px; left:initial;}
.leistungen-startseite-back {height:80px;}
.leistungen-startseite-back1 {height:80px;}
.startseite h1 {font-size:40px;}
.startseite h2 {font-weight:300;}
h1 {font-size:30px;}
h2 {font-size:25px;}
.startseite-header {font-size:40px;}
.work-container-header{bottom:75px;}
.work-container-header2{bottom:75px;}

}





@media only screen and (max-width: 700px) 
{
.desktop{display:none;}
.mobile {display:inline;}

.mail {background:#008ddb; padding:15px; color:white; margin-right:10px; border-radius: 10px; border:transparent;}
.phone {padding:15px; color:white; margin-right:10px; border-radius: 10px; border:transparent;}
.logos1 {width:75px; height:auto; margin:8px;}
.logos2 {height:30px; width:auto; margin:8px;}
.logos3 {height:40px; width:auto; margin:8px;}
.mail {width:200px; padding:10px;}
.phone {width:200px; padding:10px;}

.startbutton {display:none;}
}

@media only screen and (max-width: 600px) 
{
.startseite-leistungen h2 {font-size:40px;}
.leistungen-startseite-back {bottom:100px; height:65px;}
.leistungen-startseite-back1 {bottom:100px; height:65px;}
.datenschutz h1 {font-size:30px;}
.datenschutz-main h2 {font-size:25px; font-weight:300!important;}
}

@media only screen and (max-width: 500px) 
{
.kalender {margin-bottom:0px; }
.startseite-leistungen h2 {font-size:30px; font-weight:300;}
.leistungen-startseite-back {bottom:100px; height:50px;}
.leistungen-startseite-back1 {bottom:100px; height:50px;}}