* {

  box-sizing: border-box;

   padding: 0;

  margin: 0;



 

  user-select: none;

}



.row::after {

  content: "";

  clear: both;

  display: block;

}



[class*="col-"] {

  float: left;

  padding: 15px;

}



html {

  font-family: "Lucida Sans", sans-serif;

  







  background-repeat:no-repeat;

  background-position:top;

  background-position:center;

 



  

  background-color:#ffffff;

  

  }

.header {

  

  

  color: #000000;

  padding: 1px;

  background-position:center;

}



.menu ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



.menu li {

  padding: 8px;

  margin-bottom: 7px;

   background-color: #663300;

  color: #ffffff;

 /* background-image:url(../images/leftmenu.gif);

  background-repeat:no-repeat;

   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); */

}



 .menu li:hover {

  background-color: #996600;

} 

a {

  text-decoration: none;

  color: #ffffff;

}

.aside {

  background-color: #996600;

  padding: 15px;

  color: #ffffff;

  text-align: center;

  font-size: 14px;

  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}



.footer {

  

  color: #ffffff;

  text-align: center;

  font-size: 12px;

  padding: 15px;



}



/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;
border:thin;
border-color:#CCCCCC;
border-radius: 2em;
  padding: 1em;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

.div480 {

text-align:center

   

	

	

  }

  

  .div481 {

 /*text-align:center */

   

	

	

  }

@media only screen and (max-width: 768px) {

  /* For mobile phones: */

  [class*="col-"] {

    width: 100%;

  }

}





@media only screen and (max-width: 580px) {

       /* styles for mobile browsers smaller than 480px; (iPhone) */

.div481 {

    display: none;

	

	

  }

 

}



@media only screen and (min-width: 581px) {

       /* styles for mobile browsers smaller than 480px; (iPhone) */

.div480 {

    display: none;

	

	

  }

 

}





.colons {

   float:left;

   

	

	

  }



 /*  .row {

display:table;

clear:both;

content:"";

margin:auto;

}

*/





h1 {

  font-size: 50px;

  font-weight: 600;

  background-image: linear-gradient(to left, #553c9a, #b393d3);

  color: transparent;

  background-clip: text;

  -webkit-background-clip: text;

  radial-gradient(ellipse, #553c9a, #ee4b2b);

}



 /*  ot tuk bottom

*/







.container {

  min-height: 100vh;

  width: 100%;

 

  align-items: center;

  background-color: #141414;

  color: white;

}

.content1 {

  display: flex;

  align-items: center;

  height: 100vh;

  width: 100%;

}

.img1 {

  width: 80px;

 

}

.box1 {

  width: 90%;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background-color: #cc6600;

}

.getInfo {

  width: 90%;

  min-height: 200px;

  background-color: rgba(255, 255, 255, 0.2);

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  background-color: black;

  padding: 10px;

  border-radius: 0 10px 10px 10px;

  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1);

  margin-top: 25px;

}

.getInfo1 {

  width: 90%;

 

  background-color: rgba(255, 255, 255, 0.2);

  display: flex;

  

  

  background-color: black;

  padding: 10px;

  border-radius: 0 10px 10px 10px;

  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1);

  margin-top: 25px;

}



getInfo1 h4{

  font-size: 20px;

}

.getInfo1 h2 {

  color: #fba92c;

  font-size: 40px;

}



.getInfo1 p {

  color: white;

}

.getInfo1 p a {

  color: crimson;

}



.getInfo h4 {

  font-size: 20px;

}

.getInfo h2 {

  color: #fba92c;

  font-size: 40px;

}

input[type="email"],

button {

  width: 100%;

  height: 40px;

  border: 2px solid transparent;

  outline: none;

  padding: 0 5px;

}

button {

  background-color: #fba92c;

  font-size: 18px;

  cursor: pointer;

}

button:hover {

  background-color: crimson;

}

.getInfo p {

  color: white;

}

.getInfo p a {

  color: crimson;

}

.box2 {

  width: 70px;

  display: flex;

  align-items: center;

  height: 100%;

  background-color: white;

  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1);

}

.box2 h1 {

  font-size: 90px;

  transform: rotate(-90deg);

  position: relative;

  left: -209px;

  letter-spacing: 5px;

  color: #cccccc;

}

.box3 {

  width: auto;

  height: 100%;

 

}

.links {

  margin-top: 25px;

  margin-bottom: 25px;

  min-width: 90%;

  display: flex;

  justify-content: space-evenly;

  min-height: 200px;

  background-color: black;

  padding: 10px;

  border-radius: 10px 0 10px 10px;

  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1);

}

.link {

  width: 30%;

  display: flex;

  flex-direction: column;

}

.link h3 {

  color: white;

  font-size: 22px;

}

.link a {

  color: #fba92c;

  font-size: 12px;

}

.link a:hover {

  color: crimson;

}

.about {

  display: flex;

  flex-direction: column;

  height: 100%;

  justify-content: center;

}

.main {

  min-height: 300px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 20px;

}

.main h1 {

  font-size: 60px;

  color: white;

}

.main p {

  font-size: 15px;

  color: #fba92c;

}

.getA1

 {

 

}



.bottom {

  display: flex;

  width: 100%;

  align-items: center;

  justify-content: center;

  height: 100px;

}

.media {

  padding: 10px;

  transition: 0.2s linear;

}

.media:hover {

  transform: translateY(-10px);

}

@media only screen and (max-width: 900px) {

  .content1 {

    flex-direction: column;

    min-height: 250vh;

  }

   

  .box2 {

     display: none;

	

  }

 

  .links {

    flex-direction: column;

	align-items: center;

  justify-content: center;

  }

  .link {

    width: 90%;

  }

}