@charset "utf-8";
/* CSS Document */

#case_study12,
#case_study11,
#case_study10,
#case_study9,
#case_study8,
#case_study7,
#case_study6,
#case_study5,
#case_study4,
#case_study3,
#case_study2,
#case_study1{
   padding: 70px 0; 
}

#case_study .hero_img{
    background-image:url( "../img/case_study/header.png");
    background-repeat:  no-repeat;  
    background-size:cover; 
    background-position: left 52% center;     
    width: 100%;
    height: 400px;
}

.case_study_h2{
   font-size: 32px;
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #000;
    text-align:left;
}

.bg_black{
   padding: 10px;
    color: #fff;
    background: #585757;
    margin-right: 20px;
    font-style: italic;
}

.case_study_flex{
    display: flex;
    text-align: left;
}

.case_study_flex {
     padding-left: 4%; 
}

.case_study_flex li{
    list-style: disc;
}

.case_study_flex_r{
    position: relative;
    margin-bottom: 30px;
    margin-left: 70px;
    width: 60%
}

.case_study_flex_l{
    position: relative;
}

.case_study_flex_r ul,
.case_study_flex_l ul{
    margin-top: 28px;
    width: 100%;
}

.case_study_flex_r li,
.case_study_flex_l li{
    width: 100%;
}


.case_study_icon{
    position: absolute;
    right: -15%;
    top: 50%;
}

.case_study_icon img{
    width: 50%;
}

.case_study_img img{
    display: block;
    width: 100%;
    height: auto;
}

.data_span{
    padding-right: 28px;
}

.data_title{
    display: inline-block;
    position: absolute;
    left: -4%;
}

@media screen and (max-width:1099px) {
    
/*-------------------
hero-img
---------------------*/

#case_study .hero_img{
    height: 215px;
}
}

@media screen and (max-width:768px) {
    #case_study12,
    #case_study11,
    #case_study10,
    #case_study9,
    #case_study8,
    #case_study7,
    #case_study6,
    #case_study5,
    #case_study4,
    #case_study3,
    #case_study2,
    #case_study1{
   padding: 15px 10px 15px ; 
}
    
#case_study .hero_img{
    background-position:36%; 
    background-size: 235%;
    width: 100%;
    height: 200px;
}
    
  .case_study_h2 {
    font-size: 21px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #000;
    text-align: left;
}  
    
 .bg_black {
   display: block;
   width: 30px;
}   
 
.case_study_flex {
   padding-bottom: 45px;
}
    
 .case_study_icon {
    position: absolute;
    right: -15%;
    top: 117%;
}   
    
.case_study_flex_r{
    margin-left: 15px;
}    
    
    
    
}









