/* ==========================================================================
    Custom styles for Corey Arnold's Koken website
    ========================================================================== */
/** OVERIDES **/
html {
    height: 100%;
}

body {
    font-weight:300 !important;
    height:100%;
    font-family:'futura-pt' !important;
}

#container {
    height:100%;
}

a:link {
    -webkit-transition:color .2s ease-in !important;  
   -moz-transition:color .2s ease-in !important;  
   -o-transition:color .2s ease-in !important;  
   transition:color .2s ease-in !important;
   text-decoration:none !important;
}

a:hover, a:active {
    color:#bf0c0f !important;
}

p{
    -webkit-transition:color .2s ease-in !important;  
   -moz-transition:color .2s ease-in !important;  
   -o-transition:color .2s ease-in !important;  
   transition:color .2s ease-in !important;
}

ul li {
    list-style:none;
}

header .in {
    padding-right:16px !important;
    padding-left:16px !important;
    overflow:auto;
}

#album-title {
}

#albums div.item {
/*width: 32.5% !important;
*/}

#icons {
    float:left !important;
}

#lane img {
    width:auto;
}

/** TITLE & NAVIGATION  **/


#site-title {
    /* because the fontello menu icon doesn't proply align left*/
     margin-left:-5px;
     -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

#site-title img {
    vertical-align:top;
    padding-top:5px;
    position:relative;
    z-index:100;
    width:140px;
    margin-left:4px;
}

.featured-news-box {
    background-color: rgba(241, 241, 241, .7);
/*    width: 31em;
*/    padding: 0em 2em 0em 2em;
    position: absolute;
    z-index: 100;
/*    top: 70%;*/
    bottom:20px;
    line-height: 21px;
}

.featured-news-box a {
    margin:0;
    padding:0;
    display:inline;
    color:#bf0c0f !important;
}

.from-the-blog {
	font-size:.9em;
	text-transform:uppercase;
	font-style: italic;
	padding:0;
	margin:0;
}

.featured-news-title {
   margin:0;
   padding:0;
   font-size: 14px;
    font-style: italic;
   font-weight: 600 !important;
   color:#444444 !important;
   text-decoration:none !important;
}

.featured-news-title p {
   margin:12px 0px;
   font-weight:600 !important;
}

.featured-news-title a:link, .featured-news-title a:visited {
    color:#bf0c0f !important;
    font-weight:;
}
.featured-news-title a:hover {
    color:#bf0c0f !important;
}


#icons {
     font-size:120%;
}

#icons a.email {
    margin-left:0 !important;   
}

a#nav-link {
    color:#979797;
   font-size:1.2em;
   position:relative;
   z-index:10;
   outline:none;
}

a#nav-link:hover {
    color:#bf0c0f;
    text-decoration: none !important;
}

#nav-box {
    background-color: rgba(241, 241, 241, .9);
    height: auto;
    left: 0;
    opacity: 0;
    margin: 0;
    padding: 20px 30px;
    position: absolute;
    top: 0px;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    width: 100%;
    z-index: 0;
    display:none;
}

#nav-box.nav-show {
    top:44px;
    opacity:1;
    z-index:100000;
}

#nav-box nav ul {
    display:block;
    float:left;
    margin-right:18%;
}

#nav-box nav ul:last-child {
    margin:0;
    text-align:right;
}

#nav-box nav a:link {
    font-size: .8em;
    font-style: italic;
    text-decoration: none;
    text-transform: uppercase;
    font-weight:600 !important;
}

.ico-instagram {
    margin-left:-4px !important;     
}

/*#nav-box ul li:first-child a {
    color:blue !important;
}*/

.active {
    color:#bf0c0f !important;

}

h2.tag {
    margin:6px 0px 5px 7px;
    font-size:.9em !important;
    display:inline-block !important;
    letter-spacing: 0px !important;
    margin-bottom:0px;

}

.active_link {
    font-weight: 500 !important;
    color:#777777 !important;
}

h2.tag a:link, h2.tag a:visited {
    color: #999999 !important;
}

h2.tag a:hover {
    color: #bf0c0f !important;
}
/**  CONTENT  **/

#frame {

    margin:0 auto;
    padding: 48px 16px 16px;
    max-width:100%;
    height:99%;
    overflow:hidden;
    box-sizing: border-box;

}

#page_frame {

    margin:0 auto;
    padding: 0px 16px 16px;
    max-width:100%;

}

#grid, #albums {
    max-width:100%;
}


#albums a:link, #albums a:visited {
    color:#777777;
}
.item {
    width:18.5%;
    margin-bottom:16px;
    padding-right:12px;
}

.content_left_title {
    color:#777777;
    margin-top:10px;
}

.home .pulse-content-container {
    left: 0px !important;
    top: 0px !important;
}

