body {
	background-color: #FFF;
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}

button {
	    background-color: #5c3d20;
	border: none;
	color: #FFF;
	cursor: pointer;
	font-family: Arial, sans-serif;
	font-size: 12px;
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	user-select: none;
}

button:hover, button:active {
	color: #999;
}

button:active {
	font-size: 11px;
}

.label {
	color: #0D2A4D;
	position: absolute;
	margin-left: 10px;
	top: 36px;
}

body{
	margin:0px;
}

#container{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	min-width: 970px!important;
	min-height: 250px!important;
}

#ad{

	position: relative;
	display: block;
	left:0px;
	overflow:hidden;
	border: none;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#ad.collapsed{
	width: 968px!important;
	height: 248px!important;

}

#ad.expanded{
	width: 100%;
	height: 100%;
}

#banner{
	position:absolute;
	display: block;
	width: 968px!important;
	height: 248px!important;
	left:0px;
	right: 0;
	margin: 0 auto;
	    background-color: #000;
	background-position: 10px 10px;
	background-repeat:no-repeat;
	overflow: hidden;
	border:rgb(145,153,153) 1px solid;
	visibility: hidden; 
}

#expansion{
	position:absolute;
	width: 100%;
	height: 100%;
	background-color: #FFF;
	background-image:url(../images/logo.png);
	background-position: 10px 10px;
	background-repeat:no-repeat;
	overflow: hidden;
	visibility: hidden;
	z-index: 100;
}

.buttons {
	width: 100%;
	height: 100%;
	position: absolute;

}

.button {
	height: 26px;
	width: 108px;
}

.button.close{
	position: absolute;
	border-radius: 10px;
	top: 10px;
	right: 10px;
	width: 74px;
	display: none;
}

#banner .label, #expansion .label{
	font-size: 14px;
	top: 65px;
}

#banner .buttons {
}

.button.expand{
	width:74px;
}

.jungle{
	background-image: url("../images/fundo.png");
	height: 100%;
	z-index: 10;

	position: absolute;
	width: 100%;
}

#expandButton{
	position: absolute;
	z-index: 11;
	left: 0;
	width: 240px;
	height: 100%;
	opacity: 0.0;
}

#expandButton-2{
	position: absolute;
	z-index: 11;
	left: 240px;
	opacity: 0;
	width: 247px;
	height: 100%;
}

#expandButton-3{
	position: absolute;
	z-index: 11;
	left: 487px;
	opacity: 0;
	width: 240px;
	height: 100%;
}

#expandButton-4{
	position: absolute;
	z-index: 11;
	left: 727px;
	opacity: 0;
	width: 247px;
	height: 100%;
}

.contentor{
  border:1px solid #000;
  width: 500px;
  height: 200px;
  background-color: #fff;
}


.circle{
    float: left;
    width: 124px;
    height: 165px;
    position: relative;
    margin-left: 50px;
    margin-top: 50px;
    background-image: url("../images/bg2.jpg");
    background-attachment: fixed;
    background-position: center top;
    background-size: cover;
    border-radius: 50%;
}
.circle.full{
  width: 1000%;
  height: 1000%;
  -webkit-transition: 250ms ease all;
  transition: 250ms ease all;
}

.mask{
 border-radius: 60%;
    float: left;
    width: 136px;
    height: 290px;
    position: relative;
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
}

.frame{
      position: absolute;
    top: -50%;
    left: -67%;
    display: none;
}

.frame-ele{
	top: -27%;
    left: -222%;
}

.frame-guru{
	    top: -53%;
    left: -124%;
    width: 695px;
}

.frame-gori{
	top: -46%;
    left: -75%
}

.frame-rino{
	    top: -21%;
    left: -66%;
}

.contentor{
  width: 100%;
  height: 100%;
  border:1px solid #000;
  background-image: url("../images/bg.jpg");
  background-position: center top;
  background-repeat: no-repeat;
     background-size: cover;
}

.final{
	position: absolute;
	z-index: 10;
}

.click-final{
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
	background-image: url("../images/final-rino.jpg");
	z-index: 20;
}

#clickthroughButton-2{
	position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background-color: transparent;
}




.masks{
	position: absolute;
	bottom:0;
	opacity: 1;
	transition:.8s;
}

.mask-1{
	z-index: 4;
}

.mask-2{
	left: 224px;
	z-index: 5;
}

.mask-3{
	left: 459px;
	z-index: 4;
}

.mask-4{
	left: 717px;
	z-index: 3;
}

.placa{
	position: absolute;
	z-index: 11;
	margin: 0 auto;
	left: 0;
	right: 0;
	top:-100px;
	transition:0.6s;
	transform: rotate(-3deg);
}

@media (max-width: 399px), (max-height: 89px) {
	#banner, #expansion {
		background-size: auto 20px;
	}
	#banner .label, #expansion .label{
		font-size: 10px;
		top: 36px;
	}
}