@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
html, body {background-color:#050505;width:100%;height:100%;margin:0;padding:0;overflow:auto;font-family: 'Open Sans', sans-serif;}
@font-face {
  font-family: 'Open Sans', sans-serif;
  font-display: swap;
}

/* ANIMATIONEN -------------------------------------------------------------------------------------------------------------------------------------*/

/* FadeIn */
div#oberurseldiv              { animation: fadeInAnimationOberursel ease 5s; animation-iteration-count: 1; animation-fill-mode: both; }
div#oberurselcolordiv         { animation: fadeInAnimationOberurselColor ease 5s; animation-delay: 2s; animation-iteration-count: 1; animation-fill-mode: both;}
div#logo_header_tmk_div       { animation: fadeInAnimationLogoHeaderTMK ease 7s; animation-iteration-count: 1; animation-fill-mode: both;}
div#logo_header_tm_div        { animation: fadeInAnimationLogoHeaderTM ease 7s; animation-iteration-count: 1; animation-fill-mode: both; }
div#logo_header_taxi_div      { animation: fadeInAnimationLogoHeaderTaxi ease 7s; animation-iteration-count: 1; animation-fill-mode: both;  }
div#logo_header_service_div   { animation: fadeInAnimationLogoHeaderService ease 7s; animation-iteration-count: 1; animation-fill-mode: both; }
div#logo_inoberursel_div      { animation: fadeInAnimationLogoInOberursel ease 7s; animation-iteration-count: 1; animation-fill-mode: both; }
img#oberurselcloudsshadow     { animation: fadeInAnimationOberurselClouds ease 5s; animation-iteration-count: 1; animation-fill-mode: both;}
img#oberurselhillsshadow      { animation: fadeInAnimationOberurselHills ease 5s; animation-iteration-count: 1; animation-fill-mode: both; }
img#oberurselfieldsshadow     { animation: fadeInAnimationOberurselFields ease 5s; animation-iteration-count: 1; animation-fill-mode: both;}
img#oberurselchurchshadow     { animation: fadeInAnimationOberurselChurch ease 5s; animation-iteration-count: 1; animation-fill-mode: both; }
img#oberurselhousesshadow     { animation: fadeInAnimationOberurselHouses ease 5s; animation-iteration-count: 1; animation-fill-mode: both; }
img#oberurselcitywindowsone   { animation: fadeInAnimationOberurselCityWindowsOne ease 5s; animation-delay:1s; animation-iteration-count: 1; animation-fill-mode: both; }
img#oberurselcitywindowstwo   { animation: fadeInAnimationOberurselCityWindowsTwo ease 5s; animation-delay:1s;  animation-iteration-count: 1; animation-fill-mode: both; }
img#oberurselchurchwindows    { animation: fadeInAnimationOberurselChurchWindows ease 5s; animation-iteration-count: 1; animation-fill-mode: both; }
img#oberurselhouseswindows    { animation: fadeInAnimationOberurselHousesWindows ease 5s; animation-iteration-count: 1; animation-fill-mode: both; }
img#oberurselfogone           { animation: fadeInAnimationFogOne ease 5s; animation-iteration-count: 1; animation-fill-mode: both; }
img#oberurselfogtwo           { animation: fadeInAnimationFogTwo ease 5s; animation-iteration-count: 1; animation-fill-mode: both; }
img#oberurselstarsone         { animation: fadeInAnimationStarsOne ease 5s; animation-iteration-count: 1; animation-fill-mode: both; }
img#oberurselstarstwo         { animation: fadeInAnimationStarsTwo ease 5s; animation-iteration-count: 1; animation-fill-mode: both; }
img#taxi_car, img#taxi_wheels { animation: fadeInAnimationTaxi ease 8s; animation-iteration-count: 1; animation-fill-mode: both; }
img#taxi_dark                 { animation: fadeInAnimationTaxiDark ease 8s; animation-iteration-count: 1; animation-fill-mode: both; }
img#taxi_wheels_stop          { animation: fadeInAnimationTaxiStop ease 8s; animation-iteration-count: 1; animation-fill-mode: both; }
img#taxi_light                { animation: fadeInAnimationTaxiLight ease 8s; animation-iteration-count: 1; animation-fill-mode: both; }
div#phone_button_div          { animation: fadeInAnimationPhoneButton ease 5s; animation-delay: 2s; animation-iteration-count: 1; animation-fill-mode: both;}
div#mail_button_div           { animation: fadeInAnimationMailButton ease 5s; animation-delay: 3s; animation-iteration-count: 1; animation-fill-mode: both;}
div#contact                   { animation: fadeInAnimationContact ease 5s; animation-delay: 1s; animation-iteration-count: 1; animation-fill-mode: both;}

@keyframes fadeInAnimationOberursel                { 0% { opacity: 0; } 10% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInAnimationPhoneButton              { 0% { opacity: 0; } 10% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInAnimationMailButton               { 0% { opacity: 0; } 10% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInAnimationOberurselColor           { 0% { opacity: 0; } 10% { opacity: 0; } 100% { opacity: 0.4; } }
@keyframes fadeInAnimationLogoHeaderTMK            { 0% { opacity: 0; transform: translate(0, 30%);} 10% {transform: translate(0, 30%);} 20% {transform: translate(0, 0);} 80% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } }
@keyframes fadeInAnimationLogoHeaderTM             { 0% { opacity: 0; } 20% { opacity: 0; } 90% { opacity: 0.5; } 100% { opacity: 0.5; } }
@keyframes fadeInAnimationLogoHeaderTaxi           { 0% { opacity: 0; } 25% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } } 
@keyframes fadeInAnimationLogoHeaderService        { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInAnimationLogoInOberursel          { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInAnimationOberurselClouds          { 0% { opacity: 0.9; } 20% { opacity: 0.8; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fadeInAnimationOberurselHills           { 0% { opacity: 0.9; } 30% { opacity: 0.8; } 90% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fadeInAnimationOberurselFields          { 0% { opacity: 0.9; } 40% { opacity: 0.8; } 80% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fadeInAnimationOberurselChurch          { 0% { opacity: 0.9; } 50% { opacity: 0.8; } 100% { opacity: 0.1; } }
@keyframes fadeInAnimationOberurselHouses          { 0% { opacity: 0.9; } 60% { opacity: 0.8; } 95% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fadeInAnimationOberurselCityWindowsOne  { 0% { opacity: 0; } 10% { opacity: 0; } 60% { opacity: 0.2; } 80% { opacity: 0.4; } 100% { opacity: 0.6; } }
@keyframes fadeInAnimationOberurselCityWindowsTwo  { 0% { opacity: 0; } 5% { opacity: 0; } 50% { opacity: 0.2; } 75% { opacity: 0.4; } 100% { opacity: 0.4; } }
@keyframes fadeInAnimationOberurselChurchWindows   { 0% { opacity: 0; } 10% { opacity: 0; } 60% { opacity: 0.2; } 80% { opacity: 0.4; } 100% { opacity: 0.6; } }
@keyframes fadeInAnimationOberurselHousesWindows   { 0% { opacity: 0; } 5% { opacity: 0; } 50% { opacity: 0.2; } 75% { opacity: 0.4; } 100% { opacity: 0.6; } }
@keyframes fadeInAnimationFogOne                   { 0% { opacity: 0; } 30% { opacity: 0; } 100% { opacity: 0.6; } }
@keyframes fadeInAnimationFogTwo                   { 0% { opacity: 0; } 10% { opacity: 0; } 100% { opacity: 0.6; } }
@keyframes fadeInAnimationStarsOne                 { 0% { opacity: 0; } 10% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInAnimationStarsTwo                 { 0% { opacity: 0; } 20% { opacity: 0; } 100% { opacity: 0.5; } }
@keyframes fadeInAnimationTaxi                     { 0% { opacity: 0; transform: translate(80%, -5%) scale(0.5,0.5);} 10% { opacity: 0; transform: translate(80%, -5%) scale(0.5,0.5);} 50% { opacity: 1;} 80% { opacity: 1; transform: translate(-2%, -15%) scale(1.5,1.5);} 100% { opacity: 1; transform: translate(-2%, -15%) scale(1.5,1.5);}}
@keyframes fadeInAnimationTaxiStop                 { 0% { opacity: 0; transform: translate(80%, -5%) scale(0.5,0.5);} 10% { opacity: 0; transform: translate(80%, -5%) scale(0.5,0.5);} 74% { opacity: 0;} 80% { opacity: 1; transform: translate(-2%, -15%) scale(1.5,1.5);} 100% { opacity: 1; transform: translate(-2%, -15%) scale(1.5,1.5);}}
@keyframes fadeInAnimationTaxiDark                 { 0% { opacity: 0; transform: translate(80%, -5%) scale(0.5,0.5);} 10% { opacity: 0; transform: translate(80%, -5%) scale(0.5,0.5);} 11% { opacity: 0.9;} 50% { opacity: 0.7;} 80% { opacity: 0.5; transform: translate(-2%, -15%) scale(1.5,1.5);} 100% { opacity: 0.3; transform: translate(-2%, -15%) scale(1.5,1.5);}}
@keyframes fadeInAnimationTaxiLight                { 0% { opacity: 0; transform: translate(80%, -5%) scale(0.5,0.5);} 10% { opacity: 0; transform: translate(80%, -5%) scale(0.5,0.5);} 11% { opacity: 0.3;} 50% { opacity: 0.5;} 80% { opacity: 0.8; transform: translate(-2%, -15%) scale(1.5,1.5);} 100% { opacity: 0.8; transform: translate(-2%, -15%) scale(1.5,1.5);}}
@keyframes fadeInAnimationContact                  { from { opacity: 0; transform: translate(0, 100%);} to {opacity: 1; transform: translate(0, 0);}}


/* Loops */
div#home, div#service            { animation: LoopHome 5s infinite alternate; }
div#aktuelles, div#info          { animation: LoopAktuelles 5s infinite alternate; }
div#oberurselfogonediv           { animation: LoopFogOne 5s infinite alternate; }
div#oberurselfogtwodiv           { animation: LoopFogTwo 8s infinite alternate; }
div#oberurselstarsonediv         { animation: LoopStarsOne 4s infinite alternate; }
div#oberurselstarstwodiv         { animation: LoopStarsTwo 3s infinite alternate; }
div#oberurselcloudsdiv           { animation: LoopClouds 5s infinite alternate; }
div#oberurselhillsdiv            { animation: LoopHills 8s infinite alternate; }
div#oberurselfieldsdiv           { animation: LoopFields 7s infinite alternate; }
div#oberurselchurchdiv           { animation: LoopChurch 12s infinite alternate; }
div#oberurselhousesdiv           { animation: LoopHouses 6s infinite alternate; }
div#oberurselcitywindowsonediv   { animation: LoopCityWindowsOne 2s infinite alternate; }
div#oberurselcitywindowstwodiv   { animation: LoopCityWindowsTwo 2s infinite alternate; }
div#taxi_dark_div                { animation: LoopTaxi 4s infinite alternate; }

@keyframes LoopHome           { from {background-color: #050505;} to {background-color: #0a080c;} }
@keyframes LoopAktuelles      { from {background-color: #1e1114;} to {background-color: #110a0e;} }
@keyframes LoopClouds         { from { opacity: 0.4; } to { opacity: 0.3; } }
@keyframes LoopHills          { from { opacity: 0.4; } to { opacity: 0.2; } }
@keyframes LoopFields         { from { opacity: 0; } to { opacity: 0.4; } }
@keyframes LoopChurch         { from { opacity: 0.1; } to { opacity: 0.3; } }
@keyframes LoopHouses         { from { opacity: 0.6; } to { opacity: 0.7; } }
@keyframes LoopFogOne         { from { opacity: 0.4;} to { opacity: 0.7;} }
@keyframes LoopFogTwo         { from { opacity: 0.4; transform: scale(1,1);} to { opacity: 0.6; transform: scale(0.8,0.8);} }
@keyframes LoopStarsOne       { from { opacity: 1;} to { opacity: 0.3;} }
@keyframes LoopStarsTwo       { from { opacity: 0.3;} to { opacity: 1;} }
@keyframes LoopCityWindowsOne { from { opacity: 1;} to { opacity: 0.3;} }
@keyframes LoopCityWindowsTwo { from { opacity: 0.3;} to { opacity: 1;} }
@keyframes LoopTaxi           { from { opacity: 0.2;} to { opacity: 0.8;} }


/* GLOBAL ------------------------------------------------------------------------------------------------------------------------------------------*/
a img { border:0px; }
p     { margin:0px; }
img   { aspect-ratio: attr(width) / attr(height); }
 
div#main {scrollbar-base-color:#050505;scrollbar-face-color:#050505;scrollbar-3dlight-color:#050505;scrollbar-highlight-color:#050505;scrollbar-track-color:#050505;scrollbar-arrow-color:#050505;scrollbar-shadow-color:#050505;scrollbar-dark-shadow-color:#050505;}
div#main::-webkit-scrollbar, div#main::-webkit-scrollbar-thumb,
div#main::-webkit-scrollbar-button, div#main::-webkit-scrollbar-track,
div#main::-webkit-scrollbar-track-piece {background-color:#050505;}
div#main::-webkit-scrollbar, div#serviceslider::-webkit-scrollbar { display: none; }
div#main, div#serviceslider    { -ms-overflow-style: none; scrollbar-width: none; }

div#main                       {height:100%; overflow-y:scroll;overflow-x:hidden; margin-left:auto;margin-right:auto; position:relative; scroll-snap-type: mandatory; scroll-snap-ponits-y: repeat(100%); scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;}
div#home, div#aktuelles, 
div#service, div#info          {width:100%; height:100%; scroll-snap-align: start; overflow:hidden;}
div#header                     {width:100%; height:70%; padding-top:3%; text-align:center;}
div#contact                    {border-width:thin; border-color:#826613; border-radius:50px 50px 0 0; border-style:double outset none inset; background-image: url("../img/background_kontakt.svg"); background-size: 100%; background-repeat: repeat; background-color:#0f0f0f; position:fixed; margin-left:auto; margin-right: auto; left:0; right:0; bottom:0; top:70%; height:30%;text-align:center; }
div#aktuelles                  {background-color:#1e1114;}
div#news                       {background-color:#0f0f0f;height:40%;border-radius:50px 50px 0 0;}
div#instagram                  {background-color:#3c2029;height:15%;border-radius:0 0 50px 50px;}
div.aktuellclass               {width:90%;margin-left:5%;text-align:center;border-width:thin; border-color:#826613; border-style:double;}
div#serviceslider              {width:600vw;height:30%; overflow-y:hidden;overflow-x:scroll;position:relative; scroll-snap-type: mandatory; scroll-snap-ponits-x: repeat(25%); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;}
div#servicepageone             {left:0;}
div#servicepagetwo             {left:100vw;}
div#servicepagethree           {left:200vw;}
div#servicepagefour            {left:300vw;}
div#servicepagefive            {left:400vw;}
div#servicepagesix             {left:500vw;}
div.servicepagebox             {background-color:#0f0f0f;text-align:center;height:98%;border-width:thin; border-color:#826613; border-radius:50px 50px 50px 50px;border-style:double;}
div.servicepage                {top:0;position:absolute;width:100%;height:100%; scroll-snap-align: start;}
div.logodiv                    {width:100%;position:absolute;}
.fogmask 				       {mask: url("../img/oberursel_churchmask.png"); mask-size: 100%; mask-repeat: no-repeat; -webkit-mask: url("../img/oberursel_churchmask.png"); -webkit-mask-size: 100%;}
div#oberurseldiv               {z-index:0;}
div#oberurselcolordiv          {z-index:1;}
div#oberurselcloudsdiv         {z-index:2;}
div#oberurselhillsdiv          {z-index:3;}
div#oberurselfieldsdiv         {z-index:4;}
div#oberurselchurchdiv 		   {z-index:5;}
div#oberurselhousesdiv         {z-index:6;}
div#oberurselcloudsshadowdiv   {z-index:7;}
div#oberurselhillsshadowdiv    {z-index:8;}
div#oberurselfieldsshadowdiv   {z-index:9;}
div#oberurselchurchshadowdiv   {z-index:10;}
div#oberurselhousesshadowdiv   {z-index:11;}
div#oberurselcitywindowsonediv {z-index:12;}
div#oberurselcitywindowstwodiv {z-index:13;}
div#oberurselchurchwindowsdiv  {z-index:14;}
div#oberurselhouseswindowsdiv  {z-index:15;}
div#oberurselstarsonediv       {z-index:16;}
div#oberurselstarstwodiv       {z-index:17;}
div#oberurselfogonediv         {z-index:18;}
div#oberurselfogtwodiv         {z-index:19;}
div#logo_header_tmk_div        {z-index:31;}
div#logo_header_tm_div         {z-index:32;}
div#logo_header_taxi_div       {z-index:33;}
div#logo_header_service_div    {z-index:34;}
div#logo_inoberursel_div       {z-index:35;}
div#taxi_wheels_div            {z-index:51;}
div#taxi_wheels_stop_div       {z-index:52;}
div#taxi_car_div               {z-index:53;}
div#taxi_dark_div              {z-index:54;}
div#taxi_light_div             {z-index:55;}
div#contact                    {z-index:70;}
div#phone_button_div           {width:100%;height:40%;position:relative;margin-top: 0.5em;}
div#mail_button_div            {width:100%;height:40%;position:relative;margin-top: 0.5em;}


/* MEDIA QUERIES -----------------------------------------------------------------------------------------------------------------------------------*/

/* Standard Bildschirme ----------------------------------------------------------------------------------------------------------------------------*/
@media only screen and ( min-width: 950px ) {
div#main           { width:60%;}
div#contact        { width:60%;}
img.logoclass      { width:40%; height:auto;}
div.servicepagebox { width:58vw;margin-left:1vw;}
}

/* Tablets und mittlere Bildschirme ----------------------------------------------------------------------------------------------------------------*/
@media only screen and ( min-width: 440px ) and ( max-width: 950px ) {
div#main           { width:80%;}
div#contact        { width:80%;}
img.logoclass      { width:40%; height:auto;}
div.servicepagebox { width:78vw;margin-left:1vw;}
}

/* Moderne Smartphones etc -------------------------------------------------------------------------------------------------------------------------*/
@media only screen and ( min-width: 320px ) and ( max-width: 440px ) {
div#main           { width:100%;}
div#contact        { width:96%;}
img.logoclass      { width:80%; height:auto;}
div.servicepagebox { width:94vw;margin-left:3vw;}
}

/* Kleine Smartphones etc --------------------------------------------------------------------------------------------------------------------------*/
@media only screen and ( max-width: 320px ) {
div#main           { width:100%;}
div#contact        { width:96%;}
img.logoclass      { width:80%; height:auto;}
div.servicepagebox { width:94vw;margin-left:3vw;}
}