body 
{
	
	font-family: verdana;
	padding-top: 120px; /*80px*/
}

/*Crear una nueva fuente de letra con la funcion @font-face de CSS3 */
@font-face {
	font-family:headerfont; /* el nombre de la nueva fuente de letra a usar*/
	/*src:url('../fonts/Lobster_1.3.otf'); *//* el directorio font file*/
}


/*Como cambiar la configuracion del navbar, por herramientas de desarrollo F12, la meedida era 1rem para probar he aumeentado su margen derecho en 2*/

.navbar-brand {
	margin-right: 2rem;
	/*font-family: cursive; *//* al poner Pasi Style, coloque esta lineasm antes solo existia margen*/
    /*font-family: Roboto,sans-serif;*/
    font-family: sans-serif;

    
}
 
 /*Cambiar por herramientas de desarrollo F12 el color de letra, se puede comprobar como era antes y ahora con F 12*/
.navbar-light .navbar-nav .nav-link{
    /*color: rgba(0,0,0,.55); Antes*/ 
    color: #808080;; /* color blanco las letras de las opciones de menuú*/
    /*color: #ff9999; */ /* color:light salmon*/
}


.navbar img{
	width: 60px;
	height: 60px;
	margin-right: 2rem;
	
}

/*propiedad Transition y opacity permitin que cuando se desplase abajo (scroll down) la barra de navegacion se reduzca (shrink) y se vuela transparente*/

.navbar {
	padding: 30px 15px;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

/*Cuando el encabezado se contrae, es decir estamos scroll down, desplazandonos abajo, la barra se achica mas delgada* de un paddiong de navbar 30 y 15 se baja a 5px */
.cbp-af-header-shrink {
	padding-top: 5px;
	padding-bottom: 5px;
	opacity: 0.9;
}


/* Cambiar de color (de blanco a salmon ) cuando se elige un menu de la barra . el destacadao(highlight) scrollspy color highlight*/

/* codigo traido de la web...pero solo necesite la senguda clase (.navlink.active) . Mi menu ya era de color blanco y me gusta en minuscula */
/*
.nav-link {
  color: white !important;
  text-transform: uppercase; 
}
*/

.nav-link.active {
	color: #ff9999 !important; /* la propiedad "Important"m es porque el codigo de boostrap bien el highligth x default de color negro...asi que para que sobreescriba cualquier color antes... se coloca Important para que sea prioridad maxima . Es decir el color Salmon se sobrepone al color Negro que viene por default./
	/*color: #FFCA47 !important; */ /* codigo de internet, color moostaza*/
}



/*
-----

#welcomeimage1 {
	float: left;
	margin-right: 30px;
	
}

	#welcomeimage1 > img{
		width: 300px;
		height: 500px;
	}

#welcomeimage2 {
	float: left;
	margin-right: 30px;
}
	
	#welcomeimage2  > img{
		width: 300px;
		height: 500px;
	}



-----
*/

#welcomeimage1 > img{
		
		width: 100%;
		height: 100%;
		/*width: 300px;
		height: 500px;*/
		padding: 5px;
		text-align: center;
	}

#welcomeimage2  > img{
		width: 100%;
		height: 100%;
		padding: 5px;
		/*width: 300px;
		height: 500px;*/
	}

#welcomeimage3  > img{
		width: 100%;
		height: 100%;
		/*width: 300px;
		height: 500px;*/
		padding: 5px;
	}


#welcometext {
	/*float: left;*/
	width: 70%;
	font-size: 12px;
	margin-top: 20px;
	margin-bottom: 20px;
	/*
	column-count: 2;
	-webkit-column-count:2; La funcion column-countm para otros navegadores */

	/* Otra alternativa para dividir columnas*/
	column-width: 200px;
	column-gap: 40px;
}


	#welcometext > header{
		color: #ffb6c1;
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 3px;

	}

	#welcometext > header:hover {
	    color: #ffb6c1;
	}



/* Agregare una flecha hacia abajo, que indique que hay mas contenido en la web hacia abajo */
/* la clase .down-button, centra el boton en el medio de la pag, Este en el lugar que sea el boton, lo centra */

/* Voy a comentar, porque no aparece la flecha, aparece en blando*/


.down-button{
	position: absolute;
	bottom: 40px;
	width: 100%;
	text-align: center;
}

.down-button i {
	 /*color: white;*/
	color: #ff9999; /* color:light salmon*/
}




.work {
	width: 100%;
	margin-bottom: 20px;
}

	/*
	
	.producarticle > figure {
		margin-left: 5px;
		margin-right: 25px;
	}

	.producarticle > figure > img {
		width: 280px;
		height: 500px;
		
	}
	*/

	/* Ya no utilizo el tab figure, porque acorta la imager, solo un contenedor (articule y luego img )
		antes : article > figure > img
		ahora: ariticle > img ; */

article{
	padding: 5px;
	margin-bottom: 20px;
}


