/*
Theme Name: quadion-marca
Theme URI: https://www.quadiontech.com/
Author: Sebastian Garcia
Author URI: https://www.quadiontech.com/
Description: Este tema está diseñado para la creación de manual de marca de Quadion Technologies.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.quadiontech.com/
Text Domain: Quadion Manual de Marca
Tags: two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/*QUADION COLORS*/
:root {
--quadion-azul: #007496;
--quadion-negro: #010101;
--quadion-amarillo: #F99D1C;
--quadion-blanco: #F5F6F6;
--quadion-azulOscuro: #254462;
--quadion-gris: #838383;

--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007496'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

@font-face {
	font-family: 'Open Sans';
	src: url(./assets/fonts/OpenSans-VariableFont_wdth\,wght.ttf);
	font-weight: 300 800;
}

@font-face {
	font-family: 'Open Sans Italic';
	src: url(./assets/fonts/OpenSans-Italic-VariableFont_wdth\,wght.ttf);
	font-weight: 300 800;
}

html {
	margin-top: 0!important;
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
}

body {
	-webkit-animation: bugfix infinite 1s;
	font-family: 'Open Sans',sans-serif;
	font-size: 16px;
	display: flex;
}

body > .content{
	box-shadow: -2px 0px 5px 0px rgba(0,0,0,0.25);
	-webkit-box-shadow: -2px 0px 5px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: -2px 0px 5px 0px rgba(0,0,0,0.25);
}

.content{
	display: flex;
	flex-direction: column;
}

p {
	font-size: 1rem;
	margin: 0;
}

a,
a:visited {
	text-decoration: none;
	color: var(--quadion-azul);
}
a.btn,
a:visited.btn {
	color: var(--quadion-blanco);
}

a:not(.logo>a):hover, 
.btn.btn-download:hover{
	opacity: 0.7;
}

a:focus,
button:focus,
input[type="submit"]:focus,
input[type="search"]:focus {
	text-decoration: none;
	outline: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

label {
	cursor: pointer;
}

.screen-reader-text {
	position: absolute;
	left: -9999px;
}

h1,
h1 a,
h2,
h2 a,
h3,
h3 a,
h4,
h4 a,
h5,
h5 a,
h6,
h6 a {
	margin: 0;
}

h1 {
	font-size: 3rem;
	font-weight: 800;
}

h2,
h2 a {
	font-size: 1.875rem;
	font-weight: 800;
}

h3,
h3 a {
	font-size: 1.625rem;
	font-weight: 700;
}

h4,
h4 a {
	font-size: 1.25rem;
}

h5 {
	font-size: 0.875rem;
}

h6 {
	font-size: 0.75rem;
	font-weight: 400;
}

.section-title {
	padding-bottom: 25px;
}

.section-title h1{
	color: var(--quadion-azul);
	line-height: 1.15;
}

.section-title > .row:first-child{
	padding-bottom: 1rem;
}

.logo{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;

}

.logo a img {
	width: auto;
	max-height: 43px;
	border: 0;
	max-width: 220px;
}



.sidebar {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 1.25rem;
	background: radial-gradient(circle, #838383 -10%, transparent 10.01%);
	background-color: white;
	background-size: 6px 6px;
	max-width: 360px;
	position: sticky;
    top: 0;
	line-height: 1.25;
	margin-right: 5px;
}

.sidebar .menu li a {
	padding-left: 10px;
}

.sidebar-header, 
.offcanvas-header {
	display: flex;
	align-items: center;
	border-bottom: 4px solid var(--quadion-azul) ;
	height: 90px;
	margin: 0 -25px 0 -20px;
}

.page-menu,
.offcanvas-body > .menu{
	padding-left: 10%;
	padding-right: 1.25rem;
}

.cartel-slack {
	background-color: #F4F4F5;
	margin-left: -1.25rem;
	display: flex;
	flex-direction: column;
	padding: 0.625rem 0.9375rem 0.625rem 0;
    max-width: 320px;


}

.cartel-slack > * {
	padding-left: calc(10% + 1.5rem);	
}

.cartel-slack img {
	margin-top: -0.3125rem;
	max-width: 2.1875rem;
}



.hamburguer-btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-menu li {
    padding-bottom: 0.3125rem;
}

.page-menu li a {
	color: var(--quadion-negro);
	
}

.page-menu li a:hover {
	color: var(--quadion-azul);
	opacity: 1;
	font-weight: 600;
}


.page-menu li a[aria-current="page"] {
	font-weight: 800;
	color: var(--quadion-azul);
	position: relative;
}

.page-menu li a[aria-current="page"]::before {
	width: 5px;
	height: 5px;
	display: block;
	color: var(--quadion-azul);
	position: absolute;
	left: 0px;
	top: 0px;

}


.offcanvas.offcanvas-start {
	background-color: var(--quadion-azul);	
	max-width: 360px;
	padding: 0 1.25rem;
}

.offcanvas.offcanvas-start .offcanvas-header{
	border-bottom-color: transparent;
	background-color: var(--quadion-blanco);
	max-width: 360px;
}

.offcanvas.offcanvas-start .offcanvas-header .btn-close{
	color: var(--quadion-azul);
	--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007496'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
	opacity: 1;
	padding-left: 2.5rem;

}

.offcanvas-header .btn-close:hover,
.hamburguer-btn:hover{
	opacity: 0.7;
}

.offcanvas.offcanvas-start .offcanvas-body{
	padding: 0 1.25rem;
}


.offcanvas.offcanvas-start .offcanvas-body nav ul.menu li {
	padding-top: 1rem;
}

.offcanvas.offcanvas-start .offcanvas-body nav ul.menu li a{
	font-size: 1.875rem;
	font-weight: 800;
	line-height: 1;
	color: var(--quadion-blanco);
}

.lang-menu{
	padding-top: 2rem!important;
}

.lang-menu a {
    font-weight: 500!important;
    font-size: 1.25rem!important;
	cursor: default;
}

.lang-menu a:hover{
	opacity: 1!important;
}

.lang-menu .sub-menu {
    display: flex;
}

.lang-menu .sub-menu li {
    padding-top: 0!important;
}

.lang-menu .sub-menu li:not(.lang-menu .sub-menu li:last-child) {
    padding-right: 0.875rem;
}

.lang-menu .sub-menu li a {
    font-size: 1rem!important;
    font-weight: 300!important;
	cursor: pointer!important;
}

.lang-menu .sub-menu li.current-lang a {
	text-decoration: underline!important;
}

.container.content {
    padding: 1.25rem 6rem 1.25rem 6rem;
	overflow: hidden;
    margin: 0;
}

.container.content > .page-navigation {
	padding: 1.25rem 0;
	border-top: 1px solid var(--quadion-gris);
}

.content .accordion .accordion-button.collapsed,
.content .accordion .accordion-button{
	border: 1px solid var(--quadion-azulOscuro);
    border-radius: 40px!important;
	box-shadow: none;
	font-weight: 500;
}

.content .accordion .accordion-button {
    background: var(--quadion-azulOscuro);
	color: var(--quadion-blanco);
}

.content .accordion .accordion-button.collapsed {
	background: transparent;
	color: var(--quadion-azulOscuro);
}



.accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23254462'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f5f6f6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


.accordion  .accordion-body {
	font-size: 0.875rem;
}

.accordion .wrapper-imagen {
	display: flex;
	justify-content: flex-start;
	align-items: center;

}

.accordion .wrapper-imagen img {
	max-width: 100%;
	max-height: 300px;
}



.card .wrapper-imagen{
	display: flex;
    justify-content: center;
    align-items: center;
}

.card .wrapper-imagen img {
	max-width: 95%;
	max-height: 100px;
	border-radius: 6px;
}


.btn-primary-quadion, .btn-primary-quadion:hover{
	background-color: var(--quadion-azul);
	color: var(--quadion-blanco);
	border-color: var(--quadion-azul);
	font-size: 0.875rem;
	
}


.btn-primary-quadion:hover > a{
	color: var(--quadion-blanco);
}




.logo-post .logo-container{
	display: flex;
	justify-content: center;
	height: 200px;
	align-items: center;
	margin-top: 60px;
}


.logo-post .logo-container img{
	max-width: 60%;
	height: fit-content;
	object-fit: contain;
}


#logo label{
	font-size: 0.875rem;
	font-weight: 700;
}

#logo label.label-negativo{
	color: var(--quadion-blanco);
	display: none;
}

#positivo-negativo{
	border-radius: 5px;
}

