@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot');
  src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.woff') format('woff'),
    url('../fonts/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */

[data-icon]:before {
  font-family: 'icomoon';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased
}

/* Use the following CSS code if you want to have a class per icon */

/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/

.icon-arrow-right,
.icon-attention,
.icon-black-cloud,
.icon-book,
.icon-books,
.icon-calendar,
.icon-camera1,
.icon-camera2,
.icon-eclair,
.icon-idea,
.icon-labo,
.icon-light-cloud,
.icon-black-mad,
.icon-black-star,
.icon-white-star,
.icon-ticket,
.icon-timeline,
.icon-wifi,
.icon-white-cloud,
.icon-white-mad{
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.icon-arrow-right:before {content: "\e010"}
.icon-attention:before {content: "\e00d"}
.icon-black-cloud:before {content: "\e00e"}
.icon-black-star:before {content: "\e012"}
.icon-book:before {content: "\e000"}
.icon-books:before {content: "\e011"}
.icon-calendar:before {content: "\e004"}
.icon-camera1:before {content: "\e001"}
.icon-camera2:before {content: "\e00a"}
.icon-eclair:before {content: "\e00f"}
.icon-idea:before {content: "\e008"}
.icon-labo:before {content: "\e009"}
.icon-light-cloud:before {content: "\e00b"}
.icon-black-mad:before {content: "\e006"}
.icon-ticket:before {content: "\e002"}
.icon-timeline:before {content: "\e005"}
.icon-wifi:before {content: "\e003"}
.icon-white-cloud:before {content: "\e00c"}
.icon-white-mad:before {content: "\e007"}
.icon-white-star:before {content: "\e013"}


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

body {
  font-family: 'PT sans narrow','Lato', sans-serif !important;
  font-weight: normal,!important;
  font-size: 1em !important;
  background-color: #fff !important;
}

a {text-decoration:none;color:#fff;}



header a {
  text-decoration: none;
  color: inherit;
  font-size: 17px;
}

.wrapper {
  top:0;
  padding: 2em .5em;
  width:100%;
  height:100%;
  -webkit-perspective: 3300px;
  -ms-perspective: 3300px;
  -o-perspective: 3300px;
  perspective: 3300px;
  position: relative
}

.dashboard { 
  max-width:80%;
}


/*COLUMNS 2 */
.col1,
.col2{
  width: 99%;
  margin: 1em auto
}

/*SCROLLBAR MINIMUM cf scrollbar.css too*/

::-webkit-scrollbar {
  width: 20px;
}
 
::-webkit-scrollbar-thumb {
  background:transparent ! important;
  
}
 
::-webkit-scrollbar-track {
  background: #111 !important;
}

/*PAGES*/
/*media all*/

.page-content{
  padding:0 3em 1em !important;
  text-align:justify;
  font-size:12px;
}

.page-content-iframe{
  padding:0 0 0 1em !important;
  text-align:justify;
}
.page-content table {
width:100% !important;
}
.page-content caption {
margin-top:30px;
margin-bottom:30px;
font-size:0.9em;
color:white;
font-weight:normal;
text-align:center;
}
.page-content th {
font-size:0.6em;
font-weight:normal;
text-align:center;
}


/*default colors just in case you don't define these colors on the tiles*/
.s-page, .r-page{
  background-color:#726D62;
  color:black;
}

.page-title {
  margin: .25em 0;
  font-weight: 100;
  font-size: 3em;
  text-align:center;
}


/*BUTTON IN PAGES*/
.close-button {
  font-size: 1.5em;
  width: 1em;
  height: 1em;
  position: absolute;
  top: .75em;
  right: .75em;
  cursor: pointer;
  line-height: .8em;
  text-align: center;
  z-index:3;
}



/*TILES*/
/*styling the individual tiles*/

.tile-x p,
.tile-y p {
  font-size: 2em;
}

.tile-x p span,
.tile-y, p span {
  font-size: 1.3em;
  margin-right: .7em;
  position: relative;
  top: .15em;
}

.tile-x div {
  text-align: left;
}


.tile-transparent{
  background-color: transparent;
}

.tile-white {
  background-color: #eee;
  color: black;
}
.tile-white:hover {
  background-color: #eee;
  color: #DCB452;
}


.tile-black {
  background-color: #222;
  color: #A29F95;
}
.tile-black:hover {
  background-color:#A29F95;
  color: #111;
}

.tile-dark-black {
  background-color: #000;
  color: #A29F95;
}
.tile-dark-black:hover {
  background-color:#A29F95;
  color: #111;
}

.tile-dark-beige {
  background-color: #A29F95;
  color: white;
}
.tile-light-beige:hover {
  background-color: #111;
  color: #fff;
}

.tile-blue {
  background-color: #261DC6;
  color:#eee;
}
.tile-blue:hover {
  background-color: #665FE5;
  color: #261DC6;
}

.tile-light-blue{
  background-color: #606E74;
  color: black;
}
..tile-light-blue:hover {
  background-color: #606E74;
  color: #DCB452;
}

.tile-light-gray {
  background-color: #DDDDDD;
  color: white;
}
.tile-light-gray:hover {
  background-color: #fff;
  color: #FCC120;
}

.tile-green {
  background-color: #0F6755;
  color:#eee;
}
.tile-green:hover {
  background-color: #B4CBC6;
  color: #0F6755;
}
.tile-green p {
  font-size: 4em;
  margin-top: .5em;
}
.tile-green p span {
  margin-right: 1em;
}

.tile-green-rad {
color: white
background: #164949; /* Old browsers */
background: -moz-linear-gradient(top,  #164949 0%, #3d908e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#164949), color-stop(100%,#3d908e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #164949 0%,#3d908e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #164949 0%,#3d908e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #164949 0%,#3d908e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #164949 0%,#3d908e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#164949', endColorstr='#3d908e',GradientType=0 ); /* IE6-9 */
}
.tile-green-rad:hover{
color: #FCC120;
background: #3d908e; /* Old browsers */
background: -moz-linear-gradient(top,  #3d908e 0%, #164949 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d908e), color-stop(100%,#164949)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #3d908e 0%,#164949 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #3d908e 0%,#164949 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #3d908e 0%,#164949 100%); /* IE10+ */
background: linear-gradient(to bottom,  #3d908e 0%,#164949 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d908e', endColorstr='#164949',GradientType=0 ); /* IE6-9 */
}

.tile-dark-pink {
  background-color: #E74C3C;
  color: #676259;
}
.tile-dark-pink:hover {
  background-color: #111;
  color: #E74C3C;
}

.tile-yellow {
  background-color: #DCB452;
  color:#827E73;
}
.tile-yellow:hover {
  background-color: #222;
  color: #DCB452;
}





/*======================= media queries =======================*/

/*MEDIA ALL MINIMUM 336px*/

@media all and (min-width: 21.000em) {
.col1,
  .col2 {
    float: left;
    margin-right:0;
    width: 50%;
  }
  
  .close-button {
  font-size: 0.5em important;
  top: 0.1em;
  right:0.1em;
  display:block;
  cursor: pointer;
  line-height: 0.7em;
  text-align: center;
  z-index:100;
  position:absolute;
}
.page-top-link{
  display:block;
  background:rgba(0,0,0,0.2);
  height:23px;
  width:20%;
  margin:0 auto 3px;
  min-width:20px;
  max-width:20px;
  position:relative;
  z-index:101;
  font-size:1em;
  line-height:20px;
  text-align:center;
  color:#726D62 ! important;
  border:1px solid #726D62 !important;
  border-radius:50%;
}

header {
  height:20px;
  line-height:20px;
}

.header-link{
  display:block;
  color:#726D62;
  border-radius:50%;
  border:1px solid #726D62;
  font-size:1em;
  text-align:center;
  background:rgba(0,0,0,0.2);
  width:20%;
  margin:0 auto;
  min-width:20px;
  max-width:20px;
  height:20px;
  position:relative;
  index:200;
}
 
/* iframe pour les petits formats */ 
  .iframe-index,
  .iframe-films,
  .iframe-presentation{
    display:block;
    position:relative;
    border:none;
    height:650px;
    width:100% !important;
    margin:0;
    top:20% !important;	
}

.img-blogger {
    display:block;
    position:relative;
    border:none;
    height:300px;
    width:auto !important;
    margin:0;
    top:20% !important;	   
}


}


/*MEDIA ALL MINIMUM 700px*/

@media all and (min-width: 43.75em) {
  .col1,
  .col2 {
    float: left;
    margin-right:0;
    width: 50%;
  }
  .page-title{
    font-size:2.5em;
  }
  .page-content{
    font-size:0.9em;
  }
  .page-content >div{
    margin-top:50px;
  }
  .page-content >p{
    margin-top:50px;
  }
  .close-button{
    font-size:2em;
  }
  
  /* iframe pour les formats tablets */ 
   .iframe-presentation {
  border:none;
  width:100% ! important;
  margin:0 important;
  padding:0 !important;
  height:400px;
  }
   .iframe-index {
  border:none;
  width:100% ! important;
  margin:0 important;
  padding:0 !important;
  height:480px;
  }
  .iframe-films{
  border:none;
  width:90% ! important;
  margin:5% 5% auto ! important;
  height:auto;
  }
  
  .img-blogger {
    display:block;
    position:relative;
    border:none;
    height:400px;
    width:auto !important;
    margin:0;
    top:10% !important;	   
     }

}


/*MEDIA ALL MINIMUM 1024px, soit  fenêtre incluse : 1017px*/

@media all and (min-width: 63.438em) {
  .col1,
  .col2,
  .col3 {
    float: left;
    width: 49.5%;
  }

  .col1 {
    margin-right:0.5%;
  }

  .col2 {
    margin-left:0.5%;
  }
  .page-title{
    font-size:3.5em;
  }
  

header {
  height:35px;
  line-height:35px;
}

.page-top-link{
  display:block;
  background:rgba(0,0,0,0.2);
  height:38px;
  width:20%;
  margin:0 auto 3px;
  min-width:35px;
  max-width:35px;
  position:relative;
  z-index:101;
  font-size:1em;
  line-height:35px;
  text-align:center;
  color:#726D62 ! important;
  border:1px solid #726D62 !important;
  border-radius:50%;
}

/* iframe pour les formats moyens */ 
  .iframe-index{
  border:none;
  width:100% ! important;
  margin:0 important;
  padding:0 !important;
  height:700px;
  }
  .iframe-films{
  border:none;
  width:90% ! important;
  margin:5% 5% auto ! important;
  height:700px;
  }
 .iframe-presentation {
  border:none;
  width:90% ! important;
  margin:5% 5% auto ! important;
  height:600px;
  }
  
   .img-blogger {
    display:block;
    position:relative;
    border:none;
    height:500px;
    width:auto !important;
    margin:0;
   
     }

}

/*MEDIA ALL MINIMUM 1920px, soit 1395px de fenetre incluse*/

@media all and (min-width: 86.875em) {
 
/* iframe pour les grands formats */ 
  .iframe-index{
  border:none;
  width:100% ! important;
  margin:0 important;
  padding:0 !important;
  height:800px;
  }
  .iframe-films{
  border:none;
  width:90% ! important;
  margin:5% 5% auto ! important;
  height:800px;
  }
  .iframe-presentation {
  border:none;
  width:90% ! important;
  margin:5% 5% auto ! important;
  height:700px;
  }
  
   .img-blogger {
    display:block;
    position:relative;
    border:none;
    height:650px;
    width:auto !important;
    margin:0;
     
     }


}