/* ==========================================================================
   Siteland custom styles
   ========================================================================== */

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/roboto_regular/Roboto-Regular-webfont.eot');
    src: url('../fonts/roboto_regular/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto_regular/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/roboto_regular/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/roboto_regular/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotothin';
    src: url('../fonts/roboto_thin/Roboto-Thin-webfont.eot');
    src: url('../fonts/roboto_thin/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto_thin/Roboto-Thin-webfont.woff') format('woff'),
         url('../fonts/roboto_thin/Roboto-Thin-webfont.ttf') format('truetype'),
         url('../fonts/roboto_thin/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{
	-webkit-font-smoothing: antialiased;
    background:#e5e5e5;
    color:#404040;
	font-family:'robotothin',arial,helvetica,sans-serif; 
	font-size:1.5em;
}
header.jumbotron{
	background:#00277b url(../img/jumbotron_bg.jpg) repeat center center;
	background-height:100%;
    padding:20px 20px 40px 20px;
}
header.jumbotron h1{
    font-family:'robotothin',arial,helvetica,sans-serif; 
    color:#ffffff;
}
header.jumbotron p{
    color:#91c2ff;
}
#cliente{
    display:none;
}

#passo1 div, #passo2 div, #passo3 div{
    background:#ffffff; 
    border:1px solid #d8d8d8;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom:20px;
}
#passo1 h2, #passo2 h2, #passo3 h2{
    margin:0 10px 0 10px;
    padding:10px 0 10px 0;
    border-bottom:1px solid #d8d8d8;
    color:#00277b;
	font-family:'robotoregular',arial,helvetica,sans-serif; 
}
#passo1 p, #passo2 p, #passo3 p{
    padding:10px;
}

#ico-passo1, #ico-passo2, #ico-passo3{
	display:block;
	width: 36px;
	height: 36px;
	border-radius: 18px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	background-size: 36px 36px;
	background-repeat: no-repeat;
	float:left;
	margin:10px 10px 10px 10px;
}
#ico-passo1{
	background-image: url(../img/ico-passo1.png);
}
#ico-passo2{
	background-image: url(../img/ico-passo2.png);
}
#ico-passo3{
	background-image: url(../img/ico-passo3.png);
}

#note{
	margin-bottom:20px;
}
.panel-default>.panel-heading{ 
	background-image:none;
	background-color:#00277b;
}
.panel-title a{
	display:block;
	text-align:center;
	color:#ffffff;
	font-family:'robotothin',arial,helvetica,sans-serif; 
	font-size:1.5em;
}
#note h4{font-family:'robotoregular',arial,helvetica,sans-serif; }
#note h4:first-child{margin-top:0;}
#note p:last-child{margin-bottom:0;}
.btn-siteland{
	font-family:'robotoregular',arial,helvetica,sans-serif; 
	font-size:1.3em;
	color:#ffffff;
	border:1px solid #00d2ff;
	filter:none;
	background-color:#00d2ff;
	background-image:none;
	background-repeat:repeat-x;
	text-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	-webkit-transition: all 0.25s ease-in;
	-moz-transition: all 0.25s ease-in;
	-o-transition: all 0.25s ease-in;
	transition: all 0.25s ease-in;
	border-bottom: 3px solid rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	margin: 10px 20px 10px 0 ;
}
.btn-siteland:hover, .btn-siteland:focus{
	color: #ffffff;
	border:1px solid #00aeff;
	background-color: #00aeff;
	background-image:none;
	text-decoration: none;
	background-position: 0 0;
	-webkit-transition: all 0.25s ease-in;
	-moz-transition: all 0.25s ease-in;
	-o-transition: all 0.25s ease-in;
	transition: all 0.25s ease-in;
	border-bottom: 3px solid rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.btn-siteland:active{
	color: #ffffff;
	border:1px solid #00aeff;
	background-color: #00aeff;
	background-image:none;
	text-decoration: none;
	background-position: 0 0;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
	border-top: 3px solid rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
}


/****************** RESPONSIVO ******************/

/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    header.jumbotron{
        height:400px;
    }
    header.jumbotron h1{
        font-size:2.2em;   
    }
    #cliente{
        display:block;
        position:absolute;
        top:0;
        right:50%;
        margin-right:-430px;
        height:400px;
    }
	#passo1 h2, #passo2 h2, #passo3 h2{
		margin:0 20px 0 20px;
		padding:20px 0 10px 0;
	}
	#passo1 p, #passo2 p, #passo3 p{
		padding:10px 20px 20px 20px;
	}

	#ico-passo1, #ico-passo2, #ico-passo3{
		width: 80px;
		height: 80px;
		border-radius: 40px;
		-webkit-border-radius: 40px;
		-moz-border-radius: 40px;
		background-size: 80px 80px;
		background-repeat: no-repeat;
		float:right;
		margin:20px 20px 20px 20px;
	}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    header.jumbotron{
        height:460px;
    }
    header.jumbotron h1{
        font-size:3.2em;
		margin-top:40px;
    }
	header.jumbotron p{
		margin-bottom:20px;	
	}
    #cliente{
        height:460px;
        margin-right:-480px;
    }
	#passo1, #passo2, #passo3{
		margin-top:30px;
	}
	#passo1 div, #passo2 div, #passo3 div{
		padding-top:30px;	
	}
	#passo1 h2, #passo2 h2, #passo3 h2{
		margin:0 20px 0 20px;
		padding: 10px 0 10px 0;
	}
	#passo1 p, #passo2 p, #passo3 p{
		padding:10px 20px 20px 20px;
	}
	#ico-passo1, #ico-passo2, #ico-passo3{
		position:absolute;
		top:-40px;
		left:50%;
		width: 80px;
		height: 80px;
		border-radius: 40px;
		-webkit-border-radius: 40px;
		-moz-border-radius:40px;
		background-size: 80px 80px;
		background-repeat: no-repeat;
		float:none;
		margin:0 0 0 -40px;
	}
	#note{
		margin-top:20px;	
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    header.jumbotron{
        height:476px;   
    }
    header.jumbotron h1{
		margin-top:80px;
        font-size:3.5em;
    }
	header.jumbotron p{
		margin-bottom:30px;	
		font-size:1.2em;
	}
    #cliente{
        height:476px;
        margin-right:-550px;
    }
	#passo1, #passo2, #passo3{
		margin-top:60px;
	}
	#passo1 div, #passo2 div, #passo3 div{
		padding-top:40px;	
	}
	#passo1 h2, #passo2 h2, #passo3 h2{
		margin:0 40px 0 40px;
		padding: 20px 0 10px 0;
	}
	#passo1 p, #passo2 p, #passo3 p{
		padding:10px 40px 40px 40px;
	}
	#ico-passo1, #ico-passo2, #ico-passo3{
		position:absolute;
		top:-50px;
		left:50%;
		width: 100px;
		height: 100px;
		border-radius: 50px;
		-webkit-border-radius: 50px;
		-moz-border-radius:50px;
		background-size: 100px 100px;
		background-repeat: no-repeat;
		float:none;
		margin:0 0 0 -50px;
	}	
	#note{
		margin-top:40px;	
	}
	#note .panel-body{
		padding:40px;
	}
}