/*  style sheet for Blind Sighted Productions by Thomas Tivnen 01/01/2025
It is best not to edit or tweak this style sheet as it deals with cell phone, i-pad, tablet, lap top, desk top size rendering;
If a problem arises please contact:
thomastivnen@hotmail.com  */

/*   testimony font style italic     */

.testimony    {
	font-style: italic;
}


/*  audio container    */
.audiofile    {
	margin-left: 42%;
	border: 5px solid #00ffff;
	width: 320px;
}



/* contact form   */

.rowBody      {
	padding-right: 33%; 
	padding-left: 33%;
}

/*   share container div and all other share codes NOTE -look for cameleon2 in main css    */

.sharecontainer   {
	padding: 0 0 20px 0; 
	margin-bottom: 20px;
}
.fb-share-button  {
    float: right; 
    margin-right: 10px;           
}
.twitshare    {
	float: right; 
	margin-right: 30px;
}
.linkedinshare   {
	float: right; 
	margin-top: 20px; 
	margin-right: -35px;
}
.linkedinimg    {
	padding-left: 40px; 
	float: right; 
	border: none;
}

/*  End Share container codes     */

/*   pop up box   */
 
div.ex {
    background-color: #00499b;
    padding: 7px;
    margin: 20px 30%;
    border: solid 3px #fff;
}




#pagewrap    {
	width:  1900px;
	height: auto;
}

/*  blue div bottom half     */

.bluediv   {
	color: #000; 
	font-size: 16px; 
	padding: 20px; 
	background-color: #00499b;
}

.stay     {
	padding: 20px;
	border: 10px solid #909090;
	margin: 10px;
}


.cen   {
	text-align: center;
}

.dots   {
	margin: 10px;
}

.stars    {
	margin: 30px;
}

nav#delmundo    {
	padding: 20px; 
	background-color: #00499b; 
	color: #0ff; 
	font-weight: 500; 
	font-size: 18pt;
	margin: 20px 20px 20px 10px;
}

.navspan   {
	margin: 0 10px;
}

#hideme    {
		opacity: 1.0; font-size: 18px; text-decoration: none; color: #fff; margin-left: 12px; text-align: left;
    }

.hideme2    {
        opacity: 0.0;
}

.bars    {
	width: 20px; 
	height: 13px;
}

.aboutcenter   {
	text-align: center;
}

.abt    {
	margin-left: 20px;
}

.logan     {
     width: 265px;
     height: 203px;
}

/*   image sizes     */

.socicon    {
	width: 100px;
	height: 100px;
}

.cyborg   {
	width: 900px;
	height: 600px;
}

.pod    {
	margin: 0 20px 20px 20px;  /*   watch bottom size render   */
	float: left;	
}

#dare    {
	width: 500px;
	height: 300px;
}

#dare2    {
	width: 700px;  /*  500     */
	height: 466px;    /*  325      */
	border: #fff solid 10px;
}
/*   #dare20  look in main5.css    */

#dare3    {
	width: 700px;    /*  500    */
	height: 490px;     /*   300    */
	border: #fff solid 10px;
}
/*   #dare30  look in main5.css    */


#contak   {
	width: 500px;
	height: 500px;
	border: #fff solid 10px;
	margin: 10px;
}

#ment   {
	width: 500px;
	height: 500px;
	float: right;
	border: #fff solid 10px;
	margin: 10px;
}

#ment2    {
	width: 500px;
	height: 333px;
	float: right;
	border: #fff solid 10px;
	margin: 10px;
}
/*   #ment2b  look in main5.css    */


#ment3    {
	width: 600px;
	height: 480px;
	float: right;
	border: #fff solid 10px;
	margin: 10px;
}

/*    ment4   the plan home web page   */
#ment4    {
	width: 650px;
	height: 500px;
	float: right;
	border: #fff solid 10px;
	margin: 10px;
}

.divider    {
	width: 50%;
	height: auto;
}

.trip    { 
	width: 350px;
	height: 447px;
	float: left;
	border: #909090 solid 10px;
	margin: 0 10px 10px 10px;	
}
.coming   {
	width: 900px;
	height: 540px;
}
#interview    {
	float: right;
	margin: 0 10px;
}

.downlow     {
	width: 1000px;
	height: 483px;
}


/*  Video centered div and container   */

