#front {
       background-color: #000000;
        background-image: url("https://webexstudios.com/wp-content/themes/hello-elementor/assets/images/Background-front1x.webp");
    background-size: cover;
    background-repeat: no-repeat;
     box-shadow: inset 0px -80px 500px -230px #ffffff;
}

#pricing {

    background-image: url(  "https://webexstudios.com/wp-content/themes/hello-elementor/assets/images/Background-Pricing1x.webp");
    background-size: cover;
    background-repeat: no-repeat;
     box-shadow: inset 0px -80px 300px -230px #ffffff;

}
#portfolio {


       background-image: url(  "https://webexstudios.com//wp-content/themes/hello-elementor/assets/images/Portfolio-background.webp" );
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 0px -80px 500px -230px #ffffff;

}

#contact {

            background-image: url("https://webexstudios.com//wp-content/themes/hello-elementor/assets/images/Contact-background.webp");
    background-size: cover;
    background-repeat: no-repeat;
     box-shadow: inset 0px -80px 500px -230px #ffffff;
}

#contact-clone {
            background-image: url("https://webexstudios.com/wp-content/themes/hello-elementor/assets/images/Contact-background.webp");
    background-size: cover;
    background-repeat: no-repeat;
     box-shadow: inset 0px -80px 500px -230px #ffffff;
}

#front-clone {
  background-color: #000000;
        background-image: url("https://webexstudios.com//wp-content/themes/hello-elementor/assets/images/Background-front1x.webp");
    background-size: cover;
    background-repeat: no-repeat;
     box-shadow: inset 0px -80px 500px -230px #ffffff;
}
.hiddenPic {display:none;}

html{
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #000000;
}

body{
    font-family: raleway;
    color: #FFFFFF;
    font-size: 1.5vw;
    font-weight: 500;
    text-align: justify;
    background-color: #000000;
}

pre {
  background-color: #3a3a3a;
  padding: 20px;
  border-radius: 5px;
}
H1{
    font-size: 3vw;
    font-weight: 300;
    text-align: left;
}
pl

section {
  align-items: center;
  justify-content: center;
  flex-flow: row;
  color: #fff;
  position: relative;
}

div::-webkit-scrollbar {
  width: 15px;               /* width of the entire scrollbar */

}

div::-webkit-scrollbar-track {
  background:#1B0137;        /* color of the tracking area */
     border-radius: 20px;
}

div::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #170222;  /* creates padding around scroll thumb */
}


textarea::-webkit-scrollbar {
  width: 15px;               /* width of the entire scrollbar */

}

textarea::-webkit-scrollbar-track {
  background:#1B0137;        /* color of the tracking area */
     border-radius: 20px;
}

textarea::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #170222;  /* creates padding around scroll thumb */
}

textarea::-webkit-scrollbar-corner{
	  background:#1B0137;
}



.columns {
    margin-top: 0 ;
    height: 100%;
    padding: 10px 0px 10px 2%;
    align-items: center;
    justify-content: center;

}
.row{

}
.left-text-column{

}

