@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500");
* {
box-sizing: border-box;
margin: 0;
}

html, body {
background: white;
height: 100%;
overflow: hidden;
font-family: "Montserrat", helvetica, arial, sans-serif;

}
.container {
    position: relative;
    display: block;
    width: 100vmin;
    height: 100%;
    margin: auto;
    z-index: 100;

  }
.container .carousel {
position: absolute;
background: black;
transform: translateY(100%);
will-change: transform;
width: 100%;
height: 100%;
z-index: 10;
}
.container .carousel .info_back {
position: absolute;
top: 0;
width: 100%;
height: 15vh;
z-index: 30;
background-position: center 5%;
background-size: cover;
background-color: #231F20;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.container .carousel .info_back h1 {
text-align: center;
color: rgb(255, 255, 255);
margin-top: 1vh;
font-weight: 300;
font-size: 2vh;
text-transform: uppercase;
letter-spacing: 15px;
opacity: 0;

}
.container .carousel .info_back h1 .letter {
display: inline-block;
line-height: 1em;
opacity: 0;
overflow-wrap: break-word;

}
.container .carousel .info_back:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(transparent, black);
opacity: 1;
}
.container .carousel .active {
display: block !important;
}
.container .carousel .citem {
padding-top: 1px;
display: none;
background: white;
width: 100%;
height: 100%;
text-align: justify;
transition: all 0.4s;
}
.container .carousel .citem h1 {
color: black;
font-weight: 400;
margin-top: 20vh;
padding: 2vmin 7vmin;
display: block;
width: 100%;
background: #eee;
}
.container .carousel .citem p {
color: #777;
font-size: 17 px;
padding: 20px 7vmin;
}
.container .carousel .citem p span {
color: #555;
font-size: 18px;
display: block;
padding: 15px 0;
}
.container .carousel .citem ul {
font-size: 17px;
color: #777;
padding: 0 12vmin;
}
.container .menu {
position: fixed;
width: 100%;
height: 100%;
z-index: 10;
background: white;
display: none;
}
.container .menu .close {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
right: 0;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.15);
cursor: pointer;
}
.container .fixed_banner {
position: absolute;
width: 100%;
z-index: 5;
}
.container .fixed_banner i {
position: absolute;
right: 25px;
top: 25px;
font-size: 30px;
cursor: pointer;
}
.container .content {
position: relative;
width: 100%;
height: 73vh;
text-align: center;
}
.container .content .title {
font-weight: 300;
font-size: 4vh;
color: #ccc;
letter-spacing: 14px;
text-transform: uppercase;
padding-top: 3vh;
opacity: 0;
overflow-wrap: break-word;

}
.container .content .title .letter {
display: inline-block;
line-height: 1em;
opacity: 0;
}
.container .content .helmet {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -15vmin;
    background-image: url("https://cocoglobalmedia.com/wp-content/uploads/2021/12/COCOGLOBALMEDIA-logo-comunicacion-digital-black.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 95% 100%;
}
.container .content .helmet img {
position: absolute;
width: 90vmin;
margin: auto;
top: 11vmin;
bottom: 0vmin;
left: 0;
right: 0;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.container .content .helmet .planet_position {
position: absolute;
width: 37vmin;
height: 37vmin;
background: black;
box-shadow: 0 10px 20px 10px black;
border-radius: 50%;
margin: auto;
top: 0;
bottom: 12vmin;
left: 0;
right: 0;
z-index: 1;
overflow: hidden;
}
.container .content .helmet .planet_position::after {
content: "";
display: block;
position: absolute;
top: 10%;
right: 15%;
width: 28vmin;
height: 35vmin;
border-radius: 50%;
border-left: 1px solid #555;
box-shadow: 20px 0px 10px -10px rgba(255, 255, 255, 0.15);
z-index: 1000;
}
.container .content .helmet .planet_position .planet_shadow {
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0 -1.5vmax 3vmax 1.2vmax black;
border-radius: 50%;
z-index: 3;
}
.container .content .helmet .planet_position .planet_photo {
position: absolute;
width: 100%;
height: 100%;
background: url("https://i.kinja-img.com/gawker-media/image/upload/s--gBFsZfZv--/c_scale,fl_progressive,q_80,w_800/18mozgxwgu2ibjpg.jpg");
background-repeat: no-repeat;
background-position: center -75%;
background-size: 150%;
z-index: 1;
will-change: background;
transform: rotate(360deg);
transition: transform 5s linear infinite; /
}
.container .bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 40vh;
}
.container .bottom .nav {
width: 100%;
height: 40px;
padding-top: 15px;
}
.container .bottom .nav span {
color: #999;
cursor: pointer;
}
.container .bottom .nav span i {
font-size: 40px;
font-weight: 200;
}
.container .bottom .nav span:nth-child(1) {
padding-left: 10vmin;
}
.container .bottom .nav span:nth-child(2) {
padding-right: 10vmin;
float: right;
}
.container .bottom .orbit {
position: absolute;
top: -13vh;
width: 100%;
height: 100vmin;
border-radius: 50%;
border: 3px solid #eee;
margin: auto;
left: 0;
right: 0;
}
.container .bottom .orbit .planet_container {
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform 0.7s ease-in;
}
.container .bottom .orbit .planet_container .planet {
position: absolute;
border-radius: 50%;
width: 5vmin;
height: 5vmin;
transition: transform 0.4s linear;
will-change: transform;
}
.container .bottom .orbit .planet_container .pt {
transition: transform 0.4s ease-in;
transform: scale(1.7);
will-change: transform;
}
.container .bottom .orbit .planet_container .earth {
background: #3399ff;
top: -2.5vmin;
left: 0;
right: 0;
margin: auto;
}
.container .bottom .orbit .planet_container .earth .moon span {
top: -1vmin;
left: -1vmin;
}
.container .bottom .orbit .planet_container .mars {
background: #FDB05E;
right: 12vmin;
top: 12vmin;
}
.container .bottom .orbit .planet_container .mars .moon span {
width: 0.5vmin;
height: 0.5vmin;
}
.container .bottom .orbit .planet_container .mars .moon span:nth-child(1) {
top: -1vmin;
left: -1vmin;
}
.container .bottom .orbit .planet_container .mars .moon span:nth-child(2) {
left: 1vmin;
bottom: -1vmin !important;
}
.container .bottom .orbit .planet_container .jupiter {
background: #996633;
right: -2.5vmin;
bottom: 46.5vmin;
}
.container .bottom .orbit .planet_container .saturn {
background: #8A8975;
right: 12vmin;
bottom: 12vmin;
}
.container .bottom .orbit .planet_container .saturn .ring {
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 0 0 5px white, 0 0 0 8px rgba(0, 0, 0, 0.5), 0 0 0 12px #d6d6c2;
border-radius: 50%;
}
.container .bottom .orbit .planet_container .uranus {
background: #C4EAED;
right: 0;
left: 0;
margin: auto;
bottom: -2.5vmin;
}
.container .bottom .orbit .planet_container .neptune {
background: #3347BA;
left: 12vmin;
bottom: 12vmin;
}
.container .bottom .orbit .planet_container .mercury {
background: #6E6E6E;
left: -2.5vmin;
bottom: 46.5vmin;
}
.container .bottom .orbit .planet_container .venus {
background: #d2a679;
left: 12vmin;
top: 12vmin;
}
.container .bottom .orbit .name_container {
position: absolute;
display: flex;
width: auto;
margin: auto;
left: 0;
right: 0;
top: 8vh;
text-align: center;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.container .bottom .orbit .name_container .more {
width: 100%;
padding: 8px 0;
color: #bbb;
font-weight: 500;
cursor: pointer;
transition: color 0.2s;
}
.container .bottom .orbit .name_container .more:hover {
color: #888;
transition: color 0.3s;
}
.container .bottom .orbit .name_container .pn {
font-size: 25px;
color: #666;
text-transform: uppercase;
padding-bottom: 4px;
letter-spacing: 8px;
padding-left: 8px;
border-bottom: 3px solid #bbb;
}
.container .bottom .orbit .name_container .pn .letter {
display: inline-block;
line-height: 1em;
opacity: 0;
}

.moon {
width: 100%;
height: 100%;
-webkit-animation: planet_rotation 2s infinite linear;
animation: planet_rotation 2s infinite linear;
}
.moon span {
width: 0.8vmin;
height: 0.8vmin;
background: black;
border-radius: 50%;
position: absolute;
}

@-webkit-keyframes planet_rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@keyframes planet_rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

/*    NUEVO   */
.container .carousel .citem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  padding-bottom: 400px;
  margin-top: 100px;
}
.overlay-button {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 4px 55px;
    background-color: #3c4ca0;
    color: white;
    border-style: solid;
    border-radius: 100px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    text-shadow: none;
    line-height: 1.6;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: background-color .15s ease-out;
    transition: background-color .15s ease-out;
    text-decoration: none;
}

#close_modal {
background: none;
border: none;
font-size: 1.3em;
color: #fff;
cursor: pointer;
z-index: 1000;
transition: transform 0.3s;
}

#close_modal:hover {
transform: rotate(90deg);
}


#miBoton {
    position: absolute;
    top: 46%;
    left: 30%;
    z-index: 1;
    padding: 1px;
    padding-left: 5%;
    padding-right: 5%;
    font-size: 20px;
    font-weight: 700;
    text-shadow: none;
    line-height: 1.6;
    border-radius: 100px;
    border-style: solid;
    background-color: #3c4ca0;
    color: white;
    text-decoration: none;
    cursor: pointer;
}