.cellheadccolumn {

	margin-left: 10px;

  float: left;

  width: 100px;

  padding: 10px;

  height: 60px; /* Should be removed. Only for demonstration */

  border-radius:7px;

  box-shadow: 4px 7px 7px 0px #999;

  background-image: repeating-linear-gradient(180deg, #fef3fd,#fac6f9,#f798f4,#f36aef, #f03dea);

}



.cellhead {

padding:10px;

	width:250px;

	height:250px;

	border-style:solid; 

	border-color:#CCC;

		}

		

.cellheadname {

	position: absolute;

	margin-top: -30px;

	margin-left:17px;

	background-color: #FFF;

	height: 100px;

	width: 240px;

	border-radius: 10px;

	border-color: 1 solid #999;

	box-shadow: 2px 4px 4px 0px #0F0;

	animation-name: fadeOutIn;

	animation-delay: 2s;

	animation-duration: 6s;

	

	

	}



.cellheaddummy {

	margin-left: 10px;

  float: left;

  width: 100px;

  padding: 10px;

  height: 50px; /* Should be removed. Only for demonstration */

  border-radius:7px;

  

    

}



.cellheadcolumn01 {

	margin-left:100px;

    width: 250px;

	height:250px;

   /*background-color:#bbb;*/

   

   /* Should be removed. Only for demonstration */

}



.cellheadcol01{

	margin-left:350px;

	text-align:center;
	
		margin-top:10px;

	}

.cellheadcol02{

	margin-left:450px;

	text-align:center;
	
	margin-top:10px;
	

    

	}

.cellheadnames{

	margin-top: 0px;	

	font-family:"Bookman Old Style";

	font-size:13px;

    text-align:center;
	

	

	

	}

.cellcordinator {

	float:left;

    width: 100%;

	margin-left:100px;

	

	

   /*background-color:#bbb;*/

   

   /* Should be removed. Only for demonstration */

}



.cellcordinator02 {

	float:left;

    width: 100%;

	margin-left:100px;

	

	

   /*background-color:#bbb;*/

   

   /* Should be removed. Only for demonstration */

}



.cellcordinator01 {

	float:left;

    width: 100%;

	margin-top:-283px;

	margin-left:350px;

	

	

   /*background-color:#bbb;*/

   

   /* Should be removed. Only for demonstration */

}

.cellcoordinatorimage{

	margin-top:10px;

	padding:10px;

	width:200px;

	height:200px;

	border-style:solid; 

	border-color:#CCC;

	}

	

.cellcoordinatordetails {

	position:absolute;

	 margin-top:-20px;

	 margin-left:30px;

	 text-align:center;

	  line-height: 0.2cm;

	  background-color:#FFF;

	  height:100px;

	  width:175px;

	  border-radius: 10px;

	  border-color:1 solid #999;

	  box-shadow: 4px 8px 8px 0px gray;

	  animation-name: fadeOutIn;

    animation-delay: 2s;

    animation-duration: 6s;

        

	}

.cellcontentcol{

	width:100%;

	margin-top:120px;

	margin-left:70px;

	text-align:left;

    

	}



.cellcolumninner {

  width: 100%;

  padding: 5px;

  font-family:"book Antiqua";

  line-height:0.7cm;

  font-size:18px;

  color:#333;

  margin-left:30px;

  color:#609;

  

  

}



.cellmaintext{

	font-family:"Bookman Old Style";

	font-size:18px;

    color:#666;

	margin-left:40px;

	text-align:left;

	font-weight: bold;

	color:#90C;

	

	

	}

	

.sportscol{

	width: 100%;

	height:100%;

	float:left;

	margin-left:100px;

	margin-top:100px;

	}

	

.mentors{
	font-family:"Bookman Old Style";
	font-size:15px;
    color:#309;
 	margin-left:390px;
	margin-top:120px;
	font-weight: bold;

	}
	
.mentorrow{

	width: 100%;
	height:auto%;
    margin-top:20px;
	margin-left:0px;

	}

.mentor0102, .mentor02 .mentor03,  {

	float:left;
   
	
}	

.mentorimage {
	float:left;
	

	padding:10px;

	width:150px;

	height:150px;

	border-style:solid; 

	border-color:#CCC;
	margin-left:30px;

	}

.mentorname {

	padding-top:2px;

	font-size:14px;

	line-height: 0.5cm;

	font-family:"Bookman Old Style";

	color:#609;

	opacity: 1;

    

  

	}

.svphead{

	width: 100%;

	height:70%;

	

	margin-left:-50px;

	margin-top:0px;

    

	}	



.svpcol{

	/* [disabled]width: 100%; */

	height: 70%;

	float: left;

	margin-left: 100px;

	margin-top: 100px;    

	}

.svpcol01{

	

	width: 100%;

	height:70%;

	margin-left:200px;

    margin-top:40px

	

	}

	

	

.svpcolumn02 {

	

	margin-left:30px;

	float:left;

   width: 200px;

	height:150px;

  /* background-color:#ccc;*/

   

   /* Should be removed. Only for demonstration */

}



.svpcolumn03 {

	margin-left:50px;

	float:left;

	width: 200px;

	height:150px;

    /*background-color:#F00;*/



}



.svpcolumn04 {

	margin-left:50px;

	float:left;

	width: 200px;

	height:150px;

	

    /*background-color:#F90;*/

 

}



.svpcolumn05 {

	margin-left:50px;

	float:left;

	width: 200px;

	height:150px;

	

    /*background-color:#F90;*/

 

}



.sportsdetails {
	float:left;

	position:absolute;

	 margin-top:180px;

	 margin-left:25px;

	  background-color:#FFF;

	  height:60px;

	  width:180px;

	 

	  

        

	}
	
.sportsdetails01{
	float:left;

	position:absolute;

	 margin-top:180px;

	 margin-left:235px;

	  background-color:#FFF;

	  height:60px;

	  width:180px;

	 
	}

.sportsdetails02{
	float:left;

	position:absolute;

	 margin-top:180px;

	 margin-left:435px;

	  background-color:#FFF;

	  height:60px;

	  width:180px;

	  
	}


.svpdetails {

	position:absolute;

	 margin-top:-20px;

	 margin-left:0px;

	  

	  background-color:#FFF;

	  height:100px;

	  width:180px;

	  border-radius: 10px;

	  border-color:2px solid #CCC;

	  box-shadow: 2px 4px 4px 0px #C90;

	  animation-name: fadeOutIn;

      animation-delay: 2s;

      animation-duration: 6s;

        

	}



.choirlist {

  margin-left: -100px;

  float: left;

  padding: 10px;

  

  border-radius:7px;

 

}

.bankhead{
	text-align:center;

	width:100%;

	font-family:"book Antiqua";

	font-size:18px;

	font-weight:bold;

	color:#90C;
	
	}

.choirtitle{

	text-align:center;

	width:100%;

	font-family:"book Antiqua";

	font-size:18px;

	font-weight:bold;

	color:#90C;

	}

.catdetails {

	position:absolute;

	 margin-top:-20px;

	 margin-left:13px;

	  line-height: 0.3cm;

	  background-color:#FFF;

	  height:120px;

	  width:195px;

	  border-radius: 10px;

	  border-color:1 solid #999;

	  box-shadow: 2px 4px 4px 0px #09F ;

	  animation-name: fadeOutIn;

    animation-delay: 2s;

    animation-duration: 6s;

        

	}
	
.indexannounce2{
	float:left;
	  width: 30%;
      height:auto;

  padding: 15px;  

  font-family: Calibri;

  line-height:0.7cm;

  font-size:14px;

  color:#609;

 border-radius:7px;

  box-shadow:  2px 4px 4px 2px #600;
  
	}
	
.indexannounce1{
	float:left;
	  width: 25%;
	  
	  margin-top:-399px;
	  margin-left:650px;
	  
	 

  height:auto;

  padding: 15px;  

  font-family: Calibri;

  line-height:0.7cm;

  font-size:14px;

  color:#609;

 border-radius:7px;

  box-shadow:  2px 4px 4px 2px #600;


	
	}

	
.indexannounce{
	float:left;
	  width: 25%;
	  margin-top:-290px;
	  margin-left:345px;

  height:auto;

  padding: 15px;  

  font-family: Calibri;

  line-height:0.7cm;

  font-size:14px;

  color:#609;

 border-radius:7px;

  box-shadow:  2px 4px 4px 2px #600;


	
	}
	
.maintentions{
	  width: 950px;
	  margin-top:-50px;
	  margin-left:50px;

  height:auto;

  padding: 25px;  

  font-family:"book Antiqua";

  line-height:0.8cm;

  font-size:18px;

  color:#609;

 border-radius:7px;

  box-shadow:  2px 4px 4px 0px #600;


	
	}

.lscolumn, .lscolumn01, .lscolumn02, .lscolumn03, .lscolumn04, .lscolumn05 {
  width: 600px;

  height:auto;

  padding: 25px;  

  font-family:"book Antiqua";

  line-height:0.8cm;

  font-size:18px;

  margin-left:200px;

  color:#609;

 border-radius:7px;

  box-shadow:  2px 4px 4px 0px #600;



}

.massschedule {

	margin-top:-15px;

	color:#900;

	font-size:17px;

	text-decoration:none;

	}

.massschedule01 {

	margin-top:5px;

	color:#900;

	font-size:17px;

	text-decoration:none;

	}

.massschedule02 {

	margin-top:20px;

	color:#0C0;

	font-size:17px;

	text-decoration:none;

	font-weight:bold;
	}
	
.holytext {
	line-height:0.7cm;
	
	}

.lstext {

	margin-top:-10px;
	

	}
.lstext1 {

	margin-top:-10px;
	color: #C00;

	}

.photogallery01{

	 border-radius:0px 0px 10px 10px;

  box-shadow: 1px 2px 2px 1px #CCC ;

  margin-top:-10px;

  width:100%;

  

	}

.pgtext{

	font-family:"book Antiqua";

	font-size:15px;

	color:#006;

	

	

	}



/* The grid: Four equal columns that floats next to each other */

.photogallerycol {

  float: left;

  width: 20%;

  height:auto;

  padding:5px;

  margin-left:0px;

}



.image {

  opacity: 1;

  display: block;

  width:100px;

  height:100px;

   transition: .5s ease;

  backface-visibility: hidden;

  border-radius:15px 15px 0px 0px;

  

}



.photogallerycol:hover .image {

  opacity: 0.3;

 

  

}





/* Style the images inside the grid */

.column img {

  opacity: 0.8; 

  cursor: pointer; 

  

}



/* Expanding image text */

#imgtext {

  position: absolute;

  bottom: 15px;

  left: 15px;

  color: white;

  font-size: 20px;

}



