@CHARSET "ISO-8859-1";

/*----------FONTS-----------------*/
@font-face {
    font-family: Boogaloo;
    src: url("/fonts/Boogaloo-Regular.ttf");
}

@font-face {
    font-family: OpenSansSb;
    src: url("/fonts/OpenSans-Semibold.TTF");
}

@font-face {
    font-family: OpenSansExB;
    src: url("/fonts/OpenSans-ExtraBold.ttf");
}

@font-face {
    font-family: OpenSansRegular;
    src: url("/fonts/OpenSans-Regular.ttf");
}


body {
	text-align: left;
	padding: 0px;
	margin: 0px;
 	font-family: OpenSansSb;
 	box-sizing: border-box;
 	background: white;
	height:100%;
}

.header {
    background-color:white;
    color:purple;
    text-align:center;
 	font-family: OpenSansRegular;
 	margin-top: 10px;
    font-size: 1.1vw;
}

/* change font size for small screen */
 @media (max-width: 1023px) {
    .header {
	    font-size: medium;
    }
}

.header img {
	margin-bottom: 10px;
}

/* Keep img fixed at lg screens */
@media (max-width: 1440px) {
	.header img {
		width: 350px;
		height: 100px;
	}
}

a.address, a.address:visited, a.address:link, a.address:active {
	color: inherit;
 	font-family: OpenSansRegular;
}

/* helper to keep footer at the bottom of the page */
.wrapper {
	min-height:100%;
	position:relative;
}

/* ---------Main Content Row------------ */
#mainrow {
}

#home_page #mainrow {
	background-color:#ff731e;
}

#about_page #mainrow {
	background-color:#af52e8;
}

#programs_page #mainrow {
	background-color:#008a35;
}

#gallery_page #mainrow {
	background-color:#00b7fa;
}

#nav {
    color:white;
    float:left; 
    text-align:right;
    padding-right: 0px;
    padding-top: 15px;
 	font-family: Boogaloo;
 	font-size: x-large;
 	padding-bottom: 5px;
 	letter-spacing: 1px;
}

/* Media query to center nav on xs screens */
@media (max-width: 480px) {
	#nav {
	   text-align: center;
	   font-size: medium;
	}
}

/* make xxs for stackable on really small screens */
@media (max-width: 480px)  {     
	#mainrow .col-xxs-12 {
	    width: 100%;
	}
}

/* utilize CSS "specificity */
/* unvisited, visited link, and focuses */
a.navlink:link, a.navlink:visited, a.navlink:focus {
    color: white;
    text-decoration: none;
}

/* mouse over link */
a.navlink:hover, a.navlink:active {
    color: yellow;
    text-decoration: none;
}

a.linkSelected:link, a.linkSelected:visited {
	color: yellow;
	text-decoration: none;
}

.mainContent {
	margin: 0 auto; 
    margin-top: 2%;
    margin-bottom: 2%;
	position: relative;
}

#mainrow .embed-responsive video {
    border:3px solid #ade84c;
}

/* get rid of black space on the sides */
#mainrow .embed-responsive .embed-responsive-item {
	width: auto;
}

.sectionVideo {
    margin-top: 2%;
    margin-bottom: 2%;
    margin-left: 7%;
    margin-right: 7%;
}

#ModalCarousel .closeArea {
   position: absolute;
   top: 0;
   right: 0;
   opacity: 0.5;
   /* stack it on top of the carousel */	
   z-index: 1;
   font-size: 2vw;
   color: #fff;
   /* make the clickable area larger */
   display: block;
   width: 7vw;
   height: 7vw;
   text-align: center;
}


#ModalCarousel .closeGlyph {
	margin-top: 25%;
}

/* clickable area can be smaller on large screens */
@media (min-width: 995px) {
	#ModalCarousel .closeArea {
       width: 5vw;
       height: 5vw;
	}
}

/* change font size for small screen */
@media (max-width: 1024px) {
	#ModalCarousel .closeGlyph {
	   font-size: 4vw;
	}
}

.sectionCarouselOuter {
	width: 70%;
    border:3px solid #ade84c;
}

/* some code to make the modal centered vertically */
.vertical-alignment-helper {
    margin: 0 auto;
    display:table;
    height: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

/* make gallery photos as full screen as possible */
@media (min-width: 1920px)  { 
   #modalGallery .modal-dialog {
      width: 100%;
      max-width: 1400px;
   }
}
@media (min-width: 2360px)  { 
   #modalGallery .modal-dialog {
      max-width: 1920px;
   }
}

/** make list item indicators responsive for large screens */
@media (min-width: 1920px)  { 
	#ModalCarousel .carousel-indicators li {
	     height: 15px;
	     width: 15px;
	}
}
@media (min-width: 3840px)  { 
	#ModalCarousel .carousel-indicators li {
	     height: 25px;
	     width: 25px;
	}
}

