@charset "UTF-8";
/* siren.css
    Copyright@takamitu hamada
    Version : 20210429
    License      :  BSD License
    Web site URL :  http://vsrx.work
*/
/* HTML5 */
    header,footer,article,section,nav,aside,hgroup{
        display:block;
    }
/*Image Preload*/
    #preload{
        width:0;
        height:0;
        display:inline;
    }
/*Browser Default Initialization*/
    body{
        width:100%;
        font-family:sans-serif,serif,monospace,"meiryo","MS PGothic","Arial","Arial Black";
        margin:0;
        padding:0;
        font-size:16px;
        font-height:16px;
        font-weight:bold;
        line-height:15pt;
        color:#000000;
        background-color:#cdcdcd;
        background-position:top center;
        background-repeat:no-repeat;
        background-attachment:fixed;
    }
    div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,iframe{
        margin: 0;
        padding: 0;
    }
    pre{
        width:100%;
        background-color:#494949;
        color:#ffffff;
        white-space:pre-wrap;
        white-space:-moz-pre-wrap !important;
        white-sapce:-pre-wrap;
        white-space:-o-prewrap;
        word-wrap:break-word;
    }
    p{
        width:100%;
        color:#ffffff;
        margin:0 auto 0 auto;
        padding:13px 2px 2px 2px;
    }
    a{
        text-decoration:none;
        color:#ff0000;
    }
    a:hover{
        color:#ff00d2;
    }
    address,caption,cite,code,dfn,em,strong,th,var{
        font-style: normal;
    }
    table{
        width:100%;
        height:300px;
        border-collapse: collapse;
        border-spacing: 0;
        border:1px solid #0000ff;
        background-color:#ffffff;
        color:#000000;
    }
    table caption{
        opacity:0.7;
        -moz-opacity:0.7;
        filter:alpha(opacity=70);
        background-color:#ffffff;
    }
    table col .colday{
        width:100px;
        height:50px;
    }
    table col .coldescription{
        width:495px;
        height:50px;
    }
    table caption{
        background-color:#ffffff;
    }
    table tr{
        width:595px;
        height:20px;
        border:1px solid #0000ff;
    }
    table td{
        border:1px solid #0000ff;
    }
    caption,th{
        text-align:left;
    }
    q:before ,q:after{
         content:'';
    }
    object, embed{
        vertical-align:top;
    }
    hr, legend{
        display: none;
    }
    h1,h2,h3,h4,h5,h6{
        font-size: 100%;
        color:#ffffff;
    }
    h1{
        width:100%;
        height:50px;
        background-repeat:no-repeat;
        font-size:15px;
        }
    h1#links{
        float:right;
        width:300px;
        height:20px;
        background-color:#000000;
    }
    h2{
        width:100%;
        height:30px;
        font-size:13pt;
        background-color:#d242d4;
        }
    h2 a{
        color:#ff0000;
        background-color:#ffffff;
        }
    h2 a:hover{
        color:#ffffff;
        background-color:#cdcdcd;
        }
    h3{
        width:100%;
        height:30px;
        font-size:12pt;
        background-color:#2989ff;
        }
    img,abbr,acronym,fieldset,iframe{
        border: 0;
    }
    li{
        list-style-type:none;
    }
/*responsive class*/
  body{
    width:100%;
    font-size:20px;
    line-height:1.15em;
    background-image:none;
    background-color:#000044;
  }
  .responsive{
          width:100%;
          height:35000px;
  }
  .responsive > header{
          width:100%;
          height:760px;
          padding:0;
          margin :0;
  }
  .responsive nav{
     width:100%;
     height:760px;
     text-align:center;
  }
  .responsive nav > ul{
     width:100%;
     height:760px;
  }
     .responsive nav ul{
      float:left;
      width:100%;
      height:80px;
      font-size:13pt;
      background-color:#000000;
      opacity:0.9;
    }
    .responsive nav ul li{
      float:left;
      width:100%;
      height:80px;
      transition:0.5s;
      background-color:#444444;
    }
  .responsive nav ul li a{
    width:100%;
    height:80px;
    color:#ffffff;
    display:block;
    }
    .responsive > footer{
            width:100%;
            height:80px;
            background-color:#ff0000;
            color:#ffffff;
            margin:0 auto;
            padding:0;
            font-size:11pt;
    }
    .responsive > footer > a{
            color:#cdcdcd;
    }
    .responsive > footer > a:hover{
            color:#00ff00;
    }
    .center_bottom{
        width:100%;
        height:34900px;
        margin:0;
        padding:0;
    }
    .center_bottom a{
      display:inline;
    }
   .item-0{
      float:left;
      width:100%;
      height:500px;
     margin:0;
     padding:0;
   }
    .item-1,.item-2{
     float:left;
     width:100%;
     height:1000px;
     margin:0;
     padding:0;
   }
    .item-3{
        float:left;
        width:100%;
        height:10000px;
        margin : 0;
        padding:0;
        color:#ffffff;
   }
    .item-4{
        float:left;
        width:100%;
        height:10000px;
        margin : 0;
        padding:0;
   }
