* {
	box-sizing:border-box;
	font-family: sans-serif;
}

body {
	background-image:url("./images/bg.svg");
	background-attachment:fixed;
	background-position:center;
	background-size: cover;
}
h1,h2,h3,h4{
	font-family: 'Kavoon', cursive;
	text-align:center;
}
h1{
	color:white;
	font-size:50px;
	text-shadow: black 1px 1px 0, black -1px 1px 0, black 1px -1px 0, black -1px -1px 0;
}
.box-style {
	background-color:rgba(255,255,255,0.6);
	padding: 5px;
	border-radius:30px;
	width:100%;
	margin:20px auto;
}

video,img{
	width:100%;
}

.themes{
	position: relative;
	width:75vw;
	height:43.945vw;
	margin:0 auto;
}
.themes img{
	position:absolute;
	animation-name: fadeInOut;
	animation-duration: 17.25s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@keyframes fadeInOut{
    0%{
        opacity:1;
    }
    29%{
        opacity:1;
    }
    33%{
        opacity:0;
    }
    96%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
.themes img:nth-of-type(1){
    animation-delay:11.5s;
}
.themes img:nth-of-type(2){
    animation-delay:5.75s;
}
.themes img:nth-of-type(3){
    animation-delay:0;
}
.big-button{
	display:inline-block;
	padding:10px;
	font-size:24pt;
	margin: 10px auto;
	font-family: 'Gorditas', cursive;
	text-decoration: none;
	color: white;
	text-shadow: 1px 1px #000000,1px -1px #000000,-1px 1px #000000,-1px -1px #000000;
	background-color:#44DD44;
	border: 3px solid #CCFFCC;
	border-radius: 100px;
}
.big-button:hover {
	background-color:#CCFFCC;
	border: 3px solid #FFFFFF;
}
.big-button:active {
	background-color:#11BB11;
	border: 3px solid #44DD44;
	text-shadow: none;
	color:black;
}
.iighp-logo-div{
	width:70%;
	margin:20px auto;
}
.center{
	text-align: center;
}
.contactForm label{
	font-family: 'Gorditas', cursive;
	font-size: 14pt;
}
.contactForm input, .contactForm select, .contactForm textarea{
	font-size:14pt;
	background-color: #FFFF66;
	border-radius: 25px;
	border: 3px solid #DDDD44;
	padding:10px 10px 10px 20px;
}
.contactForm textarea {
	width:100%;
	height:200px;
	margin:5px;
}
.contactForm input{
	margin:5px;
}
.contactForm input[type=number] {
	width:75px;
}
.themeSelect input[type=checkbox] {
	display:none;
}
.themeSelect {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.themeSelect label{
	display:inline-block;
	background-color:#FFCCCC;
	border: 3px solid #FF7777;
	border-radius: 25px;
	text-align:left;
	width:48%;
	line-height:50px;
	padding-left:20px;
	margin: 15px 5px;
	font-size:18pt;
	cursor: pointer;
}
.themeSelect input[type=checkbox]:checked + label{
	background-color:#44DD44;
	border: 3px solid #CCFFCC;
	color: #FFFFFF;
	text-shadow: 1px 1px #000000,1px -1px #000000,-1px 1px #000000,-1px -1px #000000;
	background-image:url("images/check.png");
	background-position:right center;
	background-repeat:no-repeat;
}
button {
	font-family: 'Gorditas', cursive;
	text-decoration: none;
	background-color: #FFFF66;
	padding: 5px;
	border-radius: 25px;
	font-size:18pt;
	margin-top: 10px;
	border: 3px solid #DDDD44;
	cursor: pointer;
}
button:hover {
	background-color: #FFFFBB;
	border: 3px solid #FFFF66;
	color:#666666;
}
button:active{
	background-color: #DDDD44;
	border: 3px solid #BBBB22;
	color:#FFFFFF;
}
#errorDialog{
	background-color:#FFCCCC;
	border: 3px solid #FF7777;
	border-radius: 25px;
	padding:10px;
	font-family: 'Gorditas', cursive;
	font-size: 14pt;
	text-align: center;
	margin:20px auto;
}
#errorDialog:empty{
	display: none;
}
.invalidInfo{
	box-shadow: 0 0 15px red;
}
@media screen and (min-width: 900px) {
	h1{
		font-size:72px;
	}
	.box-style {
		padding: 30px;
		width:900px;
	}
	.themes{
		width:800px;
		height:500px;
	}
	.big-button{
		font-size:42pt;
	}
}