.vidborder   {
	border: 10px solid #909090;
	width: 560px;
	height: 315px;
}

.iframe-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row; /* Use row if you want them side by side - use column if you want them stacked on top of each other */
    height: 350px;   /*   height: 100vh;  - Adjust this height as necessary */
}

.iframe-container iframe {
    margin: 10px; /* Space between iframes */
}

/*   begin size render   */

@media screen and (max-width:4200px) and (min-width:3840.01px){
	body  {
		width: 100%; 
		height: auto; margin: 0; 	
	 }	
}

@media screen and (max-width:3840px) and (min-width:3200.01px){
	body  {
		width: 100%; 
		height: auto; margin: 0; 	
	 }	
}

@media screen and (max-width:3200px) and (min-width:2880.01px){
	body  {
		width: 100%; 
		height: auto; margin: 0; 	
	 }	
}

@media screen and (max-width:2880px) and (min-width:2560.01px){
	body  {
		width: 100%; 
		height: auto; margin: 0; 	
	 }	
}

@media screen and (max-width:2560px) and (min-width:2200.01px){
	body  {
		width: 100%; 
		height: auto; margin: 0; 	
	 }	
}


@media screen and (max-width:2200px){
	 body  {
		width: 100%; max-width: 2200px;
		height: auto; margin: 0; 	
	 }
	
}

@media screen and (max-width:2160px){
	 body  {
		width: 100%; max-width: 2160px;
		height: auto; margin: 0; 	
	 }
	
}

@media screen and (max-width:1920px){
	 body  {
		width: 100%; max-width: 1920px;
		height: auto; margin: 0; 	
	 }

	p  {
		font-size: 20pt;
	}
}

@media screen and (max-width:1900px){
	 body  {
		width: 100%; max-width: 1900px;
		height: auto; margin: 0; 	
	 }

	
}

@media screen and (max-width:1800px){
	 body  {
		width: 100%; max-width: 1800px;
		height: auto; margin: 0; 	
	 }

	#pagewrap    {
		width: 100%;
		height: auto;
	}
	.audiofile    {
		margin-left: 40%;
	}
}

@media screen and (max-width:1700px){
	 body  {
		width: 100%; max-width: 1700px;
		height: auto; margin: 0; 	
	 }

	
}

@media screen and (max-width:1600px){
	 body  {
		width: 100%; max-width: 1600px;
		height: auto; margin: 0; 	
	 }
	 table.center tr td a img    {
	 	margin-top: -50px;
	 }
	
}

@media screen and (max-width:1580px){
	 body  {
		width: 100%; max-width: 1580px;
		height: auto; margin: 0; 	
	 }
	
	
}

@media screen and (max-width:1440px){
	 body  {
		width: 100%; max-width: 1440px;
		height: auto; margin: 0; 	
	 }
	 .rowBody      {
	 	padding-right: 30%; 
		padding-left: 30%;
	}
	.audiofile    {
		margin-left: 38%;
	}
	
	
}

@media screen and (max-width:1366px){
    body  {
		width: 100%; max-width: 1366px;
		height: auto; margin: 0; 	
    }
   
}

@media screen and (max-width:1336px){
    body  {
		width: 100%; max-width: 1336px;
		height: auto; margin: 0; 	
    }
   
	
}

@media screen and (max-width:1320px){
    body  {
		width: 100%; max-width: 1320px;
		height: auto; margin: 0; 	
    }
    nav#delmundo    {
		padding: 20px; 
		background-color: #00499b; 
		color: #0ff; 
		font-weight: 500; 
		line-height: 25pt;
		font-size: 16pt;
		margin: 20px 10px 20px 5px;
    }
    .navspan   {
		margin: 0 8px;
    }
	
}


@media screen and (max-width:1280px){
    body  {
		width: 100%; max-width: 1280px;
		height: auto; margin: 0; 	
    } 
   
   	
    
}


@media screen and (max-width:1242px){
    body  {
		width: 100%; max-width: 1242px;
		height: auto; margin: 0; 	
    } 
    #interview    {
		float: none;
		margin: 0;
		width: 100%;
		height: auto;
	}
    
}

@media screen and (max-width:1212px){
    body  {
		width: 100%; max-width: 1212px;
		height: auto; margin: 0; 	
    } 
    .rowBody      {
	 	padding-right: 28%; 
		padding-left: 28%;
	}   
   	
    
}


