@charset "iso-8859-1";

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

@font-face {
    font-family: 'machine';
    src: url('webfont/machine.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
         }

body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background-image: url('images/fond.jpg');
  
	
}
/* Formulaires */
form {
 background-color:#fff;
 padding:10px;
 width:auto;
 }
 
input, textarea, select, option {
 background-color:#FFF3F3;
 font-family:'galetteregular';
 font-size: 1.5em;

 }

input, textarea, select {
 padding:7px;
 border:1px solid #B40A0A;
 border-radius:15px;
 width:50%;
 box-shadow:2px 2px 2px #C0C0C0 inset;
 margin-bottom:10px;

}

input[type=submit]{
 width:120px;
 margin-left:5px;
 box-shadow:1px 1px 1px #D83F3D;
 cursor:pointer;
 font-family: 'Calibri';
 font-size:1.8em;
}
 
 input[type=submit]:hover{
 background-color:#FCDEDE;
 }

 input[type=submit]:active{
 background-color:#FCDEDE;
 box-shadow:1px 1px 1px #D83F3D inset;
 }
fieldset
{
font-size: 1.5em;
 padding:10px 10px 10px 100px;
 margin-bottom:20px;
 border:1px solid #000000;
 background-color: #F9E4A1;
  -webkit-border-radius:10px;-moz-border-radius:10px;
	border-radius:10px;
	box-shadow:8px 8px 8px gray ;
	-moz-box-shadow:8px 8px 8px gray ;
	-webkit-box-shadow:8px 8px 8px gray ;
text-align: left;
 
}
legend
{
	display:block;
	text-align: left;
	font-size: 1.2em;
	width:auto;

}

#flag 
{
	 -webkit-border-radius:10px;-moz-border-radius:10px;
	border-radius:10px;
	box-shadow:8px 8px 8px gray ;
	-moz-box-shadow:8px 8px 8px gray ;
	-webkit-box-shadow:8px 8px 8px gray ;
	height: 150px;
	padding: 2px 2px 2px 2px;
}

.zonetext
{
	width :100%;
	
}

.zonetext2
{
	width :60%;
}
/* On définit les marges haute et basse à 10px et les marges droite et gauche à 0 */
/* On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
/* On utilise text-align: center ; pour Internet Explorer, 
c'est la seule façon de centrer les éléments de type block avec ce navigateur */

div#conteneur
{
	width: 1600px ;
	margin: 0 auto ;
	text-align: left ;
	border: 4px solid #0B3162 ;
	background: #fff ;
	border-radius: 50px 50px 50px 50px;
	}




/* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */
/* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type
 block (comme les divisions), nous centrons donc cette division */
/* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */

 h1#header
{
	height: 200px ;
	background: url(images/avatar_theodora_small.png) no-repeat left top;
	margin: 0 ;
    padding-left: 10px;
}
h1#header a
{
	width: 242px ;
	height: 150px ;
	display: block ;
	background: url(images/titre_defiwebflash_small.png) no-repeat;
	position: relative ;
	left: 760px ;
	top: 2px ;
	text-indent: -5000px ;
}
div#contenu
{
	padding: 0 20px 0 20px ;
	background: #fff;
	max-height: 4000px;
	border-radius: 40px 40px 40px 40px;

	
}

div#message h1
{
font-family:'galetteregular';	
	padding: 5px ;
	margin-left: 30px;
	line-height: 25px ;
	font-size: 3em ;
	color: white ;
	text-align: left;
    
}
div#message1 fieldset
{
	width: 95%;
	
}
div#message1 form
{
	width:71%;
	background-color:rgb(255,255,255,0.2);
}
div#message1 legend
{
	font-size: 1.8em;
	font-weight:1000; 
}
div#contenu1
{
	
	background: #fff;
	max-height: 4000px;
	width : 30%;
	margin-left: 15px;
	margin-top:15px;
	margin-bottom: 15px;
	height : 90%;
}
div#contenu2
{
	font-family:'machine';
}

