@font-face { font-family: Oswald-Medium; src: url('../fonts/Oswald-Medium.ttf'); }
@font-face { font-family: Oswald-Regular; src: url('../fonts/Oswald-Regular.ttf'); }
@font-face { font-family: Oswald-Light; src: url('../fonts/Oswald-Light.ttf'); }
@font-face { font-family: Oswald-ExtraLight; src: url('../fonts/Oswald-ExtraLight.ttf'); }
@font-face { font-family: TrajanPro3-Regular; src: url('../fonts/TrajanPro3-Regular.otf'); }


/* ----------------------------- Vars */
:root {

	--color-01: #334288;
	--color-01b: #6987bd;

	--tam1: 1410px;
	--tam2: 1160px;
	--tam3: 900px;

	--font1: "Montserrat";
	--font2: "Lora";
	--font3: "Oswald-Light";

}




/* ----------------------------- attrs */
.cont1{ max-width:var(--tam1); margin-left: auto; margin-right:auto; }
.cont2{ max-width:var(--tam2); margin-left: auto; margin-right:auto; }
.cont3{ max-width:var(--tam3); margin-left: auto; margin-right:auto; }
.flex-1{ flex:1 }

.font1{ font-family:var(--font1); }
.font2{ font-family:var(--font2); }

.bg-black{ background:#000 }

hr.line{ border-bottom:4px solid #c5d2d8 }

.only-mobile{ display:none; }

/* ----------------------------- Global */
body{
	font-family: var(--font3);
}


a:hover{ color: var(--color-01); }
a i{ color: var(--color-01b); }
a i:hover{ color: var(--color-01); }


h1,h2,h3,h4,h5,h6{ font-family:var(--font1); font-weight:200 }
.page{ font-family:var(--font2); }

/* ----------------------------- Custom */
header{
	background: #FFF;
	;
	&& nav{
		padding-bottom: 10px;
		;
		&& a{
			padding: 0px 20px;
			color: #000;
			border-right:1px solid #000;
			text-decoration: none;
			position: relative;
			letter-spacing: .4px;
			text-transform: uppercase;
			;
			&&:last-child{
				border-right:none;
			}
			&&:after{
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				right: 50%;
				transition: all .5s;
			}
			&&:hover:after{
				left: 20%;
				right: 20%;
				border-bottom: 1px solid #000;
			}
			&&.active{
				color: var(--color-01b);
			}
		}

	}

	&& .logo img{
		height: 60px;
	}

	&& select{
		background: #000;
		color: #FFF;
		padding: 0;
		border: none;
	}
}


footer{
	background: #212223;
	color: #FFF;
	letter-spacing: .4px;
	;

	&& .info{
		border-right: 1px solid #CCC;
		line-height: 1.8;
	}

	&& .info a{
		text-decoration: none;
		color: inherit;
	}

	&& .info a:hover{
		text-decoration: underline;
	}

	&& .logo img{
		margin-left: -39px;
		height: 60px;
	}

	&& .menu a{
		display: block;
		color: #FFF;
		padding: 4px 0px;
		text-decoration: none;

		&&:hover{
			color: var(--color-01);
		}
	}

	&& .social-media{
		height: 0px;
	}

	&& .social-media .items{
		max-width: 80px; 
		width: 100%;
	}


}


.page{
	line-height: 2;
}

.form{
	line-height: 1.5;
	font-family: var(--font1);

	&& .input-group-text{
		background: #F5f5f5;
		color: var(--color-01);
		border: 0;
		padding: 0px 10px 0px 20px
	}
	
	&& input, && textarea{
		border: none;
		background: #f5f5f5;
	}
	
	&& .btn{
		background: var(--color-01);
		color:#FFF;
		&&:hover{
			background: var(--color-01b);
			color:#EEE;
		}
	}
}

.item-block{
	display: flex;
	min-height: 250px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 20px;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 10px 20px -20px #222;
	transition: background .5s;
	color: #000;
	text-decoration: none;
	font-family: var(--font3);
	font-weight: 100;
	&& div{
		transition: all .5s;
	}
}

.item-block:hover{
	background: #EEE;
	&& div{
		transform: translateY(-10px);
		text-shadow: 0px 10px 5px #AAA;
	}
}

.item-block.second{ background: #EEE; }
.item-block.second:hover{ background: #DDD; }

.page-header{
	height: 200px;
	position:relative;
	overflow:hidden;
	justify-content: center;
	align-items: center;
	display:flex;

	&& h1{
		color: #000;
		text-transform: uppercase;
	}

	&&.with-cover h1{
		
	}

	&&.with-cover{
		margin-bottom: 40px;
	}

	&& .cover{

		top: 0;
		bottom: 0;
		width: 100%;
		z-index: -1;
		position: absolute;

		&& img{
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}
}


/* carousel*/

.cont-sup{
	margin-top: -120px;
	z-index: 9;
}



.carousel-indicators{
	bottom: 120px;
}

.carousel-caption {
	bottom: 50%;
	transform: translateY(50%);
}

#carouselSBanner{

	&& .carousel-item{
		height: 40vw;
	}
}

&& .carousel-item img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}