/*
* 	Amio - Minimal Multipurpose Portfolio Template
* 	Author: OrbmobThemes
* 	Copyright (C) 2016 Orbmob
* 	This is a premium product available exclusively here : https://themeforest.net/user/orbmobthemes/portfolio
*/
/*







/*====================================================


	Table of Contents
	
	

		01. Generel Styles 

			+ Generate Google Fonts
			+ Essential Styles
			+ Buttons
			+ Floats
			+ Overlays
			+ Row Fix
			+ Section Styles
			+ Separators

		02. Typography

			+ Font Classes
			+ Font Positions
			+ Font Weight
			+ Font Transformation
			+ Font Colors
			+ Font Sizes


		03. Loading Screen

			+ Loader Logo
			+ Loader Animation
			+ After Loading

		04. Backgrounds

		05. Navigations

			+ General
			+ Bootstrap Fix
			+ Dropdown

		06. Homepage

			+ Homepage Headers
			+ Logo Styles

		07. Slider

		08. About

		09. Services

		10. Portfolio

		11. Pricing Table

		12. Blog
		
			+ Blog Post
			+ Blog Sidebar
			+ Comments

		13. Map

		14. Contact

		15. Footer
		
		16. Shop
			
			+ Cart
			+ Products

		16. Responsive
		
			+ Resolution Under 992px
			+ Resolution Under 768px
			+ Resolution Under 530px
			+ Resolution Under 450px
			+ Resolution Under 400px
			+ Resolution Under 375px


	
====================================================*/







/*======================

	01. Generel Styles 

========================*/


/* Generate Google Fonts 
-------------------------*/





/* Essential Styles
-------------------------*/
@import url(https://fonts.bunny.net/css?family=jura:300,400,500,600,700);

body {
	opacity: inherit !important;
}

:root {
	--header-index-offset-top: 5vh;
}


.bg-scroll-color {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	/* background: white; */
	transition: background-color 1.5s ease-in-out;
}



* {
	margin: 0%;
	padding: 0%;
}

::selection {
	background-color: #ececec;
}


html,
body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
	font-family: 'Jura', sans-serif;
	/*Raleway*/
	-webkit-font-smoothing: antialiased;
	text-align: center;
	font-size: 1em;
	background-color: #fafafa;

}

body {
	overflow-x: hidden;
}


.container {
	margin: 0px auto;
	padding: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
	height: auto;
	text-align: center;
	float: none;
	/* background-color: #fafafa; */
	/* background: linear-gradient(0deg, rgb(255, 255, 255) 75%, rgb(236, 239, 241) 100%);
	background-repeat: no-repeat;
	background-attachment: fixed; */
}


img {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;

}



a {
	color: #191919;
	text-decoration: none;
	outline: none;


}

a:hover,
a:active,
a:focus {
	text-decoration: none;
	outline: none;
	color: #505050;

}

a i:hover,
a i:active,
a i:focus {
	text-decoration: none;
	outline: none;
	color: #505050;
}



h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: 'Jura', sans-serif;
	/*Lato*/
	font-weight: 100;
}


.alignbottom {
	align-items: flex-end;
}

p {
	margin: 0 0 5px;
	font-family: 'Jura', sans-serif;
	font-size: 1.2em;
	/*Raleway*/

}

.clear {
	clear: both;
}

ol,
ul {
	list-style: none;
	padding: 0;
}

.no-padding {
	padding: 0 !important;
}

.no-margin {
	margin: 0 !important;
}

.no-border {
	border: none !important;
	border-style: none !important;
}




/* Buttons
-------------------------*/




.button {
	z-index: 0;
	background: #191919;
	cursor: pointer;
	color: #fff;
	display: block;
	width: 150px;
	height: 50px;
	line-height: 50px;
	margin-top: 30px;
	margin: auto;
	font-weight: 900;
	letter-spacing: 3px;
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;
	font-size: 11px;
	word-spacing: 1px;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}




/* Floats
-------------------------*/


.float-l {
	float: left !important;
}

.float-r {
	float: right !important;
}




/* Overlays
-------------------------*/




.pattern-black:after,
.pattern-white:after {
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	z-index: -1;
}

.pattern-black:after {

	background: url(../img/pattern-1.png) repeat;
}

.pattern-white:after {

	/* background: url(../img/pattern-2.png) repeat; */
}




/* Row Fix
-------------------------*/

.row {
	margin-left: -15px;
	margin-right: -15px;
}

.row:before,
.row:after {
	content: "";
	display: table;
	clear: both;
}


.grid {
	display: grid;
	gap: 60px;
}

.grid-cols-1 {
	grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
	grid-template-columns: repeat(4, 1fr);
}


/* Section Styles

-------------------------*/


.section-content {
	padding: 0px 3% 0px 3%;
	z-index: 9999;
}

@media screen and (max-width: 1024px) {
	.section-content {
		padding: 0px 2% 0px 2%;
	}
}


.section-content-full {
	padding: 0px 0% 0px 0%;
	z-index: 9999;
}


.sections {
	width: 100%;
	z-index: 1;
	padding-top: 70px;
}






/* Separators
----------------------------*/



.separator-small {
	width: 40px;
	height: 1px;
	background: #505050 none repeat;
	margin-top: 30px;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}

