#f1
        {
             color:#262955;
        }
        #f2
        {
                 color:#ff4959;
        }
        #f3
        {
            color:#3bbde0;
            top:42vh !important;
        }
          #f4
        {
            font-weight:800;
            font-size:0.5em ;
            text-align: center !important;
            line-height: 60px;
         width:100%;
            margin-left:-10%;

    top: 62vh;

        }
        #f5b
        {
                  font-size:0.7em ;
        }
        #f44
        {
            font-weight:400;
               font-size:0.53em ;
            text-align: center !important;
        }
            #f44b
        {
            font-weight:800;
               font-size:0.53em ;
        }

        @media screen and (min-width:600px) and (max-width:1350px)
        {
                #f4
        {
            font-weight:800;
            font-size:0.4em ;
            text-align: center !important;
            line-height: 60px;
         width:100%;
            margin-left:-10%;

    top: 50vh;

        }
        #f44
        {
            font-weight:400;
               font-size:0.43em ;
            text-align: center !important;
        }
            #f44b
        {
            font-weight:800;
               font-size:0.43em ;
        }
            .fadeintop
{
  opacity:0;
transform: translateY(100px);
  max-width:100%;
    transition: transform 1s ease;
            -webkit-animation: frise 1s linear;
                -webkit-animation-fill-mode:both;
    top:45vh !important;
    font-size:0.3em !important;
    left:13% !important;

}
.fadeintop2
{
opacity:0;
transform: translateY(100px);
max-width:100%;
transition: transform 1s ease;
-webkit-animation: frise 1s linear;
    -webkit-animation-fill-mode:both;
top:70vh !important;
font-size:0.3em !important;
left:13% !important;

}

        }


.fadeintop
{
  opacity:0;
transform: translateY(100px);
  max-width:100%;
    transition: transform 1s ease;
            -webkit-animation: frise 1s linear;
                -webkit-animation-fill-mode:both;
    top:45vh;
    font-size:0.4em ;
    left:14%;
    position: absolute;
    text-align: right;
}

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

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


}

.fadeintop2
{
  opacity:0;
transform: translateY(100px);
  max-width:100%;
    transition: transform 1s ease;
            -webkit-animation: frise 1s linear;
                -webkit-animation-fill-mode:both;
    top:70vh;
    font-size:0.4em ;
    left:14%;
    position: absolute;
    text-align: right;
}
               @-webkit-keyframes frise
        {
         0% {transform: translateY(50px);  }
    100% {transform: translateY(0px);
            opacity: 1}
        }


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

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

        }
           @-webkit-keyframes sunrise
        {
         0% { top:47vh;  }
    100% { top:35vh;  }
        }

             @-webkit-keyframes bullon
        {
            0% {top:30vh}
            100%{top:25vh}

        }
              @-webkit-keyframes letter
        {
            0% {top:27vh}
            50%{top:22vh}
                 70%{top:26vh}
                  100%{top:22vh}

        }


.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(../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;
    }

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

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

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

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

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

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: 996;
}

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%;
}