.navbar-toggler
{
    margin-top: 10px;
}

.floatRight
{
    float: left;
    padding-right: 20px;
}

.navbar-nav li
{
    padding: 5px;
}


.carousel-inner>.carousel-item>img{
    display: block;
    height: auto;
    max-width: 100%;
    line-height: 1;
    width: 100%;
    min-height: 0;
}


#Footer-ContactUs
{
    font-size: x-large;
}

#demo-depan
{
    padding-top: 80px;
}

.judul
{
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 15px;
	color: white;
    opacity: 0;
    letter-spacing: 3px;
    text-align: center;
}
.garisJudul
{
    border-bottom-style: solid; 
    border-bottom-color: white;
}
.garisJudul-black
{
    border-bottom-style: solid; 
    border-bottom-color: black;
}

.subjudulPhilo
{
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 15px;
	color: black;
	opacity: 0;
}

.isiPhilo
{
    letter-spacing: 1px;
}

hr
{
    border-color: black;
}
#hitam
{
    color: black;
}

.isi
{
    opacity: 0;
}


.flyin
{
    animation-name: fly-in;
    animation-duration: 2s;
    animation-fill-mode: backwards;
}

@keyframes fly-in
{
    from
    {
        opacity: 0;
        transform: translate(0,100px);
    }
    to
    {
        opacity: 1;
        transform: translate(0,0);
    }
}

.JudulOnCall
{
    margin-bottom: 5vw;
    margin-top: 5vw;
}

.JudulHR
{
    margin-bottom: 1.5vw;
    margin-top: 1.5vw;
}


.padding-0
{
    padding-right:0;
    padding-left:0;
}

.padding-20
{
    padding-left: 20px;
    padding-right: 20px;
}

.caption
{
    margin-top: 10px;
    margin-bottom: 10px;
}

.kotak
{
    margin: 50px auto;
    position: relative;
    width: 100%;
    cursor:pointer;
}

.in-box {
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.8);
}

.kartu, .kartu2 {
    width: 50%;
    height: 50%;
    text-align: center;
    background-color: crimson;
    text-decoration: none;
    color: white;
    transition: 0.3s;
    padding-bottom:40px;
}

.kartuBesar
{
    width: 100%;
}

.kartu:hover{
    background-color: white;
    color: crimson;
}

.kartu img, .kartu2 img {
    width: 100%;
    margin-bottom: 20px;
}

.line {
	position: absolute;
	width: 120px;
	height: 5px;
	margin: 0px 50%;
	left:-60px;
	background-color: white;
   }
.line2 {
	position: absolute;
	width: 120px;
	height: 5px;
	transform: translate(-20px,0px);
	background-color: white;
	z-index: 999;
}
.line2x{
	margin: auto;
	height: 3px;
	width: 80px;
	color: white;
	/*box-shadow: 0px 3px 5px;*/
	z-index: 99;
}
.kartu:hover .line2{
	transition: 0.3s;
   background-color: crimson;
   z-index: 999;
}

.kartu:hover isi{
	text-decoration: none;
	transition: 0.3s;
	color: crimson;
}
.kartu{
	z-index: 1000;
}
.kartu:hover li{
	transition: 0.3s;
	color: crimson;
}
.kartu:hover .line2x{
	transition: 0.3s;
	color: crimson;
	background-color: crimson;
	z-index: 998;
 }

.kotak > .in-box > a
{
	text-decoration: none;
}

.kartu li
{
    list-style-type: none;
}

.in-box li
{
    font-size: x-large;
    text-transform: uppercase;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: white;
    font-weight: bold;
}

.info
{
    margin-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    color: white;
}
#foto-message
{
    width: 70%;
}
#message
{
    font-size: x-large;
}
#PD-jabatan
{
    font-size: large;
}
#kotak
{
    background: white;
    border-radius: 25px;
    opacity: 0.7;
}
#org
{
    width: 100%;
    border-radius: 25px;
    margin: 25px;
    opacity: 1;
}
.kotak-org
{
    margin: 25px;
}
.darken-PD 
{
    background-image: 
      linear-gradient(
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.6)
      ),
      url('../Gambar/Carousel/5-min.jpg');
      color: white;
  }
