@font-face {
font-family: 'SF Text';

src: url('/fonts/SF-Pro.ttf') format('truetype');

}

 



body {
  font-family: "SF Text",Helvetica, sans-serif ;
  
}
 
 html *{
		font-family: 'SF Text',Helvetica, sans-serif ;
		
		scroll-behavior: smooth;
	
		
	}
 



.selectplan{
    background-color: #fff;
    padding: 24px;
    text-align: center;
    font-size: 22px;
 display: none;
}
 


a:link,a:visited, a:hover, a:active {
 text-decoration: none;
 color: #333;
}

@media (max-width: 767px) {
    
.wizardsub{
  height: fit-content !important;
}
    
    
    
}


.header1 {
    background-color: #FFFFFF;
    z-index: 100;
    width: 100vw;
    margin-bottom: 0;
   box-shadow: 0px 8px 6px -4px #1d8cf214;
   display:none;
}

.header{
   
   background-color: #FFFFFF;
    
    margin:0;
    
  } 
 .vidclass{
     width: 55%;
    margin: 0 auto;
    border:1px solid #cccccc;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 20px;
   box-shadow: 14px 14px 6px -6px rgb(0 0 0 / 11%);
    position:relative;
     
 }
 
 .vidclass2{
    
    margin: 0 auto;
    /*border:1px solid #cccccc;*/
    background-color: #ffffff;
   
    padding: 20px;
    
    position:relative;
     
 }
 
.vidplaymore{
    width: 100px;
    opacity: 0.7;
    position: absolute;
    top: 40%;
    left: 46%;
    
}

.vidplaymore2{
    width: 50px;
    opacity: 0.5;
    position: absolute;
    top: 45%;
    left: 54%;
    cursor:pointer;
    
}

.faqflex{
    display:flex;
    
}

.faq{
   display:flex;
   align-items: center;
font-size: 19px;
line-height: 40px;
color: #485159;
padding: 10px;
cursor: pointer
}

.topfaq{
    margin-right:200px;
    width: 500px

}

.rightfaq{
    width: 500px 
    
}

.faqtitle{
    font-size: 28px;
    margin-bottom: 30px;
    
}


.faqmore{
   font-size: 19px;
    line-height: 40px;
    color: #0597f2;
    padding: 10px;
    margin-left: 25px;
     width: 475px;
    display:none;
}

.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtube-container{
    width:50%; 
    margin: 60px auto;
    
}


.rightarrow{
    width: 10px;
    margin-right: 15px;
    
}

.uparrow{
    width: 12px;
    margin-right: 15px;
    display:none;
    
}

#vid3{
    margin-bottom:80px;
    margin-top: 140px
}

#vid5{
    
    margin-top: 60px
}
  
  body.site {
		border-top: none;
		background-color: #ffffff;
        padding:0;
	}



 select{
      -webkit-appearance: none;
     }
     
h1{
         line-height: 30px;
     font-size: 30px;
     }
     
.fulltop{
    height: 460px;
   
    background: linear-gradient(171deg, #0597f2 0%, #0597f2 60%, #49d907 86%);
}     
     
.centerheader{
    
    font-size: 22px;
    line-height: 30px;
    max-width: 1000px;
    text-align: center;
    margin: 0 auto 30px;
}

.centertitle{
    font-size: 28px;
    margin: 0 auto 20px;
     line-height: 30px;
    max-width: 1000px;
    text-align: center;
}


.landingline{
    text-align:center;
    width:87%;
    margin: 0 auto;
}

/*.landingline:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #048fe3;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(87deg);
  -ms-transform: skew(87deg);
  transform: skew(87deg);
}*/


#topest{
    margin-top:-140px;
}

#logindisc{
  width:400px;
  margin:50px auto 0;
  font-size:9px;  
  line-height:1.5; 
}


.landtag{
    margin: 0 0 calc(10px + 1.8vw) 0;
    font-size: 60px;
    font-weight: 700;
    line-height: 88px;
    color:#ffffff;
   
   
}

.landdes{
   font-size: calc(8px + 1.2vw);
     line-height:  calc(16px + 1.2vw);
     color:#ffffff;
}

.getdes{
   font-size: 19px;
    color:#ffffff;
   margin-right:30px;
}



.videodesc{
   
   font-size: 46px;
     margin-right:20px;
     line-height:  46px;
     color:#333333;
     margin-left: 1.6vw;
     font-weight: bold;
     min-width: 200px;
}

.videodesc2{
   
   font-size: 50px;
     margin-right:20px;
     line-height:  calc(20px + 1.9vw);
     color:#333333;
     
     font-weight: bold;
}

.videodescdark{
   
   font-size: 46px;
   
     line-height:  calc(20px + 1.9vw);
     color:#333333;
     margin-left: 1.6vw;
     font-weight: bold;
}

.videodescsm{
    margin-top: 2vw;
   font-size: 19px;
    width:90%;
     line-height:  calc(10px + 1.4vw);
     color:#485159;
     margin-left: 1.6vw;
    
     
}

.videodescsmmore{
    
     line-height:  calc(10px + 1.4vw);
    
     margin-left: 1.6vw;
    color: #333333;
    font-size: 19px;
    font-weight: bold;
     
}

.videodescsmmoredark{
   
     line-height:  calc(10px + 1.4vw);
    
     margin-left: 1.6vw;
    color: #222222;
    font-size: 19px;
    font-weight: bold;
     
}

