/*
Template Name: BOXWEB 2026
Author : boxweb
Author URI: https://www.boxweb.cl
Version: 2.0
Author: BOXWEB
Author URI: https://www.boxweb.cl
*/




@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
body,div,p,a,li,h1,h2,h3,h4,h5,h6,.mega-menu-link{
    font-family: 'Lato', sans-serif;
    text-align: justify;
}
body{
    background-color: #fff;
}

/*******************************************************************************
HEADER
*******************************************************************************/

#header{
    background: #002156;
}
.menu-top-1{
	display:flex;
	margin-top:10px;
	list-style:none;
	float:right;
}
.menu-top-1 li{
	padding:10px 5px 10px 5px;
	text-align:left !important;
}
.menu-top-1 a{
	color:#fff;
	text-decoration:none;
	font-size:12px;
	line-height:12px;
	text-align:left !important;
}
.menu-top-1 a:hover{
	color:#ccc;
}
.menu-top-1 a svg{
	width:16px;
	height:16px;
	fill:#ffffff;
}
/*menu principal*/
#menu{
    background: rgba(55,48,38,0.8);
    position: relative;
    width: 100%;
    height: 80px;
    z-index: 99999;
}

#menu-principal{
    list-style: none;
    display: flex;
    padding: 0px;
    margin-bottom: 0px;
    float: left;
}
#menu-principal li{
    padding:32px 6px 10px 6px;
}
#menu-principal li a{
    color: #fbfbfd;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: bold !important;
    transition: all 0.4s; 
}
#menu-principal li a:hover{
    text-decoration: none;
    color: #D4AF37;
}

#mega-menu-wrap-navegation #mega-menu-navegation > li.mega-menu-item > a.mega-menu-link{
    padding: 0px 6px 0px 6px !important;
}
#section-banner{
	display: flex;
	align-items: center !important;
	justify-content: center;
	height: 100%;
}

/*MENU NUESTRA COMUNA*/
.menu-nuestra-comuna{
    background: rgba(56,203,201,0.95) !important;
}
#mega-menu-item-16 > a:hover{
    color: rgb(56,203,201) !important;
}

/*MENU MUNICIPIO*/
.menu-municipio{
    background: rgba(7,70,166,0.95) !important;
}
#mega-menu-item-17 > a:hover{
    color: rgb(7,70,166) !important;
}
/*MENU DEPARTAMENTOS*/
.menu-departamentos{
    background: rgba(238,28,92,0.95) !important;
}
#mega-menu-item-18 > a:hover{
    color: rgb(238,28,92) !important;
}
/*MENU SERVICIOS MUNICIPALES*/
.menu-servicios{
    background: rgba(255,174,0,0.95) !important;
}
#mega-menu-item-19 > a:hover{
    color: rgb(57,24,112) !important;
}

/*MENU EDUCACION*/
.menu-educacion{
    background: rgba(44,167,214,0.95) !important;
}
#mega-menu-item-10000 > a:hover{
    color: rgb(26,224,161) !important;
}

/*TURISMO*/
.menu-turismo{
    background: rgba(167,214,44,0.95) !important;
}
#mega-menu-item-10000 > a:hover{
    color: rgb(26,224,161) !important;
}

/*SALUD*/
.menu-salud{
    background: rgba(255,112,126,0.95) !important;
}
#mega-menu-item-10000 > a:hover{
    color: rgb(26,224,161) !important;
}

.mega-menu-megamenu > .mega-sub-menu{
	position:fixed !important;
}

.menu-nuestra-comuna,.menu-departamentos,.menu-municipio,.menu-servicios,.menu-educacion,.menu-turismo,.menu-salud{
    padding: 30px !important;
    min-width: 800px !important;
    min-height: 360px !important;
    position: fixed !important;
    left: 0px !important;
	width:100% !important;
}
.mega-menu-link:after{
    content: "" !important;
}


/*MEGA MENU*/
.mega-sub-menu .mega-menu-link{
    color:#fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.mega-block-title{
    font-size: 24px !important;
}
.mega-block-title,.mega-menu-item div{
    color:#fff !important;
}
.mega-sub-menu li.mega-menu-item{
    border-bottom: 1px solid #fff !important;
}
.delete-border li.mega-menu-item{
    border-bottom: 0px solid #fff !important;
}


.mega-current-menu-item a{
    color: #D4AF37 !important;
    text-decoration: none;
    font-weight: bold !important;
}

li.mega-menu-item > a.mega-menu-link{
font-size:13px !important;	
}






