/*
File Name: common.css
Version: 1.0.0
Author: pixelonetry
Author URI: https://pixelonetry.com/
License: MIT
License URI: https://opensource.org/licenses/MIT
Description: Free version of CSS for WordPress.org theme/plugin.
*/

/*slider styles*/
	.peSlider > div.peCaption > .peCaptionLayer.pe-caption-white {
		/*font-family:"Playfair Display", Arial, sans-serif;*/
	}
	.peSlider > div.peCaption h3{
		color:#b8a279;
		font-weight:400;
	}

	.peSlider > div.peCaption{
		background-color:rgba(0,0,0,0.7);
	}

	.peVolo .peVoloNext a,
	.peVolo .peVoloPrev a{
		height:40px;
		width:40px;
		margin-top:-20px;
		top:50%;
		background-color:#000;
		border-radius:2px;
		-webkit-border-radius:2px;
	}

	.peVolo .peVoloNext a i,
	.peVolo .peVoloPrev a i{
		height:40px;
		width:40px;
		line-height:40px;
		margin-top:0;
		top:0;
		color:#fff;
	}

	.peSlider > .peVoloNext,
	.peSlider > .peVoloPrev{
		opacity:0;
		  -webkit-transition: opacity 0.3s ease-out; 
		     -moz-transition: opacity 0.3s ease-out; 
		       -o-transition: opacity 0.3s ease-out; 
		          transition: opacity 0.3s ease-out; 

	}

	.peSlider:hover > .peVoloNext,
	.peSlider:hover > .peVoloPrev{
		opacity:1;
}

/* ----------------------------------------------------------------
			Video CSS
-----------------------------------------------------------------*/

/*INLINE VIDEO*/
    
    /*video inline*/
    a.peVideo video, a.peVideo iframe {
        display: block;
		width: 100% !important;
        height: 100% !important;
        position:absolute;
        top:0;
        left:0;
    }
    
    .ppcontrols.fade {
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
        opacity:1;
    }
    
    .videoWrapper {
        position: relative;
        height: 0;
        margin-bottom:20px;
        overflow:hidden;
    }
    
    .videoWrapper a.peVideo{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color:#666;
		cursor: pointer;
    }
    
	.videoWrapper a.peVideo span.largePlay {
        height: 100%;
        left: 0;
        margin: 0 !important;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 10;
        opacity:0.7;
		background: url("../img/vid_start.png") no-repeat center center;
    }
    
    .videoWrapper a.peVideo:hover span.largePlay{
        opacity:1;
    }

	.videoWrapper a.peVideo > div {
        height: 100%;
        left: 0;
        margin: 0 !important;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 20;
		background-color: black;
    }

    .videoWrapper.sixteenBYnine {
        padding-bottom:56.25%;
    }
    
    .videoWrapper.fourBYthree {
        padding-bottom:75%;
    }
    
    .videoWrapper.youtube{
        padding-top: 0;
    }
	
	.videoWrapper.youtube .peVideo img {
		margin-top:-9.41%;
	}

	.videoWrapper.youtube.customCover .peVideo img{
		margin-top:0;
	}

    .videoWrapper.local,
    .videoWrapper.vidly,
    .videoWrapper.vimeo{
        padding-top:0;
    }
    /* ----------------------------------------------------------------
			pixelonetry.background
      -----------------------------------------------------------------*/
      
/*background component css*/

.peBackground {
	overflow:hidden;
	position:fixed;
	top:0;
	left:0;
	z-index:1;
	width:100%;
	height:100%;
}

.pePatternOverlay{
	z-index:2;
	overflow:hidden;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../img/content/pat1.png) repeat;
}

.peBackground img{
	/* background-color: rgba(0,0,0,.01); */
	display:block;
	position:absolute;
	-webkit-transform-origin: 0 0;
}

.peOverlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.bgColor{
	z-index:3;
	background-color: rgba(255,255,255,0.1);
}

.peBackground img {
}

.peBackground img.pePrevBW{
	-webkit-transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	-o-transition: opacity 0.4s;
	-ms-transition: opacity 0.4s;
	transition: opacity 0.4s;
	z-index:1;
}

.peBackground img.pePrevColor{
	-webkit-transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	-o-transition: opacity 0.4s;
	-ms-transition: opacity 0.4s;
	transition: opacity 0.4s;
	z-index:2;
}

.peBackground img.peCurrentBW{
	-webkit-transition: opacity 0.8s;
	-moz-transition: opacity 0.8s;
	-o-transition: opacity 0.8s;
	-ms-transition: opacity 0.8s;
	transition: opacity 0.8s;
	z-index:4;
}