.separator-center {
	width: 40px;
	height: 1px;
	background: #505050 none repeat;
	margin: 25px auto;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}






/*======================

	02. Typography

========================*/




/* Font Classes
-------------------------*/




.raleway {
	font-family: 'Raleway', sans-serif;

}

.lato {
	font-family: 'Lato', sans-serif;
}

.numbers {
	font-family: 'Roboto', sans-serif;
}




/* Font Positions
-------------------------*/




.t-left {
	text-align: left !important;
}

.t-center {
	text-align: center !important;
}

.t-right {
	text-align: right !important;
}




/* Font Weight
-------------------------*/




.ultrabold {
	font-weight: 900;
}

.extrabold {
	font-weight: 800;
}

.bold {
	font-weight: 700;
}

.semibold {
	font-weight: 600;
}

.normal {
	font-weight: 400;
}

.light {
	font-weight: 300;
}

.lighter {
	font-weight: 100;
}




/* Font Transformation
-------------------------*/




.italic {
	font-style: italic;
}

.uppercase {
	text-transform: uppercase;
}

.lowercase {
	text-transform: lowercase;
}





/* Font Colors
-------------------------*/




.dark {
	color: #191919;
}

.white {
	color: #e5e5e5;
}

.gray1 {
	color: #777777;
}

.gray2 {
	color: #505050;
}

.colored {
	color: #ffd700;
}





/* Font Sizes
-------------------------*/



.f-small {
	font-size: 13px;

}

.f-light {
	font-size: 16px;

}

.f-normal {
	font-size: 18px;

}

.f-semi-expanded {
	font-size: 1.5em;

}

.f-medium {
	font-size: 28px;

}

.f-expanded {
	font-size: 2.5em;

}

.f-big {
	font-size: 45px;

}

.f-large {
	font-size: 3.5em;

}

.f-extra-expanded {
	font-size: 6em;

}

.f-title {
	font-size: 4em;

}

.f-subtitle {
	font-size: 4em;
}












/*======================

	04. Backgrounds

========================*/




/* Solid Backgrounds
-------------------------*/




.white-bg {
	background-color: #fff !important;
}

.gray-bg {
	background-color: #505050 !important;
}

.dark-bg {
	background-color: #191919 !important;
}

.colored-bg {
	background-color: #ffd700;
}

.solid-bg {
	background: #232121;
}

.solid-bg-light {
	background: #e9e8e8;
}





/* Gradient Backgrounds
-------------------------*/


#gradient,
.gradient-bg {
	background: -moz-linear-gradient(17% 81% 67deg, #E4A4B8, #86FFF4 90%);
	background: -webkit-gradient(linear, 91% 91%, 20% 0%, from(#B869A4), to(#6DC7A5));
	width: 100%;
	background-size: cover;
	display: block;
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	z-index: 1;
}





/* Video Backgrounds
-------------------------*/

#video {
	width: 100%;
	height: 100%;
	background-size: cover;
	display: block;
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	z-index: 1;

}



.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 */
	padding-top: 25px;
	margin-bottom: 5px;
	height: 0;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}




/* Image Backgrounds
-------------------------*/




.image-bg {
	background: url(../img/bg-01.jpg);
	height: 100vh;
}

.image-bg-2 {
	background: url(../img/bg-02.jpg);
}

.image-bg-3 {
	background: url(../img/bg-03.jpg);

}

.image-bg-4 {
	background: url(../img/bg-04.jpg);

}

.image-bg-5 {
	background: url(../img/bg-05.jpg);

}

.image-bg-6 {
	background: url(../img/bg-06.jpg);

}

.image-bg,
.image-bg-2,
.image-bg-3,
.image-bg-4,
.image-bg-5,
.image-bg-6 {
	width: 100%;
	background-size: cover;
	display: block;
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	z-index: 1;
}





/* Other Backgrounds
-------------------------*/

.pattern-bg {
	background: url(../img/pattern.jpg);
	position: relative;
	overflow: hidden;
	background-repeat: repeat;
}

#demo_canvas {
	z-index: 999;
	position: absolute;
	top: 0px;
	left: 0px;
}









/*======================

	05. Navigations

========================*/




/* General
-------------------------*/

.navigation {
	/* background: #fff; */
	z-index: 99999999;
	padding: 0px 3% px 10%;


}

.navigation-landing {
	z-index: 99999999;
	padding: 10px 3% 10px 10%;


}

.navbar-brand img {
	width: 25px;
	position: relative;
	right: 18px;
}

.nav {
	float: right;
}


.nav li a {
	margin-right: 10px;
	color: #777777;
}



/* Bootstrap Fix
-------------------------*/
.navbar-collapse {
	display: flex !important;
	justify-content: flex-end;
	background: none !important;
	position: static !important;
	width: auto !important;
	margin-right: 20px;
}

.navbar-nav {
	display: flex;
	align-items: center;
}

.navbar-nav li {
	margin-right: 10px;
}

.navbar-nav li a {
	display: flex;
	align-items: center;
}

.navbar-collapse {
	display: flex !important;
	justify-content: flex-end;
	background: none !important;
	position: static !important;
	width: auto !important;
}

.nav>li>a:focus,
.nav>li>a:hover {
	text-decoration: none;
	background-color: transparent;
	color: #777777;
}

