@charset "utf-8";
/*
==============================================
CSS TIPOGRAFÍA
==============================================
*/
@font-face {
    font-family: 'Montserrat', sans-serif;
}
/*
==============================================
CSS GENERAL
==============================================
*/
html {
    font-size: 16px;
}
body {
    min-height: 100vh;
    min-width: 100vw;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: 'Calibri';
    font-size: 1.2rem;
    background-color: #e7f2ff;
    background-image: url(../img/arca_de_papel_fondo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #721740;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
p{
    display: flex;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
/*
==============================================
CSS HEADER
==============================================
*/
header{
    width: 98vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header img:nth-child(1){
    height: 8rem;
    margin: 1rem;
}
header img:nth-child(2){
    height: 3.5rem;
    margin: 1rem;
}
/*
==============================================
CSS SECTION
==============================================
*/
section{
    justify-content: center;
    align-items: flex-start;
    min-width:90%;
    flex-grow: 1; 
    /*background-image: url(../img/arca_de_papel_cirulos.png);*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.circle1{
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.circle23{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    margin-top: -6rem;
    
}
.circle45{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: -2rem;
    /*opacity: 0.4;*/
}

.circle45 #boton4{
    opacity: 0.4;
}

.circle45 #boton5{
    opacity: 1;
	cursor:pointer;
}
/*
.spherebig{
    width: 18rem;
    height: 18rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(212,212,212);
background: radial-gradient(circle, rgba(212,212,212,1) 38%, rgba(255,255,255,1) 100%);
    margin: 1rem;
    border-radius: 50%;
    box-shadow: -1rem 1rem 2rem rgba(0, 0, 0, .5);
}
*/
/*
.spherebigDentro{
    width: 16rem;
    height: 16rem;
    border: solid #d6d6d6 .2rem;
    border-radius: 50%;
    box-sizing: border-box;
    background-image: url(../img/arca_de_papel_botones.png);
    background-repeat: no-repeat;
    background-size: 100% 500%;
}
*/
.d_botontxt1{
    background-position: 50% 50%;
}
.spherebig:hover{
    animation: flipp 0.7s linear 1 both;
}
.d_botontxt2{
    background-position: 50% 75%;
}
.d_botontxt3{
    background-position: 50% 100%;
}
.spherebig{
    width: 18rem;
    height: 18rem;
    perspective: 1000px;
    margin: 1rem;
    cursor:pointer;
}
.spheresmall{
    width: 12rem;
    height: 12rem;
    perspective: 1000px;
    margin: 1rem;
}
.spheresmallDentro, .spherebigDentro{
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    background: rgb(212,212,212);
    background: radial-gradient(circle, rgba(212,212,212,1) 38%, rgba(255,255,255,1) 100%);
    margin: 1rem;
    border-radius: 50%;
    box-shadow: -1rem 1rem 2rem rgba(0, 0, 0, .5);  
}

.rotabtn {
    transform: rotateY(180deg);
}

/*
.spherebig:hover .rotabtn {
    transform: rotateY(180deg);
}
.spheresmall:hover .spheresmallDentro {
    transform: rotateY(180deg);
}*/


/*se agregará directamenta en la programación como una clase*/
/*.hovercard .spherebigDentro {
    transform: rotateY(180deg);
}*/
/*se agregará directamenta en la programación como una clase*/
/*.hovercard .spheresmallDentro {
    transform: rotateY(180deg);
}*/

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 90%;
    height: 90%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: solid #d6d6d6 .2rem;
    border-radius: 50%;
    margin: 5%;
    box-sizing: border-box;
}
.flip-card-front img, .flip-card-back img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}
.flip-card-back {
  transform: rotateY(180deg);
}
.d_botontxt4{
    background-position: 50% 0%;
}
.d_botontxt5{
    background-position: 50% 25%;
}
/*
.spheresmall:hover{
    animation: flipp 0.7s linear 1 both;
}
*/
/*
==============================================
CSS FOOTER
==============================================
*/
footer{
    width: 100vw;
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-self: flex-end;
}
/*redes*/
.redes{
    display: flex;
    justify-content: center;
    align-items:flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    margin: 1rem;
}
.redes img{
    height: 2.4rem;
    margin: .5rem;
    cursor: pointer;
}
.redesicon{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}
/*telefono*/
.telefono{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin: 1rem;
}
.telefono img{
    height: 2.4rem;
    margin: 1rem;
}
/*direccion*/
.direccion{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin: 1rem;
}
.direccion img{
    height: 2.4rem;
    margin: 1rem;
    cursor: pointer;
}
.direccion p{
    word-wrap: break-word;
}
/*
==============================================
CSS MEDIA PORTRAIT (LANDSCAPE ES TODO LO QUE
ESTE ANTES)
==============================================
*/
@media (max-width: 1200px) {
    .circle23{
        margin-top: -4rem;
    }
}
@media (max-width: 800px) {
    .circle23{
        margin-top: 0;
    }
    .circle45{
        margin-top: 0;
    }
	
	.spherebig{
		width: 14rem;
		height: 14rem;
	}
	.spheresmall{
		width: 8rem;
		height: 8rem;
	}
}
@media (max-width: 600px) {
    .spherebig{
		width: 10rem;
		height: 10rem;
	}
}
@media (max-height: 600px) {
    .spherebig{
		width: 10rem;
		height: 10rem;
	}
	.spheresmall{
		width: 8rem;
		height: 8rem;
	}
}
@media (orientation: portrait){
}
/*
==============================================
CSS KEYFRAMES
==============================================
*/