article img{
	/*width: 280px;
	height: 500px;*/
	/* al no poner la imagen al 100% se deforma, hago la casilla (col-sm-4) y coloco al 100% sin usar pixeles px)*/
	width: 100%;
	height: 100%;

	text-align: center;
	/*box-shadow: 6px 6px red;*/
	box-shadow: 6px 6px 8px #777;
	/*margin-bottom: 20px;*/
}


.casual {
	width: 100%;
	margin-bottom: 20px;
}

.party {
	width: 100%;
	margin-bottom: 20px;		
}


/*Si deseas centrar una imagen, se tiene que colocar el margen derecho e izquierdo en auto (automatico)
normalmente una imgaen tiene propiedad y es "dsiplay: inline;" y eso lo pega al margen izquierdo.
pero usando boostrap img-responsive (img-fluid) lo convierte "display:block" es decir no lo pega al 
margen izquierdo, asi que solo queda centrarlo con las propiedad de margen izquierdo y derecho en auto, para que lo centre.
Esto es cuando se usa solo la imagen dentro de un container y una row, Porque cuando se usa la grilla ya nO es necesario, hacer tanto con las imagenes, se ajustan a la grilla. 

.img-responsive {
	margin-left: auto;
	margin-right: auto;
	border: 3px solid darkblue;
	box-shadow: rgba(0,0,0,0,5) 10px 10px 60px;
}
*/


/* Hacer que no parezca un Hiperlink con ccs*/

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

/* crear un Boton: Cambiar un texto lineal a un Boton con esquinas redondeadas, usando CSS3 con el atributo "Border-radius" (esquina recondeada) da el efecto a un boton */

.addtocarbutton {
	cursor: pointer; /*cambia el cursor de flecha a una mano, cuando se pasa por el texto "Add to cart" */
	padding: 4px 25px; /* 4px es arriba y abajo y 25px es derecha y izquierda*/
	/*margin-left: 250px; */ /* situar el boton en el centro*/
	background-color: #ff9999; /* color:light salmon*/

	border-radius: 8px; /* Muestra la forma de bonton con las esquinas redondeadas*/

		/*la funcion "border-radius" para diferentes navegadores que no son google chrome*/
		-moz-border-radius: 8px;
		-webkit-border-radius:8px;


	/* No he colocado ni border ni shadow (sombra), solo el borde*/
	/*border: 1px solid #381f09; */ /* separa los botones y pinta de marron el borde. */
	
	/*box-shadow: 0 0 4px rgba(0,0,0, .75); *//* Efecto sombra del boton*/

		/* la funcion "box-shadow" para diferentes navegadores que no son chrome*/
		/*-webkit-box-shadow:0 0 4px rgba(0,0,0, .75);*/
		/*-moz-box-shadow:0 0 4px rgba(0,0,0, .75);*/


	color: #ffffff; /*color: Blamco de las letras*/
	font-size: 0.8em;
	width: 80px; /* Ancho del boton* IMPORTANTE*/
	font-weight: normal;
}


.center_boton {
	text-align: center;
}


.backgroundgradient{
	
	/*background: linear-gradient(to right,#808080,#808080); */ /* Nuevo en cccs3 linear-gradient (direccion, color de inicio, color fin) */
	/*color: #fdfdfd;*/ 
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 3px;
	padding-left: 10px ;

}


.backgroundgradient_titulo{
	
	/*background: linear-gradient(to right,#808080,#808080); */ /* Nuevo en cccs3 linear-gradient (direccion, color de inicio, color fin) */
	/*color: #fdfdfd;*/ 
	font-family: headerfont; /* Aplicar la nueva fuente de letra, configurada lineas arriba */
	font-size: 25px;
	font-style: oblique;
	/*color: #808080;*/
	
	font-weight: bold;
	margin-bottom: 3px;
	padding-left: 10px ;
	/*color: #ffb6c1;*/

}


.backgroundgradient_titulo:hover {
	    /*background-color: #f64a8a;*/
	    color: #ffb6c1;
	}



/* -- Prueba Video -- */

.video-wallpaper {
	display: block;
	position: relative;
	width: auto;
	height: auto;
	padding: 100px 0;
	min-height: 100%;
	background: no-repeat center center;
	background-attachment: scroll;
	background-color: #222;
	background-size: cover;
}


/*hacer la prueba de video youtube y luego comentar todo acerca de video,
no va porque en dispositivos moviels , no carga por el ancho de banda.*/




/*---------carousel---------------------*/



#carousel{ 

	margin: 40px 0px;
	width: 100%; /* igual que work casual, el contenedor (#carousel) se le da el max andho (width 100%) */
	
	/*padding: 5px;
	margin-bottom: 20px;*/
}


#carousel img {
	width: 100%;
	height: 100%;

}




/* --------Pagina contact.html----------*/

#Contact {
	float: left;
	width: 70%;
	font-size: 12px;
	margin-top: 20px;
	margin-bottom: 20px;
	
}


	#Contact > header{
		color: #ffb6c1;
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 30px;

	}

	#Contact > span {
		margin-left: 200px;
		color: #603813;
	}