@charset "UTF-8";
@import url(Raleway.css);
@import url(lato.css);
@import url(fonts.css);
* { margin: 0; padding: 0; }

.page {
	overflow: hidden;
	min-height: 500px;
}

body{
	background-color:#FCFCFC;
	list-style-position: initial;
}

/* ----------
HEADER
-------------*/
header {
  	background: -webkit-linear-gradient(0deg, #000428, #004e92); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(0deg, #000428, #004e92); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(0deg, #000428, #004e92); /* For Firefox 3.6 to 15 */
	background: linear-gradient(0deg, #000428, #004e92); /* Standard syntax */
}
header .brand {
	float: left;
	padding-top: 20px;
}

.well {
	padding: 20px 0;
}

.h_container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  min-width: 300px;
}
.h_container:before, .h_container:after {
  display: table;
  content: "";
  line-height: 0;
}
.h_container:after {
  clear: both;
}

.brand_box{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.brand_logo{
	order: 1;
	min-width: 300;
}

.brand_logo img{
	width: 238px;
	height: 60px;
	-webkit-filter: drop-shadow(0.004em 0.125em 0.002em #202020);
  	filter: drop-shadow(0.004em 0.125em 0.002em #202020);
}

.brand_title{
	order: 2;
	flex-grow: 1;
	font: 400 14px/14px "Roboto", sans-serif;
	text-align:right;
	color:#fefefe;
}
/* ---------------- */


ul  {
 padding-left:20px; 
}

ul li  {
 list-style-position:inside;
}

.Flex{
	display: flex;
}

.Box-Field{
	height: 25px;
	border: 0.1px solid #CCC;
	border-radius: 5px;
	padding: 2px 10px 2px;
	width: 50%;
	font: 400 13px/13px "Lato", sans-serif;
	outline: none;
	margin-right: 7px;
}

.Box-Field-Form{
	width: 90%;
}

.Box-Butts{
	-webkit-border-radius: 3;
	-moz-border-radius: 3;
	border-radius: 3px;
	text-shadow: 1px 1px 1px #1c1c1b;
	font: 400 13px/13px "Lato", sans-serif;
	color: #fff;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 10px;
	padding-right: 10px;
	background: #c71c1c;
	border: solid #a40a0a 1px;
	text-decoration:none;
	margin-top: 5px;
	cursor:pointer;
	outline:none;
}


.Menu-Side{
	width: 100%;
}

.Bhs-Side{
	width: 0%;
	padding-top: 30px;
	padding-right: 5px;
	padding-left: 5px;
}

.Logo-Side{
	width: 0%;
}

.Logo{
	padding-right:10px;
	align-items: center;
}

.Logo img{
	width: 90px;
	height: 90px;
}


.Nama-Site{
	 max-width: 100%;
	 display: flex;
	 align-items: center;
}

.Nama-Site .Gunung1{
	font: 600 20px/15px "Roboto", sans-serif;
	color: #c71c1c;
	text-shadow: 0px 0px 0px rgba(23, 25, 25, 0.0);
}

.Nama-Site .Gunung2{
	font: 200 20px/15px "Roboto", sans-serif;
	color: #c71c1c;
	text-shadow: 0px 0px 0px rgba(23, 25, 25, 0.0);
}

.Nama-Site .Geo{
	font: 200 18px/20px "Oswald", sans-serif;
	color: #04701b;
}

#landmark{
    display:flex;
	flex-direction: row;
	padding: 0px;
	margin: 0px;
	min-height: 400px;
	background-color:#fff;
}

#landmark .kiri{
	width:0px;
	display: none;
}

#landmark .tengah{
	width: 75%;
	order: 1;
}

#landmark .kanan{
	width: 25%;
	margin-left: 1px;
	order: 2;
}

#landmark .kanan{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	*background-color: #f1f1f2;
	background: -webkit-linear-gradient(0deg, #b6c6b4, #b6c6b4); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(182,198,180,.5), rgba(182,198,180,.5)), url("../images/bg2.jpg"); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(182,198,180,.5), rgba(182,198,180,.5)), url("../images/bg2.jpg"); /* For Firefox 3.6 to 15 */
	*background: linear-gradient(0deg, #b6c6b4, #b6c6b4); /* Standard syntax */
	background: linear-gradient(rgba(182,198,180,.5), rgba(182,198,180,.5)), url("../images/bg2.jpg");
}

#landmark .kanan_logo{
	order:1;
	width: 100%;
	align-self: center;
	text-align:center;
	padding-bottom: 24px;
}

