/* ©สถาบันส่งเสริมการสอนวิทยาศาสตร์และเทคโนโลยี  (สสวท.) , 2558 */

html, body, .left-menu-inner {
	height: 100%;
}

body {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 100%;
	color: #333;
	line-height: 1.125em;
	-webkit-text-size-adjust: none;
	background: url(../images/bg/pattern-bg.jpg) repeat 0 0;
	overflow: hidden;
}

@font-face {
  font-family: 'THSarabunNew';
  src: url('../fonts/THSarabunNew/THSarabunNew.eot');
  src: url('../fonts/THSarabunNew/THSarabunNew.eot?#iefix') format('embedded-opentype'),
       url('../fonts/THSarabunNew/THSarabunNew.woff2') format('woff2'),
       url('../fonts/THSarabunNew/THSarabunNew.woff') format('woff'),
       url('../fonts/THSarabunNew/THSarabunNew.ttf') format('truetype'),
       url('../fonts/THSarabunNew/THSarabunNew.svg#THSarabunNew') format('svg');
  font-weight: normal;
  font-style: normal;
}


a {
	color: #333;
	text-decoration: none;	
}

strong {
	font-weight: bold;	
}

em {
	font-style: italic;	
}

img {
	display: block;
	width: 100%;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	line-height: 0;
	visibility: hidden;
}

.clearboth {
	clear: both;
}

.fix-img {
	width: 82.81972265023112%;	/* 100% */
	margin: 0 auto;
}

.full-img {
	width: 100%;	
}

canvas {
	width: 100%;	/* 82.81972265023112% */
	margin: 0 auto;
	height: auto;	
}

.fix-canvas {
	display: inline-block;
	width: 82.81972265023112%;
}

.fix-bg {
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;	
}

.iphone .full-screen-btn, .ipad .full-screen-btn, .ios .full-screen-btn {
	display: none;
}


/* --- LOGO and ICONS --- */
.logo {
	display: block;
	width: 5.520833333333333%;	/* 106px */
	padding-bottom: 6.458333333333333%;	/* 124px */
	background: url(../images/vector/logo.png) no-repeat 0 0;
	background-size: contain;
}
.vsb-heading { 
   display: none; 
}
.txt-logo {
    
	display: block;
	position: absolute;
	width: 100%;		/* 25.27472527472527% */
	right: 4px;
	bottom: 0;
}

.txt-img {
	position: absolute;
	right: 0;
	bottom: 2px;
	width: 25.27472527472527%;
}

.txt-logo > span {
	display: none;
	font-family: sans-serif, Tahoma, Geneva;
	font-size: 10px;
	color: #fff;
	text-align: right;
}

.home-icon, .list-icon, .list-icon-sm, .book-icon, .note-icon, .qm-icon, 
.add-bookmark-icon, .add-note-icon, .search-icon, .go-icon, .back-icon, .next-icon,
.view-icon, .bin-icon, .gray-arw-icon, .full-screen-icon, .save-btn, .cancel-btn, .menu-icon {
	position: relative;
	display: inline-block;
	vertical-align: top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
}

.home-icon {
	width: 73.33333333333333%;	/* 66px */
	padding-bottom: 70%;	/* 63px */
	background-image: url(../images/icons/home-icon.png);
}

.home-icon:hover, .home-icon:active {
	background-image: url(../images/icons/home-active-icon.png);
}

.list-icon, .list-icon-sm {
	background-image: url(../images/icons/list-icon.png);
}

.list-icon {
	width: 56.66666666666667%;	/* 51px */
	padding-bottom: 73.33333333333333%;	/* 66px */
}

.list-icon-sm {
	width: 10.33333333333333%;
	padding-bottom: 13.33333333333333%;
	vertical-align: middle;
	margin-right: 3.571428571428571%;
}

.list-icon:hover, .list-icon:active {
	background-image: url(../images/icons/list-active-icon.png);
}

.book-icon {
	width: 53.33333333333333%;	/* 48px */
	padding-bottom: 64.44444444444444%;	/* 58px */
	background-image: url(../images/icons/book-icon.png);
}

.book-icon:hover, .book-icon:active {
	background-image: url(../images/icons/book-active-icon.png);
}

