@import url(https://fonts.googleapis.com/css?family=Playfair+Display);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);





body {
    
	color: #222;
    margin: auto;
    font-size: 17px;
    line-height: 1.8 !important;
    background-color: #deffff;
}

html {
	overflow-x:hidden;
}

h1,h2,h4,h5,h6 {
	font-family: 'Open Sans', sans-serif;
	font-weight:200;
	color: #222;
}

h3{
	font-family: 'Clash Display', sans-serif;
	font-size: 1em;
	line-height: 1.5;
	text-align: center;
}


p{
	
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	max-width:900px;
	margin: auto;
  /*margin: auto 25%;*/
  line-height: 1.5;
  font-size: 3vmin;
  letter-spacing: .03em;
  color: #000;
  text-align: center;
	
}



	.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  
}




section {
	
	
}


/*-------Hover on posts-------*/
.rollover {
  position: relative;
  display: inline-block;
}
.rollover img {
  transition: opacity .5s ease-in-out;
  backface-visibility: hidden;
  max-height: 600px;
}
.rollover .first {
  top: 0;
  left: 0;
}
.rollover .second {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.rollover:hover .first {
  opacity: 0;
}
.rollover:hover .second {
  opacity: 1;
}

/*-------End hover on posts-------*/


@media (max-width: 620px) {
   .feliz {
   display: none;
   }
 }

 @media (max-width: 420px) {
   .feliz {
   display: none;
   }
}



.example-grid{
  display: grid;
  /* defines one row */
  grid-template-rows: 100vh;
  /* defines three columns */
  grid-template-columns: 1fr 1fr 1fr;
}

.item{
  padding: 20px;
  text-align: center;
  color: #fff;
}

.example-item1{background: #FFAE5D;}
.example-item2{background: #FFB6E3;}
.example-item3{background: #DDD2C2;}


.ying-yang{
  margin: 15px auto;
  width: 250px;
  height: 250px;
  animation: rotate 5s infinite ease-in-out;
  
  background: radial-gradient(50px circle at 50% 25%,#ccd7f4 50%,transparent 50%),
  radial-gradient(50px circle at 50% 75%,#e1fe2d 50%,transparent 50%),
  radial-gradient(123px circle at 50% 25%,#e1fe2d 50%,transparent 50%),
  radial-gradient(123px circle at 50% 75%,#ccd7f4 50%,transparent 50%),
  linear-gradient(-90deg ,#ccd7f4 50%,#e1fe2d 50%);
  border-radius: 50%;
}



@keyframes rotate{
  
  100%{
    transform: rotate(360deg);
  }
}



.flower {
  width: 20vw;
  height: 10vh;
  background: #8dff00;
  border-radius: 50%;
  margin-top: 50%;
  margin-left: 10%;
  }
  
.flower::before {
  content: "";
  display: block;
  position: absolute;
  width: 20vw;
  height: 10vh;
  background: #8dff00;
  border-radius: 50%;
  transform: rotate(60deg)
}
.flower::after {
  content: "";
  display: block;
  position: absolute;
  width: 20vw;
  height: 10vh;
  background: #8dff00;
  border-radius:50%;
  transform: rotate(-60deg)}
  
  .flower {
  animation: rotation 8s infinite linear;
	}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


#flower {
  position: absolute;
  width: 20vw;
  height: 10vh;
  bottom: 50%;
  left: 10%;
  overflow: visible;
}



/* post article*/

.blog-article {
  bottom: ;
}
.blog-article img {
  height: 260px;
  max-height: 22vh;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(1);
}

.blog-article h2 {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  margin: 8px 0 8px;
}
.blog-article h2 span {
  font-family: "Playfair Display", serif;
}
.blog-article p {
  line-height: 1.5;
  margin: 14px 0;
}
.blog-article a {
  color: #161419;
  text-decoration: none;
  font-size: 1em;
  letter-spacing: -1px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
  border-top: 1px solid #94918f;
  padding-top: 14px;
}
.blog-article a svg {
  width: 26px;
  margin-right: 5px;
}

.blog-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.blog-detail span {
  font-family: "Playfair Display", serif;
}

/*hover post venta*/

.post {
  display: flex;
  text-decoration: none;
  color: inherit;
  max-width: 400px;
  position: relative;
  padding: 1rem;
  box-shadow: inset 0 0 0 4px #f37ef3, inset -4px -4px 0 6px #ccd7f4;
  background-color: #fff;
  cursor: pointer;
}
.post:before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #f37ef3;
  transform-origin: 0 bottom 0;
  transform: scaleY(0);
  transition: 0.4s ease-out;
}
.post:hover .post-title {
  color: #fff;
}
.post:hover:before {
  transform: scaleY(1);
}

.post-title {
  position: relative;
  font-size: 2rem;
  font-weight: 700;
  transition: 0.4s ease-out;
  color: #8dff00;
  padding: 10px;
}

.ver-mas{
	position: relative;
	text-align: right;
}





/*tres columnas*/

$max-width: 100%;

* {
  box-sizing: border-box;
}

.block {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;


  display: -ms-flexbox;
  -ms-flex-wrap: nowrap;
  -ms-flex-pack: center;

  
}

.block__main {
  width: 100%;
  height: 30em;
  max-width: $max-width;
  padding: 2em;
  text-align: center;
  
}

.block__column {
  width: 50%;
  display: flex;
  flex-wrap: nowrap;

  display: -ms-flexbox;
  -ms-flex-wrap: nowrap;

  .block__main {
    max-width: $max-width/2;
    margin: 0;
    color: #fff;
  }

  &:first-child {
    justify-content: flex-end;
    -ms-flex-pack: end;
    background: #3498db;

    .block__main {
      border-right: 0;
    }
  }

  &:last-child {
    justify-content: flex-start;
    -ms-flex-pack: start;
    background: #34495e;

    .block__main {
      border-left: 0;
    }
  }
}

.block--triple {
  .block__main {
    width: 66.66666%;
    max-width: $max-width/3;
  }

  .block__column:nth-child(1) {
    .block__main {
      transform: translateX(-50%);
    }
  }

  .block__column:nth-child(2) {
    margin-left: -25%;
    margin-right: -25%;
    justify-content: center;
    -ms-flex-pack: center;

    .block__main {
      position: relative;
      z-index: 1;
      border: 0;
      background: #2ecc71;
    }
  }

  .block__column:nth-child(3) {
    .block__main {
      transform: translateX(50%);
    }
  }
}




/*blog grid*/

.cards {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding-top: 10%;
  padding-bottom: 5%;
  
}

.card {
  background-position: center center;
  background-size: cover;
  color: white;
  padding: 1rem;
  height: 30rem;
  gap: 1rem;
}

.card-home {
  background-position: center center;
  background-size: cover;
  color: white;
  gap: 1rem;
}

.card_image{
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  width: 100%;
  height: 22rem;
  object-fit: cover;
     
}

.card_text {
  font-family: 'Clash Display', sans-serif;
  color: #000;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 20px;  
  font-weight: 400;
  margin-left: 10px;
}

.blog-detail {
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 14px;

 span {
  font-family: $italic-font;
  
 }
}



.slider-container {
  background: #deffff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.slider {
  width: 100%;
  max-width: 600px;
  height: 400px;
  margin: 20px;
  text-align: center;
  overflow: hidden;
  position: relative;
}


.slides {
  display: flex;
  overflow-x: scroll;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.slide:nth-of-type(even) {
  background-color: rgb(250, 246, 212);
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: 400px;
  scroll-snap-align: center;
  margin-right: 0px;
  box-sizing: border-box;
  background: white;
  transform-origin: center center;
  transform: scale(1);
}


@media(max-width:768px){
	
	.slider{
		height: 27vh;
	}
	.slider .slides,
	.slider .slides .slide{
		height: 100%;
	}
	
}

#slide1haku{
	background-image: url(../img/haku/Slidehaku1.jpg);
	background-size: cover;
}

#slide2haku{
	background-image: url(../img/haku/Slidehaku2.jpg);
	background-size: cover;
}

#slide3haku{
	background-image: url(../img/haku/Slidehaku3.jpg);
	background-size: cover;
}

#slide4haku{
	background-image: url(../img/haku/Slidehaku4.jpg);
	background-size: cover;
}

#slides__1{
	background-image: url(../img/blanco/Slide_blanco1.jpg);
	background-size: cover;
}

#slides__2{
	background-image: url(../img/blanco/Slide_blanco2.jpg);
	background-size: cover;
}

#slides__3{
	background-image: url(../img/blanco/Slide_blanco3.jpg);
	background-size: cover;
}

#slides__4{
	background-image: url(../img/blanco/Slide_blanco4.jpg);
	background-size: cover;
}

