/*
//===========================================================================\\
// Projet : Val.NetOPCA.Web
// Nom fichier : cutegrids.css
// Auteur : CHO
//
//===========================================================================\\
// Description :
//
//  CSS de gestion du mode responsive
//
//===========================================================================\\
// Commentaires :
//
// Basé sur la bibliothèque Cute Grids (http://www.cutegrids.com)
// Version simplifié ne gérant que les modes tablet et desktop
// Passage en mode tablet sous 800px (50em)
//
//===========================================================================\\
// Historique :
//
//  - 21/11/2016 : CHO - Création
//
//===========================================================================\\
// A faire :
//
//===========================================================================\\
*/

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box
}

/* Set the width of the row to what you like */
.row {
  width: 100%;
  max-width:4096px; /* max Width of row, Change to what you like */
  margin:0 auto;
}

/* Nested row 1 level down */
/* Change the gutter if you like, currently set as 0.65em */
.row .row {
  margin-left: -0.65rem; /* minus left gutter for nested rows */
  margin-right: -0.65rem; /* minus Right gutter for nested rows */
  width: auto;
}

[class*='cute-'] {
  float: left;
  position: relative;
  padding: 0.65rem; /* top, bottom, left and right padding for columns */
  width:100%;
}

/* Remove this if you want the columns to float left when they overflow the row */

[class*='cute-']:last-of-type {
  float: right;
}

/* Clearfix */
.row:after, .group:after, .clearfix:after {
  content: "";
  display: table;
  clear: both
}
.container:before,
.container:after {
  display: table;
  content: " ";
}

.container:after {
  clear: both;
}

.left {
  float: left !important;
}

.right {
  float: right !important;
}

/* Grid classes for tablet screen widths  */
@media only screen {
  .cute-1-tablet { width: 8.3333333333333%; }
  .cute-2-tablet { width: 16.666666666667%; }
  .cute-3-tablet { width: 25%; }
  .cute-4-tablet { width: 33.333333333333%; }
  .cute-5-tablet { width: 41.666666666667%; }
  .cute-6-tablet { width: 50%; }
  .cute-7-tablet { width: 58.333333333333%; }
  .cute-8-tablet { width: 66.666666666667%; }
  .cute-9-tablet { width: 75%; }
  .cute-10-tablet { width: 83.333333333333%; }
  .cute-11-tablet { width: 91.666666666667%; }
  .cute-12-tablet { width: 100%; }

    /* offset for tablet screen widths */
  .cute-0-tablet-offset { margin: 0; }
  .cute-1-tablet-offset { margin-left: 8.3333333333333%; }
  .cute-2-tablet-offset { margin-left: 16.666666666667%; }
  .cute-3-tablet-offset { margin-left: 25%; }
  .cute-4-tablet-offset { margin-left: 33.333333333333%; }
  .cute-5-tablet-offset { margin-left: 41.666666666667%; }
  .cute-6-tablet-offset { margin-left: 50%; }
  .cute-7-tablet-offset { margin-left: 58.333333333333%; }
  .cute-8-tablet-offset { margin-left: 66.666666666667%; }
  .cute-9-tablet-offset { margin-left: 75%; }
  .cute-10-tablet-offset { margin-left: 83.333333333333%; }
  .cute-11-tablet-offset { margin-left: 91.666666666667%; }

  .cute-1-tablet-push { left: 8.3333333333333%; }
  .cute-2-tablet-push { left: 16.666666666667%; }
  .cute-3-tablet-push { left: 25%; }
  .cute-4-tablet-push { left: 33.333333333333%; }
  .cute-5-tablet-push { left: 41.666666666667%; }
  .cute-6-tablet-push { left: 50%; }
  .cute-7-tablet-push { left: 58.333333333333%; }
  .cute-8-tablet-push { left: 66.666666666667%; }
  .cute-9-tablet-push { left: 75%; }
  .cute-10-tablet-push { left: 83.333333333333%; }
  .cute-11-tablet-push { left: 91.666666666667%; }

  .cute-1-tablet-pull { right: 8.3333333333333%; }
  .cute-2-tablet-pull { right: 16.666666666667%; }
  .cute-3-tablet-pull { right: 25%; }
  .cute-4-tablet-pull { right: 33.333333333333%; }
  .cute-5-tablet-pull { right: 41.666666666667%; }
  .cute-6-tablet-pull { right: 50%; }
  .cute-7-tablet-pull { right: 58.333333333333%; }
  .cute-8-tablet-pull { right: 66.666666666667%; }
  .cute-9-tablet-pull { right: 75%; }
  .cute-10-tablet-pull { right: 83.333333333333%; }
  .cute-11-tablet-pull { right: 91.666666666667%; }

  .center-tablet {
    margin-left: auto;
    margin-right:auto;
    float:none !important;
  }
  .uncenter-tablet {
    margin-left: 0;
    margin-right: 0;
    float:left !important;
  }
  .uncenter-tablet.right {
    float:right !important;
  }

  [class*='cute-'].tablet-reset {
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    float: left; }
}
/* Grid classes for wide Tablet to Small Desktop Size */

