@import url("reset.css");

/*-----------FONTS-----------*/

/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/open-sans-v34-latin-300italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/open-sans-v34-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-500 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/open-sans-v34-latin-500.eot'); /* IE9 Compat Modes */
  src: url('../fonts/open-sans-v34-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-500italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/open-sans-v34-latin-500italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/open-sans-v34-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-500italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */
  src: url('../fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/open-sans-v34-latin-600italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/open-sans-v34-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* dancing-script-regular - latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dancing-script-v24-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/dancing-script-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dancing-script-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/dancing-script-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/dancing-script-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/dancing-script-v24-latin-regular.svg#DancingScript') format('svg'); /* Legacy iOS */
}

/* dancing-script-500 - latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/dancing-script-v24-latin-500.eot'); /* IE9 Compat Modes */
  src: url('../fonts/dancing-script-v24-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dancing-script-v24-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/dancing-script-v24-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/dancing-script-v24-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/dancing-script-v24-latin-500.svg#DancingScript') format('svg'); /* Legacy iOS */
}


/*-----------FONTGESTALTUNG-----------*/

body {font-family: 'Open Sans'}
p {font-size: 15px; font-style: italic; font-weight: 300; line-height: 22px; color: #47474c; margin-bottom: 15px;}
a {color: #000; text-decoration: none; cursor: pointer;}
h1 {font-size: 35px; line-height: 40px; margin-bottom: 10px;}
h2 {font-size: 22px; font-style: italic; margin-bottom: 10px; color: #47474c}
h3 {font-family: 'Dancing Script'; font-size: 40px; color: #a5c8ed; margin-bottom: 30px;}
h4 {font-family: 'Dancing Script'; font-size: 20px; color: #fff; margin-bottom: 20px;}
li {font-size: 16px; line-height: 25px;}
strong {font-weight: 500; font-weight: 600;}


/*-----------NAVI-----------*/

.logo {position: fixed; width: 150px; height: auto; top: 10px; left: 5%; z-index: 9999;}
nav {position: fixed; background: #fff; width: 100%; z-index: 101; top: 0; text-align: right; padding: 25px 0; z-index: 100;}
nav ul {margin-right: 5%;}
nav ul li {display: inline-block; margin: 0 2%;}
nav ul li a {text-decoration: none; font-size: 16px; color: #47474c; font-weight: 600; font-style: italic;}
nav ul li a:hover {color: #a5c8ed}

.button {background-color: #07085d; color: #fff; font-family: 'Dancing Script'; font-size: 22px; font-weight: 300; padding: 5px 10px; transition: 0.5s;}
.button:hover {text-decoration: none; background-color: #a5c8ed; color: #fff;}

.navi {display: none;}
.burger-nav {position: fixed; right: 0; top: 28px; color: #fff; z-index: 9999; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 40px; cursor: pointer; transition: all .4s ease-in-out; background-color: #07085d; padding: 16px 21px 21px 19px;}
.burger-nav b {transition: all .4s ease-in-out; float: left; margin-left: 0; font-family: 'Roboto'; font-style: normal;}
.burger-nav-anim {top: 25px; color: #fff; z-index: 99999;}
.burger-nav-anim b:first-of-type {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.burger-nav-anim b:nth-of-type(2) {opacity: 0;}
.burger-nav-anim b:last-of-type {-webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -80%;}

.full-screen-nav {position: fixed; z-index: 9999; width: 100%; height: 110vh; background: #07085d; display: table; visibility: hidden; transition: all .4s ease-in-out; opacity: 0;}
.full-screen-nav ul {text-align: center; display: table-cell; vertical-align: middle; width: 100%;}
.full-screen-nav ul li a {padding: 20px; display: block; font-size: 35px; color: #fff; transition: all .4s ease-in-out; text-decoration: none; font-family: 'Dancing Script';}
.fadeIn {opacity: 1 !important; visibility: visible !important;}
.fadeUp {opacity: 1 !important; margin-top: 0 !important;}


/*-----------ASIDE-----------*/

aside {margin-top: -32px;}
aside img {position: fixed; background-color: #07085d; width: 45px; z-index: 999; left: 0; transition: 0.5s;}
aside img:hover {background-color: #a5c8ed;}
.book {top: 300px;}
.mail {top: 370px;}
.phone {top: 440px;}


/*-----------SUBNAV-----------*/

.subnav {position: fixed; top: 75px; padding: 5px 0; color: #fff; background-color: #07085d; z-index: 999; transition: 0.5s; width: 100%; text-align: right;}
.subnav a, .subnav p {color: #fff; font-size: 14px;}
.subnav a {padding: 0 15px;}
.subnav p {margin-bottom: 0;}
.subnav a:nth-of-type(2) {margin-right: 5%;}
.subnav a:hover {color: #a5c8ed;}


/*-----------HEADER-----------*/

header {background: url("../images/pefkochori-header.jpg") no-repeat; height: 100vh; width: 100%; background-size: cover; background-attachment: fixed; background-position: center; position: relative;}

header .stoerer {position: absolute; left: 10%; bottom: 10vh; background-color: rgba(7,8,93,0.8); padding: 40px;}

.entries1, .entries2 {height: auto; width: 100%;}
.entries1 p, .entries2 p {color: #fff;}
.entries1 .entry, .entries2 .entry2 {display: none;}
.fancy {font-family: 'Dancing Script'; font-size: 30px; line-height: 35px;}

.entries1 .btn, .entries2 .btn {background-color: #fff; color: #07085d; font-weight: 700; font-style: italic; text-transform: uppercase;}
.entries1 .btn:hover, .entries2 .btn:hover {background-color: #a5c8ed; color: #fff;}

header .arrow {position: absolute; bottom: 10px; left: 48%; width: 30px; height: 35px; background-image: url(../images/arrow-white.svg); background-size: cover; background-position: center;}


/*-----------AUFBAU-----------*/

html {scroll-behavior: smooth;}
.flex {display: flex;}
#id1, #id2 {padding: 120px 0;}
.content {display: flex; width: 80%; margin-left: 10%;}
.col {width: 90%;}
.col:nth-of-type(2) {padding-left: 10%;}

.btn {background-color: #000; color: #fff; padding: 5px 30px; transition: 0.5s;}
.btn:hover {background-color: #6d6d6d;}
::-moz-selection {background: #a5c8ed; color: #000;}
::selection {background: #a5c8ed; color: #000;}

.arrow-white {position: relative; top: 50px; left: 49%; width: 30px; height: 35px; background-image: url(../images/arrow-white.svg); background-size: cover; background-position: center;}

.arrow-blue {position: relative; top: 50px; left: 49%; width: 30px; height: 35px; background-image: url(../images/arrow-blue.svg); background-size: cover; background-position: center;}

.bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}


/*-----------VERMIETUNG-----------*/

#vermietung {padding: 120px 0;}
video {width: 100%; height: 500px;}


/*-----------APARTMENT-----------*/

#apartment {background: url("../images/background-grey.jpg") no-repeat; height: auto; width: 100%; background-size: cover;background-position: center; position: relative; padding: 120px 0;}
.aussenansicht {width: 100%; height: auto;}


/*-----------AUSSTATTUNG-----------*/

#ausstattung {display: flex;}

.slideshow-container {width: 50%; height: auto; position: relative; margin: auto;}
.fade {animation-name: fade; animation-duration: 1.5s;}

.mySlides:nth-of-type(1) {background: url("../images/luxusimmobilien-griechenland-galerie1.jpg") no-repeat; width: 100%; height: 950px; background-size: cover; background-position: center; position: relative;}

.mySlides:nth-of-type(2) {background: url("../images/luxusimmobilien-griechenland-galerie2.jpg") no-repeat; width: 100%; height: 950px; background-size: cover; background-position: center; position: relative;}

.mySlides:nth-of-type(3) {background: url("../images/luxusimmobilien-griechenland-galerie3.jpg") no-repeat; width: 100%; height: 950px; background-size: cover; background-position: center; position: relative;}

.mySlides:nth-of-type(4) {background: url("../images/luxusimmobilien-griechenland-galerie4.jpg") no-repeat; width: 100%; height: 950px; background-size: cover; background-position: center; position: relative;}

.mySlides:nth-of-type(5) {background: url("../images/luxusimmobilien-griechenland-galerie5.jpg") no-repeat; width: 100%; height: 950px; background-size: cover; background-position: center; position: relative;}

.mySlides:nth-of-type(6) {background: url("../images/luxusimmobilien-griechenland-galerie6.jpg") no-repeat; width: 100%; height: 950px; background-size: cover; background-position: center; position: relative;}

.mySlides:nth-of-type(7) {background: url("../images/luxusimmobilien-griechenland-galerie7.jpg") no-repeat; width: 100%; height: 950px; background-size: cover; background-position: center; position: relative;}

.mySlides:nth-of-type(8) {background: url("../images/luxusimmobilien-griechenland-galerie8.jpg") no-repeat; width: 100%; height: 950px; background-size: cover; background-position: center; position: relative;}

.mySlides:nth-of-type(9) {background: url("../images/luxusimmobilien-griechenland-galerie9.jpg") no-repeat; width: 100%; height: 950px; background-size: cover; background-position: center; position: relative;}

.mySlides:nth-of-type(10) {background: url("../images/luxusimmobilien-griechenland-galerie10.jpg") no-repeat; width: 100%; height: 950px; background-size: cover; background-position: center; position: relative;}

.mySlides:nth-of-type(11) {background: url("../images/luxusimmobilien-griechenland-galerie11.jpg") no-repeat; width: 100%; height: 950px; background-size: cover; background-position: center; position: relative;}

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


#ausstattung .text {background: url("../images/background-blue.jpg") no-repeat; height: auto; width: 40%; background-size: cover;background-position: center; position: relative; padding: 150px 5%;}

#ausstattung h2, #ausstattung h3, #ausstattung p, #ausstattung li {color: #fff;} 
#ausstattung ul {margin-bottom: 30px;}
#ausstattung li {margin-bottom: 20px;}

#ausstattung li {position: relative; padding-left: 40px;}

.wohnung::before {content: url(../images/wohnung.png); position: absolute; left: 0;}
.erwachsene::before {content: url(../images/erwachsene.png); position: absolute; left: 0;}
.preis::before {content: url(../images/preis.png); position: absolute; left: 0;}
.jacuzzi::before {content: url(../images/jacuzzi.png); position: absolute; left: 0;}
.smart-tv::before {content: url(../images/smart-tv.png); position: absolute; left: 0;}
.wlan::before {content: url(../images/wlan.png); position: absolute; left: 0;}
.lichtgestaltung::before {content: url(../images/lichtgestaltung.png); position: absolute; left: 0;}
.klimaanlage::before {content: url(../images/klimaanlage.png); position: absolute; left: 0;}
.waschmaschine::before {content: url(../images/waschmaschine.png); position: absolute; left: 0;}
.nichtraucher::before {content: url(../images/nichtraucher.png); position: absolute; left: 0;}
.haustiere::before {content: url(../images/haustiere.png); position: absolute; left: 0;}
.taverne::before {content: url(../images/taverne.png); position: absolute; left: 0;}
.supermarkt::before {content: url(../images/supermarkt.png); position: absolute; left: 0;}
.strand::before {content: url(../images/strand.png); position: absolute; left: 0;}


/*-----------LAGE-----------*/

#lage {background: url("../images/background-grey.jpg") no-repeat; height: auto; width: 100%; background-size: cover; background-position: center; position: relative; padding: 120px 0;}
.map {width: 100%; height: auto;}

#lage .col:nth-of-type(1) p {position: relative; padding-left: 40px; font-size: 18px;}
.marker1::before {content: url(../images/pefkochori-mark.png); position: absolute; left: 0; top: -5px}
.marker2::before {content: url(../images/thessaloniki-mark.png); position: absolute; left: 0; top: -5px}


/*-----------EXTRAS-----------*/

#extras {display: flex;}
#extras .bild {background: url("../images/strand-pefkochori.jpg") no-repeat; height: auto; width: 50%; background-size: cover;background-position: center; position: relative;}
#extras .text {background: url("../images/background-blue.jpg") no-repeat; height: auto; width: 40%; background-size: cover;background-position: center; position: relative; padding: 150px 5%;}

.prosolvi {width: 200px; height: auto;}

#extras h2, #extras h3, #extras p, #extras li {color: #fff;}


/*-----------PUFFER-----------*/

.puffer1 {background: url("../images/pefkochori-strand.jpg") no-repeat; height: 500px; width: 100%; background-size: cover; background-attachment: fixed; background-position: center; position: relative;}

.puffer2 {background: url("../images/pefkochori-paar.jpg") no-repeat; height: 500px; width: 100%; background-size: cover; background-attachment: fixed; background-position: center; position: relative;}

.puffer2 .stoerer {position: absolute; left: 10%; bottom: 50px; background-color: rgba(7,8,93,0.8); padding: 40px;}


/*-----------IMMOBILIENKAUF-----------*/

#immobilienkauf {padding: 120px 0;}
.infobox {background: url("../images/background-blue.jpg") no-repeat; height: auto; width: 40%; background-size: cover; background-position: center;  padding: 100px 150px 90px 30px; position: relative;}
.infobox p, .infobox a {color: #fff;}
.infobox a {text-decoration: underline;}
.neumann {width: 50%; height: auto; position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%);}


/*-----------BUCHUNG-----------*/

#buchen { background: url("../images/pefkochori-promenade.jpg") no-repeat; width: 100%; height: auto; background-size: cover; background-position: center; position: relative; padding: 150px 0; text-align: center;}

#buchen .btn {background-color: #07085d; color: #fff; font-weight: 700; font-style: italic; text-transform: uppercase;}
#buchen .btn:hover {background-color: #a5c8ed; color: #fff;}

.box {width: 70%; margin-left: 10%; background-color: #fff; padding: 80px 5%;}
.box p {width: 50%; margin-left: 25%;}


/*-----------IMPRESSUM & LANDINGPAGE-----------*/

#impressum {padding: 120px 0;}
#impressum a {text-decoration: underline; color: #07085d; font-weight: 500;}
#impressum h4 {color: #07085d; font-size: 30px;}

/*-----------FOOTER-----------*/

#landing {padding: 120px 0;}
#landing a {text-decoration: underline; color: #07085d; font-weight: 500;}
#landing h4 {color: #07085d; font-size: 30px;}

#landing .col:nth-last-of-type(1) {background: url("../images/luxusimmobilien-griechenland.jpg") no-repeat; width: 90%; height: auto; background-size: cover; background-position: center; position: relative; text-align: center; margin-left: 10%;}

.lp {background-color: #a5c8ed; padding: 30px 0; text-align: center;}
.lp p {margin-bottom: 0;}
.lp p a {color: #fff; font-weight: 600;}
.lp p a:hover {text-decoration: underline;}


/*-----------FOOTER-----------*/

footer {display: flex;}
footer p, footer h2, footer h3, footer a {color: #fff;}
footer a {text-decoration: underline;}
.neumann-footer {width: 70%; height: auto;}

footer .text {background: url("../images/background-blue.jpg") no-repeat; height: auto; width: 40%; background-size: cover;background-position: center; position: relative; padding: 80px 5%;}

.dsa-secure-plugin iframe {height: 100%;}


/*-----------RESPONSIVE-----------*/

@media screen and (max-width: 1366px) {
    header, .puffer1, .puffer2 {background-attachment: scroll;}
}

    

@media screen and (max-width: 1117px) {
    .buchung {height: 600px!important;}
    
    #landing .content {display: block;}
    #landing .content .col {width: 100%; margin-left: 0;}
    #landing .col:nth-last-of-type(1) {background: url("../images/luxusimmobilien-griechenland.jpg") no-repeat; width: 90%; height: 400px; background-size: cover; background-position: center; position: relative; text-align: center; margin-left: 0;}
}

@media screen and (max-width: 1000px) {
    #ausstattung {display: block;}
    #ausstattung .text {width: 80%; padding: 100px 10%;}
    
    .slideshow-container {width: 100%;}
    
    .mySlides:nth-of-type(1) {background: url("../images/apartment-galerie1.jpg") no-repeat; width: 100%; height: 500px; background-size: cover; background-position: center;}

    .mySlides:nth-of-type(2) {background: url("../images/apartment-galerie2.jpg") no-repeat; width: 100%; height: 500px; background-size: cover; background-position: center;}

    .mySlides:nth-of-type(3) {background: url("../images/apartment-galerie3.jpg") no-repeat; width: 100%; height: 500px; background-size: cover; background-position: center;}

    .mySlides:nth-of-type(4) {background: url("../images/apartment-galerie4.jpg") no-repeat; width: 100%; height: 500px; background-size: cover; background-position: center; position: relative;}

    .mySlides:nth-of-type(5) {background: url("../images/apartment-galerie5.jpg") no-repeat; width: 100%; height: 500px; background-size: cover; background-position: center; position: relative;}

    .mySlides:nth-of-type(6) {background: url("../images/apartment-galerie6.jpg") no-repeat; width: 100%; height: 500px; background-size: cover; background-position: center; position: relative;}

    .mySlides:nth-of-type(7) {background: url("../images/apartment-galerie7.jpg") no-repeat; width: 100%; height: 500px; background-size: cover; background-position: center; position: relative;}
    
    .mySlides:nth-of-type(8) {background: url("../images/apartment-galerie8.jpg") no-repeat; width: 100%; height: 500px; background-size: cover; background-position: center; position: relative;}
    
    .mySlides:nth-of-type(9) {background: url("../images/apartment-galerie9.jpg") no-repeat; width: 100%; height: 500px; background-size: cover; background-position: center; position: relative;}
    
    .mySlides:nth-of-type(10) {background: url("../images/apartment-galerie10.jpg") no-repeat; width: 100%; height: 500px; background-size: cover; background-position: center; position: relative;}
    
    .mySlides:nth-of-type(11) {background: url("../images/apartment-galerie11.jpg") no-repeat; width: 100%; height: 500px; background-size: cover; background-position: center; position: relative;}
}

@media screen and (max-width: 900px) {
    h1 {font-size: 25px; line-height: 30px;}
    h1 b {font-size: 25px;}
    .logo {position: absolute; background-color: #fff; padding: 15px 20px; left: 0; top: 32px; z-index: 9;}
    header {height: 75vh;}
    nav {background: none; box-shadow: 0 0 0;}
    nav ul{display: none;}
    .navi {display: block;}
    
     .infobox {padding: 150px 30px 30px 30px; width: 75%; margin-top: 200px;}
    .neumann {top: -30px; left: 50%; width: 250px;}
    
    .subnav {top: 0;}
}

@media screen and (max-width: 775px) {
    h3 {font-size: 30px;}
    
    .content {display: block;}
    .col {width: 80%; margin-left: 10%;}
    .col:nth-of-type(2) {padding: 40px 0 0;}
    
    .aussenansicht {width: 100%;}
    
    #ausstattung .flex {display: block;}
    #ausstattung .flex .col {margin: 0;}
    #ausstattung .text {width: 60%; padding: 100px 20%;}
    
    #apartment .arrow-blue {display: none;}
    #extras {display: block;}
    #extras .text {width: 80%; padding: 150px 10%;}
    .puffer2 {height: 300px;}
    
    .buchung {height: 920px!important;}
    
    #landing .col:nth-last-of-type(1) {background: url("../images/luxusimmobilien-griechenland.jpg") no-repeat; width: 100%; height: 400px; background-size: cover; background-position: center; position: relative; text-align: center; margin-left: 0;}
    
    footer {display: block;}
    footer .text {width: 80%; padding: 100px 10%;}
    .dsa-secure-plugin {width: 100%!important; height: 400px!important;}
}

@media screen and (max-width: 525px) {
    .fancy {font-size: 25px; line-height: 30px}
    .stoerer {margin-right: 5%}
    
    aside img {width: 40px;}
    .book {top: 250px}
    .mail {top: 300px}
    .phone {top: 350px}
    
    .buchung {height: 1100px!important;}
    .cal_month {width: 100%!important;}
    
    
}