/* -------------------------------------- C - 1 : Default Page set environment --------------------------------------------- */
*{ 
  margin: 0; 
  padding: 0; 
  border: none; 
  text-decoration: none; 
  font-weight: normal; 
  list-style: none; 
  box-sizing: border-box; 
}

/* -------------------------------------- C - 2 : Body --------------------------------------------------- */
body 
{ 
  color: #565656;
  background: #f2f2f2; 
  font-family: 'Times New Roman', Times, serif; 
  text-align: justify; 
  display: flex; 
  flex-direction: column; 
}


/* -------------------------------------- CONTAINER - 1 --------------------------------------------------- */

/* 1.1 :  TOP */
#top { background: #06a; padding: 30px 0; display: flex; align-items: center; justify-content: center; }

  /* 1.1-a TOP - LOGO */
  #top-logo { margin: 0 auto; line-height: 14px; text-align: center;}
  #top-logo h1 { font-size: 36px; color: #FFF;}
  #top-logo h1 span { color: #ddd; font-size: 12px;}

/* 1.2 : INFO */
#info { width: 100%; height: 5vh; display: flex; flex-direction: row; background-color: #EEE; align-items: center; justify-content: center; }
  
  #info p { color: #06c; font-size: 2vh; }
  @-webkit-keyframes blinker { from {opacity: 1.0;} to {opacity: 0.0;} }
  
  .blink
  {
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-direction: alternate;
  }

/* ********************************************************* END ****************************************************** */

/* -------------------------------------- CONTAINER - 2 : MAINBODY --------------------------------------------------- */

