/*  z-index
    menu superior:1000
    background menu:950
    banner inferior: 600
    pestaña contacto: 500
    section sobre seccion:200
    section primer lugar:100
    section ocultar sobre otra:-50
    background seccion:-500
*/


/* Notifications CSS */
.notifications_btn .notifications-badge {width: 12px;height: 12px;border-radius: 100%;position: absolute;right: 15px;top: 3px;padding: 0 !important;background: rgba(var(--bs-secondary-rgb), 1);border: var(--bs-btn-bg) 2px solid;transition:.15s;}
.notifications_btn:hover .notifications-badge {border: var(--bs-btn-hover-bg) 2px solid;transition:.15s;}
.avatar {height: 40px;width: 40px;background-size: cover;}
.dropdown_user {min-width: 300px;}
.avatar_big {font-size: 20px;width: 50px !important;height: 50px !important;background-size: cover;}
.notification *:last-child {margin-bottom: 0 !important;}
#notifications.modal.right .modal-dialog,
#menu_panel.modal.right .modal-dialog {max-width: 400px;}


body{
    font-size: 16px;
    font-family: "Roboto", serif;
    padding-top: 126px;
}

a {
    color: #f5392e;
}

/*titles*/
.h1,
h1{
    font-size: 2.5rem;
}
.h2,
h2{
    font-size: 2rem;
}
.h3,
h3{
    font-size: 1.75rem;
}
.h4,
h4{
    font-size: 1.5rem;
}
.h5,
h5{
    font-size: 1.25rem;
}
.h6,
h6{
    font-size: 1rem;
}

.display-5{
	font-size: 2.5rem;
}


@media (min-width: 768px) { 
	.display-5{
		font-size: 3rem;
	}

}



/*buttons*/
.btn{
  border-radius: 30px;
}

.btn-danger {
  background-color: #F5392E;
  border-color: #F5392E;
  box-shadow: 10px 11px 29px -8px rgba(255, 0, 0, 0.5);
  -webkit-box-shadow: 10px 11px 29px -8px rgba(255, 0, 0, 0.5);
  -moz-box-shadow: 10px 11px 29px -8px rgba(255, 0, 0, 0.5);
}

.btn-danger:hover {
  background-color: #DB2F28;
  border-color: #DB2F28;
}

.bg-danger {
  background-color: #F5392E !important;
}


.card-shadow{
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
	border-radius: 12px;
}



/*effecto desenfoque modal*/
.modal-backdrop {
	 backdrop-filter: blur(5px);
	--bs-backdrop-opacity:initial;
	background-color:rgba(0, 0, 0, 0.6);
}
/*rounder*/
.rounded {
   border-radius: 12px!important;
}


/*scroll-margin-top*/
.scroll_margin_top{
	scroll-margin-top:170px;
}

/*sticky_top*/
.sticky_top {
  position: sticky;
	top: 170px;
}

/*pestañas*/
.nav.nav_seccion .nav-link {
color: #000;
}
.nav.nav_seccion .nav-link.active {
color: #fff;
background-color: #F5392E;
border-color:#F5392E;
box-shadow: 10px 11px 29px -8px rgba(255,0,0,0.5);
-webkit-box-shadow: 10px 11px 29px -8px rgba(255,0,0,0.5);
-moz-box-shadow: 10px 11px 29px -8px rgba(255,0,0,0.5);
border-radius: 30px;
}


/*card button horizontal*/
.card-button-horizontal {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
	border:none;
	width:100%;
  color: #000;
  padding: 32px 42px 32px 32px;
  text-decoration: none;
  background-image:url('https://confuturo.cdn.modyo.com/uploads/2bdd5fe0-8068-49e2-900d-4e37dc2982b5/original/arrow_black_right.webp');
  background-position: bottom 10px right 15px;
  background-repeat: no-repeat;
  background-size: 24px;
  transition: 0.3s;
 	box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.14);
}
.card-button-horizontal p {
  font-size: 1rem;
  line-height: 1.125rem;
}

.card-button-horizontal:hover {
  cursor: pointer;
  background-position: bottom 10px right 10px;
}



