/* CSS Document */
/**** CSS Reset ****/

h1, h2, h3, h4, h5, p, a, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-decoration: none;
	font-weight: normal;
}

img {
	display: block;
}

/*** font rules

	font-family: 'Calistoga', serif;
	font-family: 'Nunito', sans-serif;
	font-family: 'Pacifico', cursive;

***/

/*** END CSS Reset ***/

body {
	background-color: rgba(234,238,242,1.00);
}

#page {
	padding: 25px;
	font-family: 'Nunito', sans-serif;
	background-color: rgba(234,238,242,1.00);
	color: rgba(39,39,39,1.00);
}

/**** header styles ****/

header {
	width: 440px;
	margin: 0 auto 150px auto;
}

#header1, #header3 {
	font-family: 'Pacifico', serif;
	color: #7684AD;
}

#header1 {
	margin-bottom: 5px;
}

#header2 {
	font-family: 'Calistoga', serif;
	color: rgba(49,60,132,1.00);
	text-transform: uppercase;
	font-size: 40px;
}

#header3 {
	text-align: right;
}

/****** first article ******/

article {
	margin-bottom: 150px;
}

article h2 {
	padding-bottom: 5px;
	font-family: 'Calistoga', serif;
	color: rgba(49,60,132,1.00);
	font-size: 30px;
}

article h3 {
	padding-top: 20px;
	font-family: 'Pacifico', serif;
	color: #7684AD;
	font-size: 24px;
}


/****** call to action ******/

#cta1 {
	text-align: center;
	font-size: 20px;
	padding-bottom: 150px;
}

#cta1 h3 {
	font-family: 'Calistoga', serif;
	color: rgba(49,60,132,1.00);
	font-size: 35px;
	padding-bottom: 10px;
}

#cta2 {
	text-align: center;
	font-size: 20px;
	padding-bottom: 150px;
	padding-top: 100px;
}

#cta2 h3 {
	font-family: 'Calistoga', serif;
	color: rgba(49,60,132,1.00);
	font-size: 35px;
	padding-bottom: 10px;
}

#cta2 h4 {
	padding-top: 30px;
	font-family: 'Pacifico', serif;
	color: #7684AD;
	font-size: 24px;
}

.ctaBox {
	display: flex;
	justify-content: space-evenly;
}

.button {
	border-radius: 50px;
	background-color: rgba(255,255,255,1.00);
	width: 150px;
	height: 50px;
	display: flex;
	-webkit-box-shadow: 0px 2px rgba(75,75,75,0.5);
	box-shadow: 0px 2px rgba(75,75,75,0.5);
}

.button:hover {
	box-shadow: none;
}

.button p {
	margin: auto;
	color: rgba(39,39,39,1.00); 
}

/****** speaker styles *******/

.speaker {
	text-align: justify;
	padding-bottom: 25px;
}

.name {
	color: rgba(49,60,132,1.00);
	text-transform: uppercase;
	font-weight: bold;
}

#mainSpeakers h2, #guestSpeakers h2 {
	font-family: 'Calistoga', serif;
	color: rgba(49,60,132,1.00);
	text-align: center;
	font-size: 30px;
}

#mainSpeakers img, #guestSpeakers img {
	width: 200px;
	padding-top: 20px;
	padding-bottom: 20px;
	border-radius: 50%;
	margin: 0 auto 0 auto;
}

#guestSpeakers {
	padding-top: 25px;
}

/****** dates styles ******/

#events {
	padding-top: 125px;
}

#events h4 {
	color: rgba(49,60,132,1.00);
	font-size: 35px;
	font-family: 'Calistoga', serif;
	padding-bottom: 15px;
}

.date {
	padding-bottom: 20px;
}

.date h5 {
	color: #7684AD;
	font-size: 25px;
	font-family: 'Calistoga', serif;
}

.date p {
	font-size: 20px;
}

/******** footer styles *********/

#footer2 {
	font-family: 'Calistoga', serif;
	color: rgba(49,60,132,1.00);
	text-transform: uppercase;
	font-size: 30px;
	text-align: center;
}

#footer1 {
	font-family: 'Pacifico', serif;
	color: #7684AD;
	padding-left: 75px;
}

footer ul {
	display: flex;
	justify-content: center;
}

@media only screen and (min-width: 680px) {
	
	body {
		width: 600px;
		margin: 0 auto 0 auto;
	}
	
	#mainSpeakers h2, #guestSpeakers h2 {
		padding-bottom: 20px;
		text-align: left;
	}
	
	.speaker {
		display: flex;
	}
	
	.speaker p {
		padding-left: 20px;
		margin: auto 0 auto 0;
	}
	
	#footer1 {
		font-family: 'Pacifico', serif;
		color: #7684AD;
		padding-left: 135px;
	}
}

@media only screen and (min-width: 960px) {
	
	body {
		background-attachment: fixed;
		background-image: url("images/background.jpg"); /* image ai-generated from Adobe Firefly */	
	}
	
	#page {
		background-color: #EAEEF2;
	}
}
