/*
    34 Responsive Grid System
    Multi-state, responsive CSS grid system

    Developer   : Kemal Yılmaz
    URL         : http://34grid.com
    Contact     : http://kemalyilmaz.com
                : http://twitter.com/xkema
                : http://www.facebook.com/pages/34Grid/401562963236958
    Version     : 1.0

    LICENSED UNDER Creative Commons Attribution 3.0 Unported License.
*/



/* 
    Reset styles.
    ============================================================ CONTAINER ====
*/
/* I didn't add any reset styles, use your own */



/* 
    Main width-controller for your content. think ".container"
    class as a holder for ".row" classes for a basic layout.
    Default centered with margin 0 auto; style.
    ============================================================ CONTAINER ====
*/
.container { margin: 0 auto; }



/* 
    Main grouping blocks. You can dump "n*100%"" width content to a
    single ".row". (with the little help of .skip-float and manual 
    .user-float classes)
    ================================================================== ROW ====
*/
.row { width: 100%; }



/* 
    A basic transitions for immediate childs of ".row" classes. I added 
    transitions assuming your html layout keeps "col_*"" elements right 
    after ".row" classes. (col_*'s are immediate childs of .row's) 
    Delete this block to get rid of transitions.
    (transitions are incompatible with some browsers. 
    ("some browsers" usually refers to internet explorer :)
    ====================================================== ROW TRANSITIONS ====
*/
.row > * {
    -webkit-transition  : all 400ms ease-out;
    -moz-transition     : all 400ms ease-out;
    -o-transition       : all 400ms ease-out;
    -ms-transition      : all 400ms ease-out;
    transition          : all 400ms ease-out;   
}



/* 
    Auto clearfix for all rows. Borrowed from HTML5BOILERPLATE.
    ====================================================== ROW TRANSITIONS ====
*/
.row:before, .row:after { content: ""; display: table; }
.row:after { clear: both; }
.row { *zoom: 1; }



/* 
    Column (col_*) and complement (col_*c) classes.
    .col_0 class is not a must but i added it to
    keep things organized. You can use it for 
    marginless 100% widths.
    ================================================ COLUMNS & COMPLEMENTS ====
*/

/* columns & complements (autogenerated styles) */
.col_0 {
    width: 990px;
    margin-bottom: 0px;
    display: block;
}

.col_1,
.col_2,
.col_3, .col_3c,
.col_4, .col_4c,
.col_5, .col_5c,
.col_6, .col_6c,
.col_7, .col_7c,
.col_8, .col_8c,
.col_9, .col_9c,
.col_10, .col_10c,
.col_11, .col_11c,
.col_12, .col_12c {
    margin-left     : 1%;
    margin-right    : 1%;
    margin-bottom   : 15px;
    float       : left;
    display     : block;
}

/* columns (autogenerated styles) */
.col_1 { width: 98%; }
.col_2 { width: 48%; }
.col_3 { width: 31.3333333333%; }
.col_4 { width: 23%; }
.col_5 { width: 18%; }
.col_6 { width: 14.6666666667%; }
.col_7 { width: 12.2857142857%; }
.col_8 { width: 10.5%; }
.col_9 { width: 9.11111111111%; }
.col_10 { width: 8%; }
.col_11 { width: 7.09090909091%; }
.col_12 { width: 6.33333333333%; }

/* complements (autogenerated styles) */
.col_3c { width: 64.6666666667%; }
.col_4c { width: 73%; }
.col_5c { width: 78%; }
.col_6c { width: 81.3333333333%; }
.col_7c { width: 83.7142857143%; }
.col_8c { width: 85.5%; }
.col_9c { width: 86.8888888889%; }
.col_10c { width: 88%; }
.col_11c { width: 88.9090909091%; }
.col_12c { width: 89.6666666667%; }



/* 
    100% width auto control for "img", "object" and
    "embed" controls.
    ============================================ IMAGE FULL WIDTH CONTROLS ====
*/
img, object, embed {}
img { height: auto; }
figure img { max-width: 100%; }



/* 
    Use ".skip-float" class to start from brand new lines.
    Clears left of current 100% group for new 100% 
    lines in same ".row" group.
    @see webpage for details
    =============================================== FLOATING PROBLEM FIXER ====
*/
.skip-float { clear: left; }



/*  
    CSS hack for responsive videos.
    @see http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
    @see http://webdesignerwall.com/tutorials/css-elastic-videos
    ========================================================= VIDEO HOLDER ====
*/
.video-holder {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    display: block;
}

.video-holder iframe, .video-holder object, .video-holder embed {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}