@charset "utf-8";
/* CSS Document */

html,php {width: 100% ; height: 100%; background-color:#eee; color: #777 ; font: 12px Verdana, Geneva, sans-serif; margin: 0; padding: 0; }
	:root {
		--pb_color: #b30000;
		--pb_hover_color: #fff;
		--background_color:#eee;
        	--pb-link_color:#333;
	}
        html{font-family:Verdana, Geneva, sans-serif; font-size:0.9em; color: #777;}
        body {margin:0; background-color: var(--background_color); }
        header{width:100%; height:65px; position:fixed; top:0; left:0;   z-index:567}
        h1{font-size:1.2em; }
        h2{font-size:1em; font-weight:bold;}
        h3{font-size:1em; }
        a {text-decoration:none; font-size: 14px; color:var(--pb_color)}
        a:hover{color:var(--pb-link_color)}
        .cleaner{clear:both}
        .rev{color:var(--pb_link_color); text-decoration:underline}
        .rev:hover{color:var(--pb_color);text-decoration:none}
        .aspec {color: var(--pb-link_color);}
        .aspec:hover{text-decoration: none; color: var(--pb_color)}
        
        .top_nav{width:50%; ; line-height:55px; background-color: var(--pb_color); color:  var(--pb_hover_color); float:left; border-bottom: 1px solid #999}
        .top_nav:hover{background-color: var(--pb_hover_color); color: var(--pb_color); }
        
        
        
        #logo_shadow{filter: drop-shadow(-1px 2px 10px #777); }
        #logo{ width: 220px; background-color: #fff; position:absolute; left: 0; top:0px; clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); text-align:center; z-index:987}
        #logo img{margin-top: 5px}
        .show_emp{height:45px;display:none}

        .mcnt{ width:95%; text-indent: 25px;margin: 50px auto }
        .gh, .gha, .ghb{display: grid; grid-template-columns: 50% 50%; grid-auto-rows: minmax(100px, auto); margin-left:175px;}
        .grid_holder{}
        .grid_cell{height: 100vh; }
        
        .tumen{background-color: #333}
        .svetal{background-color:#fff}
        .lgrc, .rgrc, .cgrc{position: relative; top: 50%; transform: translateY(-50%); padding: 12px;}
        .lgrc {text-align:left; border-right: 2px dotted #999}
        .rgrc{text-align:right;}
        ul{ padding:0}
        ul li {list-style-type: none}
        ul li a{color: #777}
        ul li:hover{color: var(--pb_color); text-decoration:none; cursor: default;}
        .lgrc ul li {direction: rtl;}
        
        .tal{text-align:left}
        .tar{text-align:right}
        .tac{text-align:center}
        footer{width:100%; background-color: var(--pb_hover_color); color:#777; position:fixed; left:0; bottom:0; filter: drop-shadow(0 -2px 5px #999) ; height:20px; line-height:20px; text-align:center; z-index:432;}
        address{font-size: 1em}
        
        input[type=text], select, textarea { width: 100%; padding: 20px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 14px; resize: vertical }
        input[type=submit] { background-color: var(--pb_color); color:  var(--pb_hover_color); padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
        input[type=submit]:hover { background-color: var(--pb_hover_color); color:  var(--pb_color);  }
        
        .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; }
        #gmap { width:50%; height:50%; min-width:485px; min-height:485px; position:relative; top:50%; transform: translateY(-50%); margin: 10px auto 10px auto;  z-index:989}
        
        #left_nav{width:175px; height:100%; background-color:#fff; position:fixed; left:0; top:0; text-align: center; filter: drop-shadow(-1px 2px 10px #777);  z-index:456}
        #menu{width:100%; position: relative; top: 50%; transform: translateY(-50%); }
        #menu a{ width:100%; line-height:40px; display:block; color:#777; font-size: 1em; transition: transform .5s;}
        #menu a:hover{ color: var(--pb_color);   }
        .s{background-color:#fff; font-size: 1.4em; color: var(--pb_color) !important; }
		

        .figure_ghost{width:33px;height:33px;}
        
        .begg{margin: 0}
        .begg img{height:50%; width:50%; object-fit:contain}
        .bordert {border-top: 2px dotted #999}
        .proekt{margin:80px auto ; width: 50%; max-height:50%; }
        .proekt img{max-width: 100%; height:auto; object-fit:contain; filter: drop-shadow(0 0 2px #999)}
        .proekt_img img{margin: 10px auto; width: 450px; filter: drop-shadow(0 0 2px #999)}
        .proekt_img_h{display:none;}
        
        .figcaption{margin-top: -30px; font: 14px Verdana, Geneva, sans-serif; font-weight:bold; color:#fff; text-shadow:0 0 12px #000, 0 0 12px #111}
        .slide_btn{width:15px; height:15px; margin: 0 2px; background-color:var(--background_color); border-radius:50%; display:inline-block; cursor: pointer;transition: background-color 0.6s ease }
        .slide_btn:hover{background-color:var(--pb_color) }
        
        .slide_left_arrow, .slide_right_arrow{width:50%; height:100%; top:0;  opacity:0}
        .slide_left_arrow{left:0; background:url("images/prev.png") no-repeat; background-position:left center;}
        .slide_right_arrow{ right:0; background:url("images/next.png") no-repeat; background-position:right center;}
        .slide_left_arrow, .slide_right_arrow{position:absolute}
        .slide_left_arrow:hover, .slide_right_arrow:hover{opacity:.7}
        
        .content_pics figure{display:inline; margin: 0; box-sizing: border-box; cursor: pointer; }
        .pxreklama img {transition: transform .2s; border: 2px solid #fff; filter: drop-shadow(0 0 1px #777)}
        .pxbrezenti img  {transition: transform .2s; border: 2px solid #eee ; filter: drop-shadow(0 0 1px #777)}
        .pxreklama img:hover, .pxbrezenti img:hover {transform: scale(1.05);}
        .viewer-show{animation-name:viewer_animation-s; animation-duration:0.5s; animation-fill-mode:forwards}
        .viewer-hide{animation-name:viewer_animation-h; animation-duration:0.5s; animation-fill-mode:forwards}
        #vholder{ position:fixed; top:0; left:100%; width:100%; height:100%; background-color: rgba(0, 0, 0, .3); text-align: center ; z-index:345;}
        #vblock{opacity:0; background-size: contain; background-color:#fff; background-position: center center; border:4px solid white; filter: drop-shadow(-1px 2px 5px #777); text-align:center; margin: 0 auto}
        #vtext{width:50%; height:auto; background-color: #fff; cursor: default; opacity: 0;font-weight:bold; line-height:30px; filter: drop-shadow(-1px 1px 3px #777);  color:#999; margin:0 auto; z-index: -1}
        #ll, #rr{width:50%; height:100%; opacity: 0.7; float:left; cursor: pointer;}
	#ll:hover, #rr:hover{opacity: 1;}
        #ll{background:url('/images/prev.png') no-repeat; background-position: left center; }
        #rr{background:url('/images/next.png') no-repeat; background-position: right center; }
        #kontakti_za_mobilni{display:none; }
        .gm-style-iw-a{background-color: #fff; width:200px; padding:5px; overflow:hidden;}
        .gm-style-moc{display:none;}
    	#status_box{width:100%; background-color:white; position: fixed; bottom: -100%; color: white; text-align:center; font-weight:bold}
    	#status_txt{width:100%; position:relative; top: 25%; transform: translateY(-50%);}
    	.sh_stat{animation-name: show_hide-st ; animation-duration: 8s;}
        .hidden{display:none;}
	.show{display:block;}


        .a_menu{text-align:center; z-index: 988}
	.a_menu a{ font-size: 0.7em;} 
	.s {transform: scale(1.1); }
	#gmap_btn{cursor:pointer; margin: 20px auto 40px auto}
	 .gm-style-moc{display:none;}
     .gm-style-iw-chr{display:none !important;}
    
    #project_data{width:75%; background-color:white; padding:10px; margin: 0 auto; font:14px Verdana; filter: drop-shadow(0 0 2px #999)}
	.fl{float:left}
	.fr{float:right}
	.head_es{background:url("../proj_header_es.png"); width:204px; height:201px}
	.head_ik{background:url("../proj_header_ik.png"); width:254px; height:200px}
	.head_holder{height:201px; }

	
	
	
	ol{list-style-type: initial; list-style-position: inside}

        @media only screen and (max-width:1400px){
            .proekt_img{display:none}
            .proekt_img_h{display:initial}
            .proekt_img_h img{width: 350px;}
            .gh{grid-template-columns: 100%;}
            .dno {display:none}
            input[type=text], select, textarea { padding: 10px; margin: 6px 0 10px 0; }
            #gmap { min-width:350px; min-height:450px;}
            
            
        }
        @media only screen and (max-width:1024px ){
            
            .grid_cell{height:100%}
            .gh, .gha, .ghb{margin-left:0;}
            .ghb{grid-template-columns: 100%;}
            #gmap{width: 100%; min-height:400px;}
            .lgrc, .rgrc {text-align:center; border-right: none}
            #left_nav{display:none}
            #logo{height:65px;}
            footer{height:60px; }
            footer:hover{height:200px !important}
	        #gmap_btn { margin: 0 auto 100px auto}
            #kontakti_za_mobilni{display: block;}
            .show_emp{display:block}
             .proekt{margin:100px auto; width: 75%;}

        }
        @media only screen and (max-width:480px){
            .head_holder{height:403px; }
            .proekt_img_h img{width: 320px;}
            #gmap{min-height:320px; }
           	.fl{float:none; margin: 0 auto;}
        	.fr{float:none; margin: 0 auto;}

        }
        
        @media only screen and (max-height:416px){
            .proekt_img_h img{width: 320px;}
            input[type=text], select, textarea { padding: 8px; margin: 4px 0 6px 0; }
            #gmap { min-width:320px; min-height:200px; bottom: 40px; }
        }
        @keyframes viewer_animation-s{
            from {left:100%}
            to{left:0}
        }
        
        @keyframes viewer_animation-h{
            from {left:0}
            to{left:100%}
        }
        @keyframes show_hide-st{
		    0% {top:-100%; opacity:.2}
		    25% {top:0; opacity: 1}
		    75% {top:0; opacity: 1}
		    100%{top:-100%; opacity: .2}
	    }