/*****************************/
/*           HTML            */
/*****************************/

   * {
       margin: 0;
   }

    html, body {    
        height: 100%;    
        margin: 0;          
    }  
    
    body {
        background: #fff url(../img/background_body.png) repeat-x 0px 0px;
        color:#414141;       
        font: normal 14px 'Open Sans', sans-serif;
    }
    
    ul, li {
        margin: 0;
        padding: 0;
    }    
 
    input, select, textarea, button {
        font-family: inherit;
        outline: none;
    } 
    
    a {
        text-decoration: none;        
    }  
    
    h1,
    h2,
    h3,
    h4 {
    	font-weight: 400;
    	color: #799d1e;
    	margin-bottom: 1em;
    } 
    
    
/*****************************/
/*          1. main          */
/*****************************/  
		
	.main {
		width: 100%;
		max-width: 980px;		
		margin: 0 auto;
		position: relative;		
		background: #fff;
		overflow: hidden;
    }
    mark {background-color:transparent; color:white}
    .main {
		box-shadow: 0px 0px 15px rgba(0,0,0,0.15);
    }
 
    
/*****************************/
/*         2. header         */
/*****************************/  
    
    .header {
		padding: 15px 30px 15px 30px;	
		position: relative;			
    }
    
    .logo {
		max-width: 50%;		
    }
    
    .logo img {
		max-width: 100%;
    }    
    
    /* top menu */
    
    .header_navigation {		
		position: absolute;
		padding-right: 2.5em;
		top: 50%;
		right: 0;
		height: 30px;
		margin-top: -15px;
    }
    
    /* top navigation */
    
    .navigation_top {
		float: right;
    }    
    
    .navigation_top a {
		display: inline-block;
		color: #104b7c;
		padding: 5px 10px;		
		margin-right: 20px;
		border-top: 2px solid transparent;
    }
    
    .navigation_top a:hover,
    .navigation_top a.active {
		border-top: 2px solid #104b7c;
    }
    
    /* lang */
    
    .language {
		float: right;		
    }
    
    .language a {
		margin: 5px 0 0 10px;
		display: inline-block;
		width: 20px;
		height: 20px;		
		background: transparent url(../img/si.png) no-repeat 0px 0px;
    }
    
    .language a.en {
		background-image: url(../img/en.png);
    }
    

/*****************************/
/*        3. slideshow       */
/*****************************/

	.slideshow {
		max-height: 299px;
		width: 100%;
		background: #114e7d;		
		position: relative;
		box-shadow: 0px -5px 12px rgba(0,0,0,0.25);
	}
	
	.slides {
		position: relative;
		z-index: 0;			
	}
	
	.slides .thumbnail_image img {
		max-width: 100%;
	}
	
	.inner,
	.template_container {	
		padding: 0 2.5em;	
		position: relative;
		z-index: 10;
		background: #fff;	
	}
	
	.template_container {
		min-height: 100px;
	}
	
	.template {
		margin-bottom: 0;
		padding-bottom: 20px;		
	}
		
	.mobile {
		display: none;
	}
	

/*****************************/
/*        4. navigation      */
/*****************************/

	.navigation {		
		z-index: 5;	
		width: 100%;
		background: #9ec639;
		border-bottom: 25px solid #114e7d;	
		box-shadow: 0px 5px 12px rgba(0,0,0,0.25);	
		position: relative;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;			
	}
	
	.navigation:before {
		content: "";
		width: 100%;
		height: 3px;
		background: #fff;
		bottom: 0;
		left: 0;
		position: absolute;
	}
	
	.navigation a {
		width: 15%;	
		color: #fff;
		font-size: 20px;			
		display: inline-block;		
		position: relative;		
		text-align: center;		
		text-transform: uppercase;		
	}	
	
	.navigation a:hover,
	.navigation a.active {
		color: #094e93;
	}
	
	.navigation a:hover > span > span,
	.navigation a.active > span > span {
		background: #3c6c99;
	}
	
	.navigation a > span {
		margin: 0 auto;
		display: block;		
		width: 90%;	
		max-width: 111px;	
		height: auto;		
		margin-top: -50%;	
		margin-bottom: 0.5em;	
		border-radius: 50%;	
		position: relative;			
		border: 6px solid rgba(255,255,255,0.35);
		overflow: hidden;
	}	
	
	.navigation a > span > span:before{
		content: "";
		display: block;
		padding-top: 100%; 
	}
	
	.navigation a > span > span {
		background: #094d93;
		display: block;
		width: 100%;
		height: 100%;		
		position: relative;
	}	
	
	.navigation a > span:before {
		position: absolute;
		width: 100%;
		height: 100%;	
		content: "";		
		z-index: 505;
		left: 0;
		background: transparent url(../img/icon_house.png) no-repeat 50% 50%;		
	}
	
	.navigation a > span.p2:before {
		background-image: url(../img/icon_area.png);
	}
	.navigation a > span.p3:before {
		background-image: url(../img/icon_shop.png);
	}
	.navigation a > span.p4:before {
		background-image: url(../img/icon_info.png);
	}
	.navigation a > span.p5:before {
		background-image: url(../img/icon_con.png);
	}
	
	.circle:after {
		position: absolute;
		width: 95%;
		height: 95%;
		border: 2px solid white;
		border-radius: 50%;
		content: "";
		top: 2.5%;
		left: 2.5%;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		z-index: 500;
	}
	