/*cross sites*/
.cross_sites {
  position: fixed;
  top: 0;
  z-index: 1001;
  background-color: #222;
}
.cross_sites .container {
  background-color: #222;
  height: 46px;
  padding-top: 10px;
}
.cross_sites .container .button {
  background-color: #222;
  color: #fff;
  position: relative;
  float: left;
  font-size: 16px;
  height: 100%;
  padding: 5px 20px;
  border-radius: 4px 4px 0 0;
	text-decoration:none;
}
.cross_sites .container .button:hover {
  background-color: #555;
  cursor: pointer;
}
.cross_sites .container .button.active {
  background-color: #fff;
  color: #000;
}




/*menu superior*/
.menu_superior {
  height: 80px;
  background-color: #fff;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
  position: fixed;
  top: 46px;
  z-index: 1000;
	
	 .desktop {
			height: inherit;
			display: flex;
			justify-content: space-between;
				
			 .logo {
					width: 180px;
					height: inherit;
					background-repeat: no-repeat;
					background-position: center;
					background-size: contain;
					background-image: url("https://confuturo.cdn.modyo.com/uploads/b8cc389f-061c-40cd-9507-901887c38b9f/original/logotipo.png");
				}
	
				.icon_menu_mobile{
					  width: 100px;
            height: 48px;
            font-size: 18px;
            font-weight: 600;
            margin-top: 15px;
            padding-top: 10px;
            background-image: url(https://confuturo.cdn.modyo.com/uploads/8539ffe6-b8b1-4dd1-9e03-43bca646bf3f/original/menu.png);
            background-position: center right;
            background-repeat: no-repeat;
            background-size: contain;
				}

		 
		  .navegacion {
					display: none;
					 .menu {
							display: flex;
							 > .item {
									display: flex;
									align-items: center;
									padding: 0 8px;
									background:none;
									border:none;
									font-size: 1.125rem;
								}
							 > .item:hover {
									background-color: #efefef;
									cursor: pointer;
								}
						 
						  .submenu {
								position: absolute;
								margin-top: 80px;
								
									 .item {
											display: none;
											padding-top: 20px;
										 
													.contenedor {
														float: left;
														width: 770px;
														border-radius: 12px;
														padding: 24px 32px;
														background-color: #fff;
														box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15);
														-webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15);
														-moz-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.14);
														
																> .titulo {
																	font-size: 24px;
																	line-height: 24px;
																	margin: 10px 0 15px 0;
																	font-weight: 600;
																}
														
																.lista_productos {
																	padding: 0;
																	width: 50%;
																	float: left;
																	
																						 a {
																								display: flex;
																								flex-direction: column;
																								/* padding: 14px 10px 14px 45px; */
																								padding: 14px 10px 14px 100px;
																								border-radius: 8px;
																								background-size: 90px;
																								background-repeat: no-repeat;
																								background-position: top 5px left -5px;
																								color: #000;
																								text-decoration: none;
																								height: 100px;
																								margin-bottom:10px;
																							}
																							a:hover {
																										cursor: pointer;
																										text-decoration:underline;
																							}

																						 .titulo {
																								line-height: 16px;
																								margin: 4px 0 8px 0;
																								font-weight: 600;
																								font-size: 1.125rem;
																							}
																							p {
																								color: #666;
																								font-size: 14px;
																								line-height: 18px;
																								margin: 0;
																							}
																	
																}
														
																.lista {
																	padding: 0;
																	width: 50%;
																	float: left;
																	margin-top:5px;
																	
																			 a {
																				font-size: 1.125rem;
																				display: flex;
																				flex-direction: column;
																				padding: 10px 0 10px 0px;
																				color: #000;
																				text-decoration: none;
																				 
																				  div {
																						font-weight: 400;
																					}
																			}
																	
																			a:hover {
																				color: #F5392E;
																				cursor: pointer;
																				background-position: top 12px left 14px;
																			}
																}
														
														
													}
										}
							}
						 
						}
			}
		 
		}
	
	
}

.background_menu {
    position: fixed;
    top: 0;
    z-index: 950;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
	  backdrop-filter: blur(5px);
}


@media (min-width: 1200px) { 
	.menu_superior {
		.desktop{
			.navegacion{
					display: flex;
			}
		}
	}
}



