/* CSS Document */

@charset "UTF-8";


* {
  margin: 0;
  padding: 0;
}


body {
	margin: 0;
	font-family: Geneva, sans-serif;
	
}

.page {
  display: flex;
  flex-wrap: wrap;
}

.section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.header {
    height: 100px;
/*	background-color: black;*/
	color: white;
	padding: 8px;
	font-size: 50px;
}

.headertitleimg {

	width: 120px;
	
}


.headermenuicon {
	
	width: 100%;
}

.headermenuimg {
	float:right;

}

.homeintro {

	text-align: left;
	width: 100%;
	padding: 8px;
	margin: 15px;
	font-size: 1.2em;
}

.homeintrolien {

	text-align: left;
	width: 100%;
	padding: 8px;
	margin-top: 0px;
	margin-bottom: 15px;
	margin-left: 35px;
	font-size: 1.2em;
	font-weight: bold;
	color: #00c800;
}

.dicompta_title {

	text-align: left;
	width: 100%;
	padding: 8px;
	margin: 15px;
	font-size: 1.2em;
	font-weight: bold;

}

.dicompta_desc {

	text-align: left;
	width: 100%;
	padding: 8px;
	margin: 15px;
	font-size: 1.2em;

}
.dicompta_desc_list {

	text-align: left;
	width: 100%;
	padding: 8px;
	margin: 15px;
	margin-top: 0px;
	margin-left: 45px;
	font-size: 1.2em;

}

.contact_coord {

	text-align: left;
margin-left: 45px;
}

.contactmapimg { width: 100%; }

a {

	text-decoration: none;
	color: #00c800;
}


.allButFooter {
    min-height: calc(100vh - 210px); /* footer height + 10px */
}

.footer {
	
	
	height: 200px;
	margin: 10px 0px 0px 0px;
	color:white;
	background-color: black;
	
}


/*begin sidenav*/

.sidenav {
  font-family: Geneva, sans-serif;
}



/*end sidenav*/


/*begin modal*/
.Modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/*general*/
.Modalcontent {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

.Modalheader1 {
  padding: 2px 16px;
  background-color: #000000;
  color: white;
  height: 50px;
}

.Modaltitle1 {
  height: 100px;  width: 100%;
  text-align: center;
  font-size: 20px;
  padding: 12px;
}

.Modalbody1 {
  text-align: left;
  font-size: 20px;
  padding: 12px;
  margin:6px;

/*
  display: flex;
  flex-wrap: wrap;*/
}


.Modalbodybut1 {
  height: 30px;  width: 100%;
  border: 1px solid;
  border-radius: 10px;
  padding: 8px;
  padding-top: 10px;
  margin: 3px;
  text-align: center;
  font-size: 24px;
  background-color:white;

}

a.Modalclose1 {
  text-decoration: none;
  color: grey;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

a.Modalclose1 :hover,
a.Modalclose1 :focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

/*end modal*/



/* Mobile Styles */
@media screen and (max-width: 450px) {


     /* The side navigation menu */
    .sidenav {
      height: 100%; /* 100% Full-height */
      width: 0; /* 0 width - change this with JavaScript */
      position: fixed; /* Stay in place */
      z-index: 1; /* Stay on top */
      top: 0; /* Stay at the top */
      left: 0;
      background-color: black; /* Black*/
      overflow-x: hidden; /* Disable horizontal scroll */
      padding-top: 60px; /* Place content 60px from the top */
      transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }

    /* The navigation menu links */
    .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #f2f2f2;
      display: block;
      transition: 0.3s;
    }

    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
      color: #818181;
    }

    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }

  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}

  .navloggedas {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 14px;
      color: black;
/*      color: #818181;*/
      display: block;
      transition: 0.3s;
  }

	table {
		font-size: 12px;

	}

	
	img.Modalbigpic { }
	/*img.Modalbigpic { width: auto; height: auto; }*/

}