.videodescsmdark{
    margin-top: 2vw;
   font-size: 19px;
    width:90%;
     line-height:  calc(10px + 1.4vw);
     color:#485159;
     margin-left: 1.6vw;
     border-top-style: solid;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    border-image-source: linear-gradient(90deg,#f24607,#0597f2 44%,#49d907 97%);
    border-image-slice: 1;
     
}

.more{
    display:none;
}


.sticky {
  position: fixed;
  top: 0;
  
}

.sticky + .content {
  padding-top: 102px;
}

.sticky2 {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky2 + .content {
  padding-top: 102px;
}

.wizardmain{
    width:fit-content;
    margin: 0 auto;
    text-align:center;
    padding:40px; 
    font-size:18px;
    border: 1px solid #ccc;
    border-radius: 5px;
    
}

.wizardcont{
  display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 20px;
    width: fit-content;  
    
}

.wizardsub{
   
    align-items: center;
    justify-content: center;
    border: 2px solid #0597f2;
    font-size: 18px;
    padding: 25px 30px 30px;
    width: 200px;
    line-height: 20px;
    flex-wrap: wrap;
    
    margin: 10px;
    cursor:pointer;
     box-shadow: rgb(0 0 0 / 20%) 0px 45px 20px -20px;
     border-image-source: linear-gradient(90deg, #0597f2, #0597f2 44%, #49d907 97%);
     border-image-slice: 1;
}
.wizardsub:hover{
  box-shadow: none;
  border: 2px solid #000;
}

.getbutton:hover{
  box-shadow: 0px 30px 20px -18px #0597f270;
}


.topHeadline{ 
    position:relative;
    background:#0597f2;
    padding: 0 0 10px;
   
    height:140px;
    
    
}

.headliner2{
    
    margin: 0 auto;
    font-size: 54px;
    text-align:center;
    padding:10px 0;
    font-weight:bold;
}

.headliner{
    
   font-size: 20px;
    text-align: center;
    padding: 30px;
    margin: 20px;
    width: 24%;
    
    border-radius: 8px;
    min-height: 130px;
}

.headtitle{
    font-size: 28px;
    padding-bottom: 20px;
    line-height: 28px;
    color:#333;
    font-weight: bold;
}

.headtext{
   font-size: 18px;
    line-height: 22px;
    line-height: calc(10px + 1.4vw);
}

.headlinerflex{
   display:flex;
    width: 100%;
    margin: 10px auto 40px;

    justify-content: center;
    align-items: flex-start;
    color:#485159;
}

.centerflex1{
    
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.headerright{
    font-size: calc(10px + .4vw);
    color: #fff;
    float: right;
    position:absolute;
    
    
}

.headlinefade{
background: -webkit-linear-gradient( 119deg, #84c4ec -60%,#fff 44%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.headblock{
   width:22%;
    min-width:196px;
  margin: -38% 1vw 0;
    z-index: 20;
    text-align: left;

}

.logofl{
    display:flex;
   margin-left: 4vw;
    text-align: center;
    font-size: 20px;
    width: 50%;
    
}


.logof{
   width: calc(90px + 1.8vw);
    padding: 18px 6px;
    text-align: center; 
    
}

.floatlog{
   
    color: #333;
   margin: 24px 0 0 2.4vw;
    font-size: 16px;
}

.rightswift{
    font-size: 19px;
    width:34%;
    line-height: 34px;
     color: #485159;
    align-items: center;   
    margin-left:50px;
}

.printedtitle{
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 20px;
    line-height: normal;
    display: flex;
    align-items: center;
}


.leftswift{
    width: 66%;
    
    display: flex;
    align-items: center;    
    justify-content: center;
    
}

#office{
 background-color:#ffffff;
 padding:100px 180px 110px;
 display:flex; 
 align-items: center; 
 justify-content: center;
 


}



#floatselect{
    
    padding: 14px 0;
    border-top: 4px solid #ffffff;
    background-color: #0597f2;
    display:none;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
    border-image-source: linear-gradient(90deg,#f24607,#0597f2 44%,#49d907 97%);
    border-image-slice: 1;
}

.next{
background-color: #ffffff;
    border: 1px solid #b1acac;
    padding: 6px 0.5vw;
    text-align: center;
    text-decoration: none;
    
    font-size: calc(8px + .22vw);
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    float: right;
}

.monitor{
   width:72%;
    min-width:196px;
   margin: -26% 1vw 0;
    z-index: 20;
}

.vidcont{
    max-width:58%;
    min-width:196px;
   margin: 10px 2vw;
    z-index: 20;
    position: relative;
    
}

.viddesc{
    display: flex;
    max-width:26%;
    min-width:196px;
   margin: 10px 0 10px 80px;
    z-index: 20;
}

.viddesca{
    display: flex;
    max-width:26%;
    min-width:196px;
   margin: 10px 60px 10px 0;
    z-index: 20;
}


.arrows{
    width:20px;
}
.buttonbar{
    display: flex;
    width: 1300px;
    
}


.getarrow{
   width: 10px;
 margin-right: -1px; 
    
}

.whitetitle{
    width: 120px;
    margin: 0 auto 0;
    padding: 20px 0 20px;
    
}

.landtitle{
   background-color: #333333;
}

.icona-cont{
    min-width:70px;
   
   
}
.icona-contd{
    width:70px;
  
   
}

.icona-contlg{
    width:58px;
   
    border-radius: 4px;
}

.desccont{
    display:flex;
    align-items: center;
}

.getbutton{
   
   padding: calc(4px + .4vw) calc(38px + 2vw);
    font-size: 18px;
    color: #ffffff;
    background-color: #0597f2;
    border: 3px solid #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 3px;
    
    
   z-index: 40;
    
}

.getbutton2{
   
   padding: calc(6px + .4vw) calc(6px + 1vw);
    font-size: 20px;
    color: #ffffff;
    background-color: #0597f2;
    border: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 3px;
    
   z-index: 40;
    
}

.getbutton4{
   
   padding: 10px 16px;
    font-size: 18px;
    color: #0597f2;
    background-color: #FFFFFF;
    
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 3px;
    z-index: 4;
    width:71%;
    margin:0 auto;
    font-weight: bold;
    
}




.getbuttonsm {
    padding: .2vw calc(5px + .6vw);
    font-size: calc(4px + .6vw);
    color: #333333;
    background: none;
    
    text-align: center;
    text-decoration: none;
    cursor: pointer;

    z-index: 40;
    border: none;
    width: calc(20px + 1.6vw)
}
.getbutton3{

padding: 10px 10px;
    font-size: 18px;
    color: #0597f2;
    background-color: #FFFFFF;
    border: 2px solid #0597f2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 10px;
    z-index: 4;
    width:90%;
    margin:0 auto;
    font-weight: bold;
}

.getbutton3:hover{
    background-color: #0597f2;
    color:#ffffff;
    
}

.getbuttonfloat{
    font-size: 16px;
    color: #ffffff;
    background-color: #0597f2;
    border: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 3px;
    height:35px;
    margin: 15px 0 0 2.4vw;
    padding-left: 16px;
}

.getlogin{
    
   font-size: 18px;
   
    color: #ffffff;
    background-color: #49D907;
    border: calc(1px + .10vw) solid #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 10px;
    
    padding: 16px;
    max-width: 200px;
    margin: 0 auto; 
    
    
}

.inno{
    width: 188px;
   margin-right: 40px;
   
}

.inno5{
    width: 188px;
  margin-right: 40px;
 
   
}

.inno1{
   width: 138px;
    position: absolute;
    top: 10%;
    left: 15%;
    z-index: 100;
    display:none;
}

.inno1a{
   width: 138px;
    position: absolute;
    top: -5%;
    left: 38%;
    z-index: 100;
    display:none;
}

.inno2{
    
    position: absolute;
    top: -158px;
   
    z-index: 100;
    font-size: 14px;
   
    
   
}

.testimonial-block {
    background-color: #0597f2;
    color: #FFFFFF;
    padding: 10px 10% 10px 2%;
    width: 70%;
    margin: 0 auto;
    border-radius: 3px;
    font-size: 16px;
    line-height: 24px;

}

#test-half{
    display:none;
}

.bottomcurve{
    margin-top: 40px;
}


.bigplay{
    
  position: absolute;
  z-index: 500;  
  bottom: 38%;
  left: 42%;
    
}

.smallplay{
    
 position: absolute;
    z-index: 500;
    bottom: 2%;
    left: 1%;
    width: 99%;
    opacity: .5;
    display:none;
    margin-left: 8px;
    background-color: #ffffff;
   
}

.bigplaybutton{
     padding: .2vw calc(5px + .6vw);
    font-size: calc(4px + .6vw);
    color: #333333;
    background: none;
    
    text-align: center;
    text-decoration: none;
    cursor: pointer;
   
    opacity:.5;
    z-index: 40;
    border: none;
    width: 6.4vw;
    
}

.smallplaybutton{
    
    font-size: calc(4px + .6vw);
    color: #333333;
    background: none;
    
    text-align: center;
    text-decoration: none;
    cursor: pointer;
   
   
    z-index: 40;
    border: none;
    width: 25px;
    
}
.bigplaybutton:hover {
 opacity: .8;
}

.smallplay:hover {
 opacity: .9;
}

.go{
 display: inline-block;
 width: 8px;
 margin: 0 6px 0 10px;   
    
}

.gob{
display: inline-block;
    width: 10px;
    margin: 0 0 0 18px;

}

.gob2{
display: inline-block;
    width: 10px;
    margin: 0 0 0 10px;

}

.learnmore{
    margin-top:20px;
    display:flex;
    align-items: center;
    cursor:pointer;
    
    
}

.morecontainer{
    background-color: #fafafa;
    padding: 100px 0 40px;
    border-top: 1px solid #ccc;
}

.moregrid{
    display: grid;
  grid-template-columns: 1fr 1fr 1fr;
 
  margin: 0 auto 80px;
    width: 70%;
}

.topmore{
    background-color: #ffffff;
    border-radius: 8px;
    border:1px solid #dcdcdc;
    padding: 30px;
    box-shadow: 14px 14px 6px -6px rgb(0 0 0 / 11%);
    position: relative;
    left: 10%;
    height: 200px;
    width: 100%;
    font-size:17px;
}

.centermore{
    
    background-color: #ffffff;
    border-radius: 8px;
    padding: 30px;
    border:1px solid #dcdcdc;
   box-shadow: 14px 14px 6px -6px rgb(0 0 0 / 11%);
    position: relative;
   left: -5%;
    top: 24%;
    width: 100%;
    font-size:17px;
    margin-bottom: 10%
}


.bottommore{
   background-color: #ffffff;
    border-radius: 8px;
    border:1px solid #dcdcdc;
    padding: 30px;
   box-shadow: 14px 14px 6px -6px rgb(0 0 0 / 11%);
    position: relative;
    left: -10%;
     top: 5%;
     font-size:17px;
    height: fit-content;
}

.centermoretitle{
    
width:82%;
}

.imgmore{
    width: 65%;
    margin: 5% 0 0 8%;
}

.imgmorecenter{
    width: 80%;
    margin: 5% auto 0;
}

.startorange{
    margin: 60px auto 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    width: fit-content;
}


.dnarw{
  
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-top:30px;
    display:none;
}

.uparw{
   width: 15px;
    margin: 20px auto 0; 
    display:none;
}


.stu{
    
    margin-top: 10px;
    line-height: normal;
}

.textdes{
   width: 80%;
   margin: 30px auto; 
}

.textbull{
 
   width: 80%;
   margin: 30px auto; 
}

#hamicon{
    display:none;
    width: 50%;
    justify-content: flex-end;
    margin-right: 9vw;
}

.playcont{
   display: flex;
    width: auto;
    margin: 0 auto;
    background-color: #ffffff;
    padding: .4vw;
    border-radius: 8px;
}

.buttcont{
    margin:0 auto;
}

.bulletflex{
    display:flex;
    margin-bottom: 30px;
}

.bluebullet{
    min-width: 8px;
    margin-right: 18px;
}

.fleft{
    margin: 0 0 0 12vw;
    display:flex;
    
}

.logcont{
    width: 50%;
    display: flex;
    justify-content: flex-end;
    margin-right: 4vw;
}

.playButton{
    background:url(/images/icons/playred.png) no-repeat;
    cursor:pointer;
    border:none;
    width:100px;
    height:100px;
}

.playButton:active  /* use Dot here */
{   
    background:url(./images/but2.png) no-repeat;
}

.smflex{
    display: flex;
    padding: 0;
    margin: -30px 0 15px;
    justify-content: center;
    align-items: center;
   
    
    
}

.smaflex{
    
    padding: 0;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
   
    
}

.getstart{
    display: flex;
    flex-wrap: wrap;
    padding: 30px 0;
    justify-content: center;
    align-items: center;
    background-color: #333333;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
    border-color:#777777;
    border-image-slice: 1;
   
}

.getstart2{
    display: flex;
    border-top: 1px solid #ccc;
    padding: 60px 60px 80px;
    justify-content: center;
    align-items: center;
    background-color: #fafcfe;
    margin: 0 auto;
   
}

.getdesc{
     font-size: 20px;
    line-height: calc(10px + 1.4vw);
    color: #485159;
   
}

.getbottom{
    
    font-size: 20px;
    margin-top: 20px;
    color: #fff;  
    
}

.getblock{
    
    text-align:center;
}

#logostation{
    
background-color: #ffffff;
    margin: 80px 0 136px;
   padding-bottom: 80px;
}

.centerstripe{
   height: 20vw;
    margin-top: -450px;
    display:none;
   
     background: linear-gradient(90deg, #e0f3fe 0%, #0597f233 12%, #e0f3fe 65%);
}

.centerstripe2{
   height: 20vw;
    margin-top:-200px;
   
    background: linear-gradient(90deg, #e0f3fe 0%, #e1f2fd 12%, #e0f3fe 65%);
    
}

.centerstripe3{
   height: 20vw;
    margin-top: -450px;
   display:none;
     
     background: linear-gradient(270deg, #e0f3fe 0%, #0597f233 12%, #e0f3fe 65%);
    
}

.centerstripe4{
   height: 20vw;
    margin-top: -200px;
    margin-bottom: 300px;
    background: linear-gradient(360deg,#fff,#5635290a 102.47%);
    
}

.flex-containervid{
    display: flex;
    flex-wrap: wrap-reverse;
    max-width: 1200px;
    justify-content: center;
    align-items: center;
    padding: 5vw 13vw;
    margin: 0 auto;
  }

.landicon{
    margin: .8vw auto 0;
    width: calc(40px + .5vw);
}

.landicontext{
    margin: .2vw auto;
    padding-left: calc(5px + .6vw);
    text-align: center;
    cursor: pointer;
}

.vidsec{
    
   
    margin-top: -135px;
}

.lgvid{

    max-width: 50%;
}


.smvid{
  
 max-width: 35%;

    
}

#dashvids{

    border-top: 1px solid #cccccc;
   
}


.columnp {
    float: left;
    width: 23%;
    box-sizing: border-box;
    height: fit-content;
    background-color: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 10px;
    margin: 1%;
}
  
 
 .rowp {
  margin: 0 auto;
  max-width: 78%;
  padding: 60px 0;
  } 

  
.rowp:after {
  content: "";
  display: table;
  clear: both;
 
}

.pricetitle{
    font-size: 26px;
    line-height: calc(10px + 1.4vw);
    color: #555557;
   font-weight: bold;
   width:80%;
}
.priceamt{
    font-weight: bold;
   font-size: 32px;
    padding: 0px 0 0 20px;
}

.pricedesc{
   font-size: 13px;
    line-height: 16px;
    padding: 0 0 10px 0;
    margin: -6px 0 20px 20px; 
    
}

.pricetotal{
 padding: 10px 0 0 5px;
 font-weight:bold;
}

.pricesize{
   display:flex; 
  width: 1100px;
  margin: 30px auto 0;
}

.teamsize{
  font-size: 22px;
    line-height: calc(10px + 1.4vw);
    color: #fff;
    padding: 0 10px 0 0;
    font-weight:bold;
}

.separator{
  
   border-top: 1px solid #999;
    width: 82%;
    margin: 30px auto;
    
}

#contactform{
    width:50%;
    margin: 30px auto;
    padding: 40px 40px 40px 20px;
    border-radius: 10px;
}

#logincont{
    max-width: 300px;
    margin: 0 auto;
    border: 2px solid #999;
    padding: 40px 70px;
    border-radius: 5px;
    background-color: white;
    box-shadow: rgb(0 0 0 / 20%) 0px 45px 20px -20px;
}

#logincont2{
    max-width: 400px;
    margin: 0 auto;
   
    padding: 40px;
    
    background-color: white;
  
}

.logoblock{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.contactcontainer{
    display:flex;
   align-items: center;
   max-width: 1200px;
    margin: 40px auto;
    
}

.contactblock{
    width: 50%;
    min-width: 200px;
}

.rightcontact{
   width: 50%;
   margin: 30px auto;
    padding: 20px 40px; 
    
}

.contactlabel{
    padding: 10px 0 10px 20px;
    font-size: 14px;
}

.contactinput{
    padding: 0 10px 0 20px;
    
}

.thankyou{
   text-align:center; 
   font-size:18px
    
}

#sent{
    display:none;
    width: 50%;
    margin: 30px auto;
    padding: 40px 40px 40px 20px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
}

#resmenu{
    display:none;
    padding-bottom: 50px;
    background-color: #ffffff;
    position: fixed;
    z-index: 100;
    width: 100%;
}

