@font-face {
	font-family:raleway-regular;
	src: url(../fonts/raleway-regular.otf);
}
body{
    background:#fff;
	transition-property: all;
    transition: all ease 0.5s;
	font-family:'raleway-regular';
	scroll-behavior: smooth;
	-webkit-animation-duration: 0.9s;
	animation-duration: 0.9s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
.wrapper{
    width:92.72727272727273%;
    margin:0 auto;
}
header ul.social li a,
.main .work a .caption,
header nav ul li a{
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
	transition: 0.9s;
}
/*------------------------------------------------------------------*/
h1, h2, h3, h4, h5 ,h6{
    color:#4b4848; 
	line-height:1.3;
}
/*------------------------------------------------------------------*/
h1              { font-size:2em; margin:.67em 0 }
h2              { font-size:1.5em; margin:.75em 0 }
h3              { font-size:1.17em; margin:.83em 0 }
h5              { font-size:.83em; margin:1.5em 0 }
h6              { font-size:.75em; margin:1.67em 0 }
h1, h2, h3, h4,
h5, h6          { font-weight: bolder }
/*-----------------------------------*/
.clearfix:before,  
.clearfix:after {  
    content:"";  
    display:table;
}  
.clearfix:after {  
    clear:both;
}  
 .clearfix {  
    *zoom:1; 
	 padding: 0;
}
/*------------------------------------------------------------------*/
@media (max-width:1100px){
  .logo-index{
	 background-size:55%;
	 background-repeat:no-repeat;
	 margin-top:-2px;
}}
.logo-index{
	background-image:url(../img/logo.gif);
	width:145px;
	height:80px;
	transition-property: all;
    transition: all ease 0.3s;
	opacity:85%;
}
.logo-index:hover{
	background-image:url(../img/logo-hover.gif);
	width:145px;
	height:80px;
	transition:0.3s;
}
@media (max-width:1100px){
  .logo-front{
	 background-size:55%;
	 background-repeat:no-repeat;
	 margin-top:-2px;
}}
.logo-front{
	background-image:url(../img/logo-front.gif);
	width:145px;
	height:80px;
	transition-property: all;
    transition: all ease 0.3s;
}
.logo-front:hover{
	background-image:url(../img/logo-front-hover.gif);
	width:145px;
	height:80px;
	transition:0.3s;
}
@media (min-width:1100px){
    header{
        display:block;
        position:fixed;
        top:0;
        left:0;
        width:250px;
        min-height:100%;
        padding:0 0 0 50px;
        background:#ffffff; 
        float:left;
        overflow:hidden;
        z-index:9999;
    }

    header .logo{
        margin-top:100px;
    }

    header nav ul{
        display:block;
        overflow:hidden;
        margin-top:100px;
        list-style:none;
    }

    header nav ul li{
        display:block;
        margin-bottom:30px;
    }

    header nav ul li a{
        color:#454545;
        font-family:arial;
        font-size:14px;
        text-decoration:none;
        letter-spacing:1px;
    }

    header nav ul li a:hover,
    header nav ul li a.selected{
        color:#969595;
		text-decoration:underline;
    }

    header .footer{
        position:absolute;
        bottom:50px;

    }

    header ul.social{
        list-style:none;
        margin-bottom:5px;
    }

    header ul.social li{
        display: block;
        float: left;
        position: relative;
        margin: 0 10px 15px 0;
    }

    header .rights p{
        color: #454545;
        font-family: arial;
        font-size: 11px;
        letter-spacing: 1px;
        line-height: 16px;
    }

    header .rights a{
        font-family: arial;
        /*font-weight: bold;*/
        text-decoration: none;
		color:#369;
    }
    #menu_icon,
    .close_menu{
        display: none;
    }

}
#menu_icon,
.close_menu{
    float: right;
    margin-right: 40px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: url('../img/men_icons.svg') no-repeat;
}
#menu_icon{    
    background-position: 0 0;
}
#menu_icon:hover{
	    background: url('../img/men_icons-hover.svg') no-repeat;
		transition:0.5s;
}
.close_menu{
    background-position: -41px 0!important;
}
.main{
    width: 100%;
    height: 100%;
    padding-left: 300px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing:border-box;
    position:relative;
    z-index:55;
    background:#FFF;
    clear: both;
}
.text{
	float:left;
	padding-left:100px;
	padding-top:100px;
	text-height:36px;
	padding-right:450px;
	position:fixed;
}
h10{ 
	font-size:1.4em;
	color:#FFF;
	line-height:29px;
}
.main .work{
    display:block;
    height:auto;
    float:left;
    position:relative;
    overflow:hidden;
}
.work-des{ width:25%;}
.work-front{ width:20%;}
.main .work .media{
    width:100%;
    vertical-align:middle;
}
.main .work .caption{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    background: #ffffff;
    opacity: 0;
}
.main .work a:hover .caption{
    opacity: 1;
}
.work .caption .work_title{
    display: block;
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    margin-top: -40px;
}
.main .work .caption h1{
    position:relative;
    display:inline-block;
    max-width:90%;
    padding:20px 0;
    z-index:77;
    color:#454545;
    font-family:"raleway-regular", arial;
    font-size:16px;
    letter-spacing:.5px;
    border-bottom:1px solid #bfbbbb;
    border-top:1px solid #bfbbbb;
}
.top{
    width:100%;
    height:350px;
    overflow:hidden;
    display:block;
    position:relative;
    background: url('../img/hero_image.jpg') no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: 50% 50%;
}
.work_nav{
    display: block;
    width: 100%;
}
.work_nav .btn{
    float: right;
}
.work_nav ul{
    list-style: none;
}
.work_nav ul li{
    display: block;
    float: left;
    margin: 0 0 1px 1px;
    position: relative;
}
.work_nav a{
    display: block;
    width: 40px;
    height: 40px;
    background: url('../img/p_navigation.png') no-repeat;
    background-position: 0 0;
}
.work_nav a.previous{
    background-position: 0 0;
}
.work_nav a.grid{
    background-position: -41px 0;
}
.work_nav a.next{
    background-position: -82px 0;
}
.top .title{
    display: block;
    width: 100%;color: #4b4848;
    font-family: "raleway-bold", arial;
    font-size: 26px;
    font-weight: bold;
    background: rgba(255, 255, 255, .7);
    padding: 20px;
    text-transform: uppercase;
    line-height: 30px;
    margin: 0!important;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.content_header{
    position:absolute;
    bottom:0;
    margin:0 auto;
    left:50%;
    margin-left:-46.36363636363637%;
}
.content{
    color: #4b4848;
    font-family: "raleway-regular", arial;
    font-size: 15px;
    line-height: 22px;
    padding: 60px 30px;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.content p{
    color: #4b4848;
    font-family: "raleway-regular", arial;
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 60px;
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6{
    color: #4b4848;
    font-family: "raleway-semibold", arial;
    font-weight: bold;
    line-height: 28px;
    margin-bottom: 30px;
}
#map .map_adresse{
    font-family: 'raleway-regular', arial;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 1px;
}
#map .map_address,
#map .map_tel{
    padding: 5px;
}
#map .map_address .address,
#map .map_tel .tel{
    font-family: 'raleway-bold', arial;
    font-weight: bolder;
}
.tooltip{
    display: block;
    padding: 7px 10px;
    background: #454545;
    color: #fff;
    font-family: "raleway-regular", arial;
    font-size: 12px;
    position: absolute;
    white-space: nowrap;
    z-index: 999;
    opacity: 0;
    text-align: center;
    letter-spacing: .5px;
}
.tooltip:after{
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 3px 3px 0 3px;
    border-color: #454545 transparent transparent transparent;
    display: block;
    text-align: center;
    position: absolute;
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
}
.text-index{
	font-size:15px;
	line-height:1.2;
	padding-right:40px;
	color:#898989;
}
@media (max-width:1100px){
    header{
        display: block;
        width: 100%;
        min-height: 100px;
        padding: 0;
        position: relative;
    }
    header .logo{
        margin: 40px 0 0 30px;
        float: left;
    }
    header .footer{
        display: none;
    }
    header #menu_icon,
    header .close_menu{
        float: right;
        margin: 40px 30px 0 0;
    }    
    header nav{
        width: 100%;
        position: absolute;
        top: 100px;
        left: 0;
        z-index: 9999;
    }
    header nav ul{
        list-style: none;
        display: none;
        position: relative;
    }
    header nav ul li a{
        display: block;
        width: 100%;
        padding: 30px 0;
        text-align: center;
        color: #454545;
        font-family: "raleway-regular", arial;
        font-size: 14px;
        text-decoration: none;
        border-top: 1px solid #f7f5f5;
        background: #fff;
    }
    header nav ul li a:active{
        background: #f7f5f5;
    }
    #menu_icon,
    .close_menu,
    .show_menu{
        display: block;
    }
    .show_menu{
        display: block;
    }

    .main .work{
        width: 50%;
    }
    .main{
        width: 100%;
        position: relative;
        padding-left: 0;
    }
    #map{
        margin: 0!important;
    }
}
@media (max-width:550px){
     .main .work{
        width: 100%;
    }
}
#box4{
	margin-bottom: 5px;
	background-color: #ccc;
	color: #333;
	padding: 10px;
	text-align: center;
	width: 200px;
	height:100px;
	text-indent: 0px;
	border: 1px solid #888;
	-moz-transition: all 3s ease-out;
	-o-transition: all 3s ease-out;
	-webkit-transition: all 3s ease-out;
	cursor: pointer;
}
#box4:hover {
	background-color: #97CE68;
	color: #000;
	transform: scale(2);
}
/*------------------------------------------------------------------*/
.modalDialog {
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
 	background:rgba(0,0,0,0.75);
	z-index:99999;
	-webkit-transition:opacity 400ms ease-in;
	-moz-transition:opacity 400ms ease-in;
 	transition:opacity 400ms ease-in;
	display:none;
	pointer-events:none;
	text-align:center;
}
.modalDialog:target {
	display:block;
	pointer-events:auto;
}
.modalDialog > div {
	width:auto;
	height:100%;
	position:relative;
	margin:118px 0px 0px 0px;
	padding:80px 40px 50px 50px;
	background:#FFF;
	text-align:left;
	font-size:14px;
}
.modalDialog{
    animation-duration:0.8s; 
    animation-fill-mode:both;  
    animation-name:fadeInDown; 
}
.close{
	background-image:url(../img/close.svg);
	position:absolute;
	width:40px;
	height:40px;
	text-decoration:none;
	margin-top:-50px;		
	transition-property: all;
    transition: all ease 0.5s;
} 
.close:hover{
	transition:0.5s;	
	background-image:url(../img/close-hover.svg);
}
.footer-window{
	margin-top:60px;
	color:#454545;
    font-family:arial;
    font-size:11px;
    letter-spacing:1px;
    line-height:16px;
	padding-bottom: 10px;
}
.footer-images{margin-bottom:15px;}
.footer-images-02{margin-bottom:15px;margin-left:6px;}
/*------------------------------------------------------------------*/
@keyframes fadeInDown { 
    0% {                
        opacity:0;
        transform:translate3d(0px, 0px, 0px);
    }
    100% {              
        opacity:1;
        transform:none;
    }
}
.dr-front{
	width:30px;
	height:30px;
	background-image:url(../img/dr.svg);
	background-repeat:no-repeat;
	transition-property: all;
    transition: all ease 0.5s;
}
.dr-front:hover{
	width:30px;
	height:30px;
	background-image:url(../img/dr-hover.svg);
	background-repeat:no-repeat;
	transition:0.5s;
}
.dr-front{
	width:30px;
	height:30px;
	background-image:url(../img/dr.svg);
	background-repeat:no-repeat;
	transition-property: all;
    transition: all ease 0.5s;
}
.dr-front:hover{
	width:30px;
	height:30px;
	background-image:url(../img/dr-hover.svg);
	background-repeat:no-repeat;
	transition:0.5s;
}
.be-front{
	width:30px;
	height:30px;
	background-image:url(../img/be.svg);
	background-repeat:no-repeat;
	transition-property: all;
    transition: all ease 0.8s;
}
.be-front:hover{
	width:30px;
	height:30px;
	background-image:url(../img/be-hover.svg);
	background-repeat:no-repeat;
	transition:0.8s;
}
.fl-front{
	width:30px;
	height:30px;
	background-image:url(../img/fl.svg);
	background-repeat:no-repeat;
	transition-property: all;
    transition: all ease 0.8s;
}
.fl-front:hover{
	width:30px;
	height:30px;
	background-image:url(../img/fl-hover.svg);
	background-repeat:no-repeat;
	transition:0.8s;
}
.plus-front{
	width:91px;
	height:30px;
	background-image:url(../img/plus.svg);
	background-repeat:no-repeat;
	transition-property: all;
    transition: all ease 0.8s;
}
.plus-front:hover{
	width:91px;
	height:30px;
	background-image:url(../img/plus-hover.svg);
	background-repeat:no-repeat;
	transition:0.8s;
}
.plus-front-active{
	width:90px;
	height:30px;
	background-image:url(../img/design.svg);
	background-repeat:no-repeat;
	transition-property: all;
    transition: all ease 0.8s;
}
.plus-front-active:hover{
	width:90px;
	height:30px;
	background-image:url(../img/design-hover.svg);
	background-repeat:no-repeat;
	transition:0.8s;
}
.wibro{
	padding:0px;
    }
