@font-face {
  font-family: 'Rouge Script';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/rougescript.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 200;
  src: url(../fonts/yanone-kaffeesatz-thin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/yanone-kaffeesatz-light.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/yanone-kaffeesatz-regular.woff) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/yanone-kaffeesatz-bold.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
		margin: 0;
		padding: 0;
		min-height: 100%;
		max-width: 100vw;
		min-width: 350px;
		height: auto !important;
		overflow-x: hidden;
	}
	@media all and (display-mode: standalone) {
	body {
		margin: 0;
		min-width: 400px;
	  }
	}

	body {
		font-family: 'Yanone Kaffeesatz', sans-serif;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		-webkit-appearance: none;
		letter-spacing: 0.08em;
		line-height: 1.5em;
		font-weight: 400;
		margin: 0;
		padding: 0;
		min-height: 100%;
		min-width: 350px;
		height: auto;
		position: relative;
		overflow: hidden;
		background-color: #fff;
		color: #878787;
	}
	
	.logo {
		width: 100%;
		text-align: center;
		margin: 15px auto;
		background-image: url(../images/pfoetchen_quer.png);
	    background-position: center center;
	    background-size: contain;
	    background-repeat: repeat-x;
	}
	
	.logo img {
		max-width: 200px;
		height: auto;
	}
	
	@media (min-width: 1001px){
	header {
		height: 60vh;
		width: 100%;
		background: url(../images/Oskar_und_Jack-Headerbild.jpg);
	    background-position: center center;
	    background-size: cover;
	    background-repeat: repeat-x;
	}
}

@media (min-width: 601px) and (max-width: 1000px){
	header {
		height: 40vh;
		width: 100%;
		background: url(../images/Oskar_und_Jack-Headerbild.jpg);
	    background-position: center center;
	    background-size: cover;
	    background-repeat: repeat-x;
	}
}


@media (max-width: 600px){
	header {
		height: 30vh;
		width: 100%;
		min-width: 350px;
		background: url(../images/Oskar_und_Jack-Headerbild.jpg);
	    background-position: center center;
	    background-size: cover;
	    background-repeat: repeat-x;
	}
}
	p {
		margin: 10px auto;
		font-size: 20px;
	}
	
@media (min-width: 1001px){
	h1 {
		font-family: 'Rouge Script', cursive;
		font-size: 50px;
		margin-top: 40px;
		line-height: 50px;
	}
}
@media (max-width: 1000px){
	h1 {
		font-family: 'Rouge Script', cursive;
		font-size: 30px;
		margin-top: 40px;
		line-height: 30px;
	}
}

	h2, h3, h4, h5, h6 {
		font-family: 'Yanone Kaffeesatz', sans-serif;
		font-size: 30px;
		top: 10px;
	}

	.outerframe { 
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

	}
    	
/*	.leftwrapper {
		background: url(../images/pfoetchen.png);
	    background-size: 100%;
	    background-repeat: no-repeat;
	    width: 35%;
	    height: 100%;
	    min-height: 2048px;
    }
*/
	.wrapper {
		width: calc(100% - 80px);
		height: 100%;
		margin: 10px auto;
		padding: 0px 40px; 
		max-width: 1200px;
	}
	
		
	a {
		color: #e8c8a0;
		text-decoration: none;
	}
	
	a:hover {
		color: #000;
		text-decoration: none;
	}

	.prefooter {
		width: 100%;
		height: 4px;
		margin: 20px 0px;
		background-color: #e8c8a0;
		content: "";
		display: block;
	}

	
	footer {
		width: calc(100% - 40px);
		height: 80px;
		margin: 20px;
		line-height: 40px;
		color: #878787;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	
	footer a {
		color: #000;
		font-size: 16px;
	}
	
	footer a:hover {
		color: #e8c8a0;
		font-size: 16px;
	}

	.instafeed {
		width: calc(100% - 80px);
		height: 100%;
		margin: 10px auto;
		padding: 0px 40px; 
		max-width: 1200px;
	}
	
	.instafeed h2 {
		margin-bottom: 15px;
	}

.instaloading span {
    opacity: 0;
}
.instaloading span:nth-of-type(1) {
    animation: dfi1 3s linear infinite;
}
.instaloading span:nth-of-type(2) {
    animation: dfi2 3s linear infinite;
}
.instaloading span:nth-of-type(3) {
    animation: dfi3 3s linear infinite;
}
@keyframes dfi1 {
    0% {opacity: 0}
    15% {opacity: 0}
    20% {opacity: 1}
    80% {opacity: 1}
    95% {opacity: 0}
    100% {opacity: 0}
}
@keyframes dfi2 {
    0% {opacity: 0}
    35% {opacity: 0}
    40% {opacity: 1}
    80% {opacity: 1}
    95% {opacity: 0}
    100% {opacity: 0}
}
@keyframes dfi3 {
    0% {opacity: 0}
    55% {opacity: 0}
    60% {opacity: 1}
    80% {opacity: 1}
    95% {opacity: 0}
    100% {opacity: 0}
}

	.row {
		text-align: center; 
		width: 100%;   
		display: flex;
		flex-flow: row wrap;
		justify-content: space-betweem;
		align-items: flex-start;
	}
	
	.item_box {
		flex: 1 1 300px;
		height: auto;
		min-width: 100px;
		max-width: 350px;
		min-height: 100px;
		max-height: 350px;
		vertical-align: middle;
		overflow: hidden;
		margin: 5px;
	}

	.photo-thumb{
		width: 100%;
		height: auto;
		float: left; 
		border: none;
		margin:0 1em .5em 0;
		float:left; 
		box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.0);
		transition: all .2s ease-in;
	}

	.photo-thumb:hover{
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
		transition: all .2s ease-in;
	}
	
	.empty {
		min-height: 0px;
		background-color: transparent;
		padding: 0;
		pointer-events: none;
		border-color: transparent;
	}