:root {
	--blue: #004c71;
	--beige: #efe8e0;
	--white: #ffffff;
	--light-blue: #bcdaf4;
}

#plugin-calculator-page p{
	font-family: 'Raleway';
	font-size: 18px;
	color: var(--blue);
}

#plugin-calculator-page .page-header{
	background: var(--blue);
    text-align: center;
	padding: 200px 20px;
	margin: 0;
}

#plugin-calculator-page .page-header h1{
	font-family: Nord;
    font-weight: 500;
    color: var(--white);
    font-size: 5rem;
}

#plugin-calculator-page .page-header #date-picker {
    border: solid 2px #fff;
    font-weight: 300;
    color: var(--white);
	margin-top: 20px;
	font-size: 25px;
}

#plugin-calculator-page .wrap{
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

#plugin-calculator-page .nawal-selector{
	padding: 80px 20px;
	background: var(--beige);;
}

#plugin-calculator-page  h1#name{
	text-align: center;
	color: var(--blue);
	font-size: 4rem;
	line-height: 1;
}

#plugin-calculator-page  p#animal{
	text-align: center;
}

#plugin-calculator-page .maya-cross{
	background: var(--blue);
	padding: 40px;
	border-radius: 20px;
	margin-top: 50px;
}

#plugin-calculator-page .cross-layout{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

#plugin-calculator-page .cross-layout .cross-item{
	background: var(--white);
	padding: 20px;
	border-radius: 20px;
	cursor: pointer;
	display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

#plugin-calculator-page .cross-layout .cross-item img{
	display: block;
	margin: 0 auto;
}

#plugin-calculator-page .cross-layout .cross-item img:nth-child(1){
	position: absolute;
}

#plugin-calculator-page .cross-layout .cross-item.nawal-active{
	background: var(--light-blue);
}

#plugin-calculator-page .maya-cross{
	display: grid;
    grid-template-columns: 2fr 1fr;
	gap: 30px;
}

#plugin-calculator-page .sticy-container{
	position: relative;
}

#plugin-calculator-page .nawal-selected{
	background: var(--light-blue);
	padding: 20px;
	border-radius: 20px;
	position: sticky;
    top: 200px;
}

#plugin-calculator-page #rightNawalImage{
	width: 100px;
    padding: 0;
    float: right;
}

#plugin-calculator-page .cross-position{
	font-family: 'Nord';
    font-size: 15px;
    font-weight: 400;
	margin-bottom: 15px;
}

#plugin-calculator-page .cross-layout .nawal-name,
#plugin-calculator-page #todaysNawalResult{
	font-family: Nord;
    font-size: 30px;
    font-weight: 500;
	margin: 0;
}

#plugin-calculator-page .cross-description{
	font-family: Raleway;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
}

#plugin-calculator-page #descriptionStr{
	margin: 0;
    text-transform: uppercase;
    font-weight: 600;
}

#plugin-calculator-page .characteristics{
	padding: 80px 20px;
    background: var(--light-blue);
}

#plugin-calculator-page .section-title{
	font-family: Nord;
	font-size: 40px;
	color: var(--blue);
	text-transform: uppercase;
	font-weight: 400;
}

#plugin-calculator-page .grid-2{
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}

#plugin-calculator-page .element-tag{
	font-size: 18px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 0px;
	font-family: 'Nord';	
}

#plugin-calculator-page .characteristics h3{
	text-transform: uppercase;
    color: var(--blue);
    font-family: 'Nord';
    font-size: 20px;
    font-weight: 500;
}

#plugin-calculator-page .more-info{
	padding: 80px 20px;
    background: #004C71;
	background: linear-gradient(90deg,rgba(0, 76, 113, 1) 50%, rgba(239, 232, 224, 1) 50%);
}


#plugin-calculator-page #nawalDescription{
	font-size: 16px;
}

#plugin-calculator-page .more-info{
	text-align: center
}

.text-beige{
	color: var(--beige) !important;
}

