/*

	Theme Name: Rooky

	Template URI: 

	Description: 

	Author:

	Author URI: 

	License: GNU General Public License version 3.0

	License URI:

	Version: 1.0

	

	1. Header

		1. Nav

	2. Top-pan

	3. Title-Page

	4. Section-One

		1. Four-Box-Pan

	5. Section Two

		1. Video

		2. Slider

	6. Section Three

		1. Pricing

	7. Section Four

		1.Team

	8. Section Five

		1. Subscribe Form

	9. Section Six

		1. Contact Form

		2. Map

	10. Footer

		

*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);

html {

	-ms-text-size-adjust: 100%;

	-webkit-text-size-adjust: 100%;

}

*, *:before, *:after {

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}

input, textarea {

	-webkit-appearance: none;

	-webkit-border-radius: 0;

}

button, html input[type="button"],/* 1 */ input[type="reset"], input[type="submit"] {

	-webkit-appearance: button;

	cursor: pointer;

 *overflow:visible;

}



html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input, main {

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

	margin: 0;

	padding: 0;

	vertical-align: baseline;

	border: 0;

	outline: 0;

}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img, main {

	display: block

}

audio, canvas, video {

	display: inline-block;

 *display:inline;

 *zoom:1

}

blockquote:before, blockquote:after, q:before, q:after {

	content: '';

	content: none;

}

.clear {

	clear: both;

	line-height: 0;

	height: 0;

}

a {

	text-decoration: none;

	outline: none;

	color: #010101;

	transition-delay: 0s;

	transition-duration: 0.6s;

	transition-property: all;

	transition-timing-function: ease;

}

a:focus, img:focus, button:focus, .btn:focus {

	outline: none;

}



::-moz-selection {

 background-color:#6bb551;

 color:#fff;

 text-shadow:none;

}

::selection {

	background-color: #6bb551;

	color: #fff;

	text-shadow: none;

}

@font-face {font-family: 'Raleway', sans-serif;}

/*===== Header ===*/

header[role="header"].header-top,header[role="header"].header-top figure{ position:relative; height:100vh;  background: url(../images/subscribe-bg.jpg) fixed;
    background-size: cover;}

header[role="header"].header-top .container{ position:absolute; left:0; right:0; top:0;z-index:2;padding-top:41px}

header[role="header"].header-top figure::after{ content:""; position:absolute; left:0; right:0; top:0; bottom:0; background-color:rgba(29,23,36,0.5); z-index:1}

header[role="header"].header-top hgroup h1{ padding:0; margin:0; position:relative; z-index:2}

/*===== Nav ===*/

header[role="header"].header-top hgroup nav{ background-color:transparent; min-height:inherit; border:none; text-align:right; margin-bottom:0; padding-top:18px}

header[role="header"].header-top hgroup nav ul{ text-align:right; padding:0; margin:0; float:none}

header[role="header"].header-top hgroup nav ul > li{ float:none; display:inline-block; text-transform:uppercase; font-size:12px; font-weight:600; letter-spacing:2px}

