/*************************
	BASIC CSS
*************************/

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0
}
img{
    height:auto;
    max-width: 100%;
    max-height: 100%;
}
/*************************
	ROWS AND COLUMNS 
*************************/

.mainWidth {
    margin: 0 auto;
    width:100%
}
.row90 {
    margin: 0 auto;
    width: 90%
}
.row80 {
    margin: 0 auto;
    width: 80%
}
.row70 {
    margin: 0 auto;
    width: 70%
}
.row60 {
    margin: 0 auto;
    width: 60%
}
.row50 {
    margin: 0 auto;
    width: 50%
}
.row40 {
    margin: 0 auto;
    width: 40%
}
.row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}
.col5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 5%;
    flex: 0 0 5%;
    max-width: 5%
}
.col10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 10%;
    flex: 0 0 10%;
    max-width: 10%
}
/* 9 columns */
.col11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 11.111111111%;
    flex: 0 0 11.111111111%;
    max-width: 11.11111111%
}
/* 8 columns */
.col12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%
}
/* 7 columns */
.col14 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14.285714286%;
    flex: 0 0 14.285714286%;
    max-width: 14.285714286%
}
/* 15% width */
.col15 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 15%;
    flex: 0 0 15%;
    max-width: 15%
}
/* 6 columns */
.col16 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666666667%;
    flex: 0 0 16.666666667%;
    max-width: 16.666666667%
}
/* 5 columns */
.col20 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%
}
/* 4 columns */
.col25 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
}
.col30 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%
}
/* 3 columns */
.col33 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333333%;
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%
}
.col40 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%
}
/* 2 columns */
.col50 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
}
.col60 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%
}
.col65 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 65%;
    flex: 0 0 65%;
    max-width: 65%
}
.col70 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
    max-width: 70%
}
.col80 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%
}
.col90 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 90%;
    flex: 0 0 90%;
    max-width: 90%
}
/* 1 column */
.col100 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}
.pad1{
    padding:1px
}
.pad2 {
    padding:2px
}
.pad3{
    padding:3px
}
.pad5 {
    padding:5px
}
.pad7{
    padding:7px
}
.pad10 {
    padding:10px
}
.pad15{
    padding:15px
}
.pad20 {
    padding:20px
}
/*************************
	MEDIA QUERIES 
*************************/
@media screen and (min-width: 320px) and (max-width: 460px){
    .mainWidth {
        max-width:420px
    }
    .row{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column;
                flex-flow: column;
    }
    .col{
        -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
        max-width: 100%;
        width:100%;
    }
}
@media screen and (min-width: 461px) and (max-width: 640px){
    .mainWidth {
        max-width:580px
    }
    .row{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column;
                flex-flow: column;
    }    
    .col{
        -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
        max-width: 100%;
    }    
}
@media screen and (min-width: 641px) and (max-width: 840px){
    .mainWidth {
        max-width:768px
    }
}
@media screen and (min-width: 841px) and (max-width: 1024px){
    .mainWidth {
        max-width:960px
    }
}
@media screen and (min-width: 1025px) and (max-width: 1400px){
    .mainWidth {
        max-width:1360px
    }
}
@media screen and (min-width: 1401px) and (max-width: 1800px){
    .mainWidth {
        max-width:1600px
    }
}
@media screen and (min-width: 1801px) and (max-width: 2300px){
    .mainWidth {
        max-width:1920px
    }
}
@media screen and (min-width: 2301px){
    .mainWidth {
        max-width:2200px
    }
}
/***************************************************************************

CUSTOM CSS STARTS HERE 

***************************************************************************/