*{
	/* Universal page reset */
	margin:0;
	padding:0;
}

body{
	/* Setting default text color, background and a font stack */
	background-image:url(../files/bg.jpg);
}


#main{
	/* The main container div */
	position:relative;
	margin:50px auto;
	width:810px;
	height:200px;
	border:1px solid #CCCCCC;
	background-color:#fff;

	
	/* CSS3 rounded cornenrs */
	
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
	
	box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);
	-webkit-box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);
	-moz-box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);
	-o-box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);
	-ms-box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);

}

#main img{ width:100%;
height:auto;
}

#altmain{
	/* The main container div */
	position:relative;
	margin:20px auto;
	width:810px;
	height:auto;
	border:1px solid #CCCCCC;
	background-color:#fff;

	
	/* CSS3 rounded cornenrs */
	
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
	
	box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);
	-webkit-box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);
	-moz-box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);
	-o-box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);
	-ms-box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);

}

#altmain img{ width:100%;
height:auto;
}

#altmain p{
	
	 font-size: 33px;
  font-weight:bold;
  width:700px;
  line-height:35px;
  margin-top:5%;
  margin-left:8%;
  margin-bottom:5%;
  font-family:"Times New Roman", Times, serif;
  text-align:center;
  
}



#main2{
	/* The main container div */
	position:relative;
	margin:50px auto;
	width:810px;
	background:url('img/main_bg.jpg') repeat-x #aeadad;
	border:1px solid #CCCCCC;
	padding:70px 25px 60px;
	
	/* CSS3 rounded cornenrs */
	
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
	
	box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);
	-webkit-box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);
	-moz-box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);
	-o-box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);
	-ms-box-shadow:4px 0px 4px rgba(0,0,0,0.58),-4px 0px 4px rgba(0,0,0,0.58),0px 4px 4px rgba(0,0,0,0.58),0px -4px 4px rgba(0,0,0,0.58);

}

#social{
	/* The main container div */
	position:relative;
	margin:50px auto;
	width:810px;
	
	/* CSS3 rounded cornenrs */
}

#social img {
	width:auto;
	height:auto;
	margin-right:35px;
	margin-left:9%;
	cursor:pointer;
	
	transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
opacity:1;	
}

#social img:hover {
	transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
opacity:0.7;	
	
	
}

#holder{
	/* The unordered list that is to be split into pages */

	width:770px;
	overflow:hidden;
	position:relative;
	margin-left:20px;
	background:url('img/dark_bg.jpg') repeat #4e5355;
	padding-bottom:30px;
	padding-top:30px;
	text-decoration:none;

	/*	CSS3 inner shadow (the webkit one is commeted, because Google Chrome
		does not like rounded corners combined with inset shadows): */

	-moz-box-shadow:0 0 10px #222 inset;
	/*-webkit-box-shadow:0 0 10px #222 inset;*/
	box-shadow:0 0 10px #222 inset;
}



#holder li{
	background-color:#F4F4F4;
	list-style:none outside none;
	margin:10px 30px 0;
	padding:20px;
	margin-bottom:5px;
	float:inherit;
	border:1px solid #000;
	text-align:center;
	cursor:pointer;
	text-decoration:none;

	/* Regular CSS3 box shadows (not inset): */

	box-shadow:2px 0px 4px rgba(0,0,0,0.58),-2px 0px 4px rgba(0,0,0,0.58),0px 2px 4px rgba(0,0,0,0.58),0px -2px 4px rgba(0,0,0,0.58);
	-webkit-box-shadow:2px 0px 4px rgba(0,0,0,0.58),-2px 0px 4px rgba(0,0,0,0.58),0px 2px 4px rgba(0,0,0,0.58),0px -2px 4px rgba(0,0,0,0.58);
	-moz-box-shadow:2px 0px 4px rgba(0,0,0,0.58),-2px 0px 4px rgba(0,0,0,0.58),0px 2px 4px rgba(0,0,0,0.58),0px -2px 4px rgba(0,0,0,0.58);
	-o-box-shadow:2px 0px 4px rgba(0,0,0,0.58),-2px 0px 4px rgba(0,0,0,0.58),0px 2px 4px rgba(0,0,0,0.58),0px -2px 4px rgba(0,0,0,0.58);
	-ms-box-shadow:2px 0px 4px rgba(0,0,0,0.58),-2px 0px 4px rgba(0,0,0,0.58),0px 2px 4px rgba(0,0,0,0.58),0px -2px 4px rgba(0,0,0,0.58);
	
	transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
-ms-transition: -webkit-transform .5s ease-in;

transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);	
-ms-transform: scale(1);	

}

#holder li a{
	text-decoration:none;
	
}


#holder li:hover{

	
}


#holder,
#holder li{
	/* Applying rouded corners to both the holder and the holder lis */
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	
    color:rgba(0,0,0,0.8);




  font-size: 25px;
  font-family:"Times New Roman", Times, serif;
}

.clear{
	/* This class clears the floated elements */
	clear:both;
}

#holder p{
	
	background:rgba(255,255,255,0.5);

    color: rgba(0,0,0,0.9);

	transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;

   
   margin-left:10px;
   margin-right:10px;
   margin-top:10px;
border:2px double rgba(255,255,255,0.58);;

border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-ms-border-radius:10px;

  font-size: 25px;
  font-weight:bold;
  line-height:35px;
  font-family:"Times New Roman", Times, serif;
  text-align:center;
}

#holder p span{

  font-size: 30px;
  font-weight:bolder;
  line-height:35px;
  font-family:"Times New Roman", Times, serif;
  text-align:center;
  text-transform:uppercase;
}

#holder p:hover{
	
	
	transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
}





/* The styles below are only necessary for the styling of the demo page */




.scrollToTop{
	position:fixed;
	right:15px;
	bottom:15px;
    cursor:pointer;
    width:50px;
    height:50px;
	z-index:100;
}