@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.eot');
    src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff'),
        url('../fonts/Roboto-Regular.ttf') format('truetype'),
        url('../fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Black';
    src: url('../fonts/Roboto-Black.eot');
    src: url('../fonts/Roboto-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Black.woff2') format('woff2'),
        url('../fonts/Roboto-Black.woff') format('woff'),
        url('../fonts/Roboto-Black.ttf') format('truetype'),
        url('../fonts/Roboto-Black.svg#Roboto-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.eot');
    src: url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Bold.woff2') format('woff2'),
        url('../fonts/Roboto-Bold.woff') format('woff'),
        url('../fonts/Roboto-Bold.ttf') format('truetype'),
        url('../fonts/Roboto-Bold.svg#Roboto-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body{
	font-family: 'Roboto';
	background: #e8e6dd;
	font-size: 16px;
}
strong{
	font-family: 'Roboto-Bold';
}
h1, h2, h3, h4, h5, h6{
	font-family: 'Roboto-Black';
}
.pointer{
	cursor: pointer;
}
.btn{
	font-weight: bold;
}
.h100vh{
	min-height: 100vh;
	height: auto;
}
.h40vh{
	height: 40vh;
}
.h60vh{
	height: 60vh;
}
.font-10{
	font-size: 10px;
}
.font-12{
	font-size: 12px;
}
.font-14{
	font-size: 14px;
}
.font-16{
	font-size: 16px;
}
.font-18{
	font-size: 18px;
}
.font-24{
	font-size: 24px;
}
.font-36{
	font-size: 36px;
}
.font-48{
	font-size: 48px;
}
.font-54{
	font-size: 54px;
}
.font-60{
	font-size: 60px;
}
.text-shadow{
	text-shadow: 0px 0px 5px #000;
}
.box-shadow{
	box-shadow: 0px 0px 5px #333;
}

.rot-90{
	transform: rotate(90deg);
}
.rot-180{
	transform: rotate(180deg);
}
.rot-270{
	transform: rotate(-90deg);
}

.ps-6{
	padding-left: 4rem !important;
}
.bg-main{
	background: #e8e6dd;
}
.bg-main-grad{
	background-image: linear-gradient(to right, rgba(232,230,221,1) 60%, rgba(232,230,221,0) 40%);
}
.bg-green{
	background:#2d4243;
}
.bg-green2{
	background: #172626;
}

.bg-green-star{
	background:url('../img/green_star.svg') no-repeat center;
	background-size: contain;
}
.bg-orange-star{
	background:url('../img/orange_star.svg') no-repeat center;
	background-size: contain;
}
.bg-beige-star{
	background:url('../img/beige_star.svg') no-repeat center;
	background-size: contain;
}
.bg-grey-star{
	background:url('../img/grey_star.svg') no-repeat center;
	background-size: contain;
}

.bg-orange{
	background: #b42608;
}
.bg-grey{
	background: #5c6666;
}
.bg-beige{
	background: #d2cebe;
}

.green{
	color: #2d4243;
}
.orange{
	color: #b42608;
}
.btn-round{
	border-radius: 30px;
}
.btn-circle{
	border-radius: 50%;
	width: 30px;
	height: 30px;
}

.btn-ouline-light.active{
	background-color: #f8f9fa;
}
.border-orange{
	border-color: #b42608 !important;
	border-width: 2px;
}
.border-green{
	border-color: #2d4243 !important;
	border-width: 2px;
}
.border-grey{
	border-color: #5c6666 !important;
	border-width: 2px;
}
.border-beige{
	border-color: #d2cebe !important;
	border-width: 2px;
}

.btn-orange{
	border-color: #b42608;
	border-width: 2px;
	background: #b42608;
	color: #FFF;
}
.btn-outline-orange{
	border-color: #b42608;
	border-width: 2px;
	background: transparent;
	color: #b42608;
}
.btn-orange:hover{
	border-color: #9E3A1C;
	border-width: 2px;
	background: #9E3A1C;
	color: #FFF;
}
.btn-outline-orange:hover{
	border-color: #b42608;
	border-width: 2px;
	background: #b42608;
	color: #FFF;
}
.btn-green{
	border-color: #2d4243;
	border-width: 2px;
	background: #2d4243;
	color: #FFF;
}
.btn-green:hover{
	border-color: #2D3B36;
	border-width: 2px;
	background: #2D3B36;
	color: #FFF;
}
.btn-outline-green{
	border-color: #2d4243;
	border-width: 2px;
	background: transparent;
	color: #2d4243;
}
.btn-outline-green:hover{
	border-color: #2d4243;
	border-width: 2px;
	background: #2d4243;
	color: #FFF;
}

.middle{
	display: flex;
    align-items: center;
}
.middle-middle{
	justify-content: center;
}
.middle-left{
	justify-content: left;
}
.middle-right{
	justify-content: flex-end;
}
.middle-bottom{
	display: flex;
    align-items: flex-end !important;
}

#menu{
	border-radius: 25px;
	top: 0px;
	right: 15px;
	width: 230px;
}

