/*  
Theme Name: RURI ARIMBI
Theme URI: https://ruriarimbi.com
Description: Tema ini didesain untuk website Ruri Arimbi.
Version: 1.0
Author: Cecep Risnandar
Author URI: https://jurnalwp.com/
*/
/* GENERALE RULE */
.wrapping-narrow { overflow:hidden; width:1000px; margin:auto } 
.wrapping-wide { overflow:hidden; width:1200px; margin:auto }
.desktop-only { display:block }
.mobile-only { display:none }
@media screen and (max-width:1280px){ .wrapping-wide { width:100% } }
@media screen and (max-width:1024px){ .wrapping-narrow { width:100% } }
@media screen and (max-width:800px){ .desktop-only { display:none } .mobile-only { display:block } }
body { 
	font-family:'Poppins', sans-serif; 
	font-size:16px; 
	font-weight:400; 
	line-height:1.8em; 
	padding:0; 
	margin:0; 
	color:#444; 
	background:#fff;
	}
	@media screen and (max-width:800px){ body { font-size:15px }}
	@media screen and (max-width:480px){ body { font-size:14px }}	
	/* Attribute format */		
	a { text-decoration:none; color:#0066FF }
	a:hover {color:#000;text-decoration:underline}
	b, strong { font-weight:600 }
	p {padding:0;margin:0}
	img {max-width:100%;height:auto;display:block}	
	small {font-size:0.8em}
	sup {font-size:smaller;vertical-align:baseline;position:relative;top:-0.4em}
	sub {font-size:smaller;vertical-align:baseline;position:relative;top:0.4em}	
	input, textarea, select { 
		font: 14px 'Poppins', sans-serif;
		border:1px solid #999;
		}	
	select { width:99.5% }
	/* Heading font */
	h1,h2,h3,h4,h5,h6 {font-weight:600;line-height:1.4em;padding:0;margin:0;color:#333}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:#333}
	h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {color:#000}
	h1 {font-size: 38px }
	h2 {font-size: 28px }
	h3 {font-size: 22px }
	h4 {font-size: 20px }
	h5 {font-size: 18px }
	h6 {font-size: 16px }
	@media screen and (max-width:1024px){
		h1 {font-size: 32px }
		h2 {font-size: 22px }
		h3 {font-size: 20px }
		h4 {font-size: 18px }
		h5 {font-size: 16px }
		h6 {font-size: 14px }
		}
	@media screen and (max-width:600px){
		h1 {font-size: 28px}
		h2 {font-size: 20px}
		h3 {font-size: 18px}
		h4 {font-size: 16px}
		h5 {font-size: 15px}
		h6 {font-size: 14px}
		}	
	@media screen and (max-width:480px){
		h1 {font-size: 26px}
		h2 {font-size: 18px}
		h3 {font-size: 16px}
		h4 {font-size: 15px}
		h5 {font-size: 14px}
		h6 {font-size: 14px}		
		}		
		
/* HEADER LAYOUT */	
header {overflow:hidden; font-size:14px; line-height:1em; width: 100%; height:auto; position: fixed; top: 0; background:#3c3122; z-index:99999}
	.header{overflow:hidden;height:70px;}
	.header-admin{height:31px;width:100%;} 
	.header-fix{height:70px;width:100%;}  
		.header-logo { float:left; width:107px; height:40px; margin:15px 30px }
		.header-logo img { width:107px; height:40px }
		.header-menu {float:right;font-weight:700;text-align:center;vertical-align:middle;margin:29px 10px 0 0;}
		.header-search{ float:right }
			.header-search span {
				text-decoration:none;
				color:#d29606;
				width:40px;
				height:40px;
				margin:15px 20px 0 0;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				vertical-align:middle;
				border-radius:5px;	
				cursor:pointer;				
				}	
			.header-search span:hover{background:#fff;border-radius:5px}
			.header-search .fa-times { font-size:18px }
	.search-area{overflow:hidden;padding:5% 20px;  background:#fff;}
		.search-area-boxed {width:600px; margin:auto}		
	#toggle1, #toggle2, #toggle3 { overflow:hidden; border-bottom:1px solid #ccc }
	@media screen and (max-width:1280px){
		.header {height:60px}
		.header-fix {height:60px}
		.header-logo {margin:16px}
		.header-menu {margin:24px 10px 0 0}
		.header-tools span {margin:10px 10px 0 0}
		.header-search span {margin:10px 10px 0 0}
		.header-search-empty{display:none}
		.menu-area {width:99%;margin-left:1%}
		.tools-area	{width:95%;padding:20px 2.5%}	
		}
	@media screen and (max-width:1024px){	
		.menu-area-narrow {width:99%;width:99%;margin-left:1%}
		.search-area{padding:10% 20px}	
		}
	@media screen and (max-width:800px){ 
		#toggle1{border:none}
		.menu-area, .menu-area-narrow {width:100%;padding:0;margin:0}
		.menu-area-fix {float:none;margin:0;border-bottom:1px solid #ddd}
			.menu-area-fix a {cursor:pointer;display:block;padding:20px 10px;border-radius:0;}
		.search-area{padding:15% 20px}		
			.search-area-boxed { width:100% } 
		}	

/* Searchbox main */
.search-box-main { position:relative; padding:0; margin:0; }
.search-box-main input {
	width: 100%;
	padding: 15px 25px;
	padding-right: 90px;
	font-family: 'Poppins', sans-serif;
	font-size:14px; 
	color:#333333;
	outline: 0;
	border-radius:30px;	
	}
.search-box-main input:hover, 
.search-box-main input:focus {
	outline: 0;
	color:#333333;
	}
.search-box-main button {
	position: absolute;
	height: 100%;
	right: 0;
	top: 0;
	border: none;
	width: 75px;
	font-size:18px;
	padding-top: 5px;
	color: #333333;
	background-color: transparent;
	cursor: pointer;
	-webkit-transform: rotateY(180deg);
	        transform: rotateY(180deg);
	}
	.search-box-main button:hover {color:#034DAD}

/* FOOTER CSS */
.footer{clear:both;overflow:hidden}
	.footer-top	{overflow:hidden; font-size:0.85em; padding:40px 20px 0 20px; margin:0; background:#727638; color:#fff}
		.footer-col{float:left;width:50%;padding:0;margin:0;}
			.footer-col-1{float:left;width:49%;margin:0 1% 20px 0;}
			.footer-col-1 i{padding:0; margin:0 10px 0 0}
			.footer-col-1 h5{font-size:1em;margin:0 0 5px 0;color:#fff}
			.footer-col-1 ul{margin:0 0 20px 0; padding:0}
			.footer-col-1 li{list-style-type:none;padding:0;margin:0;color:#ccc}
			.footer-col-1 li a{color:#ccc}
			.footer-col-1 li a:hover{text-decoration:none;color:#c4a865}
			.footer-col-1 li span a{font-size:0.8em; font-weight:bold}
			.footer-col-1-box{font-size:1em; line-height:1.6em; width:230px; margin:0 0 20px 0; color:#ccc}
			.footer-col-1-box i {font-size:1em;margin:0 10px 0 0}
	.footer-bottom	{overflow:hidden; font-size:0.85em; padding:20px; margin:0; background:#3c3122; color:#999}
		.footer-bottom-left{float:left;width:auto}
		.footer-bottom-left a {font-weight:500; text-decoration:none; color:#999;}
		.footer-bottom-left a:hover {color:#c4a865}
		.footer-bottom-left p {padding:0;margin:0;}
		.footer-bottom-left ul {list-style-type:none;padding:5px 0 0 0;border-top:1px solid #999}
		.footer-bottom-left ul li {display:inline; padding:0; margin: 0;}
			.footer-bottom-left-socmed a {color:#999}
			.footer-bottom-left-socmed i {font-size:20px; margin:0 10px 10px 0}
		.footer-bottom-right{float:right;font-size:24px;opacity:0.5}
			.footer-bottom-right:hover{opacity:1}
@media screen and (max-width:800px){
	.footer-col-1{width:100%}
	.footer-bottom-right{display:none}
}