@font-face {
  font-family: AbrilFatface-Regular;
  src: url(AbrilFatface-Regular.ttf);
}

@font-face{
  font-family:Inter-VariableFont;
  src: url(Inter-VariableFont_slnt\,wght.ttf);
}


body{
  overflow-x: hidden;
}

h1, h5, .form-label{
  font-family: AbrilFatface-Regular;
}

p, a, .form-control{
  font-family:Inter-VariableFont; 
}

.index{
  overflow-y: hidden;
}

.logo{
  padding-top: 0px;
  padding-left: 0px;
}

.nav-item{
  font-weight: 500;
  text-align: center; 
  font-family:Inter-VariableFont;   
}
    
.collapse{
  background-color: rgb(68, 68, 68);
  border-radius: 8px;
  margin-top: 1rem;
  margin-left: 20%;
  margin-right: 20%;        
}
    
.nav-item:hover {
  background-color: #FF8862 !important;
  border-radius: 5px;
  text-align: center;
}
    
.nav-link{
  color: rgb(255, 255, 255);
}
    
.navbar-toggler{
  color: rgba(255, 255, 255, 0) !important;
  padding: -80px;
}
    
.navbar-toggler-icon{
  background-color: rgb(68, 68, 68) !important;
  padding: 20px;
  border-radius: 5px;
}
    
#carouselExampleControls{
  margin-top: 2rem;
}
    
.d-block{
  width: 100% !important;
}
    
.carousel-item{
  margin-top: 1rem;
  position: center;
  display: none;
  float: none;
  width: 100%;
  margin-right: 1rem;
  margin-bottom: 70rem;
  -webkit-backface-visibility: auto;
  backface-visibility: auto;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}
  
.carousel-caption {
  font-size: 1rem;
  position: center;
  right: 10%;
  bottom: 0px;
  left: 10%;
  top: 100%;
  z-index: 30;
  padding-top: 40px;
  padding-bottom: 0px;
  color: rgb(68, 68, 68);
  text-align: center;
  font-size: large;

}

.carousel-control-next-icon, .carousel-control-prev-icon{
  border-radius: 5px;
}

.portfolio{
  margin-bottom: 3rem;;
}
 
.portfolio .portfolio-item .portfolio-item-caption {
  top: 0;
  left: 0;   
}
    
.page-section-heading{
  padding: 3rem;
  color: #D6A735 !important;
}
    
.btn {
  text-align: center;
}

.btn-secondary{
  margin-left: 35%;
  margin-top: 3%;
  background-color: #D6A735;
  color: white;
  border: none;
}
  
.btn-secondary:hover{
  background-color: white;
  color: #D6A735;
}
  
.btn-primary{
  background-color: white;
  border:solid 2px #D6A735;
  margin: 3px;
  color: rgb(68, 68, 68);
}

.btn-primary:hover{
  background-color: #D6A735!important;
  border: solid 2px rgb(255, 255, 255);
  color: rgb(255, 255, 255);
}

h5{
  font-size: 2rem;
}

h5, .card-text{
  color: rgb(68, 68, 68);
}
  
hr{
color:#FF8862;
border: solid 2px;
width: 20%;
border-radius: 5px;
}

.card{

margin-left: 15%;
margin-right: 15%;
text-align: center;
}

h2{
margin-top: 2rem;
font-family:AbrilFatface-Regular;
}

label{
margin-right: 10%;
color: #444!important;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
}
  
form{
  margin-left: 20%;
  margin-right: 20%;
}

.contacto{
  color: #444;
  text-align: center;
  margin: 30px;
  
}

.footer2{
  margin-top: 5rem;
  width: 100% !important;
}

.footer3{
  margin-top: 1rem;
  width: 80%;
}

.rate{
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}
  
.rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;

}
.rating>input {
  display: none
}

.rating>label {
  width: 8px;
  font-size: 30px;
  font-weight: 300;
  color: #e2d387!important;
  cursor: pointer
}

.rating>label::before {
  content: "\2605";
  position: absolute;
  opacity: 0
}

