/*-------------------------------------------------------------------------------------------------------------------------------------
        
        WEBDEV FRAMEWORK

        Author:         Nicholas Coupland
        Last Updated:   04.08.2016
        version:        1.0

        CSS GRID SYSTEM 
        
        Custom CSS grid system based off Twitter Bootstrap

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

.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.row:after,.row:before {
  content:" ";
  display:table
}
.clearfix:after,.container-fluid:after,.container:after,.row:after {
  clear:both
}
.hide {
display:none!important
}
.show {
  display:block!important
}
.hidden,.visible-lg,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block,.visible-md,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-sm,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-xs,.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block {
  display:none!important
}
.invisible {
  visibility:hidden
}
.container,.container-fluid {
  margin-right:auto;
  margin-left:auto;
  padding-left:15px;
  padding-right:15px
}
.row {
  margin-left:-15px;
  margin-right:-15px
}

@media (min-width:768px) {
  .container {
    width:750px
  }
}

@media (min-width:992px) {
  .container {
    width:970px
  }
}

@media (min-width:1200px) {
  .container {
    width:1170px
  }
}

.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
  position:relative;
  min-height:1px;
  padding-left:15px;
  padding-right:15px
}
.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
  float:left
}
.col-xs-12 {
  width:100%
}
.col-xs-11 {
  width:91.66666667%
}
.col-xs-10 {
  width:83.33333333%
}
.col-xs-9 {
  width:75%
}
.col-xs-8 {
  width:66.66666667%
}
.col-xs-7 {
  width:58.33333333%
}
.col-xs-6 {
  width:50%
}
.col-xs-5 {
  width:41.66666667%
}
.col-xs-4 {
  width:33.33333333%
}
.col-xs-3 {
  width:25%
}
.col-xs-2 {
  width:16.66666667%
}
.col-xs-1 {
  width:8.33333333%
}

@media (min-width:768px) {
  .col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9 {
    float:left
  }
  .col-sm-12 {
    width:100%
  }
  .col-sm-11 {
    width:91.66666667%
  }
  .col-sm-10 {
    width:83.33333333%
  }
  .col-sm-9 {
    width:75%
  }
  .col-sm-8 {
    width:66.66666667%
  }
  .col-sm-7 {
    width:58.33333333%
  }
  .col-sm-6 {
    width:50%
  }
  .col-sm-5 {
    width:41.66666667%
  }
  .col-sm-4 {
    width:33.33333333%
  }
  .col-sm-3 {
    width:25%
  }
  .col-sm-2 {
    width:16.66666667%
  }
  .col-sm-1 {
    width:8.33333333%
  }
}

@media (min-width:992px) {
  .col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9 {
    float:left
  }
  .col-md-12 {
    width:100%
  }
  .col-md-11 {
    width:91.66666667%
  }
  .col-md-10 {
    width:83.33333333%
  }
  .col-md-9 {
    width:75%
  }
  .col-md-8 {
    width:66.66666667%
  }
  .col-md-7 {
    width:58.33333333%
  }
  .col-md-6 {
    width:50%
  }
  .col-md-5 {
    width:41.66666667%
  }
  .col-md-4 {
    width:33.33333333%
  }
  .col-md-3 {
    width:25%
  }
  .col-md-2 {
    width:16.66666667%
  }
  .col-md-1 {
    width:8.33333333%
  }
}

@media (min-width:1200px) {
  .col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9 {
    float:left
  }
  .col-lg-12 {
    width:100%
  }
  .col-lg-11 {
    width:91.66666667%
  }
  .col-lg-10 {
    width:83.33333333%
  }
  .col-lg-9 {
    width:75%
  }
  .col-lg-8 {
    width:66.66666667%
  }
  .col-lg-7 {
    width:58.33333333%
  }
  .col-lg-6 {
    width:50%
  }
  .col-lg-5 {
    width:41.66666667%
  }
  .col-lg-4 {
    width:33.33333333%
  }
  .col-lg-3 {
    width:25%
  }
  .col-lg-2 {
    width:16.66666667%
  }
  .col-lg-1 {
    width:8.33333333%
  }
  .visible-lg {
    display:block!important
  }
  .visible-lg-inline {
    display:inline!important
  }
  .visible-lg-inline-block {
    display:inline-block!important
  }
  .visible-lg-block {
    display:block!important
  }
  .hidden-lg {
    display:none!important
  }
}

@media (max-width:767px) {
  .visible-xs {
    display:block!important
  }
  .visible-xs-block {
    display:block!important
  }
  .visible-xs-inline {
    display:inline!important
  }
  .visible-xs-inline-block {
    display:inline-block!important
  }
}

@media (min-width:768px) and (max-width:991px) {
  .visible-sm,.visible-sm-block {
    display:block!important
  }
  .visible-sm-inline {
    display:inline!important
  }
  .visible-sm-inline-block {
    display:inline-block!important
  }
  .hidden-sm {
    display:none!important
  }
}

@media (min-width:992px) and (max-width:1199px) {
  .visible-md,.visible-md-block {
    display:block!important
  }
  .visible-md-inline {
    display:inline!important
  }
  .visible-md-inline-block {
    display:inline-block!important
  }
  .hidden-md {
    display:none!important
  }
}

@media (max-width:767px) {
  .hidden-xs {
    display:none!important
  }
}


.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}