@media screen and (min-width: 768px) {
    .responsive{
      width:100%;
      height:16000px;
      vertical-align:middle;
    }
    .responsive > header{
            width:100%;
            height:80px;
            padding:0;
            margin :0;
    }
    .responsive nav{
       float:right;
       width:1000px;
       height:80px;
       margin:0;
       padding:0;
       display:block;
    }
    .responsive li:nth-child(n+1) {
        margin-right: 5px;
    }
     .responsive nav ul{
      float:left;
      width:100%;
      height:80px;
      font-size:13pt;
      background-color:#000000;
      opacity:0.9;
    }
    .responsive nav ul li{
      float:left;
      width:100px;
      height:80px;
      transition:0.5s;
      background-color:#444444;
      vertical-align:middle;
    }
    .responsive nav  ul  li:hover{
           background-color:#ffffff;
           color:#ff0000;
    }
    .responsive nav ul li a{
    width:100%;
    height:80px;
    color:#ffffff;
    display:block;
    }
    .responsive nav  ul li  a:hover{
    width:100%;
    height:80px;
    color:#ff0000;
    display:block;
    }
    .responsive > footer{
            width:100%;
            height:80px;
            background-color:#ff0000;
            color:#ffffff;
            margin:0 auto;
            padding:0;
            font-size:11pt;
    }
    .responsive > footer > a{
            color:#cdcdcd;
    }
    .responsive > footer > a:hover{
            color:#00ff00;
    }
    .responsive > video{
            display:block;
    }
    .center_top{
        width:100%;
        height:600px;
        margin:0;
        padding:0;
    }
    .center_bottom{
        width:100%;
        height:15900px;
        margin:0;
        padding:0;
    }
    .center-bottom div > a{
        width:100%;
        height:80px;
        font-size:48pt;
        margin:0 24px 0 24px;
    }
    .item-0{
        width:100%;
        height:500px;
        margin : 0;
        padding:0;
    }
    .item-1,.item-2{
        width:100%;
        height:500px;
        margin : 0;
        padding:0;
        background-color:#494949;
   }
    .item-3{
        width:100%;
        height:8000px;
        margin : 0;
        padding:0;
        background-color:#494949;
        color:#ffffff;
   }
    .item-4{
        width:100%;
        height:9000px;
        margin : 0;
        padding:0;
        background-color:#494949;
        color:#ffffff;
   }
   .img_left{
      float:left;
      width:400px;
      height:400px;
  }
  .p_right{
      float:right;
      width:60%;
      height:500px;
  }
  .p_clear_h150{
      clear:both;
      width:100%;
      height:150px;
  }
  .p_clear_h500{
      clear:both;
      width:100%;
      height:500px;
  }
 .img_clear{
     clear:both;
 }
  .img_right{
     float:right;
     width:400px;
     height:400px;
 }
 .p_left{
     float:left;
     width:60%;
     height:500px;
 }
}

/*linkpage class*/
    .linkpage{
         width:100%;
         height:60000px;
         margin:0;
         padding:0;
         background-color:#000000;
    }
    .linkpage h1{
         -webkit-animation-duration:3s;
         -webkit-animation-name:fadeOutInOutSwirl;
         -moz-animation-duration:3s;
         -moz-animation-name:fadeOutInOutSwirl;
    }
    .linkpage h2{
         -webkit-animation-delay:2500ms;
         -webkit-animation-duration:3s;
         -webkit-animation-name:fadeOutInOutSwirl2;
         -moz-animation-delay:2500ms;
         -moz-animation-duration:3s;
         -moz-animation-name:fadeOutInOutSwirl2;
    }
    .linkpage nav{
        float:left;
        width:100px;
        height:80px;
        margin:0;
        display:block;
    }
    .linkpage nav > ul{
        float:left;
        width:100%;
        height:80px;
        display:block;
        font-size:13pt;
        background-color:#ffffff;
        opacity:0.9;
    }
    .linkpage nav > ul > li{
        float:left;
        width:100%;
        height:80px;
    }
    .linkpage nav > ul li:hover{
        background-color:#ff0000;
    }
    .linkpage nav > ul li > a{
        width:100%;
        height:80px;
        color:#0b0b0b;
        display:block;
    }
    .linkpage nav > ul li > a:hover{
        width:100%;
        height:80px;
        background-color:#0000ff;
        color:#ff000;
        display:block;
    }
    .linkpage > header{
        width:100%;
        height:80px;
        margin:0;
        padding:0;
    }
      .linkpage article ul{
          display:block;
          width:100%;
      }
      .linkpage article ul li{
          display:block;
          width:100%;
          height:40px;
          margin:0 0 3px 0;
      }
      .linkpage article ul li:hover{
          background-color:#ffffff;
      }
      .linkpage article ul li a{
          display:block;
          width:100%;
          height:40px;
          font-size:12pt;
          background-color:#ff0078;
          color:#ffffff;
          opacity:0.8;
          -moz-opacity:0.8;
          filter:alpha(opacity=80);
      }
      .linkpage article ul li a:hover{
          background-color:#ffffff;
          color:#3dc1ff;
      }
      .linkpage article h1{
          width:100%;
          font-size:10pt;
          background-repeat:no-repeat;
          background-color:#ff0000;
      }
@media screen and (mini-width:769px){
    .linkpage article ul{
        display:block;
        width:90%;
    }
    .linkpage article ul li{
        display:block;
        width:100%;
        height:40px;
        margin:0 0 3px 0;
    }
    .linkpage article ul li:hover{
        background-color:#ffffff;
    }
    .linkpage article ul li a{
        display:block;
        width:100%;
        height:40px;
        font-size:12pt;
        background-color:#ff0078;
        color:#ffffff;
        opacity:0.8;
        -moz-opacity:0.8;
        filter:alpha(opacity=80);
    }
    .linkpage article ul li a:hover{
        background-color:#ffffff;
        color:#3dc1ff;
    }
    .linkpage article h1{
        width:100%;
        font-size:10pt;
        background-repeat:no-repeat;
        background-color:#ff0000;
    }
}

/*Cube Menu*/
    .cubemenu{
        text-align:center;
        color:#ffffff;
    }
    .component{
        display:inline-block;
        line-height:80px;
        perspective: 500px;
        -webkit-perspective:500px;
    }
    .face{
        display:inline-block;
        width:80px;
        color:#ffffff;
        text-decoration:none;
        background:turquoise;
        cursor:dedfault;
        transition:0.3s;
        transform-origin:center top;
        transform-style:preserve-3d;
        -webkit-transition:0.3s;
        -webkit-transform-origin:center top;
        -webkit-preserve-3d;
    }
       .face:hover,.face:focus{
           transform:rotateX(90deg) translateY(-40px);
           -webkit-transform:rotateX(90deg) translateY(-40px);
           background:lightseagreen;
       }
       .face::after{
           position:absolute;
           top:100%;
           left:0;
           width:100%;
           background:darkcyan;
           content:attr( data-hover);
           transform:rotateX(-90deg);
           transform-origin:center top;
           -webkit-transform:rotateX(-90deg);
           -webkit-origin:center top;
       }
