@charset "UTF-8";
/*   
Theme Name: Flattening - Responsive One Page Template
Description: A beautiful and fun theme for any creative agency, startup or freelancing business
Author: João Alberto
Author URI: http://jalberto.blacksheepz.org
Version: 1.0
*/

/* BASIC STUFF
*/
ins { background-color: #49c9af; color: #edeae3; text-decoration: none; }

mark { background-color: #49c9af; color: #edeae3; font-style: italic; font-weight: bold; }

::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, input:-moz-placeholder { color: #aab8ad; font-size: 13px; font-weight: 300; font-style: normal; }

::-moz-selection { background: #49c9af; color: #edeae3; text-shadow: none; }

::selection { background: #49c9af; color: #edeae3; text-shadow: none; }

select, input, textarea { color: #373b3c; }

p a, p a:visited { color: inherit; }

a, a:visited { text-decoration: none; outline: 0; }

a:hover, a:focus, a:active { text-decoration: none; outline: 0; }

a:link { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

textarea { resize: vertical; height: 145px; }

.green { color: #49c9af; }

/*--------------------------------------------------------------------------------------- 
  INDEX
---------------------------------------------------------------------------------------*/
/* 
  1) FONTS 
  2) BASIC STYLES 
  3) SPRITE 
  4) HEADER 
  5) TEAM 
  6) WORK 
  7) SERVICES 
  8) CONTACT 
  9) FOOTER
*/

/*-------------------------------- 
  1) FONTS
--------------------------------*/
.lead, h1, h2, h3, h4, h5, h6, #cta h1, .grid figcaption a, #loadMore, #showLess, #contact form input[type="submit"], footer { font-family: 'Patua One', cursive; font-weight: 400; font-style: normal; }

.light, #contact form input[type="text"], #contact form input[type="password"], #contact form input[type="email"], #contact form input[type="search"], #contact form input[type="url"], #contact form textarea, #contact form select { font-family: 'Open Sans', sans-serif; font-weight: 300; font-style: normal; }

.s-bold, section p span, #team-cards .card p.role { font-family: 'Open Sans', sans-serif; font-weight: 600; font-style: normal; }

/*-------------------------------- 
  2) BASIC STYLES
--------------------------------*/
body { font-family: 'Open Sans', sans-serif; font-size: 18px; line-height: 26px; font-weight: 300; font-style: normal; color: #edeae3; }

#cta a.button, #contact form input[type="submit"] { margin: 0 auto; display: block; text-align: center; background: #fa5c5c; color: #edeae3; font-size: 24px; padding: 14px 0 18px; -webkit-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset; box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }

h1, h2, h3, h4, h5, h6 { text-align: center; color: #49c9af; }

h1 { font-size: 48px; margin-bottom: 20px; }
@media only screen and (min-width: 768px) and (max-width: 959px) { h1 { font-size: 46px; } }

p { margin: 0 0 25px; }
p a { border-bottom: 1px solid #b4b6b1; padding: 0 2px; color: inherit; }
p a:hover { color: #f2f2eb; background: #49c9af; border-bottom: 1px solid #49c9af; }

section { padding: 40px 0; }

section#work, section#services, section#contact, footer { -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1) inset; box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1) inset; }

section.dark { background: #364347 url("../css/images/grunge.png") no-repeat center top; }

footer.dark { background: #364347; }

.dark { color: #edeae3; }
.dark p a { border-bottom: 1px solid #767873; }
.dark p a:hover { border-bottom: 1px solid #49c9af; }

section.light { background: #f2f2eb url("../css/images/grunge.png") no-repeat center top; }

.light, #contact form input[type="text"], #contact form input[type="password"], #contact form input[type="email"], #contact form input[type="search"], #contact form input[type="url"], #contact form textarea, #contact form select { color: #364347; }
.light p a, #contact form input[type="text"] p a, #contact form input[type="password"] p a, #contact form input[type="email"] p a, #contact form input[type="search"] p a, #contact form input[type="url"] p a, #contact form textarea p a, #contact form select p a { border-bottom: 1px solid #c2c2c2; }
.light p a:hover, #contact form input[type="text"] p a:hover, #contact form input[type="password"] p a:hover, #contact form input[type="email"] p a:hover, #contact form input[type="search"] p a:hover, #contact form input[type="url"] p a:hover, #contact form textarea p a:hover, #contact form select p a:hover { border-bottom: 1px solid #49c9af; }

/*-------------------------------- 
  3) SPRITE
--------------------------------*/
.navbar-default .navbar-nav > .active > a, .icon-tw a, .icon-db a, .icon-li a, .bx-wrapper .bx-prev, .bx-wrapper .bx-next, .bx-pager.bx-default-pager a, .bx-pager.bx-default-pager a:hover, .bx-pager.bx-default-pager a.active, #services .icon1, #services .icon2, #services .icon3, #services .icon4, #services .icon5, #services .icon6, footer .lightning, .carousel-control.left, .carousel-control.right { background: url("../css/images/sprite.png") no-repeat top left; }

/*-------------------------------- 
  4) HEADER
--------------------------------*/
header { background: url("../css/images/bg_header.png") repeat-x top left; height: 101px; position: fixed; top: 0; width: 100%; z-index: 40; -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1) ; -moz-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1) ; box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1) ; /*button*/ /*menu collapse*/ }
@media only screen and (min-width: 768px) and (max-width: 959px) { header { position: relative; background: #364347; } }
@media only screen and (max-width: 767px) { header { position: relative; background: #364347; } }
@media only screen and (min-width: 768px) and (max-width: 959px) { header .container { background: #364347; } }
@media only screen and (max-width: 767px) { header .container { background: #364347; } }
header .navbar-default { background: transparent; border: 0 none; }
header .navbar { margin-bottom: 0; }
header .navbar-brand { padding: 25px 15px 0; }
@media only screen and (max-width: 767px) { header .navbar-brand { padding: 25px 0 0; } }
header .navbar-nav > li { margin-bottom: 0; }
header .navbar-nav > li > a { padding-top: 45px; }
header .navbar-default .navbar-nav > li > a, header .navbar-default .navbar-nav > .active > a, header .navbar-default .navbar-nav > .active > a:hover, header .navbar-default .navbar-nav > .active > a:focus { background-color: rgba(0, 0, 0, 0); color: #edeae3; }
header .navbar-default .navbar-nav > .active > a { background-position: 30px -917px; }
header .navbar-default .navbar-nav > li > a:hover, header .navbar-default .navbar-nav > li > a:focus { color: #49c9af; }
header .navbar-default .navbar-toggle { border: 2px solid #49c9af; margin-top: 28px; }
header .navbar-default .navbar-toggle:hover, header .navbar-default .navbar-toggle:focus { background-color: #49c9af; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -ms-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear; }
header .navbar-default .navbar-toggle:hover .icon-bar, header .navbar-default .navbar-toggle:focus .icon-bar { background-color: #edeae3; }
header .navbar-default .navbar-toggle .icon-bar { background-color: #49c9af; }
header .navbar-toggle .icon-bar { height: 3px; width: 24px; }
header .navbar-collapse.in { border-top: 0 none !important; border-left: 0 none !important; border-right: 0 none !important; border-bottom: 1px solid #313B3E; margin-top: 15px; background: #364347; -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1) ; -moz-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1) ; box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1) ; }
header .navbar-collapse.in ul li a { padding: 20px 25px; }
header .navbar-collapse.in ul li.active > a { background: none; color: #49c9af; }
header .navbar-collapse.collapsing { border: 0 none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-top: 15px; }
header .navbar-collapse.collapsing ul li a { padding: 20px 25px; }
header .navbar-collapse.collapsing ul li.active > a { background: none; color: #49c9af; }

header.scrolled { opacity: 0.98; filter: alpha(opactiy=98); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=98)"; -khtml-opacity: 0.98; -moz-opacity: 0.98; }

#cta { height: 425px; width: 100%; margin-top: 101px; /*Header Fixed*/ background: url("../images/hero.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
@media only screen and (min-width: 768px) and (max-width: 959px) { #cta { background: url("../images/hero.jpg") no-repeat center center; margin-top: 0; } }
@media only screen and (max-width: 767px) { #cta { background: url("../images/hero.jpg") no-repeat center center; margin-top: 0; } }
#cta h1 { font-size: 65px; line-height: 75px; text-align: center; width: 100%; text-shadow: 0 5px 0 rgba(0, 0, 0, 0.13); margin-top: 9%; color: #edeae3; }
#cta h1 span { color: #49c9af; }
#cta a.button { width: 260px; margin-top: 8%; }
#cta a.button:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }

/*-------------------------------- 
  5) TEAM
--------------------------------*/
#team-cards { float: left; margin-top: 30px; width: 100%; }
#team-cards .card { padding: 15px 0; background-color: rgba(242, 242, 235, 0.9); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset; box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset; margin-bottom: 20px; }
#team-cards .card h5 { color: #364347; font-size: 24px; margin: 0 0 10px; }
#team-cards .card img { display: block; margin: 0 auto; }
#team-cards .card p.role { font-size: 18px; color: #364347; text-align: center; margin: 15px 0; }
#team-cards .card hr { border-color: #b4b6b1; margin: 0; }
#team-cards .card a.expand-card { color: #364347; display: block; text-align: center; margin: 10px 0 0; }
#team-cards .card a.expand-card:hover { color: #49c9af; }
#team-cards .card .profile-collapse { margin: 10px 0 0; font-size: 15px; line-height: 21px; color: #364347; padding: 0 19px; }
#team-cards .card .profile-collapse ul li { display: inline-block; margin-bottom: 0; margin-right: 10px; }
#team-cards .card .profile-collapse ul li a { width: 25px; height: 22px; display: block; text-indent: -999999px; }
#team-cards .card .profile-collapse ul li a:hover { opacity: 0.9; filter: alpha(opactiy=90); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; -khtml-opacity: 0.9; -moz-opacity: 0.9; }
#team-cards .card .icon-tw a { background-position: 0 -885px; }
#team-cards .card .icon-db a { background-position: 0 -801px; }
#team-cards .card .icon-li a { background-position: 0 -843px; }

/*-------------------------------- 
  6) WORK
--------------------------------*/
/* 
  IMAGES
*/
.grid { padding: 0; max-width: 100%; margin: 0 auto; list-style: none; text-align: center; }
.grid li { padding: 0; text-align: left; position: relative; float: left; display: inline; margin-bottom: 15px !important; }
.grid figure { margin: 0; position: relative; -webkit-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1) ; -moz-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1) ; box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1) ; }
@media only screen and (max-width: 767px) { .grid figure { width: 73%; margin: 0 auto; } }
@media only screen and (min-width: 480px) and (max-width: 767px) { .grid figure { width: 100%; } }
.grid figure img { max-width: 100%; display: block; position: relative; }
.grid figcaption { position: absolute; top: 0; left: 0; padding: 5px 20px 10px; background: #364347; color: #49c9af; font-size: 14px; }
.grid figcaption h3 { margin: 0; padding: 0; color: #edeae3; text-align: left; font-size: 17px; }
@media only screen and (min-width: 768px) and (max-width: 959px) { .grid figcaption h3 { font-size: 16px; line-height: 25px; } }
.grid figcaption span:before { content: 'in '; }
.grid figcaption a { text-align: center; font-size: 16px; padding: 10px 10px 15px; -webkit-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset; box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; display: block; background: #fa5c5c; color: #edeae3; }

/* 
  Captions (Fancy a different effect? - http://tympanus.net/codrops/2013/06/18/caption-hover-effects/)
*/
.caption-style figure { overflow: hidden; }

.caption-style figure img { -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; }
@media only screen and (max-width: 767px) { .caption-style figure img { display: block; margin: 0 auto; } }

.no-touch .caption-style figure:hover img, .caption-style figure.cs-hover img { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); }

.caption-style figcaption { height: 100px; width: 100%; top: auto; bottom: 0; opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s; }
@media only screen and (min-width: 768px) and (max-width: 959px) { .caption-style figcaption { height: 130px; } }

.no-touch .caption-style figure:hover figcaption, .caption-style figure.cs-hover figcaption { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s; }

.caption-style figcaption a { position: absolute; bottom: 15px; right: 20px; }
@media only screen and (min-width: 768px) and (max-width: 959px) { .caption-style figcaption a { position: relative; margin: 0 auto; display: block; margin: 20px 0 10px 0; bottom: 0; right: 0; width: 100%; } }

/*Buttons*/
#loadMore { color: #edeae3; background-color: #49c9af; border: 1px solid #49c9af; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -ms-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear; margin: 20px auto 0; display: block; padding: 10px; text-align: center; width: 98%; }
#loadMore:hover { background: rgba(0, 0, 0, 0); color: #49c9af; }

#showLess { color: #edeae3; background-color: #fa5c5c; border: 1px solid #fa5c5c; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -ms-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear; margin: 20px auto 0; display: block; padding: 10px; text-align: center; width: 98%; }
#showLess:hover { background: rgba(0, 0, 0, 0); color: #fa5c5c; }

/* 
  MODALS
*/
.modal-header .close { background: url("../css/images/modal_close.png") no-repeat center right; width: 47px; height: 47px; margin-right: -26px; margin-top: -26px; opacity: 1; filter: alpha(opactiy=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -khtml-opacity: 1; -moz-opacity: 1; text-indent: -99999px; }

.modal-dialog { max-width: 830px; padding-top: 40px; width: 95%; }

.modal-content { background: #f3f3ec; }
.modal-content .carousel-control.left { background-position: 0 0; width: 34px; height: 56px; margin-top: 48%; margin-left: 5%; }
.modal-content .carousel-control.left:hover { background-position: 0 -76px; }
.modal-content .carousel-control.right { background-position: 0 -152px; width: 34px; height: 56px; margin-top: 48%; margin-right: 5%; }
.modal-content .carousel-control.right:hover { background-position: 0 -228px; }
.modal-content .carousel-indicators { bottom: -55px; }
.modal-content .carousel-indicators li { border: 1px solid #49c9af; }
.modal-content .carousel-indicators .active { background-color: #49c9af; }
.modal-content .carousel-caption { bottom: 20px; color: #edeae3; left: 15%; padding-bottom: 0px; padding-top: 20px; position: absolute; right: 15%; text-align: center; text-shadow: none; z-index: 10; }
.modal-content .carousel-caption p { background: rgba(54, 67, 71, 0.38); margin: 0; padding: 5px; font-size: 14px; }

.modal-body img { display: block; margin: 0 auto; }

.modal-footer { margin-top: 25px; text-align: left; color: #364347; font-size: 18px; line-height: 26px; padding: 20px 25px; }

/*-------------------------------- 
  7) SERVICES
--------------------------------*/
#services .one-third { margin-bottom: 20px; }
#services span { display: block; margin: 0 auto; width: 56px; height: 56px; margin-bottom: 10px; }
#services .icon1 { background-position: 0 -345px; width: 56px; height: 56px; }
#services .icon2 { background-position: 0 -421px; width: 56px; height: 56px; }
#services .icon3 { background-position: 0 -497px; width: 56px; height: 56px; }
#services .icon4 { background-position: 0 -573px; width: 56px; height: 56px; }
#services .icon5 { background-position: 0 -649px; width: 56px; height: 56px; }
#services .icon6 { background-position: 0 -725px; width: 56px; height: 56px; }
#services h2 { font-size: 22px; text-transform: uppercase; margin-bottom: 5px; }
@media only screen and (min-width: 768px) and (max-width: 959px) { #services h2 { font-size: 18px; } }
#services p { font-size: 15px; line-height: 22px; }
@media only screen and (min-width: 768px) and (max-width: 959px) { #services p { text-align: center; } }

/*-------------------------------- 
  8) CONTACT
--------------------------------*/
#contact form { margin-top: 15px; }
#contact form input[type="text"], #contact form input[type="password"], #contact form input[type="email"], #contact form input[type="search"], #contact form input[type="url"], #contact form textarea, #contact form select { border: 2px solid #d8d8d0; width: 100%; min-height: 51px; font-size: 14px; padding: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; margin-bottom: 15px; }
#contact form input[type="text"]:focus, #contact form input[type="password"]:focus, #contact form input[type="email"]:focus, #contact form input[type="search"]:focus, #contact form input[type="url"]:focus, #contact form textarea:focus { border: 2px solid #49c9af; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
#contact form input[type="submit"] { border: 0 none; background-color: #49c9af; width: 100%; padding: 13px 0 15px; color: #fff; }
#contact form input[type="submit"]:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
#contact .notification_error { color: #fa5c5c; }
#contact .notification_ok { color: #49c9af; }

/*-------------------------------- 
  9) FOOTER
--------------------------------*/
footer { color: #edeae3; font-size: 13px; }
footer ul { text-align: center; margin: 25px 0 20px; }
footer ul li { display: inline-block; margin: 0; }
footer ul li a { font-size: 14px; text-transform: uppercase; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -ms-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear; color: #edeae3; }
footer a { color: #edeae3; }
footer a:hover { color: #49c9af; }
footer p { text-align: center; }
footer .lightning { background-position: 14px -305px; height: 20px; margin-bottom: 0; padding: 0 20px; text-indent: -999999px; }
footer hr { margin: 0 auto 10px; border-width: 3px 0 0; border-color: #313d40; width: 75%; }
footer hr.smaller-hr { padding: 0 20px; width: 65%; margin: 0 auto; }
footer .copyright { margin: 20px 0 15px; }