@import "animate.min.css";

@font-face {
    font-family: MyWebFont;
    src: url(../fonts/Bariol_Regular.otf); /* IE9 Compat Modes */
}

@font-face {
    font-family: lg;
    src: url(../fonts/lg.otf); /* IE9 Compat Modes */
}

@font-face {
    font-family: naslovi;
    src: url(../fonts/lg.otf); /* IE9 Compat Modes */
}

@font-face {
    font-family: bebas;
    src: url(../fonts/BEBAS.ttf); /* IE9 Compat Modes */
}


/*-----------------------------------------------------------------------------------*/
/* GENERAL
/*-----------------------------------------------------------------------------------*/

body {
    text-align: center;
    font-family: MyWebFont;
    min-height: 100%;
}

html {
    height: 100%;
    width: 100%;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #3a3a3a;
    font-weight: normal;
    font-family: naslovi;
}

p {
    font-size: 1.2em;
	font-family:MyWebFont
}

#akitext {
    font-size: 1.6em;
	font-family:MyWebFont;
}

#akitext2 {
    font-size: 1.2em;
	font-family:MyWebFont
}

#akitext3 {
	font-family:MyWebFont
}
#npm{
	margin-bottom:0px;
	font-family:bebas;
}

.visibility {
    visibility: hidden;
}

.animated {
    visibility: visible!important;
}

/*-----------------------------------------------------------------------------------*/
/*	KEY COLOR
/*-----------------------------------------------------------------------------------*/

/*---- Typography ----*/

.details .carousel a:hover {
    color: #0bf397;
}


/*---- Background ----*/

.detail .carousel-indicators .active {
    background: #0bf397;
}

/*navigation--------------------------------------------------*/

.navbar-default .navbar-nav > li > a {
    color: #fff;
    font-size: 17px;
    padding: 20px;
	padding-right:12px;
    outline: 0;
	font-family:MyWebFont;
	font-weight:normal;
}

    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus {
        color: #0088CC;
        cursor: pointer;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

.navbar-default.top-nav-collapse .navbar-nav > li > a {
    color: #0088CC;
}


    .navbar-default.top-nav-collapse .navbar-nav > li > a:hover,
    .navbar-default.top-nav-collapse .navbar-nav > li > a:focus {
        color: #3A3A3A;
    }

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #0088CC;
}

.navbar-default.top-nav-collapse .navbar-nav > .active > a,
.navbar-default.top-nav-collapse .navbar-nav > .active > a:hover,
.navbar-default.top-nav-collapse .navbar-nav > .active > a:focus {
    color: #fff;
}

.navbar-default ul .navbar-nav li a:hover {
    color: #0088CC;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    background: #0088CC;
}

.navbar-default ul .navbar-nav li a {
    color: #fff;
    background: #2787c6;
}

    .navbar-default ul .navbar-nav li a:hover {
        color: #0088CC;
        background: #0088CC;
    }

        .navbar-default ul .navbar-nav li a:hover:after {
            background: #2787c6;
        }
/*boja buttona u navigaciji*/
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #fff;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #0088CC;
}

.navbar-default .navbar-toggle {
    border-color: #0088CC;
}

.navbar-default .top-nav-collapse .navbar-nav .open .dropdown-menu > li > a {
    color: #0094ff;
}


/*-----------------------------------------------------------------------------------*/
/* HEADER 
/*-----------------------------------------------------------------------------------*/
header {
     background: url(../img/1280x720.png) 50% 0 fixed no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
}

.header {
    padding: 150px 0px;
}

header h1 {
    padding: 36px 0px 15px 0px;
    font-weight: bold;
    font-size: 4.2em;
    color: #fff;
    font-family:naslovi;
}

header p {
    padding: 23px 0px 20px 0px;
    font-size: 16px;
    color: #fff;
    line-height: 1.7em;
    font-family: naslovi;
    
}

.inColor {
    color: #0088CC;
}

/*linija ispod naslova
.line { 
    margin: 0px 50px 0px 50px;
    border-bottom: 4px solid #2787c6;
}
*/