nav {
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 100;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

nav ul li a span {
  background: #fff;
}

nav li {
  display: block;
  width: 10px;
  height: 10px;
  margin: 16px;
  position: relative;
}

nav span:after {
  background: rgba(255, 255, 255, 0.15);
  position: absolute;
  content: "";
  display: block;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 100%;
  transition: 0.3s;
}

nav li .active span {
  background: #fff;
  position: absolute;
}

nav li .active span:after {
  top: -6px;
  left: -6px;
  bottom: -6px;
  right: -6px;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  display: block;
  width: 14px;
  height: 13px;
  margin: 7px;
  position: relative;
}

nav ul li a {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}

nav ul li a.active span,
nav ul li:hover a.active span {
  height: 12px;
  width: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 100%;
}

nav ul li a span {
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  height: 4px;
  width: 4px;
  border: 0;
  background: #fff;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
  transition: all 0.1s ease-in-out;
}

nav ul li:hover a span {
  width: 10px;
  height: 10px;
  margin: -5px 0px 0px -5px;
}

.pg-horizontal nav {
  width: 100vw;
  left: 0;
  bottom: 20px;
}
.pg-horizontal nav ul li {
  float: left;
}



.navbar{
    background-color: rgb(53 51 51 / 53%);

}

.navbar-item img {
    max-height: 4rem;
    padding-left: 20px;
}

.logo:hover{
transform: scale(1.1)

}
.call-button{
        font-size: 1.3rem;
    font-weight: 500;
    background-color:#2661da;
	color: #FFFFFF;
    background: rgb(255,19,19);
background: rgb(255,213,19);
background: linear-gradient(180deg, rgba(255,213,19,1) 0%, rgba(255,153,19,1) 61%);
}

.navbar-contact-button{
       background-color:rgb(90, 42 ,167);
	color: #FFFFFF;
    font-size: 1.3rem;
    font-weight: 500;
}
.call-button:hover{
    transform: scale(1.1);
    background:rgb(255 72 2);
    color: #FFFFFF;
}
.navbar-contact-button:hover{
    transform: scale(1.1);
        background:rgba(20,139,170,1.00);
    color: #FFFFFF;
}
.icon.icon-button{
        right: 20px;
    position: relative;
	width: 3rem;


}
.navbar-right-item{
        left: calc(58% - 200px);



}

.intro-title{
    font-weight: 700;
    LINE-HEIGHT: 3.5vw;
    background: -webkit-linear-gradient(#a100ff, #bd93ec);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: -webkit-linear-gradient(#eee, #333);
    margin-bottom: 20px;
}

.intro-text{
        margin-right: -7%;
    padding-left: 7%;

    text-align: left;
}
.intro-text-desc{


    font-weight: 400;
    letter-spacing: 2px;
}

remark{
    font-weight: 500;
    color:rgb(170 68 212);
    text-transform: uppercase;


}
strong {
    font-weight: 400;
    color: rgba(255,255,255,1.00);
    letter-spacing: 2px;
    font-size: 1.6vw;
}


.plan {
	position: relative;
    height: auto;
        border-radius: 20px;
     color: #FFFFFF;
    transform: scale(0.5);

}

.intro-plan{

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
       transform: scale(0.7)  perspective(100px) rotateY(-1deg);
-webkit-perspective: 100px;
       -ms-transform:scale(0.7)  perspective(100px) rotateY(-1deg);
-webkit-transform: scale(0.7)  perspective(100px) rotateY(-1deg);
-moz-transform: scale(0.7)  perspective(100px) rotateY(-1deg);
-o-transform: scale(0.7)  perspective(100px) rotateY(-1deg);
    	width: 110%;
    margin-left: -8%;
    margin-right: 20px;
    margin-top: 5%;
    height: 100%;
}

.slide-plan{
    transform: scale(0.7);
        	width: 100%;
            margin: auto;
    margin-top: -6%;
padding: 2%;

}


.professional-plan{

    background: rgb(82,20,255);
background: linear-gradient(39deg, rgba(82,20,255,1) 0%, rgba(189,0,255,1) 47%);

    -webkit-box-shadow: 5px 5px 0px 0px #289FED, 10px 10px 0px 0px #5FB8FF, 15px 15px 0px 0px #A1D8FF, 20px 20px 0px 0px #CAE6FF, 25px 25px 0px 0px #E1EEFF, 5px 5px 17px 5px rgba(0,0,0,0);
box-shadow: 5px 5px 0px 0px rgb(61,5,113), 10px 10px 0px 0px rgb(61,5,113), 15px 15px 0px 0px rgb(61,5,113), 20px 20px 0px 0px rgb(61,5,113), 25px 25px 0px 0px rgb(61,5,113), 5px 5px 17px 5px rgba(0,0,0,0);
}

.professional-plan-slide{
      position: absolute;
  left: 115vw;
  top: 0px;
  z-index: -2;
}

.bussines-plan{

	margin-left: 5%;

background: rgb(255,48,6);
background: linear-gradient(227deg, rgba(255,48,6,1) 36%, rgba(255,0,196,1) 100%);

    -webkit-box-shadow: 5px 5px 0px 0px #289FED, 10px 10px 0px 0px #5FB8FF, 15px 15px 0px 0px #A1D8FF, 20px 20px 0px 0px #CAE6FF, 25px 25px 0px 0px #E1EEFF, 5px 5px 17px 5px rgba(0,0,0,0);
box-shadow: 5px 5px 0px 0px #0000, 10px 10px 0px 0px #870909, 15px 15px 0px 0px #870909, 20px 20px 0px 0px #870909, 20px 20px 30px 10px #000000;

}

.advance-plan{

  position: absolute;
  left: 60vw;
  top: 0px;
  z-index: -1;

background: rgb(0,52,255);
background: linear-gradient(15deg, rgba(0,52,255,1) 0%, rgba(23,207,188,1) 100%);
    -webkit-box-shadow: 5px 5px 0px 0px rgba(6,36,155,1.00), 10px 10px 0px 0px rgba(6,36,155,1.00), 15px 15px 0px 0px #A1D8FF, 20px 20px 0px 0px #CAE6FF, 25px 25px 0px 0px #E1EEFF, 5px 5px 17px 5px rgba(0,0,0,0);
box-shadow: 5px 5px 0px 0px #0000, 10px 10px 0px 0px rgba(0,28,66,1.00), 15px 15px 0px 0px rgba(0,28,66,1.00), 20px 20px 0px 0px rgba(0,28,66,1.00), 20px 20px 30px 10px #000000;

}

.plan-promotion{
    border-radius: 20px;
    background-color:#2F0B4D;
    padding: 10px 10px 10px 10px;
    margin-right: 20%;
    font-size: 2rem;
    text-align: center;
     box-shadow: 5px 5px 10px 0px #000000;
}


button.plan-button {
	position: relative;
	width: 170px;
	height: 58px;
    background-color: rgba(37,29,113,1);
    color: #FFFFFF;
    border-radius: 20px;
    font-size: 1.3rem;
    border-style: hidden;
    font-weight: 700;
}

button.see-more-button{
    display: none;
		position: relative;
	width: 170px;
	height: 58px;
    background-color:#8300cd;
    color: #FFFFFF;
    border-radius: 20px;
    font-size: 1.3rem;
    border-style: hidden;
    font-weight: 700;

}

.see-more-button:hover{
    transform: scale(1.1);
    background-color:#A35ACD;
	color: #FFFFFF;
	font-size: 1.4rem;

}

.plan-button:hover {
    transform: scale(1.1);
    background-color:#2661da;
	color: #FFFFFF;
	font-size: 1.4rem;

}

.basic-features{
    font-size: 1.0vw;
    margin:4px, 4px;
     margin-left: 5%;
    padding:4px;
    padding-right: 20px;
    height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left
}

.advance-features{
    font-size: 1.2vw;
    padding-right: 5%;
     margin-top: -5%;
}

.basic-features-table.table tr{
    border-bottom-style: hidden;
    text-align: left;

}

.advance-features-table.table tr{
    border-bottom-style: hidden;
    text-align: left;


}

.plan-title{
	text-align: left;
	font-weight: bold;
	font-size: 2.5vw;
	padding-top: 5px;
}
.price-box{
    background-color: #3F2987;
    border-radius: 20px;
    padding-left: 5%;
    box-shadow: 5px 5px 0px 5px rgb(61,5,113);
        box-shadow: 5px 5px 10px 0px #000000;
}
.price-labe{
    font-size: 3rem;
    margin-top: auto;
    text-align: end;

}
.group-value-price{
   padding-right: 10%;
}
.price-value{
     font-size: 2rem;

}
.intro-plan .price-value{
     font-size: 2.5rem;

}
.price-note{
    font-size: 1.1rem;
    font-weight: 300

}

hr{
    height: 0.5px;
    width: 96%;
    margin: auto;
    box-shadow: 2px 2px 5px 3px

}
.plan-terms{


    font-size: 1rem;
 padding-right: 20px;
    height: 115px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align:justify;
    font-weight: 700;
    color:#D5D2D2}

.group-box-terms{

}
fieldset{

     width: 100%;
    padding: 20px;
	margin-top: -20px;
    padding-bottom: 20px;
    padding-top: 0px;
    border-width: 3px;
    border-style: solid;
    border-color: #FFFFFF;
    border-radius: 20px;
    box-shadow: 7px 9px 0px 0px;
  }

}
legend{
    padding: 10px;
    margin-left: 20px;
    font-weight: 600;
    letter-spacing: 2px;

    font-size: 1.4vw;
}

legend>strong {
    font-weight: 900;
    color: rgba(255,255,255,1.00);

    letter-spacing: 2px;
    font-size: 1.4vw;
    padding-left: 6px;
    padding-right: 6px;
}


.icon{
    max-width: 50px;
}

.column-divider{
    margin-top: -5%;
    border-right-style:groove;
    border-right-width: 5px;
    border-right-color: #FFFFFF;


}
.plan-advance-continer{
    padding-left: 5%;
}

#plataforms{
    margin-top: -20vh;
}

.portfolio-group{

padding-left: 10%;
padding-right: 15%;
}

.left-slide{
    transform: perspective(700px) rotateY(-10deg);
    right: 10%;
    width: 90%;

   box-shadow: 50px 20px 50px 0px grey;


}

.rigth-slide{
     transform: perspective(700px) rotateY(10deg);
    left: 30%;
        width: 90%;
      box-shadow: -40px 20px 50px 0px rgb(61,5,113);
     box-shadow: -40px 20px 50px 0px grey;

}

.center-slide{
    width: 100%;
    box-shadow: 20px 30px 50px 0px rgb(61,5,113);
    box-shadow: 20px 30px 50px 0px grey;


}


img{
    padding: 0;
}

.table{
    background-color: transparent;
    color: #FFFFFF;
    font-size: 1.3rem;

}

.table th{
    color: #FFFFFF;

}

.table tr{
    border-width: 2px;
    border-bottom-style: solid;
    border-color: #FFFFFF;

}



.select {

}

.contact-group{
    padding-left: 10%;
    padding-right: 10%;
    z-index: 5;
   padding-bottom: 10%



}

.contact-box{
    border-style: solid;
    border-radius: 50px;
    border-width: 2px;
    border-color: rgba(120,23,216,1);
    background-color: rgba(1,1,1,0.6);
    padding: 50px;
    transform: scale(0.8);

}


h2{
      text-align: left;
    font-size: 2.1rem;
}
.contact-subtitle{
    padding-left: 40px;
    font-weight: bold;
}

.input{
    border-style: hidden;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #FFFFFF;
    background-color: transparent;
    color: #FFFFFF;
    width: 80%;
    height: auto;
    font-size: 1.1rem;

}

.input::placeholder{
    color: #FFFFFF;
}

.input-column{



}
.select-control{


}
.custom-select{
    background-color: transparent;
}

.select select{
    background-color: transparent;
    color: #FFFFFF;
    border-style: hidden;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #FFFFFF;
    background-color: transparent;
    color: #FFFFFF;
         height: auto;
    width: 100%;
    display: block;
}

.select{
     display: block;
      width: 80%;
     font-size: 1.1rem;

}

select option {
    background: #000000;

}

.control{
    padding: 10px;

}
.textarea{
    max-width: 90%;
    min-width: 90%;
    background-color: transparent;
    border-style: hidden;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #FFFFFF;
    background-color: transparent;
    border-radius: 0px;
     font-size: 1.1rem;


}

.textarea::placeholder{
    color: #FFFFFF;


}

.textarea:not([rows]) {
    max-height: 2em;
    min-height: 3.5em;
    padding-left: 50px;
}

.contact-textarea{
    margin-top: -40px;

}

.button{
    border-style: hidden;
    color: #FFFFFF;
    padding: 10px 50px;
    border-radius: 10px;
    font-size: 1.1rem;
    box-shadow: 5px 5px 20px 0px #000000;


}
.button:active, .button:focus {
	 color: #FFFFFF;
}

.button:active, .button.is-active {
    border-color: #4a4a4a;
    color:  #FFFFFF;
}

.contact-form-button{
       background: rgb(206,11,11);
background: linear-gradient(180deg, rgba(206,11,11,1) 0%, rgba(58,19,220,1) 100%);
    background-image: linear-gradient(180deg, rgba(206,11,11,1) 0%, rgb(72, 20, 94) 100%);


}

.contact-form-button:hover{


    background-image: linear-gradient(0deg, rgba(206,11,11,1) 100%, rgb(72, 20, 94) 0%);
     color: #FFFFFF;

}


.contact-form-button:focus , .contact-form-button:active{

     color: #FFFFFF;

}
.select:not(.is-multiple):not(.is-loading)::after {
    border-color:#FFFFFF;
}

.form-contact{
    width: 100%
}

.select select:not([multiple]) {
    padding-right: 3.5em;
}





.icon-contact-textarea{
    position: relative;
    margin-bottom: -50px;
}


.reviews{
    width: 90%;
    align-content: center;
    padding-left:  100px;

}










.scroller {
    position: absolute;
    top: 29.3%;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    width: 40px;
    height: 65px;
    border: 2px solid #fff;
    border-radius: 30px;
    opacity: 70%;
     z-index: 1;
}

.scroller small {
    position: absolute;
    width: 174px;
    left: -64px;
    top: -34px;

}

.scroller::after {
    position: absolute;
    top: 12px;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    width: 5px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff;
  -webkit-animation: 100ms ease 0ms backwards infinite scroll;
  animation: 1200ms ease 0ms forwards infinite scroll;
  content: "";
}

@-webkit-keyframes scroll {
  from {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-50%, 10px, 0);
            transform: translate3d(-50%, 10px, 0);
    opacity: 0;
  }
}

