@import 'fonts/fonts.css';

body {
	font-family: 'David Libre', serif;
	font-size:14px;
	color: #000;
	background-color:#4894d1;
	margin:0;
}

.container{margin:0px;/*overflow: hidden;*/overflow: scroll;}

ul, ol, dl {
	padding: 5px;
	margin: 0;
	color: #000;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 3px;
	padding-left: 3px;
	color: #000;
	text-align: left;
}
 
a:hover, a:active, a:focus { 
	text-decoration: none;
}

h1 { 
	text-align:right;
	padding: 0px 0px 0px 0px;
	padding-right:15px;
	font-size: 16px;
	color:#05344e;
	/*text-shadow: 2px 3px #009;*/
	text-shadow:3px 3px #aaa;
}

h1.judul{
	padding: 0px 0px 0px 0px;
	padding-bottom:30px;
	text-align:center;
	text-shadow:none;
} 

.header {
	height: 80px;
	width: 100%;
}

@media only screen and (max-width: 768px) {
	.header {
	height: 160px;
	width: 100%;

}
}

.header1 {
	height: 80px;
	margin: auto;
	width:1150px;
	background: url(images/tjyheaderx.png) no-repeat; 
	background-size: 500px 80px;
}

@media only screen and (max-width: 768px) {
    .header1 {    	
    height: 65px;
	margin: auto;
	width:auto;
	background: url(images/tjyheaderx.png) no-repeat; 
    background-size: 100% 100%;
    }
}

.menu {
	position: relative;
	height: 20px;
	width:625px;
	float:right;
	padding-top:40px;
	margin:auto;
}

.menu ul {
	list-style:none;
}

.menu ul li a {
	float:left;
	display:block; 
	color:#CCFFFF; 
	text-decoration:none; 
	margin-left:15px;
	font-size:15px;
	font-weight:bold; 
}

.menu ul li a:hover {
	color: #ccc;
	text-decoration: none;
}

.menu ul li a:active {
	color: #0FF;
	text-decoration: none;
}

@media screen and (max-width: 768px){
    .menu{
	width: 383px;
	height: 20px;
	padding-top: 90px;
	display: flex;
	flex-direction: column;
	line-height: 1.6;
    }
    .menu ul{
    background:#c66118;
	border: 2px solid;
    }
}

.content {
	/*background-image:url(images/header_op.jpg);
	background-color: #c6d4e1;*/
	background-image: linear-gradient(#8b9da9, #fff6e4);
    box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
	background-image: url(images/city2.jpg);
	background-repeat:repeat-x;
	width: 100%;
	height:460px;
	padding-top:20px;
	border-top:10px solid #FFF;
	border-bottom: 15px solid #FFF;
	background-position:center;
}

.innercontent {
	margin : auto;
	width: 961px;
	/*background:red;*/
}

@media screen and (max-width: 768px) {
    .content {
	/*background-image:url(images/header_op.jpg);
	background-color: #c6d4e1;*/
	height:800px;
	/*background-size: cover;*/
	}
	.box.box_video{
		display: none;
	}
	.innercontent {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/*background:#fff;*/
	/*opacity:0.9;*/
}

/*	.box_profil {
	width: 262px;
	height:162px;
	border:3px solid #fff;
	border-radius: 10px;
	margin : 10px;
	float:none;
	}*/
}

/*@media only screen and (max-width: 1280px) {
    .content {
	background-image: linear-gradient(#8b9da9, #fff6e4);
    box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
	background-image: url(images/city2.jpg);
	background-repeat:repeat-x;
	width: 1250px;
	height:460px;
	padding-top:20px;
	border-top:10px solid #FFF;
	border-bottom: 15px solid #FFF;
	background-position:center;
}
}*/

.innercontentbox {
	width: 961px;
	height: 440px;
	position: relative;
	margin: auto;
	background:#fff;
	/*opacity:0.9;*/
}

@media only screen and (max-width: 768px) {
    .innercontentboxporto {
    width: 1250px;
	height: 440px;
	position: relative;
	margin: auto;
	background:#fff;
    }
    }

@media only screen and (max-width: 1280px) {
    .innercontentboxporto {
    width: 1250px;
	height: 440px;
	position: relative;
	margin: auto;
	background:#fff
    }
    }

.innercontentboxporto {
	width: 1250px;
	height: 440px;
	position: relative;
	margin: auto;
	background:#fff;
	/*opacity:0.9;*/
}

.innercontentbox_left {
	width: 690px;
	height: 405px;
	margin: auto;
	float: left;
	color: #000;
	background: #F0F0F0;
	padding: 20px 15px 15px 15px;
	line-height: 1.5em;
	font-size: 1.1em;
}

.innercontentbox_porto {
	width: 980px;
	height: 405px;
	margin: auto;
	float: left;
	color: #000;
	background: #F0F0F0;
	padding: 20px 15px 15px 15px;
	line-height: 1.5em;
	font-size: 1.1em;
}

.submenu{
	padding-top:35px;
	padding-right:0px;
}

.submenu a{
	width: 225px;
	display: block;
	height: 30px;
	line-height:30px;
	color: black;
	border: none;
	border-bottom: thin #fff solid;
	text-decoration:none;
	text-align:left;
	padding-left:15px;
	position:relative;
	text-shadow: 1px 1px #fff;
}

.submenu a:hover{
	background: rgba(5,52,78,.6);
	color: #fff;
	text-shadow: 1px 1px #05344e;
}

.submenu a:hover::after{
	content:"";
	display: block;
	position:absolute;
	z-index:1000;
	width: 0; 
	height: 0; 
	right:-15px;
	bottom:0px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
	border-left: 15px solid rgba(5,52,78,.6);
}

#map,.imgbox{
	width : 240px;
	height: 440px;
	float: left;
	color: #FFF;
	background:#05344e;
	padding-right:0px;
}
	
.imgboxprofil{
	background:url(images/sidebarx.jpg) no-repeat ;
}
		
.imgboxpajak{
	background:url(images/sidebarx.jpg) no-repeat;
}

.imgboxperaturan{
	background:url(images/sidebarx.jpg) no-repeat;
}
	
.imgboxgaleri{
	background:url(images/3.jpg) no-repeat;
}		



.box {
	width: 262px;
	height:162px;
	border:3px solid #fff;
	border-radius: 10px;
	margin : 10px;
	float:left;
}

.box_desc{ 
	background: #fff;
	text-align:justify; 
	color:#000000; 
	font-size:14px; 
	line-height:1.1em;
	font-weight:300; 
	opacity:0;
	width:100%;
	height:100%; 
}

.box_desc:hover{ 
opacity:0.8;
}

.box_desc::after{ 
	content: "";
	padding:10px;
	display:block;	
	font-family: 'David Libre', serif;	
}

.box_profil {
	background : url(images/3x.jpg) no-repeat;
    background-position: center;
}

.box_profil .box_desc:hover::after{ 
	content: "PT. Trijaya Utama Konsultan adalah suatu perusahaan jasa konsultan swasta yang bergerak dibidang Studi, Pelatihan, Perencanaan dan Desain. Perusahaan ini didirikan pada tanggal 14 Mei 2010, berdasarkan akte Notaris Andi Isnain, SH Nomor 106 yang berkedudukan di Medan. lihat selengkapnya<<";
}

.box_pajak {
	background : url(images/cover1.png) no-repeat; 
    background-size: 100%;
}

.box_pajak .box_desc:hover::after{ 
	content: "Informasi tentang Layanan Perusahaan kami, bisa anda lihat pada halaman LAYANAN KAMI, ...Klik disini<<";
}

.box_galeri {
	background:url(images/2x.jpg) no-repeat;
}

.box_galeri .box_desc:hover::after{ 
	content: "Kami merangkum semua foto kegiatan Perusahaan dalam album galeri ini, ...Klik disini<<";
}

.box_peraturan {
	background : url(images/4z.jpg);
}

.box_peraturan .box_desc:hover::after{ 
	content: "Pengalaman PT. TRIJAYA UTAMA KONSULTAN bisa anda lihat pada halaman PORTOFOLIO,...Klik disini<<";
}

.box_video {
	width: 262px;
	height:162px;
	border-radius: 10px;
	margin : 10px;
	margin-right:80px;
	margin-left:15px;
}

.content ul, .content ol { 
	padding: 0 15px 15px 40px;	
	background-size:cover;
}

.isimenu{
	display:none;
}

.footer {
	width: 950px;
	background-color: #4894d1;
	padding-top:10px;
	margin:auto;
}



/*@media only screen and (max-width: 1280px) {
    .footer {
    width: 950px;
    background-color: #4894d1;
    padding-top:10px;
    padding-left: 150px;
    margin:auto;
    padding-bottom: 10px;

 }
 }*/

.alamat{
	font-size:13px; text-align:center; line-height:1.5em;color:#FFF;
}

.sitemap{
	text-align:center; width:800px; margin:auto
}

.sitemap a:link {
	color: #6FF;
	font-size:10px;
	text-decoration: none;
}
.sitemap a:hover {
	color: #9FF;
	text-decoration: underline;
}
.sitemap a:visited {
	color: #9FF;
	text-decoration: underline;
}

@media only screen and (max-width: 768px) {
    .footer {
    width: 100%;
	background-color: #4894d1;
	padding-top:10px;
	margin:auto;
	padding-bottom: 10px;

 	}

 	.alamat{
	font-size:13px; text-align:center; line-height:1.5em;color:#FFF;
	}

	.sitemap{
	text-align: center;
	width: 100%;
	margin: 2px;
	}
}

.boxalbumlist, .boxgambarlist{
	width: 930px;; overflow-x:hidden; height:auto; padding-top:0px;
}

.boxalbum {
	display:table-cell;padding: 27px;
}

.imgalbum {
	width:200px;height:200px; border-radius:25px; border: solid 2px #05344e; box-shadow: 2px 2px #06F;
}

.titlealbum{
	text-align:center; padding-top:15px; font-weight:bold;
}

.boxgambar{
	display:block;
	float: left;
	padding: 10px 10px 10px 0px;
}
.boxgambar:nth-child(4n+4){
	padding-right: 0px;
}

.boxgambar a{
	width: 215px;
	height: 215px;
	display: table-cell;
	background: #05344e;
	border: 1px solid #05344e;
	vertical-align: middle;
}

.boxgambar img{
	width:100%;
	border: none;
}

.descgambar {
	text-align: left;
	padding: 10px 10px 10px 0px;
	height: 30px;
	width: 215px;
}

.boxpreview {
	z-index: 10001;
	/*background:red;*/
	position: absolute;
	top: 85px;
	width: 100%;
	height: 428px;
	color: #fff;
}
.boxpreview1 {
	background:#05344e;
	margin:auto;
	width: 931px;
	height: 398px;
	padding: 15px;
}

.imgpreview {
	background: black;
	width: 700px;
	height: 400px;
	float:left;
	/*display: table-cell;*/
	vertical-align: middle;
	text-align: center;
	position: relative;
}

.imgpreview img.imgpreview1 {
	height: 100%;
}

.albpreview {
	width:215px;
	font-weight:bold;
	float: right;
	clear: right;	
}
.descpreview {
	width:215px;
	float: right;
	clear: right;
	padding-top: 15px;
}	

.featured {
	display: block;
	position: absolute;
	top: 50%;
	opacity:0.1;
	cursor: pointer;
}
.imgpreview:hover .featured{
	opacity:0.5;
}
.featured.prev {
	left: 10px;
}
.featured.next {
	right: 10px;
}

.zebra-table {
	width: 100%;
	border-collapse: collapse;
	/*box-shadow: 0 0px 3px 1px #ddd;*/
	box-shadow: 2px 2px #06F
	overflow: hidden;
	/*border: 5px solid #05344e;
	/border-radius: 10px;*/
}
.zebra-table th,.zebra-table td{
	vertical-align: top;
	padding: 7px 5px;
	text-align: left;
	margin: 0;
	color: #000;
}
.zebra-table tbody tr:nth-child(odd) {
	background: #05344e;
	background-color: #CCCCCC;
}

#fotogaleri {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#fotogaleri:hover {opacity: 0.7;}

/* The Modal (background) */
.popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.popup-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.popup-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}