:root{
    /* raceGet color manage  */

    --rgOne: #00bc7d;
    --rgTwo: #008061;
    --rgThree: #014e3f;

    /* miomio color manage  */
    
    --mmOne: #ed7800;
    --mmTwo: #b0c922;
    --mmThree: #0071bc;

    /* codingMoth color manage  */
    
    --cmOne: #7e2022;
    --cmTwo: #c5c5c4;
    --cmThree: #540a0e; 

    /* theme color manage  */
    
    --vintageLight: #f9e6ad;
    --vintageDark: #1a1a1a;

    --light: #e3ded4;
    --dark: #0d253d;

    /* breakpoints manage */

    --breakXs: '0px';
    --breakSm: '576px';
    --breakMd: '768px';
    --breakLg: '992px';
    --breakXl: '1200px';
    --breakXxl: '1400px';

    --paddingSection: 5rem 2rem; 
        /* font manage */
    font-size: 10px;
    font-family: 'Ropa Sans', sans-serif;
}
html {
    position: fixed;
    height: 100%;
    overflow: hidden;
  }
  
  body {
    margin: 0;
    width: 100vw; 
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
.row{
    background-image: url("src/img/patternVintage.png");
    background-repeat:  repeat;
    background-position: left;
}

.row.mio{
    background-image: url("src/img/patternNotVintage.png")!important;
}

@media only screen and (min-width: 1200px)  {
    .solution, .heroPoints, .case, .tuned, .mio, .moth, .footer{
        padding: 5vh 20vh!important;
    }
}

/* hero section */

.heroSection{
    position: relative;
    background-color: var(--rgThree);
    color: var(--light);
    padding: 0px;
    height: 65vh;
    
    display:flex;
    justify-content: center;
}
.heroSection:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100.5%;
    background: transparent;
    border-top: 2rem solid var(--vintageLight);
    border-left: 2rem solid var(--vintageLight);
    border-right: 2rem solid var(--vintageLight);
    background: linear-gradient(180deg, transparent 0%, var(--rgTwo) 100%);
    z-index:0;
    transform: translate(-50%,-50%);
    top: 50%;
    left:50%;
}
.heroSection:after{
    position: absolute;
    content: url("src/img/divider.svg");
    width: 100%;
    height: auto;
    transform: translate(-50%,-50%);
    bottom: -20%;
    left:50%;
}
.heroSection img{
    margin-top: 0;
    width: auto;
    height: 80vh;
    position: absolute;
    transform: translate(-50%,-50%);
    top:60%;
    left:50%;
    z-index:99;
}

.logoSection .logo{
    position: relative;
    background-color: var(--vintageLight);
    color: var(--light);
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}


.logoSection .logo img{
width: auto;
max-height: 10rem;
z-index: 100;
}

@media only screen and (max-width: 992px)  {
    .heroSection img{
        height: 80vh;
        transform: translate(-50%,-50%);
        top:60%;
        left:50%;
        }    
}

@media only screen and (max-width: 850px)  {
    .heroSection img{
        height: 80vh;
        transform: translate(-50%,-50%);
        top:55%;
        left:50%;
        }    
}

@media only screen and (max-width: 768px)  {
    .heroSection img{
        height: 80vh;
        transform: translate(-50%,-50%);
        top:55%;
        left:50%;
        }
        .heroSection{
            height: 60vh;
            overflow:hidden;
        }
        .logoSection .logo{
            height: 10vh;
        }
        .logoSection .logo img{
            max-height: 6rem;
        }
}
@media only screen and (max-width: 634px)  {

        .heroSection{
            height: 50vh;
        }
        .logoSection .logo img{
            max-height: 5rem;
        }
}
@media only screen and (max-width: 576px)  {
    .heroSection img{
        width: 120vw!important;
        height: auto!important;
        transform: translate(-50%,-50%);
        top:55%;
        left:50%;
        }
        .logoSection .logo img{
            
            max-height: 4rem;
        }
}


/* heroPoints section */

.heroPoints{
    background-color: var(--rgTwo);
    color: var(--light);
    padding: var(--paddingSection);
}
.heroPoint{
    height: 30vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    margin: 0;
}

