@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;1,300;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;1,800&display=swap');
/* CSS Document */


.cuerpo-top-line {
    width: 100%;
    height: 15px;
    background:#454593;
}


.cuerpo-top {
    width: 100%;
    height: auto;
    background: #ffffff;
}

.cuerpo-top-logo {
    width: 240px;
    height: 90px;
    padding: 10px 0px 10px 0px ;
    margin: auto;    
}

.logo {display:block; text-indent:-9000%; margin:auto;}
.logo {width:230px; height:90px;background:url(../img/volumen-visual-logo.png);}
.logo:hover {background-position:-230px;}










#slider {width:100%; height:auto; margin:auto; margin-top: 1px;}
#slider img {width:100%;}


.cuerpo {
	width: 98%;
	max-width: 1000px;
	height: auto;
	padding: 20px 0px 15px 0px;
	margin: auto;
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}

.cuerpo-slogan {
	width: 100%;
	height: auto;
	padding: 10px 0px 10px 0px;
	background: #e601ac;
}

.cuerpo-base {
	width: 100%;
	height: auto;
	padding: 10px 0px 10px 0px;
	background:#454593;
	margin-top: 1px;
}


.slogan-1 {
	font-family: 'Nunito', sans-serif;
	font-weight:700;
	font-size:32px;
	font-style: italic;
	text-align: center;
	color: #fff;
}

.slogan-2 {
	font-family: 'Nunito', sans-serif;
	font-weight:300;
	font-size:22px;
	font-style: italic;
	text-align: center;
	color: #fff;
}

.slogan-btn {
	width: 280px;
	padding: 10px 0px 10px 0px;	
	margin: auto;
	margin-top: 15px;	
	border-radius:20px;	
	border: 1px solid #454593;
	font-family: 'Nunito', sans-serif;
	font-weight:300;
	font-size:15px;
	text-align: center;	
	background:#454593;
}

.slogan-btn:hover {
	border: 1px solid #454593;
	background: #e601ac;
	
}

.slogan-btn a {
	text-decoration: none;
	color: #fff;
}



.cuerpo-base-col-a {
	width: 670px;
	height: auto;
	margin: 0px 10px 0px 0px;
	float: left;
	
}


.cuerpo-base-col-b {
	width: 320px;
	height: auto;
	margin: 0px 0px 0px 0px;
	float: left;
	
}

.base-datos {
	width: 320px;
	height: auto;
	font-family: 'Nunito', sans-serif;
	font-weight:300;
	font-size:14px;
	font-style: italic;
	text-align: center;	
	color:#fff;
	line-height: 20px;
}


.btn-whatsapp {display:block; float:left; text-indent:-9000%;  margin:15px 0px 0px 65px;}
.btn-whatsapp {width:38px; height:32px; background:url(../img/icono-wa.png); background-position:0px;}
.btn-whatsapp:hover {background-position:-38px;}

.btn-facebook {display:block; float:left; text-indent:-9000%;  margin:15px 0px 0px 0px; }
.btn-facebook {width:38px; height:32px; background:url(../img/icono-fb.png); background-position:0px;}
.btn-facebook:hover {background-position:-38px;}

.btn-twitter {display:block; float:left; text-indent:-9000%; margin:15px 0px 0px 0px; }
.btn-twitter {width:38px; height:32px; background:url(../img/icono-tw.png); background-position:0px;}
.btn-twitter:hover {background-position:-38px;}

.btn-instagram {display:block; float:left; text-indent:-9000%; margin:15px 0px 0px 0px; }
.btn-instagram {width:38px; height:32px; background:url(../img/icono-in.png); background-position:0px;}
.btn-instagram:hover {background-position:-38px;}

.btn-linkedin {display:block; float:left; text-indent:-9000%; margin:15px 0px 0px 0px;}
.btn-linkedin {width:38px; height:32px; background:url(../img/icono-li.png); background-position:0px;}
.btn-linkedin:hover {background-position:-38px;}




.inicio-box {
	width: 320px;
	height: 220px;
	margin: auto;
	
}

.inicio-inc {
	width: 100px;
	height: 100px;
	margin: auto;
}

.inicio-titulo {
	width: 100%;
	font-family: 'Nunito', sans-serif; 
	font-weight:700;
	font-size:25px;
	text-align: center;
	font-style: italic;
	color:#454593;
}

