/*
Theme Name: LEG theme
Theme URI: http://understrap.com
Author: Holger Koenemann
Author URI: http://www.holgerkoenemann.de
GitHub Theme URI: https://github.com/understrap/understrap
Description: Combination of Automattic´s _s theme and Bootstrap 4. Made as a solid starting point for your next theme project and WordPress website. Use it as starter theme or as a parent theme. It is up to you. Including Font Awesome support, built-in widget slider and much more you need for basic websites. IMPORTANT: All developer dependencies are not bundled with this install file. Just download the .zip, extract it and run "npm install" and "gulp copy-assets" inside the extracted /understrap folder.
That downloads everything and moves it in place so that you can recompile your CSS and JS files;
A developer version (with Gulp/node and Sass sources) is available on gitHub: https://github.com/understrap/understrap
Version: 0.8.8
License: UnderStrap WordPress Theme, Copyright 2013-2017 Holger Koenemann
UnderStrap is distributed under the terms of the GNU GPL version 2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: leg-theme
Tags: one-column, custom-menu, featured-images, theme-options, translation-ready

This theme, like WordPress, is licensed under the GPL.
UnderStrap is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.

Resource Licenses:
Font Awesome: http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
Bootstrap: http://getbootstrap.com | https://github.com/twbs/bootstrap/blob/master/LICENSE (Code licensed under MIT, documentation under CC BY 3.0.)
Owl Carousel 2: http://www.owlcarousel.owlgraphic.com/ | https://github.com/smashingboxes/OwlCarousel2/blob/develop/LICENSE (Code licensed under MIT)
and of course
jQuery: https://jquery.org | (Code licensed under MIT)
WP Bootstrap Navwalker by Edward McIntyre: https://github.com/twittem/wp-bootstrap-navwalker | GNU GPL
*/

/*
This file is just used to identify the theme in WordPress.
The compiled CSS output can be found in /css/theme.css
The SASS sources for it can be found in /sass/
The dependencies can be found in /src/ after running "gulp copy-assets" terminal command

...and now go out and play!
*/

.four-box-col {padding: 50px 0;}
.four-box-col .four-box-image {height: 0; padding-bottom: 100%; text-align: center; background-size: cover; background-position: center; margin-bottom: 20px; position: relative;}
.four-box-col .four-box-image h3 { position: absolute; top: 50%; right: 0; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #fff; text-shadow: 2px 2px 8px #000; text-transform: uppercase; padding: 0 6%; }
.landing-four-box-col .four-box-image h3 { top: 30%; right: 0; left: 0; -webkit-transform: translateY(-30%); -ms-transform: translateY(-30%); -o-transform: translateY(-30%); transform: translateY(-30%); color: #fff; }
.landing-four-box-col .boxes h3 { opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } 
.four-box-col .four-box-image .four-box-hover {background: #557a95; position: absolute; top: 0; right: 0; bottom: 0; left: 0; color: #fff; text-shadow: 2px 2px 8px #000; }
.landing-four-box-col .four-box-image .four-box-hover { background: #fff;color:#557a95;text-shadow: 2px 2px 8px #fff; }
.landing-four-box-col .boxes .four-box-hover {opacity: 0; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;}
.landing-four-box-col .boxes:hover h3 {opacity: 0;} 
.landing-four-box-col .boxes:hover .four-box-hover {opacity: 0.8; }
.landing-four-box-col .boxes:hover .four-box-hover h3 {opacity: 1; color: #557a95; text-shadow: 2px 2px 8px #fff;} 
.four-box-col .four-box-image .four-box-hover p {position: absolute; top: 50%; right: 0; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 0 6%;}
.landing-four-box-col .four-box-image .four-box-hover p { top: 30%; right: 0; left: 0; -webkit-transform: translateY(-30%); -ms-transform: translateY(-30%); -o-transform: translateY(-30%); transform: translateY(-30%); }
.landing-four-box-col .four-box-image button {width: 80%;opacity: 0.8;}
.landing-four-box-col .four-box-image .fom, .landing-four-box-col .four-box-image button { position: absolute;  bottom: 20px; left: 0; right: 0; margin-left: auto; margin-right: auto;}

.six-box-col {padding: 50px 0;}
.six-box-col .six-box-image {height: 0; padding-bottom: 100%; text-align: center; background-size: cover; background-position: center; margin-bottom: 20px; position: relative;}
.six-box-col .boxes {position: relative; padding-bottom: 50px;}

.landing-six-box-col button {;opacity: 0.8;}
.landing-six-box-col .fom { position: absolute;  bottom: 20px; left: 0; right: 0; margin-left: auto; margin-right: auto;}

.left_image_slider_right_text #left_slider {background-color: #ffffff; border: 1px solid #ffffff;}
.left_image_slider_right_text #left_slider .slideimg { width: 100%; height: 0; padding-bottom: 100%; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; }
.left_image_slider_right_text #left_slider .carousel-control-next, .left_image_slider_right_text #left_slider .carousel-control-prev {background-color: #ffffff; width: auto; padding: 1%;}
.carousel-control-next, .carousel-control-prev {fill: #666666!important;}

.embed-container { 
        position: relative; 
        padding-bottom: 56.25%;
        overflow: hidden;
        max-width: 100%;
        height: auto;
    } 

    .embed-container iframe,
    .embed-container object,
    .embed-container embed { 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
.crosssell {padding-top: 40px; padding-bottom: 40px;}

#single-wrapper .swatch {margin-top: 10px; transition: transform .2s; /* Animation */}
#single-wrapper .swatch:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
#single-wrapper .swatchtitle {font-size: 0.8rem;}
	
	@media only screen and (min-width: 768px) and (max-width: 992px) {
	  /* For desktop: */
		.four-box-image button {width: 80%;}
		.four-box-image .fom {bottom: 10px; }
		.six-box-image button {width: 80%;}
		.six-box-image .fom {bottom: 10px; }
		
	}

.fa-twitter:before {
    content: "\f099"!important;
}
.fa-instagram:before {
    content: "\f16d"!important;
}