#landmark .kanan_tulis{
	order:2;
	width: 84%;
	align-self: center;
	text-align:center;
	font: 500 23px/28px "Lato", sans-serif;
	-webkit-filter: drop-shadow(0.004em 0.086em 0.2em #004445);
  	filter: drop-shadow(0.004em 0.086em 0.2em #004445);
	color:#fff;
	padding-left: 100px;
	padding-right: 100px;
}

#landmark .kanan_tulis_quote{
	font: 500 23px/28px "Lato", sans-serif;
}

#landmark .kanan img{
	width: 90%;
	height: 90%;
	-webkit-filter: drop-shadow(0.004em 0.120em 0.005em #202020);
  	filter: drop-shadow(0.004em 0.120em 0.005em #202020);
}


.CameraTitle{
	font: 800 27px/40px "Lato", Helvetica, sans-serif;
	color:#6fb98f;
	-webkit-filter: drop-shadow(0.004em 0.120em 0.005em #202020);
  	filter: drop-shadow(0.004em 0.120em 0.005em #202020);
	text-shadow: 1px 0px 1px rgba(23, 25, 25, 0.5);
	padding-left: 8%;
	padding-top: 18px;
}

.CameraSubTitle{
	font: 300 20px/20px "Lato", Helvetica, sans-serif;
	color:#FFF;
	-webkit-filter: drop-shadow(0.004em 0.120em 0.005em #202020);
  	filter: drop-shadow(0.004em 0.120em 0.005em #202020);
	text-shadow: 1px 0px 1px rgba(23, 25, 25, 0.5);
	padding-left: 8%;
	padding-bottom: 28px;
}

.CameraTitleBackground{
	background-color: rgba(23, 25, 25, 0.4);
}

section{
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	font: 400 14px/21px "Lato", Helvetica, sans-serif;
	-webkit-filter: drop-shadow(0.004em 0.120em 0.005em #202020);
  	filter: drop-shadow(0.004em 0.120em 0.005em #202020);
	color: #262626;
	background-color:#FCFCFC;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  min-width: 100px;
}
.container:before, .container:after {
  display: table;
  content: "";
  line-height: 0;
}
.container:after {
  clear: both;
}

.inner{
	margin-right: 0px;
  	margin-left: 0px;
	padding-bottom: 45px;
  	min-width: 100px;
	background-color:#FFF;
	border-right: solid 0px #f1f1f1;
	border-left: solid 0px #f1f1f1;
	border-bottom: solid 1px #f1f1f1;
}

.inner:before, .inner:after {
  display: table;
  content: "";
  line-height: 0;
}
.inner:after {
  clear: both;
}


/*-------------
BERITA
------------------*/
.NewsBox{
	width:100%;
	overflow: hidden;
}

.Newstgl{
	color:#c80e0e;
	font: 400 14px/18px "Roboto", sans-serif;
	padding-bottom:10px;
}

.NewsTitle{
	font: 500 26px/28px "Roboto", Helvetica, sans-serif;
	color: #0a6acc;
	padding-bottom:10px;
}

.NewsIcon{
	font: 300 10px/13px "Roboto", Helvetica, sans-serif;
	color: #212121;
	display: flex;
	align-item: center;
	padding-bottom:30px;
}

.NewsIsi{
	font: 400 16px/22px "Lato", Helvetica, sans-serif;
	text-align:justify;
}

ImCaps{
	font: 300 12px/15px "Roboto", Helvetica, sans-serif;
	color: #212121;
}

.NewsAttch{
	padding-top: 20px;
	font: 400 16px/22px "Lato", Helvetica, sans-serif;
}

.Att-Tbl{
	font: 300 11px/13px "Roboto", Helvetica, sans-serif;
}

.pp {
	width: 100%;
	background-image:url(../images/garis.png);
	background-repeat:repeat-x;
	background-position: center;
}

/* ------------------
INNER TITLE
---------------------*/
#InnerTitle{
	padding: 35px;
	display: flex;
	*background: -webkit-linear-gradient(0deg, #ECE9E6, #ECE9E6); /* For Safari 5.1 to 6.0 */
	*background: -o-linear-gradient(0deg, #ECE9E6, #ECE9E6A); /* For Opera 11.1 to 12.0 */
	*background: -moz-linear-gradient(0deg, #ECE9E6, #ECE9E6); /* For Firefox 3.6 to 15 */
	*background: linear-gradient(180deg, #ECE9E6, #ECE9E6); /* Standard syntax */
	background: linear-gradient(45deg, rgba(182,198,180,.1), rgba(182,198,180,.1)), url("../images/bg3.jpg");
}

#InnerTitle .Title{
	font: 400 37px/37px "Roboto", Helvetica, sans-serif;
	min-height:78px;
	display: flex;
	align-items: center;
	color:#fefefe;
	-webkit-filter: drop-shadow(0.004em 0.086em 0.2em #004445);
  	filter: drop-shadow(0.004em 0.086em 0.2em #004445);
}



/* ------------------
PROLOG
---------------------*/
#Prolog{
	background-color:#003b46;
	*background-image:url(../src/Landmark/im2.jpg);
	*background: linear-gradient(45deg, rgba(182,198,180,.1), rgba(182,198,180,.1)), url("../images/bg4.jpg");
	*background: linear-gradient(0deg, #0a746a, #0e5a53);
	padding: 35px;
	display: flex;
	margin-top: 1px;
}

#Prolog .P_Kiri{
	width: 80%;
	padding-right: 4%;
	display: flex;
	background-color:#003b46;
}

#Prolog .P_Logo{
	width: 40%;
	padding-right: 15px;
	display: flex;
	align-items: center;
	display:none;
}

#Prolog .P_Logo img{
	width: 278px;
	height: 70px;
	-webkit-filter: drop-shadow(0.004em 0.125em 0.002em #202020);
  	filter: drop-shadow(0.004em 0.125em 0.002em #202020);
}

#Prolog .P_Narasi{
	width: 100%;
	text-align:justify;
	padding-right: 27px;
	margin-right: 1px;
}

#Prolog .P_Narasi_Judul{
	font: 300 17px/23px "Lato", Helvetica, sans-serif;
	color:#fff;
	-webkit-filter: drop-shadow(0.004em 0.125em 0.002em #202020);
  	filter: drop-shadow(0.004em 0.125em 0.002em #202020);
	
}

#Prolog .P_Kanan{
	width: 20%;
	background-color:#003b46;
}

#Prolog .Title{
	font: 400 19px/0px "Roboto", Helvetica, sans-serif;
	min-height:45px;
	display: flex;
	align-items: center;
	color:#fff;
	-webkit-filter: drop-shadow(0.004em 0.125em 0.002em #202020);
  	filter: drop-shadow(0.004em 0.125em 0.002em #202020);
}

/*-----------------
CONTENT
-------------------*/
#content{
	color: #262626;
	padding-top: 45px;
	padding-left: 35px;
  	padding-right: 35px;
	padding-bottom: 20px;
	min-height: 300px;
	color:#1e1f26;
}

#content .Title{
	font: 300 38px/14px "Roboto", Helvetica, sans-serif;
}

.InnerPics{
	float:left; 
	padding-right:10px; 
	padding-bottom:10px; 
}

.InnerPics img{
	max-width:100%;
	height:auto;
	width:auto\9;
}

/* ---
FRONT
----- */
.CoreBusiness{
	color:#07575b;
	flex-direction: column;
	text-align:center;
	font: 300 47px/57px "Roboto", Helvetica, sans-serif;
	padding-top: 28px;
}

.Core_Title{
	order: 1;
	padding-bottom: 38px;
	text-align:left;
}

.Core_Row1{
	order: 2;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	font: 300 17px/17px "Lato", Helvetica, sans-serif;
}

.Core_Row2{
	order: 3;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	font: 300 17px/17px "Lato", Helvetica, sans-serif;
}

.Core_01{
	order: 1;
	width: 300px;
	text-align:center;
	padding-bottom: 28px;
}

.Core_01 img{
	width: 230px;
	height: 200px;
}

.Core_02{
	order: 2;
	width: 300px;
	text-align:center;
	padding-bottom: 28px;
}

.Core_02 img{
	width: 230px;
	height: 200px;
}

.Core_03{
	order: 3;
	width: 300px;
	text-align:center;
	padding-bottom: 28px;
}

.Core_03 img{
	width: 230px;
	height: 200px;
}

.Core_04{
	order: 4;
	width: 300px;
	text-align:center;
	padding-bottom: 28px;
}

.Core_04 img{
	width: 230px;
	height: 200px;
}

/*-------------
BERITA
---------------*/
#content .Cont_Berita{
	width: 100%;
}

#content .Judul_Berita{
	width: 100%;
	padding-top: 20px;
}

#content .Isi_Berita{
	display: flex;
	padding-top: 30px;
	padding-bottom: 30px;
}

#content .Box_Berita_Left{
	padding-right: 2%;
	width: 25%;
}

#content .Box_Berita_Center{
	padding-right: 2%;
	padding-left: 2%;
	width: 25%;
}

#content .Box_Berita_Right{
	padding-left: 2%;
	width: 25%;
}

#content .Box_Berita{
	width:100%;
	*border-right: solid 1px #e1e1e1;
	*border-left: solid 1px #e1e1e1;
	*border-bottom: solid 1px #e1e1e1;
	*border-top: solid 1px #e1e1e1;
	*box-shadow: 0px 2px 0px rgba(0,0,0,.2);
}

#content .Konten_Berita{
	min-height: 320px;
}

