* {
	box-sizing: border-box;
}

html, div, h1, h2, h3, h4, h5, h6, p, img, dl, dt, dd, ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td, form, fieldset, embed, object, applet {
	margin: 0;
	padding: 0;
	border: 0;
}

a,
a:hover,
a:visited,
a:active{
    color:#2196f3;    
    text-decoration:none;
}
a:hover{
    color:#4cc5f8;    
}
body{
	height: 100%;
    margin: 0;
    padding: 0;
    font-family: Readex Pro,Arial,Helvetica,sans-serif;
    font-weight: 400;
    color: #1a1a1a;
    position: relative;
    background: #f8f9fa;
    overflow-y: auto;        
}

.main{	
    display: flex;
    flex-direction: column;   
}

#header{	
	width:100%;
    background:#ffffff;
    border-top:1px solid #dddddd;
    border-bottom:1px solid #dddddd;
    padding:0.85rem 0;
    position:sticky;
    top:0;
    left:0;
    z-index:999999;
}
#header.scroll .header_content .hero_strap{
    display:none;
}
.header_content{
	display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    width: 75vw;
	max-width: 1920px;
	align-items: center;    
}

#header h1.logo{
	text-align: center;
    font-weight: 600;
    font-size: 2.15rem;
    line-height: 1.7rem;
    display: block;
    border: none;
    width: auto;
    margin: 0.3rem auto 0 0;
}

#header h1.logo img{
	max-height: 3.5rem;
	display:block;
	width:auto;
	margin-left:1rem;
}
.header_content .hero_strap{
    display:block;
    text-transform: uppercase;
    font-weight: 299;
    font-size: 1.3rem;
    /* font-style: italic; */
    color: #888888;
}

#topnav{
    width:100%;  
    background:none;  
    position:sticky;
    top:0;
    left:0;
    z-index:9999999;
}
.topnav_container{
    width:75vw;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding:0.75rem 0;
   
}

.slide_controller{
    padding:2rem 0;
    margin-left:-1rem;
    display:flex;
    flex-direction:column;
}
.slide_controller .slide_button{
    font-size:1.3rem;
    padding:1.3rem 1rem;
    color:#333333;
}
.slide_controller .slide_button:hover,
.slide_controller .slide_button.selected{
    background:#ffffff;
    color:#0376d4; 
    cursor:pointer;
}

.slide_container{  
    width: 100%;
    height: 25vw;      
    border:0.2rem solid #333333;
    background:#ffffff;
    border-radius:1rem;    
    position:relative;
}

.slide_container .slide_carousel{
    position:relative;
    top:1rem;
    left:1rem;
    width:calc(100% - 2rem);
    height:calc(100% - 2rem);
    overflow:hidden;
}
.slide_container .slide_carousel .slide_slides{
    width:400%;
    height:100%;
    display:flex;
    flex-direction:row;
    align-items:center;
    scroll-behavior: smooth;
    flex-wrap:nowrap; 
    position:relative;
    left:0;  
    transform:translate3d(0,0,0);
    transition: left 0.3s  cubic-bezier(0.3, 0.2, 0.1, 0.1);      
}
.slide_container .slide_carousel .slide_slides .slide_item{
    flex:0 0 25%;
    width:25%;    
    height:100%;
    display:block;
}
.slide_container .slide_carousel .slide_slides .slide_item img{
    width:100%;
    height:auto;
    aspect-ratio: 4 / 3;
}

.slide_container .slide_bottom{
    border-top:0.2rem solid #333333;
    width:100%;
    position:absolute;
    left:0;
    bottom:0;
    height:2rem;
    display:none;
}
.slide_container .slide_power{
    border:0.2rem solid #333333;
    width:2rem;
    height:0.5rem;
    position:absolute;
    left:2rem;
    top:-0.5rem;    
    z-index:10;
}

.slide_container .slide_volup{
    border:0.2rem solid #333333;
    width:0.5rem;
    height:2rem;
    position:absolute;
    right:-0.5rem;
    top:2rem;    
    z-index:10;
}

.slide_container .slide_voldown{
    border:0.2rem solid #333333;
    width:0.5rem;
    height:2rem;
    position:absolute;
    right:-0.5rem;
    top:5rem;    
    z-index:10;
}



.login_menu{    
    display: flex;
}
.login_menu a{
    font-size:0.875rem;	
	text-decoration:none;
	margin-left:1.2rem;
	margin-right:1.2rem;
    font-weight:800;
}
.login_menu a:last-child{
    margin-right:0;
}
.login_menu a i{
    margin-right:0.5rem;
}
.login_menu a:hover{
    color:#1a1a1a;    
}


.content{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-top: 0;
    padding-top:0rem;
    padding-bottom: 0rem;
}

	
.content_inner{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 1920px;
    width: 100%;
    padding-left:12.5vw;
    padding-right:12.5vw;
    padding-top: 5rem;
    padding-bottom:6rem;
    align-items: stretch;
   /* min-height:90vh;*/
}
.content_inner.white{
    background:#ffffff;
}