.programsText {
	height: auto;
	min-height: 240px;
	color: white;
	padding-left: 6%;
	padding-right: 6%;
	text-align:center;
	font-size: medium;
}

.programsLabel {
	font-weight:bold;
	color:yellow;
}

.programsList {
	list-style-type:disc;
	text-align:left;
}

/* change margins for small screen */
 @media (max-width: 480px) {
    .programsText {
	    padding-left: 4%;
	    padding-right: 4%;
    }
}

.aboutText {
	height: auto;
	min-height: 240px;
	color: white;
	padding-left: 7%;
	padding-right: 7%;
	font-family:OpenSans-Regular;
	font-size: 1.28vw;
}

.aboutText img.img-responsive {
    border: 2px solid #ade84c;
    margin: 1% 2% 0px 0px;
    float: left;
	width: 25%;
}

/* change font size for small screen */
 @media (max-width: 1023px) {
    .aboutText {
	    font-size: medium;
    }
}

.calendarText {
    color:white;
    text-align:center;
    font-family: Boogaloo;
    font-size: x-large;
    padding-bottom: 5px;
    letter-spacing: 1px;
}

/* ---------lower navigation images------------ */

#lowernav {
	margin-top: 25px;
}

/* change margin for very large screens */
@media (min-width: 1366px) {

    #lowernav {
	   margin-top: 2%;
    }
}

/* add padding on md screens */
@media (max-width: 990px)  {     
	#lowernav {
		margin-left: 10%;
		margin-right: 10%;
	}
}

#lowernav .thumbnail {
    background-color:#ade84c;
    max-width:98%;
    padding:1%;
}

#lowernav a.thumbnail:link, a.thumbnail:visited {
	color: inherit;
	text-decoration: none;
}

#lowernav a.thumbnail {
	max-width: 360px;
    /* center it inside the column */
    margin: 0 auto;
    border: 0;
}

#lowernav .thumbnail .caption {
	text-align: center;
	padding: 0;
}

@media (max-width: 480px) {
    /* TODO: check column grid info for lowernav */
	#lowernav a.thumbnail {
	   min-width: 60px;
    }

    /* change font size for small screen */
    #lowernav .thumbnail .caption {
       font-size: 1.5vw;
    }
}

/* thumbnail coloring */
a#about:hover {
	background-color:#af52e8;
}

a#programs:hover {
	background-color:#008a35;
}

a#gallery:hover {
	background-color:#00b7fa;
}

#about_page a#about {
	background-color:#af52e8;
}

#programs_page a#programs {
	background-color:#008a35;
}

#gallery_page a#gallery {
	background-color:#00b7fa;
}

/* ---------Content at the bottom------------ */
#quotation {
    color:#ff731e;
    text-align:center;
    margin-top: 15px;
    font-weight: bold;
    font-family: OpenSansExB;
}

#quotation span.author {
    font-family: OpenSansSb;
}

#lowercontent {
    background-color:white;
    color:#ff731e;
    text-align:center;
    margin-top: 15px;
    margin-bottom: 2%;
    font-family: OpenSansExB;
    font-size: large;
	padding-bottom: 30px; /* Height of the footer element */
}

.tour {
	color: #3399FF;
    font-family: OpenSansExB;
}

a.phone, a.phone:visited, a.phone:link, a.phone:active {
	color: inherit;
 	font-family: OpenSansRegular;
}

.footer {
    background-color:#af52e8;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
    font-size: 75%;
    
	width:100%;
	position:absolute;
	bottom:0;
}


/* change fonts for very large screens */
@media (min-width: 1366px) {
	.header {
       font-size: 1.25vw;
    }
	#nav {
 	   font-size: 2vw;
	}
	.aboutText {
	   font-size: 1.3vw;
    }
    .programsText {
	   font-size: 1.3vw;
    }
	.calendarText {
 	   font-size: 2vw;
	}
    #lowercontent {
       font-size: 1.75vw;
    }
    #lowernav .caption {
	   font-size: 1vw;
    }
    .footer {
       font-size: 0.8vw;
    }
}

/* change borders for large screens */
/* Padding is a % that, when doubled and added to max-width, makes 100%. */
/* background is color of the faux border. */
@media (min-width: 1366px) {
	
	#mainrow .embed-responsive video {
        max-width:99%;
        padding:.5%; 
        background:#ade84c;
    }
    .aboutText img.img-responsive {
       max-width:99%;
       padding:.5%; 
       background:#ade84c;
    }
    .sectionCarouselOuter {
        border:0;
        max-width:99%;
        padding:.5%; 
        background:#ade84c;
    }
}