@import 'https://fonts.googleapis.com/css?family=Droid+Sans';


#expandMenu { display: none !important;}
        
        header a, .actionButton span, #objave article h1, .prev i, .next i, 
        #ikone a, #ikone a:hover i {     
        -webkit-transition: all ease-out 0.2s;
        -moz-transition: all ease-out 0.2s;
        -o-transition: all ease-out 0.2s;
        transition: all ease-out 0.2s;}
        
        h1, h2, h3, h4, ul, li { margin: 0;}

        /*focus state reset*/
        .actionButton:focus, header a:focus, #footer .container span a:focus 
        {outline:none;}
        .actionButton::-moz-focus-inner, header a::-moz-focus-inner, #footer .container span a:::-moz-focus-inner  
        {border:0;}
        
    body { 
        background: #efefef;  margin: 0; font-family: 'Droid Sans', sans-serif; }
        
        /*defaults*/
        section { width:1024px; display: block; margin: 0 auto;}

        .actionButton { padding: 40px 30px; margin-left: -30px; }
        .actionButton span { text-decoration: none; background: #4477f2; color: white; padding: 10px 20px; display: inline-block; border-radius: 4px; box-sizing: border-box;}
        .actionButton:hover span {background-color: deepskyblue;}
        
        /*header*/
        header{ width:100%; height: 110px; padding-bottom: 0;
            background: #ffffff; 
            /*background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 99%); 
            background: -webkit-linear-gradient(top,  #ffffff 0%, #efefef 99%); 
            background: linear-gradient(to bottom,  #ffffff 0%, #efefef 99%); 
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 ); */
        }           
        header section { padding-top:15px; }
        header span {display: block; width: 100%; height: 40px; margin-bottom: 8px;}
        
        header a { text-decoration: none; float: left; padding:8px 12px 20px 12px; border-radius: 2px; color: dimgray; font-weight: 500; 
            border: 1px solid white; border-bottom: 2px solid white; margin: 0 5px 0 0; font-size: 0.85em; background: white;}

        header a:hover { color: #4477f2; border-bottom: 2px solid #4477f2;}
        
        header span a { background: none; padding: 0; border: none; float: left; margin: 0 0 0 8px; font-size: 0.7em;}
        header span a:hover { border: none;}
        
        header span ul { float: right; margin: -15px 0 0 0; color: #4477f2;}
        header span li { display: inline; margin: 0 10px; font-size: 0.85em; font-weight: 500;}
        header span li i { margin-right: 7px;}

        .active { font-weight: bold; color:red;}
       
/*footer*/
        
        #footer { left:0px; bottom:0px; height:300px; width:100%; background:#4477f2; float: none; }
        
        * html #footer {
        position:absolute;
        top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
        }
        
        #footer .container { width: 1024px; margin: 0 auto; }
    
        #footer .container span {
        float:left; width: 25%; margin-top: 60px;
        }
        #footer .container h1 { color: white; font-size: 1.125em; font-weight: 700; margin-bottom: 20px;  }

        #footer .container span a,
        #footer .container span p { 
        padding: 7px 0; float:left; width: 100%; display: inline-block;
        font-size: 0.8em; font-weight: 300; color: #efefef;
        text-decoration: none; }

        #footer .container span p { line-height: 142%; margin: 0 0 20px 0; font-size: 0.8em; padding: 0; font-weight: 400;}

        #footer .container span i { font-size: 2em;}
        #footer .container span:nth-of-type(4) a {
        width: 50px; float: left;
        }

        #footer .container span a:hover {
        color: #ffffff; }
     
/*INDEX*/

/* Slideshow container */
.slideshow-container { max-width: 1024px; height: 400px; margin: 0 auto;}

.mySlides section { display: block; height: 400px;  
    background-size: cover !important; background-position: 50% 50% !important;  border-radius: 4px;}

.mySlides:nth-of-type(1) section { background: url("http://i.imgur.com/ZUBV0yV.jpg");}
.mySlides:nth-of-type(2) section { background: url("http://i.imgur.com/gJhSQyG.jpg");}
.mySlides:nth-of-type(3) section { background: url("http://i.imgur.com/XbUXXuK.jpg");}
.mySlides:nth-of-type(4) section { background: url("https://i.imgur.com/NE8zFN9.jpg");}


.mySlides section h1 { font-size: 2em; color: gray; font-weight: 300; text-align: right;}
.mySlides section p { font-size: 1.125em; line-height: 1.5; color: dimgray; text-align: right;}
.mySlides section article { 
    color: darkblue; width: 420px; margin: 107px 0 0 160px; position: absolute;}

.mySlides:nth-of-type(4) section article { margin: 107px 0 0 230px;}

.mySlides:nth-of-type(1) article h1, .mySlides:nth-of-type(1) article p {color:white !important;}
/*.mySlides:nth-of-type(1) article { margin:107px 0 0 170px;}*/

.prev, .next { 
    padding: 5px; cursor: pointer; height: 400px; position: absolute;
    box-sizing: border-box; width: 180px; z-index: 999 !important;}

.prev { margin: -400px 0 0 0;}
.next { margin: -400px -20px 0 845px;}

.prev i, .next i { 
    font-size:2em; color: dimgray; border: 1px solid dimgray; border-radius: 50px;
    width: 66px; height: 66px; box-sizing: border-box;}

