* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
} 

body, html {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

h1 {
	font-size: 50px;
	padding: 30px;
	color: #408EB7;
}

h2 {
  text-transform: uppercase;
	padding: 20px 5px 30px 5px;
  color: #408EB7;
  font-family: Oswald, sans-serif;
}

p {
  padding: 15px;
  line-height: 1.6;
  color: #408EB7;
}

.menu-icon {
  position: fixed;
  top: 10px;
  left: 10px;
  color:red;
  z-index: 99;
  font-size: 30px;
}

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 99; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #408EB7; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.bg {
		/* The image used */
	  background-image: url("people-2592247_1920-2.jpg");

	  /* Full height */
	  height: 100%;

	  /* Center and scale the image nicely */
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
}


.bgo {
		/* The image used */
	  background-image: url("people-2592247_1920-2.jpg");

      width: 100%;
	  height: 40%;
  /* Center and scale the image nicely */
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
      z-index: 50;

}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
}


.logo {
	position: absolute;
	top: 50px;
	left: 50px;
	border: 1px solid #fff;
	color: #fff;
	background: rgb(0,0,0, 0.3);
	box-shadow: 5px 5px 15px #e6e6e6;
	
}

.logo p {
	padding: 10px;
	font-size: 2vw;
    text-shadow: 3px 3px 5px #fff;
	font-family: Oswald, sans-serif;
}

#ime-logo {
	font-size: 4vw;
	padding: 15px;
    text-shadow: 3px 3px 5px #02406b;
    font-family: Oswald, sans-serif;
}

.linija-ispod-naslovne-kontejner {
	position: relative;
	top: -120px;
	width: 1000px;
	margin: auto;
	height: 200px;
}

.linija-ispod-naslovne {
	position: relative;
	width: 100%;
	height: 300px;
	background-color: #408EB7;
}

.box {
  position: relative;
	box-sizing: border-box;
	float: left;
	width: 302px;
	height: 302px;
	background-color: #fff;
  margin: 9px 15px;
  color: #408EB7;
  box-shadow: 5px 5px 15px #e6e6e6;
}

.box h2 {
  padding-top: 30px;
}

.box-p {
  color: #408EB7;
  position: absolute;
  left: 0;
  top: 100px;
}

.box h2 {
  text-align: center;
}

.naslov-veliki {
	text-align: center;
	padding: 50px 50px 0px 50px;
}