#content .Konten_Banner{
	min-height: 120px;
}

.BannerURL{
	color:#c80e0e;
	font: 400 10px/10px "Roboto", sans-serif;
	padding-bottom:0px;
}

#content .Box_Berita .Img_Berita{
	width:100%;
	height: 100%;
}

/*--------------
INTERAKTIF
----------------*/
.gglMap{
	width:100%;
}

.InAlamat{
	font: 400 15px/18px "Lato", Helvetica, sans-serif;
	padding-top: 10px;
}

.btn-primary {
	-webkit-border-radius: 3;
	-moz-border-radius: 3;
	border-radius: 3px;
	text-shadow: 1px 1px 1px #1c1c1b;
	font: 400 15px/13px "Lato", sans-serif;
	color: #fff;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 10px;
	padding-right: 10px;
	background: #c71c1c;
	border: solid #a40a0a 1px;
	text-decoration:none;
	margin-top: 5px;
	cursor:pointer;
	outline:none;
}

.btn-primary:hover{
	background: transparent;
	background: #a70808;
}

.FrmBox{
	width: 50%;
	padding-top: 20px;
}


.InShowBox{
	width: 100%;
	padding-top: 20px;
	text-align:justify;
}

.InShowFrom{
	font: 400 11px/20px "Roboto", sans-serif;
	color:#c71c1c;
}