div#conteneur1
{
	
	margin: 0 auto ;
	text-align: left ;
	border: 4px solid #0B3162 ;
	background: #fff ;
	border-radius: 50px 50px 50px 50px;
	display : flex;
	
	}

	div#contenu1 h2
{
	font-family:'galetteregular';	
	padding: 5px ;
	line-height: 25px ;
	font-size: 1.8em ;
	color: #151D19 ;
    /* outline: 3px dotted #0B3162; */
	background:linear-gradient(#d3cfcf,#d3cfcf);
	border-radius:5px;
	box-shadow:2px 2px 5px gray ;
	-moz-box-shadow:2px 2px 5px gray ;
	-webkit-box-shadow:2px 2px 5px gray ;
}
div#contenu1 h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 3px dotted  #aaaaaa;
	border-left: 3px dotted #aaaaaa;
	color:  #4d1649;
}
div#contenu1 p
{
	text-align: justify ;
	line-height: 1.7em ;
    font-size: 1.7em;
}
div#contenu1 a
{
	font-family:'galetteregular';	
	color: #0B3162 ;
/*	font-size: 1.2em; */
}

div#contenu1 a:hover
{
	color: #526375;
}

div#contenu h2
{
	font-family:'galetteregular';	
	padding: 5px ;
	line-height: 25px ;
	font-size: 1.8em ;
	color: #B40A0A ;
    /* outline: 3px dotted #0B3162; */
	background:linear-gradient(#d3cfcf,#d3cfcf);
	border-radius:5px;
	box-shadow:2px 2px 5px gray ;
	-moz-box-shadow:2px 2px 5px gray ;
	-webkit-box-shadow:2px 2px 5px gray ;
}
div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	
	color:  #4d1649;
}

.galerie figure {
    text-align: center;
}

.galerie figcaption {
    margin-top: 5px;
    font-size: 22px;
    font-weight: bold;
    color: black; /* ou une autre couleur selon ton fond */
}


.galerie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.galerie img {
    width: 180px;          /* taille des miniatures */
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.2s;
}

.galerie img:hover {
    transform: scale(1.05);
}

/* Fenêtre modale */
#lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
}

#lightbox img {
    display: block;
    max-width: 90%;
    max-height: 90%;
    margin: 5% auto;
    border-radius: 10px;
}

div#contenu p
{
	text-align: justify ;
	line-height: 1.7em ;
    font-size: 1.6em;
}
div#contenu a
{
	font-family:'galetteregular';	
	color: #0B3162 ;
/*	font-size: 1.2em; */
}

div#contenu a:hover
{
	color: #526375;
}





.vrai {
    color: green;
    font-weight: bold;
}
.faux {
    color: red;
    font-weight: bold;
}

p#footer
{
    width:1000px;
	margin:0;
	padding-right: 10px ;
    padding-bottom: 10px;
	line-height: 30px ;
	text-align: right;
	color: #9e5d00 ;
	display:inline-block;
    
}

ul#menu
{
	height: 35px ;
	margin: 0 ;
	padding: 0 ;
	background: url(bg_menu.gif) repeat-x 0 -25px ;
	list-style-type: none ;
}
ul#menu li
{
	float: left ;
	text-align: center ;
}
ul#menu li a
{
	width: 130px ;
	line-height: 25px ;
	font-size: 1.2em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	border-right: 2px solid #ffcc33 ;
}
ul#menu li a:hover
{
	background: url(bg_menu.gif) repeat-x 0 0 ;
}

.digicode {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            gap: 10px;
            justify-content: center;
            align-items: center;
        }

.bouton {
			width: 300px;
            height: 50px;
            font-size: 20px;
            font-weight: bold;
            color: #425b8a;
            cursor: pointer;
           
			

}

.digicode button {

            width: 100px;
            height: 100px;
            font-size: 60px;
            font-weight: bold;
            color: #425b8a;
            cursor: pointer;
            border: 2px solid #4d4d4d;
			border-radius:10px 10px 10px 10px;
			-moz-border-radius:10px 10px 10px 10px;
			-webkit-border-radius:10px 10px 10px 10px;
			background-image: url(fond_digi.png);

        }
#output {
            margin-top: 20px;
            font-weight: bold;
            grid-column: 2; /* Place le message sur la deuxième colonne */
    text-align: center; /* Centre le texte */
    color: orange; /* Couleur orange */
    font-size: 30px; /* Taille de police plus grande */
        }
#titre{
            color: lightgrey;
        }
#input1{
            height: 50px;
            margin-bottom: 10px;
            text-align: center;
            font-family: calibri;
            font-size: 1.5em;
        }

