* { margin: 0px; padding: 0px; }
body { font-family: 'Muli', sans-serif; line-height: 150%; font-size: 14px; color: #FFFFFF; }
h2 { font-family: 'Raleway', sans-serif; line-height: 130%; font-weight: bolder; font-size: 28px; text-transform: uppercase; margin-bottom: 15px; }
p { font-weight: regular; font-size: 15px; }
a { text-decoration: none; color: inherit; }
section a:hover { text-decoration: underline; }
section { position: relative; }
.texto, .imagem { float: right; box-sizing: border-box; }
.texto { width: 30%; position: absolute; top: 50%; margin-top: -150px; padding: 30px 35px; left: 0px; background: #5050B2; }

.texto:before, .texto:after {position: absolute; content: ''; left: 35px; display: block; width: 10px; height: 10px; border-radius: 10px; border: 2px solid #FFFFFF; background: #5050B2; }
section.roxo { background: #5050B2; }
section.ciano { background: #43AEC0; }
section.salmao { background: #D34440; }
section.mostarda { background: #DD9028; }
section.turquesa { background: #22B77F; }
section.laranja { background: #E85F33; }
section.rosa { background: #BC3472; }
section.celeste { background: #59AABD; }
section.verde-bandeira { background: #1D9B52; }
section.cinza-escuro { background: #272822; }
section:before { content:''; position: absolute; top: 0px; left: 40px; bottom: 0px; width: 2px; background: #ffffff; }

section.roxo .texto { background: #5050B2; }
section.ciano .texto { background: #43AEC0; }
section.salmao .texto { background: #D34440; }
section.mostarda .texto { background: #DD9028; }
section.turquesa .texto { background: #22B77F; }
section.laranja .texto { background: #E85F33; }
section.rosa .texto { background: #BC3472; }
section.celeste .texto { background: #59AABD; }
section.verde-bandeira .texto { background: #1D9B52; }
section.cinza-escuro .texto { background: #272822; }

section.roxo .texto:before,section.roxo .texto:after { background: #5050B2; }
section.ciano .texto:before,section.ciano .texto:after { background: #43AEC0; }
section.salmao .texto:before,section.salmao .texto:after { background: #D34440; }
section.mostarda .texto:before,section.mostarda .texto:after { background: #DD9028; }
section.turquesa .texto:before,section.turquesa .texto:after { background: #22B77F; }
section.laranja .texto:before,section.laranja .texto:after { background: #E85F33; }
section.rosa .texto:before,section.rosa .texto:after { background: #BC3472; }
section.celeste .texto:before,section.celeste .texto:after { background: #59AABD; }
section.verde-bandeira .texto:before,section.verde-bandeira .texto:after { background: #1D9B52; }
section.cinza-escuro .texto:before,section.cinza-escuro .texto:after { background: #272822; }

section.home { background: #FFFFFF; }
section.home:before { display: none; }
section.home .mensagem { height: 411px; position: absolute; width: 100%; top: 50%; margin-top: -255px; }
section.home h1 { font-size: 45px; font-family: 'Raleway', sans-serif; color: #333333; text-align: center; line-height: 150%; letter-spacing: 2px; }
section.home h1 strong{ display: block; font-size: 100px; color: #3195E0; width: 300px; margin: 0 auto; line-height: 150%; position: relative; }
section.home h1 strong:before { top:0px; }
section.home h1 strong:after { bottom: 0px; }
section.home p {color: #000000; text-align: center; font-size: 16px; margin: 30px auto 0px; width: 850px; line-height: 1.5; }
section.home a img{ width: 100px; position: absolute; right: 30px; bottom: 35px}
section.home .seta { height: 80px; position: absolute; bottom: 0px; left: 150px; right: 150px; background: url(img/seta.png) center 10px no-repeat; transition: 0.6s; cursor: pointer; }
section.home .seta:hover { background-color: rgba(15,15,15,0.1); }
section.home.last .mensagem{ height: 120px; margin-top: -100px; }
section.home.last .mensagem h1{ width: 900px; margin: 0px auto; }

.texto:before { top: -10px; }
.texto:after { bottom: -10px; }

.imagem { width: 70%; height: 100%; border: 30px solid transparent; border-width: 30px 0px; overflow: hidden; }
.imagem img { width: 100%; }
.imagem>div { display: table; height: 100%; }
.imagem>div>div { display: table-cell; vertical-align: middle; }

@media (max-width: 900px) {
	section.home.last .mensagem h1{ width: 100%; }
}
@media (max-width: 750px) {
	section:before { content:''; position: absolute; top: 0px; left: 40px; bottom: 0px; width: 2px; background: #ffffff; }
	h2 { font-size: 16px; margin-bottom: 10px; line-height: 130%; }
	p { font-size: 11px; line-height: 150%; }
	.texto { width: 50%; top: 30px; margin-top: 0px; padding: 20px 20px; }
	.imagem { width: 50%; }

	section.home h1 { font-size: 28px; }
	section.home h1 strong{ display: inline-block; font-size: 70px; line-height: 130%; }

	section.home { display: table; }
	section.home .mensagem { display: table-cell; position: static; margin-top: 0px; width: 100%; padding: 30px 10%; box-sizing: border-box; height: auto; }
	section.home h1 { font-size: 24px; line-height: 80%; margin-bottom: 10px; }
	section.home h1 strong { margin-top: 0px; }
	section.home .mensagem p { width: 100%; font-size: 11px; margin-top: 0px; }
	section.home .seta { height: 50px; }
	section.home a { right: 10px; bottom: 10px; }
	section.home a img { width: 50px; }
	section.home h1 strong:before, section.home h1 strong:after { display: none; }
}

@media (max-width: 300px) {
	section.home { display: block; }
	section.home .mensagem { display: block; }
	section.home .mensagem h1 strong{ width: 100%; }
}

@media (orientation: portrait) {
	.texto { width: 100%; top: 50%; margin-top: 20px; }
	.imagem { width: 100%; height: 50%; border-width: 0px; }
	.imagem img{ width: 100%; }
	.imagem>div>div { display: block; vertical-align: top; }

	section.home .mensagem { vertical-align: middle; }
	section.home .mensagem h1 { line-height: 100%; }
	section.home .mensagem p { margin-top: 10px; }
	section.home .seta { height: 70px; }
}