/*html { border: 5px solid rgb(202, 200, 200);}*/
* {box-sizing:border-box}
html{max-width:1400px; align-content:center;text-align:center;}
body
{ box-shadow: 1px 3px 10px #000000;}
body
{
border: 4px solid rgb(223, 223, 223);
margin: 0.4vh;
padding-left: 2vh;
padding-right: 2vh;
}

a
{
  text-decoration: none;
  color: black;
}

.mainBody
{
background-color:white;
}

.mainHeader
{
  background-color:white;
  margin:1vh;

  display: grid;
  grid-template-areas:
'logo websiteTitle topContacts';
  gap: 5px;

}

.logo img
{
padding-right: 10px;
padding-left: 10px;
width:200px;
height:auto;
}
.logo p
{
  font-size:small;
}
.logo-sub-list span
{
  border: 1px solid rgba(14, 143, 255, 0.11);
  list-style-type: disc;
  float: left;
}
.websiteTitle
{
display: block;

}

.websiteTitle H1
{
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  padding-top: 0px;
  letter-spacing: 5px;

  color: black;
  text-shadow: 3px 3px 20px rgb(95, 93, 93);
}

.websiteSubTitle
{
  letter-spacing: 3px;
  font-weight: bold;
}
.websiteTitle H2
{
font-family: 'Prompt', sans-serif;
font-weight: 500;
font-size: medium;
letter-spacing: 0px;
padding-left: 40px;
text-shadow: 1px 1px 80px rgb(2, 2, 2);
}
.topContacts
{
text-align:center;



}
.topContacts p, .topContacts a
{
  
  
  text-align:center;
  border: 2px solid rgb(238, 231, 231);
}
.contactsHeading
{
  font-weight: bold;
  
}
.topContacts h2
{
  font-size: medium;
  border: none;
  margin:0px;
  padding:0px;
}
.topContacts h2 span  {font-weight: bold;}


.topContacts a
{
text-decoration:none;
text-align:center;
color: black;
}

.topContacts ul
{
  position: relative;
  float: right;
}
.topContacts ul li
{
  list-style-type:none;

  font-family: 'Russo One', sans-serif;
  box-sizing:border-box;
  margin: 3px;
  padding-top: 2px;

height:35px;
width:200px;
}
/*
.topContacts button
{
font-family: 'Russo One', sans-serif;
color: black;
float:right;
box-sizing:border-box;

border: 1px solid rgb(163, 157, 250);
margin: 3px;
padding-top: 2px;

height:35px;
width:135px;
}
*/
.topContacts ul li:hover
{
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  background-color: #ccfac3ee;
  border: 2px solid black;
}

.navBar
{
display:flex;
flex-direction:inherit;
background-color: whitesmoke;


}

.navBar>.navUl
{ 
  width: 100%;
  list-style-type: none;
  margin: 2px;
  padding: 2px;
  text-align: center;
  font-size:inherit;
}

.navBar>.navUl>li
{
display: inline-block;
margin: 1px;
padding-top: 3px;
border: 2px solid white;
text-align: center;

min-height:30px;
min-width:110px;

font-weight: bold;

box-shadow: 5px 8px 16px 0px rgba(0,0,0,0.2), 0px 6px 20px 0px rgba(0,0,0,0.19);
}

.navBar>.navUl>li:hover {
  box-shadow: 0px 12px 16px 0px rgba(0,0,0,0.24), 0px 17px 50px 0px rgba(0,0,0,0.19);
  background-color: #FFDF79;
}

.firstSection
{
  background-color:rgb(224, 224, 224);
}

.firstSection h1, .firstSection h2
{
  text-align:center;
  text-shadow: 1px 2px 26px #1f1e1d;

}
.firstSection p
{
  text-align: justify;
  font-size: 20px;
  border:2px solid rgb(224, 224, 224);
  PADDING: 15PX; margin: 10px;
}

.middleSection {
  background-color:rgb(224, 224, 224);
}

.middleSection h1, .middleSection h2
{
  text-align:center;
  text-shadow: 1px 2px 26px #1f1e1d;
}
.middleSection p
{
  text-align: justify;
  font-size: 20px;
  border:2px solid rgb(224, 224, 224);
  PADDING: 15PX; margin: 10px;
}
.middleSection span
{
  border: 2px solid rgb(216, 208, 208);
  text-align: center;
  font-weight:600;
}
.middleSection span a
{
  text-decoration: none;
}
.tileSection
{
  background-color:rgb(224, 224, 224);

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
  "tile tile tile"
  "tile tile tile"
  "tile tile tile"
  "tile tile tile";
}


.tile
{
  border: 1px solid black;
  text-align:center;
  padding:10px;
  margin: 5px;
  box-sizing: border-box;
  width:auto;
  height: 90px;

  font-size:inherit;
  font-weight: 550;

  text-shadow: 20px 0.5px 30px;
}

.tileSection a div:hover
{
  background: rgb(247, 144, 233);
  font-size:larger;
  border: 3px solid rgb(33, 59, 38);
  border-radius:20% 20% 2% 2%;
}


.footerContacts {
  background-color:rgb(224, 224, 224);


}

.address
{
  display: grid;
  grid-template-columns: 1fr 1fr;

  text-align: center;
 box-sizing: border-box;
}
.footerContacts

.footerMap{
  background-color:rgb(224, 224, 224);
}
footer{
  background-color:rgba(255, 234, 198, 0.4);
}

.docs
{
border:2px solid rgb(247, 207, 7);
background-color: whitesmoke;
padding: 4px;
margin: 2px;
}
/*
/* Video background 
.firstSection {
    background: #000;
    position: absolute;
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0;
    overflow: hidden;
    box-sizing: border-box; 
}
.firstSection-video-foreground,
.firstSection firstVideo{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    box-sizing: border-box;
    object-fit: cover; 
}

.firstSection-video-foreground{
    padding-bottom: 56.25%;
    box-sizing: border-box; 
}

.firstSection-video-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: blue;
    opacity: 0.5;
    box-sizing: border-box; 
}
/* Video Background End */
/*
.firstSection
{
  background-color:rgba(252, 221, 174, 0.68)
}
*/