body {
  margin: 0;
}

/* Style the header */
.PreHeader {
padding: 0px;
}

.Header {
  margin: auto;  /* pozicionira objekt u sredinu ekrana */
  max-width: 1200px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
}

@media screen and (max-width: 600px) {
.HeaderSredina {
  text-align: center;
}
}

/* Style for Services */

@media screen and (max-width: 900px) {
.NeprikazujHeaderStupacNaMobu {
  display: none;
}
}

@media screen and (min-width: 900px) {
.NeprikazujHeaderStupacNaMobu {
  display: inline-block;
}
}


@media screen and (max-width: 600px) {
.HeaderStupacNaMobu {
   text-align: center;
}
}

.HeaderStupac {
  display: inline-block;
  text-align: left;
  width: 295px;  
}


.HeaderStupac a {
  color: Black;
  font-family: Georgia, serif;
  font-size: 16px;
  text-decoration: none;
}

.HeaderStupac img {
  vertical-align: middle;
}

.PreNavigationBar{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index:2;
  background-color: #333;
  padding: 0px;
}

/* Style the top navigation bar */
.NavigationBar{
  margin: auto;
  max-width: 1200px;
  height: 42px;
}

@media screen and (max-width: 860px) {
.NavigationLinksDesktop {
  display: none;
}
}

/* Style the topnav links */
.NavigationLinksDesktop a {
  display: inline-block;
  position: relative;
  float: left;
  color: #f2f2f2;
  font-family: Arial, Helvetica, sans-serif
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
}

/* Change color on hover */
.NavigationLinksDesktop a:hover {
  background-color: #ddd;
  color: Black;
}


@media screen and (min-width: 860px) {
.NavigationLinksMobileMenu {
  display: none;  
}
}

.NavigationLinksMobileMenu img {
  display: inline-block;
  position: relative;
  float: left;	
  border: none;
  cursor: pointer;
}

.NavigationLinksMobileMenu img:hover {
  background-color: #333;
}

@media screen and (min-width: 860px) {
.NavigationLinksMobile {
  display: none;
}
}

.NavigationLinksMobile a {
  color: white;
  font-family: Arial, Helvetica, sans-serif
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
}

.NavigationLanguage {
 
}

.NavigationLanguage a {
  display: inline-block;
  position: relative;
  float: right;	
  color: #f2f2f2;
  font-family: Arial, Helvetica, sans-serif
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
}

.NavigationLanguage a:hover {
  background-color: #ddd;
  color: black;
}

/* SideBar  */
@media screen and (min-width: 860px){
	.PreSideBar{
		display: none;	
	}
}
.SideBar {
  display: none;
  margin: auto;  /* pozicionira objekt u sredinu ekrana */
  border: none;

}

.SideBar a{
  display: block;
  width: 250px;
  z-index:1;
  background-color: #333;
  color: #f2f2f2;
  font-family: Arial, Helvetica, sans-serif
  font-weight: bold;
  font-size: 16px;
  text-align: left;
  padding: 12px 14px;
  text-decoration: none;

}

.SideBar a:hover {
  background-color: #ddd;
  color: black;
}

/* Main  */
.PreMain {
  padding: 0px;	
}

/* Main  */
.Main {
  display: block;
  margin: auto;
  max-width: 1200px;
  min-height: calc(100vh - 180px);; 
}

.PreFooter {
  width: 100%; 
  display: block;
  background-color: LightGray;
  padding: 0px;	
  border-width: 1px;
  border-color: LightGray;;
  border-style: solid;
}


/* Style the footer */
.Footer {
  margin: auto;
  max-width: 1200px;
  height: 60px;
  padding: 0px;
  text-align: center; 
}

.Footer p {
  color: Black;
  font-family: Georgia, serif;
  font-size: 16px;
  text-decoration: none;
}




/* Style for Services */

.Services {
   text-align: center; 
   vertical-align: middle;
   padding-bottom: 20px;
}


.Services a{
  display: inline-block;
  position: relative;
  color: Black;
  font-family: Georgia, serif;
  font-size: 20px;
  width: 340px;
  height: 230px; 
  vertical-align: top;
  padding-top: 20px;
  text-align: center;
  text-decoration: none; 
}

.Services a:hover {
  background-color: LightCyan;
  color: OrangeRed;
}


.OpisIndexNaslov {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px; 
  padding-bottom: 12px; 
  text-align: center;  
  font-family: Georgia, serif;
  font-weight: bold;
  color: Black;
  font-size: 24px;  
}

.OpisIndex {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center; 
  font-family: Georgia, serif; 
  color: Black;
  font-size: 20px; 	
  font-style: normal;
  font-weight: normal; 
}

.OpisIndexLeft {
  max-width: 400px; 
  margin: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: left; 
}


.OpisAbouUsNaslov {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px; 
  padding-bottom: 12px; 
  text-align: center;  
  font-family: Georgia, serif;
  font-weight: bold;
  color: Black;
  font-size: 24px;  
}


.OpisAbouUs {
  padding-left: 10px;
  padding-right: 10px;
  
  font-family: Georgia, serif; 
  color: black;
  font-size: 20px; 	
}


.OpisIndustriesNaslov {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px; 
  padding-bottom: 10px; 
  text-align: left;  
  font-family: Georgia, serif;
  font-weight: bold;
  color: Black;
  font-size: 24px;  
}

