@font-face 
{
	font-family: 'Agrandir-Regular';
	src: url('https://www.rareretrowatches.com/fonts/Agrandir-Regular.otf');
}
@font-face 
{
	font-family: 'CitadelScriptStd';
	src: url('https://www.rareretrowatches.com/fonts/CitadelScriptStd.otf');
}
html {
	width: 100%;
	margin:0Px 0Px 0Px 0Px;
}
body 
{
	width: 100%;
	margin:0Px 0Px 0Px 0Px;
	padding:0Px 0Px 0Px 0Px;
	background-color: #fff ;   
	color:#191970;
	font-size:1.0em;
	font-family: 'Agrandir-Regular', sans-serif;
	letter-spacing: 0.15em;
}
.lateralreloj {
	background-image: url("https://www.rareretrowatches.com/imagenes/fondoreloj.jpg");
	background-repeat: no-repeat;
	background-position: top, center;
	background-size: 100%;		
	height: 50vh;
}
.lateralrelojsobremesa {
	background-image: url("https://www.rareretrowatches.com/imagenes/fondorelojsobremesa.jpg");
	background-repeat: no-repeat;
	background-position: top, center;
	background-size: 100%;		
	height: 50vh;
}
.lateraljoya {
	background-image: url("https://www.rareretrowatches.com/imagenes/fondojoya.jpg");
	background-repeat: no-repeat;      
	background-position: top, center;
	background-size: 100%;		
	height: 50vh;
}
.solicitar {
	margin-top:-200Px;
}
.enmenu {
	width:15%;
}
.enmenu img{
	width:85%;
}
a {
	text-decoration:none;
	color: #191970;
}
.textosmenu {
	font-size: 0.9em;
	font-weight: bold;
	min-width: 99% !important;
	text-align: center;	
	letter-spacing: 0.15em;
}
.portada_h {
	width:100%;
}
.portada_h img{
	width:100%;
}
.letrainicial {
	font-family: 'CitadelScriptStd', sans-serif;
	font-size: 1.9em;
}
.portada_v {
	display:none;
	width:100%;
}
.portada_v img{
	width:100%;
}
.imagenquiero {
	width:100%;
}
.imagenquiero img {
	-webkit-transition:all .9s ease; /* Safari y Chrome */
	-moz-transition:all .9s ease; /* Firefox */
	-o-transition:all .9s ease; /* IE 9 */
	-ms-transition:all .9s ease; /* Opera */
	width:60%;
}
.imagenquiero:hover img {
	-webkit-transform:scale(1.15);
	-moz-transform:scale(1.15);
	-ms-transform:scale(1.15);
	-o-transform:scale(1.15);
	transform:scale(1.15);
}
.imagenmarca img {
	-webkit-transition:all .9s ease; /* Safari y Chrome */
	-moz-transition:all .9s ease; /* Firefox */
	-o-transition:all .9s ease; /* IE 9 */
	-ms-transition:all .9s ease; /* Opera */
	width:60%;
}
.imagenmarca:hover img {
	-webkit-transform:scale(1.50);
	-moz-transform:scale(1.50);
	-ms-transform:scale(1.50);
	-o-transform:scale(1.50);
	transform:scale(1.50);
}
.como {
	text-align:left;
}
.ir-arriba {
	display:none;
	padding:20px;
	background:#9f9f9f;
	font-size:20px;
	color:#fff;
	cursor:pointer;
	position: fixed;
	bottom:20px;
	right:20px;
}
.llamadagratuita {
	padding:20px;
	background:#101622;
	font-size:20px;
	color:#fff;
	cursor:pointer;
	position: fixed;
	bottom:20px;
	left:20px	
}
.llamadagratuitacontacta {
	padding:12px;
	background:#101622;
	font-size:20px;
	color:#fff;
	cursor:pointer;
}
.solicitarcontacta {
	padding:12px;
	background:#101622;
	font-size:20px;
	color:#fff;
	cursor:pointer;	
}
.whatsapp {
	padding:22px;
	background:#101622;
	font-size:26px;
	color:#fff;
	cursor:pointer;
	position: fixed;
	bottom:20px;
	right:85px	
}
.whatsappcontacta {
	padding:12px;
	background:#101622;
	font-size:20px;
	color:#fff;
	cursor:pointer;
}
.iconos img{
	width:40%;
}
#barraaceptacion {
	min-width: 20% !important;
}
ol li {
	text-align:left;
}
.navbar li {
	min-width: 20% !important;
}
.fondogris {
	padding-top: 40Px;
	padding-bottom: 40Px;
	background-color: #9f9f9f !important;
}
.fondogris h1{
	text-align:center;
	color: #fff;
	font-size: 2.8em;
	font-weight: bold;
}
h1{
	font-size: 2.8em;
	font-weight: bold;
}
h2{
	font-size: 2.0em;
	font-weight: bold;
}
h3{
	font-size: 1.8em;
}
h5{
	font-size: 1.2em;
	font-weight: bold;
}
.marcas img{
	width:100%;
}
hr {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    border: 0 !important;
        border-top-color: currentcolor !important;
        border-top-style: none !important;
        border-top-width: 0px !important;
    border-top: 3px solid #191970 !important;
    width: 100%;

}
.btn {
	letter-spacing: 0.15em;
}
.btn-primary {
	background: #101622;
	border-color: #101622;
}
.btn-primary:hover {
	background: #9f9f9f;
	border-color: #9f9f9f;
}
.btn-primary:focus {
	background: #9f9f9f;
	border-color: #9f9f9f;
	
}
.btn-secondary {
	background: #fff !important;
	border-color: #191970 !important;
	color: #191970 !important;
}
.btn-secondary:hover {
	background: #191970 !important;
	border-color: #191970 !important;
	color: #fff !important;
}
.btn-secondary:focus {
	background: #191970 !important;
	border-color: #191970 !important;
	color: #fff !important;
}
#sedes {
	background-color: #f8f8fc;
	background-image: url("https://www.rareretrowatches.com/imagenes/Mapamundi_diluido_50.jpg");
	background-repeat: no-repeat;
	background-position: top,center;
	background-size: 100%;	
	
}
#sedes p {
	color: #000;
	font-weight: bold;
}
#footer {
	background-color: #f5f5f5;
	font-size: 1.2em;
}
#footer h5{
	font-size: 0.6em;
}
#footer ul{
  padding-left: 0rem;
}
#footer li{
	font-size: 0.6em;
	list-style: none;
}
#footer a{
	text-decoration:none;
	color:#191970;
}
#footer p{
	font-size: 0.6em;
	list-style: none;
}
.textopiepequeno{
	font-size: 0.4em !important;
}
.logo {
	position: relative;    
	left: 25%;
	top: 25%;
	width: 150px;
	height: 150px;
}

