/*
Theme Name: FLATI - Version:  1 Green
Description:  Designed by josweb.
Author:  Jo
Purchase:  http://themeforest.net/user/josweb
01. GENERAL STYLING
02. MENU
03. INDEX PAGES
04. PAGES
	0I:	TEAM
	II:	ABOUT
	III:SERVICES
	IV: TESTIMONIALS
	V:	BLOG
	VI: CONTACT
	VII:FOOTER
05: PORTFOLIO, CAROUSEL & THUMB CAROUSELS
06: 404 PAGE, PRICING TABLE, SKILLS BAR, ACCORDIAN, TABS
07. CSS3 ANIMATIONS
08. MEDIA QUERIES
*/

/*-----------------------------------------------------------------------------------*/
/*	01: GENERAL STYLING
/*-----------------------------------------------------------------------------------*/

body {
	margin:0; padding:0;
	font:13px/22px 'Lato', sans-serif;
	color:#555;
	background: #f0f0f0;  
	-webkit-backface-visibility:hidden; 
	overflow-x:hidden; 
	text-rendering:optimizeLegibility;
}

/**** PAGE CONTAINERS ****/
.header { 
	padding:0 0;
	background:#323A45;
	margin:0 auto; 
	height: 86px;
	width: 100%;
	z-index: 1000; 
}
.inner_content { padding:20px 0 0 0; }
.wrapper {  margin:0px auto; padding:0 0 60px;}
#banner { background:#e9e6e1; width: 100%; }
.intro_wrapper {  margin:0 auto; padding:0 0 40px;}
.intro_wrapper2 {  margin:-6px auto 0; padding:0 0 40px;}
.intro_wrapper3 {  margin:-20px auto 0; padding:0 0 40px;}

