@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fontes/BebasNeue-webfont.eot');
    src: url('../fontes/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fontes/BebasNeue-webfont.woff') format('woff'),
         url('../fontes/BebasNeue-webfont.ttf') format('truetype'),
         url('../fontes/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'UbuntuRegular';
    src: url('../fontes/Ubuntu-R-webfont.eot');
    src: url('../fontes/Ubuntu-R-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fontes/Ubuntu-R-webfont.woff') format('woff'),
         url('../fontes/Ubuntu-R-webfont.ttf') format('truetype'),
         url('../fontes/Ubuntu-R-webfont.svg#UbuntuRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'UbuntuLight';
    src: url('../fontes/Ubuntu-L-webfont.eot');
    src: url('../fontes/Ubuntu-L-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fontes/Ubuntu-L-webfont.woff') format('woff'),
         url('../fontes/Ubuntu-L-webfont.ttf') format('truetype'),
         url('../fontes/Ubuntu-L-webfont.svg#UbuntuLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
    overflow-x: hidden;
	padding:0;
	margin: 0;
	background-color: #ffffff;
	font-family: 'UbuntuRegular', Arial, sans-serif;
	font-size: 12px;
	line-height: 16px; 
	font-weight: normal;
	font-style: normal;
	letter-spacing: 1px;
	color: #747474;
}

body > h1, nav > h1, section h1 { display: none; }

h1, h2, h3, nav {
	font-family: 'BebasNeueRegular', Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	letter-spacing: 1px;
}

h3 { font-size: 16px; }

a { text-decoration: none; }

li p { margin-left: 0px; margin-right: 0px; }

#fundo {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -10;
	overflow: hidden;
}

#fundo > div {
	position: relative;
	top: -984px;
	left: -1036px;
	width: 4000px;
	height: 3000px; 
	background: -webkit-linear-gradient(0deg,
       	rgba(0, 0, 0, 1) 0px,
       	rgba(0, 0, 0, 1) 6px,
       	rgba(0, 0, 0, 0) 6px,
       	rgba(0, 0, 0, 0) 100%),
	-webkit-linear-gradient(90deg,
       	rgba(0, 0, 0, 1) 0px,
       	rgba(0, 0, 0, 1) 6px,
       	rgba(0, 0, 0, 0) 6px,
       	rgba(0, 0, 0, 0) 100%),
       	rgba(34, 34, 34, 1);
	background: -moz-linear-gradient(0deg,
       	rgba(0, 0, 0, 1) 0px,
       	rgba(0, 0, 0, 1) 6px,
       	rgba(0, 0, 0, 0) 6px,
       	rgba(0, 0, 0, 0) 100%),
		-moz-linear-gradient(90deg,
       	rgba(0, 0, 0, 1) 0px,
       	rgba(0, 0, 0, 1) 6px,
       	rgba(0, 0, 0, 0) 6px,
       	rgba(0, 0, 0, 0) 100%),
       	rgba(34, 34, 34, 1);
	background: -o-linear-gradient(0deg,
       	rgba(0, 0, 0, 1) 0px,
       	rgba(0, 0, 0, 1) 6px,
       	rgba(0, 0, 0, 0) 6px,
       	rgba(0, 0, 0, 0) 100%),
	-o-linear-gradient(90deg,
       	rgba(0, 0, 0, 1) 0px,
       	rgba(0, 0, 0, 1) 6px,
       	rgba(0, 0, 0, 0) 6px,
       	rgba(0, 0, 0, 0) 100%),
       	rgba(34, 34, 34, 1);
	background: -ms-linear-gradient(0deg,
       	rgba(0, 0, 0, 1) 0px,
       	rgba(0, 0, 0, 1) 6px,
       	rgba(0, 0, 0, 0) 6px,
       	rgba(0, 0, 0, 0) 100%),
	-ms-linear-gradient(90deg,
       	rgba(0, 0, 0, 1) 0px,
       	rgba(0, 0, 0, 1) 6px,
       	rgba(0, 0, 0, 0) 6px,
       	rgba(0, 0, 0, 0) 100%),
       	rgba(34, 34, 34, 1);
	background-size: 153px 153px;
}

