html{
scroll-behavior: smooth;
hyphens: auto;
hyphenate-character: auto;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.header {
padding: 25px 15px;
box-shadow: 0 6px 6px -4px grey;
position: relative;
z-index: 4;
border-bottom-right-radius: 20px;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.container{
width: 1080px;
margin: auto;
}
.body{
min-height: 55vh;
transition: 1s;
}
.logo-box{
width: 100%;
height: 100%;
text-align: center;
}
.logo-box img{
margin: auto;
width: 75%;
height: 75%;
cursor: pointer;
transition: 0.2s;
}
.logo-box img:hover{
transform: scale(1.1);
background-color: transparent;
}
.logo-box img:active{
transform: scale(1.2);
background-color: transparent;
}
.title-box{
text-align: center;
margin: auto 0;
position: relative;
transition: 0.5s;
}
.btn-nav{
position: absolute;
left: 0;
display: none;
border-radius: 5px;
}
.reg-btn-nav{
bottom: 0;
}
.sticky-btn-nav{
position: fixed;
top: 0;
box-shadow: 0 6px 6px -4px grey;
background-color: white;
transition: 0.5s;
z-index: 5;
}
.btn-nav button{
padding: 5px 8px;
margin: 6px 5px;
background-color: #567cb8;
border-style: solid;
border-radius: 3px;
border-color: #000;
outline: none;
transition: 1s;
}
.btn-nav button:active{
transform: scale(1.2);
}
.sb{
position: absolute;
background-color: #e8f3fc;
width: 100px;
height: 0;
transition: 0.5s;
overflow: hidden;
box-shadow: 0 6px 6px -4px grey;;
display: none;
border-bottom-right-radius: 20px;
}
.sb a{
display: block;
text-align: left;
text-decoration: none;
padding: 10px 9px;
font-family: Arial, sans-serif;
font-weight: bold;
transition: 0.4s;
color: #c5c5c5;
}
.sb a:ACTIVE{
color: red;
background-color: transparent;
}
.sb .atv{
color: #536690;
}
.title-box .title{
font-family: 'nunito';
font-size: 200%;
color: #33c44b;
-webkit-text-stroke: 1px #1d5926;
}
.itwide{
display: inline-block;
}
.itnarrow{
display: none;
}
.arrasyid{
display: inline-block;
font-family: "Alfa Slab One", serif;
font-weight: bold;
}
.title-box .des{
font-size: 120%;
font-family: sans-serif;
}
.nav{
text-align: center;
transition: 0.5s;
width: 80%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-family: Arial, sans-serif;
font-weight: bold;
}
.reg-nav ul{
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.sticky-nav{
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 500px;
text-align: center;
transition: 0.5s;
height: 50px;
}
.sticky-nav ul{
box-shadow: 0 6px 6px -4px grey;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.nav ul{
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fbfbfb;
transition: .4s;
}
.nav li{
float: left;
}
.nav li a{
display: block;
padding: 8px 14px;
text-decoration: none;
transition: 1s;
}
.nav li a:not(.atv){
color: #bfbfbf;
}
.nav li a:hover{
color: #273844;
}
li .atv{
color: #536690;
}
.nav .drop{
display: inline-block;
}
.drop .isi-drop{
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 6px 6px -4px grey;
text-align: left;
}
.drop .isi-drop li{
float: none;
}
.drop:hover .isi-drop{
display: block;
}
.footer{
background-color: #424242;
font-family: sans-serif;
color: white;
font-weight: bold;
}
.kotak-footer{
padding: 15px;
}
.kotak-footer iframe{
width: 100%;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.kotak-footer .judul{
color: #7d7d7d;
font-size: 120%;
}
.kotak-footer .isi{
color: #b0b0b0;
font-size: 90%;
margin-bottom: 10px;
}
.isi a{
text-decoration: none;
color: inherit;
position: relative;
z-index: 4;
}
.isi .fa {
padding: 14px 10px;
margin: 4px;
font-size: 20px;
width: 50px;
text-align: center;
}
.isi .fa-facebook {
background: #3B5998;
color: white;
}
.isi .fa-twitter {
background: #55ACEE;
color: white;
}
.isi .fa-instagram{
background: white;
color: red;
}
.isi ul{
list-style-type: square;
padding: 0;
}
.isi li{
margin-left: 26px;
}
.body{
}
.slider{
width: 100%;
height: 60vh;
position: relative;
}
.slider .btn-slide{
font-size: 300%;
position: absolute;
z-index: 3;
top: 50%;
transform: translateY(-50%);
color: white;
background-color: rgba(0, 0, 0, 0.2);
padding: 5px;
cursor: pointer;
transition: 0.5s;
}
.slider .btn-slide:hover{
background-color: white;
}
.slider .left{
left: 0;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.slider .right{
right: 0;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.slider .dots{
position: absolute;
z-index: 3;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.dots .dot{
border: 1px solid grey;
border-radius: 7.5px;
width: 50px;
height: 15px;
margin: 2px;
float: left;
transition: 0.5s;
cursor: pointer;
}
.dots .active-dot{
background-color: rgba(255, 255, 255, 0.8);
}
.dots .dot:hover{
background-color: white;
}
.slides{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.slides .slide{
width: 100%;
height: 100%;
display: none;
overflow: hidden;
}
.slide .slide-content{
width: 100%;
height: 100%;
color: white;
background-size: cover;
background-position: center;
}
.slide-content .slide-container{
width: 100%;
height: 100%;
/* background: radial-gradient(ellipse at right, transparent, rgba(0,0,0,1));*/
/*background: radial-gradient(circle at 100%, rgba(0,0,0,.2), rgba(0,0,0,.8) 50%);*/
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5), rgba(0, 0, 0, .9));
position: relative;
}
.slide-content .caption{
width: 70%;
position: absolute;
bottom: 10%;
left: 10%;
}
.slide-content .caption h1{
font-family: 'Alata';
font-size: 160%;
color: white;
margin: 0;
}
.slide-content .caption p{
font-family: 'Nunito';
font-size: 90%;
color: #f8f8f8;
}
.slide-content .caption a{
font-family: 'Amaranth';
text-decoration: none;
padding: 10px 16px;
display: inline-block;
background-color: grey;
color: white;
cursor: pointer;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.slides .red{
background-color: red;
}
.slides .blue{
background-color: blue;
}
.slides .green{
background-color: green;
}
.slides .pink{
background-color: pink;
}
.sambutan{
min-height: 50vh;
font-family: 'Arial';
}
.para .photoprofil{
clear: left;
float: left;
padding: 10px;
width: 200px;
}
.photoprofil img{
width: 100%;
}
.para div{
font-family: 'Nunito';
font-size: 120%;
text-align: justify;
margin: 15px 0;
hyphens: auto;
}
.para div .n{
font-weight: bold;
text-decoration: underline;
}
.para div .j{
font-size: 90%;
display: block;
font-weight: bold;
}
.snow{
background-color: #fcfcfc;
}
.snowtrans{
background-color: rgba(252, 252, 252, 0.9);
}
.textheader{
color: white;
background-color: #00364D;
text-align: center;
margin: 5px;
padding: 5px;
font-family: Alata;
box-shadow: 0 6px 6px -4px grey;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.kartu-berita{
margin: 5px;
color: #707070;
font-family: sans-serif;
transition: 0.3s;
}
.kartu-berita div{
background-color: white;
}
.kartu-berita:hover{
background-color: #f5f6f7;
border-radius: 10px;
}
.kartu-berita .gambar-berita{
height: 150px;
background-size: cover;
background-position: center;
border-top-right-radius: 20px;
}
.kartu-berita .judul-berita{
font-size: 120%;
padding: 10px 10px 0 10px;
overflow: hidden;
white-space: nowrap;
position: relative;
}
.kartu-berita .judul-berita::before{
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(to right, transparent, transparent, transparent,white);
}
.kartu-berita .des-berita{
padding: 0px 10px;
border-bottom-left-radius: 20px;
}
.des-berita .waktu{
color: #898989;
padding: 5px 0 5px 18px;
font-size: 70%;
border-bottom-left-radius: 20px;
}
.des-berita .naskah{
color: grey;
padding: 6px 0;
position: relative;
overflow: hidden;
white-space: nowrap;
}
.des-berita .naskah::before{
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(to right, transparent, transparent, white);
}
.des-berita a{
text-decoration: none;
color: yellow;
background-color: grey;
padding: 3px;
}
.des-berita a:hover{
color: #ffc524;
background-color: #6b6b6b;
}
.main-runtext{
width: 100%;
background-color: #cff09e;
font-family: Arial;
font-weight: bold;
cursor: pointer;
color: #0b486b;
transition: 0.5s
}
.main-runtext:hover{
color: blue;
}
.main-runtext:active{
background-color: green;
}
.post{
padding: 10px;
}
.lainnya{
text-decoration: none;
background-color: #006b91;
color: white;
padding: 4px 14px;
text-decoration: none;
margin: 0 0 20px 14px;
}
.lainnya:hover{
color: #ffc524;
background-color: #6b6b6b;
}
.post h1{
color: #60666e;
font-family: 'Nunito';
padding: 10px;
}
.post .btn-share{
padding: 20px;
text-align: center
}
.post .btn-share .btn{
}
.post .btn-share .share{
font-size: 130%;
font-family: Brush Script MT, Brush Script Std, cursive;
}
.post .btn-share .btn a{
margin: 10px;
padding: 10px 0;
width: 50px;
text-decoration: none;
text-align: center;
font-size: 200%;
color: white;
}
.post .btn-share .fa-facebook{
background-color: #3b5998;
}
.post .btn-share .fa-twitter{
background-color: #1DA1F2;
}
.post .btn-share .fa-whatsapp{
background-color: #075e54;
}
.post .btn-share .fa-telegram{
background-color: #0088cc;
}
.post .btn-share .fa-envelope{
background-color: #D44638;
}
.post .admin{
font-family: courier,arial,helvetica;
color: grey;
font-size: 90%;
margin-left: 5%;
}
.post .gbr{
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 40vh;
}
.post .isi{
color: #54585c;
font-size: 120%;
font-family: 'Nunito';
}
.post .isi p{
margin: 14px 0;
}
.post .isi img{
width: 100%;
}
.post-title{
font-weight: bold;
font-size: 200%;
font-family: 'Monomakh';
color: #272d38;
}
.kartu-berita .kks{
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.kbg{
border-top-left-radius: 20px;
float: left;
width: 40%;
padding: 0 4px;
}
.kbg div{
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 70px;
border-top-left-radius: 20px;
}
.kbd{
margin-top: 5px;
width: 60%;
float: left;
user-select: none;
font-size: 50%;
}
.kb-judul{
color: #313233;
font-size: 130%;
font-weight: bold;
}
.kb-waktu{
}
.kb-naskah{
font-size: 110%;
color: #585a5c;
padding: 4px;
}
.palkat{
background-color: #dee5e7;
padding-bottom: 30px;
}
.palkat .logo{
width: 100%;
display: flex;
margin: 30px 0 10px 0;
}
.palkat .smp{
font-weight: bold;
font-size: 110%;
}
.palkat .logo img{
width: 100px;
margin: auto;
}
.info{
font-family: 'Nunito';
color: #090909;
}
.info .img{
display: flex;
width: 100%;
}
.info .img img{
width: 80%;
margin: auto;
}
marquee{
padding: 10px 0;
width: 100%;
}
marquee div{
width: 100%;
}
.guru{
padding: 10px;
}
.fotoguru{
width: 100%;
display: flex;
}
.fotoguru img{
width: 80%;
margin: auto;
border-radius: 5px;
}
.idguru{
text-align: center;
padding-bottom: 30px;
}
.idguru span{
display: block;
font-family: 'Nunito';
color: grey;
}
.idguru .nama{
font-weight: bold;
font-size: 110%;
color: #545454;
}
.idguru .pendidikan{
}
.abu{
background-color: #f2f2f2;
border-radius: 10px;
}
.tentang{
font-family: 'Nunito';
font-size: 120%;
margin: 5px;
border-radius: 6px;
padding: 10px;
}
.tentang ol, .tentang ul{
padding-left: 30px;
}
.tentang .headertentang{
font-weight: bold;
font-size: 130%;
color: #1d538a;
}
.tentang table{
margin-left: 8px;
}
.tentang h3{
margin-top: 20px;
}
.agendatable{
width: 100%;
border-collapse: collapse;
}
.agendatable tr:nth-child(even){
background-color: #f6f6f6;
}
.agendatable tr td{
padding: 12px;
}
.agendatable tr td div{
display: block;
}
.agendatable tr td .judul{
font-weight: bold;
}
.agendatable tr td .isi{
color: grey;
font-size: 90%;
}
.calendercontainer{
width: 100%;
padding: 20px;
background-color: #b4cdd6;
display: flex;
color: #f9f9f9;
}
.calendercontainer h3{
margin-left: 20px;
}
.calendercard{
font-weight: bold;
font-family: 'Alata';
margin: auto;
display: flex;
}
.calendertgl{
float: left;
text-align: center;
font-size: 320%;
padding: 10px;
background-color: white;
color: #b4cdd6;
}
.calenderdate{
float: left;
padding: 10px;
}
.calenderdate div{
display: block;
}
.calenderday{
font-size: 200%;
}
.video{
padding: 20px 10px;
height: 300px;
display: flex;
}
.video iframe{
width: 100%;
margin: auto;
}
.gallerifoto{
padding: 8px;
box-shadow: 0 4px 20px -14px grey;
}
.gallerifoto img{
width: 100%;
}
.gallerifoto div{
width: 100%;
padding: 8px;
color: grey;
font-family: 'Syne Tactile', cursive;
text-align: center;
}
.modal{
background: rgba(0, 0, 0, 0.3);
position: fixed;
z-index: 1000;
width: 100%;
height: 100vh;
top: 0;
left: 0;
display: none;
}
.modal-bg{
position: relative;
width: 100%;
height: 100%;
}
.modal-img{
position: absolute;
width: 40%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 20px -12px black;
cursor: pointer;
}
.modal-btn-close{
position: absolute;
top: 0;
right: 0;
}
.modal-btn-close a{
color: white;
}
.iklanmodal{
animation-name: fadein;
animation-duration: 5s;
}
#konfirmasi{
text-align: center;
}
.publish, #konfirmasi button, #konfirmasi input{
padding: 4px;
margin: 2px;
border-radius: 6px;
}
@media screen and (max-width: 1080px){
.container{
width: 100%;
}
.slide-content .caption h1{
font-size: 110%;
}
.slide-content .caption p{
font-size: 75%;
}
.slider .btn-slide{
font-size: 200%;
}
.isi-sambutan .para div{
margin: 15px 15px;
}
.kotak-footer{
padding: 15px;
}
.title-box{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
@media screen and (max-width: 878px){
}
@media screen and (max-width: 862px){
}
@media screen and (max-width: 770px){
.nav li a{
font-size: 80%;
}
}
@media screen and ( max-width: 720px){
.modal-img{
width: 70%;
}
.logo-box img{
width: 15%;
height: 15%;
}
.tentang{
font-size: 100%;
}
[class*="col-"] {
width: 100%;
padding: 4px 0;
}
.guru{
padding: 10px;
}
.kotak-footer{
padding: 8px;
}
.post .isi{
font-size: 90%;
padding: 8px;
}
.header{
height: 270px;
}
}
@media screen and (max-width: 590px){
.post-title{
font-size: 120%;
}
.des-berita .naskah{
font-size: 80%;
}
.des-berita .waktu{
font-size: 70%;
}
.kartu-berita .judul-berita{
font-size: 100%;
}
.textheader{
font-size: 90%;
}
.post .btn-share .btn a{
font-size: 100%;
width: 35px;
margin: 2px;
}
.itwide{
display: none;
}
.itnarrow{
display: inline-block;
}
.nav{
display: none;
}
.btn-nav{
display: block;
}
.sb{
display: block;
}
.header{
height: auto;
padding : 15px 0 0 0;
}
.title-box{
position: relative;
}
.title-box .title{
font-size: 100%;
}
.para div{
font-size: 110%;
}
.slide .slide-content{
background-size: cover;
background-position: 70% 50%;
}
}
@media screen and (max-width: 410px){
.para div{
font-size: 100%;
}
}
@media screen and (max-width: 336px){
.modal-img{
width: 90%;
}
.title-box .title{
font-size: 100%;
}
.title-box .title div{
top:50%;
transform: translateY(-50%);
}
.para .photoprofil{
width: 90%;
padding: 0;
margin: 0;
float: none;
text-align: center;
}
.photoprofil img{
width: 80%;
border-radius: 5px;
}
}
.fromleft{
animation-name: fromleft;
animation-duration: 1s;
}
@keyframes fromleft{
from {
transform: translateX(-30%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.fromright{
animation-name: fromright;
animation-duration: 1s;
}
@keyframes fromright{
from {
transform: translateX(30%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadein{
from{
opacity: 0;
}
to{
opacity: 1;
}
}