/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}

/** resetados **/

html {
min-height: 100%;
}

body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
font-family: arial, helvetica, sans-serif;
height: 100%;
}

h1 {
margin: 20px;
cursor: pointer;
}

aside {
width: 290px;
background-color: white;
padding: 20px 0;
float: left;
}

h2 {
display: none;
}

aside #menu {
margin: 70px 0 0 0;
float: right;
width: 90%;
font-size: .7em;
display: none;
}

.interna aside #menu {
display: block;
}

h4{
display: none;
}

aside #menu li{
padding: 8px 0;
font-size: 1.7em;
}

#cenografia-e-figurino li.menu-ceno,
#web li.menu-web,
#quadrinhos li.menu-quad,
#performance li.menu-perf,
#ilustracao-e-pintura li.menu-ilus,
#escultura li.menu-escu,
#visual-merchandising li.menu-visu,
#radio-arte li.menu-radi,
#intervencao-urbana li.menu-inte,
#blog li.menu-blog,
#exposicoes li.menu-expo {
padding: 8px;
background-color: #EDEEDE;
text-align: right;
font-size: 1.7em;
font-weight: bold;
}

aside #menu li a{
text-decoration: none;
color: black;
}

aside #menu li a:hover{
font-weight: bold;
}

aside #dados_de_contato{
position: absolute;
font-size: 1em;
display: none;
background-color: #B3FFC1;
padding: 5px;
line-height: 1.3em;
-webkit-box-shadow: 27px 27px 10px -10px rgba(0,0,0,0.5);
-moz-box-shadow: 27px 27px 10px -10px rgba(0,0,0,0.5);
box-shadow: 27px 27px 10px -10px rgba(0,0,0,0.5);
z-index: 900;
}

aside #dados_de_contato a{
text-decoration: none;
color: black;
}

aside #dados_de_contato a:hover{
font-weight: bold;
}

aside #icones{
float: right;
margin-right: 20px;
}

aside div#texto_sobre {
margin-top: 70px;
}

.interna aside div#texto_sobre {
display: none;
}

aside div#texto_sobre p{
font-size: .75em;
margin: 5px 10px;
color: #333333;
margin-left: 20px;
}

section {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-itens: stretch;
}

section article {
background-color: #EDEEDE;
flex: 1;
}

.interna section {
font-size: .75em;
}

.interna #texto_interno {
padding: 60px 20px 0;
max-width: 600px;
}

.interna #texto_interno p, .interna #texto_interno ul li {
margin: 0 8px 12px;
width: 75%;
font-size: 1.2em;
}

figure {
padding: 15px 30px;
display: inline-block;
cursor: pointer;
}

.interna figure {
cursor: default;
}

figure:hover {
background-color: rgba(100,100,100,.3);
}

.interna figure{
margin: 30px 0;
}

.interna figure:hover{
background-color: transparent;
}

figure img{
background-color: black;
}

figcaption {
font-size: 1em;
text-align: right;
margin-top: -2px;
color: black;
}

a figcaption {
/*font-family: 'Lobster', cursive;*/
font-weight: bold;
text-align: center;
background-color: rgba(255,2550,255,.4);
padding: 10px 0;
text-shadow: 1px 1px 1px #1C6EA4;
font-size: 1.1em;
}

.interna figcaption{
border-left: 8px solid lime;
text-align: left;
padding: 5px 6px;
font-family: sans-serif, arial;
}

br {
clear: both;
}

#exposicoes section div ul {
margin: 50px 5px 50px 50px;
}

#exposicoes section div ul li{
list-style-type: disc;
padding: 3px;
font-size: 1em;
}

/*! * * * * * * * * * * * * * * * * * * * *\
  CSShake :: shake-little
  v1.5.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */
.shake-little {
  display: inline-block;
  transform-origin: center center; }

