/* colors: http://paletton.com/#uid=73v1g0kslJgb1SOkGM9HZz3JJmT */

/* tags */
body {
	background-color: #2289cc;
	width: 100%;
}
main section {
	margin: 1em auto;
	width: 1200px;
}
h1 {
	padding: 1rem;
}
section h2 {
	font-family: 'Cabin Sketch', cursive;
	font-size: 3em;
	margin-bottom: 0.5em;
}
a {
	color: #FFFFFF;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 768px) {
	.container {
	    width: 750px;
	}
}

@media (min-width: 992px) {
	.container {
	    width: 970px;
	}
}


@media (min-width: 1200px) {
	.container {
	    width: 1170px;
	}
}


.program .header {
		background-image:  url("../images/bg-marolinhas.png");
		-webkit-background-size: auto;
		   -moz-background-size: auto;
			   -o-background-size: auto;
				    background-size: auto;

}

/* personas */
.chairs {
	background-color: #066BAC;
	border: 1px solid #044875;
}
.trackLeads {
	background-color: #00BE4D;
	border: 1px solid #008335;
}
.committee {
	background-color: #FF8E00;
	border: 1px solid #B66600;
}
.reviewers {
	background-color: #FF3100;
	border: 1px solid #B62300;
}

/* sections */
#introduction, #conclusion {
	color: #044875;
}
#introduction h1, #conclusion h1 {
	display: inline-block;
	font-family: 'Cabin Sketch', cursive;
}
#introduction .title, #conclusion .title {
	text-align: left;
	font-size: 4.5em;
}
#introduction .conference {
	font-size: 4em;
	text-align: right;
	width: 3em;
}
#introduction .conference a {
	color: #F5FE1D;
	text-decoration: none;
}
#introduction p, #conclusion p {
	background-color: #53A2D4;
	border-radius: 2em;
	font-size: 2em;
	padding: 1em;
}

#whoAreWe h2 {
	color: rgba(255, 255, 255, 0.9);
}

#personas {
	text-align: center;
}
#personas li {
	color: rgba(255, 255, 255, 0.8);
	display: inline-block;
	margin: 4em 0;
	padding: 1em;
	width: 20%;
}
#personas li::before {
	border-radius: 50%;
	display: inline-block;
	font-size: 5em;
	font-weight: bold;
	line-height: 115px;
	height: 120px;
	width: 120px;
	transform: translateY(-60%);
}
#personas .chairs::before {
	background-color: #066BAC;
	border: 18px solid #044875;
	color: #044875;
	content: "3";
}
#personas .trackLeads::before {
	background-color: #00BE4D;
	border: 18px solid #008335;
	color: #008335;
	content: "12";
}
#personas .committee::before {
	background-color: #FF8E00;
	border: 18px solid #B66600;
	color: #B66600;
	content: "20";
}
#personas .reviewers::before {
	background-color: #FF3100;
	border: 18px solid #B62300;
	color: #B62300;
	content: "42";
}
#personas li h3 {
	font-size: 1.25em;
	margin: -4em 0 1em;
}

#timelineEvents {
	color: rgba(255, 255, 255, 0.9);
	display: block;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, 0) 14%,
		#044875 14%,
		#044875 16%,
		rgba(0, 0, 0, 0) 16%,
		rgba(0, 0, 0, 0) 37%,
		#008335 37%,
		#008335 39%,
		rgba(0, 0, 0, 0) 39%,
		rgba(0, 0, 0, 0) 61%,
		#B66600 61%,
		#B66600 63%,
		rgba(0, 0, 0, 0) 63%,
		rgba(0, 0, 0, 0) 84%,
		#B62300 84%,
		#B62300 86%,
		rgba(0, 0, 0, 0) 86%,
		rgba(0, 0, 0, 0)
	);
	margin-top: -4em;
	padding-top: 4em;
}
#timelineEvents h2 {
	background-color: rgba(156,202,231, 0.3);
	border-radius: 1em;
	margin-top: 0.5em;
	padding: 0.5em;
}
#timelineEvents ul {
	padding: 0 3em;
}
#timelineEvents li {
	display: block;
	margin-top: 1em;
	width: 24.5%;
}
#timelineEvents h3 {
	color: #FFF;
	cursor: pointer;
	font-family: 'Cabin Sketch', cursive;
	font-size: 1.8em;
	padding: 0.5em;
	text-align: center;
}
#timelineEvents p {
	display: none;
}
#timelineEvents .isActive p {
	display: block;
	padding: 1em;
	line-height: 1.4em;
}
#timelineEvents .chairs h3 {
	background-color: #044875;
}
#timelineEvents .trackLeads h3 {
	background-color: #008335;
}
#timelineEvents .committee h3 {
	background-color: #B66600;
}
#timelineEvents .reviewers h3 {
	background-color: #B62300;
}

li.chairs {
	margin-left: 0;
}
li.trackLeads {
	margin-left: 25%;
}
li.committee {
	margin-left: 50%;
}
li.reviewers {
	margin-left: 75%;
}

#reviewersTerm {
	display: none;
}


footer {
	background-color: #044875;
	box-sizing: border-box;
	color: #9CCAE7;
	margin-top: 3em;
	padding: 2em 6em 4em;
	min-width: 1200px;
	width: 100%;
}
footer h3 {
	display: inline-block;
	font-family: 'Cabin Sketch', cursive;
	font-size: 2.5em;
	width: 70%;
}
footer span {
	display: inline-block;
	font-size: 1.5em;
	text-align: right;
	width: 28%;
}