html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: #f7f7f7;
font-family: 'Eczar', serif;
font-family: 'Righteous', cursive;
margin: 0;
}
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a {
transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
color: inherit;
text-decoration: none;
}
a:hover {
border-bottom-color: transparent;
color: #43d8c9 !important;
}
a:active {
color: #43d8c9 !important;
}
a {
color: white;
}
a {
transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
color: inherit;
text-decoration: none;
}
video {
vertical-align: middle;
z-index: 1;
margin: 0;
border: 0;
max-height: 100%;
}
iframe{
vertical-align: middle;
z-index: 1;
margin: 0;
border: 0;
max-height: 100%;
}
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/***********************************************************Principal************************************************************************/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.is-preload {
display: none;
}
.load {
justify-content: center;
display: flex;
align-items: center;
min-height: 100vh;
background: black;
}
.loading {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(45deg, transparent, transparent 40%, #43d8c9);
animation: animation-loading 2s linear infinite;
}
@keyframes animation-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading:before {
content: '';
position: absolute;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
background: #000;
border-radius: 50%;
z-index: 1000;
}
.loading:after {
content: '';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: linear-gradient(45deg, transparent, transparent 40%, #43d8c9);
filter: blur(2rem);
border-radius: 50%;
z-index: 1000;
z-index: 1;
}
.contenedor-video {
max-width: 100%;
max-height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
}
.contenedor-video-promo{
max-width: 100%;
position: relative;
text-align: center;
}
.contenedor-video-promo video{
max-width: 50%;
}
.contenedor-video-promo iframe{
max-height: 30vh;
max-width: 80%;
}
.inicio {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.contenedor {
width: 95%;
margin: 0 auto;
}
@media (min-width: 48rem) {
.contenedor {
width: 90%;
}
p{
font-size: 0.8rem;
}
}
@media (min-width: 76.8rem) {
.contenedor {
width: 90%;
}
p{
font-size: 1.2rem;
}
}
@media (min-width: 99rem) {
.contenedor {
width: 90%;
max-width: 110rem;
}
p{
font-size: 1.3rem;
}
}
.contenedor-img {
padding-top: 10rem;
text-align: center;
}
.contenedor-img img {
border-radius: 50%;
height: 20rem;
position: relative;
z-index: 1;
}
.name-site {
color: white;
margin: 0;
text-align: center;
font-family: 'Righteous', cursive;
font-weight: bold;
font-size: 3rem;
position: relative;
z-index: 1;
}
@media (min-width: 48rem) {
.name-site {
font-size: 6rem;
}
}
@media (min-width: 76.8rem) {
.name-site {
font-size: 8rem;
}
}
@media (min-width: 99rem) {
.name-site {
font-size: 10rem;
}
}
/*.w0{animation: animate0 10s infinite forwards;}*/
@keyframes animation1 {
0% {
transform: translate(100%);
}
}
@keyframes animation2 {
0% {
transform: translate(-100%);
}
}
@keyframes out1 {
0% {
transform: translate(0);
}
100% {
transform: translate(100%);
}
}
@keyframes out2 {
0% {
transform: translate(0);
}
100% {
transform: translate(-100%);
}
}
.name-slogan {
color: white;
margin: 0;
text-align: center;
font-family: 'Righteous', cursive;
font-weight: bold;
font-size: 1.5rem;
position: relative;
z-index: 1;
}
@media (min-width: 48rem) {
.name-slogan {
font-size: 2rem;
}
}
@media (min-width: 76.8rem) {
.name-slogan {
font-size: 3rem;
}
}
@media (min-width: 99rem) {
.name-slogan {
font-size: 4rem;
}
}
.go-to{
margin: 0;
color: white;
left: 50%;
top: 3rem;
font-family: 'Righteous', cursive;
font-weight: bold;
position: relative;
z-index: 1;
animation: animate-arrow 2s infinite forwards;
transition-duration:2s ;
}
@keyframes animate-arrow {
0% {
font-size: 2.5rem;
}
50% {
font-size: 3rem;
}
100% {
font-size: 2.5rem;
}
}
@media (min-width: 48rem) {
.name-slogan {
font-size: 2rem;
}
}
@media (min-width: 76.8rem) {
.name-slogan {
font-size: 3rem;
}
}
@media (min-width: 99rem) {
.name-slogan {
font-size: 4rem;
}
}
.seccion {
margin-top: 4.5rem;
}
.seccion h2 {
text-align: center;
color: #43d8c9;
font-size: 1.5rem;
}
@media (min-width: 48rem) {
.seccion h2 {
font-size: 2rem;
}
}
@media (min-width: 76.8rem) {
.seccion h2 {
font-size: 2.5rem;
}
}
@media (min-width: 99rem) {
.seccion h2 {
font-size: 3rem;
}
}
.biñeta {
-webkit-box-shadow: -26px 26px 5px -8px rgba(0, 0, 0, 0.46);
-moz-box-shadow: -26px 26px 5px -8px rgba(0, 0, 0, 0.46);
box-shadow: -26px 26px 5px -8px rgba(0, 0, 0, 0.46);
padding: 4rem;
background-color: rgba(103, 76, 199, 0.75);
}
.fixed {
position: fixed;
width: 100%;
height: 0;
top: 0;
left: 0;
}
.g2 {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 2rem;
justify-content: center;
}
.g2 .cont-svg img {
width: 100%;
}
.g2 .cont-txt {
text-align: center;
margin: 1rem 0;
line-height: 2;
}
.g2 .cont-txt h3 {
font-size: 1.4rem;
}
.g2 .cont-txt p {
font-size: 0.8rem;
}
.g2 .cont-txt p strong{
font-size: 1rem;
color: #43d8c9;
font-weight: bold;
}
#txt-2 {
grid-row: 1;
}
#txt-4 {
grid-row: 1;
}
#txt-6 {
grid-row: 1;
}
#txt-8 {
grid-row: 1;
}
.g2 .cont-svg img {
max-height: 15rem;
}
@media (min-width: 48rem) {
.g2 .cont-txt h3 {
font-size: 1.6rem;
}
.g2 .cont-txt p {
font-size: 0.8rem;
}
.g2 .cont-txt p strong{
font-size: 1.1rem;
}
.g2 .cont-svg img {
max-height: 30rem;
}
}
@media (min-width: 76.8rem) {
.g2 .cont-txt h3 {
font-size: 1.8rem;
}
.g2 .cont-txt p {
font-size: 1rem;
}
.g2 .cont-txt p strong{
font-size: 1.2rem;
}
.g2 {
grid-template-columns: repeat(2, 1fr);
}
#txt-2 {
grid-column: 2;
grid-row: 1;
}
#txt-4 {
grid-column: 2;
grid-row: 1;
}
#txt-6 {
grid-column: 2;
grid-row: 1;
}
#txt-8 {
grid-column: 2;
grid-row: 1;
}
}
@media (min-width: 99rem) {
.g2 .cont-txt h3 {
font-size: 2rem;
}
.g2 .cont-txt p {
font-size: 1.2rem;
}
.g2 .cont-txt p strong{
font-size: 1.3rem;
}
.g2 {
grid-template-columns: repeat(2, 1fr);
}
#txt-2 {
grid-column: 2 ;
grid-row: 1;
}
}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*******************************************************************Cards************************************************************/
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.cards {
display: flex;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.cards .card1 {
margin: 1rem;
position: relative;
width: 30rem;
padding: 2rem;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.cards .card1:before {
content: '';
position: absolute;
left: 0;
bottom: calc(-100% + 4px);
width: 100%;
height: 100%;
background: #000;
z-index: 1;
transition: 0.5s ease-in-out;
}
.cards .card1:hover:before {
bottom: 0;
}
.cards .card1:nth-child(1):before {
background: #95389e;
}
.cards .card1:nth-child(2):before {
background: #95389e;
}
.cards .card1:nth-child(3):before {
background: #95389e;
}
.cards .card1 div {
position: relative;
z-index: 2;
text-align: center;
}
.cards .card1 div h2 {
margin-bottom: 1rem;
font-size: 2.3rem;
transition: 0.5s;
color: #777;
}
.cards .card1 div p {
margin-bottom: 1.2rem;
font-size: 1.6rem;
transition: 0.5s;
color: #777;
}
.cards .card1 div a {
margin-top: 1.2rem;
font-size: 1rem;
display: inline-block;
text-decoration: none;
transition: 0.5s;
background: #f7f7f7;
color: #777!important;
padding: 1rem 2rem;
font-weight: 600;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}
.cards .card1:hover div h2, .cards .card1:hover div p {
color: #fff;
}
/*******************************************************************Neumorphism************************************************************/
.neu {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.neu .card2 {
width: 40rem;
margin: 1.5rem;
padding: 2rem 3rem;
background: #f7f7f7;
border-radius: 40px;
box-shadow: -6px -6px 20px rgba(255, 255, 255, 1), 6px 6px 20px rgba(0, 0, 0, 0.1);
}
.neu .card2:hover {
box-shadow: inset -6px -6px 10px rgba(255, 255, 255, 0.5), inset 6px 6px 20px rgba(0, 0, 0, 0.05);
}
.neu .card2 .imgBx {
position: relative;
text-align: center;
max-height: 7rem;
overflow-y: hidden;
}
.neu .card2 .imgBx img {
max-width: 8rem;
}
.neu .card2 .contentBx {
position: relative;
margin-top: 1rem;
text-align: center;
}
.neu .card2 .contentBx h2 {
color: #32a3b1;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 2px;
}
.neu .card2 .contentBx p {
color: #32a3b1;
font-size: 0.8rem;
}
.neu .card2 .contentBx a {
display: inline-block;
padding: 1rem 2rem;
margin-top: 1rem;
border-radius: 20%;
color: #32a3b1 !important;
font-size: 0.8rem;
text-decoration: none;
box-shadow: -4px -4px 15px rgba(255, 255, 255, 1), 4px 4px 15px rgba(0, 0, 0, 0.1);
}
@media (min-width: 48rem) {
.neu .card2 .contentBx p {
font-size: 1.5rem;
}
.neu .card2 .contentBx h2{
font-size: 1.7rem;
}
.neu .card2 .contentBx a{
font-size: 0.9rem;
}
.neu .card2{
width: 40rem;
}
}
@media (min-width: 76.8rem) {
.neu .card2 .contentBx p {
font-size: 1rem;
}
.neu .card2 .contentBx h2{
font-size: 2rem;
}
.neu .card2 .contentBx a{
font-size: 1rem;
}
.neu .card2{
width: 35rem;
}
}
@media (min-width: 99rem) {
.neu .card2 .contentBx p {
font-size: 1.2rem;
}
.neu .card2 .contentBx h2{
font-size: 2.2rem;
}
.neu .card2 .contentBx a{
font-size: 1.02rem;
}
.neu .card2{
width: 30rem;
height: 30rem;
}
}
.neu .card2 .contentBx a:hover {
box-shadow: inset -4px -4px 10px rgba(255, 255, 255, 0.5), inset 4px 4px 10px rgba(0, 0, 0, 0.1);
}
.neu .card2:hover .imgBx, .neu .card2:hover .contentBx {
transform: scale(0.98);
}
/*******************************************************************Desplegables************************************************************/
.container {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.container .card3 {
position: relative;
}
.container .card3 .face {
width: 30rem;
height: 20rem;
transition: 0.5s;
}
@media (min-width: 48rem) {
.container .card3 .face {
width: 50rem;
height: 30rem;
}
}
@media (min-width: 99rem) {
.container .card3 .face {
width: 30rem;
height: 20rem;
}
}
.container .card3 .face.face1 {
position: relative;
background: #333;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
z-index: 1;
transform: translateY(10rem);
}
.container .card3:hover .face.face1 {
background: #95389e;
transform: translateY(0);
}
.container .card3 .face.face1 .content {
opacity: 0.2;
transition: 0.5s;
}
.container .card3:hover .face.face1 .content {
opacity: 1;
}
.container .card3 .face.face1 .content img {
max-width: 10rem;
}
.container .card3 .face.face1 .content h3 {
margin: 1rem 0 0;
padding: 0;
color: #fff;
text-align: center;
font-size: 1.8rem;
}
.container .card3 .face.face2 {
position: relative;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
box-sizing: border-box;
box-shadow: 0 1rem 5rem rgba(0, 0, 0, 0.8);
transform: translateY(-10rem);
}
@media (min-width: 48rem) {
.container .card3 .face.face2 {
transform: translateY(-20rem);
}
}
@media (min-width: 99rem) {
.container .card3 .face.face2 {
transform: translateY(-10rem);
}
}
.container .card3:hover .face.face2 {
transform: translateY(0);
}
.container .card3 .face.face2 .content p {
margin: 0;
padding: 0;
font-size: 1.2rem;
}
@media (min-width: 48rem) {
.container .card3 .face.face2 .content p {
font-size: 1.6rem;
}
}
@media (min-width: 76.5rem) {
.container .card3 .face.face2 .content p {
font-size: 1.2rem;
}
}
@media (min-width: 99rem) {
.container .card3 .face.face2 .content p {
font-size: 1.2rem;
}
}
.container .card3 .face.face2 .content a {
margin: 1rem 0 0;
display: inline-block;
text-decoration: none;
font-weight: 900;
color: #333;
padding: 1rem 2rem;
border-radius: 4px;
border: 1px solid #333;
}
.container .card3 .face.face2 a:hover {
background: #333;
color: #fff;
}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*******************************************************************Imagen con waves************************************************************/
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.wave {
position: absolute;
bottom: 0;
left: 0;
z-index: 6;
}
.w0 {
animation: animate0 10s infinite forwards;
}
@keyframes animate0 {
0% {
d: path("M0,160L60,176C120,192,240,224,360,229.3C480,235,600,213,720,208C840,203,960,213,1080,218.7C1200,224,1320,224,1380,224L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
}
50% {
d: path("M0,256L60,229.3C120,203,240,149,360,144C480,139,600,181,720,186.7C840,192,960,160,1080,165.3C1200,171,1320,213,1380,234.7L1440,256L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
}
100% {
d: path("M0,160L60,176C120,192,240,224,360,229.3C480,235,600,213,720,208C840,203,960,213,1080,218.7C1200,224,1320,224,1380,224L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
}
}
.w1 {
animation: animate1 10s infinite forwards;
}
@keyframes animate1 {
0% {
d: path("M0,256L60,229.3C120,203,240,149,360,144C480,139,600,181,720,186.7C840,192,960,160,1080,165.3C1200,171,1320,213,1380,234.7L1440,256L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
}
50% {
d: path("M0,288L60,256C120,224,240,160,360,149.3C480,139,600,181,720,202.7C840,224,960,224,1080,213.3C1200,203,1320,181,1380,170.7L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
}
100% {
d: path("M0,256L60,229.3C120,203,240,149,360,144C480,139,600,181,720,186.7C840,192,960,160,1080,165.3C1200,171,1320,213,1380,234.7L1440,256L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
}
}
.w2 {
animation: animate2 10s infinite forwards;
}
@keyframes animate2 {
0% {
d: path("M0,288L60,256C120,224,240,160,360,149.3C480,139,600,181,720,202.7C840,224,960,224,1080,213.3C1200,203,1320,181,1380,170.7L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
}
50% {
d: path("M0,160L60,176C120,192,240,224,360,229.3C480,235,600,213,720,208C840,203,960,213,1080,218.7C1200,224,1320,224,1380,224L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
}
100% {
d: path("M0,288L60,256C120,224,240,160,360,149.3C480,139,600,181,720,202.7C840,224,960,224,1080,213.3C1200,203,1320,181,1380,170.7L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
}
}
.content-wave {
position: relative;
width: 100%;
height: 60vh;
background-size: cover;
background-attachment: fixed;
text-align: center;
}
.stl-wave-1{
background: url(../img/Coding.jpg);
}
.stl-wave-2{
background: url(../img/coding-924920_1920.jpg);
}
.content-wave p{
color: white;
}
.content-wave .waves {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*******************************************************************Barra Menu************************************************************/
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
@-moz-keyframes reveal-header {
0% {
top: -4em;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
@-webkit-keyframes reveal-header {
0% {
top: -4em;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
@-ms-keyframes reveal-header {
0% {
top: -4em;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
@keyframes reveal-header {
0% {
top: -4em;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
#header {
display: flex;
background-color: black;
box-shadow: 0 0 0.25em 0 rgba(149, 56, 158, 0.6);
cursor: default;
font-weight: 600;
height: 5em;
left: 0;
letter-spacing: 0.5em;
line-height: 3.25em;
margin: 0;
text-transform: uppercase;
top: 0;
width: 100%;
z-index: 10000;
color: white;
}
#header .logo {
border: 0;
display: inline-block;
font-size: 2rem;
height: inherit;
line-height: inherit;
padding: 1rem;
}
#header .logo strong {
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
background-color: #ffffff;
color: #43d8c9;
display: inline-block;
line-height: 1.65em;
margin-right: 0.325em;
padding: 0 0.125em 0 0.375em;
}
#header .logo:hover strong {
background-color: #95389e;
}
#header .logo:active strong {
background-color: #95389e;
}
#header nav {
display: flex;
justify-content: flex-end;
flex-grow: 1;
height: inherit;
line-height: inherit;
color: white !important;
}
#header nav a {
border: 0;
display: block;
font-size: 1em;
height: inherit;
line-height: inherit;
padding: 1rem;
position: relative;
vertical-align: middle;
color: white !important;
}
#header a i{
font-size: 1em;
margin-left: 1rem;
}
#header nav a:last-child {
padding-right: 1.5em;
}
#header nav a[href="#menu"] {
padding-right: 3.325em !important;
}
#header nav a[href="#menu"]:before, #header nav a[href="#menu"]:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 2px%3B stroke: %23ffffff%3B %7D%3C/style%3E%3Cline x1='0' y1='11' x2='24' y2='11' /%3E%3Cline x1='0' y1='21' x2='24' y2='21' /%3E%3Cline x1='0' y1='16' x2='24' y2='16' /%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 4rem;
content: '';
display: block;
height: 100%;
position: absolute;
right: 1.5em;
top: 0;
vertical-align: middle;
width: 4rem;
}
#header nav a[href="#menu"]:after {
transition: opacity 0.2s ease-in-out;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 2px%3B stroke: %239bf1ff%3B %7D%3C/style%3E%3Cline x1='0' y1='11' x2='24' y2='11' /%3E%3Cline x1='0' y1='21' x2='24' y2='21' /%3E%3Cline x1='0' y1='16' x2='24' y2='16' /%3E%3C/svg%3E");
opacity: 0;
z-index: 4;
}
#header nav a[href="#menu"]:hover:after, #header nav a[href="#menu"]:active:after {
opacity: 1;
}
#header nav a[href="#menu"]:last-child {
padding-right: 3.875em !important;
}
#header nav a[href="#menu"]:last-child:before, #header nav a[href="#menu"]:last-child:after {
right: 2em;
}
#header.reveal {
-moz-animation: reveal-header 0.35s ease;
-webkit-animation: reveal-header 0.35s ease;
-ms-animation: reveal-header 0.35s ease;
animation: reveal-header 0.35s ease;
}
#header.alt {
-moz-transition: opacity 2.5s ease;
-webkit-transition: opacity 2.5s ease;
-ms-transition: opacity 2.5s ease;
transition: opacity 2.5s ease;
-moz-transition-delay: 0.75s;
-webkit-transition-delay: 0.75s;
-ms-transition-delay: 0.75s;
transition-delay: 0.75s;
-moz-animation: none;
-webkit-animation: none;
-ms-animation: none;
animation: none;
background-color: transparent;
box-shadow: none;
position: absolute;
}
body.is-preload #header.alt {
opacity: 0;
}
@media screen and (max-width: 1680px) {
#header nav a[href="#menu"] {
padding-right: 3.75em !important;
}
#header nav a[href="#menu"]:last-child {
padding-right: 4.25em !important;
}
}
@media screen and (max-width: 1280px) {
#header nav a[href="#menu"] {
padding-right: 4em !important;
}
#header nav a[href="#menu"]:last-child {
padding-right: 4.5em !important;
}
}
nav.desk{
display: none!important;
}
@media (min-width: 64rem) {
#header nav.movil{
display: none;
}
nav.desk{
display: flex!important;
}
nav.desk ul{
list-style: none;
}
.desk ul li{
display: inline-block;
}
}
@media screen and (max-width: 736px) {
#header {
height: 2.75em;
line-height: 2.75em;
}
#header .logo {
padding: 0 1em;
}
#header nav a {
padding: 0 0.5em;
}
#header nav a:last-child {
padding-right: 1em;
}
#header nav a[href="#menu"] {
padding-right: 3.25em !important;
}
#header nav a[href="#menu"]:before, #header nav a[href="#menu"]:after {
right: 0.75em;
}
#header nav a[href="#menu"]:last-child {
padding-right: 4em !important;
}
#header nav a[href="#menu"]:last-child:before, #header nav a[href="#menu"]:last-child:after {
right: 1.5em;
}
}
@media screen and (max-width: 480px) {
#header .logo span {
display: none;
}
#header nav a[href="#menu"] {
overflow: hidden;
padding-right: 0 !important;
text-indent: 5em;
white-space: nowrap;
width: 5em;
}
#header nav a[href="#menu"]:before, #header nav a[href="#menu"]:after {
right: 0;
width: inherit;
}
#header nav a[href="#menu"]:last-child:before, #header nav a[href="#menu"]:last-child:after {
width: 4em;
right: 0;
}
}
#menu {
transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
align-items: center;
display: flex;
justify-content: center;
pointer-events: none;
background: rgba(247, 247, 247, 1);
box-shadow: none;
height: 100%;
left: 0;
opacity: 0;
overflow: hidden;
padding: 3em 2em;
position: fixed;
top: 0;
visibility: hidden;
width: 100%;
z-index: 10002;
}
#menu .inner {
transform: rotateX(20deg);
max-width: 100%;
max-height: 100vh;
opacity: 0;
text-align: center;
visibility: hidden;
width: 18em;
}
#menu .inner> :first-child {
margin-top: 2em;
}
#menu .inner> :last-child {
margin-bottom: 3em;
}
#menu ul {
margin: 0 0 1em 0;
position: relative;
}
#menu ul.links {
list-style: none;
padding: 0;
}
#menu ul.links>li {
padding: 0;
}
#menu ul li a:before {
content: '';
position: absolute;
top: 50%;
left: 40%;
display: flex;
justify-content: center;
align-items: center;
color: rgba(0, 0, 0, 0.1);
z-index: -1;
font-size: 5rem;
opacity: 0;
font-weight: 900;
letter-spacing: 40rem;
transform: translate(-50%, -50%);
transition: letter-spacing 0.5s, left 0.5s;
}
#menu ul li a:hover:before {
content: attr(data-text);
letter-spacing: 10px;
left: 50%;
opacity: 1;
width: 200vh;
height: 100vh;
}
#menu ul li:nth-child(1) a:before {
background: #95389e;
}
#menu ul li:nth-child(2) a:before {
background: #95389e;
}
#menu ul li:nth-child(3) a:before {
background: #95389e;
}
#menu ul li:nth-child(4) a:before {
background: #95389e;
}
#menu ul li:nth-child(5) a:before {
background: #95389e;
}
#menu ul.links>li>a:not(.button) {
border: 0;
border-top: solid 3px rgba(143, 86, 213, 0.8);
display: block;
font-size: 2rem;
font-weight: 600;
letter-spacing: 0.25em;
line-height: 4em;
text-decoration: none;
text-transform: uppercase;
}
#menu ul.links>li>.button {
display: block;
margin: 0.5em 0 0 0;
}
#menu ul.links>li:first-child>a:not(.button) {
border-top: 0 !important;
}
#menu .close {
transition: color 0.2s ease-in-out;
border: 0;
cursor: pointer;
display: block;
height: 4em;
line-height: 4em;
overflow: hidden;
padding-right: 1.25em;
position: absolute;
right: 0;
text-align: right;
text-indent: 8em;
top: 0;
vertical-align: middle;
white-space: nowrap;
width: 8em;
}
#menu .close:before, #menu .close:after {
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
background-position: center;
background-repeat: no-repeat;
content: '';
display: block;
height: 4em;
position: absolute;
right: 0;
top: 0;
width: 4em;
}
#menu .close:before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 2%3B %7D%3C/style%3E%3Cline x1='0' y1='0' x2='20' y2='20' /%3E%3Cline x1='20' y1='0' x2='0' y2='20' /%3E%3C/svg%3E");
}
#menu .close:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %239bf1ff%3B stroke-width: 2%3B %7D%3C/style%3E%3Cline x1='0' y1='0' x2='20' y2='20' /%3E%3Cline x1='20' y1='0' x2='0' y2='20' /%3E%3C/svg%3E");
opacity: 0;
}
#menu .close:hover:after, #menu .close:active:after {
opacity: 1;
}
body.is-ie #menu {
background: rgba(42, 47, 74, 0.975);
}
body.is-menu-visible #menu {
pointer-events: auto;
opacity: 1;
visibility: visible;
}
body.is-menu-visible #menu .inner {
transform: none;
opacity: 1;
visibility: visible;
}
.no-padding {
padding: 0;
}
.contenedor-btn{
justify-content: center;
align-items: center;
display: flex;
background: #f7f7f7;
}
.contenedor-btn a{
position: relative;
display: inline-block;
padding: 1rem 2rem;
margin: 2.5rem 0;
color: #43d8c9;
font-size: 24px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: 0.5s;
flex-direction: column;
letter-spacing: 4px;
}
.contenedor-btn a:hover{
color: #95389e!important;
background: #43d8c9;
box-shadow: 0 0 5px #43d8c9,
0 0 25px #43d8c9,
0 0 50px #43d8c9,
0 0 200px #43d8c9;
}
.contenedor-btn a span{
position: absolute;
display: block;
}
.contenedor-btn a span:nth-child(1){
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #43d8c9);
animation: animate-btn-neon1 1s linear infinite;
}
@keyframes animate-btn-neon1{
0%{
left: -100%;
}
50%,100%{
left: 100%;
}
}
.contenedor-btn a span:nth-child(1){
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #43d8c9);
animation: animate-btn-neon1 1s linear infinite;
}
@keyframes animate-btn-neon1{
0%{
left: -100%;
}
50%,100%{
left: 100%;
}
}
.contenedor-btn a span:nth-child(2){
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #43d8c9);
animation: animate-btn-neon2 1s linear infinite;
animation-delay: 0.25s;
}
@keyframes animate-btn-neon2{
0%{
top: -100%;
}
50%,100%{
top: 100%;
}
}
.contenedor-btn a span:nth-child(3){
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #43d8c9);
animation: animate-btn-neon3 1s linear infinite;
animation-delay: 0.5s;
}
@keyframes animate-btn-neon3{
0%{
right: -100%;
}
50%,100%{
right: 100%;
}
}
.contenedor-btn a span:nth-child(4){
bottom:-100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #43d8c9);
animation: animate-btn-neon4 1s linear infinite;
animation-delay: 0.75s;
}
@keyframes animate-btn-neon4{
0%{
bottom: -100%;
}
50%,100%{
bottom: 100%;
}
}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*******************************************************************Formulario************************************************************/
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.F{
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f7f7f7;
display: flex;
}
.form{
width: 50rem;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 2.2rem 2.2rem 3.6rem;
background: #f7f7f7;
border-radius: 1rem;
text-align: center;
box-shadow: -5px -5px 10px rgba(0,0,0,0.05),
5px 5px 15px rgba(255,255,255,0.5);
}
.form h2{
position: relative;
color: var(--prim);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 4px;
font-size: 2.2rem;
}
.form .input{
text-align: left;
margin-top: 5rem;
width: 100%;
}
.form .input .inputBx{
margin-top: 3.5rem;
}
.form .input .inputBx label{
display: block;
color: var(--sec);
margin-bottom: 0.4rem;
font-size: 1.6rem;
letter-spacing: 2px;
}
.form .input .inputBx input{
width: 100%;
height: 3.2rem;
background: #f7f7f7;
border: none;
outline: none;
border-radius: 2.5rem;
padding: 0.4rem 1rem;
color: #f7f7f7;
font-size: 1.6rem;
color: #43d8c9;
box-shadow: inset -2px -2px 6px rgba(0,0,0,0.1),
inset 2px 2px 6px rgba(255,255,255,0.8);
}
.form .input .inputBx input:focus{
border: 1px solid rgba(3,233,244,0.6);
}
.form .input .inputBx textarea:focus{
border: 1px solid rgba(3,233,244,0.6);
}
.form .input .inputBx textarea{
width: 100%;
height: 6rem;
background: #f7f7f7;
border: none;
outline: none;
border-radius: 2.5rem;
padding: 1rem 1rem;
color: #f7f7f7;
font-size: 1.6rem;
color: #43d8c9;
box-shadow: inset -2px -2px 6px rgba(0,0,0,0.1),
inset 2px 2px 6px rgba(255,255,255,0.8);
}
.form .input .inputBx input[type="submit"]{
color: #43d8c9;
margin-top: 2rem;
box-shadow: -2px -2px 6px rgba(0,0,0,0.1),
2px 2px 6px rgba(255,255,255,0.8);
}
.form .input .inputBx input[type="submit"]:hover{
cursor: pointer;
}
.form .input .inputBx input[type="submit"]:active{
text-shadow: 0 0 20px #43d8c9,
0 0 10px #43d8c9;
box-shadow: inset -2px -2px 6px rgba(0,0,0,0.1),
inset 2px 2px 6px rgba(255,255,255,0.8);
}
.form .input .inputBx input::placeholder{
color: rgba(3,233,244,0.6);
font-size: 1.6rem;
}
.forget{
margin-top: 2rem;
color: #555;
font-size: 1.6rem;
}
.forget a{
color: #43d8c9;
}
@media (min-width: 48rem) {
.F{
padding: 5rem;
}
.form{
width: 90%;
}
.form .input{
margin-top: 3rem;
}
.form .input .inputBx{
margin-top: 2.5rem;
}
.form h2{
font-size: 2.2rem;
}
.form .input .inputBx label{
font-size: 1.8rem;
}
.form .input .inputBx input{
font-size: 1.6rem;
height: 5rem;
}
.form .input .inputBx input::placeholder{
font-size: 1.6rem;
}
.forget{
font-size: 1.6rem;
}
}
@media (min-width: 76.8rem) {
.form{
width: 80%;
}
.form .input{
margin-top: 2.5rem;
}
.form .input .inputBx{
margin-top: 2.5rem;
}
}
@media (min-width: 99rem) {
.form{
width: 80%;
}
.form .input{
margin-top: 2rem;
}
.form .input .inputBx{
margin-top: 2rem;
}
.form h2{
font-size: 2rem;
}
.form .input .inputBx label{
font-size: 1.1rem;
}
.form .input .inputBx input{
font-size: 1.1rem;
height: 2.7rem;
}
.form .input .inputBx input::placeholder{
font-size: 1.1rem;
}
.forget{
font-size: 1.1rem;
}
}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*******************************************************************Contador************************************************************/
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.cuenta-reg ul li{
text-transform: uppercase;
font-family: 'Tajawal', sans-serif;
text-align: center;
font-size: 2rem;
list-style: none;
}
.numero{
font-family: 'Barlow', sans-serif;
margin: 0 0 1rem 0;
font-size: 6rem;
display: block;
color: #95389e!important;
}
.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.clearfix:after {
clear: both;
}
@media (min-width: 76.8rem) {
.cuenta-reg ul li{
width: 25%;
float: left;
}
}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*******************************************************************Footer************************************************************/
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.site-footer{
background-color: black;
padding-top: 4rem;
margin-top: 2rem;
}
.contenedor-footer{
color: white;
background-color: black;
padding: 0 2rem;
font-size: 0.8rem;
text-align: justify;
}
@media (min-width: 76.8rem) {
.contenedor-footer{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 3rem;
justify-content: center;
}
.menu .redes-sociales{
text-align: left;
}
}
.site-footer h3{
color: white;
text-transform: uppercase;
font-family: 'Tajawal', sans-serif;
margin-bottom: 2rem;
}
.site-footer h3 span {
color: #43d8c9;
}
.ultimos-tweets ul li{
margin-bottom: 1rem;
list-style: none;
}
.menu .redes-sociales{
text-align: center;
font-size: 3rem;
letter-spacing: 5px;
}
.copy{
background-color: #2E2E2E;
color: white;
padding: 1rem 0;
margin: 2rem 0 0 0;
text-align: center;
}
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*******************************************************************Paginas************************************************************/
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.pages{
display: grid;
grid-template-columns: repeat(1, 1fr);
padding: 1rem;
grid-gap: 2rem;
}
@media (min-width: 48rem) {
.pages{
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 76.8rem) {
.pages{
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 99rem) {
.pages{
grid-template-columns: repeat(4, 1fr);
}
}
.page{
position: relative;
overflow: hidden;
max-height: 30rem;
}
.pages .page a img{
transition: 2s;
}
.page img:hover{
-webkit-transform: scale(1.1);
cursor: pointer;
}
.page p{
background-color: rgba(0,0,0,.5);
transition: all .35s ease-in-out;
text-transform: uppercase;
position: absolute;
text-align: left;
font-size: 2rem;
color: #43d8c9;
padding: 1rem;
width: 100%;
margin: 0;
bottom: 0;
}
.page:hover p{
bottom: -8rem;
opacity: 0;
}