.note-icon {
	width: 84.44444444444444%;	/* 76px */
	padding-bottom: 60%;	/* 54px */
	background-image: url(../images/icons/note-icon.png);
}

.note-icon:hover, .note-icon:active {
	background-image: url(../images/icons/note-active-icon.png);
}

.qm-icon {
	width: 63.15789473684211%;	/* 60px */
	padding-bottom: 63.15789473684211%;	/* 60px */
	background-image: url(../images/icons/qm-active-icon.png);	
}

.qm-icon:hover, .qm-icon:active {
	background-image: url(../images/icons/qm-icon.png);
}

.add-bookmark-icon, .add-note-icon {
	width: 9.575923392612859%;	/* 140px */
	padding-bottom: 7.523939808481532%;	/* 110px */
	margin-top: 0.5471956224350205%;	/* 8px */
}

.add-bookmark-icon {
	background-image: url(../images/icons/bookmark-icon.png);
}

.add-bookmark-icon:hover, .add-bookmark-icon.actived {
	background-image: url(../images/icons/bookmark-active-icon.png);
}

.add-note-icon {
	background-image: url(../images/icons/addnote-icon.png);
}

.add-note-icon:hover, .add-note-icon.actived {
	background-image: url(../images/icons/addnote-active-icon.png);
}

.search-icon {
	position: relative;
	float: right;
	width: 15.93830334190231%;
	height: 0;
	padding: 0 0 19.37842778793419%;
	margin-top: 1.462522851919561%;	/* 8px */
	background-color: transparent;
	background-image: url(../images/icons/search-icon.png);
}

.search-icon:hover, .search-icon:active {
	background-image: url(../images/icons/search-active-icon.png);
}

.go-icon {
	width: 54.77707006369427%;	/* 121px */
	height: 0;
	padding: 0 0 49.7737556561086%;	/* 110px */
	margin-top: 3.619909502262443%;	/* 8px */
	background-color: transparent;
	background-image: url(../images/icons/go-icon.png);
}

.go-icon:hover {
	background-image: url(../images/icons/go-active-icon.png);
}

.back-icon, .next-icon {
	width: 5.950752393980848%;	/* 87px */
	padding-bottom: 7.523939808481532%;	/* 110px */
	margin-top: 0.5471956224350205%;	/* 8px */
}

.back-icon {
	background-image: url(../images/icons/back-icon.png);
}

.back-icon:hover, .back-icon:active {
	background-image: url(../images/icons/back-active-icon.png);
}

.next-icon {
	background-image: url(../images/icons/next-icon.png);
}

.next-icon:hover, .next-icon:active {
	background-image: url(../images/icons/next-active-icon.png);
}

.view-icon, .bin-icon {
	cursor: pointer;
	width: 16.23376623376623%;
	padding-bottom: 16.23376623376623%;
}

.view-icon {
	top: 2px;
	background-image: url(../images/icons/view-icon.png);
}

.bin-icon {
	background-image: url(../images/icons/bin-icon.png);
}

.x-circle-icon {
	width: 50%;
	height: 50%;
	background: url(../images/icons/x-icon.png) no-repeat 0 0;
	background-size: 100% auto;
}

.gray-arw-icon {
	position: relative;
	top: -1px;
	width: 4.444444444444444%;
	padding-bottom: 9.8%;
	vertical-align: middle;
	background-image: url(../images/icons/gray-arw.png);
	margin-right: 3.703703703703704%;
}

.menu-icon {
	position: absolute;
	right: -16.78082191780822%;
	width: 8.618331053351573%;
	padding-bottom: 7.523939808481532%;	/* 110px */
	margin-top: 0.4103967168262654%;	/* 6px */
	background-image: url(../images/icons/hide-menu.png);
}

.menu-icon:hover, .menu-icon:active {
	background-image: url(../images/icons/hide-menu-active.png);
}

.outer-wrap.actived .menu-icon {
	background-image: url(../images/icons/menu.png);
}

.outer-wrap.actived .menu-icon:hover, .outer-wrap.actived .menu-icon:active {
	background-image: url(../images/icons/menu-active.png);
}

.full-screen-icon {
	position: absolute;
	right: -6.839945280437756%;
	width: 8.276333789329685%;	/* 121px */
	padding-bottom: 7.523939808481532%;	/* 110px */
	margin-top: 0.6155950752393981%;	/* 9px */
	background-image: url(../images/icons/fullscreen-icon.png);
}