.iphon_1 { /*mobitel header*/
    display: block;
    margin: 0 auto;
}

.header ul li {
    display: inline-block;
    padding: 0px 20px 10px 0px;
}

.app-store {
    display: block;
    border-radius: 10px;
    background: url(../img/app-store.png);
    width: 192px;
    height: 60px;
}


.googlePlay {
    display: block;
    float: left;
    width: 192px;
    height: 60px;
    border-radius: 10px;
    background: url(../img/googleplay.png);
}

.centered {
    text-align: center;
}

/*logo*/
.logo {
    height: 25px;
    width: 90px;
    /*margin-left:50px;*/
}

#logo {
    background: url(../img/logo_bijeli.png) center center no-repeat;
    background-size: contain;
    margin-top: 15px;
    height: 25px;
    width: 95px;
    padding: 0;
}

.top-nav-collapse #logo {
    background: url(../img/logo_sivi.png) center center no-repeat;
    background-size: contain;
}


.navbar > .container .navbar-brand { /*Pozicioniranje logoa*/
    /* margin-left: 10px;*/
}


/*-----------------------------------------------------------------------------------*/
/*	ABOUT
/*-----------------------------------------------------------------------------------*/

.detail {
    overflow: hidden;
    padding: 150px 0px 150px 0px;
    min-height: 500px;
    background-color: #fff;
}

    .detail .title {
        margin-bottom: 80px;
        text-align: center;
    }

    .detail .features .row {
        margin-bottom: 40px;
    }

    .detail .carousel h1 {
        font-size: 3.8em;
        color: #0088CC;
    }

    .detail .carousel h1, .detail p {
        text-align: left;
        font-weight: 300;
    }

    .detail p {
        color: #444444;
        line-height: 2.0em;
    }

    .detail .carousel-control {
        background: none;
    }
	.detail_p_height{
		font-size: 1.2em;
	}



    /*pozicioniranje screenshota*/
    .detail .app-screenshot {
        overflow: hidden;
        overflow: hidden;
        margin-right: auto;
        margin-left: auto;
        padding-top: 45px;
        width: 250px;
        height: 500px;
        background: url('../img/mobitel.png') no-repeat;
        background-size: 100%;
    }
        /*dimenzije screenshota*/
        .detail .app-screenshot img {
            margin-right: auto;
            margin-left: auto;
            margin-bottom: 5px;
            border-radius: 5px;
            width: 234px;
            height: 405px;
        }

    /*indikatori pri dnu*/
    .detail .carousel-indicators {
        position: relative;
        bottom: 0;
        left: 0;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        padding: 5px;
        padding-bottom: 8px;
        width: 100%;
        background: transparent;
    }

        .detail .carousel-indicators .active {
            width: 80px;
            height: 5px;
            border: none;
            border-radius: 100px;
            background-color: #0088CC;
        }

        .detail .carousel-indicators li {
            display: inline-block;
            margin: 1px;
            width: 80px;
            height: 5px;
            border: none;
            border-radius: 100px;
            background: #ccccd0;
            text-indent: -999px;
            cursor: pointer;
        }

/**/

#signUp {
    /*background: url(../img/pozadina_1.png) center no-repeat;
    background-attachment: scroll;
    background-size: 100% 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;*/
    /*background:#808080;*/
}


.signUp {
    /*padding: 170px 0px 170px 0px;*/
    text-align: center;
    background: transparent;
}
.parallax-window {
    /*min-height: 800px;*/
    background: transparent;
	width:100% !important;
	margin-left:0 !important;
	margin-right:0 !important;
}

    .signUp h2 {
        font-weight: 300;
        color: #fff;
    }
	.clann{
		font-size:4.5em;
		margin-top:150px;
	}

    .signUp p {
        color: #fff;
        padding-top: 50px;
        font-size: 1.7em !important;
        font-weight: 300;
    }

.prijava {
    background: url(../img/prijavite-se.png);
    width: 225px;
    height: 86px;
    border: none;
    margin-top: 60px;
	margin-bottom:150px;
}




.modal-dialog {
}