.sub-menu{
    list-style: none;
    width: 100%;
    left: 0px;
    padding: 20px 20px 20px 20px;
    background: #002156;
    position: absolute;
    z-index: 999999999;
    display: none;
}
.sub-menu li{
    padding: 1px 0px 1px 0px !important;
    border-bottom: 1px solid #ccc;
}
.sub-menu li a{
    font-size: 12px !important;
    color: #fff !important;
    padding: 10px 4px 10px 4px !important;
}
.sub-menu li a:hover{
    color: #D4AF37 !important;
}
.mega-menu-link:hover,.mega-current-menu-ancestor > .mega-menu-link,.mega-current-menu-item > .mega-menu-link{
    color: #D4AF37 !important;
    font-weight: bold !important;
}



/*botonera*/
#botonera{
    position: absolute;
    z-index: 9999;
    top: 100px;
    display: flex;
    right: 10px;
    background: rgba(0,0,0,0.6);
}
#botonera img{
    width: 200px;
}
#botonera div{
    margin-right: 20px;
}

/*titulo general*/
h1{
    color: #fff;
    font-size: 15px;
    background: #0071BC;
    padding: 8px 20px 8px 20px;
    margin: 0px 0px 0px 0px;
}

.so-widget-sow-image h3{
    font-size: 11px;
    color: #fff;
    text-align: center;
    padding: 10px 20px 10px 20px;
    background: rgba(0,48,120,0.6);
    position: relative;
    margin: 0 auto;
    margin-top: -44px !important;
    font-weight: 600;
    max-width: 140px;
    height: 44px;
}

.container-title{
    background: #42cecc;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    padding: 10px 6px 10px 6px;
    text-transform: uppercase;
    margin-bottom: 30px;
}
.news-title{
    font-size: 42px;
    font-weight: 700;
    color: #222;
    margin: 0;
}
.news-detail {
    margin: 0px 0px 10px 0px;
    color: #777;
    font-size: 16px;
}

/*noticias*/
.single-titulo{
    color: #fff;
    line-height: 15px;
    height: 50px;
}
.single-titulo a{
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    line-height: 14px;
    font-style: italic;
    text-transform: uppercase;
}
.single-titulo a:hover{
    color: #77c9ef;
}

.single-fecha{
    font-weight: 400;
    color: #fff;
    line-height: 12px;
    font-size: 10px;
}
.single-img{
    width: 100%;
    height: 250px;
    background-position: center center;
    background-size: cover;
    transition: all ease 0.5s;
    transform: scale(1);
}
.single-img:hover{
    opacity: 0.7;
    transform: scale(1.1);
}
.single-resumen{
    margin-top: 4px;
    color: #fff;
    font-size: 12px;
    line-height: 13px;
}
.single-box-text{
    background: rgba(105,101,101,0.8);
    padding: 10px;
    //position: absolute;
    height: 80px;
    //margin-top: -80px;
    width: 100%;
}
.single-texto-interior{
    text-align: justify;
}
.single-texto-interior img{
    max-width: 100% !important;
    height: auto !important;
}

/*LAST NEWS*/
.ultimas-entradas {
    margin-top: 20px;
}

.card-blog {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
    margin-bottom: 30px;
    transition: all .3s;
}

.card-blog:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.card-body {
    padding: 20px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
    min-height: 44px;
}

.card-title a {
    color: #222;
    text-decoration: none;
}

.card-title a:hover {
    color: #337ab7;
}

.card-text {
    color: #666;
    min-height: 40px;
    margin-bottom: 15px;
}

.card-body .btn {
    border-radius: 30px;
    padding: 8px 18px;
}
.btn-ver-todas{
    border:2px solid #333;
    background:#fff;
    color:#333;
    border-radius:30px;
    padding:10px 30px;
    transition:all .3s ease;
}

.btn-ver-todas:hover{
    background:#333;
    color:#fff;
    text-decoration:none;
}


.caption,#envirabox-title-float-wrap{
    display: none !important;
}

.pagination-col{
    list-style: none;
    display: flex;
}
.pagination-col li{
    background: #0071BC;
    padding: 10px;
    margin-right: 5px;
}
.pagination-col a{
    padding: 12px;
    font-size: 15px;
    color: #fff;   
}
.pagination-active{
    background: #FF9C00 !important;
}




/*page*/
.page-title{
    font-size: 26px;
    font-weight: bold;
    border-bottom: 3px solid #000;
    text-transform: uppercase;
    margin-bottom: 20px;
}




/*BANNER*/
.tparrows{
    background: #FF9C00 !important;
}
.tp-caption{
    text-align: right !important;
}
.tp-caption span{
    font-size: 40px !important;
    line-height: 55px !important;
    text-align: right !important;
    background-color: rgba(3,198,221,0.8)!important;
    font-weight: bold !important;
    padding: 0px 20px 0px 20px !important;
}
.tp-withaction img:hover{
    cursor: pointer;
}



.btn-sec a{
    width: 100%;
    height: 80px;
    line-height: 40px !important;
    text-transform: uppercase;
    border-radius: 0px !important;
    border: 0px !important;
    font-size: 20px !important;
}



