/*
Theme Name:  Innovatech
Theme URI: http://wordpress.org/themes/innovatech
Author: @semioticags
Author URI: https://instagram.com/semioticags
Description:
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
date: technology, nets, firewalls,security,software, hardware, IT, IT services, IT solutions, IT consulting, IT support, IT management, IT infrastructure, IT systems, IT networks, IT security, IT operations, IT development, IT engineering, IT architecture, IT design, IT implementation, IT deployment, IT integration, IT testing, IT maintenance, IT monitoring, IT optimization, IT performance, IT scalability, IT reliability, IT availability, IT disaster recovery, IT business continuity, IT compliance, IT governance, IT risk management, IT project management, IT service management, IT change management, IT incident management, IT problem management, IT configuration management, IT asset management, IT service desk, IT help desk, IT support, IT knowledge management, IT documentation, IT training, IT education, IT certification, IT standards,
IT best practices, IT methodologies, IT frameworks, IT processes, IT tools, IT technologies,
Text Domain: Innovatech
*/
/*-------------------*/
/*-PALETA DE COLORES-*/
/*-------------------*/
:root {
--green: rgba(89, 187, 168, 1);
--greendark: rgba(1, 138, 136, 1);
--black: rgba(14, 28, 35, 1);
--grey: rgba(51, 55, 65, 1);
--ligthgray: rgba(166, 175, 177, 1);
--bruma:rgba(237, 239, 240, 1);
    }

    /*----------------------------------------*/
    /*------------ESTILOS GENERALES-----------*/
    /*----------------------------------------*/


@media(min-width:200px){

/*------------SECTION BLOG--------------------*/
.blog-container{
width: 100%;
height: auto;

}
/*cards*/
.blogger-blog-card-container{
width: 100%;
height: auto;
padding: 12px;
padding-bottom: 24px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
border-radius: 12px;
position: relative;
margin-bottom: 24px;
}
.blogger-blog-card-container:hover{
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
transition: 0.3s;
}

.blogger-blog-img-container{
width: 100%;
height: 0;
padding-bottom: 61.76%;
border-radius: 8px;
position: relative;
margin-bottom: 16px;
overflow: hidden;
}
.blogger-blog-img-container img{
width: 100%;
border-radius: 8px;
height: auto;
}
.blogger-blog-desc-container{
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.blogger-blog-title-container{
width: 77.22%;
padding-bottom: 16px;
border-bottom: 1px solid var(--ligthgray);
}
.blogger-blog-title-container a{
font-weight: 600;
}
.blogger-blog-title-container a:hover{
color: var(--greendark);
transition: .2s;
}
.blogger-blog-date-container{
width: 18%;
height: 100px;
border-bottom: 12px solid var(--green);
}
.blogger-date-month{
background-color: var(--black);
color: white;
font-family: 'Swavao', sans-serif;
text-align: center;
font-size: 18px;
margin-bottom: 6px;
}
.blogger-date-day{
background-color: var(--ligthgray);
color: white;
font-family: 'Swavao', sans-serif;
text-align: center;
font-size: 24px;
margin-bottom: 6px;
padding: 14px 0;
}
.blogger-blog-page-link{
width: 100%;
background: #FFF;
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(237, 239, 240, 0.5) 10%, rgba(237, 239, 240, 1) 20%, rgba(237, 239, 240, 1) 80%, rgba(237, 239, 240, 0.5) 90%, rgba(255, 255, 255, 1) 100%);
}

/*---fin de @media---*/
}
@media(min-width:400px){

/*---fin de @media---*/
}
@media(min-width:500px){




 /*---fin de @media---*/
}
@media(min-width:600px){
/*---SECTION BLOG----*/
.blogger-blog{
padding: 24px 48px;
}
.blogger-blog-card-container{
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: nowrap;
height: auto;
}
.blogger-blog-img-container{
padding-bottom: 20%;
width:38%;
}
.blogger-blog-desc-container{
width: 60%;
padding-top: 12px;
}
.blogger-blog-title-container a{
font-size: 21px;
}
.blogger-blog-date-container{
height: 120px;
}
.blogger-date-day{
font-size: 32px;
padding-top: 24px;
padding-bottom: 24px;
}
#blogger-btn-blog-container{
width: 80%;
}


/*---fin de @media---*/
}
@media(min-width:700px){




/*---fin de @media---*/
}
@media(min-width:800px){





/*---fin de @media---*/
}
@media(min-width:900px){

    /*---fin de @media---*/
}
@media(min-width:1000px){

    /*---fin de @media---*/
}
@media(min-width:1100px){

    /*---fin de @media---*/
}
@media(min-width:1200px){
/*---SECTION BLOG--*/
.blog-container{
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
padding: 0 24px;
}
.blogger-blog{
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
}

.blogger-blog-card-container{
width: 30%;
margin-bottom: 24px;
display: block;

}
.blogger-blog-img-container{
width: 100%;
height: 0;
padding-bottom: 61.76%;
}
.blogger-blog-desc-container{
width: 100%;
}
.blogger-blog-title-container{
width: 77.22%;
}
.blogger-blog-title-container a{
font-size: 16px;
}
.blogger-blog-date-container{
width: 18%;
height: 100px;

}
.blogger-date-month{
font-size: 18px;
margin-bottom: 6px;
}
.blogger-date-day{
font-size: 24px;
margin-bottom: 6px;
padding: 14px 0;
}
.blogger-services-btn-container{
position: relative;
}
#blogger-btn-blog-container{
width: 30%;
}

/*---fin de @media---*/
}
@media(min-width:1300px){

/*---fin de @media---*/
}
@media(min-width:1400px){

    /*---fin de @media---*/
}
@media(min-width:1600px){
.blog-container{
padding: 0 48px;
}

    /*---fin de @media---*/
}
@media(min-width:1900px){
/*---SECTION BLOG----*/

.blogger-blog-title-container a{
font-size: 21px;
line-height: 26px;
}
.blogger-blog-date-container{
height: 130px;
}
.blogger-date-month{
font-size: 21px;
}
.blogger-date-day{
font-size: 42px;
padding-top: 28px;
padding-bottom: 28px;
}




/*---fin de @media---*/
}