/* 2 : MAINBODY */
#mainBody { display: flex; padding: 10px; }

  /* 2.1 : MAINBODY-LEFT */
  #mainBody-left { flex-basis: 30vw; height: auto; background: #EEE; padding: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  #mainBody-left ul { width: 100%; padding: 0; }
  #mainBody-left ul a { color: #666; background: #eee; text-align: center; padding: 15px; margin: 10px; display: block; border: 0.1vh solid #666;}
  #mainBody-left ul a:hover { color: #FFF; background: #333;}

  /* 2.2 : MAINBODY-MAIN */
  #mainBody-main { flex-basis: 70vw; padding: 15px; flex-wrap: wrap; }

    .mainBody-main-A { width: 100%; }

    /* 2.2.1.a : SLIDER */
    .slideshow-container { width: 100%; height: 36vh;}
    .mySlides { width: 100%; height: 36vh;}
    .mySlides img { width: 100%; height: 36vh; }

    /* 2.2.1.b : HERO IMAGE */
    #hero-image-about { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("img/Hero/about.jpg"); height: 225px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; align-items: center; justify-content: center; }
    #hero-image-gallery { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("img/Hero/gallery.jpg"); height: 225px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; align-items: center; justify-content: center; }
    #hero-image-contact { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("img/Hero/contact.jpg"); height: 225px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; align-items: center; justify-content: center; }
    #hero-image-services { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("img/Hero/services.jpg"); height: 225px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; align-items: center; justify-content: center; }
    .hero-text h2 { width: 100%; text-align: center; font-size: 42px; border-bottom: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; }

    /* 2.2.2 : MAP */
    #map { padding-top: 15px;}

    .mainBody-main-B { width: 100%; align-items: center; justify-content: center; }

    /* 2.2.2 : ARTICLE */
    #mainBody-main h1 { color: #06a; border-bottom: 0.1vh solid #ddd; padding: 10px; margin: 10px;}
    #mainBody-main p { padding: 10px; margin: 10px;}
    #mainBody-main p strong { color: #06a;}

    /* 2.2.2 : GALLERY */
    #mainBody-main-gallery { display: flex; align-self: center; flex-wrap: wrap; justify-content: space-around; }
    #mainBody-main-gallery img { width: 26%; height: 200px; float: left; margin: 28px 0 0 2%; border: 5px #CCC solid; cursor: pointer;}
    #gallery-bg { background: #000; position: fixed; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.9; visibility: hidden; z-index: 100;}
    #gallery-img { width: 0 auto; height:  0 auto; position: fixed; border: #FFF 10px solid; top: 0 auto; left: 0 auto; visibility: hidden; z-index: 110;}


    /* 2.2.3 : SERVICE BOX */
    #support { display: flex; flex-wrap: wrap; justify-content: space-around; }
    #support-box { border: 0.1vh solid #ddd; flex-basis: 33%; padding: 20px; max-width: 400px; display: flex; flex-direction: column; margin-bottom: 15px; }
    .support-box-title h1 { font-size: 18px; margin: 5px 0 10px; text-align: center; }
    .support-box-description p { margin: 0 0 10px;}
    .support-box-img {display: flex; align-self: center; }
    .support-box-img img{ width: 100%; max-height: 125px; }
    .support-box-button { align-self:center; margin-top: auto;  }
    .support-box-button a { color: #FFF; background: #666; display: block; padding: 10px 15px;}
    .support-box-button a:hover { background: #FFF; color: #666;}

        /* 2.2.3 : SERVICE BOX */
    #feature { display: flex; flex-wrap: wrap; justify-content: space-around; }
    #feature-box { border: 0.1vh solid #ddd; flex-basis: 20%; padding: 20px; max-width: 200px; display: flex; flex-direction: column; margin-bottom: 15px; }
    .feature-box-title h1 { font-size: 14px; margin: 5px 0 10px; text-align: center; }
    .feature-box-img {display: flex; align-self: center; }
    .feature-box-img img{ width: 75px; max-height: 75px; }

     /* 2.2.3 : SERVICE BOX */
    #service { display: flex; flex-wrap: wrap; justify-content: space-around; }
    #service-box { border: 0.1vh solid #ddd; flex-basis: 30%; padding: 20px; max-width: 400px; display: flex; flex-direction: column; margin-bottom: 15px; }
    .service-box-title h1 { font-size: 18px; margin: 5px 0 10px; text-align: center; }
    .service-box-description p { margin: 0 0 10px;}
    .service-box-img {display: flex; align-self: center; }
    .service-box-img img{ width: 75px; max-height: 75px; }
    .service-box-button { align-self:center; margin-top: auto;  }
    .service-box-button a { color: #FFF; background: #666; display: block; padding: 10px 15px;}
    .service-box-button a:hover { background: #FFF; color: #666;}

        /* 2.2.3 : CONTACT US */
    /* ---------- C - 3.1.2 Application - Form ---------- */

    #contact-us { width: 100%; display: flex; align-items: center; justify-content: center; }
    .application-label { float: left; width: 35%; margin-top: 6px; }
    .application-label label { display: inline-block; padding: 12px 12px 12px 0; font-size: 16px; }

    .application-form { float: left; width: 60%; margin-top: 6px; }
    .application-form input[type="text"], 
                      input[type="password"], 
                      input[type="number"], 
                      input[type="email"], 
                      input[type="date"]
    { width: 100%; padding: 12px; border: #999 0.1vh solid; outline: none; font-family: 'Times New Roman', Times, serif; resize: vertical; color: #666; font-size: 16px; }

    .application-form input[type="reset"],
    .application-form input[type="submit"] 
    { width: 35%; height: 22px; margin: 10px 0; color: #06c; background: #FFF; font-size: 14px; border-radius: 10px; cursor: pointer; border: #06c solid 0.1vh; }

    .application-form input[type="reset"]:hover,
    .application-form input[type="submit"]:hover { color: #FFF; background: #06a; }

    .row::after { content: ""; display: table; clear: both; }

/* ********************************************************* END ****************************************************** */

/* -------------------------------------- CONTAINER - 3 : FOOTER --------------------------------------------------- */

#footer { background: #06a; color: #FFF; padding: 15px; display: flex; align-items: center; justify-content: space-around; }

@media screen and (max-width:850px) {
  #top { flex-direction: column;}
  #box { flex-basis: 900%; }
  #feature-box, #service-box, #support-box { flex-basis: 90%;}

  .mainBody-main-leftBox {float: none; width: 100%; }
  .mainBody-main-rightBox {float: none; width: 100%; }

  
  #mainBody-main-gallery img { width: 35%;}
}

@media screen and (max-width:600px) {
  
  #top-menu ul li a { font-size: 2.5vw; color: #eee; padding: 5px;}

  #mainBody { flex-direction: column; text-align: center; }
  #service-box { flex-direction: column; align-items: center;}
  #feature-box { flex-basis: 90%; display: flex; flex-direction: column; align-content: center; }
  #mainBody-main-gallery img { width: 90%;}
  
  .application-label { width: 100%; height: auto; float: left; } 
  .application-form { width: 90%; float: right; }

  #footer { font-size: 4vw; flex-direction: column;}
}