﻿ html {
  scroll-behavior: smooth;
}

/* -------------------- Custom CSS ------------------- */
.redbg {
background-color:#eb4947;
color:#ffffff;
}
.darkbg {
background-color:#050505;
color:#ffffff;
}
.margin5 {
margin-top:5rem;
margin-bottom:5rem;
}
.margin3 {
margin-top:3rem;
margin-bottom:3rem;
}

/* -------------------- GRID ------------------- */
.griditem img {
margin-left:auto;
margin-right:auto;
height: 200px;
width:auto;
}
.griditem {
margin: 10px;
padding:30px;
background: #ddd;
box-shadow: 4px 6px 20px #888888;
border:10px solid #fff;
}
.gridmain {
display: flex;
flex-direction: column;
}
.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}
/* -------------------- FEATURE ------------------- */
.feat {
text-align:center;
padding:50px 0px;
}
.feat div {
padding: 50px;
}
/* -------------------- HEADER ------------------- */
#sp-header {
position:fixed;
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.1));
}
#sp-header.menu-fixed {
background:#fff;
}
#sp-header a, #offcanvas-toggler > i {
color:#fff;
}
#sp-header.menu-fixed a, #offcanvas-toggler > i {
color: inherit;
}

/* -------------------- HEADER TITLE ------------------- */
.sp-page-title {
padding: 200px 0px;
}
.sp-page-title .sp-page-title-heading {
font-size:3rem;
}
.sp-page-title .container {
text-align:center;
background:rgba(0,0,0,0.4);
padding: 5rem;
}
.sp-module-title {
font-size:22px !important;
}


/* -------------------- CUSTOM SIMPLE FORMS ------------------- */
.jd-simple-contact-form .form-group {
margin-bottom:15px;
}

/* -------------------- VIDEO HOMEPAGE FULL
video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
}
@media only screen and (max-width: 600px) {
.videotext h3 {
font-size:1.5rem;
}
.videotext h1 {
font-size:2.5rem;
}
}
 ------------------- */

/* ------------------------ YOUTUbe BG ---------------------------*/

.ytbg-wrapper {
position: relative;
}
.ytbg-content {
display: table;
width: 100%;
min-height: 100vh;
z-index: 1;
position: relative;
}
.ytbg-content .inner {
display: table-cell;
vertical-align: middle;
text-align: center;
padding-left: 16px;
padding-right: 16px;
color:#fff;
}
iframe {
transition: opacity 500ms ease-in-out;
transition-delay: 250ms;
}
.video-background-controls button {
font-size: 32px;
display: inline-block;
padding: 0px;
margin: 0px;
height: 32px;
width: 32px;
border-radius: 16px;
line-height: 32px;
border: none;
background: none;
-webkit-appearance: none;
color: white;
filter: drop-shadow(0px 0px 1px black);
cursor: pointer;
opacity: 1;
transition: all 250ms ease-in-out;
margin-left: 10px;
}
.video-background-controls button:hover {
opacity: 0.5;
}