/*****************************/
/*          5. home          */
/*****************************/

	.home_columns {				
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;	
		padding-top: 1.5em;			
	}
	
	.home_columns .column {
		width: 30%;
		max-width: 210px;
		display:inline-block;		
		text-align: center;
		vertical-align: top;
	}
	
	.home_columns .column .images {
		width: 100%;		
		border-radius: 50%;
		overflow: hidden;
		height: auto;		
		margin: 0 auto;
		position: relative;
		background: #24608f;
	}
	
	.home_columns .column .images .thumbnail {
		position: absolute;
	}

	.home_columns .column h3 {
		font-size: 22px;
		margin-top: 0.5em;
	}
	
	/* bottom */
	
	.home_bottom {
		background: #efefef;
		padding: 1em 0 !important;
		text-align: center;
		margin-bottom: 0 !important;
		position: relative;
		z-index: 10;
	}
	
	.home_bottom h3 {		
		font-size: 2em;
		font-weight: 700;
		text-transform: uppercase;		
	}
    
    /* clocks */
    
    .clocks {
    	position: relative;
    	z-index: 5;
        background: #f5f5f5; 
        padding-top: 0.5em;       
    }  
        
    .location {
        display: inline-block;
        vertical-align: bottom;
        width: 15%;
        max-width: 110px; 

    }

    .location span {
        display: block;
        text-align: center;
        color: #799d1e;      
        font-size: 16px; 
    }
	
	.location_main {
        width: 22%;
        max-width: 140px;
		font-weight: bold;
        font-size: 20px !important; 
    } 
    
    .location span {
		font-size: inherit;
    }

    .location:not(.location_main) svg {
        border-bottom: 9px solid transparent;
    }

    .hour, .min, .sec { stroke-width: 1px; fill: #333; stroke: #555; }

    /*
    .hour {
        stroke: red;
    }

    .min {
        stroke: blue;
    } */

    .sec { stroke: #f55; }


/*****************************/
/*         6. content        */
/*****************************/

	#page .template_container,
	#catalog .template_container {
		padding-top: 2em;
		box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
		/*margin-bottom: 2.5em;*/
	}
	
	#page .template_container p,
	#catalog .template_container p  {
		line-height: 150%;
	}
	
	#page .template_container .tl_content,
	#catalog .template_container .tl_content {
		padding-right: 25px;
	}
	
	#page .template_container.home,
	#catalog .template_container.home {
		font-size: 115%;
	}
	
	#page h1,
	#catalog h1 {				
		padding: 0.3em 1.4em;
		font-size: 2.0em;
		text-transform: uppercase;
		display: block;
		margin: 0;		
	}
	
/*****************************/
/*         7. footer         */
/*****************************/

	.footer {
		position: relative;
		background: #114e7d;
		color: #fff;		
	}
	
	.footer:before {
		position: absolute;
		background: #9ec639;
		border-bottom: 3px solid #fff;
		height: 40px;
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		z-index: 0;
	}
	
	.footer .footer_column {
		width: 30%;
		vertical-align: top;		
		display: inline-block;
		position: relative;
		z-index: 0;
		line-height: 150%;
    }     
    
    .footer .footer_column a {
		color: inherit;
    }
    
	.footer .footer_column h3 {
		color: inherit;
		text-transform: uppercase;
		font-size: 1.05em;
		display: block;
		background: transparent url(../img/icon_location.png) no-repeat 0 50%;
		line-height: 40px;
		padding-left: 35px;
	}
	
	.footer .footer_column:first-of-type h3 {
		background-image: url(../img/icon_company.png);
	}
	
	.footer .footer_column:last-of-type h3 {
		background-image: url(../img/icon_contact.png);
	}
	
	.footer .footer_column .column_content {
		padding-top: 5px;		
	}
	
	/* info */
	
	.footer_column span.company {
		font-size: 16px;
	}
	
	.column_content .icon {
		display: block;
		position: relative;		
		margin-bottom: 5px;
		padding-left: 25px;
		font-size: 12px;
    }
    
    .column_content .icon:after {
		display: inline-block;
		height: 20px;
		width: 20px;		
		position: absolute;
		left: 0;
		top: 0;
		content: "";
		background: transparent url(../img/sprite-graphics.png) no-repeat 0px 0px;
    }
    
    .column_content .icon.phone1 {
		margin-top: 45px;
    }
    
    .column_content .icon.phone1:after {
    	background-position: -20px 1px;    	
	}
	
	.column_content .icon.email:after {
    	background-position: -42px 4px;
	}  	
	
	/* map */
	
	.footer_column #map {
		height: 200px;	
		width: 100%;		
    }
	
	span.bottom {
		background: #063b64;
		height: 45px;
		display: block;
		color: #9bc2e0;
		text-transform: uppercase;
		line-height: 45px;
		border-top: 1px solid #24608f;
		padding-left: 2.5em;
	}
	
