/* Colors used throughout the site
 * Background: #fffdf2
 * Title: #00addb
 * Title Text: #b0f8ff
 * Menu Background: #b0f8ff
 * Menu Text: #303
 * Headings: #ff3f30
 * Sub-headings: #009999
 * Text: #303
 * Text Links: #271175
 * 
 * Pink: #ffad8a;
 * Accent: #ff3f30;
 * Menu: #126ccc;
 * Menu Link: #00adeb;
 * Menu Link Text Hover: #126ccc;
 * Link: #007bff;
 * Link Hover: #00adeb;
 * Title Bar: #007bff;
 */

*{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
[class*="col-"]{
	float: left;
}
a.home{
	position: absolute;
	font-size: 2.5em;
	padding: .5em .7em;
	margin: 0 auto;
	top: 45%;
	border-radius: .2em;
	background-color: #eee;
	color: #fff;
	text-decoration: none;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
a.home:hover{
	background-color: #ddd;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
.about{
	float: left;
}
.about-box{
	display: block;
	padding: 2.5em 15% 2.5em 12%;
	margin: 1em;
	overflow: hidden;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#about-container{
	width: 100%;
	box-sizing: border-box;
	padding: 0 0 0 4em;
}
#about-img{
	float: right;
	padding: 2em 7% 0 0;
	overflow-y: hidden;
}
.about-text{}
.about-text.small{font-size: 1em;}
.about-text.medium{font-size: 1.3em;}
.about-text.large{
	font-size: 1.8em;
	font-style: italic;
}
#amznCharityBanner{
		width: 15em;
		height: 10em;
}
body{
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	margin-left: 0;
	background-color: #e7e7e7;
	background-image: url(../images/1920xbackground.png);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	color: #126ccc;
	font-family: 'Poppins';
	text-shadow: 2px 1px #fff;
	user-select: none;
	cursor: default;
	transition: 0.6s ease;
}
body.a{
	background-image: url(../images/home-a.png);
}
body.b{
	background-image: url(../images/home-b.png);
}
body.home #container{
	padding-right: 2em;
	text-align: center;
	justify-content: center;
	align-items: center;
}
.home-box-link{
	text-decoration: none;
}
.home-box{
	display: inline-block;
	margin: 7.5%;
	height: 8em;
	padding: 2.5%;
	width: 8em;
	box-shadow: .3em .3em 2em -.5em rgba(0,0,0,1);
}
#container{
	padding: 0 0 6em 4em;
	width: 100%;
	box-sizing: border-box;
}
footer{
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #0000;
	padding: 0 10% 1em 10%;
	font-size: 1.05em;
}
footer .copyright{
	display: inline;
	float: left;
	padding: 0;
}
html{
	position: relative;
	min-height: 100%;
}
#menu{
	position: fixed;
	top: 0;
	left: 0;
	height: 120%;
	background: #126ccc;
	width: 120px;
	z-index: 97;
	text-shadow: none;
	box-shadow: 0 .2em 3em 0 rgba(0,0,0,1);
	transform: translate3d(-115px, 0, 0);
	-webkit-transition: transform 0.35s;
	-moz-transition: transform 0.35s;
	-o-transition: transform 0.35s;
	transition: transform 0.35s;
}
#menu #menu-toggle{
	position: fixed;
	right: -67px;
	width: 80px;
	height: 350px;
	line-height: 0px;
	display: block;
	padding: 0;
	text-indent: -9999px;
	background-repeat: no-repeat;
	cursor: pointer;
	color: #00adeb;
}
#menu-icon{
	-webkit-transition: 0.35s;
	-moz-transition: 0.35s;
	-o-transition: 0.35s;
	transition: 0.35s;
}
#menu.open{
	transform: translate3d(0, 0, 0);
}
#menu.open #menu-toggle-text{
	color: #00fdeb;
}
#menu ul{
	padding: 2em 0 0 0;
	list-style-type: none;
}
#menu ul li a{
	width: 90%;
	border-radius: 35px;
	display: block;
	text-align: center;
	line-height: 5em;
	text-decoration: none;
	color: #00adeb;
}
#menu ul li a:hover{
	color: #126ccc;
	background-color: #dafeff;
	box-shadow: 0 3px 5px rgba(25,25,25,25);
}
#menu-toggle-text{
	cursor: pointer;
	text-align: center;
	color: #00adeb;
	position: absolute;
	right: -33px;
	top: 125px;
	z-index: 99;
	-webkit-transition: 0.35s;
	-moz-transition: 0.35s;
	-o-transition: 0.35s;
	transition: 0.35s;
}
#menu-toggle-text div{
	margin: .5em 0 .5em 0;
}
#menu-toggle:hover + #menu-toggle-text, #menu-toggle-text:hover{
	color: #00fdeb;
}
#overlay.open{
	position: fixed;
	width: 300%;
	height: 300%;
	top: -20em; 
	left: -20em;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 2;
	cursor: pointer;
}
.site-map{
	display: inline;
	float: right;
	text-align: right;
}
.site-map a{
	color: #00addb;
	text-decoration: none;
}
.site-map a:hover{
	color: #2fbfff;
}
#title{
	overflow-x: hidden;
	width: 100%;
	box-sizing: border-box;
	padding: 0 0 0 4em;
	transform: translate3d(0, -100%, 0);
	text-align: center;
	/*border: black 2px;
	background: #007bff;*/
	-webkit-transition: all .7s ease-in 0s;
	-moz-transition: all .7s ease-in 0s;
	-o-transition: all .7s ease-in 0s;
	transition: all .7s ease-in 0s;
}
#title.loaded{
	padding: 3.5em 0 0 4em;
	margin-bottom: 3em;
	transform: translate3d(0, 0, 0);
}
#title-text{
	font-size: 8em;
	color: #007bff;
	-webkit-transition: margin-left 0.35s;
	-moz-transition: margin-left 0.35s;
	-o-transition: margin-left 0.35s;
	transition: margin-left 0.35s;
}
#title-text.open{
	margin-left: 120px;
	-webkit-transition: margin-left 0.8s;
	-moz-transition: margin-left 0.8s;
	-o-transition: margin-left 0.8s;
	transition: margin-left 0.8s;
}
#title-image{
	border-style: none;
	text-align: left;
	max-width: 20em;
	-webkit-transition: margin-left 0.35s;
	-moz-transition: margin-left 0.35s;
	-o-transition: margin-left 0.35s;
	transition: margin-left 0.35s;
}
#title-image.open{
	margin-left: 120px;
	-webkit-transition: margin-left 0.8s;
	-moz-transition: margin-left 0.8s;
	-o-transition: margin-left 0.8s;
	transition: margin-left 0.8s;
}
#title-logo{
	border-style: none;
	background-color: rgba(0,0,0,0);
	background-image: url("../images/logo.png");
	float: left;
	width: 5em;
	height: 5em;
	background-size: cover;
	-webkit-transition: margin-left 0.35s;
	-moz-transition: margin-left 0.35s;
	-o-transition: margin-left 0.35s;
	transition: margin-left 0.35s;
}
#title-logo.open{
	margin-left: 120px;
	-webkit-transition: margin-left 0.8s;
	-moz-transition: margin-left 0.8s;
	-o-transition: margin-left 0.8s;
	transition: margin-left 0.8s;
}
ul{
	margin: 0;
}


