/*********
 Imports
*********/
/************************************
 Colors From : www.flatuicolors.com
************************************/
/*********
  Mixins
*********/
/*********
 Globals
*********/
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {


  width: 100%;
  height: 100%;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
 
  font-weight: bolder;
}

p {
 
  font-weight: normal;
  margin-bottom: 0;
}

a {
  
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  color: #000;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

a:hover {
  
}

a.Ghost-Blue {
 
}

a.Ghost-Blue:hover {
 
}

a.Ghost-Turquoise {

}

a.Ghost-Turquoise:hover {
 
}

form {
  margin-bottom: 0;
}

/*************
 Placeholder
*************/
::selection {
  background: #FD685B;
  color: #fff;
}

::-moz-selection {
  background: #FD685B;
  color: #fff;
}

::-webkit-input-placeholder {
  color: #fff;
  font-weight: bolder;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #fff;
  font-weight: bolder;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #fff;
  font-weight: bolder;
}

:-ms-input-placeholder {
  color: #fff;
  font-weight: bolder;
}

/*************
     Text
*************/
h1 {
  margin-top: 250px;
}

p {
  margin-top: 5px;
  margin-bottom: 10px;
}

@media screen and (min-width: 320px) {
  h1 {
    margin-top: 130px;
  }
}

@media screen and (min-width: 480px) {
  h1 {
    margin-top: 230px;
  }
}

@media screen and (min-width: 480px) {
  h1 {
    margin-top: 230px;
  }
}

/*************
     Modal
*************/
.Modal {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: rgba(255,255,255,.9);
  z-index: 9999;
  color:#fff;
  display: none;
	
}

.Modal .Close {
  position: absolute;
  top: 25px;
  right: 65px;
  z-index: 999;
  cursor: pointer;
}

@media screen and (min-width: 320px) {
  header h1 {
    margin-left: 0px;
  }
  header h1 p {
    margin-left: 0px;
  }
  header h1 p a {
    margin-left: 0px;
  }
}

/*------------------------*/
a.btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;

  border-radius: 0;

  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: inline-block;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2.1em;
  margin: 5px;
color: #fff;
  text-decoration: none;
  text-align: center;
width: 165px;
height: 50px;
vertical-align: top;

	border: 1px solid #ddd;
    border-radius: 2px;
}

a.btn.chapitre1{ background:url(../../images/chapitre.png)-2px 0;width: 160px; height: 125px; display:inline-block; background-repeat:no-repeat;}
a.btn.chapitre2{ background:url(../../images/chapitre.png)-176px 0; width: 175px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre3{ background:url(../../images/chapitre.png)-2px -125px; width: 160px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre4{ background:url(../../images/chapitre.png)-178px -124px; width: 160px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre5{ background:url(../../images/chapitre.png)-2px -250px; width: 160px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre6{ background:url(../../images/chapitre.png)-175px -250px; width: 175px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre7{ background:url(../../images/chapitre.png)-2px -375px; width: 160px; height: 125px; display:inline-block; background-repeat:no-repeat;}
a.btn.chapitre8{ background:url(../../images/chapitre.png)-174px -375px; width: 175px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre9{ background:url(../../images/chapitre_2.png)-2px -4px; width: 145px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre10{ background:url(../../images/chapitre_2.png)-141px -3px; width: 155px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre11{ background:url(../../images/chapitre_2.png)-292px -2px; width: 124px; height: 128px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre12{ background:url(../../images/chapitre_3.png)-2px 4px; width: 165px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre13{ background:url(../../images/chapitre_3.png)-176px 4px; width: 175px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre14{ background:url(../../images/chapitre_3.png)-2px -119px; width: 165px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre15{ background:url(../../images/chapitre_3.png)-185px -120px; width: 165px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre16{ background:url(../../images/chapitre_3.png)-2px -240px; width: 160px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre17{ background:url(../../images/chapitre_3.png)-175px -240px; width: 175px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre18{ background:url(../../images/chapitre_3.png)-2px -362px; width: 160px; height: 125px; display:inline-block; background-repeat:no-repeat;}
a.btn.chapitre19{ background:url(../../images/chapitre_3.png)-174px -362px; width: 175px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre20{ background:url(../../images/chapitre_4.png) 0px 0px; width: 155px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre21{ background:url(../../images/chapitre_4.png) -153px 0px; width: 125px; height: 125px; display:inline-block;background-repeat:no-repeat}
a.btn.chapitre22{ background:url(../../images/chapitre_4.png) -275px 0px; width: 120px; height: 125px; display:inline-block;background-repeat:no-repeat}

a.btn:hover, .btn:focus {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
	box-shadow: none;
}


.first {

	background-repeat: no-repeat;
}


.second {
	 
	background-repeat: no-repeat;
}

.second:hover {

}

.third {

	background-repeat: no-repeat;
	background-position: 0 -73px;
}



.seven {

	background-repeat: no-repeat;
	background-position: 0 -215px;
}
.seven {
 
}
a.btn.nine {
	width: 65px;
position: absolute;
height: 288px;
top: 2px;
right: -39px;
	
	
 
}
.fourth {
 
	background-repeat: no-repeat;
	background-position: 0 -73px;
}
.fourth:hover {
 
}

.fifth {

	background-repeat: no-repeat;
	background-position: 0 -145px;
}
.eight {
	
	background-repeat: no-repeat;
	background-position: 0 -216px;
 
}
.fifth:hover {
 
}
.fifth:hover:after {
  
}

.sixth {

	background-repeat: no-repeat;
	background-position: 0 -145px;
 
}
.sixth:hover {

}