/*

	Theme Name: avana LLC

	Template URI: 

	Description: 

	Author:

	Author URI: 

	License: 

	License URI:

	Version: 1.0

	

	1. Body style

	2. Header

	3. Main

	4. Footer

	5. About

	

*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);

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;

}

body, img,.commentys-form input[type="text"],.commentys-form input[type="email"],.commentys-form input[type="url"],.commentys-form textarea {

	transition: all .2s linear;

	-o-transition: all .2s linear;

	-moz-transition: all .2s linear;

	-webkit-transition: all .2s linear;

}

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:#fb5353;color:#fff;text-shadow:none;}

::selection {background-color: #fb5353;color: #fff;text-shadow: none;}

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

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

header[role="header"]{ padding-top:80px; padding-bottom:39px}

header[role="header"] h1{ padding:0; margin:0}

header[role="header"] h1 > a{ max-width:66px; display:block; float:left}

header[role="header"] nav{ padding-top:10px;transition-delay: 0s;

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

header[role="header"] nav ul{ display:none; position: fixed; z-index:60; text-align:center; width:100%; height:100%; top:0; left:0; right:0; background-color:rgba(255,255,255,0.8); padding:0; margin:0; padding-top:199px;}

header[role="header"] nav ul > li{ font-weight:800; font-size:42px; display:block}

header[role="header"] nav ul > li > a{ display:block; line-height:72px; color:#404040}

header[role="header"] nav ul > li:hover a,header[role="header"] nav ul > li.nav-active a{ text-decoration:none; color:#9ed3d2}

header[role="header"] nav #menu-button {width: 31px;font-size: 0;float: right;height: 19px;position: relative; z-index:70;

-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer;}

header[role="header"] nav #menu-button span {display: block;position: absolute;z-index: 60;height: 3px;

width: 100%;background: #111111;opacity: 1;left: 0;

-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);

transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}

header[role="header"] nav #menu-button span {background: #010101;}

header[role="header"] nav #menu-button span:nth-child(1) {top:0px;}

header[role="header"] nav #menu-button span:nth-child(2) {top:7px;}

header[role="header"] nav #menu-button span:nth-child(3) {top:14px;}

header[role="header"] nav #menu-button.open span:nth-child(1) {top: 10px;

-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg);}

header[role="header"] nav #menu-button.open span:nth-child(2) {opacity: 0;left: -60px;}

header[role="header"] nav #menu-button.open span:nth-child(3) {top: 10px;

-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);}

/*===== main ===*/

main[role="main-home-wrapper"],main[role="main-inner-wrapper"] { padding-bottom:90px}

main[role="main-home-wrapper"] article[role="pge-title-content"],main[role="main-inner-wrapper"] article[role="pge-title-content"]{ padding-left:0}

main[role="main-home-wrapper"] article[role="pge-title-content"] header,main[role="main-inner-wrapper"] article[role="pge-title-content"] header{ padding-bottom:19px; padding-top:83px}

