/*
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);
    }

@media(min-width:200px){



/*MAIN BANNER*/
.main-banner{
width: 100%;
height: 0;
padding-bottom: 130%;
background-image: url(../img/index-banner.jpg);
background-size:cover;
background-position: right top;
background-repeat: no-repeat;
position: relative;
max-height: 1000px;
}
.banner-text-box{
padding: 16px;
width: 60%;
}
.banner-text-box h2{
font-size: 18px;
line-height: 22px;
color: var(--black);
}

.banner-accordion{
padding: 16px;
position: relative;
margin: auto;
max-width: 300px;
margin-left: 0;
}
.banner-accordion-title{
width: 100%;
margin-bottom: 12px;
border-bottom: 1px solid var(--greendark);
}
.btn-accordion{
width: 100%;
background-color: var(--green);
padding: 8px;
border: none;
border-bottom: 1px solid white;
}
.btn-accordion:hover{
box-shadow: inset 500px 0px rgba(1, 138, 136, 1);
transition: box-shadow 0.5s, color 0.8s;
cursor: pointer;
}
.btn-accordion a{
color: white;
text-align: left;
width: 90%;
position: relative;
text-decoration: none;
float: left;
}
#banner-icon{
color: white;
font-size: 16px;
}
/*CAROUSSEL PARTNERS IS IN THE CAROUSSEL CSS SHEET*/


/*SECTION PRODUCTS*/
.index-product{
padding: 16px;
width: 90%;
margin: auto;
border-radius: 8px;
padding-bottom: 12px;
}
.section-id-container{
margin-bottom: 24px;
}

.section-id-img-container{
width: 100%;
height: auto;
margin-bottom: 16px;
}
.section-id-img-box{
width: 170px;
height: 118px;
margin: auto;
}
.section-id-img-box img{
width: 100%;
height: 100%;
object-fit: cover;
}
.section-id-container h2{
text-align: center ;
margin-bottom: 16px;
color:var(--greendark) !important;
}
.section-id-container p{
text-align: center;
line-height: 20px;
}
.section-products-card-container{
padding: 0;
}

/*CSS FLIP CARD*/
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 230px;
  height: 230px;
  border-radius: 15px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  margin: auto;
  margin-bottom: 24px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 15px;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 15px;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: white;
  color: black;
  background-image: url(../img/glass-effect-button.jpg);
background-size: 230px 230px;
  background-position: top left;
  background-repeat: no-repeat;
  padding-top: 100px;
}
.index-prod-img{
padding: 0;
margin: auto;
width: 80%;
height: 100px;
}
.index-prod-img img{
  width: 100%;
}
/*-----style one by one-----*/
#index-prod-img-adobe{
  padding:0px 16px  ;
}
#index-prod-img-microsoft{
  padding-top: 0px;
}
#index-prod-img-kaspersky{
  padding-top:0px;
}
#flip-card-front-cisco{
  padding-top: 72px;
}
#index-prod-img-cisco{
 padding: 0 16px;

}
#index-prod-img-fortinet{
  padding-top: 12;
}
#index-prod-img-dell{
  padding: 0  24px;
}
#index-prod-img-lenovo{
  padding: 20  0px;
}

