:root{
	--first-color:rgb(21, 149, 210);
	--second-color:rgb(242, 164, 101);
}
/*GLOBAL*/
	.bg-first-color{
		background-color: var(--first-color);
	}
	.first-color{
		color: var(--first-color);
	}
	.bg-second-color{
		background-color: var(--second-color);
	}
	.second-color{
		color: var(--second-color);
	}
	.home,.about,.services,.produtos,.contato,.obras,.galeria,.orcamento,.blog,.cliente{
		min-height:100vh;
	}
	.about,.services,.produtos,.contato,.obras,.galeria,.orcamento,.blog{
		padding-top:133px;
	}
	.bg-white{
		background-color: #fff;
	}
	.h3-title{
		text-transform: uppercase;
		color:var(--first-color);
		font-size:2em;
		font-weight:700;
		font-style:normal;
		font-family: 'Roboto',Open Sans, sans-serif;
	}
	.h2-title{
		text-transform: uppercase;
		color:var(--first-color);
		font-size:2em;
		font-weight:700;
		font-style:normal;
		font-family: 'Roboto',Open Sans, sans-serif;
		margin-bottom:15px;	
	}
	.h5-subtitle{
		margin-bottom:15px;
	}
	.p-text{
		color:#5a5a5a;
		margin-bottom:15px;
	}
	.btn-second{
		background:var(--second-color);
	}
	.btn-second:hover{
		background:var(--first-color);
	}
	.btn-first{
		background:var(--first-color);
		
	}
	.btn-first:hover{
		background:var(--second-color);
	}
	a{
		text-decoration: none!important;
	}
