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



html, canvas{

margin: 0 !important;

padding: 0 !important;

height: auto;}



body{

margin: 0;

padding: 0;

margin-bottom: 0;}



#container{

width: 960px;

height: 4500px;

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: 20px;

display: inline-block;

padding-left: 40px;}



ul li a,

ul li a:hover{

color: yellow;

text-decoration: none;

text-align: center;}



ul{

align-items: center;

margin-left: -10%;

color: yellow;

text-align: center;}



/* 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 + 400px);

min-height: 1090px !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: 590px;

background-color: lightgrey;

margin: 0;

padding: 0;}



.sektor2{

width: 100%;

height: 500px;

background-color: #b7b7b7;

margin: 0;

padding: 0;}



.sektor3{

width: 100%;

height: 700px;

background-color: lightgrey;

margin: 0;

padding: 0;}



.opis-box{

width: 50%;

height: 100%;

margin: 0 auto;

align: center;}



.green{

width: 50%;

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: 20%;

height: 25%;

margin-left: 42%;

margin-top: 3%;

margin-bottom: 5%;}



.navigacija{

display: block;

float: left;

width: 100%;

height: 80px;

margin-top: 1%;}



.contact-form{

display: block;

float: left;

width: 400px;

height: auto;

margin-left: 26%;

margin-top: 5%;}



.contact-box{

display: block;

float: left;

width: 400px;

height: 80px;

margin-left: 28%;

margin-top: 5%;}



.headline-box{

display: block;

position: static;

float: left;

width: 400px;

height: 80px;

margin-left: 26%;

margin-top: 3%;}



h4 a{

position: static;

padding-top: 45%;

color: #5a5a5a;}



.naslov{

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

font-weight: 700;

text-align: left;

color: white;

font-size: 19px;

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: 19px;

line-height: 25px;}



/* FUTER */

.futer{

display: block;

position: sticky;

width: 100%;

height: 9vw;

background-color: #909090;

margin: 0;

padding: 0;}



.www p {

margin-top: 5%;}



.broj p {

margin-top: 5%;}



/* H&P TAGOVI*/

p{

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

font-weight: 400;

text-align: center;

color: #444;

font-size: 16px;

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: 250px;

height: 100%;

float: left;

padding-left: 20px;}



.broj{

display: block;

width: 250px;

height: 100%;

float: right;

padding-left: 0px;}



a{text-decoration: none;

color: white;}



a:hover{text-decoration: none;}

}