@charset "utf-8";
/* CSS Document */

.container {
  //looks a bit better
  margin-top: 25px;
}

[class^="col-"] {
  //show Grid
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  border: 1px solid #ccc;
}

[class^="col-"] {
  overflow:hidden;
}

.flexme {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

/*===========my stuff ?==========*/

.marginTop {
  margin-top: 1.5em;
}

.marginBottom {
	margin-bottom: 1.5em;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


/*bigOnly hides span on iPad portrait*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	 .iPadOnly{
		 display: none;
	}	 
}

/*bigOnly hides span on myPhone portrait*/
@media only screen 
and (min-device-width : 1082px) 
and (max-device-width : 1918px) 
and (orientation : portrait) {
	 .myPhoneOnly{
		 display: none;
	}	 
}


/*======== NOW LETS ADD FLEXBOX ========*/
.row-flex {
  display: flex;
  flex-wrap: wrap;

  @for $i from 1 through 12 {
    [class*="col-xs-#{$i}"] {
      flex: $i 0 (100% / 12 * $i);
    }

    [class*="col-xs-#{$i}"]:last-child {
      flex: 0 0 (100% / 12 * $i);
    }
  }

  @media (min-width: 768px) {
    @for $i from 1 through 12 {
      [class*="col-sm-#{$i}"] {
        flex: $i 0 (100% / 12 * $i);
      }

      [class*="col-sm-#{$i}"]:last-child {
        flex: 0 0 (100% / 12 * $i);
      }
    }
  }

  @media (min-width: 992px) {
    @for $i from 1 through 12 {
      [class*="col-md-#{$i}"] {
        flex: $i 0 (100% / 12 * $i);
      }

      [class*="col-md-#{$i}"]:last-child {
        flex: 0 0 (100% / 12 * $i);
      }
    }
  }

  @media (min-width: 1200px) {
    @for $i from 1 through 12 {
      [class*="col-lg-#{$i}"] {
        flex: $i 0 (100% / 12 * $i);
      }

      [class*="col-lg-#{$i}"]:last-child {
        flex: 0 0 (100% / 12 * $i);
      }
    }
  }