/* for javascript */
        #bg-video{
            position:fixed;
            z-index:-1000;
            mini-width:100%;
            mini-height:100%;
            width:100%;
            left:0px;
            top:-150px;
       }

/*Text Shadow*/
    .textShadow{
        text-shadow:1px 2px 3px #1a1a1a;
    }

/*border*/
    .solid{
        border-left:solid 1em #999;
        padding-left:0.5em;
    }
    .dot{
        border-left:dotted 5px #999;
        padding : 1em;
    }
    .solid_dashed{
        border-left:solid 0.5em #ff0000;
        border-bottom:dashed 1px #ffffff;
    }
    .solid_transparent{
        border-style:solid;
        border-width:1em;
        border-color:transparent #999;
        padding:0.5em;
    }
    .border5{
        border-style:solid;
        border-width:1px;
        border-color:#fff #333 #333 #fff;
        background-color:#ccc;
        padding:1em;
    }
    .double{
        border:double 6px #fff;
        background-color:#ccc;
        padding:1em;
    }
    .radius{
        border-radius:0 0 20px 20px;
        -moz-border-radius:0 0 20px 20px;
        -webkit-border-bottom-left-radius:20px;
        -webkit-border-bottom-right-radius:20px;
    }
/*opacity*/
    .opacity{
        opacity:0.7;
        -moz-opacity:0.7;
        filter:alpha(opacity:70);
    }
/*shadow*/
    .core_shadow{
        border:5px solid #cdcdcd;
        border-top:0;
        border-left:0;
        border-right:5px;
        border-bottom:5px;
        opacity:0.7;
        -moz-opacity:0.7;
        filter:alpha(opacity:70);
    }
/*CSS iframe*/
    .css_iframe{
        width:95%;
        height:120px;
        background-color:#000000;
        color:#ffffff;
        margin:0 auto 10px auto;
        overflow:scroll;
    }
