/*-----------------------------------------------------------------------------------------------------------------
                                                    Color Define
Major Color
1.white       =	#FFFFFF;
2.red         =	#FF0000;
3.green       =	#008000;
4.black       =	#000000;

Minor Color
----Grey----
1.grey       = #808080;
2.darkgrey   = #A9A9A9;
3.silver     = #C0C0C0;
4.lightgray  = #D3D3D3;
5.More-lightgray  = #f2f2f2;
----Red---
1.drakred    = #8B0000;
2.Tomato     = #FF6347;
----Green---
1.forestgreen = #228B22;
2.darkgreen   = #006400;
3.lime        = #00FF00;
4.limegreen   = #32CD32;

--White----
1. WhiteSmoke=#F5F5F5;

/*||------------------------Inital Flex---------------------------------------*/
/*----------------------------------------------------------------------------
|
|                            Initail Flex box
|
------------------------------------------------------------------------------*/
.Web-container {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.Simple-container{
  width:100%;
  height: 100%;
  display: -webkit-flex;
 display: flex;
 -webkit-flex-flow: row wrap;
 flex-flow: row wrap;
 justify-content: center;
 align-content: flex-start;
 background-color: #F2F2F2;

}

.SimpleUh-container{
  width:100%;
  display: -webkit-flex;
 display: flex;
 -webkit-flex-flow: row wrap;
 flex-flow: row wrap;
 justify-content: center;
 align-content: flex-start;
 background-color: #F2F2F2;

}


.header, .navigator, .body, .footer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  /*font-family: 'Open Sans', sans-serif;*/
  font-family: 'Kanit', sans-serif;
  /*background-color: #FFFFFF;
  background-color: #F2F2F2;*/
  /*background-color: #F2F2F2;*/
  
}

/*----------------------------------------------------------------------------
|
|                            Define
|                    header   body   footer
------------------------------------------------------------------------------*/
.header, .navigator, .footer {
  width: 100%;
  justify-content: center;
  align-items: center;
}

.header {
  height: 5%;
}

.navigator {
  height: 10%;
  align-content: center;
  justify-content: center;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.body {
  width: 100%;
 /* height: 75%;*/
  justify-content: center;
  align-content: flex-start;
}

.footer {
  height: 10%;
  /*background-color: #008000;*/
}

/*----------------------------------------------------------------------------
|                                                                             |
|                            Resposive Display                                |
|                                                                             |
------------------------------------------------------------------------------*/


  @media (min-width: 580px) {

  }

  @media (min-width: 900px) {
    .Web-container {
      width: 900px;
      margin-left: auto;
      margin-right: auto;
    }
    .Simple-container{
      width: 50%;
      margin-left: auto;
      margin-right: auto;
     }
     .SimpleUh-container{
      width: 60%;
      margin-left: auto;
      margin-right: auto;
     }

  }

  @media (min-width: 1200px){
      .Web-container {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
      }
      
  }

    @media (min-width: 1500px){
      .Web-container {
        width: 1500px;
        margin-left: auto;
        margin-right: auto;
      }

    }

    @media (min-width: 1800px){
      .Web-container {
        width: 1800px;
        margin-left: auto;
        margin-right: auto;
      }

    }