html {
    background-color: #fff !important;
}

body {
    font-family: 'Roboto', sans-serif !important;
    background: #fff;
    margin: 0;
    padding: 0;
    text-align: center;
    height:100vh;
    display:flex;
    flex-direction:column;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 300;
    margin-bottom: 50px;
}

h1 {
    font-size: 45px;
    margin-bottom: 40px;
}

h2 svg {
    vertical-align: middle;
}

.page-link {
    color: #599a1d;
}

.page-link:hover {
    color: #74a403;
}

.active>.page-link {
    color: #fff;
    background-image: linear-gradient(to right, #599a1d 0%, #74a403 100%);
    border-color: #74a403;
}

.header {
    margin: 0;
    padding: 40px 40px 20px 40px;
    color: #fff;
    background-image: linear-gradient(to right, #505050 0%, #808080 100%);
    border-bottom: #585858 2px solid;
}

p.header-name {
    font-size: 45px;
    font-weight: 300;
}

.quote {
    color: #aaa;
}

.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 45px auto;
    padding: 20px 0 0 0;
    background: linear-gradient(-4.5deg, #fff 80%, #f3f3f3 80.1%) no-repeat;
    background-size: 100% 600px;
}

.list-content {
    margin: 0 auto;
    max-width: 1200px;
}

hr {
    margin: 40px 0;
}

.webcam {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.footer {
    height: 64px;
    margin-top: auto;
    padding: 20px;
    color: #fff;
    background-image: linear-gradient(to right, #505050 0%, #808080 100%);
    border-top: #585858 2px solid;
}

.btn-primary {
    background-image: linear-gradient(to right, #599a1d 0%, #74a403 100%);
    border: none;
    font-weight: 300;
}

.card-hp {
    transition: all .2s;
    margin: 10px;
}

.card-hp:hover {
    transition: all .2s;
    outline: 1px solid #a8a8a8;
}

.card-hp img {
    width: 100%;
    margin: 0 auto;
}

.modal-lg {
    max-width: 90%;
}