html, body {
  margin: 0;
  height: 100%;

}

* {
  font-family: "Arial", "Helvetica", "sans-serif";
  box-sizing: border-box;
}

h2, h3, h4 {
  vertical-align: center;
  text-align: left;
  color: #ffffff;
}

p.solid{
	border-style: solid;
	border-color: #000000;
	background-color: #080837;
	padding:4px 4px 4px 4px;
	width:100;
	margin-top: 4px;
	margin-bottom: 4px;
	margin-right: 4px;
	margin-left: 4px;

}



a, H1{
 text-decoration: none;	
 color: white;
 
}



.top-nav {
z-index:99999;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #00BAF0;
  background: linear-gradient(to left, #0a66c2, #000000);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ clor 080837 */
  color: #FFF;
  height: 50px;
  padding: 0px 60px 0px 40px;
  box-shadow: 4px 8px 10px #0000FF;
  
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
}

/*style="background-color:#0a66c2; padding: 5px; border-top: solid 0px; border-color: #0000FF; "*/

.menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
 
}



.menu > li {
  margin: 0 1rem;
  overflow: hidden;
  
}


.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

@media (max-width: 700px) {
  .menu-button-container {
    display: flex;

  }
  .menu {
    position: absolute;
    top: 0;
    margin-top: 50px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
	
  }
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
	
  }
  #menu-toggle:checked ~ .menu li {
    border: 2px solid #000000;
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .menu > li {
    
	display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: white;
    background: linear-gradient(to left, #0a66c2, #000000);
	
	
  }
  .menu > li:not(:last-child) {
    border-bottom: 1x solid #444;
  } 
  
  
}

/* 3 columns */


/* container */
.responsive-three-column-grid {
    display:block;
}

/* columns */
.responsive-three-column-grid > * {
    padding:1rem;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .responsive-three-column-grid {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}



#img {
  border: 4px solid none;
  padding: 10px;
  border-radius: 60px 30px;
}

#img1 {
  border: 4px solid none;
  padding: 10px;
  border-radius: 1000px;
}

#cadre {
  border: 4px solid none;
  padding: 10px;
  border-radius: 30px 60px;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-right: 6px;
  margin-left: 6px;
}

h6, h5, h4, H3, H2, H1 {
  line-height: 1.6;
}

p {
  line-height: 1.6;
}

ul{
  line-height: 1.6;
}

ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: #25262e;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}


/*Footer*/


footer {
  background-color: #25262e;
  color: #ffffff;
  font-size: 16px;
}
footer * {
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  border: none;
  outline: none;
}
.row {
  padding: 2em 1em;
}
.row.primary {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  align-items: stretch;
}
.column {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 1em;
  min-height: 15em;
}

/*

h3 {
  width: 100%;
  text-align: left;
  color: #2a8ded;
  font-size: 1.6em;
  white-space: nowrap;
}

ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}


li:not(:first-child) {
  margin-top: 0.8em;
}
ul li a {
  color: #ffffff;
  text-decoration: none;
}
ul li a:hover {
  color: #2a8ded;
}

*/

.about p {
  text-align: justify;
  line-height: 2;
  margin: 0;
}



input,

button {
  font-size: 1em;
  padding: 1em;
  width: 100%;
  border-radius: 5px;
  margin-bottom: 5px;
}
button{
  background-color: #2a8ded;
  color: #ffffff;
}


div.social {
  display: flex;
  justify-content: space-around;
  font-size: 2.4em;
  flex-direction: row;
  margin-top: 0.5em;
}
.social i:hover {
  color: #2a8ded;
}
.row.secondary {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.row.secondary i {
  font-size: 1.8em;
  color: #2a8ded;
}
.row.secondary div {
  padding: 1em 0;
  width: 100%;
}
.row.secondary div:hover {
  background-color: #121315;
}
.copyright {
  padding: 0.3em 1em;
  background-color: #121315;
}
.copyright p {
  font-size: 0.9em;
  text-align: center;
}


@media screen and (max-width: 850px) {
  .row.primary {
    grid-template-columns: 1fr;
  }
  .row.secondary {
    flex-direction: column;
  }
}


		.hero-image {
			  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photos/img-03.jpg");
			  height: 90%;
			  background-position: center;
			  background-repeat: no-repeat;
			  background-size: cover;
			  position: relative;
			}

			.hero-text {
			  text-align: center;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			  color: white;
			}

			/*.hero-text button {
			  border: none;
			  outline: 0;
			  display: inline-block;
			  padding: 10px 25px;
			  color: black;
			  background-color: #080837;
			  text-align: center;
			  cursor: pointer;
			  color: gold;
			}

			.hero-text button:hover {
			  background-color: #000000;
			  color: gold;
			}*/
			
			H2 {
			border-left: 6px solid red;
			}


	

.google-map {
     padding-bottom: 50%;
     position: relative;
}

.google-map iframe {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
}