.wibro:hover{
    -webkit-animation:0.12s tremor ease-out infinite;  
    animation:0.12s tremor ease-out infinite;    
}
/*------------------------------------------------------------------*/
@-webkit-keyframes tremor {
    0%, 25% {
        left: -1px;
        top:-1px;
        -webkit-transform: translateX(-2%);
        transform: translateX(-2%);
    }
    50%, 100% {
        left: 1px;
        top: 1px;
        -webkit-transform: translateX(2%);
        transform: translateX(2%);
    }
}
@-moz-keyframes tremor {
    0%, 25% {
        left: -1px;
        -webkit-transform: translateX(-2%);
        transform: translateX(-2%);
    }
    50%, 100% {
        left: 1px;
        -webkit-transform: translateX(2%);
        transform: translateX(2%);
    }
}
/*------------------------------------------------------------------*/
.scale:hover {
    transform: scale(1.025);
   }
.scale-icon {
    transform: scale(1.0);
	transition:0.5s;
}
.scale-icon:hover {
    transform: scale(1.1);
	transition:0.5s;
}
.scale-icon:active {
    transform: scale(1.1);
	transition:0.5s;
}
/*------------------------------------------------------------------------Animation*/
@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*------------------------------------------------------------------------Animation*/
.wibro{
	padding:0px;
    }
.wibro:hover{
    -webkit-animation:0.12s tremor ease-out infinite;  
    animation:0.12s tremor ease-out infinite;    
}
/*------------------------------------------------------------------------Animation*/
@-webkit-keyframes tremor {
    0%, 25% {
        left: -1px;
        top:-1px;
        -webkit-transform: translateX(-2%);
        transform: translateX(-2%);
    }
    50%, 100% {
        left: 1px;
        top: 1px;
        -webkit-transform: translateX(2%);
        transform: translateX(2%);
    }
}
/*------------------------------------------------------------------------THE-END*/