body{
    /* font-family: 'Montserrat', cursive; */
    color: #3d3d3d;
    /* background-color: #f7f7f7; */
}

/* PRIMARY #2978B5  */
/* PRIMARY 2 #8AD1D9 */

/* DARK #3C7799 */

/* SOFT #FFDB7A */

/* ANOTHER #8AB6D6 */

.color-primary {
    color: #7C83FD !important;
}
.btn-primary{
    background-color: #7C83FD !important;
}
.color-dark{
    color: #96BAFF;
}
.color-soft{
    color: #FFDB7A;
}
.color-another{
    color: #8AB6D6;
}

.fs32{
    font-size: 32px;
}
.fs30{
    font-size: 32px;
}
.fs28{
    font-size: 28px;
}
.fs24{
    font-size: 24px;
}
.fs20{
    font-size: 20px;
}
.fs18{
    font-size: 18px;
}
.fs16{
    font-size: 16px;
}
.fs14{
    font-size: 14px;
}
.fs12{
    font-size: 12px;
}
.fs10{
    font-size: 10px;
}
.fs8{
    font-size: 8px;
}
.fs6{
    font-size: 6px;
}
.fw300{
    font-weight:300;
}
.fw400{
    font-weight:400;
}
.fw500{
    font-weight:500;
}
.fw600{
    font-weight:600;
}

.homepage{
    background-image: url('bg/homepage/bg-rafiqsiregar.jpg');
    /* Full height */
    height: 100vh;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
.watido{
    background-color: #96BAFF;
    /* Full height */
    height: 55vh;
    color: white;
}
.watido b{
    font-size: 18px;
}
.bg-lihat{
    transform: translateY(-50px);
    background-color: #7C83FD;
    color: white;
    height: 100px; 
    border-radius: 15px;
    margin: auto;
    width: 50%;
}

.project{
    /* Full height */
    /* height: cover; */
    margin-bottom: 50px;
}

.project .search{
    margin:auto;
    width:60%;
    height:100%;
}
.project .card{
    margin-top: 30px;
    /* width: 250px;  */
    width: auto; 
    height: auto; 
    border-radius:10px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15), 
    0 2px 2px rgba(0,0,0,0.15), 
    0 4px 4px rgba(0,0,0,0.15), 
    0 8px 8px rgba(0,0,0,0.15);

    /* box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); */
    transition: transform .2s;
}
.project .card:hover {
    transform: scale(1.1);
}
.project img{
    border-radius: 10px 10px 0 0;
}
.detailview .card{
    margin-top: 30px;
    /* width: 250px;  */
    width: auto; 
    height: auto; 
    border-radius:10px;
    box-shadow: 0px 10px 6px 1px rgba(0,0,0,0.18);
    -webkit-box-shadow: 0px 10px 6px 1px rgba(0,0,0,0.18);
    -moz-box-shadow: 0px 10px 6px 1px rgba(0,0,0,0.18);

    /* box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); */
    transition: transform .2s;
}
.detailview .row{
    padding: 30px;
}
.quote{
    background-color: #fff;
    /* Full height */
    height: 50vh;
    color: black;
}
.footer{
    background-color: #3d3d3d;
    /* Full height */
    height: 70vh;
    color: white;
}

ul.timeline {
    list-style-type: none;
    position: relative;
}
ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
    padding-right: 20px;
}
ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #FFDB7A;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}

input[type="search"] {
    border: none;
    border-radius: .55rem;
    height: 20px;
    width: 100%;
    -webkit-box-shadow: 0px 2px 12px 1px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 12px 1px rgba(0,0,0,0.15);
    /* border-radius: .2em; */
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1em;
    width: 1em;
    border-radius: 50em;
    background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
    opacity: .3;
    pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
    filter: invert(1);
}

/* LOGIN */
.login,
.image {
  min-height: 100vh;
}

.bg-image {
  background-image: url('https://wi.wallpapertip.com/wsimgs/34-348024_wallpaper-macbook-pro-iphone-wallpaper-4k-5k-live.jpg');
  background-size: cover;
  background-position: center center;
}
/* LOGIN */

a, a:hover, a:visited, a:active {
    color: inherit;
    text-decoration: none;
}


.square {
    height: 3px;
    width: 16px;
    background-color: #0061A8;
}

.btnwidth{
    width:70px;
}

.btnback{
    margin: 10px;
    width:80px;
}

.btn-cls{
    top:0;right:0
}
.btn-cls button{
    width:18px;height:18px;padding:0 !important;margin-right:0 !important
}
.btn-cls i{
    padding:0 !important;margin-right:0 !important	
}