/*
	Cliente: Marcus Sacco
    Projeto: Marcus Sacco Web Designer
    Autor: Marcus Sacco
    Versão: 1.0
*/

/* ELEMENTOS BÁSICOS */

h2.vermelho {
	font-size: 3.75em;
	font-weight: 400;
	color: #bf2c38;
}

span.border-h2 {
	width: 100px;
	height: 4px;
	display: block;
	background-color: #222222;
}

a {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

a:hover {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

a, a:hover, a:active, a:focus, button:focus {
	outline: 0;
	border: 0;
	text-decoration: none;
}

.bg-cinza {
	background-color: #cccccc;
}

a.ir-topo {
   position: fixed;
   right: 10px;
   bottom: 124px;
   display: none;
   width: 50px;
   height: 50px;
   margin: 0;
   padding: 10px 0px 0px 10px;
   font-weight: 700;
   font-size: 2.5em;
   color: #ffffff !important; 
   background-color: #b1b1b1;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   -ms-border-radius: 6px;
   -o-border-radius: 6px;
   border-radius: 6px;
   cursor: pointer;
   -webkit-transition: 1.0s;
   -moz-transition: 1.0s;
   -ms-transition: 1.0s;
   -o-transition: 1.0s;
   transition: 1.0s;
}

a.ir-topo:hover {
   color: #ffffff !important;	
   text-decoration: none;
   background-color: #7e7e7e;
   -webkit-transition: 1.0s;
   -moz-transition: 1.0s;
   -ms-transition: 1.0s;
   -o-transition: 1.0s;
   transition: 1.0s;
}

a.ir-topo:active {
   background: #7e7e7e;
}	

/* PRELOADER */

#preloader {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	background: #ffffff;
}

#pre-status,
.preload-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}    

.preload-placeholder ul {
    display: flex;
    list-style-type: none;
}

.preload-placeholder ul li {
    width: 8px;
    height: 20px;
    margin: 0px 4px;
    background-color: #222222;
    animation: animate 0.7s infinite alternate;   
}

@keyframes animate {
    0% {
        transform: scaleY(1);
    }
    25% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1);
    }
    75% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(3);
    }
}

.preload-placeholder ul li:nth-child(1) {
    animation-delay: 0.1s;
}

.preload-placeholder ul li:nth-child(2) {
    animation-delay: 0.2s;
}

.preload-placeholder ul li:nth-child(3) {
    animation-delay: 0.3s;
}

.preload-placeholder ul li:nth-child(4) {
    animation-delay: 0.4s;
}

.preload-placeholder ul li:nth-child(5) {
    animation-delay: 0.5s;
}

.preload-placeholder ul li:nth-child(6) {
    animation-delay: 0.6s;
}

/*.preload-placeholder {
	top: 65%;
	left: 0;
	margin: 0;
	background: none;
	text-align: center;
}*/

/* NAVBAR */

.navbar-fixed-top .navbar-brand {
    margin-top: -32px;
}

/* PÁGINA INICIAL */

.intro-section {
    width: 100%;
	height: auto;
	min-height: 100%;
	margin: 0;
	padding: 0;
	background-image: url(../imagens/intro-section/bgintro.jpg);
	background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

* html .intro-section {
	height: 100%;	
}

.intro-section h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -71px 0px 0px -432px;
	font-size: 57px;
	font-weight: 500;
	line-height: 1.8em;
	color: #ffffff;
	text-transform: uppercase;
}

.intro-section a.vem-comigo {
	position: absolute;
	bottom: 40px;
	left: 50%;
	margin-left: -74px;
	font-size: 25px;
	font-weight: 400;
	color: #ffffff;
}

.intro-section a.vem-comigo:hover, .intro-section a.vem-comigo:focus {
	text-decoration: none;
}

/* MEUS SERVIÇOS */

.servicos-section {
    height: auto;
    padding-top: 100px;
}

.servicos-section .meus-servicos {
	padding-top: 50px;
}

.servicos-section .servicos-icons img {
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	margin-left: -64px;
	-webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
 
.servicos-section .servicos-icons img:hover {
	opacity: 0;
	-webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear; 
}

.servicos-section h3 {
	margin-top: 170px;
	font-size: 2.0em;
	font-weight: 400;
	color: #666666;	
}

.servicos-section p {
	padding-bottom: 50px;
	font-size: 1.5em;
	font-weight: 300;
	line-height: 1.8em;
}

/* MEU PORTFÓLIO */

.portfolio-section {
    height: auto;
    padding: 100px 0px 40px 0px;
}

.portfolio-section .meu-portfolio {
	padding-top: 50px;
}

.portfolio-section .item-portfolio {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border: 10px solid #ffffff;
	-webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.portfolio-section .item-portfolio:hover {
	border: 10px solid #222222;
	-webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}	

.portfolio-section .item-portfolio .figura {
	position: relative;	
	width: 100%;
	height: 100%;
	overflow: hidden;	
	-webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.portfolio-section .item-portfolio .figura img {
	-webkit-transition: transform 0.5s linear;
    -moz-transition: transform 0.5s linear;
    -ms-transition: transform 0.5s linear;
    -o-transition: transform 0.5s linear;
    transition: transform 0.5s linear;
}

.portfolio-section .item-portfolio:hover .figura img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.portfolio-section .item-portfolio h4 {
	margin-top: 40px;
	font-size: 1.5em;
	font-weight: 400;
	color: #666666;	
}

/* FALE COMIGO */

.contato-section {
    height: auto;
    padding: 100px 0px 50px 0px;
}

.contato-section p {
	padding-top: 50px;
	font-size: 1.5em;
	font-weight: 300;
	line-height: 1.8em;
}

.contato-section p span {
	color: #bf2c38;
}

.contato-section form {
	padding-top: 50px;	
}

.contato-section form label {
	font-size: 1.5em;
	font-weight: 400;
}

.contato-section .form-control {
	border: 2px solid #666666;
	border-radius: 0;
}

.contato-section .form-control:focus {
	border: 2px solid #666666;
	box-shadow: none !important;
}

.contato-section form textarea {
	height: 271px;	
}

.contato-section .form-control-feedback {
	padding-top: 4px;
	font-size: 1.5em;
}

.contato-section form small {
	font-size: 1.0em;	
}

.contato-section .mensagem-enviada {
	margin-top: 20px;
	padding-top: 15px;
	height: auto;
	color: #5fa53f;
}

.contato-section .btn-custon {
	margin-top: 30px;
	background-color: #5fa53f;
	color: #ffffff;
}

.contato-section .btn-custon:hover {
	background-color: #222222;
	color: #ffffff;
}		

/* RODAPÉ */

footer {
	padding: 40px 0px 20px 0px;
	background-color: #222222;
	border-top: 10px solid #cccccc; 
}

footer p {
	color: #9d9d9d;
}