/* Kockice za informacije o nama na početnoj odmah ispog naslovne i njenog segmenta */
.row > .cell {
  padding: 0 20px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.container-about { 
	position: relative;
	width: 100%;
	margin-bottom: 100px;
 }

 .row {
 	overflow: hidden;
 	position: relative;
 	width: 1020px;
 	margin: auto;
 }

 .cell {
 	position: relative;
 	float: left;
 	width: 333px;
    height: 350px;
}

 .sadrzaj-cell {
  position: relative;
 	width: 300px;
 	height: 300px;
 	padding: 20px;
 	overflow: hidden; /* Hide scrollbars */
 	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
  box-shadow: 5px 5px 15px #e6e6e6;
  cursor: pointer;  
 }

/* Važne vesti skrolovanje teksta */
.vaznevesti {
             height: 50px;	
             overflow: hidden;
             position: fixed;
             bottom: 100px;
             background: transparent;
            }
        
        .vaznevesti h3 {
             font-size: 2em;
             color: red;
             position: fixed;
             z-index: 199;
             width: 100%;
             height: 100%;
             margin: 0;
             line-height: 50px;
             text-align: center;
             /* Starting position */
             -moz-transform:translateX(100%);
             -webkit-transform:translateX(100%);	
             transform:translateX(100%);
             /* Apply animation to this element */	
             -moz-animation: vaznevesti 15s linear infinite;
             -webkit-animation: vaznevesti 15s linear infinite;
             animation: vaznevesti 15s linear infinite;
            }
        
            /* Move it (define the animation) */
            @-moz-keyframes vaznevesti {
             0%   { -moz-transform: translateX(100%); }
             100% { -moz-transform: translateX(-100%); }
            }
            @-webkit-keyframes vaznevesti {
             0%   { -webkit-transform: translateX(100%); }
             100% { -webkit-transform: translateX(-100%); }
            }
            @keyframes vaznevesti {
             0%   { 
             -moz-transform: translateX(100%); /* Firefox bug fix */
             -webkit-transform: translateX(100%); /* Firefox bug fix */
             transform: translateX(100%); 		
             }
             100% { 
             -moz-transform: translateX(-100%); /* Firefox bug fix */
             -webkit-transform: translateX(-100%); /* Firefox bug fix */
             transform: translateX(-100%); 
             }
            }

/* Iskačući prozori za prikaz segmenata o nama na početnoj odmah ispod naslovne */
/* The Modal (background) */
.mod {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}

/* Modal Content */
.content {
  background-color: #fefefe;
  margin: auto;
  padding: 30px;
  padding-top: 60px;
  border: 1px solid #888;
  width: 30%;
  background-color: rgb(64,142,183); /* Fallback color */
  box-shadow: 5px 5px 15px #408EB7;
  border-radius: 10px;
}

.content p { 
  color: #fff;
}

.content h2 { 
  color: #fff;
}

button {
  padding: 10px 16px;
  border-radius: 10px;
}

/* The Close Button */
.close {
  position: relative;
  top: -20px;
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

 /*Ikonice "Fa", njihovo stilizovanje */
.ikonice-velike {
  font-size: 30px!important;
  margin: 15px;
}

 .priatelj {
  clear: both;
  position: relative;
  width: 1020px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}

.priatelj img {
  position: relative;
  top: 0;
  width: 100%;
  padding: 100px 0px;
}

.priatelj h1 {
   font-size: 35px;
   padding: 25px;
}

.priatelj h2 {
   font-size: 20px;
   font-style: italic;
   padding-left: 20px;
   padding-bottom: 0px;
   color: gray;
}

.priatelj p {
  padding: 20px;
  font-style: italic;
  font-size: 14px;
  color: gray;
}

.ponuda {
  width: 80%;
  margin: auto;
  padding-top: 50px;
}

.naslov {
  color: gray;
}

.prvi {
  width: 15%; 
  float: left;
}

.drugi {
  width: 85%;
  float: left;
}

.priatelj::after {
  content: "";
  clear: both;
  display: table;
}

#treneri {
  padding: 70px 100px;
}

.slika-trener {
  position: absolute;
  top: 50px;
  right: 50px;
}

.kontejner {
  width: 100%;
}

.slike {
  width: 700px;
  margin: auto;
  height: 270px;
}

.slike-tekst {
  width: 700px;
  margin: auto;
  height: 100px;
}

.slika {
  float: left;
  width: 350px;
  margin: auto;
  font-size: 20px;
  color: red;
  text-align: center;

}

.slika img {
  display: block;
  margin: auto;
  box-shadow: 5px 5px 5px #02406B;
  border-radius: 50%;
}

.vesti-kontajner {
  overflow: auto;
  background-color:#14D2E0; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, #02406B, #14D2E0);
  padding: 70px 0px;
  box-shadow: 0px 10px 10px #aaaaaa;
}

.vesti {
  position: relative;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  padding: 10px;
  text-decoration: none;
  color: #fff;
  background-color: rgb(255,255,255, 0.3);
  border-radius: 10px;
  box-shadow: 5px 5px 5px #02406B;
}

.vesti a {
  text-decoration: none;
  color: #fff;
}

.vesti::after {
  content: "";
  clear: both;
  display: table;
}

.vesti h1 {
  font-size: 35px;
  padding: 25px;
  color: #fff;
}

.vesti p {
  font-size: 18px;
  padding: 10px 35px;
  color: #fff;
}

.obavestenja-slika {
  position: relative;
  display: block;
  width: 80%;
  margin: auto;
  padding: 35px 0px;
}

.vesti::after {
  content: "";
  clear: both;
  display: table;
}

#mapa-naslov {
  padding: 70px 100px;
}