/**** GENERAL ****/
a, input, select, textarea {outline:none; text-decoration:none; }
a, li { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
a, a:visited { text-decoration: none!important; }
:focus {outline: 0;}
ul {list-style-type:none; }
a:hover, a:active, a:focus { outline: 0!important;}
::-moz-selection{ color:#fff; background:#1ABC9C; }
::selection { color:#fff; background:#1ABC9C; }
p {margin-bottom:15px; }
span { font-weight:700; }
small { letter-spacing:0.2em; font-size:11px; }
.clear { height:0; clear: both; font-size:0; }
.normal { font-weight: normal; }
.pull-right { margin-left:12px; }
.pull-left { margin-right:12px; }
.center { text-align:center; margin: 0 auto; }
.right { text-align:right; margin: 0 auto; }
hr { border-top:1px solid #ccc;border-bottom:0; }
blockquote { border-left:3px solid #1ABC9C;}
.zocial:hover, .zocial:focus{ background: #31C3A6; }
.zocial{ border-radius:4px; padding:2px;}
.media img { margin-top:5px; }
.media-body a { color:#888; }
.media-body a:hover { color:#777; }
.big {font-size:100px; }
.myslider{ display:none; }

.well {
	background-color:#D3CDC4;
	border:0px none;
	margin-top:10px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none; 
	-webkit-box-shadow:none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.icons{list-style-type:none;margin:0}
.icons li [class^="icon-"],.icons li [class*=" icon-"]{display:inline-block;width:1.2857142857142858em;text-align:center; margin-left:-3px; margin-right:4px;}

/* Colours */
.hue {color:#31C3A6; }
.white { color:#fff; }
.magnolia{color:#E9E6E1;}
.grey { color:#999; }
.grey2 { color:#69767F; }
.asphalt {color:#34495E; }
.colour {color:#45B39E; }
.hue_block { background-color:#45B39E; color: #fff;padding:0px 4px 2px; }
.hue_block:hover{ opacity:0.65;  }

/* Padding */
.pad90 { padding-top:90px; }
.pad45 { padding-top:45px; }
.pad30 { padding-top:30px; }
.pad25 { padding-top:25px; }
.pad15 { padding-top:15px; }
.pad10 { padding-top:10px; }
.pad5 { padding-top:5px; }

/* Margins */
.marg-bottom5 { margin-bottom:5px; }
.marg-left5 { margin-left:5px; }
.marg-right5 { margin-right:5px; }
.but_marg { margin-left:3px; }

/* Video */
.vendor{ 
	position:relative;
	padding-bottom:56.25%;
    padding-top:0px; 
	height:0;
	margin:0 0;
}
.vendor iframe { 
	position: absolute; 
	top:0; 
	left:0;
    width:100%;
	height:100%;
} 
iframe { border:0; width:100%; height:100%; }
video { width:100%; height:auto; }
.soundcloud{ width:100%; height:166px; }

/**** LINKS ****/
a {
	color:#31C3A6;   
	text-decoration:none;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	outline:none;
}
a:hover {color: #555; text-decoration: none; }


/**** IMAGES ****/
img { vertical-align:top; ms-interpolation-mode:bicubic; opacity:1.0;}
/* Image Hover Colour */
.hover_img:hover, .hover_colour {  
	position:relative;
	background:#D35400 url(../img/zoom.png) no-repeat 50% 50%;
	-webkit-box-shadow: inset 0 0 0 7px rgba(255,255,255,0.15);
	-moz-box-shadow: inset 0 0 0 7px rgba(255,255,255,0.15);
    box-shadow: inset 0 0 0 7px rgba(255,255,255,0.15); 
}

/* Image Rotate */
.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow:hidden;
}  
.rotate:hover  {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

/**** BUTTONS ****/
.btn{ 
	border:0;
	-webkit-transition:background-color .4s ease-in;
    -moz-transition:background-color .4s ease-in;
    -o-transition:background-color .4s ease-in;
    transition:background-color .4s ease-in;
}
.btn-custom{ font-size:14px; padding:12px 15px 14px; margin-top:10px; }
.btn-rounded{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn-primary { background-color:#31C3A6; border:0;}
.btn-primary:hover { background-color:#333;}
.btn:visited, .btn:focus { color:#fff; }
.label, .badge {text-shadow: none; }

/**** TYPOGRAPHY ****/
h1,h2,h3,h4,h5,h6 { font-weight:300; letter-spacing:-0.25px; }
h1.title {  font-size:40px; line-height:35px; font-weight:700; margin-bottom:35px; text-align:left;}
h1 { font-size: 24px; line-height:40px; }
h2 { font-size: 21px;  line-height:28px; }
h3 { font-size: 18px; line-height:25px; }
h4 { font-size: 16px; line-height:25px; margin-bottom:10px; }
h5 { font-size: 15px; line-height:22px; margin-bottom:10px; }
h6 { font-size: 14px; line-height:22px; margin-bottom:10px; }
h1.intro {  line-height:40px; font-weight:300;}
.lead { font-size:18px; line-height:24px; }

/* Welcome Text */
.welcome_index {
	width:80%;
	font: 32px/50px 'Lato', sans-serif;
	padding:55px 0 30px;
	font-weight:300; 
	margin:0 auto;
	color:#69767F;
	text-align:center;
}

/**** DROP CAPS ****/
.dropcap, .dropcap2 {
    font-weight: 700;
    display: block;
    float: left;
    font-size: 45px;
    padding: 0;
	margin: 10px 8px 0 0;
    text-transform: uppercase;
}
.dropcap2 { color:#45B39E; }

/**** LOGO****/
.logo a{
 	float:left; 
	margin:0 0 0 0;
	webkit-transition:all 0.3s ease-in;  
    -moz-transition:all 0.3s ease-in;  
    -o-transition:all 0.3s ease-in;  
    transition:all 0.3s ease-in;
}
.logo a:hover{ opacity: .80; }

/*-----------------------------------------------------------------------------------*/
/*	02: MENU
/*-----------------------------------------------------------------------------------*/
#main_menu select { display: none; font-size:12px; }
.menu_wrap { float:right; margin-top:20px; margin-right:-10px; }
.menu_wrap .nav li {
	list-style: none;
	float: left;
	margin: 0;
	position: relative;
}
.menu_wrap .nav > li { 
	padding: 0 0; 
	display: inline-block;
	height:20px;
	margin-top:0px;
	width: 110px;
}
.menu_wrap .nav li a {
	font-weight:400;
	color: #bbb;
	letter-spacing:2px;
	font-size: 13px;
	display: block;
	padding:24px 0px 22px;
	text-align: center;
	text-transform: uppercase;
}
.menu_wrap .nav > li > a:hover, .menu_wrap .nav > li > a:focus { background:#323A45; color: #45B39E;}
.menu_wrap .nav > li.active > a, .menu_wrap .nav > li.active { background:#45B39E; color:#fff;
	-webkit-border-radius: 4px 4px 0px 0px;
    -moz-border-radius: 4px 4px 0px 0px;
    border-radius: 4px 4px 0px 0px;
}
.menu_wrap .nav > li.active > a:hover { background: #45B39E;  color: #fff; }
.menu_wrap .nav ul {
	background: #fff;
	display: none;
	left:-25px;
	padding:0;
	position:absolute;
	top:80px;
	width:170px;
	z-index:300;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
	background:#323A45;
} 
.menu_wrap .nav ul li a {
 	width: 130px;
	border: 0;
	color: #eee; 
	display: block;
	font-size: 13px;
	letter-spacing:0;
	padding: 8px 20px !important;
	text-align: left;
	text-transform: none;
	webkit-transition:all 0.2s ease-in;  
    -moz-transition:all 0.2s ease-in;  
    -o-transition:all 0.2s ease-in;
	transition:all 0.2s ease-in;
}
.menu_wrap .nav > li > ul li a { text-decoration:none;  color: #bbb; }
.menu_wrap .nav ul li a span {display:none; }
.menu_wrap .nav > li > ul li > a:hover,
.menu_wrap .nav > li > ul li.sfHover > a,
.menu_wrap .nav > li > ul li.active > a { text-decoration:none;  color: #fff; }
.menu_wrap .nav ul ul {
	position: absolute;
	display: none;
	width: 170px;
	left: 180px;
	top: 0px;
	height:auto;
	list-style: none;
	z-index: 111;
	padding: 0 0;
	margin: 0;border-radius: 6px;
	border-top:0;
}
.menu_wrap .nav ul ul a{ 
	margin: 0;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}


/***************************************************
	VII: FOOTER
 ***************************************************/
/*Social Icons */
.follow_us {text-align:center;}
.follow_us a.zocial { 
	font-size:36px;
	width:77px;
	margin:0 10px 0 0;
	text-align: center;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	background:transparent;
	opacity:0.2;
}
.follow_us a.zocial:hover {opacity:1.0; background:transparent; }

#footer h1 { 
	letter-spacing:0.25em;
	font-size:20px;
	color: #eee;
	text-transform:uppercase;
	margin-bottom: 0.5em!important;
}
h3.follow {
	color: #eee;
	width: 50%;
	margin: 0 auto 40px;
	line-height:30px;
}

#footer { background-color:#45B39E; padding: 40px 0 30px; text-align:center; }
#footer2 {
	position:relative;
	text-align:center;
	padding:39px 0 36px; 
	background:#323A45;
	color:#999;
	margin:0 0; 
	font-size:13px;
	font-weight:400;
}

.copyright a {color:#888; }
.copyright a:hover {color:#777; }

/* Back To Top */
.go-top {
	position:fixed;
	bottom:0.5em; right: 0.5em;
	text-decoration: none;
	color:white;
	background-color: rgba(0, 0, 0, 0.3);
	font-size:30px;
	padding:0.1em 0.3em 0.1em;
	display:none;
	border-radius:3px; z-index:500;
}
.go-top:hover { background-color:rgba(0, 0, 0, 0.6);}

/*-----------------------------------------------------------------------------------*/
/*	07: CSS3 ANIMATIONS
/*-----------------------------------------------------------------------------------*/

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeIn { 0% {opacity: 0;}	100% {opacity: 1;}
}

@-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
@-o-keyframes fadeIn { 0% {opacity: 0;}	 100% {opacity: 1;} }
@keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }

.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}
@-webkit-keyframes fadeInUp {
	0% { opacity: 0; -webkit-transform: translateY(20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}

@-moz-keyframes fadeInUp {
	0% { opacity: 0; -moz-transform: translateY(20px); }
	100% { opacity: 1; -moz-transform: translateY(0); }
}
@-o-keyframes fadeInUp {
	0% { opacity: 0;	-o-transform: translateY(20px); }
	100% { opacity: 1; -o-transform: translateY(0); }
}

@keyframes fadeInUp {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}
.fadeInUp {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes fadeInDown {
	0% { opacity: 0; -moz-transform: translateY(-20px); }
	100% { opacity: 1; -moz-transform: translateY(0); }
}
@-o-keyframes fadeInDown {
	0% { opacity: 0; -o-transform: translateY(-20px);}
	100% { opacity: 1; -o-transform: translateY(0); }
}
@keyframes fadeInDown {
	0% { opacity: 0; transform: translateY(-20px); }
	100% { opacity: 1; transform: translateY(0); }
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
@-webkit-keyframes bounceInDown {
	0% { opacity: 0; -webkit-transform: translateY(-2000px); }
	60% { opacity: 1; -webkit-transform: translateY(30px); }
	80% { -webkit-transform: translateY(-10px); }
	100% { -webkit-transform: translateY(0); }
}
@-moz-keyframes bounceInDown {
	0% { opacity: 0; -moz-transform: translateY(-2000px); }
	60% { opacity: 1; -moz-transform: translateY(30px); }
	80% { -moz-transform: translateY(-10px); }
	100% { -moz-transform: translateY(0); }
}
@-o-keyframes bounceInDown {
	0% { opacity: 0; -o-transform: translateY(-2000px); }
	60% { opacity: 1; -o-transform: translateY(30px); }
	80% { -o-transform: translateY(-10px); }
	100% { -o-transform: translateY(0); }
}
@keyframes bounceInDown {
	0% { opacity: 0; transform: translateY(-2000px); }
	60% { opacity: 1; transform: translateY(30px); }
	80% { transform: translateY(-10px); }
	100% { transform: translateY(0); }
}

.bounceInDown {
	-webkit-animation-name: bounceInDown;
	-moz-animation-name: bounceInDown;
	-o-animation-name: bounceInDown;
	animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
	0% { opacity: 0; -webkit-transform: translateX(-2000px); }
	60% { opacity: 1; -webkit-transform: translateX(30px); }
	80% { -webkit-transform: translateX(-10px); }
	100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes bounceInLeft {
	0% { opacity: 0; -moz-transform: translateX(-2000px); }
	60% { opacity: 1; -moz-transform: translateX(30px); }
	80% { -moz-transform: translateX(-10px); }
	100% { -moz-transform: translateX(0); }
}
@-o-keyframes bounceInLeft {
	0% { opacity: 0; -o-transform: translateX(-2000px); }
	60% { opacity: 1; -o-transform: translateX(30px); }
	80% { -o-transform: translateX(-10px);}
	100% { -o-transform: translateX(0); }
}

@keyframes bounceInLeft {
	0% { opacity: 0; transform: translateX(-2000px); }
	60% { opacity: 1; transform: translateX(30px); }
	80% { transform: translateX(-10px); }
	100% {transform: translateX(0); }
}

.bounceInLeft {
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
	0% { opacity: 0; -webkit-transform: translateX(2000px); }
	60% { opacity: 1; -webkit-transform: translateX(-30px); }
	80% { -webkit-transform: translateX(10px); }
	100% { -webkit-transform: translateX(0); }
}

@-moz-keyframes bounceInRight {
	0% { opacity: 0; -moz-transform: translateX(2000px); }
	60% { opacity: 1; -moz-transform: translateX(-30px); }
	80% { -moz-transform: translateX(10px); }
	100% { -moz-transform: translateX(0); }
}
@-o-keyframes bounceInRight {
	0% {opacity: 0; -o-transform: translateX(2000px); }
	60% { opacity: 1; -o-transform: translateX(-30px); }
	80% { -o-transform: translateX(10px); }
	100% { -o-transform: translateX(0); }
}
@keyframes bounceInRight {
	0% { opacity: 0; transform: translateX(2000px);}
	60% {opacity: 1; transform: translateX(-30px);}
	80% {transform: translateX(10px);}
	100% {transform: translateX(0);}
}

.bounceInRight {
	-webkit-animation-name: bounceInRight;
	-moz-animation-name: bounceInRight;
	-o-animation-name: bounceInRight;
	animation-name: bounceInRight;
}
@-webkit-keyframes shake {
	0%, 100% {-webkit-transform: translateX(0);}	10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake {
	0%, 100% {-moz-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@-o-keyframes shake {
	0%, 100% {-o-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}
@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.shake {
	-webkit-animation-name: shake;
	-moz-animation-name: shake;
	-o-animation-name: shake;
	animation-name: shake;
}

/*-----------------------------------------------------------------------------------*/
/*	08: MEDIA QUERIES
/*-----------------------------------------------------------------------------------*/
@media (max-width: 979px) {
#main_menu {  margin:15px auto 25px; width:100%; text-align:center; float:none !important;}
nav#main_menu ul {display: none;}
nav#main_menu select { display: inline-block; margin:0 auto; text-align:left; width: 70%; }
.menu_wrap { margin:0 auto; float:none !important; text-align:center;}
.logo  {margin:10px auto 0px auto;}
.logo a {margin:0px auto 0px auto;float:none !important;}
.header{ float:none !important;text-align:center;margin:0px auto 0px auto;padding-bottom:20px!important;}
.container {  padding: 0 15px !important;}
.nivo {margin-top:0px!important;}
#banner { padding-bottom:25px;!important; }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
/* prettyPhoto styling for small screens */
.pp_pic_holder.pp_default { width: 100%!important; left: 0!important; overflow: hidden; }
div.pp_default .pp_content_container .pp_left { padding-left: 0!important; }
div.pp_default .pp_content_container .pp_right { padding-right: 0!important; }
.pp_content { width: 100%!important; height: auto!important; }
.pp_fade { width: 100%!important; height: 100%!important; }
a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; }
#pp_full_res img { width: 100%!important; height: auto!important;	border-radius:0px;  }
.pp_details { width: 94%!important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 35px; background-color: #fff; margin-top: -2px!important; }
a.pp_close { right: 10px!important; top: 12px!important; }
.theme-default .nivo-html-caption {display:none;}
}

@media only screen and (max-width: 480px) { 
.nivo_height { padding-top:0px!important; }
#banner { padding-bottom:25px;!important; }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 320px) {
h1.title { line-height:40px;!important; }
}