Div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,Helvetica,sans-serif;margin:0;-webkit-animation-duration:.1s;-webkit-animation-name:fontfix;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:linear;-webkit-animation-delay:.1s;text-align:center}img{border:0}html{scroll-behavior:smooth} 


.try{letter-spacing:2px;font-weight:700;  line-height:42px}.ctr a{color:#fff;text-decoration:none!important}.ctr{margin:25px auto}
.try{background-color:#2e8b57;box-shadow:9px 9px 10px 0 #333;cursor:pointer;padding:30px 0;width:450px;display:inline-block;margin:auto;border:2px solid #000}
.try a,.try a:active,.try a:visited{color:#fff}.sp:hover,.try:hover{background-color:#0064fb}  
.sp {background-color: #50164a!important}

.ld{width:800px!important;height:auto!important}.app {width:800px!important; height:auto!important}



#video {margin: 0 auto; width:1000px } 

.ad{ background-color:#002060;padding: 500px  0 ; margin: -250px 0}.ad img{ height:auto; width: 1100px!important} .nunn {border: 2px black solid; width:700px!important; height:auto}
 
h1 strong,.vi, h2{font-size:36px}  h1{ font-weight:normal;  margin:0 0 25px 0}    h1 b, h1 strong{color: black}   h1 b  {font-size:48px} h1 span  {font-size:22px; color:#444} 

h1, .try {	 font-size:32px }
 
 

h2 {color:yellow;text-shadow:1px 2px 0 #000; margin:125px 0 75px 0}
 
 
h1,h2,.accordion {	 line-height:2}

 



.dos {	background-color:black; padding:200px 0 50px 0; margin-top:-80px}

.vi, .vi b, h1{color:#50164a}

 


.yf {	font-size:56px!important; line-height:1.75; margin-left:-20px}
 


.accordion{margin:250px 0 25px 0;  cursor: pointer;      letter-spacing:2px; background:none; border:none}  .accordion b:hover {color: seagreen}.accordion b {color:#369;font-size:72px;border-bottom:5px gray dotted; line-height:1.25}
.active,.active b,.active span, .active strong {color:white!important; font-size:1px!important}.active b {border-bottom:0px}.active{	margin-top:100px}

.panel {background-color: white;  max-height: 0;  overflow: hidden;   transition: max-height 2.5s ease-out; margin: 0px}
.accordion span {	color: #369;font-size:42px}
.accordion strong {	 font-size:56px }

 .accordion {	 font-size:36px }

.accordion strong,.accordion {	color: #444; font-weight:600}

#CARD{margin:10px  0}#CARD a{color:grey;font-size:14px} 


.green,.greenbox,.greenflc{background-color:#004038}
.green{padding:400px 0 0 0 ;margin:-150px 0 0 0}
.greenflc {	padding-bottom:75px; margin-top:125px}

 
 @media screen and (max-width:699px){
 .green{padding:250px 0 0 0 ;margin:-100px 0 0px  0}


 h1 span  {font-size:18px} 


h1,.try span,.vi,.accordion {font-size: 24px}

 .accordion span,h1 strong,.why b,h2,.try{font-size: 28px}     h1 b,.accordion strong {font-size:32px}

.accordion b {font-size:48px; line-height:1.25}

.yf {	font-size:56px!important;  margin-left:0px}


.dos { padding:125px 0 50px 0; margin-top:-25px}

h2 { margin:75px 0 25px 0 }


.nunn {	border: none}

.ada { background: linear-gradient( to right,     #002060 0%,   #002060 50.2%,     #FBFBC4 50%,    #FBFBC4 100%  ); padding:250px 0 100px 0}
.adb { background: linear-gradient( to right,     #FBFBC4 0%,   #FBFBC4 50.2%,     #002060 50%,    #002060 100%  ); padding:100px  0 250px 0}



#video{width:100%} .width{width:100%} .try span{word-spacing:0px} .try{line-height:40px;max-width:290px;padding:25px 0}


#library{width:100%;background-color:#004038;padding:0 5% 0 5%}


}


@media (min-width:599px) and (max-width:998px){
.ada { background: linear-gradient( to right,     #002060 0%,   #002060 50.2%,     #FBFBC4 50%,    #FBFBC4 100%  ); padding:500px 0 100px 0; margin-top:-250px} 
.adb { background: linear-gradient( to right,     #FBFBC4 0%,   #FBFBC4 50.2%,     #002060 50%,    #002060 100%  ); padding:100px  0 500px 0; margin-bottom:-250px}.ada img, .adb img { height: auto; width:500px}
 

}



@media (min-width:451px) and (max-width:699px){.try{width:70%}}
@media (min-width:700px) and (max-width:998px){#video{width:100%}   }


@media screen and (max-width:349px){  #CARD a{font-size: 14px} .sp{max-width:300px!important; font-size:28px!important}  h1 span {font-size: 16px} }
@media screen and (max-width:450px){.lap{display:none}}@media screen and (min-width:451px){.dev{display:none}}
@media (min-width: 700px) and (max-width:1099px){    .ad img, .four img { height:auto; width: 90%}}
@media (min-width: 999px) and (max-width:1199px){    .ad img  { height:auto; width: 90%!important}}
@media screen and (min-width:1001px){.swipe{display:none}}@media screen and (max-width:1000px){.click{display:none} }
@media screen and (max-width:1040px){img{max-width:100%;height:auto}}
@media screen and (max-width:598px){.ld{display:none}.t{display:none}}
@media (min-width:599px) and (max-width:1281px){.ld{display:none}.m{display:none}}@media (min-width:599px) and (max-width:1598px){.x{display:none}}
@media screen and (min-width:1282px){.m{display:none}.t{display:none}}
@media screen and (min-width:1599px){.x{display:none}.ld,.app{width:1000px!important;height:auto!important} #video{width:1200px} }
@media screen and (max-width:999px){.ad{display:none} }
@media screen and (min-width:1000px){.else{display:none}}