@keyframes scroll {
  from {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-50%, 10px, 0);
            transform: translate3d(-50%, 10px, 0);
    opacity: 0;
  }
}

.swiper-container.swp-container-initialized{
            width: 100%;
          height: 80%;
        padding-top: 5%;
        padding-bottom:5%;
          background-color: transparent;


}


      .swiper-container {
        width: 90%;
          height: 70%;
        padding-top: 12%;
        padding-bottom: 50px;
          background-color: transparent;
      }

      .swiper-slide {
       background-position: center;
        background-size: cover;
         width: 100%;
          background-color: transparent;
          -webkit-backface-visibility: hidden;
          -webkit-transform:translate3d(0,0,0);
      }

      .swiper-slide img {
        display: block;
        width: 294px;
          height: 420px;
    background-color: transparent;
          border-radius: 4px;
          border-style: solid;
          border-color: #e8e8e8;
          border-width: 0px;

}

      .swiper-slide-prev.swiper-slide-port img {
           transform: perspective(700px) rotateY(-10deg);
           box-shadow: 10px 2px 10px 0px #777070;
         width: 260px;

          opacity: 70%;
      }


      .swiper-slide-active.swiper-slide-port img {
    box-shadow: 5px 2px 10px 0px #777070;
      }


      .swiper-slide-next.swiper-slide-port img {
           transform: perspective(700px) rotateY(10deg);
            box-shadow: -10px 2px 10px 0px #777070;
          width: 260px;
           opacity: 70%;
      }

