@import url("style.css");

/*-------------------*/
/*-PALETA DE COLORES-*/
/*-------------------*/
:root {
--bluedark: rgba(10,47,92, 1);
--blue: rgba(0,56,184,1);
--black: rgba(34,34,34, 1);
--violet: rgba(75,0,130, 1);
--gray: rgba(220,220,220, 1);
    }
    /*----------------------------------------*/
    /*------------ESTILOS GENERALES-----------*/
    /*----------------------------------------*/


@media(min-width:320px){

/*--------CONTAINER GENERAL-----*/
.single-blog-container{
width: 100%;
height: auto;
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
padding: 16px ;
margin-bottom: 48px;
}
/*--------ARTICLE CONTAINER-----*/
.single-blog-article-container{
width: 100%;
height: auto;
background-color: white;
padding: 16px;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
margin-bottom: 24px;
}
/*------HEADER-------*/
.single-blog-article-header-container{
background: #0038B8;
background: linear-gradient(147deg,rgba(0, 56, 184, 1) 1%, rgba(10, 47, 92, 1) 100%);
padding: 16px;
border-radius: 6px;
margin-bottom: 12px;
}
.single-blog-date{
margin-bottom: 18px;
}
.single-blog-article-header-container p, .single-blog-article-header-container h2{
color: white !important;
}
.single-blog-article-header-container h2{
font-weight: 500;
margin-bottom: 12px;
}
.single-blog-article-header-deco{
width: 70%;
height: 3px;
background-color: white;
margin-bottom: 12px;
}
/*-----SHARE--------*/
.single-blog-article-share-container{
background-color: rgba(34,34,34, .3);
padding: 16px;
border-radius: 6px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.single-blog-article-share-container p{
margin: 0 10px 0 0;
}
#blog-icon-x-twitter,
#blog-icon-whatsapp,
#blog-icon-facebook,
#blog-icon-mail-alt,
#blog-icon-gmail{
margin: 0 3px;
}

#blog-icon-x-twitter,
#blog-icon-whatsapp,
#blog-icon-facebook,
#blog-icon-mail-alt,
#blog-icon-gmail{
background-color: var(--black);
padding: 9px 6px;
border-radius: 50%;
color: white;
line-height: 0;
}
#blog-icon-x-twitter:hover,
#blog-icon-whatsapp:hover,
#blog-icon-facebook:hover,
#blog-icon-mail-alt:hover,
#blog-icon-gmail:hover{
background-color: var(--blue);
transition: .2s;
}
/*-----WORDPRESS CONTENT-------*/
.single-blog-wp-content-container{
padding-top: 24px;
border-bottom: 1px solid var(--black);
margin-bottom: 12px;
padding-bottom: 24px;
}
.single-blog-wp-content-container h2, .single-blog-wp-content-container h3, .single-blog-wp-content-container h4{
font-weight: bold;
font-style: normal;
color: var(--blue);
}
.single-blog-wp-content-container h2{
padding-bottom: 24px;
}
.single-blog-wp-content-container h3{
padding-bottom: 12px;
padding-top: 16px;
}
.single-blog-wp-content-container h4{
padding-bottom: 8px;
padding-top: 0px;
}
.single-blog-wp-content-container ul, .single-blog-wp-content-container ol{
width: 100%;
margin-bottom: 24px;
padding-right: 3%;
}
.single-blog-wp-content-container p, .single-blog-wp-content-container li, .single-blog-wp-content-container td{
font-size: 16px;
line-height: 21px;
text-align: justify;
font-weight: normal;
margin-bottom: 16px;
}
.single-blog-wp-content-container table{
border-collapse: collapse;
border: 1px solid var(--bluedark);
padding: 10px;
margin-bottom: 24px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.single-blog-wp-content-container table th{
border-collapse: collapse;
background-color: var(--blue);
color: white;
font-weight: 500;
padding: 10px;
font-size: 21px;
}
.single-blog-wp-content-container table td{
background-color: rgba(34,34,34, .05);
padding: 16px;
border: 4px solid white;
}
.single-blog-wp-content-container p{
margin-bottom: 16px;
}
.single-blog-wp-content-container ul li{
width: 90%;
margin-left: 21px;
list-style-type: square;
text-align: left;
}
.single-blog-wp-content-container ol li{
width: 90%;
margin-left: 21px;
text-align: left;
}
.single-blog-wp-content-container blockquote{
font-size: 21px;
line-height:  28px;
width: 80%;
text-align:  center;
margin: auto;
color: var(--blue);
font-weight: normal;
font-style: italic;
background-color:rgba(237, 239, 240, .5);
margin-bottom: 24px;
border-radius: 6px;
padding: 16px;
}
.single-blog-wp-content-container blockquote::after {
  content: '”'; /* Comilla de cierre */
}
.single-blog-wp-content-container blockquote::before {
  content: '“'; /* Comilla de apertura */
}
.single-blog-wp-content-container a{
font-size: 16px;
line-height: 20px;
text-decoration: none;
font-weight:bold;
font-style: normal;
color: var(--blue);
text-decoration: underline;
}
.single-blog-wp-content-container a:hover{
text-decoration: none;
}
.single-blog-footer-container{
padding:  16px;
background-color: rgba(34,34,34, .2);
position: relative;
height: 70px;
}
#single-blog-standar-button{
position: absolute;
right: 16px;
}
#blog-link-about{
color: var(--black);
}
/*-----SIDEBAR-------*/
.single-blog-sidebar-container{
width: 100%;
height: auto;
background-color: white;
padding: 16px;
border-radius: 6px ;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
/*---------ACCORDION----------*/
.accordion {
width: 100%;
padding: 24px 0;
background: #0038B8;
background: linear-gradient(147deg,rgba(0, 56, 184, 1) 1%, rgba(10, 47, 92, 1) 100%);
border-radius: 6px ;
color: white;
font-size: 24px;
font-weight: 500;
border:none;
margin: 6px 0;
}
.accordion:hover {
cursor: pointer;
}
.active {
  background-color: #ddd;
}
.panel {
  padding: 0;
  display: none;
  overflow: hidden;
}
.single-blog-sidebar-header-container{
width: 100%;
height: 84px;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid var(--black);
padding: 16px 48px;
background-color: rgba(34,34,34, 0.1);
border-radius: 6px 6px 0 0 ;
margin-bottom: 12px;
}
.single-blog-sidebar-header-container h3{
font-size: 16px;
}
.single-blog-sidebar-header-container img{
margin-right: 12px;
height: 100%;
}
/*-----TAGS-------*/




/*---fin de @media---*/
}
@media(min-width:480px){
/*-----SIDEBAR-------*/
/*---------ACCORDION----------*/
.single-blog-sidebar-header-container h3{
font-size: 21px;
}
.single-blog-sidebar-header-container img{
margin-right: 12px;
height: 100%;
}
/*---fin de @media---*/
}
@media(min-width:540px){

/*---fin de @media---*/
}
@media(min-width:640px){
/*-----SIDEBAR-------*/
/*---------ACCORDION----------*/
.accordion {
font-size: 28px;
}
.single-blog-sidebar-header-container h3{
font-size: 24px;
}
.single-blog-sidebar-header-container img{
margin-right: 12px;
height: 100%;
}
/*---fin de @media---*/
}
 @media(min-width:720px){

/*---fin de @media---*/
}
 @media(min-width:800px){


/*---fin de @media---*/
}
@media(min-width:900px){
/*-----SIDEBAR-------*/
/*---------ACCORDION----------*/
.single-blog-sidebar-cards-container{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}



/*---fin de @media---*/
}
@media(min-width:1024px){

/*---fin de @media---*/
}
@media(min-width:1100px){



/*---fin de @media---*/
}
@media(min-width:1280px){
.single-blog-article-container{
width: 68%;
padding: 24px;
}
.single-blog-sidebar-container{
width: 30%;
}
/*-----SIDEBAR-------*/
/*---------ACCORDION----------*/
.accordion{
display: none;
}
.panel{
display:block;
}
.single-blog-sidebar-header-container h3{
font-size: 21px;
}
/*---fin de @media---*/
}
@media(min-width:1360px){
.single-blog-container{
padding: 24px 48px;
}
.single-blog-article-container{
padding: 12px;
}
.single-blog-wp-content-container{
padding: 24px;
padding-bottom: 56px;
}
/*---fin de @media---*/
}
@media(min-width:1440px){


/*---fin de @media---*/
}
@media(min-width:1600px){

.single-blog-article-header-container{
padding: 32px;
}
.single-blog-date{
margin-bottom: 36px;
}
.single-blog-article-header-deco{
margin-bottom: 21px;
}
.single-blog-footer-container {
padding:  24px;
height: 100px;
}
#single-blog-standar-button{
right: 48px;
}
#single-blog-standar-button a{
font-size: 18px;
}
/*---fin de @media---*/
}
@media(min-width:1920px){
.single-blog-wp-content-container h4{
font-size: 21px;
line-height: 28px;
}
.single-blog-wp-content-container p, .single-blog-wp-content-container li, .single-blog-wp-content-container td{
font-size: 18px;
line-height: 24px;
}
.single-blog-wp-content-container table th{
font-size: 24px;
}
.single-blog-wp-content-container blockquote{
font-size: 24px;
line-height:  28px;
}
.single-blog-wp-content-container a{
font-size: 18px;
line-height: 24px;
}
/*-----STANDAR BUTTON----*/
#single-blog-standar-button a{
font-size: 21px;
}

/*---fin de @media---*/
}