.peBackground img.peCurrentColor{
	-webkit-transition: opacity 1.2s;
	-moz-transition: opacity 1.2s;
	-o-transition: opacity 1.2s;
	-ms-transition: opacity 1.2s;
	transition: opacity 1.2s;
	z-index:5;
}

/*escape responsive img flow technique for this component*/
.peBackground img, .pePatternOverlay img{
    max-width:inherit;
}
/* ----------------------------------------------------------------
			pixelonetry.isotope
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
			pixelonetry.carousel
 -----------------------------------------------------------------*/
    .row-fluid.carouselBox {
        left: 10px !important;
        margin-left: -20px !important;
        position: relative;
        width: auto !important;
    }

    .row-fluid.carouselBox .peWrap > div > div {
        margin-left: 10px; 
        margin-right: 10px;
    }
      /* ----------------------------------------------------------------
			pixelonetry.ajaxportfolio
      -----------------------------------------------------------------*/

      .pe-ajax-portfolio .pe-ajax-portfolio-navigation {
        text-align: center;
        visibility: hidden;
    }
        
    /* ----------------------------------------------------------------
		Volo Common
    -----------------------------------------------------------------*/
    /* ----------------------------------------------------------------
		Vario transitions
      -----------------------------------------------------------------*/
      /* ----------------------------------------------------------------
			flare common
      -----------------------------------------------------------------*/
    
    /* ----------------------------------------------------------------
			flare skin
      -----------------------------------------------------------------*/
    
     /* ----------------------------------------------------------------
		Slider Ui
      -----------------------------------------------------------------*/
      /* ----------------------------------------------------------------
		slider_captions
      -----------------------------------------------------------------*/

      /* ----------------------------------------------------------------
	  Slider_captions_style
      -----------------------------------------------------------------*/
     
.peSlider > div.peCaption {
	padding: 15px;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,.8);
/*	font-family: 'Open Sans'; */
	max-width: 350px;
}

.peSlider > div.peCaption h3 {
	color: #84bd32;
	/*font-family: 'Open Sans';*/
	font-weight:600;
	font-size:16px;
	margin-bottom:0px;
	letter-spacing:normal;
}

.peSlider > div.peCaption h3 a{
	color:#84bd32;
}

.desktop .peSlider > div.peCaption h3 a:hover{
	color:#fff;
}

.peCaption p{
	margin-bottom:0;
	color:#fff;
	font-size:12px;
	line-height:18px;
}

.peCaption .btn{
	margin-top:10px;
}

.peSlider > div.peCaption > .peCaptionLayer {
	position: absolute;
	font-size: 16px;
	padding: 10px;
	white-space:nowrap;
}

.peSlider > div.peCaption > .peCaptionLayer img {
	display: block;
	max-width: none;
}

.peSlider > div.peCaption > .pe-caption-large{
	font-size:45px;
	line-height:48px;
	font-weight:600;
	letter-spacing:normal;
}

.peSlider > div.peCaption > .pe-caption-xlarge{
	font-size:75px;
	line-height:80px;
	font-weight:700;
}

.peSlider > div.peCaption > .pe-caption-huge{
	font-size:90px;
	line-height:90px;
	font-weight:400;
	letter-spacing: -1px;
	color:#222;
}

.peSlider > div.peCaption > .pe-caption-medium{
	font-size:24px;
	line-height:22px;
	font-weight:400;
	letter-spacing:normal;
}

.peSlider > div.peCaption > .pe-caption-small{
	font-size:14px;
	line-height:20px;
	font-weight:400;
	letter-spacing:normal;
}

.peSlider > div.peCaption > .pe-caption-bold{
	font-weight:700;
	color:#222;
}

.peSlider > div.peCaption > .pe-caption-background{
	background-color:#d95137;
	padding:5px 15px;
	color:#fff;
}

.peSlider > div.peCaption > .pe-caption-color{
	color:#d95137;
}

.peSlider > div.peCaption > .peCaptionLayer.pe-caption-style-black {
/*	font-family: 'Open Sans', arial, sans-serif; */
	font-weight: 300;
	font-size: 70px;
	line-height: 80px;
	color: #303030;
	text-shadow: -1px -1px #909090;
	max-width: 940px;
}

.peSlider > div.peCaption > .peCaptionLayer.pe-caption-style-black.pe-caption-small {
	font-weight: 300;
	font-size: 30px;
	font-weight: 400;
	line-height: 40px;
}

.peSlider > div.peCaption > .peCaptionLayer.pe-caption-white {
	color: white;
}

.peSlider > div.peCaption > .peCaptionLayer.pe-caption-style-black.pe-caption-thick {
	font-weight: 700;
}

@media (max-width: 767px)  {
	.peSlider > div.peCaption {
		display: none !important;
	}	
}
