@charset "UTF-8";
/* CSS Document */
*{
	padding: 0; 
	margin:0; 
	-webkit-box-sizing:border-box; 
	box-sizing: border-box; 
}
body{ 
	
	background-size:100%; 
    overflow:hidden;
	background-repeat:x-repeat;
	height:100vh;
	max-height: 500px; 
	max-width: 440px; 
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;  
	width: clamp(440px, 50vw, 441px); 
}

.capText {
	text-align: center; 
	/*border: 8px solid #f1f1f1;*/
	width:720px; 
	/*width:min(800px, 100%); */
	height:100px; 
	background-color: #E9E9E9;
	background-color: rgba(0,0,0, 0.3);
	border-radius: 15px; 
	color:#FCFCFC;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;  
	font-size: 72px; 
	font-size: clamp(3rem, 4.5vw, 3.5rem);
	font-weight: lighter;
	flex-wrap:nowrap;
	flex-direction: row;
	letter-spacing: 7px;
	text-shadow: 1px 1px 2px black, 0 0 25px white, 0 0 5px gray; 
	position:relative; 
	top: 50%; 
	left:50%; 
	transform: translate(-50%, -45%);
	z-index: 1;
    animation: shrink 8s ;
	transition-timing-function:cubic-bezier(0.2, 0.33, 1, 1); 
   
   
}
.capText:hover{
	box-shadow: 12px 12px 12px rgba(0, 0 ,0, 0.1), 
		-10px 10px 10px rgba(0,2,2, 0.3) ; 
		 animation: shrink 8s ;
	/*transition-timing-function:cubic-bezier(0.2, 0.33, 1, 1); */
}

.button{ 
     animation-name: apparent, shrink; 
     animation-duration: 8s; 
}
@keyframes apparent { 
    from{opacity:0; }
    to{opacity: .25; }
    to{opacity: .5; }
    to{opacity: .75; }
    to{opacity: 1; }
    
}
@keyframes shrink{ 
    from{font-size:550%; }
    to{font-size: 20%; }
   
}


.innerText {
	text-align: center; 
	background-color: #E9E9E9;
	background-color: rgba(0,0,0, 0.7);
	border-radius: 15px; 
	color:#FCFCFC;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;  
	font-size: 320px; 
	font-size: clamp(8.5rem, 4.5vw, 6rem);
	font-weight: lighter;
	flex-wrap:nowrap;
	flex-direction: row;
	letter-spacing: 7px;
	text-shadow: 1px 1px 2px black, 0 0 25px white, 0 0 5px gray; 
	position:fixed; 
	top: 50%; 
	left:50%; 
	transform: translate(-50%, -40%);
	z-index: 1;
    animation: shrinkThis 8s ;
	transition-timing-function:cubic-bezier(0, 0, 1, 1); 
	box-shadow: 0 40px 50px rgba(0, 0 ,0 ,0.2), inset 0px 20px 40px 5px rgba(255,255,255,1); 
}


.innerText:hover{
	box-shadow: 12px 12px 12px rgba(0, 0 ,0, 0.1), 
		-10px 10px 10px rgba(0,2,2, 0.3) ; 
}
@keyframes explode { 
    from{opacity: 0; }
    to{opacity:0.5; }
}
@keyframes ease { 
    from{opacity: 0; }
    to{opacity:1; }
}
@keyframes shrinkThis{ 
   
    from{font-size:500%; }
    
    to{font-size: 30%; }
}

.checkthis{ 
	position: relative; 
	font-family:-apple-system, BlinkMacSystemFont, sans-serif;
	color: #FCFCFC;
	font-size:24px; 
	left:-100%;
	letter-spacing: 7px;
	
	/*text-shadow: 1px 1px 2px white, 0 0 25px white, 0 0 5px gray; */
	/*animation added; if dead code then remove*/ 
	/*box-shadow: 1px 1px 0px rgba(0, 0 ,0 ,0.1), inset 0px 10px 20px 5px rgba(0,0,0,.1);
	animation: bubblyUp 4s ;
	transition-timing-function:cubic-bezier(0.175, 0.805, 0.32, 1.275);*/ 

}
.S3text{ 
	width:350px; 
	text-align: left; 
	display: inline-block; 
	position:relative;
	flex-direction: row; 
	flex-wrap: wrap; 
	transform: translate(350%, -550%);
	font-size:28px; 
	color: #f1f1f1;
	font-weight: bold; 
	font-family: -apple-system, BlinkMacSystemFont, sans-serif ; 
	text-shadow: 1px 1px 2px black, 0 0 10px white, 0 0 5px gray; 
}

