@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Handlee&family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Condensed&display=swap');

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
	color: #FFFFFF;
}

body {
    margin: 0;
    padding: 0;
    /*background-image: url("/images/Butterfly-mic.png");*/
	background-color: black;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

/* Background color for navbar and dropdown menus */
.navbar-custom, .navbar-custom .dropdown-menu {
    background-color: black;
    border-bottom: 2.5px solid #FFFF;
    padding: 5px 5px;
}
/* Text color for navbar and dropdown menus */
.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item {
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 2em;
}
/* Background and text colors for current page link and links on hover and focus */
.navbar-custom .nav-item:hover .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover, 
.navbar-custom .dropdown-item:focus {
    background-color: #FFFFFF;
    color: #422A7B;
    font-family: 'Roboto', sans-serif;
}
/* Border and text colors for menu icon on small screens */
.custom-toggler.navbar-toggler {
    border-color: #FFFFFF;
    color: #FFFFFF;
}
/* Hamburger icon - use same rgb values as previous rule for stroke */
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
#hero {
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    position: relative;
    width: 100%;
}

#hero-text {
    position: absolute;
    color: #FFFFFF;
    background-color: rgba(65,42,123,0.75);
    text-shadow: 0 0 3px black;
    font-size: 1.5rem;
    text-align: center;
    padding: 30px;
    top: auto;
    right: 3%;
    left: 3%;
    bottom: 10%;
}
#hero-text p {
    display: none;
}
.navbar-brand img {
    float: left;
    width: auto;
    height: 1.4em;
    margin: 5px 5px 0 0;
    box-sizing: border-box;
    padding: 0.1em 0.3em;
    background-color: black;
    border-radius: 0.5em;
}
body{
	text-align: center;
	display: table-cell;
    vertical-align: middle;
	
}
main {
    background-color: black;
    padding: 20px 0 20px 0;
    margin-bottom: 80px;
}

.content-card {
    margin: 10px 0;
}

.content-card img {
    border-radius: 10px 10px 0 0 ;
}

.content-card div{
    background-color: white;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 0 0 10px 10px;
}

.content-card div h3{
    border-bottom: 1px solid black;
    padding: 0 5px;
    margin: 0 5px 10px;
    font-size: 2em;
}

.content-card div p {
    padding: 0 5px;
    margin: 0 5px 10px;
    font-size: 1.3em;
}

.content-card div a {
    text-decoration: none;
    color: white;
    background-color: black;
    font-size: 1.7em;
    padding: 10px;
    width: 50%;
    text-align: center;
    margin: 0 25% 10px;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 10px;
}

footer {
    clear: both;
    width: 100%;
    padding: 15px;
    background-color: black;
    position: static;
    bottom: 0;
    box-sizing: border-box;
    color: #FFFFFF;
    font-size: 1.3em;
}

 .img-fluid {
    width: 100% !important ;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
  	background-color: #422A7B;
  	color: #422A7B;
}
ul{
	display: grid;
	padding-left: 250px;
}
h3{
		color: #FFFFFF;
}
p{
	color: #FFFFFF;
}
@media screen and (max-width:415px){
	.mainbody{
		padding-left: 50px;
		padding-right: 50px;
		padding-top: 50px;
	}
	ul{
		padding-left: 25px;
	}
	.custom-toggler.navbar-toggler {
		font-size: 0.75em;
	}
	main{
		margin-bottom: 0px;
	}
	#h1{
		padding: 0;
	}
	#img-fluid{
		padding: 0;
	}
	#hero{
		padding-top: 75px;
		padding-bottom: 0px;
	}
    #hero-text h1 {
        font-size: 1.5rem;
    }
	#hero-text h2 {
        font-size: 1.25rem;
    }
	.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
	.navbar-custom .navbar-nav .nav-link,
	.navbar-custom .dropdown-item {
    	font-size: 0.9em;
	}
	footer{
		font-size: 0.8em;
	}
}


@media screen and (min-width:415px){
	.mainbody{
		padding-left: 100px;
		padding-right: 100px;
		padding-top: 50px;
	}
	ul{
		padding-left: 25px;
	}
    .custom-toggler.navbar-toggler {
		font-size: 0.75em;
	}
	main{
		margin-bottom: 0px;
	}
	#h1{
		padding: 0;
		
	}
	#img-fluid{
		padding: 0;
	}
    #hero-text h1 {
        font-size: 1.75rem;
    }
	#hero-text h2 {
        font-size: 1.25rem;
    }
	.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
	.navbar-custom .navbar-nav .nav-link,
	.navbar-custom .dropdown-item {
    	font-size: 1.1em;
	}
	footer{
		font-size: 0.8em;
	}
}

@media screen and (min-width:615px){
	.mainbody{
		padding-left: 100px;
		padding-right: 100px;
		padding-top: 50px;
	}
	ul{
	padding-left: 90px;
}
    .custom-toggler.navbar-toggler {
		font-size: 0.75em;
	}
	main{
		margin-bottom: 0px;
	}
	#h1{
		padding: 0;
	}
	#img-fluid{
		padding: 0;
	}
    #hero-text h1 {
        font-size: 1.75rem;
    }
	#hero-text h2 {
        font-size: 1.25rem;
    }
	.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
	.navbar-custom .navbar-nav .nav-link,
	.navbar-custom .dropdown-item {
    	font-size: 1.5em;
	}
	footer{
		font-size: 0.8em;
	}
}

