body{
    
   background: url(../img/fondo1.png);
    background-position:center;
    background-size: cover;
    
    background-repeat: no-repeat;
    background-attachment: fixed;
   
    width: 100%;
    height: auto;
    
  
    

    
    
}

{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*color de fondo del logo */
div{background:;
    padding:0;
    margin: 0;
    margin-top:0;
    

}
img{
    width:20%;
    height: auto;
    margin: auto;
    display: 0; 
   
}


h2{
    text-align: center;
    font-size: 60px;
    font-family:;
    /*separacion*/
    margin-top: 80px; 
    /*background: #ccc;*/
    color: #fff;
     width: 100%;
    
    
    background-position:center;
     background-attachment:inherit;
    background-repeat: no-repeat;
   
    text-shadow: 0px 0px 50px #fff;
}
h3{ text-align: center;
    font-size: 20px;
    font-family:;
    margin-top: 2px;
    color: #fff;
   
    width: 100%;

    
     }
h4{
   
    margin-left:110px;
    
    
}
.conter-ofer img{
   margin-top: 400px;
    width: 300px; 
    height: auto;
    display: block;
    border-radius: 50%;   
}
.footer{
   margin-top:120px;
    background:#fff;
  
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;

    
}
.footer img{
   height:40px;
    width:auto;
    margin-left: 100px;
    border-radius: 90%; 
   
}

form{
    width: 500px;
    margin: auto;
    background: rgba(0,0,0,.4);
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 7px;
    margin-top: 20px;
}

input,textarea{
    font-family: cursive;
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
    border: none;
}


textarea{
    min-height: 100px;
    max-height: 200px;
    max-width: 100%;
}

#boton{
    background: #0003cc;
    color:#fff;
    padding: 10px;
    
}
#boton:hover{
    cursor:pointer;
}
@media(max-width:527px){
    form{
        width: 100%;
    }
    
}

.cont{
   // background: #fff;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: 60px;
   
  
    
   
    
}
.contenedor{
    height:350px;
    width:350px;
    margin:auto;
    -webkit-perspective:700; 
     margin-top: 20px
   
    
}
.carta{
    height: 100%;
    width 100%;
    position: relative;
    transform-style: preserve-3d;
    transition:2s;
    
   
}

.carta:hover{
    transform: rotateY(180deg);
}
.lado{
    width: 100%;
    height:100%;
    backface-visibility: hidden;
    position: absolute;

}
.frente{
    background:orange;
    
   
    
}
.frente img{
    width: 100%;
    height: 100%;
        
   
}
.atras{
    background: green;
    transform: rotateY(180deg);
}



.social {
    
    
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	left: 0; /* Establecemos la barra en la izquierda */
	top: 200px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 200; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
	.social ul {
		list-style: none;
	}
 
	.social ul li a {
		display: inline-block;
		color:#fff;
		background: #000;
		padding: 10px 15px;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}
 
	.social ul li .icon-facebook {background:#000;} /* Establecemos los colores de cada red social, aprovechando su class */
	.social ul li .icon-instagram {background: #000;}
	.social ul li .icon-microsoftoutlook {background: #000;}
	.social ul li .icon-pinterest {background: #000;}
	.social ul li .icon-youtube {background: #000;}
 
	.social ul li a:hover {
		background:#0003cc; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}