/* VOREINSTELLUNGEN */
@charset "UTF-8";
@font-face {font-family: 'LatoLatin-Hairline'; src: url('Schriftsatz/LatoLatin-Hairline.woff') format('woff'), url('Schriftsatz/LatoLatin-Hairline.ttf') format('truetype');}
@font-face {font-family: 'LatoLatin-Thin'; src: url('Schriftsatz/LatoLatin-Thin.woff') format('woff'), url('Schriftsatz/LatoLatin-Thin.ttf') format('truetype');}
@font-face {font-family: 'LatoLatin-Light'; src: url('Schriftsatz/LatoLatin-Light.woff') format('woff'), url('Schriftsatz/LatoLatin-Light.ttf') format('truetype');}
@font-face {font-family: 'LatoLatin-Regular'; src: url('Schriftsatz/LatoLatin-Regular.woff') format('woff'), url('Schriftsatz/LatoLatin-Regular.ttf') format('truetype');}
@font-face {font-family: 'LatoLatin-Medium'; src: url('Schriftsatz/LatoLatin-Medium.woff') format('woff'), url('Schriftsatz/LatoLatin-Medium.ttf') format('truetype');}
@font-face {font-family: 'LatoLatin-Semibold'; src: url('Schriftsatz/LatoLatin-Semibold.woff') format('woff'), url('Schriftsatz/LatoLatin-Semibold.ttf') format('truetype');}
@font-face {font-family: 'LatoLatin-Bold'; src: url('Schriftsatz/LatoLatin-Bold.woff') format('woff'), url('Schriftsatz/LatoLatin-Bold.ttf') format('truetype');}
@font-face {font-family: 'LatoLatin-Heavy'; src: url('Schriftsatz/LatoLatin-Heavy.woff') format('woff'), url('Schriftsatz/LatoLatin-Heavy.ttf') format('truetype');}
@font-face {font-family: 'LatoLatin-Black'; src: url('Schriftsatz/LatoLatin-Black.woff') format('woff'), url('Schriftsatz/LatoLatin-Black.ttf') format('truetype');}
body {
    padding: 0%;
    margin: 0%;
    max-width: 100vw;
    height: 100vh;
    background-color: #e0e0e0;
}
a
{
    text-decoration: none;
}

/* HEADER */
header {
    display: inline-block;
    height: 12%;
    width: 100%;
    position: fixed;
    top: 0%;
    left: 0%;
    background-color: #e0e0e0;
    z-index: 100;
}
.border {
    display: inline-block;
    height: 0.25vw;
    width: 100%;
    position: fixed;
    top: 12%;
    left: 0%;
    background-color: #F7A92A;
    z-index: 110;
}
#logo {
    display: inline-block;
    height: 50%;
    width: auto;
    position: absolute;
    top: 25%;
    left: 3%;
}
nav {
    display: inline-block;
    position: absolute;
    top: 40%;
    left: 60%;
    height: 7.5%;
    width: 40%;
    z-index: 101;
    text-align: center;
}
.nav
{
    margin-left: 1.3vw;
    margin-right: 1.3vw;
    font-family: 'LatoLatin-Medium';
    font-size: 1.25vw;
    color: rgb(100, 100, 100);
    letter-spacing: 0.05vw;
    z-index: 103;
}
.block1 {
    display: inline-block;
    height: 8%;
    width: 6.75%;
    position: absolute;
    top: 95%;
    left: 63.6%;
    background-color: #e0e0e0;
    z-index: 105;
}
.block11 {
    display: inline-block;
    height: 8%;
    width: 6.75%;
    position: absolute;
    top: 95%;
    left: 63.6%;
    background-color: #F7A92A;
    z-index: 104;
}
.block2 {
    display: inline-block;
    height: 8%;
    width: 6.3%;
    position: absolute;
    top: 95%;
    left: 72.9%;
    background-color: #e0e0e0;
    z-index: 105;
}
.block22 {
    display: inline-block;
    height: 8%;
    width: 6.3%;
    position: absolute;
    top: 95%;
    left: 72.9%;
    background-color: #F7A92A;
    z-index: 104;
}
.block3 {
    display: inline-block;
    height: 8%;
    width: 6.7%;
    position: absolute;
    top: 95%;
    left: 82%;
    background-color: #e0e0e0;
    z-index: 105;
}
.block33 {
    display: inline-block;
    height: 8%;
    width: 6.7%;
    position: absolute;
    top: 95%;
    left: 82%;
    background-color: #F7A92A;
    z-index: 104;
}
.block4{
    display: inline-block;
    height: 8%;
    width: 4.75%;
    position: absolute;
    top: 95%;
    left: 91.5%;
    background-color: #e0e0e0;
    z-index: 105; 
}
.block44 {
    display: inline-block;
    height: 8%;
    width: 4.75%;
    position: absolute;
    top: 95%;
    left: 91.5%;
    background-color: #F7A92A;
    z-index: 104;
}
.menu_icon {
    display: none;
}
.blende {
    display: none;
}

