/*

==============================================

TABLE OF CONTENT

==============================================



1. General

2. Align Holders

3. Modals

4. Margins, Paddings

5. Backgrounds

6. Clearfix

7. Overflow

8. Visibility

 

==============================================

[END] TABLE OF CONTENT

==============================================

*/

/*-----------------------------------------

	1. General

-------------------------------------------*/

.container {
	max-width: 1200px;
	z-index: 1;
}
html,  body {
	font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, 'Hiragino Sans GB', 'WenQuanYi Micro Hei', STHeiti, SimSun, sans-serif;
	color: #1c303e;
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	overflow-x: hidden;
}
h1,  h2,  h3,  h4,  h5,  h6 {
	font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, 'Hiragino Sans GB', 'WenQuanYi Micro Hei', STHeiti, SimSun, sans-serif;
	color: #222;
	line-height: 1.3;
	margin: 0px;
}
h1,  h2,  h3,  h4 {
	font-weight: 700;
}
h5,  h6 {
	font-weight: 600;
}
img {
	max-width: 100%;
	height: auto;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
a {
	color: #222;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
a:active,  a:hover,  a:focus {
	outline: 0 none;
	text-decoration: none;
}
button {
	cursor: pointer;
	background: none;
	outline: 0 none !important;
	border: none;
}
iframe {
	border: 0px;
}
input,  textarea {
	outline: none;
	max-width: 100%;
}
ul {
	padding-left: 0px;
	margin-bottom: 0px;
}
li {
	list-style-type: none;
}
p {
	font-size: 14px;
	color:#888;	
	line-height: 1.7;
	font-weight: 500;
	margin-bottom: 0px;
}



::-moz-selection {
 background: #222;
 color: #fff;
 text-shadow: none;
}
::selection {
	background: #222;
	color: #fff;
	text-shadow: none;
}
/*-----------------------------------------

	2. Align Holders

-------------------------------------------*/

.left-holder {
	text-align: left !important;
}
.right-holder {
	text-align: right !important;
}
.center-holder {
	text-align: center !important;
}
 @media screen and (max-width: 767px) {
.text-center-xs {
	text-align: center !important;
}
.center-holder-xs {
	text-align: center !important;
}
}
 @media screen and (max-width: 991px) {
.text-center-sm {
	text-align: center !important;
}
}
.vertical-middle {
	vertical-align: middle;
}
.vertical-center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
 @media (max-width: 991px) {
.vertical-center {
	display: block;
}
}
/*-----------------------------------------

  3. Modals

-------------------------------------------*/

.modal {
	text-align: center;
	padding: 0 !important;
	border-radius: 10px;
}
.modal:before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -4px;
	border-radius: 10px;
	z-index: 1;
}
.modal-dialog {
	width: 100%;
	display: inline-block;
	text-align: left;
	vertical-align: middle;
	z-index: 1;
}
 @media screen and (max-width: 767px) {
.modal:before {
	content: "";
	display: inline-block;
	height: 0%;
	width: 100%;
	vertical-align: middle;
	margin-right: -4px;
	border-radius: 10px;
	z-index: 1;
}
}
.modal-backdrop.show {
	opacity: 0.8;
	z-index: 2;
}
/*-----------------------------------------

  4. Margins, Paddings

-------------------------------------------*/



/*------------------

    Margin Left

--------------------*/

.ml-0 {
	margin-left: 0px !important;
}
.ml-15 {
	margin-left: 15px;
}
/*------------------

    Margin top

--------------------*/

.mt-0 {
	margin-top: 0 !important;
}
.mt-1 {
	margin-top: 1px;
}
.mt-2 {
	margin-top: 2px;
}
.mt-3 {
	margin-top: 3px;
}
.mt-3 {
	margin-top: 4px;
}
.mt-5 {
	margin-top: 5px !important;
}
.mt-10 {
	margin-top: 10px;
}
.mt-15 {
	margin-top: 15px;
}
.mt-20 {
	margin-top: 20px;
}
.mt-25 {
	margin-top: 25px;
}
.mt-30 {
	margin-top: 30px !important;
}
.mt-35 {
	margin-top: 35px;
}
.mt-40 {
	margin-top: 40px;
}
.mt-45 {
	margin-top: 45px;
}
.mt-50 {
	margin-top: 50px;
}
.mt-55 {
	margin-top: 55px;
}
.mt-60 {
	margin-top: 60px;
}
.mt-65 {
	margin-top: 65px;
}
.mt-70 {
	margin-top: 70px;
}
.mt-75 {
	margin-top: 75px;
}
.mt-80 {
	margin-top: 80px;
}
.mt-85 {
	margin-top: 85px;
}
.mt-90 {
	margin-top: 90px;
}
.mt-95 {
	margin-top: 95px;
}
.mt-100 {
	margin-top: 100px;
}
.mt-105 {
	margin-top: 105px;
}
.mt-110 {
	margin-top: 110px;
}
.mt-115 {
	margin-top: 115px;
}
.mt-120 {
	margin-top: 120px;
}
.mt-125 {
	margin-top: 125px;
}
.mt-130 {
	margin-top: 130px;
}
.mt-135 {
	margin-top: 135px;
}
.mt-140 {
	margin-top: 140px;
}
.mt-145 {
	margin-top: 145px;
}
.mt-150 {
	margin-top: 150px;
}
.mt--15 {
	margin-top: -15px;
}
.margin-minus-120 {
	margin-top: -120px;
}
 @media screen and (max-width: 767px) {
.margin-minus-120 {
	margin-top: 0px;
}
}
 @media screen and (max-width: 767px) {
.mt-0-xs {
	margin-top: 0px !important;
}
}
.mt-15-xs {
	margin-top: 0px;
}
 @media screen and (max-width: 767px) {
.mt-15-xs {
	margin-top: 15px;
}
}
.mt-30-xs {
	margin-top: 0px;
}
 @media screen and (max-width: 767px) {
.mt-30-xs {
	margin-top: 30px;
}
}
 @media screen and (max-width: 767px) {
.mt-35-xs {
	margin-top: 35px;
}
}
.mt-60-md {
	margin-top: 60px;
}
 @media screen and (max-width: 991px) {
.mt-60-md {
	margin-top: 0px;
}
}
/*------------------

    Margin bottom

--------------------*/

.mb-0 {
	margin-bottom: 0;
}
.mb-10 {
	margin-bottom: 10px;
}
.mb-15 {
	margin-bottom: 15px;
}
.mb-20 {
	margin-bottom: 20px;
}
.mb-25 {
	margin-bottom: 25px;
}
.mb-30 {
	margin-bottom: 30px;
}
.mb-35 {
	margin-bottom: 35px;
}
.mb-40 {
	margin-bottom: 40px;
}
.mb-45 {
	margin-bottom: 45px;
}
.mb-50 {
	margin-bottom: 50px;
}
.mb-55 {
	margin-bottom: 55px;
}
.mb-60 {
	margin-bottom: 60px;
}
.mb-65 {
	margin-bottom: 65px;
}
.mb-70 {
	margin-bottom: 70px;
}
.mb-75 {
	margin-bottom: 75px;
}
.mb-80 {
	margin-bottom: 80px;
}
.mb-85 {
	margin-bottom: 85px;
}
.mb-90 {
	margin-bottom: 90px;
}
.mb-95 {
	margin-bottom: 95px;
}
.mb-100 {
	margin-bottom: 100px;
}
.mb-105 {
	margin-bottom: 105px;
}
.mb-110 {
	margin-bottom: 110px;
}
.mb-115 {
	margin-bottom: 115px;
}
.mb-120 {
	margin-bottom: 120px;
}
.mb-125 {
	margin-bottom: 125px;
}
.mb-130 {
	margin-bottom: 130px;
}
.mb-135 {
	margin-bottom: 135px;
}
.mb-140 {
	margin-bottom: 140px;
}
.mb-145 {
	margin-bottom: 145px;
}
.mb-150 {
	margin-bottom: 150px;
}
.mb-15-xs {
	margin-bottom: 0px;
}
 @media screen and (max-width: 767px) {
.mb-15-xs {
	margin-bottom: 15px;
}
}
/*------------------

    Margin right

--------------------*/

.mr-20-md {
	margin-right: 20px;
}
 @media screen and (max-width: 767px) {
.mr-30-md {
	margin-right: 0px;
}
}
/*------------------

    Paddings

--------------------*/

.no-padding {
	padding: 0px !important;
}
.pb-0 {
	padding-bottom: 0px !important;
}
.pt-0 {
	padding-top: 0px !important;
}
.pl-0 {
	padding-left: 0px;
}
.pl-0-md {
	padding-left: 0px;
}
 @media screen and (max-width: 991px) {
.pl-0-md {
	padding-left: 15px;
}
}
.pr-0 {
	padding-right: 0px;
}
.p-15 {
	padding: 15px;
}
.pl-15-md {
	padding-left: 15px;
}
 @media screen and (max-width: 991px) {
.pl-15-md {
	padding-left: 0px;
}
}
.pl-30-md {
	padding-left: 30px;
}
 @media screen and (max-width: 991px) {
.pl-30-md {
	padding-left: 0px;
}
}
.pl-45-md {
	padding-left: 45px;
}
 @media screen and (max-width: 991px) {
.pl-45-md {
	padding-left: 0px;
}
}
.pl-75-md {
	padding-left: 75px;
}
 @media screen and (max-width: 991px) {
.pl-75-md {
	padding-left: 0px;
}
}
.pr-30-md {
	padding-right: 30px;
}
 @media screen and (max-width: 991px) {
.pr-30-md {
	padding-right: 0px;
}
}
.pr-45-md {
	padding-right: 45px;
}
 @media screen and (max-width: 991px) {
.pr-45-md {
	padding-right: 0px;
}
}
.pr-75-md {
	padding-right: 75px;
}
 @media screen and (max-width: 991px) {
.pr-75-md {
	padding-right: 0px;
}
}
.padding-3-perc {
	padding: 3%;
}
.padding-5-perc {
	padding: 5%;
}
.padding-10-perc {
	padding: 10%;
}
 @media screen and (max-width: 776px) {
.padding-10-perc {
	padding: 70px 15px;
}
}
.inner-5 {
	padding: 5px;
}
.inner-10 {
	padding: 10px;
}
.inner-15 {
	padding: 15px;
}
.inner-30 {
	padding: 30px;
}
.inner-40 {
	padding: 40px;
}
 @media screen and (max-width: 767px) {
.inner-40 {
	padding: 30px;
}
}
.inner-45 {
	padding: 45px;
}
 @media screen and (max-width: 767px) {
.inner-45 {
	padding: 30px;
}
}
/*-----------------------------------------

  5. Backgrounds

-------------------------------------------*/

.background-center {
	background-position: center !important;
}
.background-left {
	background-position: left !important;
}
.background-right {
	background-position: right !important;
}
.background-no-repeat {
	background-repeat: no-repeat;
}
.background-contain {
	background-size: contain;
}
.background-cover {
	background-size: cover;
}
.full-background {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.background-offset {
	width: 100%;
	height: 100%;
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}
.background-80 {
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}
.background-70 {
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
}
.background-60 {
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
}
.background-50 {
	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center;
}
.background-40 {
	background-size: 40%;
	background-repeat: no-repeat;
	background-position: center;
}
.background-30 {
	background-size: 30%;
	background-repeat: no-repeat;
	background-position: center;
}
/*-----------------------------------------

  6. Clearfix

-------------------------------------------*/

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix {
	display: inline-block;
}
/* start commented backslash hack \*/

* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* close commented backslash hack */



/*-----------------------------------------

  7. Overflow

-------------------------------------------*/

.overflow-hidden {
	overflow: hidden;
}
.display-b {
	display: block;
}
/*-----------------------------------------

  8. Visibility

-------------------------------------------*/

.invisible {
	visibility: hidden !important;
}
.hidden-xs-up {
	display: none !important;
}
 @media (max-width: 575px) {
.hidden-xs-down {
	display: none !important;
}
}
 @media (min-width: 576px) {
.hidden-sm-up {
	display: none !important;
}
}
 @media (max-width: 767px) {
.hidden-sm-down {
	display: none !important;
}
}
 @media (min-width: 768px) {
.hidden-md-up {
	display: none !important;
}
}
 @media (max-width: 991px) {
.hidden-md-down {
	display: none !important;
}
}
 @media (min-width: 992px) {
.hidden-lg-up {
	display: none !important;
}
}
 @media (max-width: 1199px) {
.hidden-lg-down {
	display: none !important;
}
}
 @media (min-width: 1200px) {
.hidden-xl-up {
	display: none !important;
}
}
.hidden-xl-down {
	display: none !important;
}
 @media (max-width: 767px) {
.reverse-xs {
	flex-direction: column-reverse;
}
}
.z-index-9 {
	z-index: 9;
}
.z-index-99 {
	z-index: 99;
}
.z-index-999 {
	z-index: 999;
}
/*-----------------------------------------

53. Color Switcher

-------------------------------------------*/

#style-switcher {
	left: -180px;
	position: fixed;
	top: 250px;
	width: 180px;
	z-index: 9999;
	background: #fff;
	border-radius: 0 0 3px;
	box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.1);
	-webkit-transition-duration: 0.7s;
	transition-duration: 0.7s;
}
#style-switcher div {
	padding: 5px 10px;
}
#style-switcher h2 {
	color: #222;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 0;
	margin-right: 0;
	margin-top: 0;
	padding: 15px 0px 7px 0px;
	text-align: center;
}
#style-switcher.opened {
	left: 0px;
}
#style-switcher h2 a {
	background: #222;
	border-radius: 0px 3px 3px 0px;
	display: block;
	height: 40px;
	position: absolute;
	right: -40px;
	top: 0;
	width: 40px;
}
#style-switcher h2 a i {
	color: #fff;
	font-size: 17px;
	left: 11px;
	position: absolute;
	top: 11px;
}
.colors {
	padding-left: 7px;
}
.colors {
	list-style: none;
	margin: 0px 0px 10px 0px;
	overflow: hidden;
}
.colors li {
	float: left;
}
.colors li a {
	cursor: pointer;
	display: block;
	height: 30px;
	margin: 7px 9px;
	width: 30px;
	border-radius: 30px;
}
.style1 {
	background: #0570fb;
}
.style2 {
	background: #d21825;
}
.style3 {
	background: #46bfe2;
}
.style4 {
	background: #94c727;
}
.style5 {
	background: #f35007;
}
.style6 {
	background: #26b575;
}
.blog-list-info .fa-calendar-alt {
	display: inline-block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
	background: url(../images/date.png) no-repeat center;
	margin-right: 5px;
}
.blog-list-info .fa-calendar-alt:before {
	display: none
}


