/*** Slide in from the Right ***/

.outer-container-s {
display:flex;
flex-direction:row;
flex-wrap:nowrap;
color:#fff;
margin-left:25px;
overflow:hidden;
}

.outer-container-s-right {
display:flex;
flex:100%;
align-items:center;
justify-content:center;
background-color:#5a6771;
transition:all 0.3s ease-in-out;
padding:0 30px 0 50px;
position:relative;
}

.center-elements {
display:flex;
flex-direction:column;
}

.outer-container-s-left {
flex:0 0 350px; 
height:300px;
transition:all 0.3s ease-in-out;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}

.outer-container-s:hover {
box-shadow: -3px 6px 6px rgba(50, 62, 72, 0.5);
transition:all 0.4s ease-in-out;
}

.outer-container-s:hover > .outer-container-s-right {
background-color:#eff2f3;
color:#000;
}

.outer-container-s:hover .container-title {
transition:all 0.3s ease-in-out; 
color:#5a6771;
font-weight:bold;
}

.outer-container-s:hover .container-description {
transition:all 0.3s ease-in-out;
color:#5a6771;
}

.outer-container-s:hover > .outer-container-s-left {
transform:scale(1.05);
}

/******* images for right *****/

.img-cyber-security {
background-image:linear-gradient(to bottom left, rgba(87, 164, 77, 0.63), rgba(4, 153, 183, 0.42)), url(../images/pillars/hacker_640.jpg);
}

.img-softwear-development {
background-image:linear-gradient(to bottom left, rgba(87, 164, 77, 0.63), rgba(4, 153, 183, 0.42)), url(../images/pillars/code_640.jpg);
}

/******* Slide in from the Left *********/

.outer-container-g {
display:flex;
flex-direction:row;
flex-wrap:nowrap;
color:#fff;
margin-right:25px;
overflow:hidden;
position:relative;
}

.outer-container-g-left {
display:flex;
align-items:center;
justify-content:center;
background-color:#5a6771;
transition:all 0.3s ease-in-out;
padding-right:25px;
padding-left:25px;
position:relative;
}

.outer-container-g-right {
flex:0 0 350px;
height:300px;
transition:all 0.3s ease-in-out; 
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}

.outer-container-g:hover {
box-shadow: 3px 6px 6px rgba(50, 62, 72, 0.5);
transition:all 0.3s ease-in-out;
}

.outer-container-g:hover > .outer-container-g-left {
background-color:#eff2f3;
color:#000;
}

.outer-container-g:hover .container-title {
transition:all 0.3s ease-in-out; 
color:#5a6771;
font-weight:bold;
}

.outer-container-g:hover .container-description { 
transition:all 0.3s ease-in-out;
color:#5a6771;
}

.outer-container-g:hover > .outer-container-g-right {
transform:scale(1.05);	
}

/******* images from left *****/

.img-cloud-hosting {
background-image:linear-gradient(to bottom left, rgba(87, 164, 77, 0.63), rgba(4, 153, 183, 0.42)), url(../images/pillars/clouds_640.jpg);
}

.img-enterprise-integration {
background-image:linear-gradient(to bottom left, rgba(87, 164, 77, 0.63), rgba(4, 153, 183, 0.42)), url(../images/pillars/enterprise_640.jpg);
}

/******* Text Heading *********/

.container-title {
font-size:30px;
color:#fff;
}

.container-description {
padding:10px 0;
color:#cfd2d3;
}

.outer-container-s-right a, .outer-container-g-left a {
display:block;
text-decoration:none;
color:#fcb900;
}

.outer-container-s-right a:hover, .outer-container-g-left a:hover {
color:#fcb900;
}


/********** After link icon ***********/

.outer-container-g-left a::after, 
.outer-container-s-right a::after,
.collapsible-content a::after {
font-family:'Font Awesome 5 free';
font-weight:900;
content:'\f054';
font-size:9px;
position:relative;
padding:0 0 0 6px;
top:-1px;
}