@keyframes spin { 
	100% { 
	  -webkit-transform: rotate(360deg);
	  transform:rotate(360deg); 
	}
}

.circular-text {
	animation: spin 20s linear infinite;
	display: block;
	color: back;
	font-weight:bold;
	font-size:1.4em;
	position: absolute;
}
.textosreloj {
	margin-top: -250Px;
}
.textosjoya {
	margin-top: -250Px;
}
.recuadro-marca {
	border: 1px solid #191970;
}
.recuadro {
	border: 1px solid #191970;
	padding-left:10%;
	padding-right:10%;
	padding-top: 5%;
	padding-bottom: 5%;
	text-align:left;
}
.marca {
	width:100%;margin-top:-60Px;
}
.justificado {
	text-align:justify;
}
.derecha {
	text-align:right;
}
@media (max-width:1080px) {
  .container, .container-md, .container-sm {
    max-width: 820px;
  }
	h1 {
		font-size: 2.2em;
	}
	h2 {
		font-size: 1.8em;
	}	
	h3{
		font-size: 1.6em;
	}
	.solicitar {
		margin-top:60Px;
	}
	.marca {
		width:100%;margin-top:-20Px;
	}	
}
@media (max-width: 800px) {
	h1 {
		font-size: 2.0em;
	}
	h2 {
		font-size: 1.6em;
	}	
	h3{
		font-size: 1.4em;
	}	
	.derecha {
		text-align:left;
		padding-left:10Px; 
	}
	.recuadro-marca {
		border: 0px solid #191970;
	}
	.recuadro {	
		border: 0px solid #191970;
	}
	.justificado {
		text-align:left;
	}
	.solicitar {
		margin-top:40Px;
		margin-bottom:40Px;
	}
	.marca {
		width:60%;margin-top:-10Px;
	}	
	.portada_h {display:none;}
	.portada_v {display:block;}	
	body {
		font-size:0.8em;
	}
	.nomovil {
		display:none;
	}
	.textosreloj {
		margin-top: 0Px;
	}
	.textosjoya {
		margin-top: 0Px;
	}	
	.iconos img{
		width:40%;
	}	
	/*
	.marcas img{
		width:50%;
	}	
	*/
	.como {
		text-align:center;
	}
	#footer h5{
		text-align:center;
	}
	#footer ul{
	  text-align:center;
	}
	.llamadagratuita {
		padding:20px;
		background:#101622;
		font-size:10px;
		color:#fff;
		cursor:pointer;
		position: fixed;
		bottom:20px;
		left:20px	
	}	
}
.modal-content {
	color: #000 !important;
}
        .upload-area {
            border: 2px dashed #007bff;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            background-color: #f8f9fa;
            position: relative;
            transition: all 0.3s;
        }

        .upload-area:hover {
            background-color: #e9ecef;
        }

        .upload-area input {
            display: none;
        }

        .preview-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 10px;
        }

        .file-preview {
            position: relative;
            margin: 5px;
            width: 100px;
            height: 100px;
            overflow: hidden;
            border: 1px solid #ddd;
            border-radius: 5px;
            background: #fff;
        }

        .file-preview img,
        .file-preview div {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .remove-btn {
            position: absolute;
            top: 2px;
            right: 2px;
            background: red;
            color: white;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
       .blog-card {
            transition: transform 0.3s ease-in-out;
        }
        .blog-card:hover img {
            transform: scale(1.1);
        }
        .blog-card img {
            transition: transform 0.3s ease-in-out;
            width: 100%;
            height: 200px; /* Altura fija para uniformidad */
            object-fit: cover; /* Recorta la imagen manteniendo la proporción */
            border-radius: 10px 10px 0 0;
        }
        .card-body {
            min-height: 160px; /* Ajusta altura para evitar desajustes en el contenido */
        }       

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .overlay h1 {
            color: #fff;
            font-size: 2.5rem;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
        }
        .content {
            max-width: 800px;
            margin: auto;
            padding: 30px 15px;
        }