/* timeline */
#timeline{ height: auto;overflow:hidden;margin:3% auto;position:relative;  }
#dates{width:80px;height: auto; text-align:center; margin:0 !important; overflow:hidden;float: right; border-right: 2px solid #e9e9e9;}
#dates li{ height:50px; line-height:50px;font-size:18px;  }
#dates a{ display:block; }
#dates .selected{font-size:20px; color:#c7000b; border-right: 2px solid #c7000b;}

.issuesbox { width:85%;height:350px;overflow:hidden;float:left; }
#issues{ height:350px;overflow:hidden;  }
#issues li{ height:350px; padding-left:3%; }
#issues li h1{color:#444;font-size:58px; font-weight:normal; margin-bottom:20px; padding-top:5% }

#grad_top,#grad_bottom{width:60%;height:80px;position:absolute;}
#grad_top{top:0;background:url('../images/grad_top.png') repeat-x;}
#grad_bottom{bottom:0;background:url('../images/grad_bottom.png') repeat-x;}
#next,#prev{position:absolute;left:38%;font-size:50px;width:50px;height:30px; text-indent:-9999px;overflow:hidden; background-position:center; background-repeat:no-repeat}
#next{bottom:0;background-image:url('../images/select-down.png'); }
#prev{top:0;background-image:url('../images/select-down.png'); transform: rotate(180deg);}
#next.disabled,#prev.disabled{opacity:0.2;	}

@media all and (max-width: 778px){
#dates{width:70px;}
#dates li{ font-size:16px;  }
#dates .selected{font-size:18px;  }
.issuesbox { width:75%; }
	
}