@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');

:root{
    --beige: rgb(228,213,201);
    --blanco: rgb(255,252,249);
	--fuente-cursiva: 'Niconne', sans;
	--fuente-normal: 'EB Garamond', sans;
	--fuente-ancha: 'Fredericka the great', cursive;
	--fuente-sans: 'Noto Sans JP', sans-serif;
}

/* ANIMACIONES */

@keyframes transitionIn{
	from{
		opacity: 0;
		transform: scaleX(0);
	}
	to{
		opacity: 1;
		transform: scaleX(600px);
	}
}

.animation-transitionIn{
	animation: transitionIn 0.75s;
}

.slide-in-from-right {
	animation: 1.5s ease-out 0s 1 slideInFromRight forwards;
  }
  
  @keyframes slideInFromRight {
	0% {
	  transform: translateX(50%);
	}
	100% {
	  transform: translateX(0);
	}
  }
  
/* GENERAL */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: var(--fuente-normal);
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
    background-color: var(--blanco);
}
ol, ul, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1,h3,h4,h5,ol,ul{
	letter-spacing: 1px;
}

html{ scroll-behavior: smooth;}

/* COMIENZO */

#social-media-top i{
	color: var(--blanco);
	padding: 0 20px;
}

#social-media-top i:hover{
	color: var(--blanco);
	text-shadow: 1px 1px 6px white;
}
.mi-nav{
	background-image: url(../img/budin2.jpeg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	min-height: 100vh;
}

.navbar{
	background-color: rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
}

.navbar .navbar-brand{
	padding:0 !important;
}

.navbar .navbar-nav{
	margin: 0 auto;
}

.navbar .nav-item a{
	font-family: var(--fuente-normal)!important;
	font-size: 1.4em; 
	padding: 50px 30px  !important;
	color: var(--blanco) !important;
}

.navbar .nav-item a:hover{
	color: var(--blanco);
	text-shadow: 1px 1px 6px white;
}

.brand{
    padding: 20px 30px;
    width:fit-content;
    background-color: var(--beige);
	margin-top: 60px;
	color: black;
    border: 2px solid black;
    box-shadow:  0 0 15px 15px rgba(0, 0, 0, 0.2);
}
.brand h1{
	font-size: 6em;
	text-align: center;
	font-family: var(--fuente-normal);
	padding: 10px 0px;
}
.brand p{
	font-size: 2.5em;
	font-family: var(--fuente-cursiva);
	text-align: center;
}
#boton-hero{
	margin-top: 270px;
}
#boton-hero button{
	padding: 10px;
	transition: 0.3s all;
}

#boton-hero button:hover{
	transform: translateY(15px);
}
#branding{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#frase{
    text-align: center;
    font-family: var(--fuente-normal);
    font-size: 3em;
    color: black;

}
.espaciador{
	min-height:10vh;
	background-color:var(--blanco);
}

#cards{
	background-color: var(--blanco);
	padding: 30px 0;
}

.card{
	background-color: rgba(0, 0, 0, 0.5);
	background-blend-mode: multiply;
	display: flex;
	align-items: center;
	justify-content:flex-end;
	margin: 20px 10px;
	max-width: 600px;
	min-height: 400px;
	box-shadow: 0 0 20px 7px rgba(0,0,0,0.2);
	transition: 0.5s ease background-color;  
}

.card:hover{
	background-color: rgba(0, 0, 0, 0.3);
}