/*GALERIAS*/

.envira-gallery-image{
    padding: 10px !important;
}

/*RRSS-SIDE-RIGHT*/
#rrss{
    width: 46px;
    height: 240px;
    position: fixed;
    background: rgba(10,122,226,0.9);
    right: 0px;
    top: 40%;
    z-index: 999999999;
    text-align: center;
}
#rrss img{
    margin-top: 11px;
}

/*FOOTER*/
#footer{
	background:#2f343a;
	padding:50px 10px 50px 10px;
	margin-top:50px;
}
.footer-logo img{
	margin-bottom:20px;
}
.footer-title{
	font-size:14px;
	color:#fff;
}
.footer-address{
	font-size:14px;
	color:#fff;
}
.footer-link a{
	color:#fff;
	font-size:15px;
	text-decoration:none;
	display:block;
	margin-top:4px;
}
.footer-link a:hover{
	color:#ccc;
}
.footer-rrss{
	list-style:none;
	padding:0px;
	margin:0px;
	display:flex;
	margin-top:10px;
	gap:8px;
}
.footer-rrss svg{
	fill: #ffffff;
	width:34px;
	height:34px;
}
.footer-rrss svg:hover{
	fill: #cccccc;
}



/*
ESTILOS CONTACT FORM 7
*/
.wpcf7-form label{
    width: 100%;
}
.wpcf7-form-control{
    width: 100%;
    padding: 6px 10px 6px 10px;
}
.wpcf7-submit{
    background-color: #002156;
    border: 0px;
    padding: 10px;
    color: #fff;
    text-transform: uppercase; 
    width: 200px;
}
.wpcf7-textarea{
    height: 100px;
}




/* ===========================================
   CARRUSEL HOME
=========================================== */

/* Espaciado entre tarjetas */
.slider-home .tns-item {
    padding: 0 10px;
}

/* Enlace */
.slider-home a {
    display: block;
    text-decoration: none;
    transition: all 0.25s ease;
}

/* Hover */
.slider-home a:hover {
    transform: translateY(-4px);
}

/* Imagen */
.slider-home img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 16px;
    transition: transform 0.25s ease;
}

.slider-home a:hover img {
    transform: scale(1.03);
}

/* Título */
.slider-home h4 {
    margin: 16px 0 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

/* ===========================================
   FLECHAS (solo Tiny Slider)
=========================================== */

.tns-controls {
    text-align: center;
    margin-bottom: 15px;
}

.tns-controls button {
    width: 42px;
    height: 42px;
    margin-left: 8px;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);
    color: #1f5f99;

    font-size: 22px;
    font-weight: bold;
    line-height: 42px;

    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    opacity: 0.9;
}

.tns-controls button:hover {
    background: #ffffff;
    opacity: 1;
    transform: scale(1.05);
}




@media screen and (max-width:960px){
    #main-box{
        padding: 0px 0px 0px 0px !important;
    }
   .menu-top-1{
		display:block;
		margin-top:0px;
		float:none;
	    padding:0px;
	}	
    .menu-nuestra-comuna,
	.menu-departamentos,
	.menu-municipio,
	.menu-servicios,
	.menu-educacion,
	.menu-turismo,
	.menu-salud{
        position: relative !important;
        min-width: auto !important;
        min-height: auto !important;
    }
	.menu-top-1 li{
		padding:2px 5px 2px 5px;
	}
	.menu-top-1 a{
		font-size:12px;
		line-height:12px;
	}
   
    #botonera{
        position: relative;
        top: 0px;
        background: rgba(55,48,38,0.8);
        right: 0px;
    }
    #botonera div{
        margin: 10px 0 10px 0;
    }
    .tp-caption span{
        font-size: 20px !important;
        line-height: 25px !important;
        text-align: right !important;
        background-color: rgba(3,198,221,0.8)!important;
        font-weight: bold !important;
        padding: 0px 20px 0px 20px !important;
    }
	
	
	
	
	#menu{
		position:absolute;
		top:0px;
		background:rgba(55,48,38,0.0);
		width:100%;
		right:0px;
	}
	
	 #mega-menu-wrap-navegation{
        left:0px !important;
        right: 20px !important;
        top: 20px !important;
    }
    .mega-menu-megamenu > .mega-sub-menu{
		position:relative !important;
	}
    #mega-menu-wrap-navegation #mega-menu-navegation li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-column{
        width: 100% !important;
    }
	
	
	
	
	
	
	
	
	.single-box-text{
        height: 100px;
        margin-top: -100px;
    }
    .single-titulo{
        height: 70px;
    }
    .single-titulo a{
        font-size: 13px;
        line-height: 13px;
    }
    .container-title{
        font-size: 18px;   
    }
	
}