.modal-body h5 {
    font-size: 14px;
    color: #3a3a3a;
    padding: 5px;
}

.modal-title {
    padding: 10px;
}


.modal-body form input {
    max-width: 250px;
    margin: 10px auto;
    font-size: 12px;
    color: #3a3a3a;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    height: auto;
    line-height: normal;
    border: 2px solid #ccccd0;
}

.modal-body form textarea {
    max-width: 250px;
    margin: 10px auto;
    font-size: 12px;
    color: #3a3a3a;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    border: 2px solid #ccccd0;
    height: auto;
    line-height: normal;
}

.modal-body form button {
}


.contact {
    padding: 100px 0px 100px 0px;
    text-align: center;
}

    .contact h2 {
        font-size: 3.8em;
        font-weight: normal;
        color: #0088CC;
    }

    .contact h3 {
        font-size: 1.8em;
        font-weight: normal;
        padding: 10px;
        color: #aaa;
    }

.form-setting {
    margin: 0 auto;
    display: block;
    max-width: 480px;
    min-width: 150px;
}

.contact .form-group {
    margin: 0px 10px 0px 10px;
    background: none;
    border: none;
    border-radius: 5px;
}


.contact form .form-control {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 5em;
    -moz-border-radius: 5em;
    -ms-border-radius: 5em;
    -o-border-radius: 5em;
    border-radius: 5em;
    height: 40px;
    padding: 0 20px;
    border: 2px solid #0088CC;
    margin-bottom: 20px;
}

.contact form .form-group input {
    color: #3a3a3a;
}

.contact form textarea.form-control {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    height: auto;
    line-height: normal;
    padding: 10px 20px;
}

.contact form .form-control:focus {
    border-color: #0088CC;
    color: #999999;
}

.contact form .form-control {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 5em;
    -moz-border-radius: 5em;
    -ms-border-radius: 5em;
    -o-border-radius: 5em;
    border-radius: 5em;
    height: 40px;
    padding: 0 20px;
    border: 2px solid #ccccd0;
    margin-bottom: 20px;
}

.contact form .form-group input {
    color: #3a3a3a;
}

.contact form textarea.form-control {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    height: auto;
    line-height: normal;
    padding: 10px 20px;
}

.contact form .form-control:focus {
    border-color: #0088CC;
    color: #999999;
}

.partner {
    display: block;
    margin: 80px auto;
	margin-top:190px;
}


.btn.btn-primary {
    color: #0088CC;
    border: 2px solid #0088CC;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    background: #fff;
}

    .btn.btn-primary:hover {
        color: #fff;
        background: #468AC9;
        border-color: #468AC9;
    }

    .btn.btn-primary.inverse {
        color: #ffffff;
        border-color: #ffffff;
    }

        .btn.btn-primary.inverse:hover {
            color: #ffffff;
            background: #cc6698;
            border-color: #cc6698;
        }
/*-----------------------------------------------------------------------------------*/
/*	FOOTER
/*-----------------------------------------------------------------------------------*/



footer {
    padding: 30px;
    background: #FFFFFF;
	border-top:1px solid #828282;
}

    footer h3 {
        color: black;
        font-size: 3.6em;
    }

.firm-inf {
    text-align: left;
    line-height: 10px;
    font-size: 10px;
}

    .firm-inf p {
        color: #000;
    }

    .firm-inf img:first-child {
        margin-right: 10px;
    }

.firm-sponsor {
    margin: 10px 0px;
}

    .firm-sponsor img {
        display: inline;
        padding: 10px;
    }

.firm-logo {
    margin: 10px 0px;
}

    .firm-logo img {
        display: block;
        margin: 0 auto;
    }


/*-----------------------------------------------------------------------------------*/
/*	MEDIA QUERIES
/*-----------------------------------------------------------------------------------*/