/* HINTERGRUND */
#hintergrundvideo {
    display: inline-block;
    width: 100%;
    height: auto;
    position: fixed;
    top: 12%;
    left: 0%;
    z-index: 1;
}
.MOBILE {
    display: none;
}
.MOBILEX {
    display: none;
}

/* TITELSEITE */
.Titelseite {
    display: inline-block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 2;
}
/*
.Slogan {
    display: inline-block;
    position: fixed;
    top: 34%;
    left: 3.75%;
    font-family: 'LatoLatin-Heavy';
    color: #ffffff;
    font-size: 6.75vw;
}
.Einführung {
    display: inline-block;
    position: fixed;
    width: 60%;
    top: 51.5%;
    left: 4.25%;
    font-family: 'LatoLatin-Regular';
    color: #ffffff;
    font-size: 1.5vw;
    text-align: left;
}
.aus {
    display: inline-block;
    position: fixed;
    top: 73%;
    left: 2.75%;
    background-color: #00000042;
    height: 20%;
    width: 42%;
}
*/

.Slogan {
    display: inline-block;
    position: fixed;
    top: 76%;
    left: 3.75%;
    font-family: 'LatoLatin-Heavy';
    color: #ffffff;
    font-size: 3vw;
}
.Einführung {
    display: inline-block;
    position: fixed;
    width: 40%;
    top: 83.75%;
    left: 3.875%;
    font-family: 'LatoLatin-Regular';
    color: #ffffff;
    font-size: 1vw;
    text-align: left;
}
#Pfeil {
    display: none;
    height: 5%;
    width: auto;
    position: fixed;
    top: 93.5%;
    left: 45%;
}

/* LEISTUNGEN */
.Leistungen {
    display: inline-block;
    height: 120%;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0%;
    background-color: #e0e0e0;
    z-index: 4;
}
.Schiene1 {
    display: flex;
    height: 40%;
    width: 100%;
    position: absolute;
    top: 4%;
    left: 0%;
    z-index: 4;
    justify-content: center
}
.Schiene2 {
    display: flex;
    height: 40%;
    width: 100%;
    position: absolute;
    top: 49%;
    left: 0%;
    z-index: 4;
    justify-content: center;
}
.Schiene3 {
    display: none;
}
.Box {
    display: inline-block;
    height: 100%;
    width: 25%;
    position: relative;
    top: 0%;
    left: 0%;
    background-color: #ffffff;
    z-index: 5;
    margin-left: 1.5%;
    margin-right: 1.5%;
    box-shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px 0px;
    transition: transform 300ms;
    cursor: default;
}
.Box:hover {
    transform: translateY(-2.5%);
    /*transform: scale(1.025);*/
}
.Bezeichner {
    display: flex;
    height: 11%;
    width: 45%;
    position: relative;
    top: 5%;
    left: 0%;
    background-color: #F7A92A;
    z-index: 10;
    justify-content: center;
    align-items: center;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    font-size: 1vw;
}
.Verdunkler {
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: #00000080;
    z-index: 8;
}
.Leistungen_Text {
    display: none;
    height: 50%;
    width: 75%;
    position: absolute;
    top: 33%; /* 22 */
    left: 12.5%;
    z-index: 9;
    font-family: 'LatoLatin-Regular';
    color: #ffffff;
    font-size: 1vw;
}
#Commercials {
    background-image: url(Bilder/Commercial.jpeg);
    background-size: cover;
}
#Hochzeiten {
    background-image: url(Bilder/Hochzeitsfilm.jpeg);
    background-size: cover;
}
#Car_Shootings {
    background-image: url(Bilder/CarShoot.jpeg);
    background-size: cover;
}
#Eventfilme {
    background-image: url(Bilder/Eventfilm.jpeg);
    background-size: cover;
}
#Drohnenaufnahmen {
    background-image: url(Bilder/Drohne.jpeg);
    background-size: cover;
}
#Sonstiges {
    background-image: url(Bilder/Sonstiges.jpeg);
    background-size: cover;
}

/* ÜBER MICH */
.Ueber_Mich {
    display: inline-block;
    height: 55%;
    width: 80%;
    position: absolute;
    top: 200%;
    left: 40%;
    background-color: #F7A92A;
    z-index: 4;
}
.Ueber_Mich_Headline {
    display: inline-block;
    position: absolute;
    top: 16%;
    left: 17%;
    z-index: 4;
    font-family: 'LatoLatin-Bold';
    color: #595959;
    font-size: 3vw;
}
.Ueber_Mich_Text {
    display: inline-block;
    position: absolute;
    width: 65%;
    top: 34%;
    left: 17%;
    z-index: 4;
    font-family: 'LatoLatin-Regular';
    color: #595959;
    font-size: 1.25vw;
    line-height: 1.5vw;
}
.Ueber_Mich_Bild {
    display: inline-block;
    height: 57%;
    width: auto;
    position: absolute;
    top: 220%;
    left: 0%;
    z-index: 4;
}

