/*========*/
/* header */
/*========*/

/* site name */
.navbar a.navbar-brand {
    font-weight: bold;
    font-size: 120%;
}

/* logo */
.navbar-brand img {
    height: 28px;
    position: relative;
    top: -2px;
    left: -4px;
    opacity: 0.67;
}

/* logo on transparent */
.navbar-transparent .navbar-brand img {
    filter: invert(1);
    opacity: 1;
}

/* nav items */
li.nav-item:hover {
    background: #cbcbcb3b;
}

/* short header */
.page-header {
    height: 260px;
}

/* long header */
.home-page .page-header {
    height: 100vh;
}

/*=================*/
/* content section */
/*=================*/

/* page content */
.section.text-center {
    padding-top: 16px;
}

/* first title in content */
h2.title {
    margin-bottom: 2rem;
}

/* width of container (entire page) */
@media (min-width: 576px) {
    .container {
        max-width: 600px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/*=====================*/
/* referral site cards */
/*=====================*/

.refsite.card {
    display: inline-block;
    max-width: 240px;
    margin: 12px;
    background-color: #f3f3f3;
    height: 405px;
    vertical-align: top;
    z-index: 0;
    width: 90%;
}

/* single column */
@media only screen and (max-width: 600px) {
    .refsite.card {
        max-width: 400px;
        height: auto;
    }
}

.refsite.card .card-body {
    padding: 16px;
    z-index: 0;
}

.refsite.card .card-body img {
    height: 60px;
    width: auto;
    border-radius: 50%;
}

@media only screen and (min-width: 600px) {
    .refsite.card .card-body p.desc {
        min-height: 72px;
    }

    .refsite.card .card-body p.benefits {
        min-height: 48px;
    }
}

.refsite.card .form-control.refcode {
    padding-left: 8px;
    padding-right: 2px;
}

.tooltip-btn {
    display: inline-block;
    margin: 0 2px;
}

/*===========*/
/* user page */
/*===========*/

img.avatar {
    width: 162px;
    height: auto;
}

.user-page .section.text-center {
    transform: translate(0px, -100px);
    padding-bottom: 0;
}