@charset "UTF-8";
/* CSS Document */


/******************************************************************
******************************************************************
NE PAS MODIFIER / CES LIGNES ENLEVENT LES PADDING ET MARGIN AJOUTÉS
AUTOMATIQUEMENT PAR LE FICHIER NORMALIZE.CSS
******************************************************************
******************************************************************/

/*retire les padding et margin */
aside, section, article, footer, header, div, p, h1, h2, h3, h4, h5, h6, ol, ul, li, figure { padding:0; margin:0; }

/******************************************************************
******************************************************************
CSS PRÉDÉFINIES
******************************************************************
******************************************************************/

/* les images ne seront jamais plus grandes que le contenant <figure> qui les contient */
img { max-width:100%; height: auto;}

/* ajoutez cette classe si il n'y a qu'une seule image */
/* dans le <figure> et qu'un espace fin apparait sous l'image */
/* par exemple <img class="no-border-down" src="..." */
img.no-border-down { display:block;} 

/* dans le cas où le float est requis */
div.pousse { clear:both; width:0; height:0; overflow:hidden;}

/* polices par défaut */
body { font-family: Helvetica, Arial, sans-serif; }

/* retire le gras par défaut des titres */
h1, h2, h3, h4, h5, h6 { font-weight: 400;}

/******************************************************************
******************************************************************
COLONNES FLEX
******************************************************************
******************************************************************/

/* CONTENEUR */
.conteneur-flex { display:flex; } /* ceci rendra automatiquement les éléments de ce conteneur sur la même ligne */

/* GRILLE 2 COLONNES */
.col50 { width: 50%; box-sizing: border-box; /* ceci signifie que la largeur totale de l'objet incluera les padding/margin/border */ }

/* GRILLE 3  COLONNES */
.col33 { width: 33.3333333%; box-sizing: border-box; /* ceci signifie que la largeur totale de l'objet incluera les padding/margin/border */ }

/* GRILLE 4 COLONNES */
.col25 { width: 25%; box-sizing: border-box; /* ceci signifie que la largeur totale de l'objet incluera les padding/margin/border */ }

/* GRILLE 5  COLONNES */
.col20 { width: 20%; box-sizing: border-box; /* ceci signifie que la largeur totale de l'objet incluera les padding/margin/border */ }

/* COMPLEMENT DE GRILLE */
.col80 { width: 80%; box-sizing: border-box; /* ceci signifie que la largeur totale de l'objet incluera les padding/margin/border */ }
.col75 { width: 75%; box-sizing: border-box; /* ceci signifie que la largeur totale de l'objet incluera les padding/margin/border */ }
.col66 { width: 66.6666666%; box-sizing: border-box; /* ceci signifie que la largeur totale de l'objet incluera les padding/margin/border */ }


/******************************************************************
******************************************************************
/* TAILLES TEXTES ADAPTATIFS À AJUSTER SELON LES POLICES UTLISÉES */
/* TAILLES TEXTES ADAPTATIFS À AJUSTER SELON LES POLICES UTLISÉES */
/* TAILLES TEXTES ADAPTATIFS À AJUSTER SELON LES POLICES UTLISÉES */
/******************************************************************
******************************************************************/

body { font-size:1.5vw;
	
}  

/*********************** ÉLÉMENTS CACHÉS SUR DESKTOP ***************************/

.mobile { display: none;}





/************************************************************************************************************************************
/************************************************************************************************************************************
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
/************************************************************************************************************************************
************************************************************************************************************************************/


body {
	
	background-color: white;
	font-family: Raleway, sans-serif;
	font-weight: 300;
	color: #333333;
	font-size: 100%;
	text-align: right;

}


::-moz-selection { 
  color: #40FFE1;
  background: #0a19c7;
}


::selection {
  color: #40FFE1;
  background: #0a19c7;
}


/****************************************************************/
/*****************************TITRES*****************************/
/****************************************************************/

h1 {
	font-weight:100;
	text-transform:uppercase;
	font-size:300%;
	margin:0 0 20px 0;
}

h2 {
	
	text-align: left;
	text-transform:uppercase;
	color: #10D1C1;
	font-weight:700;
	font-size:250%;
	margin:0 0 20px 0;
}


/****************************************************************/
/*****************************NAV********************************/
/****************************************************************/




nav {
	
	
	text-align: left;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100000;
	box-shadow: 0px 5px 4px rgba(0, 0, 0, .2);
	
	
}



nav i {
	
	text-align: right;
	color: black;
	padding-left: 10px;
	/*truc de classe pour kil apparaisse pa sur buro nn ?*/ 
}