@media screen and (max-width:1180px){
     body  {
		width: 100%; max-width: 1180px;
		height: auto; margin: 0; 	
     }
     
	 
   
}

@media screen and (max-width:1179px){
     body  {
		width: 100%; max-width: 1179px;
		height: auto; margin: 0; 	
     }
     
	 nav#delmundo    {
		padding: 20px; 
		background-color: #00499b; 
		color: #0ff; 
		font-weight: 500; 
		line-height: 25pt;
		font-size: 14pt;
		margin: 20px 10px 20px 5px;
    }
    .navspan   {
		margin: 0 6px;
    }
   
}
 
@media screen and (max-width:1125px){
     body  {
		width: 100%; max-width: 1125px;
		height: auto; margin: 0; 	
     }
     
	 nav#delmundo    {
		padding: 20px; 
		background-color: #00499b; 
		color: #0ff; 
		font-weight: 500; 
		line-height: 25pt;
		font-size: 14pt;
		margin: 20px 10px 20px 5px;
    }
    .navspan   {
		margin: 0 6px;
    }
    .rowBody      {
	 	padding-right: 25%; 
		padding-left: 25%;
	}     
}
 

@media screen and (max-width:1112px){
     body  {
		width: 100%; max-width: 1112px;
		height: auto; margin: 0; 	
     }
     
     nav#delmundo    {
		padding: 20px; 
		background-color: #00499b; 
		color: #0ff; 
		font-weight: 500; 
		line-height: 25pt;
		font-size: 14pt;
		margin: 20px 10px 20px 5px;
    }
    .navspan   {
		margin: 0 6px;
    }
   
}

@media screen and (max-width:1095px){
     body  {
		width: 100%; max-width: 1095px;
		height: auto; margin: 0; 	
     }
     
     nav#delmundo    {
		padding: 20px; 
		background-color: #00499b; 
		color: #0ff; 
		font-weight: 500; 
		line-height: 25pt;
		font-size: 13pt;
		margin: 20px 10px 20px 5px;
    }
    .navspan   {
		margin: 0 6px;
    }
   
}

@media screen and (max-width:1080px){
     body  {
		width: 100%; max-width: 1080px;
		height: auto; margin: 0; 	
     }
     
     nav#delmundo  {
		display: none;
    } 
    
    #hideme     {
        opacity: 0.0;
    }
    
    .hideme2    {
		opacity: 1.0; font-size: 18px; margin: 20px;
    }
    div p.chameleon2 div   {
    	margin-top: 30px;
    }
    img#dare3.abt   {
    	margin-left: 0;
    }
    
    img#dare2.abt    {
    	margin-left: 0;
    }  	  
    .audiofile    {
		margin-left: 35%;
	} 
    
}

@media screen and (max-width:1050px){
     body  {
		width: 100%; max-width: 1050px;
		height: auto; margin: 0; padding: 0; 	
     }
     /*  h1 font on conference page     */
    span.fix  {
      font-size: 24px;
    }
        
}

@media screen and (max-width:1024px){
     body  {
		width: 100%; max-width: 1024px;
		height: auto; margin: 0; padding: 0; 	
     }
     
     h1, h2, h3, h4     {
     	font-size: 150%;
     }
     
      p  {
     	font-size: 20pt; 
     }
     .rowBody      {
	 	padding-right: 15%; 
		padding-left: 15%;
	}    
	.downlow     {
		width: 96%;
		height: auto;
	}
     
}	

@media screen and (max-width:960px){
     body  {
		width: 100%; max-width: 960px;
		height: auto; margin: 0; 
	}
	#ment4    {
		width: 100%;
		height: auto;
		border: #fff solid 5px;
		margin: 0;
		padding: 0;
	}
	img#ment4.abt    {
		margin: 0;
	}
	
	div.ex      {
		background-color: #00499b;
		 position: fixed;
		 top: 7px;
		 left: 60px;
		 z-index: 2;
		padding: 7px;
		margin: 10px;
		border: solid 3px #fff;
    }
    .rowBody      {
	 	padding-right: 0; 
		padding-left: 15%;
	}   
    
}

@media screen and (max-width:959px){
     body  {
		width: 100%; max-width: 959px;
		height: auto; margin: 0; 
	 }
	 .audiofile    {
		margin-left: 35%;
	}

}

