@font-face
 {
 font-family : 'Lato-Regular';
   src : url('../fonts/Lato-Regular/Lato-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Lato-Regular/Lato-Regular.woff') format('woff'),
         url('../fonts/Lato-Regular/Lato-Regular.ttf')  format('truetype'),
         url('../fonts/Lato-Regular/Lato-Regular.svg#SansationLight') format('svg');

         font-weight: normal;
  font-style: normal;

 }

@font-face
 {
 font-family : 'Lato-Bold';
   src : url('../fonts/Lato-Bold/Lato-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Lato-Bold/Lato-Bold.woff') format('woff'),
         url('../fonts/Lato-Bold/Lato-Bold.ttf')  format('truetype'),
         url('../fonts/Lato-Bold/Lato-Bold.svg#SansationLight') format('svg');

         font-weight: normal;
  font-style: normal;

 }

@font-face
 {
 font-family : 'Lato-Italic';
   src : url('../fonts/Lato-Italic/Lato-Italic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Lato-Italic/Lato-Italic.woff') format('woff'),
         url('../fonts/Lato-Italic/Lato-Italic.ttf')  format('truetype'),
         url('../fonts/Lato-Italic/Lato-Italic.svg#SansationLight') format('svg');

         font-weight: normal;
  font-style: normal;

 }

@font-face
 {
 font-family : 'SansationLight';
   src : url('../fonts/Sansation/SansationLight.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Sansation/SansationLight.woff') format('woff'),
         url('../fonts/Sansation/SansationLight.ttf')  format('truetype'),
         url('../fonts/Sansation/SansationLight.svg#SansationLight') format('svg');

         font-weight: normal;
  font-style: normal;

 }

@font-face
 { font-family : 'TiltNeon';
   src : url('../fonts/TiltNeon-Regular.ttf');
 }

.fade
 { -webkit-animation-name: fade;
   -webkit-animation-duration: 1.5s;
   animation-name: fade;
   animation-duration: 1.5s;
   opacity : 1;
 }

@-webkit-keyframes fade
 { from {opacity: .4} 
   to {opacity: 1}
 }

@keyframes fade
 { from {opacity: .4} 
   to {opacity: 1}
 }

.tab
 { display : inline-block;
   width : 25px;
 }

body
 { background-color : #ecf0f5;
 }

.text-titik-titik
 { white-space : nowrap;
   width : 100%; 
   overflow : hidden;
   text-overflow : ellipsis;
 }

.menu-atas-header
 { width : 100%;
   background : #0669f0;
   border-bottom : 1px solid #0a60d6;
   border-top : 3px solid darkblue;
   color : white;
   padding-top : 10px;
   padding-bottom : 10px;
   text-transform : uppercase;
   font-family : 'Lato-Bold' !important;
   font-size : 10px;
 }

.header
 { width : 100%;
   background-image: linear-gradient(
  0deg,
  hsl(240deg 93% 38%) 0%,
  hsl(236deg 87% 41%) 12%,
  hsl(233deg 83% 43%) 25%,
  hsl(230deg 82% 45%) 38%,
  hsl(227deg 81% 47%) 51%,
  hsl(225deg 82% 49%) 62%,
  hsl(222deg 83% 50%) 72%,
  hsl(219deg 88% 51%) 82%,
  hsl(216deg 94% 51%) 91%,
  hsl(213deg 100% 50%) 100%
);
   border-top : 1px solid #0551b8;
   padding-top : 15px;
   padding-bottom : 15px;
 }

.header .logo-kampus
 { text-align : center;
 }

.header .logo-kampus img
 { width : 100%;
   max-width : 190px;
 }

.header .judul-kampus
 { padding-top : 10px;
 }

.header .judul-kampus .jenis-kampus
 { color : white;
   text-transform : uppercase;
   font-family : 'Lato-Bold' !important;
   font-size : 4vmin;
 }

.header .judul-kampus .nama-kampus
 { color : white;
   text-transform : uppercase;
   font-family : 'Lato-Bold' !important;
   font-size : 6vmin;
   font-weight : bold;
   line-height : 1.3;
 }

.header .judul-kampus .alamat-kampus
 { color : white;
   text-transform : uppercase;
   font-family : 'Lato-Bold' !important;
   font-size : 3vmin;
 }