.darken-service 
{
    background-image: 
      linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
      ),
      url('../Gambar/Background1-min.png');
      color: white;
}
.darken-contact 
{
    background-image: 
      linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
      ),
      url('../Gambar/contact-min.jpg');
      color: white;
      background-size: cover;
      background-attachment: fixed;
}
.darken-board 
{
    background-image: 
      linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
      ),
      url('../Gambar/Board/bg2-min.JPG');
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
}
.darken-index
{
    background-image: 
      linear-gradient(
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.6)
      ),
      url('../Gambar/index-2-min.JPG');
      min-height: 100vh;
      width: 100vw;
      background-size: cover;
      color: white;
      letter-spacing: 3px;
      font-weight: 100;
}  
.darken-vision
{
    background-image: 
      linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
      ),
      url('../Gambar/vision-min.jpg');
      background-size: cover;
      background-attachment: fixed;
      color: black;
}
.darken-org
{
    background-image: 
      linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
      ),
      url('../Gambar/org-min.JPG');
      background-size: cover;
      background-attachment: fixed;
      color: white;
      background-position: center top;
}
.darken-client
{
    background-image: 
      linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
      ),
      url('../Gambar/Client-min.jpg');
      color: white;
      background-size: cover;
      background-attachment: fixed;
      height: 100%;
      overflow: hidden;
}

.darken-cert
{
    background-image: 
      linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
      ),
      url('../Gambar/Office GBO-min.jpg');
      color: white;
      background-size: cover;
      background-attachment: fixed;
      background-position-y: 40%; 
} 

.iframe-rwd iframe 
{
    max-width: 100%;
    max-height: 100%;
}
#logo-index
{
    width: 60%;
}

#pt-index
{
    font-size: xx-large;
    font-weight: bold;
    border-bottom-style: solid; 
    border-bottom-color: white;
}
#desc-index
{
    font-size: x-large;
}
#desc2-index
{
    font-size: xx-large;
    color: yellow;
    font-weight: bolder;
}
.index-margin
{
    margin-top: 4rem;
}
#particles
{
    position: absolute;
    width: 96vw;
    height: 75vh;
}

.dropdown-item.active, .dropdown-item:active
{
    color: #fff;
    background-color: #EB1C22;
}


@media (max-width:900px)
{
	.kartu > .info{
		width: 75%;
    }
    .iframe-rwd iframe
    {
        width: 100%;
        height: 100%;
    } 
    .darken-client
    {
        background: 
        linear-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)
        ),
        url('../Gambar/Client.jpg') no-repeat center center fixed;
        color: white;
        background-size: cover;
        /*background-attachment: fixed;*/
        height: 100%;
        overflow: hidden;
    }
}
@media (max-width: 500px)
{
    
}
@media (max-width:900px) and (orientation: landscape)
{
    #demo-depan
    {
        padding-top: 60px;
    }
    .policy
    {
        margin-left: 5%;
        margin-right: 5%;
    }
}
@media (min-width: 768px) and (max-width: 900px)
{

}
@media (min-width: 901px)
{
    .policy
    {
        margin-left: 5%;
        margin-right: 5%;
    }
}
.flyin
{
    animation-name: fly-in;
    animation-duration: 2s;
    animation-fill-mode: backwards;
}

.logoNavbar
{
    width: 2.5rem;
}

.navHoverBox
{
    color: white !important;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) 
{
    #logo-index
    {
        width: 30%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) 
{  
    .index-margin
    {
        margin-top: 7rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) 
{ 
    .navHoverBox
    {
        color: white !important;
        border-radius: 8%;
        background-color: rgba(0, 0, 0, 0);
    }

    .navHoverBox:hover
    {
        background-color: rgba(0, 0, 0, .25);
        box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
        border-radius: 8%;
    }
    #logo-index
    {
        width: 60%;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) 
{ 
  
  
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) 
{  
  
}


@keyframes fly-in
{
    from
    {
        opacity: 0;
        transform: translate(0,100px);
    }
    to
    {
        opacity: 1;
        transform: translate(0,0);
    }
}