#cicon{
    margin-top: 16px;
    width: 50%;
    justify-content: flex-end;
    margin-right: 9vw;
    
}

#clicon{
display:none;
    
}

.reslink{
   padding: 20px 20px 20px 40px;
    border-bottom: 1px solid #eeeeee;
    font-size: 18px;
    
}

#groupprice{
padding: 10px 0 0 2px;
 font-weight: bold;    

}

#largeprice{
  padding: 10px 0 0 2px;
    font-weight: bold;  
}

#sizesel{
    width: fit-content;
    height: 40px;
   padding: 0 10px;
   margin: 0 5px;
   font-size: 20px;
    border: none;
    border-radius: 10px;
    text-align: center;
  font-weight:bold;
}

.sizesele{
    width: fit-content;
    height: 48px;
   padding: 0 10px;
  
   font-size: 14px;
    
    text-align: center;
  
}

#dealtag{
    font-size: 20px;
    
    color: #ffffff;
    padding: 10px;
    background-color: #0597f2;
   
    text-align:center;
    border-radius: 10px;
   
   
    
}

#largetag{
    font-size: 16px;
    
    color: #ffffff;
    padding: 8px;
    background-color: #49d907;
    
    text-align: center;
    border-radius: 10px;
    
    display:none;
}

#enttag{
    font-size: 20px;
    
    color: #ffffff;
    padding: 10px;
    background-color: #49d907;
    
    text-align: center;
    border-radius: 10px;
    
     display:none;
}

