/**
 *
 * OKIA GRID v1.0
 * Developed by Kristo Vaarmari & Tauno Hanni
 * www.okia.ee
 *
 */

.grid, .inline-grid, .col, .col-1-1, .col-2-3, .col-1-2, .col-1-3, .col-1-4, .col-1-5, .col-1-6, .col-5-6, .col-1-8,
.col-3-8, .col-5-8, .col-1-10, .col-3-10, .col-2-5, .col-3-5, .col-7-10, .col-8-10,
.col-9-10, .col-1-12, .col-10-12, .col-11-12, .col-3-4, .col-5-12, .col-7-12 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .inline-grid .col, .inline-grid .col-1-1, .inline-grid .col-2-3, .inline-grid .col-1-2, .inline-grid .col-1-3, .inline-grid .col-1-4,
    .inline-grid .col-1-5, .inline-grid .col-1-6, .inline-grid .col-5-6, .inline-grid .col-1-8,
    .inline-grid .col-3-8, .inline-grid .col-5-8, .inline-grid .col-1-10, .inline-grid .col-3-10, .inline-grid .col-2-5,
    .inline-grid .col-3-5, .inline-grid .col-7-10, .inline-grid .col-8-10,
    .inline-grid .col-9-10, .inline-grid .col-1-12, .inline-grid .col-10-12, .inline-grid .col-11-12,
    .inline-grid .col-3-4, .inline-grid .col-5-12, .inline-grid .col-7-12 {
        float: none !important;
        display: inline-block;
        font-size: 13px;
        line-height: 1;
        vertical-align: top;
    }

    .grid .col, .grid .col-1-1, .grid .col-2-3, .grid .col-1-2, .grid .col-1-3, .grid .col-1-4, .grid .col-1-5, .grid .col-1-6,
    .grid .col-5-6, .grid .col-1-8, .grid .col-3-8, .grid .col-5-8, .grid .col-1-10, .grid .col-3-10, .grid .col-2-5,
    .grid .col-3-5, .grid .col-7-10, .grid .col-8-10, .grid .col-9-10, .grid .col-1-12, .grid .col-10-12, .grid .col-11-12, .grid .col-3-4,
    .grid .col-5-12, .grid .col-7-12 {
        float: left;
        margin: 0;
    }

.grid, .inline-grid {
    margin: 0 auto;
}

.inline-grid {
    width: 100%;
    font-size: 0px;
    line-height: 1;
}

.grid-pad {
    padding: 15px;
}

.grid:after, .inline-grid:after {
    content: " ";
    display: table;
    clear: both;
}

.inner {
    margin: 0;
    padding: 10px;
}


    .show-on-tablet, .show-on-mobile {
        display: none !important;
    }

    .inline-grid .pull-right {
        float: right !important;
    }


/* => Cols */
/* ------------------------------------------------------------------------------*/

.col-1-1 {
    width: 100%;
}

.col-2-3 {
    width: 66.667%;
}

.col-1-2 {
    width: 50%;
}

.col-1-3 {
    width: 33.3334%;
}

.col-1-4 {
    width: 25%;
}

.col-1-5 {
    width: 20%;
}

.col-1-6 {
    width: 16.667%;
}

.col-1-8 {
    width: 12.5%;
}

.col-3-8 {
    width: 37.5%;
}

.col-5-8 {
    width: 62.5%;
}

.col-1-10 {
    width: 10%;
}

.col-3-10 {
    width: 30%;
}

.col-2-5 {
    width: 40%;
}

.col-3-5 {
    width: 60%;
}

.col-7-10 {
    width: 70%;
}

.col-8-10 {
    width: 80%;
}

.col-9-10 {
    width: 90%;
}

.col-1-12 {
    width: 8.3334%;
}

.col-10-12 {
    width: 83.334%;
}

.col-11-12 {
    width: 91.667%;
}

.col-5-6 {
    width: 83.3337%;
}

.col-3-4 {
    width: 75%;
}

.col-5-12 {
    width: 41.667%;
}

.col-7-12 {
    width: 58.334%;
}

/* => Media Queries */
/* ------------------------------------------------------------------------------*/


