@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Actor);

* {margin: 0; padding: 0;}

body
{	
  background-color: #fff;  
}

#ceramicos 
{
    position: fixed;
	top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: rgba(0,0,0,0.7);
    opacity: 0;
    -webkit-transition: opacity 1s ease, z-index 1s ease;
    -moz-transition: opacity 1s ease, z-index 1s ease;
    -ms-transition: opacity 1s ease, z-index 1s ease;
    -o-transition: opacity 1s ease, z-index 1s ease;
    transition: opacity 1s ease, z-index 1s ease;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

#ceramicos .modal 
{
  	position: absolute;
  	display:inline-block;
  	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
  	z-index: -1;
  	margin: auto;
 	padding: 20px;
  	width: 750px;
  	height: 500px;
  	border-radius: 10px;
  	background: rgba(141,132,123, 0.9 );
  	-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
  	box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
  	opacity: 0;
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  	filter: alpha(opacity=0);
  	-webkit-transition: opacity 1s ease, z-index 1s ease;
  	-moz-transition: opacity 1s ease, z-index 1s ease;
  	-ms-transition: opacity 1s ease, z-index 1s ease;
  	-o-transition: opacity 1s ease, z-index 1s ease;
  	transition: opacity 1s ease, z-index 1s ease;
}

#ceramicos .modal a.close
{
    position: absolute;
    display: block;
    top: 0px;
    right: 0px;
    background: #66584b;
    color: #fff;
    text-align: center;
    font: 12px/1.5 Helvetica, Verdana, sans-serif;
    text-decoration: none;
    padding: 5px 10px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-radius: 0px 10px 0px 10px;
	border-radius: 0px 10px 0px 10px;
}

#ceramicos .modal #texto h2 
{  
  	font-family: 'Roboto', sans-serif;
  	font-weight:400;
  	font-size:18px;
  	color: #fff;
  	text-align: left;
  	margin-bottom:50px;
  	margin-top: 50px;  
}

.modal #texto p 
{
  	color: #fff;
  	text-align: left;   
  	font-family: 'Roboto', sans-serif;
  	font-weight:300;
  	font-size:14px;
  	line-height: 150%;  
}


#ceramicos .modal #foto, #texto
{
	display: inline-block;
	vertical-align:top;
	
}
.modal #foto
{	
	float:left;
}

.modal #foto img
{	
	width: 100%;	
}

#texto
{
	color:#000;
	display: inline-block;
	margin: 0 2% 7em 1em;	
	text-align: justify;
	width: 45%;	
}

#ceramicos:target, #ceramicos:target > .modal 
{
  opacity: 1;
  z-index: 2;
}

@media all and (max-width: 767px) {
  .modal {
    width: 100px;
    height: 250px;
  }

  .modal h2 {
    font: 20px/1.5 Helvetica, Verdana, sans-serif;
    text-transform: uppercase;
  }

  .modal p {
    font: 12px/1.8 Georgia, Times, sans-serif;
  }
}