@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');


.grid-item {
	min-height: 240px; /* Defina a altura mínima desejada para cada item do grid */
}


.texto-do-slide {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 40vh;
	color: #373737;
	background-color: rgba(55,55,55,.30)

}

*{
    margin:0;
    padding:0;
    border:0;
}

body {
	overflow-x: hidden;
	font-family: 'Roboto', sans-serif;
	color: #505962;
}


/*--- FIX /// Extra Bootstrap Column Padding --*/
[class*="col-"] {
  padding: 1rem;
}

/*--- FIX /// Bootstrap Mobile Gutter Fix --*/
.row, .container-fluid {
  margin-left: 0px!important;
  margin-right: 0px!important;
}

.bloco {
	display: block;
}

.linha {
	display: inline;
}

.linhabloco {
	display: inline-block;
}
/*============= Navegação =============*/

#nav-target{
		padding-top: 10px;
		padding-bottom: 10px;

}

.navbar {
	text-transform: uppercase;
	font-weight: 600;
	font-size: .9rem;
	letter-spacing: .1rem;
	background: rgba(255, 255, 255, .9)!important;
	border-bottom: 3px solid #c1c1c1;

}

.navbar-brand img {
	height: 1.5rem;
	padding-left: 3rem;

}

@media only screen and (max-width:749px) {
	.navbar-brand img {
		padding-left: 0;
	}
}

.navbar-nav li {
	padding-right: 1rem;

}

.navbar-dark .navbar-nav .nav-link {
	color: #F29245;
	padding-top: .8rem;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover, {
	color: #F29245!important;
}

.nvhh:hover {
	color: #F29245!important;
}

/*============= Slider =============*/

.carousel-item {
	height: 75vh;
	background: no-repeat center center scroll;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
	background-size: cover;
}
/*---Transição Carousel --*/
.carousel-item-next, .carousel-item-prev, .carousel-item.active {
	display: block;
	transition: -webkit-transform 1.2s ease;
	transition: transform 1.2s ease;
	transition: transform 1.2s ease,-webkit-transform 1.2s ease;

}

.img-slider {
	position: relative;
   	top: 50%;
	left: 50%;
   	transform: translate(-50%, -50%);
	height: 17rem;
	opacity: .5
}


.carousel-control-next,
.carousel-control-prev {

	width: 50px;
	height: 50px;
	bottom: 100px!important;
	top: auto;


}

.carousel-control-next {
	right: 50px;
}

.carousel-control-prev {
	right: calc(50px + 50px + 10px);
	left: auto;
}


.carousel-indicators {
	bottom: auto;
	bottom: 15px;
}





/*======== SOBRE: ====== */



.sobreSF {
	background-color: white;
	color: white;
}

.marcadorAlturaSobre {
	min-height: 600px;
	display: flex;

	justify-content: center;
}

@media screen and (max-width: 770px) {
  #dupla {
    display: none;
  }
}



#logo_sf {
	height: 150px;
	object-fit: contain;
}

.marcadorAlturaRedes {
	height: 350px;

}

#fb {
	height: 100px;
	object-fit: contain;
}

#instagram {
	height: 100px;
	object-fit: contain;
}

.cinza {
	text-decoration-color: #373737
}


.parallax01 {
    background-image: url("img/parallax/img-parallax01.jpg");
		height: 350px;
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	-o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}




#gato1 {
	height: 400px;
	object-fit: contain;
	position: relative;
	right: 150px;
}

@media screen and (max-width: 770px) {
  #gato1 {
    display: none;
  }
}

#cachorro1 {
	height: 400px;
	object-fit: contain;
	position: relative;
	left: 50px;
}

@media screen and (max-width: 770px) {
  #cachorro1 {
    display: none;
  }
}


#direita {
	text-align: right;
}

@media screen and (max-width: 770px) {
  #direita  {
    text-align: center;
  }
}

#esquerda {
	text-align: left;
}

@media screen and (max-width: 770px) {
  #esquerda  {
    text-align: center;
  }
}


@media screen and (max-width: 770px) {
  #ccontato  {
    text-align: center;
  }
}

/*=== PORTFÓLIO ==*/









.projetos {
	background-image: url("img/abstract-bg.jpg");
	color: white;
}

.grid-item {
	width: 50%;
	color: white;
}
 @media(min-width: 576px){
    .grid-item{
        width: 33.33%;

    }
   }


.grid {
	padding-bottom: 100px;
}



#selecaoPub {
	background-color: white;
	min-height: 100px;
	width: 100%;
	margin-bottom: 20px;

}

#selecaoPort {
	background-color: white;

	width: 100%;


}

#container-projetos {
	vertical-align: middle;
	text-align: center;
}

.active {
	text-decoration: underline;

}

/* Teste */