/*END GLOBAL*/
/*HEADER*/
	header{
		z-index:3;
		width:100%;
		position:fixed;
		background: rgba(3, 107, 124, 0.3);
		border-bottom: 1px solid rgba(241, 163, 101,0.6);
	}
	header .header-social{
		width:100%;
		height:32px;
		background-color:#f8f8f8;
		border-bottom:1px solid rgba(255,255,255,0.5);
	}
	header .header-social .container ul{
		width:100%;
		margin:0px;
		height:32px;
		padding:0px;
		list-style-type:none!important;
	}
	header .header-social .container ul li{
		float:left;
		margin:0px;
		padding:0px;
		height:100%;
		display:inline-block;
		border-left:1px solid #eee;
	}
	header .header-social .container ul li .telefone{
		display: flex;
		align-items: center;
		width:100%;
		height: 100%;
		padding:0px 7.5px 0px 7.5px;
	}
	header .header-social .container ul li .telefone p{
		font-size:0.8em;
		color:#a6a6a6;
		margin:auto;
	}
	header .header-social .container ul li a{
		width:100%;
		height: 100%;
		display: flex;
		align-items: center;
		padding:0px 7.5px 0px 7.5px;
		text-decoration: none!important;
	}
	header .header-social .container ul li a svg{
		color:#a6a6a6;
		margin:auto;
		font-size:1em;
		transition:0.5s;
	}
	header .header-social .container ul li:nth-child(1):hover a svg{
		color:#4267b2;
		transition:0.5s;
	}
	header .header-social .container ul li:nth-child(2):hover a svg{
		color:#fc2bff;
		transition:0.5s;
	}
	header .header-social .container ul li:nth-child(3):hover a svg{
		color:#36a043;
		transition:0.5s;
	}
	header .header-content ul{
		width:100%;
		margin:0px;
		height:100px;
		padding:0px;
		float:right;
		list-style-type: none;
	}
	header .header-content ul li{
		margin:0px;
		padding:0px;
		height: 100%;
		display: inline-block;
	}
	header .header-content ul .brand{
		margin:0px;
		float:left;
		padding:0px;
		height: 100%;
	}
	header .header-content ul .brand a{
		padding:0px;
	}
	header .header-content ul .header-button{
	    top: 0;
	    color:var(--first-color);
	    right: 25px;
		display:none;
	    height: 100%;
	    display: none;
		font-size: 1.5em;
		position: absolute;
	    align-items: center;
	}
	header .header-content ul li a{
		height: 100%;
		padding:15px 0px 15px 0px;
		text-decoration: none!important;
	}
	header .header-content ul .header-item a{
		display:flex;
		align-items: center;
	}
	header .header-content ul li a p{
		margin:0px;
		font-size: 0.9em;
		font-weight:500;
		transition:0.5s;
		font-style:normal;
		color:rgba(255,255,255);
		text-transform:uppercase;
		padding:0px 7.5px 0px 7.5px;
		font-family: 'Roboto', sans-serif;
	}
	header .header-content ul li a p:after{
		left:0;
		width:0;
		height:0;
		padding:0;
		content:'';
		float: left;
		display:block;
		transition: 0.5s;
		margin-top: -2px;
	    position: relative;
		margin: 0px auto 0px 0px;
		border-bottom:2px solid #fff;
	}
	header .header-content ul li a:hover p:after{
		content:'';
		color:#fff;
		width:100%;
		display:block;
		transition: 0.5s;
	}
	@media screen and (max-width:11999px){
		header .header-content ul li a p{
			padding:0px 5px 0px 5px;
		}
	}
	@media screen and (max-width:1199px){
		header .header-content ul li{
			height:50%;
		}
		header .header-content ul li a{
			height:7.5px 0px 7.5px 0px;
		}
		header .header-content ul .brand{
			margin-left: 25px;
			padding: 10px;
			max-height: 100%;
		}
	}
	@media screen and (max-width: 784px){
		header .header-content ul{
			height:64px;
		    left: 0;
		    position: absolute;
		    background-color: #fff;
		    border-bottom: 1px solid rgba(255,255,255,0.5);
		}
		header .header-content ul .header-item{
			width:240.5px;
			margin-right:auto;
			background: rgb(242, 164, 102);
		}
		header .header-content ul li:nth-child(2){
			margin-top: 64px;
		}
		header .header-content ul li {
		    height: unset;
		    display:block;
		}
		header .header-content ul li a{
			padding:0;
			height: calc((100vh - 96px)/9);
		}
		header .header-content ul .brand a{
			height:100%;
		}
		header .header-content ul .header-button{
			display:flex;
		}
		header .header-content ul .header-item{
			margin-left:-240.5px;
			border-bottom: 1px solid #ffffff29;
			border-right: 1px solid rgba(255,255,255,0.5);
		}
		header .header-content ul li a p:after{
			float: none;
		}
		header .header-content ul .header-item a p{
			color:#fff;
			padding: 0px 30px;
		}
	}
	@media screen and (max-width:480px){
		header .header-content ul .header-item{
			width:100%;
			border-right:none;
			margin-right:auto;
			margin-left:-100%;
			background-image:none;
			background: rgb(242, 164, 102);
		}
		header .header-content ul .header-item a p{
			width:100%;
			color:#fff;
			text-align: left;
		}
		
	}
/*END HEADER*/
/*RIGHTBAR*/
	.rightbar .btn-openclose{
		position:absolute;
		top:0px;
		left:-40px;
		width:40px;
		height:40px;
		background: #f2a465;
		cursor:pointer;
		color:#fff;
		box-shadow:5px 5px 0px rgba(0,0,0,0.1);
	}
	.btn-finalizar-orc{
		border:0px;
		background:#69b1ff;
		color:#fff;
	}
	.rightbar{
		width:240px;
		top:133px;
		right:0px;
		position:fixed;
		z-index: 2;
		border-radius: 0px 0px 0px .3rem;
		background: #ffecdc;
		box-shadow:5px 5px 0px rgba(0,0,0,0.1);
	}
	.rightbar-body{
		height: calc(100vh - 421px);
		overflow-y:scroll;
    	margin-bottom: 69px;
	}
	.rightbar-footer{
		position:absolute;
		bottom:0px;
		width:100%;
	}
	.rightbar[data-opened]{
		right:0px;
	}
	.rightbar[data-closed]{
		right:-240px;
	}
	.cart-item{
		    background: #fff;
    display: flex;
    align-items: center;
	}