/* Style the back side */
.flip-card-back {
background: #0E1C23;
background: linear-gradient(104deg,rgba(14, 28, 35, 1) 0%, rgba(51, 55, 65, 1) 12%, rgba(14, 28, 35, 0.5) 36%, rgba(51, 55, 65, 1) 72%, rgba(14, 28, 35, 1) 100%);
color: white;
transform: rotateY(180deg);
padding: 16px;
}
.flip-card-back h3{
color: white;
margin-bottom: 12px;
font-size: 24px;
}
.fcb-items-container{
width: 100%;
padding:0 ;
}
.fcb-items-container p{
color: white;
font-size: 12px;
text-align: left;
line-height: 16px;
margin-bottom: 8px;
}
/*----adjusting padding one by one*/
#fcb-items-container-adobe{
padding: 0 16px 36px 0;
}
#fcb-items-container-microsoft{
padding: 0 16px 30px 0;
}
#fcb-items-container-kaspersky{
padding: 0 16px 30px 0;
}
#fcb-items-container-cisco{
padding: 0 16px 30px 0;
}
#fcb-items-container-fortinet{
padding: 0 16px 0px 0;
}
#fcb-items-container-fortinet p{
line-height: 12px;
}
#fcb-items-container-dell{
padding: 0 16px 30px 0;
}
#fcb-items-container-lenovo{
padding: 0 16px 52px 0;
}
#fcb-items-container-ubiquiti{
padding: 0 16px 10px 0;
}
/*--------*/
.flip-card-back-link{
  width: 100%;
  border: none;
  position: relative;
 height: 80px;
}

.btn-flip-card-back-link{
border: none;
padding: 6px 12px;
border-radius: 24px;
background-color:transparent;
border: solid 2px var(--bruma);
position: absolute;
top: 16px;
width: 100%;
left: 0;
}
.btn-flip-card-back-link:hover{
cursor: pointer;
transition: all 0.8s ease-in-out;
box-shadow: 300px 0 0 0  rgba(1, 138, 136, 1) inset, -300px 0 0 0  rgba(89, 187, 168, 1) inset;
}

.flip-card-back-link button a{
  text-decoration: none;
  color: white;
  font-weight: 600;
  font-size: 12px;
}

/*---SECTION SERVICES---*/
.index-services{
width: 100%;
padding: 16px;
background-color: white;
}
.index-services-container{
background-color: white;
position: relative;
height: auto;
}
.index-services-img-container{
width: 200px;
height: 200px;
max-width: 336px;
max-height: 336px;
padding: 6px;
border-radius: 52px;
margin: auto;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
margin-bottom: 36px;

}
.index-services-img-container:hover{
transform: scale(1.1);
transition: 0.5s;
}
.index-services-img-container img{
width: 100%;
height: 100%;
}
.index-services-container h3{
text-align: center;
color: var(--black);
margin-bottom: 24px;
}
.index-services-container p{
text-align: center;
}
.index-services-separation-line{
width: 80%;
height: 2px;
background-color:rgba(51, 55, 65, 0.2);
margin: auto;
}

/*------------SECTION BLOG--------------------*/
.index-blog{
width: 100%;
height: auto;
padding: 24px 16px;
padding-top: 48px;
}
/*line colors*/
.index-blog-colorline-container{
width: 100%;
height: 16px;
background-color: var(--grey);
position: relative;
margin-bottom: 48px;
border-radius: 12px;
}
.index-blog-colorline-darkgreen{
height: 100%;
width: 20%;
background-color: var(--greendark);
position: absolute;
right: 0;
border-radius: 0 12px 12px 0;
}
.index-blog-colorline-green{
height: 100%;
width: 20%;
background-color: var(--green);
position: absolute;
right: 20%;
}
/*cards*/
.index-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;
}
.index-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;
}

.index-blog-img-container{
width: 100%;
height: 0;
padding-bottom: 61.76%;
border-radius: 8px;
position: relative;
margin-bottom: 16px;
overflow: hidden;
}
.index-blog-img-container img{
width: 100%;
border-radius: 8px;
height: auto;
}
.index-blog-desc-container{
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.index-blog-title-container{
width: 77.22%;
padding-bottom: 16px;
border-bottom: 1px solid var(--ligthgray);
}
.index-blog-title-container a{
font-weight: 600;
}
.index-blog-title-container a:hover{
color: var(--greendark);
transition: .2s;
}
.index-blog-date-container{
width: 18%;
height: 100px;
border-bottom: 12px solid var(--green);
}
.index-date-month{
background-color: var(--black);
color: white;
font-family: 'Swavao', sans-serif;
text-align: center;
font-size: 18px;
margin-bottom: 6px;
}
.index-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;
}
.index-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){
.main-banner{
padding-bottom: 90%;
}
/*---fin de @media---*/
}
@media(min-width:500px){




.main-banner{
padding-bottom: 65%;
}
/*---fin de @media---*/
}