.S4text{ /*formats text divs*/  
	/*text-align: left; 
	font-size:24px;
	display: inline-block; 
	position:absolute;
	flex-direction: row;  
	flex-wrap: wrap; 
	font-family: -apple-system, BlinkMacSystemFont, sans-serif ;
	*/
}
.S5text{ /*formats text inside divs*/ 
	/*font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
	font-size: 18px; 
	color: #f1f1f1;
	animation: apparent, shrink 3s ease-in-out;
	
	*/ }


.slideContainer{
	/*formats each container slide across the entire slide site */  
	font-size: 75px;
	display:block;
	overflow: hidden;
	max-height: 100px;
	border-radius: 5%; 
}
.slideContainer div{
	/*formats specific effects within each slide*/
	/*controls width of the slide and backgrounds*/
	display:block; 
	background-size: cover;
	background-color: #E9E9E9;
	background-color: rgba(0,0,0, 0.3);
	height: 100vh;
	width: 100%; 
	position: relative;
	animation: shrinkThis 5s ;
	box-shadow: 0 40px 50px rgba(0, 0 ,0 ,0.2), inset 0px 20px 40px 5px rgba(255,255,255,1); 
	/*transition-timing-function:cubic-bezier(0.175, 0.805, 0.32, 1.275);*/  
	/* animation added; if dead/conflicting code then remove */ 
	/* display the navbar globally across slides*/ 
	}
	
.slideContainer h1{
	/* object divs currently orbs  */ 
	background-color:#DF9549;
    opacity: 85%; 
	color:#f1f1f2; 
	text-align: left;
	flex-wrap:no-wrap; 
	font-size: 36px; 
	line-height:400px;
	transform: translate(150%, 15%);
	border-radius: 80%;
	box-shadow: 0 40px 50px rgba(0, 0 ,0 ,0.2), inset 0px 20px 40px 5px rgba(255,255,255,1);
	height:775px;
	top:25%;
	width:min(720px, 90%);
	animation: bubblyUp 4s ;
	
	
}

.slideContainer h2{
	/* object divs currently orbs  */ 
	border-radius: 50%; 
	background-color:#f2f2f2;
    opacity: .7;
	color:#575653; 
	text-align: left;
	flex-wrap:nowrap;
	font-weight:bold; 
	line-height:400px;
	transform: translate(-50%, 15%);
	height:675px; 
	width: 100px; 

	box-shadow: 0 40px 50px rgba(0, 0 ,0 ,0.2), inset 0px 20px 40px 5px rgba(255,255,255,1); 
	animation: bubblyUp 4s ;
	transition-timing-function:cubic-bezier(0.175, 0.805, 0.32, 1.275);
	z-index:-1;
}

@keyframes bubblyUp{ 
    from {right:-75px; }
    to{rleft:100%; }
}

@keyframes shrinkMe{ 
   
    from{font-size:700%; }
    
    to{font-size: 50%; }

}
@keyframes ease { 
    from{opacity: 0; }
    to{opacity:1; }
    }

.slideContainer h3{
	color:#f1f1f1; 
	text-shadow: 1px 1px 2px black, 0 0 25px white, 0 0 5px gray; 
	text-align: center; 
	text-transform: uppercase;
	flex-wrap: nowrap;
	font-weight:lighter; 
	font-family: -apple-system, BlinkMacSystemFont, sans-serif ;
	font-size: 72px; 
	line-height:100px; 
	width:min(720px, 90%);
	width:720px; 
	height: 100px; 
	position:fixed;
	background-color: rgba(193,191,191, 0.4);
	letter-spacing: 7px; 
	top: 45%; 
	left:50%; 
	transform: translate(-50%, -50%);
	z-index: 2; 
	box-shadow: 0 40px 50px rgba(0, 0 ,0 ,0.2), inset 0px 20px 40px 5px rgba(255,255,255,1); 
	transition-timing-function:cubic-bezier(0.175, 0.805, 0.32, 1.275); 
	animation:shrinkMe 5s ;
}