.swp-container-coverflow{
     width: 60%;




}
.swp-wrapper{    width: 60%;

        padding-top: 50px;
        padding-bottom: 50px;


}
.swp-slide{

        width: 100%;
    height: auto;



}

.swiper-slide-active{
    z-index: 100;

}

.swp-slider-prev{
 opacity: 40%;
}

.swp-slider-next{
 opacity: 40%;
}

.columns.plan-columns {
    height: auto;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {


}

.swiper-container-vertical > .swiper-pagination-bullets {
    top: 50vh;

    right: 2%;

}
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    background:  #FFFFFF;
    box-shadow: 0px 0px 0px 5px rgba(38,38,38,1.00) ;
    opacity: .2;
}
.swiper-pagination-bullet-active{
    opacity: 1;
}

.swiper-pagination-bullet:hover {
    opacity: .8;
}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 15px 0;
    display: block;
}


.swiper-button-next, .swiper-button-prev {
	color: #FFFFFF;
}

.swiper-button-next:hover, .swiper-button-prev:hover{
	color:#7B7777;
}


.swiper-container.fullpage{
flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    padding: 0px;
    margin: 0px;
    -webkit-backface-visibility: hidden;
    -webkit-transform:translate3d(0,0,0);
}
.swiper-wrapper.fullpage-wrapper{
            display: block;
        width: 100%;
        height: 100%;
}
.swiper-slide.fullpage-slide{


}