@media screen and (max-width:926px){
     body  {
		width: 100%; max-width: 926px;
		height: auto; margin: 0; 
	 }
	 
	 td.nix   {
	 	display: none;
	 }
	 
	 .bars    {
	 	width: 25px;
	 	Height: 15px;
	 }
	 
	 .logan     {
     	width: 450px;
     	height: 300px;
     	margin-left: 40%;
	 }
	 .cyborg   {
	 	width: 100%;
	 	height: auto;
	}
	.audiofile    {
		margin-left: 34%;
	}
}

@media screen and (max-width:915px){
     body  {
		width: 100%; max-width: 915px;
		height: auto; margin: 0; 
	 }
	.ws_images    {
		margin: 10px;
	}
 
}

@media screen and (max-width:900px){
     body  {
		width: 100%; max-width: 900px;
		height: auto; margin: 0; 
	 }
	 .rowBody      {
	 	padding-right: 0; 
		padding-left: 5%;
	}   
	.coming    {
		width: 96%;
		height: auto;
	}
	.audiofile    {
		margin-left: 33%;
	}
  
}

@media screen and (max-width:896px){
     body  {
		width: 100%; max-width: 896px;
		height: auto; margin: 0; 
	 }
	 .audiofile    {
		margin-left: 32%;
	}

}

@media screen and (max-width:883px){
     body  {
		width: 100%; max-width: 883px;
		height: auto; margin: 0; 
	 }
	 .audiofile    {
		margin-left: 31%;
	}
 
}


@media screen and (max-width:854px){
     body  {
		width: 100%; max-width: 854px;
		height: auto; margin: 0; 
	 }
	 
}

@media screen and (max-width:846px){
     body  {
		width: 100%; max-width: 846px;
		height: auto; margin: 0; 
	 }
	 .pod    {
	 	width: 100%;
	 	height: auto;
	 	margin-left: -1px;
	 	margin-bottom: 30px;  /*   watch bottom size render   */	
	 }
	 .vidborder   {
	 	border: 10px solid #909090;
	 	width: 95%;
		height: 600px;
	 }
	 .iframe-container {
	 	display: flex;
	 	justify-content: center;
	 	align-items: center;
	 	flex-direction: column; /* Use row if you want them side by side - use column if you want them stacked on top of each other */
	 	height: 900px;   /*   height: 100vh;  - Adjust this height as necessary */
	 }
	 .iframe-container iframe {
	 	margin: 10px; /* Space between iframes */
	 }
	 
}

@media screen and (max-width:844px){
     body  {
		width: 100%; max-width: 844px;
		height: auto; margin: 0; 
	 }
   
}

@media screen and (max-width:834px){
     body  {
		width: 100%; max-width: 834px;
		height: auto; margin: 0; 
	 }
	
}

@media screen and (max-width:823px){
     body  {
		width: 100%; max-width: 823px;
		height: auto; margin: 0; 
	 }
    
}

@media screen and (max-width:820px){
     body  {
		width: 100%; max-width: 820px;
		height: auto; margin: 0; 
	 }
    
}

	
@media screen and (max-width:812px){
     body  {
		width: 100%; max-width: 812px;
		height: auto; margin: 0; 
	 }
	 
}

@media screen and (max-width:810px){
	 body  {
		width: 100%; max-width: 810px;
		height: auto; margin: 0; 	
	 }
	
}
	
@media screen and (max-width:800px){
     body  {
		width: 100%; max-width: 800px;
		height: auto; margin: 0; 
	 }
	 
	 #linespacer    {
	 	line-height: 25pt;
	 }
	 .linespacer    {
	 	line-height: 25pt;
	 }

}

@media screen and (max-width:770px){
    body     {
		  width: 100%; max-width: 770px;
		  height: auto; margin: 0;
    } 
    .socicon    {
		width: 50px;
		height: 50px;
	}   
    .bluediv, p  {
    	font-size: 18px;
    	font-weight: bold;
    	line-height: 25px;
    	padding: 0;
    }
    h1, h2, h3, h4, h5, p, table     {
		margin: 10px;
    }    
	#dare, .divider    {
    	width: 100%;
    	height: auto;
    	margin-left: 0;
    }    
    #ment    {
    	width: 95%;	
    }    
    #dare   {
    	margin-left: 0;
    }
    .comments, .capbox    {
    	margin-left: 10px;
    }
    #ment4    {
		width: 99%;
		height: auto;
		border: #fff solid 5px;
		padding: 0;
	}
}

