/********* Styles **********/

html, body 
{ 
  color: #193366;
  width: 100%;
  height: 100%;
  margin: 0;
  bottom: 0;
  padding: 0;
  overflow-x: hidden; 
  font-size: 13px;
  line-height: 100%;  
}

h1, h2, h3, h4, h5, h6
{ 
  color: #193366;  
  font-family: "Comic Sans", "Comic Sans MS", "Chalkboard", "ChalkboardSE-Regular", sans-serif;
  line-height: 120%;
}

h1
{
  font-size: 350%;
}

h2
{
  font-size: 240%;  
}

h3
{
  font-size: 190%;  
}

h4
{
  font-size: 150%;
}

h5 { font-size: 140%; }
h6 { font-size: 120%;}

p, ol li, ul li
{ 
  font: 115% Arial, Helvetica, sans-serif;
  color: #193366;
  line-height: 160%;  
}



.large-p { font-size: 140%;}
.small-p { font-size: 90%;}
.image-caption { font-size: 85%; font-style: italic;}

.font-Arial { font-family: Arial, Helvetica, sans-serif;}

.extra-line-height { line-height: 170%; }

	
.styled-list { list-style-type: square; }
.unstyled-list { list-style-type: none; } 

.text-justify { text-align: justify; }
.text-center { text-align: center; }
.text-left { text-align: left; }

.strong { font-weight: bold; }

/* Paddings */
.paragraph-padding { padding: 30px 0 30px 0;}
.ad-space { margin: 8px; }
.extra-padding { padding: 30px 0 30px 0; }
.no-padding { padding: 0;}
.bottom-padding { padding-bottom: 20px;}



/* Margins */
.section-gap { margin: 70px 20px 0 20px;}
.column-gap { margin: 20px 0 20px 0;}

/* Position */
.centered { padding: auto auto;}



