html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
html {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*Table*/
.rTable {
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  display: table;
}
.rTableRow {
  display: table-row;
}
.rTableCell {
  vertical-align: top;
  display: table-cell;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q,
blockquote {
  quotes: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}
a img {
  border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * Import grid settings :
 * This to be able to use gridle mixins, etc...
 */
.gridle-debug #myCoolItem,
#myCoolItem.gridle-debug {
  background-size: 50px 90%;
  background-position: 0 50%;
  background-repeat: repeat-x;
}
#myCoolItem {
  position: relative;
}
.gridle-debug #myCoolItem,
#myCoolItem.gridle-debug {
  background-color: #daeff5;
}
.gridle-debug #myCoolItem:before,
#myCoolItem.gridle-debug:before,
.gridle-debug #myCoolItem:after,
#myCoolItem.gridle-debug:after {
  content: "";
  display: block;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowRkEzNzVFNTg1NjgxMUUyOUI4RjhEMzg4QzM4QjZFOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowRkEzNzVFNjg1NjgxMUUyOUI4RjhEMzg4QzM4QjZFOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBGQTM3NUUzODU2ODExRTI5QjhGOEQzODhDMzhCNkU4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBGQTM3NUU0ODU2ODExRTI5QjhGOEQzODhDMzhCNkU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++5+BhQAAAA9JREFUeNpiYGBgkAIIMAAAHwAbZIBtGgAAAABJRU5ErkJggg==);
  margin: 10px 0;
  padding: 5px 0;
  text-align: center;
  color: white;
  font-size: 11px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block !important;
}
#myCoolItem {
  display: inline-block;
  min-height: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ul#medias {
  background: black;
  text-align: center;
  margin-bottom: 30px;
}
ul#medias li {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  margin: 0;
}
ul#medias li.active,
ul#medias li:hover {
  background: white;
  color: black;
}
html.default ul#medias {
  display: none;
}
@media screen and (max-width: 620px) {
  ul#medias {
    display: none;
  }
}
/**
 * Basic formatting :
 */
html.mobile body {
  text-align: center;
}
/**
 * Gridle set sample :
 */
#myCoolItem {
  float: left;
  direction: ltr;
  padding-left: 10px;
  padding-right: 10px;
  width: 66.66667%;
  left: 16.66667%;
}
html.default #myCoolItem {
  float: left;
  direction: ltr;
  padding-left: 10px;
  padding-right: 10px;
}
html.ipad-landscape #myCoolItem {
  padding-left: 0;
  padding-right: 0;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  #myCoolItem {
    padding-left: 0;
    padding-right: 0;
  }
}
html.default #myCoolItem {
  width: 66.66667%;
}
.gridle-debug html.default #myCoolItem:before,
html.default #myCoolItem.gridle-debug:before {
  content: "grid-default-8";
}
.gridle-debug html.default #myCoolItem.parent:before,
html.default #myCoolItem.gridle-debug.parent:before {
  content: "grid-parent-default-8";
}
.gridle-debug #myCoolItem:before,
#myCoolItem.gridle-debug:before {
  content: "grid-default-8";
}
.gridle-debug #myCoolItem.parent:before,
#myCoolItem.gridle-debug.parent:before {
  content: "grid-parent-default-8";
}
.gridle-debug #myCoolItem,
#myCoolItem.gridle-debug {
  background-color: #f4efdf !important;
}
html.default #myCoolItem {
  left: 16.66667%;
}
.gridle-debug html.default #myCoolItem:after,
html.default #myCoolItem.gridle-debug:after {
  content: "push-default-2";
}
.gridle-debug #myCoolItem:after,
#myCoolItem.gridle-debug:after {
  content: "push-default-2";
}
html.tablet #myCoolItem {
  width: 100%;
}
.gridle-debug html.tablet #myCoolItem:before,
html.tablet #myCoolItem.gridle-debug:before {
  content: "grid-tablet-12" !important;
}
.gridle-debug html.tablet #myCoolItem.parent:before,
html.tablet #myCoolItem.gridle-debug.parent:before {
  content: "grid-parent-tablet-12" !important;
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
  #myCoolItem {
    width: 100%;
  }
  .gridle-debug #myCoolItem:before,
  #myCoolItem.gridle-debug:before {
    content: "grid-tablet-12" !important;
  }
  .gridle-debug #myCoolItem.parent:before,
  #myCoolItem.gridle-debug.parent:before {
    content: "grid-parent-tablet-12" !important;
  }
}
.gridle-debug #myCoolItem,
#myCoolItem.gridle-debug {
  background-color: #f4efdf !important;
}
html.tablet #myCoolItem {
  left: 0%;
}
.gridle-debug html.tablet #myCoolItem:after,
html.tablet #myCoolItem.gridle-debug:after {
  content: "push-tablet-0" !important;
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
  #myCoolItem {
    left: 0%;
  }
  .gridle-debug #myCoolItem:after,
  #myCoolItem.gridle-debug:after {
    content: "push-tablet-0" !important;
  }
}
html.mobile #myCoolItem {
  visibility: hidden;
}
@media screen and (max-width: 480px) {
  #myCoolItem {
    visibility: hidden;
  }
}