/* Basic settings
* --------------------------------------- 
*/    
h1 { 
    font-family: Oswald,Arial, serif;
    font-weight: 700;
    color: white;
    font-size: 3rem;
    margin: 0;
    margin-bottom: 5px;
}
h2 { 
    font-family: Oswald,Arial, serif;
    font-weight: 700;
    color: #F6F6F6;
    font-size: 3rem;
}
p {
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: 1rem;
    text-align: center;
}
ul {
    font-family: 'Merriweather', serif;
    font-weight: 300;
    font-size: 0.8rem;
    padding-left: 3px;
}
ul li {
    padding-top: 0.3rem;
}
.fp-controlArrow {
   display: none;
}
::-moz-selection { 
    color: #ffffff;
    background: #860202;
}
::selection {
    color: #ffffff; 
    background: #860202;
}
.section{
    text-align:center;-
    border: none;
}
.slide{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#menu{
    display: none;
    position:fixed;
    top:0px;
    left: 0px;
    height: 100%;
    width: 20%;
    background: rgba(0, 0, 0,0.8);
    border-right: 5px solid #860202;
    z-index:99998;
    padding: 0;
    padding-top: 0.5vh;
}
#menu .menuItem {
    line-height: 8vh;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 9%;
    display: block;
    font-family: Oswald,Arial, serif;
    font-size: 1rem;
    color: white;
}

#menu .active {
    background-color: #860202;
}
#menu a {
    text-decoration: none;
}
#menu a:hover {
    text-decoration: none;
}
.languages {
    color: white;
    line-height: 8vh;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 9%;
    display: block;
    padding-left: 50%;
}
.lang {
    display: inline;
    width: 40%;
    max-height: 90%;
    padding-left: 5%;
}
#menu .menuItem:hover {
    background: #860202;
}
.logoText2{
    font-family: 'Passion One', cursive;
    color:#860202;
}
#menuIcon {
    display: none;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: pointer;
    z-index: 99999;
    border-radius: 0.7rem;
    padding: 2px 5px 0px 5px;
    position: fixed;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0,0.3);
    border: solid 3px #DE1B1B;
}
#menuIcon:hover {
    background-color: #DE1B1B;
}
#menuIcon p { 
    display: inline;
    color: white;
    margin: 0;
    margin-left: 3px;
    font-family: Oswald,Arial, serif;
    font-weight: 700;
    font-size: 1rem;
}
#menuIcon svg {
    position: relative;
    margin: 0;
    fill: white;
}
#menuIcon #x {
    display: none;
}

/* END of basic settings
* --------------------------------------- */

/* Page loading.
* --------------------------------------- */
.loaderContent{
    position: fixed; /* or absolute */
    top: 50%;
    left: 50%;
    margin-top:-42px;
    margin-left: -52px;
}
#loader{
    z-index: 999;
    position:fixed;
    width:100%;
    background-color: #2B2B2B;
    background-image: url(/images/loadingLogo.png);
    background-position: right bottom; /*Positioning*/
    background-repeat: no-repeat;
    height:100%;
    text-align:center;
    margin:0;
    padding:0;
}

.siteContent{
    display: none;
}