.roda {
	-webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	-o-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.container {
	position: relative;
	width: 100%;
	height: auto;
	margin: auto;
	margin-bottom: 0;
	padding-bottom: 0;
}

#riscas {
	position: absolute;
	z-index: -2;
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: -webkit-linear-gradient(-45deg,
       	rgba(0, 0, 0, 0) 0%,
       	rgba(0, 0, 0, 0) 25%,
       	rgba(255, 255, 255, 0.7) 25%,
       	rgba(255, 255, 255, 0.7) 50%,
       	rgba(0, 0, 0, 0) 50%,
       	rgba(0, 0, 0, 0) 75%,
       	rgba(255, 255, 255, 0.7) 75%,
       	rgba(255, 255, 255, 0.7) 100%);
	background: -moz-linear-gradient(-45deg,
       	rgba(0, 0, 0, 0) 0%,
       	rgba(0, 0, 0, 0) 25%,
       	rgba(255, 255, 255, 0.7) 25%,
       	rgba(255, 255, 255, 0.7) 50%,
       	rgba(0, 0, 0, 0) 50%,
       	rgba(0, 0, 0, 0) 75%,
       	rgba(255, 255, 255, 0.7) 75%,
       	rgba(255, 255, 255, 0.7) 100%);
	background: -o-linear-gradient(-45deg,
       	rgba(0, 0, 0, 0) 0%,
       	rgba(0, 0, 0, 0) 25%,
       	rgba(255, 255, 255, 0.7) 25%,
       	rgba(255, 255, 255, 0.7) 50%,
       	rgba(0, 0, 0, 0) 50%,
       	rgba(0, 0, 0, 0) 75%,
       	rgba(255, 255, 255, 0.7) 75%,
       	rgba(255, 255, 255, 0.7) 100%);
	background: -ms-linear-gradient(-45deg,
       	rgba(0, 0, 0, 0) 0%,
       	rgba(0, 0, 0, 0) 25%,
       	rgba(255, 255, 255, 0.7) 25%,
       	rgba(255, 255, 255, 0.7) 50%,
       	rgba(0, 0, 0, 0) 50%,
       	rgba(0, 0, 0, 0) 75%,
       	rgba(255, 255, 255, 0.7) 75%,
       	rgba(255, 255, 255, 0.7) 100%);
	background-size: 432px 432px;
}


/* NAV */

nav #c { background-color: #d3d3d3; }
nav #i { background-color: #d3d3d3; }
nav #a { background-color: #d3d3d3; }

#c:hover, #i:hover, #a:hover {
	background-color: #000;
	color: white;
}


/* CONCEITO */

.conceito {
	text-align: center;
	position: relative;
	z-index: 1;
	margin: auto;
	padding: 0;
}

/* para centrar o quadrado*/
.quadrado-conceito {
	position: absolute;
	width: 0%;
	left: 50%;
	z-index: -1;
}

.quadrado-conceito div {
	position: relative;
	left: -458px;
	width: 917px;
	height: 917px;
	background-color: #000;
}


.conceito h2 {
	margin-bottom: 40px;
	line-height: 84px; 
	color: #d3d3d3;
	letter-spacing: 3px;
}

.conceito p {
	font-family: 'UbuntuLight', Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	letter-spacing: 0.5px;
}


/* INSTALACAO */

.quad > * { display: none; } 
.quad.active > * { display: block; }

.quad.active h2 { display: none; }
.quad h2 {
	margin: 0;
	display: block;
	text-align: left;
	color: white;
	font-size: 18px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
 }

.quad {
	float: left;
	display: block;
	margin: 0;
	overflow: hidden;
	-webkit-transition: 2s;
	-moz-transition: 2s;
	-o-transition: 2s;
	transition: 2s;
	border: 6px solid rgba(255, 255, 255, 0.2);
}

.quad.active {
	position: relative;
	-webkit-transition: 2s;
	-moz-transition: 2s;
	-o-transition: 2s;
	transition: 2s;
	background: rgba(255, 255, 255, 1);
	text-align: left;
	letter-spacing: 1px;
}

.quad:not(.active):hover {
    background: rgba(80, 80, 80, 0.5);
	cursor: pointer;
}

.quad h3, .quad p, .quad ul {
	margin-left: 53px;
	margin-right: 53px;
}