/*****************************/
/*          8. form          */
/*****************************/  	

	.ajax_form input[type=text],
	.ajax_form input[type=password],
    .ajax_form textarea {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;          
        
        border-top-width: 2px; 
        display: block;
        width: 95%;
        padding: 1.5% 2.5%;
        font-size: inherit;
        margin-bottom: 10px;        
        font-style: italic;
    }
    
    .ajax_form.dark input[type=text],   
    .ajax_form input[type=password],
    .ajax_form.dark textarea {
    	background: #e6e6e6;
        border: 1px solid #b9b9b9;
        color: #404041;
	}
    
    .ajax_form textarea {
        max-width: 95%;
        min-width: 95%;
        max-height: 60px;
        min-height: 60px;
        padding-top: 5px;
        resize: none;
    }
    
    .ajax_form input[type=submit] {
        border: none;
        background: transparent url(../img/button.png) no-repeat 0px 0px;
        text-align: center;
        width: 142px;
        height: 37px;
        line-height: 37px;
        font-size: inherit;
        color: #575757;
        float: right;
        cursor: pointer;
    }
    
    form .controls {
        position: relative;
        height: 60px;
        margin-top: 15px;           
    }
    
    form .controls .status {        
        float: left; 
        padding-top: 5px;     
    }        
    
    .loader {
        position: absolute; 
        top: 0;
        right: 0;      
        display: none;
    }
        
    form span.error {
        color: red;
    }
    
    form span.success {
        color: #9ec639;
    }
    
    form .field_error {
        border-color: red !important;
    }
    
    form label.field_error {
		color: red;
    }
    
    /* povprasevanje */
    
    div.inquiry {
		box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
		margin-top: -5px;
		position: relative;
		z-index: 6;
		padding-top: 50px;
    }
    
    div.inquiry input[type=text] {
		padding: 5px 2%;
		margin-bottom: 0;		
    }
    
    div.inquiry input[type=text]:focus,
    div.inquiry textarea:focus {		
		box-shadow: 0px 0px 7px rgba(158,198,57,0.5);
        border: 1px solid rgba(158,198,57,0.8) !important;
    }
    
    div.inquiry div.radio {
		display: inline-block;
		width: 22%;
    }
    
    div.inquiry input[type=radio] {
		margin: 3px 5px 0 0;
		float: left;
    }
    
    div.inquiry textarea {		
        max-width: 95%;
        min-width: 95%;
        max-height: 120px;
        min-height: 100px;   
        padding: 5px 2%;        
    }
    
    div.inquiry form {
		padding: 0 2.5em;	
    }
    
    div.line {		
		margin-bottom: 20px;
    }	
	
	div.line label {
		display: inline-block;
		float: left;
		width: 30%;
		vertical-align: bottom;
		font-weight: 700;
	}
	
	div.line label span {
		display: inline-block;
		padding-left: 5px;
	}
	
	div.line > div {
		overflow: hidden;
	}
	
	div.inquiry .controls {
		width: 99.5%;
	}

/*****************************/
/*          9. misc          */
/*****************************/  

	.left {
		float: left;
	}
	
	.right {
		float: right;
	}
	
	.overflow:after {
		content: "";
		display: block; 
		height: 1px; 
		clear: both;
	}   
    
    .el_justify {
        max-width: 100%;
        margin: 0 auto;       
        text-align: justify;           
    }
    
    .el_justify:after {
        content: "";
        width: 100%;
        display: inline-block;   
        padding: 0;    
    }
    
    .ena {
		width: 100%;
		border: 1px solid black;
    }
    
    .el_rounded {
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
    }
    
    ::-webkit-input-placeholder { /* WebKit browsers */
	   
	}
	:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	   
	   opacity:  1;
	}
	::-moz-placeholder { /* Mozilla Firefox 19+ */
	 
	   opacity:  1;
	}
	:-ms-input-placeholder { /* Internet Explorer 10+ */
	  
	}
    
    