/* Grid Classes for Large Desktop Size */
.show-desktop { display: none; }
@media only screen and (min-width: 50.062em) {
  .cute-1-desktop { width: 8.3333333333333%; }
  .cute-2-desktop { width: 16.666666666667%; }
  .cute-3-desktop { width: 25%; }
  .cute-4-desktop { width: 33.333333333333%; }
  .cute-5-desktop { width: 41.666666666667%; }
  .cute-6-desktop { width: 50%; }
  .cute-7-desktop { width: 58.333333333333%; }
  .cute-8-desktop { width: 66.666666666667%; }
  .cute-9-desktop { width: 75%; }
  .cute-10-desktop { width: 83.333333333333%; }
  .cute-11-desktop { width: 91.666666666667%; }
  .cute-12-desktop { width: 100%; }

  /* offset for tablet laptop widths */
  .cute-0-desktop-offset { margin: 0; }
  .cute-1-desktop-offset { margin-left: 8.3333333333333%; }
  .cute-2-desktop-offset { margin-left: 16.666666666667%; }
  .cute-3-desktop-offset { margin-left: 25%; }
  .cute-4-desktop-offset { margin-left: 33.333333333333%; }
  .cute-5-desktop-offset { margin-left: 41.666666666667%; }
  .cute-6-desktop-offset { margin-left: 50%; }
  .cute-7-desktop-offset { margin-left: 58.333333333333%; }
  .cute-8-desktop-offset { margin-left: 66.666666666667%; }
  .cute-9-desktop-offset { margin-left: 75%; }
  .cute-10-desktop-offset { margin-left: 83.333333333333%; }
  .cute-11-desktop-offset { margin-left: 91.666666666667%; }

  .cute-1-desktop-push { left: 8.3333333333333%; }
  .cute-2-desktop-push { left: 16.666666666667%; }
  .cute-3-desktop-push { left: 25%; }
  .cute-4-desktop-push { left: 33.333333333333%; }
  .cute-5-desktop-push { left: 41.666666666667%; }
  .cute-6-desktop-push { left: 50%; }
  .cute-7-desktop-push { left: 58.333333333333%; }
  .cute-8-desktop-push { left: 66.666666666667%; }
  .cute-9-desktop-push { left: 75%; }
  .cute-10-desktop-push { left: 83.333333333333%; }
  .cute-11-desktop-push { left: 91.666666666667%; }

  .cute-1-desktop-pull { right: 8.3333333333333%; }
  .cute-2-desktop-pull { right: 16.666666666667%; }
  .cute-3-desktop-pull { right: 25%; }
  .cute-4-desktop-pull { right: 33.333333333333%; }
  .cute-5-desktop-pull { right: 41.666666666667%; }
  .cute-6-desktop-pull { right: 50%; }
  .cute-7-desktop-pull { right: 58.333333333333%; }
  .cute-8-desktop-pull { right: 66.666666666667%; }
  .cute-9-desktop-pull { right: 75%; }
  .cute-10-desktop-pull { right: 83.333333333333%; }
  .cute-11-desktop-pull { right: 91.666666666667%; }

  .center-desktop {
    margin-left: auto;
    margin-right:auto;
    float:none !important;
  }
  .uncenter-desktop {
    margin-left: 0;
    margin-right: 0;
    float:left !important;
  }
  .uncenter-desktop.right {
    float:right !important;
  }

  [class*='cute-'].desktop-reset {
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    float: left; }
}

@media only screen {
    .cute-100 { width:100%;}
}

/* Make visible or hidden block elements */
.show-tablet, .show-desktop { display: none !important; }

@media only screen and (max-width: 50em) { 
  .hide-tablet { display: none !important; }
  .show-tablet { display: block !important; }
}

@media only screen and (min-width: 50.062em) { 
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; } 
}

/* make images responsive */
.responsive-img {
    display: block;
    height: auto;
    max-width: 100%;
}
/* Optional Extras */

/* something to keep tables horizontal with scroll when on small screen 
*  Useful if table is wide. Set media query to point where table needs it
*/ 
/*
@media only screen and (max-width: 47.938em) {
  .table-respond {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}
}
*/

/* Grid classes for tablet screen widths  */
@media only screen {
    .center-content-tablet {
        display: block;
        text-align: center;
    }

    .uncenter-content-tablet {
        display: inline;
        text-align: left;
    }
}

/* Grid Classes for Large Desktop Size */
@media only screen and (min-width: 75em) {
    .center-content-desktop {
        display: block;
        text-align: center;
    }

    .uncenter-content-desktop {
        display: inline;
        text-align: left;
    }
}