@font-face
 { font-family : 'EncodeSansCompressed-Bold';
   src : url('../fonts/Encode-Sans-Compressed/EncodeSansCompressed-Bold.ttf');
 }

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

body
 { 
 }

html
 { scroll-behavior : smooth;
 }

.kontainer
 { position : relative;
   margin-left : auto;
   margin-right : auto;
   max-width : 1220px;
   padding-left : 20px;
   padding-right : 20px;
 }

.header
 { background : url('../img/header.png');
   background-size : 100% auto;
 }

.header .line
 { padding : 10px 0px;
   font-family : 'EncodeSansCompressed-Bold';
   color : #717d72;
   display : grid;
   grid-template-columns : auto 1fr;
   gap : 5px;
 }

.header .line img
 { height : 25px;
 }

.header .line:last-child
 { text-align : right;
 }

img#line
 { width : 100%;
 }

.header .konten
 { display : grid;
   grid-template-columns : auto 1fr auto auto;
   gap : 10px;
   padding-top : 20px;
   padding-bottom : 20px;
 }

.header .konten img
 { max-width : 400px;
   width : 100%;
 }

.header .konten .contact
 { display : grid;
   grid-template-columns : auto;
   align-items : center;
 }

.header .konten .contact .box
 { background : #009c54;
   padding : 5px 8px;
   border-radius : 10px;
 }

.header .konten .contact .fa
 { font-size : 20px;
   color : white;
 }

.header .konten .contact .keterangan a
 { font-size : 18px;
   font-weight : bold;
   color : #009c54;
 }

#navbar
 { position : relative;
   z-index : 1;
 }

#slide-gambar
 { display : grid;
   grid-template-columns : 3fr 1fr;
   gap : 20px;
 }

.banner-slide
 { background-color : #ecf0f5;
   padding : 20px 0px;
 }

.banner-slide .jurusan
 { font-family : 'Lato-Regular';
   color : #555;
   display : grid;
   grid-template-rows : auto 1fr;
 }

.banner-slide .jurusan .judul
 { text-align : center;
   padding : 5px;
   background-color : #009c54;
   color : white;
   font-weight : bold;
   border-bottom : 4px solid #09dd7b;
 }

.banner-slide .jurusan .konten
 { border-left : 1px solid silver;
   border-right : 1px solid silver;
   border-bottom : 1px solid silver;
   background-color : white;
   grid-template-rows : auto;
 }

.aktivitas
 { background-color : #ecf0f5;
   padding-bottom : 20px;
 }

.aktivitas .kontainer
 { display : grid;
   grid-template-columns : 1.5fr 3fr;
   gap : 20px;
 }

.aktivitas .kontainer .berita
 { background-color : white;
   border-left : 1px solid silver;
   border-right : 1px solid silver;
   border-bottom : 1px solid silver;
   border-top : 4px solid #09dd7b;
   border-radius : 4px;
 }

.aktivitas .kontainer .berita .judul
 { font-family : 'Lato-Regular';
   font-weight : bold;
   color : #5b5b5b;
   border-bottom : 1px solid silver;
   padding : 13px 10px 10px 10px;
   display : grid;
   grid-template-columns : 1fr auto;
   align-items : center;
 }

.aktivitas .kontainer .berita .judul a:hover
 { text-decoration : unset;
 }

.aktivitas .kontainer .berita .item-slide
 { font-family : 'Lato-Regular';
 }

.aktivitas .kontainer .berita:nth-child(1) .konten
 { padding : 10px;
   gap : 10px;
   display : grid;
   grid-template-columns : auto 1fr;
 }

.aktivitas .kontainer .berita:nth-child(1) .konten>div:nth-child(2)
 { display : grid;
   grid-template-rows : auto 1fr;
   gap : 5px;
   width : 100%;
 }

.aktivitas .kontainer .berita:nth-child(1) .text-titik-titik a
 { font-weight : bold;
   color : #009c54;
 }

.aktivitas .kontainer .berita:nth-child(2) .text-titik-titik a
 { font-weight : bold;
   color : #555;
 }

.aktivitas .kontainer .berita:nth-child(1) .konten>div:nth-child(2)>div:nth-child(2)
 { color : #ac9e9e;
   font-style : italic;
   font-size : 12px;
 }

.aktivitas .kontainer .berita:nth-child(2) .konten
 { padding : 10px;
 }

