img,h1,h2,h3,h4,body,input,textarea, a{  font-weight:normal; border:0px; padding:0px; margin:0px; vertical-align:top;  text-decoration:none;}

html {  height: 100%; overflow-y: scroll;}

body {background-color:#605aaf; font-family: 'Source Sans Pro', sans-serif; background-image:url("../images/body-background.jpg"); background-repeat:no-repeat; background-size:100% auto;}

.b600 {font-weight:600;}
.b700 {font-weight:700;}
.b900 {font-weight:900;}

.white {color:#fff;}
.black {color:#000;}
.green {color:#80ff00;}
.purple {color:#bebbea;}

.f24 {font-size:24px;}

.left {float:left;}
.right {float:right;}

.dokumentacije {font-size:18px; color:#80ff00; font-family: 'Courgette', cursive; position:absolute; top:170px; left:50%; margin-left:-150px; width:300px; text-align:center;}


.w1200 {width:1200px; margin:0 auto;}

nav {background-color:#fff; height:125px; -webkit-animation-delay: 2.1s; /* Safari */ -moz-animation-delay: 2.1s; animation-delay:2.1s;}

.logo {float:left; margin-top:27px;}
.logo img {transition:all 0.3s;}
.logo img:hover {opacity:0.7;}
nav ul {float:right; height:125px; margin:0; padding:0;}
nav ul li {display:inline-block; height:125px;}
nav ul li a {display:inline-block; height:25px; font-size:16px; font-weight:600; color:#a3a3a3; text-transform:uppercase; padding:50px 25px; border-right:1px solid #ededed; transition:all 0.3s; letter-spacing:1.5px; background-position:center 135px;}
nav ul li a:hover {color:#6a6a6a; background-image:url("../images/nav-hover.png"); background-repeat:no-repeat; background-position:bottom center;}
nav ul li:first-child a {border-left:1px solid #ededed;}


.main {margin-top:70px; -webkit-animation-duration: 2s; /* Safari */ -moz-animation-duration: 2s; animation-duration:2s; -webkit-animation-delay: 2s; /* Safari */ -moz-animation-delay: 2s; animation-delay:2s;}

h1 {position:relative; text-align:center; color:#fff; font-size:48px; font-weight:700; text-transform:uppercase; padding-bottom:25px; margin-bottom:20px; background-image:url("../images/heading-line.png"); background-repeat:no-repeat; background-position:bottom center;}
.section-info {font-size:26px; color:#eeeaff; text-align:center; font-weight:500px; line-height:35px;}

.homepage-x {-ms-transform: rotate(45deg);  -webkit-transform: rotate(45deg);  transform: rotate(45deg); position:relative; margin-top:-130px; -webkit-animation-delay: 2.5s; /* Safari */ -moz-animation-delay: 2.5s; animation-delay:2.5s; overflow:hidden;}

.ximage {display:block; color:#fff;  font-size:40px; float:left; width:300px; height:300px;}
.line-v {margin:0 5px; float:left; width:1px; height:600px; background-color:#fff;}
.line-h {height:1px; width:1200px; background-color:#fff;}

.homepage-x a .ximage img {opacity:0.2; transition:all 0.5s;}
.homepage-x a .ximage img:hover {opacity:1;}
.homepage-x a:first-child .ximage img {opacity:1;}

.position1 {position:relative; margin:295px 0 0 290px;}
.position2 {margin:295px 290px 0 0; background-image:url("../images/purple.png");}
.position3 {margin:5px 0 0 290px; background-image:url("../images/dark-purple.png");}
.position4 {margin:5px 290px 0 0; background-image:url("../images/green.png");}


.ximage span {-webkit-backface-visibility: hidden; opacity:0; transition:all 0.3s;}
.ximage:hover span {opacity:1;}

.position3 span {color:#fff; font-size:30px; font-weight:900; position:absolute; top:820px; left:205px; -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);}
	
.position2 span {color:#fff; font-size:30px; font-weight:900; position:absolute; top:259px; right:300px; }

.position4 span {color:#fff; font-size:30px; font-weight:900; position:absolute; top:900px; right:167px; -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
	
.ximage .arrow {background-image:url("../images/wobble.png"); height:60px; width:60px; position:absolute; top:190px; left:190px; opacity:1; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite;}
	
.homepage-x {width:600px; margin:100px auto 0 auto;}

.ximage {width:250px; height:250px;}
.ximage img {width:100%; height:100%;}

.line-h {width:600px;}
.line-v {height:300px;}

.position1 {margin:44px 0 0 42px;}
.position2 {margin:44px 0 0 0;}
.position3 {margin:5px 0 0 42px;}
.position4 {margin:5px 0 0 0;}

.ximage .arrow {top:160px; left:160px;}

.position3 span {top:470px; left:-40px;}
.position4 span {top:555px; right:45px; -ms-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);}
.position2 span {top:10px; right:45px;}
	
.menu-trigger {display:none; background-color:#605aaf; height:125px; width:110px; float:right; background-image:url("../images/menu-icon.png"); background-repeat:no-repeat; background-position:center center; cursor:pointer; transition:all 0.3s;}
.menu-trigger:hover {background-color:#62c100;}



#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 143px;
    height: 150px;
    margin: -75px 0 0 -71px;
    z-index: 1001;
	background-image:url("../images/loader.gif");
	background-position:bottom center;
	background-repeat:no-repeat;
}


    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 50%;
        height: 100%;
        background: #5953a2;
        z-index: 1000;
    }

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }
    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

    /* Loaded styles */
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
    }
    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
    }
    .loaded #loader {
        opacity: 0;

        -webkit-transition: all 0.3s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
                transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */

    }
    .loaded #loader-wrapper {
        visibility: hidden;

        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */
    
        -webkit-transition: all 0.3s 1s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
                transition: all 0.3s 1s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
    }

.no-js #loader-wrapper {
    display: none;
}

footer {padding:20px; border-top:1px solid #9191e1; color:#fff; margin:50px 0;}
footer a {color:#fff; text-decoration:underline;}
footer a:hover {text-decoration:none;}

/*services subpage*/
.services {width:100%;}

.services h2 {color:#fff; text-transform:uppercase; font-size:30px; font-weight:900; display:block; text-align:center; padding:20px 0;}

.vrste-projektov {background-color:#7c7bf5; float:left; width:50%;}
.vrste-objektov {background-color:#2b3258; float:left; width:50%;}

.vrste-projektov .main-row {border-bottom:1px solid #605eca; padding:20px 60px 20px 20px; color:#fff; font-size:18px; font-weight:900; cursor:pointer; background-image:url("../images/vrste-projektov+.png"); background-position:center right; background-repeat:no-repeat; transition:all 0.3s ease-out;}
.vrste-projektov .main-row:hover {background-color:#9f9ff8;}

.vrste-projektov .main-row-closed {background-image:url("../images/vrste-projektov-.png"); background-color:#5cb700;}
.vrste-projektov .main-row-closed:hover {background-color:#65c900;}
.vrste-projektov .main-row-wrapper:nth-child(2) .main-row{border-top:1px solid #605eca;}
.vrste-projektov .main-row-info {color:#2b3258; font-size:16px; font-weight:500;}

.vrste-projektov-detail {padding:20px; background-color:#fff; font-size:16px; color:#5f5f5f; letter-spacing:0.7px; line-height:23px;}







.vrste-objektov .main-row {border-bottom:1px solid #605eca; padding:20px 60px 20px 20px; color:#fff; font-size:18px; font-weight:900; cursor:pointer; background-color:#222848; background-image:url("../images/vrste-projektov+.png"); background-position:center right; background-repeat:no-repeat; transition:all 0.3s ease-out;}
.vrste-objektov .main-row:hover {background-color:#2d355b;}

.vrste-objektov .main-row-closed {background-image:url("../images/vrste-projektov-.png"); background-color:#5cb700;}
.vrste-objektov .main-row-closed:hover {background-color:#65c900;}
.vrste-objektov .main-row-wrapper:nth-child(2) .main-row{border-top:1px solid #605eca;}
.vrste-objektov .main-row-info {color:#2b3258; font-size:16px; font-weight:500;}

.vrste-objektov-detail {padding:20px; background-color:#fff; font-size:16px; color:#5f5f5f; letter-spacing:0.7px; line-height:23px; -webkit-box-shadow:inset 3px 0 7px 0 #C7C7C7;
box-shadow:inset 3px 0 7px 0 #C7C7C7;}

.vrste-objektov-subrow {padding:10px 40px 10px 10px; border-bottom:1px solid #c2c2c2; border-top:1px solid #c2c2c2; background-image:url("../images/sub+.png"); background-position:center right; background-repeat:no-repeat; cursor:pointer; transition:all 0.3s;}
.vrste-objektov-subrow:hover {background-color:#f2f2f2}


.sub-minus {background-image:url("../images/sub-.png"); transition:all 0.3s; background-color:#f1ffe3;}
.sub-minus:hover {background-color:#e8ffd0;}

.always-opened .main-row{background-image:none; background-color:#394270; cursor:initial;}
.always-opened .main-row:hover {background-color:#394270;}
.vrste-objektov .purple-bg {background-color:#394270;}
.vrste-objektov .purple-bg:hover {background-color:#4a579b;}

.objekti-sub-detail p {margin-bottom:-10px;}

.fancybox {border:2px solid #7877ed; float:left; margin:20px 20px 20px 0; transition:all 0.3s;}
.fancybox:hover {border:2px solid #499400}

/*kontakt subpage*/
.kontakt {margin-top:50px;}
.kontakt-info {background-image:url("../images/kontakt.png"); background-position:center right; background-size:auto 100%; background-repeat:no-repeat; color:#c9c7e7; font-size:20px; font-weight:500; padding-bottom:30px;}
.kontakt-info a {text-decoration:underline; color:#fff;}
.kontakt-info a:hover {text-decoration:none;}
.kontakt-info table {padding-bottom:10px;}

.map {border-top:10px solid #403d6b; margin:100px 0; }

/*povprasevanje subpage*/
.col30 {width:32%; float:left; margin-right:2%;}
.povprasevanje form .col30:nth-child(3n) {margin-right:0;}
form {font-size:18px; color:#fff; font-weight:600;}
form input {display:block; margin-top:10px; width:100%; padding:20px 20px; background-color:#efeefe; border-bottom:4px solid #363b65; outline:none; transition:all 0.3s; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; font-size:18px; color:#000; font-weight:600; font-family:'Source Sans Pro'; margin-bottom:30px;}
form input:focus {background-color:#fff; border-bottom-color:#5cb10c;}

form textarea {display:block; width:100%; padding:20px 20px; background-color:#efeefe; border-bottom:4px solid #363b65; outline:none; transition:background-color 0.3s, border-color 0.3s; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin-top:10px; min-height:160px; font-size:16px; color:#000; font-weight:500; font-family:'Source Sans Pro'; margin-bottom:30px; max-width:100%;}
form textarea:focus {background-color:#fff; border-bottom-color:#5cb10c;}

form input[type=submit] {background-color:#5cb10c; width:initial; padding-left:60px; padding-right:60px; text-transform:uppercase; color:#fff; cursor:pointer;}
form input[type=submit]:hover {background-color:#73db12;}

/*reference subpage*/
.reference .vrste-projektov {width:100%; background-color:#5db900;}
.reference .main-row {font-weight:600; text-align:center; background-color:#cbf2a4; color:#60922d; border-bottom:1px solid #badc99;}
.reference .main-row:hover {background-color:#659138; color:#fff;}

.ostale-reference {text-align:center; line-height:26px; color:#fff; list-style-type:none;}

.clear-both {clear:both;}


	/* #small monitor
================================================== */

    /* Note: Design for a width of 1000px */

	@media only screen and (min-width: 960px) and (max-width: 1400px) {
	
	
	.w1200 {width:920px;}
	
	.homepage-x {width:600px; margin:100px auto 0 auto;}
	
	.ximage {width:250px; height:250px;}
	.ximage img {width:100%; height:100%;}
	
	.line-h {width:600px;}
	.line-v {height:300px;}
	
	.position1 {margin:44px 0 0 42px;}
	.position2 {margin:44px 0 0 0;}
	.position3 {margin:5px 0 0 42px;}
	.position4 {margin:5px 0 0 0;}
	
	.ximage .arrow {top:160px; left:160px;}
	
	.position3 span {top:470px; left:-40px;}
	.position4 span {top:555px; right:45px; -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);}
	.position2 span {top:10px; right:45px;}
	
	/*services subpage*/
	.services {width:100%;}
	}
	
	
	/* #Tablet (Portrait)
================================================== */
    /* Note: Design for a width of 768px */

	@media only screen and (min-width: 768px) and (max-width: 959px) {
	.menu-trigger {display:block;}
	nav ul {margin-bottom:40px; position:relative; z-index:1000; margin-top:0px; width:100%; border:1px solid #c8c8c8; height:auto;}
	nav ul li{display:block; height:auto;}
	nav ul li a {display:block; background-color:#fff; border-bottom:1px solid #c8c8c8; height:auto; padding:20px 0; text-align:center;}
	nav ul li a:hover {background-color:#62c602; color:#fff;}
	.w1200 {width:750px;}
	
	.homepage-x {width:600px; margin:100px auto 0 auto; overflow:hidden;}
	
	.ximage {width:250px; height:250px;}
	.ximage img {width:100%; height:100%;}
	
	.line-h {width:600px;}
	.line-v {height:300px;}
	
	.position1 {margin:44px 0 0 42px;}
	.position2 {margin:44px 0 0 0;}
	.position3 {margin:5px 0 0 42px;}
	.position4 {margin:5px 0 0 0;}
	
	.ximage .arrow {top:160px; left:160px;}
	
	.position3 span {top:470px; left:-40px;}
	.position4 span {top:555px; right:45px; -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);}
	.position2 span {top:10px; right:45px;}
	
	.ximage span {opacity:1;}
	
	/*services subpage*/
	.services {width:100%;}
	
	/*povprasevanje subpage*/
	.col30 {width:100%; margin-right:0;}
	form input {margin-top:0;}
	
	/*kontakt subpage*/
	.kontakt-info {background-image:none;}
	.map {margin:0;}
	}
	
	
	/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

	@media only screen and (min-width: 480px) and (max-width: 767px) {
	.w1200 {width:460px;}
	
	.menu-trigger {display:block;}
	nav ul {margin-bottom:40px; position:relative; z-index:1000; margin-top:0px; width:100%; border:1px solid #c8c8c8; height:auto;}
	nav ul li{display:block; height:auto;}
	nav ul li a {display:block; background-color:#fff; border-bottom:1px solid #c8c8c8; height:auto; padding:20px 0; text-align:center;}
	nav ul li a:hover {background-color:#62c602; color:#fff;}
	
	.homepage-x {width:420px; margin:50px auto 0 auto; overflow:hidden; -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);}
	
	h1 {font-size:30px;}
	.section-info {font-size:20px;}
	
	p {font-size:16px;}
	
	.ximage {width:200px; height:200px;}
	.ximage img {width:100%; height:100%;}
	
	.line-h {width:420px;}
	.line-v {height:210px;}
	
	.position1 {margin:4px 0 0 4px;}
	.position2 {margin:4px 0 0 0;}
	.position3 {margin:4px 0 0 4px;}
	.position4 {margin:4px 0 0 0;}
	
	.ximage .arrow {top:120px; left:120px;}
	
	.ximage span {font-size:20px; opacity:1;}
	.position3 span {top:350px; left:-25px;}
	.position4 span {top:390px; right:30px; -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);}
	.position2 span {top:5px; right:50px;}
	
	/*services subpage*/
	.services {width:100%;}
	
	/*povprasevanje subpage*/
	.col30 {width:100%; margin-right:0;}
	form input {margin-top:0;}
	
	/*kontakt subpage*/
	.kontakt-info {background-image:none;}
	.map {margin:0;}
	}
	

	
	/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */
	@media only screen and (max-width: 479px) {	
	.w1200 {width:300px;}
	
	.menu-trigger {display:block;}
	nav ul {margin-bottom:40px; position:relative; z-index:1000; margin-top:0px; width:100%; border:1px solid #c8c8c8; height:auto;}
	nav ul li{display:block; height:auto;}
	nav ul li a {display:block; background-color:#fff; border-bottom:1px solid #c8c8c8; height:auto; padding:20px 0; text-align:center;}
	nav ul li a:hover {background-color:#62c602; color:#fff;}
	
	.homepage-x {width:300px; margin:20px auto 0 auto; overflow:hidden; -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);}
	
	h1 {font-size:30px;}
	.section-info {font-size:20px;}
	
	p {font-size:16px;}
	
	.ximage {width:120px; height:120px;}
	.ximage img {width:100%; height:100%;}
	
	.line-h {width:300px;}
	.line-v {height:150px;}
	
	.position1 {margin:24px 0 0 24px;}
	.position2 {margin:24px 0 0 0;}
	.position3 {margin:4px 0 0 24px;}
	.position4 {margin:4px 0 0 0;}
	
	.ximage .arrow {top:70px; left:70px;}
	
	.ximage span {font-size:14px; opacity:1;}
	.position3 span {top:228px; left:2px;}
	.position4 span {top:255px; right:30px; -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);}
	.position2 span {top:25px; right:33px;}
	
	/*services subpage*/
	.services {width:100%;}
	
	.vrste-projektov {width:100%;}
	.vrste-objektov {width:100%;}
	
	/*povprasevanje subpage*/
	.col30 {width:100%; margin-right:0;}
	form input {margin-top:0;}
	
	/*kontakt subpage*/
	.kontakt-info {background-image:none;}
	.map {margin:0;}
	
	/*reference subpage*/
	.reference .fancybox {max-height:60px; margin:5px 5px 5px 0;}
	.reference .fancybox img{max-height:60px;}
	}