/*END RIGHTBAR*/
/*HOME*/
	.home .fa-chevron-down{
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		color: #fff;
		font-size: 2em;
		text-align: center;
		position: absolute;
	}
	.home .carousel-item {
		height: 100vh;
		background-position:center;
		background-size:cover;
	}

	.home .carousel-control-next,
	.home .carousel-control-prev {
	  	width: 8% !important;
	}

	.home .carousel-item.active,
	.home .carousel-item-left,
	.home .carousel-item-right {
	  	display: flex !important;
	  	justify-content: center;
	  	align-items: center;
	}
	.andamento{
		position:relative;
		transition:0.5s;
	}
	.finalizada{
		position:relative;
		transition:0.5s;
	}
	.home .carousel-item h1 {
	    color: #fff;
	    font-size: 72px;
	    padding: 0 10%;
	}
	.home #carouselPrincipal .carousel-inner .carousel-text-content{
		top:0;
		left:0;
		height:100%;
		display:flex;
		position:absolute;
		align-items:center;
		background-image: linear-gradient(to right,rgba(0,0,0,0.5), transparent);
	}
	.home #carouselPrincipal .carousel-inner .carousel-text-content .carousel-text{
    	top: 60px;
    	position: relative;
    	max-width: 42%;
    	margin:auto 0 auto 8%;
	}
	.home #carouselPrincipal .carousel-inner .carousel-text-content .carousel-text h3{
		color:#fff;
		font-size:2.5em;
		font-weight:700;
		font-style:bold;
		text-transform:uppercase;
		font-family: 'Open Sans', sans-serif;
	}
	.home #carouselPrincipal .carousel-inner .carousel-text-content .carousel-text h3 u{
		font-weight: 400;
		text-decoration: none;
	}
	.home #carouselPrincipal .carousel-inner .carousel-text-content .carousel-text p{
		color:#fff;
		font-size:1em;
		font-weight:400;
		font-style:normal;
		font-family: 'Roboto',Open Sans, sans-serif;
	}
	.home #carouselPrincipal .carousel-inner .carousel-text-content .carousel-text button{
		color: #ffffff;
	    font-size: 1em;
	    font-weight: 400;
	    transition:0.25s;
	    padding: 3px 10px;
    	font-style: normal;
	    background: var(--first-color);
	    border-radius: .3rem;
	    font-family: 'Open Sans', sans-serif;
	    box-shadow: 10px 10px 10px rgba(0, 5, 6, 0.2);
	}
	.home #carouselPrincipal .carousel-inner .carousel-text-content .carousel-text button:hover{
		transition:0.25s;
	    background: var(--second-color);
	}
	@keyframes down{
		from{
			transform:translateY(-10px);
		}50%{
			transform:translateY(10px);
		}to{
			transform:translateY(-10px);
		}
	}
	.home .fa-chevron-down{
		animation-duration: 2s;
  		animation-name: down;
  		animation-iteration-count: infinite;
	}
	@media screen and (max-width: 768px){
		.home #carouselPrincipal .carousel-inner .carousel-text-content{
			max-width:100%;
			text-align:center;
			background-image: linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0.5));
		}
		.home #carouselPrincipal .carousel-inner .carousel-text-content .carousel-text{
			margin:auto;
			max-width: 95%;
		}

	}
	/*obras*/

		.home .home-obras{
		
		}
		.home .home-obras .container-obras{
			background-position:center;
			background-image:url(../img/home/bubble.png);
			background-size: 400px;
		}
		.home .home-obras .obras-title-area{
			width: 100%;
			padding-top: 45px;
			padding-bottom: 45px;
			background-image: url(../img/home/azulejo.jpg);
			background-size: 200px;
			box-shadow: inset 0px 0px 15px rgba(0,0,0,0.2);
			background-image: linear-gradient(-180deg,#fefefe40,#096ba500), url(../img/home/azulejo.jpg);
			border-bottom:2px solid #fff;
			border-top:2px solid #fff;
			position: relative;
			overflow: hidden;
		}
		.home .home-obras .obras-title-area .obras-title{
			color: #fff;
			text-shadow:5px 5px 10px rgba(0, 101, 132, 0.58);
			text-align: center;
			margin: 0px;
			font-family: montserrat;
			font-weight: 700;
		}
		.home .home-obras .obras-item{
			overflow: hidden;
			position: relative;
			background-size: cover;
			transition:0.5s;
		}
		.home .home-obras .obras-item a{
			text-decoration:none;
		}
		.home .home-obras .obras-item .obras-item-content{
			height:100%;
			display:flex;
			align-items: center;
			background: rgba(0, 75, 129, 0.5);
			opacity:0;
			transition: 0.5s;
		}
		.home .home-obras .obras-item:hover .obras-item-content{
			opacity:1;
			transition:1s;
			text-decoration:none;
			transition: 0.5s;
		}
		.home .home-obras .obras-item .obras-item-content div{
			margin:auto;
			

		}
		.home .home-obras .obras-item .obras-item-content div .obras-item-h3{
			color:#fff;
			text-align:center;
		}
		.home .home-obras .obras-item .obras-item-content div .obras-item-p{
			color:#fff;
			text-align:center;
		}
		
	@keyframes boia{
		from{
			transform: scale(1) rotateY(0deg) translateX(15px);
		}25%{
			
		}50%{
			transform: scale(1.01) rotateY(10deg) translateX(-15px);
		}75%{
			
		}to{
			transform: scale(1) rotateY(0deg) translateX(15px);
		}
	}
	.home .boia{
		animation-duration: 8s;
  		animation-name: boia;
  		animation-iteration-count: infinite;
		height:200px;
		position:absolute;
		bottom:-75px;
		right:0px;
		margin-right:50px;
		filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
	}
	@keyframes textunder{
		from{
			transform-style: preserve-3d;
    		transform: perspective(600px) rotateY(-15deg);
		}50%{
			transform: perspective(600px) rotateY(15deg);
		}to{
			transform: perspective(600px) rotateY(-15deg);
		}
	}
	.home .obras-button-area{
	}
	.home .obras-button-area .obras-button p{
		font-family:'roboto',sans-serif;
		color:var(--first-color);
		font-style:normal;
		text-transform:uppercase;
		z-index: 1;
		position:relative;
		transition: 0.5s;
	}
	.home .obras-button-area .obras-button:hover p{
		color:#fff;
		transition: 0.5s;
	}
	.home .obras-button-area .obras-button{
		position: relative;
		font-weight:500;
		border:1.5px solid var(--first-color);
		cursor:pointer;
		background:#fff;
		
	}
	.home .obras-button-area .obras-button:before{
		content:'';
		width:0%;
		height:100%;
		position: absolute;
		background:var(--first-color);
		top:0px;
		left:0px;
		display:block;
		transition:0.5s;
		z-index:0;
	}
	.home .obras-button-area .obras-button:hover:before{
		content:'';
		width:100%;
		height:100%;
		background:var(--first-color);
		top:0px;
		left:0px;
		display:block;
		transition:0.5s;
		z-index:0;
	}
	.home .text-under{
		text-align:center;
		color: #005986;
		text-shadow:5px 5px 10px rgba(0, 101, 132, 0.58);
		-webkit-text-stroke-width: 1.5px;
		-webkit-text-stroke-color:#daecf9;
		text-align: center;
		font-family: 'montserrat',sans-serif;
		font-weight: 900;
	}
	.home .wellcome{
		min-height:calc(100vh - 113px);
		background-image:linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)),url('../img/home/agua_fundo.png');
		background-size:cover;
		background-position: top center;
		box-shadow:inset 0px 0px 10px rgba(0,0,0,0.2);
	}
	.home .wellcome h3{
		text-transform:uppercase;
		color:#fff;
		font-size:2em;
		text-align: center;
	}