.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
	background-color: transparent;
	border-color: transparent;
}

.navbar-toggle {
	border-radius: 0px;
	border: 2px solid #777777;
}

.navbar-nav>li>.dropdown-menu {
	border-radius: 0;
}

.icon-bar {
	background: #777777;
}

.nav li a {
	text-align: left;
}


.uk-subnav>*> :focus,
.uk-subnav>*> :hover {
	color: #505050;
	text-decoration: none;
}

.uk-subnav>.uk-active>* {
	color: #191919;
}




/* Dropdown
-------------------------*/



.dropdown-menu {
	background: #191919;
}

.dropdown-menu li {
	margin-bottom: 15px;
}

.dropdown-menu li a {
	color: #e5e5e5;
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
	color: #fff;
	text-decoration: none;
	background-color: transparent;
}

.multi-drop a {
	margin-bottom: 15px;
}


.drop-left {
	float: left;
	padding-top: 15px;
	padding-left: 20px;

}

.drop-right {
	float: right;
	padding-top: 15px;
	padding-right: 30px;
}

.big-dropdown-home {
	min-width: 500px;
}

.big-dropdown {
	min-width: 700px;
}

.big-dropdown li {
	margin-bottom: 25px;
}

.big-dropdown-home li {
	margin-bottom: 25px;
}





/*======================

	06. Homepage

========================*/


.work-grid {
	display: grid;
	grid-template-columns: 1fr;
}

@media screen and (min-width: 640px) {
	.work-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 1024px) {
	.work-grid {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

.work-grid .work {
	position: relative;
}

/* Homepage Headers
----------------------------*/


.sticky-nav {
	position: fixed;
	width: 100%;
}

#header {
	position: relative;
	padding-top: 20px;
	padding-bottom: 100px;
}


#header-home {
	position: relative;
	padding-top: 100px;
	padding-bottom: 20vh;
	/* Adjust this value to increase/decrease the space */


}

#header-home-slider {
	position: relative;
	padding-top: 0px;
	padding-bottom: 0vh;
	margin-top: var(--header-index-offset-top);
	/* Adjust this value to increase/decrease the space */


}

#header.fixed {
	position: fixed;
	width: 100%;
	padding-top: 70px;
}

#header,
.nav li a {
	transition: color 0.3s ease-in-out;
	color: #444;
}

.dark {
	transition: color 0.3s ease-in-out;
}

.theme-light #header,
.theme-light .nav li a,
.theme-light .dark {
	color: #fff;
}

/*.big-text-full h2{
		max-width: 800px;
	}
	*/

.big-text-full h3 {
	max-width: 1000px;
}

/*
	.big-text h2{
		max-width: 900px;
	}
	
*/

.big-text-fullwid h2 {
	max-width: 100%;
}

/* .big-text h3{
		max-width: 800px;	
	}  */

.big-text h1,
.big-text h2,
.big-text-full h2,
.big-text-fullwidth h2 {
	letter-spacing: 20px;
	word-spacing: 8px;

}

.big-text h2,
.big-text h3,
.big-text-full h3,
.big-text-fullwidth h3 {
	letter-spacing: 10px;
	word-spacing: 3px;
	line-height: 40px;
	margin-top: 30px;

}

.big-text i {
	font-size: 7em;
}

.header-img {
	margin-bottom: 50px;
}

.header-img img {
	opacity: 0.9;
	width: 70px;
	border-radius: 100%;
	position: relative;
	right: 15px;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;

}

.multi-img-square img {
	border-radius: 0px;
	width: 70px;
	margin-right: 20px;
}

.multi-img img {
	margin-left: 25px;
	width: 55px;
}

.header-img img:hover {
	opacity: 1;
}




/* Logo Styles
----------------------------*/

.logo {
	position: absolute;
	top: 30px;
	left: 50px;
	z-index: 9;
}

.logo img {
	display: block;
	max-width: 100px;
	height: auto;
	margin: auto;

}

.logo-footer {
	max-width: 100px;
	height: auto;
	float: left;
	position: relative;
	bottom: 10px;
}

.logo-nav {
	float: left;
	max-width: 60px;
	position: relative;
	bottom: 25px;
}








/*========================

	07. Slider
	
==========================*/

/*sliders margin */

.rslides,
.rslides-background {
	--offset-from-top-of-viewport: calc(360px + var(--header-index-offset-top));
	--margin-top-from-header: 3.5vw;
	position: relative;
	list-style: none;
	overflow: hidden;
	padding: 0;
	margin: 2.5vw;
	margin-top: var(--margin-top-from-header);
	margin-bottom: 0;
	border-radius: 7px;
	height: calc(100vh - var(--margin-top-from-header) - var(--offset-from-top-of-viewport));
}



@media screen and (max-width: 1024px) {

	.rslides,
	.rslides-background {
		margin-left: 10px;
		margin-right: 10px;
		height: calc(100vh - var(--offset-top) - 430px);
		/* height: 150vw; */
	}
}

.rslides {
	z-index: 0;
}


.rslides li {
	/* -webkit-backface-visibility: hidden; */
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;

}

.rslides li:first-child {
	position: relative;
	display: block;
	float: left;
}

.rslides img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 65%;
}





/*========================

	08. About
	
==========================*/




#about {
	position: relative;
	padding-bottom: 100px;
	/* background: #fff; */

}


