@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');



* {box-sizing: border-box;}



html, body {

	height: 100%;

	margin: 0;

    padding: 0;

}



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



body {

    font-family: "Open Sans", sans-serif;

    background: #f3f3f3;

}



/* fade-in */

body {opacity: 0; transition: none;}

body.fade-in {opacity: 1; transition: 0.6s opacity ease-out;}



#main-wrapper {

    width: 32%;

    margin: 0 auto;

    padding-top: 5%;

}



#title {

    display: flex;

    justify-content: center;

    align-items: center;

}



#title #logo {

    width: 75px;

    margin: 15px 15px 15px 0;

}



h1 {

   font-size: 3.5em;

}



#main-wrapper > p {

    font-size: 1.4em;

    margin: 1em auto 2em;

    line-height: 170%;

    text-align: center;

}



#form-wrapper {

    background-color: #fff;

    border: 1px solid rgba(0, 0, 0, 0.1);

    border-radius: 2px;

    padding: 0 35px;

    max-width: 450px;

    margin: 25px auto;

}



form h2 {

    font-size: 2.2em;

    font-weight: 300;

}



form input[name=username] {border-radius: 4px 4px 0 0}

form input[name=password] {border-radius: 0 0 4px 4px}



form input[name=username], form input[name=password] {

	display: block;

    width: 98%;

    margin: 0 auto;

    line-height: 160%;

    padding: 12px;

    font-size: 1.2em;

    border: 1px solid #ccc;

}



form input[name=username]:invalid, form input[name=password]:invalid {

	border-color: #ccc;

	box-shadow: none;

}



form input[name=username]:focus, form input[name=password]:focus {

	border-color: #66afe9;

	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);

	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);

}



form label, form input[name=connexion] {

    display: block;

    margin: 22px 0;

}



form label input {margin-right: 4px;}



form input[name=connexion] {

	display: block;

    width: 98%;

    margin: 0 auto;

	background-color: #428BCA;

	color: #fff;

	text-align: center;

	padding: 12px;

	outline: none;

	border-radius: 6px;

	border: none;

	cursor: pointer;

	transition: background-color 60ms ease, box-shadow 60ms ease;

    font-size: 1.4em;

    font-weight: 300;

}



form input[name=connexion]:hover {

	background-color: #3276b1; 

}



form input[name=connexion]:active {

	-webkit-box-shadow: inset 0px 0px 30px -10px rgba(0,0,0,0.3);

	-moz-box-shadow: inset 0px 0px 30px -10px rgba(0,0,0,0.3);

	box-shadow: inset 0px 0px 30px -10px rgba(0,0,0,0.3);

}



form input[name=connexion]:hover, form input[name=connexion]:active, form input[name=connexion]:focus, form input[name=connexion]:visited,

form label input, form label input:hover, form label input:active, form label input:focus, form label input:visited {

	outline: none;

}



#form-wrapper > p:last-child {

	text-align: center;

	color: #676767;

	font-size: 0.88em;

	margin: 30px 0;

}



/****** animations ********/



@keyframes shake {

  10%, 90% {

    transform: translate3d(-1px, 0, 0);

  }

  

  20%, 80% {

    transform: translate3d(2px, 0, 0);

  }



  30%, 50%, 70% {

    transform: translate3d(-4px, 0, 0);

  }



  40%, 60% {

    transform: translate3d(4px, 0, 0);

  }

}









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

/* page 2 */

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



#main-wrapper.p2 {

    width: 80%;

    padding-top: 0px;

}



h1.p2 {

    margin-bottom: 12px;

}



p.p2 {

    margin: 8px 0 !important;

}



#shared-video {

    text-align: center;

}



#shared-video {

    display: block;

    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

    border-radius: 4px;

    margin: 0 auto;

}