.shake-freeze,
.shake-constant.shake-constant--hover:hover,
.shake-trigger:hover .shake-constant.shake-constant--hover {
  animation-play-state: paused; }

.shake-freeze:hover,
.shake-trigger:hover .shake-freeze, .shake-little:hover,
.shake-trigger:hover .shake-little {
  animation-play-state: running; }

@keyframes shake-little {
  2% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  4% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  6% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  8% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  10% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  12% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  14% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  16% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  18% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  20% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  22% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  24% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  26% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  28% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  30% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  32% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  34% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  36% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  38% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  40% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  42% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  44% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  46% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  48% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  50% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  52% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  54% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  56% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  58% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  60% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  62% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  64% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  66% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  68% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  70% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  72% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  74% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  76% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  78% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  80% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  82% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  84% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  86% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  88% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  90% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  92% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  94% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  96% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  98% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  0%, 100% {
    transform: translate(0, 0) rotate(0); } }

.shake-little:hover,
.shake-trigger:hover .shake-little, .shake-little.shake-freeze, .shake-little.shake-constant {
  animation-name: shake-little;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }

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

  .interna section p{
  float: none;
  }

  body .interna article{
  margin: 70px 0 30px;
  }

  .interna figure {
  margin: 0 0 30px 0;
  padding: 0;
  width: 100%;
  }

  .interna figure img{
  width: 100%;
  }
}

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

body section {
display: block;
}

body section article {
display: block;
}

body aside{
width: 100%;
position: relative;
text-align: center;
padding: 0 0 5px 0;
border-bottom: 3px solid #BABACA;
float: none;
}

h4 {
font-size: 1em;
display: none;
clear: left;
margin: 0;
background-color: #BABACA;
padding: 8px 0;
cursor: pointer;
font-weight: bold;
text-shadow: 1px 1px 1px #FFFFFF;
text-align: left;
vertical-align: bottom;
}

h4 span {
font-size: .8em;
vertical-align: middle;
margin-top: -1px;
}

aside #menu li{
padding: 8px 0;
}

figcaption {
font-size: 1em;
}

body aside #texto_sobre {
display: none;
}

body section{
clear: left;
margin: 0;
padding-top: 10px;
}

h2 {
display: block;
padding: 45px 0 5px;
text-align: center;
font-size: 1.8em;
font-family: 'Lobster', cursive;
text-shadow: 1px 1px 1px #BABACA;
}

aside #icones{
float: none;
margin-right: 20px;
}

aside #menu {
display: none;
margin-top: 20px;
float: none;
width: 100%;
position: absolute;
background-color: rgba(255,255,255,.96);
}

#exposicoes section div ul li{
padding: 5px 3px;
}

#cenografia-e-figurino li.menu-ceno,
#web li.menu-web,
#quadrinhos li.menu-quad,
#performance li.menu-perf,
#ilustracao-e-pintura li.menu-ilus,
#escultura li.menu-escu,
#visual-merchandising li.menu-visu,
#radio-arte li.menu-radi,
#intervencao-urbana li.menu-inte,
#blog li.menu-blog,
#exposicoes li.menu-expo {
text-align: center;
}

.interna aside {
padding-bottom: 0;
}

.interna h4 {
display: block;
width: 100%;
padding-left: 8px;
}

.interna aside #menu {
display: none;
}

.interna aside h1 {
margin: 0;
padding-top: 0;
}

.interna aside h1 svg {
transform: scale(.55);
}

.interna figure {
margin: 0 0 30px 0;
padding: 0;
width: 100%;
}

.interna figure img{
width: 100%;
}

.interna section{
width: auto;
margin: 0;
padding: 0;
}

.interna #texto_interno p{
width: auto;
}

}

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

body section article {
display: flex;
flex-direction: column;
justify-content: center;
align-itens: stretch;
}

body section article figure {
text-align: center;
width: 90%;
}

body section article figure figcaption{
background-color: none;
}

body section article figure img{

}

}