.isotope-item {
		z-index: 2;

		background:#E1E131;
	}

	.isotope-hidden.isotope-item {
		z-index: 1;
	}

	.isotope, .isotope .isotope-item {
	    -webkit-transition-duration: 0.8s;
		   -moz-transition-duration: 0.8s;
			    transition-duration: 0.8s;
	}

	.isotope {
	    -webkit-transition-property: height;
		   -moz-transition-property: height;
			    transition-property: height;
	}

	.isotope .isotope-item {
	    -webkit-transition-property: -webkit-transform, opacity;
		   -moz-transition-property:    -moz-transform, opacity;
			    transition-property:         transform, opacity;
	}


/* ------------------------------------------------------------------------------- */
/*  Portfolio Images Hover Effects
/* ------------------------------------------------------------------------------- */


	.view .mask {
	   opacity: 0;
	}

	.view:hover .mask {
	   opacity:.8;
	}

	.view {

	   float: left;
	   overflow: hidden;
	   position: relative;
	   text-align: left;
	}

	.view .mask {
	   width: 100%;
	   height:100%;
	   position: absolute;
	   overflow: hidden;
	   top: 0;
	   left: 0;
	   background:#373737;
	}


	.mask h5 {
		text-align:center;
		color:#FFF;
		top:50%;
		width:100%;
		margin-top:-20px;
		position:absolute;
		line-height:24px;
	}

	.mask p {
		text-align:center;
		color:#FFF;
		opacity:0.5;
		top:50%;
		width:100%;
		margin-top:8px;
		position:absolute;
		line-height:12px;
	}










/*=== CONTATO ===*/

.parallax02 {
	height: 350px;
	background-image: url("img/parallax/img-parallax02.jpg");

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	-o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;

 }


 .parallax03 {
 	height: 350px;
 	background-image: url("img/parallax/img-parallax03.jpg");

 	/* Create the parallax scrolling effect */
 	background-attachment: fixed;
   	background-position: center;
   	background-repeat: no-repeat;
   	-o-background-size: cover;
     -moz-background-size: cover;
     -webkit-background-size: cover;

  }



/* PARA BLOQUEAR PARALLAX EM MOBILE, USAR ESSE CÓDIGO ABAIXO */

@media only screen and (max-width:749px) {
	.parallax02 {
	height: 250px;
	background-attachment: scroll;
	-o-background-size: unset;
    -moz-background-size: unset;
    -webkit-background-size: unset;

	}
}



											/*

											@media only screen and (max-width:749px) {
											  .parallax02 {
												background-attachment: inherit;
											  }
											}

											*/




#contato {
	background-color: white;
}

.button {
  transition-duration: 0.4s;
}



.alturaContato {
	min-height: 200px;
}

#fb2 {
	height: 30px;
	object-fit: contain;
	margin-left: 0px;
}

#instagram2 {
	height: 30px;
	object-fit: contain;
	margin-left: 0px;
}

#phone {
	height: 30px;
	object-fit: contain;
	margin-left: 0px;
}

#pin {
	height: 30px;
	object-fit: contain;
	margin-left: 0px;
}

textarea.form-control {
	height: 150px;
	resize: none;
}

#linkEmail {
	color: inherit;
}

#linkFb {
	  text-decoration: none;
      color: inherit;
}

/*=== FOOTER ====*/

#esc {

	position: relative;
}

#esc2 {
	font-size: 0.7em;
	color: #6D969E;
	text-align: center;
	background-color: ;
position: absolute;
	bottom: 0px;
	}


#gif_logo_sf {
	display: flex;
	justify-content: center;
	align-items: center;
}

#gif_logo_sf2 {
	height: 125px;
	object-fit: contain;
}


#bgfooter {

  position: relative;
	text-align: center;
	margin-top: 0px;
	min-height: 200px;
	background-color: #0b505d;
	color: white;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

@media only screen and (max-width:749px) {
	#bgfooter {
	min-height: 300px;

	}
}



.laranja {
	color: #f29245;
}

.verde {
	color: #0B505D;
}

#dupla {
  max-width: 37%;
  height: auto;

}


.paragrafo {
	column-count: 1;
	text-align: justify;
	max-width: 35em;
}

#chamada1{
	height: 25vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

#whats {
	width: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}




.parallax01-m{
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url("img/parallax/img-parallax01.jpg");
	background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

@media screen and (max-width: 749px) {
  .parallax01 {
    display: none;
  }
}

@media screen and (min-width: 749px) {
  .parallax01-m {
    display: none;
  }
}


.parallax02-m{
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url("img/parallax/img-parallax03.jpg");
	background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

@media screen and (max-width: 749px) {
  .parallax03 {
    display: none;
  }
}

@media screen and (min-width: 749px) {
  .parallax02-m {
    display: none;
  }
}

.btn {
	background-color:#25d366;
}

.btnhv:hover {
	background-color: #04AA6D;
  color: white;
}

.btnhv:active {
	background-color: #F29245;
  color: white;
}

/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/