#welcome-page{
	background: url(../img/bg-1.png);
	background-repeat: no-repeat;
	background-position: calc(100% + 70px) top;
	background-attachment: fixed;
	background-size: contain;

}

.home-main-title strong{
	margin-left: 100px;
}
.home-main-buttons{
	bottom: 100px; z-index: 1;
}

.star{
	width: 75px;
	height: 75px;
	border-radius: 50%;
}
.rounded-square-lg{
	width: 75px;
	height: 75px;
	border-radius: 15px;
}
.rounded-square-xl{
	width: 100px;
	height: 100px;
	border-radius: 15px;
}
.circle{
	border-radius: 50%;
}
.circle-lg{
	width: 75px;
	height: 75px;
}
.circle-xl{
	width: 100px;
	height: 100px;
}
.card-holder{
	height: 405px;
}
.card-info{
	height: 325px;
	top: 0;
	transition: all .5s;
}
.card-text, .card-button{
	opacity: 0;
	transition: all .5s;
}
.card-info .circle, .card-info .rounded-square-xl{
	transition: all .5s;
}

.card-holder:hover .card-info{
	top: -75px;
}
/*.card-holder:hover .card-info .rounded-square-xl{
	box-shadow: 0px 0px 5px #000;
}
.card-holder:hover .card-info svg{
	filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}*/
.card-holder:hover .card-info .card-button, .card-holder:hover .card-info .card-text{
	opacity: 1;
}

.about-us-tabs{
	width: 50%;
	border-radius: 15px 15px 0px 0px;
	color: #2d4243 !important;
}
.about-us-tabs.active{
	background: #2d4243 !important;
	color: #FFF !important;
}
.about-us-info{
	display: none;
	border-radius: 0px 0px 25px 25px;
}
.about-us-info.active{
	display: block;
}

.q-number-init{
	width: 150px;
	height: 150px;
	border-radius: 75px;
	box-shadow: 0px 0px 0px #2d4243;
	transition: all .5s;
}
.q-number-end{
	width: 150px;
	height: 300px;
	border-radius: 75px;
	box-shadow: 0px 15px 0px #2d4243;
	transition: all .5s;
}

.rotate{
	animation: rotation 10s infinite linear;
}
.rotate60s{
	animation: rotation 60s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.rotate-reverse{
	animation: rotation 5s infinite reverse;
}

#background-video{
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}
.hidden{
	display: none;
}

.logo_mask{
    /*display: inline-block;*/
    position: fixed;
    z-index: -1;

    -webkit-mask-image: url('../img/mask_star.svg');
    mask-image: url('../img/mask_star.svg');

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  
    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: 100%;
    mask-size: 100%;

    /*animation: rotation 10s infinite linear;*/
}

.bright{
	filter: brightness(100);
}

.googleBTN button{

}

.googleBTN button{
	border-color: #b42608 !important;
	border-width: 2px !important;
	background: #b42608 !important;
	color: #FFF !important;
	border-radius: 30px !important;
	border-style: solid !important;
}
.googleBTN button:hover{
	border-color: #b42608 !important;
	border-width: 2px !important;
	background: #b42608 !important;
	color: #FFF !important;
}

.googleBTN-green button{
	border-color: #2d4243 !important;
	border-width: 2px !important;
	background: #2d4243 !important;
	color: #FFF !important;
	border-radius: 30px !important;
	border-style: solid !important;
}
.googleBTN-green button:hover{
	border-color: #2d4243 !important;
	border-width: 2px !important;
	background: #2d4243 !important;
	color: #FFF !important;
}

.jconfirm-bg{
	background-color: #000 !important;
    /*opacity: .75 !important;*/
}
#contact-page{
	background-image: url('../img/contact-bg1.png'), url('../img/contact-bg2.png');
	background-position: bottom left, center right;
	background-size: 250px, 150px;
	background-repeat: no-repeat, no-repeat; padding: 100px 0px;
}