.slideContainer h4{
	text-align: center; 
	background-color: #E9E9E9;
	background-color: rgba(0,0,0, 0.3);
	border-radius: 15px; 
	color:#FCFCFC;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;  
	font-size: 36px; 
	font-size: clamp(2rem, 5.5vw, 3rem);
	font-weight: lighter;
	flex-wrap:nowrap;
	flex-direction: row;
	letter-spacing: 7px;
	text-shadow: 1px 1px 2px black, 0 0 25px white, 0 0 5px gray; 
	position:fixed;
	width:85vw; 
	top: 50%; 
	left:50%; 
	transform: translate(-50%, -40%);
	z-index: 2;
    animation: shrinkMe 6.5s ;
	transition-timing-function:cubic-bezier(0, 0, 1, 1); 
	box-shadow: 0 15px 25px rgba(0, 0 ,0 ,0.2), inset 0px 10px 20px 5px rgba(255,255,255,1); 
}
    

.slideContainer h4inner{
	color:#fff; 
	max-height: 75px;
	position:relative; 
	width:85%;
	width:min(720px, 90%);
	text-align:right;
	flex-direction: column;
	justify-content: flex-start;
	transform: translate(-90%, 0%); 
}
.slideContainer h5{
	color:#fff; 
	text-align: right; 
	font-size: 36px; 
	position:relative; 
	text-transform: uppercase; 
	font-weight:lighter; 
	line-height:50px; 
	width:85%;
	flex-direction: column;
	top:10%;
	transform: translate(15%, -15%); 
}

.slideContainer h6{
	color:#f1f1f1; 
	text-shadow: 1px 1px 2px black, 0 0 25px white, 0 0 5px gray; 
	text-align: center; 
	text-transform: uppercase;
	flex-wrap: nowrap;
	font-weight:lighter; 
	font-family: -apple-system, BlinkMacSystemFont, sans-serif ;
	font-size: 32px; 
	line-height:100px; 
	width:min(720px, 90%);
	width:720px; 
	height: 100px; 
	position:fixed;
	background-color: rgba(193,191,191);
	background-color: rgba(193,191,191, 0.4);
	letter-spacing: 7px; 
	top: 45%; 
	left:50%; 
	transform: translate(-50%, -50%);
	z-index: 2; 
}
.slideContainer p0{
	color:#0000;  
	text-align: center;
	text-transform: uppercase; 
	font-weight:bolder;
	font-size:16px; 
	text-decoration: none;
    top:120%; 
	left:50%; 
	transform: translate(-50%, -75%);
	flex-direction: r;
	flex-wrap: wrap;
	width:min(720px, 90%);
}

.slideContainer p{
	color:#F1F1F1;  
	text-align: center;
	text-transform: uppercase; 
	text-shadow: 5px 5px 5px rgba(0,0,0,0.3); 
	font-weight:lighter;
	font-size:16px; 
	text-decoration: none;
	position:relative; 
	bottom:-75%; 
	left:0%; 
    line-height: 22px; 
	flex-direction:row; 
	flex-wrap: nowrap;
	
}

.slideContainer p2{
	color:#f1f1f1;  
	text-align: center;
	text-transform: uppercase; 
	font-weight:normal;
	font-size:16px; 
	text-decoration: none;
	position:absolute;  
	top: -15%; 
	left:50%; 
	transform: translate(-50%, 65%);
	flex-direction: column;
	flex-wrap: wrap;
	width:min(720px, 90%);
}
.grow{ 
    transition: font-size 0.2s ease-in-out; 
}
.grow:hover{ 
	font-size: 125%; 
}


.slideContainer a{
	color:#fff; 
	text-align: left; 
	text-transform: uppercase; 
	font-weight:lighter; 
	text-decoration: none; 
    flex-wrap: nowrap; 
    flex-direction: row;
    }
.sldeContainer a:link { 
	color: #FCFCFC ; 
	font-size: 12px;
	
	}
.slideContainer a:hover{ 
	color:#9FCE8C;
 
    text-shadow: 18px 18px 25px #E9E9E9;/*#5A9F6C */ 
	}

.specslide:nth-child(1){
	background-image:url("../pics/alpsBayern.jpeg");
	background-color: #E9E9E9;
	background-size:cover;
	position:absolute;
	overflow: hidden;
    border-radius: 5%; 
}

