@import url('https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope|Comfortaa&display=swap');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700');
@import url('https://fonts.googleapis.com/css?family=Patrick+Hand&display=swap');
html,body{
    height:100%;
    width:100%;

}
body{
    background: url('../img/background.jpg') no-repeat center center fixed; 
    background-size: cover;
    height: 100%;
    overflow-x: hidden;
}
.slide-in-demo{
    position: absolute;
    top: 45vh;
    height:100vh;
    width: 100%;
    overflow-x: hidden;
}
.slide-in-demo img{
    position:relative;
    left:-150px;
    width: 100px;
}
.content-page{
  width:100%;
  height:300vh;
  overflow-x: hidden;

}
.content-icon-svg{
  display: inline-block;
  width: 9em;

  text-align: center;
  vertical-align: top;
}

.content-icon-svg svg.icon-svg {
  width: 70px;
  height: 70px;
position:absolute;
top:0;
}

.second{
    background-color: black;
}

.main-home{
    height:100vh;

    overflow-x: hidden;
}


.logo-main{
    font-family: 'Comfortaa', Bold;
    font-size:4em !important;
    font-weight: 900 !important;
    text-align:center;
}

.logo-main span{
letter-spacing: 10px;



}

.lined.thick{
    background:white;
}

.button-active, button:focus{
    background:rgb(255, 242, 122);
}






.main-image{
    
    margin:0 auto;
    width:60%;
}



.logo-img{
text-align:center;
    }
.logo-slogan{
    font-family: 'Annie Use Your Telescope', bold;
    font-size:2em;
    font-weight: lighter !important;
    letter-spacing:8px;
    color:black;
    text-align:center;
    margin:0 auto;

}



.dark-nav li a{
    color:black !important;
    font-family: 'Annie Use Your Telescope', bold;
    font-size:2em;
    font-weight: bold;
}
.dark-nav{
    text-align:center;
    color:black !important;

}

.col-menu{
    padding:20px;
}


.logo-main li{
    list-style-type:none;
}


.content-text{
width:220px;
height:80px;
margin:0 auto;



}
.main-text{
    position:relative;
}

.main-text span{
    position:absolute;
    top:0;
    left:0;
    font-family: 'Comfortaa', Bold;
    font-size:4em !important;
    font-weight: 900 !important;
    -webkit-text-stroke: 6px #FF186F;
    color:white;

    z-index:3;

}
div.main-text:nth-child(2) span{
    -webkit-text-stroke: 6px #0DFFA7;

}
div.main-text:nth-child(3) span{
    -webkit-text-stroke: 6px #FFEC31;

}
div.main-text:nth-child(4) span{
    -webkit-text-stroke: 6px #FF186F;

}

.main-text span:after{
    position:absolute;
    top:0;
    left:0;
    content: attr(title);
    -webkit-text-stroke: 12px black;
    z-index:-2;


}
.content-text li span{
position:absolute;
left:10px;
}
li:nth-child(1) span.mtext{
    -webkit-text-stroke: 6px #FF186F;
    z-index:10;
}
li:nth-child(2) span.mtext{
    -webkit-text-stroke: 6px #0DFFA7;
    z-index:10;
    top:15px;
    left:65px;
}
li:nth-child(3) span.mtext{
    -webkit-text-stroke: 6px #FFEC31;
    z-index:10;
    left:172px;
}
li:nth-child(4) span.mtext{
    -webkit-text-stroke: 6px #FF186F;
    z-index:10;
    left:252px;
    top:20px;
}
li:nth-child(2) span.stext{
    left:65px;
    top:15px;
}
li:nth-child(3) span.stext{
    left:172px;
}
li:nth-child(4) span.stext{
    left:252px;
    top:20px;
}
.stext{
    -webkit-text-stroke: 12px black;
    z-index:9;
}



.tira{
height:100vh;
width:10%;
background-color:#b6ffff;

}
.tira ul{
    margin-top:100px;
}
.tira ul li{
    text-align:center;
    color:#f6334b;
    font-size:5em;
    font-weight: 900;
}
.contenido{
    height:100vh;
    width:100%;
    background-color:#ffffff;
}

