@charset "utf-8";
/* CSS Document */



@import url('https://fonts.googleapis.com/css?family=Krub&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400&display=swap');

body {
	font-family:"Krub";	
	overflow-x:hidden;
}



.logo {padding-bottom:1%;
       height: auto;
	   margin-left: 7%;
	   position:relative;
	   float:left;   
}


@media screen and (max-width: 800px) {
	.logo {
		float:none;
	}	
}



/*    Bread crumb format  */

#crumb {
	text-align:right;
	color: #989aa3;
	font-size: 100%;
	font-style:italic;
	margin-right:6%;
	margin-top:1%;
}

#crumb a:link {
	color: #989aa3;
	text-decoration: none;
}

#crumb a:visited {
	color: #989aa3;
	text-decoration: none;
}

#crumb a:hover {
	color: #989aa3;
	text-decoration: none;
}

#crumb a:active {
	color: #989aa3;
	text-decoration: none;
}


/*  Separador format  */

.title{
font-family: "Satisfy";
color:#555;
font-weight: bold;
font-size: 187.5%; 
text-align: center;
}

@media screen and (max-width: 800px) {
	.title {
		font-size: 180%; 
	}
}


.grape{
	display: block;
	position: relative;
	width: 2%;
	margin: auto;	
}


.grape::after,.grape::before{
	content:'';
	position: absolute;
	width: 200px;
	height: 2px;
	background-color: #555;
	top:0.6em;
}

.grape::before{
	left:-270px;
}

.grape::after{
	right:-300px;
	clear: right;
}



/*  ++++++++++++  Slider Format  ++++++++++   */

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
	
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}



/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


/* Text Slider */

#efecto, .slogan {
position: absolute;
font-size: 187.5%;
font-family: "Courier New";
color:#fff;
top:-200px;
left:300px;
background-color:#a1864c;
}
	


@media screen and (max-width: 800px) {
	#efecto, .slogan {
		position:relative;
		top:3%;
		left:5%;
		font-size: 20px;
	}
}

@media screen and (max-width: 768px) {
	#efecto, .slogan {
		position:relative;
		top:-150%;
		left:12%;
		font-size:22px;
	}
}

/*   Scroll back button    */
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #7e7c7c; /* Set a background color */
  opacity:0.4;
  color: #fff; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #a1864c; /* Add a dark-grey background on hover */
  opacity:0.7;
}


.fondo{
background-image: url(../img/fondo1.png);
background-attachment:scroll;
background-repeat:no-repeat;
background-size:auto;
margin-left:-5%;
}

.contenido img{
width: 45%;
height: auto;	
margin-left:10%;
}


.contenido_cat, .contenido_bod, .contenido_emp{
width:100%;
height:auto;	
padding-left:5%;
padding-right:5%;
padding-bottom:5%;	
}


.contenido_bod {
padding-bottom:10%;	
}


.textoindex h3 {
padding-bottom:3%;	
}


#gallery{
width:100%;	
padding-left:5%;
padding-right:5%;
}


.texto_contenido {	
text-align:justify;
color: #555;
position:relative;
padding-left:3%;
padding-bottom:3%;
width:97%;
padding-top:3%;
}


.texto_contenido_wed {
text-align:justify;
color: #555;
position:relative;
padding-left:5%;
padding-bottom:3%;
width:94.5%;
padding-top:3%;		
}

#txt_bod2, #txt_oe2 {
margin-left:5%;	
}

#btn_wp, #btn_link_oe {
margin-left:10%;	
}

.contenido_privacidad {
width:92%;
padding:8% 8% 10% 6%;	
text-align:justify;
color: #555;
position:relative;
}

.texto_contenido h3, .texto_contenido_cat h3, .texto_contenido_wed h3 {
padding-bottom:1%;
}


.texto_contenido_cat{	
text-align:justify;
width:100%;
color: #555;
position:relative;
padding:0 5% 3% 5%;
padding-top:3%;
}


#prifotoempresa{
width: 70%;
height:auto;	
padding-left:3%;	
padding-right:2%;
}

#segfotoempresas{
float:right;
width:24.2%;	
height:auto;
margin-left:0;
margin-right:3%;
}


#primfotobodas{
width:95%;
height:auto;
margin:0;
padding:0;
margin-left:4.5%;
}

