﻿.services_continer {
display:table;
position:relative;
width:1000px;
height:auto;
min-height:300px;
margin:50px auto 50px auto;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.services_media {
display:table;
width:45%;
height:auto;
min-height:200px;
float:left;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.services_media img {
width:100%;
height:100%;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.services_content {
display:table;
width:50%;
height:auto;
text-align:justify;
direction:rtl;
min-height:200px;
float:right;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.services_list_title  {
display:block;
position:relative;
width:100%;
height:35px;
margin:0px 0px 20px 0px;
}

.services_list_title p {
display:inline-block;
width:5%;
height:40px;
float:right;
border-right:solid 2px rgba(255,194,0,1);
border-top:solid 2px rgba(255,194,0,1);
border-bottom:solid 2px rgba(255,194,0,1);

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.services_list_title span {
display:inline-block;
width:90%;
height:40px;
float:right;
font:normal 16px 'NeoSansArabic';
color:rgba(110,110,110,1);
text-align:right;
line-height:37px;
margin-right:-50px;
padding:0px 40px 0px 0px;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.services_list_title span:hover {
-webkit-transform: translateX(-15px);
transform: translateX(-15px);

-webkit-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;
}


/*media query*/
@media only screen and (max-width: 768px) {

.services_continer {
width:90%;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.services_media {
display:block;
width:100%;
float:none;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.services_content  {
display:block;
width:100%;
float:none;
margin-top:20px;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

}

@media only screen and (max-width: 360px) {

.services_list_title span {
font-size:14px;
}

.services_list_title p {
margin-left:15px;
}

}