body, .bg-silver
 { background-color : #efeded;
 }

.bg-dark-silver
 { background-color : #777474;
 }

.main-bg-color
 { background-color : #af000d;
   color : white;
 }

.bg-white
 { background-color : white;
 }

.bg-donker
 { background-color : #37476b;
   margin-top : 15px;
 }

.kol-2-right
 { display : grid;
   grid-template-columns : auto 1fr;
   gap : 15px;
 }

.kol-2-right img
 { max-width : 450px;
   width : 100%;
 }

.navbar-default
 { border : 0px;
   background-color : #af000d;
   color : white;
 }
.navbar-default .navbar-nav > li > a
 { color : white;
   cursor : pointer;
 }

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover
 { background-color : #e30a1a;
   color : white;
 }

.navbar-default .navbar-toggle .icon-bar
 { background-color : white;
 }

.navbar-default .navbar-nav > li:hover
 { background-color : #e30a1a;
 }

.navbar-default .navbar-nav > li > a:hover
 { color : white;
 }

.navbar-header>.fa
 { padding : 10px 10px;
 }

.prodi
 { padding-top : 25px;
   padding-bottom : 25px;
 }

.prodi>center>a>button
 { border-radius : 25%;
   border-color : 1px solid white;
   background-color : #37476b;
   color : white;
   padding : 15px;
 }

.prodi>div
 { display : grid;
   grid-template-columns : 1fr 1fr 1fr 1fr 1fr;
   gap : 15px;
   padding : 15px 0px;
 }

.prodi>div>div
 { background-color : white;
   color : black;
   padding : 0px 0px;
   padding : 15px;
   text-align : center;
   color : #404040;
 }

.prodi>div>div>div>.fa
 { font-size : 80px;
 }

.ketua
 { text-align : center;
   margin-bottom : 10px;
 }

.ketua>img
 { max-height : 200px;
   clear : both;
   border-radius : 50%;
   margin-bottom : 10px;
 }

.ketua>div
 { font-weight : bold;
 }

.ketua>div:nth-child(3)
 { color : #af000d;
 }

.ketua>div:nth-child(3)>span:nth-child(2)
 { display : none;
 }

.kontainer
 { width : 100%;
   max-width : 1200px;
   position : relative;
   margin-left : auto;
   margin-right : auto;
 }

.header1
 { display : grid;
   grid-template-columns : auto 1fr;
   gap : 15px;
 }

.header1>div:nth-child(1)>div>ul
 { list-style-type : none;
   margin : 0px 0px;
   padding : 0px 0px;
 }

.header1>div:nth-child(1)>div>ul>li
 { float : left;
 }

.header1>div:nth-child(1)>div>ul>li>a
 { color : white;
   padding : 15px;
   display : inline-block;
 }

.header1>div:nth-child(1)>div>ul>li:hover
 { background-color : #8a050f;
 }

.header1>div:nth-child(2)>div
 { text-align : right;
 }

.header1>div
 { display : grid;
   grid-template-rows : 1fr auto 1fr;
 }

.header2
 { display : flex;
   flex-wrap : wrap;
   column-gap : 50px;
   row-gap : 10px;
   padding : 10px;
 }

.header2>div
 { display : grid;
   grid-template-rows : 1fr auto 1fr;
 }

.header2>div:nth-child(1)>div:nth-child(2)>img
 { max-height : 70px;
 }

.droplet
 { display : grid;
   grid-template-columns : auto auto;
   gap : 10px;
 }

.droplet>div:nth-child(1)
 { padding : 15px;
   width : 50px;
   height : 50px;
   background-color : #e40011;
   border-top-left-radius : 3px;
   border-top-right-radius : 50%;
   border-bottom-right-radius : 50%;
   border-bottom-left-radius : 50%;
   text-align : center;
   color : white;
 }

.droplet>div:nth-child(1)>.fa
 { font-size : 20px;
 }

.droplet>div:nth-child(2)>b
 { font-size : 20px;
   color : #e40011;
 }

