.container-tabs{
height: 570px !important;
margin: 0;
overflow:auto;
}
.grow{
display: flex;
justify-content: center;
height: 100%;
overflow-x: hidden;
overflow-y:hidden;
}
.grow > div{
flex-basis: 15%;
flex-shrink: 0;
transition: .5s;
background-size: 100% 100%!important; 
}
.grow > div > .over-p{
display: none;
margin: 17px auto 0px auto !important;
color:white;
padding:20px 20px 20px 0px;
}
.grow > div > .over-p > p{
width: 80%;
margin: 10px auto;
font-size: 13px;
}
.grow > div:first-child:hover{
margin-left: 10%;
padding-bottom: 3%;
}
@media (max-width: 1440px)
{
.container-tabs {
height: 630px !important;
margin: 0;
overflow: auto;
}
.grow>div:first-child:hover {
margin-left: 18%;
padding-bottom: 3%;
}
.grow>div:last-child:hover {
margin-right: 24%;
}
}
@media (max-width: 1366px) {
.grow>div:hover>.over-p {
top: 60%;
}
.grow>div {
flex-basis: 8%;
flex-shrink: 0;
transition: .5s;
background-size: 100% 100% !important;
width: 250px;
}
.grow>div:first-child:hover {
margin-left: 26%;
padding-bottom: 3%;
}
.grow>div>.over-p>p {
line-height: 18px;
}
}
@media (max-width: 1024px) {
.grow>div {
display:none
}
}
.grow > div:last-child:hover{
margin-right: 20%;
}
.grow > div:hover{
flex-basis: 35%;
background-size: 100% 100% !important; 
-webkit-filter: grayscale(0%) !important;
filter:none !important;
}
.grow>div:hover>h2 {
transform: rotate(0deg) !important;
-webkit-transform: rotate(0deg)!important;
-moz-transform: rotate(0deg) !important;
-ms-transform: rotate(0deg) !important;
-o-transform: rotate(0deg) !important;
text-align: center;
}
.grow > div:hover > .over-p{
display: block !important;
top: 48%;
min-height: 300px;
position: relative;
}
.grow > div > h2{
transform: rotate(-90deg) !important; -webkit-transform: rotate(-90deg)!important; -moz-transform: rotate(-90deg) !important; -ms-transform: rotate(-90deg) !important; -o-transform: rotate(-90deg) !important;
color: white;
font-size: 4em;
text-transform: uppercase;
position: relative;
left: 0%;
top: 45%;
transform: translate(-50%, -50%);
}
.over-p{
width: 100%;
height: auto;
text-align: justify;
}
.over-p > a{
padding: 5px 10px;
border:solid 2px white;
font-size: 14px;
border-radius: 20px;
margin: 30px 0 10px 30px;
background:#fff;
color:#00aac7;
}
.over-p > a:hover{
color:#0056b3!important;
} @media (max-width: 1380px) {
.accordion {
font-size:14px!important;
}
}
@media (max-width: 1280px) {
.accordion {
font-size:13px!important;
}
}
.tab {
overflow: hidden;
text-align: center;
width: 100%;
margin: auto 0 3%;
}
.tab button {
background-color: inherit;
outline: none;
padding: 14px 16px;
transition: 0.3s;
font-size: 24px;
border: none;
color: #5F5F5F;
}
.tab button:hover {
border-bottom: 2px solid #00AAC7;
}
.tab button.active {
border-bottom: 2px solid #00AAC7;
font-weight: bold;
color: #000;
}
.tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
text-align: center;
}
.accordion {
background-color: rgb(238, 238, 238);
color: #000;
cursor: pointer;
padding: 18px 0 18px 5%;
width: 60%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin: 5px;
}
#ac.active {
background-color: #00AAC7;
color: #fff;
}
.accordion:after {
content: '';
width: 30px;
height: 30px;
background-image: url(http://feproteccion.com.co/site/wp-content/uploads/2019/05/arrow-point-to-right-aqua.png);
background-size: cover;
position: absolute;
right: 25%
}
.accordion.active:after {
content: '';
width: 25px;
height: 25px;
background-image: url(http://feproteccion.com.co/site/wp-content/uploads/2019/05/arrow-down-sign-to-navigate-white.png);
background-size: cover;
position: absolute;
right: 25%
}
.panel {
padding: 0 25%;
background-color: white;
max-height: 0;
overflow-y: scroll;
transition: max-height 0.2s ease-out;
text-align: center; }
.panel p {
text-align: justify;
padding: 2% 5%;
}
.panel img {
padding: 2% 5%;
text-align: center;
}
.panel img:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
} @media (max-width: 768px) {
.panel_agre img {
width:100%!important;
}
.panel_agre p{
font-size:12px!important;
}
}
#ag.tab button {
background-color: inherit;
outline: none;
padding: 14px 16px;
transition: 0.3s;
font-size: 24px;
border: none;
color: #5F5F5F;
}
.active,
#ag.accordion:hover {
background: #fff;
color:#000;
}
#ag.tab button.active {
border-bottom: 2px solid #1E2E6E;
font-weight: bold;
color: #000;
}
#ag.tab button.active {
border-bottom: 2px solid #1E2E6E;
font-weight: bold;
color: #000;
}
#ag.tab button:hover {
border-bottom: 2px solid #1E2E6E;
}
#ag.accordion:after {
content: '';
width: 25px;
height: 25px;
background-image: url(http://feproteccion.com.co/site/wp-content/uploads/2019/05/arrow-point-to-right.png);
background-size: cover;
position: absolute;
right: 4%;
}
#ag.accordion.active:after {
content: '';
width: 25px;
height: 25px;
background-image: url(http://feproteccion.com.co/site/wp-content/uploads/2019/05/arrow-down-sign-to-navigate-white.png);
background-size: cover;
position: absolute;
right: 4%;
}
.panel_agre p {
text-align: justify;
padding: 0 10%;
}
.panel_agre img {
padding: 5% 10%;
text-align: center;
width:80%;
}
.panel_agre {
padding: 0 5%;
background-color: white;
max-height: 0;
overflow-y: hidden;
overflow-x: hidden;
transition: max-height 0.2s ease-out;
text-align: center;
width: 100%;
}
#ag.accordion {
text-align: left;
color:#5F5F5F;
font-size:20px;
width:100%;
}
#ag.accordion.active {
background:#1E2E6E;
color:#fff;
margin-top:2%;
} #ac_2.accordion {
color: #5F5F5F;
cursor: pointer;
padding: 18px 0 18px 5%;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size: 30px;
transition: 0.4s;
background: #fff;
} 
.active,
#ac_2.accordion:hover {
border-bottom-width: 1px;
color: #000;
font-weight:bold;
}
#ac_2.accordion:after {
content: '';
width: 25px;
height: 25px;
background-image: url(http://feproteccion.com.co/site/wp-content/uploads/2019/05/arrow-point-to-right.png);
background-size: cover;
position: absolute;
right: 30%;
}
#ac_2.accordion.active:after {
content: '';
width: 25px;
height: 25px;
background-image: url(http://feproteccion.com.co/site/wp-content/uploads/2019/05/arrow-down-sign-to-navigate.png);
background-size: cover;
position: absolute;
right: 30%
font-weight:bold;
}
.panel_ac {
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
width: 100%;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
.grid-container>div {
text-align: center;
height: 100%;
padding: 20% 15% 20% 15%;
}
.grid-container>div p {
text-align: justify!important;
color: #9D9D9D !important;
font-size: 14px !important;
width: auto!important;
}
.grid-container>div img {
width: 100%;
height: 30%;
align-items: center;
}
.grid-container>div h3 {
color: #1E2E6E!important;
text-align: justify !important;
font-size: 18px !important;
padding:10% 0 10% 20% !important;
} @media (max-width: 1280px) {
.flex-container>div {
padding:0px!important;
}
}
@media (max-width: 1300px) {
.flex-container>div {
padding:0px!important;
}
}
.tab_2 {
overflow: hidden;
text-align: center;
width: 100%;
border-bottom: 1px solid #B7B7B7;
}
.tab_2 button {
background-color: inherit;
outline: none;
padding: 14px 2%;
transition: 0.3s;
font-size: 17px;
border: none;
}
.tab_2 button:hover {
border-bottom: 1px solid #FF2333;
}
.tab_2 button.active {
border-bottom: 3px solid #FF2333;
font-weight: bold;
color:#000;
}
.tabcontent2 {
display: none;
border-top: none;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.flex-container>div {
width: 100%;
line-height: auto;
overflow-y: scroll; 
flex:auto;
max-height:300px;
text-align: justify;
padding: 2% 5% 2% 0;
}
.flex-container>img {
width: 50%;
margin: 10px;
line-height: 200px;
padding: 5%;
}
.flex-container>h3 {
padding: 2%!important;
text-align: center!important;
color:#000!important;
}
.flex-container>p {
padding: 0 5% 2% 10%;
text-align: justify!important;
}
button.tab_button {
border: 2px solid #00AAC7;
background: none;
border-radius: 20px;
color: #00AAC7;
padding: 1% 2% 1% 2%;
} #we.tab_2 button:hover {
border-bottom: 1px solid #00AAC7;
}
#we.tab_2 button.active {
border-bottom: 3px solid #00AAC7;
font-weight: bold;
color:#000;
} #agre.tab_2 button:hover {
border-bottom: 1px solid #dfe429;
}
#agre.tab_2 button.active {
border-bottom: 3px solid #dfe429;
font-weight: bold;
color:#000;
} #cr.tab_2 button:hover {
border-bottom: 1px solid #ff2333;
}
#cr.tab_2 button.active {
border-bottom: 3px solid #ff2333;
font-weight: bold;
color:#000;
}