.form-switch input.form-check-input,
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
	--bs-form-check-bg: var(--quadion-azul);
	border-color: var(--quadion-azul);
	box-shadow: none;
	cursor: pointer;
}

.form-check-input:checked{
	background-color: var(--quadion-azulOscuro);
    border-color: var(--quadion-azulOscuro);
	box-shadow: none;
}




#tamanos-minimos img{
	max-width: 70%;
	object-fit: contain;
}

#area-seguridad img, #isotipo img{
	max-width: 90%;
	object-fit: contain;
}

.info{
	color: var(--quadion-azul);
}

#isotipo h6{
	color: var(--quadion-azul);
	font-weight: 600;
}

#isotipo .favicons img{
	max-width: 100%;
	object-fit: contain;
	border-radius: 6px;
}

#isotipo  .merchandising img{
	max-height: 90%;
}

.merchandising, .favicons{
	height: 45%;
}

section{
	margin-top: 20px;
	padding: 40px 0 20px 0;
	border-top: 1px solid var(--quadion-gris);
}

section:last-child{
	border-bottom: 1px solid var(--quadion-gris);
}

section#encabezado{
	margin-top: 60px;
	border: 0;
}

.btn{
	font-weight: 500;
}

.btn.btn-download{
	background-color: var(--quadion-azul);
	border-color: var(--quadion-azul);
	color: var(--quadion-blanco);
	font-size: 0.875rem;
	font-weight: 700;
	padding: 0 15px;
	border-radius: 30px;
	min-width: fit-content;
	text-wrap: nowrap;
}