@media screen and (min-width:715px){
	.mainbody{
		padding-left: 100px;
		padding-right: 100px;
	}
	ul{
	padding-left: 200px;
}
    .custom-toggler.navbar-toggler {
		font-size: 0.75em;
	}
	main{
		margin-bottom: 0px;
	}
	#h1{
		padding: 0;
	}
	#img-fluid{
		padding: 0;
	}
    #hero-text h1 {
        font-size: 1.75rem;
    }
	#hero-text h2 {
        font-size: 1.25rem;
    }
	.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
	.navbar-custom .navbar-nav .nav-link,
	.navbar-custom .dropdown-item {
    	font-size: 1.5em;
	}
	footer{
		font-size: 0.8em;
	}
	
}
@media screen and (min-width:915px){
    .custom-toggler.navbar-toggler {
		font-size: 0.75em;
	}
	.mainbody{
		padding-left: 250px;
		padding-right: 250px;
		padding-top: 50px;
	}
	ul{
		padding-left: 200px;
	}
	main{
		margin-bottom: 0px;
	}
	#h1{
		font-size: 1.75rem;
	}
	#img-fluid{
		padding: 0;
	}
    #hero-text h1 {
        font-size: 1.75rem;
    }
	#hero-text h2 {
        font-size: 1.25rem;
    }
	.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
	.navbar-custom .navbar-nav .nav-link,
	.navbar-custom .dropdown-item {
    	font-size: 1.5em;
	}
	footer{
		font-size: 0.8em;
	}
}
@media screen and (min-width:1400px){
	.mainbody{
		padding-top: 75px;
		padding-left: 300px;
		padding-right: 300px;
	}
}
@media screen and (min-width:1400px){
	.mainbody{
		padding-top: 75px;
		padding-left: 400px;
		padding-right: 400px;
	}
}

/*Code I added to be merged onto the main style.css file*/
/* Validation */
#phone {outline:0;}
#phone:valid{border-color: lightgray;}
#phone:invalid{border-color: red;}
#firstName {outline:0;}
#firstName:valid{border-color: lightgray;}
#firstName:invalid{border-color: red;}
#lastName {outline:0;}
#lastName:valid{border-color: lightgray;}
#lastName:invalid{border-color: red;}
#email {outline:0;}
#email:valid{border-color: lightgray;}
#email:invalid{border-color: red;}
#password {outline:0;}
#password:valid{border-color: lightgray;}
#password:invalid{border-color: red;}
#tier {outline:0;}
#tier:valid{border-color: lightgray;}
#tier:invalid{border-color: red;}
/* styles for form */
.form-body {
    margin: 0;
    padding: 0;
    background-color: #333;
	font-size: 16px;
	color: #4c4c4c;
}
.form-box {
    margin: 60px auto 40px auto;
    width: 350px;
    height: 950px;
    border-radius: 8px/7px;
    background-color: #ebebeb;
    box-shadow: 1px 2px 5px rgba(0,0,0,.31);
    border: solid 1px #cbc9c9;
}
.form-box form {margin: 0 30px;}
.form-box h1 {
  	font-size: 32px;
  	font-weight: 300;
  	color: #4c4c4c;
  	text-align: center;
  	padding-top: 5px;
  	margin-bottom: 10px;
}
.form-box hr {
  	color: #a9a9a9;
  	opacity: 0.3;
}
input[type=text],input[type=password],input[type=email],input[type=tel] {
  	width: 200px;
  	height: 37px;
  	border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
  	background-color: #fff;
  	box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  	border: solid 1px #cbc9c9;
  	margin-left: -5px;
  	margin-top: 13px;
  	padding-left: 10px;
}
input[type=password]{margin-bottom: 5px;}
select {
  	width: 213px;
  	height: 37px;
  	border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
  	background-color: #fff;
  	box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  	border: solid 1px #cbc9c9;
  	margin-left: -5px;
  	margin-top: 13px;
  	padding-left: 10px;
}
input[type=radio] {margin-top: 15px; }
.icon {
  	display: inline-block;
  	width: 30px;
  	background-color: #FFFFFF;
  	padding: 8px 0px 8px 5px;
  	margin-left: 15px;
  	border-radius: 4px 0px 0px 4px;
  	color: white;
  	box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  	border: solid 0px #cbc9c9;
}
#long {width: 200px;}
.form-box button {
  	text-decoration: none;
  	display: inline-block;
  	font-size: 14px;
  	font-weight: bold;
  	color: white;
  	padding: 8px 25px 0px 15px;
  	margin: 15px 8px 20px 15px;
  	height: 40px;
  	width: 255px;
  	border-radius: 5px;
  	background-color: #3b9ad8;
  	box-shadow: 3px 3px rgba(58,87,175,.75);
}
.form-box button:hover {
  	top: 3px;
  	background-color:#FFFFFF;
  	box-shadow: none;
}
.hidden {display: none;}
.visible {display: block;}
#errors {
  	margin: 45px auto;
  	width: 350px;
  	border-radius: 8px/7px;
  	background-color: #ebebeb;
  	box-shadow: 1px 2px 5px rgba(0,0,0,.31);
  	border: solid 1px #cbc9c9;
}
#errors p { padding: 10px; }
.bigCheckBox {
	width: 28px;
	height: 28px;
	background: #fcfff4;
	margin: 8px 0px 0px 16px;
    position: relative;
    top: 8px;
}
.bigRadio {
    width: 54px;
    height: 22px;
    margin-top: 0px;
    margin-right: 5px;
    margin-left: 11px;
    margin-bottom: 7px;
    position: relative;
    top: 8px;
}