/* ONBOARDING */
.onboarding-overlay {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(123, 135, 145, 0.7);
	overflow: auto;
	z-index: 3000;
	display: block;
}

#onboarding {
	display: block;
	margin: 0px auto;
	width: 734px;
	position: relative;
}

.onboarding-header {
	background-color: #fbe5a4;
	padding: 6px 0 15px;
	position: relative;
	height: 141px;
}

.onboarding-header h2 {
	font-family: "Roboto";
	text-align: center;
	color: #364656;
	font-size: 28px;
	margin-bottom: 0px;
	margin-top: 10px;
}

.onboarding-header p {
	font-family: "Roboto";
	text-align: center;
	color: #72746c;
	padding: 0 105px;
	margin-top: 10px;
	margin-bottom: 16px;
	font-size: 15px;
	line-height: 20px;
}

.onboarding-header a {
	font-family: "Roboto";
	text-align: center;
	display: block;
	color: #72746c;
	text-decoration: underline;
	font-size: 15px;
}

.onboarding-content {
	background-color: #eff3f6;
	min-height: 415px;
	padding-top: 40px;
}

.onboarding-content img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	max-height: 375px;
}

.wrapper-image {
	text-align: center;
	height: 300px;
	width: 734px;
	display: table-cell;
	vertical-align: middle;
}

#slide1,
#slide2,
#slide3,
#slide4,
#slide5,
#slide6,
#slide7,
#slide8,
#slide9,
#slide10,
#slide11 {
	display: none;
}

#slide1:checked ~ .label-active label:nth-child(1),
#slide2:checked ~ .label-active label:nth-child(2),
#slide3:checked ~ .label-active label:nth-child(3),
#slide4:checked ~ .label-active label:nth-child(4),
#slide5:checked ~ .label-active label:nth-child(5),
#slide6:checked ~ .label-active label:nth-child(6),
#slide7:checked ~ .label-active label:nth-child(7),
#slide8:checked ~ .label-active label:nth-child(8),
#slide9:checked ~ .label-active label:nth-child(9),
#slide10:checked ~ .label-active label:nth-child(10),
#slide11:checked ~ .label-active label:nth-child(11) {
	background: #333;
	border-color: #333 !important;
}

#overflow {
	width: 100%;
	overflow: hidden;
}

#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }
#slide6:checked ~ #slides .inner { margin-left:-500%; }
#slide7:checked ~ #slides .inner { margin-left:-600%; }
#slide8:checked ~ #slides .inner { margin-left:-700%; }
#slide9:checked ~ #slides .inner { margin-left:-800%; }
#slide10:checked ~ #slides .inner { margin-left:-900%; }
#slide11:checked ~ #slides .inner { margin-left:-1000%; }

#slides .inner {
    -webkit-transform: translateZ(0);
    -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
    transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
    width: 1100%;
}

#slides article {
    width: 734px;
    float: left;
    display: block;
}

.label-active {
	position: absolute;
	top: 162px;
	left: 290px;
	z-index: 3010;
}

.label-active label {
	-webkit-transform: translateZ(0);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #bbb;
    cursor: pointer;
}

.onboarding-footer {
	background-color: #ffffff;
	padding: 15px 30px 5px;
	height: 220px;
}

.onboarding-footer h3 {
	font-family: "Roboto";
	margin-top: 0;
	margin-bottom: 10px;
	color: #000000;
	font-size: 18px;
}

.onboarding-footer p {
	font-family: "Roboto";
    margin: 0;
    height: 90px;
    font-size: 16px;
    line-height: 20px;
    color: #000000;
}

.onboarding-footer ul {
	margin: 20px 0 25px 0;
	padding: 0;
	list-style-type: none;
	display: table;
	width: 100%;
}

.resume-list {
	font-family: "Roboto";
}

.resume-list li {
	color: #364656;
	padding-left: 25px;
	position: relative;
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 20px;
}

.resume-list li:after {
	content: '';
	background-image: url('/img/others/check.png');
	width: 15px;
	height: 12px;
	position: absolute;
	left: 0;
	top: 3px;
}

.high-height {
	padding: 60px 80px 30px;
	height: 632px;
}

.back-link {
	font-family: "Roboto";
	float: left;
	color: #72746c;
	line-height: 40px;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

.next-link {
	font-family: "Roboto";
	float: right;
	color: #72746c;
	line-height: 40px;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

.start-link {
	font-family: "Roboto";
	text-align: center;
	color: #72746c;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

.btn-skip-tuto {
	float: right;
	background-color: #82dff4;
	color: #ffffff;
	font-family: "Roboto";
	padding: 10px 25px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 4px;
	margin-left: 20px;
	cursor: pointer;
}

.btn-end {
	display: table;
	background-color: #364656;
	color: #ffffff;
	font-family: "Roboto";
	padding: 14px 35px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 4px;
	margin: 0 auto;
	font-size: 12px;
	font-weight: bold;
}

.onboarding-close {
	background-image: url('/img/tiles/popup-close.png');
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 8px;
    top: 5px;
}

#onboarding-remind {
	background-color: #ffffff;
    position: absolute;
    top: -15px;
    left: 65px;
    border: 3px solid #82dff4;
    padding: 15px;
    width: 300px;
    z-index: 1010;
    opacity: 0;
    transition: none;
}

#onboarding-remind.fadein {
	opacity: 1;
	transition: 1s opacity;
}

#onboarding-remind:after {
	content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #ffffff transparent transparent;
    position: absolute;
    top: 30px;
    left: -13px;
}

#onboarding-remind:before {
	content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #82dff4 transparent transparent;
    position: absolute;
    top: 30px;
    left: -16px;
}

#onboarding-remind p {
	margin: 0;
	text-align: center;
}

.onboarding-remind-close {
	background-image: url('/img/tiles/popup-close.png');
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 8px;
    top: 5px;
}

.parent-onboarding-remind {
	position: absolute;
	height: 60px;
	width: 60px;
	z-index: -100;
}

@media screen and (min-width: 40em) {
	.btn-end {
		color: #ffffff !important;
	}
}