#snackbar{
	width: 100%;
	background-color: #333;
	color: #fff;
	position: fixed;
	z-index: 1;
	bottom: 0;
	-webkit-transition: transform 0.35s;
	-moz-transition: transform 0.35s;
	-o-transition: transform 0.35s;
	transition: transform 0.35s;
}
#snackbar .container{
	text-align: center;
	padding: .3em;
	padding-right: 5em;
	float: left;
	margin: .2em auto .2em auto;
}
#snackbar-btn{
	border-radius: 3px;
	background-color: #0c8;
	padding: .3em;
	float: left;
}
#snackbar-btn:hover{
	background-color: #0af;
	cursor: pointer;
}
#snackbar.hidden{
	transform: translate3d(0, 100%, 0);
}
h1{
	color: #ff3f30;
	margin: .3em 0 0 0;
}
h3{
	color: #099;
	margin: 0;
}

.row{
	padding: 0 5% 0 5%;
}

/* Contact Page */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.row::after{
	content: "";
	clear: both;
	display: table;
}
.contact-el{
	margin-bottom: 2em;
}
@media only screen and (max-width: 800px){
	[class*="col-"]{
		width: 100%;
	}
}
.comment-form{
	border-width: .5em;	
	border-style: dashed;
	border-color: #099;
	overflow: hidden;
}
#contact{
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.comment textarea{
	border: .1em solid #ff3f30;
	border-radius: .5em;
	width: 93%;
	height: 14em;
	padding: 2%;
	margin: 2% 1%;
	resize: none;
	float: left;
	overflow-x: hidden;
	overflow-y: auto;
}
.comment input{
	border: .1em solid #ff3f30;
	border-radius: .5em;
	width: 93%;
	padding: 2%;
	margin: .1em 1% 1em 1%;
	float: right;
}
.comment textarea:focus{
	outline-width: 0;
	border-color: #ff3f30;
}
.comment input:focus{
	outline-width: 0;
	border-color: #ff3f30;
}
.comment input[name=phone]:focus{
	/*color: transparent;
	text-shadow: 0 0 0 #000;*/
}
#submit-btn{
	overflow: hidden;
	margin: .5em;
	padding: .3em .6em;
	background-color: #ff3f30;
	color: #fffdf2;
	text-shadow: none;
	float: right;
}
#submit-btn:hover{
	background-color: #ee3e29;
}
#paypal-button{
	cursor: pointer;
}