.content_inner video{    
    margin-left:auto;
    margin-right:auto;
}
.content_inner.full{
    padding-left:5vw;
    padding-right:5vw;
}


.content_inner .box1{
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;    
    flex: 0 0 45%;
    justify-content: center;
   /* background: rgba(255,255,255,0.5);
    border-radius: 1rem;*/
}
.content_inner .box2{
    flex: 1;
    min-width: 28rem;
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.content_inner .box2.flip{
    min-width:20rem;
    padding-right:0;
    padding-left:0;
}
.content_inner .box1.flip{
    flex: 0 0 40%;
    padding-left: 2rem;
    padding-right:0;
}

.content_inner .box3{
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;    
    flex: 0 0 100%;
    justify-content: flex-start;
   /* background: rgba(255,255,255,0.5);
    border-radius: 1rem;*/
}


.welcome{
    text-align: left;     
    font-size: 2rem;
    max-width: unset;
}
.welcome strong{
    font-size:1rem;
    text-transform:uppercase;
    font-weight:300;
    color:#01b2fd;
    display:block;
    margin-bottom:4rem;
}
.welcome strong.right{
    text-align:right;
}
.welcome h1{
    font-size:5rem;
    font-weight: 600;
    line-height:4.6rem;
    letter-spacing: -0.1rem;
    display:block;
}
.welcome h2{
    font-size:3rem;
    font-weight: 600;
    line-height:2.6rem;
    letter-spacing: -0.1rem;
    display:block;
}
.welcome p{
    font-size:1.4rem;    
    color: #444;
    margin-bottom: 0.5rem;
    display:block;
    margin-top:2rem;
}

.welcome.full{
    width:100%;
}
.welcome.full h1{
    text-align:center;
}
.welcome.full h2{
    text-align:center;
}
.welcome.full p{
    text-align:center;
}

.video_container{
    position:relative;  
    border: 1px solid #cccccc;
    border-radius: 1rem; 
    overflow:hidden; 
    align-self:center;
}
.video_container video{
    z-index:1;
    position:relative;
    width:100%;
    height:60vh;
}
.video_container .play,
.video_container .pause
{
    position:absolute;
    z-index:999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.2);
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
}
.video_container .play.off,
.video_container .pause.off{
    display:none;
}
.video_container .play:hover,
.video_container .pause:hover{
    background:rgba(240,240,240,0.4);    
}

.video_container .play:hover a,
.video_container .pause:hover a{
    color:#0376d4 !important;
    visibility: visible;
}

.video_container .play a,
.video_container .pause a{
    color:#1a1a1a;
    display:block;
    cursor:pointer;
}

.video_container .play a i,
.video_container .pause a i{
    font-size:5rem;    
    background: #ffffff;
    border-radius: 50%;
}



.video_container .pause{
    background:transparent;
}
.video_container .pause a{
    visibility:hidden;
}

@media only screen and (max-width: 1300px){
    .content_inner{
        padding-left:9vw;
        padding-right:9vw;
    }
}

@media only screen and (max-width: 980px){
    #topnav{
        position:relative;
        top:auto;
        left:auto;        
    }
    #header{
        position:relative;
        top:auto;
        left:auto;        
    }
    .header_content{
        flex-direction:column;
    }
    .header_content .hero_strap{
        font-size:1rem;
        margin-top:1rem;
    }
    .topnav_container{        
        justify-content: center;
    }
    #header h1.logo{
        margin-left:auto;
        margin-right:auto;
    }
    .content .content_inner{
        flex-direction: column;
        align-items: center;
        
    }
    .content_inner .box1{
        padding-left:0 !important;
        padding-right:0 !important;
    }
    .content_inner .box2{
        padding-left:0 !important;
        padding-right:0 !important;
    }
    .content_inner video{
        height:50vh !important;
    }    
    .content_inner .box2{
        flex: 1;
        width: 100%;        
    }    
    .slide_container{
        height:45vw !important;
    }
}








.welcome b{
    color: #1a1a1a;
    font-size: 2.5rem;
}
.welcome i{
    color: #777;
    font-size: 2.5rem;
    font-weight: 600;
}


.buttons{    
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-self: center;
    flex-direction:row;
    width:100%;
    margin:3rem 0;
}
.buttons.center{
    justify-content: center;   
}
.buttons a{
    vertical-align: middle;
   
    background: #03b338;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    outline: none;
    text-align: center;
    padding: 1rem;
    border-radius: 0.4rem;   
    max-width: 40rem;
}
.buttons a i{
    color:#ffffff;
    margin-right: 0.8rem;
    font-size: 1.7rem;
}
.buttons a:hover {
    background: #0be04b;
}
.buttons a.alt{
    background:#20B2AA;
}
.buttons a.alt:hover{
    background:#19918b;
}

