* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box;
}

html {
    width   : 100%;
    height  : 100%;
    overflow: hidden;
}

body {
    width           : 100%;
    height          : 100%;
    /* Text styles */
    font-family     : 'Roboto', sans-serif;
    font-size       : 18px;
    font-weight     : 300;
    color           : #212121;
    background-color: #000;
    perspective     : 4px;
    /* The depth */
    overflow-x      : hidden;
    overflow-y      : scroll;
}

.wrapper {position: relative;}

header {
    width          : auto;
    height         : 100vh;
    min-height     : 100vh;
    position       : relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    overflow       : hidden;
}

header::before {
    content        : "";
    position       : absolute;
    top            : 0;
    left           : 0;
    right          : 0;
    bottom         : 0;
    display        : block;
    background-size: cover;
    z-index        : 0;
    -ms-transform: translateZ(-3px) scale(2);
    -webkit-transform: translateZ(-3px) scale(2);
    -moz-transform: translateZ(-3px) scale(2);
    -o-transform: translateZ(-3px) scale(2);    
    transform      : translateZ(-3px) scale(2);
}

header div.logo {
    position   : absolute;
    z-index    : 100;
    width      : 100%;
    height     : 25%;
    text-align : center;
    top        : -10%;
    padding    : 0 0px;
    font-family: 'Roboto Condensed', sans-serif;
    -ms-transform: translateZ(-2px) scale(1.5);
    -webkit-transform: translateZ(-2px) scale(1.5);
    -moz-transform: translateZ(-2px) scale(1.5);
    -o-transform: translateZ(-2px) scale(1.5);   
    transform  : translateZ(-2px) scale(1.5);
}

header div.logo img {
    max-width: 100%;
    width    : auto;
    height   : 75%;
    z-index    : 100;
}

@media (max-width: 400px) {
    header div.logo img {
        max-width: 100%;
        width    : auto;
        height   : auto;
        z-index    : 100;
    }
}

h1 {
    font-size  : 2.5rem;
    font-weight: 500;
    color      : #fff;
    padding    : 0 30px 30px 30px;
    z-index    : 100;
    text-align: center;
    font-family: 'Playfair Display', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

@media (max-width: 800px) {
    h1 {
        font-size: 2.0rem;
    }
}

header h2 {
    font-size  : 2.2rem;
    font-weight: 300;
    color      : #fff;
}

#selection {
    width     : 100%;
    position  : absolute;
    z-index   : 100;
    width      : 100%;
    height     : 25%; 
    top: 20%;   
}

@media (max-width: 800px) {
    #selection {
        top: 10%; 
    }
}

#selection .container {
    margin   : auto;
    /* To center the text horizontally */
    max-width: 1000px;
    /* Limiting the width for extra large screens */
    padding  : 0px 40px 40px 40px;
}

.container h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size  : 3rem;
}

.container p {
    padding-top: 0px;
    line-height: 1.8;
}

.overlay {
    background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.0));
    /* The least supported option. */
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    position  : absolute;
    z-index   : 50;
}


.card {
    margin-top      : 0px;
    -webkit-transition: all 0.4s;
    transition      : all 0.4s;
    background-color: #fff;
    color           : #000;
    border-bottom   : 5px solid #884991;
}

@media (max-width: 576px) {
    .card {
        margin-top   : 40px;
        margin-bottom: 40px;
    }

}

/* The slow way */
.make-it-slow {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -webkit-transition: all 0.75s ease 0s;
    transition: all 0.75s ease 0s;
}

/* Transition to a bigger shadow on hover */
.make-it-slow:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* The fast way */
.make-it-fast {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Pre-render the bigger shadow, but hide it */
.make-it-fast::after {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    opacity   : 0;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

/* Transition to showing the bigger shadow on hover */
.make-it-fast:hover::after {
    opacity: 1;
}

a.card:hover {
    position       : relative;
    -ms-transform: translate(0, -20px);
    -webkit-transform: translate(0, -20px);
    -moz-transform: translate(0, -20px);
    -o-transform: translate(0, -20px);    
    transform      : translate(0, -20px);
    color          : #000;
    text-decoration: none;
    border-bottom  : 5px solid #884991;
}



.page-section {
    padding-top   : 5rem;
    padding-bottom: 5rem;

}

.about-image {
    width : 50%;
    margin: 10px 50px 50px 0;
}

@media (max-width: 767px) {
    .about-image {
        width : 100%;
        margin: 0px 0 50px 0;
    }
}


.btn-xl {
    padding       : 1.25rem 2.25rem;
    font-size     : 0.85rem;
    text-transform: uppercase;
    border        : none;
    border-radius : 10rem;
}

.btn-primary {
    color           : #212529;
    background-color: #D4AF37;
    border-color    : #D4AF37;
}

/*-------------------------*/

.page-section {
    padding-top   : 5rem;
    padding-bottom: 5rem;
}

.bg-dark {
    background-color: #000 !important;
}

.border-top {
    border-top: 1px solid #dee2e6 !important;
}

.border-bottom {
    border-bottom: 1px solid #dee2e6 !important;
}

hr.divider {
    max-width   : 3.25rem;
    border-width: 0.2rem;
    border-color: #D4AF37;
    margin      : 0 auto;
}

@media (min-width: 768px) {
    #about hr.divider {
        margin: 0 auto 0 75%;
    }
}

#box-slider {
    padding-bottom: 2rem;
}

#box-slider .h4 {
    color: #D4AF37;
}

#box-slider .swiper-pagination-bullet {
    background: #fff;
}

#box-slider p {
    color: #ccc;
}


#box-slider a.btn-primary {
    border-width    : 2px;
    background-color: #000;
    color           : #D4AF37;
}

#box-slider a.btn-primary:hover {
    background-color: #D4AF37;
    color           : #000;
}


#box-slider .swiper-slide:hover a.btn-primary {
    background-color: #D4AF37;
    color           : #000;
}


@media (max-width: 576px) {

    #box-slider {
        width: 80%;
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-bottom: 0.5rem;
    font-family  : "Playfair Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight  : 500;
    line-height  : 1.2;
}

/*------------*/

footer .site-info {
    font-size: 0.8rem;
}

footer .site-info a {
    color: #212529;
}

footer .site-info a:hover,
footer .site-info a:focus {
    color          : #D4AF37;
    text-decoration: none;
}

footer .site-info ul.footer-navigation {
    list-style: none;
    margin    : 0;
    padding   : 0;
    height    : 100%;
}

footer .site-info ul.footer-navigation li {
    display: inline-block;
}

footer .container {
    margin   : auto;
    max-width: auto;
    padding  : 0;
}

:focus {
    outline: none;
}