/*form radius*/
    .formradius{
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
    }
    .link{
        float:right;
        width:25%;
        height:20000px;
        background-color:#ffffff;
        background-repeat-x;
        }
    .link h1{
        width:100%;
        height:40px;
        background-repeat:no-repeat;
        }
    .link ul{
        display:block;
        width:100%;
        height:1200px;
        }
    .link li{
        float:left;
        display:block;
        width:200px;
        height:35px;
        margin:0 0 10px 0;
        }
    .link li a{
        display:block;
        width:200px;
        height:35px;
        background-repeat:no-repeat;
        font-size:11pt;
        color:#ffffff;
        }
    .link li a:hover{
        background-color:#ffffff;
        color:#3dc1ff;}
    .link p a{
        display:block;
        width:100%;
        height:35px;
        background-repeat:no-repeat;
        color:#ffffff;
        }
    .link p a:hover{
        display:block;
        width:100%;
        height:35px;
        background-color:#ffffff;
        color:#3dc1ff;
        }

/*noscript*/
    noscript{
            color:#ffffff;
            opacity:0.7;
            filter:alpha(opacity=70);
        }

/*CSS Drop Caps*/
    .copy p:first-letter{
        font-size:100%;
        font-weight:bold;
        float:left;
        width:3em;
        color:#ff0000;
        background-color:#000000;
    }
    p.dropcaps:first-letter,div.dropcaps:first-letter{
        float:leter;
        font-size:2em;
        font-weight:bold;
        padding-right:0.1em;
        color:#ff6600;
        background-color:#000000;
    }
/*CSS Animations*/
    @-webkit-keyframes fadeIn{
        from{
            opacity:0;
        }
        to{
            opacity:1;
        }
    }
    @-moz-keyframes fadeIn{
        from{
            opacity:0;
        }
        to{
            opacity:1;
        }
    }
    @-webkit-keyframes fadeOut{
        from{
            opacity:1;
        }
        to{
            opacity:0;
        }
    }
    @-moz-keyframes fadeOut{
        from{
            opacity:1;
        }
        to{
            opacity:0;
        }
    }
    @-webkit-keyframes rotateInLeft{
        from{
            -webkit-transform-origin:0% 0%;
            -webkit-transform:rotateY(180deg);
        }
        to{
            -webkit-transform-origin:0% 0%;
            -webkit-transform:rotateY(0deg);
        }
    }
    @-moz-keyframes rotateInLeft{
        from{
            -moz-transform-origin:0% 0%;
            -moz-transform:rotateY(180deg);
        }
        to{
            -moz-transform-origin:0% 0%;
            -moz-transform:rotateY(0deg);
        }
    }
    @-webkit-keyframes fadeOutInOutSwirl {
        from{
            -webkit-transform:scale(0) rotate(0deg);
        }
        to{
            -webkit-transform:scale(1) rotate(360deg);
        }
    }
    @-moz-keyframes fadeOutInOutSwirl {
        from{
            -moz-transform:scale(0) rotate(0deg);
        }
        to{
            -moz-transform:scale(1) rotate(360deg);
        }
    }
    @-webkit-keyframes fadeOutInOutSwirl2{
        from{
            -webkit-transform:scale(0) rotate(0deg);
        }
        to{
            -webkit-transform:scale(1) rotate(-360deg);
        }
    }
    @-moz-keyframes fadeOutInOutSwirl2{
        from{
            -moz-transform:scale(0) rotate(0deg);
        }
        to{
            -moz-transform:scale(1) rotate(-360deg);
        }
    }
/* multi cube*/
    .cube{
        position: fixed;
        left: 50%;
        top: 300px;
    }
    .cube p{
        line-height: 14px;
        font-size: 12px;
    }
    .cube h2{
        font-weight: bold;
    }
    .cube.two{
        top: 416px;
        left: 50%;
        margin-left: -200px;
    }
    .cube.three{
        top: 532px;
        left: 50%;
        margin-left: -400px;
    }
    .rightFace,.leftFace,
    .topFace div{
        padding: 10px;
        width: 180px;
        height: 180px;
    }
    .rightFace,
    .leftFace,.topFace{
        position: absolute;
    }
    .cube:hover .rightFace,
    .cube:hover .leftFace,
    .cube:hover .topFace div{
        background-color: #ffc;
    }
    .cube:hover .rightFace:hover,
    .cube:hover .leftFace:hover,
    .cube:hover .topFace:hover div{
        background-color: #ffa;
    }
    .leftFace{
        -webkit-transform:skew(0deg, 30deg);
        -moz-transform:skew(0deg, 30deg);
        -o-transform:skew(0deg, 30deg);
        -ms-transform:skew(0deg, 30deg);
        transform:skew(0deg, 30deg);
        background-color: #ccc;
    }
    .rightFace{
        -webkit-transform: skew(0deg, -30deg);
        -moz-transform: skew(0deg, -30deg);
        -o-transform: skew(0deg, -30deg);
        -ms-transform: skew(0deg, -30deg);
        transform: skew(0deg, -30deg);
        background-color: #ddd;
        left: 200px;
    }
    .topFace div{
        -webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
        -moz-transform: skew(0deg, -30deg) scale(1, 1.16);
        -o-transform: skew(0deg, -30deg) scale(1, 1.16);
        -ms-transform: skew(0deg, -30deg) scale(1, 1.16);
        transform: skew(0deg, -30deg) scale(1, 1.16);
        background-color: #eee;
        font-size: 0.862em;
    }
    .topFace{
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -o-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
        top: -158px;
        left: 100px;
    }
/* Optional Animations */
    .cube{
        -webkit-transition: -webkit-transform 1s linear;
        -moz-transition: -moz-transform 1s linear;
        -o-transition: -o-transform 1s linear;
        -ms-transition: -ms-transform 1s linear;
        transition: transform 1s linear;
    }
    .cube:hover{
        -webkit-transform: translate(202px, 115px);
        -moz-transform: translate(202px, 115px);
        -o-transform: translate(202px, 115px);
        -ms-transform: translate(202px, 115px);
        transform: translate(202px, 115px);
    }
/*Matrix*/
    #matrix{
        margin: 1em auto;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #000;
        background-image: -webkit-gradient(linear, 0% 90%, 0% 100%, from(rgba(0, 255, 0, 0)), to(rgba(0, 255, 0, 0.1)));
        background-image:-moz-gradient(linear,0%,90%,0%,100%,from(rgba(0,255,0,0)),to(rgba(0,255,0,0.1)));
        color: rgba(0, 255, 0, .7);
        text-shadow: rgba(255, 255, 255, .8) 0px 0px 4px;
        position: relative;
    }
    @-webkit-keyframes fade{
        0%{
            opacity: 1;
        }
        100%{
            opacity: 0;
        }
    }
    @-moz-keyframes fade{
        0%{
            opacity:1;
        }
        100%{
            opacity:0;
        }
    }
    @-webkit-keyframes fall{
        from{
            top:-250px;
        }
        to{
            top: 300px;
        }
    }
    @-moz-keyframes fall{
        from{
            top:-250px;
        }
        to{
            top:300px;
        }
    }
    #matrix div{
        /* writing-mode: tb-rl; - ughh. doesn't work */
        position: absolute;
        top: 0;
        /* arrearance */
        -webkit-transform-origin: 0%;
        -moz-transform-origin:0%;
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        /* animation */
        -webkit-animation-name:fall,fade;
        -moz-animation-name:fall,fade;
        -webkit-animation-iteration-count:infinite; /* use 0 to infinite */
        -moz-animation-iteration-count:infinite;
        -webkit-animation-direction: normal; /* default is normal. use 'alternate' to reverse direction */
        -moz-animation-direction:normal;
        -webkit-animation-timing-function:ease-out;
        -moz-animation-timing-function:ease-out;
    }
    #matrix span{
        color: rgb(0,255,0);
        text-shadow: rgb(255,255,255) 0px 0px 5px;
    }
    .f1{
        font-size:1.2em;
    }
    .f2{
        font-size:.9em;
    }
    .c1{
        color:rgba(0,255,0,.5);
    }
    .d1{
        -webkit-animation-duration:4s;
        -moz-animation-duration:4s;
    }
    .d2{
        -webkit-animation-duration:6s;
        -moz-animation-duration:6s;
    }
    .d3{
        -webkit-animation-duration:8s;
        -moz-animation-duration:8s;
    }
    .d4{
        -webkit-animation-duration:10s;
        -moz-animation-duration:10s;
    }
    .de{
        -webkit-animation-delay:3s;
        -moz-animation-delay:3s;
    }

/*Search*/
        .search{
               width:305px;
               height:50px;
        }
        .search > input{
              float:left;
              width:250px;
              height:50px;
        }
        .search > button{
               float:right;
               width:50px;
               height:50px;
        }
/*Button*/
       .btn{
               display:inline-block;
               margin-bottom:0;
               font-weight:600;
               text-align:center;
               vertical-align:middle;
               cursor:pointer;
               border:1px solid transparent;
               white-space:nowrap;
               padding:8px 20px;
               font-size:16px;
               line-size:16px;
               line-height:1.5;
               border-radius:4px;
               user-select:none;
       }
       .btn-color{
               color:#1878B3;
               background-color:white;
               border:1px solid #d4d9d9;
               online:none;
               transition:all 300ms ease-out;
       }