@media only screen and (min-width: 1240px) { /*  large screen  */
    .main-wrap {
        max-width: 1240px;
    }

    .inner {
        padding: 15px;
    }

    .grid-pad {
        padding: 20px;
    }
}
/*
@media only screen and (max-width: 960px) {
	.grid, .inline-grid {
		max-width: 960px;
	}
	.inner {
		padding: 5px;
	}
	.grid-pad {
		padding: 10px;
	}

}
*/
@media handheld, only screen and (max-width: 990px) { /*  tablet  */
    .show-on-mobile {
        display: block  !important;
    }

    .hide-on-tablet {
        display: none !important;
    }

    .show-on-tablet {
        display: block !important;
    }


    .grid, .inline-grid {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .inner, .list.inner {
        padding: 10px;
    }

    .col, .col-1-1, .col-2-3, .col-1-2, .col-1-3, .col-1-4, .col-1-5, .col-1-6, .col-1-8, .col-3-8, .col-5-8, .col-1-10,
    .col-3-10, .col-2-5, .col-3-5, .col-7-10, .col-8-10, .col-9-10, .col-1-12, .col-10-12, .col-11-12,
    .col-5-6, .col-3-4, .col-5-12, .col-7-12 {
        width: auto;
        float: none;
        clear: both;
        margin: 0;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .t-1-2, .t-1-3, .t-2-3, .t-1-4, .t-1-5, .t-1-6 {
        float: left;
        clear: none;
    }

    .inline-grid .t-1-2, .inline-grid .t-1-3, .inline-grid .t-2-3, .inline-grid .t-1-4, .inline-grid .t-1-5, .inline-grid .t-1-6 {
        display: inline-block;
        line-height: 1;
        font-size: 13px;
        clear: none;
    }

    .t-2-3 {
        width: 66.667%;
    }

    .t-1-2 {
        width: 49%;
    }

    .t-1-3 {
        width: 33.33%;
    }

    .t-1-4 {
        width: 25%;
    }

    .t-1-5 {
        width: 20%;
    }

    .t-1-6 {
        width: 16.667%;
    }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .col, .col-1-1, .col-2-3, .col-1-2, .col-1-3, .col-1-4, .col-1-5, .col-1-6, .col-1-8, .col-3-8, .col-5-8, .col-1-10,
    .col-3-10, .col-2-5, .col-3-5, .col-7-10, .col-8-10, .col-9-10, .col-1-12, .col-10-12, .col-11-12,
    .col-5-6, .col-3-4, .col-5-12, .col-7-12 {
        width: auto;
        float: none;
        clear: both;
        margin: 0;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .t-1-2, .t-1-3, .t-2-3, .t-1-4, .t-1-5, .t-1-6 {
        float: left;
        clear: none;
    }

    .inline-grid .t-1-2, .inline-grid .t-1-3, .inline-grid .t-2-3, .inline-grid .t-1-4, .inline-grid .t-1-5, .inline-grid .t-1-6 {
        display: inline-block;
        line-height: 1;
        font-size: 13px;
        clear: none;
    }

    .t-2-3 {
        width: 66.667%;
    }

    .t-1-2 {
        width: 49%;
    }

    .t-1-3 {
        width: 33.33%;
    }

    .t-1-4 {
        width: 25%;
    }

    .t-1-5 {
        width: 20%;
    }

    .t-1-6 {
        width: 16.667%;
    }

    .t-1-3:nth-child(4n) {
        clear: left;
    }
}

@media handheld, only screen and (max-width: 700px) { /*  mobile  */
    .hide-on-mobile {
        display: none !important;
    }

    .show-on-mobile {
        display: block !important;
    }


    .t-1-2, .t-1-3, .t-2-3, .t-1-4, .t-1-5, .t-1-6 {
        display: block;
        width: auto;
        float: none;
        clear: both;
        width: 100%;
    }

    .m-1-2, .m-1-3, .m-1-4 {
        float: left;
        clear: none;
    }

    .inline-grid .m-1-2, .inline-grid .m-1-3 {
        display: inline-block;
        float: none;
        line-height: 1;
        font-size: 13px;
    }

    .m-1-2, .inline-grid .m-1-2 {
        width: 49%;
    }

    .m-1-3, .inline-grid .m-1-3 {
        width: 33.33%;
    }

    .m-1-4, .inline-grid .m-1-4 {
        width: 25%;
    }
}