:root 
{
  --max-font-size: 100px;
  --dif-font-size: 30px;
  --font-height-sum: 70px;
  --small-space: 30px;
  --medium-space: 70px;
  --big-space: 100px;
  --xbig-space:200px;
  --back-color: rgba(0,0,255,0.0);
  --scr-w: 990px;
  --scr-h: 1000px;
  --gold-color: #DAA520;
  /*--tittle-color: #DAA520;*/
  --tittle-color:#002853;
}

html
{
	width: 100%;
	max-width:var(--scr-w);
	margin: 0 auto;
	overflow-x:hidden;
	padding:0;
}

body
{
	width: 100%;
	max-width:var(--scr-w);
	margin: 0 auto;
	overflow-x:hidden;
	padding:0;
}

@-webkit-keyframes bounce{0%,to{-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1);-webkit-transform:translateY(-25%);transform:translateY(-25%)}
50%{-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1);-webkit-transform:none;transform:none}
}
@keyframes bounce{0%,to{-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1);-webkit-transform:translateY(-25%);transform:translateY(-25%)}
50%{-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1);-webkit-transform:none;transform:none}
}
.animate-bounce{-webkit-animation:bounce 1s infinite;animation:bounce 1s infinite}

div.row
{
	margin-left:0px;	
}

a.img
{
	text-decoration: none;
}

#AudioControl{z-index:900; position:fixed; top:3%; right:3%; display:flex; align-items:flex-start; visibility:hidden;}
#AudioControl.play{visibility:visible;}
#AudioControl button
{
	font-size:2em;
	justify-content:flex-end;
	border-radius:.25rem;
	--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity));
	padding: .5em!important;
}

#carta
{
	top:0px;
	left:0px;
	position:fixed;
	z-index:9999;
	width: 100vw;
	height: 100vh;
	/* background-color:rgba(0,0,0,0.9); */
}