#pricemarq{
   
   background: linear-gradient(180deg,#fff,#e5e5e57a 102.47%);
    margin-top: 200px;
    
}

#priceconta{
    position: relative; 
    top: -200px;
    height: 400px; 
    
}

.boxy{
  box-shadow: 0px 3px 10px 1px rgb(0 0 0 / 15%), 0px 2px 2px 0px #00000030;
    border-radius:10px;
    border-style: solid;
    border-width: 1px;
   
}

.boxy2{
  box-shadow: 0px 3px 10px 1px rgb(0 0 0 / 15%), 0px 2px 2px 0px #00000030;
   
    border-style: solid;
    border-width: 3px;
    border-image-source: linear-gradient(180deg,#f24607,#0597f2 44%,#49d907 97%);
    border-image-slice: 1;
    
}

.boxy1{
   box-shadow: 0px 3px 10px 1px rgb(0 0 0 / 15%), 0px 2px 2px 0px #00000030;
   border: 1px solid #ccc;
}

.topbar{
    height: 10px;
    border-radius: 6px 6px 0 0;
    
}

#setupvid{
    
  max-width: 80%;
  margin: 10px 0;
}

#setvid{
    margin-bottom: -100px;
}

.lgicon{
   width: calc(18px + .3vw);
    margin: 0 auto;
}

