/*  
    ELEKTROINSTALATERI GLAVNI CSS
    DESIGN AND CODE BY DANIJEL KOZAR
    PROGRESSOF.HR
    kozar.danijel@gmail.com
*/

/* ========================================================
    GENERALNO
   ======================================================== */

html { color: #fff; font-size: 1.1em; line-height: 1.5;}
::-moz-selection { color:#fff; background: #000; text-shadow: none; }
::selection { color:#fff; background: #000; text-shadow: none; }
audio,canvas,iframe,img,svg,video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
.browserupgrade { margin: 0.2em 0; color: #fff; padding: 0.2em 0; }
img{margin:0px; padding:0px;}
.naslov{ font-weight: normal;}
.potpis{ margin-top:2%; width: 100px; float: right;}
.bred::first-letter {border-bottom: 2px solid #fff;}
.lighttext{font-weight: 300;}
.boldtext{font-weight: 600;}
 #contact_results {margin-bottom: 10px; text-align: center;}
.error{color:#E82424;}
.success{color:#56a403;}
.redBullet {list-style-image: url(../img/bullet.png);}
.opisTrenutno{margin: 0 auto; font-size: 1.1em; margin-bottom: 2.5em; margin-top: 2.5em; font-weight: 300; color: #D7D7D7; width: 95%; border-left: 5px solid #fff; padding-left:5%;}
/* ========================================================
    PRIMARNI LAYOUT
   ======================================================== */

body { font-family: 'Open Sans',sans-serif; color: #fff; max-width: 1700px; margin: 0 auto;}
.wrapper { width: 92%; margin: 0 auto; }

/* ========================================================
    TEMA
   ======================================================== */

html {
background-color: #24252A;
background-image: url(../img/radialBg.jpg);
background-position: top center;
background-repeat: no-repeat;
}

/* ========================================================
    NAVIGACIJA
   ======================================================== */

nav ul, a { margin: 0; padding: 0; list-style-type: none; }
nav a, a { display: block;text-decoration: none; color: #fff;}
nav a:hover,nav a:visited, a:hover, a:visited { color: #fff; text-decoration: none; }

/* ========================================================
    MOBILNI PRIMARNI
   ======================================================== */

   /* SKRIVANJE ELEMENATA */
   .socialNav, .footerNav, .content, .potpis, .menuMain,#mobileTopArrow,.action img, #border, #representPhoto img{visibility: hidden; display: none;}

   /*   HAMBURGER MENI */
    .hamburger{background:none;position:absolute;top:0;right:0;line-height:2em;padding:0px 15px 0px 15px;color:#fff;border:0;font-size:2em;cursor:pointer;outline:none;z-index:10000000000000;}
    .cross{background:none;position:absolute;top:0;right:0;padding:0px 15px 0px 15px;color:#fff;border:0;font-size:2.2em;line-height:2em;cursor:pointer;outline:none;z-index:10000000000000;}
    .menu{z-index:1000000; font-size:1.2em; width:100%; background:#131313; opacity: .9 ;text-align:center; margin-top:25px; position:absolute; left:0;}
    .menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
    .menu li {display: block;padding:15px 0 15px 0; border-bottom:#c72d2d 1px solid;}
    .menu li:first-child{border-top:#c72d2d 1px solid;}
    .menu li:hover{display: block;    background:#181818; padding:15px 0 15px 0; border-bottom:#c72d2d 1px solid;}
    .menu ul li a { text-decoration:none;  margin: 0px; color:#fff;}
    .menu ul li a:hover {  color: #fff; text-decoration:none;}
    .menu a{text-decoration:none; color:white;}

    /* LOGO */
    .logo img{display: none;}
    .logo {height:150px; background-image: url(../img/logoFull_2.svg); background-repeat: no-repeat; background-position: center bottom; background-size: 90%;}

    /* LOKALIZACIJA JEZIKA */
    #local{ position: absolute; z-index: 9999999; top:20px;max-height: 50px;}
    #local a{ margin-bottom: 5px;max-height: 50px;}
    #local svg{ width: 40px; max-height: 50px;}

    /* OPISNI TEKST STRANICE */
    .contentMobile {margin-top: 5%; margin: 0 auto; width: 95%;}
    .contentMobile svg {width: 11%; margin: 0 auto; display: block;}

    /* REPREZETATIVNA FOTKA NA POJEDINAČNOM PROJEKTU */
    #representPhoto h4{display: block; width: 100%; margin: 0px; padding: 0px; text-align: center; margin-top: 3em; font-weight: 300; font-size: 1.5em;}
    .representMiniPhoto{ margin-top: 1.5em;}
    .representMiniPhoto img{width: 100%;}
    .individualOpis{ margin-top: 1em;}


    /* FEATURED */
    .featured{margin-top: 25px;}
    .featured h3{width: 80%; margin: 0 auto; line-height: 1em; font-size: 1.2em; position:absolute; left: 10%;}
    .featured i { font-size: 0.9em; display: inline;}

    #usluge, #projekti, #karta { background-color: #c72d2d;margin-bottom: 4px; height:140px; padding-top: 25px; position: relative;}
    #usluge p, #projekti p, #karta p { line-height: 1em; position: absolute; bottom: 15%; left: 10%; width: 80%;padding-top: 10px; font-size: 1em;}

    #usluge { background-image: url(../img/usluge_w.jpg);}
    #projekti { background-image: url(../img/projekti_w.jpg);}
    #karta {background-image: url(../img/karte_w.jpg);}
    #usluge, #projekti, #karta{background-size: 100%; background-repeat: no-repeat;background-position: center center; border-bottom:7px solid #8C1A1D;border-top:1px solid #FF3C41;}

    .naslov {text-align: center;}
    
    /* ACTION FORMA */
    .action {margin-top: 15%;}
    #contact_body input, textarea { width: 94%; margin-bottom: 20px; color: #727683; font-size: 0.9em; padding-left: 3%; padding-right: 3%;border: 1px solid #fff; background-color: #e6e6e6;}
    #contact_body input {height: 50px;}
    #contact_body textarea {height: 250px; padding-top: 10px;}
    #contact_body #submit_btn { width: 100%; height: 50px; background-color: #56a403; border: 1px solid #fff; color: #fff;}
    #contact_body #submit_btn:hover { background-color: #4F9403; }

    /* FOOTER */
    .footer-container { background-color: #c72d2d; height: 130px; margin-top:0; padding-top: 15px;}
    .footer-container p { font-size: 0.8em; line-height: 0.8em; text-align: center;}
    .socialNavFooter{ width: 90%; padding-bottom: 10px; display: block; margin: 0 auto;}
    .socialNavFooter svg{width: 16%; margin-top: 15px; float: left; fill:#fff; margin-right: 2%; margin-left:2%}
    .socialNavFooter svg:hover{fill:#131313;}

    /* GALERIJA NA STRANICI REFERENCE */
    #galerija { width: 100%; text-align: center;}
    #galerija a {width: 100%; margin-bottom: 4px;}
    #galerija a img{width: 100%;}
    #galerija a p{ background-color: #CD2727; margin: 0px; padding-top:20px; padding-bottom:20px;}

    /* TRENUTNI PROJEKTI NA STRANICI TRENUTNI PROJEKTI */
    .trenutni{margin-bottom: 50px; text-align: center;}
    .trenutni img{ width: 80%;}


/* ========================================================
    IE FIX
   ======================================================== */

    .ie7 .title { padding-top: 20px; }

/* ========================================================
    RESPONSIVE MEDIA QUERY
   ======================================================== */

@media only screen and (min-width: 480px) {
    /* SKRIVANJE ELEMENATA */
    .socialNavFooter, .contentMobile{visibility: hidden; display: none;}

    /* PRIKAZIVANJE ELEMENATA */
    .content, .socialNav, .potpis, #mobileTopArrow{visibility: visible; display: block;}

    /* LOGO */
    .logo {height:200px; background-position: center center; background-size: 50%;}
    #mobileTopArrow{width: 10%; margin: 0 auto; display: block;}

    /* FEATURED */
    .featured{margin-bottom: 25px;}
    .featured h3{width: 40%; font-size: 1.4em; left: 5%}
    .featured i {width: 40%; font-size: 1em; }
    #usluge { background-image: url(../img/usluge.jpg);}
    #projekti { background-image: url(../img/projekti.jpg);}
    #karta {background-image: url(../img/karte.jpg);}
    #usluge, #projekti, #karta{height: 180px; padding-top: 25px;background-size: 50%; background-repeat: no-repeat;background-position: right center; border: none;}
    #usluge p, #projekti p, #karta p { line-height: 1em; position: absolute; bottom: 8%; left: 5%; width: 40%; padding-top: 10px; font-size: 0.9em;}
    #usluge:hover, #projekti:hover, #karta:hover { background-color: #DE2929;}

    /* CONTENT */
    .content{margin: 0 auto; width: 95%; }

    /* SOCIJALNA NAVIGACIJA */
    .socialNav svg {float: left; width: 9%; margin-right: 3%; margin-top: 55px;}
    .socialNav svg:hover {fill:#fff;}

    /* ACTION */
    .action {margin-top: 10%;}
    #contact_body #submit_btn { width: 50%; float:right;}

    /* FOOTER */
    .footer-container {margin-top:0; padding: 20px; height: 50px;}

    /* GALERIJA NA STRANICI REFERENCE */
    #galerija a{width: 49.4%; float: left; margin: .3%;}
}

@media only screen and (min-width: 960px) {

    /* SKRIVANJE ELEMENATA */
    .contentMobile, .hamburger,#mobileTopArrow{visibility: hidden; display: none;}

    /* PRIKAZIVANJE ELEMENATA */
    .test, .footerNav, .menuMain,.action img, #border,  #representPhoto img{visibility: visible; display: block;}

    .header-container{ background-image:url(../img/header_back.png); background-repeat: no-repeat; background-position:left bottom; position: relative;}
    .logo { float: left; width:30%; height:270px; position: relative; background-image: none;}
    #topRight { float: right; width:70%; height:270px; position: relative;}
    .logo img { height:100.2%; position: absolute; bottom: 0px; z-index: 999; display: block;}
    .menuMain{ position: absolute; bottom: 0px; width: 100%; height: 70px; background-color: #c72d2d;}
    .menuMain ul li a {  float: right; margin-top: 22px; margin-right: 5px; margin-left: 25px; }
    #slider{width:80%; height: 200px;position:absolute; right: 0px; background-color: #fff; background-image:url(../img/sliderDummy1.jpg);background-repeat: no-repeat; background-position:right bottom;}

    /* LOKALIZACIJA JEZIKA */
    #local{ position: absolute; z-index: 9999999; top:20px; right: 25px;}
    #local a{ float: left; margin-right: 7px;}
    #local svg{ width: 45px;}

    .featured{width: 100%; margin-top: 5%;}
    .featured h3{width: 70%; margin: 0 auto; line-height: 1em; font-size: 1.5em; left: 13%;}
    .featured i { font-size: 1.1em; }
    #usluge {
    float:left;width: 30%;
    background-image: url(../img/usluge.jpg);
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center center;
    }
    #projekti {float:left;width:30%;margin-right:5%; margin-left:5%;
    background-image: url(../img/projekti.jpg);
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center center;
    }
    #karta {float:left;width:30%;
    background-image: url(../img/karte.jpg);
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center center;
     }
    #usluge, #projekti, #karta { background-color: #c72d2d; height: 520px; padding-top: 25px; position: relative;}
    #usluge p, #projekti p, #karta p { line-height: 1em; position: absolute; bottom: 9%; left: 13%; width: 75%; padding-top: 15px; font-size: 1em;}
    

    .content {float:left;width: 55%; margin-top: 15px; position: absolute;}
    .action {float:right;width: 30%; margin-top: 40px;}
    .naslov {text-align: left;}

    /* REPREZETATIVNA FOTKA NA POJEDINAČNOM PROJEKTU */
    #representPhoto img{ width: 100%; text-align: center; margin-top: 2em;}
    #representPhoto h4{display: block; width: 100%; margin: 0px; padding: 0px; text-align: center; margin-top: 3em; font-weight: 300; font-size: 2em;}
    .representMiniPhoto{float: left; width: 30%; margin-top: 1.5em;}
    .representMiniPhoto img{width: 100%;}
    .individualOpis{ float: right; width: 50%; margin-top: 1em; margin-right: 12%;}
    

    #contact_body input, textarea { float:right;width: 96%; margin-bottom: 20px; padding-left: 2%; padding-right: 2%; font-size: 0.9em;}
    #contact_body input {height: 50px;}
    #contact_body textarea {height: 250px; padding-top: 10px;}
    #contact_body #submit_btn {float:right;width: 50%; height: 50px; background-color: #56a403; border: 1px solid #fff;}
    .footer-container {background-color: #c72d2d; height: 70px; margin-top:0; padding-top: 45px; padding-left: 0px;padding-right: 0px;}
    .footerNav { float: right; width: 50%; padding-right: 0px; }
    .footerNav ul li { float: right; line-height: 1.2em; margin-left: 25px;}
    .footer-container p { float: left; width: 50%; margin:0px; font-size: 1em; line-height: 1em; text-align: left; margin-top: 4px;}

    /* GALERIJA NA STRANICI REFERENCE */
     #galerija a{width: 32.7%; float: left; margin: .3%;}

    /* TRENUTNI PROJEKTI NA STRANICI TRENUTNI PROJEKTI */
    .trenutni{margin-bottom: 10px; border-top:1px solid #E82424; text-align:left;}
    .trenutni img{ height: 140px; width: auto;}
    .trenutni h4{float: right; margin-right: 5px; font-size: 0.9em; line-height: 0.1em;}
}

/* ========================================================
    HELP KLASE
   ======================================================== */

.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px;
                  overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/* ========================================================
    PRINT STILOVI
   ======================================================== */

@media print { *, *:before, *:after {
    background: transparent !important; color: #000 !important; box-shadow: none !important;
    text-shadow: none !important; }
    a,a:visited { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
    pre,blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; }
    tr,img { page-break-inside: avoid;}
    img { max-width: 100% !important; }
    p,h2,h3 { orphans: 3; widows: 3; }
    h2,h3 { page-break-after: avoid; }
}