/*****************************/
/*         10. media         */
/*****************************/

@media(max-width: 900px) { 
	
	/* clocks */
	
	.clocks .location:last-of-type,
	.clocks .location:first-of-type {
		display: none;
	}
}

@media(max-width: 780px) { 
	
	/* navigation */
	
	.navigation a { 
		font-size: 16px;	
	}
	
	.navigation a > span:before {
		background-size: 39%;
	}
	
	/* clocks */
	
	.location span {
		font-size: 16px;	
	}	
	
	/*footer*/
	
	.footer .footer_column {
    	width: 45%;	
	}
	
	.footer .footer_column:nth-child(2) {
		margin-bottom: 30px;
	}	
}  

@media(max-width: 680px) {
	
	/* clocks */
	
	.location span {
		font-size: 14px;	
	}
	
	/* logo */	
	
    .logo {
		width: 210px;		
    }   
    
    /* pvopraševanje */
    
    div.line label {		
		float: none;
		display: block;
		padding-bottom: 4px;
	}
	
	div.line > div {
		overflow: inital;
	}
    
	
}

@media(max-width: 580px) { 
		
	/* header */
	
	.header {
    	padding-left: 15px;
		padding: right: 15px;
		position: relative;			
    }        
	
	/* navigation */	
	 
	.navigation a { 
		font-size: 14px;	
	}
	
	.navigation_top a {
		padding: 5px 5px;		
		margin-right: 10px;
	}
	
	.language a {
		margin: 5px 0 0 10px;
		display: inline-block;
    }
	
	/* clocks */
	
	.location span {
		min-height: 40px;
	}
}  

@media(max-width: 480px) { 
	.desktop {
		display: none;
	}	
	
	.mobile {
		display: inline-block;
	}
	
	.header {
		padding: 13px 15px 25px;			
    }      
	
	.inner,
	.template_container {
		padding: 0 1.5em;
	}
	
	#page h1 {				
		padding: 0.5em 0.5em 0.25em 0.65em;
	}	
    
    /* home */
    
    .home_columns {		
		text-align: center;
    }
    
    .home_columns .column {    	
		width: 210px;
		display: block;
		text-align: center;
		margin: 0 auto 25px;		
    }
    
    /* language */
    
	.header_navigation {		
		top: 13px;
		right: 75px;	
		margin: 0;		
		padding-right: 0;	
	}
    
    .language {
		float: none;	
    }
    
    .language a {
		margin: 0;
		display: inline-block;
		width: 51px;
		height: 51px;			
    }
    
    .language a.en {
		background-image: url(../img/en_large.png);
    }
    .language a.si {
		background-image: url(../img/si_large.png);
    }
    
    /* navigation */
    
    span.mobile_menu {
		width: 51px;
		height: 54px;
		cursor: pointer;
		background: transparent url(../img/mobile_menu.png) no-repeat 0px 0px;
		position: absolute;
		top: 13px;
		right: 15px;
    } 
    
    .navigation {
    	display: none;
		background: #094e93;
		border: 0;
		padding: 0;	
		position: relative;			
		box-shadow: none;	
		box-shadow: 0px 0px 12px rgba(0,0,0,0.55);	
    } 
    
    .navigation.el_justify:after {
		display: none;
    } 
    
    .navigation:before {
		display: none;
    }      
    
    .navigation.inner {
		padding: 0 !important;
		margin: 0 !important;
    }
    
    .navigation a {
    	width: 100%;
		padding: 5px 0px 5px 15px;
		color: #fff;
		font-size: 20px;			
		display: block;		
		text-align: left;
		position: relative;		
		border-bottom: 2px solid #9ec639;		
	}	
	
	.navigation a:hover,
	.navigation a.active {
		color: #9ec639;
	}	
	
	.navigation a > span {
		display: none;
	}	
	
	.navigation a > span > span:before{
		display: none;
	}
	
	.navigation a > span > span {
		display: none;
	}	
	
	.navigation a > span:before {
		display: none;
	
	}
    
    
    /* footer */
    
    .footer .footer_column {
    	width: 100%;	
	}
	
	.footer .footer_column:nth-child(2) {
		margin: 30px 0;
	}	
	
    .column_content .icon.phone1 {
		margin-top: 15px;
    }
}