.btn.btn-download img {
    max-width: 12px;
    margin: 0 8px 0 4px;
}

.btn.btn-download.btn-negativo{
	background-color: var(--quadion-blanco);
	border-color: var(--quadion-blanco);
	color: var(--quadion-azul);
}

a.btn-negativo{
	display: none;
}

#banner-tipografia{
	font-size: 140px;
	font-weight: 800;
	margin: 1rem -11rem 0 -6rem;
	position: absolute;

}

#banner-tipografia > div{
	overflow: hidden;
}

#banner-tipografia span{
	transform: translateX(-25px);
}


#familia-tipografica {
	margin-top: 250px;
	border: 0;
}

#familia-tipografica li{
	font-size: 2rem;
	line-height: 1.25;
}

.familia_tipografica_ejemplo{
	font-size: 200px;
	line-height: 0.8;
	font-weight: 800;
}

.peso_tipografico_ejemplo {
	/* font-size: 40px; */
	font-size: 48px;
	justify-content: space-between;
	line-height: 1.07;
	padding-right: 10px;
	
}

.section-navigation{
	display: flex;
	padding: 2rem 4.5rem;
	background-color: #ffffff;
	position: fixed;
	z-index: 999;
}

.section-navigation a{
	font-size: 0.875rem;
	color: var(--quadion-negro);
	padding-right: 50px;
	font-weight: 800;
}

.section-navigation a.active{
	color: var(--quadion-azul);
	font-weight: 800;
}

.scrollspy-example{
	position: relative;
	height: 100%;
	overflow-y: auto!important;
}

.paleta-ampliada{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 15px;
}

.valor-color-paleta{
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	color: var(--quadion-blanco);
	font-size: 0.875rem;
	text-transform: uppercase;
	z-index: 99;
	position: relative;
}


.valor-color-paleta .bi-copy{
	position: absolute;
	display: none;
	right: 7px;
	top: 5px;
}