/* Carousel Styles */
.slideshow-container{
	width: 50em;
	height: 24em;
	overflow: hidden;
	position: relative;
	margin: 4em auto .5em auto;
	box-shadow: 0 .2em .6em 0 rgba(0,0,0,0.2), 0 .2em .8em 0 rgba(0,0,0,0.2);
}
.slideshow-container img{
	width: 100%;
	background-color: #dedede;
}
.slides{
	display: none;
}
#amznCharityBanner{
	width: 100%;
	padding-top: 6em;
	height: 24em;
	background-color: #f90;
}
.prev, .next{
	background-color: rgba(0,0,0,0.4);
	cursor: pointer;
	position: absolute;
	top: 48%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
}
.prev{
	left: 0;
}
.next{
	right: 0;
	border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
	background-color: rgba(0,0,0,0.8);
}
.slides .text{
	font-size: 1.2em;
	position: absolute;
	bottom: 0;
	width: 100%;
	color: #160064;
	background-color: #fffdf2;
	text-align: center;
	text-decoration: none;
}
#dot-container{
	text-align: center;
}
.dot{
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.active, .dot:hover{
	background-color: #717171;
}
.fade{
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}
@-webkit-keyframes fade{
	from {opacity: .4}
	to {opacity: 1}
}
@keyframes fade{
	from {opacity: .4}
	to {opacity: 1}
}

/* Events Page */
#event-content{
	display: inline-block;
	text-align: right;
}
#event-content li{
	cursor: pointer;
	padding: 3em 4em 3em 5em;
	background-color: #b0f8ff;
	list-style: none;
	-webkit-transition: 0.35s;
	-moz-transition: 0.35s;
	-o-transition: 0.35s;
	transition: 0.35s;
}
#event-content .active{
	font-size: 1.1em;
	background-color: #fffdf2;
}
#article{
	position: absolute;
	display: inline-block;
	right: 0;
	text-align: left;
	padding: 0 2em 0 34em;
	z-index: -1;
}

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 12px 16px;
	z-index: 1;
}
.dropdown:hover .dropdown-content {
    display: block;
}

@media (max-width: 1200px){
	.slideshow-container{
		width: 40em;
		height: 19.2em;
	}
	#amznCharityBanner{
		padding-top: 4.5em;
		height: 19.2em;
	}
	.home-box{
		margin: 4%;
		height: 8em;
		padding: 2.5%;
		width: 8em;
		box-shadow: .3em .3em 2em -.5em rgba(0,0,0,1);
	}
	#container{
		padding-bottom: 10em;
	}
	.about-box{
		padding: 2.5em 5% 2.5em 5%;
	}
}
@media (max-width: 800px){
	.about-box{
		padding: 2.5em 0 2.5em 0;
	}
	#about-img{
		display: none;
	}
	footer{
		padding-left: 65px;
	}
	.site-map{
		text-align: left;
	}
	.slideshow-container{
		width: 20em;
		height: 9.6em;
	}
	#amznCharityBanner{
		padding-top: .1em;
		height: 9.6em;
	}
	#title-logo{
		width: 0;
		height: 0;
	}
	#title-text{
		font-size: 6em;
	}
	.row{
		padding: 0 2% 0 2%;
	}
	.home-box{
		display: block;
		margin: 4% auto;
		height: 12em;
		padding: 2.5%;
		width: 12em;
		box-shadow: .3em .3em 2em -.5em rgba(0,0,0,1);
	}
}
@media (max-width: 600px){
	#title-text{
		font-size: 4em;
	}
}
@media (max-width: 400px){
	#title-text{
		font-size: 3em;
	}
}
@media (max-width: 300px){
	#container{
		padding-bottom: 15em;
	}
	#title-text{
		font-size: 2.5em;
	}
}