@media screen and (max-width:768px){
    body     {
		  width: 100%; max-width: 768px;
		  height: auto; margin: 0;
    }    
    .audiofile    {
		margin-left: 28%;
	}
    
}

@media screen and (max-width:760px){
    body     {
		  width: 100%; max-width: 760px;
		  height: auto; margin: 0;
    }    
    span.fix     {
    	font-size: 20px;
    }
   #dare3, #dare2    {
   		width: 96%;
   		height: auto;
   }
   img#dare3.abt, img#dare2.abt   {
   		margin-left: 0;
  }
   
}

@media screen and (max-width:740px){
    body     {
		  width: 100%; max-width: 740px;
		  height: auto; margin: 0;
    }    
     
  #signs   {
  	font-weight: 200;
  }
   
   
}

@media screen and (max-width:736px){
    body     {
		  width: 100%; max-width: 736px;
		  height: auto; margin: 0;
    }    
 
    
}

@media screen and (max-width:732px){
    body     {
		  width: 100%; max-width: 732px;
		  height: auto; margin: 0;
    }    
	
}

@media screen and (max-width:720px){
    body     {
		  width: 100%; max-width: 720px;
		  height: auto; margin: 0;
    }    
   
    #ment    {
    	width: 96%;	
    	margin: 5px;
    	padding: 0;
    }
    
    p    {
    	margin-right: 10px;
    }
	 #ment2    {
	 	width: 99%;
	 	height: auto;
	 	padding: 0;
	 	margin: 0;
	 	border: #fff solid 5px;
	 }  
	 img#ment2.abt {
	 	margin: 0;
	 }
	 .vidborder   {
	 	border: 10px solid #909090;
	 	width: 95%;
		height: 600px;
	 }
	 .iframe-container {
	 	display: flex;
	 	justify-content: center;
	 	align-items: center;
	 	flex-direction: column; /* Use row if you want them side by side - use column if you want them stacked on top of each other */
	 	height: 800px;   /*   height: 100vh;  - Adjust this height as necessary */
	 }
	 .iframe-container iframe {
	 	margin: 10px; /* Space between iframes */
	 }
	 
	  #dare3, #dare2    {
   		width: 92%;
   		height: auto;
    }
    .audiofile    {
		margin-left: 27%;
	}
}

@media screen and (max-width:667px){
    body     {
		  width: 100%; max-width: 667px;
		  height: auto; margin: 0;
    }   
    div.ex      {
		background-color: #00499b;
		 position: fixed;
		 top: 1px;
		 left: 3px;
		 z-index: 2;
		 padding: 0;
		 margin: 0;
		 border: none;
    }
    #ment4    {
		width: 98%;
		height: auto;
		border: #fff solid 5px;
		padding: 0;
	}
	.audiofile    {
		margin-left: 26%;
	}
    
}

@media screen and (max-width:640px){
    body     {
		  width: 100%; max-width: 640px;
		  height: auto; margin: 0;
    }
   
    #ment    {
    	width: 96%;	
    	margin: 5px;
    	padding: 0;
    }
    
    #dare   {
    	width: 98%;
    	margin-left: -5px;
    }
    
    p    {
    	margin-right: 5px;
    } 
    span.fix     {
    	font-size: 18px;
    }
    #dare3, #dare2    {
   		width: 95%;
   		height: auto;
    }
    img#dare3.abt, img#dare2.abt   {
   		margin-left: -5px;
    }  
  	.cyborg   {
	 	width: 100%;
	 	height: auto;
	 	margin-left: -5px;
	}
	#ment4    {
		width: 99%;
		height: auto;
		border: #fff solid 5px;
		padding: 0;
	}
	 .vidborder   {
	 	border: 10px solid #909090;
	 	width: 95%;
		height: 600px;
	 }
	 .iframe-container {
	 	display: flex;
	 	justify-content: center;
	 	align-items: center;
	 	flex-direction: column; /* Use row if you want them side by side - use column if you want them stacked on top of each other */
	 	height: 700px;   /*   height: 100vh;  - Adjust this height as necessary */
	 }
	 .iframe-container iframe {
	 	margin: 10px; /* Space between iframes */
	 }
	 .audiofile    {
		margin-left: 25%;
	}

}