#textoboda {
margin: 0;
}

#textoboda h3 {
padding-bottom:3%;	
}

.bodagallery {
margin-left:4%;
padding-bottom:5%;
}


h3 {
font-size:150%;	
color:#a1864c;
font-weight:200;
}

h4 {
padding-bottom:1%;	
font-size:110%;

}

.container{
padding-top:6%;	
}

.col-md-6{
padding:0;	
}


#foto_nos {
filter: none;
-webkit-filter: grayscale(100%);
width:80%;
padding-left:35%;
padding-top:7%;	
}


#foto_nos:hover {
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
-webkit-filter: grayscale(0%);
}


#txt_nos {
padding-right:20%;	
}

#info {
width:95%;
padding-left:15%;
}



#titulo_info {
padding:0 0 1% 40%;	
font-size:110%;
color:#555;
margin-top:8%;
}






@media (max-width: 480px) {
    .row .col-md-6 > .push-right {
        float: none !important;
    }
}


.textoindex  {
	padding:5% 5% 0 5%;
	text-align:justify;	
	color: #555;
	line-height: 160%;
}



.btn_link {
	margin-left:5%;	
}



/* +++++++ RESPONSIVE RULES INDEX ++++++++ */

@media screen and (max-width: 1280px) {
	.fotoindex {
	width:100%;
	margin-top:1%;
	}
	
	#crumb {
	margin: 4% 2% 4% 0;	
	}
	
	.btn_link{
	font-family: "Barlow Semi Condensed";	
	}
}


/* Diseño para móviles */
@media screen and (max-width: 480px) {
	 .fotoindex {
    width:100%;
    margin-top:6%;
  }	
  
  #row-b {
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
	  margin-right: -15px;
	  margin-left: -15px;
	}
}

@media screen and (max-width: 576px) {
	 .fotoindex {
    width:100%; 
  }	
}


/* Diseño para Tablet */
@media screen and (max-width: 768px) {
	.fotoindex {
    width:100%;
    max-width:768px;
  }	
}


@media screen and (max-width: 992px) {
	.fotoindex {
    width:100%;
  }	
  
  .bodasnet{
	  width:140%;
  }
}


@media screen and (max-width: 1200px) {
	.fotoindex {
    width:100%; 
	margin-top:4%;
  }	
  
  .bodasnet{
	  width:120%;
  }
}



/* FORMATO ENLACE */
#enlace{
position:static;
margin-left:9.6%;
margin-top:5%;
}

#enlace_bodas {
position:static;
margin-left:9%;
margin-top:5%;
}


.textoindex p a, .texto_contenido p a, .texto_contenido_cat p a, .texto_contenido_wed p a {
color:#a1864c;	
text-decoration:none;
}

.textoindex p a:hover, .texto_contenido p a:hover, .texto_contenido_cat p a:hover, .texto_contenido_wed p a:hover {
color:#987b3d;	
}

/*    Footer Format   */
.footer{
background-color: #eaeaea;
width: 100%;
height: 26rem;
font-family: 'Barlow Semi Condensed', sans-serif;
font-weight:200;
color: #555;
font-size:106.25%;
margin-top:6%;
}

.container {
padding-top:2%;	
}



/* Formatos de links del footer */
.footer a:link{
color: #555;
text-decoration: none;
}

.footer a:visited{
color: #555;
text-decoration: none;
}

.footer a:hover{
color: #a1864c;
text-decoration: none;

}

.footer a:active{
color: #a1864c;
text-decoration: none;
}





.btn_link{
background-color:#a1864c;
color:#fff;
font-family:"Barlow Semi Condensed";
border-radius: 4%;
padding: 1% 1.5% 1% 1.5%;
text-decoration:none;	
}


.btn_link:hover{
background-color:#987b3d;	
}


.rrss:hover, .bodasnet:hover {
opacity:0.7;
}

#legal{
float:right;
width:25rem;
margin-right:5%;
font-size:0.813rem;
padding-top:3%;
padding-left:4%;
}

.negrita{
font-weight:bold;
}

.col-md-3{
padding-left:3%;	
line-height:140%;
}

.rrss{
padding-left:7%;	
}

.bodasnet{
padding-top:1.5%;	
}

