@import url(http://fonts.googleapis.com/css?family=Merienda+One);
@import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic);

/************** Basic HTML **************/
body {padding:0px;background:#3a3c42;}


/************** Main Layout & Design **************/
.sourrounding_wrapper  {border-bottom:1px solid #e3e3e3;background-color:#fff;}
.sourrounding_wrapper#credits {border:none;background:none;}
.joobstrab_area {float:left; width:100%;}
.inner_wrapper {margin:0px auto; width:100%;max-width:1240px;min-width:320px;padding:80px 5%;}
#bottom_center .inner_wrapper{width:100%;max-width:100%; min-width:100%;padding:80px 0%;}
#bottom_center .inner_wrapper .container {width:100%;min-width:100%;}
#navbar_center .inner_wrapper, #header_slider .inner_wrapper {padding:0px 5%;}
.navbar_area {position:relative; z-index:2;}

/************** Typo **************/
body { font:16px/1.75em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;color: #505050;-webkit-text-size-adjust: none;}
h1, h2, h3, h4, h5, h6 {color:#202020;font-weight:600;}
h1 {font-size:5em;}
h1.hero {font-size:8em;margin:0 0 .1em 0;padding:0px; line-height:1em;}
h2 {font-size:3.75em;}
h3 {font-size:2.75em;}
h4 {font-size:2em;}
h5 {font-size:1.5em;}
h6 {font-size:1.25em;}
blockquote {font-family: 'Playfair Display', serif;color:#fff;padding:40px; border:none;}
blockquote p {font-size:14px;line-height:1.5em;}
/************** Navigation & Logo **************/

/* The Logo */
.navbar-brand h1{font-family: 'Merienda One', cursive;padding:0px;margin:0 0 0 10px;font-size:28px;line-height:1em;height:80px; line-height:80px;}
.sticked .navbar-brand h1 {color:#fff;}

/* The Navbar */
.boxed #navbar_center {background:none;}
#navbar_center, .boxed #navbar_center .inner_wrapper {}
#navbar_center{margin-bottom:-11px;}

/* Navbar Link Element*/
.main_nav .navigation li{padding:20px;margin:5px 0;}
.main_nav .navigation li a{display:block;}
.main_nav ul.navigation li.parent ul.nav-child {margin-left:-20px;}
.main_nav .navigation li, .main_nav .navigation li a {color:#fff;}
.sticked .main_nav .navigation li, .sticked .main_nav .navigation li a {color:#fff;}
.main_nav .navigation li.active, .main_nav .navigation li.active a {font-weight:bold;}

/********** Colorset *************/

/*Sections*/
.header_area .sourrounding_wrapper, .navbar_area .sourrounding_wrapper, .footer_area .sourrounding_wrapper, .bottom_area .sourrounding_wrapper{background:none;border:none;color:#fff;}
.header_area h1, .navbar_area h1, .header_area h2, .navbar_area h2,.header_area h3, .navbar_area h3,.header_area h4, .navbar_area h4,
.header_area h5, .navbar_area h5,.header_area h6, .navbar_area h6, #top_center h1, #top_center h2, #top_center h3, #top_center h4, #top_center h5, #top_center h6, .footer_area h1, .footer_area h2, .footer_area h3, .footer_area h4, .footer_area h5, .footer_area h6 {color:#fff;}
.footer_area .sourrounding_wrapper, .bottom_area .sourrounding_wrapper {border-bottom:1px solid rgba(255,255,255,.1);}
/*Primary contrast color */
a, .colored{color:#4fc680;}
#footer_center a {color:#000;}
.main_nav ul.navigation li.parent:hover ul.nav-child, .navbar-brand h1:hover, .btn-primary, .footer_area .sourrounding_wrapper, blockquote  {background:none;background-color:#4fc680;}
.sticked .sourrounding_wrapper#navbar_center, .sourrounding_wrapper#navbar_center:hover, #credits .container {background-color:#3a3c42;}
#main_top, #main_bottom {background-color:#f1f4f5;}
.module-title span {font-weight:300;}
.main_nav .navigation li:hover a, .main_nav .navigation li.active a{border-bottom:3px solid #4fc680;}
.main_nav .navigation li a{border-bottom:3px solid transparent;}
.sticked .main_nav .navigation li.active a {border-bottom:3px solid #fff;}
.sourrounding_wrapper#navbar_center{ -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.sourrounding_wrapper#top_center {background-color:#4fc680;color:#fff;background-image: url(../img/icons_bck.png);background-attachment: fixed;}
#credits .container {padding:20px 20px; font-size:12px;color:#777;}

/************** Custom content elements **************/
ul.gallery {padding:0; margin:0;text-align:center;margin-left:-15px; margin-right:-15px;}
ul.gallery li {list-style:none;margin:0;padding:0;float:left; width:12.5%;margin:20px 0}
ul.gallery li img {width:100%;opacity:.7;}
ul.gallery li p, ul.gallery li h5 {position:absolute;width:12.5%;display:none;color:#fff;}
ul.gallery li:hover img {opacity:1;}
ul.gallery li:hover p, ul.gallery li:hover h5 {display:block;}
.hidden_element {display:none;}

/* Fix Google Maps canvas
 *
 * Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's
 * global `box-sizing` changes. You may optionally need to reset the `max-width`
 * on images in case you've applied that anywhere else. (That shouldn't be as
 * necessary with Bootstrap 3 though as that behavior is relegated to the
 * `.img-responsive` class.)
 */

.google-map-canvas,
.google-map-canvas * { .box-sizing(content-box); }
.google-map-canvas iframe, iframe.google-map-canvas {width:100%;border:0px;}


/************** Bootstrap Customizations **************/

/* Button Resets */
.btn {border:none;text-shadow:none;}
.btn-xl {padding:16px 80px;font-size:2rem;}

/************** Mobile customizations **************/
@media (max-width: 767px) {
body {font-size:18px;text-align:center;}
h1 {font-size:7.25rem;}
h2 {font-size:6rem;}
h3 {font-size:4.5rem;}
h4 {font-size:3.25rem;}
h5 {font-size:2.25rem;}
h6 {font-size:1.5rem;}
}