@media only screen and (max-width: 450px) and (min-width: 300px){



html, canvas{

margin: 0 !important;

padding: 0 !important;

height: auto;

min-width: 320px;}



body{

margin: 0;

padding: 0;

margin-bottom: 0;}



#container{

height: auto;

margin: 0 auto;

padding:0;}



.clearfix::before,

.clearfix::after{

content: " ";

display: block;}



.clearfix::after{

clear: both;}



/*NAVIGACIJA*/

ul li{

font-family: 'Open Sans', sans-serif;

font-weight: 400;

color: yellow;

font-size: 16px;

display: block;

padding-left: 13px;}



ul li a,

ul li a:hover{

color: yellow;

text-decoration: none;

text-align: center;

line-height: 28px;}



ul{

align-items: center;

margin-left: -13%;

color: yellow;

text-align: center;

margin-bottom: 5%;}



/* KONTAKT FORMA */

input[type=text], select, textarea {

      width: 100%;

      padding: 5px;

      border: 1px solid #ccc;

      background-color: rgba(100,100,100,10%);

      border-radius: 4px;

      box-sizing: border-box;

      margin-top: 3px;

      margin-bottom: 7px;

      resize: vertical;

      color: darkgrey;}


input[type=email], select, textarea {

      width: 100%;

      padding: 5px;

      border: 1px solid #ccc;

      background-color: rgba(100,100,100,10%);

      border-radius: 4px;

      box-sizing: border-box;

      margin-top: 3px;

      margin-bottom: 7px;

      resize: vertical;

      color: darkgrey;}




input[type=submit] {

      background-color: #4CAF50;

      color: white;

      padding: 12px 10px;

      border: none;

      border-radius: 4px;

      cursor: pointer;}



input[type=submit]:hover {

      background-color: #45a049;}



select{

color: darkgrey;}



.contactforma {

background-color: rgba(255, 0, 0, 15%);

border-radius: 8px;

border: 2px solid white;

padding: 20px;

font-family: 'Open Sans', sans-serif;

font-weight: 400;

font-size: 15px;

color: white;}



/* Naslovna Slika*/

.header-image-container{

width: 100%;

height: calc(100vh + 100px);

min-height: 900px !important;

background-image: url(../images/makarska.jpg);

background-repeat: no-repeat;

background-size: cover;

margin: 0;

padding: 0;}



/* Ikonice */

p.avion{

display: block;

width: 150px;

height: 60px;

background: url(../images/avion.png);

background-repeat: no-repeat;

background-size: contain;

background-position: top;

background-position: center;}



/* Sektori */

.sektor1{

width: 100%;

height: 620px;

background-color: lightgrey;

margin: 0;

padding: 0;}



.sektor2{

width: 100%;

height: 450px;

background-color: #b7b7b7;

margin: 0;

padding: 0;}



.sektor3{

width: 100%;

height: 700px;

background-color: lightgrey;

margin: 0;

padding: 0;}



.opis-box{

width: 90%;

height: 100%;

margin: 0 auto;

align: center;}



.green{

width: 90%;

height: 100%;

margin: 0 auto;

align: center;}



.text-box{

width: 100%;

height: auto;

margin-top: 15%;

float: left;}



.logo{

display: block;

background: url(../images/syt.png) no-repeat;

background-size: contain;

float: left;

width: 30%;

height: 15%;

margin-left: 37%;

margin-top: 3%;

margin-bottom: 1%;}



.navigacija{

display: block;

float: left;

width: 100%;

height: 80px;

margin-top: 0%;}



.contact-form{

display: block;

float: left;

width: 260px;

height: auto;

margin-left: 7%;

margin-top: 5%;}



.contact-box{

display: block;

float: left;

width: 300px;

height: 80px;

margin-left: 5%;

margin-top: 5%;}



.headline-box{

display: block;

float: left;

width: 280px;

height: 80px;

margin: 15% 5% 0px !important;}



h4 a{

position: static;

padding-top: 45%;

color: #5a5a5a;}



.naslov{

display: block;

font-family: 'Open Sans', sans-serif;

font-weight: 700;

text-align: left;

color: white;

font-size: 13px;

line-height: 20px;

text-rendering: geometricPrecision;

letter-spacing: 3px;}



.podnaslov{

font-family: 'Open Sans', sans-serif;

font-weight: 700;

text-align: left;

color: white;

font-size: 14px;

line-height: 25px;}



/* FUTER */

.futer{

display: block;

position: sticky;

width: 100%;

height: 95px;

background-color: #909090;

margin: 0;

padding: 0;}



.www p {

margin-top: 5%;

float: left;

text-align: center;}



.broj p {

float:left;

margin-top: 5%;

text-align: center;}



/* H&P TAGOVI*/

p{

font-family: 'Open Sans', sans-serif;

font-weight: 400;

text-align: center;

color: #444;

font-size: 14px;

line-height: 25px;

margin: 10px 15px 10px;}



h4{

font-family: 'Open Sans', sans-serif;

font-weight: 700;

text-align: center;

color: #444;

font-size: 17px;

line-height: 20px;

text-rendering: geometricPrecision;

letter-spacing: 3px;}



.avion{

background: url(../images/avion.png) no-repeat top center;

padding-top: 60px;

background-size: 130px auto;}



.krug{

background: url(../images/krug.png) no-repeat top center;

padding-top: 110px;

background-size: 90px auto;}



.circle{

background: url(../images/vinarija.png) no-repeat top center;

padding-top: 200px;

background-size: 180px;}



/* Informacije u futeru*/

.www{

display: block;

width: 275px;

height: 40px;

float: left;

padding-left: 5px;

}



.broj{

display: block;

width: 200px;

height: 40px;

float: left;

padding-left: 5px;

margin-top: 5px;}



a{text-decoration: none;

color: white;}



a:hover{text-decoration: none;}

}