.buttons a.altb{                            
    background:#B220AA;
}
.buttons a.altb:hover{
    background:#8a1b84;
}
.buttons a.full{
    margin-top:2rem;
    flex:1 0 calc(80% - 1rem);
    max-width:40rem;
    display:flex;
    align-items:center;
    justify-content: center;
    padding:1rem;
}
.buttons a.full i{
    margin-right:1rem;
    font-size:2rem;
}


.copy_footer{
    border-top:1px solid rgba(0,0,0,0.1);    
    background: #ffffff;
    display:flex;
    padding: 1rem;
    justify-content: flex-start;
    position: relative;
    font-size:0.875rem;
    flex-direction:row;
    padding-left:12.5vw;
    padding-right:12.5vw;
}
.copy_footer .split{
    display:flex;
    flex-direction:column;
    margin-right:5rem;
}
.copy_footer .split h3{
    margin-bottom:1rem;
}

.copy_footer span{
color:#1a1a1a;
margin-bottom:0.5rem;
}

.copy_footer a{    
text-decoration:none;
color:#1a1a1a;
margin-bottom:0.5rem;
}

@media only screen and (max-width: 1300px){
    .copy_footer{
        padding-left:9vw;
        padding-right:9vw;
    }
}



.fullpage_box{
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: rgba(255,255,255,0.5);      
    border-radius:1rem;  
}

 

.fullpage_box .pricing{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap; 
    margin-top: 2rem;
    flex: 1;
    width:100%;
}
.fullpage_box .note{
    margin-top: 1rem;
    width: 100%;
    font-size: .75rem;
    opacity: .5;
    text-align: center;
    display:none;
}

.fullpage_box .note.vis{
    display:block;
}

.fullpage_box .switch{
    margin-top: 1rem;
    width: 100%;
    font-size: .75rem;    
    text-align: center;    
}
.fullpage_box .switch a{
    cursor:pointer;
    font-size:1rem;
}

.fullpage_box .pricing > div.box{
    color: #fff;
    border-radius: 1rem;
    border: 0.5rem solid rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    max-width: 17rem;
    background: #008b8b;
    flex: 0 0 calc(20% - 1rem);
    min-width: 10rem;
}
.fullpage_box .pricing > div.box.two{
        background:#008000;
}
.fullpage_box .pricing > div.box.three{
    background:#3461a5;
}
.fullpage_box .pricing > div.box.four{
    background:#800070;
}
.fullpage_box .pricing > div.box.five{
    background:#a16822;
}
@media only screen and (max-width: 1100px){
    .fullpage_box .pricing > div.box{
        flex: 1 1 calc(33% - 4rem);
        max-width: 50%;
        margin: 2rem;
    }
}

@media only screen and (max-width: 640px){
    .fullpage_box .pricing > div.box{        
        max-width: 100%;        
    } 
}


.fullpage_box .pricing > div.box .box_title{
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
    height: 3rem;
    margin-top: 1rem;
}
.fullpage_box .pricing > div.box .box_price{
    text-align: center;
    display: flex;
    flex-direction: column;
    font-size: .875rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}
.fullpage_box .pricing > div.box .box_price span.price{
    display: block;
    text-align: center;
    font-size: 3rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
    line-height: 3rem;
}

.fullpage_box .pricing > div.box .box_price span.clicky{
    font-size: 1rem;
    color: #f5fcc2;
    background: rgba(0,0,0,.2);
    border: 3px solid rgba(0,0,0,0.2);
    border-radius: 2rem;
    margin-top: 2.5rem;
    line-height: 3rem;
    font-weight: 800;
    visibility: hidden;
    height: 1rem;
    overflow: hidden;
}

.fullpage_box .pricing > div.box .container {          
    position: relative;
    color:#1a1a1a;
    font-weight:600;
   }
   .fullpage_box .pricing > div.box .container::before {
    white-space:nowrap;
    content: attr(data-ribbon);
    font-size:1rem;            
    position: absolute;
    letter-spacing:-0.08rem;
    top: -1.5rem;
    right: -1.5rem;
    transform: translate(29.29%, -100%) rotate(45deg);
    transform-origin: bottom left;
    padding: 0.6rem 2rem calc(0.6rem + 5px);
    border:0px solid #ffffff;
    background: linear-gradient(rgba(0,0,0,0.5) 0 0) bottom/100% 6px no-repeat #d4af37;
    /* II : clipping */
    clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - 6px) calc(100% - 6px),6px calc(100% - 6px) , 0 100%);
    /* III : masking */
    -webkit-mask: 
        linear-gradient( 135deg, transparent calc(50% - 6px *0.707),#fff 0) bottom left,
        linear-gradient(-135deg, transparent calc(50% - 6px *0.707),#fff 0) bottom right;
    -webkit-mask-size:300vmax 300vmax;
    -webkit-mask-composite: destination-in, xor;
     mask-composite: intersect;
     z-index:99;
  }