/* REFERENZEN */
.Referenzen {
    display: inline-block;
    height: 162%;
    width: 100%;
    position: absolute;
    top: 275%;
    left: 0%;
    background-color: #e0e0e0;
    z-index: 5;
}
.Referenzen_Headline {
    display: inline-block;
    position: absolute;
    top: 10%;
    left: 5%;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    font-size: 4vw;
}
.Referenzen_Text {
    display: inline-block;
    position: absolute;
    width: 25%;
    top: 16%;
    left: 5.25%;
    font-family: 'LatoLatin-Regular';
    color: #595959;
    font-size: 1vw;
}
.Instagram {
    display: inline-block;
    position: absolute;
    top: 3.6%;
    left: 72%;
    width: 15%;
    height: auto;
    transition: transform 300ms;
}
.Instagram:hover {
    transform: translateY(-2.5%);
}
.Instagram_Text {
    display: inline-block;
    position: absolute;
    width: 10.15%;
    top: 10%;
    left: 89%;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    font-size: 1.25vw;
    line-height: 1.5vw;
    background-color: #F7A92A;
    border-left: 0.85vw solid #F7A92A;
    border-top: 0.5vw solid #F7A92A;
    border-bottom: 0.5vw solid #F7A92A;
}
.Basis {
    display: inline-block;
    position: absolute;
    top: 22%;
    left: 5%;
    width: 90%;
    height: 70%;
    background-color: #EBEBEB;
}
.BasisMOBILE {
    display: none;
}
.Referenzen_Header {
    display: flex;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 5%;
    background-color: #F7A92A;
    justify-content: center;
    align-items: center;
}
.Referenzen_Auswahl {
    display: flex;
    position: relative;
    width: 16.6%;
    height: 100%;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    font-size: 1.25vw;
    background-color: none;
    justify-content: center;
    align-items: center;
    z-index: 10;
    cursor: pointer;
}
.Referenzen_Header_Border {
    display: inline-block;
    height: 0.35vw;
    width: 100%;
    position: absolute;
    top: 5%;
    left: 0%;
    background-color: #F7A92A;
}

.Referenzen_Block {
    display: inline-block;
    position: absolute;
    width: 16.66%;
    height: 5%;
    background-color: #EBEBEB;
    z-index: 9;
}
#Block_Commercials {
    left: 0%;
}
#Block_Hochzeiten {
    left: 16.66%;
}
#Block_Car_Shootings {
    left: 33.32%;
}
#Block_Eventfilme {
    left: 49.98%;
}
#Block_Drohnenaufnahmen {
    left: 66.64%;
}
#Block_Sonstiges {
    left: 83.3%;
}
#Block_Sonstiges {
    width: 16.69%;
}
.Videos {
    display: inline-block;
    height: 90%;
    width: 100%;
    position: absolute;
    top: 10%;
    left: 0%;
}
.Video {
    display: inline-block;
    height: 26.6%;
    width: 28%;
    position: absolute;
}
#p1 {
    top: 1.5%;
    left: 4%;
}
#p2 {
    top: 1.5%;
    left: 36%;
}
#p3 {
    top: 1.5%;
    right: 4%;
}
#p4 {
    top: 35%;
    left: 4%;
}
#p5 {
    top: 35%;
    left: 36%;
}
#p6 {
    top: 35%;
    right: 4%;
}
#p7 {
    top: 68.5%;
    left: 4%;
}
#p8 {
    top: 68.5%;
    left: 36%;
}
#p9 {
    top: 68.5%;
    right: 4%;
}
.extra {
    display: inline-block;
    position: absolute;
    top: 90%;
    left: 5%;
    width: 90%;
    height: 3.5%;
    background-color: #EBEBEB;
}