@media (max-width:992px) {
    /* HEADER */
    header {
        background-image: url(../img/pozadina_992.png);
    }

        header h1 {
            text-align: center;
            font-weight: normal;
            font-size: 3.8em;
        }

    .header p {
        text-align: center;
        padding-top: 30px;
        font-size: 14px;
    }

    .header ul li {
        display: inline-block;
        padding: 0px 20px 10px 0px;
    }


    /* NAVIGACIJA */

    .navbar-header {
        position: relative;
    }



    /* LOGO */

    #logo {
        background: url(../img/logo_bijeli.png) center center no-repeat;
        background-size: contain;
    }

    /* SLIDESHOW */

    .detail .carousel h1, .detail p {
        text-align: center;
    }

    .detail p {
        margin-bottom: 60px;
    }

    .detail_p_height {
        display: block;
        height: 180px;
    }

    /* SIGN UP */

    .singUp {
        margin: 50px 0px;
        overflow: hidden;
    }


    #signUp {
        background-image: url(../img/pozadina_1_992px.png);
    }

    .partner {
        display: none;
    }

    /* KONTAKT */

    .contact-data {
        margin: 0px 0px 10px 10px;
    }

        .contact-data p {
            font-size: 12px;
        }

    /* FOOTER */
    .firm-logo img {
        margin: 20px auto;
    }

    .firm-inf {
        text-align: center;
    }
}




@media (max-width:768px) {
     .header img { 
        display: none;
    }

    .detail_p_height {
        display: block;
        height: 180px;
    }

    #logo {
        background: url(../img/logo_sivi.png) center center no-repeat;
        background-size: contain;
    }

    .navbar-default .navbar-nav > li > a {
        color: #0088CC;
    }

        .navbar-default .navbar-nav > li > a:hover {
            color: #444444;
        }

    .signUpimg {
        display: none;
    }

    .firm-logo img {
        margin: 20px auto;
    }

    .firm-inf {
        text-align: center;
    }
}

@media (min-width:767px) {
    .navbar {
        padding: 20px 0;
        border: none;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0px;
        background-color: #fff;
        color: #3a3a3a;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
        outline: 0;
    }
}

@media (max-width:767px) {
   
}








@media (max-width:480px) {

    /* HEADER */
    header {
        background: url(../img/1280x720.png) 50% 0 fixed no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position: relative;
    }

    .header {
        padding: 20px 0px 20px 0px;
    }

        .header img {
            display: none;
        }

    header h1 {
        font-size: 4.2em;
        text-align: center;
        font-weight: bold;
        font-family:lg;
    }

    .header p {
        font-size: 14px;
    }

    /* LOGO  */
    #logo {
        background: url(../img/logo_sivi.png) center center no-repeat;
        background-size: contain;
    }

    /* NAVIGACIJA */
    .navbar-header {
        position: relative;
    }


    .navbar-default .navbar-nav > li > a {
        color: #0088CC;
    }

        .navbar-default .navbar-nav > li > a:hover {
            color: #444444;
        }

    /* SLIDE SHOW */

    header .carousel-iphone, .detail .app-screenshot {
        width: 250px;
        height: 500px;
    }

        header .carousel, .detail .app-screenshot img {
            padding-top: 85px;
            width: 234px;
        }

        .detail .app-screenshot img {
            padding-top: 0px;
        }


    .detail {
        padding: 50px 0px 50px 0px;
    }

        .detail .carousel h1 {
            font-size: 2.1em;
        }

        .detail p {
            font-size: 12px;
        }

    .detail_p_height {
        display: block;
        height: 150px;
    }

    /*sign up mobile*/

    #signUp {
        background-image: url(../img/pozadina_1_480px.png);
        background-attachment: scroll;
    }

    .signUp {
        padding: 50px 0px;
    }

        .signUp img {
            display: none;
        }

        .signUp h2 {
            font-size: 40px;
        }


    /* KONTAKT */

    .contact {
        padding: 50px 0px;
    }

        .contact h2 {
            font-size: 40px;
        }

        .contact h3 {
            font-size: 20px;
        }



    /* FOOTER */

    footer {
        text-align: center;
    }

    .firm-inf {
        text-align: center;
        margin-bottom: 10px;
    }

    .firm-logo img {
        margin: 10px auto;
    }
}