/*
1158px grid system ~ Core CSS.
8 Columns ~ Margin left: 2px

Based on the simple grid system - http://www.webnicer.com/
by Jacek Ciolek

Created by the Grid System Generator - v1.00
Learn more ~ http://www.gridsystemgenerator.com/
*/

/* clearfix */
.clearfix:after, .row:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix, .row {display:inline-block;} /*Those two .clearfix have to be separate!)*/
.clearfix, .row {display:block;}

/* gridframework */

.col {padding-left:0px; float:left; position:relative;}
.row  > .col:first-child {padding-left:0; background-color:#FFF;}
.col.noLeft {padding-left:0;}

.row {position:relative; margin-left:0px;}
.gu1 .row {width: 145px;}
.gu2 .row {width: 290px;}
.gu3 .row {width: 435px;}
.gu4 .row {width: 580px;}
.gu5 .row {width: 725px;}
.gu6 .row {width: 870px;}
.gu7 .row {width: 1015px;}
.gu8 .row {width: 1160px;}

.col {padding-left:0px; float:left; position:relative;}
.gu1{width: 145px;}
.gu2{width: 290px;}
.gu3{width: 435px;}
.gu4{width: 580px;}
.gu5{width: 725px;}
.gu6{width: 870px;}
.gu7{width: 1015px;}
.gu8{width: 1160px;}

.ru1 { height:145px; }
.ru2 { height:290px; }
.ru4 { height:580px; }

.hovered { height:145px; }

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1160px) {
/* Styles */

.site {
    width: 1002px;
}

.col {padding-left:0px; float:left; position:relative;}
.gu1{width: 167px;}
.gu2{width: 334px;}
.gu3{width: 501px;}
.gu4{width: 668px;}
.gu5{width: 723px;}
.gu6{width: 668px;}
.gu7{width: 1013px;}
.gu8{width: 100%;}

.ru1 { height:167px; }
.ru2 { height:334px; }
.ru4 { height:668px; }

.hovered { height:167px; }

}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1002px) {
/* Styles */

.site {
    width: 750px;
}

.col {padding-left:0px; float:left; position:relative;}
.gu1{width: 125px;}
.gu2{width: 250px;}
.gu3{width: 375px;}
.gu4{width: 500px;}
.gu5{width: 625px;}
.gu6{width: 500px;}
.gu7{width: 1013px;}
.gu8{width: 100%;}

.ru1 { height:125px; }
.ru2 { height:250px; }
.ru4 { height:500px; }

.hovered { height:125px; }

}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 767px) {
/* Styles */

    .site {
        width: 320px;
    }

    .col {padding-left:0px; float:left; position:relative;}
    .gu1{width: 320px;}
    .gu2{width: 320px;}
    .gu3{width: 320px;}
    .gu4{width: 320px;}
    .gu5{width: 625px;}
    .gu6{width: 100%;}
    .gu7{width: 1013px;}
    .gu8{width: 100%;}

    .ru1 { height:160px; }
    .ru2 { height:160px; } /* Changed from 320px */
    .ru4 { height:320px;}

    .hovered { height:160px; }

    .next, .prev {
        display:none;
    }

}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1160px) {
/* Styles */
    .site {
        width: 1160px;
    }
}

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