html, body { margin: 0; padding: 0; font-size: 16px; }

@media only screen and (max-width: 600px) { html, body { font-size: 3vw; } }

section { padding: 3em 0; }

h1, h2, h3, h4, h5, h6, p, a { font-family: "Lato", Verdana, sans-serif; padding: 0; margin: 0; position: relative; }

h1 { font-size: 4rem; font-weight: 700; letter-spacing: 0.5px; }

h2 { font-size: 2.1rem; font-weight: 700; letter-spacing: 0.5px; }

section h2 { box-sizing: content-box; margin: 20px 0; padding: 0 10px; border-left: 10px solid #3095D9; color: #242424; }

h3 { font-size: 2.1rem; font-weight: 400; letter-spacing: 0.5px; }

h4 { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.5px; color: #3095D9; }

h5 { font-size: 1.7rem; font-weight: 700; font-style: italic; letter-spacing: 0.5px; color: #B9B9B9; }

h6 { font-size: 1.5rem; font-weight: 400; font-style: italic; letter-spacing: 0.5px; color: #B9B9B9; }

p, a { font-size: 1.1rem; font-weight: 400; letter-spacing: 0.4px; }

p, .cta { margin: 20px 0; }

.container-fluid { padding-left: 10vw; padding-right: 10vw; }

header { width: 100%; height: 100vh; position: relative; overflow: hidden; margin-bottom: 10vw; background: url("../assets/img/screenshot.jpg") no-repeat center center; background-size: cover; }

header:before, header:after { content: ''; position: absolute; height: 0; width: 0; bottom: 0; z-index: 1000; border-bottom: 9vw solid #FFF; }

header:before { left: 0; border-right: 50vw solid transparent; }

header:after { right: 0; border-left: 50vw solid transparent; }

header .menu { position: absolute; top: 3em; right: 3em; color: #FFF; height: 4em; width: 4em; cursor: pointer; }

header .menu .bar { height: 100%; width: 100%; }

header .menu .bar::before, header .menu .bar::after { content: ''; display: block; position: absolute; background: #FFF; box-shadow: 1px 1px #55504C; height: 0.6em; width: 100%; border-radius: 0.3em; transition: all 0.3s ease-in-out 0.6s; }

header .menu .bar::before { top: 0.6em; }

header .menu .bar::after { top: 2.8em; }

header .menu.active .bar::before, header .menu.active .bar::after { background: #EDEDED; box-shadow: none; }

header .menu.active .bar::before { top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

header .menu.active .bar::after { top: 50%; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

header .menu .nav-bar { height: 0.6em; width: 100%; border-radius: 0.3em; display: block; position: absolute; top: 1.7em; right: 0; background: #FFF; box-shadow: 1px 1px #55504C; z-index: 99999; transition: height 0.3s ease-in-out, top 0.3s ease-in-out 0.3s, width 0.3s ease-in-out 0.6s, right 0.3s ease-in-out 0.6s, background 0.3s ease-in-out 0.3s; }

header .menu .nav-bar .content { opacity: 0; height: 0; overflow: hidden; transition: opacity 0.3s ease-in-out 0, height 0.3s ease-in-out 0; }

header .menu.active .nav-bar { height: 85vh; width: calc(100vw - 10em); border-radius: 0.3em; display: block; position: absolute; top: 0; right: 100%; background: #3095D9; transition: width 0.3s ease-in-out, right 0.3s ease-in-out, top 0.3s ease-in-out 0.3s, height 0.3s ease-in-out 0.6s, background 0.3s ease-in-out 0.3s, padding 0.3s ease-in-out 0.3s; z-index: 99999; padding: 3em 0 0; box-shadow: none; cursor: default; }

header .menu.active .nav-bar .menu-branding h5 { color: #FFF; font-style: normal; font-weight: 100; }

header .menu.active .nav-bar .menu-branding h3 { text-shadow: none; }

header .menu.active .nav-bar .menu-branding hr { width: 10%; height: 0; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; margin: 0.5em auto; text-shadow: none; box-shadow: none; }

@media only screen and (max-width: 767px) { header .menu.active .nav-bar .menu-branding hr { width: 15%; } }

header .menu.active .nav-bar .menu-branding h5, header .menu.active .nav-bar .menu-branding h3 { padding: 0.5em 0; }

header .menu.active .nav-bar .content { display: block; position: relative; opacity: 1; height: 100%; width: 100%; z-index: 9999; transition: opacity 0.6s ease-in-out 0.9s, height 0.3s ease-in-out 0.9s; }

header .menu.active .nav-bar .content span { color: #FFF; }

header .menu.active .nav-bar .content .fa-stack-1x { color: #3095D9; }

header .menu.active .nav-bar .content a { text-decoration: none; }

header .menu.active .nav-bar .content .row { padding-bottom: 1em; }

@media only screen and (max-width: 767px) { header .menu.active .nav-bar .content .row .social-icons { margin-top: 0.6em; } }

header .menu.active .nav-bar .content ul { list-style-type: none; margin: 0; padding: 0; }

header .menu.active .nav-bar .content ul li a { color: #FFF; text-decoration: none; font-size: 1.6rem; font-weight: 700; line-height: 7vh; letter-spacing: 0.7px; }

header .branding { position: relative; display: inline-block; top: 40%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #FFF; text-align: center; }

header .branding hr { width: 10%; height: 0; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; }

header #bgndVideo { width: 100%; height: 100vh; position: absolute; }

header h3, header h1 { text-shadow: 1px 1px #55504C; }

header hr { box-shadow: 1px 1px #55504C; }

.thumbnails { position: relative; }

.thumbnails img { margin: 1vw auto; max-height: 200px; height: auto; max-width: 100%; position: relative; }

@media only screen and (min-width: 1000px) { .thumbnails img { margin: 10px auto; } }

.thumbnails a { position: relative; display: block; }

.thumbnails .thumb-overlay { display: block; width: 100%; position: absolute; text-align: center; font-weight: 700; bottom: 0.1em; letter-spacing: 0.9px; }

.thumbnails .fa-play-circle-o { font-size: 4em; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.thumbnails .thumb-overlay, .thumbnails .fa-play-circle-o { color: rgba(255, 255, 255, 0.7); transition: color 0.3s ease; }

.thumbnails a:hover .thumb-overlay, .thumbnails a:hover .fa-play-circle-o { color: white; }

.testi-slider { display: block; }

.testi-slider #next-btn, .testi-slider #prev-btn { display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; text-align: center; }

#clients-wrapper { padding-bottom: 0; }

#clients-wrapper #clients { background: #EDEDED; padding: 3em 0; }

#clients-wrapper #clients .image-list { height: 8em; }

#clients-wrapper #clients .image-list [class*="col"] { height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }

#clients-wrapper #clients img { max-width: 100%; max-height: 6em; margin: 0 auto; display: block; position: relative; }

#weddings-wrapper { background: linear-gradient(rgba(36, 36, 36, 0.5), rgba(36, 36, 36, 0.5)), url("http://i64.tinypic.com/2a99lap.jpg") no-repeat left 20%; background-size: cover; color: #FFF; position: relative; padding-bottom: 0.5em; }

#weddings-wrapper h2 { color: #FFF; }

#weddings-wrapper h3 { font-weight: 700; }

#weddings-wrapper p { margin: 0; padding: 40px 0; font-size: 1.4rem; letter-spacing: 0.5px; }

#weddings-wrapper .cta { padding: 0.5em 3em; border: none; border-radius: 2em; background: #FFF; color: #55504C; text-decoration: none; transition: all 0.3s linear; }

#weddings-wrapper .cta:hover { background: #3095D9; color: #FFF; }

#wedding-levels { overflow: hidden; padding: 0; transition: height 0.3s ease; }

#wedding-levels.visible { padding: 3em 0; }

#wedding-levels.visible p, #wedding-levels.visible .fa { font-size: 1em; padding: 0.2em 0; margin: 0.2em 0; }

#wedding-levels.visible .fa-check-circle-o { color: #27ae60; font-size: 1.4em; }

#wedding-levels.visible .fa-times-circle-o { color: #b1000d; font-size: 1.4em; }

footer { background: #3EA9E2; color: #FFF; padding: 3em 0; text-align: center; }

footer a { margin: 0 auto; }

footer .fa-stack-2x { color: #FFF; }

footer .fa-stack-1x { color: #3EA9E2; }

footer .social-icons { padding-bottom: 2em; }