/* Closable button inside the expanded image */

.closebtn {

  position: absolute;

  top: 10px;

  right: 15px;

  color: white;

  font-size: 35px;

  cursor: pointer;

}

.expandimg {

	border-radius:15px 15px 15px 15px;

	

	}





@media screen and (min-width: 320px) and (max-width: 480px)  {
	



.cellheadcol02{

	margin-left:0px;

	margin-bottom:10px;

	margin-top:-10px;

	

	}	

	

.cellheadcol01{

	margin-left:0px;

	margin-bottom:10px;
	}

.cellcontentcol{

	width:100%;

	margin-top:0px;

	}

.cellheaddummy {

	margin-bottom:-100px;	

}

.cellheadccolumn {

	margin-bottom:5px;

   width: 80%;

  padding: 5px;

  height: auto; /* Should be removed. Only for demonstration */

}

.cellcordinator {

	margin-top:-590px;

    width: 100%;

	margin-bottom:10px;
}



.cellcordinator02 {

	margin-top:-100px;

    width:60%;

	height:auto;

	margin-bottom:10px;

	

	

}





.cellcordinator01 {

	 width: 60%;

	 height:auto;

	margin-top:-60px;

	margin-left:100px;

	

}



.cellcolumninner {

  width:80%;

  text-align:justify;

  margin-left:-50px;

  margin-top:10px;

  padding: 5px;

  font-family:"book Antiqua";

  line-height:0.5cm;

  font-size:15px;

  color:#333;

  color:#609;

}

.cellmaintext{
	margin-left:0px;

	 margin-top:100px;

	

	

	}



.cellcoordinatorimage{

	margin-top:600px;

	padding:10px;

	width:50%;

	height:auto;

	margin-left:-30px;

	border-style:solid; 

	border-color:#CCC;

	}

	

.svpcol{

	width: 50%;

	height:70%;

	margin-left:0px;

	margin-top:0px;

    

	}

	

.svpcol01{

	width: 50%;

	height:70%;

	margin-left:0px;

	margin-bottom:-100px;

    

	}

.svpcolumn02  {

	

	margin-left:140px;

	margin-top:50px;

	

}

.svpcolumn03 {

	margin-left:140px;

	margin-top:120px;

	

}



.svpcolumn04 {

	margin-left:140px;

	margin-top:120px;

	

}



.svpcolumn05 {

	margin-left:140px;

	margin-top:120px;

	

	

    /*background-color:#F90;*/

 

}

.svpdetails {

	 margin-left:-100px;

	}

	

.choirlist {

  margin-left:-300px;

  padding: 5px;

  

  border-radius:7px;

 

}

.bankhead{

	text-align:center;

	width:100%;
	font-size:12px;

	

	}

.choirtitle{

	text-align:center;

	width:70%;

	

	}

	

.sportscol{

	width: 100%;

	margin-left:50px;

	margin-top:100px;

    

	}

.sportsdetails {

	 margin-left:-105px;

	}
	
.massschedule01 {

	margin-top:5px;

	color:#900;

	font-size:13px;

	text-decoration:none;

	}
.massschedule02 {

	font-size:14px;

	
	}

.indexannounce {
	text-align:center;
	 width: 300px;
  height:auto;

  padding:10px;

  line-height:0.6cm;

  font-size:12px;

  color:#600;

  

  margin-left:-44px;
  margin-top:10px;

 box-shadow: 2px 4px 4px 0px #600;

	
	}
.indexannounce2 {
	text-align:center;
	 width: 300px;
  height:auto;

  padding:10px;

  line-height:0.6cm;

  font-size:12px;

  color:#600;

  margin-top:-40px;

  margin-left:-100px;
  

 box-shadow: 2px 4px 4px 0px #600;

	
	}

.indexannounce1 {
	text-align:center;
	 width: 300px;
     height:auto;

  padding: 10px;
  line-height:0.6cm;

  font-size:12px;

  color:#600;

  margin-top:20px;

  margin-left:-40px;
   box-shadow: 2px 4px 4px 0px #600;

	
	}

.maintentions {
	text-align:left;
	 width: 100%;

  height:auto;

  padding: 10px;

  line-height:0.7cm;

  font-size:14px;

  color:#600;

  margin-top:-40px;

  margin-left:-50px;

 box-shadow: 2px 4px 4px 0px #600;

	
	}

.lscolumn  {
  width: 100%;

  height:auto;

  padding: 10px;

  line-height:0.6cm;

  font-size:13px;

  color:#600;

  margin-top:-40px;

  margin-left:-50px;

 box-shadow: 2px 4px 4px 0px #600;


}


.lscolumn01, .lscolumn02, .lscolumn03, .lscolumn04, .lscolumn05 {

	width: 100%;

	 height:auto;

  padding: 10px;

  line-height:0.4cm;

  margin-top:10px;

  margin-left:-50px;

  font-size:13px;

   box-shadow: 2px 4px 4px 0px #600;

}
	
.photogallerycol {

  width: 20%;

  padding:5px;

  margin-left:-2px;

  margin-top:-70px;

}

.photogallerycol:hover .image {

  opacity: 0.3;

 

  

}

.photogallery01{

	

	

  margin-top:-10px;

  width:50%;

  margin-left:-105px;

  border-radius:0px 0px 0px 0px;

  box-shadow: 0px 0px 0px 0px ;

  

	}

	

.pgtext{

	font-family:Calibri;

	font-size:10px;

	color:#666;

	 margin-left:-5px;

	

	

	}

	

.image {

	margin-left:-105px;

	 

  opacity: 1;

  display: block;

  width: 90%;

  height: auto;

  transition: .5s ease;

  backface-visibility: hidden;

  border-radius:0px 0px 0px 0px;

  

}

.expandimg {

	border-radius:5px 5px 5px 5px;

	margin-left:-105px;

	width:25%;

	

	}

.mentors{
	font-family:"Bookman Old Style";
	font-size:12px;
    color:#309;
 	margin-left:135px;
	margin-top:70px;
	font-weight: bold;

	}
	
.mentorrow{

	width: 100%;
	height:auto%;
    margin-top:20px;
	margin-left: 20px;

	}

.mentor0102, .mentor02 .mentor03,  {

	float:left;
    width: 100%;
	height:auto;;
	
	}

.mentorimage {
    float:left;
	padding:5px;

	width:20%;
	margin-left:10px;

	height:auto;;

	border-style:solid; 

	border-color:#CCC;

	}
	
	
.mentorname {

	padding-top:0px;

	font-size:10px;

	font-family:"Bookman Old Style";

	color:#609;

	opacity: 1;

    

  

	}	

.sportsdetails {
	float:left;

	position:absolute;

	 margin-top:80px;

	 margin-left:-20px;

	 
	 	  width:30%;	 

	  

        

	}
	
.sportsdetails01{
	float:left;

	position:absolute;

	 margin-top:80px;

	 margin-left:90px;

	  width:30%;

	 
	}

.sportsdetails02{
	float:left;

	position:absolute;

	 margin-top:80px;

	 margin-left:170px;
	  width:30%;

	  
	}


}