/* ======================================================
   GebouwGegevens.nl
   style.css
   ====================================================== */

:root{

    --gg-yellow:#FFD400;
    --gg-yellow-dark:#E6BF00;

    --gg-black:#171717;
    --gg-dark:#202020;

    --gg-white:#FFFFFF;

    --gg-light:#F7F7F7;

    --gg-grey:#777777;

    --radius:18px;

    --shadow:0 15px 35px rgba(0,0,0,.12);

}

/* ====================================================== */

body{

    background:#ffffff;

    color:var(--gg-black);

    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    overflow-x:hidden;

}

/* ====================================================== */
/* NAVBAR */
/* ====================================================== */

.navbar{

    padding:18px 0;

}

.navbar-brand img{

    height:58px;

}

.nav-link{

    color:var(--gg-black)!important;

    font-weight:600;

    margin-left:20px;

}

.nav-link:hover{

    color:var(--gg-yellow-dark)!important;

}

/* ====================================================== */
/* BUTTONS */
/* ====================================================== */

.btn-warning{

    background:var(--gg-yellow);

    border:none;

    color:#000;

    font-weight:700;

    border-radius:40px;

    padding:14px 34px;

    text-align:center;

}

.btn-warning:hover{

    background:var(--gg-yellow-dark);

    color:#000;

}

.btn-outline-dark{

    border-radius:40px;

    padding:14px 34px;

}

/* ====================================================== */
/* HERO */
/* ====================================================== */

.hero{

    padding-top:70px;

    padding-bottom:80px;

	text-align:center;

}

.hero h1{

    font-weight:800;

    line-height:1.05;

    letter-spacing:-2px;

}

.hero h2{

    font-weight:600;

}

.lead{

    font-size:1.30rem;

    color:#555;

}

/* ====================================================== */
/* LIVE LABEL */
/* ====================================================== */

.coming-soon{

    display:inline-block;

    background:var(--gg-yellow);

    padding:12px 28px;

    border-radius:50px;

    font-size:20px;

    font-weight:700;

    justify-content:center;

}

/* ====================================================== */
/* COUNTDOWN */
/* ====================================================== */

.countdown{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:20px;

    margin-bottom:20px;

    justify-content:center;

}

.timebox{

    width:66px;

    height:66px;

    background:#111;

    color:var(--gg-yellow);

    border-radius:10px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:var(--shadow);

}

.timebox div{

    font-size:40px;

    font-weight:400;

    line-height:1;

}

.timebox span{

    color:#FFF;

    margin-top:8px;

    font-size:12px;

}

/* ====================================================== */
/* DASHBOARD */
/* ====================================================== */

.dashboard{

    width:100%;

    max-width:760px;

    border-radius:28px;

    box-shadow:0 30px 70px rgba(0,0,0,.20);

    transition:.4s;

}

.dashboard:hover{

    transform:translateY(-8px);

}

/* ====================================================== */
/* FOOTER */
/* ====================================================== */

footer{

    background:#fafafa;

    border-top:1px solid #eee;

    color:#666;

}

/* ====================================================== */
/* ANIMATIES */
/* ====================================================== */

.hero{

    animation:fadeIn 1s ease;

}

@keyframes fadeIn{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* ====================================================== */
/* RESPONSIVE */
/* ====================================================== */

@media (max-width:1200px){

.hero h1{

font-size:56px;

text-align:center;

}

.timebox{

width:105px;
height:105px;

}

.timebox div{

font-size:54px;

}

}

/* Tablet */

@media (max-width:992px){

.hero{

text-align:center;

}

.hero h1{

font-size:48px;

}

.hero h2{

font-size:36px;

}

.countdown{

justify-content:center;

}

.dashboard{

margin-top:50px;

}

}

/* Mobiel */

@media (max-width:768px){

.hero{

padding-top:30px;

}

.hero h1{

font-size:42px;

letter-spacing:-1px;

}

.hero h2{

font-size:30px;

}

.lead{

font-size:18px;

}

.coming-soon{

font-size:16px;

padding:10px 20px;

}

.countdown{

justify-content:center;

gap:12px;

}

.timebox{

width:85px;

height:85px;

border-radius:14px;

}

.timebox div{

font-size:38px;

}

.timebox span{

font-size:14px;

}

.btn{

width:100%;

margin-bottom:12px;

}

}

/* Kleine telefoons */

@media (max-width:480px){

.hero h1{

font-size:34px;

}

.hero h2{

font-size:24px;

}

.timebox{

width:72px;

height:72px;

}

.timebox div{

font-size:30px;

}

.timebox span{

font-size:12px;

}

}