/*
Theme Name: Gravis
Theme URI: http://www.gravis-design.com/
Author: Gravis
Author URI: http://www.gravis-design.com/
Description: Theme of Gravis Website Design
Version: 1.0
License: Commercial
License URI: http://www.gravis-design.com/
Tags: vintage, retro, brown
Text Domain: gravis

/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus { outline: 0; }
body { background: #fff; line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
del { color: #333; }
ins { background: #fff9c0; text-decoration: none; }
hr { background-color: #ccc; border: 0; height: 1px; margin: 24px; margin-bottom: 1.714285714rem; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
small { font-size: smaller; }
img { border: 0; -ms-interpolation-mode: bicubic; }

/* 
font-family: 'Cherry Swash', cursive;
font-weight: 400, 700;
font-family: 'Noto Serif', serif;
font-weight: 400, 700;
 */

/* GENERAL */
body { font-family: 'Noto Serif', serif; font-size: 14px; color: #363636; background: url(images/background.jpg); }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: underline; color: #000; }
sup { font-size: 60%; }
strong { font-weight: bold; }
em { font-style: italic; }
.clear { clear: both; }
small { font-size: 12px; }

/* MENU TOP */
.menutop {
	background: url(images/menu-top.jpg) repeat-x left top;
	height: 40px;
	border-bottom: 2px solid #b8b1a4;
	box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
	font-family: 'Cherry Swash', cursive;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 500;
}
.menutop ul li { display: inline-block; margin: 0 6%; }
.menutop ul li a {
	color: #e5ded0;
	display: block;
	padding: 6px 10px;
	border-radius: 8px;
	border: 1px solid #644A31;
}
.menutop ul { text-align: center; }
.menutop ul li a:hover, .menutop ul .current-menu-item { background: #4e4537; box-shadow: 0 0 3px #1d1d1d; text-decoration: none; border: 1px solid #756b4d; }
.menutopwrap { min-width: 980px; width: 90%; margin: 0 auto; height: 40px; }
.menu-menu-top-left-container, .menu-menu-top-right-container { min-width: 350px; margin: 6px 0 0 0; width: 40%; }
.menu-menu-top-left-container { float: left; }
.menu-menu-top-right-container { float: right; }
.topcenter {
	text-align: center;
	position: absolute;
	width: 250px;
	height: auto;
	left: 50%;
	top: 0;
	margin-left: -125px;
}
.logo {
	width: 252px;
	height: 164px;
	border-radius: 0 0 10px 10px;
	border: 1px solid #8a7f61;
	box-shadow: 0 0 4px #1d1d1d;
	z-index: 1000;
	position: absolute;
	left: 50%;
	top: 0;
	margin-left: -126px;
	background: url(images/bg-logo.jpg) center top no-repeat;
	display: block;
}
.imglogo { margin: 6px auto; display: block; }
.website {
	color: #d3cbb6;
	font-size: 11px;
	position: absolute;
	left: 64px;
	bottom: 30px;
	display: block;
}

/* MIDDLE HOME */
.middle { margin: 86px auto 32px auto; }
#middlepage { width: 90%; min-width: 980px; }
.section { width: 90%; min-width: 980px; }
#section1 { margin: 220px auto 72px auto; }
#section2 { margin: 72px auto 96px auto; }
#section3 { margin: 0 auto; padding: 72px 0; }
.relungtop { background: url(images/relung-top.png) center top no-repeat; height: 24px; width: 210px; margin: 0 auto 18px auto; }
.relungbottom { background: url(images/relung-bottom.png) center top no-repeat; height: 24px; width: 210px; margin: 36px auto 0 auto; }
.sayhome { text-align: center; font-family: 'Cherry Swash', cursive; color: #4d4336; text-shadow: 1px 1px 1px #FFF; }
#say1 { font-size: 36px; margin-bottom: 14px; }
#say2 { font-size: 24px; margin-bottom: 14px;}
#say3 { font-size: 16px;}
#section3 #say1 { font-size: 32px; margin-bottom: 12px; }
#section3 #say2 { font-size: 16px; margin-bottom: 12px; }
#section3 #say3 { font-size: 20px; margin-bottom: 12px; }
.soliloquy-control-nav, .soliloquy-direction-nav { display: none !important; }
.slide .soliloquy-theme-classic .soliloquy-pager { display: none !important; }
.homefolio { text-align: center; margin: 64px 0 0 0; }
.soliloquy-container { top: 12px; left: 14px; z-index: 100; }
.slide {
	width: 292px;
	height: 166px;
	position: relative;
	display: inline-block;
	margin: 0 1.6%;
}
.tutupslide {
	background: url(images/bg-slide.png) no-repeat center top;
	width: 292px;
	height: 166px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 200;
}
.notes { border-top: 2px solid rgba(89, 80, 66, 0.30); border-bottom: 2px solid rgba(89, 80, 66, 0.30); background: rgba(255, 255, 255, 0.40); }
.noteswrap {
	margin: 20px auto;
	min-width: 980px;
	width: 90%;
	text-shadow: 1px 1px 1px #FFF;
	color: #362e23;
}
.noteswrap p { text-align: center; line-height: 20px; padding: 10px 0; }
.noteswrap a, .section a { color: #000; text-decoration: underline; }
.noteswrap a:hover, .section a:hover { text-shadow: 1px 1px 3px #B4B094; }
.featbox { text-align: center; margin: 72px auto 0 auto; min-width: 980px; width: 90%; }
.card {
	display: inline-block;
	position: relative;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	margin: 0 1.6%;
	z-index: 100;
}
.card .front {
	z-index: 900;
	text-align: center;
	-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
	box-shadow: 0 1px 5px rgba(0,0,0,0.9);
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	border: 4px solid #E5DED0;
    box-shadow: 0 0 5px #4a4a4a;
    overflow: hidden;
	border-radius: 600px 600px 600px 600px;
    width: 172px;
	height: 172px;
	/* -- transition is the magic sauce for animation -- */
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	margin: 0 auto;
	display: block;
}
.card .front img { border-radius: 600px; margin: 0 auto; width: 100%; height: 100%; }
.card:hover .front { z-index: 900; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); }
.card .back {
	float: none;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 800;	
	-webkit-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-transform: rotateY(-180deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
    box-shadow: 0 0 5px #293339;
    overflow: hidden;
	border-radius: 600px 600px 600px 600px;
    width: 172px;
	height: 172px;
	/* -- transition is the magic sauce for animation -- */
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	border: 4px solid #6B5138 !important;
	background: #ffffff;
	margin-left: -90px;
}
.card:hover .back {
	z-index: 1000;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
	box-shadow: 0 0 8px #ffffff;
}
.subround {
	margin: 26px 0 0 0;
	text-align: center;
	font-size: 16px;
	color: #72583F;
	line-height: 20px;
}
.back p {
	text-align: center;
	margin: 8px 0 0 0;
	padding: 0 10px;
	line-height: 16px;
	font-size: 12px;
}
.servicetitle {
	border-top: 2px solid rgba(89, 80, 66, 0.20);
	border-bottom: 2px solid rgba(89, 80, 66, 0.20);
	background: rgba(255, 255, 255, 0.20);
}
.servicewrap {
	padding: 16px 0;
	text-align: center;
	width: 90%;
	min-width: 980px;
	margin: 0 auto;
}
.service {
	border-top: 2px solid rgba(89, 80, 66, 0.30);
	border-bottom: 2px solid rgba(89, 80, 66, 0.30);
	background: rgba(255, 255, 255, 0.60);
	margin: 4px 0;
	padding: 48px 0 0 0;
}
.servicehor { margin: 24px auto 12px auto; min-width: 980px; width: 80%; }
.serviceleft { width: 50%; float: left; }
.serviceright { width: 50%; float: right; }
.servicethumb { float: left; width: 148px; text-align: center; }
.servicetext { margin: 0; padding: 0 16px 24px 164px; }
.service h2 { font-family: 'Cherry Swash', cursive; font-size: 22px; margin-bottom: 20px; color: #105b63; }
.service p { line-height: 20px; font-size: 14px; }
.code { width: 980px; margin: 0 auto; padding: 8px 0; text-align: center; }

/* FOOTER */
.copyright { text-align: center; margin: 0 0 72px auto; font-size: 10px; color: #998e7e; }
.copyright a { color: #998e7e; }
.copyright a:hover { color: #4D4336; text-decoration: underline; }
.menubottom {
	background: url(images/menu-top.jpg) repeat-x left top;
	height: 42px;
	border-top: 2px solid #b8b1a4;
	box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
	font-family: 'Cherry Swash', cursive;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 500;
}
.menubottomwrap {
	width: 90%;
	min-width: 980px;
	margin: 0 auto;
	position: relative;
	z-index: 500;
}
.servicelink { width: 80%; min-width: 980px; text-align: center; margin: 32px auto 64px auto; }
.servicelink a {
	display: inline-block;
	margin: 0 16px;
	color: #E5DED0;
	padding: 8px 16px;
	background: none repeat scroll 0 0 #4E4537;
	border-radius: 8px;
	border: 1px solid #71685b;
}
.servicelink a:hover { border: 1px solid #FFF; color: #FFF; box-shadow: 0 0 3px #424242; text-decoration: none; }
.icon { float: right; width: 200px; margin: 5px 0 0 0; text-align: right; }
.iconlink {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-position: center top;
	background-repeat: no-repeat;
	margin-right: 2px;
}
.iconlink:hover { background-position: center bottom; text-decoration: none; }
#home.iconlink { background-image: url(images/icon-home.png); }
#terms.iconlink { background-image: url(images/icon-info.png); }
#faq.iconlink { background-image: url(images/icon-faq.png); }
#blog.iconlink { background-image: url(images/icon-blog.png); }
#twitter.iconlink { background-image: url(images/icon-twitter.png); }
#facebook.iconlink { background-image: url(images/icon-facebook.png); }
#usa.iconlink { background-image: url(images/icon-usa.png); }
.contactbutton { float: left; }
.contactlink {
	display: block;
	color: #EFEDE7;
	font-size: 24px;
	padding: 10px 24px 0 64px;
	background: url(images/whatsapp.png) no-repeat 28px center #3D2B1E;
	height: 40px;
	border-left: 2px solid #B8B1A4;
	border-top: 2px solid #B8B1A4;
	border-right: 2px solid #B8B1A4;
	border-radius: 4px 4px 0 0;
	position: absolute;
	left: 0;
	top: -8px;
	box-shadow: 0 0 4px #333;
	z-index: 600;
	text-align: center;
	width: 191px;
}
.contactlink:hover { color: #FFF; text-decoration: none; background: url(images/whatsapp.png) no-repeat 28px center #000; }
.contactform {
	position: absolute;
	top: -494px;
	left: 0;
	background: #F4F1EC;
	width: 280px;
	height: 490px;
	z-index: 200;
	border-left: 2px solid #B8B1A4;
	border-top: 2px solid #B8B1A4;
	border-right: 2px solid #B8B1A4;
	border-radius: 4px 4px 0 0;
	box-shadow: 0 0 4px #333;
	overflow: hidden;
	font-family: 'Noto Serif', serif;
	display: none;
}
.thename {
	text-align: center;
	font-family: 'Cherry Swash', cursive;
	padding: 0;
	background: #3D2B1E;
	position: relative;
}
.theaddress {
	padding: 4px 0 10px 0;
	font-size: 11px;
	line-height: 16px;
	color: #BCB5A7;
	background: #3D2B1E;
	text-align: center;
	border-bottom: 1px solid #B8B1A4;
}
.thecontact { padding: 16px; position: relative; }
.thecontact .text { width: 226px; display: block; margin: 0 auto 8px auto; font-size: 11px; }
.thecontact textarea { height: 120px; }
input.text, textarea.text, select.text {
	background: #e2dfd8;
	padding: 4px 10px;
	border: 1px solid #684E35;
	border-radius: 4px;
	color: #787364;
	font-family: 'Noto Serif', serif;
	font-size: 14px;
}
input.text:hover, textarea.text:hover, select.text:hover { border: 1px solid #fff; box-shadow: 0 0 3px #333; }
input.text:focus, textarea.text:focus, select.text:focus {
	border: 1px solid #fff;
	box-shadow: 0 0 3px #333;
	background: #e8e7e3;
	color: #000;
}
.button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ccb795;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ccb795;
	box-shadow:inset 0px 1px 0px 0px #ccb795;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ad8d51), color-stop(1, #8f5a28) );
	background:-moz-linear-gradient( center top, #ad8d51 5%, #8f5a28 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ad8d51', endColorstr='#8f5a28');
	background-color:#ad8d51;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ab8748;
	display:inline-block;
	color:#faf5e8;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #38290e;
	cursor: pointer;
}
.button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8f5a28), color-stop(1, #ad8d51) );
	background:-moz-linear-gradient( center top, #8f5a28 5%, #ad8d51 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8f5a28', endColorstr='#ad8d51');
	background-color:#8f5a28;
}
.button:active { position:relative; top:1px; }
.kirim { text-align: right; padding: 4px 0 0 0; }
.privacy {
	text-align: right;
	font-size: 10px;
	font-style: italic;
	color: #99917e;
	line-height: 14px;
	margin: 8px 0 0 0;
}
.privacy a { color: #99917e; }
.close {
	padding: 2px;
	background: #C9C4B7;
	position: absolute;
	border-radius: 8px;
	top: 2px;
	right: 2px;
	border: 1px solid #000;
}
#closebutton { cursor: pointer; }
.clickhere {
	font-family: 'Cherry Swash', cursive;
	color: rgba(255, 250, 213, 0.40);
	position: absolute;
	top: 16px;
	left: 290px;
}
.contactform #loader { position: absolute; left: 16px; bottom: 56px; display: none; }
.contactform #notif {
	position: absolute;
	left: 0;
	bottom: 4px;
	width: 280px;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
}
.contactform .notifyes { position: relative; top: -200px; }
.sharing { float: right; width: 40px; margin: 5px 0 0 4px; text-align: right; }
#at15s {
	position: fixed !important;
	right: 5% !important;
	bottom: 44px !important;
	left: auto !important;
	top: auto !important;
}
#chatgravis {
	border: none !important;
	cursor: pointer;
	position: absolute;
	bottom: 42px;
	right: -42px;
	width: 173px !important;
	height: 150px !important;
	background-color: transparent !important;
	background-image: url(images/chat-with-gravis.png) !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
#chatgravis.purechat-button-unavailable,
.purechat-poweredby-container,
.purechat-download-container {
	display: none !important; visibility: hidden !important;
}

/* NOTIF */
.notifno {
	padding: 8px;
	border: 1px solid #FFF;
	background: #BB452D;
	color: #FFF;
	box-shadow: 0 0 3px #333;
	border-radius: 4px 4px 0 0;
	text-shadow: none;
}
.notifyes {
	padding: 8px;
	border: 1px solid #FFF;
	background: #237c64;
	color: #FFF;
	box-shadow: 0 0 3px #333;
	border-radius: 4px;
	margin: 0 10px;
	text-shadow: none;
}

/* PAGE */
#middlepage .relungbottom { margin: 24px auto 28px auto; }
.left, .right {
	padding: 20px 3%;
	border: 2px solid rgba(89, 80, 66, 0.30);
	background: rgba(255, 255, 255, 0.60);
	border-radius: 10px;
	text-shadow: 1px 1px 1px #FFF;
	width: 80%;
	margin: 0 auto;
	min-width: 860px;
	max-width: 1200px;
}
.right { margin: 18px auto 0 auto; }
.pagetitle {
	font-family: 'Cherry Swash', cursive;
	color: #105B63;
	font-size: 24px;
	line-height: 30px;
	margin: 10px 0 20px 0;
	text-align: center;
}
#page_11 img { padding: 40px 0 40px 0 !important; max-width: 800px; width: 80% !important; height: auto !important; }

/* TIPOGRAFI */
.thecontent p { line-height: 20px; font-size: 14px; padding: 8px 0; }
.thecontent h2 {
	font-family: 'Cherry Swash', cursive;
	color: #105B63;
	font-size: 22px;
	line-height: 24px;
	padding: 28px 0 8px 0;
}
.thecontent h3 {
	color: #105B63;
	font-size: 16px;
	line-height: 22px;
	padding: 22px 0 2px 0;
	font-weight: 700;
	text-transform: uppercase;
}
.thecontent h4 {
	font-family: 'Cherry Swash', cursive;
	color: #105B63;
	font-size: 16px;
	line-height: 22px;
	padding: 16px 0 8px 0;
}
.thecontent ol, .thecontent ul { margin: 0 0 8px 32px; }
.thecontent ul li { list-style: disc; line-height: 20px; }
.thecontent ol li { list-style: decimal; line-height: 20px; }
.thecontent a { color: #BC4D26; }
.thecontent a:hover { text-decoration: underline; }
.thecontent img.alignleft { float: left; margin: 0 20px 0 0; }
.thecontent img.alignright { float: right; margin: 0 0 0 20px; }
.thecontent img.aligncenter { display: block; margin: 0 auto 20px auto; }

/* SIDEBAR */
#pagebar {
	float: left;
	width: 21%;
	margin: 0 2% 10px 2%;
	font-size: 14px;
	line-height: 18px;
	overflow: hidden;
}
#pagebar h3 {
	font-family: 'Cherry Swash', cursive;
	color: #105B63;
	font-size: 18px;
	line-height: 24px;
	padding: 0 0 4px 0;
	margin: 0 0 16px 0;
	border-bottom: 1px dotted #105B63;
}
.testimonial-widget { padding: 0 !important; }
#pagebar ul li { list-style: disc; }
#pagebar ul { margin: 8px 0 0 20px; }
.widsmall { font-size: 12px; line-height: 16px; display: block; margin: 0 0 8px 0; }
.widgbr { width: 96%; height: auto; }
.widicon { float: left; margin: 2px 0 0 0; width: 50px; }
.listright { padding: 0 0 0 58px; }
#pagebar h4 {
	font-family: 'Cherry Swash', cursive;
	color: #105B63;
	font-size: 16px;
	line-height: 22px;
	padding: 0 0 2px 0;
}
.ours { margin-bottom: 4px; }

/* PORTFOLIO */
#portcontainer { text-align: center; }
.portbox {
	background: #8c867d;
	border-radius: 4px;
	text-align: center;
	position: relative;
	display: inline-block;
	border: 4px solid #aba497;
	margin: 16px;
}
.portbox:hover { box-shadow: 0 0 5px #222222; border: 4px solid #eaeaea; }
.porthover {
	width: 296px;
	height: 196px;
	z-index: 50;
	position: absolute;
	left: 0;
	top: 0;
}
.portthumb { position: relative; }
.sephia {
	filter: saturate(50%);
	-webkit-filter: saturate(50%);
	-moz-filter: saturate(50%);
	-o-filter: saturate(50%);
	-ms-filter: saturate(50%);
	opacity:0.6;
	filter:alpha(opacity=60);
}
.shadow { position: absolute; top: 0; left: 0; }
.portdesc {
	font-size: 11px;
	line-height: 17px;
	background: rgba(255,255,255,0.8);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 296px;
	padding: 1px 0 10px 0;
	display: none;
}
.portproject {
	font-family: 'Cherry Swash', cursive;
	line-height: 18px;
	padding: 4px 0 6px 0;
	font-size: 16px;
	margin: 0 0 6px 0;
	background: rgba(195,191,183,0.8);
}
.porturl { font-style: italic; color: #000; font-weight: 700; }
.portlocation { font-family: 'Noto Serif', serif; font-size: 11px; line-height: 16px; margin: 4px 0 0 0; }
.portgo {
	position: absolute;
	top: 28px;
	width: 296px;
	left: 0;
	text-align: center;
	display: none;
}
.portgo img { padding: 0 12px; display: inline-block; }
.portgo a:hover { text-decoration: none; }
.wp-pagenavi { margin: 36px 0 48px 0; font-size: 12px; }

/* THE TEAM */
.gravteam { text-align: center; padding: 8px 0 24px 0; max-width: 780px; margin: 0 auto; }
.gravteambox {
	display: inline-block;
	width: 140px;
	height: auto;
	margin: 5px;
	position: relative;
}
.gravoto {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	width: 140px;
	height: 142px;
	border-radius: 50%;
	overflow: hidden;
}
#joddie.gravoto { background-image: url(images/team-joddie.png); }
#andi.gravoto { background-image: url(images/team-andi.png); }
#aryan.gravoto { background-image: url(images/team-aryan.png); }
#bebek.gravoto { background-image: url(images/team-bebek.png); }
#adit.gravoto { background-image: url(images/team-adit.png); }
#crystal.gravoto { background-image: url(images/team-crystal.png); }
#aldi.gravoto { background-image: url(images/team-aldi.png); }
#rendy.gravoto { background-image: url(images/team-rendy.png); }
#karisma.gravoto { background-image: url(images/team-karisma.png); }
.teamdesc {
	background: rgba(255,255,255,0.8);
	border-radius: 50%;
	width: 138px;
	height: 140px;
	position: absolute;
	top: -1px;
	left: 0;
	overflow: hidden;
	border: 2px solid #aca49c;
	display: none;
}
.teamname {
	font-size: 12px;
	line-height: 16px;
	padding-top: 54px;
	font-style: italic;
	padding-bottom: 4px;
	border-bottom: 1px dotted #aca49c;
	width: 90%;
	margin: 0 auto;
}
.teamposition { font-size: 9px; line-height: 14px; padding-top: 2px; }
.teamsosmed { padding-top: 12px; }
.teamsosmed img { margin: 0 1px; }
.teamsosmed a:hover { text-decoration: none; }
.sembunyi{display:none;}
.listright .widsmall{ font-size:12px; line-height:1.2em;}

/* ORDER PAGE */
.taborder { width: 80%; min-width: 300px; margin: 48px auto 8px auto; }
.taborder td { padding: 8px; border-bottom: 1px dotted #C6C2BB; line-height: 20px; }
.subask { padding: 16px 0; display: none; }
.subask select { margin-top: 8px; }
#page_order #notiforder { width: 80%; min-width: 300px; margin: 20px auto 0 auto; text-align: center; }
#page_order .notifno, #page_order .notifyes { border-radius: 4px; line-height: 20px; }
.spanlain { display: none; }
#orderloader { display: none; }
#menuslider { display: none; }

/* ORDER PAGE NEW */
.orderarea { width: 80%; margin: 0 auto; }
.ordercolumn { float: left; }
.orderleft { width: 200px; padding: 8px 0 0 0; }
.orderright { max-width: 540px; }
.leftwide { width: 300px; }
.roworder { clear: both; border-bottom: 1px dotted #C6C2BB; line-height: 20px; padding: 8px; }
.orderarea h3 { padding: 32px 0 8px 8px; border-bottom: 1px dotted #C6C2BB; }
.orderarea .description { font-size: 12px; font-style: italic; color: #646464; line-height: 16px; display: block; padding-bottom: 4px; }

iframe#launcher { margin: 0 20px 56px 0 !important; }

@media only screen and (max-width : 1020px) {
.menutopwrap { min-width: inherit; width: 98%; }
.menu-menu-top-left-container, .menu-menu-top-right-container { min-width: inherit; width: 34%; }
.menutop ul li { margin: 0 1%; }
.section { min-width: inherit; }
#slide3 { display: none; }
#say1 { font-size: 28px; line-height: 34px; }
#say2 { font-size: 18px; line-height: 24px; }
#say3 { font-size: 14px; line-height: 18px; }
.noteswrap { min-width: inherit; }
.featbox { min-width: inherit; }
.featbox #card4 { display: none; }
.servicewrap { min-width: inherit; }
.servicehor { min-width: inherit; width: auto; }
.serviceleft, .serviceright { float: none; width: 90%; margin: 0 auto; }
.serviceleft { padding-bottom: 20px; }
.servicelink { min-width: inherit; }
#section3 #say1 { font-size: 28px; line-height: 34px; }
.menubottomwrap { min-width: inherit; }
.clickhere { display: none; }
.code { width: 90%; }
.code img { width: 100%; height: auto; max-width: 798px; }
#middlepage { min-width: inherit; width: auto; }
.left, .right { min-width: inherit; width: 90%; }
#pagebar.text-5 { display: none; }
#pagebar { width: 28%; }
.portbox { display: inline-block; float: none; }
#portcontainer { text-align: center; }
.gravoto, .teamdesc { width: 100px; height: 101px; }
.teamsosmed { display: none; }
.gravteambox { width: 100px; margin: 2px; }
.teamname { font-size: 9px; line-height: 12px; }
.teamposition { display: none; }

@media only screen and (max-width : 900px) {
.orderarea input.text { max-width: 280px; }
}

@media only screen and (max-width : 764px) {
#chatgravis { display: none !important; }
.icon { display: none; }
.contactbutton { float: none; margin: 0 auto; }
.contactlink { position: relative; margin: 0 auto; }
.slide { display: block; margin: 0 auto 20px auto; }
#slide3 { display: block; }
.featbox { display: none; }
#section2 { margin: 64px auto; }
.servicewrap { line-height: 18px; }
.servicethumb { display: none; }
.servicetext { padding: 0 16px 24px 16px; }
.service h2 { text-align: center; }
.service p { text-align: center; }
.servicelink a { display: block; margin: 8px auto; }
#say1 { font-size: 24px; line-height: 30px; }
#say2 { font-size: 14px; line-height: 18px; }
#say3 { font-size: 12px; line-height: 16px; }
#section3 #say1 { font-size: 18px; line-height: 24px; }
#section3 #say2 { font-size: 12px; line-height: 18px; padding: 0 16px; }
#section3 #say3 { font-size: 14px; line-height: 20px; }
.section { width: 100%; }
.menubottomwrap { width: 100%; }
.contactform { left: 50%; margin-left: -140px; height: 360px; top: -364px; }
.theaddress { display: none; }
.thename { display: none; }
.right { display: none; }
.copyright { margin: 0 16px 72px 16px; line-height: 15px; }
.menu-menu-top-left-container {
	width: 98%;
	float: none;
	margin: 0 auto;
	position: relative;
	top: 42px;
	background: #51473A;
	padding: 64px 0 12px 0;
	border-left: 2px solid #B4B094;
	border-right: 2px solid #B4B094;
	display: none;
}
.menu-menu-top-right-container {
	width: 98%;
	float: none;
	margin: 0 auto;
	position: relative;
	top: 32px;
	background: #51473A;
	padding: 12px 0 24px 0;
	border-left: 2px solid #B4B094;
	border-right: 2px solid #B4B094;
	border-bottom: 2px solid #B4B094;
	border-radius: 0 0 10px 10px;
	display: none;
}
.menutop ul li a:hover, .menutop ul .current-menu-item { border-radius: 8px; }
h1.logo { display: none; }
#menuslider {
	background: #B4B094 url(images/triangle.png) no-repeat 40px 24px;
	width: 160px;
	margin: 0 auto;
	padding: 20px 0 10px 20px;
	position: relative;
	top: -19px;
	z-index: 5;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 3px 3px #5f5f5f;
	text-shadow: 1px 1px 1px #e8e8e6;
	cursor: pointer;
	display: block;
}
#logosmall { position: relative; z-index: 10; }
.middle { margin: 100px auto 32px auto; }
#section1 { margin: 140px auto 72px auto; }
#page_5 img { display: none; }
#page_40 img.size-full { max-width: 90%; height: auto; }
.portthumb img { max-width: 100%; height: auto; }
.portdesc { width: 100%; }
.portgo img { width: 28px; height: auto; }
.portgo { top: 16px; }
.orderarea { width: 98%; }
.ordercolumn { float: none; }
.leftwide { width: auto; }
.orderleft { padding: 8px 0; }
.orderarea input.text, .orderarea textarea, .orderarea select { width: 96%; }
}

@media only screen and (max-width : 370px) {
.gravteam { display: none; }
.orderarea input.text, .orderarea textarea, .orderarea select { width: 90%; }
}