.slide:nth-child(1){
	background-image:url("../pics/DENatNight.jpeg");
	background-color: none;
	background-size: 100%;
	position:absolute;
	overflow: hidden;
	border-radius: 5%; 
}
.slide:nth-child(2){
	background-image:url("../pics/alpineMoon.jpeg");
	background-color:#E9E9E9;		
	background-size: 100%;
	position:absolute;
	overflow: hidden;
    border-radius: 5%; 
	
}

.slide:nth-child(3){
	background-image:url("../pics/IMG_0898.jpeg");
	background-size: 100%;
	background-color: #E9E9E9;
	position:absolute;
	overflow: hidden;
	border-radius: 5%; 
	
}

.slide:nth-child(4){
	background-image:url("../pics/IMG_0778.jpeg");
	background-color: #E9E9E9;
	background-size:100% ;
	position:fixed;
	overflow: hidden;
    border-radius: 5%; 
	
}

.prev, .next{
	cursor:pointer; 
	position:absolute; 
	top:40%; 
	width:50px;
	height:50px; 
	padding: 32px; 
	margin-top: -25px; 
	color:#FCFCFC; 
	font-weight:lighter; 
	font-size: 88px; 
	background-color:rgba(0,0,0,0.0); 
	transition: background-color 0.9s ease; 
	user-select: none; 
}
.prev{ 
	left:0;
	border-radius: 3px 0 0 3px;
	 
}

.next{ 
	right:25px; 
	border-radius: 3px 0 0 3px; 
}
.prev:hover, .next:hover{ 
	background-color: transparent;
}

/*fit this into idevices :| */
/*turn off the parallax scroll to create static images*/ 

	/*fix me; I am crying out for attention and misbehaving
	responsive media reverted back to same distortion*/

@media screen and (max-width: 440px){ 
	.slide, .slidecontainer, .h1, .h2, .h3, .h4, .h5, .p  { 
		 	
		
		flex-direction: row;
		text-align: left;
		font-size:6px;
		width: 50%; 
		height:50%; 
		-webkit-box-ordinal-group:1; 
		-ms-flex-order:0;
		flex-wrap: nowrap;
	}
}
@media screen and (max-width: 440px){
	.capText{ 
		
		font-size: 50%; 
		width: 50%; 
		height: 15%; 
		flex-direction: row;
		letter-spacing: 7px;
		/*border: 5px solid #f1f1f1;*/
		background-color: rgb(0,0,0);
		background-color: rgba(0,0,0, 0.3);
		z-index: 2; 
		color: #FCFCFC;
		text-shadow: 1px 1px 2px black, 0 0 25px white, 0 0 5px gray; 
		position: fixed;
		text-align: center;		
		background-repeat: no-repeat;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -45%);
		flex-wrap: nowrap;
		-webkit-box-ordinal-group:1; 
		-ms-flex-order:0;

	}
}
@media screen and (max-width: 440px){ 
		body{ 
			height:100%;
			/*padding:0;
			margin:0;*/
			background-color:#5B695A; 
			flex-wrap: nowrap;
			/*font-size: 18px;*/
			flow-direction: row;
			flex-direction: row;
	}
}
/*end max width query */
/*begin min width */
@media screen and (min-width : 441px ){ 
	.slide, .slidecontainer,.h1, .h2, .h3, .h4, .h5, .p { 
	 	
		font-size: 18px; 
		flow-direction: row;
		flex-direction:row;
		flex: 50%; 
		/*transform: translate(-50%, -50%);*/
		flex-wrap: nowrap; 
		text-align: center;
		-webkit-box-ordinal-group:1; 
		-ms-flex-order:0;
		
	}
}
@media screen and (min-width : 441px ){ 
	.capText{
		
		width: 50%; 
		flex-direction: row;
		letter-spacing: 1px;
		/*border: 10px  #f1f1f1;*/
		z-index: 2; 
		color: #FCFCFC;
		text-shadow: 1px 1px 2px black, 0 0 25px white, 0 0 5px gray;
		position: fixed;
		text-align: center;		
		background-repeat: no-repeat;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		flex-wrap: nowrap;
		-webkit-box-ordinal-group: 1;
		-ms-flex-order: 0;
		 
	
	}
}

@media screen and (min-width : 441px ){ 
		body{ 
			height:100%;
			padding:0;
			margin:0;
			background-color:#5B695A; 
			flex-wrap: nowrap;
			flex-direction: row;
	}
}