/* BEWERTUNGEN */
.Bewertungen {
    display: inline-block;
    height: 54%;
    width: 100%;
    position: absolute;
    top: 431%;
    left: 0%;
    background-color: #e0e0e0;
    z-index: 5;
    overflow: hidden;
}
.Bewertungen_Headline {
    display: inline-block;
    position: relative;
    top: 4%;
    left: 5%;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    font-size: 2vw;
    z-index: 30;
}
.Karussell {
    display: inline-block;
    position: absolute;
    top: 12%;
    width: 100.25%;
    height: 80%;
    background-color: #e0e0e0;
    z-index: 20;
}
.KarussellMOBILE {
    display: none;
}
.card {
    background-color: #F7A92A;
    width: 65%;
    height: 27vh;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 20px;
    margin-left: 8%;
}
.card > p {
    font-family: 'LatoLatin-Regular';
    font-size: 1vw;
    color: rgb(100, 100, 100);   
    margin-bottom: -5%;
}
.card > h6 {
    font-family: 'LatoLatin-Semibold';
    font-size: 1vw;
    color: rgb(100, 100, 100);   
}
.slick-dots
{
    position: absolute;
    top: 79%;
    left: 0.65%;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 1.5%;
    height: 1.5%;
    margin: 0 0.2vw;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before
{
    opacity: .75;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 1.75vw;

    position: absolute;
    top: 0;
    left: 0;

    content: '•';
    text-align: center;

    opacity: .25;
    color: #595959;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: #595959;
}
.slick-slide {
    transform: scale(1);
    opacity: 0.5;
    transition: transform 300ms;
    outline: none;
    cursor: default;
}
.slick-center {
    transform: scale(1);
    opacity: 1;
}

/* KONTAKT */
.Kontakt {
    display: inline-block;
    height: 76%;
    width: 100%;
    position: absolute;
    top: 485%;
    left: 0%;
    background-color: #EBEBEB;
    z-index: 4;
    overflow: hidden;
}
.Kontakt_Headline {
    display: inline-block;
    position: absolute;
    width: 37.5%;
    top: 10%;
    left: 12%;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    font-size: 3vw;
    text-align: center;
}
form {
    display: inline-block;
    height: 50%;
    width: 50%;
    position: absolute;
    left: 14%;
    top: 25%;
}
label {
    display: none;
}
input {
    padding: 2% 2% 2% 2%;
    width: 22%;
    border: none;
    outline: none;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    font-size: 0.88vw;
    background-color: #F6F6F6;
    position: absolute;
    left: 0%;
}
#name {
    top: 5%;
}
#e-mail {
    top: 25%;
}
#mobilnummer {
    top: 45%;
}
input::placeholder {
    color: #DEDEDE;
}
#submit {
    background-color: #F7A92A;
    transition: all 150ms ease-in;
    top: 75%;
    left: 49.5%;
} 
#submit:hover {
    color: #EBEBEB;
    background-color: #595959;
} 
textarea {
    outline: none;
    border: none;
    resize: none;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    padding: 2% 2% 2% 2%;
    font-size: 0.88vw;
    background-color: #F6F6F6; 
    height: 45%;
    width: 40%;
    position: absolute;
    top: 5%;
    left: 27.75%;
}
textarea::placeholder {
    color: #DEDEDE;
}
.Infotext {
    display: inline-block;
    position: absolute;
    width: 25%;
    top: 58.5%;
    left: 14%;
    font-family: 'LatoLatin-Regular';
    color: #595959;
    font-size: 0.65vw;
}
.Verweis {
    display: inline-block;
    position: absolute;
    width: 50%;
    top: 76%;
    left: 14%;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    font-size: 0.9225vw;
}
.Kontakt_Bild {
    display: inline-block;
    height: 100%;
    width: auto;
    position: absolute;
    top: 0%;
    left: 62%;
}

/* FOOTER */
footer {
    display: inline-block;
    height: 25%;
    width: 100%;
    position: absolute;
    top: 561%;
    left: 0%;
    background-color: #DEDEDE;
    z-index: 5;
}
.footer_border {
    display: inline-block;
    height: 0.25vw;
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: #F7A92A;
}
.Impressum_Headline {
    display: inline-block;
    position: absolute;
    top: 15%;
    left: 12%;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    font-size: 1vw;
}
.Impressum {
    display: inline-block;
    position: absolute;
    top: 30%;
    left: 12%;
    font-family: 'LatoLatin-Medium';
    color: #595959;
    font-size: 0.65vw;
}
.SocialMedia {
    display: inline-block;
    position: absolute;
    top: 15%;
    left: 30%;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    font-size: 1vw;
}
.Last {
    display: inline-block;
    position: absolute;
    top: 90%;
    left: 12%;
    font-family: 'LatoLatin-Medium';
    color: #595959;
    font-size: 0.65vw;
}
#Last_link {
    color: #595959;
}
.Instagram_Logo {
    display: inline-block;
    height: auto;
    width: 3.5%;
    position: absolute;
    top: 33%;
    left: 29.25%;
}
.YouTube_Logo {
    display: inline-block;
    height: auto;
    width: 3.5%;
    position: absolute;
    top: 33%;
    left: 32.7%;
}

/* SONSTIGE */
.JUMPER {
display: inline-block;
height: 5%;
width: 100%;
position: absolute;
top: 30%;
left: 0%;
}
.SPRINGER {
    display: inline-block;
    height: 5%;
    width: 100%;
    position: absolute;
    left: 0%;
}
#SPRINGER_LEISTUNGEN {
    top: -10%;
}
#SPRINGER_UEBER_MICH {
    top: -40%;
}
#SPRINGER_REFERENZEN {
    top: -5%;
}
#SPRINGER_KONTAKT {
    top: -15%;
}

