.gridder{margin:20px -24px;list-style-type:none; background:#fff;}
.gridder-list{vertical-align: top; position: relative; width: 33.33%; cursor: pointer; margin: 0 0 48px; padding: 0 24px; display: inline-block; max-width: 380px;}
.gridder-list .gridder-list-in{ box-shadow:0px 0px 10px rgba(0, 0, 0, 0.14); -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.14); -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.14); -ms-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.14);  padding:1rem 1.5rem;}

.gridder-show{display:block; float:left; width:100%; position:relative; background:#eeeeee; padding:40px; margin:0px 15px 48px; max-width:100%;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; -moz-transition:display 0.8s; -webkit-transition:display 0.8s; -ms-transition:display 0.8s; -o-transition:display 0.8s; transition:display 0.8s;}
.gridder-show h3 {margin:0 0 15px 0;}
.gridder-show.loading{background:#EEE;}
.gridder-content{display:none}


.gridder-list .thumbnail{ display:block; padding:18px; border-radius:0; margin:0; text-align:left; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border:1px solid #dfdfdf; min-height:170px;}

/**CUSTOM CSS**/
.gridder-navigation{ text-align:right; position:absolute; top:15px; right:15px;}
.gridder-close{display:block; background:#d4020b; height:25px; width:25px;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; position:relative; text-align:center;}
.gridder-close:before{ content:''; position:absolute; left:0; right:0; color:#fff; top:8px; margin:0 auto; background:url(../images/close-icon.png) no-repeat; height:10px; width:13px;}


.top_arrow_icon{ position:absolute; bottom:-30px; left:42%; display:none; z-index:9;}
.hasSelectedItem .gridder-list.selectedItem .top_arrow_icon{ display:block;}

.gridder-expanded-content{ text-align:center;}
.gridder-expanded-content h3{font-size:18px; line-height:18px; color:#474747; font-family: 'Roboto', sans-serif; margin-bottom:10px;}
.gridder-expanded-content h4{font-size:16px; line-height:20px; color:#3d3d3d; font-family: 'Roboto', sans-serif; font-style:italic; margin-bottom:20px;}
.gridder-expanded-content p{margin-bottom:15px; }

/**AFTER ACTION**/
.hasSelectedItem .gridder-list.selectedItem .thumbnail, .gridder-list.selectedItem:active .thumbnail, .gridder-list:hover .thumbnail{ background:#eeeeee;}
.hasSelectedItem .gridder-list.selectedItem .knowmore{padding-left: 35px;  padding-right: 15px; background: #d4171f; color: #fff; border: 2px solid #d4262d;  text-decoration: none;}
.hasSelectedItem .gridder-list.selectedItem .thumbnail{background: #eeeeee; color: #000;  border:1px solid #eeeeee; text-decoration: none;}

.gridder-list .thumbnail:hover .knowmore .round-left ,
.hasSelectedItem .gridder-list.selectedItem .knowmore .round-left{opacity: 1; visibility: visible; left: 0px;  width: calc(100% - 15px); padding:0 15px 0 35px;}

.gridder-list .thumbnail:hover .knowmore .round-right,
.hasSelectedItem .gridder-list.selectedItem .knowmore .round-right{opacity: 0; visibility: hidden;right: -100px;}

.gridder-list.selectedItem{ position:relative;}
.gridder-list.selectedItem:after{width: 0;height: 0; border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 15px solid #eeeeee; content:''; position:absolute; left:50%; margin-left:-7px; bottom:-48px;}


.gridder-list-in { min-height:350px;}
.gridder-list-in h3{ font-size:22px; line-height:22px; font-weight:600; margin-bottom:20px}
.gridder-list-in img{ margin-bottom:20px}
.gridder-list-in p{ font-size:1rem; line-height:1.5rem; margin-bottom:0;}

@media all and (max-width:990px){
 .gridder-list{max-width:365px; width:50%;}
 .gridder-show{ margin:0px auto 48px; padding:40px 20px 20px;}  
}

@media all and (max-width:767px){
	
 .gridder-list{    width: 49%;}
}

@media all and (max-width:568px){
 .gridder-list{ max-width:100%; width:100%;}
   .gridder-list-in{ min-height:inherit;}

}

@media all and (max-width:480px){ 

}