.dua-kolom
 { display : grid;
   grid-template-columns : auto 1fr;
   gap : 10px;
   align-items : center;
 }

.button1
 { padding : 5px;
   border : 1px solid #009c54;
   border-radius : 5px;
   color : #009c54;
   font-weight : bold;
   user-select : none;
   transition : background-color 0.4s ease;
 }

.button1:hover
 { background-color : #04b764;
   color : white;
 }

.button1:active
 { background-color : #09e881;
   color : white;
 }

.button2
 { padding : 5px;
   border : 1px solid #8f8f9d;
   border-radius : 5px;
   color : #8f8f9d;
   font-weight : bold;
   user-select : none;
   background-color : white;
   transition : background-color 0.4s ease;
   min-height : 30px;
 }

.button2:hover
 { background-color : #b1b1b1;
   color : white;
 }

.button2:active
 { background-color : #949594;
   color : white;
 }

.text-titik-titik
 { width : 100%;
   overflow : hidden;
   text-overflow : ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* Jumlah baris maksimal */
   -webkit-box-orient: vertical;
 }

.ikon-kalender
 { width : 50px;
   height : 75px;
   padding-top : 5px;
   border-radius : 5px;
   display : grid;
   grid-template-rows : 2fr 1.5fr;
   overflow : hidden;
 }

.ikon-kalender>div:nth-child(1)
 { background-color : #e1e1e2;
   position : relative;
 }

.ikon-kalender>div:nth-child(1)>div:nth-child(1)
 { width : 8px;
   height : 8px;
   background-color : #000;
   margin-top : 5px;
   border-radius : 4px;
   position : absolute;
   left : 11px;
 }
 
.ikon-kalender>div:nth-child(1)>div:nth-child(2)
 { width : 8px;
   height : 8px;
   background-color : #000;
   margin-top : 5px;
   border-radius : 4px;
   position : absolute;
   right : 11px;
 }
 
.ikon-kalender>div:nth-child(1)>div:nth-child(3)
 { color : black;
   width : 100%;
   text-align : center;
   margin-top : 15px;
 }

.ikon-kalender>div:nth-child(2)
 { background-color : #009c54;
   color : white;
   padding : 5px;
   text-align : center;
   font-style : italic;
 }

.ikon-kalender>div:nth-child(1)>div>div
 { width : 4px;
   height : 20px;
   background-color : #b8b5b5;
   margin-left : 2px;
   margin-top : -15px;
   border-radius : 5px;
 }

.about-us
 { padding-top : 20px;
   padding-bottom : 20px;
   background-color : #ecf0f5;
 }

.about-us .kontainer
 { text-align : center;
 }

.about-us .judul
 { background-color : #009c54;
   display : inline-block;
   padding : 10px;
   min-width : 200px;
   color : white;
   border : 1px solid #057541;
   font-weight : bold;
   text-transform : uppercase;
 }

.about-us .konten
 { background-color : white;
   padding : 40px 20px 20px 20px;
   margin-top : -20px;
   border : 1px solid silver;
   border-radius : 4px;
   text-align : justify;
 }

.about-us .konten ul li, .about-us .konten ol li
 { margin-left : 25px;
 }

.about-us .konten h3
 { margin-top : 0px;
   border-bottom : 1px solid silver;
   padding-bottom : 10px;
 }

.about-us .konten img
 { width : 100%;
   max-width : 250px;
   float : left;
   margin-right : 10px;
   margin-top : 10px;
   margin-bottom : 10px;
 }

.about-us .konten ol
 { margin-left : 15px;
 }

.detail-jurusan
 { background-color : #ecf0f5;
   padding : 40px 0px 20px 0px;
 }

.detail-jurusan .kontainer
 { display : grid;
   grid-template-columns : 1fr 1fr;
   column-gap : 20px;
   row-gap : 40px;
 }

.detail-jurusan .kontainer .item
 { background-color : white;
   padding : 0px 20px 20px 20px;
   border : 1px solid silver;
   border-radius : 4px;
   text-align : justify;
   text-align : center;
 }

.detail-jurusan .kontainer .item .judul
 { background-color : #009c54;
   padding : 10px;
   min-width : 200px;
   color : white;
   border : 1px solid #057541;
   text-align : center;
   text-transform : uppercase;
   margin-top : -20px;
   font-weight : bold;
 }