/* Font colours */
.font-red { color: #ff0000; }
.font-orange { color: rgba(239,165,46,1);}
.font-logo-green { color: #85b718;}
.font-navy-blue { color: #002db3; }
.font-white { color: #fff;}

/* Background colours */
.bg-blue { background-color: #e9f0fa; }
.bg-mid-blue { background-color: #ccd9ff; }
.bg-dark-blue { background-color: #0039e6; }
.bg-yellow { background-color: yellow; } 
.bg-white { background-color: #fff;} 
.bg-logo-green { background-color: #85b718; }
.bg-white { background-color: #fff; }


.bordered { border: 2px solid #193366;}

.row { margin: 10px 0 0 0;}

table { display: table; }
table, th, td 
{ 
	font: 115% Arial, Helvetica, sans-serif;
	border: 1px solid;
    border-spacing: 2px;
    border-color: gray;
}

th, td {  padding: 5px; }

.main-title
{     
	width: 100%;
	padding: 40px 0 20px 0;	
	top: 20px;	
}

.show-logo
{
	border: none;   
    margin: 40px auto auto auto;
	width: 20%;
}

.small-show-logo
{
	width: 75px;
	height: 35px;
	margin: auto auto;
}

.carousel-inner
{
	margin: auto auto;
	width: 600px;
    padding: 0 0;	
}
.slide
{	
	float: none;
	margin: 20px auto;
	width: 600px;
	padding: 0 0;
	background-color: transparent;	
}

.thumbnail 
{
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 5px;
}

footer 
{
	bottom: 0;
	height: auto;
	padding: 5px;	
}



.facebook-logo
{ height: 35px; 	width: 35px; margin: auto auto;}

.img-wrapper 
{
   width: 100%;
   margin: auto;
   height: auto;
   display: block;      
}

.img-fixed-size 
{
   width: 100%; 
   height: 100%;    
}

.img-center
{
    margin: auto;	
    left: 0;
    right: 0;	
}

.img-ninety 
{
	width: 90%;
	height: 90%;
}

.text-on-img 
{
  position: relative;
  max-width: 800px;
  margin: 0 auto;  
}

.text-on-img a img {vertical-align: middle;}

.text-on-img .content 
{
  position: absolute;
  display: block;
  bottom:23px;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%); 
  transform: translate(-50%,-50%);
  background: rgb(255, 255, 255); /* Fallback color */
  background: rgba(255, 255, 255, 0.6); /* Black background with 0.5 opacity */
  width: 90%;
  left: 50%;  
  text-align: center;
  padding: 5px;  
  margin: 0;
  z-index: 9;
 
}

.sponsor-logo { width: 70%; height: 70%;}

.fundraising-img
{ 
	width: 80%;
	height: 80%; 
	margin: auto auto;
}

.raffle-img
{ 
	width: 50%;
	height: 50%; 
	margin: auto auto;
}

.map-style { width: 100%; height:350px; padding: 0 0 20px 0;} 
.maps iframe { pointer-events: none; }  
  
.header-img
{			
	width: 100%;
	height: 100%;
	padding:0;
} 

.navbar-header { padding: 0;}

/* The border and background colour of the three horizontal menu bars in mobile-view */
.navbar-toggle 
{
	border-color: transparent; 
    background-color: transparent !important;
	padding: auto 0;	
	top: 0;
	bottom:0;		
}

/* The colour of the three horizontal menu bars in mobile-view */
.navbar-toggle .icon-bar 
{
	background-color: rgba(239,165,46,1) !important;
	height: 3px;
}
 
/* Navbar menu styles */
.navbar li a, .dropdown-menu li a 
{ 
	font-family: "Comic Sans", "Comic Sans MS", "Chalkboard", "ChalkboardSE-Regular", sans-serif; 
	font-size: 105%;	
	color: rgba(239,165,46,1) !important; 
	background-color: transparent !important; 
	list-style-type: none;
}

.navbar-nav li a:hover { background-color: #fff !important; }

.navbar-nav li .active { font-weight: bold !important; }

.dropdown-menu li a:hover 
{ 
	background-color: #3333ff !important; 
	list-style-type: none;
	
}

.btn 
{
    padding: 10px 20px;
    margin: 2%;
    background-color: #193366;
    color: #fff;
    border-radius: 0;
    transition: .2s;
    font-weight: bold;
}

.btn-other 
{ 
	padding: 10px 20px;
	margin: 2%;
	background-color: #193366;
	color: #fff;
	border-radius: 0;
	transition: .2s;
	font-weight: bold;
	font-size: 16px;
}

.btn:hover, .btn:focus, .btn-other:hover, .btn-other:focus 
{ 
	border: 1px solid ;
	background-color: #193366;
	color: #fff;
}

 .close 
{ 
	color: rgba(239,165,46); 
	opacity: 1; 
}
 
.modal-body
{
	width:100%;
	height: 90%;
}

.modal-header, .close
{ 
	text-align: center;	
}

.modal-header { padding: 40px 50px; } 





/********* Modifications for medium devices *********/ 
@media (min-device-width: 992px) and (max-device-width: 1199px) 
{		
	.paragraph-padding {padding: 30px 7px 30px 7px;}	
	
	.centered { padding: 0;}
	
	.show-logo
	{ 
		width: 25%;
		height: 25%;
	}	
}

/********* Modifications for medium devices *********/ 
/*@media (min-device-width: 768px) and (max-device-width: 991px) and (-webkit-max-device-pixel-ratio: 1)*/ 
@media (min-width: 768px) and (-webkit-max-device-pixel-ratio: 1) and (max-width: 991px) 
{	
	
	.paragraph-padding {padding: 30px 7px 30px 7px;}	
	
	.centered { padding: 0;}
	
	.sm-gap { margin-bottom: 20px;}
	
	.show-logo
	{ 
		width: 25%;
		height: 25%;
	}

	
	.main-title
	{ padding: 70px 0 0 0; 	
}

/********* Modifications for small devices *********/ 
@media (min-device-width: 301px) and (-webkit-max-device-pixel-ratio: 1) and (max-device-width: 767px)
{	  
	body { font-size: 11px; }
	
	.section-gap { margin: 40px 10px 0 10px;}
	.paragraph-padding { padding: 10px 0 30px 0;}
	.logo-padding { padding: 20px 0 20px 0;}
	
	.row { margin: 10px 0 0 0;}
	
	.smaller-column { width: 90%;}
		
	.ad-space {margin: 15px 0 0 0;}	
	
	
	
	.header-img 
	{
		width: 100%; 
		height: 100%; 
		margin-bottom: 0px;
	}
		
	.img-responsive 
	{ 
		width: 90%; 
		height: 90%;
	}
	
	.main-title 
	{		
		width: 100%;		
	}
	
	.small-title
	{
		width: 100%;
		text-align: center;
	}
	
	.show-logo
	{
		border: none;    
		margin: auto auto;
		width: 40%;
	}  

	.small-show-logo
	{
		width: 70px;
		height: 30px;		
	}	
	
	.facebook-logo
	{ 
		height: 20px; 
		width: 20px;	
	}
	
	.slide { width: 100%; }		
	
	
	.map-style { width: 100%; height: 150px; padding: 1% 1% 1% 1%;} 	
}


/********* Modifications for small devices *********/ 
@media (max-device-width: 300px)
{
	.slide { width: 100%; margin-top: 50px;}
	
}