/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 767px) {

	#Banner .blacksection::before {
		display: none;
	}
	#Banner {
		width: 100%;
	}
	header {
		background: #282c47; /* Old browsers */
		position: fixed;
		width: 100%;
		padding: 20px;
		z-index: 99999;
	}
	header .mobile-logo {
		display: block;
		width: 150px;
	}
	.menu-toggle {
		top: 17px;
		right: 25px;
	}
	#Banner .logo {
		display: none;
	}
	.mobile-logo img {
		width: 100%;
		height: auto;
	}
	#Banner h1 {
		font-size: 40px;
		right: auto;
		top: 50%;
		transform: translate(-50%,-50%);
		opacity: 1;
		left: 50%;
		text-align: left;
	}
	.ti-mobile a{
		font-size: 13px;
	}
	.col-md-6 {
		text-align: center;
		font-size: 12px;
	}
	.welcome h5 marquee {
	    margin-top: 15px;
	    font-size: 12px;
	}
	.fixed-bottom {
    position: absolute;
    bottom: 30px;
    margin-left: 25px;
    font-size: 14px;
	}
	.mscroll {
	display: block;
    }
    button.btn.btn-primary {
    font-size: 11px;

	}
	button.btn.btn-outline-primary {
    font-family: 'Futura PT book';
    font-size: 12px; 
	}
	.mobile-header {
		display: block;
	}
	i.fa.fa-whatsapp a{
		color: #fff;
		font-size: 13px;
	}
	.modal {
		top: 100px;
	}
	.modal-title {
		font-size: 14px;
	}
	#map_canvas.iframe-container iframe {
		width:-webkit-fill-available;
	}
	#Services {
		padding: 123px 0;
	}
	#Services h2 {
	    font-size: 38px;
	    margin-bottom: 30px;
	}
	#Services .each-services img {
		padding-bottom: 10px;
	}
	.each-services {
	    margin-bottom: 40px;
	}
	#Harga {
		padding: 90px 0 50px 0;
	}
	#Harga h2 {
    font-size: 38px;
    margin-bottom: 30px;
	}
	.table_price_cont_bottm ul li {
    text-align: initial;
	}
	#Portofolio {
    padding-top: 100px;
    padding-right: 0px;
    padding-bottom: 90px;
    padding-left: 0px;
	}
	#Portofolio h4 {
		font-size: 18px;
	}
	#OurWork {
		padding: 123px 0;
	}
	#OurWork h2, #TestimonialsSlider h2 {
		font-size: 38px;
		margin-bottom: 30px;
	}
	#OurWork .grey-box {
		margin-bottom: 30px;
	}
	#OurWork .each-work {
		padding: 0 7px 10px;
		width: 145px;
		height: auto;
	}
	#OurWork .each-work img {
		width: 100%;
		height: auto;
	}
	#produk {
    padding: 123px 0;
	}
	.rig-cell h3 {
    font-size: 10px;
	}
	#OurBlog h2 {
		font-size: 38px;
	}
	#OurBlog {
	    padding: 95px 0;
	} 
	.each-block {
	    position: static;
	    width: auto;
	    padding: 0 0;
	    margin-bottom: 25px;
	    display: inline-block;
	}
	.blog-wrap {
		margin: 40px 0;
	}
	#Footer p {
		font-size: 34px;
	}
	.social-icons li i {
	    font-size: 26px;
	}
	.blog-wrap {
		height: auto;
	}
	#OurBlog .each-block {
		width: 100%;
	}
	#OurBlog .blog-wrap::before, #OurBlog .each-block::before {
		display: none;
	}
	#OurBlog .blog-wrap .blog-intro {
		width: 75%;
	}
	#Testimonials {
		padding-top: 85px;
		padding-left: 10px;
		padding-bottom: 30px;
        padding-right: 10px;
	}
	#Testimonials span {
		font-size: 50px;
	}
	#Testimonials h2 {
		font-size: 40px;
	}
	#Testimonials .title {
		width: 70%;
	}
	#Testimonials .testi-wrapper {
		margin-top: 50px;
	}
	#Testimonials .testi-wrapper .latest-testimonials {
		margin-right: 0;
	}
	#Testimonials .testi-wrapper .each-testi {
		width: 100%;
	}
	#Testimonials .testi-wrapper .old-testimonials {
		margin: 0 0 30px 0;
		height: auto;
	}
	#Testimonials .each-testi .profile {
		position: static;
	}
	#TestimonialsSlider {
		padding: 40px 0;
	}
	.testimonials-dtl p {
	    width: auto;
	    padding: 0 20px;
	}
	.testimonials-dtl h5 {
		padding-top: 20px;
	}
	.social-icons li {
		margin: 0 8px;
	}
	#Contact {
		padding-top: 95px;
	}
	#Kontak p {
		font-size: 20px;
	}
} 
/* Large devices (laptops/desktops, 992px and up) */
@media screen and (min-width: 768px) and (max-width: 991px){
	#Banner {
		width: 100%;
		height: 60vh;
	}
	body.active .mscroll {
    left: 40%;
	}
	header {
		background: #282c47; /* Old browsers */
		position: fixed;
		width: 100%;
		padding: 35px;
		z-index: 99999;
	}
	header .mobile-logo {
		display: block;
		width: 60px;
	}
	#Banner .logo {
		display: none;
	}
	.menu-toggle {
    right: 190px;
	}
	#sidebar-wrapper.active {
    right: 400px;
}
	#Banner h1 {
		color: #000;
	}
	.mobile-logo img {
		width: 300%;
		height: auto;
	}
	#Banner h1 {
		right: 16%;
		opacity: 1;
		color: #000;
	}
	.col {
		margin-left: 70px;
	}
	.col-md-6 span {
		text-align: center;
		font-size: 11px;
		color: #fff;
	}
	.row {
		color: #000;
	}
	.welcome h5 marquee {
    display: none;
	} 
	.container-fluid {
    margin-top: 115px;
	}
	i.fa.fa-whatsapp a{
		font-size: 12px;
		color: #fff;
	}
	#OurBlog .each-block::before , #OurBlog .blog-wrap::before {
		display: none;
	}
	#OurBlog .each-block {
		width: 100%;
	}
	#Services {
	   padding: 30px 0; 
	}
	#Services h2 {
		font-size: 40px;
		margin-bottom: 30px;
	}
	#Services .each-services img {
	    width: 58px;
	    padding-bottom: 10px;
	}
	#Services .each-services h3 {
		font-size: 22px;
		min-height: 50px;
	}
	#Services .each-services p {
		font-size: 16px;
	}
	#Banner .blacksection::before {
	    right: 0;
	    transform: rotate(50deg);
	    top: 0;
	}
	#OurWork h2, #TestimonialsSlider h2, #OurBlog h2 {
		font-size: 38px;
	}

	.blog-wrap:before {
		content: none;
	}
	#Footer p {
		font-size: 30px;
	}
	.social-icons li i {
		font-size: 36px;
	}
	#Testimonials .testi-wrapper {
		margin-top: 60px;
	}
	#TestimonialsSlider {
		font-size: 40px;
	}
	#Testimonials .testi-wrapper .latest-testimonials {
		margin-right: 0;
		width: 100%;
	}
	#Testimonials .testi-wrapper .old-testimonials {
		width: 46%;
	}
	} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media screen and (min-width: 992px) and (max-width: 1024px){
	#Banner .blacksection::before {
		width: 1200px;
	}
	#Banner h1 {
		font-size: 60px;
		color: #000;
	}
	.container-fluid {
	margin-top: 0px;
	}
	.col-md-6 span {
		text-align: center;
		font-size: 14px;
		color: #fff;
	}
	.menu-toggle {
    top: 37px;
    right: 60px;
    /*background: #272C47;*/
	}
	.welcome h5 marquee {
    display: none;
	}
	#OurBlog .each-block::before {
		right: -53px;
	}
	#OurBlog .each-block.two::before {
		left: -52px;
	}
	#Testimonials .testi-wrapper .each-testi {
		width: 31%;
	}
	
}
@media screen and (min-width: 1024px) and (max-width: 1366px){ 
	#OurWork .each-work {
		/*width: 45%;*/
	}
body.active #Banner .logo img {
/*	width: 51%;*/
	}
}