.sampul>.row
 { width : 100%;
   padding-left : 0px;
 }

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

.sampul #slide-gambar .carousel .item
 { min-height : 385px;
 }

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

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

.box .box-judul
 { background-color : #af000d;
   color : white;
   text-align : center;
   padding-top : 5px;
   padding-bottom : 5px;
   text-transform : uppercase;
 }

.box .box-konten
 { padding : 15px;
   font-size : 15px;
   text-align : justify;
 }

.konten
 { color : white;
   padding : 25px 0px;
 }

.konten>div
 { display : grid;
   grid-template-rows : 1fr auto 1fr;
   font-size : 16px;
   text-align : justify;
 }

.margin-for-lg
 { margin-top : 15px;
 }

.sejarah>.box
 { min-height : 100px;
 }

.sejarah>.box>.box-konten
 { display : grid;
   grid-template-columns : 1fr 1fr;
   gap : 15px;
 }

.sejarah>.box>.box-konten>div
 { text-indent : 30px;
 }

.motto
 { padding : 15px;
   background : url('../gambar/books-library-room.jpg');
   background-position : top center;
   background-repeat : no-repeat;
   background-attachment : fixed;
   background-size : cover;
   color : white;
   text-shadow : 0px 0px 11px #000000;
   text-align : center;
 }

.motto>.kontainer
 { min-height : 250px;
   display : grid;
   grid-template-rows : 1fr auto 1fr;
 }

.motto>.kontainer>div
 { font-size : 18px;
 }

.motto>.kontainer>div>i
 { font-size : 40px;
 }

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

.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 : 325px;
 }


.box-pengumuman-berita .box-judul-pengumuman
 { text-align : center;
   border-bottom : 1px solid #ecf0f5;
   border-top : 3px solid #af000d;
   padding-top : 5px;
   padding-bottom : 5px;
   text-weight : bold;
 }

.box-pengumuman-berita .box-konten-2
 { padding : 20px;
   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;
 }

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

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

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

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

.dosen>div>div:nth-child(1)
 { width : 100%;
   height : 260px;
   background-position : center center;
   background-size : cover;
 }

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

.fasilitas-kampus
 { display : grid;
   grid-template-columns : 1fr 1fr 1fr;
   gap : 5px;
 }

.fasilitas-kampus .border-fasilitas:hover
 { background-color : #37476b;
 }

.fasilitas-kampus .border-fasilitas:hover h4
 { color : white;
 }

.fasilitas-kampus .border-fasilitas:hover hr
 { background-color : white;
 }

.fasilitas-kampus .border-fasilitas h4
 { color : #37476b;
 }

.fasilitas-kampus .border-fasilitas hr
 { margin : 10px 0px;
   background-color : #37476b;
   height : 1px;
   border : 0px;
 }

.fasilitas-kampus .border-fasilitas
 { border : 1px solid silver;
   text-indent : 0px;
   padding : 10px;
   width : 100%;
 }

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

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

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

@media (max-width : 1214px)
 { .header1>div:nth-child(2)>div
    { padding-right : 1px;
    }

   .konten, .prodi
    { padding : 25px 1px;
    }
 }

@media (max-width : 1213px)
 { .header1>div:nth-child(2)>div
    { padding-right : 2px;
    }

   .konten, .prodi
    { padding : 25px 2px;
    }
 }

@media (max-width : 1212px)
 { .header1>div:nth-child(2)>div
    { padding-right : 3px;
    }

   .konten, .prodi
    { padding : 15px 3px;
    }
 }

@media (max-width : 1211px)
 { .header1>div:nth-child(2)>div
    { padding-right : 4px;
    }

   .konten, .prodi
    { padding : 25px 4px;
    }
 }

@media (max-width : 1210px)
 { .header1>div:nth-child(2)>div
    { padding-right : 5px;
    }

   .konten, .prodi
    { padding : 25px 5px;
    }
 }