.InShowTitle{
	font: 400 16px/20px "Roboto", sans-serif;
}

.InShowIsi{
	font: 400 15px/18px "Lato", sans-serif;
}

.garis {
	background: transparent url(../images/garis.png) repeat-x;
	height: 5px;
	margin-top: 10px;
	background-position: center;
}

/*---------
YOUTUBE
-----------*/

#content .Box_Berita .yt-frame-2 {
	width: 100%;
	height: 220px;
	border: none;
}

#content .Box_Berita .YoutubeBox{
	width:100%;
	height: 100%;
}



#content .Box_Berita .YoutubeBox img{
	width:100%;
	height: 50%;
}

#content .Img_Berita img{
	width:100%;
	height: 50%;
}

#content .Link_Berita{
	width:90%;
	min-height: 40px;
	text-align:center;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	font: 500 15px/18px "Lato", Helvetica, sans-serif;
}

#content .Link_Berita a:hover{
	color: #0a6acc;
}

#content .Prop_Berita{
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 8px;
	margin-top: 5px;
	background: rgba(28, 28, 28, 0.9);
	display: flex;
	align-items: center;
	border-right: solid 1px #e1e1e1;
	border-left: solid 1px #e1e1e1;
}

#content .Prop_Berita_Tgl{
	font: 400 11px/11px "Roboto", Helvetica, sans-serif;
	color:#d1d1d1;
	width: 50%;
}

#content .Prop_Berita_Icon{
	width: 50%;
	text-align:right;
	padding-left: 5px;
	display: flex;
	align-items: center;
}

#content .Prop_Berita_Icon .Prop_Berita_Icon_View{
	width: 50%;
	display: flex;
	align-items: center;
}

