/* mystery-quest-regular - latin */
@font-face {
  font-family: 'Mystery Quest';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/mystery-quest-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/mystery-quest-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/mystery-quest-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/mystery-quest-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/mystery-quest-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/mystery-quest-v20-latin-regular.svg#MysteryQuest') format('svg'); /* Legacy iOS */
}



html {
height: 100%;
background: rgba(76,53,66,1);
background: -moz-linear-gradient(top, rgba(76,53,66,1) 0%, rgba(56,37,48,1) 100%)fixed;
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,53,66,1)), color-stop(100%, rgba(56,37,48,1)))fixed;
background: -webkit-linear-gradient(top, rgba(76,53,66,1) 0%, rgba(56,37,48,1) 100%)fixed;
background: -o-linear-gradient(top, rgba(76,53,66,1) 0%, rgba(56,37,48,1) 100%)fixed;
background: -ms-linear-gradient(top, rgba(76,53,66,1) 0%, rgba(56,37,48,1) 100%)fixed;
background: linear-gradient(to bottom, rgba(76,53,66,1) 0%, rgba(56,37,48,1) 100%)fixed;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c3542', endColorstr='#382530', GradientType=0 ); 
}

body { 
	color: #fff; 
    height:100%; 
    display:flex;
    justify-content:center;
    align-content:center;   
	} 
	
#container {
    margin:auto;
    width:750px;
    height:360px;
    display:flex;
    flex-wrap:nowrap;     
	}


.fotobox img {
    width:auto;
    height:360px;
    border:2px solid #fff;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }
.textbox {
    padding:15px 0% 0px 10%;
    }    
.textbox p {
    margin:0px 0px 25px 0px;
    }

        		
a:link { color: #fff; text-decoration: underline; }
a:visited { color: #fff; text-decoration: underline; }
a:hover { color: #fff; text-decoration: underline; }

h1 { 
    font-size:70px;
    font-family: 'Mystery Quest'; 
    margin:0px 0px 30px 0px;
    letter-spacing: 3px;
    line-height:65px;
    }


/* ### Responsive-Styles ##################################################################*/ 

@media (max-width:760px) {

#container {
    margin:auto;
    width:100%;
    height:auto;
    display:flex;
    flex-wrap:wrap;     
	}
.fotobox {
    width:100%;
    text-align:center;
    margin:20px 0px;
    }
.textbox {
    width:100%;
    padding:15px 10% 0px 10%;
    }  
.textbox p, .textbox h1 {
    text-align:center!important;
    }     
        
}

@media (max-width:500px) { h1 { font-size:60px; line-height:55px; } }
@media (max-width:430px) { h1 { font-size:50px; line-height:45px; } }
@media (max-width:360px) { h1 { font-size:40px; line-height:35px; } }