style.css

*{
	margin: 0;
}

head, html {
	color: #ffffff;
	font: 15px/1.2"Lato", sans-serif;
	cursor: default;
}

a:link, a:visited {
	text-decoration: none;
	color: #ffffff;
}

h2 {
	font-size: 20px;
	letter-spacing: 3px;
	color: black;
	padding-bottom: 1%;
}
/*************
	NavBar
**************/

.navBar {
	position: fixed;
	top: 0;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 100%;
	background: #333;
	text-align: right;
	opacity: 0.65;
	z-index: 10;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.navBar:hover {
	opacity: 1;
}

.dropbtn {
	background-color:#333;
	color: #ffffff;
	border: none;
	padding-left: 10%;
	padding-right: 10%;
	display: none;
}

.dropdown {
	position: relative;
	display: none;
}

.dropdown-content {
	display: none;
	position: absolute;
	margin-left: -130%;
	background-color: #333;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
	color: #ffffff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
	opacity: 0.4;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    opacity: 0.4;
}

.navBar a:hover {
	opacity: 0.4;
}

.navBar a:visited, a:link{
	padding-right: 25px;
	letter-spacing: 5px;
}

.social {
	position: absolute;
	left: 2%;
	top: 27.5%;
}

/********************
	Slide Show 
*********************/

.slideshow-container {
	width: 100%;
	height: 100vh;
	border-bottom: 1px solid black;
	overflow:hidden;
}

.slideshow-container img {
	transform: scale(1.1);
	filter: brightness(50%) blur(2px);
	min-width: 100vw;
	min-height: 100vh;
}

.mySlides {
	display: none;
}

.slideshow-container a:link, a:visited {
	font-weight: bold;
	font-size: 20px;
	border-radius: 20px; 
	border: 2px solid #ffffff;
	padding: 10px 10px 10px 10px;
}

.slideshow-container a:hover { 
	opacity: 0.65;
}

.homecard {
	position: absolute;
	bottom: 10%;
	padding-left: 10%;
	font-weight: bold;
	padding-right: 25%;
}

.title {
	font-size: 50px;
	letter-spacing: 2px;
}

.motto {
	font-size: 40px;
	color: #B22222;
	padding-bottom: 10px;
}

.lilaboot {
	font-size: 20px;
	color: #C0C0C0;
	padding-bottom: 30px;
}

/******************
	Sponsors
******************/

.sponsors {
	background: #fffffe;
	color: #000000;
	overflow:hidden;
	text-align: center;
	padding-top: 1%;
	padding-bottom: 1%;
	background-color: #f9f9f9;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding-left: 1%;
	padding-right: 1%;
}

.sponsors a:hover {
	opacity: 0.6;
}

.sponsors img {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
	padding: 20px 20px 20px 20px;
}
 
.sponsors img:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

/**************
	About
***************/
.about {
	padding-top: 10%;
	padding-bottom: 10%;	
	padding-left: 3%;
	padding-right: 3%;
	background: #010332;
	font-size: 15px;
	overflow: auto;
}

.about h2 {
	color: white;
	font-size: 25px;
}

.about h4 {
	font-size: 20px;
	color: yellow;
}

td {
	width: 50%;
	padding-bottom: 5%;
}

.what {
	width:100%;
}


.about p {
	font-size: 20px;
	padding: 5% 5% 5% 5%;
}


.hackathon, .networking, .workshop{
	width:33%;
	float: left;
	text-align: center;
	background: #010332;
	border-left: 1px solid rgba(255, 255, 255, .4);
	border-right: 1px solid rgba(255, 255, 255, .4);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.hackathon:hover, .networking:hover, .workshop:hover{
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

/****************
	Team
****************/

.team {
	color: black;
	padding: 6% 5% 6% 5%;
	background-color: #f9f9f9;
	overflow: auto;
	border-top: 1px solid black;
}

.team h2 {
	padding-bottom: 5%;
}

.team h4 {
	font-size: 20px;
	padding-bottom: 2%;
}

.team h5 {
	font-size: 17px;
}

.team img {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
	padding: 20px 20px 20px 20px;
}
 
.team img:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.pres, .vpres, .tres {
	width:33.33%;
	float: left;
	text-align: center;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.pres:hover, .vpres:hover, .tres:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
.team p {
	padding: 2% 5% 5% 2%;
}
.tres {
	width:33.34%;
	float: right;
}

/**************
	Upcoming Events
**************/
.events {
	background: url("Images/background10-min.jpg");
	color: #ffffff;
	padding: 6% 5% 8% 5%;
	border-top: 1px solid black;
}

.events h2 {
	padding-top: 7%;
	color: #ffffff;
	font-size: 25px;
	letter-spacing: 4px;
}

.liam, .idea {
	width: 50%;
	float: left;
	padding: 2% 0% 2% 0%;
}

.liam h3 {
	padding-top: 6%;
	padding-bottom: 4%;
	font-size: 20px;
	font-weight: normal;
}

.idea {
	text-align: center;
}

.idea img {
	box-shadow: 5px 5px 5px black;
}

.wrappa {
	padding-bottom: 35%;
}

.wrappa2 {
	padding-bottom: 5%;
}

.banner, .intro {
	text-align: center;
}

.banner {
	border: 1px solid black;
	overflow: hidden;
	background: #010332;
	
}

.intro p {
	text-align: justify;
	font-size: 20px;
	padding-top: 2%;
	padding-bottom: 6%;
}
.one, .two, .three {
	width: 33.33%;
	float: left;
}

.one {
	text-align: right;
}

.three {
	text-align: left;
}
.intro a:link, a:visited {
	font-weight: bold;
	font-size: 20px;
	border-radius: 20px; 
	border: 2px solid #ffffff;
	padding: 10px 10px 10px 10px;
}

.intro a:hover { 
	opacity: 0.65;
}


/*************
	Internship
*************/
.intern {
	background-color: #f9f9f9;
	padding: 6% 5% 6% 5%;
	color: #000000;
	border-top: 1px solid black;
}

.seccon {
	text-align: center;
	position: relative;

}

.secret img {
	transform: rotate(-45deg);
	mix-blend-mode: multiply;
}

.secmsg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
	font-size: 20px;
	background-color: #ffffff;
	opacity: 0.65;
}

.secret:hover + .secmsg {
	display:inline-block;
}

.deets {
	font-size: 25px;
	letter-spacing: 5px;
	text-align: center;
	z-index: 10;
	padding-top: 2%;
}





/**************
	Contact
**************/
.contact {
	background: #0CF;
	color: #ffffff;
	padding: 5% 30% 6% 30%;
	border-top: 1px solid black;
}

.contact h2 {
	color: #ffffff;
	padding-bottom: 5%;
}

.form_div {
	padding: 5% 5% 5% 5%;
	background-color: #f9f9f9;
	text-align: center;
}

.error {
	padding-bottom: 1%;
	padding-top: 1%;
	color: red;
}

input, textarea{
	width: 80%;
}

input[type="text"], input[type="email"], textarea{
	font-size: 20px;
}

input[type="text"]:focus, input[type="email"]:focus ,textarea:focus {
	outline: none;
	background-color: #ffffd0;
}

input[type="submit"]{
	background: #0CF;
	border: none;
	cursor: pointer;
	font-size: 20px;
	float: none;
	border-radius: 20px; 
	border: 2px solid #ffffff;
	color: #ffffff;
	padding: 10px 10px 10px 10px;
}

input[type="submit"]:hover{
	opacity: 0.65;
}

/************
	Footer
************/
footer {
	padding: 1% 5% 1% 5%;
	background-color: #000000;
	text-align: center;
}

@media only screen and (max-width: 700px){
	
	/**********
		NavBar
	**********/
	.navBar {
		text-align: center;
	}
	.bigMenu {
		display: none;
	}
	
	.dropdown {
		display:inline-block;
	}
	
	.dropbtn  {
		display: block;
	}
	
	/************
		About
	************/
	.hackathon, .networking, .workshop{
		width:100%;
		text-align: center;
		border-top: 1px solid rgba(255, 255, 255, .4);
		border-bottom: 1px solid rgba(255, 255, 255, .4);
		border-left: none;
		border-right: none;
	}
	
	.about p {
		padding: 7% 7% 7% 7%;
	}
	
	/***********
		Team
	***********/
	.pres, .vpres, .tres {
		width:100%;
		padding-bottom: 7%;
	}
	
	/**********
		Events
	***********/
	.events {
		padding-bottom: 30%;
	}
	
	.secmsg{
		font-size: 15px;
		opacity: 0.9;
	}
	
	.idea {
		padding-top: 20%;
	}
	
	.wrappa {
		padding-bottom: 70%;
	}
	
	.intro p {
		padding-bottom: 10%;
	}
	
	.one, .two, .three {
		width: 100%;
		padding-bottom: 5%;
		text-align: center;
	}
	
	/***********
		Contact
	***********/
	.contact {
		padding: 5% 10% 5% 10%;
	}
}