*, *::before, *::after {
     box-sizing:border-box;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none;
  -webkit-text-fill-color: #FFFFFF;
  -webkit-box-shadow: 0 0 0px 1000px trasparent inset;

  transition: background-color 5000s ease-in-out 0s;
}



.loading{
  background-image: url("../images/Dual Ring-1s-44px.gif");
  height: 50px;
  width: 50px;
  float: left;
  display: block;
}



@keyframes ldio-iu54ncsuvd {
  0% { transform: rotate(0);
  transform-origin: center;}
  100% { transform: rotate(360deg);
    transform-origin: center; }
}
.ldio-iu54ncsuvd div { box-sizing: border-box!important }
.ldio-iu54ncsuvd {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  border: 14px solid #000;
  border-color: #df1317 transparent #df1317 transparent;
  animation: ldio-iu54ncsuvd 1s linear infinite;
}
.ldio-iu54ncsuvd > div:nth-child(2) { border-color: transparent }
.ldio-iu54ncsuvd > div:nth-child(2) div {
  position: absolute;
  transform: rotate(45deg);
}
.ldio-iu54ncsuvd > div:nth-child(2) div:before, .ldio-iu54ncsuvd > div:nth-child(2) div:after {
  content: "";
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  top: -14px;
  left: 19px;
  background: #df1317;
  border-radius: 50%;
  box-shadow: 0 66px 0 0 #df1317;
}
.ldio-iu54ncsuvd > div:nth-child(2) div:after {
  left: -14px;
  top: 19px;
  box-shadow: 66px 0 0 0 #df1317;
}
.loadingio-spinner-dual-ring-vidsrlvyf1b {
  width: 44px;
  height: 44px;
  display: inline-block;
  overflow: hidden;
  background: none;
  position: relative;
bottom: 10px;
left: 10px;
}
.ldio-iu54ncsuvd {
  position: relative;
  transform: translateZ(0) scale(0.44);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-iu54ncsuvd div { box-sizing: content-box; }
/* generated by https://loading.io/ */


.help {
    display: block;
    font-size: 1.1rem;
    margin-top: 0px;
    margin-left: 1rem;
}

.input, .textarea, .select select {
    color: #ffffff;
}

.input:focus, .textarea:focus, .select select:focus, .is-focused.input, .is-focused.textarea, .select select.is-focused, .input:active, .textarea:active, .select select:active, .is-active.input, .is-active.textarea, .select select.is-active {
    border-color: rgb(50, 115, 220);
    box-shadow: rgb(50 115 220 / 0%) 0px 0px 0px 0px;
}

@media screen and (min-width: 769px){ print, .column.is-4, .column.is-4-tablet {
    flex: 0;
    width: 33.33333%;
    }}

@media screen and (max-width: 1500px){
.advance-plan {
    left: 75vw;

}

.professional-plan-slide {
    left: 150vw;

}

}



@media screen and (max-height: 670px){

      #plataforms {
          margin-top: -50vh;
          visibility: hidden;
      }

    .intro-plan {
    transform: scale(0.6) perspective(100px) rotateY(
-1deg
);
  width: auto;
        margin-top: -5%;

}

.scroller {visibility: hidden;}

div.wrapper {
 visibility: hidden;
    margin-top: -3%;

}

    div.guide {
    width: 50px;
    height: 50px;
}

    div.contact-box{
      transform: scale(0.7);
      margin-top: -20%;
    }

    div.pricing-banner{

      top: 36%;

    }

    div.portfolio-banner{

      top: 53%;

    }


}