/* MACBOOKS */
@media (max-aspect-ratio: 16/10), (max-device-aspect-ratio: 16/10) {
.block1 {
    display: inline-block;
    height: 8%;
    width: 6.6%;
    position: absolute;
    top: 95%;
    left: 63.6%;
    background-color: #e0e0e0;
    z-index: 105;
}
.block11 {
    display: inline-block;
    height: 8%;
    width: 6.6%;
    position: absolute;
    top: 95%;
    left: 63.6%;
    background-color: #F7A92A;
    z-index: 104;
}
.block2 {
    display: inline-block;
    height: 8%;
    width: 6.3%;
    position: absolute;
    top: 95%;
    left: 73%;
    background-color: #e0e0e0;
    z-index: 105;
}
.block22 {
    display: inline-block;
    height: 8%;
    width: 6.3%;
    position: absolute;
    top: 95%;
    left: 73%;
    background-color: #F7A92A;
    z-index: 104;
}
.block3 {
    display: inline-block;
    height: 8%;
    width: 6.75%;
    position: absolute;
    top: 95%;
    left: 82%;
    background-color: #e0e0e0;
    z-index: 105;
}
.block33 {
    display: inline-block;
    height: 8%;
    width: 6.75%;
    position: absolute;
    top: 95%;
    left: 82%;
    background-color: #F7A92A;
    z-index: 104;
}
.block4{
    display: inline-block;
    height: 8%;
    width: 4.9%;
    position: absolute;
    top: 95%;
    left: 91.5%;
    background-color: #e0e0e0;
    z-index: 105; 
}
.block44 {
    display: inline-block;
    height: 8%;
    width: 4.9%;
    position: absolute;
    top: 95%;
    left: 91.5%;
    background-color: #F7A92A;
    z-index: 104;
}
.Schiene1 {
    display: flex;
    height: 36%;
    width: 100%;
    position: absolute;
    top: 4%;
    left: 0%;
    z-index: 2;
    justify-content: center
}
.Schiene2 {
    display: flex;
    height: 36%;
    width: 100%;
    position: absolute;
    top: 44%;
    left: 0%;
    z-index: 2;
    justify-content: center;
}
.Bewertungen {
    display: inline-block;
    height: 45%;
    width: 100%;
    position: absolute;
    top: 420%;
    left: 0%;
    background-color: #e0e0e0;
    z-index: 5;
    overflow: hidden;
}
.Bewertungen_Headline {
    display: inline-block;
    position: relative;
    top: 4%;
    left: 5%;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    font-size: 2vw;
    z-index: 30;
}
.card {
    width: 65%;
    height: 23vh;
    margin-left: 5%;
}
.Slogan {
    top: 75%;
}
.Ueber_Mich {
    top: 209%;
}
.Ueber_Mich_Bild {
    top: 209%;
}
.Referenzen {
    top: 264%;
}
.Instagram {
    top: 4%;
}
.Instagram_Text {
    top: 10%;
}
.Kontakt {
    top: 463% ;
}
textarea {
    left: 29%;
}
#submit {
    top: 72%;
    left: 50.5%;
} 
.Infotext {
    top: 58%;
}
.Verweis {
    top: 75%;
    font-size: 0.9375vw;
}
footer {
    top: 533%;
}
}

/* TABLET LANDSCAPE */
@media (max-aspect-ratio: 12/8), (max-device-aspect-ratio: 12/8) {
nav {
    top: 45%;
}
.allblocks {
    top: 93%;
}
.Slogan {
    top: 67.5%;
    font-size: 3.5vw;
}
.Einführung {
    top: 74%;
}
.Leistungen {
    height: 91%;
    top: 87%;
}
.Ueber_Mich {
    top: 167%;
    height: 42%;
}
.Ueber_Mich_Bild {
    top: 167%;
    height: 42.15%;
}
.Referenzen {
    top: 208%;
    height: 114%;
}
.Bewertungen {
    display: inline-block;
    height: 40%;
    width: 100%;
    position: absolute;
    top: 320%;
    left: 0%;
    background-color: #e0e0e0;
    z-index: 5;
    overflow: hidden;
}
.Bewertungen_Headline {
    display: inline-block;
    position: relative;
    top: 4%;
    left: 5%;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    font-size: 2vw;
    z-index: 30;
}
.card {
    background-color: #F7A92A;
    width: 73%;
    height: 20vh;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 15px;
    margin-left: 4%;
}
.slick-dots
{
    top: 78%;
}
.Kontakt {
    top: 360% ;
    height: 58%;
}
.Kontakt_Headline {
    top: 11.5%;
}
textarea {
    left: 28.5%;
}
#submit {
    top: 74%;
    left: 50.25%;
} 
.Infotext {
    top: 58%;
}
.Verweis {
    top: 75%;
}
footer {
    top: 415%;
    height: 20%;
}
}

