.myservices {
    margin-bottom: 0.5em;
	  width: 100%; 
	 
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
	  }
  
  .servicetitle {
   width: 100%; 
	 
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.25em;
	  margin-bottom: 0.5em; 
	  
    
  }


.servicedescriptionwrapper{
	width: 100%; 
	
	min-height: 10em; 
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
  
  .serviceimage {
    width: 30%;
    height: 10em;
   
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
	 
  }

 

  .serviceimage img {
    width: 100%;
    height: 100%; 
	  object-fit: cover;
	  -webkit-transform:  translate(0px, -23px);
-moz-transform:  translate(0px, -23px);
-ms-transform:  translate(0px, -23px);
-o-transform:  translate(0px, -23px);
transform:  translate(0px, -23px);
	   
  }



.serviceimagetitle{
	display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: center;
 
	color: white; 
	  text-shadow: 2px 2px 4px #FEFF86;
	font-size:1.4em;
	width: 100%; 
	z-index: 5; 
	
	-webkit-transform:  translate(0px, 4em);
-moz-transform:  translate(0, 4em);
-ms-transform:  translate(0, 4em);
-o-transform:  translate(0, 4em);
transform:  translate(0, 4em);

}
  
  .shortservicedescription {
    width: 70%;
    height: 10em;
	display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: center;

	
  }

.shortservicedescription:nth-child(even) {
  padding-left: 1em; 
}
  
  .longservicedescription {
    width: 100%;
	  padding: 0.5em;
    display: none;
    overflow: hidden;
    background: rgb(233, 230, 230);
	  margin-top: 0.5em; 
  }
  
.readmore{
margin-top: 2em; }
  
  @media screen and (max-width: 768px) {
	  
	  .serviceimagetitle{
width: 100%; 
	font-size: 2rem; 
		  	-webkit-transform:  translate(0px, 4em);
-moz-transform:  translate(0, 4em);
-ms-transform:  translate(0, 4em);
-o-transform:  translate(0, 4em);
transform:  translate(0, 4em);
}
 

  
    .myservices {
      flex-direction: column;
      align-items: center;
      min-height: 30%;
    }
  
    .servicetitle {
      font-size: 1em;
    }
  
    .serviceimage {
      width: 100%;
      height: 50%;
      padding-left: 0;
      margin-bottom: 1%;
		order:0;
    }
  
    .shortservicedescription {
      width: 100%;
      height: 50%;
      padding-left: 0;
    }

    .serviceimage img{
      
		
		width: 100%;
		height: 15em;
	  object-fit: cover;
		
		
	  
    }
    .shortservicedescription{
        order: 1; 
  

    }

    .readmore{
        order: 2; 
    }
    
    .longservicedescription{
        order:3; 
    }


    
  }