/* BREAKPOINTS
/

/*
/
@media (max-width: 767px) {
  .XSXSXS {
    color: deeppink;
  }
}

@media (min-width: 768px) {
  .SMSMSM {
    color: yellow;
  }
}

@media (min-width: 992px) {
  .MDMDMD {
    color: green;
  }
}

@media (min-width: 1200px) {
  .LGLGLG {
    color: blue;
  }
}



/*
/
// MIN : Mobile First Method
@media (min-width: 480px) {
}

@media (min-width: 576px) {
}

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

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

@media (min-width: 1024px) {
}

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

@media (min-width: 1440px) {
}

@media (min-width: 1575px) {
}


@media (min-width: 768px) {
}
@media (min-width: 1200px) {
}
@media (min-width: 1575px) {
}




@media (min-width: 768px) {
  .SMSMSM {
    color: yellow;
  }
  #navbar {
    background: yellow !important;
  }
}

@media (min-width: 992px) {
  .MDMDMD {
    color: green;
  }
  #navbar {
    background: green !important;
  }
}

@media (min-width: 1024px) {
  #navbar {
    background: red !important;
  }
}

@media (min-width: 1200px) {
  .LGLGLG {
    color: blue;
  }
  #navbar {
    background: blue !important;
  }
}

@media (min-width: 1440px) {
  #navbar {
    background: lightskyblue !important;
  }
}

@media (min-width: 1575px) {
  #navbar {
    background: deepskyblue !important;
  }
}

/*
*/

/*
/

// MIN : Mobile First Method
// Extra Small Devices, Phones
@media (min-width:480px)
{
}
// Small devices (landscape phones, 576px and up)
@media (min-width:576px)
{
}
// Medium devices (tablets, 768px and up)
@media (min-width:768px)
{
}
// Large devices (desktops, 992px and up)
@media (min-width:992px)
{
}
@media (min-width:1024px)
{
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width:1200px)
{
}
@media (min-width:1440px)
{
}
@media (min-width:1575px)
{
}



/* MAX
/
@media (max-width:767px)
{
}
@media (max-width:991px)
{
}
@media (max-width:1023px)
{
}
@media (max-width:1199px)
{
}
@media (max-width:1439px)
{
}
@media (max-width:1574px)
{
}
/*
*/


.reglesflex
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;

  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;

  -ms-flex-pack: distribute;
  justify-content: space-around;

  -ms-flex-line-pack: center;
  align-content: center;

  -ms-flex-line-pack: start;
  align-content: flex-start;

  -ms-flex-line-pack: justify;
  align-content: space-between;

  -ms-flex-line-pack: distribute;
  align-content: space-around;

  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}