.detail-jurusan .kontainer .item .konten
 { text-align : justify;
   margin-top : 10px;
 }

.testimoni
 { width : 100%;
   background : url('../img/bg_testimoni.jpg');
   background-size : cover;
   background-position : center center;
   background-repeat : no-repeat;
   position : relative;
   border-top : 1px solid #1c2f1e;
   border-bottom : 1px solid #1c2f1e;
   padding : 100px 0px;
 }

.testimoni .layer
 { width : 100%;
   height : 100%;
   position : absolute;
   background : black;
   opacity : 0.8;
   top : 0px;
   left : 0px;
 }

.footer
 { background-color : #2f4b32;
 }

.footer .kontainer
 { display : grid;
   grid-template-columns : 1fr 1fr 1fr;
   gap : 20px;
   color : white;
   padding : 20px;
   text-align : justify;
   line-height : 2em;
 }

.footer .kontainer hr
 { margin : 10px 0px;
 }

.footer .kontainer ol
 { margin-left : 15px;
 }

.footer .kontainer ul
 { list-style-type : none;
 }

.footer .kontainer img
 { width : 100%;
   margin-bottom : 10px;
 }

.footer2
 { background-color : #192d1c;
   color : white;
   text-align : center;
   padding : 20px;
 }

.footer2 .kontainer a
 { color : #00c215;
   font-weight : bold;
 }

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

.list-berita
 { display : grid;
   grid-template-columns : 1fr 1fr 1fr;
   gap : 10px;
   padding-top : 10px;
 }

@media only screen and (max-width : 500px)
 { .about-us .konten img
    { max-width : 500px;
    }
 }

@media only screen and (max-width : 799px)
 { .header .konten img
    { width : 100%;
    }
 }

@media only screen and (max-width : 767px)
 { .list-berita
    { grid-template-columns : 1fr 1fr;
    }
 }

@media only screen and (max-width : 1204px)
 { #slide-gambar
    { grid-template-columns : 3fr 1.2fr;
    }
 }

@media only screen and (max-width : 1141px)
 { #slide-gambar
    { grid-template-columns : 3fr 1.4fr;
    }
 }

@media only screen and (max-width : 1102px)
 { #slide-gambar
    { grid-template-columns : 3fr 1.6fr;
    }
 }

@media only screen and (max-width : 1068px)
 { #slide-gambar
    { grid-template-columns : 3fr 1.8fr;
    }
 }

@media only screen and (max-width : 1048px)
 { #slide-gambar
    { grid-template-columns : 1.8fr 1fr;
    }
 }

@media only screen and (max-width : 1042px)
 { #slide-gambar
    { grid-template-columns : 1fr;
      gap : 0px;
    }
 }

@media only screen and (max-width : 966px)
 { .banner-slide .jurusan .konten .baris
    { text-align : center;
    }
   .banner-slide
    { padding : 0px 0px;
    }
   .banner-slide .kontainer
    { padding-left : 0px;
      padding-right : 0px;
    }
   .aktivitas
    { padding-top : 20px;
    }
 }

@media only screen and (max-width : 941px)
 { .header .konten
    { grid-template-columns : auto auto;
    }
   .header .konten img
    { grid-column: 1 / 3;
      max-width : none;
    }
   .header .konten .blank
    { grid-column: 1 / 3;
    }
   .footer .kontainer
    { grid-template-columns : 1fr 1fr;
    }
 }

@media only screen and (max-width : 1070px)
 { .aktivitas .kontainer
    { grid-template-columns : 2fr 3fr;
    }
 }

@media only screen and (max-width : 895px)
 { .aktivitas .kontainer
    { grid-template-columns : 1fr;
    }
 }

@media only screen and (max-width : 640px)
 { .detail-jurusan .kontainer
    { grid-template-columns : 1fr;
    }
   .footer .kontainer
    { grid-template-columns : 1fr;
    }
   .list-berita
    { grid-template-columns : 1fr;
    }
 }

@media only screen and (max-width : 519px)
 { .header .konten
    { grid-template-columns : auto;
    }
   .header .konten img
    { grid-column: 1 / 2;
      max-width : none;
    }
   .header .konten .blank
    { grid-column: 1 / 2;
    }
   .carousel-caption h3
    { font-size : 12px;
    }
 }