.activite{
    width: 1400px;
	background-color: lightgrey;
	margin-left: auto;
	margin-right: auto;
	padding: 0.5em 10px;
	quotes: "\201C""\201D""\2018""\2019";
	position:relative;
	margin-bottom: 10px;
	font-size: 2em;
	border: 2px solid #4d4d4d;
	border-radius:10px 10px 10px 10px;
	-moz-border-radius:10px 10px 10px 10px;
	-webkit-border-radius:10px 10px 10px 10px;
	box-shadow:4px 4px 10px black inset;
-moz-box-shadow:4px 4px 10px black inset;
-webkit-box-shadow:4px 4px 10px black inset;
}

.activiteleo{
    width: 1400px;
	background-color: lightgrey;
	margin: 1.5em 10px;
	padding: 0.5em 10px;
	quotes: "\201C""\201D""\2018""\2019";
	position:relative;
	margin-bottom: 10px;
	font-size: 1.8em;
	border: 2px solid #4d4d4d;
	border-radius:10px 10px 10px 10px;
	-moz-border-radius:10px 10px 10px 10px;
	-webkit-border-radius:10px 10px 10px 10px;
}

.activite:after {
    content: url(images/element_etoile1_mini.png);
    bottom:  0px;
    right: -80px;
    position: absolute;
    z-index: 1;
}


.activite01{
    width: 600px;
	background: url(images/fondhiero.jpg);
	margin: 1.5em 10px;
	padding: 0.5em 10px;
	padding-bottom: 10px;
	quotes: "\201C""\201D""\2018""\2019";
	position:relative;
	margin-bottom: 10px;
	font-size: 1.3em;
	border: 2px solid #4d4d4d;
	border-radius:10px 10px 10px 10px;
	box-shadow:2px 2px 20px gray ;
	-moz-border-radius:10px 10px 10px 10px;
	-webkit-border-radius:10px 10px 10px 10px;
}
.activite01:after {
    content: url(images/element_lamabis.png);
    bottom:  0px;
    right: -90px;
    position: absolute;
    z-index: 1;
}

.essai:hover{
animation:  rotathl 2s linear ;
}



img.brique {
    position: absolute;
    top : 44.5%;
    left : 80%;
    z-index: 110;
    }
img.brique:hover {
  transform: translate(21px, 0px);
   
}

.pyramide {
    position : absolute;
 margin: auto;
   

}

@keyframes rotathl {
  0% {transform: perspective(2000px) rotate3d(1,-0,0,360deg);}
  100% {transform: perspective(2000px) rotate3d(-1,0,0,0deg);}
}

.effet_ombre {

	-webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.2s;
}

.effet_ombre:hover {
	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.8);
}

.activite1{
    width: 700px;
	background: url(images/fondhiero.jpg);
	margin: 1.5em 10px;
	padding: 0.5em 10px;
	quotes: "\201C""\201D""\2018""\2019";
	position:relative;
	margin-bottom: 10px;
	font-size: 1.3em;
	border: 2px solid #4d4d4d;
	border-radius:10px 10px 10px 10px;
	-moz-border-radius:10px 10px 10px 10px;
	-webkit-border-radius:10px 10px 10px 10px;
}
.activite1:after {
    content: url(images/element_groumpf_coucou3.png);
    bottom:  0px;
    right: -64px;
    position: absolute;
    z-index: 1;
}

.activite2{
    width: 600px;
	background: url(images/fondhiero.jpg);
	margin: 1.5em 10px;
	padding: 0.5em 10px;
	quotes: "\201C""\201D""\2018""\2019";
	position:relative;
	margin-bottom: 10px;
	font-size: 1.1em;
	border: 2px solid #4d4d4d;
	border-radius:10px 10px 10px 10px;
	-moz-border-radius:10px 10px 10px 10px;
	-webkit-border-radius:10px 10px 10px 10px;
}
.activite2:after {
    content: url(images/element_groumpf_coucou2.png);
    bottom:  0px;
    right: -95px;
    position: absolute;
    z-index: 1;
}

.aide
{
	font-size: 1.2em;
	
	/*border-bottom: 2px solid #d40000;*/
	margin-left : 20px ;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 0.5em 10px;
	position:relative;
}
.aide:before {
	content: url(images/aide.png);
	top:5px;
	left:-12px;
	position:absolute
	}
.persotexte {
	position: relative;
	padding-left: 20px;
	width: 580px;
	height: 80px;
	padding-right: 300px;	
	font-size: 1.2em ;
//	font-weight: bold ;
}