.brief {
	margin-top: 100px;
	margin-bottom: 100px;
}

.brief h3 {
	letter-spacing: 2px;
	word-spacing: 5px;
}

.brief p {
	margin-top: 30px;
	line-height: 40px;
}

.brief a {
	border-bottom: 1px solid #777777;
	margin-top: 20px;

}

.proj a {
	margin-left: 20px;
	margin-top: 0px;

}

.proj img,
.proj video {

	border-radius: 7px;
	width: 100%;
	/* box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px, rgb(255, 255, 255) -0px -10px 20px 0px;; */
	/* box-shadow: rgba(1, 47, 90, 0.35) 0px 25px 20px -20px; */
	box-shadow: rgba(1, 47, 90, 0.35) 0px 25px 20px -20px;



}


.proj picture,
.proj video {
	display: block;
	margin-bottom: 4dvh;
}

.proj picture img {

	margin-bottom: 0;

}

.proj .image-description {
	margin-top: 2em;
}

.proj .align-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.picture-watermark {
	position: relative;
}

.picture-watermark:before {
	content: '';
	display: block;
	position: absolute;
	bottom: 3vw;
	left: 3vw;
	transform-origin: 0 100%;
}

.picture-watermark-twisted:before {
	width: 5%;
	padding-bottom: 1.1875%;
	transform: scale(1);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 70' fill='%23333333'%3E%3Cpath d='M17.59 26.41v23.73c0 1.78.36 3.03 1.07 3.77.71.74 1.98 1.11 3.82 1.11h6.75v8.44h-8.89c-4.32 0-7.48-1.02-9.46-3.07-1.98-2.04-2.98-5.14-2.98-9.28v-24.7H0v-8.44h7.91V5.27h9.69v21.15ZM70.21 26.41l-2.41-8.44H59L48.6 52.81l-8.39-26.4v-8.44h-9.38v8.44l9.38 28.78 2.7 8.28h10.4l9.95-30.92 6.95 22.37 2.65 8.55h10.31l3.23-9.73 9.07-27.33v-8.44H86.4v8.44l-8.65 26.4-7.54-26.4zM108.97 26.41h-9l-.03-8.44h18.72v45.5h-9.69V26.41ZM147.54 64c-6.1 0-11.05-1.36-14.84-4.09-3.79-2.72-5.78-6.55-5.95-11.46h9.42c.18 2.37 1.26 4.31 3.24 5.82 1.98 1.51 4.69 2.27 8.13 2.27 2.01 0 3.75-.24 5.2-.71 1.45-.47 2.59-1.17 3.42-2.09.83-.92 1.24-1.97 1.24-3.16 0-1.66-.44-2.86-1.33-3.6-.89-.74-2.16-1.27-3.82-1.6-1.66-.32-3.67-.63-6.04-.93-2.61-.29-5.02-.69-7.24-1.2s-4.18-1.21-5.86-2.13c-1.69-.92-3.02-2.15-4-3.69s-1.47-3.5-1.47-5.86c0-2.9.8-5.42 2.4-7.55 1.6-2.13 3.8-3.78 6.62-4.93 2.81-1.16 6.03-1.7 9.64-1.64 5.57 0 10.17 1.24 13.82 3.73 3.64 2.49 5.61 6.07 5.91 10.75h-9.42c-.24-2.07-1.26-3.78-3.06-5.11-1.81-1.33-4.16-2-7.06-2s-5.12.53-6.84 1.6c-1.72 1.07-2.58 2.52-2.58 4.35 0 1.42.44 2.49 1.33 3.2s2.16 1.21 3.82 1.51 3.58.56 5.78.8c3.49.42 6.66 1.02 9.51 1.82 2.84.8 5.11 2.1 6.8 3.91 1.69 1.81 2.53 4.4 2.53 7.77 0 2.9-.84 5.42-2.53 7.55s-3.99 3.77-6.89 4.93c-2.9 1.15-6.19 1.73-9.86 1.73ZM174.23 51.12V5.27h9.6v12.71h11.02v8.44h-11.02v23.73c0 1.78.36 3.03 1.07 3.77.71.74 1.92 1.11 3.64 1.11h7.29v8.44h-9.24c-4.33 0-7.46-1.02-9.42-3.07-1.95-2.04-2.93-5.14-2.93-9.28ZM221.77 64c-4.74 0-8.86-.96-12.35-2.89-3.5-1.92-6.19-4.63-8.09-8.13-1.9-3.49-2.84-7.55-2.84-12.17s.93-8.77 2.8-12.26c1.87-3.5 4.49-6.22 7.86-8.17s7.29-2.93 11.73-2.93 8.22.87 11.51 2.62c3.29 1.75 5.86 4.25 7.73 7.51s2.86 7.11 2.98 11.55c0 .59-.03 1.2-.09 1.82s-.12 1.23-.18 1.82h-34.3v.62c.12 2.55.7 4.78 1.73 6.71a11.06 11.06 0 0 0 4.4 4.49c1.9 1.07 4.09 1.6 6.58 1.6 2.9 0 5.38-.71 7.42-2.13s3.39-3.38 4.04-5.86h9.6c-.53 2.96-1.7 5.64-3.51 8.04-1.81 2.4-4.15 4.3-7.02 5.69-2.87 1.39-6.21 2.09-10 2.09Zm-12.88-28.26h24.26c-.42-3.38-1.7-5.98-3.87-7.82-2.16-1.84-4.93-2.76-8.31-2.76-2.02 0-3.9.43-5.64 1.29-1.75.86-3.2 2.07-4.35 3.64-1.16 1.57-1.85 3.45-2.09 5.64ZM284.66 1.27v23.02c-1.19-1.61-2.7-3.03-4.53-4.23-2.67-1.75-6.07-2.62-10.22-2.62s-7.76.96-11.02 2.89c-3.26 1.93-5.82 4.64-7.69 8.13-1.87 3.5-2.8 7.58-2.8 12.26s.93 9.03 2.8 12.53c1.87 3.5 4.43 6.16 7.69 8 3.26 1.84 6.93 2.75 11.02 2.75s7.63-.98 10.26-2.93c1.84-1.37 3.37-2.87 4.59-4.5l1.14 6.9h8.35V1.27h-9.6Zm-6.09 52.69c-1.98 1.3-4.34 1.95-7.06 1.95s-4.99-.65-6.98-1.95c-1.98-1.3-3.53-3.09-4.62-5.38-1.1-2.28-1.64-4.9-1.64-7.87s.55-5.66 1.64-7.91c1.09-2.25 2.63-4.01 4.62-5.29 1.98-1.27 4.31-1.91 6.98-1.91s5.08.64 7.06 1.91c1.98 1.28 3.51 3.07 4.58 5.38 1.07 2.31 1.6 4.98 1.6 8s-.53 5.48-1.6 7.73-2.59 4.03-4.58 5.33ZM313.19 13.42c-1.86 0-3.46-.64-4.8-1.91-1.34-1.27-2.01-2.87-2.01-4.8s.67-3.52 2.01-4.8C309.73.64 311.33 0 313.19 0s3.54.64 4.85 1.91c1.31 1.27 1.96 2.87 1.96 4.8s-.65 3.53-1.96 4.8-2.93 1.91-4.85 1.91Z'%3E%3C/path%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.picture-watermark-twisted-invert:before {
	width: 5%;
	padding-bottom: 1.1875%;
	transform: scale(1);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 70' fill='%23ffffff'%3E%3Cpath d='M17.59 26.41v23.73c0 1.78.36 3.03 1.07 3.77.71.74 1.98 1.11 3.82 1.11h6.75v8.44h-8.89c-4.32 0-7.48-1.02-9.46-3.07-1.98-2.04-2.98-5.14-2.98-9.28v-24.7H0v-8.44h7.91V5.27h9.69v21.15ZM70.21 26.41l-2.41-8.44H59L48.6 52.81l-8.39-26.4v-8.44h-9.38v8.44l9.38 28.78 2.7 8.28h10.4l9.95-30.92 6.95 22.37 2.65 8.55h10.31l3.23-9.73 9.07-27.33v-8.44H86.4v8.44l-8.65 26.4-7.54-26.4zM108.97 26.41h-9l-.03-8.44h18.72v45.5h-9.69V26.41ZM147.54 64c-6.1 0-11.05-1.36-14.84-4.09-3.79-2.72-5.78-6.55-5.95-11.46h9.42c.18 2.37 1.26 4.31 3.24 5.82 1.98 1.51 4.69 2.27 8.13 2.27 2.01 0 3.75-.24 5.2-.71 1.45-.47 2.59-1.17 3.42-2.09.83-.92 1.24-1.97 1.24-3.16 0-1.66-.44-2.86-1.33-3.6-.89-.74-2.16-1.27-3.82-1.6-1.66-.32-3.67-.63-6.04-.93-2.61-.29-5.02-.69-7.24-1.2s-4.18-1.21-5.86-2.13c-1.69-.92-3.02-2.15-4-3.69s-1.47-3.5-1.47-5.86c0-2.9.8-5.42 2.4-7.55 1.6-2.13 3.8-3.78 6.62-4.93 2.81-1.16 6.03-1.7 9.64-1.64 5.57 0 10.17 1.24 13.82 3.73 3.64 2.49 5.61 6.07 5.91 10.75h-9.42c-.24-2.07-1.26-3.78-3.06-5.11-1.81-1.33-4.16-2-7.06-2s-5.12.53-6.84 1.6c-1.72 1.07-2.58 2.52-2.58 4.35 0 1.42.44 2.49 1.33 3.2s2.16 1.21 3.82 1.51 3.58.56 5.78.8c3.49.42 6.66 1.02 9.51 1.82 2.84.8 5.11 2.1 6.8 3.91 1.69 1.81 2.53 4.4 2.53 7.77 0 2.9-.84 5.42-2.53 7.55s-3.99 3.77-6.89 4.93c-2.9 1.15-6.19 1.73-9.86 1.73ZM174.23 51.12V5.27h9.6v12.71h11.02v8.44h-11.02v23.73c0 1.78.36 3.03 1.07 3.77.71.74 1.92 1.11 3.64 1.11h7.29v8.44h-9.24c-4.33 0-7.46-1.02-9.42-3.07-1.95-2.04-2.93-5.14-2.93-9.28ZM221.77 64c-4.74 0-8.86-.96-12.35-2.89-3.5-1.92-6.19-4.63-8.09-8.13-1.9-3.49-2.84-7.55-2.84-12.17s.93-8.77 2.8-12.26c1.87-3.5 4.49-6.22 7.86-8.17s7.29-2.93 11.73-2.93 8.22.87 11.51 2.62c3.29 1.75 5.86 4.25 7.73 7.51s2.86 7.11 2.98 11.55c0 .59-.03 1.2-.09 1.82s-.12 1.23-.18 1.82h-34.3v.62c.12 2.55.7 4.78 1.73 6.71a11.06 11.06 0 0 0 4.4 4.49c1.9 1.07 4.09 1.6 6.58 1.6 2.9 0 5.38-.71 7.42-2.13s3.39-3.38 4.04-5.86h9.6c-.53 2.96-1.7 5.64-3.51 8.04-1.81 2.4-4.15 4.3-7.02 5.69-2.87 1.39-6.21 2.09-10 2.09Zm-12.88-28.26h24.26c-.42-3.38-1.7-5.98-3.87-7.82-2.16-1.84-4.93-2.76-8.31-2.76-2.02 0-3.9.43-5.64 1.29-1.75.86-3.2 2.07-4.35 3.64-1.16 1.57-1.85 3.45-2.09 5.64ZM284.66 1.27v23.02c-1.19-1.61-2.7-3.03-4.53-4.23-2.67-1.75-6.07-2.62-10.22-2.62s-7.76.96-11.02 2.89c-3.26 1.93-5.82 4.64-7.69 8.13-1.87 3.5-2.8 7.58-2.8 12.26s.93 9.03 2.8 12.53c1.87 3.5 4.43 6.16 7.69 8 3.26 1.84 6.93 2.75 11.02 2.75s7.63-.98 10.26-2.93c1.84-1.37 3.37-2.87 4.59-4.5l1.14 6.9h8.35V1.27h-9.6Zm-6.09 52.69c-1.98 1.3-4.34 1.95-7.06 1.95s-4.99-.65-6.98-1.95c-1.98-1.3-3.53-3.09-4.62-5.38-1.1-2.28-1.64-4.9-1.64-7.87s.55-5.66 1.64-7.91c1.09-2.25 2.63-4.01 4.62-5.29 1.98-1.27 4.31-1.91 6.98-1.91s5.08.64 7.06 1.91c1.98 1.28 3.51 3.07 4.58 5.38 1.07 2.31 1.6 4.98 1.6 8s-.53 5.48-1.6 7.73-2.59 4.03-4.58 5.33ZM313.19 13.42c-1.86 0-3.46-.64-4.8-1.91-1.34-1.27-2.01-2.87-2.01-4.8s.67-3.52 2.01-4.8C309.73.64 311.33 0 313.19 0s3.54.64 4.85 1.91c1.31 1.27 1.96 2.87 1.96 4.8s-.65 3.53-1.96 4.8-2.93 1.91-4.85 1.91Z'%3E%3C/path%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}



/*========================

	09. Services

==========================*/




#services {
	position: relative;
	padding-bottom: 80px;
	background: #fff;
}

.service {
	padding-top: 60px;
	padding-bottom: 60px;
}


.service:hover .separator-small {
	width: 70px;
}

.service .separator-small {
	margin-left: 25px;
}

.service i {
	font-size: 45px;
}

.service h2 {
	font-size: 16px;
	word-spacing: 3px;
	letter-spacing: 1px;
	margin-left: 30px;

}

.service p {
	line-height: 35px;
	color: #777777;
	font-size: 13px;
	margin-top: 15px;
}








/*========================

	10. Portfolio

==========================*/




#portfolio {
	position: relative;
	padding-bottom: 100px;
	padding-top: 30px;
	margin-left: -15px;
	margin-right: -15px;


}


.works-filter,
.works-filter-full {
	width: 100%;
	font-size: 15px;
	word-spacing: 3px;
	letter-spacing: 1px;
	text-align: center;
	margin-bottom: 50px;
	margin-top: 3px;

}

.works-filter li,
.works-filter-full li {
	margin-right: 30px;

}

.works-filter-full {
	margin-left: 10%;
}


.work li {
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
	overflow: hidden;
}


/* Portfolio Grid */

.work {
	overflow: hidden;
	box-shadow: rgba(149, 157, 165, 0.3) 0px 8px 24px;

}

.work li:hover {
	opacity: 1;

}