#slides__1sidejob{
	background-image: url(../img/sidejob/Slide_sidejob1.jpg);
	background-size: cover;
}

#slides__2sidejob{
	background-image: url(../img/sidejob/Slide_sidejob2.jpg);
	background-size: cover;
}

#slides__3sidejob{
	background-image: url(../img/sidejob/Slide_sidejob3.jpg);
	background-size: cover;
}

#slides__4sidejob{
	background-image: url(../img/sidejob/Slide_sidejob4.jpg);
	background-size: cover;
}


.slide__text {
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
}

.slide a {
  background: none;
  border: none;
}

a.slide__prev,
.slider::before {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  left: 5%;
}

a.slide__next,
.slider::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  right: 5%;
}

.slider::before,
.slider::after,
.slide__prev,
.slide__next {
  position: absolute;
  top: 48%;
  width: 35px;
  height: 35px;
  border: solid #F37EF3;
  border-width: 0 4px 4px 0;
  padding: 3px;
  box-sizing: border-box;
}

.slider::before,
.slider::after {
  content: "";
  z-index: 1;
  background: none;
  pointer-events: none;
}

.slider__nav {
  box-sizing: border-box;
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  text-align: center;
}

.slider__navlink {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #F37EF3;
  margin: 0 10px 0 10px;
}		
		
		.sidejob-1,.sidejob-2,.sidejob-3,.sidejob-4,.sidejob-5,.sidejob-6{
		background-size:cover;
		height:100vh;
		width:100%;
		background-position:center;
		}

/* Thumbnail Images*/

.sidejob-1 {background-image: url('../img/sidejob/mmt_sidejob05.jpg');}
.sidejob-2 {background-image: url('../img/sidejob/mmt_sidejob06.jpg');}
.sidejob-3 {background-image: url('../img/sidejob/mmt_sidejob07.jpg');}
.sidejob-4 {background-image: url('../img/sidejob/mmt_sidejob08.jpg');}
.sidejob-5 {background-image: url('../img/sidejob/mmt_sidejob09.jpg');}
.sidejob-6 {background-image: url('../img/sidejob/mmt_sidejob10.jpg');}








.anuncio {
  width: 100%;
  height: 20%;
  font-size: 10px;
  background: #E1FE2D;
  color: #F37EF3;
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
}

.wrappered {
  height: 100%;
  width: 50%;
  background: #F37EF3;
  overflow: hidden;
  color: #E1FE2D;
  position: absolute;
  top: 0;
  left: 0;
  
}

.sliding {
  position: absolute;
  top: 50%;
  white-space: nowrap;
  font-size: 12rem;
  line-height: 220px;
  overflow: hidden;
  font-family: "arial black";
  animation: animate 20s linear infinite;
}