.OpisIndustries {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-family: Georgia, serif; 
  color: Black;
  font-size: 20px; 	
  font-style: italic;
  font-weight: normal; 
}

.OpisIndustries h2 {
  display: inline-block;
  margin: 0px;  
  font-family: Georgia, serif; 
  color: Black;
  font-size: 20px; 
  font-style: normal;
  font-weight: bold;
}

.OpisIndustries h3 {
  display: inline-block; 
  margin: 0px;  
  font-family: Georgia, serif; 
  color: Black;
  font-size: 20px; 	
  font-style: italic;
  font-weight: normal;
}

.OpisReferences {
  text-align: center;  
  padding-left: 10px;
  padding-top: 20px;
  font-family: Georgia, serif; 
  color: Black;
  font-size: 24px; 	
  font-style: normal;
  font-weight: bold; 
}


.OpisServiceNaslov h1 {
  margin: 0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px; 
  padding-bottom: 10px; 
  text-align: center;  
  font-family: Georgia, serif;
  font-weight: bold;
  color: Black;
  font-size: 24px;  
}

.OpisService {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-family: Georgia, serif; 
  color: Black;
  font-size: 20px; 	
  font-style: italic;
  font-weight: normal; 
}

.OpisService h2 {
  display: inline-block;
  margin: 0px;  
  font-family: Georgia, serif; 
  color: Black;
  font-size: 20px; 
  font-style: normal;
  font-weight: bold;
}

.OpisService h3 {
  display: inline-block; 
  margin: 0px;  
  font-family: Georgia, serif; 
  color: Black;
  font-size: 20px; 	
  font-style: italic;
  font-weight: normal;
}


/* Style for Contact */
.ContactNaslov {
  padding-top: 20px; 
  padding-bottom: 20px; 
  text-align: center;  
  font-family: Georgia, serif;
  font-weight: bold;
  color: Black;
  font-size: 24px;
}

@media screen and (max-width: 600px){
.Contact {
  text-align: left; 
  max-width: 1200px;  
}
}

@media screen and (min-width: 600px){
.Contact {
  text-align: center; 
  max-width: 1200px;  
}
}


.ContactLijevo {
  display: inline-block;
  position: relative;
  text-align: left; 
  vertical-align: top;   
  width: 300px;  
  height: 220px; 
}

.ContactLijevokontakt  {
  padding-left: 10px;
  padding-top:  5px;
  padding-bottom:  5px;
  font-family: Georgia, serif; 
  color: black;
  font-size: 18px; 
  font-weight: normal;
  text-decoration: none;  
}

.ContactLijevokontakt img {
  vertical-align: middle;
}

.ContactLijevokontakt a {
  font-family: Georgia, serif; 
  color: black;
  font-size: 18px; 
  font-weight: normal;
  text-decoration: none;
}




.ContactDesno {
  display: inline-block;
  position: relative;
  text-align: left; 
  vertical-align: top; 
  max-width: 600px;   
}

.ContactDesnoForma{
  display: inline-block;
  text-align: left;
  vertical-align: top; 
  font-family: Georgia, serif; 
  color: Red;
  font-size: 16px; 
  font-weight: normal;
  width: 280px;
  padding-left: 10px;
  padding-bottom: 15px;
}

.ContactDesnoForma label{
  font-family: Georgia, serif; 
  color: Navy;
  font-size: 16px; 
  font-weight: normal;
  text-decoration: none;
}

.ContactDesnoForma input{
  font-family: Georgia, serif; 
  color: black;
  font-size: 18px; 
  font-weight: normal;
  text-decoration: none;
  width: 96%;
  border: 1px solid #ccc; /* Gray border */
  border-radius: 3px; /* Rounded borders */
}

.ContactDesnoFormaSiroka{
  display: inline-block;
  text-align: left;
  width: 100%;
  font-family: Georgia, serif; 
  color: Red;
  font-size: 16px; 
  font-weight: normal;
  padding-left: 10px;
  padding-bottom: 15px;
}

.ContactDesnoFormaSiroka label{
  font-family: Georgia, serif; 
  color: Navy;
  font-size: 16px; 
  font-weight: normal;
  text-decoration: none;
}

.ContactDesnoFormaSiroka input{
  font-family: Georgia, serif; 
  color: black;
  font-size: 18px; 
  font-weight: normal;
  text-decoration: none;
  width: 94%;
  border: 1px solid #ccc; /* Gray border */
  border-radius: 3px; /* Rounded borders */
}

.ContactDesnoFormaSiroka textarea{
  font-family: Georgia, serif; 
  color: black;
  font-size: 18px; 
  font-weight: normal;
  text-decoration: none;
  width: 95%;
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
  border: 1px solid #ccc; /* Gray border */
  border-radius: 3px; /* Rounded borders */
}

.ContactDesnoButton{
  display: block;
  text-align: left;
  width: 280px;
  font-family: Georgia, serif; 
  color: Navy;
  font-size: 16px; 
  font-weight: normal;
  padding-left: 10px;
  padding-bottom: 15px;
}

.ContactDesnoButton input {
  font-family: Georgia, serif; 
  color: Navy;
  font-size: 18px; 
  font-weight: normal;
  text-decoration: none;
}