/*
Theme Name: Ritual One
Author: Dustin Lawrence
Author URI: https//ashlarprojects.com
Description: Custom theme for Ritual One based on a combination of Automattic´s _s theme and Bootstrap 4. Made as a solid starting point for your next theme project and WordPress website. Use it as starter theme or as a parent theme. It is up to you. Including Font Awesome support, built-in widget slider and much more you need for basic websites. IMPORTANT: All developer dependencies are not bundled with this install file. Just download the .zip, extract it and run "npm install" and "gulp copy-assets" inside the extracted /understrap folder.
That downloads everything and moves it in place so that you can recompile your CSS and JS files;
A developer version (with Gulp/node and Sass sources) is available on gitHub: https://github.com/understrap/understrap

UnderStrap is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.

Resource Licenses:
Font Awesome: http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
Bootstrap: http://getbootstrap.com | https://github.com/twbs/bootstrap/blob/master/LICENSE (Code licensed under MIT, documentation under CC BY 3.0.)
and of course
jQuery: https://jquery.org | (Code licensed under MIT)
WP Bootstrap Navwalker by Edward McIntyre: https://github.com/twittem/wp-bootstrap-navwalker | GNU GPL
*/

/*
This file is just used to identify the theme in WordPress.
The compiled CSS output can be found in /css/theme.css
The SASS sources for it can be found in /sass/
The dependencies can be found in /src/ after running "gulp copy-assets" terminal command

...and now go out and play!
*/



body {
	border-top: 100px solid transparent;
}

#wrapper-navbar {
	position: fixed;
	top: 0;
	z-index: 100000;
}

#homepage {
	padding-top: 0px;
}

.hero-content {
	width: 100%;
	max-width: 1200px;
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 100;
}

.hero-content h2 {
	color: #fff;
	font-size: 4.4rem;
	margin-bottom: 30px;
}

.button {
	 outline: 0 !important;
    color: #313133;
    border-color: #a1bac9;
	background: #a1bac9;
    margin-left: auto;
    text-transform: uppercase;
    -webkit-transition: background-color .5s, color 1s, width 1s;
    -o-transition: background-color .5s, color 1s, width 1s;
    -moz-transition: background-color .5s, color 1s, width 1s;
    transition: background-color .5s, color 1s, width 1s;
    font-size: .75rem;
    font-weight: 700;
    width: 100%;
    text-align: center;
    padding-top: .65rem !important;
    padding-bottom: .65rem !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 40px;
	padding-left: 20px;
	padding-right: 20px;
	color: #fff;
	width: 100%;
	max-width: 310px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

nav.navbar.navbar-expand-xl .nav-item.active .nav-link:before {
	display: none !important;
}

body .top-div {
	height: 50vh !important;
}


@media screen and (max-width: 721px) {
	.hero-content h2 {
		font-size: 1.2rem;
	}
	body {
	border-top: 60px solid transparent;
	}
	
	
	
	#story .container {
		max-width: 90%;
	}
	
	#home-classes {
		padding-top: 5px;
		padding-bottom: 5px;
	}
	#home-classes h3 {
		font-size: 1rem;
	}
	
}