@charset "utf-8";

body { color:#222; background:#fff; font-size:0px; }

#site h1 { margin:0px; line-height:1.5; font-size:65px; }
#site h2 { margin:0px; line-height:1.5; font-size:48px; }

@media all and (max-width:1024px) {
#site h1 { font-size:55px; }
#site h2 { font-size:44px; }
}
@media all and (max-width:768px) {
#site h1 { font-size:45px; }
#site h2 { font-size:40px; }
}

.wrapper { max-width:1200px; width:100%; margin:0px auto; box-sizing:border-box; padding-right:65px; padding-left:65px; text-align:center; }

@media all and (max-width:768px) {
.wrapper { padding-right:20px; padding-left:20px; }
}

.content { padding-top:75px; padding-bottom:90px; }
@media all and (max-width:768px) {
.content { padding-top:50px; padding-bottom:65px; }
}

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

@media all and (max-width:1024px) {
.parallax { background-attachment:local; }
}

.green-button { border:1px solid #2ea701; border-radius:50px; padding:15px 30px; background:none; background:#2ea701; font-family:'Ubuntu Sans', sans-serif; color:#fff; }
.ghost-button { border:1px solid #fff; border-radius:50px; padding:15px 30px; background:none; font-family:'Ubuntu Sans', sans-serif; color:#fff; }

/* Header */
.mobile-header,
#toggle_mobile_nav,
.mobile-nav { display:none; } /* Hide these by default */

.header { position:absolute; height:60px; left:0px; right:0px; z-index:999; padding:0px 30px; background:rgba(255,255,255, .95); }
.header-logo-box { float:left; padding-top:16px; }
.header-logo { display:inline-block; width:144px; height:28px; background:url(https://razor.chat/img/logo.svg) no-repeat; }
.header-nav { float:left; padding-top:20px; }
.header-nav a,
.header-nav a:visited { margin-left:40px; font-size:13px; color:#3e4d55; font-weight:400; }
.header-buttons { float:right; padding-top:20px; }
.header-buttons .green-button { border:1px solid #2ea701; padding:4px 10px; background:#2ea701; font-size:13px; }
.header-buttons .ghost-button { border:1px solid #3e4d55; padding:4px 10px; color:#3e4d55; font-size:13px; }

@media all and (max-width:1024px) {

	.header { display:none; }

	.mobile-header { display:block; width:100%; height:61px; border-bottom:1px solid rgba(0,0,0, .1); box-sizing:border-box; padding-left:15px; padding-right:15px; line-height:1; }
	.mobile-header-logo-box { float:left; padding-top:14px; }
	.mobile-header-logo { display:inline-block; width:164px; height:32px; background:url(https://razor.chat/img/logo.svg) no-repeat; }

	/* Mobile menu icon (this is a label for the checkbox that shows and hides the mobile nav) */
	.open-mobile-nav-icon { float:right; display:inline; opacity:1; margin-top:22px; box-sizing:border-box; font-size:24px; color:#ccc; cursor:pointer; }
	.mobile-nav-icon-bar { display:block; width:22px; height:3px; background-color:#999; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s; }
		#mobile_nav_icon_top,
		#mobile_nav_icon_middle { margin-bottom:4px; }

	/* If the checkbox is checked, expand the menu and change the icon into an X */
	#toggle_mobile_nav:checked ~ .mobile-nav { max-height:1000px; }
	#toggle_mobile_nav:checked ~ .mobile-header #mobile_nav_icon_top { transform:rotate(45deg); transform-origin:0% 60%; -webkit-transition:transform 0.3s; -moz-transition:transform 0.3s; transition:transform 0.3s; }
	#toggle_mobile_nav:checked ~ .mobile-header #mobile_nav_icon_middle { opacity:0; -webkit-transition:opacity 0.3s; -moz-transition:opacity 0.3s; transition:opacity 0.3s; }
	#toggle_mobile_nav:checked ~ .mobile-header #mobile_nav_icon_bottom { transform:rotate(-45deg); transform-origin:8% 60%; -webkit-transition:transform 0.3s; -moz-transition:transform 0.3s; transition:transform 0.3s; }

	.mobile-nav { display:block; top:0; left:0; z-index:1000000; width:100%; max-height:0px; overflow:hidden; background-color:#1c1c1c; text-align:left; transition:.5s; }
	.mobile-nav-links a { display:block; border-top:1px dotted rgba(255,255,255, .05); padding:15px 5px; font-size:16px; color:#aaa; text-decoration:none; transition:0.3s; }
	.mobile-nav-links a:hover { background:rgba(255,255,255, .03); color:#ccc; }

}

/* Hero */
#hero { padding:260px 20px 240px 20px; background-image:url('https://razor.chat/img/bg-hero.jpg'); color:#fff; }
.hero-text { max-width:750px; margin:0px auto 35px auto; }

@media all and (max-width:1024px) {
#hero { padding:210px 20px 200px 20px; background-size:auto 750px; }
}
@media all and (max-width:480px) {
#hero { padding:80px 20px 120px 20px; background-size:auto 550px; }
}

/* Steps */
#steps { background:#f7f7f7; }
.steps-box { display:inline-block; width:30%; vertical-align:top; }
.steps-spacer { display:inline-block; width:5%; }
.steps-icon { display:block; margin:25px auto 15px auto; transition:all .5s; }
@media all and (max-width:1024px) {
.steps-box { display:block; width:100%; }
.steps-spacer { display:block; height:10px; }
}

/* Features */
#features { background:#fefefe; }
.feature-box { display:table; table-layout:fixed; width:100%; }
.feature-box-spacer { table-layout:fixed; height:15px; }
.feature-content { display:table-cell; box-sizing:border-box; padding:60px; border:1px solid #f4f4f4; vertical-align:top; background:#f7f7f7; transition:all .5s; }
.feature-content:hover { background:rgba(58,172,27, .13); }
.feature-content-spacer { display:table-cell; width:15px; }
.feature-content .icon { font-size:42px; }

@media all and (max-width:768px) {
.feature-box { display:block; }
.feature-box-spacer { display:block; height:25px; }
.feature-content { display:block; padding:30px; }
.feature-content-spacer { display:block; width:100%; height:25px; }
.feature-content .icon { font-size:38px; }
}

/* Callout */
#callout { padding:150px 20px 160px 20px; background-image:url('https://razor.chat/img/bg-quotes.jpg'); color:#fff; }

@media all and (max-width:480px) {
#callout { padding:100px 20px 110px 20px; background-size:auto 1000px; }
}

/* Plans */
#plans { background:#f7f7f7; }
.plans-outer { display:table; width:100%; }
.plans-inner { display:table-cell; }
.plans-box { display:inline-block; width:37%; box-sizing:border-box; padding:30px 45px 40px 45px; background:#fff; vertical-align:middle; }
.plans-spacer { display:inline-block; width:6%; }

@media all and (max-width:1024px) {
.plans-box { display:block; width:100%; }
.plans-spacer { display:block; width:100%; height:25px; }
}

/* FAQ */
.faq-box { max-width:500px; margin:0px auto; }

.faq-item { border-bottom:1px solid rgba(0,0,0, .1); padding:10px 0px ; cursor:pointer; }
.faq-question-box { display:table-row; user-select:none; cursor:pointer; }
.faq-question-box + .faq-answer { display:none; }

.faq-icon { display:table-cell; width:19px; height:19px; padding-right:10px; text-align:center; font-size:22px; }
.faq-icon i { bottom:-2px; }
.icmn-minus-circle { display:none; }
.faq-question { display:table-cell; line-height:1.5; font-size:22px; }
.faq-answer { display:none; padding-top:5px; padding-left:30px; line-height:1.75; font-weight:400; }

.faq-question-box.is-open .icmn-minus-circle { display:inline-block; color:#33b702; }
.faq-question-box.is-open .faq-question { color:#33b702; }
.faq-question-box.is-open .icmn-plus-circle { display:none; }
.faq-question-box.is-open + .faq-answer { display:block; }

/* Contact */
#contact { background:#f7f7f7; }
.contact-form { display:block; max-width:650px; margin:0px auto; }
#last_name_field { display:none !important; }

/* Footer */
footer { padding-top:80px; padding-bottom:50px; background:#111; }
.footer-link-box { margin:0px auto 50px auto; }
.footer-link-box a,
.footer-link-box a:visited { display:inline-block; text-decoration:none; }
.footer-link-spacer { margin:0px 15px; cursor:default; }
.footer-logo { display:block; width:143px; height:28px; margin:20px auto 40px auto; background:url(https://razor.chat/img/logo-white.svg) no-repeat; }

@media all and (max-width:768px) {
footer { padding-top:50px; padding-bottom:30px; }
.footer-link-box a,
.footer-link-box a:visited { margin:10px 15px; text-decoration:underline; }
.footer-link-spacer { display:none; }
}

/* Legal */
#legal h1 { margin:0px; line-height:1.5; font-size:26px; }
#legal h2 { margin:0px; line-height:1.5; font-size:20px; }
	.legal-links-h2 { line-height:1.5 !important; }
.legal-text { margin-bottom:20px; }
.legal-text .list-td1,
.legal-text .list-td2 { padding-top:5px; }