/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ---------------- Menüleiste ---------------------*/

.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0;
	background-color: #353535;
}

#logo {
	display: block;
	padding: 0 30px;
	float: left;
	font-size:20px;
	line-height: 60px;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color: #353535;
	}

/* Styling the links */
nav a {
	display:block;
	padding:14px 20px;	
	color:#FFF;
	font-size:17px;
	text-decoration:none;
}


nav ul li ul li:hover { background: #000000; }

/* Background color change on Hover */
nav a:hover { 
	background-color: #000000; 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 60px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
    z-index: 9999;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

	#logo {
		display: block;
		padding: 0;
		width: 10%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: #353535;
		padding:14px 20px;	
		color:#FFF;
		font-size:17px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #000000;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #000000;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #353535; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}

/* ---------------- Menüleiste Ende  ---------------------*/

/* Photos
--------------------------------------------- */

.inline-photo {
    border: 1em solid #fff;
    border-bottom: 4em solid #fff;
    border-radius: .25em;
    box-shadow: 1em 1em 2em .25em rgba(0, 0, 0, .2);
    margin: 2em auto;
    opacity: 0;
    transform: translateY(4em) rotateZ(-5deg);
    transition: transform 4s .25s cubic-bezier(0, 1, .3, 1), opacity .3s .25s ease-out;
    max-width: 600px;
    width: 90%;
    will-change: transform, opacity;
}

.inline-photo.is-visible {
    opacity: 1;
    transform: rotateZ(-2deg);
}


header {
    opacity: 0;
    transition: opacity .5s .25s ease-out;
}

body {
    margin: 0;
    background-color: rgb(31, 31, 31);
    color: #ffffff;
	word-wrap:break-word !important;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
    display: block
}

a {
    background-color: transparent
}

a:active,
a:hover {
    outline-width: 0
}


b,
strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

img {
    border-style: none
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

.row:after,
.row:before {
    content: "";
    display: table;
    clear: both
}

.third {
    float: left;
    width: 100%
}

@media (min-width:601px) {
    .third {
        width: 33.33333%
    }
}

html,
 body {
     font-family: Verdana, sans-serif;
     font-size: 15px;
     height: 100%;
     color: rgb(185, 185, 185);
     line-height: 1.8;
 }

 html {
     overflow-x: hidden;
     box-sizing: border-box
 }

 *,
 *:before,
 *:after {
     box-sizing: inherit
 }

 h1 {
     font-size: 36px
 }

 h2 {
     font-size: 30px
 }

 h3 {
     font-size: 24px
 }

 h4 {
     font-size: 20px
 }

 h5 {
     font-size: 18px
 }

 h6 {
     font-size: 16px
 }

 body,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: "Lato", sans-serif;
 }

 a {
     color: inherit
 }

 /* Create a Parallax Effect */

 .bgimg-1,
 .bgimg-2,
 .bgimg-3,
 .bgimg-4 {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }

 /* First image (Logo. Full height) */

 .bgimg-4 {
     background-image: url("/img/Rom\ 2016\ 008.JPG");
     min-height: 400px;
 }

 /* Second image (Projects) */

 .bgimg2 {
     background-image: url('/img/ocean.jpg');
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     min-height: 60%;
     background-attachment: fixed;
 }

 /* Third image (Contact) */

 .bgimg3 {
     background-image: url("/img/Rom\ 2016\ 008.JPG");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     min-height: 60%;
     background-attachment: fixed;
 }

 /* Fourth image (Portfolio) */

 .bgimg4 {
     background-image: url("/img/Irland\ 44.JPG");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     min-height: 60%;
     background-attachment: fixed;
 }

 .wide {
     letter-spacing: 10px;
 }

 .content {
     max-width: 80%;
 }

 .link {
     text-decoration: none;
 }

 a:link,
 a:visited {
     text-decoration: none;
 }

 .top {
     top: 0;
     position: fixed;
     width: 100%;
     z-index: 1
 }

 .center {
     text-align: center
 }

 .container {
     padding: 0.01em 16px
 }

 .section {
     margin-top: 16px;
     margin-bottom: 16px
 }

 .content,
 .auto {
     margin-left: auto;
     margin-right: auto
 }


 /* Farben */

 .black,
 .hover-black:hover {
     color: #fff;
     background-color: #000
 }

 .dark-grey,
 .hover-dark-grey:hover,
 .dark-gray,
 .hover-dark-gray:hover {
     color: #fff;
     background-color: #616161
 }

 .light-grey,
 .hover-light-grey:hover,
 .light-gray,
 .hover-light-gray:hover {
     color: #000;
     background-color: #f1f1f1
 }

 .white,
 .hover-white:hover {
     color: #000;
     background-color: #fff
 }

 .text-white,
 .hover-text-white:hover {
     color: #fff
 }

 .text-black,
 .hover-text-black:hover {
     color: #000
 }

 .text-grey,
 .hover-text-grey:hover,
 .text-gray,
 .hover-text-gray:hover {
     color: #757575
 }

 .text-light-grey,
 .hover-text-light-grey:hover,
 .text-light-gray,
 .hover-text-light-gray:hover {
     color: #f1f1f1
 }

 .text-dark-grey,
 .hover-text-dark-grey:hover,
 .text-dark-gray,
 .hover-text-dark-gray:hover {
     color: #3a3a3a
 }

 /* Paddings */

 .padding-16 {
     padding-top: 16px;
     padding-bottom: 16px
 }

 .padding-24 {
     padding-top: 24px;
     padding-bottom: 24px
 }

 .padding-32 {
     padding-top: 32px;
     padding-bottom: 32px
 }

 .padding-48 {
     padding-top: 48px;
     padding-bottom: 48px !
 }

 .padding-64 {
     padding-top: 64px;
     padding-bottom: 64px
 }

 .padding-small {
     padding: 4px 8px
 }

 .padding {
     padding: 8px 16px
 }

 .padding-large {
     padding: 12px 24px
 }

 /* Größe */

 .large {
     font-size: 18px
 }

 .xlarge {
     font-size: 24px
 }

 .xxlarge {
     font-size: 36px
 }

 .button:hover {
     color: #000;
     background-color: #ccc
 }

 .display-container:hover .display-hover {
     display: block
 }

 .display-container:hover span.display-hover {
     display: inline-block
 }

 .display-hover {
     display: none
 }

 .display-container {
     position: relative
 }

 .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Zentriert den Text sowohl horizontal als auch vertikal */
    /*background: rgba(0, 0, 0, 0.5); Halbtransparenter Hintergrund */
    color: white;
    padding: 10px;
    font-size: 60px;
    text-align: center;
    width: 100%;
    font-family: "Satisfy", cursive;
}

.image-container {
    position: relative;
    width: 100%;
}

 .col,
 .half,
 .third,
 .twothird,
 .threequarter,
 .quarter {
     float: left;
     width: 100%
 }

 .col2 {
     float: right;
     width: 100%
 }

 .wide {
     letter-spacing: 4px
 }

 .hide {
     display: none
 }

 @media (max-width:600px) {
     .hide-small {
         display: none
     }
 }

 .mobile {
     display: block;
     width: 100%
 }

 .border {
     border: 1px solid #ccc
 }

 .right {
     float: right
 }

 .margin-right {
     margin-right: 16px
 }

 .bottom {
     margin-bottom: 30px;
 }

 .-round {
     border-radius: 4px
 }

 .home-button {
    display: inline-block;
    background-color: #333;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.home-button:hover {
    background-color: #555;
    color: #fff;
}

 /* Bilder */

 .image {
    max-width: 100%;
}

.imageLogo {
    max-width: 5%;
    height: auto; /* Beibehaltung des Seitenverhältnisses */
}

/* Anpassung für mobile Geräte */
@media screen and (max-width: 600px) {
    .imageLogo {
        max-width: 60%; /* Größere Breite auf mobilen Geräten */
    }
}

.image2 {
    max-width: 80%;
    height: auto;
}

.image3 {
    max-width: 60%;
    height: auto;
}

img {
    vertical-align: middle
}

.input {
    padding: 8px;
    display: block;
    border: none;
    border-bottom: 1px solid #ccc;
    width: 100%
}

.full-width-image {
    width: 100vw; /* Stellt sicher, dass das Bild die gesamte Bildschirmbreite einnimmt */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
    display: block; /* Entfernt eventuelle Abstände um das Bild */
}

.polaroid {
    width: 200px;
    padding: 10px;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    margin: 20px;
    transform: rotate(-5deg); /* Hier wird das Bild leicht geneigt */
    transition: transform 0.3s ease; /* Für einen Hover-Effekt */
}

.polaroid:hover {
    transform: rotate(0deg); /* Beim Hovern wird das Bild gerade */
}

.caption {
    color: #333;
    font-size: 14px;
    padding-top: 10px;
}

/* Transparenz */

.opacity2 {
    opacity: 0.80
}

.opacity,
.hover-opacity:hover {
    opacity: 0.50
}

.opacity-off,
.hover-opacity-off:hover {
    opacity: 1
}

.opacity-max {
    opacity: 0.25
}

.hover-opacity {
    cursor: pointer;
}

.opacity-min {
    opacity: 0.60
}

.animate-opacity {
    animation: opac 0.8s
}

.-container:after,
.container:before,
.panel:after,
.panel:before,
.row:after,
.row:before,
.row-padding:after,
.row-padding:before,
.cell-row:before,
.cell-row:after,
.clear:after,
.clear:before,
.bar:before,
.bar:after {
    content: "";
    display: table;
    clear: both
}

.row-padding,
.row-padding>.half,
.row-padding>.third,
.row-padding>.twothird,
.row-padding>.threequarter,
.row-padding>.quarter,
.row-padding>.col {
    padding: 0 8px
}

@media (min-width:601px) {
    .col.m1 {
        width: 8.33333%
    }

    .col.m2 {
        width: 16.66666%
    }

    .col.m3,
    .quarter {
        width: 24.99999%
    }

    .col.m4,
    .third {
        width: 33.33333%
    }

    .col2.m4,
    .third {
        width: 33.33333%
    }

    .col.m5 {
        width: 41.66666%
    }

    .col.m6,
    .half {
        width: 49.99999%;
    }

    .col.m7 {
        width: 58.33333%
    }

    .col.m8,
    .twothird {
        width: 66.66666%
    }

    .col.m9,
    .threequarter {
        width: 74.99999%
    }

    .col.m10 {
        width: 83.33333%
    }

    .col.m11 {
        width: 91.66666%
    }

    .col.m12 {
        width: 99.99999%
    }
}

.modal {
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4)
}

.modal-content {
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px
}

.display-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

.display-topright {
    position: absolute;
    right: 0;
    top: 0
}

.margin-bottom {
    margin-bottom: 16px
}

.card,
.card-2 {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}

.card-4,
.hover-shadow:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19)
}

.show-block,
.show {
    display: block
}

.show-inline-block {
    display: inline-block
}

.animate-top {
    position: relative;
    animation: animatetop 0.4s
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

.animate-zoom {
    animation: animatezoom 0.6s
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.transparent,
.hover-none:hover {
    background-color: transparent
}

@media (max-width:768px) {
    .modal-content {
        width: 500px
    }

    .modal {
        padding-top: 50px
    }
}

@media (min-width:993px) {
    .modal-content {
        width: 900px
    }

    .hide-large {
        display: none
    }

    .sidebar.collapse {
        display: block !important
    }
}

@media (max-width:992px) and (min-width:601px) {
    .hide-medium {
        display: none
    }
}