.text-info{
    font-family: 'Patrick Hand', cursive;
    font-size:1.4em;
    color: #41403E;
}

    .navega{
        position:fixed;
        top:0;
        width:100%;
        height:60px;
        background-color:transparent;
    }

    .ser-icon{
      margin-right:35px !important;
      margin-top:0 !important;
      padding-top:0 !important;
    }

    .menu-icon{
        display:inline-block;
        color:#f6334b;
        font-size:3em;
        font-weight: 900;
        width: 10%;
        text-align:right;
        right:0;

    }
    .menu-logo{
        display:inline-block;
        width:30%;

    }

    .menu-logo img{
        width:160px;
        margin:0 auto;
    }

    .full-height{
        height:100vh;
    }


    .carousel-item h2{
    position:absolute;
    top:50%;
    left:10%;
    font-size:3em !important;
    text-transform: uppercase;
    font-weight: 900;
    font-family: 'Heebo', sans-serif;
    text-align:left;
    color:#f6334b;

    }
    .carousel-item h2 small{
        color:white;
        text-transform: none;
        font-weight: 600;


        }

        .white-back{
            background-color:white !important;
        }


        .nav-sticky {
            width: 100%;
            height: 60px;
            position: absolute;
            bottom:0;
            z-index: 5;
            background-color: transparent;
            padding:0 !important;
            margin:0 !important;

          }


        .nav-sticky-blog {
          width: 100%;
          height: 60px;
          position: fixed;
          top: 4px;
          z-index: 5;
          background-color: transparent;
          padding:0 !important;
          margin:0 !important;

        }

          .row{
            padding:0 !important;
            margin:0 !important;
          }

          .menu-item-text{
            height:60px;
            padding:0 !important;
            margin:0 !important;
            color:black !important;
            font-family: 'Annie Use Your Telescope', bold;
            font-weight: bold;
            font-size: 20px;
            line-height: 60px;
            
            /* background: #ffffff; */
            text-transform: uppercase;
            text-align: center;
       
          cursor:pointer;
          }

          /* .nos{
            background-color: rgb(80, 148, 204);

          }
          .ser{
    background-color: rgb(158, 253, 218);;
          }

          .blo{
    background-color: rgb(255, 244, 143);
          }
          .con{
    background-color: rgb(255, 158, 195);
          } */

          .post{
            display:flex;
            flex-wrap: wrap;
            margin-top:120px;

          }

          .image-post{
            padding:0;
            width:70%;
            margin:0 auto;
            z-index:2;

          }
          .image-post img{
           width:100%;

          }
          .image-post .title-post{
            position:relative;
            width:100%;
            bottom:25%;
          }
          .content-post{
            position:relative;
            text-align:justify;
            padding:20px;
            font-family: 'Patrick Hand', cursive;
            font-size: 1.4em;
            color: #41403E;
            top:-180px;
            width:90%;
            margin:0 auto;
            z-index:1;
          }

            .post-banner{
              margin-top:130px;

            }

            .post-content{
              position:relative;
              top:-180px;

            }

          .sticky {
            position: fixed;
            top: 4px;
          }

          .logo-mini{
            display:none;
            width:90px;
            margin:0 auto;
          }
          .logo-mini-blog{
            width:90px;
            margin:0 auto;
          }
      

          .scrollDown-button{
            width:90px;
            margin:0 auto;
            cursor:pointer;
          }

          /* .menu-item-text:hover{

    background-position: 0 0;
    color: #333;


          } */



          /* .nav-sticky:hover .menu-item-text{
  filter:blur(3px);
  opacity:.5;
  transform: scale(.98);
  box-shadow:none;
}
.nav-sticky:hover .menu-item-text:hover{
  transform:scale(1);
  filter:blur(0px);
  opacity:1;
  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
} */




.clear-block{
    height:150px;
    width:100%;
}

.row{
  z-index:1;
}

.adv-section{

    width:100%;
}