.valor-color-paleta:hover .bi-copy{
	display: block;
}



#paleta-iconografica .valor-color-paleta:nth-child(2){
	transform: translateX(-25px);
	z-index: 2;
}

#paleta-iconografica .valor-color-paleta:nth-child(2) span{
	transform: translateX(10px);
}

#paleta-iconografica .valor-color-paleta:nth-child(3){
	transform: translateX(-50px);
	z-index: 1;
}

#paleta-iconografica .valor-color-paleta:nth-child(3) span{
	transform: translateX(10px);
}


.dona-hole{
	fill: transparent;
}

.dona-ring,
.dona-segment-1,
.dona-segment-2,
.dona-segment-3 {
  fill: none;
  stroke-width: 3;
}

.dona-ring {
  stroke: var(--quadion-azul);
}


.dona-segment-2 {
  stroke: var(--quadion-gris);
  stroke-dasharray: 50 50;
  stroke-dashoffset: -55;
}

.dona-segment-3 {
  stroke: var(--quadion-amarillo);
  stroke-dasharray: 20 80;
  stroke-dashoffset: -85;
}


.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 5px 16px;
	transition: 0.3s;
	font-size: 0.875rem;
}
  
  /* Change background color of buttons on hover */
  .tab button:hover {
	opacity: .7;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
	border-bottom: 2px solid var(--quadion-azul);
	color: var(--quadion-azul);
	font-weight: 700;
  }
  
  /* Style the tab content */
  .tabcontent {
	display: none;
	padding: 10px 0;

  }

.color-dropdown-container{
	display: flex;
	align-items: center;
	justify-content: center;
}
	
	
.color-dropdown-container .col-4{
	display: flex;
	align-items: center;
	justify-content: center;
}


.dropdown-item-color{

	display: flex;
	align-items: center;
	text-transform: uppercase;

}

.color-budget{
	width: 40px;
	height: 20px;
	border-radius: 20px;
	display: flex;
	margin-right: 5px;
}

.btn-dropdown-color,
.btn-dropdown-color:hover{
	display: flex;
	align-items: center;
	background-color: transparent;
	color:  var(--quadion-azul);
	border: 1px solid var(--quadion-azul);
	border-radius: 50px;
	padding: 5px;
}

.btn-dropdown-color.dropdown-toggle{
	text-transform: uppercase;
	font-size: 0.875rem;
}

.btn-dropdown-color.dropdown-toggle::after{
	border-top: 8px solid;
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
}

.wrapper-grafico .tabcontent{
	background-color: #F4F4F5;
	border-radius: 20px;
	
}

.grafico{
    padding: 20px 10px;
	position: relative;
	height: 400px;
	margin: 0;
}

.bar-chart {
	display: flex;
	width: 100%;
	height: 360px;
	position: relative;
}
   
.bar {
	width: 20px;
	display: flex;
	align-items: flex-end;
	justify-content: center;

}

.bar.barra-color-1{
	background-color: #009886;
}

.bar.barra-color-2{
	background-color: #254462;
}
   
.barras {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 30px 30px 0 30px;
    border-bottom: 1px solid var(--quadion-gris);
    margin-left: 44px;
}

.barras .bar-wrapper{
	display: flex;
	height: 100%;
	align-items: flex-end;
	width: 45px;
	justify-content: space-between;
}

.axis-y {
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: space-between;
    height: 100%;
    padding: 30px 20px 0px 0px;
    border-right: 1px solid var(--quadion-gris);
}

.axis-y span{
	font-size: 14px;
	color: var(--quadion-gris)
}

.globo {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	color: var(--quadion-blanco);
	position: absolute;
}

.globo.globo-color-1{
	width: 90px;
	height: 90px;
	background: #7a2a90;
	left: 60%;
	top: 10%;
}

.globo.globo-color-2{
	width: 150px;
	height: 150px;
	background: #79983d;
	left: 20%;
	top: 10%;
	font-size: 1.75rem;
}

.globo.globo-color-3{
	width: 240px;
	height: 240px;
	background: #007297;
	left: 40%;
	top: 35%;
	font-size: 2.5rem;
}