@media screen and (max-height: 745px){

      #plataforms {
          margin-top: -40vh;
      }

    .intro-plan {
    transform: scale(0.6) perspective(100px) rotateY(
-1deg
);
        width: 120%;
        margin-left: -17%;
        margin-top: -5%;


}

.scroller {
    position: absolute;
    top: 28%;}

div.wrapper {

    margin-top: -8%;

}

    .slide-plan{
    transform: scale(0.6);
        	width: 100%;
            margin: auto;
    margin-top: -8%;
padding: 2%;

}

.advance-plan {
    left: 75vw;

}

.professional-plan-slide {
    left: 145vw;

}

}

@media screen and (min-height: 810px){

      #plataforms {
          margin-top: -10vh;
      }

    .intro-plan {
    transform: scale(0.6) perspective(100px) rotateY(
-1deg
);

}

.scroller {
    position: absolute;
    top: 30%;}

div.wrapper {

    margin-top: 0;

}

}

    .wrapper {
      width: 100%;
      height: 2vh;
      position: relative;
      display: flex;
      justify-content: center;
          margin-top: -2%;
      align-items: center;
    }

    .guide {
      width: 160px;
      height: 160px;
      border-radius: 100%;
background-color: trasparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .guide  p {
      width: 80%;
      color: white;
      font-family: sans-serif;
      text-align: center;
      font-size: 13px;
      line-height: 1.4;
      margin-top: 15px;
    }

    .mouse {
      width: 50px;
      height: 70px;
      transform-origin: center bottom;
      animation-name: swinging;
      animation-duration: 1.2s;
      animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
      animation-delay: 0s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      animation-fill-mode: none;
      animation-play-state: running;
    }

    .mouse-click,
    .mouse-large-click,
    .mouse-small-click {
      opacity: 0;
      transform-origin: center center;
      animation-name: click;
      animation-duration: 1.2s;
      animation-timing-function: ease-in-out;
      animation-delay: 0s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      animation-fill-mode: forward;
      animation-play-state: running;
    }


    @keyframes swinging{
        0%{transform: rotate(-10deg) translate3d(-15px, 0, 0) }
        100%{transform: rotate(10deg) translate3d(15px, 0, 0) }
    }

    @keyframes click {
        0% { opacity: 0 }
        40% { opacity: 1 }
        100%{ opacity: 1 }
    }

.pricing-banner{

    position: absolute;
  top: 38%;
  width: 100%;
    z-index: 5000;
height: 300px;
    align-items: center;



background: linear-gradient(32deg, rgba(135,135,136,1) 0%, rgba(48,46,46,0.7147233893557423) 73%, rgba(40,38,38,1) 100%);


}

.portfolio-banner{

    position: absolute;
  top: 55%;
  width: 100%;
    z-index: 5000;
height: 300px;
    align-items: center;



background: linear-gradient(32deg, rgba(135,135,136,1) 0%, rgba(48,46,46,0.7147233893557423) 73%, rgba(40,38,38,1) 100%);


}


.banner-title{
    font-size: 15vh;
    color:#ffffff;
    font-weight: 800;
}

.banner-box{


        margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}




.focus-in-expand {
	-webkit-animation: focus-in-expand 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: focus-in-expand 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

}


@-webkit-keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  50% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
     100% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
            transform: translateZ(300px);
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }



}
@keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  50% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }

      100% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
            transform: translateZ(300px);
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}