@charset "utf-8";

/*
Plugin Name: BoxFolio
Plugin Demo: https://ultimatewebsolutions.net/boxfolio/
Author Name: UWS (Ultimate Websolutions)
Author URL : https://codecanyon.net/user/ultimatewebsolutions/

[Table of contents]

1. FONT SETUP
2. SMALL AND MEDIUM DEVICES
- 2.1 Background
- 2.2 Image counter
- 2.3 Description
- 2.4 Description title
- 2.5 Description subtitle
- 2.6 Description paragraphs
- 2.7 Description link
- 2.8 Toolbar
- 2.9 Toolbar buttons
- 2.10 Thumbnail area
- 2.11 Fill color for buttons
- 2.12 Portfolio item image
- 2.13 Share popup

3. DESKTOPS AND LARGE DESKTOPS
- 3.1 Background
- 3.2 Image counter
- 3.3 Description
- 3.4 Description title
- 3.5 Description subtitle
- 3.6 Description paragraphs
- 3.7 Description link
- 3.8 Content area
- 3.9 Toolbar
- 3.10 Toolbar buttons
- 3.11 Thumbnail area
- 3.12 Fill color for buttons
- 3.13 Navigation arrows area
- 3.14 Reposition left arrow
- 3.15 Reposition right arrow


/* FONT SETUP
==================================== */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');