.spinner {
  width: 100px;
  height: 80px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: white;
  height: 100%;
  width: 10px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
/* END of Page loading.
* --------------------------------------- */

/* HOME (0. section)
* --------------------------------------- */
.home{ 
    background-image: url(/images/homeBack.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.homeContent {
    margin-left: 25%;
    margin-right: 25%;
    border: #860202 solid 7px;
    background: rgba(0, 0, 0,0.7);
    color:white;
    padding: 25px;
    z-index: 500;
}
#section0 .logo {
    position: absolute;
    right: 1vw;
    bottom: 1vw;
    width: 8vw;
    height: 8vw;
    background-image: url(/images/logoNoTitle.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/*  END of HOME(0. section)
* --------------------------------------- */

/*  (1. section)
* --------------------------------------- */

#section1 {
    background-image: url(/images/djelatnostiBack.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.djelatnosti {
    padding: 0;
}
.djelatnosti ul {
    text-align: left;
    color: white;
    list-style-type: none;
    padding-left: 0;
}
.osnovneDjelatnosti {
    display: none;
    border-radius: 10px;
    background: rgba(0, 0, 0,0.7);
    border: solid 4px #860202;;
}
.osnovneDjelatnosti h1 {
    margin-top: 15px;
    color: #860202;
    padding-bottom: 7px;
    border-bottom: solid 2px #ffffff;;
}
.djelatnosti ul li {
    margin-top: 3px;
    padding-left: 15px; 
}

/*  END of (1. section)
* --------------------------------------- */

/*  (2,3,4,5 section)
* --------------------------------------- */
.aboutContent {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.circle {
    border-top-right-radius:20vh;
    border-bottom-right-radius:20vh;
    border: 8px solid #860202;
    border-left: none;
    width: 40%;
    height: 40vh;
    position: fixed;
    top: 50%;
    transform: translate(0,-50%);
    left: 0px;
    z-index: 7777;
}

.circleSpec {
    display: none;   
    background: url('/images/specijalni-transporti.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.circlAutodizalice {
    display: none;   
    background: url('/images/autodizalice.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.circleTeglj {
    display: none;   
    background: url('/images/teglj.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;   
}
.circlePratnja {
    display: none;   
    background: url('/images/pratnja.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;    
}
.activitiesContent {
    z-index: 8888;
}
.activitiesContent p {
    color: #ffffff;
    text-align: left;
}
.activitiesContent h1 {
    color: #860202;
    text-align: left;
}
.activitiesContent ul {
    list-style-type: none;
    text-align: left;
    color: white;
}
.upslide {
   
}
/*  END of (2,3,4,5 section)
* --------------------------------------- */

/*    (6. section)
* --------------------------------------- */
.partnerWrap {
    height: 100%;
}
.partnerItem{
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.partnerItem:hover{
   
}
.blank{
    height: 100%;
}
.partnerItemWrap {
    height: 100%;
    padding-left: 1.3vw;
    padding-right: 1.3vw;
}
.partnersRow{
    margin-bottom: 2vh;
    border-bottom: solid 4px #909090;
    border-top: solid 4px #909090;
    height: 22%;
}
.partnersHalfRow{
    height: 12.5%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.partnersHalfRow .heading {
    color: #860202;
    font-family: Oswald,Arial, serif;
    font-weight: 700;
    font-size: 2rem;
}
.koncar {
    background-image: url('/images/logos/LOGOkoncarBlack.png');
}
.strabag {
    background-image: url('/images/logos/LOGOstrabagBlack.png');
}
.kamgrad {
    background-image: url('/images/logos/LOGOkamgradBlack.png');
}
.krono {
    background-image: url('/images/logos/LOGOkronospanBlack.png');
}
.lavcevic {
    background-image: url('/images/logos/LOGOlavcevicBlack.png');
}
.alstom {
    background-image: url('/images/logos/LOGOalstomBlack.png');
}
.oberndor {
    background-image: url('/images/logos/LOGOoberndorferBlack.png');
}
.pmp {
    background-image: url('/images/logos/LOGOpmpBlack.png');
}
.staveb {
    background-image: url('/images/logos/LOGOstavebBlack.png');
}
.montm {
    background-image: url('/images/logos/LOGOmontmBlack.png');
}
.emerson {
    background-image: url('/images/logos/LOGOemersonBlack.png');
}
.koncar:hover {
    background-image: url('/images/logos/LOGOkoncar.png');
}
.strabag:hover {
    background-image: url('/images/logos/LOGOstrabag.png');
}
.kamgrad:hover {
    background-image: url('/images/logos/LOGOkamgrad.png');
}
.krono:hover {
    background-image: url('/images/logos/LOGOkronospan.png');
}
.lavcevic:hover {
    background-image: url('/images/logos/LOGOlavcevic.png');
}
.alstom:hover {
    background-image: url('/images/logos/LOGOalstom.png');
}
.oberndor:hover {
    background-image: url('/images/logos/LOGOoberndorfer.png');
}
.pmp:hover {
    background-image: url('/images/logos/LOGOpmp.png');
}
.staveb:hover {
    background-image: url('/images/logos/LOGOstaveb.png');
}
.montm:hover {
    background-image: url('/images/logos/LOGOmontm.png');
}
.emerson:hover {
    background-image: url('/images/logos/LOGOemerson.png');
}

/*  END of  (6. section)
* --------------------------------------- */

/*    (7. section)
* --------------------------------------- */
.galleryPopup {
    position: absolute;
    background-color: rgba(0, 0, 0,0.7);
    bottom: 20px;
    width: 100%;
    z-index: 55;
    border-top: solid 5px #860202;
    border-bottom: solid 5px #860202;
}
.galleryPopup .miniSlika {
    cursor: pointer;
    display: inline-block;
    width: 7vw;
    height: 8vh;
    padding: 1vw;
    margin: 0.3vw;
    background-repeat: no-repeat;
    background-position: center;
}
.galleryPopup #mini1 {
    background-image: url(/images/galerija/slika1mini.jpg);
}
.galleryPopup #mini2 {
    background-image: url(/images/galerija/slika2mini.jpg);
}
.galleryPopup #mini3 {
    background-image: url(/images/galerija/slika3mini.jpg);
}
.galleryPopup #mini4 {
    background-image: url(/images/galerija/slika4mini.jpg);
}
.galleryPopup #mini5 {
    background-image: url(/images/galerija/slika5mini.jpg);
}
.galleryPopup #mini6 {
    background-image: url(/images/galerija/slika6mini.jpg);
}
.galleryPopup #mini11 {
    background-image: url(/images/galerija/slika11mini.jpg);
}
.galleryPopup #mini7 {
    background-image: url(/images/galerija/slika7mini.jpg);
}
.galleryPopup #mini8 {
    background-image: url(/images/galerija/slika8mini.jpg);
}
.galleryPopup #mini9 {
    background-image: url(/images/galerija/slika9mini.jpg);
}
.galleryPopup #mini10 {
    background-image: url(/images/galerija/slika10mini.jpg);
}
.galleryPopup #mini12 {
    background-image: url(/images/galerija/slika12mini.jpg);
}
#section7 #slide1 {
    background-image: url(/images/galerija/slika1.jpg);
}
#section7 #slide2 {
    background-image: url(/images/galerija/slika2.jpg);
}
#section7 #slide3 {
    background-image: url(/images/galerija/slika3.jpg);
}
#section7 #slide4 {
    background-image: url(/images/galerija/slika4.jpg);
}
#section7 #slide5 {
    background-image: url(/images/galerija/slika5.jpg);
}
#section7 #slide6 {
    background-image: url(/images/galerija/slika6.jpg);
}
#section7 #slide11 {
    background-image: url(/images/galerija/slika11.jpg);
}
#section7 #slide7 {
    background-image: url(/images/galerija/slika7.jpg);
}
#section7 #slide8 {
    background-image: url(/images/galerija/slika8.jpg);
}
#section7 #slide9 {
    background-image: url(/images/galerija/slika9.jpg);
}
#section7 #slide10 {
    background-image: url(/images/galerija/slika10.jpg);
}
#section7 #slide12 {
    background-image: url(/images/galerija/slika12.jpg);
}

