/****************************
STOCKHOLM THEME STYLING
****************************/


.blog_holder.blog_single article .single_tags {
margin: 51px 0 0 0;
}
.woocommerce .select2-container.orderby .select2-choice, .woocommerce-page .select2-container.orderby .select2-choice {
background-color: #f8f8f8;
}

img.normal {
    background-color: #ffffff;
}

/*****************
CUSTOM STYLING
******************/

/**** GENERAL ****/

#gradient-bg {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,bdccd0+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #bdccd0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#bdccd0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#bdccd0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bdccd0',GradientType=0 ); /* IE6-9 */
}

.invisible {
visibility: hidden;
}

.hide {
display: none;
}

.top-shadow {
    -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
}

/**** MENU ****/

nav.main_menu.right {
left: 21%;
float: left;
}

li#nav-menu-item-21767 {
    right: -37% !important;
}

li#nav-menu-item-21767 > a {
    background-color: #94c55d !important;
}

li#nav-menu-item-21817 {
right: -16%;
}

.drop_down .narrow .second .inner ul li {
    padding: 0px 16px 0px 16px;
    width: 235px;
}

li.narrow .second .inner ul {
    padding: 0;
    box-shadow: 3px 3px 3px rgba(0,0,0,.2);
}

#nav-menu-item-21772, #nav-menu-item-21771, #nav-menu-item-21770, #nav-menu-item-21769  {
transition: none;
}

#nav-menu-item-21772:hover, #nav-menu-item-21771:hover , #nav-menu-item-21770:hover, #nav-menu-item-21769:hover {
background: #007fc3;
}

.drop_down .second .inner > ul > li > a {
transition: none;
}

.drop_down .second .inner > ul > li > a:hover {
transition: none;
}

/**** FOOTER ****/

.footer_top_holder {
    background-image: url(http://sandbox.h2o-optimizer.com/wp-content/uploads/2017/11/footer-bg2-min.jpg);
    background-position: center center;
    background-size: contain;
}

.footer_top p {
    width: 60%;
    margin: auto;
}

img.footer-logo {
    width: 150px;
    margin-top: -139px;
}

#menu-h2o-footer-menu li {
    border-right: solid 1px #4d4d4d;
    padding-right: 20px;
}

#menu-h2o-footer-menu li:last-child {
    border-right: none;
}

ul#menu-h2o-footer-menu {
    margin: 10px 0;
}

.legal-copy-holder {
margin: 32px 0;
}

.footer_bottom {
    padding: 48px;
}

.social-holder {
margin-top: 30px;
}

.social-holder > a {
font-size: 24px;
padding-right: 16px;
}

.social-holder > a:last-child {
padding-right: 0;
}

/**** Color Bar in Bottom Footer ****/

#rectangles-holder {
background: #2b465e;
    height: 15px;
}

.rectangle {
    height: 15px;
    position: relative;
    width: 30%;
    left: 52%;
    background: #e65e1d; /* Old browsers */
background: -moz-linear-gradient(left, #e65e1d 0%, #e65e1d 9%, #f7b32c 9%, #f7b32c 79%, #8ccf3c 79%, #8ccf3c 79%, #8ccf3c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #e65e1d 0%,#e65e1d 9%,#f7b32c 9%,#f7b32c 79%,#8ccf3c 79%,#8ccf3c 79%,#8ccf3c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #e65e1d 0%,#e65e1d 9%,#f7b32c 9%,#f7b32c 79%,#8ccf3c 79%,#8ccf3c 79%,#8ccf3c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e65e1d', endColorstr='#8ccf3c',GradientType=1 ); /* IE6-9 */
}


/**** BUTTONS ****/

/**** Orange Button Solid ****/

a.orange-btn, input#gform_submit_button_1 {
    padding: 10px 30px;
    display: inline-block;
    margin: 32px auto;
    background-color: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e05e19+0,a74b1b+100 */ background: #e05e19;
    background: -moz-linear-gradient(top, #e05e19 0%, #a74b1b 100%);
    background: -webkit-linear-gradient(top, #e05e19 0%,#a74b1b 100%);
    background: linear-gradient(to bottom, #e05e19 0%,#a74b1b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e05e19', endColorstr='#a74b1b',GradientType=0 );
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    border-bottom: #823505 3px solid;
    position: relative;
    border-radius: 4px;
}

input#gform_submit_button_1 {
    padding: 10px 60px;
    margin: 0 auto 32px auto;
    font-size: 16px;
    border-top: none;
    border-left: none;
    border-right: none;
}

a.orange-btn:active {
    top: 4px;
    border-bottom: none;
}

/**** White Outline Button ****/

.btn-white-outline {
    border: solid 1px #ffffff;
    padding: 10px 40px;
    display: inline-block;
}

.tight-p {
width: 75%;
margin: 0 auto;
}

.phase-img {
    width: 19%;
    position: relative;
}


/**** ACCORDIONS ****/

/**** Labels ****/

.vc_tta-panel-heading {
    background-color: #ffffff !important;
}

span.vc_tta-title-text {
    font-size: 24px;
    font-weight: 600;
    color: #1380c1;
}

.hero-title {
text-transform: capitalize;
}

/***************************
FLOATING CIRCLES
***************************/

span a {
	font-size: 18px;
	color: #cccccc;
	text-decoration: none;
	margin: 0 10px;
	transition: all 0.4s ease-in-out;
	&:hover {
		color: #ffffff;
	}
}

@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}

.float-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.avatar {
	width: 200px;
	height: 200px;
	box-sizing: border-box;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
	transform: translatey(0px);
	animation: float 3s ease-in-out infinite;
	img { width: 100%; height: auto; }
}

.float-content {
	width: 100%;

	box-sizing: border-box;
	text-align: center;
}



/***************************
DESKTOP MEDIA QUERIES
***************************/

/**** FOOTER ****/

@media only screen and (max-width: 1000px) {
.footer_top p {
    width: 75%;
}

}