.nastavak-naslova {
  font-size: 25px;
}

.head-mapa {
    width: 100%;
    padding: 30px;
    color: white;
    text-align: center;
    background-color: #02406B;
}

.footer {
  position: relative;
  overflow: auto;
  text-align: center;
  color: #fff;
  background-color: #02406B;
  padding: 50px;
}

.footer a {
  color: #fff!important;
}

.footer1-3 {
  float: left;
  width: 33.33%;
}

#copyright {
  position: absolute;
  bottom: 20px;
}


/* Galerija */

.header {
  text-align: center;
  padding: 32px;
}

.rowgalerija {
    width: 60%;
    margin: auto;
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE 10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.columng {
  -ms-flex: 50%; /* IE 10 */
  flex: 25%;
  padding: 0 4px;;
}

.columng img {
  margin-top: 8px;
  vertical-align: middle;
}

.distancer {
    width: 100%;
    height: 100px;
}
/* Style the galery buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}

/* Članovi */

.clanovi {
    width: 60%; 
    margin: 0px auto;
    padding: 20px;
}


.clan {
    width: 100%;
    margin: 0px auto 100px auto ;
    
}

.slika-clana-segment {
    width: 100%;
    margin: auto;
}

.slika-clana-segment img {
  display: block;
  box-shadow: 5px 5px 5px #02406B;
  border-radius: 50%;
  margin: auto;
  width: 250px;
}

.imeiprezime {
    text-align: center;
    width: 100%;
    margin: auto;
}

.misao {
    text-align: center;
}

.misao p {
    padding: 20px;
    font-style: italic;
    font-size: 14px;
    color: gray;
}

.clearfix {
  overflow: auto;
}

/* Forma prijava */ 

.okvircrveni {
    width: 100%;
    box-shadow: 5px 5px 5px red;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    border: 1px solid red;
    outline: none;
    background-color: white;
}

.okvirplavi {
    width: 100%;
    box-shadow: 5px 5px 5px #02406B;;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    border: 1px solid #02406B;
    outline: none;
    background-color: white;
}
  
.forma-prijava {
    width: 35%;
    margin: auto;
    padding: 100px 0;
}

input[type=text], input[type=submit],input[type=number],input[type=email], input[type=date],input[type=time], input[type=password], textarea#styled, select#izbor_trke, select#izbor_vremena, button {
    width: 100%;
    box-shadow: 5px 5px 5px #02406B;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    border: 1px solid #02406B;
    outline: none;
    background-color: white;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0;
  outline: none;
}

/* Tooltip */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 350px;
  background-color: #408EB7;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px 5px;
  box-shadow: 5px 5px 5px #02406B;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
/* Kalkulator */

.kalkulacija_tempa {

}

.container-kalkulator-izracunavanje {
    width: 30%;
    margin: auto;
}
.natpis{
    text-align: center;
}

@media screen and (max-width: 1200px) {

	/* Modal Content */
  .content {
    width: 50%;
  }
}

@media screen and (max-width: 1100px) {
  
  .linija-ispod-naslovne {
    width: 100%;
    height: 840px;
    margin-top: -20px;
  }

  .linija-ispod-naslovne-kontejner {
    width: 100%;
    height: 1000px;
  }

  .box {
    float: none;
    margin: 20px auto;
    width: 70%;
    height: 250px;

  }

  .priatelj {
    width: 100%;
  }

}


@media screen and (max-width: 992px) {
	.row {
		position: relative;
		width: 670px;
		margin: auto;
  }
  
  .priatelj {
    width: 100%;
  }

  .priatelj img {
    padding: 50px 0px;
  }
}