.menu-bawah-header
 { background-color : #0707BC;
   border-top : 1px solid #030b71;
   box-shadow : 0px 3px 3px #030b71;
   font-family : 'Lato-Regular' !important;
 }

#navbar
 { z-index : 2;
 }

.menu-bawah-header .navbar
 { min-height : 30px;
 }

.menu-bawah-header .navbar-header .icon-bar
 { background-color : white;
 }

.menu-bawah-header .navbar .fa
 { color : white;
   padding-top : 5px;
 }

.menu-bawah-header .navbar-nav > li > a
 { padding : 10px;
   color : white;
 }

.menu-bawah-header .navbar-nav > li > a:active, .menu-bawah-header .navbar-nav > li > a:link, , .menu-bawah-header .navbar-nav > li > a:visited
 { color : white;
 }

.menu-bawah-header .navbar-nav > li > a:hover
 { background-color : #3333e6;
   color : white;
 }

.menu-bawah-header .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover
 { color : white;
   background-color : transparent;
 }

.menu-bawah-header .navbar-toggle
 { margin-right : 0px;
 }

.menu-bawah-header .navbar-default
 { border-radius : 0px;
   margin-bottom : 0px;
   background-color : transparent;
   border : 0px;
 }

.konten, .carousel-indicators
 { z-index : 1;
 }

.banner
 { margin-top : 20px;
 }

.banner #slide-gambar
 { padding-right : 0px;
 }

.banner #slide-gambar .carousel .item
 { min-height : 300px;
 }

.banner #slide-gambar .item .gambar-sampul
 { width : 100%;
   min-height : 372px;
   background-size : 100%;
   background-position : center center;
   background-repeat: no-repeat;
 }

.box
 { min-height : 300px;
   background-color : white;
 }

.box .box-judul
 { background-color : #2330e2;
   color : white;
   text-align : center;
   padding-top : 5px;
   padding-bottom : 5px;
   text-transform : uppercase;
   font-family : 'Lato-Bold' !important;
 }

.box .box-konten
 { padding : 20px;
   font-family : 'TiltNeon' !important;
   font-size : 18px;
   text-indent : 50px;
   text-align : justify;
 }

.box-pengumuman-berita
 { margin-top : 20px;
 }

.box-pengumuman-berita .box-pengumuman .col-md-12
 { padding-right : 0px;
 }

.box-pengumuman-berita .box-pengumuman .box
 { min-height : 323px;
 }


.box-pengumuman-berita .box-judul-pengumuman
 { text-align : center;
   border-bottom : 1px solid #ecf0f5;
   border-top : 3px solid #d2232a;
   padding-top : 5px;
   padding-bottom : 5px;
   font-family : 'Lato-Bold' !important;
   text-weight : bold;
 }

.box-pengumuman-berita .box-konten-2
 { padding : 20px;
   font-family : 'Lato-Regular' !important;
   font-size : 15px;
   text-align : justify;
   overflow : hidden;
 }

.box-pengumuman-berita .box-konten-2 a
 { cursor : pointer;
 }

.box-pengumuman-berita .box-konten-2 .tanggal-pengumuman
 { color : silver;
   font-family : 'Lato-Italic' !important;
 }

.box-pengumuman-berita .box-berita-kampus
 { position : relative;
   z-index : 1;
 }

.box-pengumuman-berita .box-berita-kampus .btnleft
 { position : absolute;
   top : calc(50% - 20px);
   left : 0px;
   z-index : 2;
   background-color : black;
   color : white;
   border : 0px;
   padding : 5px 15px 5px 15px;
   opacity : 0.8;
 }

.box-pengumuman-berita .box-berita-kampus .btnright
 { position : absolute;
   top : calc(50% - 20px);
   right : 0px;
   z-index : 2;
   background-color : black;
   color : white;
   border : 0px;
   padding : 5px 15px 5px 15px;
   opacity : 0.8;
 }

.box-pengumuman-berita .gambar-pengumuman
 { height : 177px;
   width : 100%;
   background-size : 100%;
   background-position : center center;
   background-repeat: no-repeat;
 }