@media screen and (max-width:600px){
    body     {
		  width: 100%; max-width: 600px;
		  height: auto; margin: 0;
    }
    .ditch   {
    	display: none;
    }
    .audiofile    {
		margin-left: 23%;
	}
   
}

@media screen and (max-width:568px){
    body     {
		  width: 100%; max-width: 568px;
		  height: auto; margin: 0;
    }       
    .aboutcenter   {
    	margin-left: 5px;
    }
    
    img#dare   {
    	width: 97%;
    	height: auto;
    }
      
    img#ment    {
    	width: 95%;
    	height: auto;
    } 
    .dots  {
    	margin: 3px;
    }
    .stars   {
    	margin: 6px;
    }
    span.fix     {
    	font-size: 17px;
    }
    #dare3, #dare2    {
   		width: 92%;
   		height: auto;
    }
    img#dare3.abt, img#dare2.abt   {
   		margin-left: -5px;
    }  
    img#contak    {
  		width: 92%;
  		height: auto;
    }
    img#contak.abt  {
  		margin-left: 7px;
    }
    .cyborg   {
	 	width: 100%;
	 	height: auto;
	 	margin-left: 0;
    }
    .audiofile    {
		margin-left: 20%;
	}
    
}

@media screen and (max-width:500px){
    body     {
		  width: 100%; max-width: 500px;
		  height: auto; margin: 0;
    }    
     .vidborder   {
	 	border: 10px solid #909090;
	 	width: 95%;
		height: 550px;
	 }
	 .iframe-container {
	 	display: flex;
	 	justify-content: center;
	 	align-items: center;
	 	flex-direction: column; /* Use row if you want them side by side - use column if you want them stacked on top of each other */
	 	height: 550px;   /*   height: 100vh;  - Adjust this height as necessary */
	 }
	 .iframe-container iframe {
	 	margin: 10px; /* Space between iframes */
	 }
   p#pcen.cen    {
   		text-align: left;
   }
   .cen    {
   		text-align: left;
   }
   .audiofile    {
		margin-left: 15%;
	}
    
}

@media screen and (max-width:480px){
    body     {
		  width: 100%; max-width: 480px;
		  height: auto; margin: 0;
    }
    img#dare  {
    	width: 96%;
    	height: auto;
    }
    .trip    { 
		width: 100%;
		height: auto;
		border: none;
		margin: 0;	
	}
	.rowBody      {
	 	padding-right: 0; 
		padding-left: 0;
	}   
	.audiofile    {
		margin-left: 14%;
	}
   
}

@media screen and (max-width:428px){
    body     {
		  width: 100%; max-width: 428px;
		  height: auto; margin: 0;
    }
    img#ment, #contak    {
    	width: 94%;
    	height: auto;
    } 
    .bluediv   {
    	padding: 0 10px;
    }
     .dots  {
    	margin: 0;
    }
    .stars   {
    	margin: 3px;
    }
    span.fix     {
    	font-size: 15px;
    }
   #dare3, #dare2    {
   		width: 92%;
   		height: auto;
   }
   img#dare3.abt, img#dare2.abt   {
   		margin-left: -5px;
  }  
  .comments   {
  	margin-right: 5px;
  	margin-left: -10px;
  	
  }
   .vidborder   {
	 	border: 10px solid #909090;
	 	width: 95%;
		height: 500px;
	 }
	 .iframe-container {
	 	display: flex;
	 	justify-content: center;
	 	align-items: center;
	 	flex-direction: column; /* Use row if you want them side by side - use column if you want them stacked on top of each other */
	 	height: 500px;   /*   height: 100vh;  - Adjust this height as necessary */
	 }
	 .iframe-container iframe {
	 	margin: 10px; /* Space between iframes */
	 }
	 .audiofile    {
		margin-left: 10%;
	}
	.bookit    {
		font-size: 18px;
	}
}

@media screen and (max-width:414px){
    body     {
		  width: 100%; max-width: 414px;
		  height: auto; margin: 0;
    } 
   .waiting   {
   	font-size: 18px;
   }
    .audiofile    {
		margin-left: 9%;
	}
}

@media screen and (max-width:412px){
    body     {
		  width: 100%; max-width: 412px;
		  height: auto; margin: 0;
    }
    .chameleon    {
    	font-size: 20px;
    }
     .audiofile    {
		margin-left: 8%;
	}
}