/*  END of  (7. section)
* --------------------------------------- */

/*  (8. section)
* --------------------------------------- */
#section8 {
    background-image: url(/images/kontaktback.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.contactWrap {
}
#section8 > .fp-tableCell {
    vertical-align: baseline !important;
}
.contact {
    border: solid 4px #860202;
    border: none;
    border-bottom-right-radius:3vh; 
    border-bottom-left-radius:3vh;
    background-color: rgba(0, 0, 0,0.8);
    padding-top: 2vh;
}
.contactInfo {
    text-align: left;
}
.contactHeading {
    color: #ffffff;
    text-align: left;
    font-family: Oswald,Arial, serif;
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
}
.contactInfoRow .P {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 400;
    color: white;
    margin-bottom: 2px;
}
.contactInfoRow .H {
    font-family: Oswald,Arial, serif;
    font-weight: 700;
    text-align: left;
    font-size: 1rem;
    color: #860202;
    margin-bottom: 5px;
}
.contactInfo span {
    vertical-align:top;
    display: inline-block;
    top: 0px;
    width: 32%;
    padding-left: 13px;
    padding-top: 9px;
}
.contactForm .error {
    display: block;
    color: red;
    margin-top: 5px;
    text-align: left;
}
.contactForm .successMessage {
    color: green;
    margin-top: 5px;
    text-align: left;
    display: block;
}
.contactForm button{
    width: 75%;
    margin-top: 5px;
    padding: 6px;
    display: inline-block;
    border-radius: 10px;
    background: rgba(0,0,0,0.4);
    border: solid 2px #860202;
    color: #ffffff;
    margin-bottom: 5px;
}
.contactForm button:focus {
    outline: none;
    background-color: #860202;
}
.contact textarea:focus, .contact input:focus{
    outline: none;
    box-shadow: 0 0 12px rgba(255, 0, 0, 1);
}
.contact ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #c4c4c4;
}
.contact :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #c4c4c4;
   opacity:  1;
}
.contact ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #c4c4c4;
   opacity:  1;
}
.contact :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #c4c4c4;
}
.contact :placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    #c4c4c4;
}
.contact .inputMessage {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    height: 20vh;
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 6px;
    padding-bottom: 15px;
    border-radius: 10px;
    background: rgba(0,0,0,0.4);
    border: solid 2px #860202;
    color: #ffffff;
}
.contact .inputField {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    display: inline-block;
    width: 49%;
    margin: 0;
    margin-top: 5px;
    padding: 6px;
    padding-bottom: 15px;
    border-radius: 10px;
    background: rgba(0,0,0,0.4);
    border: solid 2px #860202;
    color: #ffffff;
}