.inshadow{
    box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.14), inset 0px 1px 4px 0 #00000015;
    background-color: #f9f9f9;
}

.seeker{
    
width:100%;
padding-right:10px;
}

#logosection{
   
    display: flex;
    flex-wrap: wrap;
    margin: calc(12px + 2vh) auto calc(32px + 5vh);
    justify-content: space-evenly;
    align-items: center;
   
    
}

#scroll{
    
    width:40px;
    margin: 0 auto;
}

#leftmenu{
    display:flex;
    
}

.centerflex{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    
}

.bluecenterbutton{
    font-size: 18px;
    color: #ffffff;
    background-color: #0597f2;
    border: calc(1px + .10vw) solid #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 10px;
    padding: 10px;
    margin: 20px 0 0;
    
}

.logotitle{
    max-width: 1450px;
    margin: 0 auto 30px;
    font-size: calc(13px + 1vw);
    
    line-height: calc(10px + 1.4vw);
    color: #333333;
   
    text-align: center;
    font-weight: bold;
    display:none;
}

.logograyr{
    width: 50px;
    padding: 2.2vw;
}

.logograyl{
    width: 64px;
    padding: 2.2vw;
}

.logograylg{
    width: 84px;
    padding: 2.2vw;
}

.logograysm{
    width: 40px;
    padding: 2.2vw;
}

