@charset "UTF-8";
/*   
Theme Name: Studio-X
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
*/

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

/*--------------------------------
 1) BASIC STYLES
--------------------------------*/
html { background: #5bcaf5 url('../css/images/main_bg.jpg') repeat center top;}

body {font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: normal; font-size: 14px; line-height: 18px; color: #fff;text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.16); background: url('../css/images/grunge_bg.png') no-repeat center top;}

select, input, textarea {color: #333;}

a, a:visited {color: #ff9d44; text-decoration: none; outline: 0;}
a:hover, a:focus {color: #fff; text-decoration: none;  outline: 0;}
a:active {outline: 0;}
a:link {-webkit-tap-highlight-color: rgba(0,0,0,0);} 

h1, h2, h3, h4, h5, h6 { color: #fff;}
h1 { text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.16); font-size: 30px; font-family: 'blackjackregular', arial, sans-serif; font-weight: normal; }
h6 { text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.16); font-size: 25px; font-family: 'blackjackregular', arial, sans-serif; font-weight: normal;}
@media only screen and (max-width: 639px) { section h1 { font-size: 30px;}}

ins {background-color: #fff88e; color: #000; text-decoration: none;}
mark {background-color: #fff88e; color: #000; font-style: italic; font-weight: bold;}


/*--------------------------------
 2) FONTS
--------------------------------*/
@font-face {
    font-family: 'blackjackregular';
    src: url('../fonts/black_jack-webfont.eot');
    src: url('../fonts/black_jack-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/black_jack-webfont.woff') format('woff'),
         url('../fonts/black_jack-webfont.ttf') format('truetype'),
         url('../fonts/black_jack-webfont.svg#blackjackregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*Classes for fonts so we don't have to keep calling them in CSS - Add the classes in your HTML*/

.permanent { font-family: 'din_alternatebold', arial, sans-serif; font-weight: normal;}
.os-light { font-family: 'Open Sans', sans-serif; font-weight: 300; font-style: italic;}
.os-regu  { font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: normal;}
.os-sem  { font-family: 'Open Sans', sans-serif; font-weight: 600;}
.os-semi  { font-family: 'Open Sans', sans-serif; font-weight: 600; font-style: italic;}
.os-bold, .bold  { font-family: 'Open Sans', sans-serif; font-weight: 700;}

/*--------------------------------
 3) SPRITE
--------------------------------*/
/*  Define All Elements Using Images From Sprite In One Place  */
#social .gplus,
#social .fbook,
#social .twitt,
.bx-wrapper .bx-next,
.bx-wrapper .bx-prev,
.team-member-description ul li a,
.icon_contact_fb,
.icon_contact_tw,
.icon_contact_gp,
.icon_contact_ml,
.icon_contact_ph { background: url('../css/images/sprite.png') no-repeat top left;}

/*--------------------------------
 4) HEADER & NAV
--------------------------------*/
.fixed { background: url('../css/images/menu_bg.png') repeat-x center top; height: 76px; position: fixed; top:0; width: 100%; z-index: 1000;}

@media only screen and (max-width: 959px) { 
  .fixed {position: relative;}
  .small-bg { background: url('../css/images/menu_bg.png') repeat-x center top; height: 76px; top:0; width: 100%;  z-index: 1000;}
  .small-bg .logo { height: 52px!important; width: 53px!important; margin-top: 8px!important; margin-left: 10px!important;}
  .navbar-brand { display: block; padding: 0; position: absolute; text-align: center; top: 1px!important; width: 100%; z-index: 2000;}
  .navbar-toggle { z-index: 3000;}
}

.navbar-header { min-width: 110px; top: 0;}

.navbar-default {top: 0; max-width: 940px; margin: 0 auto; padding: 0 105px; background-color: transparent; border: 0 none;}
@media only screen and (max-width: 959px) { .navbar-default {padding: 0 5px;}}

.navbar-default .navbar-nav { padding-top: 20px;}
@media only screen and (max-width: 959px) { .navbar-default .navbar-nav { padding-top: 0;}}

.fixed .navbar-default .navbar-nav {padding-top: 3px;}

.fixed .navbar-brand { padding: 0 15px; }

.navbar-default .navbar-nav > li > a { font-size: 15px; text-transform: uppercase; color: #fff; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.4); padding: 25px 20px;}
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { color: #fff; background: url('../css/images/menu_active.png') no-repeat 50% 80%;}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { background: transparent; color: #fff; background: url('../css/images/menu_active.png') no-repeat 50% 80%;}


.navbar-collapse.collapsing .navbar-nav > .active > a, 
.navbar-collapse.collapsing .navbar-nav > .active > a:hover, 
.navbar-collapse.collapsing .navbar-nav > .active > a:focus,
.navbar-collapse.collapsing .navbar-nav > li > a:hover,
.navbar-collapse.collapsing .navbar-nav > li > a:focus,
.navbar-collapse.in .navbar-nav > .active > a, 
.navbar-collapse.in .navbar-nav > .active > a:hover, 
.navbar-collapse.in .navbar-nav > .active > a:focus,
.navbar-collapse.in .navbar-nav > li > a:hover,
.navbar-collapse.in .navbar-nav > li > a:focus { color: #fff; background: rgba(91, 202, 245, 0.52)!important;}

.navbar-collapse.collapsing .navbar-collapse.in .navbar-nav > li > a,
.navbar-collapse.collapsing .navbar-nav > li,
.navbar-collapse.in .navbar-nav > li > a { margin: 0 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.navbar-collapse.in .navbar-nav > li { margin-bottom: 5px;}

/*  TOGGLE BUTTON  */
.navbar-toggle { margin-top: 16px;}
.fixed .navbar-toggle { margin-top: 16px;}
.navbar-default .navbar-toggle { background-color: transparent; border: 0 none;}
.navbar-default .navbar-toggle > .icon-bar { background-color: #fff;}
.navbar-toggle .icon-bar { height: 4px; width: 28px;}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: #fdaf68; border-color: #fdaf68;}
.navbar-default .navbar-toggle:hover > .icon-bar,
.navbar-default .navbar-toggle:focus > .icon-bar { background-color: #5bcaf5;}

/*COLAPSED*/
.navbar-collapse.in {background-color: rgba(73, 162, 197, 0.5); border-top: 0 none!important; border: 1px solid #4394b3; -webkit-box-shadow: 0 4px 0 0 #5bcaf5; box-shadow: 0 4px 0 0 #5bcaf5; left: 0; margin-top: 9px !important; width: 100%;}
.navbar-collapse.collapsing { border: 0 none;}

/* SOCIAL */
#social { margin-top: 13px;}
ul#social li a{ display: block; float: left; text-indent: -999999px; margin-left: 55px; padding: 0!important;}
#social .gplus { background-position: 0 -1926px; width: 32px; height: 32px;}
#social .gplus:hover { background-position: 0 -2008px;}
#social .fbook { background-position: 0 -1622px; width: 33px; height: 32px;}
#social .fbook:hover { background-position: 0 -1704px;}
#social .twitt { background-position: 0 -2232px; width: 32px; height: 32px;}
#social .twitt:hover { background-position: 0 -2314px;}

@media only screen and (max-width: 959px) { #social { display: none;} }

/*--------------------------------
 5) HOME SECTION
--------------------------------*/
#home { margin-top: 20px; /*padding-top: 60px;*/}
#home h1 { text-align: left; padding: 0 15px 15px 0px; margin: 0; line-height: 10px;}
@media only screen and (max-width: 959px) { #home h1 { font-size: 30px; background-position: 99% 86%;}}
@media only screen and (max-width: 639px) { 
  #home h1 { font-size: 30px; line-height: 30px;}
  #home p { text-align: left;}
}
@media only screen and (max-width: 479px) { #home h1 { background-position: 50% 66%;}}

#home p { padding: 0 15px 15px 0px;}

/*  SLIDER  */
.bx-wrapper .bx-viewport { left: 0; border: 1px solid #6392a4; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow:  0px 2px 0px 0px rgba(0, 0, 0, 0.17); box-shadow:  0px 2px 0px 0px rgba(0, 0, 0, 0.17);}
.bx-wrapper img { -webkit-border-radius: 5px; border-radius: 5px;  }
/* ARROWS */
.bx-wrapper .bx-controls-direction a { width: 34px; height: 58px;  margin-top: -33px; z-index: 100;}
.bx-wrapper .bx-prev { background-position: 0 0; left: -50px;}
.bx-wrapper .bx-prev:hover { background-position: 0 -108px;}
.bx-wrapper .bx-next { background-position: 0 -216px; right: -50px;}
.bx-wrapper .bx-next:hover { background-position: 0 -324px;}
@media only screen and (max-width: 767px) { .bx-wrapper .bx-controls-direction{display: none;}}
/* BULLETS */
.bx-wrapper .bx-pager { text-align: right;}
.bx-wrapper .bx-pager.bx-default-pager a { border-radius: 0; height: 19px; width: 19px;}
/* ACTIVE */
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: url('../css/images/bullet_active.png'); height: 18px; width: 19px;}
/* NORMAL */
.bx-wrapper .bx-pager.bx-default-pager a { background: url('../css/images/bullet.png'); height: 18px; width: 19px;}
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; text-align: left; }

/*--------------------------------
 6) WORK SECTION
--------------------------------*/
#work h1 { text-align: left; padding: 15px 15px 15px 0px; margin: 0; line-height: 10px;}

@media only screen and (max-width: 959px) { #work h1 { background-position: 37% 62%; } }

/*  PORTFOLIO SHOWCASE  */
.grid { max-width: 100%; list-style: none; margin: 20px auto 30px; padding: 0;}
.grid li { display: block; float: left; opacity: 0; padding: 7px; width: 50%; margin-bottom: 0!important}
.grid li.shown, .no-js .grid li, .no-cssanimations .grid li { opacity: 1;}
.grid li a { border: 1px solid #7EA787; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow:  0px 2px 0px 0px rgba(0, 0, 0, 0.17); box-shadow:  0px 2px 0px 0px rgba(0, 0, 0, 0.17); }

.grid li a,
.grid li img { outline: none; border: none; display: block; max-width: 100%; -webkit-border-radius: 5px; border-radius: 5px;}

/* -- (Fancy a different effect? https://github.com/codrops/GridLoadingEffects) -- */
.grid.effect li.animate {
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-animation: scaleUp 0.65s ease-in-out forwards;
  -moz-animation: scaleUp 0.65s ease-in-out forwards;
  animation: scaleUp 0.65s ease-in-out forwards;
}

@-webkit-keyframes scaleUp {
  to { -webkit-transform: scale(1); opacity: 1; }
}

@-moz-keyframes scaleUp {
  to { -moz-transform: scale(1); opacity: 1; }
}

@keyframes scaleUp {
  to { transform: scale(1); opacity: 1; }
}

@media screen and (max-width: 900px) { .grid li { width: 49%; }}
@media screen and (max-width: 400px) { .grid li { width: 100%;}}

/*  CAPTIONS  */
.grid figure { margin: 0; position: relative; }
.grid figure img { max-width: 100%; display: block; position: relative; }

.grid figcaption { position: absolute; top: 0; left: 0; padding: 5px 20px 20px; background: #285587; color: #D6D6DD;}
.grid figcaption h3 { margin: 0; padding: 0; color: #fff; font-size: 16px;}

.grid figcaption span { font-size: 13px;}
.grid figcaption span:before { content: 'in '; font-style: italic;}

.grid figcaption a { text-align: center; padding: 10px 15px; border-radius: 2px; display: inline-block; background: #fdaf68; color: #fff;}

/* Caption Effect */
.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;}
.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; }
.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: 20px; right: 20px; }

@media only screen and (max-width: 639px) { 
  .caption-style figcaption a { bottom: 10px; right: 10px; }
  .grid figcaption { padding: 5px 10px;}
  .grid figcaption h3 { font-size: 13px; line-height: 15px;}
  .grid figcaption span { font-size: 10px;}
  .caption-style figcaption { max-height: 100%;}
}

/*  MODAL  */
.modal-dialog { padding-top: 40px; width: auto; max-width: 830px;}
.modal-content { background-color: #fbfbf2;}

.modal-header { border-bottom: 0 none;}
.modal-header .close { background: url('../css/images/modal_close.png') no-repeat center right; width: 47px; height: 47px; margin-right: -26px; margin-top: -26px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; text-indent: -99999px;}
.modal-title { color: #827c96; font-size: 32px; text-align: center; text-transform: uppercase; text-shadow: none;}

.modal hr { border-color: #e1dddd; margin: 0 auto; max-width: 718px; width: auto;}

.modal-body { padding: 20px 20px 5px;}
.modal-body img { margin: 0 auto; display: block; width: 100%; padding: 0 25px 15px;}

.modal-footer { border-top: 0 none; margin-top: 0;}

.modal-footer p { color: #827c96; font-size: 13px; padding: 0 15px 0 40px; text-align: left; text-shadow: none;}
.modal-footer p a,
.modal-footer p a:hover, 
.modal-footer p a:focus { color: #5bcaf5; }

.social_share { height: 25px; margin-top: 20px; padding: 0 0 0 40px;}

.social_share div { display: block; float: left; width: auto; margin-right: 15px;}

.modal {z-index: 10040; }
.modal-backdrop { z-index: 10030;}
.modal-backdrop.in { opacity: 0.5 !important;}

/*--------------------------------
 7) ABOUT SECTION
--------------------------------*/
#about { padding-bottom: 60px; }
#about h1 { text-align: left; padding: 0 15px 15px 0px; margin: 0; line-height: 10px;}
@media only screen and (max-width: 959px) { #team h1 { background-position: 36% 59%;}}

.team-member { float: left; margin-top: 30px;}

.team-member-photo { background: url('../css/images/circle_team.png') no-repeat center center;}
@media only screen and (min-width: 768px) and (max-width: 959px) { .team-member-photo {background: none;}}
.team-member-photo img { display: block; margin: 0 auto;  padding:5px 0;}

.team-member-description h6 { padding: 10px 10px 10px 0px;}
@media only screen and (max-width: 767px) { .team-member-description h6 {text-align: center; }}
.team-member-description ul li a { display: block; float: left; text-indent: -999999px; margin-right: 6px;}
.team-member-description ul li a.icon_twitter { background-position: 0 -2396px; width: 21px; height: 21px;}
.team-member-description ul li a.icon_twitter:hover { background-position: 0 -2467px;}
.team-member-description ul li a.icon_facebook { background-position: 0 -1482px; width: 20px; height: 20px;}
.team-member-description ul li a.icon_facebook:hover { background-position: 0 -1552px;}
.team-member-description ul li a.icon_linkedin {background-position: 0 -2090px; width: 21px; height: 21px;}
.team-member-description ul li a.icon_linkedin:hover { background-position: 0 -2161px;}
.team-member-description ul li a.icon_dribbble {background-position: 0 -1342px; width: 21px; height: 20px;}
.team-member-description ul li a.icon_dribbble:hover { background-position: 0 -1412px; }
.team-member-description ul li a.icon_forrst { background-position: 0 -1786px; width: 21px; height: 20px;}
.team-member-description ul li a.icon_forrst:hover { background-position: 0 -1856px;}

/*--------------------------------
 8) CONTACT SECTION
--------------------------------*/
#contact { padding: 0 0 15px 0;}
#contact h1 { text-align: left; padding: 0 15px 15px 0px; margin: 0; line-height: 10px;}
@media only screen and (max-width: 959px) { #contact h1 { background-position: 66% 56%;}} 
#contact .twelve p { margin-bottom: 45px;}

/*  ICONS  */
#contacts li { margin-bottom: 28px;}
@media only screen and (max-width: 767px) { #contacts li { float: left; margin-left: 30px;} #contact-form { margin-bottom: 50px;}}
#contacts a { display: block; padding-left: 60px; display: table-cell; vertical-align: middle; text-transform: uppercase; color: #fff;}
#contacts a:hover { color: #fdaf68;}
@media only screen and (max-width: 959px) {#contacts a { font-size: 12px;}}
.icon_contact_fb { background-position: 0 -432px; height: 41px;}
.icon_contact_fb:hover { background-position: 0 -523px;}
.icon_contact_tw { background-position: 0 -1160px;height: 41px;}
.icon_contact_tw:hover { background-position: 0 -1251px;}
.icon_contact_gp { background-position: 0 -614px; height: 41px;}
.icon_contact_gp:hover { background-position: 0 -705px;}
.icon_contact_ml { background-position: 0 -796px; height: 41px; }
.icon_contact_ml:hover { background-position: 0 -887px;}
.icon_contact_ph { background-position: 0 -978px; height: 41px;}
.icon_contact_ph:hover { background-position: 0 -1069px;}

/*  FORM  */
#contact-form input[type="text"], 
#contact-form textarea { width: 100%; height: 55px; border: 1px solid #56739f; -webkit-box-shadow:  0px 1px 0px 0px rgba(255, 255, 255, 0.15); box-shadow:  0px 1px 0px 0px rgba(255, 255, 255, 0.15); -webkit-border-radius: 3px; border-radius: 3px; margin: 0 0 15px; padding: 10px;}

#contact-form textarea { min-height: 180px; height: 180px; resize: vertical; }

#contact-form input[type="submit"] { -webkit-box-shadow: inset 0px -3px 0px 0px rgba(0, 0, 0, 0.17);box-shadow: inset 0px -3px 0px 0px rgba(0, 0, 0, 0.17);border: 1px solid #56739f;-webkit-border-radius: 3px;border-radius: 3px; background: #fdaf68; width: 100%;  height: 53px; font-size: 20px; text-transform: uppercase; padding: 0; color: #2c6981;}
#contact-form input[type="submit"]:hover { box-shadow: none; -webkit-box-shadow: none;}
#contact-form input[type="submit"]:active { background: #fc9334;}

#contact-form .notification_error{ background: #db4f50; border: 1px solid #56739; border-radius: 3px 3px 3px 3px; color: #FFFFFF; height: auto; padding: 10px; text-align: left; width: 100%;}

#contact-form .notification_ok{ width: 100%; background: #ffffff; border: 1px solid #56739f; color: #285587; padding: 5px; text-align: center; border-radius: 3px;}


/*--------------------------------
 9) FOOTER
--------------------------------*/
footer { background: url('../css/images/footer.png') repeat-x; height: 40px; font-size: 13px; text-align: center;}

footer p { padding-top: 12px; margin: 0;}

footer img { padding: 0 10px; display: inline; vertical-align: middle; margin-top: -3px;}

/*--------------------------------
 0) MEDIA QUERIES
--------------------------------*/

/* Smaller than 960 */
@media only screen and (max-width: 959px) { }

/*Note: Design for a width of 768px*/
@media only screen and (min-width: 768px) and (max-width: 959px) { }

/*Note: Design for a width of 320px*/
@media only screen and (max-width: 767px) { }

/*Note: Design for a width of 480px*/
@media only screen and (min-width: 480px) and (max-width: 767px) { }

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) { }