.heroPoints .containerIcon{
    position: relative;
    border-radius: 50%;
    padding: 2rem;
}
.heroPoints .containerIcon::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translate(-50%,-50%);
    top: 0%;
    left:0%;
    border: dashed var(--light) 4px;
    border-radius: 50%;
    -webkit-animation: rotating 10s linear infinite;
    -moz-animation: rotating 10s linear infinite;
    -ms-animation: rotating 10s linear infinite;
    -o-animation: rotating 10s linear infinite;
    animation: rotating 10s linear infinite;
}
.heroPoints img{
    height: 75px;
    width: 75px;
}
.heroPoints h2{
    padding: 1.5rem;
    font-weight: 900;
}
@media only screen and (max-width: 768px)  {
    .heroPoint{
        height: 20vh;
    }
    .heroPoints .containerIcon{
        /*padding: 3.5rem;*/
    }
    .heroPoints img{
        height: 70px;
        width: 70px;
    }
    .heroPoints h2{
        padding: 2rem;
        font-weight: 900;
    }
    .heroPoints .containerIcon::after{
        border: dashed var(--vintageLight) 3px;
    }
}

/* solution section */

.solution{
    background-color: var(--rgThree);
    color: var(--light);
    padding: var(--paddingSection);
}
.solution .solutionTitle{
    display:flex;
    align-items: center;
    justify-content: right;
    padding: 2rem;
    font-size: 4rem;
    font-weight: 800;
    line-height: 4rem;
}

.solution .solutionContent{
    display:flex;
    align-items: center;
    justify-content: left;
    padding: 3rem 2rem;
    font-size: 2rem;
}
.solution .solutionContent span{
    color: var(--rgOne);
    font-weight: 900;
}


@media only screen and (max-width: 768px)  {
    .solution .solutionTitle{
        display:flex;
        justify-content: left;
        padding: 2rem 2rem 1rem 2rem;
        font-size: 6rem;
        font-weight: 800;
        line-height: 5rem;
    }
    .solution .solutionContent{
        display:flex;
        align-items: flex-start;
        justify-content: left;
        padding: 0rem 2rem 3rem 2rem; 
    }
    .solution .solutionContent h2{
        line-height: 3rem;
    }
}

/* strength section */
.strength{
    display: flex;
    flex-direction: row-reverse;
    background-color: var(--vintageLight);
    color: var(--dark);
    padding: var(--paddingSection);
}
.strength .strengthTitle{
    display:flex;
    align-items: center;
    justify-content: left;
    padding: 2rem;
    font-size: 4rem;
    font-weight: 800;
    line-height: 4rem;
}

.strength .strengthTable{
    overflow: hidden;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 7rem 7rem;
    justify-content: stretch;
    align-items: center;
    padding: 0;
    border: 1px solid var(--dark);
}
.strength .strengthTable .strengthIcon{
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 1rem;
}
.strength .strengthTable .strengthIcon img{
    filter: invert(28%) sepia(71%) saturate(1961%) hue-rotate(146deg) brightness(90%) contrast(102%);
    transition: all .3s ease-in-out;
}

.strength .strengthTable .strengthIcon:nth-child(n){
    transition: all .3s ease-in-out;
}
.strength .strengthTable .strengthIcon:nth-child(n):hover{
    background-color: var(--dark);
    color: var(--light);
    transition: all .5s ease-in-out;
}
.strength .strengthTable .strengthIcon:nth-child(n):hover img{
    filter: invert(100%) sepia(28%) saturate(588%) hue-rotate(312deg) brightness(92%) contrast(93%);
    transition: all .3s ease-in-out;
}
.strength .strengthTable .strengthIcon:nth-child(1){
    border-right: 1px solid var(--dark);
}
.strength .strengthTable .strengthIcon:nth-child(3){
    border-right: 1px solid var(--dark);
}
.strength .strengthTable .strengthIcon:nth-child(3){
    border-top: 1px solid var(--dark);
}
.strength .strengthTable .strengthIcon:nth-child(4){
    border-top: 1px solid var(--dark);
}
.strength .strengthTable .strengthIcon img{
    width: 50px;
    height: 50px;
}
.strength .strengthTable .strengthIcon p{
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 2rem;
}
.strength .strengthTable .strengthIcon p span{
    color: var(--rgTwo);
    font-weight: 900;
 }