.logograyssm{
    width: 26px;
    padding: 2.2vw;
}

textarea {
  width: 100%;
    height: 150px;
   
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    
    font-size: 15px;
    resize: none;
}


#cir{
  width: calc(10px + 40vw);
    position: absolute;
    bottom:6px;
    display:none;
   
   
}

#cirv{
  width: 100%;
    position: absolute;
    opacity:.06;
    display:none;
}
   #cirg{
  width: 70%;
    position: absolute;
    opacity:.08;
     display:none;
   
}

#rcir{
  width: calc(10px + 14vw);
    position: absolute;
    bottom:-22px;
     left: 80vw;
     display:none;
}


#rcir2{
  width: calc(10px + 6vw);
    position: absolute;
    bottom:270px;
     left: 90vw;
     display:none;
}
#cir2 {
 width: calc(10px + 12vw);
    position: absolute;
    bottom: 28vw;
    left: 80vw;
    opacity: 30%;
}

#cirm{
   width: calc(10px + 18vw);
    position: absolute;
    bottom: 20vw;
    left: 40vw;
    opacity: 50%;
}

#vidbar{
    
    box-shadow: 0px -1px 4px 0px rgb(0 0 0 / 14%), 0px 1px 4px 0 #00000015;
}

#svid{
  background-color: #ffffff;
   
    border-radius: 4px;
    padding: 20px;
  box-shadow: 0px 40px 30px -20px #eee;
  
}

.customvid{
    
  background-color: #ffffff;
    border-radius: 3px;
 
    padding: 40px 54px;
  
  background-color: transparent;
}


.customviddark{
  border-radius: 4px;
 border: 1px solid #cccccc;
   box-shadow: 0px 20px 19px -12px #0000000d;
   background-color:#FFFFFF;
   padding:20px;
}
.customviddark2{
  border-radius: 4px;
  border: 1px solid #cccccc;
  box-shadow: 0px 20px 19px -12px #0000000d;
   background-color:#FFFFFF;
   padding: 20px 30px;
}

.vidsub{
   background-color: #ffffff;
   
    
}


.footer{
    background-color: #333333;
    color: #333;
}

#foot{
    display:flex;
    
    justify-content: center;
   
    margin: 20px auto 40px;
}

.footitems{
    display: flex;
    padding: 10px 6vw;
    justify-content: space-around;
    align-items: center;
}

.foottext{
    
   font-size:12px; 
}

.footlogo{
    width:76px
    
}

.footcontact{
    
text-align: left; 
padding: 0 6vw;

}

.footcontact-cont{
    
border-right: 1px solid #777777;
color:#fff;
}

#logconnect{
    font-size: 24px;
    line-height: 32px;
    color: #333;
    max-width: 400px;
    
}

#loglogo{
    margin-bottom:160px;
}

#flogo{
  width: 230px;
    padding-bottom: 20px;
    text-align: center;  
    margin-top: 40px;
}
    


*:focus {
  outline: none;
}

#plans{
    display:none;
}

input[type=email] {
    height: 38px;
    width: 100%;
    font-size: 14px;
}

input[type=tel] {
    height: 38px;
    width: 100%;
    font-size: 14px;
}

input[type=range] {
  height: 22px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #4D4D4D;
  border-radius: 0px;
  border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 2px solid #FFFFFF;
  height: 14px;
  width: 14px;
  border-radius: 25px;
  background: #4D4D4D;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #4D4D4D;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #4D4D4D;
  border-radius: 0px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 2px solid #FFFFFF;
  height: 14px;
  width: 14px;
  border-radius: 25px;
  background: #4D4D4D;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #4D4D4D;
  border: 0px solid #000000;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #4D4D4D;
  border: 0px solid #000000;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 2px solid #FFFFFF;
  height: 14px;
  width: 14px;
  border-radius: 25px;
  background: #4D4D4D;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #4D4D4D;
}
input[type=range]:focus::-ms-fill-upper {
  background: #4D4D4D;
}

input[type=text]{
    height:38px;
    width:100%;
    font-size: 14px;
}

input[type=textarea]{
    height: 160px;
    width: 100%;
    font-size: 15px;
    padding: 5px;
}