main[role="main-home-wrapper"] article[role="pge-title-content"] header h2,main[role="main-inner-wrapper"] article[role="pge-title-content"] header h2{ font-size:46px; line-height:53px; color:#404040; font-weight:800}

main[role="main-home-wrapper"] article[role="pge-title-content"] header h2 span,main[role="main-inner-wrapper"] article[role="pge-title-content"] header h2 span{ display:block; font-size:80px; color:#9ed3d2; padding-bottom:15px}

main[role="main-home-wrapper"] article[role="pge-title-content"] p,main[role="main-inner-wrapper"] article[role="pge-title-content"] p{ font-size:20px; line-height:30px; color:#454545}

main[role="main-home-wrapper"] article[role="pge-title-content"] header h2{ text-align:left}

main[role="main-home-wrapper"] article[role="pge-title-content"] p{ text-align:left}

/* Home hero: breathing room between the intro block and the tile grid below it.
   The tiles sit on a 31px gutter, so the intro needs clearly more than that to
   read as its own block rather than as part of the first tile. The template
   already does this on phones (responsive.css, 30px); desktop had nothing. */
@media (min-width: 768px) {
	main[role="main-home-wrapper"] article[role="pge-title-content"]{ padding-bottom:62px}
	main[role="main-home-wrapper"] article[role="pge-title-content"] p{ margin-bottom:0}
}

/*===== footer ===*/

footer[role="footer"]{ background-color:#FFF; padding-top:100px; padding-bottom:77px; display:flex; flex-direction:column; align-items:center;}

footer[role="footer"] > h1{ margin:0; padding:0; text-align:center;}
footer[role="footer"] > h1 a{ display:block; }
footer[role="footer"] > h1 a img{ max-width:286px; display:block; margin:0 auto; }

footer[role="footer"] nav{ padding-top:37px; padding-bottom:43px}

footer[role="footer"] nav > ul{ text-align:center; padding:0; margin:0}

footer[role="footer"] nav > ul > li{ display: inline-block; text-transform:uppercase; font-size:15px; margin:0 13px}

footer[role="footer"] nav > ul > li > a{ color:#9d9d9d}

footer[role="footer"] nav > ul > li:hover a{ text-decoration:none; color:#9ed3d2}

footer[role="footer"] ul[role="social-icons"]{ padding:0; margin:0; text-align:center; padding-bottom:40px;}

footer[role="footer"] ul[role="social-icons"] > li{ display: inline-block; margin:0 6.5px}

footer[role="footer"] ul[role="social-icons"] > li > a{ display:block; width:42px; height:42px; background-color:#bbbbbb; color:#FFF; line-height:42px; font-size:20px; border-radius:100%; text-align:center}

footer[role="footer"] ul[role="social-icons"] > li:hover a{ background-color:#9ed3d2}

footer[role="footer"] .copy-right{ text-align:center; display:block; font-size:12px; line-height:13px; color:#9c9c9c}

/*===== About ===*/

main[role="main-inner-wrapper"] .about-content{ background-color:#9ed3d2; padding-top:57px; padding-left:70px; padding-right:67px; padding-bottom:58px}

main[role="main-inner-wrapper"] .about-content p{ font-size:17px; line-height:30px; color:#404040; padding-bottom:4px}

main[role="main-inner-wrapper"] .thumbnails-pan{ padding-top:30px}

main[role="main-inner-wrapper"] .thumbnails-pan section figure{ background-color:#FFF; position:relative; overflow:hidden; cursor:pointer}

main[role="main-inner-wrapper"] .thumbnails-pan section figure,main[role="main-inner-wrapper"] .thumbnails-pan section figure, img,main[role="main-inner-wrapper"] .thumbnails-pan section figure figcaption,section.blog-content figure,section.blog-content figure img,section.blog-content  article{transition-delay: 0s;transition-duration: 0.6s;transition-property: all;transition-timing-function: ease;}

main[role="main-inner-wrapper"] .thumbnails-pan section figure figcaption{ position:absolute; bottom:-50%; left:0; right:0; background-color:#fb5353; margin:0 69px; text-align:center; color:#FFF; padding-top:16px; padding-bottom:27px}

main[role="main-inner-wrapper"] .thumbnails-pan section figure figcaption h3{ font-size:21px; line-height:22px; font-weight:300}

main[role="main-inner-wrapper"] .thumbnails-pan section figure figcaption h5{ text-transform:uppercase; font-size:13px; line-height:14px; font-weight:bold}

main[role="main-inner-wrapper"] .thumbnails-pan section figure:hover,section.blog-content:hover article{ background-color:#fb5353; color:#FFF}

main[role="main-inner-wrapper"] .thumbnails-pan section figure:hover img,section.blog-content:hover figure img{-webkit-transform: scale3d(1.08,1.08,2);transform: scale3d(1.08,1.08,2); opacity:0.5}

main[role="main-inner-wrapper"] .thumbnails-pan section figure:hover figcaption{ bottom:0;}

/*===== Blog ===*/

article[role="pge-title-content"].blog-header{ padding-bottom:218px}

section.blog-content{ margin-bottom:29px}

section.blog-content figure{ overflow:hidden; position:relative;background-color: rgba(255,255,255,0.4); cursor:pointer}

section.blog-content figure .post-date{ text-align:center; color:#FFF; font-weight:800; font-size:14px; line-height:18px; text-transform:uppercase; display:block; background-color:#fb5353; width:130px; height:130px; position:absolute; left:0; top:0; padding-top:41px; z-index:50}

section.blog-content figure .post-date span{ font-size:50px; line-height:35px; display:block}

section.blog-content  article{ font-size:21px; line-height:30px; color:#FFF;  font-weight:800; color:#343434; padding-left:42px; padding-top:33px; padding-bottom:31px;}

section.blog-content:hover figure img{ opacity:0.5}

/*===== Contact ===*/

article[role="pge-title-content"].contact-header{ padding-bottom:218px}

article[role="pge-title-content"].contact-header p a{ color:#343434; padding-right:34px}

article[role="pge-title-content"].contact-header p a:hover{color:#fb5353; text-decoration:none}

.demo-wrapper {width: 100%;margin: 0 auto;height:499px;}

#surabaya {width: 100%;height: 100%;}

.error_message{ color:#e84d49}

#success_page h3,#success_page p{color:#60ca6f }

.contat-from-wrapper{ padding:0 69px; margin-top:108px}

.contat-from-wrapper input[type="text"],.contat-from-wrapper input[type="email"],.contat-from-wrapper textarea{ width:100%; display:block; outline:none; border-bottom:1px solid #bbbbbb; background-color:inherit; color:#404040; font-size:21px; line-height:23px; padding-bottom:24px}

.contat-from-wrapper input[type="text"]:focus,.contat-from-wrapper input[type="email"]:focus,.contat-from-wrapper textarea:focus{ border-bottom-color:#9f9e9e}

.contat-from-wrapper form ::-webkit-input-placeholder { color:#404040; }

.contat-from-wrapper form ::-moz-placeholder { color:#404040; } /* firefox 19+ */

.contat-from-wrapper form :-ms-input-placeholder { color:#404040; } /* ie */

.contat-from-wrapper form input:-moz-placeholder { color:#404040; }

.contat-from-wrapper textarea{ border-bottom:1px solid #bbbbbb; border-left:none; border-right:none; border-top:none; height:77px; margin-top:56px}

.contat-from-wrapper input[type="submit"]{ display:block; border:none; outline:none; width:200px; line-height:60px; text-transform:uppercase; font-size:21px; color:#FFF; font-weight:800; letter-spacing:2px; background-color:#404040; margin:41px auto; margin-bottom:0}

.contat-from-wrapper input[type="submit"]:hover{background-color:#9ed3d2}

/*== Work Details ==*/

.work-details,.blog-details{ padding:0 69px; margin-top:73px}

.work-details header h2{ color:#343434; font-size:36px; font-weight:800}

.work-details header a{ display:inline-block; color:#fb5353; font-size:18px;font-weight:800;padding-top:3px}

.work-details header a i{ color:#0d0d0d; padding-left:10px}

.work-details header a:hover{ color:#0d0d0d; text-decoration:none}

.work-details header a:hover i{ color:#fb5353}

.work-details p{ font-size:16px; color:#666666; line-height:30px; margin-bottom:20px; font-weight:300}

.work-details p strong{ font-weight:800}

.work-images{ margin-top:46px}

.work-images li{ margin-bottom:50px}

/*== Blog Details ==*/

.bog-header { padding-bottom:62px}

.bog-header h3,.comments-pan h3,.commentys-form h4{ color:#404040;font-weight:800; padding-bottom:24px; display:block}

.bog-header h3 span{ color:#fb5353}

.bog-header h2{ font-size:36px; font-weight:normal}

.blog-details .enter-content{ margin-top:62px}

.blog-details .enter-content p{ font-size:16px; line-height:30px; font-weight:300; margin-bottom:23px}

.comments-pan{border-top:2px solid #dedede; padding-top:15px}

.comments-pan h3{border-bottom:2px solid #dedede; padding-bottom:34px; margin-bottom:52px}

.comments-reply,.reply-pan{ padding:0; margin:0; list-style:none}

.comments-reply li{ display:block; border-bottom:2px solid #dedede; overflow:hidden; padding-bottom:51px; margin-bottom:39px}

.comments-reply li figure{ float:left; width:70px; background-color:#000}

.comments-reply li section{ float:left; padding-left:30px; font-size:16px; line-height:30px; font-weight:300; color:#343434;width: 92%;}

.comments-reply li section .date-pan{ font-size:14px; line-height:18px; padding-bottom:25px}

.comments-reply li section h4{font-weight:800; color:#404040; font-size:21px; margin-bottom:6px; margin-top:0}

.comments-reply li section h4 a{ font-size:16px; color:#fb5353;font-weight:400; display:inline-block; padding-left:20px}

.reply-pan{ clear:both; display:block; margin-left:100px;padding-top:39px }

.reply-pan li{ border-bottom:none;border-top:2px solid #dedede; padding-bottom:0; margin-bottom:0;padding-top:38px;}

.commentys-form h4{ font-size:24px}

.commentys-form form{ margin-top:30px}

.commentys-form input[type="text"],.commentys-form input[type="email"],.commentys-form input[type="url"],.commentys-form textarea{ font-size:21px; line-height:22px; color:#404040; padding-bottom:26px; border-bottom:2px solid #bbbbbb; width:100%; display:block; border-left:none; border-right:none; border-top:none; background-color:transparent; outline:none}

.commentys-form textarea{ margin-top:57px}

.commentys-form input[type="text"]:focus,.commentys-form input[type="email"]:focus,.commentys-form input[type="url"]:focus,.commentys-form textarea:focus{ border-bottom-color:#000}

.commentys-form input[type="button"]{ padding:0 36px; text-transform:uppercase; display:inline-block; font-size:21px; line-height:60px; color:#FFF; font-weight: bold; text-align:center; border:none; outline:none; background-color:#fb5353; margin-top:50px}

.commentys-form input[type="button"]:hover{ background-color:#ff5c5c}