﻿.seccontacto {
    width: 100%;
    min-height: 100%;
    background-color: #007DE9;
    background: url(../IMAGES/TURING/grapper4.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    float: left;
    padding-top: 100PX;
}
.textosc {
    width: 100%;
    margin-bottom:30px;
    color:white;
}

    .textosc h1 {
        font-size: 1.5em;
        font-weight: 900;
        margin: 0;
    color:white;
        text-align: center;
        margin-bottom: 10px;
    }

    .textosc p {
        display: block;
        width: 80%;
        text-align: center;
        margin: auto;
        line-height: 150%;
        font-size: .9em;
        margin-bottom: 10px;
        color:#f5f5f5;
    }
.formulario {
    width:40%;
    float:left;
    margin-left:5%;
    margin-right:5%;
}
.formulario div form
{
	width: 90%;
	margin-left: 5%;
}
.formulario div form input[type=text], textarea
{	
     transition:all .5s ease-in-out;
	width: 100%;
	height: 25px;
	margin-bottom: 10px;
	padding: 3px;
	font-size: 1em;
	border-bottom:  1px;
	border-style: solid;
	border-color: #2DA9DE;
    border-radius:3px;
	background-color: white;
}
    .formulario div form textarea {
        transition: all .5s ease-in-out;
        width: 99%;
        height: 200px;
        margin-bottom: 10px;
        padding: 5px;
        font-size: 1em;
        border-style: solid;
    }

 .social {
    position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
    left: -40px; /* Establecemos la barra en la izquierda */
    top: 200px; /* Bajamos la barra 200px de arriba a abajo */
    z-index: 2000; /* 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:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
    .social ul li .icon-twitter {background: #00abf0;}
    .social ul li .wp {background: #43a047;}
    .social ul li .icon-pinterest {background: #ae181f;}
    .social ul li .icon-mail {background: #666666;}

    .social ul li a:hover {
        background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
        padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
    }
    .wm{
        display: none;
    }
    @media screen and (max-width:900px) {
  
}
@media screen and (max-width:850px) {
       
.formulario {
    width:60%;
    float:left;
    margin-left:20%;
    margin-right:20%;
}
}
@media screen and (max-width:700px) {
.formulario {
    width:90%;
    float:left;
    margin-left:5%;
    margin-right:5%;
}
}
@media screen and (max-width:350px) {
.wm{
        display: block;
    }
    .wb{
        display: none;
    }
}