.persotexte2 {
	position: relative;
	padding-left: 20px;
	width: 580px;
	height: 350px;
	padding-right: 300px;	
	font-size: 1.2em ;
//	font-weight: bold ;
}
.video
{
	border:6px solid #964e4e; 
	padding-top : 70px;
	padding-left : 10px;
	padding-right : 10px;
	padding-bottom : 10px;
	background:  url(images/theodule_tv.png) no-repeat top ;
	-webkit-border-radius:10px;-moz-border-radius:10px;
	border-radius:10px;
	box-shadow:3px 3px 15px gray ;
	-moz-box-shadow:2px 2px 10px gray ;
	-webkit-box-shadow:2px 2px 10px gray ;
	width:580px;
	margin: 0 auto ;
	}
.video2
{
	border:6px solid #964e4e; 
	padding-top : 70px;
	padding-left : 10px;
	padding-right : 10px;
	padding-bottom : 10px;
	
	-webkit-border-radius:10px;-moz-border-radius:10px;
	border-radius:10px;
	box-shadow:1px 1px 10px gray ;
	-moz-box-shadow:2px 2px 10px gray ;
	-webkit-box-shadow:2px 2px 10px gray ;
	width:580px;
	margin: 0 auto ;
	}
.perso {
	position: relative;
	top: 0px;
	right: 550px;
	width: 250px;
}

.objet {
	float: right;
	z-index: 2;
    padding-right: 30px;
    padding-top: 5px;
}
.objet2 {
	float: right;
    padding: 10px;
/*    color: #fa980f; */
    font-size: 1.2em ;
    width: 200px;
    border: 3px solid #B40A0A;
    background: #d3d1d1;
    margin-left: 15px;
    -webkit-border-radius:10px;-moz-border-radius:10px;
	border-radius:10px;
}

.cadre1 {
	position: relative;
	top: 10px;
	left: 70px;
}
.cadre2 {
	position: relative;
	top: -20px;
	left: 210px;
}
.cadre3 {
	position: relative;
	top: -230px;
	left: 415px;
}
.cadre4 {
	position: relative;
	top: -620px;
	left: 550px;
}

.ombre {
border:1px solid #3b630b;
padding:2px;
display: block; 
margin: 0 auto;
box-shadow:1px 1px 10px gray ;
-moz-box-shadow:2px 2px 10px gray ;
-webkit-box-shadow:2px 2px 10px gray ;
}

.question
{      font-size: 1.3em ;
    	color:#4671a3;
}

.perso1 {
	position: absolute;
	top: 50px;
	left: 350px;
}

.envoi{
    padding: 10px;
    
/*    color: #fa980f; */
    font-size: 1.7em ;
    width: 900px;
    border: 3px solid #B40A0A;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    /*margin-left: 15px;
    margin-top: 20px;*/
    -webkit-border-radius:10px;-moz-border-radius:10px;
	border-radius:10px;
	box-shadow:8px 8px 8px gray ;
	-moz-box-shadow:8px 8px 8px gray ;
	-webkit-box-shadow:8px 8px 8px gray ;
}

/*.envoimess 
{
	 -webkit-border-radius:10px;-moz-border-radius:10px;
	border-radius:10px;
	box-shadow:8px 8px 8px gray ;
	-moz-box-shadow:8px 8px 8px gray ;
	-webkit-box-shadow:8px 8px 8px gray ;
}*/
/* infobulle */
a.info {
   position: relative;
   color: black;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* On souligne le texte. */
}

a.info span {
   display: none; /* On masque l'infobulle. */
}

a.info:hover {
   background: none; /* Correction d'un bug d'Internet Explorer. */
   z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
   cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}

a.info:hover span {
   display: inline; /* On affiche l'infobulle. */
   position: absolute;
   white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */
   top: -40px; /* On positionne notre infobulle. */
   left: 60px;
   background: white;
   color: darkblue;
   padding: 3px;
   border: 1px solid darkblue;
    border-radius: 1em;
    box-shadow: black 0.5em 0.5em 0.3em;
   border-left: 4px solid darkblue;
}

.meteo{
	display: block;
	margin: auto;
}

.arbre{
	display: block;
	margin: auto;
}

