html {
            box-sizing: border-box;
        }
        body {
            font-family: monospace;
            padding: 0;
            margin: 0;
            background:url(../new/img/bgbaru.jpeg); background-attachment:fixed; */
            background-attachment: fixed;
background-repeat: no-repeat;
	

        background-position: center top;
        background-color: #000035;



    
        }
        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        /* Center the loader */
        #loader {
          position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
          background:url(../images/logo.png) 50% 50% no-repeat;
          background-size:80px 100px;
          -webkit-animation: spin 4s linear infinite;
          animation: spin 4s linear infinite;

        }

        @-webkit-keyframes spin {
          0% { -webkit-transform: rotate(-45deg); }
          50% { -webkit-transform: rotate(0deg); }
          100% { -webkit-transform: rotate(45deg); }
        }

        @keyframes spin {
          0% { transform: rotate(-55deg); }
          10% { transform: rotate(0deg); }
          20% { transform: rotate(55deg); }
          30% { transform: rotate(0deg); }
          50% { transform: rotate(-55deg); }
          60% { transform: rotate(0deg); }
          70% { transform: rotate(55deg); }
          80% { transform: rotate(0deg); }
          100% { transform: rotate(-55deg); }
          
        }

        /* Add animation to "page content" */
        .animate-bottom {
          position: relative;
          -webkit-animation-name: animatebottom;
          -webkit-animation-duration: 1s;
          animation-name: animatebottom;
          animation-duration: 1s
        }

        @-webkit-keyframes animatebottom {
          from { bottom:-100px; opacity:0 } 
          to { bottom:0px; opacity:1 }
        }

        @keyframes animatebottom { 
          from{ bottom:-100px; opacity:0 } 
          to{ bottom:0; opacity:1 }
        }

        #myDiv {
          display: none;
          text-align: center;
        }

        img {width: 100%;border-radius: 8px;box-shadow:inset 0px 14px 0px 0px rgba(255, 255, 255, 0), 0px 4px 0px 1px rgba(255, 255, 255, 0.17)}
        iframe:hover, img:hover  {box-shadow:inset 0px 14px 0px 0px rgb(255, 255, 255), 0px 4px 0px 0px rgba(255, 255, 255, 0.67)}

        .noeffect:hover {box-shadow: none;}
        .framebesar, .framebesar2, .framepersegi, .framekecil, img {width: 100%;border-radius: 8px;box-shadow:inset 0px 14px 0px 0px rgba(255, 255, 255, 0), 0px 4px 0px 1px rgba(255, 255, 255, 0.17)}
        iframe img {border-radius: 20px;}

          .grid {
            width: 100%;
            max-width: 2560px;
            margin: 0 auto;
            padding: 10px;
        }
        .grid:before,
        .grid:after,
        .row:before,
        .row:after {
            content: " ";
            display: table;
        }
        .grid:after,
        .row:after {clear: both;}
        [class*='col-']{
            width: 100%;
            float: left;
            min-height: 1px;
        }
        .col {
            padding: 0em;
            margin: 5px;
            border-radius: 3px;
            box-shadow: 0 0 0 rgba(0,0,0,.3);
            color: turquoise;
            text-align: center;
        }
        


        body { margin: 0; }
        div#slider { overflow: hidden; }
        div#slider figure img { width: 20%; float: left; }
        div#slider figure { 
          position: relative;
          width: 500%;
          margin: 0;
          left: 0;
          text-align: left;
          font-size: 0;
          animation: 30s slidy infinite; 
        }
        .row {width:99%;}


         @media screen and (min-width:320px){
            .col-wd-1 {width: 8.33333%;}
            .col-wd-2 {width: 16.66667%;}
            .col-wd-3 {width: 25%;}
            .col-wd-4 {width: 100%;}
            .col-wd-5 {width: 41.66667%;}
            .col-wd-6 {width: 50%;}
            .col-wd-7 {width: 58.33333%;}
            .col-wd-8 {width: 100%;}
            .col-wd-9 {width: 75%;}
            .col-wd-10 {width: 83.33333%;}
            .col-wd-11 {width: 91.66667%;}
            .col-wd-12 {width: 100%;}

            .slider {height: 175px;}
            .framebesar, .framebesar2 {width: 285px;min-height: 160px;}
            .framepersegi {   width: 135px;height: 60px;}
            .framekecil {   width: 68px;height: 63px;}
        }


         @media screen and (min-width:360px){
            .slider {height: 200px;}
            .framebesar, .framebesar2 {   min-width: 325px;min-height: 175px;}
               .framepersegi {   width: 155px;height: 70px;}
            .framekecil {   width: 75px;height: 73px;}

        }

         @media screen and (min-width:375px){
            .col-wd-1 {width: 8.33333%;}
            .col-wd-2 {width: 16.66667%;}
            .col-wd-3 {width: 25%;}
            .col-wd-4 {width: 100%;}
            .col-wd-5 {width: 41.66667%;}
            .col-wd-6 {width: 50%;}
            .col-wd-7 {width: 58.33333%;}
            .col-wd-8 {width: 100%;}
            .col-wd-9 {width: 75%;}
            .col-wd-10 {width: 83.33333%;}
            .col-wd-11 {width: 91.66667%;}
            .col-wd-12 {width: 100%;}

            .slider {height: 205px;}
            .framebesar, .framebesar2 {   min-width: 340px;min-height: 175px;}
            .framepersegi {   width: 165px;height: 75px;}
            .framekecil {   width: 80px;height: 78px;}


        }

         @media screen and (min-width:412px){
            .col-wd-1 {width: 8.33333%;}
            .col-wd-2 {width: 16.66667%;}
            .col-wd-3 {width: 25%;}
            .col-wd-4 {width: 100%;}
            .col-wd-5 {width: 41.66667%;}
            .col-wd-6 {width: 50%;}
            .col-wd-7 {width: 58.33333%;}
            .col-wd-8 {width: 100%;}
            .col-wd-9 {width: 75%;}
            .col-wd-10 {width: 83.33333%;}
            .col-wd-11 {width: 91.66667%;}
            .col-wd-12 {width: 100%;}

            .slider {height: 230px;}
            .framebesar, .framebesar2 {   min-width: 375px;min-height: 175px;}
            .framepersegi {   width: 183px;height: 85px;}
            .framekecil {   width: 90px;height: 87px;}
        }

         @media screen and (min-width: 425px) {
            .box {border: solid 1px #ededed;margin: 10px;width: 94%;margin-top: 0px;}
            .framebesar, .framebesar2 {   min-width: 390px;min-height: 175px;}
            .framepersegi {   width: 190px;height: 90px;}
            .framekecil {   width: 90px;height: 90px;}

         }

         @media screen and (min-width:768px){
            .col-wd-1 {width: 8.33333%;}
            .col-wd-2 {width: 16.66667%;}
            .col-wd-3 {width: 25%;}
            .col-wd-4 {width: 50%;}
            .col-wd-5 {width: 41.66667%;}
            .col-wd-6 {width: 50%;}
            .col-wd-7 {width: 58.33333%;}
            .col-wd-8 {width: 100%;}
            .col-wd-9 {width: 75%;}
            .col-wd-10 {width: 83.33333%;}
            .col-wd-11 {width: 91.66667%;}
            .col-wd-12 {width: 100%;}

            .slider {height: 380px;}
            .framebesar, .framebesar2 {   min-width: 360px;min-height: 173px;}
            .framepersegi {   width: 175px;height: 85px;}
            .framekecil {   width: 85px;height: 83px;}
            
        }


        @media screen and (min-width:960px){
            .col-sm-1 {width: 8.33333%;}
            .col-sm-2 {width: 16.66667%;}
            .col-sm-3 {width: 25%;}
            .col-sm-4 {width: 33.33333%;}
            .col-sm-5 {width: 41.66667%;}
            .col-sm-6 {width: 50%;}
            .col-sm-7 {width: 58.33333%;}
            .col-sm-8 {width: 66.66667%;}
            .col-sm-9 {width: 75%;}
            .col-sm-10 {width: 83.33333%;}
            .col-sm-11 {width: 91.66667%;}
            .col-sm-12 {width: 100%;}

            .col-wd-1 {width: 8.33333%;}
            .col-wd-2 {width: 16.66667%;}
            .col-wd-3 {width: 25%;}
            .col-wd-4 {width: 33.33333%;}
            .col-wd-5 {width: 41.66667%;}
            .col-wd-6 {width: 50%;}
            .col-wd-7 {width: 58.33333%;}
            .col-wd-8 {width: 66.66667%;}
            .col-wd-9 {width: 75%;}
            .col-wd-10 {width: 83.33333%;}
            .col-wd-11 {width: 91.66667%;}
            .col-wd-12 {width: 100%;}

            .slider {height: 330px;}
            .framebesar {   min-width: 300px;min-height: 165px;}
            .framebesar2 {   min-width: 300px;min-height: 100px;}
            .framepersegi {   width: 145px;height: 65px;}
            .framekecil {   width: 70px;height: 68px;}

            
        }

        @media screen and (min-width: 1024px){
            .framebesar, .framebesar2 {   min-width: 320px;min-height: 155px;}
            .framepersegi {   width: 157px;height: 70px;}
            .framekecil {   width: 75px;height: 73px;}

        }

        @media screen and (min-width: 1200px){
            .slider {height: 378px;}
            .grid {width: 100%;max-width: 1150px;margin: 0 auto;padding: 10px;}
            .framebesar, .framebesar2 {   min-width: 365px;min-height: 175px;}
            .framepersegi {   width: 175px;height: 80px;}
            .framekecil {   width: 85px;height: 83px;}

        }

        @media screen and (min-width: 1440px){
            .slider {height: 380px;}
            .framebesar, .framebesar2 {   min-width: 365px;min-height: 175px;}
            .framepersegi {   width: 180px;height: 80px;}
            .framekecil {   width: 85px;height: 83px;}

              }

        @media screen and (min-width: 2560px){
            .slider {height: 650px;}
            .col {margin: 10px}
            .grid {width: 100%;max-width: 2000px;margin: 0 auto;padding: 10px;}
            .framebesar, .framebesar2 {   min-width: 640px;min-height: 305px;}
            .framepersegi {   width: 310px;height: 140px;}
            .framekecil {   width: 150px;height: 145px;}
        }