#termsLink {
    color: #585858;
    font-size: 0.8rem;
}

.eu-fond-text p {
    font-size: 0.6rem;
}

.eu-fond-logo img {
    max-width: 100%;
}

 #footer {
    z-index: 9999;
    bottom:0px;
    position:absolute;
    display:block;
    width: 100%;
    background-color: rgba(0, 0, 0,0.7);
    border-bottom: 6px solid #860202;
    padding: 7px;
}
.footerP {
    font-size: 0.6rem;
    color: #ffffff;
    text-align:left;
    margin-bottom: 1px;
}
.footerH {
    font-family: Oswald,Arial, serif;
    font-weight: 700;
    font-size: 0.7rem;
    color: #860202;
    text-align:left;
    margin-bottom: 2px;
}
.footCol {
    padding-left: 5px;
    border-left: 3px solid #860202;
}
/*  END of  (8. section)
* --------------------------------------- */

#map {
    background-color: rgba(0, 0, 0,0.7);
    height: 40vh;
}


/*  BREAKPOINTS
* --------------------------------------- */
@media only screen and (max-width: 767px) {
    html {
        font-size: 15px; /* --->     Svi relativni na ovaj size    */
    }
    #menu{
        width: 100%;
        border: none;
    }
    #menu .menuItem , #menu .languages{
        font-size: 1.5rem;
        border-bottom: 3px solid #ffffff;
    }
    #menuIcon p { 
        display: none;
    }
    #menuIcon svg { 
        width: 20px;
        height: 20px;
    }
    #section0 img {
        width: 200px;
    }
    .djelatnost {
        padding: 5px;
    }
    .djelatnostItem {
        padding: 4px;
        border: #000000 solid 3px; 
    }
    .djelatnostItem p {
        font-size: 0.6rem;
    }
    .partnerWrap {
        height: 80vh;
    }
    .partnersHalfRow .heading {
        font-size: 1.5rem;
    }
    #section2 > .fp-tableCell, #section3 > .fp-tableCell, #section4 > .fp-tableCell, #section5 > .fp-tableCell {
        vertical-align: baseline !important;
    }
    .activitiesContent {
        padding-top: 40vh;
    }
    .activitiesContent p {
        text-align: center;
    }
    .activitiesContent h1 {
        text-align: center;
    }
    .activitiesContent ul {
        padding-left0: 20px;
        text-align: left;
    }
    .circle { 
        border-radius: 0;
        border-radius: 50% !important;
        border: 5px solid #860202;
        width: 35vh !important;
        height: 35vh !important;
        position: fixed;
        top:15px;
        left: 50%;
        margin-left: -17.5vh;
        z-index: 7777;
        transform:none;
    }

   .homeContent { 
        margin: 0 auto;
        border-left: none;
        border-right: none;
    }

   .fp-controlArrow {
        display: none;
    }
    .contact .inputMessage {
        height: 15vh;
    }
    .contact .inputField {
        height: 6vh;
    }
    .contactInfoRow .P {
        font-size: 0.9rem;
    }
    .contactInfoRow .H {
        font-size: 1.3rem;
    }
    .galleryPopup {
        bottom: 10px;
        border-top: solid 3px #860202;
        border-bottom: solid 3px #860202;
    }
    .galleryPopup .miniSlika {
        width: 13vw;
        height: 8vh;
    }

}
@media only screen and (max-width: 450px) {
    html {
        font-size: 10px; /* --->     Svi relativni na ovaj size    */
    }
}
@media only screen and (min-width: 768px) {
    html {
        font-size: 13px; /* --->     Svi relativni na ovaj size    */
    }
}
@media only screen and (min-width: 1000px) {
    html {
        font-size: 17px; /* --->     Svi relativni na ovaj size    */
    }
}
@media only screen and (min-width: 1400px) {
    html {
        font-size: 23px; /* --->     Svi relativni na ovaj size    */
    }
}
@media only screen and (min-width: 2000px) {
    html {
        font-size: 28px; /* --->     Svi relativni na ovaj size    */
    }
}

/*  END of BREAKPOINTS
* --------------------------------------- */