.collapsible-header{

    color: #41403E;
    font-size: 1.5rem;
    font-family: 'Comfortaa', Bold;
    font-weight: 900;

}
          .full{
              height:100%;
              width:100%;
              overflow-x:hidden;
              overflow-y:visible;
              padding-top:15vh;



          }

          .full-auto{
            height:120vh;
            width:100%;
            padding-top:5vh;
            overflow-x:hidden;
            overflow-y:visible;


        }

        .foco-animated{
            position:absolute;
            bottom:15%;
            right:25%;
            opacity: 0.7;
            width:70px;
        }

        .bg-info-1{
            position:absolute;
            background-image: url('../img/bg-info.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            width:100%;
            height:400px;
            
        }
        .sketchy-2{
            background-image: url('../img/bg-info.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;  
        }

          .item-full{
              height:600px!important;
          }

          .semi-yellow{
            background: #fff9a1;
          }

          .semi-blue{
            background: #adfff8;
          }

          .semi-pink{
            background: #f3daff;
          }

        .sketchy {
            border: 3px solid #535353;
            border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
            margin-top:30px;
       
          }
          .sketchy::before {
            content: '';
            border: 2px solid #555555;
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
                    transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
            border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
          }

          .sk {
            border: 3px solid #535353;
            border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
       
          }


          .encabezado-servicios{
              width:90%;
              margin:0 auto;
            padding:20px;
          }

          .card-title{
            font-size:1.5em !important;
            color:rgb(240, 240, 240);
            font-family: 'Comfortaa', Bold; 
            background-color: rgba(36, 36, 36, 0.548);
            width:100%;
          }

          .card-content{
              padding:15px !important;
              padding-bottom:0 !important;
              height:180px !important;
          }

          .info-bar{
              position:relative;
              top:-17px;
              width:100%;
              height:30px;
              padding:0;
          }

          .bottom-bar{
            padding:0;
        }

        .card .card-action{
          padding:0 !important;
        }

        .post-preview{
          font-family: 'Patrick Hand', cursive !important;
          font-size:1.2em;
        }


          .info-fecha{
              display:inline-block;
              width:45%;
              font-size:1.2em;
              font-family: 'Annie Use Your Telescope', bold;
              font-weight:600;
              color:rgb(65, 65, 65);
             
          }
          .info-autor{
            display:inline-block;
            width:45%;
          font-size:1.2em;
          font-family: 'Annie Use Your Telescope', bold;
          font-weight:600;
          color:rgb(65, 65, 65);
          }

          .info-views{
              position:absolute;
              bottom:0;
              padding:10px;
              text-align:right;
            width:100%;
          font-size:1.2em;
          font-family: 'Annie Use Your Telescope', bold;
          font-weight:600;
          color:rgb(255, 255, 255);
          }

          .title-time{
            width:100%;
            font-size:1.3em;
            display:block;
            font-family: 'Annie Use Your Telescope', bold; 
            padding:0;
            text-align:center;
          }
          .number-time{
            position:relative;
            top:-10px;
            width:100%;
            display:block;
            font-size:1.8em;
            font-weight:800;
            font-family: 'Annie Use Your Telescope', bold; 
            padding:0;
            text-align:center;
          }
        



          .big-title-section{
              font-size:2.5em;
              font-weight: 900 !important;
              /* font-family: "Amatic SC"; */
              /* font-family: 'Annie Use Your Telescope', bold; */
              -webkit-text-stroke: 2px rgb(41, 41, 41);
              color:rgb(41, 41, 41);
              font-family: 'Comfortaa', Bold;
          }



            button {
            align-self: center;
            background: transparent;
            font-family: 'Annie Use Your Telescope', bold;
            padding: 0.6rem 0.6rem;
            /* padding: 1rem 1rem; */
            margin: 0 1rem;
            transition: all .5s ease;
            color: #41403E;
            font-size: 2rem;
            letter-spacing: 1px;
            outline: none;
            box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
            transition: all 0.25s ease-in;
            /*
            Above is shorthand for:
            border-top-left-radius: 255px 15px;
            border-top-right-radius: 15px 225px;
            border-bottom-right-radius: 225px 15px;
            border-bottom-left-radius:15px 255px;
            */
          }
          button.mob{
              width:80%;
          }
          .logo-mob{
              width:90%;
              margin:0 auto;
          }
          .logo-mob img{
              width:100%;
          }
          .lined.thick:hover, .lined.thick:hover {
            box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
           
          }

          .nos:hover{
            border: solid 7px #FF186F;
          }
          .ser:hover{
            border: solid 7px #0DFFA7;
          }
          .blo:hover{
            border: solid 7px #FFEC31;
          }
          .con:hover{
            border: solid 7px #FF186F;
          }



          .image-frame{
            padding: 1rem 1rem;
            background-color: #ffffff;
            transition: all .5s ease;
            color: #41403E;
            font-size: 2rem;
            letter-spacing: 1px;
            outline: none;

            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
            border: dashed 5px rgb(41, 196, 188);
          }

          .menu-mobile{
              width:100% !important;
          

          }
      

/*           
          @media (max-width: 620px) {
         
             button {
              align-self: center;
              margin-bottom: 2rem;
            }
        } */
         


          

          
          h1 {
            font-size: 2.5rem;
            font-weight: 600;
            -webkit-text-stroke: 2px rgb(41, 41, 41);
            color:rgb(41, 41, 41);
            font-family: 'Comfortaa', Bold;
          }
          h3 {
            font-size: 1.5rem;
            font-weight: 400;
            -webkit-text-stroke: 2px rgb(41, 41, 41);
            color:rgb(73, 73, 73);
            text-align:center;
            font-family: 'Comfortaa', Bold;
          }
          


          .drawns{
            z-index: -1 !important;
          }

          .drawns.sun{
            position:absolute;
            top:45vh;
            right:10%;
            opacity:0.8;
            width:180px;
          }

          .drawns.moon{
            position:absolute;
            top:290vh;
            left:5%;
            opacity:0.8;
            width:160px;
          }
          .drawns.jet{
            position:absolute;
            top:220vh;
            right:5%;
            opacity:0.8;
            width:160px;
          }
          .drawns.stars{
            position:absolute;
            top:390vh;
            left:30%;
            opacity:0.8;
          }
          .drawns.ball{
            position:absolute;
            top:600vh;
            left:30%;
            opacity:0.8;
            width:120px;
          }
          .drawns.toy{
            position:absolute;
            top:280vh;
            left:10%;
            opacity:0.8;
            width:160px;
          }
          .drawns.car{
            position:absolute;
            top:155vh;
            left:5%;
            opacity:0.8;
            width:120px;
          }

          .social{
            display:inline-block;
            width:48%;
            text-align:center;
          }
          .info{

            width:100%;
            text-align:center;
            font-family: 'Annie Use Your Telescope', bold;
            font-size:1.4em;
          }
          .social .link-social {
           color:black;
          }
          .facebook,.msn{
            color:rgb(7, 94, 255);

            font-size:2em;
          }

          .messenger-button{
            display:none;
            position:fixed;
            bottom:50px;
            right:5px;
 
          }

          .collapsible-body{
            text-align:justify;
            padding:20px;
            font-family: 'Patrick Hand', cursive;
            font-size: 1.4em;
            color: #41403E;
          }

          .cinta {
            position: relative;
            text-align: center;
    
            }
            .uno:before, .uno:after,
            .dos:after,
            .tres:before, .tres:after,
            .cuatro:before, .cuatro:after {
            content: "";
            display: block;
            width: 100px;
            height: 30px;
            position: relative;
            top: 20px;
            margin: auto;
            background: rgba(255,255,200,0.6);
            -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
            -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
            box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
            z-index:3;
            }
            .uno:before, .uno:after {
              position: absolute;
              top: 0;
              }
              .uno:before {
              left: 50%;
            
              }
              .uno:after {
              top: inherit;
              bottom: -20px;
              right: 35%;
             
              }
            .dos:before, .dos:after {
              position: absolute;
              top: -20px;
              }
              .dos:before {
              left: 55%;
            
              
              }
              .dos:after {
              right: 35%;
              
              }
              .tres:before, .tres:after {
              position: absolute;
              top: 10px;
              }
              .tres:before {
              left: -20px;
              -webkit-transform: rotate(-45deg);
              -moz-transform: rotate(-45deg);
              transform: rotate(-45deg);
              }
              .tres:after {
              top: inherit;
              bottom: 0;
              right: -20px;
              -webkit-transform: rotate(-35deg);
              -moz-transform: rotate(-35deg);
              transform: rotate(-35deg);
              }
              .cuatro:before, .cuatro:after {
              width: 30px;
              height: 100px;
              position: absolute;
              top: 50%;
              margin-top: -50px;
              }
              .cuatro:before {
              left: -10px;
              -webkit-transform: rotate(3deg);
              -moz-transform: rotate(3deg);
              transform: rotate(3deg);
              }
              .cuatro:after {
              margin-top: -60px;
              right: -10px;
              }

              .bar-post{
                width:100%;
                display:flex;
                flex-wrap:wrap;
              }

              .author-post{
                text-align:center;
                width:45%;
              }
              .fecha-post{
                text-align:center;
                width:45%;
              }