.outer-circle{
	position: relative;
	width: 50%;
	border-radius: 50%;
	border: 5px solid transparent;
	top: -50px;
}
.inner-circle{
	position: relative;
	width: 70%;
	height: 70%;
	border-radius: 50%;
	border: 15px solid #b42608;
	background: #d4d2c7;
}
.inner-circle h1{
	color: #b42608;
}
.arrow {
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 30px solid #172626;
  position: absolute;
  transform: translate(-50%,0) rotate(90deg);
}
.icon-wrapper{
	position: absolute;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 10px solid #172626;
	background: #203434;
	color: #FFF;
	text-align: center;
	font-size: 10px;
	line-height: 1;
	padding: 15px;
	cursor: pointer;
	transition: all .25s ease;
}
.icon-wrapper:hover, .icon-wrapper.active{
	border-color: #b42608;
	background: #dd3c22;
}
.icon-wrapper:hover .arrow, .icon-wrapper.active .arrow{
	border-bottom: 30px solid #b42608;
}
.icon-left{
	transition: all .25s ease;
	transform: translate(-50%, -50%) scale(1);
}
.icon-left:hover, .icon-left.active{
	transform: translate(-50%, -50%) scale(1.1);
}
.icon-1{
	top: 50%;
	left: 0;
}
.icon-2{
	top: 20%;
	left: 10%;

}
.icon-3{
	top: 0;
	left: 35%;
}
.icon-9{
	top: 80%;
	left: 10%;

}
.icon-10{
	top: 100%;
	left: 35%;
}

.icon-right{
	transition: all .25s ease;
	transform: translate(50%, -50%) scale(1);
}
.icon-right:hover, .icon-right.active{
	transform: translate(50%, -50%) scale(1.1);
}
.icon-4{
	top: 0;
	right: 35%;
}
.icon-5{
	top: 20%;
	right: 10%;
}
.icon-6{
	top: 50%;
	right: 0;
}
.icon-7{
	top: 80%;
	right: 10%;
}
.icon-8{
	top: 100%;
	right: 35%;
}
.show768{
	display: none;
}
.inner-circle-bg{
	background: rgba(255,255,255,.8);
	width: 100%;
	height: 100vh;
	top: 0;
	z-index: 9;
	display: none;
}

@media (max-width: 1190px) {
	.outer-circle{
		width: 75%;
	}
}
@media (max-width: 990px) {
	.hide990{
		display: none;
	}
}
@media (max-width: 768px) {
	.show768{
		display: block;
	}
	.arrow{
		display: none;
	}
	.icon-wrapper {
        position: relative;
        transform: translate(0, 0);
        top: 0;
        left: 0;
        width: 150px;
        height: 150px;
        margin: 5px;
    }
	.outer-circle{
		width: 100%;
        display: flex;
        flex-wrap: wrap;
	}
	.icon-left:hover, .icon-left.active {
	    transform: translate(0, 0) scale(1);
	}
	.icon-right:hover, .icon-right.active {
	    transform: translate(0, 0) scale(1);
	}
	.icon-wrapper:hover, .icon-wrapper.active {
	    border-color: #b42608;
	    background: #dd3c22;
	}
	.inner-circle{
		position: absolute;
	    z-index: 10;
	    width: 100%;
	    height: 100%;
	    display: none;
	}
}
/* Portrait phones and smaller */
@media (max-width: 480px) {
	.hide480{
		display: none;
	}
	.about-us-tabs{
		width: 100%;
		border-radius: 15px;
	}
	.about-us-info{
		border-radius: 25px;
	}
	.navbar-brand .nav-link{
		padding: .5rem 0.25rem;
	}
	.font-54{
		font-size: 40px;
	}
	#menu{
		width: 100%;
		top: 5px;
		right: 0;
	}
	#menu-list{
		height: calc(100vh - 50px);
	}
	.bg-main-grad{
		background: #e8e6dd;
	}
	.home-main-title strong{
		margin-left: 0;
	}
	.home-main-subtitle .text-end{
		text-align: left !important;
	}
	.home-main-buttons{
		bottom: 20px; z-index: 1;
	}
	#welcome-page{
		background: none;
	}
	.welcome-btn{
		width: 100%;
	}
	.qxCTlb{
		width: 100%;
	}
	.nosotros-content{
		padding: 20px !important;
	}
	.card-holder{
		border-radius: 25px !important;
	}
	#contact-page{
		background-image: none;
	}
	#border-star, .logo_mask{
		display: none;
	}
	#home-page .container{
		top: -80px;
	}
	.inner-circle{
		position: fixed;
	    z-index: 10;
	    width: 360px;
	    height: 360px;
	    top: 30%;
	    display: none;
	}

}