@media (max-width : 1209px)
 { .header1>div:nth-child(2)>div
    { padding-right : 6px;
    }

   .konten, .prodi
    { padding : 25px 6px;
    }
 }

@media (max-width : 1208px)
 { .header1>div:nth-child(2)>div
    { padding-right : 7px;
    }

   .konten, .prodi
    { padding : 25px 7px;
    }
 }

@media (max-width : 1207px)
 { .header1>div:nth-child(2)>div
    { padding-right : 8px;
    }

   .konten, .prodi
    { padding : 25px 8px;
    }
 }

@media (max-width : 1206px)
 { .header1>div:nth-child(2)>div
    { padding-right : 9px;
    }

   .konten, .prodi
    { padding : 25px 9px;
    }
 }

@media (max-width : 1205px)
 { .header1>div:nth-child(2)>div
    { padding-right : 10px;
    }

   .konten, .prodi
    { padding : 25px 10px;
    }
 }

@media (max-width : 1204px)
 { .header1>div:nth-child(2)>div
    { padding-right : 11px;
    }

   .konten, .prodi
    { padding : 25px 11px;
    }
 }

@media (max-width : 1203px)
 { .header1>div:nth-child(2)>div
    { padding-right : 12px;
    }

   .konten, .prodi
    { padding : 25px 12px;
    }
 }

@media (max-width : 1202px)
 { .header1>div:nth-child(2)>div
    { padding-right : 13px;
    }

   .konten, .prodi
    { padding : 25px 13px;
    }
 }

@media (max-width : 1201px)
 { .header1>div:nth-child(2)>div
    { padding-right : 14px;
    }

   .konten, .prodi
    { padding : 25px 14px;
    }
 }

@media (max-width : 1200px)
 { .header1>div:nth-child(2)>div
    { padding-right : 15px;
    }

   .konten, .prodi
    { padding : 25px 15px;
    }
 }

@media (max-width : 1150px)
 { .ketua>div:nth-child(3)>span:nth-child(1)
    { display : none;
    }
   .ketua>div:nth-child(3)>span:nth-child(2)
    { display : block;
    }
 }

@media (max-width : 1070px)
 { .ketua>img
    { max-height : 190px;
    }
 }

@media (max-width : 991px)
 { .padding-for-lg
    { padding-left : 15px;
      padding-right : 15px;
    }

   .margin-for-lg
    { margin-top : 0px;
    }

   .box
    { min-height : 100px;
    }

   .sampul #slide-gambar .carousel .item
    { min-height : 0px;
    }

   .sampul>.row>#slide-gambar>.row>.col-md-12
    { padding-right : 0px;
    }

   .navbar-default
    { margin-bottom : 0px;
    }

   .bg-donker
    { margin-top : 0px;
    }

   .kol-2-right
    { grid-template-columns : 1fr;
    }

   .prodi>div
    { grid-template-columns : 1fr 1fr 1fr;
    }

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

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

   .dosen
    { grid-template-columns : 1fr 1fr 1fr;
    }

@media (max-width : 805px)
 { .sampul #slide-gambar .item .gambar-sampul
    { min-height : 300px;
    }
 }

@media (max-width : 767px)
 { .dosen
    { grid-template-columns : 1fr 1fr;
    }
 }

@media (max-width : 600px)
 { .prodi>div
    { grid-template-columns : 1fr 1fr;
    }

   .sejarah>.box>.box-konten
    { grid-template-columns : 1fr;
    }

   .sampul #slide-gambar .item .gambar-sampul
    { min-height : 250px;
    }

   .fasilitas-kampus
    { grid-template-columns : 1fr 1fr;
    }
 }

@media (max-width : 543px)
 { .sampul #slide-gambar .item .gambar-sampul
    { min-height : 200px;
    }

   .dosen
    { grid-template-columns : 1fr;
    }

   .dosen>div>div:nth-child(1)
    { height : 360px;
    }

   .fasilitas-kampus
    { grid-template-columns : 1fr;
    }

 }