html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

ul, li {
	list-style: none;
}

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/* ---------- GRID TIME ---------- */


.grid {
	margin: 0 auto;
	width: 1040px;
}

	.grid:after {
		content: "";
		display: table;
		clear: both;
	}

.pad {
	padding: 96px 0;
}

.pad-sm {
	padding: 36px 0;
}

.col {
	float: left;
	padding: 0 15px;
}

.col-full {
	width: 100%;
}

.col-1-2 {
	width: 50%;
}

.col-1-3 {
	width: 33.33%;
}

.col-2-3 {
	width: 66.66%;
}

.module {
	padding: 15px;
}


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


body {
	color: #333;
	font-family: "Work Sans", Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 400;
	font-optical-sizing: auto;
	line-height: 1.62;
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: #E38800;
	font-weight: 600;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	text-decoration: none;
}

	a:hover {
		color: #E38800;
		cursor: pointer;
	}

h1, h2, h3, h4 {
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
	margin-bottom: 24px;
}

.text-large {
	font-size: 54px;
	line-height:  68px;
}

h1 {
	font-size: 44px;
}

h2 {
	font-size: 30px;
}

h3 {
	font-size: 21px;
}

h4 {
	font-size: 18px;
	margin-bottom: 8px;
}

	.align-center h1 {
		margin: 0 auto 24px;
	}

p {
	margin-bottom: 24px;
}

.display-inline {
	display: inline-block;
}

.width-full {
	display: block;
	float: none;
	width: 100%;
}