/*END HOME*/
/*ABOUT*/
	.about{

	}
	.about .about-first-img{
		display:flex;
		align-items:center;
		min-height: 50vh;
		padding-bottom:30px;
	}
	.about .about-first-img img{
		width:70%;
		margin:auto;
		box-sizing: border-box;
	}
	.about .about-text-area{
		display:flex;
		align-items:center;
		padding:0px 7.5%;
	}
	.about .about-text{
		font-size:0.8em;
	}
	.about .about-text-area ul{
		list-style-type: none;
		padding:none;
		padding:0px;
	}
	.about .about-text-area ul li{
		display: inline-block;
		padding:5px;
		border-radius: 50%;
	    background: var(--first-color);
	    width: 34px;
	}
	.about .about-text-area ul li svg{
		width:15px;
		height:15px;
		color:#fff;
	}
	.about .second-area .diagonal{
		height:300px;
		padding:0px 7.5%;
		background:var(--first-color);
	}
	.about .second-area .diagonal:after{
		content: "";
		display: block;
		width: 0px;
		height: 0px;
		top: 0px;
		left: 100%;
		position: absolute;
	    border-top: 300px solid transparent;
	    border-left: 150px solid var(--first-color);
	}
	.about .second-area .diagonal h3{
		color:#fff;margin-top:30px;font-size:1.2em
	}
	.about .second-area .diagonal p{
		color:#fff;
		text-align: justify;
		font-size:0.8em;
	}
	.about .second-area .diagonal a button{
		font-family:'roboto',sans-serif;
		color:var(--first-color);
		font-style:normal;
		font-weight:500;
		padding:5px 20px;
		text-transform:uppercase;
		border:1.5px solid var(--first-color);
		cursor:pointer;
		margin-bottom:0px;
		background:#fff;
		margin-top:15px;
	}
	.about .second-area .second-img{
		height:300px;
		display:flex;
		align-items:center;
	}
	.about .second-area .second-img img{
		margin:auto;
		width:100%;
		max-width:600px;
	}
