.work-container {
display:table;
position:relative;
max-width:1000px;
height: auto;
margin:50px auto 50px auto;
}

.work-unit {
display:inline-block;
position:relative;
width:30%;
height:200px;
margin:0px 0px 4.966666666666666666666% 4.966666666666666666666%;
float:right;
border-radius:3px;
box-shadow:0px 0px 4px 2px rgba(0,0,0,0.05);
overflow:hidden;
}

.work-container div:nth-child(3) ,.work-container div:nth-child(6){
margin-left:0;
} 

.work-unit img {
width:100%;
height:100%;

border-radius:3px;
}

.work-unit:hover {
transform: scale(1.3,1.3);
-webkit-transform: scale(1.3,1.3);

transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in-out;
}

.info {
display: block;
font:normal 18px 'NeoSansArabic';
color:rgba(255,255,255,1);
text-align: center;
text-transform: uppercase;
padding: 60px 0px 0px 0px;
z-index: 99;
cursor:pointer;

transform: scale(5,5) rotate(25deg);
-webkit-transform: scale(5,5) rotate(25deg);

transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;

}

.zoom-icon {
display: block;
position:absolute;
width:30px;
height:30px;
font:normal 24px 'NeoSansArabic';
color:rgba(255,255,255,1);
text-align: center;
line-height:28.8px;
top:280px;
left:45%;
margin:40px auto 0px auto;
border: 1px solid #FFF;
border-radius: 50%;

transform:scale(5,5) rotate(-180deg);
-webkit-transform:scale(5,5) rotate(-180deg);

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

.work-info {
display: block;
position:absolute;
width: 100%;
height: 100%;
top:150px;
opacity: 0;
z-index: 1;
border-radius:3px;
background:rgba(255,194,0,0.7);
}

.work-unit:hover .work-info { opacity: 1; }

.work-unit:hover .info { 
top: 0px;
transform: scale(1,1) rotate(0deg);
-webkit-transform: scale(1,1) rotate(0deg); 
}

.work-unit:hover .zoom-icon { 
top: 60px;
transform: scale(1,1) rotate(0deg);
-webkit-transform: scale(1,1) rotate(0deg); 
}

#work-overlay-1, #work-overlay-2, #work-overlay-3, #work-overlay-4, #work-overlay-5, #work-overlay-6 {
display:block;
position:fixed;
width:100%;
height:0px;
top:0px;
z-index:99999;
background:rgba(127,97,0,0.9);
overflow:auto;
}

.work-text {
display:block;
position:relative;
width:1000px;
height:auto;
min-height:400px;
font:normal 18px 'NeoSansArabic';
line-height:24px;
color:rgba(255,255,255,1);
text-align:justify;
direction:rtl;
margin:70px auto 0px auto;

-webkit-animation: fadeInRight 0.5s ease-in-out;
animation: fadeInRight 0.5s ease-in-out;

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

.overlay-close {
display:block;
position:relative;
width:40px;
height:40px;
font:normal 40px 'sfctc' !important;
color:rgba(255,255,255,1);
margin:30px auto 30px auto;
cursor:pointer;
z-index:9999;

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

}

.overlay-close:hover {
color:rgba(255,255,255,1);

-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);

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

.overlay-close:before {
content:"\e00d";
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}

::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,1);
}

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

.work-container {
max-width:90%;
}

.work-unit {
width:47.5%;
height:200px;
margin:0px 0px 5% 0px;
}

.work-container div:nth-child(2), 
.work-container div:nth-child(4),
.work-container div:nth-child(6) {
float:left;
}

.work-text {
width:80%;
}

}



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

.work-container {
max-width:90%;
}

.work-unit {
width:100%;
height:200px;
}

}