/*
Theme Name:         Crystalynn 2015
Theme URI:          http://www.crystalynn.com
Description:        Custom theme for Crystalynn.com 2015
Version:            1.0
Author:             Crystalynn Meyer
Author URI:         http://www.crystalynn.com
Text Domain:        crystalynn

License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/

html { box-sizing: border-box; }
body { background: #fff; font-family: Tahoma, Verdana, sans-serif; margin: 0 auto; text-align: center; font-size: 18px; color: #323232; }
td { vertical-align: top; }

img { border: none; }
a { color: #ff0000; font-weight: 700; text-decoration: underline; outline: none; }
a:visited, a:active { color: #ff0000; }
a:hover { color: #ff0000; text-decoration: none; outline: none; }
*, *::before, *::after { box-sizing: inherit; }
p { margin: 15px auto; }
dt { font-weight: bold; }
dd { padding-left: 15px; }
blockquote { font-style: italic; padding: 20px; margin: 25px; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
form { display: inline; }
input.button { padding: 0 10px; cursor: pointer; }

h1, h2 { font-family: 'Josefin Sans', sans-serif; font-weight: 700; color: #e71e28; font-size: 30px; text-transform: uppercase; margin: 0; }
h3 { font-family: 'Arial', serif; font-weight: 400; color: #ff0000; font-size: 22px; margin: 0; }
h4 { font-family: 'Arial', serif; font-weight: 400; color: #ff0000; font-size: 14px; margin: 0; }
h5 { font-family: 'Arial', serif; font-weight: 400; color: #ff0000; font-size: 12px; margin: 0; }
h6 { font-family: 'Didact Gothic', sans-serif; font-weight: 400; color: #323232; font-size: 18px; text-transform: uppercase; margin: 0 0 3px; letter-spacing: 2px; } 

.container { width: 1120px; text-align: left; position: relative; margin: 0 auto; display: inline-block; }
.fl-left { float: left !important; display: inline; }
.fl-right { float: right !important; display: inline; }
.block { display: block !important; }
.txt-center { text-align: center !important; }
.txt-left { text-align: left !important; }
.txt-right { text-align: right !important; }
.relative { position: relative; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }
.margin-0 { margin: 0 !important; }
.arrow-right { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid red; float: right; margin-top: 2px; }
.btn { font-family: 'Josefin Sans', sans-serif; color: #fff !important; text-transform: uppercase; font-weight: 700; text-align: center; display: inline-block; padding: 13px 40px; font-size: 18px; text-decoration: none; border: 2px solid #fff; cursor: pointer; letter-spacing: 1.25px; }
.img-left { float: left; margin: 0 20px 15px 0; width: 300px; }
.img-right { float: right; margin: 0 0 15px 20px; width: 300px; }

/* Half Size Full Width Boxes CSS */
.width-half { width: 50%; float: left; }
.width-half .container { margin: 0 auto; }
.width-half .container p { line-height: 26px; }
.width-half-left .container { margin-right: 0; }
.width-half-right .container { margin-left: 0; }
.width-half-text .container { width: 450px; padding: 85px 0 50px 80px; }
.width-half-text .width-half-text-left { padding-left: 0; padding-right: 80px; }
.width-half-img { overflow: hidden; }
.width-half-img .container { width: auto; float: right; }
.width-half-text .btn { margin-top: 20px; }
.width-fourth { width: 24%; display: inline-block; }