@media screen and (max-width:575px){
	.about .second-area .diagonal:after{
		content:"";
		display:none;
	}
}
/*END ABOUT*/
/*SERVICES*/
	.diagonal-right{
		background:var(--first-color);
		padding:35px 2.5%;
	}
	.diagonal-right::after{
		content:'';
		display: block;
		position:absolute;
		top:0px;
		left: 20%;
		width:100%;
		height:100%;
		transform:skew(20deg);
		background:var(--first-color);
	}
	.diagonal-right h3{
		color: #fff;
	    z-index: 1;
	    position: relative;
	}
	.diagonal-right p{
		color: #fff;
	    z-index: 1;
	    position: relative;
	}
	.diagonal-left{
		background:var(--second-color);
		padding:35px 2.5%;
	}
	.diagonal-left::after{
		content:'';
		display: block;
		position:absolute;
		top:0px;
		right: 20%;
		width:100%;
		height:100%;
		transform:skew(-20deg);
		background:var(--second-color);
	}
	.diagonal-left h3{
		color: #fff;
	    z-index: 1;
	    position: relative;
	}
	.diagonal-left p{
		color: #fff;
	    z-index: 1;
	    position: relative;
	}
/*END SERVICES*/
/*PRODUTOS*/
	.produto-card{
		padding:5px;
	}
	.produtos-destaque .produto-card{
		background-image: linear-gradient(45deg,#eee,#eee,#fff,#eee,#eee);
    	box-shadow: -5px 0px 6px rgba(0,0,0,0.1);
	}
	.produtos-img{
		background-size:auto 100%;
		background-position: center;
		background-repeat: no-repeat;
		padding:5px;
		transition: 0.25s;
	}
	.obra-card-img{
		background-size:auto 100%;
		background-position: center;
		background-repeat: no-repeat;
		padding:5px;
		transition: 0.25s;
	}
	.produtos-img:hover{
		background-size:auto 110%;
		transition: 0.25s;
	}
	.produto-card .produto-nome{
		text-align: center;
		color:#272727;
		font-family:'Roboto',sans-serif;
		font-size: 1.2em;
		font-weight:400;
	}
	.produto-card a{
		text-decoration:none;
	}
	.produto-card button{
		display: block;
		margin:auto;
		border:2px solid #69b1ff;
		background:transparent;
		cursor:pointer;
		color:#69b1ff;
		width:100%;
		padding:0px;
		position:relative;
		font-family: 'roboto', sans-serif;
		font-size:1em;
		font-weight: 500;
		margin:0px;
		border-radius: 0.3rem;
		z-index: 1;
	}
	.produto-card button p{
		color:#69b1ff;
		position:relative;
		margin:0px;
		transition:0.5s;
	}
	.produto-card button:before{
		content:'';
		width:0%;
		height:100%;
		position: absolute;
		background:#69b1ff;
		color:#69b1ff;
		top:0px;
		left:0px;
		display:block;
		transition:0.5s;
		border-radius: 0.1rem;
		z-index:0;
	}
	.produto-card button:hover:before{
		width:100%;
		transition:0.5s;
	}
	.produto-card button:hover p{
		color:#fff;
		transition:0.5s;
	}
	.categorie-area h3{
		font-family:'Open Sans', sans-serif;
		padding-left:10px;
		font-size:1.4em;
		font-weight: 700;
		color:#f2a465;
	}
	.categorie-area ul{
		list-style-type: none;
		padding:0px;
	}
	.categorie-area ul a{
		text-decoration:none;
	}
	.categorie-area ul a li{
		display: flex;
	    align-items: center;
	    width: 100%;
	    padding: 10px;
	    position: relative;
	    height: 35px;
	    border-radius: 0.3rem;
	    margin: 10px 0px;
	    background:#fff;
	    transition: 0.5s;
	}
	.categorie-area ul a li p{
		color:#f2a465;
		font-family:'Open Sans', sans-serif;
		position:relative;
		z-index:1;
		font-size:1em;
		font-weight: 600;
		margin:0px 10px 0px 15px;
	}
	.categorie-area ul a li:hover{
		box-shadow: 0px 5px 5px rgb(0,0,0,0.05);
		transition: 0.5s;
	}
	.produtos-divisor h5{
		text-align: center;
		    font-weight: 500;
	}
	.produtos-divisor h2{
		padding:5px 15px;
		background-color:#f2a465;
		color:#fff;
		display: inline-block;
		margin:auto;
		text-align: center;
		border-radius: 0.3rem;
    	box-shadow: 0px 5px 5px rgba(0,0,0,0.1);
    	transition: 0.5s;
	}
	.produtos-divisor h2:hover{
		transform: perspective(200px) rotateX(-15deg) scale(0.98);
		transition: 0.5s;
	}
	.produtos-divisor h5:after{
		content:'';
		display:block;
		width:100px;
		margin:auto;
		margin-top:5px;
		border-bottom:2px solid #69b1ff;
	}
	.produto .produto-img{
	}
	.produto .produto-info{
		padding-top:30px;
	}
	.produto .produto-info h2{
		font-family:'roboto',sans-serif;
		font-size:1.2em;
	}
	.produto .produto-info label{
		font-family:'roboto',sans-serif;
		font-size:.8em;
	}
	.produto .produto-info p{
		font-family:'roboto',sans-serif;
		font-size:.8em;
		margin-bottom:8px;
	}
	.produto .button-area{
		margin-top:20px;
	}
	.produto .button-area a:nth-child(2) button{
		border:2px solid #f4ac73;
		background: #fff;
		cursor:pointer;
		color:#f4ac73;
		font-family: 'roboto',sans-serif;
		font-size:1em;
		font-weight: 500;
	}
	.produto .button-area a:nth-child(1) button{
		border:2px solid #69b1ff;
		background: #fff;
		cursor:pointer;
		color:#69b1ff;
		font-family: 'roboto',sans-serif;
		font-size:1em;
		font-weight: 500;
	}
/*END PRODUTOS*/
/*ORCAMENTO*/

	.orcamento-list{
		list-style-type: none;
		padding:0px;
		margin:0px;
	}
	.orcamento-list-item{
		background:#fff;
		display:flex;
		align-items: center;
	}
	.orcamento-img{
		width:100px;
		height:100px;
	}
	.orcamento-produto-info{
		padding:0px;
		display:inline-block;
		list-style-type: none;
	}

/*END ORCAMENTO*/
/*CONTATO*/
	.contato{
		background-image:url('../img/home/bubble.png');
		background-size: 400px auto;
		background-position: center;
	}
	.contato .form-group .col{
			padding:5px;
	}
	.contato form button{
		background: #7bceff;
    	border: 1px solid #5cc3ff;
		border-radius:0.3rem;
		color:#fff;
		transition: 0.25s;
	}
	.contato{
	}
	.contato form button:hover{
		background:#ff9239;
		border:1px solid #ff9239;
		color:#fff;
		transition: 0.25s;
	}
	.contato h2{
		font-family:'montserrat',sans-serif;
		font-weight: 500;
		color:#41b9ff;
		font-size: 1.5em;
		text-transform:uppercase;
	}
	.contato input, .contato textarea{
		    border: 2px solid #c6e2ef;
	}
	.contato label{
		font-family:'montserrat',sans-serif;
		font-weight: 400;
		color:#737373;
		font-size: .9em;

	}
/*END CONTATO*/
/*OBRAS*/
	.obras-capa h2{
		font-size: 2em;
		font-family: montserrat;
		font-weight: 700;
		color: #2196F3;
	}
	.obras-capa h2::after{
		content:'';
		display:block;
		width:100px;
		border-bottom:2px solid #2196F3;
		margin:5px auto auto auto;
	}
	.obras-capa p{
		font-size: 1.4em;
		font-family: roboto;
		font-weight: 300;
		color: #5d5d5d;
	}
	.obras-card{
		border-radius:.3rem;
		background:#eee;
		max-width:calc(25% - 8px);
		box-sizing: border-box;
	}
	.obras-card-img{
		background-size:cover;
		border-radius:.15rem;
		width:100%;
		height:200px;
	}
	.obras-card .vinil::after{
		content: 'Vinil';
	    position: absolute;
	    height: 30px;
	    width: 100%;
	    bottom: 0px;
	    color: #fff;
	    z-index: 1;
	    padding: 15px;
	    padding-left:50px;
	    background-color: #ff943d;
	    display: flex;
	    align-items: center;
	    font-family: open sans;
	    text-align: center;
	}
	.obras-card .alvenaria::after{
		content: 'Alvenaria';
	    position: absolute;
	    height: 30px;
	    width: 100%;
	    bottom: 0px;
	    color: #fff;
	    z-index: 1;
	    padding: 15px;
	    padding-left:50px;
	    background-color: #005798;
	    display: flex;
	    align-items: center;
	    font-family: open sans;
	    text-align: center;
	}
	.obras-card .checked::before{
		content:'';
		display:block;
		position: absolute;
		height:30px;
		width:95px;
		background-image:url('../img/obras/finalizada.png');
		background-size:100% auto;
		background-position: top left;
		left: 7px;
		top:20px;
	}
	.obras-card .nochecked::before{
		content:'';
		display:block;
		position: absolute;
		height:30px;
		width:120px;
		background-image:url('../img/obras/andamento.png');
		background-size:100% auto;
		background-position: top left;
		left: 7px;
		top:20px;
	}
	.obras-card .obras-item-content label{
		color: #949494;
		font-size: 0.8rem;
	}
	.obras-card .obras-item-content p{
		color: #696969;
	}
	.obras-card .obras-item-content a .obras_button{
		border-radius:.3rem;
		color:#fff;
		border:none;
		background:#ff943d;
		cursor:pointer;
		width: 100%;
		box-shadow: 0px 3px 1px rgba(0,0,0,0.1);
	}
/*END OBRAS*/
/*FOOTER*/
	footer{
		width:100%;
		background-image: linear-gradient(0deg,#44b7f9f0,rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0.15)),url(../img/banner4);
	    background-size: cover;
	    background-attachment: fixed;
	    background-position: center;
	}
	footer .container ul{
		list-style-type: none;
	}
	footer .container ul li{
		display:inline-block;
		padding:0px 5px;
	}
	footer .container ul .telefone-area{
		color:#fff;
		font-family: 'Roboto',sans-serif;
		font-weight:700;
	}
	footer .container ul .social-area{
		float:right;
	}
	@media screen and (max-width: 480px){
		footer .container ul li ul{
		    width: unset;
    	}
    	footer .container ul .telefone-area {
    		text-align: center;
    		width:100%;
    	}
    	footer .container ul .social-area {
    		float: unset;
    		padding-top:30px;
    		display: flex;
    	}
	}
	footer .container ul .social-area ul li a{
		color:#fff;
		text-decoration: none;
		font-size: 1.2em;
		font-weight:400;
	}
	footer .container ul li ul li a svg{
		font-weight: 400;
	}
	footer div:nth-child(2){
		background: #3799d1;
    	padding: 10px;
	}
	footer div:nth-child(2) p{
		text-align: center;
		font-size: 8pt;
		margin-bottom:0px;
		color:#fff;
	}
	footer div:nth-child(2) p a{
		text-decoration: none;
		color:#fda25a;
	}
/*END FOOTER*/
/*GRADIENTS*/
  /*GREEN*/
  .b-green, .b-green:before {
    background: rgba(73,155,234,1);
    background: -moz-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(26,188,156,1)));
    background: -webkit-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%);
    background: -o-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%);
    background: linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#1abc9c', GradientType=1 );
  }
  /*PINK*/
  .b-pink, .b-pink:before {
    background: rgba(231,72,234,1);
    background: -moz-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(231,72,234,1)), color-stop(100%, rgba(75,26,188,1)));
    background: -webkit-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
    background: -o-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
    background: linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e748ea', endColorstr='#4b1abc', GradientType=1 );
  }
  /*RED*/
  .b-red, .b-red:before {
    background: rgba(234,110,72,1);
    background: -moz-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(234,110,72,1)), color-stop(100%, rgba(188,26,99,1)));
    background: -webkit-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%);
    background: -o-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%);
    background: linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea6e48', endColorstr='#bc1a63', GradientType=1 );
  }
  /*ORANGE*/
  .b-orange, .b-orange:before {
    background: rgba(255,193,7,1);
    background: -moz-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255,193,7,1)), color-stop(100%, rgba(255,87,34,1)));
    background: -webkit-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%);
    background: -o-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%);
    background: linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc107', endColorstr='#ff5722', GradientType=1 );
  }
  /*BLUE*/
  .b-blue, .b-blue:before {
    background: rgba(5,118,255,1);
    background: -moz-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(5,118,255,1)), color-stop(100%, rgba(36,248,255,1)));
    background: -webkit-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
    background: -o-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
    background: linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0576ff', endColorstr='#24f8ff', GradientType=1 );
  }