#content .Prop_Berita_Icon .Prop_Berita_Icon_Comment{
	width: 50%;
	display: flex;
	align-items: center;
}
#content .Prop_Berita_Icon_Icon{
	width:40%;
	text-align:center;
}

#content .Prop_Berita_Icon_Icon img{
	width: 10px;
	height: 10px;
}

#content .Prop_Berita_Icon_Text{
	width:60%;
	font: 400 11px/11px "Roboto", Helvetica, sans-serif;
	color:#d1d1d1;
	text-align:left;
}

/*------
SEARCHING
-------*/
.srcBox{
	width: 100%;
	padding-top:20px;
	font: 600 15px/18px "Lato", Helvetica, sans-serif;
}

.srcHsl a{
	font: 600 15px/18px "Lato", Helvetica, sans-serif;
}

.srcHsl a:hover{
	color: #0a6acc;
}

#banner{
	padding-top: 45px;
	padding-left: 35px;
  	padding-right: 35px;
}

#banner .Carousel-Cont{
	width: 100%;
}

#footer{
	min-height:150px;
	background: -o-linear-gradient(0deg, #074b44, #0d6259); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(0deg, #074b44, #0d6259); /* For Firefox 3.6 to 15 */
	background: linear-gradient(0deg, #0a746a, #0e5a53); /* Standard syntax */
	*background: linear-gradient(rgba(10,116,106,.9), rgba(10,116,106,.9)), url("../images/bg4.jpg");
	padding-top: 35px;
	padding-left: 35px;
  	padding-right: 35px;
}

#footer .Main-Footer{
	width: 100%;
	display: flex;
}

#footer .Footer-Left{
	width: 55%;
}

#footer .Footer-Mid{
	width: 10%;
}

#footer .Footer-Right{
	width: 35%;
}

#footer .Footer-Title{
	font: 600 12px/16px "Lato", Helvetica, sans-serif;
	color:#fac305;
	padding-bottom:1px;
}

#footer .Footer-Text{
	font: 300 11px/14px "Roboto", Helvetica, sans-serif;
	color:#e1e1e1;
	padding-bottom:20px;
}

#footer .Footer-Medsos{
	display: block;
	margin-left: auto;
	margin-right: auto
}

.medsos-icon {
	width: 35px;
	height: 35px;
}

.medsos-icon:hover{
	opacity: 0.7;
}

.cpr{
	font: 600 12px/14px "Lato", Helvetica, sans-serif;
	color: #262626;
	padding-top:20px;
	padding-bottom:20px;
	text-align:center;
}

/*=======================================================
J-CAROUSEL
=========================================================*/
.line {
	background: transparent url(../images/line.png) repeat-x;
	height: 5px;
	margin-top: 10px;
	background-position: center;
}

.carousel {
	padding-top: 5px;
	margin-bottom: 0px;
}
.carousel ul li {
	background: none;
	width: 190px;
	margin-right: 3px;
	padding: 0;
}
.jcarousel-direction-rtl {
	direction: rtl;
}
.carousel .jcarousel-container {
	display: block;
	overflow: hidden;
}
.carousel .jcarousel-item {
	width: 190px;
	height: 86px;
}
.carousel .jcarousel-item img {
	width: 190px;
	height: 70px;
	border: 0px solid #d1d1d1;
}
.carousel .jcarousel-container {
	display: block;
	overflow: hidden;/*height: 145px;*/
}
.carousel .jcarousel-clip-horizontal {
	width:  100%;
	/*height: 145px;*/
	overflow: hidden;
	display: block;
}
.carousel .jcarousel-item {
	width: 190px;/*height: 145px;*/
}
#carousel-scroll {
	float: right;
	margin-top: -38px;
	width: 60px;
}
#prev {
	float: left;
	background: #fff url(../images/controls.png) no-repeat left top;
	display: block;
	cursor: pointer;
	width:23px;
	height:23px;
	border: 1px solid #dbdbdb;
}
#next {
	float: right;
	margin-left: 5px;
	background: #fff url(../images/controls.png) no-repeat right top;
	display: block;
	cursor: pointer;
	width:23px;
	height:23px;
	border: 1px solid #dbdbdb;
}
#prev:hover {
	background-position: bottom left;
}
#next:hover {
	background-position: bottom right;
}
.overlay {
	text-align:center;
	font: 400 11px/15px "Roboto", Helvetica, sans-serif;
}

.border-solid{
	border: solid 1px #990000;
}