/* fonts:
 Amalfi_Coast.ttf, Cherolina.otf, Gallient.ttf, OpenSans-Light_0.ttf, OpenSans-Semibold_0.ttf, 
PlayfairDisplay-BoldItalic.ttf, PlayfairDisplay-Regular.ttf, PlayfairDisplay-RegularItalic.ttf  */

@font-face {
    font-family: fontAmalfiCoast;
    src: url(../fonts/Amalfi_Coast.ttf);
}  
@font-face {
    font-family: fontCherolina;
    src: url(../fonts/Cherolina.ttf);
}
@font-face {
    font-family: fontGallient;
    src: url(../fonts/Gallient.ttf);
}
@font-face {
    font-family: fontOpenSansLight0;
    src: url(../fonts/OpenSans-Light_0.ttf);
}
@font-face {
    font-family: fontOpenSansSemibold0;
    src: url(../fonts/OpenSans-Semibold_0.ttf);
}
@font-face {
    font-family: fontPlayfairDisplayBoldItalic;
    src: url(../fonts/PlayfairDisplay-BoldItalic.ttf);
}
@font-face {
    font-family: fontPlayfairDisplayRegular;
    src: url(../fonts/PlayfairDisplay-Regular.ttf);
}
@font-face {
    font-family: fontPlayfairDisplayRegularItalic;
    src: url(../fonts/PlayfairDisplay-RegularItalic.ttf);
	}
	
	
/* clases de fuentes para titulos de sliders*/
.fontAmalfiCoast {
    font-family: fontAmalfiCoast;

    }

.fontCherolina {
    font-family: fontCherolina;
    }

.fontGallient {
    font-family: fontGallient;
    }

.fontOpenSansLight0 {
    font-family: fontOpenSansLight0;
    }

.fontOpenSansSemibold0 {
    font-family: fontOpenSansSemibold0;
    }

.fontPlayfairDisplayBoldItalic {
    font-family: fontPlayfairDisplayBoldItalic;
    }

.fontPlayfairDisplayRegular {
    font-family: fontPlayfairDisplayRegular;
    }

.fontPlayfairDisplayRegularItalic {
    font-family: fontPlayfairDisplayRegularItalic;
    }
	
	
	
	/*  Font-size depends of the screen size*/
 


@media screen and (max-width: 479px){
	.fontSize{
		font-size: 2rem;
	}
}


@media (min-width:480px){
	.fontSize {
		font-size: 2.5rem;
	}
}
@media (min-width:690px){
	.fontSize {
		font-size: 3.5rem;
	}
}
@media (min-width:1024px){
	.fontSize {
		font-size: 4.5rem;
	}
}
@media (min-width:1200px){
	.fontSize {
		font-size: 5.5rem;
	}
}

.mrg0{
	margin:0;
}


/* positions of titles */

.bottomLeftAlign {
	
	padding: 20px; 
	position: absolute;
	display: block;
	visibility: visible;
	left:1.5rem;
	bottom:4rem;
	z-index:2;
	text-align:left;
	line-height:1.2;
	
	background-color: #00000008;
} 

.bottomRightAlign {
	
	padding: 20px; 
	position: absolute;
	display: block;
	visibility: visible;
	right: 1.5rem;
	bottom:4rem;
	z-index:2;
	text-align:right;
	line-height:1.2;
	
	background-color: #00000008;
} 

.bottomCenterAlign {
	
	padding: 20px; 
	position: absolute;
	display: block;
	visibility: visible;
	left:50%;
	bottom:4rem;
	transform: translateX(-50%);
	z-index:2;
	text-align:center;
	line-height:1.2;
	
	background-color: #00000008;
}

.centerAlign {
	
	padding: 20px; 
	position: absolute;
	display: block;
	visibility: visible;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	z-index:2;
	text-align:center;
	line-height:1.2;
	
	background-color: #00000008;
}



@media screen and (max-width: 479px){
	.bottomLeftAlign{
		padding:15px; 
		position: absolute;
		display: block;
		visibility: visible;
		left:0.5rem;
		bottom:4rem;
		z-index:2;
		text-align:left;
		line-height:1.2;
		background-color: #00000008;
	}
}

@media screen and (max-width: 479px){
	.bottomRightAlign {
	
		padding: 15px; 
		position: absolute;
		display: block;
		visibility: visible;
		right: 0.5rem;
		bottom:4rem;
		z-index:2;
		text-align:right;
		line-height:1.2;
		background-color: #00000008;
	} 
}


 /* styles of button to move to collection*/
 
.slideTitleButton {
	font-family: fontOpenSansSemibold0;
	text-align:center;
	padding: 3px 20px;
	z-index: 3;
	font-size: 1.5rem;
	border:2px solid #ffffff;
	background-color: #80808000;
	margin-top:10px;
	vertical-align:90%;
}

@media screen and (max-width: 479px){
	.slideTitleButton {
		font-family: fontOpenSansSemibold0;
		text-align:center;
		padding: 1px 12px;
		z-index: 3;
		font-size: 1.2rem;
		border:1px solid #ffffff;
		background-color: #80808000;
		margin-top:10px;
		vertical-align:90%;
	}
}