header[role="header"].header-top hgroup nav ul > li > a{ color:#FFF; line-height:29px; padding-bottom:5px; padding-top:0; padding-left:11px; padding-right:12px; border-bottom:3px solid transparent;}

header[role="header"].header-top hgroup nav ul > li:hover a,header[role="header"].header-top hgroup nav ul>li.active a,header[role="header"].header-top hgroup nav ul>li.active:hover a{ border-color:#6bb551; background-color:transparent!important;color:#FFF!important;}

header[role="header"].header-top hgroup nav ul>li>a:focus{color:#FFF;}



header[role="header"].header-top hgroup.navbar-fixed-top,header[role="header"].header-top hgroup,header[role="header"].header-top hgroup h1,header[role="header"].header-top hgroup h1 img,header[role="header"].header-top hgroup nav ul,header[role="header"].header-top hgroup nav ul > li,.four-box-pan figure,.four-box-pan figure i,.four-box-pan section,.section-two section,.section-two section figure,.section-two section figure>img,.pricing>section input[type="button"],.pricing>section,.team-pan figure,.team-pan figure img,.subscribe-form button,.contact-form input[type="text"],.contact-form input[type="email"],.contact-form textarea,.contact-form input[type="submit"]{transition-delay:0.8s;

transition-duration: 0.8s;transition-property: all;transition-timing-function: ease;}



header[role="header"].header-top .navbar-fixed-top{background-color:rgba(0,0,0,1); padding:5px 0}

header[role="header"].header-top .navbar-fixed-top .container{ padding-top:0; position:static}

header[role="header"].header-top .navbar-fixed-top h1 img{ width:30%}

header[role="header"].header-top .navbar-fixed-top nav{ padding-top:7px}



header[role="header"].header-top section{position:absolute; left:0; right:0; top:35%;z-index:2;}

header[role="header"].header-top section h2,header[role="header"].header-top section p{ color:#FFF}

header[role="header"].header-top section h2{ font-size:48px; line-height:50px; font-weight:400}

header[role="header"].header-top section p{ font-size:19px; line-height:20px; font-weight:500; padding-top:15px}

header[role="header"].header-top section a.button-header{ display: inline-block; text-align:center; margin:0 auto; line-height:63px; font-size:16px; font-weight:400; padding:0 53px; color:#FFF; background-color:#6bb551; border-radius:4px; text-transform:uppercase}

header[role="header"].header-top section a.button-header:hover{background-color:#5ea246; text-decoration:none}

header[role="header"].header-top section a.video-button,.video-pan header a.video-button{ margin:67px auto; margin-bottom:60px; display:block; cursor:pointer; outline:none; background-color:transparent; border:3px solid #FFF; border-radius:100%; width:94px; height:94px; line-height:94px; font-size:60px; text-align:center; color:#FFF;}

header[role="header"].header-top section a.video-button i,.video-pan header a.video-button i{ padding-left:10px}

header[role="header"].header-top section a.video-button:hover,.video-pan header a.video-button:hover{ border-color:#6bb551}

.video-wrapper-popup .modal-content{ background-color:#000}

.video-wrapper-popup .modal-content .modal-body{ padding-bottom:5px}

/*== Top Pan ==*/

.top-pan{ overflow:hidden; background-color:#f7f7f8; padding-top:62px; padding-bottom:47px}

.top-pan ul{ padding:0; margin:0; list-style:none}

.top-pan li{line-height: 72px;height: 72px; text-transform:uppercase; font-size:17px; color:#161620; font-weight:800}

.top-pan li img {vertical-align: middle; text-align:center; max-width:100%; display:block; margin:0 auto;display: inline-block;}

/*== Title-Page ==*/

header[role="title-page"] h4,header[role="title-page"] h4,header[role="title-page"] h4{ font-size:19px; line-height:20px; color:#71717c; text-transform:uppercase; font-weight:600}

header[role="title-page"] h4:after,header[role="title-page"] h4:after,header[role="title-page"] h4:after{ content:""; display:block; margin:0 auto; width:79px; height:2px; background-color:#6bb551; margin:17px auto; margin-bottom:0}

header[role="title-page"] h2,header[role="title-page"] h2{ color:#000; font-size:31px; line-height:36px; font-weight:600; padding-top:2px}

/*== Section One ==*/

.section-one{ padding-top:87px}

.section-one article{ padding-top:36px}

.section-one article p{ font-size:15px; line-height:27px; color:#5e5e64; font-weight:500}

/*== Four Box Pan ==*/

.four-box-pan{ overflow:hidden; padding-top:81px}

.four-box-pan figure{ margin:0 auto; display:block; border-radius:100%; width:98px; height:98px; border:2px solid #6bb551; text-align:center; line-height:98px; color:#6bb551; font-size:40px}

.four-box-pan section figure i{color:#6bb551}

.four-box-pan section:hover figure{ background-color:#6bb551; color:#FFF}

.four-box-pan section:hover figure i{ color:#FFF}

.four-box-pan section h5{ text-transform:uppercase; font-size:15px; line-height:16px; font-weight:700; color:#000; padding-top:26px}

.four-box-pan section p{ line-height:27px; font-weight:500; padding-top:5px; color:#5e5e64}

/*== Section Two ==*/

.section-two{ background-color:#f7f7f8; margin-top:80px; overflow:hidden}

.section-two section figure{background-position:50% 0; background-size:cover; background-repeat:no-repeat; background-attachment:fixed; min-height:593px}

.section-two section:hover img{-webkit-transform:scale(1.3);transform:scale(1.3);}

.section-two section article{ padding-left:14%; padding-right:90px; padding-top:94px;}

.section-two section:last-child article{ padding-left:11%}

.section-two section article h2{ font-size:31px; line-height:36px; font-weight:300; color:#000; padding-bottom:12px}

.section-two section article p{ line-height:27px; color:#5e5e64; padding-bottom:17px; font-weight:500}

.section-two section article ul{ margin:0; padding:0; list-style:none}

.section-two section article ul>li{ padding-bottom:10px}

.section-two section article ul>li:before{content:"\f046";font-family:'FontAwesome'; color:#222222; font-size:16px; padding-right:9px}

/*== Video ==*/

.video-pan{ min-height:528px; position:relative;background: url(../images/services-bg.jpg) fixed;
    background-size: cover;}

.bg-container-youtube{ position:absolute;left: 0px;top: 0px;width: 100%;overflow: hidden;height:528px;}

.video-pan:after{ content:""; position:absolute; left:0; right:0; top:0; height:100%; background-color:rgba(29,23,36,0.9)}

.video-pan header{ position:relative; z-index:2; padding-top:200px}

.video-pan header h4{ font-size:19px; color:#FFF; font-weight:700; padding:0; margin:0}

.video-pan header a.video-button{ margin:0 auto; margin-bottom:20px}

/*== Slider ==*/

.slider-pan{ padding-top:87px;padding-bottom:91px}

.slider-pan section article{ font-size:21px; line-height:36px; font-weight:400; padding-top:38px}

.slider-pan section article:before{content:"\f10d";font-family:'FontAwesome'; color:#5e5e64}

.slider-pan section article:after{content:"\f10e";font-family:'FontAwesome';color:#5e5e64}

.slider-pan section header h5,.slider-pan article header h6{ font-size:15px; line-height:16px; padding:0; margin:0; font-weight:400}

.slider-pan section header h5{ text-transform:uppercase; font-weight:700; color:#000; padding-bottom:8px}

.slider-pan section header{ padding-top:38px;}

.slider-pan .owl-buttons{ display:none}

.slider-pan .owl-pagination{ text-align:center; padding-top:18px}

.slider-pan .owl-pagination .owl-page{ display:inline-block; border-radius:100%; width:9px; height:9px; background-color:#c9c9c9; margin:0 3px;}

.slider-pan .owl-pagination .owl-page.active{ background-color:#6bb551}

/*== Section Three ==*/

.section-three{ background-color:#6bb551; padding-top:87px; padding-bottom:156px}

.section-three header[role="title-page"]{ padding-bottom:83px}

.section-three header[role="title-page"] h4,.section-three header[role="title-page"] h2{color:#FFF}

.section-three header[role="title-page"] h4:after{ background-color:#FFF}

.pricing{ text-align:center}

.pricing>section{ display:inline-block; width:100%; max-width:300px; border:2px solid #FFF; color:#FFF; margin:0 31px; padding-bottom:24px}

.pricing>section>header{ border-bottom:2px solid #FFF; padding-top:37px; padding-bottom:15px}

.pricing>section>header>h4{ text-transform:uppercase; font-size:19px; font-weight:700}

.pricing>section>h2{ font-weight:300; margin-top:7px; margin-bottom:29px; border-bottom:2px solid #FFF; padding-bottom:12px}

.pricing>section>h2>span{ font-weight:700; font-size:48px}

.pricing>section ul{ padding:0; margin:0; list-style:none}

.pricing>section ul>li{ font-size:16px; line-height:36px; font-weight:400}

.pricing>section input[type="button"]{ margin:27px auto; display:block; text-align:center; text-transform:uppercase; color:#FFF; outline:none; cursor:pointer; line-height:53px; font-size:14px; font-weight:700; color:#6bb551; background-color:#FFF; padding:0 32px}

.pricing>section input[type="button"]:hover{ background-color:#549e3a; color:#FFF}

.pricing>section:hover{ background-color:#83c76c;-webkit-transform:scale(1.1);

transform:scale(1.1);}

/*== Section Three ==*/

.section-four{ padding-top:86px; padding-bottom:102px; background-color:#f7f7f8}

.section-four header[role="title-page"]{ padding-bottom:63px}

/* Team */

.team-pan figure{ padding:5px; border:5px solid #6bb551; overflow:hidden; background-color:#FFF;}

.team-pan section:hover figure img{webkit-transform:scale(1.1);

transform:scale(1.1); opacity:0.8}

.team-pan header{ text-align:center; padding-top:38px}

.team-pan header h5,.team-pan header h6{ font-size:15px; line-height:16px; padding:0; margin:0; color:#5e5e64; font-weight:400}

.team-pan header h5{ text-transform:uppercase; font-weight:700; color:#000; padding-bottom:8px; display:block}

.team-pan header a{ display:inline-block; text-align:center; background-color:#cdcdce; color:#FFF; width:25px; height:25px; font-size:12px; line-height:25px; font-weight:normal; border-radius:100%;; margin:15px 3.5px; margin-bottom:0}

.team-pan header a:hover{ background-color:#6bb551}

/*== Section Five ==*/

.section-five{ background-color:#6bb551; padding-top:87px; padding-bottom:102px}

.section-five header[role="title-page"]{ padding-bottom:49px}

.section-five header[role="title-page"] h4,.section-five header[role="title-page"] h2{color:#FFF}

.section-five header[role="title-page"] h4:after{ background-color:#FFF}

/* Subscribe Form*/

.subscribe-form{ width:100%; max-width:555px; margin:0 auto; position:relative}

.subscribe-form input[type="email"]{ border-radius:3px; background-color:transparent; border:1px solid #FFF; outline:none; height:58px; color:#FFF; font-size:16px; line-height:18px; padding-left:33px; padding-right:193px; width:100%;}

.section-five form input::-webkit-input-placeholder { color:#FFF; }

.section-five form input::-moz-placeholder { color:#FFF; }

.section-five form input:-ms-input-placeholder { color:#FFF; }

.section-five form input:-moz-placeholder { color:#FFF; }

.subscribe-form button{ position:absolute; right:0; top:1px; height:57px; line-height:57px; border:none; outline:none; cursor:pointer; text-align:center; background-color:#FFF; text-transform:uppercase; font-size:16px; color:#6bb551; font-weight:700; padding:0 35px;

-webkit-border-top-right-radius: 3px;

-webkit-border-bottom-right-radius: 3px;

-moz-border-radius-topright: 3px;

-moz-border-radius-bottomright: 3px;

border-top-right-radius: 3px;

border-bottom-right-radius: 3px;}

.subscribe-form button:hover{ background-color:#e1e1e1}

.subscribe-form button i{ padding-left:8px}

.error_message{ color:#e84d49}

.subscribe-form .error_message{ color:#e84d49; text-align:center}

.subscribe-form #success_page h3,.subscribe-form #success_page p{color:#185005 }

/*== Section Six ==*/

.section-six{padding-top:87px;}

.contact-form{ padding-left:184px; padding-right:186px; margin-top:63px; padding-bottom:20px}

#success_page h3,#success_page p{color:#185005 }

/* Contact Form */

.contact-form input[type="text"],.contact-form input[type="email"],.contact-form textarea{ height:70px; outline:none; display:block; border:1px solid #dbdbdb; font-size:16px; line-height:17px; color:#8f8f8f; width:100%; padding:0 41px}

.contact-form input[type="text"]:focus,.contact-form input[type="email"]:focus,.contact-form textarea:focus{ background-color:#f2f1f1}

.contact-form input[type="email"]{ border-left:none}

.contact-form input::-webkit-input-placeholder {color:#8f8f8f; }

.contact-form input::-moz-placeholder {color:#8f8f8f; }

.contact-form input:-ms-input-placeholder {color:#8f8f8f; }

.contact-form inputinput:-moz-placeholder {color:#8f8f8f; }

.contact-form .col-lg-6{ padding:0}

.contact-form textarea{ border-top:none; padding-top:28px; height:163px}

.contact-form input[type="submit"]{ height:63px; font-size:16px; text-transform:uppercase; color:#FFF; text-align:center; display:block; background-color:#6bb551; padding:0 53px; border-radius:3px; margin:40px auto; border-bottom:1px solid #89c474}

.contact-form input[type="submit"]:hover{ background-color:#84cf6a}

/* Map */

.map-wrapper{ width:100%; height:318px}

.map-wrapper #surabaya{ width:100%; height:100%}

/*== Footer ==*/

.footer{ background-color:#333333; padding-top:101px; padding-bottom:104px; text-align:center}

.socil-icons a{ display:inline-block; text-align:center; color:#333333; font-size:22px; line-height:50px; width:50px; height:50px; border-radius:100%; background-color:#4a4a4a; margin:0 4.9px}

.socil-icons a:hover{background-color:#6bb551; color:#FFF}

.footer nav { padding-top:34px}

.footer nav a{color:#b6b6b6; font-size:14px; line-height:17px; display:inline-block;font-weight:300; padding-left:6px}

.footer nav a:first-child{ border-right:1px solid #b6b6b6; padding-right:8px}

.footer nav a:hover{ text-decoration:none; color:#6bb551}

.footer .copy{ padding:0; margin:0; color:#b6b6b6; font-size:13px; line-height:17px; font-weight:300; padding-top:7px; letter-spacing:1px}
.footer .copy a{color:#b6b6b6;}
.footer .fa-heart { color: #e84545; font-size: 11px; margin: 0 2px;}