.card1{
	background-image: url(../img/viedma.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.card2{
	background-image: url(../img/juli2.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.card3{
	background-image: url(../img/contact.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.card4{
	background-image: url(../img/p4.jpeg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.card5{
	background-image: url(../img/receta.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.btn-card{
	color: var(--blanco);
	text-shadow: 1px 1px 7px black;
	font-family: var(--fuente-normal);
	font-size: 1.8em;
	margin-bottom: 20px;
}

.btn-card:hover{
	color: var(--blanco);
	text-shadow: 1px 1px 6px white;
	background-color: rgba(0, 0, 0, 0.3);
	outline:1px solid black

}

.titular{
	margin: 50px 0;
	text-align: center;
}

.titular h4{
	font-size: 3em;
	font-family: var(--fuente-ancha);
}
.titular h3{
	font-size: 1.9em;
	font-family: var(--fuente-cursiva);
}

#productos-destacados{
	background-color: var(--blanco);
	padding: 30px 0;
}

.card-body{
	box-shadow: 0 0 20px 7px rgba(0,0,0,0.1);
}

.card-title{
	font-family: var(--fuente-normal);
	font-size: 2.5em;
	color: black;
}

.card-body{
	width:100%;
	min-height: fit-content;
	background-image: url(../img/);
}
.card-body .link{
	color: black;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
}

.card-body a:hover{
	text-decoration: none;
	color:white;
}

.container.cont{
	margin:0 auto!important;
}

.wrapper{
	letter-spacing: 1px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-image: url(../img/b1a.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	min-height: 20vh;
}

.carousel-item{
	width:100%;
	max-height: 75vh;
}

.carousel-item > img {
	margin: 0 auto;
  }
#sobre-mi{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 75vh;
	background-image: url(../img/a.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	
}

#img-juli{
	max-width: 350px;
	border-radius: 50%;
	margin: auto;    
    display: block;
	box-shadow: 0 0 1px 5px rgba(0, 0, 0, 0.3)
}

#sobre-mi h1{
	padding-top:1ch ;
	font-size: 2.6em;
	font-family: var(--fuente-normal);
}

#sobre-mi p{
	font-size: 2em;
	line-height: 1.6;
	font-family: var(--fuente-sans);
}

#sobre-mi p:nth-child(2){
	padding: 50px 0;
}
#p1-julibio{
	transform: translateX(-100px);
}

#p2-julibio{
	transform: translateX(-100px);
}

#social-bio{
	display: flex;
	justify-content: center;
	align-items: center;
}
#social-bio a i{
	color:#000;
	transform: translateX(-150px);
	margin-top: 78px;
	margin-left:1ch;
	padding: 15px;
	transition: all 250ms;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.1);
}

#social-bio a i:hover{
	color:var(--beige);
}

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    min-height:0;
	border: var(--beige) 1px solid;
}

.map-responsive iframe{
    left:0;
    top:0;
    min-height:100%;
    width:100%;
	position:absolute;
}

#locacion h1{
	font-family: var(--fuente-cursiva);
	font-size: 2.2em;
	padding: 30px;
}
#contacto li{
	font-size: 1.9em;
	font-family: var(--fuente-normal);
	margin: 50px 30px;
	margin-bottom: 0;
	display: flex;
}

#contacto li i{
	padding-right: 20px;
}

#social-location a i{
	color:#000;
}
#social-location a i:hover{
	color:white;
}

#mas-info{
	min-height:50vh;
}
#mas-info .columnas a i:hover{
	color:rgba(0, 0, 0, 0.5);
}
.mt-1{
	margin-top:100px !important;
}
.columnas{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.columnas img{
	max-width:600px;
}
.columnas i{
	padding: 10px;
	color: var(--beige);
}
.columnas h1{
	font-family: var(--fuente-cursiva);
	font-size: 2.2em;
	padding-top: 30px;
	padding-bottom: 10px;
}

.columnas p{
	font-family: var(--fuente-normal);
	font-size: 1.3em;
	padding-bottom: 10px;
}

#footer{
	min-height: 25vh;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: rgba(0, 0, 0, 0.8);
}

#lista-footer-left{
	margin-left:10px;
}

#lista-footer-left li{
	font-size: 1.5em;
	padding: 5px;
	color: #000;
}
#lista-footer-left a li{
	transition: 0.3s;
}

#lista-footer-left a li:hover{
	color: #fff;
}

#footer-coso p{
	text-align: right;
	font-family: var(--fuente-normal);
}

#footer-coso i{
	font-size: 1.6em;
	padding: 10px 20px;
	color: #000;
}
#footer-coso i:hover{
	color: #fff;
}

@media only screen and (max-width:600px) {
	.nav-item{
		font-size: 1em; 
		padding:0  !important;
	}

	#p1-julibio{
		transform: translateX(0);
	}
	
	#p2-julibio{
		transform: translateX(0);
	}

	#img-juli{
		max-width: 200px;
		border-radius: 50%;
		box-shadow: 0 0 1px 5px rgba(0, 0, 0, 0.3)
	}
	#sobre-mi{
		min-height: 100vh;
	}

	#social-bio a i{
		transform: translateX(0);
		padding: 0;
	}

	#mas-info{
		min-height:auto;
	}
	#mas-info .columnas a i:hover{
		color:rgba(0, 0, 0, 0.5);
	}
	.mt-1{
		margin-top:100px !important;
	}
	.columnas{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.columnas i{
		padding: 10px;
		color: var(--beige);
	}
	.columnas h1{
		font-family: var(--fuente-cursiva);
		font-size: 2em;
		padding-top: 30px;
		padding-bottom: 10px;
	}
	
	.columnas p{
		font-family: var(--fuente-normal);
		font-size: 1.3em;
		padding-bottom: 10px;
	}

	.columnas img{
		margin: 60px auto;
		max-width: 300px;
	}

	.map-responsive{
		display:flex;
		align-items: center;
		justify-content: center;
		border: var(--beige) 1px solid;
	}
	
	.map-responsive iframe{
		height:100%;
		width:100%;
	}

}