*{
     box-sizing: border-box;
 }
html, 
  body{
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-family: 'Fira Sans', sans-serif;
    background-color: #e6e6e6;
  }
  .page-wrapper{
    max-width: 1080px;
    margin: auto;
  }
.facebookplugin{
     box-sizing: border-box;
     display: block;
}
body > div.page-wrapper > h3:nth-child(1){ /*Naslov*/
padding-left: 15px;
padding-right: 15px;
color: #155eb1;
font-size: 21px;
font-weight: 500;
text-align: justify;
}
#contactinfo > h3{ /*Kontakt informacii*/
     color: #155eb1;
     padding-left: 15px;
     padding-right: 15px;
     text-align: center;
}
#contactinfo   > span{  /*broevi*/
     color: #155eb1; 
     background-color:  #DBDFE3;
     display: block;
     font-size: 1.2em; 
     text-align: center;
}
#contactinfo   > span a{
     text-decoration: none;
     color: #155eb1;
}
#contactinfo2 > h3{
     color: #155eb1;
     text-align: center;
}
#contactinfo2 > ul{
     background-color:#DBDFE3;
     padding-left: 0px;
}
#contactinfo2 > ul > li{
     list-style: none;
     padding-top: 6px;
     padding-bottom: 6px;
     text-align: center;
}
body > div.page-wrapper > div.contactinfo3 h3{
     color: #155eb1;
     text-align: center;
}
body > div.page-wrapper > div.contactinfo3 > p{
     background-color: #DBDFE3;
     padding-top: 20px;
     padding-bottom: 20px;
     text-align: center;
     margin-top: -10px;
     margin-bottom: 30px;
}

@media screen and (min-width: 1080px){  /*DESKTOP*/
     #contactinfo > h3{
         padding-left: 50px;
     }
     body > div.page-wrapper > div.contactinfo3{
         width: 540px;
         height: 235px;
         float: left;
         margin-top: 25px;
     } 
     #contactinfo2{
          width: 50%;
          float: right;
          padding-left: 7%;
     }
     #contactinfo  > span{  /*broevi*/
         padding-bottom: 12px;
         padding-top: 12px;
     }
     #contactinfo {
          width: 50%;
          float: left;
     }
     .facebookplugin{                   /*Facebook pluign*/
         width: 464.400px;
         float: right;
         background-color: #DBDFE3;
         padding-left: 63px;
     }
     #gmap_canvas{
          width:880px;
          height:400px;
          box-sizing: border-box;
          float: left;
          display: block;
          padding-right: 100px;
          background-color: #DBDFE3;
          padding-left: 100px;
          margin-left: -100px;
     }
     .gmap_canvas{
          overflow:hidden;
          background:none!important;
          height:400px;
          width: 880px;
     }
     body > div.page-wrapper > div.gmap_canvas{
          width: auto;
          padding-right: 200px;
          padding-left: 200px;
          margin-top: 550px;
     }
     body > div.page-wrapper > div.contactinfo3 > p:nth-child(4){
          margin-bottom: 0px;
     }
}

@media only screen and (max-width: 599px){   /*Mobile*/
     #contactinfo  > span{  /*broevi*/
          padding-bottom: 12px;
          padding-top: 12px;
          text-align: center;  
          overflow: hidden;
     }
     #contactinfo > h3{
          text-align: center;
     }
     #contactinfo2 > h3{
          text-align: center;
          margin-bottom: -7px;
          overflow: hidden;
     }
     body > div.page-wrapper > div.facebookplugin{
          margin: auto;
          width: 256px;
          overflow: hidden;
     }
     body > div.page-wrapper > div.gmap_canvas{
          margin: auto;
          width: 310px;
          overflow: hidden;
     }
}