/****************/

.break {
flex:100%;
padding:20px;
}

.pillars-header {
flex-basis:100%;
padding:50px 0 50px 0;
text-align:center;
}

.pillars-header h1 {
font-weight:bold;
font-size:34px;
color:#5a6771;
padding:0 20px 0 20px;
}

/*** Collapsible Layout ***/

.animate__animated.animate__fadeIn {
--animate-duration: 3s;
}

.animate__animated.animate__fadeInRight {
--animate-duration: 1400ms;
}

.collapsible-pillars-header {
flex-basis:100%;
padding:0 0px 20 0px;
text-align:center;
}

.collapsible-pillars-header h1 {
font-weight:bold;
font-size:23px;
color:#5a6771;
padding:33px 40px 33px 40px;
line-height:1.25em;
}

.collapsible-button {
background-color:#5a6771;
color: #fff;
cursor: pointer;
padding:0 18px;
height:118px;
width: 100%;
border: none;
text-align: left;
line-height:50px;
outline: none;
font-size: 20px;
font-weight:bold;
font-family:Comfortaa;
}

.active, .collapsible-button:hover {
background-color:#eff2f3;
color:#5a6771;
transition:all 0.3s ease-in-out;
cursor:default !important;
}

.collapsible-content {
font-size:16px;
padding:0px 18px 20px 18px;
display:none;
overflow:hidden;
background-color:#f1f1f1;
box-shadow:0px 6px 6px rgba(50, 62, 72, 0.5);
}

.collapsible-content a {
text-decoration:none;
color:#fcb900;
}

.collapsible-content a:hover {
text-decoration:none;
color:#fcb900;
}

.collapsible-button:after {
font-family: "Font Awesome 5 Free";
content:'\f078';   
font-size:25px;
color:#57a44dd9;
float:right;
margin-right:10px;
}

.collapsible-button.active:after {
content:"\f077";
}

.collapsible-break {
flex:100%;
padding:10px;
}

.collapsible-bottom-break {
flex:100%;
padding:20px;
}

.collapsible-boxshadow:hover {
box-shadow:0px 6px 6px rgba(50, 62, 72, 0.5);
}

/*** Styling ***/

@media (min-width: 320px) and (max-width: 359px) {
.pillars-content {display:none;}
.pillars-collapsible-content {display:block;}
.collapsible-pillars-header h1 {font-size:20px;padding:33px 20px 33px 20px;}
.collapsible-button {font-size:16px;}
.collapsible-content {font-size:14px;}
.collapsible-button:after {font-size:20px;}
}

@media (min-width: 360px) and (max-width: 479px) {
.pillars-content {display:none;}
.pillars-collapsible-content {display:block;}
.collapsible-pillars-header h1 {font-size:22px;padding:33px 25px 33px 25px;}
.collapsible-button {font-size:18px;}
.collapsible-content {font-size:16px;}
.collapsible-button:after {font-size:22px;}
}

@media (min-width:480px) and (max-width: 767px) {
.pillars-content {display:none;}
.pillars-collapsible-content {display:block;}
}

@media (min-width:768px) and (max-width: 1278px) {
.pillars-content {display:none;}
.pillars-collapsible-content {display:block;}
}

@media (min-width:768px) and (max-width: 1024px) {
.pillars-content {display:block;}
.pillars-collapsible-content {display:none;}
}

@media (min-width:1025px) and (max-width: 1278px) {
.pillars-content {display:block;}
.pillars-collapsible-content {display:none;}
}

@media (min-width: 1279px) {
.pillars-collapsible-content {display:none;}
.outer-container-g {margin-right:150px;}
.outer-container-g-left {padding-left:150px;}
/*.outer-container-g-left h1, .outer-container-g-left p, .outer-container-g-left a {padding-left:150px;}*/
.outer-container-s {margin-left:150px;}
.outer-container-s-right {padding-right:150px;}
}