body {
	font-family: 'Roboto', sans-serif;
	color: #000;
  background: url(UVOD_slika_bezMAH.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
  color: #222; }
}


#hero {
	background: url(UVOD_slika_bezMAH.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 

}

#hero h1 {
	font-size: 21em;
	font-weight: 300;
    letter-spacing:70px;
    margin: 0;
    padding: 0;
    line-height: 250px;
    color:#222;
    width: 100%;
    padding-top:0.3em;
}

#hero p {
	font-size: 1.1em;
    font-weight: bold;
    color: #222;
    margin-bottom: 0px;
    margin: 0;
    padding-left: 30px;
     white-space:nowrap;
}

#hero span {
	font-weight: 400;
    color: #0095f7;
    text-transform: uppercase;
    letter-spacing: .05em;
}

a {
    color:black;
}
a:hover {
    text-decoration: none;
}

#blue {
    color: #7fd7f5;
}





/* ==============================================
   9. Media Queries
===============================================*/

@media (max-width: 768px) { 
    .hero-content {
		margin-top: 100px;
	}
	#hero h1 {
		font-size: 20em!important;
		margin-bottom: 20px;
	}
	#hero p {
		font-size: 1.1em!important;
         white-space:nowrap;
	}
}

@media (max-width: 450px) { 


	background: url(UVOD_slika_bezMAH.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;






    .hero-content {

		margin-top: 100px;
        margin-left: 20px;
	}
	#hero h1 {
		font-size: 20em!important;
		margin-bottom: 20px;
	}
	#hero p {
		font-size: 1.1em!important;
         white-space:nowrap;
	}
}

@media (max-width: 366px) { 
    .hero-content {
		margin-top: 100px;
        margin-left: 20px;
        text-align: center;
	}
	#hero h1 {
		font-size: 15em!important;
		margin-bottom: 20px;
    
	}
	#hero p {
		font-size: 0.8em!important;
         white-space:nowrap;
	}
}

/* No greater than 900px, no less than 400px */
@media (max-width:1514px) and (min-width:768px) {
    	#hero h1 {
		font-size: 25em!important;
		margin-bottom: 20px;
        
	}
	#hero p {
		font-size: 1.3em!important;
	}
}

@media (max-width: 295px) { 
    .hero-content {
		margin-top: 100px;
        margin-left: 20px;
        text-align: center;
	}
	#hero h1 {
		font-size: 15em!important;
		margin-bottom: 20px;
	}
	#hero p {
		font-size: 0.8em!important;
         white-space:nowrap;
	}
}










/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	.hero-content {
		margin-top: 100px;
	}
}