/*
 
 [Master Stylesheet]

 Project:   VirtualGram Template
 Version:   1.0
 Author:    Mikhail Abdillah
 Website:   https://www.macode.web.id/

 [Table of contents]

 1. Basic
 2. Button
 3. Color Scheme
 4. Progress bar
 5. Theme list
 6. Timeline
 7. Navigation
 8. Sidebar
 9. Page Style
 10. Social
 11. Theme Color
 12. Reveal
 13. Page Switching
 14. Carousel
 15. Grid (OpenGraph)

 */

:root {
    --theme-red: #ef3724;
    --theme-blue: #2960f7;
    --theme-green: #8cc63f;
    --theme-orange: #fd7e14;
    --theme-purple: #6f42c1;
}


/* Light */

@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 300;
    src: local("Quicksand Light"), local("Quicksand-Light"), url(https://fonts.gstatic.com/s/quicksand/v8/6xKodSZaM9iE8KbpRA_pgHYYT8L_.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Normal */

@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 400;
    src: local("Quicksand Regular"), local("Quicksand-Regular"), url(https://fonts.gstatic.com/s/quicksand/v8/6xKtdSZaM9iE8KbpRA_hK1QN.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Medium */

@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 500;
    src: local("Quicksand Medium"), local("Quicksand-Medium"), url(https://fonts.gstatic.com/s/quicksand/v8/6xKodSZaM9iE8KbpRA_p2HcYT8L_.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 
    1. Basic
*/

body {
    font-family: "Quicksand", sans-serif;
    font-weight: 400;
}

.fw-light {
    font-weight: 300;
}

a:hover,
a:active {
    color: #2184f5;
}


/* Image Responsive */

.img-place {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
}


/* Overlay */


/* 
    2. Button
*/

.btn-theme-outline {
    padding: 10px 30px;
    margin: 5px;
    height: unset;
    background-color: transparent;
    color: #0078ff;
    border: 0;
    font-weight: 500;
    box-shadow: 0 0 0 2px #0078ff;
}

.btn-theme-outline:hover {
    background-color: #0078ff;
    color: #fff;
}

.btn-theme-outline:focus {
    background-color: #0078ff;
    color: #fff;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0078ff;
}


/* Floating Action Button */


/* Social Button */


/* Back to top */


/* Template Config */


/* 
    3. Color Scheme
*/


/* Social Color */


/* 
    4. Progressbar
*/

.progress-wrapper {
    display: block;
    margin: 10px 0;
}

.progress-wrapper .caption {
    font-weight: 500;
}

.progress {
    margin-top: 5px;
    height: 1.25rem;
    border: 2px solid #fff;
    background-color: #fff;
    box-shadow: 0 0 0 2px #0078ff;
}

.progress,
.progress-bar {
    border-radius: 30px;
}

.progress-bar {
    font-size: 12px;
    background-color: #0078ff;
}


/* 
    5. Preloader
*/


/* 
    6. Pagination
*/


/* 
    7. List style
*/

.theme-list {
    position: relative;
    padding-left: 30px;
    list-style: none;
    z-index: 10;
}

.theme-list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 9px;
    margin: auto;
    width: 1px;
    height: 85%;
    background-color: #cacdd6;
    z-index: -1;
}

.theme-list li {
    display: block;
    margin: 5px 0;
}

.theme-list li::before {
    content: "";
    position: absolute;
    left: 3px;
    margin: 6px 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #888;
}


/*
 *  8. Navigation 
 */

.navbar-brand {
    font-weight: 500;
    padding-top: 12px;
    padding-bottom: 12px;
}

.navbar-nav .nav-link {
    padding: 14px 10px;
}

@media (min-width: 768px) {
    .navbar-expand-md .navbar-nav .nav-link {
        padding-left: 14px;
        padding-right: 14px;
    }
}


/* 
 *  9. Input
 */


/* 
 *  10. Select
 */

.nice-select::after {
    width: 7px;
    height: 7px;
    margin-top: -5px;
    right: 15px;
}


/*
 *  8. Page Animation
 */


/* Reveal */

@-webkit-keyframes anim-effect-1 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    35%,
    65% {
        -webkit-transform: translate3d(0, -100%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
    }
}

@keyframes anim-effect-1 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    35%,
    65% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
    }
}

@-webkit-keyframes anim-effect-2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    35%,
    65% {
        -webkit-transform: translate3d(0, -100%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
    }
}

@keyframes anim-effect-2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    35%,
    65% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, 200%, 0);
    }
}


/*
    10. Plugins
*/


/* Owl Carousel */


/* OpenGraph Grid */

@-webkit-keyframes loader {
    0% {
        background: #ddd;
    }
    33% {
        background: #ccc;
        box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd;
    }
    66% {
        background: #ccc;
        box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc;
    }
}

@-moz-keyframes loader {
    0% {
        background: #ddd;
    }
    33% {
        background: #ccc;
        box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd;
    }
    66% {
        background: #ccc;
        box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc;
    }
}

@keyframes loader {
    0% {
        background: #ddd;
    }
    33% {
        background: #ccc;
        box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd;
    }
    66% {
        background: #ccc;
        box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc;
    }
}


/* Isotope */

.gridder {
    position: relative;
    display: block;
}

.grid-item {
    display: block;
    float: left;
    margin: 16px 0;
    padding: 0 16px;
}

.grid-item {
    width: 100%;
}

.grid-item img {
    width: 100%;
    height: 100%;
}

.grid-item .img-place {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 350px;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

.grid-item .img-caption {
    position: absolute;
    bottom: 0;
    padding: 12px 16px;
    width: 100%;
    background-color: #323131;
    color: #fff;
    z-index: 11;
}

.grid-item .img-caption p {
    font-size: 14px;
    margin-bottom: 0;
}

.grid-item .img-caption p::before {
    content: "\2014";
    margin-right: 5px;
}

@media (min-width: 768px) {
    .gridder .grid-item {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .gridder .grid-item {
        width: 33.33333%;
    }
}


/* Theme color style */


/* Theme red */


/* Theme Blue */


/* Theme Green */


/* Theme Orange */


/* Theme Purple */