.paleta-principal-wrapper{
	display: flex;
	margin: 0 -11rem 0 -6rem;
}

.color-paleta-principal{
	width: 20%;
	color: var(--quadion-blanco);
	height: 250px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 15px;
	position: relative;
	cursor: pointer;
	border: 0;
	border-right: 1px solid #fff;
}

.color-paleta-principal .bi-copy{
	position: absolute;
	display: none;
	right: 20px;
	top: 20px;

	
}

.color-paleta-principal:hover .bi-copy{
	display: block;
}

.color-paleta-principal .paletas{
	display: flex;
}

.color-paleta-principal h3{
	text-transform: uppercase;
	padding-bottom: 20px;
	letter-spacing: 0.1em;
}

.color-paleta-principal p{
	font-size: 0.75rem;
	text-align: left;
}

.imagen-banner-wrapper {
    margin: 0 -11rem 0 -6rem;
}

.imagen-banner-wrapper img{
	width: 100%;
}

.color-iconografias{
	max-height: 315px;
}

.color-iconografias img{
	max-height: 100%;
}

.iconografia-seleccion-ejemplos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
}

.iconografia-seleccion-ejemplos .ejemplo {
	background-color: var(--quadion-blanco);
	border-radius: 5px;
	padding: 15px;
	display: flex;
	flex-direction: column;
}

.iconografia-seleccion-ejemplos .ejemplo .img-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
}

.iconografia-seleccion-ejemplos .ejemplo .img-wrapper img{
	max-width: 90%;
}

.iconografia-seleccion-ejemplos .ejemplo h4{
	color: var(--quadion-azul);
	font-weight: 700;
}

.iconografia-seleccion-ejemplos .ejemplo p{
	font-size: 0.875rem;
}

.valor-linea-ejemplos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
}

.valor-linea-ejemplos .ejemplo {
	background-color: var(--quadion-blanco);
	border-radius: 5px;
	padding: 20px;
	display: flex;
}


.valor-linea-ejemplos .ejemplo .img-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.valor-linea-ejemplos .ejemplo .img-wrapper  img{
	max-width: 50%;
}

.vectorial-ejemplos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
}

.vectorial-ejemplos img{
	max-width: 60%;
	padding-left: 20px;
}

.vectorial-ejemplos .formato-vectorial{
background-color: var(--quadion-azul);
color: var(--quadion-blanco);
font-weight: 700;
font-size: 0.875rem;
border-radius: 25px;
padding: 5px 20px;

}

.iconos-ilustrados-ejemplos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;	
}

.iconos-ilustrados-ejemplos .img-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}

.iconos-ilustrados-ejemplos .img-wrapper img{
	max-width: 60%;
}

.fotografias-ejemplos .ejemplo h4{
	color: var(--quadion-azul);
	font-weight: 700;
}

.galeria-fotografias{
	display: grid;
	grid-template-areas:
    "tematica1 tematica2"
    "tematica3 tematica3";

	grid-template-columns: 1fr 1fr;
	column-gap: 10px;
}

.galeria-fotografias .img-wrapper{
	position: relative;
}

.galeria-fotografias .img-wrapper:first-child{
	grid-area: tematica1;
}
.galeria-fotografias .img-wrapper:nth-child(2){
	grid-area: tematica2;
	
}
.galeria-fotografias .img-wrapper:nth-child(3){
	grid-area: tematica3;
	padding-top: 10px;
}

.galeria-fotografias .img-wrapper .img-title{
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--quadion-azul);
	color: var(--quadion-blanco);
	font-size: 0.75rem;
	border-top-right-radius: 16px;
	padding: 5px 10px;
	text-transform: uppercase;

}

.galeria-fotografias .img-wrapper img{
	max-width: 100%;
}


.ilustracion-ejemplos{
	display: grid;
	grid-template-areas:
    "ilustracion1 ilustracion1 ilustracion1"
    "ilustracion2 ilustracion3 ilustracion3"
	"ilustracion4 ilustracion4 ilustracion4";

	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	align-items: center;
}

