.sites
{
position: relative;
width: 970px;
height: 600px;
display:block;
margin: 0px 10px 0px 12px;
padding:5px 0px 0px 0px;
_background-color: #679ac9;
float: center;
}

.sites_009
{
position: relative;
display:block;
width: 476px;
height: 316px;
background-color: #679ac9;
float:left;	
border-radius: 12px;
margin: 10px 0px 0px 0px;
content:center;
_text-align:center;
border: 2px solid #fff;
overflow:hidden;
}
.sites_009:hover img
{
position: absolute;
display: none;
width: 476px;
height: 316px;
	
}

.container{
width: 100%;
height: 100%;
_position: absolute;
top: 0;
left:0;
}  
	

.container:before, .container:after{
content: '';
width: 476px;
height: 476px;
position: absolute;
top: 0;
left:0;
background: #1d4085;
border-radius:50%;
	 
}    
	
.container:before{
transform: translateY(-185%);
}    

.container:after{
transform: translateY(185%);
    }    
	
.container:before, .container:after{
     opacity: .3;
}    

.sites_009:hover .container:before{
transform: translateY(40%) scale(1.2);
transition: .5s;
opacity: .4;

}    

.sites_009:hover .container:after{
 transform: translateY(-75%) scale(1.2);
 transition: .5s;
 opacity: .3;
 
}   	


.text{
position: absolute;
top: 10%;
color: #ffffff;
text-align: center;
z-index:1;
}    

.text p{
font-size: 18px;
_margin: 0 100px;
text-align: justify;
transform: scale(1);
transition: .5s;
opacity: 0;
z-index:1;
}
.sites_009:hover .text p{
 transform: scale(1);
 opacity: 1;
 z-index:1;
}        


.sites_info
{
position: relative;
display:block;
width: 476px;
height: 316px;
float:right;
border-radius: 12px;
background-color: #d1d7c6;
margin: 10px 0px 0px 0px;
text-align:center;	
border: 2px solid #fff;
overflow:hidden;
}

.sites_info:hover img
{
position: absolute;
display: none;
width: 476px;
height: 316px;
	
}

.container{
width: 100%;
height: 100%;
_position: absolute;
top: 0;
left:0;
}  
	

.container:before, .container:after{
content: '';
width: 476px;
height: 476px;
position: absolute;
top: 0;
left:0;
background: #1d4085;
border-radius:50%;
	 
}    
	
.container:before{
transform: translateY(-185%);
}    

.container:after{
transform: translateY(185%);
    }    
	
.container:before, .container:after{
     opacity: .3;
}    

.sites_info:hover .container:before{
transform: translateY(40%) scale(1.2);
transition: .5s;
opacity: .4;

}    

.sites_info:hover .container:after{
 transform: translateY(-75%) scale(1.2);
 transition: .5s;
 opacity: .3;
 
}   	


.text{
position: absolute;
top: 10%;
color: #ffffff;
text-align: center;
z-index:1;
}    

.text p{
font-size: 18px;
_margin: 0 100px;
text-align: justify;
transform: scale(1);
transition: .5s;
opacity: 0;
z-index:1;
}
.sites_info:hover .text p{
 transform: scale(1);
 opacity: 1;
 z-index:1;
}        


.sites_kyiv
{
position: relative;
display:block;
width: 476px;
height: 316px;
float:left;
border-radius: 12px;
background-color: #c8cfd3;
margin: 10px 0px 0px 0px;
text-align:center;	
border: 2px solid #fff;	
overflow:hidden;
}
	
.sites_kyiv:hover img
{
position: absolute;
display: none;
width: 476px;
height: 316px;
	
}

.container{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left:0;
}  
	

.container:before, .container:after{
content: '';
width: 476px;
height: 476px;
position: absolute;
top: 0;
left:0;
background: #fff;
border-radius:50%;
	 
}    
	
.container:before{
transform: translateY(-185%);
}    

.container:after{
transform: translateY(185%);
    }    
	
