/*
Theme Name: alaska
Description: alaska Theme
Author: Dev AM
Version: 1.0
*/

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

html{
    overflow-y: auto;
}
body {
    font-size: 0.8vw;
    font-family: helvetica;
}

/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */

/* We like off-black for text. */
body, select, input, textarea {color: #000;}

a {color: #000;}
a:hover {color: #000;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;}

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

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

.clearafter:after{
    content: '';
    display: block;
    clear: both;
}

.mobile{
    display: none;
}
/*
-------------------------------------------------------------------------------*/

#header{
    background-color: #f0f0f0;
    padding: 10px;
        position: absolute;
    left: 0;
    width: 100%;
}
#header.fixed {
    position: fixed;
    top: 0;
    left: 0;
}



.website-lock {
    text-align: center;
}

.website-lock img {
    width: 50%;
}



/***/
.slider-wrapper {
    padding: 2vw 0;
    background-color: #797979;
    position: absolute !important;
    left: 0;
    width: 100%;
}

.slider-wrapper.fixed {
    position: fixed !important;
    top: calc(2.4em + 19px);
    left: 0;
}

.slider-wrapper .project-cover{
    outline: none;
    cursor: pointer;
}
.slider-wrapper .project-cover div {
    height: 14vw;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    outline: none;
}
.slider-wrapper .project-cover div {
    background-size: 80% auto;
}
.slider-wrapper .project-cover.slick-current div {
    background-size: contain;
}

/*
.slider-wrapper .project-cover.slick-current{
    height: 8vw;
    margin-top: 3vw;
}
*/


/***/

.project-row {
    padding: 5px;
    font-size: 1vw;
}
.project-row div{
    padding: 0 5px;
}
.heading-row {
    padding: 0 5px;
    background-color: #f0f0f0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.heading-row div {
    border-right: 1px solid #000;
    padding: 5px;
}
.heading-row div:last-child{
    border-right: 0;
}
.heading-row .project-year,
.project-row .project-year {
    text-align: right;
}
.project-row.even{
    background-color: #f0f0f0;
}
.project-row:hover{
    cursor: pointer;
}
.project-row:hover,
.project-row:hover a,
.project-row.hovered,
.project-row.hovered a{
    background-color: #276bd9;
    color: #fff;
}



.project-file a {
    text-decoration: none;
}
.project-file .uppercase {
    text-transform: uppercase;
}



/* LAYOUT
-------------------------------------------------------------------------------*/
.col-md-1{
    width: 8.33%;
    float: left;
}
.col-md-2{
    width: 16.66%;
    float: left;
}
.col-md-3{
    width: 25%;
    float: left;
}
.col-md-4{
    width: 33.33%;
    float: left;
}
.col-md-5{
    width: 41.66%;
    float: left;
}
.col-md-6{
    width: 50%;
    float: left;
}

/* 
-------------------------------------------------------------------------------*/

@media screen and (max-width: 960px) {
    .mobile{
        display: block;
    }
    .desktop{
        display: none;
    }

    body {
        font-size: 3vw;
    }
    
    
    .website-lock img {
        width: 100%;
    }
    
    .project-row {
        font-size: 3vw;
    }
    .project-row div:nth-child(4){
        text-align: right;
    }

    .slider-wrapper .project-cover div {
        height: 18vw;
    }
    
    
    .slider-wrapper.fixed {
        top: calc(6.2em + 20px);
    }
    
    
    
    /******************/
    
    .heading-row {
        padding: 0;
    }
    .project-row {
        padding: 0;
    }
    
    .project-row div {
        padding: 5px;
    }


    
    
    
    
    
    
    
    
    
    .col-sm-2{
        width: 16.66%;
        float: left;
    }
    .col-sm-3{
        width: 25%;
        float: left;
    }
    .col-sm-5{
        width: 41.66%;
        float: left;
    }
    .col-sm-6{
        width: 50%;
        float: left;
    }
    
    
    
    
    
    .col-sm-10{
        width: 10%;
        float: left;
    }
    .col-sm-14{
        width: 14%;
        float: left;
    }
    .col-sm-15{
        width: 15%;
        float: left;
    }
    .col-sm-20{
        width: 20%;
        float: left;
    }
    .col-sm-22{
        width: 22%;
        float: left;
    }
    .col-sm-25{
        width: 25%;
        float: left;
    }
    .col-sm-26{
        width: 26%;
        float: left;
    }
    .col-sm-28{
        width: 28%;
        float: left;
    }
    .col-sm-40{
        width: 40%;
        float: left;
    }
    .col-sm-50{
        width: 50%;
        float: left;
    }

    
}