/*CSSエフェクト*/
       .btn{
               display: inline-block;
               padding: 5px 10px;
               font-size: 14px;
               color: #fff;
               border: 2px solid #4d92d9;
               background-color: #4d92d9;
               text-decoration: none;
               transition: 0.4s;
       }
       .btn:hover{
               background-color: transparent;
               color: #4d92d9;
               transition: 0.4s;
       }
       .text-desc{
               position: absolute;
               left: 0;
               top: 0;
               background-color: #fff;
               height: 100%;
               opacity: 0;
               width: 100%;
               padding: 20px;
      　}
        .port-1{
               float: left;
               width: 100%;
               position: relative;
               overflow: hidden;
               text-align: center;
               border: 4px solid rgba(255, 255, 255, 0.9);
       　}
        .port-1 .text-desc{
               opacity: 0.9;
               top: -100%;
               transition: 0.5s;
               color: #000;
               padding: 45px 20px 20px;
       　}
        .port-1 img{
               transition: 0.5s;
        }
        .port-1:hover img{
               transform: scale(1.2);
        }
        .port-1.effect-1:hover .text-desc{
               top: 0;
        }
        .port-1.effect-2 .text-desc{
               top: auto;
               bottom: -100%;
        }
        .port-1.effect-2:hover .text-desc{
               bottom: 0;
        }
        .port-1.effect-3 .text-desc{
               top: 50%;
               left: 50%;
               width: 0;
               height: 0;
               overflow: hidden;
               padding: 0;
        }
        .port-1.effect-3:hover .text-desc{
               width: 100%;
               top: 0;
               left: 0;
               height: 100%;
               padding: 45px 20px 20px;
        }
        .port-2{
               float: left;
               width: 100%;
               position: relative;
               overflow: hidden;
               text-align: center;
               border: 4px solid rgba(255, 255, 255, 0.9);
               perspective: 800px;
        }
        .port-2 .text-desc{
               z-index: -1;
               transition: 0.6s;
        }
        .port-2 .image-box{
               transition: 0.4s;
        }
        .port-2:hover .image-box{
               transform: rotateX(80deg);
               transform-origin: center bottom 0;
               transition: 0.4s;
        }
        .port-2.effect-1:hover .text-desc{
               opacity: 1;
        }
        .port-2.effect-2 .text-desc{
               opacity: 1;
               top: -100%;
        }
        .port-2.effect-2:hover .text-desc{
               top: 0;
        }
        .port-2.effect-3 .text-desc{
               opacity: 1;
               top: auto;
               bottom: -100%;
        }
        .port-2.effect-3:hover .text-desc{
               bottom: 0;
        }
        .port-3{
               float: left;
               width: 100%;
               position: relative;
               overflow: hidden;
               text-align: center;
               border: 4px solid rgba(255, 255, 255, 0.9);
               perspective: 500px;
        }
        .port-3 img{
               transition: 0.5s;
        }
        .port-3.effect-1 .text-desc{
               z-index: -1;
               transition: 0.5s;
               transform: rotateX(80deg);
               transform-origin: center top 0;
               padding: 45px 20px 20px;
               opacity: 1;
        }
        .port-3.effect-1:hover .text-desc{
               transform: none;
        }
        .port-3.effect-1:hover img{
               opacity: 0;
               transform: scale(1.2)
        }
        .port-3.effect-2 .text-desc{
               z-index: -1;
               transition: 0.5s;
               transform: rotateX(80deg);
               transform-origin: center bottom 0; top: auto;
               bottom: 0;
               padding: 45px 20px 20px;
        }
        .port-3.effect-2:hover .text-desc{
               transform: none;
               opacity: 1;
        }
        .port-3.effect-2:hover img{
               transform: translateY(-100%);
        }
        .port-3.effect-3 .text-desc{
               z-index: -1;
               transition: 0.5s;
               transform: rotateX(80deg);
               transform-origin: center top 0;
               padding: 45px 20px 20px;
        }
        .port-3.effect-3:hover .text-desc{
               transform: none;
               opacity: 1;
        }
        .port-3.effect-3:hover img{
               transform: translateY(100%);
        }
        .port-4{
               float: left;
               width: 100%;
               position: relative;
               overflow: hidden;
               text-align: center;
               border: 4px solid rgba(255, 255, 255, 0.9);
               z-index: 10;
        }
        .port-4.effect-1 img{
               transition: 0.5s;
               transform: rotateY(360deg) scale(1, 1);
        }
        .port-4.effect-1 .text-desc{
               transform: rotateY(0deg) scale(0, 0);
               transition: 0.5s;
               opacity: 0;
               padding: 45px 20px 20px;
        }
        .port-4.effect-1:hover .text-desc{
               transform: rotateY(360deg) scale(1, 1);
               opacity: 1;
        }
        .port-4.effect-1:hover img{
               transform: rotateY(0deg) scale(0, 0);
        }
        .port-4.effect-2{
               z-index: 12;
        }
        .port-4.effect-2 img{
               transition: 0.5s;
               transform: rotateX(360deg) scale(1, 1);
        }
        .port-4.effect-2 .text-desc{
               transform: rotateX(0deg) scale(0, 0);
               transition: 0.5s;
               opacity: 0;
               padding: 45px 20px 20px;
        }
        .port-4.effect-2:hover .text-desc{
               transform: rotateX(360deg) scale(1, 1);
               opacity: 1;
        }
        .port-4.effect-2:hover img{
               transform: rotateX(0deg) scale(0, 0);
        }
        .port-4.effect-3 img{
               transition: 0.5s;
               transform: rotate(360deg) scale(1, 1);
        }
        .port-4.effect-3 .text-desc{
               transform: rotate(0deg) scale(0, 0);
               transition: 0.5s;
               opacity: 0;
               padding: 45px 20px 20px;
        }
        .port-4.effect-3:hover .text-desc{
               transform: rotate(360deg) scale(1, 1);
               opacity: 1;
        }
        .port-4.effect-3:hover img{
               transform: rotate(0deg) scale(0, 0);
        }
        .port-5{
               float: left;
               width: 100%;
               position: relative;
               overflow: hidden;
               text-align: center;
               border: 4px solid rgba(255, 255, 255, 0.9);
               overflow: visible;
        }
        .port-5.effect-1{
               z-index: 9;
        }
        .port-5.effect-1 img{
               transition: 0.5s;
        }
        .port-5.effect-1:hover img{
               transform: scale(0.5) translateX(-100%);
               position: relative;
               z-index: 9;
               border: 6px solid rgba(255, 255, 255, 0.9);
        }
        .port-5.effect-1 .text-desc{
               transform: translateX(100%);
               opacity: 0;
               padding: 40px 20px 20px 90px;
               transition: 0.5s;
        }
        .port-5.effect-1:hover .text-desc{
               transform: translateX(0px);
               opacity: 1;
        }
        .port-5.effect-2{
               z-index: 10;
        }
        .port-5.effect-2 img{
               transition: 0.5s;
               transform: none);
        }
        .port-5.effect-2:hover img{
               transform: scale(0.5) translateY(100%);
               position: relative;
               z-index: 9;
               border: 6px solid rgba(255, 255, 255, 0.9);
        }
        .port-5.effect-2 .text-desc{
               transform: translateY(-100%);
               opacity: 0;
               padding: 20px;
               transition: 0.5s;
        }
        .port-5.effect-2:hover .text-desc{
               transform: translateY(0px);
               opacity: 1;
        }
        .port-5.effect-3 img{
               transition: 0.5s;
        }
        .port-5.effect-3:hover img{
               transform: scale(0.5) translateX(100%);
               position: relative;
               z-index: 9;
               border: 6px solid rgba(255, 255, 255, 0.9);
        }
        .port-5.effect-3 .text-desc{
               transform: translateX(-100%);
               opacity: 0;
               padding: 40px 90px 20px 20px;
               transition: 0.5s;
        }
        .port-5.effect-3:hover .text-desc{
               transform: translateX(0px);
               opacity: 1;
        }
        .port-6{
               float: left;
               width: 100%;
               position: relative;
               overflow: hidden;
               text-align: center;
               border: 4px solid rgba(255, 255, 255, 0.9);
               overflow: visible;
        }
        .port-6.effect-1{
               z-index: 8;
        }
        .port-6.effect-1 img{
               transition: 0.5s;
        }
        .port-6.effect-1:hover img{
               transform: scale(0.3) translateY(110%);
               position: relative;
               z-index: 9;
        }
        .port-6.effect-1 .text-desc{
               transform: translateY(-100%);
               opacity: 0;
               padding: 10px 20px;
               transition: 0.5s;
        }
        .port-6.effect-1:hover .text-desc{
               transform: translateY(0px);
               opacity: 1;
        }
        .port-6.effect-2{
               z-index: 7;
        }
        .port-6.effect-2 img{
               transition: 0.6s;
               z-index: 1;
        }
        .port-6.effect-2:hover img{
               transform: scale(0.3) translateX(110%);
               position: relative;
               z-index: 9;
        }
        .port-6.effect-2 .text-desc{
               transform: translateX(-100%);
               opacity: 0;
               padding: 40px 120px 20px 20px;
               transition: 0.6s;
        }
        .port-6.effect-2:hover .text-desc{
               transform: translateX(0px);
               opacity: 1;
        }
        .port-6.effect-3 img{
               transition: 0.5s;
        }
        .port-6.effect-3:hover img{
               transform: scale(0.3) translateY(-110%);
               position: relative;
               z-index: 9;
        }
        .port-6.effect-3 .text-desc{
               transform: translateY(100%);
               opacity: 0;
               padding: 85px 20px 10px;
               transition: 0.5s;
        }
        .port-6.effect-3:hover .text-desc{
               transform: translateY(0px);
               opacity: 1;
        }
        .port-7{
               float: left;
               width: 100%;
               position: relative;
               overflow: hidden;
               text-align: center;
               border: 4px solid rgba(255, 255, 255, 0.9);
               overflow: hidden;
        }
        .port-7 .text-desc{
               opacity: 0;
               transition: 0.5s;
               color: #000;
        }
        .port-7.effect-1 img{
               transition: 0.5s;
               position: relative;
               width: 100%;
               left: 0;
        }
        .port-7.effect-1:hover img{
               left: 50%;
        }
        .port-7.effect-1 .text-desc{
               transform: perspective(600px) rotateY(90deg);
               transform-origin: left center 0;
               width: 50%;
               position: absolute;
               left: 0;
               top: 0;
               padding: 18px 10px;
        }
        .port-7.effect-1:hover .text-desc{
               opacity: 1;
               transform: perspective(600px) rotateY(0deg);
               z-index: 99;
        }
        .port-7.effect-2 img{
               transition: 0.5s;
               position: relative;
               width: 100%;
               top: 0;
        }
        .port-7.effect-2:hover img{
               top: 50%;
        }
        .port-7.effect-2 .text-desc{
               transform: perspective(600px) rotateX(90deg);
               transform-origin: top center 0;
               width: 100%;
               position: absolute;
               left: 0;
               top: 0;
               height: 50%;
               padding: 5px 10px;
        }
        .port-7.effect-2:hover .text-desc{
               opacity: 1;
               transform: perspective(600px) rotateX(0deg);
               z-index: 99;
        }
        .port-7.effect-3 img{
               transition: 0.5s;
               position: relative;
               width: 100%;
               right: 0;
        }
        .port-7.effect-3:hover img{
               right: 50%;
        }
        .port-7.effect-3 .text-desc{
               transform: perspective(600px) rotateY(-90deg);
               transform-origin: right center 0;
               width: 50%;
               position: absolute;
               left: auto;
               right: 0;
               top: 0;
               padding: 18px 10px;
        }
        .port-7.effect-3:hover .text-desc{
               opacity: 1;
               transform: perspective(600px) rotateY(0deg);
               z-index: 99;
        }
        .port-8{
               float: left;
               width: 100%;
               position: relative;
               overflow: hidden;
               text-align: center;
               border: 4px solid rgba(255, 255, 255, 0.9);
               overflow: hidden;
        }
        .port-8 .text-desc{
               opacity: 0;
               transition: 0.5s;
               color: #000;
               padding: 45px 20px 20px;
        }
        .port-8.effect-1 img{
               transition: 0.5s;
        }
        .port-8.effect-1:hover img{
               transform: scale(1.1);
        }
        .port-8.effect-1 .text-desc{
               left: 0;
               position: absolute;
               top: 0;
               width: 100%;
               height: 100%;
               transform: scale(0);
               backface-visibility: hidden;
        }
        .port-8.effect-1:hover .text-desc{
               opacity: 1; transform: scale(1);
               border-radius: 20%;
        }
        .port-8.effect-2 img{
               transition: 0.5s;
        }
        .port-8.effect-2:hover img{
               transform: scale(1.1);
        }
        .port-8.effect-2 .text-desc{
               left: 0;
               position: absolute;
               top: 0;
               width: 100%;
               height: 100%;
               transform: scale(0);
               backface-visibility: hidden;
        }
        .port-8.effect-2:hover .text-desc{
               opacity: 1;
               transform: scale(1);
               border-radius: 50% 0 50% 0;
        }
        .port-8.effect-2 img{
               transition: 0.5s;
        }
        .port-8.effect-2:hover img{
               transform: scale(1.1);
        }
        .port-8.effect-2 .text-desc{
               left: 0;
               position: absolute;
               top: 0;
               width: 100%;
               height: 100%;
               transform: scale(0);
               backface-visibility: hidden;
        }
        .port-8.effect-2:hover .text-desc{
               opacity: 1;
               transform: scale(1);
               border-radius: 50% 0 50% 0;
        }
        .port-8.effect-3 img{
               transition: 0.5s;
        }
        .port-8.effect-3:hover img{
               transform: scale(1.1);
        }
        .port-8.effect-3 .text-desc{
               left: 0;
               position: absolute;
               top: 0;
               width: 100%;
               height: 100%;
               transform: scale(0);
               backface-visibility: hidden;
               background: none;
               padding: 40px 70px 20px;
        }
        .port-8.effect-3 .text-desc:before, .port-8.effect-3 .text-desc:after{
               background-color: #fff;
               border-radius: 50% 50% 0 0;
               content: "";
               height: 100%;
               left: 50%;
               position: absolute;
               top: 0;
               transform: rotate(-50deg);
               transform-origin: 0 100% 0;
               width: 50%;
               z-index: -1;
        }
        .port-8.effect-3 .text-desc:after {
               left: 0;
               transform: rotate(50deg);
               transform-origin: 100% 100% 0;
        }
        .port-8.effect-3:hover .text-desc{
               opacity: 1;
               transform: scale(1);
        }