.work img {
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1 / 1.5;


}


.work .hover {
	background: url(../img/pattern-2.png) repeat;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0;
	-webkit-transition: all .5s;
	-moz-transition: all 1s;
	transition: all .5s;



}


.work .hover p {
	position: absolute;
	top: 50%;
	left: 50%;
	letter-spacing: 3px;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;

}


.work:hover .hover {
	opacity: 0.9;
}

.work:hover img {
	-o-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	filter: blur(5px);
	-webkit-filter: blur(50px);
}

.hover .button {
	margin: auto;
}

.gutter {
	padding: 20px;
}

.gutter:hover img {
	-o-transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
}





/*========================

	11. Pricing Table

==========================*/




#pricing {
	position: relative;
	padding-bottom: 100px;
	background: #fff;
}

.price-table {
	border: 1px solid #e5e5e5;
	padding: 20px;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
	margin-bottom: 100px;
}

.price-table:hover {
	border: 1px solid #777777;
}

.table-special {
	border: 1px solid #777777;
}

.price-head {
	margin-bottom: 50px;
}

.price-head h1 {
	letter-spacing: 5px;
	margin-bottom: 20px;
}


.price-value {
	margin-top: 50px;
}

.price-body ul li {
	margin: 25px 0px 0px 0px;
	padding: 0px 0px 25px 0px;
}

