@font-face {
  font-family: 'CeraPro-Black';
  src: url('../fonts/CeraPro-Black.eot?#iefix') format('embedded-opentype'),  
	   url('../fonts/CeraPro-Black.otf')  format('opentype'),
	   url('../fonts/CeraPro-Black.woff') format('woff'), 
	   url('../fonts/CeraPro-Black.ttf')  format('truetype'), 
	   url('../fonts/CeraPro-Black.svg#CeraPro-Black') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CeraPro-Bold';
  src: url('../fonts/CeraPro-Bold.eot?#iefix') format('embedded-opentype'),  
	   url('../fonts/CeraPro-Bold.otf')  format('opentype'),
	   url('../fonts/CeraPro-Bold.woff') format('woff'), 
	   url('../fonts/CeraPro-Bold.ttf')  format('truetype'), 
	   url('../fonts/CeraPro-Bold.svg#CeraPro-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}



@font-face {
  font-family: 'CeraPro-BoldItalic';
  src: url('../fonts/CeraPro-BoldItalic.eot?#iefix') format('embedded-opentype'),  
	   url('../fonts/CeraPro-BoldItalic.otf')  format('opentype'),
	   url('../fonts/CeraPro-BoldItalic.woff') format('woff'), 
	   url('../fonts/CeraPro-BoldItalic.ttf')  format('truetype'),
	   url('../fonts/CeraPro-BoldItalic.svg#CeraPro-BoldItalic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CeraPro-Italic';
  src: url('../fonts/CeraPro-Italic.eot?#iefix') format('embedded-opentype'),  
	   url('../fonts/CeraPro-Italic.otf')  format('opentype'),
	   url('../fonts/CeraPro-Italic.woff') format('woff'), 
	   url('../fonts/CeraPro-Italic.ttf')  format('truetype'), 
	   url('../fonts/CeraPro-Italic.svg#CeraPro-Italic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CeraPro-LightItalic';
  src: url('../fonts/CeraPro-LightItalic.eot?#iefix') format('embedded-opentype'),  
	   url('../fonts/CeraPro-LightItalic.otf')  format('opentype'),
	   url('../fonts/CeraPro-LightItalic.woff') format('woff'), 
	   url('../fonts/CeraPro-LightItalic.ttf')  format('truetype'), 
	   url('../fonts/CeraPro-LightItalic.svg#CeraPro-LightItalic') format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'CeraPro-MediumItalic';
  src: url('../fonts/CeraPro-MediumItalic.eot?#iefix') format('embedded-opentype'),  
	   url('../fonts/CeraPro-MediumItalic.otf')  format('opentype'),
	   url('../fonts/CeraPro-MediumItalic.woff') format('woff'), 
	   url('../fonts/CeraPro-MediumItalic.ttf')  format('truetype'), 
	   url('../fonts/CeraPro-MediumItalic.svg#CeraPro-MediumItalic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CeraPro-Medium';
  src: url('../fonts/CeraPro-Medium.eot?#iefix') format('embedded-opentype'),  
	   url('../fonts/CeraPro-Medium.otf')  format('opentype'),
	   url('../fonts/CeraPro-Medium.woff') format('woff'), 
	   url('../fonts/CeraPro-Medium.ttf')  format('truetype'), 
	   url('../fonts/CeraPro-Medium.svg#CeraPro-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}

.casona{
	background-color: #fff;
}

.casona-fluid{
	padding: 0;
}

.casona-info{
	padding: 0;
	position: relative;
}
.casona-imgs{
	padding: 0;
}

.casona-h2{
	background-color: #000;
	color:#fff;
	font-family: 'CeraPro-Black';
	font-size: 6rem;
	text-align: right;
	margin: 0 0 0 20%;
	width: 80%;
	padding: 3% 5% 3% 18%;
	line-height: 90%;
}

.casona-h3{
	background-color: #FFED00;
	color:#000;
	font-family: 'CeraPro-Bold';
	font-size: 3.5rem;
	text-align: right;
	margin: 0;
	padding: 1.5% 5% 1.5% 0;
}

.casona-h4{
	background-color: #188518;
	color:#fff;
	font-family: 'CeraPro-BoldItalic';
	font-size: 2.5rem;
	text-align: right;
	margin: 0 0 0 60%;
	padding:1.2% 5% 1% 0;
	width: 40%;
}
.casona-h4 img{
	position: relative;
	top: -5px;
}

.casona-p{
	background-color: #fff;
	color:#000;
	font-family: 'CeraPro-MediumItalic';
	font-size: 3rem;
	text-align: right;
	margin: 0;
	padding: 4% 5% 4% 23%;
}
.expoartis-h3{
	color:#000;
	font-family: 'CeraPro-BoldItalic';
	font-size: 2.5rem;
	text-align: right;	
	letter-spacing: 10px;
}
.expoartis-h2{
	color:#000;
	font-family: 'CeraPro-BoldItalic';
	font-size: 4.5rem;
	text-align: right;	
}
.casona-info .fig1{
	display: block;
	margin-right: auto;
}
.casona-info .fig2{
	position: absolute;
	left: 0;
	bottom: 353px;
	z-index: 99;
}
.casona-info .fig3{
	display: block;
	margin-left: auto;
}
.casona-imgs .fig4{
	display: block;
	margin-left: auto;
}
.casona-info .fig5{
	position: absolute;
	left: 0;
	display: block;
	z-index: 99;
}
.casona-imgs-borde{
	background-color: #FFED00;
	margin: 0 0 0 20%;
	padding: 3% ;
	width: 80%;
}

.overflowheight{
	height:427px; 
	overflow-y:hidden;
	padding: 2% 4%;
}

.actioncasona {
	display:block;
	width:423px;
	height:60px;
	margin-left:auto;
	text-align:center;
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
}
.actioncasona .front,.actioncasona .back {
	position:absolute;
	display:block;
	width: 423px;
	height: 60px;
	line-height: 54px;
	transition:all .5s;
	-webkit-transition:-webkit-transform .5s;
	-moz-transition:-moz-transform .5s;
	color:#fff;
	font-family: 'CeraPro-BoldItalic';
	font-size: 2.5rem;
	text-decoration:none;
}
.actioncasona .front {
	background-color:#000;
	transform:translateZ(19px);
	-webkit-transform:translateZ(19px);
	-moz-transform:translateZ(19px);
}
.actioncasona .back {
	background-color:#FFED00;
	color:#000;
	transform:rotateX(-90deg) translateZ(19px);
	-webkit-transform:rotateX(-90deg) translateZ(19px);
	-moz-transform:rotateX(-90deg) translateZ(19px);
}
.actioncasona:hover {
	transform:rotateX(90deg);
	-webkit-transform:rotateX(90deg);
	-moz-transform:rotateX(90deg);
}

.actioncasona2{
	background-color:#000;
	color:#fff;
	display: none;
	font-family: 'CeraPro-BoldItalic';
	font-size: 2.5rem;
	margin:auto;
	padding: 3% 5%;
	text-align: center;
}
.actioncasona2:hover{
	color:#fff;
}

/*------------------------------------*\
    $RESPONSIVE
\*------------------------------------*/
 
@media screen and (min-width:300px) and (max-width:479px){
	
	.casona-h2{
		font-size: 3.5rem;
		padding: 3% 5% 3% 4%;
		margin: 0 0 0 5%;
		width: 90%;
	}
	.casona-h3{
		font-size: 3rem;
		padding: 1.5% 10% 1.5% 0;
	}
	
	.casona-h4{
		font-size: 2.2rem;
		margin: 0 0 0 0%;
		width: 100%;
		padding: 3.2% 5% 2% 0;
	}
	
	.casona-p{
		font-size: 2rem;
		line-height: 120%;
		padding: 4% 8% 4% 8%;
	}
	.overflowheight {
		height: auto;
		padding: 2% 9%;
	}
	.casona-imgs .fig4{
		margin-right: auto;
		margin-left: inherit;
		display: none;
	}
	.casona-info .fig1{
		width: 45%;
	}
	.casona-info .fig2{
		display: none;
	}
	.actioncasona{
		display: none;
	}
	.actioncasona2{
		display: block;
	}
	.casona-imgs-borde{
		padding: 6%;
	}
	.casona-info .fig5{
		position: relative;
		margin-right: auto;
	}	
	.expoartis-h2{
		font-size: 3.2rem;
	}	
	
	
}

@media screen and (min-width:480px) and (max-width:599px){
	
	.casona-h2{
		font-size: 4.5rem;
		padding: 3% 5% 3% 4%;
	}
	.casona-h4{
		margin: 0 0 0 30%;
		width: 70%;
	}
	
	.casona-p{
		font-size: 2.5rem;
		line-height: 120%;
		padding: 4% 5% 4% 8%;
	}
	.overflowheight {
		height: auto;
		padding: 2% 9%;
	}
	.casona-imgs .fig4{
		margin-right: auto;
		margin-left: inherit;
		display:none;
	}
	.casona-info .fig1{
		width: 45%;
	}
	.casona-info .fig2{
		display: none;
	}
	.actioncasona{
		display: none;
	}
	.actioncasona2{
		display: block;
		width: 84%;
		float: right;
	}
	.casona-imgs-borde{
		padding: 6%;
	}
		
	.casona-info .fig5{
		position: relative;
		margin-right: auto;
	}	
	.expoartis-h2{
		font-size: 3.2rem;
	}	
	
	
}

@media screen and (min-width:600px) and (max-width:767px){
	
	.casona-h2{
		font-size: 5rem;
		padding: 3% 5% 3% 4%;
	}
	.casona-h4{
		margin: 0 0 0 35%;
		width: 65%;
	}
	
	.casona-p{
		font-size: 2.5rem;
		line-height: 120%;
		padding: 4% 5% 4% 13%;
	}
	.overflowheight {
		height: auto;
	}
	.casona-imgs .fig4{
		margin-right: auto;
		margin-left: inherit;
		display: none;
	}
	.casona-info .fig1{
		width: 45%;
	}
	.casona-info .fig2{
		display: none;
	}
	.actioncasona{
		display: none;
	}
	.actioncasona2{
		display: block;
		width: 68%;
		float: right;
	}
	.casona-imgs-borde{
		padding: 6%;
	}
		
	.casona-info .fig5{
		position: relative;
		margin-right: auto;
	}	
	.expoartis-h2{
		font-size: 3.2rem;
	}	
	
}

@media screen and (min-width:768px) and (max-width:799px){
	
	.casona-p{
		font-size: 2.5rem;
		line-height: 120%;
	}
	.overflowheight {
		height: auto;
	}
	.casona-imgs .fig4{
		margin-right: auto;
		margin-left: inherit;
	}
	
	.casona-info .fig2{
		bottom: 167px;
	}
	.casona-info .fig5{
		width: 32%;
	}
	.expoartis-h2{
		font-size: 3.2rem;
	}
	
}

@media screen and (min-width:800px) and (max-width:1023px){
	
	.casona-p{
		font-size: 2.5rem;
		line-height: 120%;
	}
	.overflowheight {
		height: auto;
	}
	.casona-imgs .fig4{
		margin-right: auto;
		margin-left: inherit;
	}
	.casona-info .fig5{
		width: 32%;
	}
	.expoartis-h2{
		font-size: 3.2rem;
	}
	
}

@media screen and (min-width:1024px) and (max-width:1279px){
	
	.casona-h2{
		font-size: 5rem;
		padding: 3% 5% 3% 4%;
	}
	.casona-h3{
		font-size: 3.2rem;
	}
	
	.casona-h4{
		margin: 0 0 0 35%;
		width: 65%;
	}
	
	.casona-p{
		font-size: 2rem;
		line-height: 120%;
	}
	.overflowheight {
		height: 279px;
		padding: 2% 4% 2% 12%;
	}
	
	.casona-info .fig1{
		width: 41%;
	}
		
	.casona-imgs-borde{
		padding: 4%;
	}
	
	.casona-info .fig2{
		bottom: 260px;
		width: 14%;
	}
	.casona-info .fig3{
		width: 58%;
	}
	
	.actioncasona{
		width: 305px;
	}
	.actioncasona .front, .actioncasona .back{
		width: 305px;
	}
	
	.casona-info .fig5{
		width: 32%;
	}
	.expoartis-h2{
		font-size: 3.2rem;
	}
	
}

@media screen and (min-width:1280px) and (max-width:1359px){
	
	.casona-h2{
		font-size: 5rem;
		padding: 3% 5% 3% 13%;
	}
	.casona-h3{
		font-size: 3.2rem;
	}
	
	.casona-h4{
		margin: 0 0 0 45%;
		width: 55%;
	}
	
	.casona-p{
		font-size: 2rem;
		line-height: 120%;
	}
	.overflowheight {
		height: 279px;
	}
	
	.casona-info .fig1{
		width: 41%;
	}
		
	.casona-imgs-borde{
		padding: 4%;
	}
	
	.casona-info .fig2{
		bottom: 260px;
		width: 14%;
	}
	.casona-info .fig3{
		width: 47%;
	}
	
	.actioncasona{
		width: 305px;
	}
	.actioncasona .front, .actioncasona .back{
		width: 305px;
	}
	.casona-info .fig5{
		width: 32%;
	}
	.expoartis-h2{
		font-size: 3.2rem;
	}
	
}

@media screen and (min-width:1360px) and (max-width:1439px){
	
	.casona-h2{
		font-size: 5rem;
		padding: 3% 5% 3% 13%;
	}
	.casona-h3{
		font-size: 3.2rem;
	}
	
	.casona-h4{
		margin: 0 0 0 45%;
		width: 55%;
	}
	
	.casona-p{
		font-size: 2.2rem;
		line-height: 120%;
	}
	.overflowheight {
		height: 308px;
	}
	
	.casona-info .fig1{
		width: 41%;
	}
		
	.casona-imgs-borde{
		padding: 4%;
	}
	
	.casona-info .fig2{
		bottom: 260px;
		width: 14%;
	}
	.casona-info .fig3{
		width: 44%;
	}
	
	.actioncasona{
		width: 305px;
	}
	.actioncasona .front, .actioncasona .back{
		width: 305px;
	}
	.casona-info .fig5{
		width: 32%;
	}
	.expoartis-h2{
		font-size: 3.2rem;
	}
	
	
}

@media screen and (min-width:1440px) and (max-width:1599px){
	
	.casona-h2{
		padding: 3% 5% 3% 4%;
	}
	.casona-h4{
		margin: 0 0 0 45%;
		width: 55%;
	}
	
	.casona-p{
		font-size: 2.2rem;
		line-height: 120%;
		padding: 4% 5% 3% 19%;
	}
	.overflowheight {
		height: 258px;
	}
	.casona-info .fig2{
		bottom: 251px;
		width: 12%;
	}
	.casona-info .fig3{
		width: 44%;
	}
	
	.actioncasona{
		width: 326px;
	}
	.actioncasona .front, .actioncasona .back{
		width: 326px;
	}
	.casona-info .fig5{
		width: 32%;
	}
	.expoartis-h2{
		font-size: 3.2rem;
	}
	
}

@media screen and (min-width:1600px) and (max-width:1679px){
	
	.casona-p{
		font-size: 2.6rem;
		line-height: 120%;
	}
	.overflowheight {
		height: 334px;
	}
	.casona-info .fig2{
		bottom: 300px;
		width: 14%;
	}
	
	.casona-info .fig3{
		width: 44%;
	}
	
	.actioncasona{
		width: 360px;
	}
	.actioncasona .front, .actioncasona .back{
		width: 360px;
	}
	.casona-info .fig5{
		width: 32%;
	}
	.expoartis-h2{
		font-size: 3.2rem;
	}
	
	
}

@media screen and (min-width:1680px) and (max-width:1919px){
	
	.casona-p{
		font-size: 2.8rem;
		line-height: 120%;
	}
	.overflowheight {
		height: 369px;
	}
	.casona-info .fig2{
		bottom: 267px;
	}
	
	.casona-info .fig3{
		width: 44%;
	}
	
	.actioncasona{
		width: 378px;
	}
	.actioncasona .front, .actioncasona .back{
		width: 378px;
	}
	.casona-info .fig5{
		width: 32%;
	}
	.expoartis-h2{
		font-size: 3.2rem;
	}
	
	
}