/**/
/**/
* {
margin: 0;
padding: 0;
transition: all .3s
}
html, body {
height: 100%;
}
body {
justify-content: center;
align-items: center;
}
/* SOMBRA EN CAJA */
#cajasombra{
background-color: #ddd;
width: 300px;
padding: 10px;
box-shadow: 5px 5px 0 #333;
-webkit-box-shadow: 5px 5px 0 #333;
-moz-box-shadow: 5px 5px 0 #333;
}
#sombraclara{
width: 200px;
padding: 10px;
background-color: #999;
color: #fff;
box-shadow: 2px 2px 2px #ffc;
-webkit-box-shadow: 2px 2px 2px #ffc;
-moz-box-shadow: 2px 2px 2px #ffc;
}
#cajanegra{
padding: 10px;
background-color: #000;
}
#sombraredondeada{
background-color: #090;
color: #fff;
width: 400px;
padding: 10px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
box-shadow: 15px -10px 3px #000;
-webkit-box-shadow: 15px -10px 3px #000;
-moz-box-shadow: 15px -10px 3px #000;
}
/*
Esta es una capa con sombra creada con CSS 3.
Esta caja la pongo sobre fondo negro, para hacer un elemento con sombra clara.
Esta capa tiene las esquinas redondeadas y la sombra se adapta a la forma de la capa, por lo que tendrá esquinas redondeadas.
*/
/*TERMINA SOMBRA EN CAJA*/
/*imagen reposive */
.img_logo{
max-width: 55%;
margin-top: 100px;
margin-bottom: 10px;
}
.img_logo:hover{
//transform: scale(1.1);
}
/*termina imagen reposive */
/* cuadro busqueda */
.box{
}
.container-1{
}
.container-1 input#search{
width: 80%;
height: 60px;
background: #ffffdd;
//background: #2b303b;
border: none;
font-size: 12pt;
//float: left;
color: #63717f;
padding-left: 45px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.42);
-webkit-transition: background .55s ease;
-moz-transition: background .55s ease;
-ms-transition: background .55s ease;
-o-transition: background .55s ease;
transition: background .55s ease;
}
.container-1 input#search::-webkit-input-placeholder {
color: #65737e;
}
.container-1 input#search:-moz-placeholder { /* Firefox 18- */
color: #65737e;
}
.container-1 input#search::-moz-placeholder { /* Firefox 19+ */
color: #65737e;
}
.container-1 input#search:-ms-input-placeholder {
color: #65737e;
}
.container-1 .icon2{
position: absolute;
//top: 80%;
margin-left: 16px;
margin-top: 18px;
z-index: 1;
color: #4f5b66;
-webkit-transform:scale(1.7); /* Safari and Chrome */
-moz-transform:scale(1.7); /* Firefox */
-ms-transform:scale(1.7); /* IE 9 */
-o-transform:scale(1.7); /* Opera */
transform:scale(1.7);
}
.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
outline:none;
background: #ffffff;
}
/* termina cuadro busqueda */
/* lateral redes sociales */
@font-face {
font-family: 'icomoon';
src: url('fonts_sm/icomoon.eot?i226ha');
src: url('fonts_sm/icomoon.eot?i226ha#iefix') format('embedded-opentype'),
url('fonts_sm/icomoon.ttf?i226ha') format('truetype'),
url('fonts_sm/icomoon.woff?i226ha') format('woff'),
url('fonts_sm/icomoon.svg?i226ha#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-facebook:before {
content: "\ea90";
}
.icon-instagram:before {
content: "\ea92";
}
.icon-twitter:before {
content: "\ea96";
}
.icon-youtube:before {
content: "\ea9d";
}
/* main */
.social-bar {
position: fixed;
right: 0;
top: 35%;
font-size: 1.5rem;
display: flex;
flex-direction: column;
align-items: flex-end;
z-index: 100;
}
.icon {
color: white;
text-decoration: none;
padding: .7rem;
display: flex;
transition: all .5s;
}
.icon-facebook {
background: #2E406E;
}
.icon-twitter {
background: #339DC5;
}
.icon-youtube {
background: #E83028;
}
.icon-instagram {
background: #3F60A5;
}
.icon:first-child {
border-radius: 1rem 0 0 0;
}
.icon:last-child {
border-radius: 0 0 0 1rem;
}
.icon:hover {
padding-right: 3rem;
border-radius: 1rem 0 0 1rem;
box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.42);
}
/*
Social-bar
*/
/* termina lateral sociales */
/* boton lupa */
/**/
/*Termina boton lupa */
#conteiner_caja2{
display: none;
}
#conteiner_caja{
/* position: relative;*/
width: 50%;
/* margin-left: 200px;*/
}
.lupa_buscar{
/*width: 100%;
height: 35px;
background-image: url('img/loupe.png');
/*background-color: transparent;*/
/*color: transparent;
border: none;
outline: none;
cursor: pointer;
z-index: 900;*/
width: 200px; /*ancho por defecto*/
background: #ededed url('search-icon.png') no-repeat 1px center; /*icono lupa*/
background-color: #ffd;
color: #ffd;
padding: 5px 5px 5px 5px;
border-radius: 55em;
-webkit-transition: all .5s; /* transición de .5seg a todos los elementos para chrome*/
-moz-transition: all .5s; /* transición de .5seg a todos los elementos para mozilla*/
-o-transition: all .5s; /* transición de .5seg a todos los elementos para ophera*/
transition: all .5s; /* transición de .5seg a todos los elementos*/
outline: none; /* ocultar el fucos automático de los input */
}
.lupa_buscar:focus{
width: 350px; /*tamaño del boton buscar al hacer click*/
padding-left: 30px; /*espacio entre el icono lupa y el placeholder*/
color: #000;
background-color: #FFF;
}
@media(max-width: 500px){
#conteiner_caja{
/*display: none;*/
}
#conteiner_caja2{
display: block;
position: relative;
width: 50%;
//margin-top: -50px;
margin-left: 0px;
}
.lupa_buscar2{
width: 75px; /*ancho por defecto*/
background: #ededed url('search-icon.png') no-repeat 1px center; /*icono lupa*/
padding: 9px 10px 9px 52px;
border-radius: 15em;
-webkit-transition: all .5s; /* transición de .5seg a todos los elementos para chrome*/
-moz-transition: all .5s; /* transición de .5seg a todos los elementos para mozilla*/
-o-transition: all .5s; /* transición de .5seg a todos los elementos para ophera*/
transition: all .5s; /* transición de .5seg a todos los elementos*/
outline: none; /* ocultar el fucos automático de los input */
}
.lupa_buscar2:focus{
width: 240px; /*tamaño del boton buscar al hacer click*/
padding-left: 52px; /*espacio entre el icono lupa y el placeholder*/
color: #000;
background-color: #FFF;
}
}
/* barra buscar */
/* forma boton sapsha*/
.boton {
text-decoration: none;
margin-top: 5px;
color: #fff;
font-weight: bold;
padding: 2px 12px;
font-size: 18px;
border-radius: 15px;
background-color: #666666;
box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
position: relative;
border-bottom: 1px solid rgba(255,255,255,0.2);
display: inline-block;
font-family: Arial, Helvetica, sans;
text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
}
.boton:hover {
box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
color: #fff !important;
}
.boton:active {
top: 3px;
box-shadow: 0 5px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
color: #fff !important;
}
.formaBoton {
border-radius: 6px;
padding-left: 8px;
padding-right: 25px;
}
/*AZUL*/
.azul {
background: #2a8ad8;
box-shadow: 0 7px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.azul:hover {
box-shadow: 0 5px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.azul:active {
box-shadow: 0 5px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}
/*ANARANJADO*/
.anaranjado {
background-color: #c37846;
box-shadow: 0 5px 5px #855031, 0 9px 0 #5e3a25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.anaranjado:hover {
box-shadow: 0 5px 5px #855031, 0 9px 0 #5e3a25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.anaranjado:active {
box-shadow: 0 2px 0 #5e3a25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
}
/*VERDE*/
.verde {
background-color: #7fc345;
box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.verde:hover {
box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.verde:active {
box-shadow: 0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
}
/* Efectos en Botones
Efecto 1
Efecto 2
Efecto 3
*/
/* TERMINA EFECTO DE BOTONES */
/* BOTOM LUPA DESPLEGABLE */
input[type="search_X"]{
width: 45px; /*ancho por defecto*/
background: #ededed url('search-icon.png') no-repeat 9px center; /*icono lupa*/
padding: 9px 10px 9px 32px;
border-radius: 15em;
-webkit-transition: all .5s; /* transición de .5seg a todos los elementos para chrome*/
-moz-transition: all .5s; /* transición de .5seg a todos los elementos para mozilla*/
-o-transition: all .5s; /* transición de .5seg a todos los elementos para ophera*/
transition: all .5s; /* transición de .5seg a todos los elementos*/
outline: none; /* ocultar el fucos automático de los input */
}
input[type="search_X"]:focus{
width: 130px; /*tamaño del boton buscar al hacer click*/
padding-left: 32px; /*espacio entre el icono lupa y el placeholder*/
color: #000;
background-color: #FFF;
}
/*
Document
Contenido del pie de página
*/
/* +++++++++++++++++++++++++++++++ */
/* Termina Pie de Pagina */
/*inicia paginacion */
.pagination{display:inline-block;padding-left:0;margin:18px 0;border-radius:4px}
.pagination>li{display:inline}
.pagination>li>a,.pagination>li>span{
position:relative;float:left;padding:6px 12px;line-height:1.42857143;text-decoration:none;color:#428bca;
background-color:#fff;border:1px solid #ddd;margin-left:-1px}
.pagination>li:first-child>a,.pagination>li:first-child>span{
margin-left:0;border-bottom-left-radius:4px;border-top-left-radius:4px}
.pagination>li:last-child>a,.pagination>li:last-child>span{
border-bottom-right-radius:4px;border-top-right-radius:4px}
.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{
color:#2a6496;background-color:#eee;border-color:#ddd}.pagination>.active>a,.pagination>.active>span,.pagination>
.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>
.active>span:focus{z-index:2;color:#fff;background-color:#428bca;border-color:#428bca;cursor:default}
.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{
color:#777;
background-color:#fff;
border-color:#ddd;cursor:not-allowed}
.pagination-lg>li>a,.pagination-lg>li>span{
padding:10px 16px;font-size:17px}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{
border-bottom-left-radius:6px;border-top-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{
border-bottom-right-radius:6px;border-top-right-radius:6px}
.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px}
.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-bottom-left-radius:3px;border-top-left-radius:3px}
.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-bottom-right-radius:3px;border-top-right-radius:3px}
.pager{padding-left:0;margin:18px 0;list-style:none;text-align:center}.pager li{display:inline}
.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}
.pager li>a:hover,.pager li>a:focus{text-decoration:none;background-color:#eee}
.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}
.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span{color:#777;background-color:#fff;
cursor:not-allowed}
/* termina paginacion */
.slider_pie{
display: none;
}
.menu_pie_principal
{
display: none;
}
.menu_pie
{
display: none;
}
.icono-menu
{
width: 30px;
}
.mini-logo
{
width: 35px;
}
.navbar-toggler img{
transition: all .6s;
-webkit-transform: scale(1.2) rotate(360deg);
transform: scale(1.2) rotate(360deg);
}
@media (max-width: 500px){
.slider_pie{
display: block;
}
.icono-menu
{
width: 25px;
margin-top: 4px;
}
.mini-logo
{
width: 35px;
}
.menu_pie_principal
{
width: 100%;
display: flex;
}
.flecha_izquierda{
width: 30%;
border-style: solid;
}
.flecha_izquierda p{
text-align: center;
font-size: 50px;
font-style: oblique;
color:white;
text-shadow: 2px 2px 4px #000000;
}
.flecha_derecha{
width: 30%;
border-style: solid;
}
.flecha_derecha p{
text-align: center;
font-size: 50px;
font-style: oblique;
color: white;
text-shadow: 2px 2px 4px #000000;
}
.menu_pie
{
display: flex;
width: 40%;
overflow-y: hidden;
overflow-x: hidden;
margin-top: 0px;
/*
animation-delay: .1s;
animation-duration: 16s;
animation-name: slidelin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
*/
}
.menu_pie:hover{
/*transition-property: all;
transition-duration: 16s;
transition-timing-function: linear;
transition-delay: .4s;
transform:translate(-700px,0)
*/
}
@keyframes slidelin{
from {
margin-left: 100%;
width: 40%
}
to {
margin-left: -200%;
width: 40%;
}
}
.cuadro_menu{
border-style: solid;
border-color: black;
border-width: 1px;
background-color: gray;
opacity: 0.5;
width: 125px;
height: 100px;
}
.cuadro_menu:hover{
transform: scale(1.1);
opacity: 1;
z-index: 999;
/*transition-timing-function: cubic-bezier(0, 1, 0.5, 1);*/
}
.cuadro_menu a:visited,a:link,a:active{
text-decoration: none;
color:black;
}
.top_menu{
display: none;
}
.down_menu{
display: none;
}
.down_menu_min{
display: block;
}
.img_logo{
/* max-width: 75%;
height: 130px;
margin-top: 10px;
margin-bottom: 30px;*/
}
.box{
magin: 0 auto;
width: 90%;
border:none;
background-color: #ffdfdf;
}
.container-1 input#search{
width: 90%;
height: 50px;
background: #ffffdd;
border: none;
font-size: 12pt;
float: center;
color: #63717f;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 3px;
box-shadow: 0 0 .3rem rgba(0, 0, 0, 0.42);
-webkit-transition: background .55s ease;
-moz-transition: background .55s ease;
-ms-transition: background .55s ease;
-o-transition: background .55s ease;
transition: background .55s ease;
align-content: center;
}
}