.container:before, .container:after{
     opacity: .3;
}    

.sites_kyiv:hover .container:before{
transform: translateY(40%) scale(1.2);
transition: .5s;
opacity: .4;

}    

.sites_kyiv:hover .container:after{
 transform: translateY(-75%) scale(1.2);
 transition: .5s;
 opacity: .3;
 
}   	


.text{
position: absolute;
top: 10%;
color: #ffffff;
text-align: center;
z-index:1;
}    

.text p{
font-size: 18px;
_margin: 0 100px;
text-align: justify;
transform: scale(1);
transition: .5s;
opacity: 0;
z-index:1;
}
.sites_kyiv:hover .text p{
 transform: scale(1);
 opacity: 1;
 z-index:1;
}        

.sites_kharkiv
{
position: relative;
display:block;
width: 476px;
height: 316px;
float:right;	
border-radius: 12px;
background-color: #c8cfd3;
margin: 10px 0px 0px 0px;
text-align:center;
border: 2px solid #fff;
overflow:hidden;	

}
.sites_kharkiv:hover img
{
position: absolute;
display: none;
width: 476px;
height: 316px;
	
}

.container{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left:0;
}  
	

.container:before, .container:after{
content: '';
width: 476px;
height: 476px;
position: absolute;
top: 0;
left:0;
background: #fff;
border-radius:50%;
	 
}    
	
.container:before{
transform: translateY(-185%);
}    

.container:after{
transform: translateY(185%);
    }    
	
.container:before, .container:after{
     opacity: .3;
}  

.sites_kharkiv:hover .container:before{
transform: translateY(40%) scale(1.2);
transition: .5s;
opacity: .4;

}    

.sites_kharkiv:hover .container:after{
 transform: translateY(-75%) scale(1.2);
 transition: .5s;
 opacity: .3;
 
}   	


.text{
position: absolute;
top: 10%;
color: #ffffff;
text-align: center;
z-index:1;
}    

.text p{
font-size: 18px;
_margin: 0 100px;
text-align: justify;
transform: scale(1);
transition: .5s;
opacity: 0;
z-index:1;
}
.sites_kharkiv:hover .text p{
 transform: scale(1);
 opacity: 1;
 z-index:1;
}

@media only screen and (max-width : 1100px)
{
    .sites
    {
        position: relative;
        width: 700px;
        height: 1200px;
        display:block;
        margin: 0px 10px 0px 12px;
        padding:15px 0px 0px 0px;
        _background-color: #679ac9;
        float: center;
    }


    .sites_009
    {
        position: relative;
        display:block;
        width: 476px;
        height: 316px;
        background-color: #679ac9;
        left:50%;
        transform: translate(-50%,0%);
        border-radius: 12px;
        margin: 10px 0px 0px 0px;
        content:center;
        _text-align:center;
        border: 2px solid #fff;
        overflow:hidden;
    }

    .sites_info
    {
        position: relative;
        display:block;
        width: 476px;
        height: 316px;
        left:50%;
        transform: translate(-96%,0%);
        border-radius: 12px;
        background-color: #d1d7c6;
        margin: 10px 0px 0px 0px;
        text-align:center;
        border: 2px solid #fff;
        overflow:hidden;
    }

    .sites_kyiv
    {
        position: relative;
        display:block;
        width: 476px;
        height: 316px;
        left:50%;
        transform: translate(-50%,0%);
        border-radius: 12px;
        background-color: #c8cfd3;
        margin: 10px 0px 0px 0px;
        text-align:center;
        border: 2px solid #fff;
        overflow:hidden;
    }

    .sites_kharkiv
    {
        position: relative;
        display:block;
        width: 476px;
        height: 316px;
        left:50%;
        transform: translate(-96%,0%);
        border-radius: 12px;
        background-color: #c8cfd3;
        margin: 10px 0px 0px 0px;
        text-align:center;
        border: 2px solid #fff;
        overflow:hidden;

    }

}