/**
Template Name: Thai Parliamentary Museum Website Template
Version: 1.0
*/

/*==================================
=            Typography            =
==================================*/

@import url(http://fonts.googleapis.com/css?family=Bai+Jamjuree:400);

body{
	background-color: #fff;
	font-size: 14px;
	color: #424242;
	font-family: 'Bai Jamjuree', sans-serif;
	font-weight: 400;
}
::selection{
	background: rgba(89,111,255,.8);
	color: #fff;
}	
::-moz-selection{
	background: rgba(89,111,255,.8);
	color: #fff;
}	
ul, ol{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
}
ul.list-inline{
	margin-left: 0;
}
h1,h2,h3,h4,h5,h6,p{
	margin: 0;
	color: #FFF;
	text-align: left;
}
p{
	font-size: 17px;
	color: #CCCCCC;
	line-height: 30px;
}
a{
	color: #999999;
	-webkit-transition: background .3s, color .3s;
	transition: background .3s, color .3s;
}
a:hover{
	outline: none;
	text-decoration: none;
	color: #000;
}
a:focus{
	outline: none;
	outline-offset: 0;
}
.btn{
	border-radius: 0;
}
.btn:focus{
	outline: none;
}
/*-----  End of Typography  ------*/


/*==================================
=           page bottom           =
==================================*/

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 3px 10px;
    text-decoration: none;
    border: 1px solid #ddd;
    font-size: 18px;
}
ul.pagination li a.active {
    background-color: #eee;
    color: black;
    border: 1px solid #ddd;
}
ul.pagination li a:hover:not(.active) {background-color: #F0394C;}

/*-----  End of page bottom   ------*/


/*==================================
=           page bottom2           =
==================================*/

ul.pagination2 {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination2 li {display: inline;}
ul.pagination2 li a {
    color: white;
    float: left;
    padding: 3px 10px;
    text-decoration: none;
    border: 1px solid #ddd;
    font-size: 20px;
}
ul.pagination2 li a.active {
    background-color: #eee;
    color: black;
    border: 1px solid #ddd;
}
ul.pagination2 li a:hover:not(.active) {background-color: #ffcc00;}

/*-----  End of page bottom   ------*/


/*==================================
=           download bottom           =
==================================*/

ul.download {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.download li {display: inline;}
ul.download li a {
    color: #000099;
    float: left;
    padding: 3px 10px;
    text-decoration: none;
    border: 1px solid #ddd;
    font-size: 20px;
}
ul.download li a.active {
    background-color: #eee;
    color: black;
    border: 1px solid #ddd;
}
ul.download li a:hover:not(.active) {background-color: #00ccFF;}

/*-----  End of download bottom    ------*/


/*===================================
=       	 	picture  	 	     =
===================================*/
#picture{
	background: #FFFFFF;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}
.picture-item{
	margin-top: 5px;
	padding: 10px;
}
.picture-item .content .icon{
	-webkit-transform: translate(-50%, -50%) scale(0);
	transform: translate(-50%, -50%), scale(0);
	font-size: 34px;
	-webkit-transition: all .3s;
	transition: all .3s;	
}
.picture-item .content:hover figcaption{
	opacity: 1;
}
.picture-item .content:hover figcaption .icon{
	-webkit-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
}
/*-----  End of picture   ------*/


/*===================================
=            content       =
===================================*/
#content {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center 30%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  min-height: 1000px;
  position: relative;
}
.content .title1{
	font-size: 36px;
	text-transform: uppercase;
	line-height: 60px;
	color: #996600;
	margin-bottom: 10px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.content .title2{
	font-size: 24px;
	text-transform: uppercase;
	color: #996600;
	line-height: 48px;
	margin-bottom: 10px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.content .title3{
	font-size: 28px;
	text-transform: uppercase;
	color: #996600;
	line-height: 48px;
	margin-bottom: 10px;
}
.content .title4{
	font-size: 22px;
	text-transform: uppercase;
	color: #000000;
	line-height: 48px;
	margin-bottom: 10px;
}
.content .title5{
	font-size: 24px;
	text-transform: uppercase;
	color: #000000;
	line-height: 48px;
	margin-bottom: 10px;
}
.each-event .info{
	font-size: 14px;
	color: #000000;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.content .info1{
	font-size: 20px;
	color: #000000;
	line-height: 36px;
	margin-bottom: 30px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.content .info2{
	font-size: 20px;
	line-height: 36px;
	color: #009966;
	margin-bottom: 30px;
}
.content .info3{
	font-size: 20px;
	color: #000099;
	margin-bottom: 20px;
}
.content .info4{
	font-size: 20px;
	color: #ffffff;
	margin-bottom: 20px;
}
.content .caption{
	font-size: 16px;
	color: #000000;
	margin-bottom: 10px;
}
.blockquote{
	color: #F0394C;
}
/*-----  End of content  ------*/


/*==================================
=            	zoom          	  =
==================================*/
.zoom-within-container {
  height: auto; 
  overflow: hidden; 
}
.zoom-within-container img {
  transition: transform .5s ease;
}
.zoom-within-container:hover img {
  transform: scale(1.1);
}
.zoom-without-container {
  transition: transform .3s; 
  margin: 15px auto;
}
.zoom-without-container img{
	width:100%;
	height:auto;	
}
.zoom-without-container:hover {
  transform: scale(1.03);
}

/*-----  End of zoom  ------*/


/*==================================
=            shortcodes            =
==================================*/

.mtb10{margin-bottom: 10px;}
.mtb20{margin-bottom: 20px;}
.mtb30{margin-bottom: 30px;}
.mtb40{margin-bottom: 40px;}
.mtb50{margin-bottom: 50px;}
.mtb60{margin-bottom: 60px;}
.mtb70{margin-bottom: 70px;}
.mtb80{margin-bottom: 80px;}
.mtb90{margin-bottom: 90px;}
.mtb100{margin-bottom: 100px;}

.ptb10{padding-bottom: 10px;}
.ptb20{padding-bottom: 20px;}
.ptb30{padding-bottom: 30px;}
.ptb40{padding-bottom: 40px;}
.ptb50{padding-bottom: 50px;}
.ptb60{padding-bottom: 60px;}
.ptb70{padding-bottom: 70px;}
.ptb80{padding-bottom: 80px;}
.ptb90{padding-bottom: 90px;}
.ptb100{padding-bottom: 100px;}

.ptt10{padding-top: 10px;}
.ptt20{padding-top: 20px;}
.ptt30{padding-top: 30px;}
.ptt40{padding-top: 40px;}
.ptt50{padding-top: 50px;}
.ptt60{padding-top: 60px;}
.ptt70{padding-top: 70px;}
.ptt80{padding-top: 80px;}
.ptt90{padding-top: 90px;}
.ptt100{padding-top: 100px;}

.img-100p{
	width: 100%;
}
.overflow{
	overflow: hidden;
}
.no-padding{
	padding:0
}
.no-margin{
	margin:0
}
.section-title{
	font-size: 30px;
	text-transform: uppercase;
	margin-top: 100px;
	margin-bottom: 50px;
	text-align: center;
	color: #F0394C;
}
.section-info{
	margin-bottom: 60px;
	text-align: center;
	font-size: 16px;
	color: #FFFFFF;
}
.horizontal-center{
	position: absolute;
	left: 50%;
	-webkit-transform: translateZ(-50%);
	transform: translateZ(-50%);	
}
.vertical-center{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.horizontal-vertical-center{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);	
}
.overflow-content-full{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*-----  End of shortcodes  ------*/


/*============================
=         wrapper            =
============================*/
.blog-list .main-nav {
	background: rgba(89,111,255,.8);
	height: 80px;
}
.blog-list .logo-left,
.blog-list .menu-button{
	top: 20px !important;
}
/*-----  End of wrapper  ------*/


/*============================
=            menu            =
============================*/
.main-nav{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	z-index: 999;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
.main-nav-change .logo-left,
.main-nav-change .menu-button{
	top: 20px !important;
}
.main-nav-change{
	background: rgba(240, 57, 76, 0.95);#F0394C;
	height: 90px;
}
.logo-left{
	position: absolute;
	top: 20px;
	left: 70px;
	z-index: 1;
	-webkit-transition: top .5s ease-in-out;
	transition: top .5s ease-in-out;
}
.menu-button{
	position: fixed;
	left: 90%;
	text-align: right;
	top: 50px;
	z-index: 16;
	width: 50px;
	-webkit-transition: top .5s ease-in-out, left .5s;
	transition: top .5s ease-in-out, left .5s;
}
.menu-active {
  left: 75%;
}
.menu-button button {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: none;
  color: #fff;
  font-size: 30px;
}
.menu-button button:focus{
	outline: none;
}
.nav-menu {
  background: #171717 none repeat scroll 0 0;
  padding-top: 50px;
}
.nav-menu li{
	display: block;
	padding: 0;
	margin: 0;
	font-family: Montserrat, sans-serif;
}
.nav-menu a {
  color: #c4c4c4;
  border: none;
  padding: 15px 25px;
  text-transform:uppercase;
}
.nav-menu a:hover,
.nav-menu .current a{
	color: #FFFFFF;
	background-color: #F0394C;
	text-decoration: none;
}
/*-----  End of menu  ------*/


/*===================================
=            Menu Tab           =
===================================*/
#menu-article {
  width: 100%;
  height: 100%;
  background-image: url(../img/menu.jpg);
  background-position:center;
  background-size: auto;
  min-height: 300px;
}
#menu-constitution {
  width: 100%;
  height: 100%;
  background-image: url(../img/menu-constitution.jpg);
  background-position:center;
  background-size: auto;
  min-height: 300px;
}
#menu-object {
	width: 100%;
	height: 100%;
  background-image: url(../img/menu-object.jpg);
  background-repeat:no-repeat;
  background-size: auto;
  background-position:center;
  min-height: 300px;
}
#menu-record {
  width: 100%;
  height: 100%;
  background-image: url(../img/menu-record.jpg);
  background-position:center;
  background-size: auto;
  min-height: 300px;
}
#menu-souvenir {
  width: 100%;
  height: 100%;
  background-image: url(../img/menu-souvenir.jpg);
  background-repeat:no-repeat;
  background-size: auto;
  background-position:center;
  min-height: 300px;
}
#menu-learning {
  width: 100%;
  
  background-image: url(../img/menu-learning.gif);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  min-height: 200px;
}
/*-----  End of Menu Tab   ------*/


/*===================================
=            home-slider            =
===================================*/
#home-slider {
  overflow: hidden;
  position: relative;
}
#home-slider .item{
	
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover ;
	position: relative;
}
#home-slider .carousel-indicators .active{
	height: 10px;
}
#home-slider .carousel-indicators li{
	width: 45px;
	height: 8px;
	border: 1px solid #fff;
}
.navbar-right li a {
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  padding-top: 30px;
  padding-bottom: 30px;
}
.navbar-right li.active a {
  background-color: rgba(0,0,0,.2);
}
.navbar-brand h1 {
  margin-top: 5px;
}
/*-----  End of home-slider  ------*/