/*grow*/
    .grow img{
        height:300px;
        width:300px;
        -webkit-transition:all 1s ease;
        -moz-transition:all 1s ease;
        -o-transition:all 1s ease;
        -ms-transition:all 1s ease;
        transition:all 1s ease;
    }
    .grow img:hover{
        width:400px;
        height:400px;
    }

/*shrink*/
    .shrink img{
        width:400px;
        height:400px;
        -webkit-transition:all 1s ease;
        -moz-transition:all 1s ease;
        transition:all 1s ease;
    }
    .shrink img:hover{
        width:300px;
        height:300px;
    }
/*blur*/
    .blur img{
        -webkit-transition:all 1s ease;
        -moz-transition:all 1s ease;
        transition:all 1s ease;
    }
    .blur img:hover{
       -webkit-filter:blur(5px);
       -moz-filter:blur(5px);
       filter(5px);
    }
/*tilt*/
   .tilt{
       -webkit-transition:all 0.5s ease;
       -moz-transition:all 0.5s ease;
       transition:all 1s ease;
   }
   .tilt:hover{
       -webkit-transform:rotate(-10deg);
       -moz-transform:rotate(-10deg);
       transform:rotate(-10deg);
   }
/*MORPH*/
   .morph img{
       -webkit-transition:all 0.5s ease;
       -moz-transition:all 0.5s ease;
       transition:all 0.5s ease;
   }
   .morph img:hover{
       -webkit-transform:rotate(360deg);
       -moz-transform:rotate(360deg);
       transform:rotate(360deg);
   }
