html, body{
	background-color: #f4f4ef;
}

section{
	overflow: none;
}

header{
	box-shadow: 0 5px 15px 0 rgba(46,61,73,.12);
	max-height: 112px;
	padding-left: 16px;
	padding-right: 16px;
	z-index: 10;
	background-color: #FAFAFA;
}

header div{
	font-size: 20px;
	padding-left: 48px;
}

header img{
	width: 100px;
    height: 59px;
    padding-left: 16px;
}

#form_cadastro_interesse{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 112px;
	background-color: #FFF;
	box-shadow: 2px 2px 3px 0 hsla(205,5%,48%,.12);
    /*border: 1px solid #dbe2e8;*/    
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
}

input[type=text],
select,
textarea {
	height: 44px;
	min-height: 44px;
	max-height: 44px;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    border: 1px solid #dbe2e8;
    font-size: 14px;
    box-shadow: 0 2px 2px 0 rgba(46,60,73,.05);
    border-radius: 2px;
    color: #2e3d49;
    margin-bottom: 16px;
    outline: none;
    font-family: 'Roboto', sans-serif;
    color: #607D8B;
}

textarea{ min-height: 150px; padding-top: 16px; }

input[type=text].invalid{
	border: 1px solid #F45;
}


input[type=text].invalid:focus{
	outline: none;
	border: 1px solid #F45;
}

input[type=text]:focus,
textarea:focus{
	outline: none;
	border: 1px solid #02b3e4;
}

select:focus{
	outline: none;
	border: 1px solid #02b3e4;	
}


button{
	outline: none;
	border: none;
	height: 48px;
	min-height: 48px;
	max-height: 48px;
	background-color: #02b3e4;
	color: #FAFAFA;
	border-radius: 3px;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 14px;
	min-width: 200px;
}

button:hover{
	background-color: #148bb1;
}

button.voltar{
	background-color: #E0E0E0;
	color: #424242;
	margin-right: 16px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

button.facebook-button{
	color: #FFF;
    background: url(../img/facebook-background-button.svg);
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6281be), color-stop(100%, #5874ad)); */
    background: -webkit-linear-gradient(top, #6281be, #5874ad);
    text-transform: capitalize;
}

button.facebook-button img{
	width: 8px; 
	height: 15px;
	margin-right: 16px;
	/*margin-top: 8px;*/
}

.load-bar-animation-container{
	position: absolute;
	top: 112px;
	left: 0;
	right: 0;
	height: 5px;
	background-color: #F5F5F5;
	z-index: 9;
	/*display: flex;*/
	flex-direction: row;
	align-items: center;
}

.load-bar-animation-container-actived{
	display: flex;
}

.load-bar-animation-container-unactived{
	display: none;
}

.load-bar-animation-container .bar-animation{
	width: 6%;
	height: 3px;
	background-color: #02b3e4;
	border-radius: 1px;
	animation-name: loadAnimation;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	margin-left: 0px;
}

@keyframes loadAnimation{
	from{
		width: 100px;
		width: 6%;
		margin-left: 0px;
	}
	25%{
		width: 20%;
		margin-left: 40%;
	}
	50%{
		width: 6%;
		margin-left: 94%;
	}
	75%{
		width: 20%;
		margin-left: 40%;
	}
	to{
		width: 6%;
		margin-left: 0px;	
	}
}

/* ---------------------------------------- stepper --------------------------------------------------- */

.stepper-container{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stepper-container .stepper-container-steps{
	height: 48px;
	min-height: 48px;
	max-height: 48px;
	min-width: 700px;
	max-width: 700px;
	display: flex;
	/*background-color: #F45;*/
	flex-direction: row;
	flex: 1;
	align-items: center;
	justify-content: center;
}

.stepper-container .stepper-container-steps .step-line{
	flex: 2;
	height: 1px;
	margin-left: 16px;
	margin-right: 16px;
	background-color: #BDBDBD;
}

.stepper-container .stepper-container-steps .step{
	/*background-color: #F45;*/
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	/*font-weight: bold;*/
	color: #757575;
	/*cursor: pointer;*/
	height: 48px;
	padding-left: 8px;
	padding-right: 8px;
	white-space: nowrap;
}

.stepper-container .stepper-container-steps .step:hover{
	/*background-color: #EEE;*/
}
/*6607*/
.stepper-container .stepper-container-steps .step .step-number{
	width: 16px;
	height: 16px;
	min-width: 16px;
	min-height: 16px;
	max-width: 16px;
	max-height: 16px;
	border-radius: 50%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 1px;
	margin-right: 16px;
	color: #FAFAFA;
	font-size: 14px;
}

.stepper-selected-view{ display: flex; }
.stepper-unselected-view{ display: none; }
.stepper-selected-step{ background-color: rgb(0, 188, 212); }
.stepper-unselected-step{ background-color: #757575; }

.stepper-container .stepper-container-views{
	display: flex;
	flex-direction: column;
	margin-top: 16px;
}

.stepper-container .stepper-container-views .stepper-view{
	flex-direction: column;
}


/* ---------------------------------------- end stepper --------------------------------------------------- */


.segmento-container,
.curso-container{
	height: 400px;
	/*width: 280px;*/
	margin-top: 16px;
	margin-bottom: 8px;
	overflow: hidden;
}

.segmento-container .segmento-container-scroll,
.curso-container .curso-container-scroll{
	position: absolute;
	left: 0;
	right: 0;
	height: 10%;
	height: 400px;
	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 10;
	cursor: move;
	/*background-color: #F5F5F5;*/
}

.segmento-container .segmento-container-scroll .card,
.curso-container .curso-container-scroll .card{
	width: 220px;
	min-width: 220px;
	max-width: 220px;
	height: 340px;
	min-height: 340px;
	max-height: 340px;
	box-shadow: 5px 5px 25px 0 rgba(46,61,73,.2);
	/*margin: 0 1.25rem 1.5rem 0;*/
	background-color: #FFF;
	margin-right: 8px;
	margin-left: 8px;
	cursor: move;
	pointer-events: pointer;
	opacity: 0.7;
	z-index: 11;
}

.segmento-container .segmento-container-scroll .selected-card,
.curso-container .curso-container-scroll .selected-card{
	width: 220px;
	min-width: 220px;
	max-width: 220px;
	height: 340px;
	min-height: 340px;
	max-height: 340px;
	box-shadow: 5px 5px 25px 0 rgba(46,61,73,.2);
	/*margin: 0 1.25rem 1.5rem 0;*/
	background-color: #FFF;
	margin-right: 8px;
	margin-left: 8px;
	cursor: move;
	pointer-events: pointer;
	opacity: 1;
	z-index: 20;
	transform: scale(1.1, 1.1);
	margin: 32px;
}

.curso-container .curso-container-scroll .selected-card{
	margin-right: 628px;
}

.detail-curso-container{
	position: absolute;
	top: 0;
	margin-left: 220px;
	width: 500px;
	height: 380px;
	padding: 16px;
	background-color: #fff;
	box-shadow: 5px 5px 25px 0 rgba(46,61,73,.2);
	height: calc(100% - 32px);
	overflow-x: hidden;
	overflow-y: scroll;
}

.display-none{
	display: none;
}

.display-flex{
	display: flex;
}

.detail-curso-container p{
	font-size: 10px;
}

.detail-curso-container .information{
	pointer-events: none;
}

.detail-curso-container p{
	font-size: 14px;
	text-align: justify;
	margin-bottom: 16px;
	pointer-events: none;
	padding: 16px;
}

.detail-curso-container table{
	width: 100%;
	max-width: 100%;
	font-size: 14px;
	text-align: center;
	font-size: 14px;
	border-collapse: collapse;
	margin-bottom: 16px;
	pointer-events: all;
}


table tr:nth-child(1){
	background-color: #E0E0E0;
	cursor: none;
	pointer-events: none;
}

table tr{
	cursor: pointer;
	pointer-events: all;
}

table tr.selected{
	background-color: #BDBDBD;
}

table tr:hover{
	background-color: #F65D17;
	color: #FAFAFA;
}

table tr td{
	padding: 0;
	border: none;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 30px;
	overflow: hidden;
	font-size: 11px;
	margin-top: 16px;
	margin-bottom: 32px;
	/*pointer-events: none;*/
}

.detail-curso-container button{
	
}

.segmento-container .segmento-container-scroll .card.unselected{
	z-index: 11;
}

/*.segmento-container .segmento-container-scroll .card *,
.curso-container .curso-container-scroll .card *,
.curso-container .curso-container-scroll .selected-card *,
.segmento-container .segmento-container-scroll .selected-card *{
	pointer-events: none;
}*/

.segmento-container .segmento-container-scroll .card i,
.curso-container .curso-container-scroll .card i,
.curso-container .curso-container-scroll .selected-card i,
.segmento-container .segmento-container-scroll .selected-card i{
	position: absolute;
	margin-left: 8px;
	margin-top: 8px;
	color: #02b3e4;
	background-color: #FFF;
	border-radius: 50%;
	pointer-events: none;
}


.icon-button-close{
	position: absolute;
	right: 8px;
	top: 8px;
	cursor: pointer;
	pointer-events: all;
	color: #f45
}

/*.segmento-container .segmento-container-scroll .card.selected{
	opacity: 1;
	transform: scale(1.2,1.2);
	margin: 48px;
}*/

.segmento-container .segmento-container-scroll .card:hover,
.curso-container .curso-container-scroll .card:hover{
	animation-name: zoomIn;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes zoomIn {
	from{
		opacity: 0.7;
		/*margin: 0 1.25rem 1.5rem 0;*/
		margin: 8px;
		transform: scale(1, 1);	
	}
	to{
		opacity: 1;
		transform: scale(1.1,1.1);
		margin: 32px;
	}
}


.segmento-container .segmento-container-scroll .card:not(:hover),
.curso-container .curso-container-scroll .card:not(:hover){
	animation-name: zoomOut;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes zoomOut {
	from{
		opacity: 1;
		transform: scale(1.1,1.1);
		margin: 32px;
	}
	to{
		opacity: 0.7;
		margin: 8px;
		/*margin: 0 1.25rem 1.5rem 0;*/
		transform: scale(1, 1);	
	}
}

.segmento-container .segmento-container-scroll .card .card-image,
.curso-container .curso-container-scroll .card .card-image,
.curso-container .curso-container-scroll .selected-card .card-image,
.segmento-container .segmento-container-scroll .selected-card .card-image{
	height: 60%;
	/*background-color: #f45;*/
	width: 220px;
	/*background-image: url('http://intranet.pe.senac.br/dr/crm/image/000003.jpg');*/
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
	pointer-events: none;
}

.segmento-container .segmento-container-scroll .card .card-image a,
.segmento-container .segmento-container-scroll .selected-card .card-image a{
	position: absolute;
	right: 8px;
	bottom: 8px;
	font-size: 7px;
	text-decoration: none;
	color: #FAFAFA;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
}

.segmento-container .segmento-container-scroll .card .card-content,
.curso-container .curso-container-scroll .card .card-content,
.curso-container .curso-container-scroll .selected-card .card-content,
.segmento-container .segmento-container-scroll .selected-card .card-content{
	height: calc(40% - 32px);
	padding: 16px;
	width: calc(220px - 32px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.segmento-container .segmento-container-scroll .card .card-content .text-segmento,
.curso-container .curso-container-scroll .card .card-content .text-curso,
.curso-container .curso-container-scroll .selected-card .card-content .text-curso,
.segmento-container .segmento-container-scroll .selected-card .card-content .text-segmento{
	font-size: 18px;
	margin-bottom: 16px;
	pointer-events: none;
}

.segmento-container .segmento-container-scroll .card .card-content p,
.curso-container .curso-container-scroll .card .card-content p,
.curso-container .curso-container-scroll .selected-card .card-content p,
.segmento-container .segmento-container-scroll .selected-card .card-content p{
	text-align: center;
	font-size: 15px;
	pointer-events: none;
}


@media screen and (max-height: 700px){
	.segmento-container,
	.curso-container{
		height: 300px;
		padding-bottom: 32px;
		/*background-color: #F45;*/
	}

	.segmento-container .segmento-container-scroll,
	.curso-container .curso-container-scroll{
		height: 300px;
	}

	.segmento-container .segmento-container-scroll .card,
	.curso-container .curso-container-scroll .card{
		height: 300px;
		min-height: 300px;
		max-height: 300px;
		width: 200px;
		max-width: 200px;
		min-width: 200px;
	}

	.segmento-container .segmento-container-scroll .selected-card,
	.curso-container .curso-container-scroll .selected-card{
		height: 300px;
		min-height: 300px;
		max-height: 300px;
		width: 200px;
		min-width: 200px;		
		transform: scale(1.1, 1.1);
		margin: 32px;
	}

	.curso-container .curso-container-scroll .selected-card{
		margin-right: 500px;
	}

	.segmento-container .segmento-container-scroll .card .card-image,
	.curso-container .curso-container-scroll .card .card-image,
	.curso-container .curso-container-scroll .selected-card .card-image,
	.segmento-container .segmento-container-scroll .selected-card .card-image{
		height: 60%;
		width: 200px;
	}

	.segmento-container .segmento-container-scroll .card .card-content,
	.curso-container .curso-container-scroll .card .card-content,
	.curso-container .curso-container-scroll .selected-card .card-content, 
	.segmento-container .segmento-container-scroll .selected-card .card-content{
		height: calc(40% - 32px);	
		width: calc(100% - 32px);
	}

	.detail-curso-container{
		width: 400px;
		margin-left: 200px;
	}
}