/*
Theme Name: Frog Products - Dichlor Landing Page
Theme URI: http://www.millermultimedia.net/
Description: A responsive theme built for King Technology by <a href="http://www.millermultimedia.net">MillerMultimedia</a>.
Author: Gary Miller
Author URI: http://www.millermultimedia.net/
Version: 1.0
Tags: responsive, white, bootstrap

License: Licensed to King Technology. Not for reuse.
License URI: http://millermultimedia.net/

This theme was built using the Bootstrap 3 framework found on the Bootstrap web site http://twitter.github.com/bootstrap/examples/hero.html
*/

@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Condensed:300,400');
html, body { height: 100%; width: 100%; }
body { padding: 0; margin: 0px; background: #FFF; }
body, td, p, li { color: #000; font-family: 'Encode Sans Semi Condensed', Arial, 'Helvetica Neue', Helvetica, Tahoma, sans-serif; font-weight: 400; font-size: 22px; line-height: 28px; }
body .mainContent p, body .mainContent li, body .mainContent blockquote { font-size: 16px; line-height: 24px; }

.color-red, .main-content .color-red { color: #9f152f; }
.color-britered, .main-content .color-britered, body .footer_wrapper a.color-britered { color: #f0515a; }
.color-white, .white { color: #FFF; }
.color-red { color: #f0515a; }

.gray-background { background: #EBEBEB; }
.white-background { background: #FFFFFF; }

.blog_wrapper_full .container.page_wrapper.padding-bottom { padding-bottom: 10px; margin-top: 0;}
.with-gradient { background: transparent url('images/background-gradient.jpg') repeat-x left bottom; }

.margintop { margin-top: 50px; }
.large-txt p { font-size: 22px !important; line-height: 32px !important; }
.rightcolumn p { padding-bottom: 2px; }

.main-content img.alignleft, .mainContent img.alignleft { margin-right: 20px; margin-bottom: 25px; }
.image-column img { margin-bottom: 25px !important; }

a:link { text-decoration: none; color: #21759b; outline: none; }
a:visited { text-decoration: none; color: #21759b; outline: none; }
a:hover { text-decoration: underline; color: #0f3647; outline: none; }
h3 a:link, h3 a:visited { color: #007298; }
.main-content a, .mainContent a { text-decoration: none; }

a.prev-next-btn, a.prev-next-btn:focus { width: 175px; height: 60px; display: block; border: 2px solid #f0515a; font-size: 16px; font-weight: 700; line-height: 20px; color: #f0515a; text-align: center; padding: 6px 0 14px 0; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; text-decoration: none; outline: none; }
a.prev-next-btn.special { font-size: 15px; font-weight: 400; line-height: 17px; padding: 9px 0 14px 0; width: 200px; background: #FFF; color: #f0515a; outline: none; }
a.prev-next-btn:hover { color: #781e1e; border-color: #781e1e; outline: none; }
.btn-name { font-size: 12px; font-weight: 400; text-transform: uppercase; }
.blog-previous a.prev-next-btn { float: right; margin-right: 10px; }
.blog-next a.prev-next-btn { float: left; margin-left: 10px; }

blockquote { border: 0; }

a.standard-button, .main-content a.standard-button, body .hp-buttons .mydiv a.standard-button { background: #70b2c9 url('images/background-button.png') no-repeat right center; border: 1px solid #4c3041; color: #4c3041; line-height: 24px; padding: 0 28px 0 12px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; display: inline-block; margin-top: 15px; text-decoration: none; }
a.standard-button:hover, .main-content a.standard-button:hover, body .hp-buttons .mydiv a.standard-button:hover { background-color: #017299; text-decoration: none !important; }

body a.blue-btn { background: #02a5e4; color: #ffc423; line-height: 40px; font-size: 33px; padding: 13px 20px 13px 20px; display: inline-block; width: auto; margin: 25px auto 15px auto; text-align: center; text-decoration: none;  -webkit-box-shadow: 2px 2px 10px 0px #999; -moz-box-shadow: 2px 2px 10px 0px #999; box-shadow: 2px 2px 10px 0px #999; }
body a.blue-btn:hover { color: #000; text-decoration: none !important; }

.container.top-text { padding: 60px 120px; }
.container.main-content { padding: 60px 120px; }
.container.main-content.no-side-pad { padding-top: 0; }
.container.main-content.no-bottom-pad { padding-bottom: 0; }
.main-content p { padding: 0 77px; }
.contact-txt .main-content p { padding-left: 0; }
.spaced-words { padding: 0 15px; }

.content_wrapper_full { padding: 0; }

body .footer_wrapper a.blue { color: #72b1c8; }
body .footer_wrapper a.blue:hover { color: #FFF; }

ul { margin-left: 1.3em;}
body .mainContent ul {margin-left: 26px !important; padding-left: 24px !important; }
ul.noBullet { margin-left: 0;}
ul.noBullet li { list-style-type: none;}
ul.spaced li { margin-bottom: 20px;}
ul.slightlySpaced li { margin-bottom: 7px;}
.mainContent ul { margin: 20px 10px 10px 15px !important; padding: 0 !important; }
ol { padding-top: 20px; padding-bottom: 20px; }
ol li { padding-bottom: 15px; }
.main-content li, .mainContent li { padding-bottom: 15px; }

ul.with-check { list-style: none; margin-top: 75px; }
ul.with-check li { list-style-type: none; padding: 8px 5px 8px 30px; background: transparent url('images/icon-check.png') no-repeat 0 0; text-transform: uppercase; font-weight: 700; line-height: 32px; }

.donotshow { display: none; }

.odd-back {  }
.even-back { background-color: #d2dcea; }
.container { padding: 0; }
.content_wrapper_full .container .row { padding-left: 30px; padding-right: 30px; }
.content_wrapper_full .container .row.no-pad { padding-left: 0px; padding-right: 0px; }
.row { margin-left: 0; margin-right: 0; }
.pad-top { padding-top: 100px; }
.clr { clear: both; padding: 0; margin: 0; height: 0; line-height: 0; }
.clear-all { clear: both; }
.col-md-6.column-left, .col-sm-6.column-left { padding-right: 15px; }
.col-md-6.column-right, .col-sm-6.column-right { padding-left: 15px; }

.blue-circle { width: 185px; height: 185px; padding: 0px; margin: 70px auto 15px auto; text-align: center; background-color: #57b8dd; border-radius: 50%; -webkit-box-shadow: 2px 2px 10px 0px #999; -moz-box-shadow: 2px 2px 10px 0px #999; box-shadow: 2px 2px 10px 0px #999; }
.border-top { border-top: 2px solid #000; padding-bottom: 25px; }
a .callout { text-align: center; color: #58595b; font-size: 26px; line-height: 34px; padding: 0 25px; margin: 0; }
a .callout h4 { padding: 0 25px; }

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #000; }

h1 { color: #000; font-family: 'Encode Sans Semi Condensed', Arial, 'Helvetica Neue', Helvetica, Tahoma, sans-serif; font-style: normal; font-weight: 400; font-size: 35px; line-height: 39px; text-align: left; margin-bottom: 20px; margin-top: 0; }
h2 { color: #000; font-family: 'Encode Sans Semi Condensed', Arial, 'Helvetica Neue', Helvetica, Tahoma, sans-serif; font-style: normal; font-weight: 400; font-size: 35px; line-height: 39px; text-align: left; margin-bottom: 20px; }
h3 { color: #000; font-family: 'Encode Sans Semi Condensed', Arial, 'Helvetica Neue', Helvetica, Tahoma, sans-serif; font-style: normal; font-weight: 400; font-size: 27px; line-height: 32px; text-align: left; margin-bottom: 0px; }
h4 { margin-bottom: 3px; color: #b4d530; font-size: 26px; line-height: 34px; font-weight: bold; text-align: center; margin: 0; padding: 0; text-transform: uppercase; }
h5 { margin-bottom: 3px; color: #000; font-style: italic; font-size: 14px; line-height: 18px; font-weight: normal; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }
h2 span.green { color: #b4d530; text-transform: uppercase; padding-top: 30px; }
h2.margin-top { margin-top: 50px; }
.footer_wrapper h4, body .footer_wrapper h4 a { color: #6d97bd; font-weight: 600; text-transform: uppercase; font-size: 14px; font-family: Arial, 'Helvetica Neue', Helvetica, Tahoma, sans-serif; margin: 18px 0 0 0; }
.secondary-wrapper h1 { font-size: 35px; line-height: 40px; font-weight: 700; color #6d6e71; text-transform: uppercase; border-bottom: 1px solid #f0515a; padding-bottom: 15px !important; margin-bottom: 50px !important; }
body .footer_wrapper h4 a:hover { color: #FFF; }
.social-icon i { font-size: 20px; line-height: 28px; margin: 0 14px 0 0; padding: 5px 0; color: #FFF; background: #f0515a; width: 38px; height: 38px; text-align: center; display: inline-block; border-radius: 50%; }
.social-icon:hover i { background: #781e1e; }

.top-text h2 { font-size: 44px; line-height: 55px; padding: 0px; color: #6d6e71; }
.top-text h2 .smaller-txt { font-size: 30px; }
.main-content h2 { text-transform: uppercase; font-size: 35px; line-height: 40px; }
.main-content h3 { font-size: 24px; line-height: 30px; font-weight: 700; color: #6d6e71; text-transform: uppercase; }

h2.wsp-pages-title { display: none; }
h2.exp-date { color: #f0515a; font-size: 35px; line-height: 40px; margin: 0; padding: 0; font-weight: 300; }
p.exp-desc { color: #6d6e71; font-size: 24px; line-height: 34px; margin: 0; padding: 0; font-weight: 300; }

/* Alignments */
.alignleft { display: inline; float: left; }
.alignright { display: inline; float: right; }
.aligncenter { display: block; 	margin-right: auto; margin-left: auto; }
blockquote.alignleft, .wp-caption.alignleft { margin: 0.4em 1.6em 1.6em 0; }
blockquote.alignright, .wp-caption.alignright { margin: 0.4em 0 1.6em 1.6em; }
blockquote.aligncenter, .wp-caption.aligncenter { clear: both; margin-top: 0.4em; margin-bottom: 1.6em; }
.wp-caption.alignleft, .wp-caption.alignright, .wp-caption.aligncenter { margin-bottom: 1.2em; }
body .right-margin { padding-right: 50px; }

/* Column img formatting */

/*.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9
{ padding-right: 0px; padding-left: 0px; } */

.with-padding { padding: 0 110px; }


/* Header */
.header_wrapper_full { background: #88ccc0; height: auto; width: 100%; z-index: 1000; margin-bottom: 0px; border: none; clear: both; position: relative; }
.header_wrapper { height: 93px; margin: 0 auto; position: relative; }
.header-top-row { height: 93px; }
.logo-wrapper { padding: 0; }
.logo-wrapper img { margin: 16px 0 0 0; padding: 0px; }
.tagline h1 { font-size: 46px; line-height: 53px; color: #FFF; padding: 20px 0 20px 40px; margin: 0; text-transform: uppercase; }

/* Custom Layouts */
.main-content .lowercase { text-transform: lowercase; }
.page_wrapper_full .page-image img, .banner_image img { width: 100% !important; max-width: 100% !important; height: auto !important; }


/* Banner Area */
.content_wrapper_full .container.banner-content .row { padding: 0 !important; }
.grayback { background: #d8e6e4; }
.dichlor-banner { background: transparent url('images/dichlor-banner-image.jpg') no-repeat center 0; background-size: 100% auto; min-height: 430px; }
.dichlor-banner h2 { font-size: 38px; text-align: left; line-height: 45px; margin-bottom: 20px; }
.dichlor-banner img { margin-top: 80px; }

.dichlor-facts { margin-top: -54px; }
.dichlor-facts h3 { text-align: center; color: #ff1919; font-size: 30px; line-height: 38px; }
.dichlor-facts p { text-align: center; color: #000; font-size: 21px; line-height: 25px; font-weight: 300; }
.dichlor-note p { font-size: 19px; font-weight: 300; margin-top: 40px; }

.dichlor-howitworks { background: #c5e7e1; }
.dichlor-howitworks h2 { font-size: 56px; line-height: 60px; text-decoration: underline; color: #6e6969; margin-bottom: 50px; }
.dichlor-howitworks p { font-size: 24px; line-height: 33px; font-weight: 300; color: #6e6969; padding-right: 50px; }

.dichlor-bottom h3 { font-size: 38px; line-height: 44px; margin-bottom: 40px; color: #6e6969; }
.uppercase { text-transform: uppercase; }
.dichlor-bottom h4 { font-size: 38px; line-height: 44px; margin-bottom: 10px; color: #6e6969; font-weight: 400; text-align: left; text-transform: none; }
img.get-yours { margin-top: 40px; }


/* Footer */
.footer_wrapper_full { position: relative; background: #55565a; min-height: 100px; width: 100%; color: #000; padding: 40px 0 40px 0; z-index: 11000; }
.footer_wrapper { background: transparent; padding: 0; }
body .contact { text-align: center; color: #98ad12; font-size: 20px; line-height: 40px; font-weight: normal; margin: 0; padding: 35px 0 0 4px; }
body footer[role="contentinfo"] { color: #FFF; font-size: 20px; line-height: 24px; clear: both; text-align: left; }
.footerCopyright { margin-top: 12px; }

.rightcolumn { padding: 45px 0 0 20px; }
.rightcolumn a { margin-bottom: 10px; }

/* Main Body */
.page_wrapper_full { z-index: 20; position: relative; background: #FFF; width: 100%; overflow-x: hidden !important;}
.page_wrapper_full .img-responsive, .content_wrapper_full img, .mainContent img, 
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto; }

.left-column { padding-right: 40px; padding-left: 40px; }
.middle-column { padding-left: 20px; padding-right: 20px; }
.right-column { padding-left: 40px; padding-right: 40px; } 
 
/* Responsive Videos */
.responsive-container { position: relative; padding-bottom: 52.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom: 1em; }
.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* Landscape phones and down */
@media (max-width: 767px) {
	.header_wrapper { height: auto; }
	.header-top-row { height: auto; }
	.tagline h1 { font-size: 30px; padding: 0px; text-align: center; }
	.logo-wrapper img { margin: 15px auto; width: 200px; height: 47px; }
	.dichlor-banner { min-height: 270px; background-size: auto 100%; }
	.dichlor-banner .col-sm-5 { background-color: rgba(255, 255, 255, 0.5); }
	.dichlor-banner h2 { font-size: 22px; line-height: 30px; margin-bottom: 15px; }
	.dichlor-banner img { margin-top: 45px; }
	.dichlor-facts { margin-top: 10px; }
	.dichlor-facts h3 { font-size: 21px; }
	.dichlor-note p { font-size: 12px; line-height: 16px; }
	.new-row { clear: both; }
	.dichlor-howitworks h2 { font-size: 38px; line-height: 42px; margin-bottom: 22px; margin-top: 10px; }
	.dichlor-howitworks p { font-size: 16px; padding-right: 0px; line-height: 22px; }
	.dichlor-howitworks img { margin-top: 30px; }
	.dichlor-bottom h3 { font-size: 25px; line-height: 30px; text-align: center; }
	.dichlor-bottom h4 { font-size: 27px; line-height: 32px; text-align: center; }
	.footerCopyright { text-align: center; }
}

@media (max-width: 550px) {

}

@media (max-width: 400px) {

}

@media (max-width: 340px) {

}


/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 999px) {
	.tagline h1 { font-size: 30px; padding-left: 20px; }
	.logo-wrapper img { margin-top: 26px; }
	.dichlor-banner { min-height: 270px; }
	.dichlor-banner h2 { font-size: 20px; line-height: 26px; margin-bottom: 10px; }
	.dichlor-banner img { margin-top: 45px; }
	.dichlor-facts { margin-top: -34px; }
	.dichlor-facts h3 { font-size: 21px; }
	.new-row { clear: both; }
	.dichlor-howitworks h2 { font-size: 38px; line-height: 42px; margin-bottom: 22px; margin-top: 10px; }
	.dichlor-howitworks p { font-size: 16px; padding-right: 22px; line-height: 22px; }
	.dichlor-bottom h3 { font-size: 25px; }
	.dichlor-bottom h4 { font-size: 27px; }
	.footerCopyright { text-align: center; }
}

/* Desktops and Tablets - Landscape */
@media (min-width: 1000px) and (max-width: 1199px) {
	.tagline h1 { font-size: 40px; padding-left: 30px; }
	.dichlor-banner { min-height: 360px; }
	.dichlor-banner h2 { font-size: 28px; line-height: 36px; margin-bottom: 15px; }
	.dichlor-banner img { margin-top: 60px; }
	.dichlor-facts { margin-top: -45px; }
	.dichlor-facts h3 { font-size: 28px; }
	.dichlor-howitworks h2 { font-size: 52px; line-height: 56px; margin-bottom: 30px; }
	.dichlor-howitworks p { font-size: 21px; padding-right: 30px; line-height: 30px; }
	.dichlor-bottom h3 { font-size: 33px; }
	.dichlor-bottom h4 { font-size: 36px; }
}

@media (min-width: 1200px) {

}