pre span
{
	color: #560 ;
}
/* Couleur de texte des éléments compris dans des span
 eux mêmes compris dans un pre */

pre span.comment
{
	color: #b30000 ;
}

/* On définit la hauteur de la partie header, contenant le titre du site */

pre
{
	overflow: auto ;
}

/* En passant on définit l'overflow de la balise pre à auto pour
 permettre d'afficher des barres de défilement si le texte contenu
  dans cette balise est trop grand */

/* On doit donner une largeur au <pre> à cause d'Internet Explorer, 
on ne va donc l'appliquer qu'à Internet Explorer en utilisant le 
 commentaire conditionnel suivant, à placer dans la partie HTML, 
 et plus précisément dans l'élément <head> : */
<!--[if IE]>
 <style type="text/css">
 html pre
{
	width: 636px ;
}

 /* image foot*/
 .cc{
	display: block;
	margin: auto;
}
 
.acad{
	/*margin-left:10px;*/
    float:left; 
    margin:0 10px 0 20px;
}
/* Icones pied de page */
#footer-logos {
    text-align: center;
    }
#footer-logos li {
    display: inline;
}
#footer-logos a img {
 opacity: 0.25;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#footer-logos a:hover img,
#footer-logos a:focus img {
    opacity: 0.6;
}
 
<![endif]-->

.texte {
	font-size: 1.2em;
	
	/*border-bottom: 2px solid #d40000;*/
	margin-left : 30px ;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 0.5em 10px;
	position:relative;
}

.guide {
	float: right;
	margin: 0 ;
	padding: 10px;
}
/* Player Vidéo */
.player {
	background: #2a2a2a;
	box-sizing: border-box;
	border-radius: 5px;
	height: 70px;
	-moz-box-sizing: border-box;
	float: left;
	font-family: Arial, sans-serif;
	position: absolute;
	padding: 0;
	bottom: 20px;
	z-index: 2;
	opacity: 1;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	-webkit-transition: opacity 0.3s ease-in;
	transition: opacity 0.3s ease-in;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.video {
	position: relative;
	margin: 0px auto;
}

.video:hover .player {
	opacity: 1;
}

.player .progress {
	width: 60%;
	height: 20px;
	border-radius: 5px;
	background: #676767;
	box-shadow: inset 0 -5px 10px rgba(0,0,0,0.1);
	float: left;
	cursor: pointer;
	margin: 24px 0 0 0;
	padding: 0;
	position: relative;
	font-variant: normal;
}

.player .progress-bar {
	background: #33b5d5;
	box-shadow: inset -30px 0px 69px -20px #89f6f5;
	border-radius: 5px;
	height: 100%;
	position: relative;
	z-index: 999;
	width: 0;
}

.player .button-holder {
	position: relative;
	left: 10px;
}

.player .progress-button {
	background: #fff;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	border-radius: 30px;
	width: 20px;
	height: 20px;
	position: absolute;
	left: -20px;
	text-decoration: overline;
}


.player [class^="buffered"] {
	background: rgba(255,255,255,0.1);
	position: absolute;
	top: 0;
	left: 30px;
	height: 100%;
	border-radius: 5px;
	z-index: 1;
}

.player .play-pause {
	display: inline-block;
	font-size: 3em;
	float: left;
	text-shadow: 0 0 0 #fff;
	color: rgba(255,255,255,0.8);
	width: 10%;
	padding: 17px 0 0 3%;
	cursor: pointer;
	font-variant: small-caps;
}

.player .play, .player .pause-button {
	-webkit-transition: all 0.2s ease-out;
}

.player .play .pause-button, .player .pause .play-button {
	display: none;
}

.player .pause-button {
	padding: 5px 2px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	height: 34px;
}

.player .pause-button span {
	background: #fff;
	width: 8px;
	height: 24px;
	float: left;
	display: block;
}

.player .pause-button span:first-of-type {
	margin: 0 4px 0 0;
}

.player .time {
	color: #fff;
	font-weight: bold;
	font-size: 1.2em;
	position: absolute;
	right: 0;
	top: 24px;
}

.player .stime, .ttime {
	color: #444;
}
.player .play:hover {
	text-shadow: 0 0 5px #fff;
}

.player .play:active, .pause-button:active span {
	text-shadow: 0 0 7px #fff;
}


.player .pause-button:hover span {
	box-shadow: 0 0 5px #fff;
} .player .pause-button:active span {
	box-shadow: 0 0 7px #fff;
}


.player .volume {
	position: relative;
	float: left;
	width: 8%;
	margin: 0 0 0 4%;
	height: 100%;
}

.player .volume-icon {
	padding: 1.5%;
	height: 100%;
	cursor: pointer;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-transition: all 0.15s linear;
}

.player .volume-icon-hover {
	background-color: #4f4f4f;
}

.player .volume-holder {
	height: 100px;
	width: 100%;
	background: black;
	position: absolute;
	display: none;
	background: #4f4f4f;
	left: 0;
	border-radius: 5px 5px 0 0;
	top: -100px;
}

.player .volume-bar-holder {
	background: #333;
	width: 20px;
	box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);
	margin: 15px auto;
	height: 80px;
	border-radius: 5px;
	position: relative;
	cursor: pointer;
}