/*================================
=            news            =
================================*/
#news{
	margin-top: 10px;
	padding-top: 0px;
	margin-bottom: 40px;
}
.each-news .content{
	background: #cccccc;
	padding: 40px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.each-news .content .icon{
	font-size: 40px;
	color: #F0394C;
	margin-bottom: 10px;
	line-height: 100%;
}
.each-news .content .title{
	font-size: 20px;
	color: #000066;
	margin-bottom: 0px;
	text-transform: uppercase;	
}
.each-news .content .info{
	font-size: 14px;
	color: #000000;
	margin-bottom: 0px;
	text-transform: uppercase;	
}
.each-news .content:hover{
	background-color: #F0394C; 
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
}
.each-news .content:hover .icon,
.each-news .content:hover .title,
.each-news .content:hover .info{
	color: #FFFFFF;
}
/*-----  End of news  ------*/


/*=================================
=             article             =
=================================*/
#article{
	background: url(../img/bg/04.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}
#article .color-overlay{
	width: 100%;
	height: 100%;
	background: rgba(16,19,38,.8);
}
#article .section-title{
	color: #fff;
	margin-bottom: 50px;
}
#article .info-part{
	padding-right: 40px;
}
#article .each-courses{
	margin-bottom: 40px;
}
.each-article .title{
	font-size: 24px;
	text-transform: uppercase;
	line-height: 48px;
	color: #ffcc00;
	margin-bottom: 10px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.each-article .info{
	font-size: 18px;
	line-height: 32px;
	margin-bottom: 30px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.each-article .info1{
	font-size: 18px;
	line-height: 36px;
	margin-bottom: 30px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.each-article:hover{
	cursor: pointer;
}
.each-article:hover .title{
	color: #FFCC00;
	font-weight: bold;
}
.each-article:hover .info{
	color: #FFFFFF;
}
#each-article .content-part{
	position: relative;
	height: 100%;
	margin-left: 30px;
}
/*-----  End of article   ------*/


/*===================================
=        object        =
===================================*/
#object{
	background: #FFFFFF;
	-webkit-background-size: cover;
	background-size: cover;
}
#object-menu{
	background: #cccccc;
	-webkit-background-size: cover;
	background-size: cover;
}
.object-filter{
	margin-top: 20px;
}
.object-filter li .active{
	color: #F0394C;
	text-decoration: none;
}
.object-filter li a:hover{
	color: #F0394C;
}
.object-item{
	margin-bottom: 30px;
}
.object .title{
	font-size: 24px;
	text-transform: uppercase;
	color: #333333;
}
.object-item .content{
	position: relative;
	-webkit-transition: all .3s;
	transition: all .3s;	
}
.object-item .content figcaption{
	background-color: rgba(240, 57, 76, 0.8);
	color: #fff;
	opacity: 0;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.object-item .content figcaption p,
.object-item .content figcaption a{
	color: #fff;
}
.object-item .content .caption{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 60px;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.object-item .content .caption .title{
	margin-bottom: 15px;
	text-transform: uppercase;
}
.object-item .content:hover figcaption{
	opacity: 1;
}
.object-item .content:hover figcaption .icon{
	-webkit-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
}
/*-----  End of object  ------*/


/*=============================
=    		 record 		     =
=============================*/
#record{
	background: #cccccc;
	padding-top: 0px;
}
.record .record-pic{
	position: relative;
	overflow: hidden;
}
.record .caption .social-icon a{
	color: #fff;	
	font-size: 26px;	
}
.record .caption .social-icon li{
	margin-right: 10px;
	text-align: center;	
}
.each-record .title{
	font-size: 18px;
	text-transform: uppercase;
	line-height: 32px;
	color: #000066;
	margin-bottom: 20px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.each-record .info{
	font-size: 14px;
	color: #000000;
	-webkit-transition: all .3s;
	transition: all .3s;
}
/*-----  End of record  ------*/


/*==================================
=            constitution           =
==================================*/
#constitution {
	background: url(../img/bg/01.jpg) no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}
#constitution .color-overlay{
	width: 100%;
	height: 100%;
	background: rgba(240, 57, 76, 0.7);
}
#constitution .counter-content .title{
	font-size: 20px;
	line-height: 36px;
	color: #FFFFFF;
	text-transform: uppercase;
}
#constitution-list .each-post{
	margin-bottom: 40px;
}
#constitution-list .each-post .headline{
	margin-top: 40px;
	margin-bottom: 20px;
	font-size: 24px;
}