@media screen and (max-width: 600px) {

  .menu-icon {
    top: 10px;
    left: 10px;
    color:red;
    z-index: 99;
    font-size: 30px;
  }

  .logo {
    position: absolute;
    top: 20px;
    left: 40px;
  }
  
  .logo p {
    padding: 2px 10px;
    font-size: 5vw;
  }
  
  #ime-logo {
    font-size: 7vw;
    padding: 10px;
  }

  .linija-ispod-naslovne {
    height: 920px;
  }

  .linija-ispod-naslovne-kontejner {
    position: relative;
    top: -30px;
    width: 90%;
    margin: auto;
    height: 200px;
  }

  .box {
    height: 300px;
    width: 85%;
  }

  /* Modal Content */

  .content {
    width: 70%;
  }

  .row {
    width: 100%;
  }

  .cell {
    width: 95%;
    height: 550px;
    padding: 0px;
    margin: auto;
  }

  .sadrzaj-cell {
    position: relative;
    width: 400px;
    height: 550px;
  }

  .row > .cell {
    padding: 0px;
    margin-bottom: 20px;
}
/* Priatelj garmin */
  .priatelj {
    width: 100%;
  }
/* Slike treneri */
  .kontejner {
    height: 650px;
  }

  .slike {
    width: 100%;
  }

  .slika {
    float: none;
    padding-top: 25px;
  }

  .slike-tekst {
    display: none;
  }

  .vesti p {
    font-size: 18px;
    padding: 10px;
    color: #fff;
  }

  .footer1-3 {
    float: none;
    width: 100%;
  }

  .footer1-3 p {
    padding: 5px;
  }

  #copyright {
    position: relative;
  }
}

@media screen and (max-width: 460px) {
    
    h1 {
        font-size: 20px;
    }

  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}

  .linija-ispod-naslovne-kontejner {
    position: relative;
    top: -60px;
    width: 90%;
    margin: auto;
    height: 200px;
  }

  /* Modal Content */
  .content {
    width: 70%;
  }

  .row {
    width: 100%;
  }

  .cell {
    width: 100%;
    height: 450px;
    margin: auto;
  }

  .sadrzaj-cell {
    position: relative;
    width: 400px;
    height: 400px;
  }
  .priatelj {
    width: 100%;
  }

  .slike {
    width: 100%;
  }

  .slika {
    float: none;
  }

  .slike-tekst {
    width: 100%;
    margin: auto;
    height: 100px;
  }
    
  /* Forma prijava */ 
    
    .forma-prijava {
    width: 85%;
    margin: auto;
    padding: 100px 0;
    }
    
    #kmbestm {
        width: 40%;
    }
    
    .clanovi {
        width: 100%;
    }
   
}

@media screen and (max-width: 360px) {
  .linija-ispod-naslovne-kontejner {
    position: relative;
    top: -80px;
    width: 90%;
    margin: auto;
    height: 200px;
  }

  /* Modal Content */
  .content {
    width: 90%;
  }

  .row {
    width: 360px;
  }

  .cell {
    width: 100%;
    height: 360px;
    margin: auto;
  }

  .sadrzaj-cell {
    position: relative;
    width: 280px;
    height: 350px;
  }
    
   .forma-prijava {
       padding-top: 30px;
    }
    
  .priatelj {
    width: 100%;
  }

  .slike {
    width: 320px;
  }

  .slika {
    float: none;
  }
    
  .naslov-veliki {
      padding: 0px;
  }
    
  #kmbestm {
      width: 40%;
  }
    
    #kmbest3x {
        width: 25%;
    }posalji
 
    .clanovi {
        width: 100%;
    }
   
    .vaznevesti h3 {
        width: 500%;
        /* Starting position */
         -moz-transform:translateX(100%);
         -webkit-transform:translateX(100%);	
         transform:translateX(100%);
         /* Apply animation to this element */	
         -moz-animation: vaznevesti 25s linear infinite;
         -webkit-animation: vaznevesti 25s linear infinite;
         animation: vaznevesti 25s linear infinite;
   }
    
   #treneri {
        padding: 20px 20px;
   }
    
    .slika {
        width: auto;
    }
    
    .container-kalkulator-izracunavanje {
        width: 80%;
        margin: auto;
    }
    
    .kalkulacija {
        font-size: 16px;
    }
}