/* quadratische Bildschirme 
@media (max-aspect-ratio: 11/10), (max-device-aspect-ratio: 11/10) {
    #logo {
        display: none;
    }
}
*/

/* TABLET PORTRAIT */
@media (max-aspect-ratio: 3/4), (max-device-aspect-ratio: 3/4) {
.nav, .allblocks {
    display: none;
}
#logo {
    display: inline-block;
    height: 45%;
    width: auto;
    position: absolute;
    top: 27.5%;
    left: 3%;
}
.menu_icon {
    display: block;
    position: fixed;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 8%;
    height: 5%;
    font-size: 0;
    text-indent: -9999px;
    appearance: none;
    box-shadow: none;
    border-radius: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    top: 3.75%;
    right: 3%;
    background-color: transparent;
    z-index: 400;
}
.menu_icon:focus {
    outline: none;
}
.menu_icon span {
    display: block;
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    height: 14%;
    background-color: #595959;
}
.menu_icon span:before,
.menu_icon span:after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #595959;
    content: "";
}
.menu_icon span:before {
    top: -250%;
}
.menu_icon span:after {
    bottom: -250%;
}

.menu_icon-X span {
    transition: background-color 0s 0.3s;
}
.menu_icon-X span:before,
.menu_icon-X span:after {
    transition-duration: 0.3s, 0.3s;
    transition-delay: 0.3s, 0s;
}
.menu_icon-X span:before {
    transition-property: top, transform;
}
.menu_icon-X span:after {
    transition-property: bottom, transform;
}

.menu_icon-X.is-active span {
    background: none;
}
.menu_icon-X.is-active span:before {
    top: 0;
    transform: rotate(45deg);
}
.menu_icon-X.is-active span:after {
    bottom: 0;
    transform: rotate(-45deg);
}
.menu_icon-X.is-active span:before,
.menu_icon-X.is-active span:after {
    transition-delay: 0s, 0.3s;
}
.border {
    height: 0.4vw;
}
.aktiv {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #F7A92A;
    z-index: 300;
}
.navigationMOBILE {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.linkbox
{
    display: inline-block;
    width: 25%;
    height: 25%; 
}
.navMOBILE {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: 'LatoLatin-Medium';
    font-size: 4vw;
    color: rgb(100, 100, 100);
    margin-top: 12%;
}
.border {
    height: 0.4vw;
}
.Slogan {
    top: 24.5%;
    font-size: 8vw;
}
.Einführung {
    top: 32.25%;
    width: 70%;
    font-size: 2vw;
}
.Leistungen {
    height: 115%;
    top: 54%;
}
#Car_Shootings, #Sonstiges {
    display: none;
}
.Schiene1 {
    height: 26%;
    top: 3%;
}
.Schiene2 {
    height: 26%;
    top: 32%;
}
.Schiene3 {
    display: flex;
    height: 26%;
    width: 100%;
    position: absolute;
    top: 61%;
    left: 0%;
    z-index: 4;
    justify-content: center;
}
.Box {
    width: 40%;
    margin-left: 2.25%;
    margin-right: 2.25%;
}
#Car_ShootingsMOBILE {
    background-image: url(Bilder/CarShoot.jpeg);
    background-size: cover;
}
#SonstigesMOBILE {
    background-image: url(Bilder/Sonstiges.jpeg);
    background-size: cover;
}
.Bezeichner {        
    font-size: 1.5vw;
}
.Leistungen_Text {
    font-size: 1.5vw;
}
.Ueber_Mich {
    top: 160%;
    height: 30%;
}
.Ueber_Mich_Bild {
    top: 160%;
    height: 32.15%;
}
.Ueber_Mich_Headline {
    top: 15%;
    left: 27%;
    font-size: 4vw;
}
.Ueber_Mich_Text {
    top: 34%;
    left: 27%;
    font-size: 1.75vw;
    line-height: 2vw;
}
.Referenzen {       
    top: 189.5%;
    height: 62%;
}
.Instagram {
    top: 5%;
}
.Instagram_Text {
    top: 11%;
}
.Bewertungen {
    display: inline-block;
    height: 25%;
    width: 100%;
    position: absolute;
    top: 250%;
    left: 0%;
    background-color: #e0e0e0;
    z-index: 5;
    overflow: hidden;
}
.Bewertungen_Headline {
    display: inline-block;
    position: relative;
    top: 4%;
    left: 5%;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    font-size: 2vw;
    z-index: 30;
}
.card {
    background-color: #F7A92A;
    width: 70%;
    height: 10.5vh;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    margin-left: 7%;
}
.slick-dots
{
    top: 59.5%;
}
.Kontakt {
    top: 270% ;
    height: 33%;
    z-index: 10;
}
.Kontakt_Headline {
    top: 11%;
}
footer {
    top: 300%;
    height: 12%;
    z-index: 50;
}
.Instagram_Logo {
    top: 30%;
}
.YouTube_Logo {
    top: 30%;
}
}

