@font-face { font-family: 'box-regular'; src: url("fonts/box-regular.ttf") format("truetype"); }
@font-face { font-family: 'box-black'; src: url("fonts/box-black.ttf") format("truetype"); }
@font-face { font-family: 'box-light'; src: url("fonts/box-light.ttf") format("truetype"); }
@font-face { font-family: 'box-lightitalic'; src: url("fonts/box-lightitalic.ttf") format("truetype"); }
@font-face { font-family: 'box-italic'; src: url("fonts/box-italic.ttf") format("truetype"); }
@font-face { font-family: 'box-medium'; src: url("fonts/box-medium.ttf") format("truetype"); }
@font-face { font-family: 'box-bold'; src: url("fonts/box-bold.ttf") format("truetype"); }
.no-padding { padding: 0; }

.small-centered { float: none; margin-right: auto; margin-left: auto; }

.page404 { 
	background-image: url(../img/404/404.png); background-repeat: no-repeat; background-size: 100%; 
}
.page404 .title404 {
	font-family:'Acta-Bold', sans-serif;
	font-size:72px;
	color:#DD1E26;
	margin:0 0 0em;
}
.page404 p {
	color:#DD1E26;
	font-family: "Lato", sans-serif;
	font-weight: 800;
	font-size:24px;
	margin:0 0 1em;
}
.page404 .notes {
	display:block;
	margin:0 0 2em;
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-size:17px;
	color: #432918;
}
.page404 .main-container {
	display:table;
}
.page404 .main-container .site-404 {
	display: table-cell;
	vertical-align: middle;
	height: 40vh;
	float: none;
}
.page404 .logo-tjp-404 {
	text-align:center;
	height:10vh;
	margin: 4em 0 0;
}
.page404 .logo-tjp-404 img {
	width:300px;
	/* height:100%; */
}
.page404 .small-centered { text-align: center; }
.page404 .small-centered p.note { margin: 0 0 35px; }
.page404 form { position: relative; margin: 0px 0px; float: left; width: 100%; }
.page404 form input[type="text"] { width: 100%; line-height: normal; border: 0; text-align: center; padding: 7px 0; font-family: "Lato", sans-serif; font-weight: 300; font-size: 18px; position: relative; z-index: 3;box-shadow: 0px 0px 15px 0px #b1b1b1;border-radius: 5px; }
.page404 form input[type="submit"] { position: absolute; right: 0; top: 0; width: 35px; height: 36px; background-position: center; background-image: url(../img/search.png); background-repeat: no-repeat; border: 0;z-index: 3; background-color:transparent;}
.page404 form input:focus { outline: none; background-color: #FFFEE6; color: #000; }
.page404 .channel404 {
	padding:0;
	text-align:left;
}
.channel404 .box404 {
	width:33.3333%;
	float:left;
	padding:0 8px;
	margin-bottom:1em;
}
.channel404 .box404 .sizeBox {
	float:left;
	width:100%;
	overflow: hidden;
	border-radius: 5px;
}
.channel404 .box404 .imgBanner-404 {
	float:left;
	width:100%;
	height:100px;
	overflow:hidden;
	position:relative;
}
.channel404 .box404 .caption_overlay {
	width:100%;
	float:left;
	background-color:#fff;
	padding:.3em 1em;
	height:95px;
}
.channel404 .box404 .date {margin:0;}
.channel404 .box404 .titleHlg {
	margin-bottom:.5em;
	font-size:1.15em;
	line-height:1.2;
	padding: .3em 0 0;
	margin: 0;
	text-transform: inherit;
	font-family: "Acta-Medium",sans-serif;
	clear: left;
	color: #000;
}
.page404.page404-2 .small-centered p { color: #fff; }
.page404.page404-2 .small-centered > img { margin: 25px 0 10px; }
.page404.page404-2 form input[type="submit"] { 
	position: absolute;
	right: 0;
	top: 0;
	width: 35px;
	height: 36px;
	background-position: center;
	background-image: url(../img/search.png);
	background-repeat: no-repeat;
	border: 0;
	background-color: #DCD9D4;
	z-index: 3; 
}

.date {
	display: block;
	margin-bottom: .5em;
	font-family: "Lato",sans-serif;
	font-size: 1em;
	color: rgba(0,0,0,0.8);
}
.date span {
	text-transform: uppercase;
	margin-right: 8px;
	font-family: "BrandonGrotesqueWeb-Bold",sans-serif;
}
.dt-multimedia{color:#009e97}
.dt-life{color:#662482}
.dt-news{color:#DD1E26}
.dt-travel{color:#6FB01E}
.dt-community{color:#662482}
.dt-paper{color:#DD1E26}
.dt-bussiness{color:#DD1E26}
.dt-se-asia{color:#DD1E26}
.dt-opinion{color:#DD1E26}
.dt-academia{color:#DD1E26}
.dt-video{color:#009E97}
.dt-jobs{color:#00788A}
.dt-youth{color:#662482}
.date.advert { color: #9F1D1B; padding-left: 0; }
.date.advert span { color: #000; }
.date.life { color: #fff; }
.date.life span { color: #fff; }

.tjp-gallery { position: relative; float: left; width: 100%; }
.tjp-gallery > a { display: block; position: relative; float: left; width: 100%; }
.tjp-gallery > a:before { position: absolute; content: ""; left: 42%; top: 30%; width: 65px; height: 65px; background-image: url(../img/gallery-thumb.png); z-index: 3; }
.tjp-gallery.tjp-video > a:before { background-position: 0px 0px; }
.tjp-gallery.tjp-photo > a:before { background-position: -87px 0px; }

@media screen and (max-width: 1350px) { .page404 { background-size: 1400px; } }
@media screen and (max-width: 1024px) { 
	.page404 { width: 100%; padding: 0 15px; background-size: auto 1024px;background-position: 80% 80%; }
  	.page404.page404-2 { overflow-x: hidden; background-size: 100%; } 
  	.page404 .main-container .site-404 {
  		height:35vh;
  		vertical-align: bottom;
  		padding-bottom: 2em;
  	}
}
@media (max-width: 992px) { .page404.page404-2 { background-size: 100%; }
  .page404 .logo-tjp-404 img {
  	height:40%;
  	width: auto;
  }
  .page404 .main-container .site-404 {
  	height:450px;
  	padding-bottom: 3em;
  }
	.page404 form {
		float:none;
		margin: 0 auto;
		width:50%;
	}
}
@media (min-width: 768px) { 
	.container { width: 100%; } 
	.channel404 .box404 .imgBanner-404 img {
		width:100%;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		left:0;
	}
}
@media screen and (max-width: 767px) {
	.page404 .channel404 {
		margin:16px 0 0;
		display:block;
	}
	.channel404 .box404 {
		width:100%;
	}
	.channel404 .box404 a {
		display:table;
		width:100%;
		background-color:#fff;
	}
	.channel404 .box404 .imgBanner-404 img {
		max-width:100%;
	}
	.channel404 .box404 .imgBanner-404 , .channel404 .box404 .caption_overlay {
		float:none;
		display:table-cell;
		vertical-align:top;
		width:auto;
		height:auto;
	}
	.channel404 .box404 .caption_overlay {
		width: 65%;
		padding:0.3em 1em;
	}
}
@media screen and (max-width: 680px) { 
	
  	.page404 { background-size: 1100px 100%; } 
  	.page404 form {
  		width:80%;
  	}
  	.page404 .main-container .site-404 {
  		height:310px;
  	}
  	.channel404 .box404 .titleHlg {
  		font-size:1em;
  	}
  	.date {
  		font-size:13px;
  		color: rgba(0,0,0,0.5);
  	}
 }
@media screen and (max-width: 410px) {
	.page404 p {
		font-size:17px;
	}
}
@media screen and (max-width: 320px) {
	.channel404 .box404 .titleHlg {
		font-size:14px;
	}
	.date {
		font-size:12px;
	}
}