/*footer*/
.footer {
  background-color: #222;
	margin-top: 100px;
}
.footer .titulo_columna {
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  line-height: 18px;
  margin-top: 50px;
}
.footer ul {
  margin-top: 15px;
  padding-left: 0;
}
.footer ul li {
  margin-bottom: 5px;
}
.footer a {
  color: #D5D7D9;
  font-size: 14px;
  text-decoration: none;
}
.footer a:hover {
  color: #fff;
  cursor: pointer;
}

.footer .iconos {
  border-top: solid 1px #555;
  margin-top: 20px;
  margin-bottom: 30px;
  color: #fff;
  padding-top: 30px;
}



/*article_content*/
.article_content{
	img{
		max-width:100%;
	}
	.banner{
		display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 300px;
    border-radius: 12px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
		
		img{
		width:100%;
		}
	}
	
}

@media (max-width: 767.98px) { 
	.article_content{
    .banner{
        height: 200px;
    }
	 }
}



/*card horizontal*/
.card_horizontal{
        width: 100%;
        height: 120px;
        text-decoration: none;
        border: none;
        transition: 0.3s; 
	      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);

        .thumbnail{
					
						position: absolute;
						width: 100px;
						height: 100px;
						margin: 10px 0 10px 10px;
						border-radius: 6px;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
        }
        .contenido{
            display: flex;
            justify-content: center;
            flex-direction: column;
            padding-left: 140px;
            padding-right: 32px;
            height: 120px;
            
            h1{
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }
            p{
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical; 
                margin: 0;
                font-size: 14px;
                line-height: 18px;
            } 
        }
       
   
}
.card_horizontal:hover{
    cursor: pointer;
	   box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.15);
 }






/*formulario*/
.formulario_producto .enviando,
.formulario_producto .enviado{
	display:none;
}
.formulario_producto.state_1 .campos,
.formulario_producto.state_2 .campos{
	display:none;
}
.formulario_producto.state_1 .header,
.formulario_producto.state_2 .header{
	display:none;
}

.formulario_producto.state_1 .enviando{
	display:block;
}
.formulario_producto.state_2 .enviado{
	display:block;
}




/*offcanvasFormularioContacto*/

#offcanvasFormularioContacto {
	max-width: 90%;
}


#offcanvasFormularioContacto .contenedor_boton_cerrar{
	position:absolute;
	width: 100%;
}

#offcanvasFormularioContacto .formulario .banner{
	height:80px;
	width:80px;
	border-radius:70px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}

#offcanvasFormularioContacto .boton_cerrar{
	background-image:url(https://confuturo.cdn.modyo.com/uploads/95fea867-edbb-45a7-ba0a-2da38f8d07af/original/close.png);
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	width:36px;
	height:36px;
	margin:16px 16px 0 0 
}

#offcanvasFormularioContacto .boton_cerrar:hover{
	cursor: pointer;
}



/* estilo para escalar iframe de video*/
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*modulo breadcrumb*/
.modulo_breadcrumb{
		.parent{
				font-size: 1rem;
				line-height: 1.2;
				color: #1c1c1c;
				text-decoration: none;
				background: #EFEFEF;
				background: linear-gradient(90deg,rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 80%);
				border-radius: 30px;
				padding: 10px 20px;
				transition: 0.3s;
			
				span{
					color:red;
          			padding-right: 5px;
				}
		}
		.parent:hover{
        padding: 10px 15px;
		}
}




/*scroll*/
#offcanvasMenu{
	max-width: 90%;
}
#offcanvasMenu .titulo{
	padding: 0 34px 0 34px;
}
#offcanvasMenu .contenedor_boton_cerrar{
	position:absolute;
	width: 100%;
}

#offcanvasMenu .boton_cerrar{
	background-image:url(https://confuturo.cdn.modyo.com/uploads/08cd96b9-a0b9-4a47-a4d1-f5e95e6ba75e/original/close.webp);
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	width:36px;
	height:36px;
	margin:16px 16px 0 0 
}
#offcanvasMenu .boton_cerrar:hover{
  cursor: pointer;
}
#offcanvasMenu .menu_lateral{
	margin-top:56px;
}
#offcanvasMenu .menu_lateral .menu{
	padding: 30px 18px 20px 18px;
}