h1,h2,h3,h4,h5,h6
{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#principal
{
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 50vw;
	transform: translate(-50vw, 0%);
	width: 100%;
	max-width: 1000px;
	min-height: 100vh;
	background-color: var(--back-color);
}

#fondo
{
	z-index: 0;
	position: fixed;
	background-image: url('../img/background.jpg');
	background-repeat: no-repeat;
	/*background-size: cover;*/
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 50vw;
	transform: translate(-50vw, 0%);
	width: 100%;
	max-width: 1000px;
	min-height: 100vh;
	max-width:var(--scr-w);
}

#encabezado
{
	position:relative;
	margin-top: 0px;
	width:100%;
	min-height: 100dvh;
	margin:0;
	padding:0;
}

.seccion
{
	width:96%;
	margin-left: 2%;
	margin-right: 2%;
	margin-top: var(--small-space);
	margin-bottom: var(--small-space);
	min-height: 200px;
	background-color: var(--back-color);
	padding-top: 1px;
	padding-bottom: 1px;
}

.titulo_seccion
{
	position:relative;
	text-align: center;
	font-size: 6em;
	color: var(--tittle-color);
	font-family: 'Hercules';
	text-shadow:
        0 0 8px rgba(255, 255, 255, 1),
        0 0 16px rgba(255, 255, 255, 0.8),
        0 0 32px rgba(255, 255, 255, 0.6);
	display:block;
}

.subtitulo_seccion
{
	position:relative;
	text-align: center;
	font-size: 4em;
	color: var(--tittle-color);
	font-family: 'Hercules';
	text-shadow:
        0 0 8px rgba(255, 255, 255, 1),
        0 0 16px rgba(255, 255, 255, 0.8),
        0 0 32px rgba(255, 255, 255, 0.6);
}

.subtitulo_diogenes
{
	position:relative;
	text-align: center;
	font-size: 4em;
	color: var(--tittle-color);
	font-family: 'Diogenes';
	text-shadow:
        0 0 8px rgba(255, 255, 255, 1),
        0 0 16px rgba(255, 255, 255, 0.8),
        0 0 32px rgba(255, 255, 255, 0.6);
}

.subtitulo
{
	position:relative;
	top: 10px;
	bottom:10px;
	text-align: center;
	font-size: 3em;
	font-family: 'Hercules2';
		text-shadow:
        0 0 8px rgba(255, 255, 255, 1),
        0 0 16px rgba(255, 255, 255, 0.8),
        0 0 32px rgba(255, 255, 255, 0.6);
}

.festejado
{
	position:relative;
	text-align: center;
	font-size: 8em;
	color: var(--tittle-color);
	font-family: 'Hercules';
	text-shadow:
        0 0 8px rgba(255, 255, 255, 1),
        0 0 16px rgba(255, 255, 255, 0.8),
        0 0 32px rgba(255, 255, 255, 0.6);
}

.centered
{
	position:relative;
	left:50%;
	transform: translate(-50%, 0%);
}

.img-cnt
{
	width: 100%;
	height: auto;
}

.img-main
{
	height:1000px;
	max-height: 35vh;
	width: auto;
	border-radius:50px;
}

.img-card
{
	max-width: 50%;
	height: auto;
	border-radius:50px;
}

.img-card-2
{
	max-width: 75%;
	height: auto;
	border-radius:50px;
}

.img-card-3
{
	width: 100%;
	max-width:250px;
	height: auto;
	border-radius:50px;
	
}

.img-icn
{
	width: 25%;
	height: auto;
}

.row
{
	display: block;
	padding:0 0 0 0 ;
	margin: 0 0 0 0;
	width:100%;
}

p.counter, h2.counter
{
	display: inline-block;
	font-size: 4em;
	padding-top:30px;
	padding-bottom:30px;
	color: var(--tittle-color);
	font-family: 'Diogenes';
	/*text-shadow:
        0 0 8px rgba(255, 215, 0, 1),
        0 0 16px rgba(255, 215, 0, 0.8),
        0 0 32px rgba(255, 215, 0, 0.6);
	*/
	text-shadow:
        0 0 8px rgba(255, 255, 255, 1),
        0 0 16px rgba(255, 255, 255, 0.8),
        0 0 32px rgba(255, 255, 255, 0.6);
}


.counter:after 
{
	content:'';
	width: 90%;
	height: 90%;
	top:5%;
	left:5%;
	/*
	border-radius: 20px;
	background: var(--gold-color);*/
	position: absolute;
	z-index:-1;
	background: url('../img/nube.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	
}

p.counter2, h2.counter2
{
	display: inline-block;
	font-size: 2.5em;
	padding-top:30px;
	padding-bottom:30px;
	color: var(--tittle-color);
	font-family: 'Diogenes';
	/*text-shadow:
        0 0 8px rgba(255, 215, 0, 1),
        0 0 16px rgba(255, 215, 0, 0.8),
        0 0 32px rgba(255, 215, 0, 0.6);
	*/
	text-shadow:
        0 0 8px rgba(255, 255, 255, 1),
        0 0 16px rgba(255, 255, 255, 0.8),
        0 0 32px rgba(255, 255, 255, 0.6);
}


.counter2:after 
{
	content:'';
	width: 90%;
	height: 90%;
	top:5%;
	left:5%;
	/*
	border-radius: 20px;
	background: var(--gold-color);*/
	position: absolute;
	z-index:-1;
	background: url('../img/nube.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	
}

.col-3
{
	position:relative;
	width:24%;
	text-align: center;
	margin: 0 0 0 0 ;
	padding: 0 0 0 0;
}

.s-spc
{
	margin-top: var(--small-space);
	margin-bottom: var(--small-space);
}

.m-spc
{
	margin-top: var(--medium-space);
	margin-bottom: var(--medium-space);
}

.b-spc
{
	margin-top: var(--big-space);
	margin-bottom: var(--big-space);
}

.x-spc
{
	margin-top: var(--xbig-space);
	margin-bottom: var(--xbig-space);
}

.st-spc
{
	margin-top: var(--small-space);
}

.mt-spc
{
	margin-top: var(--medium-space);
}

.bt-spc
{
	margin-top: var(--big-space);
}

.xt-spc
{
	margin-top: var(--xbig-space);
}

.sb-spc
{
	margin-bottom: var(--small-space);
}

.mb-spc
{
	margin-bottom: var(--medium-space);
}

.bb-spc
{
	margin-bottom: var(--big-space);
}

.xb-spc
{
	margin-bottom: var(--xbig-space);
}

.s-pad
{
	padding-top: var(--small-space);
	padding-bottom: var(--small-space);
}

.m-pad
{
	padding-top: var(--medium-space);
	padding-bottom: var(--medium-space);
}

.b-pad
{
	padding-top: var(--big-space);
	padding-bottom: var(--big-space);
}

.x-pad
{
	padding-top: var(--xbig-space);
	padding-bottom: var(--xbig-space);
}

.st-pad
{
	padding-top: var(--small-space);
}

.mt-pad
{
	padding-top: var(--medium-space);
}

.bt-pad
{
	padding-top: var(--big-space);
}

.xt-pad
{
	padding-top: var(--xbig-space);
}

.sb-pad
{
	padding-bottom: var(--small-space);
}

.mb-pad
{
	padding-bottom: var(--medium-space);
}

.bb-pad
{
	padding-bottom: var(--big-space);
}

.xb-pad
{
	padding-bottom: var(--xbig-space);
}


.btn-apertura
{
	position:absolute;
	top:65%;
	left:30%;
	width:40%;
}

.btn-cloud 
{
	width:100%;
	position: absolute;
	padding: 0.7rem 2rem;
	color: #006AE5;
	background: #FFFFFF;
	border-radius: 100px 100px 100px 0;
	border-color:transparent;
	font-family: 'Diogenes';
	font-weight: 600;
	font-size: 2.5rem;
	letter-spacing: 1px;
	line-height: 4.188rem;
	border-radius: 50px;
	text-transform: uppercase;
	text-decoration: none;
	-webkit-box-shadow: 0 10px 30px 0 rgba(0,106,229,0.25);
	-moz-box-shadow: 0 10px 30px 0 rgba(0,106,229,0.25);
	box-shadow: 0 10px 30px 0 rgba(0,106,229,0.25);
	z-index:9999;
}


.btn-cloud:after
{
	content: '';
	width: 40%;
	height: 80%;
	background: #FFFFFF;
	position: absolute;
	margin-top: -10px;
	border-radius: 50px;
	left: 10%;
	content: '';
	margin-top: -50px;
	z-index:-1;
}

.btn-cloud:before
{
	content: '';
	width: 25%;
	height: 50%;
	border-radius: 100px;
	background: #FFFFFF;
	position: absolute;
	left: 55%;
	content: '';
	margin-top: -30px;
	z-index:-1;
}

.btn-cloud .cloud-bubble-1 
{  
	content: '';
	width: 20%;
	height: 80%;
	border-radius: 50px;
	background: #FFFFFF;
	position: absolute;
	left: 22%;
	content: '';
	margin-top: -85px;
	z-index:99;
}

/* Burbuja lateral mini */
.btn-cloud .cloud-bubble-2 {
	content: '';
	width: 25%;
	height: 60%;
	border-radius: 50px;
	background: #FFFFFF;
	position: absolute;
	left: 35%;
	content: '';
	margin-top: -60px;
	z-index:99;
}


.greek-divider
{
	position:relative;
	width:100%;
	height: 4em;
	background: url('../img/divider.png') repeat-x center;
	background-size: auto 80px;
	margin-top:4em;
	margin-bottom:4em;
	padding-top:1px;
	padding-bottom:1px;
}

#div-bottom
{
	position:absolute;
	bottom:0px;
	margin-bottom:0px;
}



.nube 
{
  position: relative;
  display: block;
  width: 37%;
  max-width:370px;
  height: 3.4em;
  margin: 1em auto;
  color: #3498db;
  background: #fff;
  border-width: 0.25em;
  border-style: solid;
  border-radius: 50% 50% 0 0;
  padding-bottom:.5em;
  font-size: 3em;
  z-index:999;
}

.nube p
{
	width:100%;
	position:absolute;
	z-index:9999;
	font-family: 'Diogenes';
	bottom:-.5em;
	padding-bottom:0px;
	font-size: 1.1em;
}

.nube:before,
.nube:after {
  content: '';
  position: absolute;
  bottom: -0.25em;
  background: inherit;
  border-width: 0.25em;
  border-style: solid;
  z-index:9;
}

.nube:before {
  left: 80%;
  width: 60%;
  height: 60%;
  border-left: none;
  border-radius: 50% 50% 50% 0;
  z-index:9;
}

.nube:after {
  right: 65%;
  width: 80%;
  height: 80%;
  border-right: none;
  border-radius: 50% 50% 0;
  z-index:9;
}

.nube-btn
{
	position: relative;
	height: 7em;
	width: auto;
	z-index:99;
	background: url('../img/nube-link.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.nube-btn p
{
	width:100%;
	position:absolute;
	z-index:9999;
	font-family: 'Diogenes';
	bottom:.28em;
	padding-bottom:0px;
	font-size: 3em;
	/*color: var(--tittle-color);*/
	color: black;
	text-shadow:
        0 0 8px rgba(255, 255, 255, 1),
        0 0 16px rgba(255, 255, 255, 0.8),
        0 0 32px rgba(255, 255, 255, 0.6);
}

.nube-link
{
	position: relative;
	height: 13em;
	width: auto;
	z-index:-1;
	background: url('../img/nube-link.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.nube-link p
{
	width:100%;
	position:absolute;
	z-index:9999;
	font-family: 'Diogenes';
	bottom:.3em;
	padding-bottom:0px;
	font-size: 3em;
	color: var(--tittle-color);
}

.nube-link h2
{
	position:absolute; 
	bottom: .3em;
	left:50%;
	transform: translate(-50%, 0%);
}

.mySwiper 
{
	width: 80%;
	height: auto;
	max-width:700px;
	position: relative;
	left:50%;
	transform: translate(-50%,0%);
	min-height:1300px;
}

.swiper-slide {
	background-position: center;
	background-size: cover;
	height:auto;
}

.swiper-slide img {
	display: block;
	width: 100%;
	border-radius:50px;
	height: auto;
}


.swiper-slide-next, .swiper-slide-prev, .swiper-slide-next img, .swiper-slide-prev img
{
	height:0px;
}

    .color-circle {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      margin: 15px auto;
      border: 2px solid #ccc;
    }

    .sky-blue {
      background-color: #87CEEB;
    }

    .white {
      background-color: #FFFFFF;
    }

    .cream {
      background-color: #FFFDD0;
    }

    .color-name {
      text-align: center;
      margin-top: 10px;
      text-align: center;
	font-size: 4em;
	color: var(--tittle-color);
	font-family: 'Hercules';
	text-shadow:
        0 0 8px rgba(255, 255, 255, 1),
        0 0 16px rgba(255, 255, 255, 0.8),
        0 0 32px rgba(255, 255, 255, 0.6);
    }
	
	
@media (min-width: 990px ) 
{
	:root 
	{
	  --max-font-size: 80px;
	  --dif-font-size: 20px;
	  --font-height-sum: 50px;
	  --small-space: 20px;
	  --medium-space: 40px;
	  --big-space: 60px;
	  --xbig-space:80px;
	  --back-color: rgba(0,0,255,0.0);
	  --scr-w: 700px;
	}

	.festejado
	{
		font-size: 6em;
	}
	
	.titulo_seccion
	{
		border-top:50px;
		font-size: 3.3em;
	}
	
	.subtitulo_diogenes
	{
		font-size: 2em;
	}
	
	.subtitulo
	{
		font-size: 2em;
	}
	
	.subtitulo_seccion
	{
		font-size: 2em;
	}
	  
	.color-circle 
	{
		width: 150px;
		height: 150px;
	}
	
	.nube-link p
	{
		font-size: 2.5em;
	}

	.nube-btn
	{
		position: relative;
		height: 5em;
		width: auto;
		z-index:99;
		background: url('../img/nube-link.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	.nube-btn p
	{
		bottom:5%;
		font-size: 2em;
	}
	
	p.counter, h2.counter
	{
		font-size: 3em;
	}

	.img-card
	{
		max-width: 40%;
		height: auto;
		border-radius:50px;
	}
	
	.img-card-2
	{
		max-width: 40%;
		height: auto;
	}

	.counter:after 
	{
		content:'';
		width: 80%;
		height: 80%;
		top:10%;
		left:10%;
		position: absolute;
	}

	p.counter2, h2.counter2
	{
		font-size: 2em;
	}


	.counter2:after 
	{
		content:'';
		width: 80%;
		height: 80%;
		top:10%;
		left:10%;
	}
	
	.nube-link
	{
		height: 13em;
		width: auto;
	}

	.nube-link p
	{
		bottom:.3em;
		font-size: 2.5em;
		
	}

	.nube-link h2
	{
		bottom: 30%;
		left:50%;
		transform: translate(-50%, 0%);
	}

}


@media (max-height: 1000px ) 
{
	:root 
	{
	  --max-font-size: 80px;
	  --dif-font-size: 20px;
	  --font-height-sum: 50px;
	  --small-space: 20px;
	  --medium-space: 40px;
	  --big-space: 60px;
	  --xbig-space:80px;
	  --back-color: rgba(0,0,255,0.0);
	  --scr-w: 500px;
	}
		
	.greek-divider
	{
		width:100%;
		height: 4em;
		background-size: auto 80px;
		margin-top:1em;
		margin-bottom:1em;
		padding-top:1px;
		padding-bottom:1px;
	}
	
	.titulo_seccion
	{
		padding-top:30px;
		font-size: 3em;
	}
	
	.subtitulo
	{
		font-size: 2em;
	}
	
  
	.color-circle 
	{
		width: 150px;
		height: 150px;
	}
	
	.nube-link
	{
		height: 13em;
		width: auto;
	}

	.nube-link p
	{
		bottom:.3em;
		font-size: 2.5em;
		
	}

	.nube-link h2
	{
		bottom: 30%;
		left:50%;
		transform: translate(-50%, 0%);
	}
	
	.subtitulo_seccion
	{
		font-size: 2em;
	}

	.subtitulo_diogenes
	{
		font-size: 2em;
	}


	.festejado
	{
		font-size: 6em;
	}
	
	.img-main
	{
		height:1000px;
		max-height: 40vh;
		width: auto;
	}

	.img-card
	{
		max-width: 40%;
		height: auto;
		border-radius:50px;
	}

	.img-card-2
	{
		max-width: 50%;
		height: auto;
	}
	
	p.counter, h2.counter
	{
		font-size: 3em;
	}


	.counter:after 
	{
		content:'';
		width: 80%;
		height: 80%;
		top:10%;
		left:10%;
		position: absolute;
	}

	p.counter2, h2.counter2
	{
		font-size: 2em;
	}


	.counter2:after 
	{
		content:'';
		width: 80%;
		height: 80%;
		top:10%;
		left:10%;
	}
	
}

.smb_text_cont p , .smb_text_cont span 
{
	display:inline-flex;
	margin:0;
	padding:0;
}

.smb_text_cont .smb_b
{
	color:#049CD8;
}

.smb_text_cont .smb_r
{
	color:#E52521;
}

.smb_text_cont .smb_g
{
	color:#43B047;
}

.smb_text_cont .smb_y
{
	color:#FBD000;
}