@media(min-width:600px){
.main-banner{
padding-bottom: 72.5%;
}

.banner-text-box{
padding: 42px;
width: 50%;
padding-right: 0;
padding-bottom: 16px;
}
.banner-text-box h2{
font-size: 24px;
line-height: 28px;
}
.banner-accordion{
padding: 0;
padding-left: 42px;
}
/*SECTION PRODUCTS*/
.section-products-card-container{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
/*----SECTION SERVICES*/

.index-services{
padding: 48px;
}
.index-services-container{
margin-bottom: 48px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
padding: 16px;
border-radius: 8px;
}
.index-services-container:hover{
background: #E2F3EF;
background: linear-gradient(0deg,rgba(226, 243, 239, 1) 0%, rgba(255, 255, 255, 1) 60%);
transition: 0.8s;
}
/*---SECTION BLOG----*/
.index-blog{
padding: 24px 48px;
}
.index-blog-card-container{
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: nowrap;
height: auto;
}
.index-blog-img-container{
padding-bottom: 20%;
width:38%;
}
.index-blog-desc-container{
width: 60%;
padding-top: 12px;
}
.index-blog-title-container a{
font-size: 21px;
}
.index-blog-date-container{
height: 120px;
}
.index-date-day{
font-size: 32px;
padding-top: 24px;
padding-bottom: 24px;
}
#index-btn-blog-container{
width: 80%;
}
/*---fin de @media---*/
}