nav ul {
	
	padding: 20px;
	list-style-type: none;
	background-color: white;

	
}

nav ul li {
	
	margin: 0 10px 0 0;
	text-transform: uppercase;
	display: inline;
}


nav ul li a {
	
	text-decoration: none;
	color: black;
}


/****************************************************************/
/*****************************HEADER*****************************/
/****************************************************************/


header {
	
	height: 100vh;
	margin-top: 60px;
	
	
	

}


header h1 {
	
	color: #FFE716;
	text-align: left;
	padding: 30px;

	
}


header h1 span {
		font-weight: 700;
}

header #videobgo {
	
	min-width: 100%;
	min-height: 100%;
	position: fixed;
	right: 0;
	top: 0;
	z-index: -1;
	background-color: aquamarine;
	


	
}






/****************************************************************/
/*****************************DEMOREEL***************************/
/****************************************************************/



section.demoreel {
	
	
	
	height: 60vh;
	padding: 80px;
	background-color: #FFE716;

	
	
}





/****************************************************************/
/*****************************PROJETS****************************/
/****************************************************************/






	
div.fotorama {
	
	
	
	text-align: center;
	margin: 0;
	

	

}

div.fotorama__select {
	
	text-align: left;
	padding: 20px;
	color: black;
	
	
}



div.fotorama__select:hover {
	
	
	background-color: palegreen;
	
}




section.projets {
	
	height: 100vh;
	padding: 80px;
	background-color: #0a19c7;
	
}


/****************************************************************/
/*****************************PORTRAIT***************************/
/****************************************************************/



section.portrait {
	
	
	height: 100vh;
	padding: 80px;
	background-color: white;

}

section.portrait p {
	
	line-height: 1.3 ;
	color: black;
	text-align: left;
	width: 50vw;
	
	


	

}


section.portrait figure {
	
	text-align: center;
	

}



/****************************************************************/
/*****************************CONTACT****************************/
/****************************************************************/


	


section.contact {
	
	height: 30vh;
	padding: 80px;
	background-color: black;
	text-align: right;
	
	
	
	
}

section.contact p {
	
	text-align: left;
	width: 50%;
	color: white;
}

section.contact #bo {
	
	text-align: left;
	font-weight: 700;
	color: #16e1e0;
}



/****************************************************************/
/*****************************FOOTER*****************************/
/****************************************************************/

footer {
	
	
	background-color: #16e1e0;
	padding: 20px;
	text-align: center;

	
	
}


footer p {
	padding-top: 10px;
	color: white;
}





/****************************************************************/
/*****************************SECTIONS***************************/
/****************************************************************/



/**************************************************************
SCENARIO MOBILE/JQUERY
SCENARIO MOBILE/JQUERY
SCENARIO MOBILE/JQUERY
SCENARIO MOBILE/JQUERY
*************************************************************/

header h1 {
	
	display: none;
	
}



/**************************************************************
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
*************************************************************/


@media screen and (max-width: 680px) { 
    
    /* ne pas modifier */
    body { font-size:16px; } 
    h1 { font-size:48px; }
    h2 { font-size:36px; }
    h3 { font-size:24px; }
    h4 { font-size:20px; }
    h5 { font-size:18px; }
    h6 { font-size:16px; }
    /* ne pas modifier */
    
    /* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */

    body {
        background-color: white;
		
    }
    
    .desktop {
		display: none;
	}

	.mobile {
	display: block;
}
	
/****************************************************************/
/*****************************NAV***************************/
/****************************************************************/
	
	
	

	
	nav ul li {
	display: block;
	
}
	
	
nav i {
		
		color: #00CCA9;
		cursor: pointer;
	}

	
	
/****************************************************************/
/*****************************HEADER*****************************/
/****************************************************************/


header {
	
	height: 100vh;
	margin-top: 30px;
	background-image: url(images/CellFondHeader.jpg);
	background-color: #00CCA9;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;

}

/*
header h1 {
	
	color: #FFE716;
	text-align: left;
	padding: 30px;

	
}*/


/*header h1 span {
		font-weight: 700;
}
*/
	
/*header #videobgo {
	
	min-width: 100%;
	min-height: 100%;
	position: fixed;
	right: 0;
	top: 0;
	z-index: -1;
	background-color: aquamarine;

}
*/
	
	

	
	/* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */
}



/******************************************************************
******************************************************************
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
******************************************************************
******************************************************************/


@media screen and (min-width:681px) and (max-width: 1024px) { 
    
    /* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */

    body {

    }
	
	
    
    
	/* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */
}