@media all and (max-width: 699px) {
     * {
         margin: 0;
         padding: 0;
         outline: none;
         border: none;
         -webkit-box-sizing: border-box;
         scroll-behavior: smooth;
    }
     html {
         font-family: Tahoma, sans-serif;
    }
     body {
         background-image: linear-gradient(to right, white 30%, #e5e8ee 100%);
         background-size: cover;
    }
     p {
         font-size: 1.3em;
         letter-spacing: 0.02em;
         line-height: 1.5em;
    }
     a {
         font-size: 1.3em;
         letter-spacing: 0.02em;
         line-height: 1.5em;
    }
     h1 {
         font-size: 23px;
         letter-spacing: 0.02em;
         line-height: 1.2em;
    }
     h2 {
         font-size: 1.6em;
         letter-spacing: 0.02em;
         line-height: 1.2em;
    }
     h3 {
         font-size: 1.3em;
         letter-spacing: 0.02em;
         line-height: 1.5em;
    }
     h4 {
         font-size: 1.5em;
         letter-spacing: 0.02em;
         line-height: 1.5em;
    }
    /*--------------------------------------------------------------------------------------------------Cookiebanner*/
     #footer-cookie, #footer-cookie * {
         box-sizing: border-box;
    }
     #footer-cookie {
         display: none;
         position: fixed;
         bottom: 0px;
         left: 0px;
         width: 100%;
         height: 60px;
         padding-left: 30px;
         padding-right: 30px;
         line-height: 60px;
		 background-color: #465a64;
         color: white;
         z-index: 2;
    }
     #footer-cookie ahref {
         color: yellow;
         font-weight: bold;
    }
     #footer-cookie #description {
         float: left;
    }
     #footer-cookie #accept {
         float: right;
    }
     #footer-cookie #accept a {
         border: 5px solid #e4e4e4;
         border-radius: 5px;
         background-color: #e4e4e4;
         padding: 5px 10px;
         text-decoration: none;
         width: 10%;
         display: block;
         text-align: center;
    }
     #footer-cookie {
         padding-top: 30px;
         padding-bottom: 30px;
         line-height: inherit;
         height: auto;
    }
     #footer-cookie #description {
         width: 100%;
    }
     #footer-cookie #accept {
         width: 100%;
         margin-top: 15px;
    }
     #footer-cookie #accept a {
         width: 100%;
         display: block;
         text-align: center;
         font-size: 16px;
    }
     #description a {
         color: yellow;
         font-weight: bold;
         font-size: 16px;
    }
     #footer-cookie p {
         color: white;
         font-size: 16px;
    }
     #accept a {
         color: black;
         font-weight: bold;
         font-size: 16px;
    }
    /*--------------------------------------------------------------------------------------------------header*/
     #ueber-mich {
         visibility: hidden;
         height: 0px !important;
         position: absolute;
         margin: -120px;
         width: 0%;
         height: 0%;
    }
     #kontakt {
         visibility: hidden;
         height: 0px !important;
         position: absolute;
         margin: -120px;
         width: 0%;
         height: 0%;
    }
     #filme {
         visibility: hidden;
         height: 0px !important;
         position: absolute;
         margin: -120px;
         width: 0%;
         height: 0%;
    }
    /*--------------------------------------------------------------------------------------------------mobile */
     header img {
         position:absolute;
         top:15px;
         right:25px;
         z-index: 3;
    }
    /*--------------------------------------------------------------------------------------------------Button_Telefon*/
     #callout {
         display: none;
    }
     #callout img {
         display: none;
    }
     #calloutmob {
         position: fixed;
         background-color:  #0B2F3A;
         height: 55px;
         width: 110px;
         z-index: 2;
         top:42%;
         border-radius: 30px;
         right: -40px;
         color: white;
         font-size: 20px;
         font-weight: 500;
         box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
         -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
         -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
         box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    }
     #calloutmob img {
         margin-left: 20px;
         width: 35px;
         margin-top: 10px;
    }
     #callout {
         position: fixed;
         background-color:  #0B2F3A;
         height: 55px;
         width: 540px;
         z-index: 2;
         top: 310px;
         right: -465px;
         border-radius: 30px;
         margin-left: 50px;
         color: white;
         font-size: 20px;
         font-weight: 500;
         -webkit-transition: transform 500ms;
         transition: transform 500ms;
         -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
         -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
         box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
    }
     #callout img {
         margin-left: 22px;
         width: 37px;
         height: 37px;
         margin-top: 9px;
    }
     #callout a {
         top: 17px;
         text-decoration: none;
         color: white;
         left: 80px;
         position: absolute;
         font-size: 19px;
         font-weight: 700;
         line-height: 1.1em;
    }
     #callout a:hover {
         text-decoration: underline;
    }
     #callout:hover {
         transform: translate(-200px);
    }
     #calloutmob img {
         margin-left: 20px;
         width: 35px;
         height: 35px;
         margin-top: 10px;
    }
     #calloutmob2 {
         position: fixed;
         background-color:  #0B2F3A;
         height: 55px;
         width: 110px;
         z-index: 2;
         top: 375px;
         border-radius: 30px;
         right: -36px;
         color: white;
         font-size: 20px;
         font-weight: 500;
         box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
         -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
         -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
         box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
    }
     #calloutmob2 img {
         margin-left: 24px;
         width: 33px;
         height: 33px;
         margin-top: 11px;
    }
     #calloutmob3 {
         position: fixed;
         background-color:  #0B2F3A;
         height: 55px;
         width: 110px;
         z-index: 2;
         top: 440px;
         border-radius: 30px;
         right: -36px;
         color: white;
         font-size: 20px;
         font-weight: 500;
         box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
         -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
         -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
         box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
    }
     #calloutmob3 img {
         margin-left: 22px;
         width: 36px;
         height: 36px;
         margin-top: 9px;
    }
     #calloutmob2, #calloutmob3 {
         display: none;
    }
    /*--------------------------------------------------------------------------------------------------mobile */
     #header, #header2  {
         position: fixed;
         background: rgba(11, 47, 58, 1);
         height: 83px;
         width: 100%;
         box-shadow: 0px 0.2px 4px black;
         -webkit-box-shadow: 0px 0.2px 4px black;
         -moz-box-shadow: 0px 0.2px 4px black;
         box-shadow: 0px 0.2px 4px black;
         z-index: 3;

    }
     #header img {
         position:absolute;
         top:15px;
         right:25px;
         z-index: 3;
    }
     #header2 img {
         position:absolute;
         top:15px;
         right:25px;
         z-index: 3;
    }

     .portfolio2 {
         width: 30%;        
         background-color: white;
         margin: 0 auto;
		 height: 2px;
		 margin-top:15px; 
		 margin-bottom:15px;
		 list-style-type:none;
    }
     .b-a, .bar, .bar:before, .bar:after {
         transition: all .25s;
         content: "";
         position: absolute;
         left: 0;
         height: 5px;
         width: 40px;
         border-radius: 15px;
         background-color: white;
    }
     .menu-collapsed {
         transition: all .25s;
         position: fixed;
         top: 10px;
         left: 9px;
         height: 60px;
         width: 25%;
         z-index: 3;
         cursor: pointer;
    }
     .menu-collapsed ul {
         transition: all 0s;
         position: fixed;
         left: -9000px;
    }
     .bar {
         position: fixed;
         left: 30px;
         top: 37px;
    }
     .bar:before {
         top: -11px;
    }
     .bar:after {
         top: 11px;
    }
     .bar:hover {
         color: white;
    }
     .bar:hover, .bar:active {
         -webkit-user-select: none;
         -webkit-touch-callout: none;
    }
     .b-a-expanded, .menu-expanded .bar:before, .menu-expanded .bar:after {
         transition: all .25s;
         top: -0px;
    }
     .menu-expanded {
         transition: all .25s;
         text-align: center;
         line-height: 20px;
         height: 100%;
         width: 100%;
         border-radius: 0px;
         top: 0;
         left: 0;
         background-color: #124859;
         margin-top:0px;
    }
     .menu-expanded ul {
         transition: all 0s;
         position: relative;
         left: 0;
         margin-top: 90px;
    }
     .menu-expanded a {
         transition: all .15s;
         text-decoration: none;
         font-size: 1.3em;
         padding: 8px;
         color: white;
         display: block;
    }
     .menu-expanded a:hover {
         background-color: white;
         transition: all .15s;
         letter-spacing: 1px;
         color: #124859;
		 font-weight:500;
    }
     .menu-expanded a:hover, .menu-expanded a:active {
         -webkit-user-select: none;
         -webkit-touch-callout: none;
    }
     .menu-expanded .bar {
         background-color: transparent;
         transition: all .25s;
    }
     .menu-expanded .bar:before {
         transform: rotate(45deg);
    }
     .menu-expanded .bar:after {
         transform: rotate(-45deg);
    }
     .row {
         padding-top: 150px;
    }
    /*--------------------------------------------------------------------------------------------------Titelbilder*/
     #mobbititle {
         width: 99%;
         display: block;
         margin: 0 auto;
         padding-top: 82px;
    }
     #data-scroll-container_title {
         bottom: 0;
         right: 0;
         position: absolute;
         left: 0;
         transition: transform 0.9s 0.1s ease-in-out;
    }
     .down #data-scroll-container_title {
         transform: translate3d(0, -40px, 0);
    }
    /*--------------------------------------------------------------------------------------------------Titelbilder_Hover*/
     #font1 span, #font2 span, #font3 span, #font4 span {
         width: 5%;
         height: 60%;
         position: absolute;
         left: 5%;
         right: 0;
         top: 50%;
         transform: translateY(-50%);
         box-shadow: 1px 1.5px 2px grey;
         -webkit-box-shadow: 1px 1.5px 2px grey;
         -moz-box-shadow: 1px 1.5px 2px grey;
    }
     #font1 span {
         background-color: #9bc5dd;
    }
     #font2 span {
         background-color: #9ec0eb;
    }
     #font3 span {
         background-color: #8ec6c5;
    }
     #font4 span {
         background-color: #8aa8c4;
    }
     #font1 p, #font2 p, #font3 p, #font4 p {
         color: rgba(11, 47, 58, 1);
         font-size: calc(16px + (30 - 19) * ((100vw - 320px) / (1600 - 320)));
         line-height: 1em;
         font-weight: bold;
		 text-align:center;
         position: absolute;
         letter-spacing: 0.02em;
         top: 50%;
         left: 51%;
         transform: translateX(-50%) translateY(-50%);
    }
     #font1, #font2, #font3, #font4 {
         position: absolute;
         z-index: 2;
         width: 100%;
         height: 25%;
         bottom: 20px;
         left: 0;
         background: rgba(255, 255, 255, 0.5);
    }
     a.divLink {
         position: absolute;
         opacity: 0 
        /*hide URL*/
         ;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
    }
     #font1:hover p, #font2:hover p, #font3:hover p, #font4:hover p {
         color: #0a6478;
    }
     .box img {
         position: absolute;
         top: 0;
         bottom: 14%;
         right: 0;
         margin: auto;
         width: 100%;
         height: auto;
         -webkit-animation: myAnim2 1.5s ease-in-out 0s 1 normal both;
         animation: myAnim2 1.5s ease-in-out 0s 1 normal both;
    }
     @keyframes myAnim2 {
         0% {
             opacity: 0;
             transform: scale(1.2);
        }
         100% {
             opacity: 1;
             transform: scale(1);
        }
    }
    /*--------------------------------------------------------------------------------------------------Titelbilder_Grafiken*/
     #moblist1 {
         background-color: #c2dcf7;
         height: auto;
         background-repeat: no-repeat;
         float: left;
         background-size: cover;
         position: relative;
         z-index: 0;
         top: 0;
         left: 0;
         width: 49.6%;
         height: 220px;
         margin: 0.2%;
         display: block;
         overflow: hidden;
    }
     #moblist2 {
         background-color: #a8ccdc;
         height: auto;
         background-repeat: no-repeat;
         background-size: cover;
         position: relative;
         z-index: 0;
         top: 0;
         float: left;
         width: 49.6%;
         height: 220px;
         padding: 0px;
         margin: 0.2%;
         display: block;
         overflow: hidden;
    }
     #moblist3 {
         background-color: #a9d4ef;
         width: 49.6%;
         height: auto;
         background-repeat: no-repeat;
         background-size: cover;
         position: relative;
         z-index: 0;
         top: 0;
         float: left;
         height: 220px;
         margin: 0.2%;
         display: block;
         overflow: hidden;
    }
     #moblist4 {
         background-color: #a7d0d4;
         height: auto;
         background-repeat: no-repeat;
         background-size: cover;
         position: relative;
         z-index: 0;
         margin: 0.2%;
         width: 49.6%;
         height: 220px;
         float: left;
         overflow: hidden;
    }
    /*--------------------------------------------------------------------------------------------------Hintergründe_farbig*/
     .pictibackgreen {
         background-color: #7da5ab;
         padding: 80px 0px 80px 0px;
         border-bottom: #0f4758 0px solid;
    }
     .pictibackgrafik {
         background-color: #7da5ab;
         padding: 80px 0px 80px 0px;
         border-bottom: #0f4758 0px solid;
    }
     .pictibackillustrationen {
         background-color: #7da5ab;
         padding: 80px 0px 80px 0px;
         border-bottom: #0f4758 0px solid;
    }
     .pictibackweb {
         background-color: #7da5ab;
         padding: 80px 0px 80px 0px;
         border-bottom: #0f4758 0px solid;
    }
     .pictibackanimation {
         background-color: #7da5ab;
         padding: 80px 0px 80px 0px;
         border-bottom: #0f4758 0px solid;
    }
     .pictibackhellgrau {
         padding: 80px 0px 0px 0px;
         background-color: #FAFAFA;
         border-top: #0f4758 0px solid;
    }
     .pictibackblue {
         padding: 80px 0px 80px 0px;
         background-color: rgba(150, 180, 200, 1);
         border-bottom: #0f4758 0px solid;
    }
     .pictibackrechtliches {
         background-color: #FAFAFA;
         padding: 10vh 0px 0px 0px;
    }
    /*------------------------------------------------------------------------------------------------Fotogalerie Lüneburger Ansichten*/
     .mobile_gallerie img {
         height: auto;
         width: 100%;
         margin: 7px auto;
         border-color: white;
         border-width: 3px;
         border-style: solid;
         box-shadow: 2px 3px 5px grey;
         -webkit-box-shadow: 2px 3px 5px grey;
         -moz-box-shadow: 2px 3px 5px grey;
    }
     .bilderhintergrund {
         background-color: rgba(150, 180, 200, 0.4);
         padding: 25px;
    }
     #deski {
         display: none;
    }
    /*---------------------------------------------------------*/
     .Illu_lbg p {
         width: 100%;
         float: right;
         height: 280px;
         margin: 0 auto;
         display: block;
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
         border-radius: 4px 4px 4px 4px;
    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
	margin-bottom:30px;
    }

     hr {
         width: 80%;
         height: 1px;
         margin: 0 auto;
         background: black;
    }
     .me {
         text-align: center;
         background-color: #071f26;
         margin: 0 auto;
         height: 260px;
         width: 100%;
         margin-bottom: 50px;
         border-radius: 4px 4px 4px 4px;
    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
    }
     .picture {
         text-align: center;
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
         background-image: url(img/ick3.png);
         opacity: 0.9;
         bottom: 0;
         margin: 0 auto;
         height: 260px;
         width: 100%;
         border-radius: 4px 4px 4px 4px;
    }
    /*--------------------------------------------------------------------------------------------------Trenner*/
     .trennerpic {
         padding-top: 1%;
         width: 0%;
         height: 0%;
    }
     .trenndiv {
         padding-top: 50px;
         width: 0%;
         height: 0%;
    }
     .begin {
         padding-top: 78px;
         clear: both;
    }
    /*--------------------------------------------------------------------------------------------------Schriftbearbeitungen*/
     .Sectionschrift_black {
         display: block;
         margin-left: auto;
         margin-right: auto;
         width: 90%;
    }
     .Sectionschrift_hinweis a, .Sectionschrift_black a {
         color: black;
         text-decoration: none;
         font-weight: bold;
         font-size: 1em;
    }
     .Sectionschrift_hinweis h2, .Sectionschrift_black h2 {
         color: black;
    }
     .Sectionschrift_hinweis h3, .Sectionschrift_black h3 {
         color: black;
    }
     .Sectionschrift_hinweis {
         border-top: black 2px solid;
         border-bottom: black 2px solid;
         display: block;
         margin-left: auto;
         margin-right: auto;
         width: 90%;
         padding: 15px 15px 15px 15px;
    }
     .right_move {
         margin-left: 830px;
    }
     .Sectionschrift_hinweis a:hover, .Sectionschrift_black a:hover {
         opacity: 0.7;
    }
     .Sectionschrift_black a {
         color: black;
         font-weight: bold;
    }
     .smallquader {
         color: white;
         font-weight: bold;
         text-align: center;
         font-size: 24px;
         padding: 50px;
		 clear: both;
    }
     .smallquader span {
         opacity: 0.5;
         padding-left: 7px;
         padding-right: 7px;
    }
     .smallquader_black {
         color: black;
         font-weight: bold;
         text-align: center;
         font-size: 24px;
         padding: 50px;
    }
     .smallquader_black span {
         opacity: 1;
         padding-left: 7px;
         padding-right: 7px;
    }
    /*------------------------------------------------------------------------------Kontakrformular_Link*/
     .kontaktformular {
         color: black;
         font-size: 1.4em;
         padding: 50px 0px 0px 0px;
         text-align: left;
    }
    /*------------------------------------------------------------------------------Lüneburger_Ansichten_Kooperationspartner*/
     .bunt {
         margin-top: 40px;
         width: 100%;
    }
     .buntsection {
         border-top: black 2px solid;
         padding-top: 10px;
         padding-bottom: 10px;
    }
     .buntsection p {
         width: 100%;
         padding-top: 10px;
         padding-bottom: 10px;
         color: black;
         opacity: 1;
    }
     .buntsection a {
         color: black;
         text-decoration: none;
         font-weight: bold;
         font-size: 1em;
    }
     .buntsection span {
         font-weight: 900;
         color: black;
    }
     .buntsection_two {
         background-color: white;
         border-radius: 4px 4px 4px 4px;
    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
    }
     .buntsection_two li img {
         height: auto;
         width: 100%;
    }
     .buntsection_two li {
         list-style-type: none;
         margin: 20px 10% 20px 10%;
    }
     .buntsection_two ul {
         display: flex;
         display: -webkit-flex;
    }
     .logo_two {
         margin-top: 25%;
    }
     .Portueberschrift {
         display: block;
         margin: 0 auto;
         width: 75%;
    }
     .Portueberschrift h2 {
         color: black;
         text-align:center;
         padding:5px;
         font-size: 25px;
    }
    /*------------------------------------------------------------------------------H2_H3_Überschriften*/
     .Sectionueberschrift_black {
         display: block;
         text-align: left;
         width: 90%;
         display: block;
         margin-left: auto;
         margin-right: auto;
         color: black;
         opacity: 1;
         margin-bottom: 30px;
    }
     .Sectionueberschrift_lbg {
         display: block;
         text-align: center;
         color: black;
         padding: 40px;
    }
     .Sectionueberschrift_lbg h3 {
    }
     .Sectionueberschrift_lbg span {
         font-size: 1.2em;
    }
     .Sectionueberschrift_lbg h2 {
         opacity: 1;
         margin-bottom: 10px;
    }
     hr {
         width: 100%;
         height: 2px;
         background: black;
         margin:50px 0px 50px 0px;
    }
    /*--------------------------------------------------------------------------------------------------Videobearbeitung*/
     .vimeoplay {
         position: relative;
         padding-bottom: 56.25%;
         height: 0;
         overflow: hidden;
        /*-z-index: 1;
         */
    }
     .vimeoplay iframe {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         border: none;
    }
     .vimeopack {
         display: block;
         margin-left: auto;
         margin-right: auto;
         max-width: 100%;
         margin-top: 40px;
         margin-bottom: 40px;
    }
    /*--------------------------------------------------------------------------------------------------Kontaktumgebung*/
     #konti {
         max-width: 90%;
         display: block;
         margin: 0 auto;
    }
     #konti iframe {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         border: none;
    }
     #konti {
         position: relative;
         padding-bottom: 480px;
         padding-top: 15px;
         height: 0;
    }
     #Knopf2 input {
         color: white;
         font-weight: bold;
         font-size: 30px;
         display: block;
         margin: 0 auto;
         width: 80px;
         height: 55px;
         border-radius: 10px;
         background-color: #0B2F3A;
         -webkit-border-radius: 3;
         -webkit-appearance: none;
    }
     #Knopf2 input:hover {
         color: white;
         opacity: 0.7;
    }
     #Knopf2 input:hover, #Knopf2 input:active {
         -webkit-user-select: none;
         -webkit-touch-callout: none;
    }
    /*--------------------------------------------------------------------------------------------------Videodatenschutz*/
     .dschutz {
         text-align: center;
         color: black;
         display: block;
         margin-left: auto;
         margin-right: auto;
         max-width: 90%;
         margin-bottom: 60px;
    }
     .dschutz p {
         font-size: 17px;
    }
     .dschutz a {
         font-size: 17px;
         text-align: center;
         color: #0B2F3A;
         font-weight: bold;
         list-style-type: none;
         text-decoration: none;
		 letter-spacing: 0.01em;
    }
     .dschutz a:hover {
         opacity: 0.7;
    }
     .dschutz a:hover, .dschutz a:active {
         -webkit-user-select: none;
         -webkit-touch-callout: none;
    }
     #aschutz {
         font-size: 17px;
         text-align: center;
         color: black;
    }
     #aschutz a {
         font-size: 17px;
         text-align: center;
         color: #1f6fb4;
         list-style-type: none;
         text-decoration: none;
    }
     #aschutz a:hover {
         opacity: 0.7;
    }
     #aschutz a:hover, #aschutz a:active {
         -webkit-user-select: none;
         -webkit-touch-callout: none;
    }
    /*--------------------------------------------------------------------------------------------------footer*/
     #name p {
         color: black;
         background-color: #FAFAFA;
         font-size: 17px;
         padding: 40px 40px 0px 40px;
         text-align: center;
    }
     #name2 p {
         color: #0B2F3A;
         font-size: 17px;
         padding: 40px 40px 0px 40px;
         text-align: center;
    }
     #name3 p {
         color: white;
         background-color: #7da5ab;
         font-size: 16px;
         padding: 40px 40px 0px 40px;
         text-align: center;
    }
     footer {
         background-color: #0B2F3A;
         position: relative;
         height: 65px;
         text-align: center;
         width: 100%;
    }
     footer a {
         color: white;
         list-style-type: none;
         text-decoration: none;
         font-size: 17px;
         letter-spacing: 0.5px;
    }
     footer li {
         display: inline;
         margin-left: 7px;
         margin-right: 7px;
         font-weight: bold;
    }
     footer ul {
         padding-top: 17px;
         height: 20px;
         width: 100%;
         text-align: center;
         display: block;
         margin-left: auto;
         margin-right: auto;
    }
     footer li:hover {
         color: #286AB7;
         opacity: 0.6;
    }
     footer li:hover, footer li:active {
         -webkit-user-select: none;
         -webkit-touch-callout: none;
    }
    /*--------------------------------------------------------------------------------------------------Portfoliopräsi*/
     .präsi {
         margin: 0 auto;
         width: 97%;
         display: block;
    }
    /*------------------------------------------------------------------------------------------------Webdesign*/
     .container_new {
         position: relative;
         margin: 10px;
         width: 95%;
         height: 220px;
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
         display: block;
         margin-left: auto;
         margin-right: auto;
    }
    /*------------------------------------------------------------------------------------------------*/
     .text_new:hover {
         opacity: 0;
         transition: .7s ease;
         -webkit-transition: .7s ease;
    }
     .text_new {
         position: absolute;
         top: 50%;
         left: 50%;
         -webkit-transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
         text-align: center;
         background-color: rgba(11, 47, 58, 0.7);
         height: 99.5%;
         width: 100%;
    }
    /*------------------------------------------------------------------------------------------------Logopräsentation*/
     #loggos img {
         padding: 3% 0% 3% 0%;
         position: relative;
         margin: 0 auto;
		 display: block;
		 width: 95%;
		 height:auto;
    }
     #loggos {
         width: 100%;
         margin: 0 auto;
         padding-top: 40px;
    }
    /*------------------------------------------------------------------------------------------------Portfolio*/
     .sidepanel {
         position: fixed;
         z-index: 3;
         height: 100%;
         top: 0;
         right: 0;
         transition: 0.5s;
         overflow-y: auto;
         transform: translateX(100%);
         width: 100%;
    }
    /*--------------------------------------------------------------------------------------------------buttonbug_x*/
     .bodymass {
         margin-right: 20px;
         margin-left: 20px;
         letter-spacing: 0.3px;
    }
     .bodymass a {
         color: rgba(255, 255, 255, 1);
         text-decoration: none;
         font-weight: bold;
         display: block;
         margin: 0 auto;
         width: 94%;
         text-align: left;
    }
     .bodymass a:hover {
         opacity: 0.8;
    }
     .bodyback {
         width: 100%;
         padding: 20px;
         margin-top: 70px;
    }
    /*-------------------------------------------------------------------------------------------------*/
     .sidepanel a {
         text-decoration: none;
         color: white;
         display: block;
         transition: 0.3s;
         letter-spacing: 0.3px;
    }
     .sidepanel h3 {
         text-align: center;
         color: white;
         display: block;
         letter-spacing: 0.3px;
         line-height: 1.5em;
         font-size: 2em;
    }
     .sidepanel h4 {
         text-align: center;
         margin: 30px 0px 20px 0px;
         color: white;
         display: block;
         letter-spacing: 0.3px;
         line-height: 1.5em;
         font-size: 1.7em;
    }
     .sidepanel p {
         color: white;
         display: block;
         margin: 0 auto;
         max-width: 1100px;
         letter-spacing: 0.3px;
    }
     .duenn p {
         text-align: center;
         font-size: 1.8em;
         color: white;
         display: block;
         font-weight: normal;
         letter-spacing: 0.3px;
         line-height: 1.5em;
         margin-top: 20px;
    }
     .sidepanel hr {
         width: 98%;
         height: 2px;
         background: white;
         margin-top: 50px;
         margin-bottom: 50px;
         margin: 0 auto;
         opacity: 1;
    }
     .sidepanel img {
         width: 100%;
         display: block;
         margin: 0 auto;
         height: auto;
         padding-top: 20px;
         padding-bottom: 20px;
    }
     #webpic img {
         width: 95%;
         display: block;
         margin: 0 auto;
         height: auto;
         padding-top: 70px;
         padding-bottom: 70px;
    }
     .closebtn span {
         top:30px;
        position: absolute;
         left: 50%;
         display: table-cell;
         transform: translate(-50%, -50%);
         color: #0B2F3A;
         font-size: 90px;
         font-family: Arial, Helvetica, sans-serif;
         color: #0B2F3A;
         text-decoration: none;
         font-weight: 400;
    }
     .closebtn {
         height:60px;
        width:60px;
         position: absolute;
         background-color: rgba(255, 255, 255, 0.85);
         left: 25px;
         border-radius: 0px 0px 10px 10px;
         -webkit-box-shadow: 0px 0.2px 5px black;
         -moz-box-shadow: 0px 0.2px 5px black;
         box-shadow: 0px 0.2px 5px black;
    }
     .closebtn span:hover {
         opacity: 0.6;
    }
     .openbtn_two {
         cursor: pointer;
         border: none;
         background-color: transparent;
         color: white;
         font-weight: 500;
         font-size: 20px;
         position: absolute;
         top: 60%;
         left: 50%;
         -webkit-transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
         text-align: center;
         height: 100%;
         width: 100%;
         display: -webkit-box;
         display: -ms-flexbox;
         display: -webkit-flex;
         display: flex;
         align-items: center;
         justify-content: center;
         letter-spacing: 0.1px;
    }
     .openbtn {
         cursor: pointer;
         border: none;
         color: white;
         background-color: transparent;
         font-weight: 700;
         font-size: 23px;
         position: absolute;
         padding:30px;
         top: 40%;
         left: 50%;
         -webkit-transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
         text-align: center;
         height: 100%;
         width: 100%;
         display: -webkit-box;
         display: -ms-flexbox;
         display: -webkit-flex;
         display: flex;
         align-items: center;
         justify-content: center;
         letter-spacing: 0.1px;
    }
     .duenn {
         margin-top: -25px;
    }
     #trennlinie hr {
         width: 94%;
         height: 2px;
         background: black;
         margin-top: 50px;
         margin-bottom: 50px;
         margin: 0 auto;
         opacity: 1;
    }
     .trennlinieport hr {
         width: 92%;
         height: 2px;
         background: black;
         margin: 0 auto;
    }
     .parallaxebene {
         background-image: url(img/parallax_mobile.jpg);
         background-position: top;
         background-repeat: no-repeat;
         background-size: cover;
         display: block;
         margin: 0 auto;
         height: 75vw;
      -webkit-box-shadow: 
        inset 0px 11px 11px -10px rgba(0, 0, 0, 0.5),
        inset 0px -11px 11px -10px rgba(0, 0, 0, 0.5);
      -moz-box-shadow:
        inset 0px 11px 11px -10px rgba(0, 0, 0, 0.5),
        inset 0px -11px 11px -10px rgba(0, 0, 0, 0.5);
      box-shadow: 
        inset 0px 11px 11px -10px rgba(0, 0, 0, 0.5),
        inset 0px -11px 11px -10px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 
        inset 0px 11px 11px -10px rgba(0, 0, 0, 0.5),
        inset 0px -11px 11px -10px rgba(0, 0, 0, 0.5);	
    }
     .solid a {
         background-color: #124859;
         padding: 20px;
		 text-shadow: 2px 2px #000000;
         font-size: 17px;
         color: white;
         text-decoration: none;
         box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.75);
         -webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.75);
         -moz-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.75);
         box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.75);
         border: white 4px solid;
         -moz-border-radius: 10px;
         -webkit-border-radius:10px;
         border-radius: 10px;
    }
     .solid {
         cursor: default;
         border: none;
         color: white;
         background-color: transparent;
         font-weight: 700;
         position: relative;
         top: 75%;
         left: 50%;
         -webkit-transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
         text-align: center;
         height: 100%;
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         letter-spacing: 0.3px;
    }
     #content {
         background: #124859;
         z-index:0;
         color: #f1f1f1;
         padding: 20px 20px 20px 20px;
         width: 100%;
         text-align: center;
         position: relative;
         box-shadow: 0px 0.2px 4px black;
         -webkit-box-shadow: 0px 0.2px 4px black;
         -moz-box-shadow: 0px 0.2px 4px black;
         box-shadow: 0px 0.2px 4px black;
    }
     #content p {
         font-size: 20px;
         text-align: center;
         width: 100%;
         letter-spacing: 0.1px;
         line-height: 1.2em;text-shadow: 2px 2px #000000;
    }
     #content h1 {
         text-align: center;text-shadow: 2px 2px #000000;
    }
     #fonti {
         -webkit-animation: myAnim1 1.5s ease-in-out 0s 1 normal both;
        /* Safari 4+ */
         -moz-animation: myAnim1 1.5s ease-in-out 0s 1 normal both;
        /* Fx 5+ */
         -o-animation: myAnim1 1.5s ease-in-out 0s 1 normal both;
        /* Opera 12+ */
         animation: myAnim1 1.5s ease-in-out 0s 1 normal both;
        /* IE 10+ */
    }
     @-webkit-keyframes myAnim1 {
         0% {
             opacity: 0;
             transform: translateX(-1000px);
        }
         100% {
             opacity: 1;
             transform: translateX(0);
        }
    }
     @-moz-keyframes myAnim1 {
         0% {
             opacity: 0;
             transform: translateX(-1000px);
        }
         100% {
             opacity: 1;
             transform: translateX(0);
        }
    }
     #screen {
         position: relative;
         top: 40px;
         width: 100%;
         height: 400px;
         display: block;
    }
     #screen #background_view_mob {
         width: 100%;
         height: 100%;
         display: block;
         background-color: #fff;
         background-position: center;
         background-size: cover;
    }
     .data-overlay p {
         position: absolute;
         text-align:center;
         color:black;
         font-weight:900;
         z-index:1;
         width:160px;
         top:20%;
         left:-8px;
         letter-spacing: 0.1px;
         text-align:center;
         line-height: 1.1em;
         font-size:13px;
         background-color:rgba(240, 240, 240, 1);
         padding:20px;
         -webkit-box-shadow: 0px 2px 5px black;
         -moz-box-shadow: 0px 2px 5px black;
         box-shadow: 0px 2px 5px black;
         -moz-border-radius:5px;
         -webkit-border-radius: 5px;
         border-radius: 5px;
    }
     #data-scroll-container_mob {
         bottom: 0;
         right: 0;
         position: absolute;
         left: 0;
         width: 100%;
         height: 100%;
         display: block;
         background-position: bottom;
         background-size: cover;
         -webkit-transition: transform 0.9s 0.1s ease-in-out;
        /* Safari 4+ */
         -moz-transition: transform 0.9s 0.1s ease-in-out;
        /* Fx 5+ */
         -o-transition: transform 0.9s 0.1s ease-in-out;
        /* Opera 12+ */
         transition: transform 0.9s 0.1s ease-in-out;
        /* IE 10+ */
    }
     .down #data-scroll-container_mob {
         -webkit-transform: translate3d(0, -2vh, 0);
         -moz-transform: translate3d(0, -2vh, 0);
         -o-transform: translate3d(0, -2vh, 0);
         transform: translate3d(0, -2vh, 0);
    }
}