.rating>label:hover:before,
.rating>label:hover~label:before {
  opacity: 1 !important
}

.rating>input:checked~label:before {
  opacity: 1
}

.rating:hover>input:checked~label:before {
  opacity: 0.4
}

#contactus{
  margin-bottom: 8rem;
}
  


@media (min-width: 1200px){
    
body{
  overflow-x: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.logo{
  padding-top: 20px;
  padding-left: 30px;
}

.nav-item{
  font-weight: 500;
  text-align: center;
  font-family:Inter-VariableFont;
}

.collapse {
  background-color: rgb(68, 68, 68);
  border-radius: 8px;
  margin-top: 1rem;
  margin-left: 48.90%;
  margin-right: 9.2%;
}

.nav-item:hover {
  background-color: #FF8862 !important;
  border-radius: 5px;
  text-align: center;
}

.nav-link{
  color: rgb(255, 255, 255);
}

.navbar-toggler{
  color: rgba(255, 255, 255, 0) !important;
  padding: -80px;
}

.navbar-toggler-icon{
  background-color: rgb(68, 68, 68) !important;
  padding: 20px;
  border-radius: 5px;
}

#carouselExampleControls{
  margin-top: 8rem;
}

.d-block{
  position: relative;
  bottom: 0;
  top: 0;
  width: 50% !important;
}

.carousel-item{
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  margin-bottom: 0rem;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}
  
.carousel-caption {
  position: absolute;
  right: 20%;
  /*bottom: 100px;*/
  left: 50%;
  top: 10%;
  z-index: 10;
  /*padding-top: 20px;
  padding-bottom: 20px;*/
  color: rgb(68, 68, 68);
  text-align: center;
}

.carousel-control-next-icon, .carousel-control-prev-icon{
  border-radius: 5px;
}

.portfolio{
  margin-bottom: 3rem;;
}

.portfolio .portfolio-item .portfolio-item-caption {
  top: 0;
  left: 0;
}

.page-section-heading{
  padding: 3rem;
  color: #FF8862 !important;
}

.btn {
  text-align: center;
}

.btn-secondary{
  margin-left: 35%;
  margin-top: 3%;
  background-color: #D6A735;
  color: white;
  border: none;
}

.btn-secondary:hover{
  background-color: white;
  color: #D6A735;
}

.btn-primary{
  background-color: white;
  border:solid 2px #D6A735;
  margin: 3px;
  color: rgb(68, 68, 68);
}

.btn-primary:hover{
  background-color: #D6A735!important;
  border: solid 2px rgb(255, 255, 255);
  color: rgb(255, 255, 255);
}

h5{
  font-size: 2rem;
}

h5, .card-text{
  color: rgb(68, 68, 68); 
}

hr{
  color:#FF8862;
  border: solid 2px;
  width: 20%;
  border-radius: 5px;
}

.card{
  margin-left: 15%;
  margin-right: 15%;
  text-align: center;
}

h2{
  margin-top: 2rem;
  font-family:AbrilFatface-Regular;
}

label{
  margin-right: 10%;
  color: #444!important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 600;
}

form{
  margin-left: 20%;
  margin-right: 20%;
}

.contacto{
  color: #444;
  text-align: center;
 
}

.footer2{
  margin-top: 5rem;
  justify-content: center;
  display: flex;
}

.footer3{
  margin-top: 1rem;
  width: 100%;
}

.rate{
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
}

.rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

.rating>input {
  display: none
}

.rating>label {
  width: 8px;
  font-size: 30px;
  font-weight: 300;
  color: #e2d387!important;
  cursor: pointer;
}

.rating>label::before {
  content: "\2605";
  position: absolute;
  opacity: 0
}

.rating>label:hover:before,
.rating>label:hover~label:before {
  opacity: 1 !important
}

.rating>input:checked~label:before {
  opacity: 1
}

.rating:hover>input:checked~label:before {
  opacity: 0.4
}

#contactus{
  margin-bottom: 8rem;
}
}