@import url('https://fonts.googleapis.com/css?family=Thasadith');
@import url('https://fonts.googleapis.com/css?family=Lato');

*{
 margin:0;
 padding:0;
}

.header{
  width:100%;
  height:auto;
}

.header img{
  width:12%;
  height:auto;
  margin-top:25px;
  margin-left:44%;
  margin-bottom:0%;
  animation:appear 2s;
}

.header h1{
  text-align:center;
  font-size:11px;
  color:#808080;
}

.lang{
  width:95%;
  height:15px;
}

.lang img{
  width:auto;
  float:right;
  height:100%;
  padding-left:10px;
  padding-right:10px;
}

.start{
  background:linear-gradient(rgba(0,0,0,0.5) , rgba(0,0,0,0.5)),url('../images/background.jpg');
  background-position:center;
  background-attachment:fixed;
  background-size:100%;
}

.navigation{
  margin-left:25%;
  background:transparent;
  width:50%;
  height:auto;
}

.navigation a{
  color:#fff;
  font-size:18px;
  margin-left:14%;
  line-height:3.0;
  text-transform:capitalize;
  text-decoration:none;
  font-weight: lighter;
  padding-bottom:5px;
  font-family: 'Thasadith', sans-serif;
  border-bottom:1px solid transparent;
}

.navigation , .dropdown{
  display:inline-block;
}

.dropdown{
  margin-left:14%;
  position: relative;
  display: inline-block;
}

.dropdown-content{
  display: none;
  position: absolute;
  border-radius:5px;
  background:rgba(0,0,0,0.5);
}

.dropdown-content a{
  float: none;
  color:#fff;
  width:100px;
  font-size:12px;
  text-align:left;
  line-height:3.0;
  display:block;
  font-weight:bold;
  font-family: 'Thasadith', sans-serif;
}

.dropdown:hover .dropdown-content{
  display: block;
}

.navigation a:hover{
  transition:0.3s;
  text-shadow: #808080 2px 2px;
}

.content{
  width:60%;
  height:auto;
  margin-top:5%;
  margin-left:20%;
}

.content h1 , .content h2{
  font-family: 'Thasadith', sans-serif;
}

.content h1 span{
  color:#808080;
  font-size:15px;
}

.content h1{
  font-size:32px;
  text-align:center;
}

.content h2{
  font-size:18px;
  line-height:1.6;
  text-align:justify;
}

.content button{
  font-family: 'Thasadith', sans-serif;
  border:2px solid #f0f0f0;
  background:transparent;
  font-size:15px;
  margin-top:1%;
  margin-left:45%;
  text-align:center;
  padding:2px;
  width:10%;
}

.content a{
  text-decoration:none;
}

.content button:hover{
  cursor:pointer;
}

.content img{
  margin-top:1%;
  margin-bottom:5%;
  margin-left:40%;
  height:auto;
  width:20%;
}

.collage{
  height:auto;
  margin-top:10%;
  margin-left:10%;
  width:80%;
}

.collage div{
  width:20%;
  background:linear-gradient(rgba(0,0,0,0.3) , rgba(0,0,0,0.3)),url('../images/collage.jpg');
  background-attachment:fixed;
  background-position:left;
  display:inline-block;
  margin-bottom:10%;
  margin-right:5px;
  height:25%;
}

.collage div:nth-child(1){
  margin-left:20%;
}

.devloped{
  width:100%;
  height:auto;
  bottom:0;
  position:fixed;
  text-align:center;
  background:transparent;
}

.devloped a{
  color:#000;
  font-size:12px;
  text-decoration:none;
  font-weight:lighter;
  text-transform: lowercase;
  font-family: 'Alegreya Sans SC', sans-serif;
}

.devloped a , .devloped span{
  display:inline;
}

.devloped span{
  color:#808080;
  font-weight:bold;
}

@keyframes appear{
  0%{
    filter:blur(10px);
  }
  100%{
    filter:blur(0px);
  }
}

.desktop-content{
  display:initial;
}

.mobile-content{
  display:none;
}

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

.desktop-content{
  display:none;
}

.mobile-content{
  display:initial;
}

.header{
  background:linear-gradient(rgba(0,0,0,0.5) , rgba(0,0,0,0.5)),url('../images/background.jpg');
  background-position:center;
  background-attachment:fixed;
  background-size:100%;
  width:100%;
  height:auto;
}

.header img{
  width:50%;
  margin-left:25%;
  margin-top:5%;
  margin-bottom:1%;
}

.mobile-content label{
  line-height:2.5;
  float:right;
  margin-right:5%;
  color:#000;
  font-size:35px;
}

.mobile-content input{
  display:none;
}

.mobile-content label , .mn{
  display:inline-block;
}

.mn{
  display:none;
  width:100%;
  height:auto;
  background:transparent;
  border-bottom:1px solid #000;
}

.mn a{
  color:#000;
  display:block;
  text-decoration:none;
  margin-left:10%;
  font-size:18px;
  font-weight:lighter;
  font-family: 'Thasadith', sans-serif;
  text-shadow:1px 1px #fff;
  line-height:3.0;
}

.mn img{
  width:10%;
  height:auto;
  margin-left:0%;
  padding-top:10px;
}

.content{
  width:90%;
  margin-left:5%;
  margin-top:35%;
}

.content h2{
  font-size:14px;
  line-height:2.0;
}

.content img{
  margin-left:15%;
  width:70%;
}

.collage div{
  margin-bottom:0%;
}

 }

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

   .collage_left p, .collage_center p, .collage_right p{
     line-height:5.0;
     font-size:17px;
   }

 }