.marquee {
    
	line-height: 50px;
	
	color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee div {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 20s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.marquee1a{
   animation-delay: 10s; 
}

.marquee2 {
    
	line-height: 50px;
	
	 white-space: nowrap;
    overflow: hidden;
   
    box-sizing: border-box;
}
.marquee2 div {
    display: inline-block;
    padding-left: 100%;
    
    animation: marquee 20s linear infinite;
}
@keyframes marquee2 {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.sourcecoast .btn-primary {
    background-color: #0597f2;
    border-radius : 10px;
    font-size: 20px;
}

.sourcecoast .btn-primary:hover{background-color:#0597f2;border:none;}

.sourcecoast .btn-primary:active{background-color:#0597f2; border:none;}

.sourcecoast .btn-primary:visited{background-color:#0597f2; border:none;}

.sourcecoast .btn-primary:focus{background-color:#0597f2; border:none;}

.sclogin-joomla-login.vertical input.sclogin-username.input-block-level, .sclogin-joomla-login.vertical input.sclogin-passwd.input-block-level {
    width: 100% !important;
    height: 54px !important;
    font-size: 18px;
}

.sclogin-joomla-login.vertical input.sclogin-passwd.input-block-level {
    width: 100% !important;
    height: 54px !important;
    font-size: 18px;
}

.sourcecoast .input-append input, .sourcecoast .input-append select, .sourcecoast .input-append .uneditable-input {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.setup{
    margin-top:50px;
   
}
.doto{
    width: 28px;
   margin: -20px 0 10px -15px;
}

.reveal.anisvg {
 transform: translateY(-10px);
  opacity: 1;
}

.reveal{
  position: relative;
  transform: translateY(200px);
  opacity: 1;
  transition: .5s all ease;
}

.reveal2{
  position: relative;
  margin-top:250px;
 transform: translateY(40px);
  opacity: 1;
  transition: 1s all ease;
}


.reveal2.anisvg2 {
 transform: translateY(600px);
  opacity: 0;
}


@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.containerlogo {
  
}

.brand-wheel {
  flex-direction: row;
  align-items: center;
  display: flex;
  overflow: hidden;
  position: relative;
  height: 100px;

  --animationspeed: 60s;
  --animationdelay: calc(var(--animationspeed) / 2);
}

.brand-wheel::before {
  position: absolute;
  background-image: linear-gradient(to right, #fff 0%, rgba(250, 250, 250, 0) 100%
100%
);
  content: "";
  height: 100%;
  width: 5%;
  z-index: 2;
  pointer-events: none;
}
.brand-wheel::after {
  position: absolute;
 background-image: linear-gradient(to left, #fff 0%, rgba(250, 250, 250, 0) 100%
100%
);
  
  
  content: "";
  height: 100%;
  width: 5%;
  z-index: 2;
  pointer-events: none;
  right: 0;
}


.brand-wheel2 {
  flex-direction: row;
  align-items: center;
  display: flex;
  overflow: hidden;
  position: relative;
  height: 100px;

  --animationspeed: 47s;
  --animationdelay: calc(var(--animationspeed) / 2);
}

.brand-wheel2::before {
  position: absolute;
 background-image: linear-gradient(to right, #fff 0%, rgba(250, 250, 250, 0) 100%
100%
);
  content: "";
  height: 100%;
  width: 5%;
  z-index: 2;
  pointer-events: none;
}
.brand-wheel2::after {
  position: absolute;
 background-image: linear-gradient(to left, #fff 0%, rgba(250, 250, 250, 0) 100%
100%
);
  content: "";
  height: 100%;
  width: 5%;
  z-index: 2;
  pointer-events: none;
  right: 0;
}

.brand-slide {
  flex-shrink: 0;
  position: absolute;
  animation-name: slidelogo;
  animation-duration: var(--animationspeed);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  min-width: 100%;
  display: flex;
  justify-content: space-around;
}

.brand-slide.delay {
  transform: translateX(100%);
  animation-name: slidelogo2;
}

.brand-wheel:hover .brand-slide {
  animation-play-state: paused;
}

.logo-div {
  display: inline-flex;
  align-self: center;
  animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
  padding: 0 20px 0 20px;
}

.loaderout{
 animation: zoominoutsinglefeatured .5s ;
    
}


@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1,1);
    }
    100% {
        transform: scale(.1,.1);
    }
    
}


@keyframes slidelogo {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes slidelogo2 {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}


.typee h1 {
  color: #333333;
  font-size: 46px;
  line-height:46px;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  /*border-right: .2em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  
  animation: 
    typing .6s steps(30, end),
    blink-caret .5s step-end infinite;  
}

.blur2 {
    
	animation: blur 4s ease ;
	-webkit-animation: blur 4s ease ;
	animation-iteration-count: 1;
}


/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #fff }
}



@keyframes blur {
 from {
    text-shadow:  0 0 100px #fff; 
     opacity:.1;
  }
  to {
    text-shadow:  0 0 0px #fff;
     opacity:1;
  }
	
}

@-webkit-keyframes blur {
	from {
    text-shadow:  0 0 100px #fff; 
    opacity:.5;
  }
  to {
    text-shadow:  0 0 0px #fff;
     opacity:1;
  }
}



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


.spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  
  z-index: 0;
  width: 10px;
  height: 10px;
  border-radius: 8px;
  overflow: hidden;
  padding: 2rem;
}
    .spinner::before{
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #f24607;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#f24607, #f24607),
      linear-gradient(#0597f2, #0597f2), linear-gradient(#49d907, #49d907);
    animation: spinner-rotate 1.5s linear infinite;
  }

  .spinner::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 12px;
    top: 12px;
    width: calc(100% - 25px);
    height: calc(100% - 25px);
    background: white;
    border-radius: 4px;
  }
  
  
  .containerloader{
    width: 60px;
    height: 60px;
     position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  
  z-index: 199;
   
}



.whtbox{
    width: 42px;
    height: 42px;
    box-sizing: border-box;
    border-radius:2px;
    position: relative;
    top: 12px;
    left: 11px;
    display: block;
    background-color: #ffffff;
    
}


.boxu1{
    box-sizing: border-box;
    position: absolute;
    display: block;
    background-color: #f24607;
    width: 92px;
    height: 28px;
    margin-top: 64px;
    margin-left: 0px;
    -webkit-animation: anime1 6s 0s forwards ease-in-out infinite;
    animation: anime1 2s 0s forwards ease-in-out infinite;
}

.boxu2{
       box-sizing: border-box;
       position: absolute;
       display: block;
       background-color:#0597f2;
       width: 48px;
       height: 48px;
       margin-top: 0px;
       margin-left: 0px;
      -webkit-animation: anime2 6s 0s forwards ease-in-out infinite;
       animation: anime2 2s 0s forwards ease-in-out infinite;
}


.boxu3{
       box-sizing: border-box;
       position: absolute;
       display: block;
       background-color:#49d907;
       width: 48px;
       height: 48px;
       margin-top: 0px;
       margin-left: 64px;
       -webkit-animation: anime3 6s 0s forwards ease-in-out infinite;
       animation: anime3 2s 0s forwards ease-in-out infinite;

}

@-webkit-keyframes anime1 {
  0% {
    width: 62px;
    height: 28px;
    margin-top: 38px;
    margin-left: 0px;
    border-radius: 0 0 0 4px;
  }
  12.5% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 0px;
    border-radius: 0 0 0 4px;
  }
  25% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 0px;
    border-radius: 0 0 0 4px;
  }
  37.5% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 0px;
    border-radius: 0 0 0 2px;
  }
  50% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 0px;
    border-radius: 0 0 0 4px;
  }
  62.5% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 0px;
    border-radius: 0 0 0 2px;
  }
  75% {
    width: 28px;
    height: 62px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 4px 0 0 4px;
  }
  87.5% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 4px 0 0 0;
  }
  100% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 4px 0 0 0;
  }
}
@keyframes anime1 {
  0% {
    width: 62px;
    height: 28px;
    margin-top: 38px;
    margin-left: 0px;
    border-radius: 0 0 0 4px;
  }
  12.5% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 0px;
    border-radius: 0 0 0 4px;
  }
  25% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 0px;
    border-radius: 0 0 0 4px;
  }
  37.5% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 0px;
    border-radius: 0 0 0 2px;
  }
  50% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 0px;
    border-radius: 0 0 0 4px;
  }
  62.5% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 0px;
    border-radius: 0 0 0 2px;
  }
  75% {
    width: 28px;
    height: 62px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 4px 0 0 4px;
  }
  87.5% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 4px 0 0 0;
  }
  100% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 4px 0 0 0;
  }
}
@-webkit-keyframes anime2 {
  0% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 4px 0 0 0;
  }
  12.5% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 4px 0 0 0;
  }
  25% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 4px 0 0 0;
  }
  37.5% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 4px 0 0 0;
  }
  50% {
    width: 62px;
    height: 28px;
    margin-top: 0px;
    margin-left: 0px;
     border-radius: 4px 4px 0 0;
  }
  62.5% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 38px;
     border-radius: 0 4px 0 0;
  }
  75% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 38px;
     border-radius: 0 4px 0 0;
  }
  87.5% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 38px;
    border-radius: 0 4px 0 0;
  }
  100% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 38px;
     border-radius: 0 4px 0 0;
  }
}
@keyframes anime2 {
  0% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 4px 0 0 0;
  }
  12.5% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 4px 0 0 0;
  }
  25% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 4px 0 0 0;
  }
  37.5% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 4px 0 0 0;
  }
  50% {
    width: 62px;
    height: 28px;
    margin-top: 0px;
    margin-left: 0px;
     border-radius: 4px 4px 0 0;
  }
  62.5% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 38px;
     border-radius: 0 4px 0 0;
  }
  75% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 38px;
     border-radius: 0 4px 0 0;
  }
  87.5% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 38px;
    border-radius: 0 4px 0 0;
  }
  100% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 38px;
     border-radius: 0 4px 0 0;
  }
}
@-webkit-keyframes anime3 {
   0% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 38px;
   border-radius: 0 4px 0 0;
  }
  12.5% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 38px;
   border-radius: 0 4px 0 0;
  }
  25% {
    width: 28px;
    height: 62px;
    margin-top: 0px;
    margin-left: 38px;
    border-radius: 0 4px 4px 0;
  }
  37.5% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 38px;
    border-radius: 0 0 4px 0;
  }
  50% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 38px;
     border-radius: 0 0 4px 0;
  }
  62.5% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 38px;
     border-radius: 0 0 4px 0;
  }
  75% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 38px;
     border-radius: 0 0 4px 0;
  }
  87.5% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 38px;
     border-radius: 0 0 4px 0;
  }
  100% {
    width: 62px;
    height: 28px;
    margin-top: 38px;
    margin-left: 0px;
     border-radius: 0 0 4px 4px;
  }
}
@keyframes anime3 {
  0% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 38px;
   border-radius: 0 4px 0 0;
  }
  12.5% {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    margin-left: 38px;
   border-radius: 0 4px 0 0;
  }
  25% {
    width: 28px;
    height: 62px;
    margin-top: 0px;
    margin-left: 38px;
    border-radius: 0 4px 4px 0;
  }
  37.5% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 38px;
    border-radius: 0 0 4px 0;
  }
  50% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 38px;
     border-radius: 0 0 4px 0;
  }
  62.5% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 38px;
     border-radius: 0 0 4px 0;
  }
  75% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 38px;
     border-radius: 0 0 4px 0;
  }
  87.5% {
    width: 28px;
    height: 28px;
    margin-top: 38px;
    margin-left: 38px;
     border-radius: 0 0 4px 0;
  }
  100% {
    width: 62px;
    height: 28px;
    margin-top: 38px;
    margin-left: 0px;
     border-radius: 0 0 4px 4px;
  }
}