.inicio-txt {
	width: 100%;
	margin: 10px 0px 0px 0px;
	font-family: 'Nunito', sans-serif; 
	font-weight:300;
	font-size:16px;
	line-height: 22px;
	text-align: center;
	color:#666666;

}
/* ------------------------ INICIO - TEXTO ------------------------- */

h1, h2, h3, h4, h5 { 
	width: 100%;
	font-family: 'Nunito', sans-serif; 
	margin: 0px;
}

h1 {
	font-weight:700;
	font-size:45px;
	color: #666666;
	text-align: center;
	font-style: italic;
}

h2 {
	font-weight:700;
	font-size:35px;
	color: #666666;
	text-align: center;
	font-style: italic;
}

h4 {
	
	font-weight:700;
	font-size:25px;
	color: #fff;
	text-align: center;
	font-style: italic;
}

.h1, .h4 {
	width: 80px;
	height: 1px;
	margin: auto;
	margin-bottom: 15px;
	background: #e601ac;
}

.br {
	width: 100%;		
	clear: both;
}


.br-30 {
	width: 100%;		
	height: 30px;
	clear: both;
}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */



/* ------------------------ INICIO - FORMULARIO -------------------- */
.form {
	width:100%;
	margin: 0px 0px 10px 0px;
}

.nombre, .email, .telefono, .mensaje {
	background:#6a6aa9;
	font-size:12px;
	border-radius:8px;	
	border:0; 
	padding: 5px 5px 5px 5px;
	font-family: 'Nunito', sans-serif; 
	font-weight: 300;
	font-size: 14px;
	color:#fff;
}

.nombre::placeholder, .email::placeholder, .telefono::placeholder, .mensaje::placeholder {
	color:#2e2e74;
  }


.nombre {
	width: 100%;
	height: 35px;	
	margin: 0px 0px 5px 0px;
}

.email {
	width: 330px;
	height: 35px;
	margin: 0px 6px 5px 0px;
}


.telefono {
	width: 330px;
	height: 35px;
	margin: 0px 0px 5px 0px;
}

.mensaje {
	width: 100%;
	height: 100px;
	margin: 0px 0px 5px 0px;
	line-height: 130%;
	resize: none;
}



.nombre:hover, .email:hover, .telefono:hover, .mensaje:hover
.nombre:focus, .email:focus, .telefono:focus, .mensaje:focus {
	background:#777777;
	color:#fff;	
}


.ultimo{
    margin-bottom: 0;
    position: relative
}


.btn-contacto {
	width: 120px;
	padding: 10px 0px 10px 0px;	
	margin-top: 5px;	
	border-radius:20px;	
	border: 1px solid #e601ac;
	font-family: 'Nunito', sans-serif;
	font-weight:300;
	font-size:15px;
	text-align: center;	
	color: #fff;
	background:#e601ac;
	  	
}

.btn-contacto:hover{
	background:#454593;
	color:FFF;
	text-decoration: none;
}


/* AJAX Gif y mensajes de exito o fracaso */
.hide{
    display: none;
}
.ajaxgif{
    position: absolute;
    right: 150px;
    top: 20px;
}
.msg{
	width: 120px;
	padding: 10px 0px 10px 0px;	
	margin-top: 5px;	
	border-radius:20px;		
	font-family: 'Nunito', sans-serif;
	font-weight:300;
	font-size:15px;
	text-align: center;	
	color: #fff;
	position: absolute;	
}
.msg_ok{
	background: #589D05;
	border: 1px solid #589D05;
}
.msg_error{
	background: red;
	border: 1px solid red;
}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */




.box-trabajos { 
	width: 320px; 
	float: left; 
	margin:auto; 
	margin-bottom:15px; 
	overflow:hidden; 
	position: relative; 
	border: #dbdbdb 1px solid; 
	border-radius:8px;
}

.box-trabajos:hover .box-trabajos-opaco{opacity:0.95}


.box-trabajos-titulo{
	text-align:center;
	color: #FFF;
	width: 320px;
	position: absolute;
	top: 50%;
	font-family: 'Nunito', sans-serif;
	font-weight:300;
	font-size:15px;
	font-size: 15px;
	margin-top: -25px;
	text-align: center;
}

.box-trabajos-txt {
	text-align:center;
	color: #FFF;
	width: 320px;
	position: absolute;
	top: 50%;
	font-family: 'Nunito', sans-serif;
	font-weight:300;
	font-size:15px;
	font-size: 13px;
	text-align: center;
}

