@font-face
{
	font-family: 'Socialico';
	src:	url('font/Socialico-Regular.eot');
	src:	url('font/Socialico-Regular.eot?#iefix') format('embedded-opentype'),
			url('font/Socialico-Regular.woff2') format('woff2'),
			url('font/Socialico-Regular.woff') format('woff'),
			url('font/Socialico-Regular.ttf') format('truetype');
}		
@font-face
{
	font-family: 'SocialicoPlus';
	src:	url('font/SocialicoPlus-Plus.eot');
	src:	url('font/SocialicoPlus-Plus.eot?#iefix') format('embedded-opentype'),
			url('font/SocialicoPlus-Plus.woff2') format('woff2'),
			url('font/SocialicoPlus-Plus.woff') format('woff'),
			url('font/SocialicoPlus-Plus.ttf') format('truetype');
}
@font-face
{
	font-family: 'Cloude';
	src:	url('font/Cloude.otf') format('opentype'),
			url('font/Cloude_Regular_1.02.ttf') format('truetype');
}
@font-face
{
	font-family: 'CloudeBold';
	src:	url('font/Cloude_Regular_Bold_1.02.otf') format('opentype'),
			url('font/Cloude_Regular_Bold_1.02.ttf') format('truetype');
}
@font-face
{
	font-family: 'HachicroPro';
	src:	url('font/HachicroPro.ttf') format('truetype');
}
@font-face
{
	font-family: 'Upheaval';
	src:	url('font/upheavtt.ttf') format('truetype');
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
    margin			: 0;
    padding			: 0;
    border			: 0;
    font-size		: 100%;
    font			: inherit;
    vertical-align	: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
    display			: block;
}
body
{
    line-height		: 1;
}
ol, ul
{
    list-style		: none;
}
blockquote, q
{
    quotes			: none;
}
blockquote:before, blockquote:after, q:before, q:after
{
    content			: '';
    content			: none;
}
table
{
    border-collapse	: collapse;
    border-spacing	: 0;
}

body
{
	background		: rgb(0,0,0);
	background		: linear-gradient(140deg, rgba(0,0,0,1) 0%, rgba(65,65,65,1) 6%, rgba(0,0,0,1) 22%, rgba(117,117,117,1) 65%, rgba(210,210,210,1) 88%, rgba(117,117,117,1) 95%, rgba(0,0,0,1) 100%);
}
#bg
{

}
header
{
	display			: inline-block;
	color			: white;
	width			: 100%;
	height			: 300px;
	min-height		: 300px;
	font-family		: 'Cloude';
	font-size		: 50pt;
	text-align		: center;
	vertical-align	: top;
	margin-top		: 10px;
	margin-bottom	: 5px;
	overflow		: hidden;
}

header *
{
	display			: inline-block;
}

header p
{
	width			: 70%;
	min-width		: 70%;
	line-height		: 40%;
	float			: right;
	margin-top		: 50px;
	margin-right	: 5%;
}

header p.titulo-head
{
	font-family		: 'Upheaval';
	font-size		: xx-large;
	line-height		: 70%;
}

header .foto
{
	width			: 290px;
	min-width		: 290px;
	height			: 290px;
	min-height		: 290px;
	position		: relative;
	overflow		: hidden;
	border-radius	: 50%;
}

header img
{
	margin			: 0 auto;
	height			: 100%;
	width			: auto;
}



#links-container
{
	display			: flex;
	flex-direction	: column;
	align-items		: center;
	width			: 50%;
	margin			: 0 auto;
}

.link-button
{
	display			: inline-table;
	width			: 100%;
	min-width		: 650px;
	height			: 80px;
	min-height		: 80px;
	border-radius	: 15px;
	margin-bottom	: 10px;
	cursor			: default;
	padding			: 7px;
	box-sizing		: border-box;
	background		: rgb(225,208,255);
	background		: linear-gradient(180deg, 
									  rgba(225,208,255,1) 0%, 
									  rgba(162,0,255,1) 9%, 
									  rgba(221,134,255,1) 15%, 
									  rgba(194,49,255,1) 21%, 
									  rgba(196,67,255,1) 26%, 
									  rgba(214,130,255,1) 90%, 
									  rgba(188,0,255,1) 94%, 
									  rgba(106,0,177,1) 100%);
}