.contact_bg {
    background:url('../img/corey_and_crab.jpg') no-repeat;
    background-size:100%;
    height:100%;

}

#contact_info {
/*    background-color: rgba(241, 241, 241, .9);
    width:650px;
    */
    float:left;
}

.contact_column {
    float:left;
    width: auto;
}

.contact_column:last-child {
    margin-left:110px;
    width:calc(60% - 110px);
}

#contact_info p:first-child {
    margin-top:0;
}

#contact_info a:link, #contact_info a:visited {
    color:#979797;
    font-weight:500;
}

.contact_item {
    width:50%;
    float:left;
}

#mc_embed_signup{
    margin-top:30px;
    width:205px;
}

#mc_embed_signup input {
    width:198px;
    background:none;
    border:none;
    border-bottom:1px dotted #777;
    margin-bottom:6px;
    outline:none;
    font-family:'futura-pt';
    color:#979797;
}

#mc_embed_signup input[type="submit"] {
    background: none;
    border: none;
    font-family: 'futura-pt';
    color: #979797;
    text-align: left;
    margin-top: 8px;
    margin-left: -4px;
}


/** ALBUMS & FAVORITES **/

#albums {
    margin:0px 16px !important;
    padding: 0px;
    height:auto;
}

#albums h2 {
    font-weight:300 !important;
}

.item:hover a {
    color:#bf0c0f !important;
}

span.tint_box {
    display:block;
    position:relative;
    margin:0 !important;
}

span.tint_box img {
    width:100% !important;
}

span.tint {
        position:absolute;
        display:block;
        background:#bf0c0f !important;
        width:100%;
        height:100%;
        z-index:10;
        top:0;
        opacity:0;
        margin:0 !important;
}

/*#albums div.item {
   margin-right:1em !important;
}*/

#album-info-content {
    background:rgba(237,237,237,.9);
    overflow:auto;
    margin:0px 0px 0px 0px;
    text-align:left;
    font-family:'futura-pt';
    width:100%;
    height:100%;
    display:block;
    position:relative;
    z-index:100;
}

.album-info-text {
    padding:50px;
    font-size:120%;
    font-family:'futura-pt';
    font-weight: 300;
}

#album-info-content h2 {
    margin:0;
    padding-bottom:0px;
    font-size:160%; 
    text-transform: uppercase;
    color:rgb(112,112,112);
}

#album-info-content p {
    padding-top:0px;
    width:60%;
}

#album-info-content a {
    padding-left:50px;
}


/** EXHIBITIONS & PRESS **/

.content_wrap {
    padding:20px 0px 40px;
}

.content_wrap ul {
    padding-left:0px;
}

ul.exhib_nav li {
    display:inline;
    margin-right:15px;
    list-style-type:none !important;
}

.content_left {
    width:205px;
    height:800px;
    float:left;
    position:relative;
    z-index:0;
    margin-right:54px;
}

.content_left span {
    font-family: 'futura-pt';
    font-weight: 500;
    font-size: .75em;
    text-transform:uppercase;
    color:#979797;
    margin-top:10px;
    display:block;
    -webkit-transition:color .2s ease-in !important;  
   -moz-transition:color .2s ease-in !important;  
   -o-transition:color .2s ease-in !important;  
   transition:color .2s ease-in !important;
}

.content_left a {
    color: #979797;
    line-height: 38px;
    font-weight: 500;
}

.content_left a:hover span {
        color: #bf0c0f !important;
}

.content_right img {
    height:400px;
    width:100px;
}
.content_right {
    width: calc(100% - 260px);
    float:left;
    margin-left:0px;
}

.content_right p:first-child {
    margin-top:0;
}

.content_right a:link, a:visited {
    color: #979797 !important;
    font-weight:500 !important;
    cursor:pointer;
}

.content_right a:hover {
    color:#bf0c0f !important;
}

ul.exhibs_list li {
    list-style:none;
}

.column {
    width:45%;
    float:left;
}

.column p {
    margin:1px 0px;
    font-size:90%;

}

.column p.top {
    margin-top:0px;
    margin-bottom:12px;
    font-size:100%;


}

.column p.year {
    margin:8px 0px;
    font-size:85%;
}

.column p.heading {
    margin:12px 0px 8px;
    font-size:100%;

}

.column:last-child {
    margin-left:6%;
}

.about_text {
    width: 85%;
    max-width: 500px;
}

/** GRID **/

div#grid {
    overflow:hidden;
    padding:48px 0px 0px 16px;
}

#grid-inner {
	width:100%;
	height:100%;
}

div#grid div.column {
    float:left;
    display:inline;
}

/*div#grid div.item {
    margin-bottom:16px;
    margin-right:8px;
    margin-left:8px;
}*/

.column:first-child .item {
    margin-left:16px !important;
}

.column:last-child .item {
    margin-right:16px !important;
}

