/** Custom CSS für Katharina Alt Fotografie Website **/




/* damit visuals auf unterseiten von perch passen */
li.orbit-slide.masta img {
    max-width: 100%;
    width: 100%;
}


.top-bar, ul.menu {
	background-color: #fff;
}

/*
ul.orbit-container {
	max-height: 750px !important;
}

li.orbit-slide {
	max-height: 750px !important;
}
*/
.thumbnail {
	box-shadow: none;
	border: none;
}

ul.menu li a {
	color: #333;
	font-weight: 400;
}

h1, h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-style: italic;
}

body, h3, h4, h5, h6 {
	font-family: 'Lato', sans-serif;
	color: #4b4c54;
}
h1 {
	text-align: center;
}
h4 {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.1em;
}


li.menu-text span {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	line-height: 1;
}

.navigation {
	margin-top: 40px;
}

.project {
	position: relative;
	margin: 2em 0 2em 0 !important;
}

.project-image-overlay {
	position: absolute;
	overflow: hidden;
	height: 100%;
	width:100%;
	top:0;
	left:0;
	opacity: 0;
	background: rgba(40,40,40,0.5);
}
.project-image-overlay:hover {
	opacity: 1;
	transition: all 0.2s ease-in-out;
	overflow: hidden;
}
.project-image-overlay h2 {
	text-align: center;
	color: #fff;
	padding-top:20%;
}

.project h4 {
	margin-top: 10px;
	margin-bottom: 0px;
}

.quote  {
	margin-left: 1px solid #333;
}
.project.quote h1 {
	text-align: left;
}

.button {
    display: inline-block;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 0;
    padding: 0.85em 1em;
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    background-color: #000000;
    color: #fefefe;
}

.button.expanded {
	color: #333;
	margin-left: 30%;
	margin-right:30%;
}

.button.expanded:hover {
	color:#bbb;
}

a.button.expanded {
	color: #fff;
}

.button:hover, .button:focus {
    background-color: #fefefe;
    color: #fff;
}
.project {
	margin-bottom: 1rem;
	transition: all 0.2s ease-in-out;

}

.thumbnail {
    border: none;
    box-shadow: none;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    border-radius: 0;
    margin-bottom: 0px !important;
}

.referenzen {
    text-align: center;
    line-height: 2.25em;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 20px;
    margin-bottom: 30px;
}

.footer {
	margin-bottom: 30px;
}


/** sticky nav **/

.sticky-container {
	height: 50px;
	z-index: 100;
}

#data-stick-container {
width: 100%;
}
/*.sticky {
  position: absolute;
  z-index: 0;
  transform: translate3d(0, 0, 0);
}*/

.sticky.is-stuck {
  position: fixed;
  z-index: 5;
}
.top-bar.sticky.is-stuck.is-at-top {
	width: 75em !important;
	box-shadow: none;
}

.top-bar {
	padding:0px;
}

.profilbild {
	margin-top: 100px;
}

.headline {
	position: relative;
}
.arrow {
	position: absolute;
	top:30px;
	left:33px;
}

.scrollTo {
	text-align: center;
}
.scrollTo a {
	font-size: 1.05rem;
	color: #343434;
}

a {
    color: #909090;
    text-decoration: none;
    line-height: inherit;
    cursor: pointer;
}



.title-bar {
    background: #FFF;
    color: #fefefe;
    padding: 0.5rem;
}

.title-bar.shrink {
	box-shadow: 0 0 1px rgba(0,0,0,.35);
}


























/**** MEDIA QUERIES ***/


@media screen and (min-width: 30em) {


.top-bar .top-bar-left, .top-bar .top-bar-right {
    width: 300px;
}


}