* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 300;
	background: url(../img/login/bg-imoview.jpg) center center;
}

.conteudo {
	max-width: 600px;
	margin: 0 auto;
	padding-top: 140px;
	text-align: center;
}

.erro {
	margin-bottom: 10px;
	text-align: left;
	font-size: 11px;
	padding: 10px 15px;
	background: #b76457;
	border-radius: 5px;
	color: #FFF;
}

.form {
	display: inline-block;
	width: 100%;
	border-radius: 10px;
	background: #2F3D4B;
	padding: 55px;
	color: #B3B8BC;
	text-align: center;
	font-weight: 400;
	font-size: 12px;
	box-shadow: 0px 0px 20px 0px #273240;
}

	.form h1 {
		font-weight: 400;
		margin-bottom: 25px;
		font-size: 26px;
	}

		.form h1 img {
			width: 250px;
		}

	.form p {
		margin-bottom: 30px;
	}

	.form label {
		position: relative;
		display: block;
	}

		.form label.usuario::before {
			content: '';
			background: url(../img/login/usuario.png);
			width: 13px;
			height: 15px;
			position: absolute;
			z-index: 1;
			left: 20px;
			top: 20px;
		}

		.form label.senha::before {
			content: '';
			background: url(../img/login/cadeado.png);
			width: 13px;
			height: 15px;
			position: absolute;
			z-index: 1;
			left: 20px;
			top: 20px;
		}

	.form input {
		height: 56px;
		background: #252F40;
		border: 3px solid #232D3E;
		width: 100%;
		border-radius: 5px;
		font-size: 18px;
		padding-left: 55px;
		color: #B3B8BC;
		margin-bottom: 10px;
		position: relative;
	}

	input:-webkit-autofill {
		-webkit-animation-name: autofill;
   	-webkit-animation-fill-mode: both;
	}

	@-webkit-keyframes autofill {
		to {
			color: #B3B8BC;
			background: #252F40;
		}
	}	

	.form button {
		height: 50px;
		background-image: linear-gradient(to right, #3EBCB3, #3598DC);
		border-radius: 5px;
		border: 0;
		width: 100%;
		color: #FFF;
		text-transform: uppercase;
		cursor: pointer;
	}

.logo_dev {
	max-width: 150px;
	float: right;
	margin-top:41px;
}

.mais-informacoes {
	width: 100%;
	display: inline-block;
	color: #B3B8BC;
	text-align: center;
	bottom:15px;
	left:0;
	position: absolute;
	padding: 0 1%;
}

	.mais-informacoes p {
		line-height: 62px;
		font-size: 13px;
	}
	

	.mais-informacoes h2 {
		text-align: left;
		font-weight: normal;
		font-size: 14px;
		margin-bottom: 5px;
	}

.secoes {
	float: left;
	width:50%;
	display: block;
	text-align: left;
}

	.secoes a {
		color: #FFF;
		text-decoration: none;
	}

	.secoes .item {		
    box-shadow: 0px 0px 20px 0px #273240;
		vertical-align: bottom;
		display: inline-block;
		width:110px;
		height:110px;
		text-align: left;
		position: relative;
		overflow: hidden;
		transition: all .3s;
	}
	.secoes .item:not(:first-child){
		margin-left: -30px;
	}
	.secoes .item:hover+.item {		
    margin-left: 0;
	}

	.secoes .item.sites{
		background: #71A583 url(../img/login/sites.png) no-repeat center calc(50% - 10px);
	}
	.secoes .item.sites:hover{
		background: #60DB8B url(../img/login/sites.png) no-repeat center calc(50% - 10px);
	}
	.secoes .item.crm{
		background: #52BBC6 url(../img/login/crm.png) no-repeat center calc(50% - 10px);
	}
	.secoes .item.crm:hover{
		background: #1CDBF2 url(../img/login/crm.png) no-repeat center calc(50% - 10px);
	}
	.secoes .item.mkt{
		background: #1B60CE url(../img/login/mkt.png) no-repeat center calc(50% - 10px);
	}
	.secoes .item.mkt:hover{
		background: #177EFF url(../img/login/mkt.png) no-repeat center calc(50% - 10px);
	}

		.secoes .item span{
			line-height: 17px;
			font-size: 13px;
			display: block;
			width: calc(100% - 30px);
			position: absolute;
			bottom: 10px;
			left: 15px;
		}



/* -----     Definições de breakpoints     -----*/

	/* Desktop com tela pequena */
	@media screen and (max-width: 700px) {
		.secoes{
			width: 70%;
		}
	}

	/* Desktop com tela pequena */
	@media screen and (max-width: 700px){
		.conteudo{
			padding-top: 50px;
		}
		.secoes .item:not(:first-child){
			margin-left: 0;
		}
	}
	@media screen and (max-width: 520px), screen and (max-height: 745px) {		
		.mais-informacoes{
			position: relative;
			width: 100%;
			margin-top: 60px;
		}
			.mais-informacoes h2{
				text-align: center;
			}
		.secoes{
			width: 100%;
			float: none;
			text-align: center;
		}
		.logo_dev{
			float: none;
		}
	}

	/* Mobile */
	@media screen and (max-width: 400px) {
		.mais-informacoes h2{
			font-size: 14px;
		}
		.secoes .item{
			width: 100px;
			height: 100px;
		}
	}

/* ---------------------------------------------*/