.link-button:hover
{
	cursor			: pointer;
	background		: rgb(255,252,208);
	background		: linear-gradient(180deg, 
									  rgba(255,252,208,1) 0%, 
									  rgba(255,218,0,1) 9%, 
									  rgba(254,255,134,1) 15%, 
									  rgba(255,197,49,1) 21%, 
									  rgba(255,212,67,1) 26%, 
									  rgba(255,254,130,1) 90%, 
									  rgba(255,248,0,1) 94%, 
									  rgba(255,166,0,1) 100%);
}

.link-button:hover .icone,
.link-button:hover .titulo,
.link-button:hover .descricao
{
	background		: rgb(225,208,255);
	background		: linear-gradient(180deg, 
									  rgba(225,208,255,1) 0%, 
									  rgba(162,0,255,1) 9%, 
									  rgba(221,134,255,1) 15%, 
									  rgba(194,49,255,1) 21%, 
									  rgba(196,67,255,1) 26%, 
									  rgba(214,130,255,1) 90%, 
									  rgba(188,0,255,1) 94%, 
									  rgba(106,0,177,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.titulo, .descricao
{
	display			: inline-block;
	float			: right;
	width			: 83%;
	min-width		: 83%;
	height			: 50%;
	min-height		: 50%;
	line-height		: 70%;
}

.titulo
{
	font-family		: 'Upheaval';
	font-size		: xx-large;
	text-align		: center;
	vertical-align	: top;
	margin-top		: 10px;
	margin-bottom	: 5px;
	background		: rgb(255,252,208);
	background		: linear-gradient(180deg, 
									  rgba(255,252,208,1) 0%, 
									  rgba(255,218,0,1) 9%, 
									  rgba(254,255,134,1) 15%, 
									  rgba(255,197,49,1) 21%, 
									  rgba(255,212,67,1) 26%, 
									  rgba(255,254,130,1) 90%, 
									  rgba(255,248,0,1) 94%, 
									  rgba(255,166,0,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.descricao
{
	font-family		: 'Cloude';
	font-size		: 35pt;
	text-align		: center;
	vertical-align	: bottom;
	margin-top		: 5px;
	margin-bottom	: 10px;
	background		: rgb(255,252,208);
	background		: linear-gradient(180deg, 
									  rgba(255,252,208,1) 0%, 
									  rgba(255,218,0,1) 9%, 
									  rgba(254,255,134,1) 15%, 
									  rgba(255,197,49,1) 21%, 
									  rgba(255,212,67,1) 26%, 
									  rgba(255,254,130,1) 90%, 
									  rgba(255,248,0,1) 94%, 
									  rgba(255,166,0,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.icone
{
	font-size		: 80px;
	width			: 15%;
	min-width		: 64px;
	margin-right	: 10px;
	text-align		: center;
	vertical-align	: middle;
	background		: rgb(255,252,208);
	background		: linear-gradient(180deg, 
									  rgba(255,252,208,1) 0%, 
									  rgba(255,218,0,1) 9%, 
									  rgba(254,255,134,1) 15%, 
									  rgba(255,197,49,1) 21%, 
									  rgba(255,212,67,1) 26%, 
									  rgba(255,254,130,1) 90%, 
									  rgba(255,248,0,1) 94%, 
									  rgba(255,166,0,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ------------------  */
/*   RESPONSIVIDADE    */
/* ------------------  */
@media (min-width: 801px)
{
	header
	{
		width			: 100%;
		height			: 300px;
		min-height		: 300px;
		font-size		: 14pt;
		text-align		: center;
		vertical-align	: top;
		margin-top		: 5px;
		margin-bottom	: 1px;
	}

	header p
	{
		width			: 60%;
		min-width		: 60%;
		font-size		: 45pt;
		line-height		: 25pt;
		margin-top		: 35px;
		margin-right	: 10px;
	}

	header p.titulo-head
	{
		font-size		: 30pt;
		line-height		: 22pt;
	}

	header .foto
	{
		width			: 290px;
		min-width		: 290px;
		height			: 290px;
		min-height		: 290px;
	}

	#links-container
	{
		width			: 800px;
		min-width		: 800px;
		margin			: 0 auto;
	}

	.link-button
	{
		width			: 800px;
		min-width		: 800px;
		max-width		: 800px;
		height			: 150px;
		min-height		: 150px;
		max-height		: 150px;
		border-radius	: 20px;
		margin-bottom	: 10px;
		padding			: 7px;
	}

	.titulo, .descricao
	{
		width			: 630px;
		min-width		: 630px;
	}

	.titulo
	{
		font-size		: 25pt;
		line-height		: 20pt;
		height			: 30px;
		padding-top		: 15px;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.descricao
	{
		font-size		: 50pt;
		height			: 50px;
		line-height		: 30px;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.icone
	{
		font-size		: 100px;
		width			: 150px;
		max-width		: 150px;
		margin-right	: 5px;
		margin-top		: 15px;
	}
}

@media (min-width: 651px) and (max-width: 800px)
{
	header
	{
		width			: 100%;
		height			: 200px;
		min-height		: 200px;
		font-size		: 14pt;
		text-align		: center;
		vertical-align	: top;
		margin-top		: 5px;
		margin-bottom	: 1px;
	}

	header p
	{
		width			: 70%;
		min-width		: 70%;
		font-size		: 35pt;
		line-height		: 20pt;
		margin-top		: 25px;
		margin-right	: 10px;
	}

	header p.titulo-head
	{
		font-size		: 22pt;
		line-height		: 18pt;
	}

	header .foto
	{
		width			: 190px;
		min-width		: 190px;
		height			: 190px;
		min-height		: 190px;
	}

	#links-container
	{
		width			: 95%;
		min-width		: 590px;
		margin			: 0 auto;
	}

	.link-button
	{
		width			: 95%;
		min-width		: 95%;
		height			: 65px;
		min-height		: 65px;
		border-radius	: 20px;
		margin-bottom	: 10px;
		padding			: 7px;
	}

	.titulo, .descricao
	{
		width			: 80%;
		min-width		: 80%;
		height			: 60%;
		min-height		: 60%;
		line-height		: 25px;
		padding-top		: 12px
	}

	.titulo
	{
		font-size		: 25pt;
		line-height		: 25pt;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.descricao
	{
		font-size		: 50pt;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.icone
	{
		font-size		: 13vw;
		width			: 15vw;
		min-width		: 15vw;
		margin-right	: 5px;
		margin-top		: 5px;
	}
}

@media (min-width: 591px) and (max-width: 650px)
{
	header
	{
		width			: 100%;
		height			: 200px;
		min-height		: 200px;
		font-size		: 14pt;
		text-align		: center;
		vertical-align	: top;
		margin-top		: 5px;
		margin-bottom	: 1px;
	}

	header p
	{
		width			: 60%;
		min-width		: 60%;
		font-size		: 35pt;
		line-height		: 15pt;
		margin-top		: 15px;
		margin-right	: 5px;
	}

	header p.titulo-head
	{
		font-size		: 22pt;
		line-height		: 18pt;
	}

	header .foto
	{
		width			: 190px;
		min-width		: 190px;
		height			: 190px;
		min-height		: 190px;
	}

	#links-container
	{
		width			: 95%;
		min-width		: 590px;
		margin			: 0 auto;
	}

	.link-button
	{
		width			: 95%;
		min-width		: 95%;
		height			: 65px;
		min-height		: 65px;
		border-radius	: 10px;
		margin-bottom	: 10px;
		padding			: 7px;
	}

	.titulo, .descricao
	{
		width			: 80%;
		min-width		: 80%;
		height			: 60%;
		min-height		: 60%;
		line-height		: 20px;
		padding-top		: 8px
	}

	.titulo
	{
		font-size		: 20pt;
		line-height		: 20pt;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.descricao
	{
		font-size		: 40pt;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.icone
	{
		font-size		: 13vw;
		width			: 15vw;
		min-width		: 15vw;
		margin-right	: 5px;
		margin-top		: 5px;
	}
}

@media (min-width: 415px) and (max-width: 590px)
{
	header
	{
		width			: 100%;
		height			: 130px;
		min-height		: 130px;
		font-size		: 14pt;
		text-align		: center;
		vertical-align	: top;
		margin-top		: 5px;
		margin-bottom	: 1px;
	}

	header p
	{
		width			: 65%;
		min-width		: 65%;
		font-size		: 25pt;
		line-height		: 15pt;
		margin-top		: 5px;
		margin-right	: 5px;
	}

	header p.titulo-head
	{
		font-size		: 15pt;
		line-height		: 12pt;
	}

	header .foto
	{
		width			: 120px;
		min-width		: 120px;
		height			: 120px;
		min-height		: 120px;
	}

	#links-container
	{
		width			: 95%;
		min-width		: 415px;
		margin			: 0 auto;
	}

	.link-button
	{
		width			: 100%;
		min-width		: 100%;
		height			: 65px;
		min-height		: 65px;
		border-radius	: 5px;
		margin-bottom	: 10px;
		padding			: 7px;
	}

	.titulo, .descricao
	{
		width			: 80%;
		min-width		: 80%;
		height			: 50%;
		min-height		: 50%;
		line-height		: 15px;
		padding-top		: 5px
	}

	.titulo
	{
		font-size		: 15pt;
		line-height		: 15pt;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.descricao
	{
		font-size		: 30pt;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.icone
	{
		font-size		: 13vw;
		width			: 15vw;
		min-width		: 15vw;
		margin-right	: 5px;
		margin-top		: 5px;
	}
}

@media (min-width: 391px) and (max-width: 414px)
{
	header
	{
		width			: 100%;
		height			: 100px;
		min-height		: 100px;
		font-size		: 14pt;
		text-align		: center;
		vertical-align	: top;
		margin-top		: 5px;
		margin-bottom	: 1px;
	}

	header p
	{
		width			: 75%;
		min-width		: 75%;
		font-size		: 25pt;
		line-height		: 10pt;
		margin-top		: 5px;
		margin-right	: 5px;
	}

	header p.titulo-head
	{
		font-size		: 10pt;
		line-height		: 12pt;
	}

	header .foto
	{
		width			: 90px;
		min-width		: 90px;
		height			: 90px;
		min-height		: 90px;
	}

	#links-container
	{
		width			: 95%;
		min-width		: 391px;
		margin			: 0 auto;
	}

	.link-button
	{
		width			: 100%;
		min-width		: 100%;
		height			: 65px;
		min-height		: 65px;
		border-radius	: 5px;
		margin-bottom	: 10px;
		padding			: 7px;
	}

	.titulo, .descricao
	{
		width			: 80%;
		min-width		: 80%;
		height			: 50%;
		min-height		: 50%;
		line-height		: 15px;
		padding-top		: 5px
	}

	.titulo
	{
		font-size		: 15pt;
		line-height		: 15pt;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.descricao
	{
		font-size		: 30pt;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.icone
	{
		font-size		: 13vw;
		width			: 15vw;
		min-width		: 15vw;
		margin-right	: 5px;
		margin-top		: 5px;
	}
}

@media (min-width: 376px) and (max-width: 390px)
{
	header
	{
		width			: 100%;
		height			: 100px;
		min-height		: 100px;
		font-size		: 10pt;
		text-align		: center;
		vertical-align	: top;
		margin-top		: 5px;
		margin-bottom	: 1px;
	}

	header p
	{
		width			: 70%;
		min-width		: 70%;
		font-size		: 20pt;
		line-height		: 10pt;
		margin-top		: 5px;
		margin-right	: 5px;
	}

	header p.titulo-head
	{
		font-size		: 10pt;
		line-height		: 12pt;
	}

	header .foto
	{
		width			: 90px;
		min-width		: 90px;
		height			: 90px;
		min-height		: 90px;
	}

	#links-container
	{
		width			: 95%;
		min-width		: 375px;
		margin			: 0 auto;
	}

	.link-button
	{
		width			: 100%;
		min-width		: 100%;
		height			: 60px;
		min-height		: 60px;
		border-radius	: 5px;
		margin-bottom	: 10px;
		padding			: 7px;
	}

	.titulo, .descricao
	{
		width			: 80%;
		min-width		: 80%;
		height			: 50%;
		min-height		: 50%;
		line-height		: 15px;
		padding-top		: 5px
	}

	.titulo
	{
		font-size		: 13pt;
		line-height		: 13pt;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.descricao
	{
		font-size		: 28pt;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.icone
	{
		font-size		: 13vw;
		width			: 15vw;
		min-width		: 15vw;
		margin-right	: 5px;
		margin-top		: 5px;
	}
}

@media (min-width: 281px) and (max-width: 375px)
{
	header
	{
		width			: 100%;
		height			: 100px;
		min-height		: 100px;
		font-size		: 10pt;
		text-align		: center;
		vertical-align	: top;
		margin-top		: 5px;
		margin-bottom	: 1px;
	}

	header p
	{
		width			: 65%;
		min-width		: 65%;
		font-size		: 20pt;
		line-height		: 10pt;
		margin-top		: 5px;
		margin-right	: 5px;
	}

	header p.titulo-head
	{
		font-size		: 10pt;
		line-height		: 12pt;
	}

	header .foto
	{
		width			: 90px;
		min-width		: 90px;
		height			: 90px;
		min-height		: 90px;
	}

	#links-container
	{
		width			: 95%;
		min-width		: 280px;
		margin			: 0 auto;
	}

	.link-button
	{
		width			: 100%;
		min-width		: 100%;
		height			: 60px;
		min-height		: 60px;
		border-radius	: 5px;
		margin-bottom	: 10px;
		padding			: 7px;
	}

	.titulo, .descricao
	{
		width			: 80%;
		min-width		: 80%;
		height			: 50%;
		min-height		: 50%;
		line-height		: 12px;
		padding-top		: 5px
	}

	.titulo
	{
		font-size		: 11pt;
		line-height		: 11pt;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.descricao
	{
		font-size		: 28pt;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.icone
	{
		font-size		: 13vw;
		width			: 15vw;
		min-width		: 15vw;
		margin-right	: 5px;
		margin-top		: 5px;
	}
}

@media (max-width: 280px)
{
	header
	{
		width			: 100%;
		height			: 100px;
		min-height		: 100px;
		font-size		: 10pt;
		text-align		: center;
		vertical-align	: top;
		margin-top		: 5px;
		margin-bottom	: 1px;
	}

	header p
	{
		width			: 60%;
		min-width		: 60%;
		font-size		: 15pt;
		line-height		: 10pt;
		margin-top		: 5px;
		margin-right	: 5px;
	}

	header p.titulo-head
	{
		font-size		: 8pt;
		line-height		: 10pt;
	}

	header .foto
	{
		width			: 90px;
		min-width		: 90px;
		height			: 90px;
		min-height		: 90px;
	}

	#links-container
	{
		width			: 100%;
		min-width		: 280px;
		margin			: 0 auto;
	}

	.link-button
	{
		width			: 100%;
		min-width		: 100%;
		height			: 60px;
		min-height		: 60px;
		border-radius	: 5px;
		margin-bottom	: 10px;
		padding			: 7px;
	}

	.titulo, .descricao
	{
		width			: 71%;
		min-width		: 71%;
		height			: 50%;
		min-height		: 50%;
		line-height		: 12px;
		padding-top		: 5px
	}

	.titulo
	{
		font-size		: 10pt;
		line-height		: 10pt;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.descricao
	{
		font-size		: 25pt;
		margin-top		: 0;
		margin-bottom	: 0;
	}

	.icone
	{
		font-size		: 48px;
		width			: 48px;
		min-width		: 48px;
		margin-right	: 5px;
		margin-top		: 5px;
	}
}