@import url(https://fonts.googleapis.com/css?family=Lato:300,700);
@import url(https://fonts.googleapis.com/css?family=Francois+One);
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body{
	/*background-image: url("img/fondo4.jpg");*/
	background:#3f92d0 url("img/fondo1.jpg") no-repeat fixed center center / 2000px auto;
    margin: 0 auto;
    /*position: absolute;*/
    text-align: center;
    /*width: 100%;*/
	font-family: 'Open Sans Condensed', sans-serif;
	}


a {
  /*display: block;*/
  width: 100%;
  height: 100%;
}
h1 {color:#FFF; text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);}
h2 { color:#fff; text-align:center; font-size: 20px;}

.titulo-inter {
    border-bottom: 1px double #fff;
    color: #fff;
    font-size: 19px;
    text-align: center;
}
.correo{
	float: none !important;
	}


.box{
position: relative;
width: 50%; /* desired width */
-webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;
border:#FFF 6px double;
float:left;
}
.box:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content{
color: #FFF;
    font-size: 12px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 85%;
}

.descript { width:48%; float:right; color:#fff; font-size:13px; text-align:right;}
.descript h3 {font-size:21px;}
.descript h4 {font-size:13px; border: dotted 2px #fff; width:100%; font-size:16px; padding:5px; text-align:center;}
.precio {background-color: #CC3300; color: #FFF; font-size: 12px; line-height: 15px; padding: 0; position: absolute; right: 0; text-align: center; top: -54px; width: 159px;}
.precio span {font-size: 17px; font-weight: 600;}
.destacado_cir {width:100%; padding:15px 10px; background-color:rgba(0,0,0,0.8); overflow:auto;}

.footer { width:100%; overflow:auto; background-color: rgba(0,0,0,0.5); color:#fff; max-width:900px; margin:0 auto; text-align:justify;}
.footer .moduletable {
    margin: auto;
    max-width: 1200px;
}
.footer a {color:#fff; text-decoration:none;}
.footer ul li {
    height: auto;
}
.footer .parent {
    float: left;
    font-size: 12px;
    list-style: none outside none;
    margin: 20px 0;
    width: 33%;
}
.footer p {font-size:12px; }
.separator {
    color: #666666;
    font-size: 13px;
    font-weight: bold;
    list-style: none outside none;
    text-transform: uppercase;
}
td {
    font-size: 15px;
    line-height: 20px;
    padding: 0 20px;
    text-align: justify;
    vertical-align: top;
    width: 50%;
	padding:0 50px;
}
@media screen and (max-width: 1200px) {
  body {
 background-size:1280px;
  }
}
@media screen and (max-width: 768px) {
  .box, .descript{
width: 50%;
  }
  td {
	  width:100%;
	  float:left;
	  }
}
@media screen and (max-width: 700px) {

  .precio {
    position: inherit;
}
}
@media screen and (max-width: 450px) {
  .box, .descript{
width: 100%;
  }
}
<!--modal-->
.codrops-header {
	z-index: 1000;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	max-width: 500px;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-color: rgba(0, 0, 0, 0.3);
	border:solid 1px #ccc;
	padding:2%;
}

.codrops-header h1 {
	margin: 0;
	font-weight: 200;
	font-size: 2,5em;
	line-height: 1;
}

.codrops-header h1 span {
	display: block;
	padding: 0.5em 0 0.6em 0.1em;
	font-size: 60%;
	line-height: 1.2;
	opacity: 0.7;
}

/* Demo Buttons Style */
.codrops-demos {
	padding-top: 2em;
	font-size: 0.8em;
}

.codrops-demos a {
	display: inline-block;
	margin: 0.5em;
	padding: 0.7em 1.1em;
	outline: none;
	border: 2px solid #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	width: 190px;
	cursor: pointer;
	
}
.codrops-demos2 a {
    /*border: 2px solid #cc3300;*/
    cursor: pointer;
    display: inline-block;
    letter-spacing: 1px;
    /*margin: 0.5em;*/
    outline: medium none;
    padding: 0.7em 1.1em;
    text-decoration: none;
    text-transform: uppercase;
    max-width: 500px;
	background-color: #009bf8;
	color:#FFF;
	width:100%;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
	color: #009bf8;
	border-color: #009bf8;
}
.container{
	text-align:center;
	}
<!--modal-->
/*GRILLA*/
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }



/* Common style */
.grid {
margin: 0 auto;
max-width: 762px;
width: 100%;
background: background: rgba(0, 0, 0, 0) linear-gradient(to right, /*#e64ab2 0%*/, #a152fa 50%, #40d8f7 100%) repeat scroll 0 0;
    height: 100%;
    z-index: 0;
opacity:100%;
}

.grid a {
float: left;
max-width: 251px;
width: 33%;
color: #333;
margin: 30px 0 0;
}
.grid figure {
position: relative;
overflow: hidden;
margin: 5px;
/*background: #333;*/
}

.grid figure img {
position: relative;
display: block;
width: 100%;
opacity: 0.7;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}

.grid figcaption {
position: absolute;
top: 0;
z-index: 11;
padding: 22px;
width: 100%;
height: 100%;
text-align: center;
}

.grid figcaption h2 {
margin: 0 0 20px 0;
color: #3498db;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 300;
font-size: 130%;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}

.grid figcaption p {
padding: 0 0px;
color: #aaa;
font-weight: 300;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}

.grid figcaption h2,
.grid figcaption p {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}

.grid figure button {
position: absolute;
padding: 4px 20px;
border: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}

.grid figcaption,
.grid figcaption h2,
.grid figcaption p,
.grid figure button {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

/* Hover effects */
.grid a:hover figure img {
opacity: 1;
}

.grid a:hover figcaption h2,
.grid a:hover figcaption p {
-webkit-transform: translateY(0);
transform: translateY(0);
}

.grid a:hover figcaption p {
opacity: 0;
}

/* Individual styles */
.demo-1 body {
background: #3498db;
}

.demo-1 .grid figure button,
.demo-3 .grid figure button {
top: 50%;
left: 50%;
border: 3px solid #fff;
background: transparent;
color: #fff;
opacity: 0;
-webkit-transform: translateY(-50%) translateX(-50%) scale(0.25);
transform: translateY(-50%) translateX(-50%) scale(0.25);

}

.demo-1 .grid a:hover figure button,
.demo-3 .grid a:hover figure button {
opacity: 1;
-webkit-transform: translateY(-50%) translateX(-50%) scale(1);
transform: translateY(-50%) translateX(-50%) scale(1);
}

.demo-2 .grid figcaption h2 {
color: #000;
}

.demo-2 .grid figcaption p {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}

.demo-2 .grid figure button {
bottom: 0;
left: 0;
padding: 15px;
width: 100%;
background: #fff;
color: #333;
font-weight: 300;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}

.demo-2 .grid a:hover figure button{
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transform: translateY(0);
transform: translateY(0);
}

.demo-2 .grid figcaption h2, 
.demo-2 .grid figcaption p,
.demo-3 .grid figcaption h2,
.demo-3 .grid figcaption p {
-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
}

.demo-2 .grid a:hover figcaption p,
.demo-3 .grid a:hover figcaption p {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
}

.demo-3 body {
background: rgba(0, 0, 0, 0) linear-gradient(to right, /*#e64ab2 0%*/, #a152fa 50%, #40d8f7 100%) repeat scroll 0 0;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    width: 100%;
    z-index: 0;
}

.demo-3 .grid figcaption h2 {
color: #52be7f;
}

.demo-3 .grid a:hover figcaption h2 {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}

/* Media Queries */
/* Let's redefine the width of each anchor and the margins */

@media screen and (max-width: 58em) {
.grid a {
width: 33.333%;
}

.grid a:nth-child(odd) {
margin: 0;
}

.grid a:nth-child(3n-1) {
margin: 30px 0 -30px 0;
}
}

@media screen and (max-width: 45em) {
.grid {
max-width: 500px;
}

.grid a {
width: 50%;
}

.grid a:nth-child(3n-1) {
margin: 0;
}

.grid a:nth-child(even) {
margin: 30px 0 -30px 0;
}


.grid figcaption h2 {
margin-bottom: 0px;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}

.grid figcaption p {
margin: 0;
padding: 0 10px;
}
}

@media screen and (max-width: 27em) {
.grid {
max-width: 250px;
}

.grid a {
width: 100%;
}

.grid a:nth-child(even) {
margin: 0;
}
}

/*GRILLA*/

.menu{
	clear: both;
    width: 100%;
	color:#FFF;
	text-decoration:none;
	font-size:14px;
}
.menu a{
	clear: both;
    width: 100%;
	color:#FFF;
	text-decoration:none;
	margin:15px;
}
.menu a:hover { 
	border-bottom:solid 1px /*#4f4e52*/#fff;
}

.cabezote{
	/*max-width: 1200px;*/
    z-index: 1000;
	text-align:center;
	
	}

body {
}
.contenido {     background-color: rgba(0, 0, 0, 0.5);
    margin: 20px auto;
    max-width: 900px;
    overflow: auto;
    width: 100%;}