body { 
  margin: 0px;
  /*min-width: 900px;*/
   /*overflow:hidden;*/
  
}

  
.header{
/* font-size: 17px; */
width: 100%;
text-align: left; 
padding: 0px 0px 5px 0px;
background-color: rgba(256, 256, 256, 0.90);
  position: fixed;
  top: 0;
transition: 0.4s;
z-index:1000;
}

h1 { 
font-family: Josefin Sans, sans-serif; 
/* line-height: 100%; */
text-align: left;
 margin: 5px 0px 0px 10px;
color: #000000;
}

h2 { 
font: bold 20pt Josefin Sans, sans-serif;
line-height: 100%;
text-align: center;
padding: 10px 0px 10px 0px; 
color: #5B645E;
margin: 0px;
}

h3 { 
/* width: 50%;
font: 10pt Josefin Sans, sans-serif;
line-height: 100%;
text-align: center;
padding: 5pt 0pt 3pt 0pt; 
color: #5B645E;
margin: 0pt auto;
background-color: #FCCAE4;
border-radius: 4px; */

color: #5B645E;
text-align: center;
font: 10pt/100% Josefin Sans, sans-serif;

}

h4 { 
/*font: italic 20pt Libre Baskerville, serif;*/
font: 20pt/100% Josefin Sans, sans-serif;
line-height: 100%;
text-align: center;
padding: 15px 0px 0px 0px; 
color: #000000;
margin: 0;
}

h5 { 
font: 68pt Bodoni Moda, serif;
line-height: 50%;
text-align: left;
color: #848471;
margin: 0;

}

h6 { 
font: bold 22pt Josefin Sans, sans-serif;

text-align: left;
padding: 20px 0px 0px 0px; 
margin: 0;

}


#blueblock {
width: 100%;
 background: #e6f2ff; 
 /* background: #E4F9EA; */
 text-align: center;
 padding: 0pt 0pt 50pt 0pt;
 margin: 20pt 0pt 0pt 0pt;
}

.vidblock{
/* width: 60%; */
text-align: center;
 /* padding: 0px 0px 20px 0px; */
 margin: 120px 0px 0px 0px; 
}

.vidcontainer {
text-align: center;
  position: relative;
  overflow: hidden;
  /* padding-top: 56.25%; */ /* 16:9 Aspect Ratio */
}
.responsive-iframe {
  border: none;
}

#middleblock {

 background: white;
 padding: 40pt 0pt 0pt 0pt;
 margin: 0pt 20pt 0pt 70pt;

} 


.maintext { 
	
 font: bold 22px Josefin Sans, sans-serif;
	line-height: 30%;
  padding: 10px 0px 30px 0px;
  margin: 0px 20px 0px 0px ;
  /* position: relative; 
  z-index: 1; */

}

#langbox { 
	float: right;
  padding: 15px 18px 0px 0px; 
  margin: 0px;  
}

#socialbox { 
	
	text-align: center;
	margin: 10px auto; 
}

#menubottom { 
	width: 100%;
	font: 8px/100% Helvetica, serif;
	clear: both;
	text-align: left;
	padding: 15px 0px 15px 10px;	
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.carr {
position: relative;
  
}

/* Slides */
.mySlides {
  padding: 80px 120px 15px 120px;
  text-align: center;
  width: 100%;
}

.carr  q {
  font: italic 20px Libre Baskerville, serif;
  max-width: 90%;
  margin: auto;
  color: black;
}

.carr img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
  margin-top: 10px;
  margin-left: -1.5em;
  margin-right: 0.5em;
  vertical-align: middle;
}

.carr span.author {
  font: bold 20px Josefin Sans, sans-serif;
  margin-top:10px;
  color: #777777;
  display: block;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  text-decoration: none;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
  
}

.prev {
  position: absolute;
  left: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
  text-decoration: none;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 20px;
    background: white;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  background-color: #717171;
}
/* ------------ENDOF Slides------------------------------ */


/* Contact Us form */
 .input, .msg  .area {
  background-color: #e6f2ff;
  color: black;
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  border: none;
  margin-bottom: 10px;
  border-radius: 4px;
  resize: none;
  font: bold 16px Josefin Sans, sans-serif;
  outline:none;
  transition: all 0.5s ease;
  
}

.area {
  height:100px;
}