/*-----  End of constitution     ------*/


/*===================================
=        souvenir        =
===================================*/
#souvenir{
	background: #cccccc;
	-webkit-background-size: cover;
	background-size: cover;
}
.souvenir-filter{
	margin-top: 20px;
}
.souvenir-filter li .active{
	color: #F0394C;
	text-decoration: none;
}
.souvenir-filter li a:hover{
	color: #F0394C;
}
.souvenir-item{
	margin-bottom: 30px;
}
.souvenir .title{
	font-size: 24px;
	text-transform: uppercase;
	color: #333333;
}
.souvenir-item .content{
	position: relative;
	-webkit-transition: all .3s;
	transition: all .3s;	
}
.souvenir-item .content figcaption{
	background-color: rgba(240, 57, 76, 0.8);
	color: #fff;
	opacity: 0;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.souvenir-item .content figcaption p,
.souvenir-item .content figcaption a{
	color: #fff;
}
.souvenir-item .content .caption{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 60px;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.souvenir-item .content .caption .title{
	margin-bottom: 15px;
	text-transform: uppercase;
}
.souvenir-item .content:hover figcaption{
	opacity: 1;
}
.souvenir-item .content:hover figcaption .icon{
	-webkit-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
}
/*-----  End of souvenir   ------*/


/*========================================
=            	event       	     =
========================================*/
#event{
	background: #FFFFFF;
	padding-top: 0px;
}
#event-menu{
	background: #cccccc;
	padding-top: 0px;
}
.each-event .title{
	font-size: 18px;
	text-transform: uppercase;
	color: #000066;
	margin-bottom: 20px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.each-event .info .position{
	margin-top: 25px;
}
.each-event .info .name{
	font-size: 16px;
	color: #333333;
	margin-top: 10px;
	margin-bottom: 10px;
}
/*-----  End of event  ------*/


/*=================================
=            document           =
=================================*/
#document{
	background: url(../img/bg/04.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}
#document .color-overlay{
	width: 100%;
	height: 100%;
	background: rgba(16,19,38,.8);
}
#document .section-title{
	color: #fff;
	margin-bottom: 50px;
}
#document .info-part{
	padding-right: 40px;
}
#courses .each-courses{
	margin-bottom: 30px;
}
.each-document .title{
	font-size: 18px;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 20px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.each-document .info{
	font-size: 14px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
/*-----  End of exhibition   ------*/


/*===============================
=            learning            =
===============================*/
#learning {
	background: #cccccc;
	padding-top: 0px;
}
/*==================================
=            constitution           =
==================================*/
#learning-menu {
	background: url(../img/bg/05.jpg) no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}