.ilustracion-ejemplos img{
	max-width: 100%;
}

.ilustracion-ejemplos img:first-child{
	grid-area: ilustracion1;
}

.ilustracion-ejemplos img:nth-child(2){
	grid-area: ilustracion2;
}

.ilustracion-ejemplos img:nth-child(3){
	grid-area: ilustracion3;
}

.ilustracion-ejemplos img:nth-child(4){
	grid-area: ilustracion4;
}


.wrapper-perfiles h4{
	color: var(--quadion-azul);
	font-weight: 700;
}

.wrapper-perfiles .url-red-wrapper{
	background-color: var(--quadion-azul);
	color: var(--quadion-blanco);
	border-radius: 10px;
	display: flex;
	align-items: center;
}

.wrapper-perfiles .url-red-wrapper .icono-red {
	display: flex;
	padding: 10px;
}

.wrapper-perfiles .url-red-wrapper .icono-red img{
	width: 20px;
}

.wrapper-perfiles .url-red-wrapper .url-red{
	padding-top: 2px;
	padding: 10px;
	border-left: 1px solid var(--quadion-blanco);
}

img{
	max-width: 100%;
}


.tono-ejemplos {
	color: var(--quadion-blanco);
	position: relative;
	font-size: 1.125rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 
	"ejemplo1 ejemplo2"
    "ejemplo3 ejemplo3";
	grid-gap: 15px;
}

.tono-ejemplos img{
	position: absolute;
}

.tono-ejemplos img:first-child /*CIRCULO DE LINEAS*/{
	z-index: 1;
	left: -60px; 
	top: -5px; 
	width: 200px;
}

.tono-ejemplos img:nth-child(2)/*RECTANGULO DE PUNTOS*/{
	width: 70px;
	right: 30px; 
	bottom: 10px; 
	z-index: 100;
}

.tono-ejemplos > div{
	border-radius: 10px;
	padding: 20px;
	z-index: 99;	
}


.tono-ejemplos .wrapper-tono-ejemplo-1{
	grid-area: ejemplo1;
	background-color: var(--quadion-azul);
	min-height: 200px;
}

.tono-ejemplos .wrapper-tono-ejemplo-2{
	grid-area: ejemplo2;
	background-color: var(--quadion-amarillo);
	min-height: 200px;
}

.tono-ejemplos .wrapper-tono-ejemplo-3{
	grid-area: ejemplo3;
	background-color: var(--quadion-gris);
	font-size: 1.5625rem;
	padding-right: 110px;
}

.horarios-posteos{
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
}

.horarios-posteos .horario{
	padding: 10px 20px;
	background-color: var(--quadion-azul);
	color: var(--quadion-blanco);
	font-size: 1.25rem;
	font-weight: 700;
	border-radius: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;

}

.contenidos-posteos .contenido{
	padding-bottom: 20px;	
}

.contenidos-posteos .contenido .fuentes{
	display: flex;
	flex-direction: column;
}

.contenidos-posteos .contenido .senalador-container {
	position: relative;
}

.contenidos-posteos .contenido .senalador-container h4{
	color: var(--quadion-azul);
	font-weight: 700;
	padding-left: 10px;
}

.contenidos-posteos .contenido .senalador-container svg {
	fill: var(--quadion-azul);
	height: 8px;
	width: 8px;
	position: absolute;
	left: 0px;
	top: 8px;
	display: block;
}



.contenidos-posteos .contenido a{
	color: var(--quadion-negro);
	font-weight: 700;
	padding-left: 10px;
}

.wrapper-calendario .publicacion{
	border-bottom: 1px solid var(--quadion-gris);	
}

.wrapper-calendario .publicacion:last-child{
	border: 0;
}


.wrapper-calendario .publicacion:first-child{
	border: 0;	
}

.wrapper-calendario .publicacion:first-child > *{
	text-transform: uppercase!important;
	font-weight: 800!important;
	color: var(--quadion-negro)!important;
} 