/* SMALL AND MEDIUM DEVICES
==================================== */
@media all and (max-width: 991px) {
	/* Background */
	.boxfolio-layout .fancybox-bg {
		background: #ff9966;
		border: 44px solid #fff;    	
	}
	.boxfolio-layout.fancybox-is-open .fancybox-bg {
		opacity: 1;
	}
	/* Image counter */
	.boxfolio-layout .fancybox-infobar {
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
		font-size: 12px;
		mix-blend-mode: normal;
		color:#000;
		margin-left: 44px;
	}
	/* Description */
	.boxfolio-layout .fancybox-caption {
		background: #fff;
		padding: 44px 0 44px 44px;
	}
	.boxfolio-layout .fancybox-caption__body {
		max-height: 100%;		
	}
	/* Description title */
	.boxfolio-layout .fancybox-caption h2 {
		font-family: 'Montserrat', sans-serif;
		font-size: 24px;
		font-weight: 700;
		letter-spacing: .05em;
		color:#000;
		text-align: left;
		margin-bottom: 12px;
	}
	/* Description subtitle */	
	.boxfolio-layout .fancybox-caption h3 {
		display: none; /* On smaller devices is hidden */
	}
	/* Description paragraphs */	
	.boxfolio-layout .fancybox-caption p {
		text-align: left;
		padding: 0;
	}	
	.boxfolio-layout .fancybox-caption p.description {
		display: none; /* Hide description on smaller devices to safe space */
	}
	/* Description link */
	.boxfolio-layout .fancybox-caption a {
		color: #000;
		text-decoration: none;
		outline: none;		
		font-family: 'Montserrat', sans-serif;
		font-style: normal;
		font-size: 14px;
		font-weight: 400;    	
    	letter-spacing: .25em;
		text-transform: lowercase;
		padding-left: 4px;		
	}	
	.boxfolio-layout .visit-link i {
		padding-left: 6px;    	
		font-size: 14px;
		vertical-align: middle;    	
	}	
	/* Toolbar */
	.boxfolio-layout .fancybox-toolbar {
		margin-right: 0;
	}	
	/* Toolbar buttons */
	.boxfolio-layout .fancybox-button {
		background: transparent;
		outline: none;		
	}
	.boxfolio-layout .fancybox-button--close,
	.boxfolio-layout .fancybox-button--thumbs,
	.boxfolio-layout .fancybox-button--share {
		padding: 9px;
	}
	/* Thumbnail area */
	.boxfolio-layout .fancybox-thumbs__list a:before {
		border: 6px solid #ff9966;
	}
	.boxfolio-layout .fancybox-thumbs {
		background: #fff;
		margin: 40px 0;
	}
	/* Fill color for buttons */
	.boxfolio-layout .fancybox-button svg path {
		fill: #000;
	}
	/* Portfolio item image */
	.boxfolio-layout .fancybox-image {
		top: -50px;
	}
	/* Share popup */
	.fancybox-share p {
		letter-spacing: 0;
		text-align: center;
	}
	.fancybox-share__input {
		text-align: center;
	}
} 
/* DESKTOPS AND LARGE DESKTOPS
==================================== */
@media all and (min-width: 992px) {
	/* Background */
	.boxfolio-layout .fancybox-bg {
		background: #ff9966;
		border-top: 44px solid #fff;
		border-left: 44px solid #fff;
		border-bottom: 44px solid #fff;
	}
	.boxfolio-layout.fancybox-is-open .fancybox-bg {
		opacity: 1;
	}
	/* Image counter */
	.boxfolio-layout .fancybox-infobar {
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
		font-size: 12px;
		mix-blend-mode: normal;
		color:#000;
		margin-left: 44px;
	}
	/* Description */
	.boxfolio-layout .fancybox-caption {
		background: #fff;
	  	bottom: 0;
	  	color: #000;
	  	left: auto;
	  	padding: 44px;
	  	right: 44px;
	  	top: 0;
	  	width: 456px;
	  	text-align: left;
	}
	.boxfolio-layout .fancybox-caption__body {
		  max-height: 100%;
		  overflow: hidden;
	}
	/* Description title */
	.boxfolio-layout .fancybox-caption h2 {
		font-family: 'Montserrat', sans-serif;
		font-size: 56px;
		font-weight: 700;
		line-height: 65px;
		color:#000;
	}
	/* Description subtitle */
	.boxfolio-layout .fancybox-caption h3 {
		font-family: 'Montserrat', sans-serif;
		font-size: 14px;
    	font-weight: 600;
		letter-spacing: .25em;
		line-height: 25px;
		color:#000;
	}
	/* Description paragraphs */
	.boxfolio-layout .fancybox-caption p {
		font-family: 'Montserrat', sans-serif;
		font-size: 12px;
    	line-height: 25px;
    	font-weight: 400;
		letter-spacing: .25em;
		color: #000;
		margin-top: 44px;
		padding: 0;
	}
	/* Description link */
	.boxfolio-layout .fancybox-caption a {
		color: #000;
		text-decoration: none;
		background: none;
		outline: none;
		border: 0;		
		font-family: 'Montserrat', sans-serif;
		font-style: normal;
		font-size: 14px;
		font-weight: 400;
    	line-height: 16px;
    	letter-spacing: .25em;
    	text-transform: lowercase; 			
	}
	.boxfolio-layout .visit-link:hover {
		color:#ff9966;
	}
	.boxfolio-layout .visit-link i {
		padding-left: 6px;    	
		font-size: 18px;
		vertical-align: middle;		
    	-webkit-transition: all 100ms linear;
    	transition: all 100ms linear;
	}
	.boxfolio-layout .visit-link:hover i {
		padding-left:12px;
	}
	/* Content area */
	.boxfolio-layout .fancybox-stage {
	  	right: 500px;
	}
	/* Toolbar  */
	.boxfolio-layout .fancybox-toolbar {
		background: #fff;
		bottom: 0;
		left: auto;
		right: 0;
		top: 0;
		width: 44px;
		margin: 40px 0
	}
	/* Toolbar buttons */
	.boxfolio-layout .fancybox-button {
		background: transparent;
		outline: none;		
	}
	.boxfolio-layout .fancybox-button--close,
	.boxfolio-layout .fancybox-button--thumbs,
	.boxfolio-layout .fancybox-button--share {
		padding: 9px;
	}
	/* Thumbnail area */
	.boxfolio-layout .fancybox-thumbs__list a:before {
		border: 6px solid #ff9966;
	}
	.boxfolio-layout .fancybox-thumbs {
		background: #fff;
		margin: 40px 0;
	}
	/* Fill color for buttons */
	.boxfolio-layout .fancybox-button svg path {
		fill: #000;
	}
	/* Navigation arrows area */
	.boxfolio-layout .fancybox-navigation .fancybox-button div {
		padding: 2px;
	}
	.boxfolio-layout .fancybox-navigation .fancybox-button[disabled] {
		color: #fff;
		outline: none;
	}
	.boxfolio-layout .fancybox-navigation .fancybox-button:not([disabled]) {
		color: #fff;
		outline: none;
	}
	.boxfolio-layout .fancybox-navigation .fancybox-button div {
		padding: 6px;
		background: #fff;
		border-radius: 50%;
		transition: opacity .2s;
		box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);		
	}	
	/* Reposition left arrow */
	.boxfolio-layout .fancybox-button--arrow_left {
		left: 50px;
	}
	/* Reposition right arrow */
	.boxfolio-layout .fancybox-button--arrow_right {
		right: 508px;
	}
}