.quad li {list-style-type: none; }

.quad h3 { margin-top: 53px; }

.quad .option img { width: 100%; }
.quad object {
	width: 100%;
	height: 364px;
}


.buttons * { opacity: 0.6; }
.buttons *:hover, .buttons > *.active { opacity: 1.0; }

.buttons *:hover { cursor: pointer; }

.option { display: none; }

.option.active { display: block; }

.option.active img:hover { cursor: pointer; }

.close-quad {
	width: 17px;
	height: 17px;
	top: 17px;
	right: 17px;
	position: absolute;
	z-index: 2;
	background: url('../imagens/but-fecho.png');
}

.clear { clear: both; }

#instalacao  { margin-bottom: 202px; }


/* MEDIA: top vs left nav */

/* MEDIA: left nav */
@media only screen and (min-width: 800px) {

nav {
	position: fixed;
	z-index: 2;
	left: -77px;
	top: 32px;
}

nav ul, nav li {
	padding: 0;
	margin: 0;
}

nav a {
	position: relative;
	display: block;
	width: 153px;
	height: 153px;
	text-align: right;
	color: #000;
}

nav a p {
	position: absolute;
	font-size: 20px;
	bottom: -6%;
	right: 10%;
}

nav ul li {
	list-style:none;
	display: block;
	margin-bottom: 63px;
 }

#logo { margin: 0 auto;
	padding: 0;
	display: block;
	background: url('../imagens/logotipo4.png');
	width: 466px;
	height: 236px;
}

.conceito { height: 1400px; }

.conceito { width: 552px; }

.quadrado-conceito { top: 205px; }

.conceito h2 {
	font-size: 84px;
	margin-top: 50px;
}

.conceito p {
	font-size: 18px;
	line-height: 22px; 
	margin-bottom: 28px;
}


#grelha  {
	margin-left: 108px;
	margin-right: 0px;
	max-width: 90%;
}

.quad {
	width: 208px;
	height: 208px;
}

.quad.active {
	height: 648px;
	width: 648px;
}

.buttons {
	position: absolute;
	top: 445px;
	z-index: 2;
}

}

/* MEDIA: top nav */
@media only screen and (max-width: 799px) {

nav {
	text-align: center;
	position: fixed;
	top: -97px;
	margin: 0 auto;
	z-index: 2;
	width: 100%;
}

nav ul {
	width: 100%;
	padding: 0;
	margin: 0 auto;
	list-style: none;
}

nav ul li {
	float:left;
	width: 33%;
	padding:0;
}

nav a {
	padding: 0;
	margin: 0 auto;
	position: relative;
	display: block;
	width: 153px;
	height: 153px;
	color: #000;
}

nav a p {
	position: absolute;
	bottom: -6%;
	left: 10%;
	font-size: 15px;
}

#riscas { background-size: 324px 324px; }
#fundo > div { background-size: 114px 114px; }

#logo {
    margin: 0 auto;
	background: url('../imagens/logo-phone2.png');
	width: 153px;
    height: 102px;
    margin-bottom: 50px;
    
}

.conceito { height: 1247px; }

.quadrado-conceito { top: 90px; }

.conceito h2 {
       	font-size: 73px;
       	line-height: 80px;
       	margin-top: 35px;
}

.conceito p {	
	font-size: 16px;
	line-height: 20px; 
	margin-bottom: 30px;
}


#conceito, #instalacao, #autoria {
	padding-top: 130px;
	margin-left: auto;
	margin-right: auto;
}

#conceito { width: 82%; }

#grelha  {
	margin-left: 0px;
	max-width: 100%;
}

.quad {
	width: 174px;
	height: 174px;
}

.quad.active {
	width: 100%;
	height: 100%;
	padding-bottom: 40px;
}

.quad h2 {
	font-size: 15px;
	margin-left: -10px;
}

.buttons {
	position: absolute;
	bottom: 0px;
	z-index: 2;
}

}

@media only screen and (max-width: 639px) {

.quad {
	width: 140px;
	height: 140px;
}

}


/* MEDIA: very small width */