.full-screen-icon:hover, .full-screen-icon:active, .full-screen-icon.actived {
	background-image: url(../images/icons/fullscreen-active-icon.png);
}

.btn-box {
	position: absolute;
	width: 35.3125%;	/* 226px */
	right: 4.6875%;		/* 30px */
	bottom: 4.6875%;	/* 30px */
	padding-bottom: 6.5625%;
}

.save-btn, .cancel-btn {
	cursor: pointer;
	position: absolute;
	top: 0;
	width: 47.78761061946903%;		/* 108px */
	height: 100%;
	border: none;
	padding: 0;
	-webkit-appearance: none;
	border-radius: 5px;
}

.save-btn {
	left: 0;
	background-image: url(../images/icons/save-btn.png);
}

.cancel-btn {
	right: 0;
	background-image: url(../images/icons/cancel-btn.png);
}


/* --- INPUT --- */
.cmn-input {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 20px;
	color: #333;
	background-color: #FFF;
	border-radius: 60px;
	box-shadow: inset 0px 5px 3px rgba(0,0,0,0.8);
	border: none;
	-webkit-appearance: none;
	outline: none;
	padding: 0 10px;
	margin: 0;
	vertical-align: top;
	box-sizing: border-box;
}

.cmn-input-box, .long-input-box {
	float: left;
	position: relative;
}

.cmn-input-box {
	width: 45.22292993630573%;	/* 71px */
	padding-bottom: 25.47770700636943%;	/* 56px */
	margin-top: 10.82802547770701%;
}

.long-input-box {
	width: 80.46272493573265%;	/* 440px */
	padding-bottom: 10.2827763496144%;	/* 56px */
	margin-top: 4.370179948586118%;	/* 24px */
}

.cmn-button {
	cursor: pointer;
	border: none;
	-webkit-appearance: none;
	outline: none;
}

.back-btn {
	position: absolute;
	font-family: 'THSarabunNew';
	font-size: 26px;
	color: #FFF;
	left: 0;
	bottom: 0;
	background-color: transparent;
	width: 100%;
	padding: 9px 15px;
	box-sizing: border-box;
	border-top: 1px solid #666;
}


/* --- ALIGNMENT --- */
.align-center {
	text-align: center;	
}

.align-right {
	text-align: right;
}


/* --- LAYOUT --- */
#scroll-wrapper, .outer-wrap {
	position: relative;
	width: 100%;
	min-height: 100%;
	height: auto;
}

.wrap, .left-menu-box, .main-sec {
	box-sizing: border-box;
}

.wrap {
	position: relative;
	width: 100%;
}