/*END GRADIENTS*/
/*BASE BUTTON*/
.button {
  display: inline-block;
  position: relative;
  border-radius: 3px;
  text-decoration: none;
  padding: .5em;
  font-size: 2em;
  font-weight: bold;
  transition: all .5s;
  -webkit-background-clip: text;
 
  color: #FFF;
}
.button:hover {
  text-shadow: 0px 0px 0px rgba(255, 255, 255, .75);
   color: #FFF;
}
.button:hover:after {
  left: 100%;
  top: 100%;
  bottom: 100%;
  right: 100%;
   color: #FFF;
}
.button:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  border-radius: 5px;
  transition: all .5s;
}
.button:after {
  content: '';
  display: block;
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  right: 2px;
  z-index: -1;
  border-radius: 5px;
  transition: all .5s;
}
.button2 {
  display: inline-block;
  font-size: 2em;
  margin: .5em;
  padding: .5em;
  border-radius: 5px;
  transition: all .5s;
  filter: hue-rotate(0deg);
  color: #FFF;
  text-decoration: none;
}
/*END BASE BUTTON*/
/*ROTATE*/
.rot-360-noscoop:hover {
  filter: hue-rotate(360deg);
  transform: rotate(360deg);
}
.rot-135:hover {
  filter: hue-rotate(135deg);
}
.rot-90:hover {
  filter: hue-rotate(90deg);
}
/*END ROTATE*/



Resources