/*sidepan*/
   .sidepan img{
       -webkit-transition:margin 1s ease;
       -moz-transition:margin 1s ease;
       transition:margin 1s ease;
   }
   .sidepan img:hover{
       margin-left:-200px;
   }
/*verticalpan*/
   .verticalpan img{
       margin-top:0px;
       -webkit-transition:margin 1s ease;
       -moz-transition:margin 1s ease;
       transition:margin 1s ease;
   }
   .verticalpan img:hover{
       margin-top:-200px;
   }
/*focus*/
   .focus img{
       -webkit-transition:all 1s ease;
       -moz-transition:all 1s ease;
       transition:all 1s ease;
   }
   .focus img:hover{
       border:70px solid #000000;
       border-radius:50%;
   }
/*grayscale*/
   .grayscale img{
       -webkit-transition:all 1s ease;
       -moz-transition:all 1s ease;
       transition:all 1s ease;
   }
   .grayscale img:hover{
       -webkit-filter:grayscale(100%);
       -moz-filter:grayscale(100%);
       filter:grayscale(100%);
   }
/*view-six*/
   .view-sixth img {
       -webkit-transition: all 0.4s ease-in-out 0.5s;
       -moz-transition: all 0.4s ease-in-out 0.5s;
       transition: all 0.4s ease-in-out 0.5s;
   }
   .view-sixth .mask {
       background-color: rgba(146,96,91,0.5);
       filter: alpha(opacity=0);
       opacity: 0;
       -webkit-transition: all 0.3s ease-in 0.4s;
       -moz-transition: all 0.3s ease-in 0.4s;
       transition: all 0.3s ease-in 0.4s;
   }
   .view-sixth h2 {
       filter: alpha(opacity=0);
       opacity: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.3);
       background: transparent;
       margin: 20px 40px 0px 40px;
       -webkit-transform: scale(10);
       -moz-transform: scale(10);
       transform: scale(10);
       -webkit-transition: all 0.3s ease-in-out 0.1s;
       -moz-transition: all 0.3s ease-in-out 0.1s;
       transition: all 0.3s ease-in-out 0.1s;
   }
   .view-sixth p {
       filter: alpha(opacity=0);
       opacity: 0;
       -webkit-transform: scale(10);
       -moz-transform: scale(10);
       transform: scale(10);
       -webkit-transition: all 0.3s ease-in-out 0.2s;
       -moz-transition: all 0.3s ease-in-out 0.2s;
       transition: all 0.3s ease-in-out 0.2s;
   }
   .view-sixth a.info {
       filter: alpha(opacity=0);
       opacity: 0;
       -webkit-transform: translateY(100px);
       -moz-transform: translateY(100px);
       transform: translateY(100px);
       -webkit-transition: all 0.3s ease-in-out 0.1s;
       -moz-transition: all 0.3s ease-in-out 0.1s;
       transition: all 0.3s ease-in-out 0.1s;
   }
   .view-sixth:hover .mask {
       filter: alpha(opacity=100);
       opacity: 1;
       -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
       transition-delay: 0s;
   }
   .view-sixth:hover img {
       -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
       transition-delay: 0s;
   }
   .view-sixth:hover h2 {
       filter: alpha(opacity=100);
       opacity: 1;
       -webkit-transform: scale(1);
       -moz-transform: scale(1);
       transform: scale(1);
       -webkit-transition-delay: 0.1s;
       -moz-transition-delay: 0.1s;
       transition-delay: 0.1s;
   }
   .view-sixth:hover p {
       filter: alpha(opacity=100);
       opacity: 1;
       -webkit-transform: scale(1);
       -moz-transform: scale(1);
       transform: scale(1);
       -webkit-transition-delay: 0.2s;
       -moz-transition-delay: 0.2s;
       transition-delay: 0.2s;
   }
   .view-sixth:hover a.info {
       filter: alpha(opacity=100);
       opacity: 1;
       -webkit-transform: translateY(0px);
       -moz-transform: translateY(0px);
       transform: translateY(0px);
       -webkit-transition-delay: 0.3s;
       -moz-transition-delay: 0.3s;
       transition-delay: 0.3s;
   }

