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

NAME: DIRLY.CSS
AUTHOR: BRANT COURT
VERSION: 1.01

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


/* ----------------------------------
-------------------------------------
1. FONTS
-------------------------------------
-------------------------------------*/

@font-face {
    font-family: futura;
    src: url(../fonts/futura.ttf) format('truetype');
}


/* ----------------------------------
-------------------------------------
GLOBAL
-------------------------------------
-------------------------------------*/

body {
    overflow-x: hidden;
}

#hero-section h1{
    font-weight: 700;
    font-size: 38px;
    line-height: inherit;
    font-family: futura;
    letter-spacing: 2px;
    text-shadow: 1.5px 1.5px #9c3129; 
    
    top: 50%; 
    left: 50%; 
    position: absolute; 
    text-align: center; 
    transform: translate(-50%, -50%);
    
    opacity: 1;
    color: black;
}

.bg {
    background: url(../img/bg.jpg);
    min-height: 700px; 
    width: 100%; 
    opacity: .5;
    
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#videoBG {
    width: 100%;
    z-index: -1;
    margin: 0;
    padding: 0;
    background-size: cover;
}

#signup-section {
    background: url(../img/bg.jpg);
    background-size: cover;
    height: 540px;
}

#mini-nav button {
    background: #9c3129;
    color: white;
    height: 90px;
    font-size: 42px;
    padding-left: 20px;
    padding-right: 20px;
    display: inline;
}

#demo {
    text-align: center;
    font-size: 50px;
}

#mini-nav {
    background: white;
}

#mini-nav a {
    font-family: futura;
    cursor: pointer;
}

#mini-nav a:hover {
    text-decoration: none;
    opacity: .85;
    transition: .4s;
}

#mini-nav p {
    display: inline;
    color: white;
    font-size: 38px;
    text-transform: uppercase;
    background-color: #9c3129;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

#signup-bg {
    background: url(../img/bg.jpg);
}
#signup-section .col-lg-4 {
    min-height: 200px;
}

input:hover {
    opacity: .85;
}

#product-images img {
    margin-top: 10px;
    margin-bottom: 15px;
    height: 300px;
    width: auto;
    box-shadow: 4px 4px 4px 4px gray;
}

#product-images {
    background: url(../img/bg-yorkville.jpg);
}

footer {
    font-family: futura;
    text-transform: uppercase;
}


@media only screen and (max-width: 600px) {
  #signup-section img {
    position: relative;
  }
}

@media only screen and (max-width: 600px) {
  #product-images img {
      height: 150px;
      width: auto;
  }
}

@media only screen and (max-width: 600px) {
  #mc_embed_signup {
    margin-top: 0;
      min-width: 100%;
  }
}


/* ----------------------------------
-------------------------------------
COLOURS

rgba(35,152,195); awesome blue #2398c3

Iceberg: #DFF3E4
-------------------------------------
-------------------------------------*/
.bg-black-gradient {
    background: linear-gradient(to bottom, #000000 0%, #333333 100%);
}
.bg-blue-gradient {
    background: linear-gradient(to bottom, #000066 0%, #3333cc 100%);
}

.bg-light-black {
    background-color: #2c2a2b;
}

.bg-dark-black {
    background-color: #343233;
}

.bg-darkest-black {
    background-color: #1a191a;
}

.bg-white {
    background-color: #DFF3E4;
}

.bg-black {
    background-color: #0d0d0d;
}

.bg-transparent {
    background-color: transparent;
}

/* ALIGNMENT */
.align-center {
    text-align: center;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}
/* ----------------------------------
-------------------------------------
COLOUR FILTERS
-------------------------------------
-------------------------------------*/
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}

/* ----------------------------------
-------------------------------------
SOCIAL MEDIA COLOURS 
-------------------------------------
-------------------------------------*/
/* GITHUB */
.github:hover {
    color: #C9510C;
    transition: 0.4s;
}
/* YOUTUBE */
.youtube:hover {
    color: #FF3333;
    transition: 0.4s;
}
/* LINKEDIN */
.linkedin:hover {
    color: #007bb6;
    transition: 0.4s;
}
/* INSTAGRAM */
.instagram:hover {
    color: #517fa4;
    transition: 0.4s;
}
/* FACEBOOK */
.facebook:hover {
    color: #3b5998;
    transition: 0.4s;
}

/* FONT-WEIGHT */
.fw-100 {font-weight: 100};
.fw-200 {font-weight: 200};
.fw-300 {font-weight: 300};
.fw-400 {font-weight: 400};
.fw-500 {font-weight: 500};
.fw-600 {font-weight: 600};
.fw-700 {font-weight: 700};

.lead {
    color: rgba(35,152,195);
    text-transform: uppercase;
}
/* ----------------------------------
-------------------------------------
BUTTONS 
-------------------------------------
-------------------------------------*/
/* BLUE */
.btn-blue {
    background-color: darkblue;
    color: #DFF3E4;
}

.btn-blue:hover {
    background-color: #DFF3E4;
    color: darkblue;
    border: 1px solid darkblue;
}

/* RED */
.btn-red {
    background-color: darkred;
    color: #DFF3E4;
}

.btn-red:hover {
    background-color: #DFF3E4;
    color: darkred;
    border: 1px solid darkred;
}

/* GREEN */
.btn-green {
    background-color: rgba(120, 200, 140);
    color: #DFF3E4;
}

.btn-green:hover {
    background-color: #DFF3E4;
    color: forestgreen;
    border: 1px solid forestgreen;
}

/* BLACK */
.btn-black {
    background-color: black;
    color: #DFF3E4;
}

.btn-black:hover {
    background-color: #DFF3E4;
    color: black;
    border: 1px solid black;
}

/* WHITE */
.btn-white {
    background-color: #DFF3E4;
    color: black;
}

.btn-white:hover {
    background-color: black;
    color: #DFF3E4;
    border: 1px solid #DFF3E4;
}



/* ----------------------------------
-------------------------------------
TEMPLATE SPECIFIC
-------------------------------------
-------------------------------------*/
.zoom:hover {
  transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */transition: 0.4s;
}

.parallax {
    height: 500px;
    
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}