@media only screen and (max-width: 768px)  {
    .strength .strengthTitle{
        display:flex;
        justify-content: left;
        padding: 2rem 2rem 1rem 2rem;
        font-size: 6rem;
        font-weight: 800;
        line-height: 5rem;
    }
    .strength .strengthTable{
        display:grid;
        grid-template-columns: 1fr ;
        grid-template-rows: 9rem 9rem 9rem 9rem;
    }
    .strength .strengthTable .strengthIcon{
        justify-content: left;
        padding: 2% 2% 2% 4%;
        border-right: 0px;
    }
    .strength .strengthTable .strengthIcon p{
       font-size: 2rem;
       padding-left: 2%;
       margin-bottom: 0;
    }
    .strength .strengthTable .strengthIcon p span{
        color: var(--rgTwo);
        font-weight: 900;
     }
    .strength .strengthTable .strengthIcon:nth-child(1){
        border-right: 0px;
    }
    .strength .strengthTable .strengthIcon:nth-child(2){
        border-top: 1px solid var(--dark);
    }
    .strength .strengthTable .strengthIcon:nth-child(3){
        border-right: 0px;
    }
    .strength .strengthTable .strengthIcon:nth-child(n):hover{
        background-color: var(--vintageLight);
        color: var(--dark);    
    }
    .strength .strengthTable .strengthIcon:nth-child(n):hover img{
        filter: invert(28%) sepia(71%) saturate(1961%) hue-rotate(146deg) brightness(90%) contrast(102%);
    }}

/* case use section */

.case{
    display: flex;
    flex-direction: row;
    background-color: var(--rgTwo);
    color: var(--light);
    padding: var(--paddingSection);
}
.case .caseTitle{
    display:flex;
    align-items: center;
    justify-content: right;
    padding: 4rem;
    font-size: 4rem;
    font-weight: 800;
    line-height: 4rem;
}

