/*
Theme Name: jotheme
Theme URI: http://www.jofolio.com
Description: jo wordPress theme
Version: 3.0
Author: Jose Ortiz
Author URI: http://www.jofolio.com
*/



/*   ----------- COLORS ----------------
grey1 = f1f1f1
grey2 = 212427
grey3 = 1b1e20
grey4 = 15181b
orange = ff6400
yellow = ffa700


dk grey: #6d6d63
lt grey: #f5f5eb
green: #b2bb1e
background grey: #232828;
*/




body {font-family: "kulturista-web","Helvetica Neue",Helvetica,Arial,sans-serif;background-color:#232828;color:#6d6d63}

.wrapper {}
.container {padding:0;}
.row {margin:0;}

.pad12 {padding: 12px;}
.pad24 {padding: 24px;}
.pad-tb {padding: 32px 0;}
.pad-tb-sm {padding: 16px 0;}
.pad-tb-lg {padding: 64px 0;}
.pad-t {padding: 100px 0 0;}
.pad-t-md {padding: 60px 0 0;}
.pad-t-sm {padding: 20px 0 0;}
.pad10-l {padding-left: 10px;}
.pad10-r {padding-right: 10px;}
.pad24-r {padding-right: 24px;}
.pad32-r {padding-right: 32px;}
.margin-l-lg {margin-left: 24px;}
.margin-r-lg {margin-right: 24px;}
.no-pad, .work .no-pad {margin: 0; padding: 0;}
.black {background-color: #000;}
.white {background-color: #fff;}
.green {background-color: #b2bb1e;}
.grey {background-color: #6d6d63;}
.medgrey {background-color: #ebebe1;}
.litegrey {background-color: #f0f0e6;}
.darkgrey {background-color: #232828;}
.purple-texture {background: url(/wp-content/work/biting/jo_purple_background.jpg) left top repeat ;}
.yellow-texture {background: url(/wp-content/work/biting/jo_yellow_background.jpg) left top repeat ;}
.green-texture {background: url(/wp-content/work/biting/jo_green_background.jpg) left top repeat ;}
.orange-texture {background: url(/wp-content/work/ume/jo_orange_background.jpg) left top repeat ;}
.grey-texture {background: url(/wp-content/work/ume/jo_grey_background.jpg) left top repeat ;}
.ume-orange {background-color: #D95E00;}
.ume-yellow {background-color: #E98300;}
.ume-blue {background-color: #002663;}
.ume-sky {background: url(/wp-content/work/ume/jo_sky_background.jpg) left top repeat ;}
.ruggiero-grey {background-color: #3c3c37;}
.steam-blue {background-color: #0065b3;}
.steam-green {background-color: #6ebe45;}
.steam-yellow {background-color: #fdb813;}
.steam-red {background-color: #ed1651;}
.ps10-purple {background-color: #3C1464;}

.info-purple {background-color: #2c0031;}
.info-blue {background-color: #011b54;}
.smallhigh {height: 100px;}
.bighigh {height: 300px;}
.bordertop {border-top: thin dotted #6d6d63;}
.borderbottom {border-bottom: thin dotted #6d6d63;}
.right {text-align: right;}
.center {display: block;  margin-left: auto; margin-right: auto;}
.statement {text-align: center; padding: 32px 0;}

a {color: #232828;}
a:hover {color: #b2bb1e;}
a, a:hover {text-decoration: none;}

p, ul, li  {line-height: 2.0em;}
h1, h2, h3, h5, h6 {margin-bottom: 16px; margin-top: 8px;}
h1 {font-size:4.5em; line-height: 1.125em;}
h2 {font-size:3.75em; line-height: 1.25em;}
h1, h2, .portfolio_desription {color:#b2bb1e}
h3, .work h3 {font-size:1.5em; line-height: 1.125em;}
h4 {font-size: 12px; text-transform:uppercase; letter-spacing: 2px; color: #6d6d63; margin: 8px 0;}
h5 {font-size: 12px; text-transform:uppercase; letter-spacing: 2px; color: #6d6d63;}

.portfolio h5 {margin-left: 8px;}




ul, li {
	list-style:square url("/img/sm_green_arrow.png");
	list-style-position:inside;
    padding-left:0;
}

img {max-width: 200%; display:block; height: auto; margin: 0; padding: 0;}

/* ----------------- MAIN NAV  -------------------*/

.nav > li  {float: left;}
.nav > li > a{font-size: 12px;font-weight:500;letter-spacing: 2px; text-transform: uppercase; padding: 8px;}
.nav > li > a:hover, .nav > li > a:focus { background-color:#fff;color: #b2bb1e;}
.navbar {border:none; margin-bottom: 0; min-height: 0; position: relative;}


/* --- PORTFOLIO ---- */


.work img {padding: 12px 24px; } 

.work .bottomless img {padding: 0 24px; } 

/*  .work-intro {height: 480px;} 
.work-intro h1 {padding-top: 140px;} */

.workintro {
    text-align: center;
    padding: 24px 0;
    color: #fff;
}
.workintro a {color: #fff;border-bottom: thin dotted;}
.workintro a:hover {color: #b2bb1e;}
.items {
    color: #6d6d63;
    font-style: italic;
    font-size: .9em;
    letter-spacing: .5px;
}
.workintro img {
    margin-left: auto;
    margin-right: auto 
}

/*
.hero.case-study {
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    position: relative;
}
*/
.hero {
    color: #fff;
    display: block;
    height: 400px;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 0;
}
.hero-title {
    margin-top: 40px;
}

.hero img {
    display: block;
    width: 100%;
    padding: 0;
}


.panel-image {
    margin-top: 0 !important;
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 1200px;
}

.hero a, .ill-hero a {color: #fff;border-bottom: thin dotted;}
.hero a:hover, .ill-hero a:hover {color: #b2bb1e;}





/* -----------------LOGOS --------------------*/


.logo {
    font-size: 10px; 
    background-color: #fff;
    text-align: center;
    border: thin solid #f5f5eb;
    padding-bottom: 16px;
    height: 280px;
}

.logo img {display: block; margin-left: auto; margin-right: auto;padding: 0;} 
.logo p {color: #bbb;line-height: 1.5em;margin: 0;}




/* ---------------------------------- Previous and Next Buttons  ---------------------*/

.prev-project {
    background:url(http://www.jofolio.com/wp-content/themes/jotheme/images/jofolio_prev_arrow.gif) left top no-repeat ;
    padding-left: 32px;
}
.next-project {
    background: url(http://www.jofolio.com/wp-content/themes/jotheme/images/jofolio_next_arrow.gif) right top no-repeat;
    padding-right: 32px;
    }



/* ----------------------------------------------- Footer ----------------------------------------------- */


.footer ul, .footer a, .footer p {
    padding: 0px;
    line-height: 1.5em;
    }

.footer li, .footer ul {
    padding-right: 40px;
    list-style: none;
}

.footer h3 {
    font-size:1.0em;
}

.tinycaps {
    color: #6d6d63;
    padding: 16px 0 0;
    font-style: italic;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing: 1px;
}

.texture {
    background:url('/img/footer_texture.jpg');
}


/* --------------------------  CUSTOMIZE THE CAROUSEL  ------------------------ */


.carousel {
    position: relative;
}
.carousel-inner {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.carousel-inner > .item {
    display: none;
    position: relative;
    transition: left 0.6s ease-in-out 0s;
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    height: auto;
    line-height: 1;
    max-width: 100%;
    width: 100%;

}

.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev {
    display: block;
}
.carousel-inner > .active {
    left: 0;
}
.carousel-inner > .next, .carousel-inner > .prev {
    position: absolute;
    top: 0;
    width: 100%;
}
.carousel-inner > .next {
    left: 100%;
}
.carousel-inner > .prev {
    left: -100%;
}
.carousel-inner > .next.left, .carousel-inner > .prev.right {
    left: 0;
}
.carousel-inner > .active.left {
    left: -100%;
}
.carousel-inner > .active.right {
    left: 100%;
}


.carousel-control {
    bottom: 0;
    color: #fff;
    font-size: 20px;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    top: 0;
    width: 15%;
}


.carousel-control.right {
    background-image: none;);
    background-repeat: no-repeat;
    left: auto;
    right: 0;
    }
    .carousel-control.left {
        background-image: none;);
    background-repeat: no-repeat;
    }
    


.carousel-control:hover, .carousel-control:focus {
    color: #fff;
    opacity: 1;
    outline: medium none;
    text-decoration: none;
}
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
    display: inline-block;
    position: absolute;
    top: 50%;
    z-index: 5;
}
.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left {
    left: 50%;
}
.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right {
    right: 50%;
}
.carousel-control .icon-prev, .carousel-control .icon-next {
    font-family: serif;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    width: 20px;
}
.carousel-control .icon-prev:before {
    content: "‹";
}
.carousel-control .icon-next:before {
    content: "›";
}

.carousel-indicators {
    bottom: 10px;
    left: 50%;
    list-style: none outside none;
    margin-left: -30%;
    padding-left: 0;
    position: absolute;
    text-align: center;
    width: 60%;
    z-index: 15;
}
.carousel-indicators li {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    border-radius: 10px;
    cursor: pointer;
    display: inline-block;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    width: 10px;
}
.carousel-indicators .active {
    background-color: #fff;
    height: 12px;
    margin: 0;
    width: 12px;
}
.carousel-caption {
    bottom: 20px;
    color: #fff;
    left: 15%;
    padding-bottom: 20px;
    padding-top: 20px;
    position: absolute;
    right: 15%;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    z-index: 10;
}
.carousel-caption .btn {
    text-shadow: none;
}





@media screen and (min-width: 768px) {
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
    font-size: 30px;
    height: 30px;
    margin-left: -15px;
    margin-top: -15px;
    width: 30px;
}
.carousel-caption {
    left: 20%;
    padding-bottom: 30px;
    right: 20%;
}
.carousel-indicators {
    bottom: 20px;
}






/* --------------------------------- Post landing page  (Muse & News) -------------------------------------------*/


.post_item {
    display:block;
    border-bottom:thin dotted ;
    padding: 24px 0;
    }

.post_entry-meta {
    font-size:10px;
    margin-bottom:0;
    color:#a9a99f;
    font-style: italic;
    }
    


/* ----------------- FOOTER -------------------*/

.footer, .footer a {color:#000;}
.footer a:hover {color:#fff;}

.footer a, .navbar-header a{
	-moz-transition: opacity .2s linear;
    -webkit-transition: opacity .2s linear;
    -ms-transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    transition: opacity .2s linear;
}

 .center a:hover, .navbar-header a:hover {
    opacity: .4;
    cursor: pointer;
 }



.foot {
	color: #3c3f42;
	font-family: "kulturista-web","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 12px ;
	height: 60px;
	display: block;
}

/*
.navigation {
	z-index: 10;
	background-color: #ccc;
	display: block;
	height: 40px;
}
*/


/* ---- COLUMN CUSTOM -----*/

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding-left: 1px;
    padding-right: 1px;
    overflow: hidden;
}

/* ------------------------------- Large desktop ------------------------------- */
@media only screen and (min-width: 1200px) {



}/* ------------------------ END ------------------------ */


/* ------------------------------ iPads (landscape) ---------------------------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
.nav > li > a{font-size: 10px;}

h1 {font-size:4.0em; line-height: 1.125em;}
h2 {font-size:3.25em; line-height: 1.25em;}
h3, .work h3 {font-size:1.25em; line-height: 1.5em;color:#6d6d63;font-weight: normal;}
.hero {height:320px;}
.hero-title {margin-top:20px;}

.logo {
    height: 240px;
}

.logo img {display: block; margin-left: auto; margin-right: auto;padding: 0;}


}/* ------------------------ END ------------------------ */


/* -------------------- iPads (portrait) -------------------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {

h1 {font-size:3.0em; line-height: 1.125em;}
h2 {font-size:2.5em; line-height: 1.25em;}
h3, .work h3 {font-size:.9em; line-height: 1.5em;color:#6d6d63;font-weight: normal;}
.hero {height:240px;}
.hero-title {margin-top:20px;}

}/* ------------------------ END ------------------------ */


/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (orientation : landscape){
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) and (orientation : portrait)  {
}


/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}