.color-item{
	width: 200px;
    margin: 0 auto 10px;
    background: #232323;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Raleway';
    font-size: 18px;
    padding: 15px 25px;
    border-radius: 50px;
    font-weight: 600;
    line-height: 1;
	text-align: center;
}

.element-tag div{
	width: fit-content
}

.color-item.color-green,
.color-item.color-verde{
	background: #2e7d32;
}

.color-item.color-white,
.color-item.color-blanco,
.element-air,
.element-aire{
	background: #ffffff;
	color: var(--blue);
}

.color-item.color-yellow,
.color-item.color-amarillo,
.element-water,
.element-agua{
	background: #fbc02d;
	color: var(--blue);
}

.color-item.color-red,
.color-item.color-rojo,
.element-fire,
.element-fuego{
	background: #d10404;
}

.color-item.color-light.blue, 
.color-item.color-celeste{
	background: #81d4fa;
	color: var(--blue);
}

.color-item.color-blue, 
.color-item.color-azul{
	background: #004c71;
}

.color-item.color-beeswax, 
.color-item.color-cebo.cera{
	background: #e9b560;
	color: var(--blue);
}

.color-item.color-purple, 
.color-item.color-morado{
	background: #a327f0;
}

.color-item.color-pink, 
.color-item.color-rosado{
	background: #f27f9e;
}


.color-item.color-brown, 
.color-item.color-cafés{
	background: #914900;
}

.color-item.color-orange, 
.color-item.color-anaranjado{
	background: #f77b00;
}

.color-item.color-navy.blue, 
.color-item.color-marino{
	background: #1f2247;
}

.title-row{
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 80px;
}

.title-row .element-tag{
	margin: 0;
}

@media(max-width: 1200px){
	#plugin-calculator-page .page-header h1 {
		font-size: 3rem;
	}
	
	#plugin-calculator-page .page-header {
		padding: 100px 20px;
	}
}

@media(max-width: 1024px){
	#plugin-calculator-page .maya-cross {
		grid-template-columns: 1fr;
	}	
}

@media(max-width: 768px){
	#plugin-calculator-page .page-header h1 {
        font-size: 2rem;
    }
	#plugin-calculator-page .nawal-selector,
	#plugin-calculator-page .characteristics,
	#plugin-calculator-page .more-info,
	#plugin-calculator-page .page-header{
		padding: 80px 30px;
	}
	#plugin-calculator-page .maya-cross{
		padding: 10px;
	}
	#plugin-calculator-page .cross-layout {
		gap: 10px;
	}
	#plugin-calculator-page .cross-layout .cross-item {
    	padding: 10px;
	}
	#plugin-calculator-page .cross-layout .nawal-name, #plugin-calculator-page #todaysNawalResult{
		font-size: 20px;
	}
	#plugin-calculator-page p {
		font-size: 16px;
	}
	#plugin-calculator-page .grid-2 {
		grid-template-columns: 1fr;
		gap: 60px;
	}
	#plugin-calculator-page .more-info {
		background: #004c71;
	}
	#candlesTitle,
	#candlesText{
		color: var(--beige) !important;
	}
	.title-row{
		display: block;
	}
	.element-tag div{
		margin: 20px 0 0 0;
	}
}


@media(max-width: 600px){
	#plugin-calculator-page .cross-layout .cross-item img:nth-child(2) {
		width: 50%
	}
	#plugin-calculator-page .section-title {
		font-size: 24px;
	}
	#plugin-calculator-page .maya-cross {
        padding: 8px;
		border-radius: 28px;
    }
	#plugin-calculator-page .cross-layout .nawal-name{
        font-size: 14px;
    }
	#plugin-calculator-page .cross-position {
		display: none;
	}
	#plugin-calculator-page .cross-description{
		display: none
	}
	#plugin-calculator-page .cross-layout .cross-item img:nth-child(1) {
		position: absolute;
		width: 20px;
	}
	#plugin-calculator-page .characteristics h3{
		font-size: 16px;
	}
}