/*menu_lateral*/
.menu_lateral {
  background-color: #fff;
  border-radius: 16px;
}
.menu_lateral .titulo {
  font-size: 1.5rem;
  line-height: 1.5rem;
  font-weight: 500;
  padding: 42px 44px 0 44px;
}
.menu_lateral .menu {
  padding: 15px 24px 20px 24px;
}
.menu_lateral .menu a {
  color: #2E2E2E;
  text-decoration: none;
}
.menu_lateral .menu .item {
  display: flex;
  padding: 20px;
  font-size: 1.125rem;
  line-height: 1.125rem;
  background-repeat: no-repeat;
  background-position: center right 16px;
  background-size: 24px;
	border-radius: 8px;
	margin:7px 0;
	width: 100%;
  border: none;
	background-color:initial;
}
.menu_lateral .menu .item:hover {
  cursor: pointer;
  background-color: #f9f9f9;
}

.menu_lateral .menu>.item.active{
	background-color:#efefef;
	font-weight:500;
}

.menu_lateral .menu>.item.active::before {
}



.menu_lateral .menu > button.item {
	 background-image: url("	https://confuturo.cdn.modyo.com/uploads/e41b2222-bfb9-4cec-bb10-04399606f805/original/simple_arrow_bottom.png");
}
.menu_lateral .menu > button.item.open {
	background-image: url("	https://confuturo.cdn.modyo.com/uploads/8817230e-ff92-4afb-ae66-8e96924206de/original/simple_arrow_top.png");
}

.menu_lateral .menu > button.item.open  a{
}
.menu_lateral .menu > button.item a:hover {
  text-decoration: underline;
}



.menu_lateral .menu .sub_menu {
  display: none;
  padding-left:30px
}
.menu_lateral .menu .sub_menu.open {
  display: block;
}
.menu_lateral .menu .sub_menu .item {
  padding: 16px;
  font-size: 1rem;
  line-height: 1.25rem;
	margin: 10px 0px;

}
.menu_lateral .menu .sub_menu .item:nth-child(1){
	border-top: none;
}.menu_lateral .menu .sub_menu .item:last-child{
	border-bottom: none;
}

.menu_lateral .menu .sub_menu .item:hover {
	cursor: pointer;
	background-color:#f9f9f9;
}
.menu_lateral .menu .sub_menu .item.active {
	background-color:#efefef;
	font-weight:500;
}
.menu_lateral .menu .sub_menu .item.active::before {
}


/*btn arrow*/
	.btn_arrow{
				font-size: 1rem;
				line-height: 1.2;
				color: #1c1c1c;
				text-decoration: none;
				background: #EFEFEF;
				border-radius: 30px;
				padding: 10px 20px;
				transition: 0.3s;
				span{
					color:red;
				}
		}
		.btn_arrow:hover{
			  cursor:pointer;
        padding: 10px 15px;
		}
		.btn_arrow_left{
				float: left;
				background: linear-gradient(90deg,rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 80%);
				span{
          padding-right: 5px;
				}
		}
		.btn_arrow_right {
				float: right;
				background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 80%);
				span{
          padding-left: 5px;
				}
		}





/*Card perfil*/
#asignacion_perfil_confuturo{
	.card_perfil{
		display:flex;
		flex-direction:row;
		background-color: #fff;
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    transition: 0.3s;
		overflow:hidden;
		height:100px;
		.imagen{
			height: 80px;
      width: 100px;
      margin: 10px 0 0 0;
			border-radius:8px;
			background-position: center;
			background-size: contain;
			background-repeat:no-repeat;
			flex-shrink: 0;
		}	
		.titulo{
			display: flex;
      align-items: center;
		}
	}
	.card_perfil:hover{
			cursor: pointer;
			box-shadow: 15px 15px 30px 0px rgba(0, 0, 0, 0.35);
	}
}

@media (min-width: 992px) { 
#asignacion_perfil_confuturo{
	.modal-lg, .modal-xl {
        --bs-modal-width: 900px;
   }
	.card_perfil{
		flex-direction:column;
		height: 320px;
			.imagen{
			border-radius:0;
			height: 180px;
			width:initial;
      margin: 10px 0 0 0;
			background-position: top center;
		 }	
			.titulo{
			height:120px;
			}
	}
}
}



/*alert*/
.alerta{
	 display:none;
		position: fixed;
    z-index: 200;
    top: 0;
    margin-top: 140px;
		p{
			margin-bottom:0
		}
}