@media only screen and (max-width: 479px) {

nav {
	top: -53px;
}

nav a {
	width: 103px;
	height: 103px;
}

nav a p {
	bottom: -9%;
	left: 10%;
	font-size: 14px;
}

#riscas { background-size: 216px 216px; }
#fundo > div { background-size: 76px 76px; }

.conceito h2 {
       	font-size: 48px;
       	margin-top: 35px;
       	line-height: 54px;
}

.conceito p {	
	font-size: 15px;
	line-height: 20px; 
	margin-bottom: 30px;
}

.quad {
	width: 136px;
	height: 136px;
}

.quad h2 {
	font-size: 13px;
	margin-left: -10px;
}

.quad object { height: 270px;  }


.quad h3, .quad p, .quad ul {
	margin-left: 33px;
	margin-right: 33px;	
}

}


/* AUTORIA */

#autoria {
    position: relative;
	padding-top: 130px;
}

.quadrado-autoria {
	position: absolute;
	z-index: -1;
	left: 98px;
	top: 98px;
	width: 459px;
	height: 459px;
	background-color: rgba(0, 0, 0, 1);
}

.autoria {
	text-align: center;
	position: absolute;
	font-size: 12px;
	line-height: 16px;
	top: 150px;
	left: 164px;
	width: 320px;
	
}

.autoria p { margin-bottom: 20px; }

.autoria h2 {
	margin-top: 20px;
	margin-bottom: 30px;
	font-size: 22px;
	line-height: 26px;
	letter-spacing: 1px;
	color: #d3d3d3;
}

#quadrado-autoria p { margin-bottom: 20px; }

#ariana img, #paulo img {
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

.quadrado-bio {
	visibility: hidden;
	position: absolute;
	z-index: -1;
	width: 310px;
	height: 310px;
	background-color: rgba(0, 0, 0, 1);;
}

#ariana:hover .quadrado-bio,
#paulo:hover .quadrado-bio,
#ariana:hover .bio,
#paulo:hover .bio
{
	visibility: visible;
}

.bio {
	visibility: hidden;
	text-align: center;
	position: absolute;
	font-size: 11px;
	line-height: 14px; 
	width: 285px;
	letter-spacing: 1px;
}

.bio h3 {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 18px;
	line-height: 20px; 
	color: #d3d3d3;
}


/* MEDIA: bottom vs right authors and bio */

@media only screen and (max-width: 1023px) {

#autoria { height: 1000px; }

.autoria-container {
	position: relative;
	left: 50%;
	top: -130px;
	width: 0;
}

.autoria-container > div {
	width: 0;
	position: relative;
    left: -328px;
}

#ariana, #paulo { position: absolute; top: 572px; }
#ariana { left: 139px; }
#paulo { left: 358px; }

.quadrado-bio { top: 138px; }
#ariana .quadrado-bio { left: 30px; }
#paulo .quadrado-bio { left: -189px; }

.bio { top: 188px; }
#ariana .bio { left: 47px; }
#paulo .bio { left: -169px; }

}

@media only screen and (min-width: 1024px) {

#autoria { height: 550px; }

#ariana, #paulo { position: absolute; left: 575px; }

#ariana { top: 142px; }
#paulo { top: 358px; }

.quadrado-bio { left: 138px; }
#ariana .quadrado-bio { top: 28px; }
#paulo .quadrado-bio { top: -188px; }

.bio { left: 155px; }
#ariana .bio { top: 80px; }
#paulo .bio { top: -150px; }

}

@media only screen and (max-width: 479px) {


.autoria {
	top: 120px;
	left: 194px;
	width: 260px;
}

}

/* FOOTER */

#connect-icons {
        position: fixed;
        bottom: 20px;
        right: 0px;
        z-index: 2;
}

#connect-icons a * { display: none; }

#connect-icons a img { display: block; }

#connect-icons li {
        list-style-type: none;
        margin: 0;
}

#connect-icons a img {
        opacity: 0.6;
        -webkit-transition: 0.2s ease-in-out;
        transition: 0.2s ease-in-out;
}

#connect-icons a:hover img,
#connect-icons a:focus img {
         opacity: 1;
}

.to-top {
    position: relative;
	top: -55px;
}

.to-top a {
	position: absolute;
	right: 27px;
}

.fb-like-container {
        position: fixed;
        bottom: 0px;
        right: 0px;
        z-index: 2;
}