.case .caseTable{
    overflow: hidden;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 7rem 7rem;
    justify-content: stretch;
    align-items: center;
    padding: 0;
    border: 1px solid var(--dark);
}
.case .caseTable .caseIcon{
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 1rem;
}
.case .caseTable .caseIcon img{
    filter: invert(100%) sepia(28%) saturate(588%) hue-rotate(312deg) brightness(92%) contrast(93%);
}
.case .caseTable .caseIcon:nth-child(n){
    transition: all .3s ease-in-out;
}
.case .caseTable .caseIcon:nth-child(n):hover{
    background-color: var(--dark);
    color: var(--dark);
    transition: all .5s ease-in-out;
}
.case .caseTable .caseIcon:nth-child(1){
    border-right: 1px solid var(--dark);
}
.case .caseTable .caseIcon:nth-child(3){
    border-right: 1px solid var(--dark);
}
.case .caseTable .caseIcon:nth-child(5){
    border-right: 1px solid var(--dark);
}
.case .caseTable .caseIcon:nth-child(3){
    border-top: 1px solid var(--dark);
}
.case .caseTable .caseIcon:nth-child(4){
    border-top: 1px solid var(--dark);
}
.case .caseTable .caseIcon:nth-child(5){
    border-top: 1px solid var(--dark);
}
.case .caseTable .caseIcon:nth-child(6){
    border-top: 1px solid var(--dark);
}
.case .caseTable .caseIcon img{
    width: 50px;
    height: 50px;
}
.case .caseTable .caseIcon p{
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 2rem;
    text-transform: uppercase;
    color: var(--light);
}
@media only screen and (max-width: 768px)  {
    .case .caseTitle{
        display:flex;
        justify-content: left;
        padding: 2rem 2rem 1rem 2rem;
        font-size: 6rem;
        font-weight: 800;
        line-height: 5rem;
    }
    .case .caseTable{
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 9rem 9rem 9rem 9rem 9rem 9rem;
        align-items: center;
        align-self: center;
        align-content: center;
    }
    .case .caseTable .caseIcon{
        justify-content: left;
        padding: 2% 2% 2% 4%;
        border-right: 0px;
    }
    .case .caseTable .caseIcon p{
       font-size: 2.5rem;
       padding-left: 2%;
       margin-bottom: 0;
       text-transform: uppercase;
       color: var(--light)
    }
    .case .caseTable .caseIcon p span{
        color: var(--rgTwo);
        font-weight: 900;
     }
    .case .caseTable .caseIcon:nth-child(1){
        border-right: 0px;
    }
    .case .caseTable .caseIcon:nth-child(2){
        border-top: 1px solid var(--dark);
    }
    .case .caseTable .caseIcon:nth-child(3){
        border-right: 0px;
    }
    .case .caseTable .caseIcon:nth-child(5){
        border-right: 0px;
    }

}
/* tuned section */
.tuned{
    background-color: var(--vintageLight);
    display: flex;
    flex-direction: row;
    color: var(--dark);
    padding: var(--paddingSection);
}
.tuned .tunedTitle{
    display:flex;
    align-items: center;
    font-size: 4rem;
    font-weight: 800;
    line-height: 4rem;
    padding: 4rem;
    justify-content: flex-end;
}
.tuned .tunedContent {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tuned .tunedContent .contentContainer{
    position: relative;
    background: var(--light);
    border-radius: 2rem;
    padding: 3rem 3rem;
    border: 4px dashed var(--dark);
}
.tuned .tunedContent .contentContainer:after{
    content: url("src/icon/scissor.png");
    position: absolute;
    transform: translate(-50%,-50%);
    top: 0%;
    left: 22%;
}
.tuned .tunedContent .contentContainer:before{
    content: url("src/icon/scissor.png");
    position: absolute;
    transform: translate(-50%,-50%);
    top: 91%;
    left: 80%;
    transform: rotate(180deg);
}
.tuned .tunedContent .contentContainer .newsletter input{
    width: 100%;
    padding: 1rem 1rem;
    background: white;
    height: 3rem;
    border-radius: 2rem;
    border: 0px;
    margin: 2rem 0;
}
.tuned .tunedContent .contentContainer .newsletter .btn{
    background-color: var(--rgThree);
    color: var(--light);
    text-transform: uppercase;
    border-radius: 3rem;
    padding: .8rem 1.3rem;
    transition: all .5s ease-in-out;
}
.tuned .tunedContent .contentContainer .newsletter .btn:hover{
    background-color: var(--rgTwo);
    color: var(--light);
    font-weight: 600;
    transform: scale(1.2);
    transition: all .5s ease-in-out;
}

@media only screen and (max-width: 768px)  {
    .tuned .tunedTitle{
        display:flex;
        justify-content: flex-start;
        padding: 2rem 2rem 1rem 2rem;
        font-size: 6rem;
        font-weight: 800;
        line-height: 5rem;
    }
}
/* mio section */

.mio{
    background-color: var(--mmThree);
    display: flex;
    flex-direction: row;
    color: var(--dark);
    padding: var(--paddingSection);
}
.mio .mioContent{
    display: flex;
    justify-content: center;
    align-items: center;
}
.mio .mioContent .contentContainer{
    font-size: 2rem;
    font-weight: 300;
}
.mio .mioContent .contentContainer p{
    width: 95%;
}
.mio .mioContent .contentContainer span{
    font-size: 2rem;
    font-weight: 700;
    color: var(--mmThree);
}
.mio .mioTitle{
    display: flex;
    justify-content: end;
    align-items: center;
    margin-right: 2rem;
}
.mio .mioTitle .imgDesktop img{
    width: 150px;
}
.mio .mioTitle .imgMobile img{
    width: 70%;
}
.btn{
    overflow: hidden;
    position: relative;
    background-color: var(--mmThree);
    color: var(--light);
    text-transform: uppercase;
    border-radius: 3rem;
    padding: .8rem 1.3rem;
    transition: all .5s ease-in-out;
}
.btn:hover{
    background-color: var(--mmTwo);
    color: var(--mmThree);
    font-weight: 600;
    transform: scale(1.2);
    transition: all .5s ease-in-out;
}
.btnMio:after{
    content: '';
    position: absolute;
    width: 20%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: skew(-35deg) translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(1rem);
    filter: blur(.2rem);
    -webkit-animation: rightLeft 1.5s linear infinite;
    -moz-animation: rightLeft 1.5s linear infinite;
    -ms-animation: rightLeft 1.5s linear infinite;
    -o-animation: rightLeft 1.5s linear infinite;
    animation: rightLeft 1.5s linear infinite;
}
.btnMio:before{
    content: '';
    position: absolute;
    width: 10%;
    height: 100%;
    top: 50%;
    left: 80%;
    transform: skew(-35deg) translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(1rem);
    filter: blur(.2rem);
    z-index: 66;
    animation-delay: 1s;
    -webkit-animation: rightLeft 2s linear infinite;
    -moz-animation: rightLeft 2s  linear infinite;
    -ms-animation: rightLeft 2s  linear infinite;
    -o-animation: rightLeft 2s  linear infinite;
    animation: rightLeft 2s linear infinite;
}
.mio .contentContainer{
    position: relative;
    background-color: var(--light);
    border-radius: 1.5rem;
    padding: 3rem;
}
.mio .contentContainer:after{
    position: absolute;
    content: url("src/img/device.png");
    transform: translate(-50%, -50%);
    top:50%;
    left: 95%;
    width: 400px;
    height: 400px;
    z-index:666
}
@media only screen and (max-width: 768px)  {
    .mio .mioTitle{
        margin: 0 0 3rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mio .contentContainer:after{
        top:60%;
        left: 87%;
    }
}
@media only screen and (max-width: 768px)  {
    .mio .contentContainer:after{
        top:60%;
        left: 95%;
    }
}
/* coding section */

.moth{
    background-color: var(--cmOne);
    display: flex;
    flex-direction: row;
    color: var(--white);
    padding: var(--paddingSection);
}

.moth .mothContent{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.moth .mothContent .contentContainer{
    font-size: 3rem;
    font-weight: 200;
    color: var(--light);
}
.moth .mothContent .sx{
    align-items: flex-end;
    letter-spacing: .1rem;
}
.moth .mothContent .cx img{
    width: 13rem;
    margin: 0 2rem;
}
.moth .mothContent .dx{
    align-items: flex-start;
    letter-spacing: .3rem;
}
@media only screen and (max-width: 768px)  {
    .moth .mothLogo{
        position: relative;
        height: 7vh;
    }
    .moth .mothLogo img{
        position: absolute;
        transform: translate(-50%,-50%);
        top: -15%;
        left: 50%;
        width: 25%;
    }
    .moth .mothContent{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .moth .mothContent .sx{
        align-items: center;
        letter-spacing: .3rem;
    }
    .moth .mothContent .dx{
        align-items: center;
        letter-spacing: .3rem;
    }
}
/* footer section */
.footer{
    background-color: var(--vintageLight);
    display: flex;
    
    flex-direction: row;
    color: var(--dark);
    padding: var(--paddingSection);
}
.footer .dx, .footer .cx, .footer .sx{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    font-size: 2rem;
    padding: 1.5rem .7rem;
}
.footer .dx h2, .footer .cx h2, .footer .sx h2{
    font-size: 3rem;
    color: var(--cmOne);
}
.footer .info{
    font-size: 1.3rem;
    color: var(--cmThree);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-top: 1px solid var(--cmThree);
    max-width: 75rem;
}
.footer .info p{
    padding-top:2rem;
    margin-bottom: 0;
}
.footer a{
    text-decoration: underline;
    color: var(--cmOne);
    font-weight: 600;
    font-style: oblique;
    cursor: pointer;
}
/* animation */
@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
  }
  @keyframes rightLeft {
    from {
        left: 150%;
    }
    to {
        left: -150%;
    }
  }
  @keyframes heroTest {
	from {
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
	}
	70% {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
	to {
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
	}
	}
	.heroActive { animation: 1.5s heroTest infinite; }