/* Contact Form CSS */
label { display: block; font-family: 'Arial', serif; font-size: 16px; margin: 0 0 0 3px; }
.i1 { border: 2px solid #fff; padding: 6px; margin: 5px 0 10px; width: 100%; }
.i1-textarea { height: 100px; font-family: 'Arial', sans-serif; }
.checkout-error-field { border: 2px solid #002543; }
.checkout-required-error { float: left; padding: 15px 0 0; font-weight: 700; }

/* Clearfix */
.clearfix::before, .clearfix::after { content: ""; display: table; }
.clearfix::after { clear: both; }
.clear { clear: both; }

/* Header */
#sticky-wrapper { width: 100%; position: fixed; top: 0; left: 0; z-index: 999; }
.admin-bar #sticky-wrapper { top: 32px; }
header { position: absolute; padding: 36px 0; font-family: 'Didact Gothic', sans-serif; color: #fff; font-size: 18px; width: 100%; }
#logo { float: left; }
#header-right { float: right; }
#header-contact { display: inline-block; margin: -4px 0 8px; float: right; position: relative; z-index: 999; }
#header-contact .fa-linkedin, #header-contact .fa-file-text-o, #header-contact .fa-mobile { margin: 0 15px 0 0; color: #e1e1e1; }
#header-contact .fa-linkedin, #header-contact .fa-file-text-o { font-size: 17px; }
#header-contact .fa-mobile { font-size: 22px; vertical-align: -1.5px; }
#header-number { letter-spacing: 0.75px; text-decoration: none; color: #fff !important; font-weight: 400; margin: 0 35px 0 0; }
#header-contact .btn { font-size: 13px; padding: 5px 17px 6px; }
#header-contact .btn i { font-size: 16px; vertical-align: 0; margin: 0 7px 0 0; }

/* Navigation */
nav { margin: 0; position: relative; z-index: 998; }
#mobile-menu { display: none; visibility: hidden; background: #fff; cursor: pointer; margin: 0; text-align: center; width: 100%; font-weight: 700; padding: 8px; text-transform: uppercase; color: #163e4a; }
#mobile-menu i { margin-left: 10px; vertical-align: -1px; color: #e71e28; }
#topnav { max-width: 960px; display: block; margin: 0 auto; float: left; }
#topnav ul { list-style: none; margin: 0; padding: 0; }
#topnav li { display: inline-block; position: relative; padding: 0; margin: 0; }
#topnav a, #mobile-menu { font-size: 18px; letter-spacing: 1.25px; }
#topnav a { color: #fff; text-transform: lowercase; font-weight: 400; text-decoration: none; padding: 10px 15px; }
#topnav li:last-child a { padding-right: 0; }
#topnav a:hover { font-weight: 700; }

/* Banner */
#banner { width: 100%; position: relative; z-index: 10; height: 479px; background: #163e4a; color: #fff; }
.banner-img { width: 100%; position: absolute; box-sizing: border-box; overflow: hidden; }
.banner-img:before { position: absolute; width: 50.25%; left: 0; bottom: 0; border-bottom: 26px solid #fff; border-right: 40px solid transparent; display: block; content:" "; }
.banner-img:after { position: absolute; left: 49.5%; bottom: 0; right: 0; border-bottom: 26px solid #fff; border-left: 40px solid transparent; display: block; content:" "; }
.banner-img img { margin: 0 auto -4px; }
.banner-text { text-align: center; position: absolute; top: 115px; left: 0; z-index: 20; width: 100%; }
.banner-text h6, .banner-text h1 { color: #fff; }
.banner-text p { margin: 25px auto; max-width: 815px; line-height: 26px; }

/* Content */
#hpcontent { padding: 40px 0; }
#hpcontent p { line-height: 28px; }
#experience-lines { padding: 5px 0 0 45px; }
.experience-bar { background: #e2cecf url(images/stripes-diagonal.png) left top repeat; height: 32px; width: 100%; position: relative; margin: 15px 0 0; }
.experience-bar-title { position: absolute; top: 0; left: 0; z-index: 20; font-size: 16px; font-family: 'Didact Gothic', sans-serif; padding: 4px 11px; color: #fff; text-transform: uppercase; }
.experience-bar-red { position: absolute; top: 0; left: 0; z-index: 10; background: url(images/stripes-diagonalr.png) left top repeat; height: 32px; }
#btn-contact { display: none; border-color: #e71e28; color: #e71e28 !important; margin: 0 0 -15px; }

/* Portfolio */
#portfolio-div { background: url(images/bg-portfolio.jpg) no-repeat; background-size: 100% auto; width: 100%; padding: 75px 0 60px; }
#portfolio-text { text-align: center; color: #fff; }
#portfolio-text h6, #portfolio-text h1 { color: #fff; }
#portfolio-text p { max-width: 800px; line-height: 26px; }
#portfolio-text .btn { font-size: 16px; padding: 10px 20px; margin: 10px 10px 0; }
#portfolio-text .btn-active { background: #fff; color: #163e4a !important; }

/* Boxes */
.box { width: 25%; position: relative; display: inline-block; float: left; }
.box:first-child { margin-left: 0; }
.box:last-child { margin-right: 0; }
.box-img { position: relative; top: 0; width: 100%; overflow: hidden; }
.box-img img { margin: 0 auto -4px; width: 100%; }
.box .fancybox { color: #163e4a; text-decoration: none; font-weight: 400; }
.box-overlay { position: absolute; bottom: 0; width: 100%; height: 100%; left: 0; background: rgba(225, 225, 225, 0.9); text-align: center; color: #163e4a; padding: 25px; box-sizing: border-box; }
.box-overlay-spacer { height: 115px; width: 100%; }
.box h1, .box h6 { color: #163e4a; }
.box-overlay-content { display: none; }
.box-overlay-content p { line-height: 26px; }
.box-overlay-content .btn { font-size: 16px; margin-top: 10px; padding: 10px 15px; background: #163e4a; }

/* Testimonials */
#testimonials-div { background: #8f0008 url(images/bg-testimonials.jpg) no-repeat; background-size: 105% auto; width: 100%; height: 319px; }
#prev, #next { position: absolute; top: 90px; font-size: 100px; color: #e61d27; cursor: pointer; }
#prev { left: 45px; }
#next { right: 45px; }
.testimonial { display: none; }
#testimonials-text { color: #fff; margin: 55px 0 0; line-height: 28px; max-width: 960px; }
#testimonials-text i { color: #e1e1e3; top: -5px; position: relative; margin: 0 5px 0 0; }
#testimonials-text p { margin: 0 auto 35px; }
.testimonial-author { font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 26px; text-transform: uppercase; }
.testimonial-company { font-family: 'Didact Gothic', sans-serif; font-weight: 400; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; }

/* Footer */
footer { background: #163e4a; border-top: 4px solid #fff; padding: 40px 0 35px; color: #fff; }
.footer-left { margin-top: 10px; }
footer a, footer a:hover { text-decoration: none; color: #fff; }
footer .fa-circle { color: #0a272f; }
footer .fa-envelope { font-size: 12px; }
footer .fa-linkedin, footer .fa-file-text-o { font-size: 14px; }
footer .fa-mobile { font-size: 22px; }
#footer-number, #footer-number:hover { color: #fff; text-decoration: none; font-weight: 400; font-family: 'Didact Gothic', sans-serif; margin: 0 0 0 5px; letter-spacing: 1.25px; }
.footer-center { display: inline-block; }
#footer-logo { width: 305px; display: block; }
#footer-copyright { font-size: 12px; margin: 7px 0 -7px 20px; color: #e1e1e1; }
#footer-nav { max-width: 330px; text-align: right; }
#footer-nav div { display: inline; }
#footer-nav ul { list-style: none; margin: 0; padding: 0; display: inline; }
#footer-nav li { display: inline-block; position: relative; padding: 0; margin: 0; }
#footer-nav a { font-family: 'Didact Gothic', sans-serif; color: #fff; text-transform: lowercase; font-size: 18px; letter-spacing: 1.25px; font-weight: 400; text-decoration: none; padding: 10px; }
#footer-nav a:hover { font-weight: 700; }

/* About Page */
.fancybox-inner { overflow: auto !important; }
#banner-fb { width: 100%; position: relative; background: #163e4a url(images/header-bg.jpg) repeat-x; color: #fff; padding: 20px 0; }
#banner-fb h6, #banner-fb h1 { color: #fff; }
#content-fb { text-align: left; margin: 20px 0 0; }
#content-fb .img-left { width: 150px; border: 1px solid #e71e28; }
#content-fb .btn { background: #163e4a; display: inline-block; width: 50%; margin-top: 5px; }
#content-fb .btn-red { background: #e71e28 !important; }
#content-fb .btn i { margin: 0 5px 0 0; }

/* Contact Page */
#contact-links { margin: 0 0 10px; }
#contact-number, #contact-email { margin-right: 20px; }
#contact-form { font-weight: 700; display: inline-block; color: #163e4a; }
#contact-links .fa-circle { color: #e71e28 !important; }
#contact-links .fa-mobile, #contact-links .fa-envelope { color: #fff; }
#contact-links .fa-envelope { font-size: 12px; }
#contact-links .fa-mobile { font-size: 22px; }
#contact-links a { color: #163e4a; text-decoration: none; }
#content-fb form label { display: none !important; }
#content-fb input[type=text], #content-fb textarea { padding: 8px; font-size: 16px; }
#content-fb .gform_wrapper { margin: 0; }
#content-fb .gform_body { text-align: center; }
.form-half { display: inline-block; width: 48% !important; }
.form-half:first-child { margin-right: .375em; }
.form-half input { width: 100% !important; }
.form-half textarea { width: 97% !important; }
#content-fb .gform_button { background: #163e4a; font-family: 'Josefin Sans', sans-serif; color: #fff !important; text-transform: uppercase; font-weight: 700; text-align: center; padding: 13px 40px; font-size: 18px; text-decoration: none; border: 2px solid #fff; cursor: pointer; letter-spacing: 1.25px; margin: 0 auto; display: block; width: 98%; }
#content-fb .gform_footer { padding: 0; margin: 0; }
#content-fb .gform_confirmation_wrapper { margin: 15px 0 0; text-align: center; }
#content-fb .validation_error { font-size: 1em; text-align: center; }
#content-fb .validation_message { margin: 0; padding: 5px 0 !important; font-size: 14px; }

/******** MEDIA QUERIES ********/
@media (max-width: 1100px) {
	.container { width: 960px; }
}
@media (max-width: 979px) {
	.container { width: 100%; padding-left: 20px !important; padding-right: 20px !important; }
	nav .container, #boxes .container, #blog .container, #footer-request .container { padding: 0; }	
	#boxes .container, #blog .container { text-align: center; }
	iframe { width: 100%; }
	.fancybox-inner { overflow: scroll !important; }
	
	header { padding: 25px 0; }
	#logo { width: 300px; }
	#header-right { margin-top: -5px; }
	#header-contact { margin: -4px 0 4px; }
	#header-contact .btn { font-size: 11px; padding: 6px 14px; border: 1px solid #fff; }
	#header-contact .btn i { font-size: 13px; }
	
	#topnav a { padding: 4px 8px; font-size: 14px; }
	
	.banner-text { top: 100px; padding: 0 20px; }
	
	#hpcontent { padding: 15px 0; }	
	#portfolio-div { background-repeat: repeat-y; padding: 30px 0; }
	#portfolio-text .btn { font-size: 14px; }
	.box { width: 50%; }
	.box:last-child { border-bottom: 0; margin-bottom: 0; }
	.box-img { max-height: 320px; }
	.box-overlay-spacer { display: none !important; }
	.box-overlay-content { display: block !important; }
	.box-overlay-content p { margin-bottom: 5px; }
	
	#testimonials-div { background-repeat: repeat-y; padding: 0 35px; }
	#testimonials-text { margin: 20px 0; }
	.testimonial { margin: 0 50px; }
	#testimonials-text p { margin: 0 auto 15px; }
	#prev, #next { top: 70px; font-size: 80px; padding: 0 15px; z-index: 100; }
	#prev { left: 10px; }
	#next { right: 10px; }
	
	footer { padding: 20px 0; }	
	footer .fl-left, footer .fl-right { float: none !important; display: block; }
	.footer-left { margin: 0 0 10px; }
	#footer-logo { margin: 5px auto 10px; }
	#footer-nav { max-width: 100%; text-align: center; margin: 15px 0; }
	#footer-nav li:last-child a { padding-right: 10px; }	
}
@media (max-width: 759px) {
	#sticky-wrapper { position: relative; }
	header .container, #banner .container, #experience-lines { padding: 0 !important; }
	.fl-left, .fl-right { float: none !important; display: block; }
	.btn { padding: 10px 15px !important; font-size: 18px !important; line-height: 22px !important; }
	.clearfix::before, .clearfix::after { display: none; }	
	.w-50 { width: 100%; }
	
	.width-half { float: none; width: 100%; }
	.width-half-text .container { padding: 30px 15px; }
	.width-half .container { width: 100%; }
	.width-half-img .container { padding: 0; }
	.width-half-img img { width: 100%; }
	
	.admin-bar #sticky-wrapper { top: 0; }
	header { position: relative; }
	#header-fixed {  padding: 0 !important; border-bottom: 0 !important; background: url(images/header-mobile.jpg) no-repeat !important; background-size: 100% auto !important; }
	#logo { width: 90%; margin: 15px auto 10px; float: none; display: block; }
	#header-right, #header-contact { float: none; margin: 0 auto !important; text-align: center; }
	#header-contact i { font-size: 32px; vertical-align: -2.5px; }
	#header-number { margin: 0; font-size: 24px; }
	#header-contact .btn { display: block; margin: 15px 0 20px; border: 2px solid #fff; }
	
	#mobile-menu { display: block; visibility: visible; }
	#topnav { display: none; position: relative; top: 0; left: 0; float: none; }
	#topnav ul { margin: 0; }
	#topnav li { display: block; width: 100%; padding: 0; margin: 0; background: #fff; border-top: 1px solid #e71e28; text-align: center; }
	#topnav a { display: block; padding: 10px; font-weight: 700; color: #163e4a !important; }
	#topnav ul ul { display: block; float: none; position: relative; top: 0; left: 0; width: 100%; }
	#topnav ul ul li { padding: 0; margin: 0; }
	#topnav ul ul li a { padding: 10px 15px; line-height: 16px; }
	#topnav ul ul ul { top: 0; left: 0; }
	#topnav-appointment { padding: 15px 0; }
	
	.banner-text { width: 100%; top: 0; left: 0; padding: 15px 10px 20px; position: relative; }
	.banner-img img { width: auto; margin-left: -65%; }
	
	.contact-form { padding-top: 5px; }
	.contact-form .width-fourth { width: 100%; padding: 0; }
	.contact-form label { margin: 15px 0 0; }
	.contact-form .i1 { margin: 5px 0 0; }
	.contact-form .btn { display: block; width: 100%; }
	.checkout-required-error { float: none; }
	
	#hpcontent { padding-top: 20px !important; padding-bottom: 20px !important; }
	#btn-contact { display: block !important; }
	#portfolio-div { padding: 20px 0; }
	#portfolio-text .btn { display: none; }
	.box { width: 100%; float: none; display: block; border-bottom: 1px solid #163e4a; }
	
	#testimonials-div { background-size: auto 105%; height: auto; }
	#prev, #next { top: auto; bottom: 5px; font-size: 100px; }
	#prev { left: 0; }
	#next { right: 0; }
	#testimonials-text { margin: 20px auto 0; }
	.testimonial { padding: 0 10px; }
	#testimonials-text p { margin: 0 auto 20px; }
	.testimonial-author, .testimonial-company { text-align: center !important; }
}
@media (max-width: 499px) {
	.img-left, .img-right { float: none; width: 100% !important; }
	h1, h2 { font-size: 28px; }
	
	#topnav a { font-size: 16px; }
	a.anchor { top: 0 !important; }
	a.anchor2 { top: 0 !important; }
	
	.banner-text p { margin: 10px auto 25px; }
	#portfolio-div { background-repeat: repeat-y; }
	#testimonials-div { background-size: auto 45%; padding: 0; }
	
	footer .container { padding-left: 0 !important; padding-right: 0 !important; }
	#footer-nav { margin: 15px auto; }
	#footer-nav ul { margin: 0; }
	#footer-nav li { display: block; width: 100%; margin: 0; border-top: 1px solid #fff; text-align: center; }
	#footer-nav li a { padding: 5px 0; display: block; }
	#menu-footer-navigation-2 li { border-bottom: 1px solid #fff; }
	#topnav a { display: block; padding: 10px; font-weight: 700; }
	
	#btn-contact i { margin: 0 5px 0 0; }
	#content-fb .btn { display: block; margin-bottom: 5px; width: 100%; }
	#contact-links { margin: 0; }
	#contact-number-span, #contact-email-span, #contact-form-span { display: block; margin: 0 0 5px; }
	.form-half { width: 98% !important; }
}
/* Make sure main menu re-appears when scaled up */
@media only screen and (min-width: 760px) {
	#topnav { display: block !important; }
}