.box-pengumuman-berita .box-berita-kampus .btnleft:active, .box-pengumuman-berita .box-berita-kampus .btnright:active
 { opacity : 0.2;
 }

.box-pengumuman-berita .box-berita-kampus .berita-kampus
 { background-color : #ecf0f5;
 }

.box-pengumuman-berita .box-berita-kampus .berita-kampus a
 { cursor : pointer;
 }

.box-pengumuman-berita .box-berita-kampus .berita-kampus a div
 { padding : 3px 10px 0px 10px;
   text-transform : uppercase;
   color : black;
   font-family : 'Lato-Bold' !important;
 }

.box-pengumuman-berita .box-berita-kampus .berita-kampus .tanggal-pengumuman
 { padding : 0px 10px 3px 10px;
 }

.box-pengumuman-berita .box-berita-kampus .berita-kampus-kiri
 { padding-right : 10px;
 }

.box-pengumuman-berita .box-berita-kampus .berita-kampus-kanan
 { padding-left : 10px;
 }

.box-pengumuman-berita .box-berita-kampus .box-pengumuman
 { padding-right : 0px;
 }

.box-program-studi
 { margin-top : 20px;
 }

.box-program-studi a:hover
 { text-decoration : none;
 }

.box-program-studi a:hover .program-studi
 { color : #d7ffd1;
 }

.box-program-studi .nopadding
 { padding-left : 0px;
   padding-right : 0px;
 }

.box-program-studi .program-studi
 { width : 100%;
   text-align : center;
   padding : 30px;
   color : white;
 }

.box-program-studi .program-studi .judul
 { font-family : 'Lato-Bold' !important;
   font-size : 20px;
   margin-bottom : 10px;
 }

.box-program-studi .sejarah-kampus
 { text-align : justify;
   font-family : 'SansationLight' !important;
   padding : 15px 0px;
 }

.lainnya
 { margin-top : 20px;
 }

.lainnya .box
 { min-height : 0px;
 }

.lainnya .mengapa-harus, .lainnya .vissi
 { padding-right : 7.5px;
 }

.lainnya .vissi, .lainnya .missi
 { padding-left : 7.5px;
 }

.lainnya .box-konten-2
 { padding : 20px;
   height : 260px;
   display : table-cell;
   vertical-align : middle;
   text-align : justify;
 }

.lainnya .box-konten-2 ol
 { padding-left : 20px;
 }

.footer
 { margin-top : 20px;
 }

.footer .footer-1
 { height : 20px;
   background-color : #1d2129;
 }

.footer .footer-1 a
 { color : #1d2129;
 }

.footer .footer-2
 { min-height : 100px;
   background-color : #171a21;
   color : white;
   padding-top : 20px;
   padding-bottom : 20px;
 }

@media screen and (max-width : 991px)
 {
   .judul-kampus
    { text-align : center;
    }

   .banner #slide-gambar, .box-pengumuman-berita .box-pengumuman, .box-pengumuman-berita .box-pengumuman .col-md-12
    { padding-right : 15px;
    }

   .box
    { min-height : 100px;
    }

   .padding-box, .box-pengumuman-berita .col-md-8, .footer .footer-2 .col-md-offset-4
    { margin-top : 20px;
    }

   .box-pengumuman-berita .box-berita-kampus .berita-kampus-kiri
    { padding-right : 15px;
    }

   .box-pengumuman-berita .box-berita-kampus .berita-kampus-kanan
    { padding-left : 15px;
    }

 }

@media screen and (max-width : 345px)
 { .menu-atas-header .pull-left
    { display : none;
    }
 }

input[type="text"]
 { border-radius : 3px;
 }

.page-numbers
 { border-left : 2px solid silver;
   border-right : 2px solid silver;
   padding : 3px 5px 3px 5px;
   color : darkgreen;
 }

.current
 { border : 1px solid green;
 }

.produk
 { display : grid;
   grid-template-columns : 1fr 1fr 1fr;
   gap : 10px;
 }

@media only screen and (max-width : 1200px)
 { .produk
    { grid-template-columns : 1fr 1fr;
    }
 }
@media only screen and (max-width : 900px)
 { .produk
    { grid-template-columns : 1fr;
    }
   form
    { padding-left : 10px;
      padding-right : 10px;
    }
 }