@keyframes animate {
  0% {
    transform: translate(0, -50%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

.gira {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  z-index: 0;
}



.spin {
  
  animation-name: spin, depth;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 3s;
}



.css-popup-container, .css-popup-container * {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;}
.css-popup-container {cursor:pointer;font:normal 2em/2.2em "Open Sans Condensed", sans-serif;height:auto;margin:10px 0;padding:.25em 0;text-align:center;}
.css-popup-container a {color:#333;background:#e1fe2d;text-decoration:none;font-weight:bold;/*line-height:35px;*/}
.css-popup-container a:hover {text-decoration:none;}
.css-popup-container strong {background:#666;color:#fff;font-weight:bold;padding:.1em .2em;text-transform:none;}
.css-popup-container hr {background:transparent;border-color:transparent;margin:10px 0 0;padding:0;}

.css-popup-container .css-popup {background:#f37ef3;display:none;margin:auto;padding:.25em;position:relative;width:60%;float:right;}
.css-popup-container .css-popup .close {z-index:1;}
.css-popup-container .css-popup .close:after {border-radius:100%;color:#333;content:"X";display:block;float:right;font:bold .4em/1.6 Verdana;padding:0 .4em;position:relative;}
.css-popup-container .css-popup .close:hover:after {background:#ddd;}

.css-popup-container a:active,
.css-popup-container a:focus {border:0;outline:0;opacity:.5;}
.css-popup-container a:focus ~ .css-popup,
.css-popup-container a:active ~ .css-popup {display:block;outline:0;}

@keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

@keyframes depth {
  0% {
    text-shadow: 0 0 #000;
  }
  25% { 
    text-shadow: 1px 0 #7d5915, 2px 0 #7d5915, 3px 0 #7d5915, 4px 0 #7d5915, 5px 0 #7d5915, 6px 0 #7d5915, 7px 0 #7d5915, 8px 0 #7d5915;
  }
  50% {
    text-shadow: 0 0 #000;
  }
  75% { 
    text-shadow: -1px 0 #7d5915, -2px 0 #7d5915, -3px 0 #7d5915, -4px 0 #7d5915, -5px 0 #7d5915, -6px 0 #7d5915, -7px 0 #7d5915, -8px 0 #7d5915;
  }
  100% {
    text-shadow: 0 0 #000;
  }
}




a,a:link {
	color: #222;
}

a:hover,a:focus {
	color: #222;
}


/* Navbar */

.navbar-fixed-top .nav {
    padding: 7px 0;
    
}

.navbar-fixed-top .navbar-brand {
    padding: 0;
}

.navbar-brand img{
	max-height:50px;
	
}

.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-left: 0px;
    z-index: 2000;
    
}

@media(min-width:808px) {
    body {
        /*padding-top: 100px;  Required padding for .navbar-fixed-top. Change if height of navigation changes. */
        
    }
    
    .navbar{
	    max-height: 50px;
	    }

    .navbar-fixed-top .navbar-brand {
        padding: 7px 0;
    }
}

.navbar-default {
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    background-color: #fff;
    color: #222;
}

.navbar-default .navbar-nav > li > a {
    color: #222;
    font-size: 4vh;
    font-family: "Reenie Beanie";
    background-color: #E1FE2D;
   
}

.navbar-default .navbar-nav > li > a:hover {
    color: #555;
}


.c--anim-btn span {
    color: black;
        text-decoration: none;
        text-align: center;
        display: block;
        }
        
        .c--anim-btn, .c-anim-btn {
        transition: 0.3s;   
        }
        
        .c--anim-btn {
        height: 64px;
        font-family: 'Butterfly Kids', cursive;
		letter-spacing: 4px;
		font-size: 22px;
		padding-top: 5px;
        overflow: hidden;
        width:;
        
        }
        
        .c-anim-btn{
        margin-top: 0em; 
        }
        
        .c--anim-btn:hover .c-anim-btn{
        margin-top: -3em;
        }


/* Cards style */




/* Toggle Animation */

.navbar-toggle * {
	-ms-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.navbar-toggle {
    border: medium none;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    height: 50px;
    padding: 16px;
    width: 50px;
    float: right;
	margin-top:0px;
	margin-bottom:0px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #fff;
}

.navbar-default .navbar-toggle, .navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #fff;
}

.navbar-toggle span {
	width: 25px;
	height: 3px;
	margin-bottom: 5px;
	background-color: #222;
	display: block;
}
.navbar-toggle span.bar1 {
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
	-ms-transform-origin: 1px 3px;
	-webkit-transform-origin: 1px 3px;
  -moz-transform-origin: 1px 3px;
  -o-transform-origin: 1px 3px;
	transform-origin: 1px 3px;
	width: 31px;
}
.navbar-toggle span.bar2 {
	-ms-transform: rotate(-360deg) scale(0);
	-webkit-transform: rotate(-360deg) scale(0);
  -moz-transform: rotate(-360deg) scale(0);
  -o-transform: rotate(-360deg) scale(0);
	transform: rotate(-360deg) scale(0);
}

.navbar-toggle span.bar3 {
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-ms-transform-origin:8px 2px;
	-webkit-transform-origin: 8px 2px;
	transform-origin: 8px 2px;
	width: 31px;
}
.navbar-toggle.collapsed span.bar1,
.navbar-toggle.collapsed span.bar2,
.navbar-toggle.collapsed span.bar3,
.navbar-toggle.collapsed span.bar4 {
	-ms-transform: none;
	-webkit-transform: none;
	transform: none;
	width: 30px;
}


/*marquee*/

marquee {
  font-size: 20px;
  background-color: #d295d5;
  color: #e9e6e4;
  padding: 6px 0;
  width: calc(100% + 44px);
  margin-left: -20px;
  flex-shrink: 0;
}
marquee span:before {
  display: inline-block;
  content: "";
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: relative;
  top: -1px;
  vertical-align: baseline;
  background-color: #e9e6e4;
  margin: 0 16px;
}

/*ends marquee*/



/* sticky social */

.icon-bar {
  position: fixed;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #f37ef3;
}

.youtube {
  /*background: #c4302b;*/
  background: #8dff00;
  color: white;
}

.instagram {
  /*background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);*/
  background: #8dff00;
  color: white;
}

.tiktok {
  /*background: #000;*/
  background: #8dff00;
  color: white;
}

/* end sticky social */



/* ----- css grid ----- */



/* ----- end css grid ----- */


/* Intro */


video {
  width: 100%;
  height: auto;
}

#myVideo {
  
  min-width: 100%;
  object-fit: cover;
}



@import url("https://rsms.me/inter/inter.css");
html {
  font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
  html {
    font-family: "Inter var", sans-serif;
  }
}



.intro {
  width: 100vw;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: floating 5s cubic-bezier(0.37, 0, 0.63, 1) infinite;	
  margin: 0;
  color: #E1FE2D;
  font-weight: 900;
  font-size: 15vw;
  overflow: hidden;
}

.tilt {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: tilting 10s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

floating-text {
  transition: font-weight 0.4s ease-in;
  animation: floating-secondary 2.5s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

floating-text:nth-child(1) {
  animation-delay: 1s;
}
floating-text:nth-child(2) {
  animation-delay: 2s;
}
floating-text:nth-child(3) {
  animation-delay: 3s;
}
floating-text:nth-child(4) {
  animation-delay: 4s;
}
floating-text:nth-child(5) {
  animation-delay: 5s;
}
floating-text:nth-child(6) {
  animation-delay: 6s;
}
floating-text:nth-child(7) {
  animation-delay: 7s;
}



@keyframes floating {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 5vh);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes floating-secondary {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 1vh);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes tilting {
  0% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(1deg);
  }
}

#animated-gif-container {
    
  background-image:url('../img/flor_bl.gif');
  background-repeat:no-repeat;
  background-size: contain
   
    
}


.glitch{
  color:white;
  font-size:100px;
  position:relative;
  width:400px;
  margin:0 auto;
}
@keyframes noise-anim{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}


/*intro efffect*/

@-webkit-keyframes typing { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }

.typing { 
	font: bold 300% Consolas, Monaco, monospace;
	border-right: .1em solid black;
	width: 16.5em; 
	width: 21ch;
	margin: 2em 1em;
	white-space: nowrap;
	overflow: hidden;
	-webkit-animation: typing 7s steps(21, end),
	           blink-caret .5s step-end infinite alternate;
}




/*SMILEY*/


div.smileyface {
	width: 300px;
	height: 300px;
	position: relative;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	display: block;
	float: right;
	
	}
	
p.eyes {
	width: 50px;
	height: 80px;
	background: lime;
	border-radius: 100px/160px;
	-webkit-border-radius: 100px 160px;
	-moz-border-radius: 100px/160px;
	position: absolute;
	top: 40px;
	box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	}	
	
	p.eyes.lefteye {
		left: 65px;
		}
		
	p.eyes.righteye {
		right: 80px;
		}
		
div.smile {
	width: 200px;
	height: 70px;
	border: 10px solid lime;
	border-top: 0;
	background: rgba(0,0,0,0);
	-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
	-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
	border-radius: 0 0 120px 120px / 0 0 90px 90px;
	position: absolute;
	bottom: 50px;
	left: 38px;
	box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	}
	
div.corner {
	width: 10px;
	height: 30px;
	background: lime;
	border-radius: 100px/160px;
	-webkit-border-radius: 100px 160px;
	-moz-border-radius: 100px/160px;
	position: absolute;
	top: -12px;
	-webkit-transform: rotate(65deg);
	-moz-transform: rotate(65deg);
	left: -12px;
	}
	
	div.corner.right {
		left: 180px;
		-webkit-transform: rotate(-65deg);
		-moz-transform: rotate(-65deg);		
		}


/* About */


.about h1{
	font-family: 'Clash Display', sans-serif;
	font-size: 4vw;
	padding-bottom: 3em;
	color: #f37ef3;
	
}

.big-letter p:first-child:first-letter { 
	float: left; 
	color: #222; 
	font-size: 8em;  
	line-height: 0.8em; 
	text-transform: uppercase; 
	padding-top: 0px;  
	padding-right: 0.1em; 
	padding-left: –0.03em;	
}

/* Firefox Fix */

@-moz-document url-prefix() {
    .big-letter p:first-child:first-letter {
        padding-top: 0.08em;  
    }
}



/* Carousel */

.carousel-control.left {
  background-image: none;
  filter: none;
}
.carousel-control.right {
  background-image: none;
  filter: none;
}



/* Gallery */

.post-1{
	background-image: url(../img/1.gif);
}


/* Hover Effect */

.hovereffect a:link,.hovereffect a:hover,.hovereffect a:focus,.hovereffect a:visited {
	color:#8DF00;
}

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: left;
  background:;
  cursor:pointer;
}

.hovereffect .overlay {
  width: 90%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 30% 20%;
  cursor:pointer;
}

.hovereffect a, .hovereffect p,.hovereffect h2 {
  color: #8DF00;
  text-decoration:none;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
}

.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
  color:#8DF00;
  text-decoration:none;
  opacity: 1;
  letter-spacing:1px;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

@media (max-width: 992px) {
	.hovereffect{
		margin-bottom: 25px;
	}
}

.hovereffect img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor:pointer;
}

.hovereffect:hover img {
  opacity: 0;
  filter: alpha(opacity=40);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.hovereffect .photo-1, 
.hovereffect .photo-2, 
.hovereffect .photo-3,
.hovereffect .photo-4,
.hovereffect .photo-5,
.hovereffect .photo-6{
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hovereffect:hover .photo-1,
.hovereffect:hover .photo-2,
.hovereffect:hover .photo-3,
.hovereffect:hover .photo-4,
.hovereffect:hover .photo-5,
.hovereffect:hover .photo-6{
  opacity: 1;
  filter: alpha(opacity=0);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}


.sidejob-1, 
.sidejob-2,
.sidejob-3,
.sidejob-4,
.sidejob-5,
.sidejob-6,
.bruja-1,
.bruja-2,
.bruja-3,
.bruja-4,
.bruja-5,
.bruja-6,
.blanco-1,
.blanco-2,
.blanco-3,
.blanco-4,
.psycho-1,
.psycho-2,
.psycho-3,
.psycho-4,
.ruta-1,
.ruta-2,
.ruta-3,
.ruta-4,
.cumple-1,
.cumple-2,
.cumple-3,
.cumple-4,
.cumple-5,
.cumple-6,
.cumple-7,
.cumple-8,
.frutas-1,
.frutas-2, .frutas-3, .frutas-4, .frutas-5, .frutas-6, .gato-1, .gato-2, .gato-3, .gato-4, .gato-5, .gato-6, .rosa-1, .rosa-2, .rosa-3, .rosa-4, .rosa-5, .rosa-6, .marte-1, .marte-2, .marte-3, .marte-4, .nikko-1, .nikko-2, .nikko-3, .nikko-4, .payaso-1, .payaso-2, .payaso-3, .payaso-4, .bilia-1, .bilia-2{
	background-size:cover;
	height:100vh;
	width:100%;
	background-position:center;
}

.botitacherry-1,
.botitacherry-2,
.botitacherry-3,
.botitacherry-4,
.botitacherry-5,
.botitacherry-6{
	background-size:cover;
	height:100vh;
	width:100%;
	background-position:center;
}

.coconara-logo,
.coconara-1,
.coconara-2,
.coconarasingle-5,
.coconarasingle-6,
.coconarasingle-7,
.coconarasingle-8,
.coconarasingle-9,
.coconarasingle-10,
.coconarasingle-11,
.coconarasingle-12{
	background-size:contain;
	height:100vh;
	width:100%;
	background-position:center;
	background-repeat: no-repeat;
}


.coconarasingle-1,
.coconarasingle-2,
.coconarasingle-3,
.coconarasingle-4,
.coconarasingle-13,
.coconarasingle-14,
.coconarasingle-15,
.coconarasingle-16{
	background-size:contain;
	height:50vh;
	width:100%;
	background-position:center;
	background-repeat: no-repeat;
}

.coconarasingle-7{
	transform: rotate(-3deg)
}

.coconarasingle-16{
	transform: rotate(5deg)
}


@media only screen and (max-width: 600px) {
    .coconara-logo,
.coconara-1,
.coconara-2,
.coconarasingle-1,
.coconarasingle-2,
.coconarasingle-3,
.coconarasingle-4,
.coconarasingle-5,
.coconarasingle-6,
.coconarasingle-7,
.coconarasingle-8,
.coconarasingle-9,
.coconarasingle-10,
.coconarasingle-11,
.coconarasingle-12,
.coconarasingle-13,
.coconarasingle-14,
.coconarasingle-15,
.coconarasingle-16{
        height:50vh;
    }
}


.osaka-1, .osaka-2, .kyoto-3, .kyoto-4, .kyoto-5, .roadtrip-6, .roadtrip-7, .roadtrip-8, .springday-2{
	background-size:contain;
	background-repeat: no-repeat;
	height:100vh;
	width:100%;
	background-position:center;
}

@media only screen and (max-width: 600px) {
    .osaka-1, .osaka-2, .kyoto-3, .kyoto-4, .kyoto-5, .roadtrip-6, .roadtrip-7, .roadtrip-8, .springday-2{
        height:50vh;
    }
}


.haku-1, .haku-2, .haku-3, .haku-4{
	background-size:cover;
	height:100vh;
	width:100%;
	background-position:center;
}

.cereza-1, .cereza-2, .cereza-4, .cereza-5, .cereza-6, .cereza-7, .cereza-9, .cereza-10, .cereza-11, .cereza-12{
	background-size:cover;
	height:100vh;
	width:100%;
	background-position:center;
}

.cereza-3, .cereza-8{
	background-size:cover;
	height:80vh;
	width:100%;
	background-position:center;
	
}

.ninja-1, .ninja-2, .ninja-3, .ninja-4, .ninja-5, .ninja-6{
	background-size:cover;
	height:80vh;
	width:100%;
	background-position:center;
	
}

.pants-1, .pants-2, .pants-3, .pants-4, .pants-5, .pants-6, .pants-7, .pants-8, .pants-9, .pants-10, .pants-11, .pants-12{
	background-size:cover;
	height:100vh;
	width:100%;
	background-position:center;
}

@media only screen and (max-width: 600px) {
    .pants-12{
        height:50vh;
    }
}


/* Thumbnail Images*/

.bilia-1{background-image: url('../img/bugambilia/bugambilia.jpg');}
.bilia-2{background-image: url('../img/bugambilia/bugambilias.jpeg');}
.cumple-1{background-image: url('../img/cumpleanera/IMG_1276.jpg');}
.cumple-2{background-image: url('../img/cumpleanera/IMG_1319.jpg');}
.cumple-3{background-image: url('../img/cumpleanera/IMG_1354.jpg');}
.cumple-4{background-image: url('../img/cumpleanera/IMG_1383.jpg');}
.cumple-5{background-image: url('../img/cumpleanera/IMG_1397.jpg');}
.cumple-6{background-image: url('../img/cumpleanera/IMG_1491.jpg');}
.cumple-7{background-image: url('../img/cumpleanera/IMG_1499.jpg');}
.cumple-8{background-image: url('../img/cumpleanera/IMG_1515.jpg');}
.frutas-1{background-image: url('../img/frutas/frutas_mmt1.jpeg');}
.frutas-2{background-image: url('../img/frutas/frutas_mmt2.jpeg');}
.frutas-3{background-image: url('../img/frutas/frutas_mmt3.jpeg');}
.frutas-4{background-image: url('../img/frutas/frutas_mmt4.jpeg');}
.frutas-5{background-image: url('../img/frutas/frutas_mmt5.jpeg');}
.frutas-6{background-image: url('../img/frutas/frutas_mmt6.jpeg');}
.bruja-1{background-image: url('../img/brujademar/brujacollage.jpg');}
.bruja-2{background-image: url('../img/brujademar/brujacollage2.jpg');}
.bruja-3{background-image: url('../img/brujademar/bruja_1.jpg');}
.bruja-4{background-image: url('../img/brujademar/bruja_2.jpg');}
.bruja-5{background-image: url('../img/brujademar/bruja_3.jpg');}
.bruja-6{background-image: url('../img/brujademar/bruja_4.jpg');}
.blanco-1{background-image: url('../img/blanco/1_blanco.jpg');}
.blanco-2{background-image: url('../img/blanco/2_blanco.jpg');}
.blanco-3{background-image: url('../img/blanco/3_blanco.jpg');}
.blanco-4{background-image: url('../img/blanco/4_blanco.jpg');}
.gato-1{background-image: url('../img/gatos/1gato.jpeg');}
.gato-2{background-image: url('../img/gatos/2gato.jpeg');}
.gato-3{background-image: url('../img/gatos/3gato.jpeg');}
.gato-4{background-image: url('../img/gatos/4gato.jpeg');}
.gato-5{background-image: url('../img/gatos/5gato.jpeg');}
.gato-6{background-image: url('../img/gatos/6gato.jpeg');}
.marte-1{background-image: url('../img/marte/mmt_marte_v1.jpg');}
.marte-2{background-image: url('../img/marte/mmt_marte_v3.jpg');}
.marte-3{background-image: url('../img/marte/mmt_marte_v4.jpg');}
.marte-4{background-image: url('../img/marte/mmt_marte_v5.jpg');}
.nikko-1{background-image: url('../img/nikko/nikkony1.jpg');}
.nikko-2{background-image: url('../img/nikko/nikkony2.jpg');}
.nikko-3{background-image: url('../img/nikko/nikkony4.jpg');}
.nikko-4{background-image: url('../img/nikko/nikkony5.jpg');}
.payaso-1 {background-image: url('../img/payaso/payaso1.jpeg');}
.payaso-2 {background-image: url('../img/payaso/payaso2.jpeg');}
.payaso-3 {background-image: url('../img/payaso/payaso3.jpeg');}
.payaso-4 {background-image: url('../img/payaso/payaso4.jpeg');}
.ruta-1 {background-image: url('../img/ruta/ruta-04.JPG');}
.ruta-2 {background-image: url('../img/ruta/ruta-05.JPG');}
.ruta-3 {background-image: url('../img/ruta/ruta-06.JPG');}
.ruta-4 {background-image: url('../img/ruta/ruta-07.JPG');}
.rosa-1{background-image: url('../img/rosa/rosa_1.jpg');}
.rosa-2{background-image: url('../img/rosa/rosa_2.jpg');}
.rosa-3{background-image: url('../img/rosa/rosa_3.jpg');}
.rosa-4{background-image: url('../img/rosa/rosa_4.jpg');}
.rosa-5{background-image: url('../img/rosa/rosa_5.jpg');}
.rosa-6{background-image: url('../img/rosa/rosa_6.jpg');}
.psycho-1{background-image: url('../img/pstropical/mmtpintura1.jpg');}
.psycho-2{background-image: url('../img/pstropical/mmtpintura2.jpg');}
.psycho-3{background-image: url('../img/pstropical/mmtpintura3.jpg');}
.psycho-4{background-image: url('../img/pstropical/mmtpintura4.jpg');}

.botitacherry-1{background-image: url('../img/botitacherry/botitacherry1.jpeg');}
.botitacherry-2{background-image: url('../img/botitacherry/botitacherry2.jpeg');}
.botitacherry-3{background-image: url('../img/botitacherry/botitacherry3.jpeg');}
.botitacherry-4{background-image: url('../img/botitacherry/botitacherry4.jpeg');}
.botitacherry-5{background-image: url('../img/botitacherry/botitacherry5.jpeg');}
.botitacherry-6{background-image: url('../img/botitacherry/botitacherry6.jpeg');}

.haku-1{background-image: url('../img/haku/mmthaku1.jpg');}
.haku-2{background-image: url('../img/haku/mmthaku2.jpg');}
.haku-3{background-image: url('../img/haku/mmthaku3.jpg');}
.haku-4{background-image: url('../img/haku/mmthaku4.jpg');}

.cereza-1{background-image: url('../img/cereza/MEETMYTRIPcereza1.jpg');}
.cereza-2{background-image: url('../img/cereza/MEETMYTRIPcereza2.jpg');}
.cereza-3{background-image: url('../img/cereza/MEETMYTRIPcereza3.jpg');}
.cereza-4{background-image: url('../img/cereza/MEETMYTRIPcereza4.jpg');}
.cereza-5{background-image: url('../img/cereza/MEETMYTRIPcereza5.jpg');}
.cereza-6{background-image: url('../img/cereza/MEETMYTRIPcereza6.jpg');}
.cereza-7{background-image: url('../img/cereza/MEETMYTRIPcereza7.jpg');}
.cereza-8{background-image: url('../img/cereza/MEETMYTRIPcereza8.jpg');}
.cereza-9{background-image: url('../img/cereza/MEETMYTRIPcereza9.jpg');}
.cereza-10{background-image: url('../img/cereza/MEETMYTRIPcereza10.jpg');}
.cereza-11{background-image: url('../img/cereza/MEETMYTRIPcereza11.jpg');}
.cereza-12{background-image: url('../img/cereza/MEETMYTRIPcereza12.jpg');}

.pants-1{background-image: url('../img/pants/pants1.jpg');}
.pants-2{background-image: url('../img/pants/pants2.jpg');}
.pants-3{background-image: url('../img/pants/pants3.jpg');}
.pants-4{background-image: url('../img/pants/pants4.jpg');}
.pants-5{background-image: url('../img/pants/pants5.jpg');}
.pants-6{background-image: url('../img/pants/pants6.jpg');}
.pants-7{background-image: url('../img/pants/pants7.jpg');}
.pants-8{background-image: url('../img/pants/pants8.jpg');}
.pants-9{background-image: url('../img/pants/pants9.jpg');}
.pants-10{background-image: url('../img/pants/pants10.jpg');}
.pants-11{background-image: url('../img/pants/pants11.jpg');}
.pants-12{background-image: url('../img/pants/pants12.jpg');}

.osaka-1{background-image: url('../img/japon/osaka1.png');}
.osaka-2{background-image: url('../img/japon/osaka2.png');}
.kyoto-3{background-image: url('../img/japon/kyoto1.png');}
.kyoto-4{background-image: url('../img/japon/kyoto2.png');}
.kyoto-5{background-image: url('../img/japon/kyoto3.png');}
.roadtrip-6{background-image: url('../img/japon/roadtrip1.png');}
.roadtrip-7{background-image: url('../img/japon/roadtrip2.png');}
.roadtrip-8{background-image: url('../img/japon/roadtrip3.png');}
.springday-2{background-image: url('../img/japon/springday2.png');}

.ninja-1{background-image: url('../img/ninja/ninja1.jpg');}
.ninja-2{background-image: url('../img/ninja/ninja2.jpg');}
.ninja-3{background-image: url('../img/ninja/ninja3.jpg');}
.ninja-4{background-image: url('../img/ninja/ninja4.jpg');}
.ninja-5{background-image: url('../img/ninja/ninja5.jpg');}
.ninja-6{background-image: url('../img/ninja/ninja6.jpg');}

.coconara-logo{background-image: url('../img/aretes/coconaralogo.png');}
.coconara-1{background-image: url('../img/aretes/ILIAFRAME2.png');}
.coconara-2{background-image: url('../img/aretes/coconara2.jpg');}
.coconarasingle-1{background-image: url('../img/aretes/verde-frame-2.png');}
.coconarasingle-2{background-image: url('../img/aretes/azulsingle1.png');}
.coconarasingle-3{background-image: url('../img/aretes/azul-frame-2.png');}
.coconarasingle-4{background-image: url('../img/aretes/anillo-square-3.png');}
.coconarasingle-5{background-image: url('../img/aretes/anillo-square-1.png');}
.coconarasingle-6{background-image: url('../img/aretes/anillo-square-2.png');}
.coconarasingle-7{background-image: url('../img/aretes/anillo-square-3.png');}
.coconarasingle-8{background-image: url('../img/aretes/anillo-square-4.png');}
.coconarasingle-9{background-image: url('../img/aretes/ILIA-frente-1.png');}
.coconarasingle-10{background-image: url('../img/aretes/ILIA-frente-3.png');}
.coconarasingle-11{background-image: url('../img/aretes/ILIA-frente-4.png');}
.coconarasingle-12{background-image: url('../img/aretes/ILIA-frente-5.png');}
.coconarasingle-13{background-image: url('../img/aretes/trans-frame-1.png');}
.coconarasingle-14{background-image: url('../img/aretes/ambar-frame-4.png');}
.coconarasingle-15{background-image: url('../img/aretes/rojo-frame-1.png');}
.coconarasingle-16{background-image: url('../img/aretes/verde-frame-1.png');}

/* Modal Box */

.modal-dialog {
    margin: 0px auto;
    position: fixed;
    top: 0;
	left:0;
    width: 100%;
}

.modal-body {
    padding: 0px;
}

.modal-content {
    background-color: transparent;
    border: none;
    border-radius: 0px;
    box-shadow: none;
}

/* Carousel Control*/

.close {
    color: #fff;
    font-size: 50px;
    font-weight: lighter;
    opacity: 1;
    position: fixed;
    right: 30px;
    text-shadow: none;
    top: 10px;
    z-index: 2147483647;
}

.close:hover, .close:focus {
    color: #f7f7f7;
}

.carousel-control.left, .carousel-control.right  {
    background-image: none;
	height: 100vh;
}

.carousel-control {
    text-shadow: none;
	width: 9%;
}

.modal-open .modal {
    top: 0;
    position: fixed!important;
}

/*animations*/




/* Thumbnail */

.thumbnail {
    background-color: transparent;
    border: 0px solid #ddd;
    border-radius: 0px;
    display: block;
    line-height: 1.42857;
    margin-bottom: 0px;
    padding: 10px;
    transition: border 0.2s ease-in-out 0s;
}

@media (max-width: 992px) {
	.thumbnail {
		padding: 25px 10px;
	}
}


.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    height: 100%;
    max-width: 450px;
	object-fit: cover;
}


/* Press */

.press p {
	line-height:1.7em;
}

.press a:link {
	text-decoration:none;
}

.press h4 {
	padding-top:20px;
	font-weight:bold;
	letter-spacing:1px;
}



/* Brand */

.logo-list img {
	width:100%;
	height:auto;
	opacity:0.8;
}

.logo-list li {
	padding-bottom:1%;
}

.logo-list li a:hover, 
.logo-list li a:focus {
  opacity: 0.6;
  transition:  opacity 0.2s ease;
  display: block; }
}


/* MEET MY TRIP */

.playful span {
  position: relative;
  color: #5362F6;
  text-shadow: 0.25px 0.25px #E485F8, 0.5px 0.5px #E485F8, 0.75px 0.75px #E485F8, 1px 1px #E485F8, 1.25px 1.25px #E485F8, 1.5px 1.5px #E485F8, 1.75px 1.75px #E485F8, 2px 2px #E485F8, 2.25px 2.25px #E485F8, 2.5px 2.5px #E485F8, 2.75px 2.75px #E485F8, 3px 3px #E485F8, 3.25px 3.25px #E485F8, 3.5px 3.5px #E485F8, 3.75px 3.75px #E485F8, 4px 4px #E485F8, 4.25px 4.25px #E485F8, 4.5px 4.5px #E485F8, 4.75px 4.75px #E485F8, 5px 5px #E485F8, 5.25px 5.25px #E485F8, 5.5px 5.5px #E485F8, 5.75px 5.75px #E485F8, 6px 6px #E485F8;
  animation: scatter 1.75s infinite;
}

.playful span:nth-child(2n) {
  color: #ED625C;
  text-shadow: 0.25px 0.25px #F2A063, 0.5px 0.5px #F2A063, 0.75px 0.75px #F2A063, 1px 1px #F2A063, 1.25px 1.25px #F2A063, 1.5px 1.5px #F2A063, 1.75px 1.75px #F2A063, 2px 2px #F2A063, 2.25px 2.25px #F2A063, 2.5px 2.5px #F2A063, 2.75px 2.75px #F2A063, 3px 3px #F2A063, 3.25px 3.25px #F2A063, 3.5px 3.5px #F2A063, 3.75px 3.75px #F2A063, 4px 4px #F2A063, 4.25px 4.25px #F2A063, 4.5px 4.5px #F2A063, 4.75px 4.75px #F2A063, 5px 5px #F2A063, 5.25px 5.25px #F2A063, 5.5px 5.5px #F2A063, 5.75px 5.75px #F2A063, 6px 6px #F2A063;
  animation-delay: 0.3s;
}

.playful span:nth-child(3n) {
  color: #FFD913;
  text-shadow: 0.25px 0.25px #6EC0A9, 0.5px 0.5px #6EC0A9, 0.75px 0.75px #6EC0A9, 1px 1px #6EC0A9, 1.25px 1.25px #6EC0A9, 1.5px 1.5px #6EC0A9, 1.75px 1.75px #6EC0A9, 2px 2px #6EC0A9, 2.25px 2.25px #6EC0A9, 2.5px 2.5px #6EC0A9, 2.75px 2.75px #6EC0A9, 3px 3px #6EC0A9, 3.25px 3.25px #6EC0A9, 3.5px 3.5px #6EC0A9, 3.75px 3.75px #6EC0A9, 4px 4px #6EC0A9, 4.25px 4.25px #6EC0A9, 4.5px 4.5px #6EC0A9, 4.75px 4.75px #6EC0A9, 5px 5px #6EC0A9, 5.25px 5.25px #6EC0A9, 5.5px 5.5px #6EC0A9, 5.75px 5.75px #6EC0A9, 6px 6px #6EC0A9;
  animation-delay: 0.15s;
}

.playful span:nth-child(5n) {
  color: #555BFF;
  text-shadow: 0.25px 0.25px #E485F8, 0.5px 0.5px #E485F8, 0.75px 0.75px #E485F8, 1px 1px #E485F8, 1.25px 1.25px #E485F8, 1.5px 1.5px #E485F8, 1.75px 1.75px #E485F8, 2px 2px #E485F8, 2.25px 2.25px #E485F8, 2.5px 2.5px #E485F8, 2.75px 2.75px #E485F8, 3px 3px #E485F8, 3.25px 3.25px #E485F8, 3.5px 3.5px #E485F8, 3.75px 3.75px #E485F8, 4px 4px #E485F8, 4.25px 4.25px #E485F8, 4.5px 4.5px #E485F8, 4.75px 4.75px #E485F8, 5px 5px #E485F8, 5.25px 5.25px #E485F8, 5.5px 5.5px #E485F8, 5.75px 5.75px #E485F8, 6px 6px #E485F8;
  animation-delay: 0.4s;
}

.playful span:nth-child(7n), .playful span:nth-child(11n) {
  color: #FF9C55;
  text-shadow: 0.25px 0.25px #FF5555, 0.5px 0.5px #FF5555, 0.75px 0.75px #FF5555, 1px 1px #FF5555, 1.25px 1.25px #FF5555, 1.5px 1.5px #FF5555, 1.75px 1.75px #FF5555, 2px 2px #FF5555, 2.25px 2.25px #FF5555, 2.5px 2.5px #FF5555, 2.75px 2.75px #FF5555, 3px 3px #FF5555, 3.25px 3.25px #FF5555, 3.5px 3.5px #FF5555, 3.75px 3.75px #FF5555, 4px 4px #FF5555, 4.25px 4.25px #FF5555, 4.5px 4.5px #FF5555, 4.75px 4.75px #FF5555, 5px 5px #FF5555, 5.25px 5.25px #FF5555, 5.5px 5.5px #FF5555, 5.75px 5.75px #FF5555, 6px 6px #FF5555;
  animation-delay: 0.25s;
}

@keyframes scatter {
  0% {
    top: 0;
  }
  50% {
    top: -10px;
  }
  100% {
    top: 0;
  }
}


.playful {
  font-size: 65px;
  font-family: 'Dela Gothic One', cursive;
  font-weight: normal;
  display: block;
  width: 666px;
  max-width: 80vw;
  min-height: 90px;
  height: auto;
  text-align: center;
  margin: 10rem 10rem;
  
}

/*bouncy face*/

.happy-face {
	position: fixed;
    right: 0;
    top: 30%;
  height: 150px;
  animation-name: bounce;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

/*defining keyframes animation*/
@keyframes bounce {
  50% {
   	transform: scale(1.5) rotate(10deg) translateY(-50px);
  	}
}

/*text in bouncy face*/

.circle {
  color: #fff;
  background-color:#ccd7f4;
  padding: 0;
  margin: 0;
  width: 100px;
  height: 100px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
	font-size:20px;
	font-weight: bold;
	transform:;
	position: fixed;
	right: 0;
    top: 50%;
}
.textgroup span{
	display: block;
	line-height: 25px;
}
.textgroup span:first-child{
	font-size:18px;
	margin-top:25%;
	position:relative;
}


/* Formulario */

form{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 100px;
}

label{
 font-family: 'Clash Display', sans-serif;
  letter-spacing: 6px;
  text-transform: uppercase;
  font-size: .8em;
  color: #FFF;
}

input[type=text]{
  display: inline-block;
  border: none;
  border-radius: 15px;
  text-align: left;
  padding: 10px;
  width: 350px;
  margin: 10px 0;
  color: #FFF;
}

input[type=text]:focus{
  background: none;
  border: none;
  color: #FFF;
}

button{
  background: transparent;
  color: #FFF;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 20px 0;
  padding: 10px 30px;
  border: 2px solid #FFF;
}

button:hover{
  background: transparent;
  border: 2px solid rgba(69, 39, 160, .4);
}

/* Footer */

footer {
	padding-bottom:85px;
}

footer p {
	font-family: 'Open Sans', sans-serif;
	font-weight:200;
	font-size:0.7em;
	text-transform:uppercase;
}




.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url(../img/arrow-up.png) no-repeat center 50%;
  background-size:cover;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: transparent;
  opacity: 1;
}


@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}

@media (max-width:768px){
	.post-title{
	font-size: 1.5rem;
	position: relative;
	left: 0%;
	top: 0%;
	}
}

@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}