.narrow {
	max-width: 720px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

b, strong {
	font-weight: 600;
}

.red {
	color: #E38800;
}

.black {
	color: #333;
}

.fill-red {
	background-color: #E38800;
	color: #fff;
}

.fill-black {
	background-color: #222;
	color: #fff;
}

.fill-gray {
	background-color: #f7f7f7;
}

.fill-white {
	background-color: #fff;
}

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

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

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

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.text-larger {
	font-size: 24px;
}

.btn {
	border: solid 2px #E38800;
	border-radius: 40px;
	color: #E38800;
	display: inline-block;
	font-size: 18px;
	letter-spacing: .5px;
	line-height: 40px;
	padding: 0 20px;
	text-align: center;
	text-decoration: none;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

	.btn:hover {
		background-color: #E38800;
		color: #fff;
		cursor: pointer;
	}

 .btn-white {
	border-color: #fff;
	color: #fff;
} 

 .btn-primary {
	border-color: #E38800;
	background-color: #E38800;
	color: #fff;
}

.btn-primary:hover {
	background-color: #FFF;
	color: #E38800;
}

.btn-white:hover {
	background-color: #E38800;
	border-color: #E38800;
	color: #FFF;
}


.red-link {
	color: #E38800;
	text-decoration: none;
}
	.red-link:hover {
		text-decoration: underline;
	}

.hr-small {
	background-color: #333;
	display: inline-block;
	height: 5px;
	margin-bottom: 30px;
	width: 100px;
}

	.hr-small.hr-full {
		width: 100%
	}

.disabled {
	opacity: .5;
}

.mb-sm {
	margin-bottom: 24px;
}

.mb-xsm {
	margin-bottom: 12px;
}

/* ---------- NAV ---------- */


.nav {
	height: 100px;
	padding: 25px 0;
}

.nav ul, .footer ul {
	float: right;
	list-style: none;
}

.nav ul li, .footer ul li {
	display: inline-block;
	margin-left: 20px;
	list-style: none;
}

.nav ul li a {
	color: #666;
	line-height: 50px;
	text-decoration: none;
	font-weight: 400;
	padding: 4px 0;
	position: relative;
}

	.nav ul li a:hover {
		color: #E38800;
	}

.nav ul li a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #E38800;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.nav ul li a:hover::before {
  transform: scaleX(1);
}


.nav ul li a.btn-primary {
	color: #fff;
	line-height: 40px;
}
	.nav ul li a.btn-primary:hover {
	color: #fff;
}

.nav a.logo, a.logo {
  margin-top: 10px;
  display: inline-block;
  background-image: url("../../../site/assets/files/img/_main/ritual_logo_hover.jpg");
  background-position: center;
  background-size: contain;
}

.nav img, a.logo img {
	float: left;
	width: 181px;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

.nav img:hover, a.logo img:hover {
	cursor: pointer;
	opacity: 0;
}


/* ---------- HOMEPAGE ---------- */


	.hero .grid {
		padding: 100px 0;
	}

.hero {
  text-align: center;
}

@keyframes loadH1 {
  0% {
    opacity: 0;
    transform: translateY(.7em);
  }
  100% {
    opacity: 1;
    transform: none; 
  }
}

		.hero h1 {
			max-width: 750px;
    	animation: loadH1;
    	animation-duration: 1s;
		}



		.hero p {
		margin-bottom: 32px;
		}

		.hero ul li {
			margin: 0 4px;
		}

.work-summary .grid .col {
	position: relative;
}

		a.work-thumbnail {
			display: block;
			position: relative;
		}

		a.work-thumbnail {
				color: #222;
				font-weight: 400;
				margin-bottom: 64px;
				text-align: left;
			}

		a.work-thumbnail h2 {
				margin: 6px auto 4px;
			}

		a.work-thumbnail p {
			font-size: 16px;
		}

a.work-thumbnail img {
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

a.work-thumbnail:hover img {
    opacity: .8;
}


.services-summary h1, .footer h1 {
	margin-bottom: 8px;
}

	.services-summary p.subtitle, .footer p.subtitle {
		margin-bottom: 56px;
	}

	.services-summary ul {
		margin-bottom: 24px;
	}

	.services-summary ul li {
		list-style: circle;
		margin-left: 16px;
	}

	.services-summary img {
		padding: 0 0px 16px;
	}

.about-summary p {
	margin: 0 auto 36px;
}

.footer .pad {
	padding-bottom: 40px;
}


/* ---------- SERVICES ---------- */


.pricing .col-1-3 {
	margin: 30px 0 60px;
}

.pricing .module {
	padding: 40px 32px 24px;
}

.pricing h2 {
	display: block;
	font-size: 26px;
	line-height: 1;
	margin: 6px auto 4px;
}

.pricing .meta {
	color: #999;
	font-size: 16px;
}

.pricing ul {
	margin: 24px auto;
}

.pricing li {
	text-align: left;
	background: url('../../../site/assets/files/img/_main/check.png') no-repeat;
	padding: 0 0 0 28px;
	list-style: none;
	font-size: 16px;
	margin: 0 0 10px 0;
	vertical-align: middle;
}

.pricing .btn {
	margin: 24px auto;
}

.process .col-1-3, .values .col-1-3 {
	padding: 24px;
}

.process .hr-small, .faq .hr-small {
	width: 100%;
}

.process h2, .process p {
	text-align: left;
}

.process h2 {
	margin-top: 50px;
}


/* ---------- CONTACT ---------- */


.contact .form {
	margin-right: 32px;
}

.contact label {
	color: #555;
	display: block;
	font-size: 13px;
}

.contact ::placeholder {
	color: #aaa;
}

.contact input, .contact textarea, .contact select {
	background-color: #fff;
	border-radius: 4px;
	color: #333;
	display: block;
	border: solid 1px #ccc;
	font-family: "DM Sans", Helvetica, sans-serif;
	font-size: 18px;
	line-height: 44px;
	margin-bottom: 8px;
	padding: 0 12px;
	width: 100%;
}

.contact input:focus, .contact textarea:focus, .contact select:focus {
	border: 1px solid #E38800 !important;
	box-shadow: 0 0 3px #E38800 !important;
	outline-color: #E38800 !important;
	-moz-box-shadow: 0 0 3px #E38800 !important;
	-webkit-box-shadow: 0 0 3px #E38800 !important;
}

.contact textarea {
	height: 150px;
	line-height: 30px;
	margin-bottom: 20px;
	padding: 12px 12px;
}

.contact select {
	background-color: #fff;
	border-radius: 0;
	height: 46px;
}

.contact .btn-primary {
	background-color: #E38800;
	border-radius: 4px;
	width: 100%;
	text-align: center;
  border: solid 2px #E38800;
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 40px;
	padding: 0 20px;
	text-decoration: none;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
	-webkit-appearance: none;
}

	.contact .btn-primary:hover {
		background-color: #E38800;
		border-color: #E38800;
		color: #fff;
		cursor: pointer;
	}

.contact .calendar {
	border-radius: 4px;
	margin-top: 20px;
	padding: 24px;
}

.contact .faq {
	margin-top: 64px;
}


/* ---------- ABOUT ---------- */


.about .col-1-3 {
	padding-right: 50px;
}



/* ---------- BLOG ---------- */

.blog a:hover .btn {
	background-color: #FF5C67;
	color: #fff;
	cursor: pointer;
}

.blog.article .col-2-3 {
	float: none;
    margin: 0 auto;
}
	
	.blog.article h1 {
		margin-bottom: 8px;
	}

	.blog.article h2, .blog.article h3 {
		margin-bottom: 12px;
		text-transform: none;
	}

	.blog.article h2 {
		font-size: 21px;
		font-weight: 600;
	}

	.blog.article.work h2, .blog.article.work h3 {
    margin: 0 auto 12px;
	}

	.blog.article p, .blog.article ul {
		margin: 0 auto 30px;
	}

	.blog.article ul li {
		list-style: disc;
		margin-left: 24px;
	}

	.blog.article.work p.subtitle {
		font-size: 16px;
		color: #666;
		max-width: 100%;
	}

	.blog.article p.wide {
		max-width: 100%;
		text-align: center;
	}

	.blog.article img {
		margin: 32px auto;
	}

	.blog.article a.logo img {
		margin: 0;
	}

	.blog.article figcaption {
		color: #999;
		font-size: 17px;
    	margin-bottom: 36px;
	}

	.blog.article blockquote p, .blog.article.work blockquote p {
    	font-size: 36px;
    	margin: 42px 0;
    	max-width: 100%;
	}

	.blog.article blockquote .cite {
		color: #888;
		font-size: 18px;
    	text-transform: uppercase;
	}


/* ---------- RESUME ---------- */

.resume {
	max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.resume h2 {
	margin-bottom: 48px;
}

.resume .role-details p {
	color: #888;
	margin-bottom: 0px;
}

.resume .role-details a {
	color: #E38800;
	font-size: 1.2em;
	font-weight: 600;
}

.resume .role-description p, .resume .role-description ul {
	margin-bottom: 48px;
}


/* ---------- FOOTER ---------- */

.footer {
	color: #eee;
}

.footer ul li a {
	color: #fff;
	text-decoration: none;
}

	.footer ul li a:hover {
		text-decoration: underline;
	}

	.footer2.fill-black {
		background-color: #111;
		color: #CCC;
		font-size: 16px;
	}

	.footer2, .footer2 a {
		color: #CCC;
		font-size: 14px;
		font-weight: 400;
	}


/* ---------- SMALL SCREENS ---------- */

@media (max-width: 700px) {

.text-larger {
	font-size: 18px;
}

.narrow {
	width: 100%;
}

.grid {
	width: 100%;
	padding-left: 16px;
	padding-right: 16px;
}

.col {
	padding: 0;
}

.col-full, .col-1-2, .col-1-3, .col-2-3 {
	width: 100%;
}

.pad {
	padding-top: 40px;
	padding-bottom: 40px;
}

.pad-sm {
	padding-top: 24px;
	padding-bottom: 24px;
}

.btn {
	width: 100%;
}

h1, h2, h1.text-large {
	font-size: 24px;
}

h1, .align-center h1 {
	margin-bottom: 8px;
}

h3 {
	margin-bottom: 8px;
	text-transform: none;
}

p {
	margin-bottom: 16px;
}

h1, h2, h3, h4, p, h1.narrow {
	text-align: left;
}

.nav {
	height: auto;
	padding: 24px 12px 12px;
	text-align: center;
}

.nav ul {
	float: none;
}

.nav ul li {
	margin: 0 10px 8px;
}

.hero .grid {
	padding: 32px 16px;
	text-align: left;
}

.hero h1.text-large {
	font-size: 30px;
	line-height: 40px;
	margin-bottom: 12px;
}

.hero p {
	margin-bottom: 24px;
}

.hero ul li {
	width: 45%;
}

.work-summary .col-1-2 {
	margin-bottom: 6px;
}
	
	.work-summary h1 {
	margin-bottom: 32px;
	}

	a.work-thumbnail {
		margin-bottom: 32px;
	}

.services-summary .col-1-3 {
	margin-bottom: 24px;
}
	.services-summary p.subtitle {
		margin-bottom: 32px;
	}

	.services-summary img {
		  width: 90px;
	    margin: 0px auto 8px;
	    padding: 0;
	}

	.services-summary h2, .services-summary ul, .services-summary p {
		margin-bottom: 12px;
	}

.pricing .col-1-3 {
	margin: 10px 0;
}

.pricing .module {
	padding: 32px 32px 16px;
	margin: 0 16px;
	border-radius: 8px;
}

	.pricing .module h2 {
		text-align: center;
	}

.pricing ul {
	font-size: 18px;
    margin: 12px auto;
}

.process .col-1-3, .values .col-1-3 {
	padding: 0;
}

.about .intro {
	font-size: 18px;
    line-height: 1.7;
}

.about .col-1-3 {
	margin-bottom: 12px;
	padding-right: 0;
	text-align: center;
}

.about img {
	max-width: 240px;
}

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

.blog.article p, .blog.article.work p, .blog.article.work h2, .blog.article.work h3 {
	max-width: 100%;
}

.blog.article p {
	font-size: 18px;
}

.blog.article blockquote p {
	font-size: 21px;
	width: 100%;
}

.blog.article img {
	margin: 0;
}

.contact .form {
    margin-right: 0;

.gravity-contact-form {
	margin-right: 0;
	margin-bottom: 36px;
}

.gravity-contact-form .module {
	padding: 12px;
}

.full-width.fill-red {
	padding: 12px 0 24px;
}

.fill-width.fill-red h2 {
	text-align: center;
}

.footer .float-left, .footer .float-right {
	float: none;
	text-align: center;
    margin: 12px auto;
    display: block;
}

.footer ul li {
	margin: 0 10px;
}

.footer .grid p {
	margin-bottom: 24px;
}

.footer .btn {
	text-align: center;
}

}



/* ---------- FOUT ---------- */

.wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4, .wf-loading p {
	visibility: hidden;
}