* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	font-size: 16px;
	outline: none;
}

img{
	width: 100%;
	height: auto;
}

.wrapper{
	
	padding: 20px;
}

h1{
	font-family: 'roboto slab';
	font-size: 24px;
	margin-bottom: 30px;
}


.linha-apoio{
	font-family: 'merriweather sans';
}

.divisor-line{
	background-color: #000;
	width: 100%;
}

.top{
	height: 4px;
}

.bot{
	margin-top: 20px;
	height: 2px;
}

.board{
	position: relative;
}

.btn{
	border-radius: 100%;
	display: block;
	position: absolute;
	width: 35px;
	height: 35px;
	background-color: #000;
	color: #fff;
	font-family: 'roboto slab';
	cursor: pointer;
}

.btn[index="1"]{
	top: 21.5%;
	left: 34%;
}

.btn[index="2"]{
	top: 24%;
	left: 44%;
}

.btn[index="3"]{
	top: 48%;
	left: 38%;
}

.btn[index="4"]{
	top: 21.5%;
	left: 66%;
}

.btn[index="5"]{
	top: 40%;
	left: 85%;
}

.btn[index="6"]{
	top: 48%;
	left: 50%;
}

@media all and (max-width: 699px){
	
	*{
		font-size: 14px;
	}
	
	.btn{
		width: 25px;
		height: 25px;
	}
	
	.btn[index="1"]{
		top: 21.5%;
		left: 34%;
	}

	.btn[index="2"]{
		top: 24%;
		left: 44%;
	}

	.btn[index="3"]{
		top: 48%;
		left: 38%;
	}

	.btn[index="4"]{
		top: 21.5%;
		left: 66%;
	}

	.btn[index="5"]{
		top: 40%;
		left: 85%;
	}

	.btn[index="6"]{
		top: 48%;
		left: 50%;
	}

}

.information{
	background-color: #fff;
	
	position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	
	padding: 10px;
	border-radius: 5px;
	
	width: 90%;
	
	display: none;
}

@media all and (min-width:690px){
	
	.information{
		top: 70%;
	}
	
}

.information{
	font-family: 'merriweather sans';
}

.close {
    color: #aaa;
    float: right;
    font-size: 16px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}