@media(min-width:700px){


.main-banner{
padding-bottom: 60%;
}


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

@media(min-width:800px){
.main-banner{
padding-bottom: 50%;
}


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

@media(min-width:900px){

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

@media(min-width:1000px){
.main-banner{
width: 100%;
height: 0;
padding-bottom: 50%;
}

.banner-text-box h2{
font-size: 28px;
line-height: 32px;
}
.banner-text-box{
padding-bottom: 24px;
}
.banner-accordion{
max-width: 350px;
}
/*---fin de @media---*/
}
@media(min-width:1100px){



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

@media(min-width:1200px){



.main-banner{
padding-bottom: 45%;
}
.banner-text-box{
padding: 42px;
padding-top: 56px;
width: 50%;
}
.banner-text-box h2{
font-size: 36px;
line-height: 40px;
}
.banner-accordion{
max-width: 500px;
}
.banner-accordion-title h4{
font-size: 24px;
padding-bottom: 10px;
}
.btn-accordion{
padding: 16px;
margin-bottom: 2px;
}

.btn-accordion a{
font-size: 18px;

}
/*---SECTION PRODUCTS---*/
.index-product{
width: 98%;
margin-bottom:56px;
}
/*SECTION SERVICES*/

.index-services{
display: flex;
justify-content: space-between;
align-items: flex-start;
align-content: stretch;
flex-wrap: wrap;
flex-direction: row;
background-image: url(../img/index-background-servicios.jpg);
background-repeat: no-repeat;
background-size: cover;
margin-bottom:56px;
}
.index-services-container{
width: 31%;
align-self: auto;
height: 700px;
position: relative;
}
.index-services-btn-container{
position: absolute;
bottom: 0px;
left: 5%;
right: 5%;
}
/*---adjust buttons one by one--*/
#index-btn-services-container{
padding: 24px 0;
position: absolute;
bottom: 0;
left: 0;
padding-bottom: 48px;
}

/*---SECTION BLOG--*/
.index-blog{
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
}

.index-blog-card-container{
width: 30%;
margin-bottom: 24px;
display: block;

}
.index-blog-img-container{
width: 100%;
height: 0;
padding-bottom: 61.76%;
}
.index-blog-desc-container{
width: 100%;
}
.index-blog-title-container{
width: 77.22%;
}
.index-blog-title-container a{
font-size: 16px;
}
.index-blog-date-container{
width: 18%;
height: 100px;

}
.index-date-month{
font-size: 18px;
margin-bottom: 6px;
}
.index-date-day{
font-size: 24px;
margin-bottom: 6px;
padding: 14px 0;
}
.index-services-btn-container{
position: relative;
}
#index-btn-blog-container{
width: 30%;
}


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

@media(min-width:1300px){

.banner-text-box{
width: 45%;
}
#banner-icon{
color: white;
font-size: 21px;
}
/*---SECTION PRODUCTS---*/
.index-product{
display: flex;
justify-content: space-between;
align-items: flex-start;
background-image: url(../img/index-background-productos.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;

}
.section-id-container{
width: 40%;
border: 1px solid var(--ligthgray);
border-radius: 8px;
padding: 96px 16px;
background-color: white;
}



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


@media(min-width:1400px){

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

@media(min-width:1600px){


.main-banner{
background-position: right center;
}
.banner-text-box{
width: 42%;

}
.banner-text-box h2{
font-size: 42px;
line-height: 46px;
}
.main-banner{
padding-bottom: 36%;

}
/*-----SECTION PRODUCTS---*/
.section-id-container{
padding-top: 120px;
}

/*----SECTION SERVICES---*/
.index-services-container{
width: 32%;
height: 650px;
}
.index-services-container p{
font-size: 18px;
line-height: 22px;
}











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


@media(min-width:1900px){

.banner-text-box{
width: 40%;
}
.banner-text-box h2{
font-size: 48px;
line-height: 52px;
}
/*-----SECTION PRODUCTS---*/
.promo-container{
width: 100%;
padding: 0 63px;
}
/*---SECTION PRODUCTS---*/
.section-id-container{
padding: 100px 16px 260px 16px;
}
.section-id-container p{
font-size: 18px;
line-height: 24px;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
border-radius: 15px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
margin: auto;
margin-bottom: 24px;
}
.flip-card-front {
background-size: 300px 300px;
padding-top: 120px;
}
#index-prod-img-microsoft{
  padding-top: 12px;
}
#index-prod-img-kaspersky{
  padding-top:10px;
}
#flip-card-front-cisco{
  padding-top: 96px;
}
#index-prod-img-fortinet{
  padding-top: 12px;
}
#index-prod-img-lenovo{
  padding: 8px  0px;
}
.flip-card-back{
  padding: 24px;
}
.fcb-items-container p{
font-size: 16px;
line-height: 21px;
}
.btn-flip-card-back-link{
  padding:12px ;
}
.btn-flip-card-back-link a{
font-size: 14px !important;
}
/*----adjusting padding one by one*/
#fcb-items-container-adobe{
padding: 0 16px 72px 0;
}
#fcb-items-container-microsoft{
padding: 0 16px 63px 0;
}
#fcb-items-container-kaspersky{
padding: 0 16px 63px 0;
}
#fcb-items-container-cisco{
padding: 0 16px 63px 0;
}
#fcb-items-container-fortinet{
padding: 0 16px 50px 0;
}
#fcb-items-container-fortinet p{
line-height: 12px;
}
#fcb-items-container-dell{
padding: 0 16px 63px 0;
}
#fcb-items-container-lenovo{
padding: 0 16px 92px 0;
}
#fcb-items-container-ubiquiti{
padding: 0 16px 36px 0;
}

/*---SECTION BLOG----*/

.index-blog-title-container a{
font-size: 21px;
line-height: 26px;
}
.index-blog-date-container{
height: 130px;
}
.index-date-month{
font-size: 21px;
}
.index-date-day{
font-size: 42px;
padding-top: 28px;
padding-bottom: 28px;
}





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