html, body {
    margin: 0;
    padding: 0;
}

*{
    margin:0;
    padding:0;
}

body.wback {
    background:url("back1.png") repeat-x;
}

#content {
   max-width:600px; 
   padding: 350px 10% 0px; 
   margin:0px auto; 
   text-align:justify;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom:200px;
}

#content.up {
    padding-top: 50px; 
}

#left_content, #right_content {
   width:35%;
   float:left; 
   padding: 0px 0% 0px 10%; 
   margin:0px auto; 
   text-align:left;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#right_content {
    width:50%;
       padding: 50px 0% 0px 5%; 
}

h1 {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size:60pt;
}
h2 {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size:30pt;
  text-transform:uppercase;
      text-align:center; 
      margin-bottom:40px;
}


h3 {
  font-size:12pt;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
}

p {
    margin-bottom: 16px;
}

.dalje {
    text-align:right;
}

a:link, a:visited, a:active{
    text-decoration:none;
    color:#000;
    font-family: "Barlow", sans-serif;
    font-weight: 900;
    font-style: normal;
}

a:hover{
    color:#db372d;
}

/* font */
 
.barlow-regular {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.barlow-black {
    font-family: "Barlow", sans-serif;
    font-weight: 900;
    font-style: normal;
}

#sketch1 {
    width:49vw;
    height:100vh;
    float:left;
    text-align:right;
}

#sketch2 {
    width:49vw;
    height:100vh;
    float:left;
    text-align:left;
}

#sketch3 {
 width:100vw;
 height:80vh;
 text-align:center;
}
 

.dropdown {
  position: absolute;
  width:100%;
  top:50px;
  left:0%;
  display:block;
  text-align:center;
}

.dropdown-content {
  display: none;
  position: absolute;
  width:100%;
  background-color: #fff;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
 
.dropdown:hover .dropdown-content {display: block;}
 
.dropdown-content img {
    width:60%;
}


       img {
        border:0px solid black;
        padding:0px;
   
      }

      .motiv {
        width:18%;
        float:left;
        margin:1%;
      }

      .motiv img {
        width:100%;
        margin-top:20px;
        margin-bottom:20px;
      }

#motivi input[type="radio"]:checked+label{ 
  border:3px solid #db372d;
  padding:0px ;
  margin:0px;
  display:block;
}

#motivi label {
  display:block;
}

#motivi input[type="radio"]{
   display:none;
 }

 #postform input[type="radio"], #postform input[type="text"], textarea{
    margin-left:20px;
    margin-top:15px;
    margin-right:5px;
 }

input[type="submit"]{
    padding:20px;
    background:#fff;
    border:0px solid #fff;
    text-decoration:none;
    color:#000;
    font-family: "Barlow", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size:20px;
}

 .clear {
  clear:both;
 }



@media screen and (max-width: 800px) {
    #sketch1 {
        width:99vw;
        height:50vh;
        float:none;
        text-align:center;
    }

    #sketch2 {
        width:99vw;
        height:50vh;
        float:none;
        text-align:center;
    }

    #sketch3 {
        width:100vw;
        height:50vh;
        float:none
    }

    #left_content, #right_content {
        width:80%;
        float:left; 
        padding: 50px 10% 0px 10%; 
        margin:0px auto; 
        text-align:left;
        font-family: "Barlow", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
     #prethodne_generacije img {
       width:100%;
       height:auto;
     }
}