.box-trabajos-opaco {
	width: 320px;
	height: 200px;
	background-color:#666666;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	transition: 0.5s;-moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s;
}




.box-clientes {
	width: 144px;
	margin:auto;
	overflow:hidden;
	position: relative;
	margin-bottom:15px;
	border: #dbdbdb 1px solid;	
	border-radius:8px;
}

.box-clientes:hover .box-clientes-opaco{opacity:0.95}
.box-clientes-titulo, .box-clientes-txt { text-align:center;}
.box-clientes-titulo{
	color: #FFF;
	width: 144px;
	position: absolute;
	top: 50%;
	font-family: 'Nunito', sans-serif; 
	font-weight:300;
	font-size: 14px;
	margin-top: -25px;
	text-align: center;
}

.box-clientes-txt {
	color: #FFF;
	width: 144px;
	position: absolute;
	font-family: 'Nunito', sans-serif; 
	font-weight:300;
	top: 50%;
	font-size: 12px;
	text-align: center;
}

.box-clientes-opaco {
	width: 144px;
	height: 144px;
	background-color:#666666;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	transition: 0.5s;-moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s;
}




/* ------------------------ INICIO - MOBIL ------------------------- */

@media screen and (max-width: 750px) {

	.cuerpo-base-col-a {
		width: 320px;
		margin: auto;
		float: none;
	}

	.cuerpo-base-col-b {
		margin: auto;
		float: none;
	}


	.form-nombre, .form-email, .form-telefono, .form-mensaje {
		width: 100%;
	}

}

/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */






/* ------------------------ INICIO - BOTON WHATSAPP----------------- */
#whatsapp {
	position: fixed;
	width:48px;
	height:48px;
	bottom:30px;
	right: 30px;
	z-index: 50;
}
	
#whatsapp:hover {
	width: 10px;
	height:10px;
	padding: 30px;
}

#whatsapp:hover .plus {
	animation: plus-in 0.15s linear; 
	animation-fill-mode: forwards;
}

#whatsapp:hover .edit {
	animation: edit-in 0.2s;
	animation-delay: 0.1s;
	animation-fill-mode: forwards;
}


#floating-button{
	width: 48px;
	height: 48px;
	position: fixed;
	bottom: 10px;
	right:10px;
	cursor: pointer;
}
.plus{
	color:white;
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0;
	margin: 0;
	line-height: 48px;
	animation: plus-out 0.3s;
	transition: all 0.3s;}
	

.edit{
	position: absolute;
	top: 0;
	display: block;
	bottom: 0;
	left: 0;
	display: block;right: 0;
	padding: 0;
	opacity: 0;
	margin: auto;
	line-height: 65px;
	transform: rotateZ(-70deg);
	transition: all 0.3s;
	animation: edit-out 0.3s;
}

@keyframes edit-in {
    from {opacity: 0; transform: rotateZ(-70deg);}
    to {opacity: 1; transform: rotateZ(0deg);}
}
@keyframes edit-out{
    from {opacity: 1; transform: rotateZ(0deg);}
    to {opacity: 0; transform: rotateZ(-70deg);}
}
@keyframes plus-in{
    from {opacity: 1; transform: rotateZ(0deg);}
    to {opacity: 0; transform: rotateZ(180deg);}
}
@keyframes plus-out{
    from {opacity: 0; transform: rotateZ(180deg);}
    to {opacity: 1; transform: rotateZ(0deg);}
}

/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */

/* ------------------------ INICIO - PAGINA ERROR ------------------ */
#error {width:100%; height:auto; margin: 20px 0px 0px 0px}
.error-cuerpo {width:550px; height:auto; margin:auto;  }
.error-titulo, .error-txt, .error-web {margin: auto; text-align:center; font-family: 'Nunito', sans-serif; font-weight: 300;text-decoration:none;}

.error-titulo{width:550px; margin-top:20px; font-size:56px;}
.error-txt {width:550px; font-size:23px; margin-top:25px;}
.error-web {width:550px; font-size:22px; margin-top:25px;}
.error-web a{color:#FFF; text-decoration:none;}
.error-img {width:320px; height:298px; margin-top:40px; margin:auto; background:url("https://www.volumenvisual.com/img/error.jpg") no-repeat;}

/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */