/* 
Theme Name: Ourpositivibe Theme
Author: SAWALA Technology
Author URI: https://sawala.co/
Description: Custom theme for Ourpositivibe
Version: 5.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

*
{
	text-decoration: none;
	margin: 0;
	padding: 0;
	color: #4b4b4b;
}

.head.navbar .navbar-nav .menu-item a.nav-link{
	position: relative;
}

.head.navbar .navbar-nav .menu-item .nav-link
{
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	font-size: 18px;
	color: #000;
}

.head.navbar .navbar-nav .menu-item.active .nav-link::after,
.head.navbar .navbar-nav .menu-item .nav-link::after {
    content: '';
    display: block;
    margin: 0px auto;
    height: 2px;
    background: #4b4b64;
}

.head.navbar .navbar-nav .menu-item .nav-link::after{
    width: 0;
    transition: width .3s;
}

.head.navbar .navbar-nav .menu-item.active .nav-link::after,
.head.navbar .navbar-nav .menu-item .nav-link:hover::after {
    width: 100%;
}

.footer.navbar .navbar-nav .menu-item .nav-link
{
	color: #4b4b4bae;
	font-size: 18px;
	font-weight: 500;
	font-family: 'Lato', sans-serif;
}
.benner {
	max-height: 250px;
	overflow-y: hidden;
	position: relative;
}

/*.benner:before {
	content: '';
	position: absolute;
	z-index: 98; 
	top:0; 
	bottom: 0; 
	width: 100%;
	background-color: rgba(0,0,0,0.30);
}*/
.benner.over {
	max-height: 400px;
	overflow-y: hidden;
	position: relative;
}
.effect-dark{
	position: relative;
	z-index: 3;
}

.effect-dark:before{
	content: '';
	position: absolute;
	z-index: 98;
	top:0;
	bottom: 0;
	width: 100%;
	background-color: rgba(0,0,0,0.30);
}

.benner:before {
	content: '';
	position: absolute;
	z-index: 98; 
	top:0; 
	bottom: 0; 
	width: 100%;
	background-color: rgba(0,0,0,0.30);
}
.element-center-np{
    display: flex;
    justify-content: center;
    align-items: center;
}
.element-center{
	position: relative;
	z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
}
.element-center.text{
	position: absolute; 
	top:0; 
	bottom: 0; 
	width: 100%;
}
.element-center.text .title{
	font-family: 'Lato', sans-serif;
	font-size: 3.2em;
	font-weight: bold;
	color: #fff;
}

.container.my{
	min-height: 100vh;
	padding-bottom: 20vh;
	padding-top: 5vh;
}
section .title{
	font-family: 'Lato', sans-serif;
	font-size: 28pt;
	font-weight: 600;
	text-align: center;
	color: #4b4b4b;
	padding: 10px 0px

}
.title.underline{
	background: transparent;
	position: relative;
	margin: auto;
    display: flex;
    justify-content: center;
}
.title.underline:before{
	content: '';
	position: absolute;
	bottom: 0px;
	display: inline-block;	
	background-color: #4b4b4b;
	height: 3px;
	width: 50px;
}

article .title{
	font-size: 18pt;
	text-align: left;
	color: #000;
}
article ul, article ol{
	padding-left: 40px
}
article img{
	width: 100%;
	height: auto;
}
article figure{
	width: 100%;
}
.position-lg-absolute{
	position: static;
}

#deskripsi p
{
	width: 80%;
	text-align: center;
}

#layanan
{
	height: 100vh;
	width: 100%;
}

#indicate
{
	height: 90vh;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

#text-layanan
{
	display: flex;
	align-items: center;
	justify-content: center;
	/*background-color: #e1a678;*/
	height: 20vh;
	font-family: 'Lato', sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 10px;
}

#text-layanan::after
{
	position: absolute;
	content: '';
	border-bottom: 1.3px solid #000;
	width: 25px;
	height: 7vh
}

#main-layanan
{
	width: 80%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 7px;
	overflow: hidden;
}

#box-img-1
{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 60%;
	border-radius: 3px;
	overflow: hidden;
}

#box-img-2
{
	background-image: url('assets/photos/photo_2_400px.jpg');
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 25%;
	border-radius: 3px;
	overflow: hidden;
}

#box-img-3
{
	background-image: url('assets/photos/photo_3_400px.jpg');
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 40%;
	border-radius: 3px;
	overflow: hidden;
}

#box-img-4
{
	background-image: url('assets/photos/photo_4_400px.jpg');
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 20%;
	border-radius: 3px;
	overflow: hidden;
}

#box
{
	background-image: linear-gradient(to right, #3B383A 5%, #3B383A53 95%);
	height: 100%;
	border-radius: 3px;
	padding: 25px;
}

#box h1
{
	font-family: 'Lato', sans-serif;
	font-size: 1.4em;
	margin-bottom: 5px;
	color: #F8FCFF;
}

#box p
{
	font-family: 'Lato', sans-serif;
	font-size: 0.6em;
	width: 80%;
	color: #F8FCFF;
}

#team-section
{
	position: relative;
	width: 100%;
	height: 60vh;
	display: grid;
	place-items: center;
}

#savier
{
	width: 80%;
	margin: 0 auto;

}

#team-top
{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Lato', sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	color: #4b4b4b;
	padding-bottom: 20px;
}

#team-top::before
{
	position: absolute;
	content: '';
	border-bottom: 0.1em solid #4B4B4B;
	width: 30px;
	height: 50px;
}

#team-list
{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
}

#team-member
{
	width: 100%;
	display: grid;
	place-items: center;
}

#member-image img
{
	width: 150px;
	height: 150px;
	/* clip-path: circle(35%); */
	clip-path: circle(50%);
}

#member-name
{
	font-family: 'Lato', sans-serif;
	font-size: 18px;
}

#member-rank
{
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	color: #00000081;
}
#partner
{
	width: 100%;
	height: 60vh;
}

#part-con
{
	width: 80%;
	margin: 0 auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

#part-judul
{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Lato', sans-serif;
	font-size: 1.4em;
	color: #4b4b4b;
	font-weight: bold;
	padding: 20px 0;
}

#box-con
{
	display: inline-flex;
	width: 100%;
}

#part-box
{
	display: grid;
	grid-template-columns: 30% 70%;
	grid-template-rows: 50px 50%;
	padding: 20px 10px;
	overflow: hidden;
	border: 1px solid #000;
	margin: 0 10px;
	border-radius: 5px;
	width: 100%;
}

#part-container
{
	width: 100%;
	height: 60vh;
	padding: 20px 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 0;;
}

.part-sice
{
	width: 80%;
	margin: 0 auto;
}

.ads
{
	margin: 10px 0;
}

.greter
{

	cursor: default;
}

#part-quote
{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 10px;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	font-weight: bold;
}

#part-img
{
	width: 100%;
	height: auto;
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 130px;
}

#part-img img
{
	width: 80%;
	height: auto;
	/* clip-path: circle(35%); */
	clip-path: circle(50%);
}

#part-name
{
	width: 100%;
	height: auto;
	position: relative;
    margin-top: 130px;

}

#part-name-con
{
	display: grid;
	grid-template-columns: 1fr;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

#part-name-real
{
	font-family: 'Lato', sans-serif;
	font-size: 14px;
}

#part-name-rank
{
	font-family: 'Lato', sans-serif;
	font-size: 10px;
	color: rgba(0,0,0,0.45);
}

#contact-link
{
	width: 100%;
	height: 25vh;
	background-color: #292925;
	display: flex;
	align-items: center;
	justify-content: center;

}

.contact-container
{
	width: 500px;
	text-align: center;
}

#desc
{
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	font-weight: bold;
	font-size: 23px;
	text-align: center;
	margin-bottom: 15px;
}

#contact-link a
{
	background-color: #fff;
	padding: 7px 15px;
	border-radius: 20px;
	margin: 5px 0;
	font-family: 'Lato', sans-serif;
	font-size: 12px;
	color: #292925;
	border: 2px solid #fff;
}

#contact-link a:hover
{
	background-color: #292925;
	color: #fff;
	transition: 0.25s;
}

.happy
{
	background-color: #02010416;
	width: 100%;
	padding: 20px 10px;
}

.happy-text
{
	font-family: 'Lato', sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	color: #4b4b4b;
	width: 100%;
	text-align: center;
	margin: 20px 0;
	position: relative;
}

.happy-text::after
{
	content: '';
	position: absolute;
	border-bottom: 0.1em solid #4B4B4B;
	width: 30px;
	height: 40px;
	left: 50%;
	transform: translateX(-50%);
}

.happy-items
{
	margin: 50px 0;
	width: 100%;
	overflow: hidden;
}

.happy-box
{
	background-color: #fff;
	margin: 0 15px;
	padding: 0 15px;
	border-radius: 5px;
}

.about
{
	width: 80%;
	margin: 0 auto;
	padding: 50px 0;
}

.about h1
{
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	color: #4b4b4b;
	font-weight: bold;
	display: grid;
	place-items: center;
	padding-bottom: 20px;
	position: relative;
}

.about h1::after
{
	content: '';
	position: absolute;
	width: 40px;
	height: 3vh;
	border-bottom: 2px solid #4b4b4b;
}

.about p
{
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	color: #4b4b4b;
}

.bg-grey
{
	background-color: rgba(0,0,0,0.15);
}

.bg-white
{
	background-color: white;
}

#page-contact
{
	width: 40%;
	margin: 0 auto;
	height: 100vh;
	position: relative;
}

#kontak-judul
{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Lato', sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	color: #4b4b4b;
	padding: 25px 0;
}

#kontak-judul::after
{
	content: '';
	position: absolute;
	width: 30px;
	height: 7vh;
	border-bottom: 2px solid #4b4b4b;
}

#kontak-mas
{
	display: grid;
	width: 100%;
	grid-template-columns: 1fr 1fr;
	position: relative;
}

#email
{
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: bold;
}

#email p #email_icon
{
	width: 20px;
	margin-right: 15px;
}

#telepon
{
	width: 100%;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: bold;	text-align: right;
}

#telepon p #phone_icon
{
	width: 20px;
	margin-right: 15px;
}

#alamat
{
	padding: 10px 0;
	font-family: 'Lato', sans-serif;
}

#alamat h2
{
	font-size: 1em;
	font-weight: bold;
	color: #4b4b4b; 
	margin: 0;
}

#alamat p
{
	font-size: 0.9em;
	color: #4b4b4b;
}

#form-data
{
	width: 100%;
	display: grid;
}

#form-3
{
	width: 100%;
	padding: 10px 15px;
	border: none;
	border-radius: 3px;
	background-color: rgba(0,0,0,0.15);
	font-family: 'Lato', sans-serif;
	color: #4b4b4b;
	outline-color: rgba(0,0,0,0.25);
	resize: vertical;
	height: 175px;
	margin: 5px 0;
}

.bes
{
	width: 100%;
	position: relative;
	background-color: blue;
}

#form-data button
{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin: 10px 0;
	border: none;
	border-radius: 4px;
	padding: 5px 20px;
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	background-color: #292929;
	color: #fff;
}

#back-img
{
	background-image: url('assets/photos/3.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 35%;
	width: 100%;
	height: 50vh;
}

#back-img::after
{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.30);
	z-index: 9;
}

.backcontainer
{
	position: relative;
	width: 100%;
	min-height: 100vh;
	background-color: rgba(0,0,0,0.05);
	z-index: 999;
	padding: 20vh 0px;
}
#post-con
{
	position: absolute;
	width: 60%;
	display: grid;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000
	/*background-color: black;*/
}

.paginate
{
	text-align: center;
	margin: 100px 0;
}

.paginate .page-numbers
{
	color: #4b4b4b;
	font-family: 'Lato', sans-serif;
	font-size: 1em;

}

.post-judul
{
	width: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 50px 0;
}

.post-judul h2
{
	font-family: 'Lato', sans-serif;
	font-size: 3.2em;
	font-weight: bold;
	color: #fff;
}

.pos-absolut
{
	position: relative;
}

#thumbnail
{
	width: 100%;
	height: auto;
	/*background-color: blue;*/
	grid-row-start: 1;
	grid-row-end: 2;
	overflow: hidden;
}

#thumbnail img
{
	width: 100%;
	height: auto !important;
	/* height: 300px; */
	border-radius: 10px 10px 0 0;
	object-fit: cover;
}

#post
{
	/*background-color: green;*/
	margin: 10px 0;
	display: grid;
	grid-template-rows: 200px 200px;
}

#post-card
{
	padding: 25px;
	border-radius: 0 0 10px 10px;
	background-color: #fff;
}

#post-card h3
{
}


#post-card h3 a
{
	color: #4b4b4b;
	font-family: 'Lato', sans-serif;
	font-size: .9em;
	font-weight: bold;
}


#post-card #time
{
	color: #4b4b4bae;
	font-family: 'Lato', sans-serif;
	font-size: .7em;
}

#post-card p
{
	color: #4b4b4b;
	font-family: 'Lato', sans-serif;
	font-size: .9em;
	padding: 5px 0;
}

#post-card #next-link
{
	margin: 15px 0;
}

#post-card #next-link a
{
	color: #4b4b4b;
	font-family: 'Lato', sans-serif;
	font-size: .9em;
}

#post-card #next-link a #next_icon
{
	width: 30px;
	height: auto;
	object-fit: cover;
	margin-left: 10px;
}

#bg-thumbnail
{
	width: 100%;
	height: auto;
	overflow: visible;
	margin-bottom: 20px;
}

#bg-thumbnail img
{
	width: 100%;
	height: auto;
}

#postingan
{
	width: 80%;
	margin: 0 auto;
	padding-bottom: 20px;
}

#postingan h3
{
	font-family: 'Lato', sans-serif;
	font-size: 26px;
}

#postingan figure img
{
	width: 100%;
	height: 50vh;
}

#post-time
{
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	color: rgba(0,0,0,0.70);
}

#postingan p
{
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	text-align: justify;
	margin: 20px 0;
}

#postingan h2
{
	font-family: 'Lato', sans-serif;
	font-size: 22px;
	margin-top: 10px;
}

#postingan #share
{
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	font-weight: bold;
	margin: 50px 0;
}

#postingan #share a
{
	color: #000;
	margin: 0 7px;
}

#footer
{
	position: relative;
	height: 150px;
	margin-top: -150px;
	clear: both;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 10px 2px 10px rgba(0,0,0,0.45);
	z-index: 999;
	background-color: white;
}

#cons
{
	width: 80%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 350px 1fr;
}

#left-foot
{
	display: flex;
	align-items: center;
}

#mid
{
	display: grid;
	grid-template-rows: 30px 15px 15px;
	padding: 1px 0;
}

#sig
{
	display: flex;
	align-items: center;
}

#sig a
{
}

#sig a img
{
	width: 130px;
	margin-bottom: 15px;
	height: auto;
	object-fit: cover;
}

#company
{
	font-family: 'Lato', sans-serif;
	font-size: .7em;
	color: #4b4b4bca;
	font-weight: bold;
}

#adress
{
	font-family: 'Lato', sans-serif;
	font-size: .7em;
	color: #4b4b4bae;
}

#right-foot
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

#right-foot .menu-menu-2-container
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

#right-foot .menu-menu-2-container ul
{
	display: flex;
	list-style: none;
	margin: 0;
}

#right-foot .menu-menu-2-container li
{
	padding: 0 8px;
}

#right-foot .menu-menu-2-container li a
{
	color: #4b4b4bae;
	font-size: .9em;
	font-family: 'Lato', sans-serif;
	text-decoration: none;

}

.slider {

	width: 50%;

	margin: auto;

}



.slick-slide {

  margin: 0px 20px;

}



.slick-slide img {

  width: 100%;

}



.slick-prev:before,

.slick-next:before {

	color: black;

}

.sm-box {

width: 184px;

height: 200px;

background-color: rgba(0,255,0,0.5);

padding: 20px;

float: left;

display: inline-block;

margin: auto 5px;

font-size: 20px;

}

@media(min-width: 992px){
	.position-lg-absolute{
		position: absolute;
	}
}

@media(min-width: 768px){
	article .title{
		font-size: 28pt;
	}
	#bg-thumbnail{
	height: 50vh;
	overflow: hidden;
	margin-bottom: 20px;
	}
}

.jumbotron .section{
	padding: 40px 50px
}

.jumbotron h5{
	font-size: 3.2em;
}

.jumbotron p{
	color: white !important;
}

@media(max-width: 768px){
	.jumbotron h5{
		font-size: 2.2em !important;
	}

	.jumbotron .section{
		padding: 40px 25px
	}
	
}






.project-tab {
    padding-top: 10%;
    margin-top: -8%;
	width: 100% !important;
}
.project-tab #tabs{
    background: #007b5e;
    color: #eee;
}
.project-tab #tabs h6.section-title{
    color: #eee;
}
.project-tab #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #0062cc;
    background-color: transparent;
    border-color: transparent transparent #f3f3f3;
    border-bottom: 3px solid !important;
    font-size: 16px;
    font-weight: bold;
	font-family: 'Lato', sans-serif;

}
.project-tab .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: #0062cc;
    font-size: 16px;
    font-weight: 600;
	font-family: 'Lato', sans-serif;

}
.project-tab .nav-link:hover {
    border: none;
}
.project-tab thead{
    background: #f3f3f3;
    color: #333;
}
.project-tab a{
    text-decoration: none;
    color: #333;
    font-weight: 600;
}