@media screen and (max-width:390px){
    body     {
		  width: 100%; max-width: 390px;
		  height: auto; margin: 0;
    }
    #pagewrap   {
    	background: #000; width: 100%; height: auto;
    }
    
    h1, h2, p    {
    	font-size: 18px;
    }
    span.fix     {
    	font-size: 17px;
    }
   #dare2    {
   		width: 94%;
   		height: auto;
   }
   img#dare3.abt, img#dare2.abt   {
   		margin-left: -4px;
  }  
  img#dare3   {
  		width: 92%;
  }
   .vidborder   {
	 	border: none;
	 	width: 95%;
		height: 450px;
	 }
	 .iframe-container {
	 	display: flex;
	 	justify-content: center;
	 	align-items: center;
	 	flex-direction: column; /* Use row if you want them side by side - use column if you want them stacked on top of each other */
	 	height: 450px;   /*   height: 100vh;  - Adjust this height as necessary */
	 }
	 .iframe-container iframe {
	 	margin: 10px; /* Space between iframes */
	 }
	  .audiofile    {
		margin-left: 5%;
	}

 
}

@media screen and (max-width:384px){
    body     {
		  width: 100%; max-width: 384px;
		  height: auto; margin: 0;
		  background: #000;
    }
    img#ment    {
    	width: 93%;
    	height: auto;
    } 
    img#contak    {
  		width: 90%;
  		height: auto;
    }
    img#contak.abt  {
  		margin-left: 7px;
    }
  
}

@media screen and (max-width:380px){
    body     {
		  width: 100%; max-width: 380px;
		  height: auto; margin: 0;
		  padding: 0;
    }
     img#contak    {
  		width: 90%;
  		height: auto;
    }
    img#contak.abt  {
  		margin-left: 8px;
    }
  
   
}

@media screen and (max-width:375px){
    body     {
		  width: 100%; max-width: 375px;
		  height: auto; margin: 0;
		
    }
    img#dare  {
    	width: 98%;
    	height: auto;
    	margin-left: 0;
    }
    span.fix     {
    	font-size: 17px;
    }
   #dare2    {
   		width: 94%;
   		height: auto;
   }
   img#dare3.abt, img#dare2.abt   {
   		margin-left: -3px;
  }  
  img#dare3   {
  		width: 92%;
  }
}

@media screen and (max-width:360px){
    body     {
		  width: 100%; max-width: 360px;
		  height: auto; margin: 0;
		
    }
     
    h1, h2, p    {
    	font-size: 16px;
    }
    .stay   {
    	padding: 5px;
    }
    img#dare3   {
  		width: 92%;
  		margin-left: 2px;
    }
    .vidborder   {
	 	border: none;
	 	width: 95%;
		height: 400px;
	 }
	 .iframe-container {
	 	display: flex;
	 	justify-content: center;
	 	align-items: center;
	 	flex-direction: column; /* Use row if you want them side by side - use column if you want them stacked on top of each other */
	 	height: 400px;   /*   height: 100vh;  - Adjust this height as necessary */
	 }
	 .iframe-container iframe {
	 	margin: 10px; /* Space between iframes */
	 }
	  .audiofile    {
		margin-left: 18px;
		border: 2px solid #0ff;
	}
    
}

@media screen and (max-width:320px){
    body     {
		  width: 100%; max-width: 320px;
		  height: auto; margin: 0;
		
    }
    table.center tr td a img   {
    	width: 98%;
    	height: auto;
    	margin-left: 15px;
    }
    img#contak.abt  {
  		margin-left: 6px;
    }
    img#dare3   {
  		width: 92%;
  		margin-left: 3px;
    }
    .vidborder   {
	 	border: none;
	 	width: 95%;
		height: 360px;
	 }
	 .iframe-container {
	 	display: flex;
	 	justify-content: center;
	 	align-items: center;
	 	flex-direction: column; /* Use row if you want them side by side - use column if you want them stacked on top of each other */
	 	height: 360px;   /*   height: 100vh;  - Adjust this height as necessary */
	 }
	 .iframe-container iframe {
	 	margin: 10px; /* Space between iframes */
	 }
	 .audiofile    {
		margin-left: 3px;
		border: 2px solid #0ff;
		width: 310px;
	}

}