.player .volume-button {
	background: #fff;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	border-radius: 30px;
	width: 20px;
	height: 20px;
}

.player .volume-button-holder {
	position: relative;
	top: -10px;	
}

.player .volume-bar {
	background: #33b5d5;
	box-shadow: inset -30px 0px 69px -20px #89f6f5;
	border-radius: 5px;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
}

.player .fullscreen {
	width: 12%;
	cursor: pointer;
	float: left;
	height: 100%;
}

.player .fullscreen a {
	width: 25px;
	height: 20px;
	border-radius: 3px;
	background: #fff;
	display: block;
	position: relative;
	top: 23px;
	margin: 0px auto;
}

.player .volume-icon span {
	width: 20%;
	height: 13%;
	background-color: #fff;
	display: block;
	position: relative;
	z-index: 1;
	font-weight: bold;
	top: 40%;
	color: #fff;
	left: 22%;
}

.player .volume-icon span:before,
.player .volume-icon span:after {
	content: '';
	position: absolute;
}
.player .volume-icon span:before {
	width: 0;
	height: 0;
	border: 1em solid transparent;
	border-left: none;
	border-right-color: #fff;
	z-index: 2;
	top: -2px;
	left: 10%;
	margin-top: -40%;
}
.player .volume-icon span:after {
	width: 2%;
	height: 2%;
	border: 1px solid #fff;
	left: 190%;
	border-width: 0px 0px 0 0; 
	top: 5px;
	border-radius: 0 50px 0 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	 transform: rotate(45deg);
	 font-variant: small-caps;
 }

.player .v-change-11 span:after { border-width: 10px 10px 0 0; top: 0; }
.player .v-change-10 span:after { border-width: 9px 9px 0 0; top: 1px; }
.player .v-change-9 span:after { border-width: 8px 8px 0 0; top: 1px; }
.player .v-change-8 span:after { border-width: 7px 7px 0 0; top: 2px; }
.player .v-change-7 span:after { border-width: 6px 6px 0 0; top: 2px; }
.player .v-change-6 span:after { border-width: 5px 5px 0 0; top: 3px; }
.player .v-change-5 span:after { border-width: 4px 4px 0 0; top: 3px; }
.player .v-change-4 span:after { border-width: 3px 3px 0 0; top: 4px; }
.player .v-change-3 span:after { border-width: 2px 2px 0 0; top: 4px; }
.player .v-change-2 span:after { border-width: 1px 1px 0 0; top: 5px; }
.player .v-change-1 span:after { border-width: 0px 0px 0 0; top: 5px; }

.player .v-change-1 span:after {
	content: '+';
	-webkit-transform: rotate(45deg);
	font-size: 20px;
	top: -6px;
	left: 25px;
}

/* ------- IGNORE 

#header {
	width: 100%;
	margin: 0px auto;
}

#header #center {
	text-align: center;
}

#header h1 span {
	color: #000;
	display: block;
	font-size: 50px;
}

#header p {
	font-family: 'Georgia', serif;
}
#header h1 {
	color: #892dbf;
	font: bold 40px 'Bree Serif', serif;
} */

#travel {
	padding: 10px;
	background: rgba(0,0,0,0.6);
	border-bottom: 2px solid rgba(0,0,0,0.2);
	font-variant: normal;
	text-decoration: none;
}

#travel a {
	font-family: 'Georgia', serif;
	text-decoration: none;
	border-bottom: 1px solid #f9f9f9;
	font-size: 20px;
	color: #f9f9f9;
}