/*  FORMATO OTROS EVENTOS */
#primfotootev{
	width:100%;
	padding-left:6%;
}

#segfotootev{
	width:100%;	
}



/*	FORMATO POLÍTICA PRIVACIDAD */
.contenido_privacidad{
	width:100%;
	margin-left:0 10%;
}


/*	RESPONSIVE DESIGN */
@media screen and (max-width: 1024px) {
	.footer{
	height:19rem;
	}
}

@media screen and (max-width: 800px) {
	.slideshow-container {
		margin-top:12%;
	}
	
	#prifotoempresa {
		width:97%;
		height:auto;
		padding:2%;
	}
	
	#segfotoempresas {
		width:95%;
		height:auto;
		padding:11%;
	}
	
	#primfotobodas {
		width:94%;
		height:auto;
		padding:0 3%;
		margin-left:1%;
	}
	
	.textoindex {
		margin:0;
		padding:3% 0;	
	}
	
	#textoboda {
		margin-left:3.5%;
	}
	
	#btn_link_bod1 {
		margin-left:3%;
	}
	
	.bodagallery {
		margin-left:2%;
	}
	
	#enlace_bodas {
		margin-left:10%;
	}
	
	.col-md-pull-6, .col-md-push-6, .col-md-6 {
		margin-bottom:4%;
	}
	
	
	#segfotoempresas {
		padding-left:6%;
	}
	
	#enlace {
		margin-left:9.5%;
	}
	
	.title {
		font-size:150%;
		padding:8% 0 5% 0;
	}
	
	.grape {
		padding-bottom:7%;
	}
	
	.texto_contenido h3, .texto_contenido_cat h3 {
		padding-bottom:3%;
	}

	.textoindex {
		margin:3%;
	}
	
	
	#foto_nos {
		width:100%;
		padding:0 10%;
	}
	
	
	#txt_nos {
		width:100%;
		padding: 2% 8% 0 5%;
	}
	
	#titulo_info {
	text-align:center;
	padding-left:3%;	
	}
	
	#info {
	padding-left:0;
	width:100%;	

	}

	
	.btn_link {
	margin-left:3%;	
	}
	
	.footer {
	margin-top:10%;
	height:28rem;
	font-size:120%;	
	text-align:justify;
	}
	
	
	.col-md-3{
	padding-top:6%;	
	}
	
	#legal, .col-md-3{
	padding-left:5%;	
	text-align:left;
	}
	
	#legal{
	padding-top:10%;	
	float:none;
	}
	
	.rrss img{
	width:20%;	
	}
	
	.rrss{
	padding-left:2%;	
	}
	
	.bodasnet{
	width:80%;	
	}
}

@media screen and (max-width: 812px) {
	.footer {
	height:18rem;
	}
	
	.rrss img{
	width:65px;
	}
	
	.bodasnet{
	width:110%;	
	}
}


@media screen and (max-width: 768px) {
	.footer {
	height:28rem;
	}
	
	.rrss img{
	width:60px;
	}
	
	.bodasnet{
	width:130%;	
	}
	
	#legal{
	float:right;
	}
}

@media screen and (max-width: 740px) {
	.footer{
	height:64rem;	
	}

	.bodasnet{
	width:80%;	
	}
	
	#legal{
	float:left;
	}

}

@media screen and (max-width: 736px) {
	.footer {
	height:64rem;

	}
	
	.rrss img{
	width:20%;	
	}
	
	.bodasnet{
	width:80%;	
	}
}


@media screen and (max-width: 667px) {
	.footer {
	height:64rem;

	}
	
	.rrss img{
	width:20%;	
	}
	
	.bodasnet{
	width:80%;	
	}
}


@media screen and (max-width:414px) {
	.footer {
	height:60rem;
	}
	
	.bodasnet{
	width:80%;	
	}
	
	.rrss img{
	width:25%;	
	}	
}


@media screen and (max-width:375px) {
	body {
	overflow-x:hidden;	
	}
	
	.footer {
	height:56rem;
	}
	
	#legal {
	text-align:left;
	}
	
	.bodasnet{
	width:80%;	
	}
	
	.rrss img{
	width:25%;	
	}
}

@media screen and (max-width:360px) {
	#legal {
		float:left;
		padding-left:2%;
	}
}