#learning-menu .color-overlay{
	width: 100%;
	height: 100%;
	background: rgba(240, 57, 76, 0.7);
}
#learning-menu .counter-content .title{
	font-size: 20px;
	line-height: 36px;
	color: #FFFFFF;
	text-transform: uppercase;
}
#learning-list .each-post{
	margin-bottom: 40px;
}
#learning-list .each-post .headline{
	margin-top: 40px;
	margin-bottom: 20px;
	font-size: 24px;
}
.each-learning .title{
	font-size: 18px;
	text-transform: uppercase;
	color: #000066;
	margin-bottom: 20px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.each-learning .info{
	font-size: 14px;
	color: #000000;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.learning-menu .digita-pic{
	position: relative;
	overflow: hidden;
}
.learning-menu .caption .social-icon a{
	color: #fff;	
	font-size: 26px;	
}
.learning-menu .caption .social-icon li{
	margin-right: 10px;
	text-align: center;	
}
.learning-menu .info{
	font-size: 20px;
	text-transform: uppercase;
	color: #000000;
	margin-bottom: 30px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.learning-menu .info1{
	font-size: 20px;
	text-transform: uppercase;
	color: #ffffff;
	margin-bottom: 30px;
	-webkit-transition: all .3s;
	transition: all .3s;
}

/*-----  End of learning   ------*/


/*==============================
=            footer            =
==============================*/
#footer{
	background: #333333;
	padding-top: 50px;
}
#footer .bottom-part{
	padding-bottom: 30px;
}
.social-icon-footer li{
	margin-right: 10px;
}
.social-icon-footer li:last-child{
	margin-right: 0;	
}
.social-icon-footer li a{
	font-size: 30px;
}
.social-icon-footer li a:hover{
	color: #F0394C;
}
.subscribe-form p{
	color: #999999;
}
.subscribe-form input{
	border-radius: 0;
	background: none;
	border: none;
	border-bottom: 1px solid #999999;
	padding-left: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #999999;
}
.subscribe-form input:focus{
	-webkit-box-shadow: none;
	box-shadow: none;
	border-color: #F0394C;
}
.subscribe-form input::-webkit-input-placeholder {
   color: #666666;
}
.subscribe-form input:-moz-placeholder { /* Firefox 18- */
   color: #666666;  
}
.subscribe-form input::-moz-placeholder {  /* Firefox 19+ */
   color: #666666;  
}
.subscribe-form input:-ms-input-placeholder {  
   color: #666666;  
}
.copyright{
	background-color: #292929;
	padding: 15px;
	font-size: 12px;
}
.copyright .info a:hover{
	color: #F0394C;
}
/*-----  End of footer  ------*/