/* SMARTPHONE (SE) PORTRAIT */
@media (max-aspect-ratio: 9/15), (device-aspect-ratio: 9/16) {
header {
    height: 8%;
}
.border {
    height: 0.5vw;
    top: 8%;
}
.menu_icon {
    width: 9%;
    height: 4.5%;
    top: 2.25%;
}
#hintergrundvideo {
    display: none !important;
}
.MOBILE {
    display: inline-block;
    position: fixed;
    top: 8%;
    left: 0%;
    height: auto;
    width: 100%;
}
.Titelseite {
    height: 100%;
    top: 0%;
}
.Slogan {
    top: 28%;
    left: 3.75%;
    font-size: 9.5vw;
}
.Einführung {
    width: 91.5%;
    top: 36%;
    left: 4.25%;
    font-size: 3.3vw;
    font-family: 'LatoLatin-Medium';
}
.Button {
    display: inline-block;
    position: fixed;
    top: 49.8%;
    left: 4.25%;
    font-family: 'LatoLatin-Medium';
    color: #595959;
    font-size: 3.5vw;
    background-color: #F7A92A;
    text-align: center;
    border-left: 5vw solid #F7A92A;
    border-right: 5vw solid #F7A92A;
    border-top: 1.25vw solid #F7A92A;
    border-bottom: 1.35vw solid #F7A92A;
}
#Pfeil {
    display: inline-block;
    height: 5%;
    width: auto;
    position: fixed;
    top: 93.5%;
    left: 45%;
}
.Leistungen {
    height: 90%;
    top: 100%;
}
.Ueber_Mich {
    top: 186%;
    left: 40%;
    height: 30%;
    z-index: 5;
    width: 60%;
}
.Ueber_Mich_Bild {
    top: 186%;
    height: 30%;
}
.Ueber_Mich_Headline {
    top: 8%;
    left: 10%;
    font-size: 5vw;
}
.Ueber_Mich_Text {
    width: 80%;
    top: 26%;
    left: 10%;
    font-size: 2vw;
    line-height: 2.3vw;
}
.Referenzen { 
    top: 215.5%;
    height: 110%;
}
.Referenzen_Headline {
    top: 4%;
    left: 5%;
    font-size: 8vw;
}
.Referenzen_Text {
    width: 60%;
    top: 9.5%;
    left: 5.5%;
    font-size: 2vw;
}
.Instagram {
    display: none;
}
.Instagram_Text {
    display: none;
}
.Basis {
    display: none;
}
.BasisMOBILE {
    display: block;
    position: absolute;
    top: 16.5%;
    left: 5%;
    width: 90%;
    height: 62%;
    background-color: #EBEBEB;
}
.BasisMOBILE_Header {
    display: flex;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 8%;
    background-color: #F7A92A;
    justify-content: center;
    align-items: center;
    font-family: 'LatoLatin-Semibold';
    color: #595959;
    font-size: 3.5vw;
}
.grid_container {
    position: absolute;
    top: 8%;
    height: 92%;
    width: 100%;
    display: flex;
    align-items: center;
}
.grid {
    position: absolute;
    height: 95%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 7fr 1fr 7fr 1fr;
    grid-template-rows: 3.5% 20% 4.5% 20% 4.5% 20% 4.5% 20%;
}
.item1 {
    grid-column: 2;
    grid-row: 2;
}
.item2 {
    grid-column: 4;
    grid-row: 2;
}
.item3 {
    grid-column: 2;
    grid-row: 4;
}
.item4 {
    grid-column: 4;
    grid-row: 4;
}
.item5 {
    grid-column: 2;
    grid-row: 6;
}
.item6 {
    grid-column: 4;
    grid-row: 6;
}
.item7 {
    grid-column: 2;
    grid-row: 8;
}
.item8 {
    grid-column: 4;
    grid-row: 8;
}
.extra {
    display: none;
}
iframe {
    display: inline-block;
    min-height: 100%;
    min-width: 100%;
    max-height: 100%;
    max-width: 100%;
}
.slick-slide{
    opacity: 1;
    min-height: 105vh;
}
.Karussell {
    display: none !important;
}
.Bewertungen {
    top: 301%;
    height: 80%;
}
.Bewertungen_Headline {
    font-size: 8vw;
}
.KarussellMOBILE {
    display: inline-block;
    position: absolute;
    top: 8%;
    width: 100%;
    height: 80%;
    background-color: #e0e0e0;
    z-index: 20;
}
.cardMOBILE {
    background-color: #F7A92A;
    width: 73%;
    height: 25vh;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 3%;
    margin-left: 5%;
}
.cardMOBILE > p {
    font-family: 'LatoLatin-Regular';
    font-size: 3vw;
    color: rgb(100, 100, 100);   
    margin-bottom: -5%;
}
.cardMOBILE > h6 {
    font-family: 'LatoLatin-Semibold';
    font-size: 3vw;
    color: rgb(100, 100, 100);   
}
.slick-dots
{
    display: block;
    position: absolute;
    top: 46%;
    left: 1%;
}
.slick-dots li
{
    width: 5%;
    height: 5%;
}
.slick-dots li button:before
{
    font-size: 6vw;
}
.Kontakt {
    top: 350% ;
    height: 100%;
    z-index: 10;
}
.Kontakt_Headline {
    width: 50%;
    top: 6.5%;
    left: 5%;
    font-size: 8vw;
    text-align: left;
}
form {
    display: inline-block;
    height: 80%;
    width: 86%;
    position: absolute;
    left: 4%;
    top: 15%;
}
input {
    padding: 4% 3% 4% 3%;
    width: 100%;
    font-size: 3.5vw;
    left: 0%;
}
#name {
    top: 0%;
}
#e-mail {
    top: 11.5%;
}
#mobilnummer {
    top: 23%;
}
#submit {
    padding: 3.25% 3% 3.25% 3%;
    width: 40%;
    top: 78%;
    left: 66%;
}  
textarea {
    padding: 4% 3% 4% 3%;
    font-size: 3.5vw;
    height: 35%;
    width: 100%;
    top: 34.5%;
    left: 0%;
}
.Infotext {
    width: 50%;
    top: 77%;
    left: 4.5%;
    font-size: 1.5vw;
}
.Verweis {
    width: 92%;
    top: 87%;
    left: 4%;
    font-size: 2.35vw;
}
.Kontakt_Bild {
    display: none;
}
footer {
    top: 444%;
    height: 25%;
    z-index: 11;
}
.footer_border {
    height: 0.5vw;
}
.Impressum_Headline {
    top: 8%;
    left: 5%;
    font-size: 3vw;
}
.Impressum {
    top: 20%;
    left: 5%;
    font-size: 2vw;
}
.SocialMedia {
    top: 55%;
    left: 5%;
    font-size: 3vw;
}
.Instagram_Logo {
    width: 10%;
    top: 67%;
    left: 3.5%;
}
.YouTube_Logo {
    width: 10%;
    top: 67%;
    left: 13.5%;
}
.Last {
    top: 92%;
    left: 5%;
    font-size: 2vw;
}
.linkbox
{
    display: inline-block;
    width: 35%;
    height: 35%; 
}
.navMOBILE {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: 'LatoLatin-Medium';
    font-size: 6vw;
    color: rgb(100, 100, 100);
    margin-top: 13%;
}
}