.wrapper-calendario .publicacion .fecha-publicacion{
	text-transform: uppercase;
	color: var(--quadion-azul);
	font-weight: 700;
}

.wrapper-calendario .publicacion .idioma{
	/* font-weight: 300; */
	font-size: 0.875rem;
}

.diseno-posteos-ejemplos{
	display: grid;
	grid-template-areas: 
	"ejemplo-diseno-1 ejemplo-diseno-2"
    "ejemplo-diseno-3 ejemplo-diseno-3"
	"ejemplo-diseno-4 ejemplo-diseno-5";
	grid-gap: 15px;
}

.diseno-posteos-ejemplos img{
	max-width: 100%;
}

.diseno-posteos-ejemplos img:first-child{
	grid-area: ejemplo-diseno-1;
}

.diseno-posteos-ejemplos img:nth-child(2){
	grid-area: ejemplo-diseno-2;
}

.diseno-posteos-ejemplos img:nth-child(3){
	grid-area: ejemplo-diseno-3;
}

.diseno-posteos-ejemplos img:nth-child(4){
	grid-area: ejemplo-diseno-4;
}

.diseno-posteos-ejemplos img:nth-child(5){
	grid-area: ejemplo-diseno-5;
}

.wrapper-secciones{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
}

.wrapper-secciones .card.seccion{
	border: 0;
	background-color: #F4F4F5;
	border-radius: 5px;
}

.wrapper-secciones .card.seccion.slack .card-body{
	justify-content: space-around;
}

.wrapper-secciones .card.seccion.slack .card-body h4{
	color: var(--quadion-negro)!important;
}

.wrapper-secciones .card.seccion.slack .card-body img{
	max-width: 5rem;
}

.wrapper-secciones .card.seccion .card-body{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.wrapper-secciones .card.seccion .card-body h4{
	color: var(--quadion-azul);
	font-weight: 700;
}


.wrapper-secciones .card.seccion .card-body .btn-primary-quadion{
	border-radius: 50px;
	padding: 5px 10px;
	font-size: 0.875rem;
	text-align: left;
	font-weight: 700;
}

.definiciones-audiencia-wrapper h4{
	color: var(--quadion-azul);
	font-weight: 700;
}

.senalador-container{
	position: relative;
}

.senalador-container svg{
	fill: var(--quadion-azul);
	height: 8px;
	width: 8px;
	position: absolute;
	left: -12px;
	top: 6px;
	display: block;
}

.carousel-item .img-wrapper{
	width: 100%;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23254462'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23254462'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.page-navigation {
    display: flex;
    justify-content: flex-end;
    padding: 0 6rem 1.25rem 6rem;
}

.page-navigation p{
	font-size: 0.875rem;
}

.page-navigation p a{
	color: var(--quadion-azul);
}


/*POPOVER*/
.custom-popover {
	--bs-popover-body-padding-x: .75rem;
	--bs-popover-body-padding-y: 5px;
	/* border-color: var(--quadion-azulOscuro); */
	--bs-popover-border-color: var(--quadion-azulOscuro);
	/* --bs-popover-arrow-height: 0; */
	--bs-popover-font-size: 0.75rem;
	--bs-popover-bg: var(--quadion-azulOscuro);
	text-align: center;
}

.custom-popover .popover-body{
	color: var(--quadion-blanco);
}


.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before, .bs-popover-top>.popover-arrow::after, .bs-popover-top>.popover-arrow::before {
    border-width: 0;
}  

/*POPOVER ends*/


.wrapper-firma{
	position: relative;
}

.wrapper-firma .boton-copiar-firma{
	width: 35px;
	height: 35px;
	padding: 0px;
	border-radius: 50%;
	position: absolute;
	right: 0;
	top: 10%;
}

.bi-download.in-button{
	transform: translateX(5px);
}

.ejemplo-redes{
	position: relative;
}

.ejemplo-redes .img-title{
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--quadion-azul);
	color: var(--quadion-blanco);
	font-size: 0.75rem;
	border-top-right-radius: 16px;
	padding: 5px 10px;
	text-transform: uppercase;

}