.outer-wrap.actived .left-menu-box {
	opacity: 0;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.outer-wrap.actived .main-sec {
	width: 100%;
	border-left: 0;
}

.outer-wrap.actived .main-sec, .outer-wrap.actived .main-content, .outer-wrap.actived .ajax-elm-box,
.outer-wrap.actived .ajax-ctn-outer, .outer-wrap.actived .ajax-ctn-box  {
	border-radius: 0;
}

.outer-wrap.actived .fix-canvas {
	width: 78.47730600292826%;
}

.full-screen.actived .fix-canvas {
	width: 95.16837481698389%;	
}

.vertical-container {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.left-menu-box, .main-sec {
	display: block;
}

.left-menu-box {
	/*position: absolute;
	left: 0;
	top: 0;*/
	opacity: 1;
	left: 0;
	top: 0;
	position: absolute;
	width: 4.947916666666667%;	/* 95px */
	padding-bottom: 40.62957540263543%;	/* 49.07338769458858%; */
	
	/*-webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
	transition: opacity 0.3s ease, transform 0.3s ease;*/
}

.left-menu-inner {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 0px 20px 20px 0px;
	
	background: rgb(51,51,51); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzOTM5MzkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(left,  rgba(51,51,51,1) 0%, rgba(57,57,57,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(51,51,51,1)), color-stop(100%,rgba(57,57,57,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(57,57,57,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(57,57,57,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(51,51,51,1) 0%,rgba(57,57,57,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(51,51,51,1) 0%,rgba(57,57,57,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#393939',GradientType=1 ); /* IE6-8 */
}

.left-menu {
	position: relative;
	top: 8.456659619450317%;
}

.left-menu > li {
	cursor: pointer;
	text-align: center;
	margin-top: 55.55555555555556%;	/* 50px */
}

.left-menu > li:first-child {
	margin-top: 0px;
}

.off-canvas-nav {
	display: block;
	position: absolute;
	opacity: 0;
	left: 0;
	top: 0;
	width: 22.23869532987398%;
	padding-bottom: 40.62957540263543%;	/* 49.07338769458858% */
	z-index: 10;
	
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	
	-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.off-canvas-nav.actived {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.off-canvas-inner {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #333;
}

.off-canvas-inner > h2 {
	position: absolute;
	display: block;
	width: 100%;
	left: 0;
	top: 0;
	font-family: 'THSarabunNew';
	font-size: 26px;
	line-height: 26px;
	font-weight: normal;
	color: #FFF;
	padding-left: 6.666666666666667%;
	padding-top: 6.666666666666667%;
	box-sizing: border-box;
}

.off-canvas-menu-box {
	height: 100%;
	padding-top: 27.33333333333333%;
	padding-bottom: 27.33333333333333%;
	box-sizing: border-box;
}

.off-canvas-menu {
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.off-canvas-menu > li, .off-canvas-menu > li > a {
	display: block;
}

.off-canvas-menu > li > a {
	font-family: 'THSarabunNew';
	font-size: 16px;
	color: #FFF;
	padding: 4% 6.666666666666667%;
	
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

.off-canvas-menu > li:hover > a {
	background-color: #000;
}

.main-sec {
	position: relative;
	display: block;
	float: right;
	width: 95.03335804299481%;
	padding-bottom: 40.62957540263543%;	/* 49.07338769458858%; */
	/*margin-left: 4.947916666666667%;	 95px */
	border-left: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-radius: 20px 0px 0px 20px;
	
	/*-webkit-transition: width 0.3s ease;
	transition: width 0.3s ease;*/
}

.main-content {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: url(../images/bg/bg-01.jpg) no-repeat left center;
	background-size: cover;
	border-radius: 20px 0px 0px 20px;
	overflow: hidden;
	/*box-sizing: border-box;
	padding: 3.835616438356164% 8.767123287671233%;*/
}


/* --- BOTTOM PART --- */
.btm-sec {
	display: block;
	position: relative;
	clear: both;
	width: 100%;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#009ed4+0,0082b7+100 */
	background: #009ed4; /* Old browsers */
	background: -moz-linear-gradient(top,  #009ed4 0%, #0082b7 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009ed4), color-stop(100%,#0082b7)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #009ed4 0%,#0082b7 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #009ed4 0%,#0082b7 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #009ed4 0%,#0082b7 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #009ed4 0%,#0082b7 100%); /* W3C */
}

.logo, .ctrl-box, .ctrl-sec > li {
	float: left;
}

.btm-sec > .logo {
	margin-left: 0.5208333333333333%;	/* 10px */
}

.ctrl-box {
	position: relative;
	width: 76.14583333333333%;	/* 1462px */
	margin-left: 2.604166666666667%;	/* 50px */
}

.ctrl-box, .ctrl-sec {
	height: 100%;
}

.ctrl-sec > li {
	cursor: pointer;
	margin-left: 1.367989056087551%;	/* 20px */
}

.ctrl-sec > .paging-box {
	margin-left: 4.038461538461538%;	/* 60px */
}

.ctrl-sec > .back-icon {
	margin-left: 4.103967168262654%;	/* 60px */
}

.ctrl-sec > .next-icon {
	margin-left: 2.735978112175103%;	/* 40px */
}

.ctrl-sec > li:first-child, .ctrl-sec > .go-icon {
	margin-left: 0;
}

.search-box {
	position: relative;
	width: 37.40384615384615%;	/* 389px */
	height: 100%;
}

.paging-box {
	width: 15.09615384615385%;	/* 157px */
	height: 100%;
}

.cmn-form {
	display: block;
}


/* --- POPUP --- */
.pop-box {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.list-box {
	position: relative;
	left: -2.083333333333333%;	/* 40px */
	width: 80.83333333333333%; /* 1552px */
	margin: 0 auto;
}

.list-box > li {
	float: left;
	width: 19.84536082474227%;	/* 308px */
	margin-left: 5.154639175257732%;	/* 80px */
	margin-top:  4.510309278350515%;	/* 70px */
}

.img-thumb {
	cursor: pointer;	
}

.thumb-ctrl {
	text-align: right;
	margin-top: 3.246753246753247%;	/* 10px */	
}

.thumb-ctrl > span {
	margin-left: 10px;	
}

.thumb-ctrl > span:first-child {
	margin-left: 0;	
}


/* --- NOTE POP --- */
.note-box {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 46.85212298682284%;	/* 660px */
	padding-bottom: 29.28257686676428%;		/* 400px */
	background-image: url(../images/icons/note-img.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.note-outer {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 4.6875% 4.6875% 14.0625%;	/* 30px 30px 90px */
	box-sizing: border-box;
}

.note-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.tpr-txtarea {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #FFF;
	border: none;
	padding: 20px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 20px;
	box-sizing: border-box;
}

.ctn-box {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 90%;
	
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.ctn-box img {
	display: block;
}

.doc-icon {
	cursor: pointer;
	background: url(../images/icons/doc-icon.png) no-repeat 0 0;
	background-size: 100% auto;
	width: 17.08706265256306%;
	padding-top: 4.393816110659072%;
	display: block;
	position: absolute;
	left: 8.950366151342555%;
	top: 65.50079491255962%;
}

.txt-page {
	position: absolute;
	width: 100%;
	text-align: center;
	left: 0;
	bottom: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	line-height: 1em;
	text-shadow: 2px 2px 1px rgba(0,0,0,1);
	color: #fff;
}

.txt-page > span {
	display: block;
	margin-top: 10px;
}

.ajax-elm-box .txt-page {
	display: block;
	width: auto;
	bottom: auto;
	left: auto;
	top: 5px;
	right: 5px;
	font-size: 12px;
	z-index: 50;
	padding: 6px;
	background-color: rgba(0,0,0,0.7);
	border-radius: 4px;
	text-shadow: none;
}

.ajax-elm-box .txt-page > span {
	display: inline;
	margin-top: 0;	
}


/* --- MODAL --- */
.call-modal, .call-ajax-modal {
	cursor: pointer;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 100;
	opacity: 0;
	background: rgba(0,0,0,0.9);
	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
	-webkit-transition: all 0.3s ease 0.3s;
	transition: all 0.3s ease 0.3s;
}

.ie8 .md-overlay {
	background-color: #000;
	filter: alpha(opacity=90);
}

.ajax-spinner {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 40px;
	height: 40px;
	background-color: #FFF;
	background-image: url(../images/icons/loader.GIF);
	background-repeat: no-repeat;
	background-position: center center;
	margin-left: -25px;
	margin-top: -25px;
	z-index: 10;
	padding: 5px;
}

.loader-black {
	background-color: #000;
	background-image: url(../images/icons/loader-black.GIF);
}

.ie8 .ajax-spinner, .ie9 .ajax-spinner {
	display: block;
}

.modal-ajax {
	opacity: 0;
	visibility: hidden;
	
	-webkit-transition: opacity .4s ease;
	transition: opacity .4s ease;
}

.show-content .modal-ajax {
	opacity: 1;
	visibility: visible;
}

.show-content .spinner-box {
	opacity: 0;
}

.show-content .ajax-spinner {
	display: none;
}

.md-modal {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	z-index: 200;
	visibility: hidden;
	
	/*-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);*/
}

.fix-modal {
	position: fixed;	
}

.md-show {
	visibility: visible;
	z-index: 300;
}

.md-content {
	height: 100%;
}

.ie8 .md-modal {
	display: none;	
}

.ie8 .md-show {
	display: block;
}

.md-close-btn {
	cursor: pointer;
	position: absolute;
	right: 1.5625%;
	top: 1.851851851851852%;
	width: 4.083333333333333%;
	padding-bottom: 4.083333333333333%;
	z-index: 20;
}

.md-close-btn .x-circle-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}


/* --- MODAL EFFECT --- */
.md-overlay.show {
	opacity: 1;
	visibility: visible;
	
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.md-effect-1 .md-content {
	-webkit-transform: translateY(5%);
	transform: translateY(5%);
	
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	
	opacity: 0;
}

.md-show.md-effect-1 .md-content {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

.md-large-size {
	width: 100%;
}



/* --- SPINNER --- */
.spinner-box, .spinner {
	position: absolute;
	left: 50%;
	top: 50%;
}

.spinner-box {
	opacity: 1;
	display: block;
	width: 62px;
	height: 62px;
	margin-left: -31px;
	margin-top: -31px;
	border-radius: 50%;
	
	-webkit-transform: translateY(150px);
	transform: translateY(150px);
	
	-webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.spn-gray {
	background-color: #FAFAFA;
}

.spinner-box.actived {
	z-index: 5;
	
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.ie8 .spinner-box, .ie9 .spinner-box {
	display: none;
}

.spinner {
	width: 50px;
	height: 50px;
	margin-left: -25px;
	margin-top: -25px;	
}

.circle {
	width: 40px;
	height: 40px;
	margin: 0 auto;
	background-color: rgba(0,0,0,0);
	opacity: .9;
	border: 5px solid rgba(1,91,181,0.9);
	border-right: 5px solid rgba(0,0,0,0);
	border-left: 5px solid rgba(0,0,0,0);
	border-radius: 50px;
	
	-webkit-box-shadow: 0 0 35px #014180;
	box-shadow: 0 0 35px #014180;
	
	-moz-animation: spinPulse 1s infinite ease-in-out;
	-webkit-animation: spinPulse 1s infinite linear;
	animation: spinPulse 1s infinite linear;
}

.circle1 {
	position: relative;
	top: -40px;
	width: 20px;
	height: 20px;
	margin: 0 auto;
	opacity: .9;
	background-color: rgba(0,0,0,0);
	border: 5px solid rgba(1,91,181,0.9);
	border-left: 5px solid rgba(0,0,0,0);
	border-right: 5px solid rgba(0,0,0,0);
	border-radius: 50px;
	
	-webkit-box-shadow: 0 0 15px #014180; 
	box-shadow: 0 0 15px #014180; 
	
	-moz-animation: spinoffPulse 1s infinite linear;
	-webkit-animation: spinoffPulse 1s infinite linear;
	animation: spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
	0% { -moz-transform: rotate(160deg); opacity: 0; box-shadow:0 0 1px #014180; }
	50% { -moz-transform: rotate(145deg); opacity: 1; }
	100% { -moz-transform: rotate(-320deg); opacity: 0; }
}

@-moz-keyframes spinoffPulse {
	0% { -moz-transform: rotate(0deg); }
	100% { -moz-transform: rotate(360deg);  }
}

@-webkit-keyframes spinPulse {
	0% { -webkit-transform: rotate(160deg); opacity: 0; box-shadow:0 0 1px #014180; }
	50% { -webkit-transform: rotate(145deg); opacity: 1;}
	100% { -webkit-transform: rotate(-320deg); opacity: 0; }
}

@-webkit-keyframes spinoffPulse {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spinPulse {
	0% { transform: rotate(160deg); opacity: 0; box-shadow:0 0 1px #014180;}
	50% { transform: rotate(145deg); opacity: 1; }
	100% { transform: rotate(-320deg); opacity: 0; }
}

@keyframes spinoffPulse {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* --- POPUP --- */
.md-content video {
    display: block;
}

/* --- AJAX --- */
.ajax-elm-box {
	position: relative;
	min-height: 100%;
	border-radius: 20px 0px 0px 20px;
}

.ajax-ctn-outer {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 1;
	border-radius: 20px 0px 0px 20px;
}

.ajax-elm-box .spinner-box, .ajax-ctn-box, .fix-spinner.spinner-box {	
	-webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease;
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.ajax-ctn-box {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	visibility: visible;
	border-radius: 20px 0px 0px 20px;
}

.ajax-elm-box .spinner-box, .fix-spinner.spinner-box {
	opacity: 0;
	
	-webkit-transform: translateY(150px);
	transform: translateY(150px);
}

.ie8 .ajax-elm-box .ajax-spinner, .ie9 .ajax-elm-box .ajax-spinner,
.ie8 .fix-spinner.ajax-spinner, .ie9 .fix-spinner.ajax-spinner {
	display: none;
}

.ajax-elm-box.actived .spinner-box, .fix-spinner.spinner-box.actived {
	opacity: 1;	
	
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
}

.ie8 .ajax-elm-box.actived .ajax-spinner, .ie9 .ajax-elm-box.actived .ajax-spinner,
.ie8 .ajax-spinner.actived, .ie9 .ajax-spinner.actived,
.ie8 .fix-spinner.ajax-spinner.actived, .ie9 .fix-spinner.ajax-spinner.actived {
	display: block;
}

.ajax-elm-box.actived .ajax-ctn-box {
	opacity: 0;
	visibility: hidden;
}

.full-screen .fix-img, .full-screen .fix-canvas {
	width: 100%;
}

.full-screen .left-menu-box, .full-screen .main-sec, .full-screen .off-canvas-nav, .fix-height {
	padding-bottom: 49.3411420204978%;		/* 49.07338769458858% */
}

.full-screen .txt-logo {
	right: 4px;
	bottom: -1px;
}

.ipad .ctrl-box, .ios .ctrl-box, .iphone .ctrl-box {
	margin-left: 6.25%;	
}

.ipad .tgl-menu-btn, .ios .tgl-menu-btn, .iphone .tgl-menu-btn {
	right: -6.839945280437756%;	
}

/* --- SAFARI HACK --- */
_::-moz-svg-foreign-content, :root .show-content .spinner-box {
	display: none;
	opacity: 1;
}

@media screen and (min-width: 300px) {
	.cmn-input {
		font-size: 12px;	
	}
	
	.off-canvas-inner > h2, .back-btn {
		font-size: 14px;
	}
	
	.off-canvas-menu > li > a {
		font-size: 12px;	
	}
}

@media screen and (min-width: 768px) {
    .txt-img {
		display: none;
	}
	
	.txt-logo > span {
		display: block;
	}

	.cmn-input {
		font-size: 14px;
	}
	
	.off-canvas-inner > h2, .back-btn {
		font-size: 24px;
	}
	
	.off-canvas-menu > li > a {
		font-size: 20px;	
	}
	
	.gray-arw-icon {
		top: -2px;
	}
}

@media screen and (min-width: 1000px) {
	.cmn-input {
		font-size: 18px;
	}
	
	.off-canvas-inner > h2, .back-btn {
		font-size: 28px;
	}
	
	.off-canvas-menu > li > a {
		font-size: 21px;	
	}
}

@media screen and (min-width: 1600px) {
	.cmn-input {
		font-size: 20px;
	}
	
	.off-canvas-inner > h2, .back-btn, .tpr-txtarea {
		font-size: 26px;
	}
	
	.off-canvas-menu > li > a {
		font-size: 18px;	
	}
}

@media only screen and (min-width : 768px) and (max-width : 1280px) and (orientation : landscape) {
	.full-height, .full-height .wrap {
		height: 100%;	
	}
	
	.ipad .full-height .fix-img, .ipad .full-height .fix-canvas, .full-screen.actived .fix-canvas, 
	.full-height.actived .fix-canvas, .full-height .fix-canvas {
		width: 103%;
	}
	
	html.landscape:not(.desktop):not(.ipad) .full-height .fix-img,
	html.landscape:not(.desktop):not(.ipad) .full-height .fix-canvas {
		width: 90%;
	}
	
	html.landscape:not(.desktop):not(.ipad) .full-screen .fix-canvas {
		width: 103%;
	}
	
	.full-height .left-menu-box, .full-height .main-sec {
		height: 100%;
		padding-bottom: 6.4453125%;
		box-sizing: border-box;
		border-bottom: 5px solid transparent;
	}
	
	.full-height .off-canvas-nav {
		height: 100%;
		box-sizing: border-box;
		padding-bottom: 0;
	}
	
	.full-height .ajax-ctn-outer, .full-height .ajax-ctn-box {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	.full-height .left-menu-inner, .full-height .main-content {
		position: relative;
		height: 100%;
	}
	
	.full-height .btm-sec {
		position: absolute;
		left: 0;
		bottom: 0;
	}
	
	.full-height .fix-img, .full-height .fix-canvas {
		position: absolute;
		top: 50%;
		left: 50%;
		
		-webkit-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
	}
}