.prev i { padding: 18px 0 0 19px; margin: 150px 0 0 20px;}
.next i { padding: 18px 0 0 23px; margin: 150px 0 0 80px; }

/* On hover, add a black background color with a little bit see-through */
.prev:hover i, .next:hover i {
  color: #4477f2; background: white; border: 1px solid white;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 20px 2px 50px 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/*--end carousel*/

#pousti {
  display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: row;
    justify-content: center;
}

#pousti > div {
    padding: 15px;
}

    
#ikone { padding: 0 5% 30px 5%; overflow: visible; box-sizing: border-box; background: white; margin-bottom: 70px;}
   
     #objave {  padding: 0 15% 40px 15%; box-sizing: border-box; margin: 15px auto 0 auto; overflow: hidden; width: 100% !important; 
         max-height: 220px;
    transition: max-height 0.25s ease-out; background: #696969;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#696969+0,383838+100 */
/*background: #696969; /* Old browsers */
/*background: -moz-linear-gradient(-45deg,  #696969 0%, #383838 100%); /* FF3.6-15 */
/*background: -webkit-linear-gradient(-45deg,  #696969 0%,#383838 100%); /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(135deg,  #696969 0%,#383838 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#696969', endColorstr='#383838',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#objave font { width: 70%; position: absolute; height: 220px; padding-top: 180px; font-size: 0.9em;
    color: white; box-sizing: border-box; text-align: center; margin: 0 0 0 0; cursor: pointer;

    background: -moz-linear-gradient(top,  rgba(125,185,232,0) 0%, rgba(105,105,105,1) 100%);
background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(105,105,105,1) 100%);
background: linear-gradient(to bottom,  rgba(125,185,232,0) 0%,rgba(105,105,105,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#696969',GradientType=0 );

}
#objave font:hover { color: deepskyblue;}

   /*#objave:hover { max-height: 500px;}*/
   .odpri { max-height: 500px !important; }
    .odpri font { display: none;}

    #objave article { border-left: 1px solid gray; width: 24.9%; float: left; padding:42px 42px 0 10px; box-sizing: border-box;}
    #objave .actionButton { float: right; padding: 30px 0 0 0;}
    #objave article span { margin-bottom: 5px; display: block; font-size: 0.75em; color: lightgray;}
    #objave article h1 { color: gray; font-weight: 300; color: #efefef; font-size: 1em;}
    #objave article p { line-height: 1.5; font-size: 0.825em; color: lightgray;}

/*STORITVE*/

    .storitve h1, .lokacija h1, .kontakt h1 { width: 100%; padding: 0 20px 10px 0; box-sizing: border-box; color: #4477f2; font-size: 1.25em; font-weight: 500; margin: 30px 0 0 0; display: inline-block; border-bottom: 1px solid #4477f2; border-radius: 4px; 
        background: #efefef;
background: -moz-linear-gradient(-45deg,  #efefef 33%, #4477f2 100%);
background: -webkit-linear-gradient(-45deg,  #efefef 33%,#4477f2 100%);
background: linear-gradient(135deg,  #efefef 33%,#4477f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#4477f2',GradientType=1 );
}

.storitve { height: auto !important; margin-bottom: 60px;}

    .storitve ul { 
        float: left; max-width: 58%; box-sizing: border-box; 
        padding: 20px 20px 30px 50px; background: white;  }

    .storitve ul p { list-style: none; line-height: 1.75em; margin:0 0 20px -30px;}
    .storitve ul li { line-height: 2;}

    .storitve img { float: left; max-width: 42%; margin-top: -20px;  }

    .storitve h3 { line-height: 1.33em; width: 800px; font-size: 0.9em; margin: 20px 0 0 40px; font-weight: 400; }
    .storitve h3 li { list-style: none; margin: 10px auto 10px 20px;}

    .bojler { height:530px !important; }


    .lokacija ul, .kontakt ul { width: 100%; height: 420px; background: white; padding: 0;}
    .lokacija ul { height: 200px;}
    .lokacija ul span:nth-of-type(1) { width: 624px; height: 200px; display: inline-block; 
        float: left; padding:15px; box-sizing: border-box;}
    .lokacija ul span:nth-of-type(2) { width: 400px; height: 200px; display: inline-block; float: left;}

    .lokacija ul span:nth-of-type(1) li { list-style: none; float: left; width: 50%;}
    .lokacija ul span:nth-of-type(1) p { margin: 7px 0; }
    .lokacija ul span:nth-of-type(1) { padding: 30px;} 

    .lokacija ul span li:nth-of-type(1) strong { font-size: 1.5em; color: gray;}         
        
    .kontakt { margin-bottom: 40px;}

    .kontakt form { width: 800px; height: auto; margin: 0 auto; padding-top: 30px;}
    .kontakt form label { width: 375px; float: left; padding: 7px 0; font-size: 0.9em; margin-bottom: 5px; color: dimgray;}
    .kontakt form label input, .kontakt form label textarea
            { width: 100%; padding: 7px; border-radius: 4px; border: 1px solid lightgray; margin-top: 10px; font-size: 1em;}

    .kontakt form label:nth-of-type(1), .kontakt form label:nth-of-type(3) { margin-right: 50px;}
    .kontakt form label:nth-of-type(5) { width: 100%;}
        
    .kontakt form label textarea {  resize: none;}
    .onas { margin: 50px auto; width: 800px;}
    .onas p { line-height: 1.5; color: dimgray; font-weight: 300;}