/* Tablet Styles */
@media only screen and (min-width: 451px) and (max-width: 960px) {


     /* The side navigation menu */
    .sidenav {
      height: 100%; /* 100% Full-height */
      width: 0; /* 0 width - change this with JavaScript */
      position: fixed; /* Stay in place */
      z-index: 1; /* Stay on top */
      top: 0; /* Stay at the top */
      left: 0;
      background-color: black; /* Black*/
      overflow-x: hidden; /* Disable horizontal scroll */
      padding-top: 60px; /* Place content 60px from the top */
      transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }

    /* The navigation menu links */
    .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #f2f2f2;
      display: block;
      transition: 0.3s;
    }

    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
      color: #818181;
    }

    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }

  .navloggedas {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 14px;
      color: black;
      /*color: #818181;*/
      display: block;
      transition: 0.3s;
  }
  
	  
	.contentsub {

		width: 90%;
		max-height:300px;
	}

	.contentimg {

		width: 300px;
		margin-top: 30px;
		margin-bottom: 10px;
		padding:10px;
	}
  
  
	
	
	img.Modalbigpic { max-width: 100%; }
}

/* Desktop Styles */
/*@media only screen and (min-width: 961px) {*/
@media only screen and (min-width: 961px) and (max-width: 1430px) {


    .sidenav {

      width: 100%; /* 0 width - change this with JavaScript */

      background-color: black; /* Black*/
      /*overflow-x: hidden;  Disable horizontal scroll */
      overflow: hidden;

    }

    .sidenav a{
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      text-decoration: none;
      padding: 8px 8px 8px 32px;
      font-size: 25px;
      
    }
    /* hide cross */
    .sidenav a:first-child {display: none;}
    /*.sidenav a:last-child {float: right;padding-right: 32px;}*/
    .sidenav a:nth-last-child(-n+2) {float: right; padding-right: 32px;}
	

    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
      color: #818181;
    }

    .navloggedas {
      float: left;
      color: black;
      /*color: #f2f2f2;*/
      text-align: center;
      text-decoration: none;
      padding: 8px 8px 8px 32px;
      font-size: 14px;
      display: block;
    }


    
    .headermenuicon {display: none;}
    
    
	.headertitleimg { width: 8%;}
	
	.contactmapimg { width: 50%; }

    .ModalbodySub {
      width: 46%;
    }

    .ModalbodySub {
      width: 46%;
    }


	.contentsub {

		width: 90%;
		max-height:300px;
	}

	.contentimg {

		width: 300px;
		margin-top: 30px;
		margin-bottom: 10px;
		padding:10px;
	}


	img.Modalbigpic { max-width: 100%; }
}

/* Big Desktop Styles */
@media only screen and (min-width: 1431px) {

    .sidenav {

      width: 100%; /* 0 width - change this with JavaScript */

      background-color: black; /* Black*/
      /*overflow-x: hidden;  Disable horizontal scroll */
      overflow: hidden;

    }

    .sidenav a{
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      text-decoration: none;
      padding: 8px 8px 8px 32px;
      font-size: 25px;
      
    }
    /* hide cross */
    .sidenav a:first-child {display: none;}
    /*.sidenav a:last-child {float: right;padding-right: 32px;}*/
    .sidenav a:nth-last-child(-n+2) {float: right; padding-right: 32px;}
	

    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
      color: #818181;
    }

    .navloggedas {
      float: left;
      color: black;
      /*color: #f2f2f2;*/
      text-align: center;
      text-decoration: none;
      padding: 8px 8px 8px 32px;
      font-size: 14px;
      display: block;
    }


    
    .headermenuicon {display: none;}
    
    
	.headertitleimg { width: 110px;}
	
	.contactmapimg { width: 50%; }

    .ModalbodySub {
      width: 46%;
    }

    .ModalbodySub {
      width: 46%;
    }


	.contentsub {

		width: 90%;
		max-height:300px;
	}

	.contentimg {

		width: 300px;
		margin-top: 30px;
		margin-bottom: 10px;
		padding:10px;
	}
	
	.sectionpaintitem {
		display: flex;
		justify-content: center;
	}
	.paintitempicspart {
		width: 60%;
		/*margin:10px;*/
	}
	.paintitemblablapart {
		width: 40%;
		/*margin:10px;*/
	}

	img.Modalbigpic { max-width: 100%; }
}