html.fsvs #fsvs-pagination
{
  right:0px !important;
  top: 82% !important;
}
html.fsvs #fsvs-pagination li
{
  width:8px !important;
  height:8px !important;
  margin: 0 0 10px 0 !important;
}
html.fsvs #fsvs-pagination li > span
{
  width:8px !important;
  height:8px !important;
}
    #f1
    {
         color:#262955;
         font-weight:800;

         text-align: center !important;
         line-height: 30px;
      width:100%;
            top:22vh ;
    }
    #f2
    {
             color:#ff4959;
             font-weight:800;

             text-align: center !important;
             line-height: 30px;
          width:100%;
                top:22vh ;
    }
    #f3
    {
        color:#3bbde0;
        font-weight:800;

        text-align: center !important;
        line-height: 30px;
     width:100%;
           top:22vh ;
    }
      #f4
    {
        font-weight:800;
           font-size:0.36em ;
        text-align: center !important;
        line-height: 40px;
     width:100%;
           top:30vh ;

  top: 64vh;

    }
    #f44
    {
        font-weight:400;
           font-size:0.46em ;
        text-align: center !important;
    }
    #f44b
    {

           font-size:0.46em ;
        text-align: center !important;
    }
        #fl
    {
        font-weight:300;

    }
                .fadeintop
                {

                  font-size:0.238em;
                  position: absolute;

                }
                .fadeintop2
                {
                  opacity:0;
                transform: translateY(100px);

                    transition: transform 1.3s ease;
                            -webkit-animation: frise 1.3s linear;
                                -webkit-animation-fill-mode:both;


                }
                @-webkit-keyframes frise
         {
          0% {transform: translateY(50px);  }
     100% {transform: translateY(0px);
             opacity: 1}
         }

.bullon
        {
                      -webkit-animation: bullon 4s linear;
    -moz-animation: bullon 4s linear;
            -webkit-animation-fill-mode:both
        }

.sun
        {
              -webkit-animation: sunrise 4s linear;
    -moz-animation: sunrise 4s linear;
            -webkit-animation-fill-mode:both

        }
        .letter
                {
                        -webkit-animation: letter 4s linear;
            -moz-animation: letter 4s linear;
                    -webkit-animation-fill-mode:both
                }
           @-webkit-keyframes sunrise
        {
       0% { top:80%;  }
    100% { top:65%;  }
        }

             @-webkit-keyframes bullon
        {
            0% {top:27%}
            100%{top:15%}

        }
        @-webkit-keyframes letter
  {
      0% {top:20%}
      50%{top:15%}
           70%{top:21%}
            100%{top:16%}

  }





.menu-back.open
{
  display: block;
  transition:display 4s;
  -webkit-transition:display 4s;
}

    @-webkit-keyframes slide-down {
      0% { opacity: 0;  }
    100% { opacity: 1;  }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; }
    100% { opacity: 1; }
}
    #on
    {
           -webkit-animation: slide-down .5s ease-out;
    -moz-animation: slide-down .5s ease-out;
    }
    #off
    {

    }
.menu-on
    {
        left:90%;
        position:fixed;
        z-index:999;
    }
    .menu-off
    {
        left:90%;
        position:fixed;
        z-index:999;
        display: none;
    }

    .menu-back.open
    {
      display: block;

      left:0%;
      width:100%;
      transition:all 0.8s;
      -webkit-transition:all 0.8s ;
          opacity: 1;
    }

  .menu-back{
    position:fixed;

    top:0%;
    left:0%;
    z-index:997;
      width:100%;
    height:100%;

    background-image:url(./assets/image/menuback.jpg);
    background-size:cover;
    -webkit-filter: grayscale(100%);
    filter: gray;
  /*  display: none;*/
    transition:all 0.8s;
    -webkit-transition:all 0.8s;
    opacity: 0.1;
    left:100%;
    }

    .menu{
    position:fixed;
    top:0px;
    left:0px;
    z-index:998;
    width:100%;
    height:100%;
      background: transparent;
    background:black;
    background-size:cover;
    transition:all 0.8s;
    -webkit-transition:all 0.8s;
    opacity: 0.7;
    }
@media screen and (max-width: 424px)
{
main > section:nth-child(1) {
background-image: url(../image/mb1.png);
background-size: cover;
}

main > section:nth-child(2) {
background-image: url(../image/mb2.png);
background-size: cover;
}

main > section:nth-child(3) {
background-image: url(../image/mb3.png);
background-size: cover;
}

main > section:nth-child(4) {
background-image: url(../image/mb4.png);
background-size: cover;
}

main > section:nth-child(5) {
background-image: url(.../image/mb5.png);
background-size: cover;
}
        }

        @media screen and (min-width: 425px)
{
main > section:nth-child(1) {
background-image: url(../image/slide/mb1-1.png);
background-size: cover;

}

main > section:nth-child(2) {
background-image: url(../image/slide/mb1-2.png);
background-size: cover;

}

main > section:nth-child(3) {
background-image: url(../image/slide/mb1-3.png);
background-size: cover;

}

main > section:nth-child(4) {
background-image: url(../image/slide/mb1-4.png);
background-size: contain;
    background-position-x: 0px;
    background-position-y: 45px;
}

main > section:nth-child(5) {
background-image: url(../image/slide/mb1-5.png);
background-size: contain;
    background-position-x: 0px;
    background-position-y: 45px;
}
        }
main > section {
  padding: 30px;
  box-sizing: border-box;
  color: black;
  font-size: 90px;
  font-weight: bold;
}

/* -----------------------------------------------------
 for fsvs
----------------------------------------------------- */
html.fsvs {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

html.fsvs #fsvs-body {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

html.fsvs #fsvs-body > * {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

/* -----------------------------------------------------
 pagenation
----------------------------------------------------- */
html.fsvs #fsvs-pagination {
  width: 32px;
  height: auto;
  padding: 8px 4px;
  margin: 0;
  position: fixed;
  right: -100px;
  top: 50%;
  z-index: 999;
}

html.fsvs #fsvs-pagination li {
  width: 25px;
  height: 25px;
  margin: 0 0 2px 0;
  line-height: 25px;
  text-align: center;
  cursor: pointer;
}

html.fsvs #fsvs-pagination li > span {
  width: 22px;
  height: 22px;
  display: block;
  line-height: 22px;
  border-radius: 100%;
  border: 1px solid black;
}

html.fsvs #fsvs-pagination li > span > span {
  width: 12px;
  height: 12px;
  margin: 4px;
  display: block;
  line-height: 12px;
  border-radius: 100%;
  border: 1px solid black;
}

html.fsvs #fsvs-pagination li.active > span {
  border: 1px dashed black;
}

html.fsvs #fsvs-pagination li.active > span > span {
  background: black;
}

html.fsvs #fsvs-pagination li:last-child {
  margin: 0;
}

/* -----
SVG Icons - svgicons.sparkk.fr
----- */
.svg-icon {
  width: 1em;
  height: 1em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #000;
}

.svg-icon circle {
  stroke: #000;
  stroke-width: 1;
}

ul {
  list-style: none;
}

.main {
  height: 100%;
  width: 100%;
}

.page {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.page h1 {
  font-size: 43px;
  padding: 0;
  margin: 0;
}
.page p {
  font-size: 14px;
}

.set {
  display: flex;
  justify-content: center; 
  align-items: center;
  padding: 60px;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.icon {
  width: 60px;
  height: 60px;
  padding: 20px;
}
.icon svg {
  width: 100%;
  height: 100%;
}