::placeholder {
  color: #5B645E;
  font: 15px Josefin Sans, sans-serif;
}

input[type=submit] {
  background-color: #e6f2ff;
  /* background-color: #FCCAE4; */
  font: bold 10pt Josefin Sans, sans-serif;
  color: black;
  padding: 12px 20px;
  border: none;
  cursor: default;
  float: center;
  border-radius: 5px;
  /* margin: 0 ; */
  margin: 10pt 0pt 0pt 0pt ;
  
}
input[type=submit]:hover{
background-color: #e6f2ff;
/* border: 1px solid grey; */
}

input[type=submit]:disabled{
background-color: #e6f2ff;
border: none;
cursor: default;
}

.container {
  border-radius: 4px;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 40px;
  width: 40%;
  margin: 0pt auto ;
  /* max-width: 600px; */

}

#success {
display: none;
margin: 20px 0px 0px 0px ;
color: #43cc81; 
font: 16px/1% Josefin Sans, sans-serif;
}

#error {
display: none;
margin: 20px 0px 0px 0px ;
color: #e34d69; 
font: 16px/1% Josefin Sans, sans-serif;
}

#empty {
  display: none;
  margin: 20px 0px 0px 0px ;
  color: #ff9800; 
  font: 16px/1% Josefin Sans, sans-serif;
  }


.hide { 
position:absolute; 
top:-1px; 
left:-1px; 
width:1px; 
height:1px; 
} 


#vmbut{
  font: 20px/100% Josefin Sans, sans-serif;
  margin: 20px auto 0px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width:100px;
}

#myBtn {

  float: right;
  z-index: 99;
  font-size: 10px;
  border: none;
  outline: none;
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 0;
  margin: -10px 10px 0px 0px;
}

.button { 
  color: black;
	cursor: pointer;
	text-align: left;
	text-decoration: none;
	font: 10pt/100% Josefin Sans, sans-serif;
	padding: 0px;
	margin: 0px 0px 0px 11px;

}

.button:hover, .langbutton:hover {
cursor: pointer;
color:black;
text-decoration: none;
}

.langbutton {
 
  color: black;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 10pt/100% Josefin Sans, sans-serif;
	padding: 0px;
    margin: 0px 0px 0px -4px;
}

#toTop {
	font-size: 100px;
	padding:10px; 
	text-align:center; 
	color: #2F4F4F;
	text-decoration: none;
	position:fixed;
	bottom:50px;
	left:1200px;
	display:none;
}

#toTopHover {
font-size: 100px;
	padding:10px; 
	text-align:center; 
	color: #2F4F4F;
	text-decoration: none;
	position:fixed;
	bottom:50px;
	left:1200px;
	display:none;
}

#toTop:active, #toTop:focus {
	outline:none;
}

/* Gallery */
#phgallery{
 margin: 120px 0px 0px 0px;
}

.phrow {
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE 10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.phcolumn {
  -ms-flex: 33%; /* IE 10 */
  flex: 33%;
  padding: 0 4px;
}

.phcolumn img, video {
  margin-top: 8px;
  vertical-align: middle;
  border:none;
}


#ishide{
display: none;
}
/* ENDOF */

@media screen and (max-width:800px) {
  h6 { 
    font: bold 20pt Josefin Sans, sans-serif;
  }

  #middleblock {

  background: white;
  padding: 20pt 0pt 0pt 0pt;
  margin: 0pt 0pt 0pt 0pt;

  } 

  .phcolumn {
    -ms-flex: 50%; /* IE 10 */
    flex: 50%;
    padding: 0 4px;
  }
  
  .phcolumn img, video {
    margin-top: 8px;
    vertical-align: middle;
    border:none;
  }
  
  .left, .main, .right{
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }

  h1{
	font-size: 120%;
  }

  .container {
  width: 95%;
  }
  
  .mySlides {
  padding: 20px 0px 20px 0px;
  width: 100%;
  }

   /* #middleblock {
  width: 90%;
  }  */
  
  .vidblock{
  text-align: center;
  padding: 0px 0px 0px 0px;

  }
  
  .responsive-iframe {
  /* position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; */
  width: 90%;
  height: 100%;
  border: none;
  }
  
 

  #tohide{
  display: none;
  }

  #ishide{
  display: inline;
  }
 }