.price-table .button {
	margin-top: 50px;
}





/*========================

	12. Blog

==========================*/



#blog {
	position: relative;
	padding-bottom: 200px;

}



/* Blog Post
----------------------------*/




#blog-post {
	padding-bottom: 50px;
}

.blog-post {
	margin-bottom: 200px;
}

.blog-post h3 {
	letter-spacing: 1px;
	word-spacing: 3px;
	padding: 20px 0px 20px 0px;
}

.blog-post ul li {
	display: inline-block;
	padding-left: 15px;
	border-left: 1px solid #b2b2b2;
	margin: 0px 0px 20px 15px;
}

.blog-post ul li a {
	margin-left: 3px;
}

.blog-post img {
	opacity: 0.9;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}

.blog-post img:hover {
	opacity: 1;
}

.blog-post p {
	line-height: 40px;
}

.post-text p {
	margin-bottom: 25px;
}

.blog-post .button {
	margin-top: 30px;
}

.blog-masonry .blog-post {
	padding: 20px;
}




/* Blog Sidebar
----------------------------*/




.sidebar {
	margin: 0px 0px 100px 30px;
}

.sidebar ul {
	margin-top: 25px;
}

.sidebar ul li {
	margin-top: 25px;
}

.tags li {
	display: inline-block;
	padding: 8px;
	margin: 3px;
	border: 1px solid #777777;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}

.tags li:hover a {
	color: #fff;
}


.tags li:hover {
	background: #191919;
	border: 1px solid #191919;
}


#subscribe {
	position: relative;
	padding-top: 150px;
	padding-bottom: 80px;
}




/* Comments
----------------------------*/




#comments {
	padding-bottom: 200px;
}

.comment-form {
	float: left;
	text-align: left;
}

.form {
	margin-top: 50px;
}

.form input {
	padding: 10px;
	margin-bottom: 10px;
	float: left;
	width: 100%;
}

.form .button {
	margin-top: 40px;
}

.comment-form {
	margin-bottom: 100px;
}

.comment-form h3 {
	margin-bottom: 20px;
}

.form textarea {
	width: 100%;
	margin-top: 20px;
	padding: 10px;
}

.posted-comment {
	background: #f4f4f4;
	margin-top: 50px;
	margin-bottom: 10px;
	padding: 20px;
}

.posted-comment h3 {
	letter-spacing: 1px;
	word-spacing: 2px;
}

.posted-comment img {
	border-radius: 100%;
	width: 50px;
}

.posted-comment span {
	font-size: 11px;
}

.posted-comment p {
	margin-top: 30px;
	margin-bottom: 30px;
	line-height: 32px;
}



/*========================

	13. Map

==========================*/




#map_canvas {
	height: 500px;
	width: 100%;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;

}

.map-full {
	margin-bottom: 200px;
}





/*========================

	14. Contact

==========================*/


#contact {

	padding-bottom: 200px;
	background: #fff;

}

.spacer {
	padding-top: 100px;
}

#contact form input,
form textarea {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-bottom: 10px;
	margin-bottom: 60px;
	transition: none;
	background: transparent;
	width: 100%;
	border: none;
	color: #191919;
	float: left;
	border-bottom: 1px solid #191919;
	font-size: 16px;
	font-weight: 500;
	word-spacing: 2.5px;
	text-align: left;
}



#message {

	height: 100px;
}

#contact-form {
	text-align: left;

}

#contact-form p span {
	display: block;
	letter-spacing: 2px;
	text-transform: uppercase;
}

#contact-form p {
	margin-top: 15px;
}

#contact-form i {
	margin-right: 5px;
}

#contact-form p {
	float: right;
}

.contact-full {
	margin-top: 100px;
}

.contact-wrapper {
	max-width: 800px;
	background: red;
}

.contact-btn {
	float: left;
	border: none;
}

::-webkit-input-placeholder {
	color: #777777;
}

#contact-form label {
	cursor: text;
	display: block;
	margin: 0;
	position: relative;
	top: 0;
	width: 100%;
}

:-moz-placeholder {
	/* Firefox 18- */
	color: #777777;
}

::-moz-placeholder {
	/* Firefox 19+ */
	color: #777777;
}

:-ms-input-placeholder {
	color: #777777;
}

#contact-form .error {
	bottom: 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: normal;
	left: auto;
	letter-spacing: 0;
	position: absolute;
	right: 20px;
	text-transform: capitalize;
	width: auto;
}

.response h3 {
	letter-spacing: 2px;
	margin: 10px 0 25px;
	text-transform: uppercase;
}





/*========================

	15. Footer

==========================*/


#footer {
	padding-top: 50px;
	padding-bottom: 70px;
}

.footer-logo img {
	width: 40px;
	aspect-ratio: 1 / 1;
}

.footer-social li {
	display: inline-block;
	margin: 35px 0px 0px 35px;

}

.footer-social li i {
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9);
	transform: scale(0.9);
}