/* SMARTPHONE (12) PORTRAIT */
@media (max-aspect-ratio: 6/12), (device-aspect-ratio: 6/13) {
.border {
    height: 0.75vw;
    top: 8%;
}
.menu_icon {
    width: 10%;
    height: 4%;
    top: 2.25%;
}
.MOBILE {
    display: none;
}
.MOBILEX {
    display: inline-block;
    position: fixed;
    top: 8%;
    left: 0%;
    height: auto;
    width: 100%;
}
.Slogan {
    top: 29%;
}
.Einführung {
    top: 35.5%;
}
.Button {
    top: 47%;
}
#Pfeil {
    top: 94%;
}
.Leistungen {
    height: 70%;
    top: 100%;
}
.Ueber_Mich {
    top: 166%;
    height: 25%;
}
.Ueber_Mich_Bild {
    top: 166%;
    height: 25%;
}
.Referenzen { 
    top: 191%;
    height: 79%;
}
.Referenzen_Headline {
    top: 5%;
}
.Referenzen_Text {
    top: 10.5%;
}
.BasisMOBILE {
    top: 14%;
    height: 55%;
}
.BasisMOBILE_Header {
    height: 9%;
}
.grid_container {
    top: 9%;
    height: 91%;
}
.grid {
    height: 92.45%;
}
.Bewertungen {
    top: 265%;
    height: 80%;
}
.KarussellMOBILE {
    top: 7%;
}
.cardMOBILE {
    height: 21vh;
}
.slick-dots
{
    top: 37.5%;
}
.Kontakt {
    top: 304% ;
    height: 77%;
}
footer {
    top: 376%;
    height: 21%;
    z-index: 11;
}
.footer_border {
    height: 0.75vw;
}
.linkbox {
    padding-top: 20%;
}
}