div#grid div.column a {
    display:block;
    border-bottom:0;
    padding-bottom:0;
}

/*div#grid div.item img {
    width:100%;
    max-width:100%;
}*/

div#grid div.item img.k-lazy-loaded {
    height: auto;
}

/* GRID ARRANGEMENTS
----------------------------------------------- */

/*div#grid.col-1 div.column { width:100%; }
div#grid.col-2 div.column { width:50%; }
div#grid.col-3 div.column { width:33.2%; }
div#grid.col-4 div.column { width:25%; }
div#grid.col-5 div.column { width:20%; }
div#grid.col-6 div.column { width:16.6%; }
div#grid.col-7 div.column { width:14.2%; }
div#grid.col-8 div.column { width:12.5%; }

*/

/*  LIGHTBOX */

#lb-html {
    margin-top: 48px !important;
    padding-left:16px;
}

/* Videos */

// .video_thumb {
//     display:block;
//     width:200px;
//     height:100px;
//     float:left;
//     position:relative;
// }

#video_frame {
    margin:0 auto;
    padding: 24px 16px 16px;
    max-width:100%;
    box-sizing: border-box;
}

// #video_frame iframe {

//     width: 60%;
//     height:auto;
// }

.video_container {

     padding-top:60px;
     clear:left;
     display:block;
}

.video_container:first-child {
    padding-top:0;
}

.video_container iframe {
    float:left;
}

.video_details {
    //float:left;
    width:40%;
    margin-left:20px;
    display:inline-block !important;
}

.video_details h3 {
    margin-top:0;
    margin-bottom:8px;
}

.video_details p {
    max-width:600px;
}

@media only screen and (max-width: 895px) {

    .column {
        width:85%;
    }

    .column:last-child {
    margin-left:0;
    }

        .video_details {
        margin-left: 0;
        margin-top:20px !important;
        width:90%;
    }

}

@media only screen and (max-width: 767px) {

    header .in {
        padding-left:8px !important;
        padding-right:8px !important;
    }

    #frame {
        padding: 8px;
    }

    #site-title img {
       width:103px;
       padding-top: 4px;
    }

    #nav-box.nav-show {
        top:40px;
    }

    .icon-instagram {
        margin-left:-2px;
    }

    h2.tag {
        margin-top:0px !important;
    }

   .active_link {
        font-weight: 500 !important;
    }

    .featured-news-box {
        display:none;
        top: 40%;
        width: 11em;
        padding: 0em 10em 0em 2em;
    }

    .featured-news-title {
        font-size: 12px;
    }

    #albums {
        margin:0px 8px !important;
    }

    #grid {
        padding-right:8px !important;
        padding-left:8px !important;
    }

    #albums div.item, #grid div.item {
        width:100%;
        padding: 0 !important;
        height: auto !important;
        padding-right:6px;
        margin-bottom:8px;
        max-width:100%;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }

    .exhibs_content_left {
    display: none;
    }

    .contact_bg {
        background:none;
    }

    .header-news-title {
        display:none;
    }

    #contact_info {
        width:100%;
    }

    .contact_item {
        float:left;
        width:50%;
    }

    .contact_column:last-child {
        margin-left:0px;
        margin-top:10px;
        width:100%;
    }

    .home {
        padding-top:52px;
    }

        iframe {
        width:100%;
    }

    .video_details {
        margin-left: 0;
        margin-top:20px !important;
        width:90%;
    }
}

#copyright {
    position:fixed;
    bottom:2px;
    right:16px;
    font-size:70%;
    color:#979797;
}

@media only screen and (max-width: 600px) {

    .content_right {
        width:100%;
    }
    .content_left {
        display:none;
    }

    .column {
        width:calc(95% - 16px);
/*        margin-left:16px;
*/    }

    .featured-news-box {
        visibility:hidden;
    }


}

@media only screen and (max-width: 420px) {

  .contact_item {
    width:100%;
  }

  #nav-box nav ul.l_tinynav2 {
    margin:0;
    text-align:right;
    margin-top:20px !important;
    clear:left;
    float:left;
    text-align:left;
    }
    #nav-box div {
        float:left;
        clear:left;
        margin-top:20px;
    }

    .info-span {
        display:none;
    }

    #frame {
        padding-top:52px !important;
    }
}


 /* Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}


#nav-link.icon-menu {
    font-family: 'ca-icons' !important;
}

@media screen and (-webkit-min-device-pixel-ratio:0) { 

/* Safari only override */
::i-block-chrome,.featured-news-title, #nav-box nav a:link {
 font-weight:300 !important;
}
}

iframe#k-lightbox-iframe {
    border:0px !important;
}



.embed-container { position: relative; padding-bottom: 34.25%; height: 0; overflow: hidden; max-width: 60%; height: auto; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }