/** Estils **/

body{
	margin:0px;
	font-family: 'Open Sans', sans-serif;
	}
/** Banner **/
.banner {
    background:url(../assets/base-banner2.png) no-repeat;
	background-position: center center;
    background-size: cover;
    height: 500px;
	margin-bottom: 100px;
}
.banner .title {
    font-size: 50px;
    color: #fff;
    display: block;
	font-weight:600;
	margin:0px;
}
.banner .subtitle {
    color: #fff;
    font-weight: 100;
    font-size: 25px;
	display:block;
	margin-bottom:40px;
}
.buttonBanner {
    background: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
    color: #7477ba;
	border:3px solid transparent;
	-webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
	margin: 0px 0px 10px 0px;
}
.buttonBanner:hover {
	background:transparent;
	border:3px solid #fff;
	color:#fff;
}
.buttonBanner:hover img {
    filter: brightness(0) invert(1);
}
.buttonManuals{
	background: transparent;
    border: 3px solid #fff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
	-webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
	margin-bottom:10px;
}
.buttonManuals:hover{
	background:#fff;
	color: #7477ba;
}

/** Section **/
.section{
	padding:50px 0px;
	}
.section h2 {
    max-width: 600px;
    font-weight: 400;
    color: #7477ba;
    margin: auto;
    line-height: 36px;
    margin: 30px auto;
}
p {
    color: #9ba3b8;
    max-width: 600px;
    margin: 0px auto 45px auto;
    line-height: 25px;
}
.btnManual{
	text-decoration:none;
	}
.btnManual img{
	height:95px;
	width:auto;
	-webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
	}
.btnManual:hover img{
	opacity:0.5;
	}

/** Section orange **/
.sectionColor{
	background: rgba(155, 163, 184, 0.33) url(../assets/img_background.png) no-repeat center;
    width: 100%;
    float: left;
    padding: 50px 0px;
	}
.sectionColor img{
	width:100%;
	height:auto;
	}
.sectionColor ul.right li img, .sectionColor ul.right li span{
	float:right;
	}
.sectionColor ul.left li img, .sectionColor ul.left li span{
	float:left;
	}
.sectionColor ul.left li span{
	text-align:left;
	padding: 10px 0px 0px 20px;
	}
.sectionColor ul{
	list-style:none;
	padding:0px;
	}
.sectionColor ul li {
    display: block;
    width: 100%;
    float: left;
    margin: 0px 0px 70px 0px;
}
.sectionColor ul li > img {
    width: 60px;
    height: 60px;
}
.sectionColor ul li span {
    font-size: 20px;
    padding: 10px 20px 0px 0px;
    text-align: right;
	color:#5a5a5a;
}
/** Assets **/
.img-responsive{
	width:100%;
	height:auto;
	}
.col12{
	width:100%;
	float:left;
	}
.col5{
	width:40%;
	float:left;
	}
.col6{
	width:50%;
	float:left;
	}
.col7{
	width:60%;
	float:left;
	}
.col3{
	width:25%;
	float:left;
	}
.col4{
	width:33.3%;
	float:left;
	}

.center{
	text-align:center;
	}


/* Extra small devices (phones, less than 768px) */
@media only screen and (max-width:768px) { 
	
	.banner{
		margin-bottom:0px;	
	}
	.banner .col7 {
		padding-top: 50px;
		width:100%;
	}
	.banner .col5{
		display:none;
	}
	.banner .content{
		padding:0px 20px;
	}
	.banner .title{
		font-size:30px;	
	}
	.buttonBanner, .buttonManuals {
		display: block;
	}
	.sectionColor ul li{
		margin-bottom:30px;	
	}
	.sectionColor ul.left li span{
		font-size: 14px;
		width: 100%;
		padding: 10px 0px;
		text-align: center;
	}
	.sectionColor ul.left li img, .sectionColor ul.left li span {
		float: none;
		margin: 0px auto;
		display: block;
	}
	.col4{
		width:50%;	
	}
	.visible-xs{
		display:block;
	}
	.hidden-xs{
		display:none;
	}
	.section h2, .section p {
		padding-right: 15px;
		padding-left: 15px;
	}

}

/* Medium devices (desktops, 992px and up) */
@media only screen and (min-width:768px) { 
	.content{
		width:100%;
	}
	.banner .col7 {
		padding-top: 100px;
	}
	.visible-xs{
		display:none;
	}
	.hidden-xs{
		display:block;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media only screen and (min-width:1200px)  { 
	.content {
		width: 1200px;
		display: block;
		margin: auto;
	}
	.banner .col7 {
		padding-top: 143px;
	}
	.visible-xs{
		display:none;
	}
	.hidden-xs{
		display:block;
	}
 }