/*view-tenth*/
   .view-tenth img {
       -webkit-transform: scaleY(1);
       -moz-transform: scaleY(1);
       transform: scaleY(1);
       -webkit-transition: all 0.7s ease-in-out;
       -moz-transition: all 0.7s ease-in-out;
       transition: all 0.7s ease-in-out;
   }
   .view-tenth .mask {
       background-color: rgba(255, 231, 179, 0.3);
       -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
       transition: all 0.5s linear;
       filter: alpha(opacity=0);
       opacity: 0;
   }
   .view-tenth h2 {
       border-bottom: 1px solid rgba(0, 0, 0, 0.3);
       background: transparent;
       margin: 20px 40px 0px 40px;
       -webkit-transform: scale(0);
       -moz-transform: scale(0);
       transform: scale(0);
       color: #333;
       -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
       transition: all 0.5s linear;
       filter: alpha(opacity=0);
       opacity: 0;
   }
   .view-tenth p {
       color: #333;
       filter: alpha(opacity=0);
       opacity: 0;
       -webkit-transform: scale(0);
       -moz-transform: scale(0);
       transform: scale(0);
       -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
       transition: all 0.5s linear;
   }
.view-tenth a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-tenth:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

/*diagonal slide*/
        .dslide1{
            width:460px;
            height:276px;
            overflow:hidden;
            position:absolute;
            margin:auto;
            top:0;
            left:0;
            right:0;
            bottom:0;
            box-shadow:0 0 10px 1px #000000;
            background-image:url("../test/Orlando-the-ginger-cat-008.jpg");
        }
        .dslide2{
            width:0;
            height:276px;
            overflow:hidden;
            margin-left:-50px;
            transform:skew(-20deg);
            transition:width 1s ease;
        }
        .dslide1:hover .dslide2{
            width:574px;
        }
        .dslide3{
            width:574px;
            height:276px;
            transform:skew(20deg);
            background-image:url("../test/RUSSIA-ANIMALS-PETS-CAT-010.jpg");
            background-position:114px 0;
        }
/*bubbledata*/
        .bubbledata[data-bubble]::after{
          content:attr(data-bubble);
          position:absolute;
          top:0;
          right:0.5em;
          line-height:1.5em;
          paddidng:0 0.46em;
          background-color:#eee;
          color:#364652;
          box-shadow:0 0.63em 0.63em rgba(0,0,0,0.2);
      }
      .bubbledata[data-bubble]::after{
          z-index:-1;
          transform:translateZ(0);
      }
      .bubbledata:hover[data-bubble]::after,
      .bubbledata:active[data-bubble]::after,
      .bubbledata:focus[data-bubble]::after{
          animation: bubbleover 0.4s;
          animation-fill-mode: both;
          top:2.25em;
          z-index:1;
      }
          @keyframes bubbleover {
              0%   {
                  top: 0;
                  transform: translateY(0);
                  z-index: -1;
              }
              50% {
                  transform: translateY(-12px);
                  z-index: -1
              }
              100% {
                  transform: translateY(6px);
                  z-index: 1;
              }
          }