.footer-details {
	padding-top: 50px;
}

.footer-details p {
	margin-top: 10px;
}

.footer-details a {
	margin-left: 5px;
}


/*========================

	16. Shop

==========================*/


#shop {
	position: relative;
	padding-bottom: 50px;

}




/* Products
----------------------------*/




.shop-post {
	margin-bottom: 200px;
}

.shop-post h3 {
	letter-spacing: 1px;
	word-spacing: 3px;
	padding: 20px 0px 20px 0px;
}

.shop-post ul li {
	display: inline-block;
	padding-left: 15px;
	border-left: 1px solid #b2b2b2;
	margin: 0px 0px 20px 15px;
}

.shop-post ul li a {
	margin-left: 3px;
}

.shop-post img {
	opacity: 1;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}

.shop-post p {
	line-height: 40px;
}

.shop-post .button {
	margin-top: 30px;
}

.shop-masonry .shop-post {
	padding: 15px;
}

.product-desc {
	margin-top: 25px;
}

.single-product {
	margin-bottom: 50px;
}



/* Cart
----------------------------*/




#cart {
	position: relative;
	padding-bottom: 150px;
}

.cart-item {
	padding-top: 80px;
	padding-bottom: 80px;
	border-bottom: 1px solid #e5e5e5;
}

.cart-item img {
	float: left;
}

.cart-item ul li {
	margin-bottom: 5px;
}

.cart-item .separator-small {
	margin-bottom: 30px;
}






/*========================

	17. Responsive

==========================*/




/* Resolution Under 992px
----------------------------*/



@media all and (max-width: 992px) {
	.navbar-collapse {
		position: static !important;
		background: none !important;
		width: auto !important;
	}

	.navbar-nav {
		flex-direction: row;
	}


	.works-filter,
	.works-filter-full {
		width: 100%;
		justify-content: center;
		font-size: medium;
		display: none;

	}
	.proj picture, .proj video {
		display: block;
		margin-bottom: 2dvh;

	}


	.uk-subnav {
		margin-left: 0px
	}

	.big-text {
		padding-top: 10dvw;
		/* padding-bottom: 20dvw; */
	}

	.f-large {
		font-size: 2.5em;
	}
}


/* Resolution Under 768px
----------------------------*/



@media all and (max-width: 768px) {
	.navbar-collapse {
		position: static !important;
		background: none !important;
		width: auto !important;
	}

	.navbar-nav {
		flex-direction: row;
	}
}



/* Resolution Under 530px
----------------------------*/



@media all and (max-width: 530px) {



	.loader-img img {
		left: 45%;
	}

	.blog-post ul li,
	.shop-post ul li {
		display: block;
		padding-left: 15px;
		border-left: 1px solid #b2b2b2;

	}

	.blog-post ul li,
	.shop-post ul li {
		margin: 0px 0px 20px 0px;
	}

	.blog-post .no-margin,
	.shop-post .no-margin {
		margin: 0px 0px 20px 0px !important;

	}

	.blog-post .no-padding,
	.shop-post .no-padding {
		padding-left: 15px !important;
	}

	.blog-post .no-border,
	.shop-post .no-border {
		border-left: 1px solid #b2b2b2 !important;
	}

	.multi-img img {
		margin-left: 25px;
		width: 45px;
	}

	.simple-big h2 {
		font-size: 3em;
	}

}




/* Resolution Under 450px
----------------------------*/




@media all and (max-width: 450px) {


	.loader-img img {
		left: 42%;
	}

	#map_canvas {
		height: 350px;


	}

	#contact-form p {
		float: left;
		margin-top: 20px;
	}

	.service .separator-small {
		display: none;
	}

	#services .col-md-4 {
		padding-bottom: 100px;
		position: relative;
	}


	.post-info .no-margin {
		margin: 0px 0px 20px 0px !important;

	}

	.post-info .no-padding {
		padding-left: 20px !important;
	}

	.post-info .no-border {
		border-left: 1px solid #b2b2b2 !important;
	}

	.simple-big h2 {
		font-size: 2.5em;
	}

}



/* Resolution Under 400px
----------------------------*/



@media all and (max-width: 400px) {

	.big-text h2 {
		width: 100%;
	}

	.f-large {
		font-size: 2.3em;
	}


	.f-medium,
	.f-expanded {
		font-size: 20px;
	}


	.big-text h3,
	.big-text-full h3 {
		letter-spacing: 1px;
		word-spacing: 3px;
		line-height: 30px;
	}


	.big-text h2 {
		line-height: 47px;
	}

	.works-filter li,
	.works-filter-full li {
		margin-right: 18px;

	}

}

/* Resolution Under 375px
----------------------------*/


@media all and (max-width: 375px) {

	.drop-right {
		float: left;
		padding-top: 0px;
		padding-right: 20px;
	}

	.f-big {
		font-size: 20px;
	}

}




/*Portfolio Filters */
.filters-wrapper {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: rgba(255, 255, 255, 0.9);
	/* Slightly transparent background */
	z-index: 1000;
	/* Ensure it is above other content */
	padding: 10px 0;
	/* Add some padding */
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
	/* Add a slight shadow */
}

.filters-wrapper ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: left;
}

.filters-wrapper ul li {
	margin: 0 10px;
}