/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/* RESET CSS */
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-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html,
body,
#pageID {
  height: 100%;
  margin: 0;
  padding: 0;
}
.ui-content {
  padding: 0;

}
.ui-content,
.ui-content #full-height {
	height: inherit; /* the trick */
}

#full-height {
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:fixed;
	
	-webkit-background-size:100% 100%;
	-moz-background-size:100% 100%;
	-o-background-size:100% 100%;
	background-size:100% 100%;
		
	-webkit-background-size:contain;
	-moz-background-size:contain;
	-o-background-size:contain;
	background-size:contain;

}


html {
  font-size: 100%;
 }
/* WRAPPER */
.globale
{width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}


/* VIDEO */

#player
{width: 100%;
height: 100%;}


/* TEXT */
.textStyle
{display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
border: 2px solid black;
max-width: 35%;
max-height: 5%;
border-radius: 15px;
padding: 0.5% 1.5%;}

.text-ts
{max-width: 75%;
max-height: 10%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
border: 2px solid black;
border-radius: 15px;
padding: 0.5% 1.5%;}

.txt-img
{
	display: block;
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:fixed;
	border: none;
	width: 100%;
	height: 100%;
}


  /* SNACKBAR */
  .show
  {
	  max-width : 35vw;
	  max-height: 10px;
	  background-color: #333333;
	  color: #ffffff;
	  display: flex;
	  align-items:center;
	  justify-content: center;
	  border-radius: 30px;
	  padding: 2%;
	  position: fixed;
	  z-index: 3;
	  left: 40%;
	  bottom: 30px;
	  font-size: 20px;
	  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	  animation: fadein 0.5s, fadeout 0.5s 2.5s;

  }


  @-webkit-keyframes fadein
  {
	  from{bottom : 0; opacity: 0;}
	  to{bottom:30px; opacity:1}
  }
  @keyframes fadein
  {
	  from{bottom : 0; opacity: 0;}
	  to{bottom:30px; opacity:1}
  }

  @-webkit-keyframes fadeout
  {
	  from{ opacity: 1;}
	  to{ opacity:0}
  }
  @keyframes fadeout
  {
	from{ opacity: 1;}
	to{opacity:0}
  }




/*BRIGHTNESS SLIDER*/

 .container
{
	height: 100vh;
display: none;
align-items: center;
justify-content: center;} 

.brightness-box
{width: 400px;
height: 60px;
background-color:#f9f9f9;
border-radius: 8px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}

.sun
{font-size: 0.3rem; /*voir pour la couleur du unicode */
} 

#range 
{width: 100%;
-webkit-appearance: none; /*A verifier sur tous les navigateurs, devrait normalement afficher le comportement par défaut */
background-color: #0a85ff;
height: 3px;
outline: none;
}

#range::-webkit-slider-thumb  
/*vérifier les problèmes de compatibilité*/
 {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #333333;
	cursor: pointer;
}  


/* FORMULAIRE */


.wrapFormu
{display: flex;
	justify-content: center;
	align-items: center;
}

#formu
{
border: 1px solid black;
box-shadow: 4px 3px 3px darkslategray;
max-height: 75vh;
width: 90vw;
font-family: 'Roboto', sans-serif;
font-size: 13px;
background-color: white;
}



#titleQuestion
{font-size: 17px;
	font-family: 'Roboto', sans-serif;
	padding: 3% 0 3% 2%;
}

#radio
{margin: 1% 4% 3% 3%}

.submit-cancel
{display: flex;
justify-content: flex-end;}

.btn-lg
{color: #ff3d3d;
background-color: transparent;
border: 0px solid transparent;
margin: 2% 4% 4% 0;
font-weight: 800;
}
.freeText
{width: 88vw;
margin: 0 1%;
border-top: transparent;
border-left: transparent;
border-right: transparent;
border-bottom: 2px solid #ff3d3d;;}






/* MEDIAQUERIES */
  
@media screen and (max-width: 1280px)
{
	html {
	    font-size: 4em;
	}
	.show, .textStyle
	{
		font-size: 12px;
	}

	#formu
	{
	max-height: 45vh;
	width: 90vw;
	}

	#radio
	{margin: 6% 4% 3% 3%}
}
@media screen and (max-width: 400px)
{

	.show, .textStyle
	{
		font-size: 10px;
	}
}
@media screen and (max-width: 350px)
{

	.show, .textStyle
	{
		font-size: 8px;
	}
}