@charset "UTF-8";
/*
Theme Name: YITH Proteo
Theme URI: https://proteo.yithemes.com/
Author: YITH
Author URI: https://yithemes.com
Description: Proteo is a sleek, modern and “Gutenberg-friendly” e-commerce theme. Developed with a beautiful UI and a minimal design, is perfect for each kind of shop. Easy to manage and to customize, Proteo is the best solution if you want a complete e-commerce template and start quickly to sell your products with WooCommerce without a technical knowledge. Use it also for corporate site or a blog: there are no limits about what you can do with a beautiful and usable theme like this! Main features: Colors and Typography customization (Google font support), Logo customization, 3 different Header layouts, Advanced customizer theme options, Sidebar Management, Sidebar Chooser on each page and product, Page title icons, Top Bar Management, Easy main color shade chooser, Buttons style management (gradient buttons support), Footer management with multiple sidebars, WooCommerce support, Shop Theme Options, Custom WooCommerce messages and animated WooCommerce alert notices, Two cart page layouts, Bootstrap grid system, CSS animations, Gutenberg support, Responsive, Fullscreen search, Multilevel menus, Support to all YITH plugins, SVG icons for HiDPI screens, Translation Ready. <a href="https://proteo.yithemes.com/about-proteo/" rel="nofollow" target="_blank">Discover more ></a> | <a href="https://proteo.yithemes.com/" rel="nofollow" target="_blank">Check our live demo ></a>

Version: 1.0.10
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yith-proteo
Tags: one-column, two-columns, left-sidebar, right-sidebar, wide-blocks, block-styles, buddypress, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, rtl-language-support, theme-options, threaded-comments, translation-ready, blog, e-commerce, portfolio

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

	@font-face {		
		font-family: 'FontAwesome';
		src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
		src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
			 url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
			 url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
			 url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
			 url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	* {
		box-sizing: border-box;	
	}
	
	html {
	  line-height: 1.15;  
	  -webkit-text-size-adjust: 100%;  
	}
	
	body {
		margin: 0;
		font-family: Montserrat;		
		font-size: 15px;
		line-height: 1.6;	  
	}

	#content > .container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 10px;
	}


	#primary {
		display: flex;
	}

	#primary > .sidebar {
		min-width: 300px;
		max-width: 300px;		
		padding: 0 0 0 20px;
	}
	
	#main {
		width: 100%;
	}




	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	a {
		color: #d2b272;
		text-decoration: none;
	}
	
	a:hover {
		color: #d2b272;
		text-decoration: underline;
	}	

	.tac {
		text-align: center;
	}

	.p-sep {
		height: 1px;
		margin: 40px 10px;
		background-color: #d2b272;					
	}
	
	h1,
	.t1-t {
		text-transform: uppercase;
		color: #d1b371;
		font-weight: 500;
		font-size: 20px;
		letter-spacing: 1.5px;
		line-height: 32px;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	
	h1::after,
	.t1-t::after {
		display: block;
		content: "";
		width: 120px;
		height: 2px;
		margin: 20px auto 25px auto;
		background-color: #d2b272;		
	}	
	
	.t1-txt {
		text-align: center;
		font-size: 12px;
		line-height: 22px;
		max-width: 800px;
		margin: 0 auto;
	}	
	
	h2,
	.t2-t {
		font-size: 18px;
		margin: 0;
		padding: 0;
		line-height: 22px;
		font-weight: normal;		
	}
	
	/* col */
	
	.cols {
		display: flex;
		align-items: stretch;		
	}
	
	.cols > .col {		
		width: 50%;
		padding: 10px;
	}	
	
	.cols > .sep {		
		min-width: 1px;
		max-width: 1px;	
		margin: 20px 0;
		background-color: #d2b272;		
	}

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

		.cols {		
			flex-wrap: wrap;			
		}

		.cols > .col {		
			width: 100%;			
		}

		.cols > .sep {		
			display: none;				
		}
	
	}	
	
	/* header */

	header {
		
	}

	header > .inr {
		display: flex;
		align-items: center;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 10px;
		position: relative;
	}

	/* header - logo */

	header > .inr > .logo {
		min-width: 180px;
		background: #000;
		text-align: center;
		padding: 10px;		
	}

	header > .inr > .logo img {
		display: block;
	}


	header > .inr > .logo > .top {
		font-size: 20px;
		font-weight: bold;
		color: #fff;
		line-height: 0.8;
		padding: 5px 0;		
	}

	header > .inr > .logo > .bottom {
		font-size: 12px;		
		color: #fff;
		border: 1px solid #fff;
		border-right: 0;
		border-left: 0;
		line-height: 1; 
		padding: 5px 0;
	}
		
	header > .inr > .logo > .circle {
		border: 1px solid #fff;
		border-radius: 50%;
		height: 20px;
		width: 20px;
		margin: 5px auto 0 auto;
		position: relative;
	}
	
	header > .inr > .logo > .circle::after {
		content: "";
		background: #fff;
		border-radius: 50%;
		height: 4px;
		width: 4px;
		display: block;
		position: absolute;
		top: 7px;
		left: 7px;
	}		
	
	/* header - nav */
	
	header > .inr > .nav {
		width: 100%;		
	}
	
	header > .inr > .nav > ul {
		display: flex;
		justify-content: space-around;
		align-items: center;	
	}
	
	header > .inr > .nav li > a {
		text-transform: uppercase;
		text-decoration: none;
		font-size: 10px;
		letter-spacing: 1.5px;
		color: #000;		
	}

	/* header - social */
	
	header > .inr > .social {
		min-width: 130px;		
	}

	/* header - shop */

	header > .inr > .shop {
		min-width: 130px;
		max-width: 130px;
		text-align: right;
		padding: 0 10px;
	}

	header > .inr > .shop > a {
		display: inline-block;
		background: #000;
		color: #fff;
		text-transform: uppercase;
		text-decoration: none;
		padding: 10px 18px;
		font-size: 10px;
		font-weight: bold;
		letter-spacing: 1.5px;
		transition: all .3s;
	}
	
	header > .inr > .shop > a:hover {
		background: #d2b272;
	}			

	/* content */
	
	#content {
		padding: 20px 10px;		
	}

	/* single - content */

	.post-single > #main > .date {		
		padding: 0 0 10px 0;
		font-size: 15px;
		display: flex;
		color: #666;
		justify-content: center;	
	}

	.post-single > #main > .date::before  {			
		content: "\f017";
		color: #d1b371;
		display: block;
		font-family: FontAwesome;		
		font-size: 17px;		
		line-height: 1;	
		padding: 4px 8px 0 0;		
	}

	.post-single .categories  {			
		display: flex;
		flex-wrap: wrap;
		margin: 0 -5px 20px -5px;
	}

	.post-single .categories > a {			
		border: 1px solid #d1b371;
		text-decoration: none;
		padding: 5px 8px;
		margin: 5px;
		color: #000;
	}


	.post-single .tags  {			
		display: flex;
		flex-wrap: wrap;
		margin: 0 -5px 20px -5px;		
	}

	.post-single .tags > a {			
		border: 1px solid #d1b371;
		text-decoration: none;
		padding: 3px 5px;
		margin: 5px;
		color: #000;
		font-size: 11px;
	}

	#content > .container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 10px;
	}

	figure {
		max-width: 100%;		
	}
	
	figure.alignleft {
		float: left;
		margin: 6px 30px 22px 0;		
	}

	figure.alignright {
		float: right;
		margin: 6px 0 22px 30px;		
	}

	figure figcaption {
		font-size: 12px;
		color: #666;
	}

	figure .img {
		display: block;
		position: relative;			
	}
	
	figure .img::after {
		content: "";
		position: absolute;
		top: -10px;
		right: 10px;
		left: 10px;
		bottom: 17px;
		border: 1px solid #d1b371;
	}
	
	figure img {
		max-width: 100%;
		height: auto;
	}		

	/* footer */

	#footer {
		text-align: center;
		font-size: 11px;
		color: #666;		
	}

	#footer strong {
		color: #000;
		font-size: 12px;		
	}

	/* sell steps */

	.sell-steps {
		display: flex;
		align-items: stretch;
		margin: 20px 0 0 0;	
		flex-wrap: wrap;
	}
	
	.sell-steps p {
		margin: 0;			
	}	

	.sell-step {
		width: 25%;
		padding: 10px;	
		position: relative;		
	}

	.sell-step > .inr {			
		border: 1px solid #d1b371;
		border-radius: 5px;
		padding: 10px;
		position: relative;
		height: 100%;
	}

	.sell-step .title {
		font-size: 14px;
		font-weight: bold;
	}

	.sell-step .txt {
		font-size: 10;
	}

	.sell-step::before {
		content: "\f054";	
		font-family: FontAwesome;		
		color: #d1b371;				
		display: block;							
		line-height: 0;
		position: absolute;
		right: -9px;
		top: 50%;
		font-size: 20px;		
	}
	
	.sell-step:last-child::before {		
		content: "";
	}	

	.sell-step > .inr::before {		
		color: #d1b371;
		display: inline-block;
		font-family: FontAwesome;
		display: inline-block;
		font-size: 40px;
		padding: 0 0 10px 0;
		line-height: 1;
	}
	
	.sell-step-1 > .inr::before {
		content: "\f2b7";
	}

	.sell-step-2 > .inr::before {
		content: "\f0d1";
	}

	.sell-step-3 > .inr::before {
		content: "\f0f6";
	}

	.sell-step-4 > .inr::before {
		content: "\f0d6";
	}

	.sell-step > .inr::after {		
		color: #fff;
		background: #d1b371;		
		display: block;
		font-weight: bold;
		border: 2px solid #fff;
		border-radius: 50%;
		width: 30px;
		height: 30px;		
		line-height: 1;
		position: absolute;
		top: -15px;
		left: -15px;
		font-size: 15px;
		font-weight: bold;
		padding: 5px 0 0 0;
		box-sizing: border-box;
	}

	.sell-step-1 > .inr::after {
		content: "1";
	}

	.sell-step-2 > .inr::after {
		content: "2";
	}

	.sell-step-3 > .inr::after {
		content: "3";
	}

	.sell-step-4 > .inr::after {
		content: "4";
	}

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

		.sell-step {
			width: 50%;
		}
	
	}
	
	@media only screen and (max-width: 450px) {

		.sell-step {
			width: 100%;
		}
		
		.sell-step::before {
			content: "\f078";			
			right: 50%;
			top: auto;
			bottom: 2px;
			width: 10px;
		}		
		
		
	
	}

	/* gallery */

	.gallery {
		display: flex;
		flex-wrap: wrap;		
	}
	
	.gallery > .ety {
		width: 50%;
		padding: 20px;		
	}	
	
	.gallery > .ety > .inr {
		border: 1px solid #d1b371;
		height: 200px;
		position: relative;
		padding: 20px 20px 20px 220px;
		text-align: center;
	}		
	
	.gallery > .ety > .inr > .img {
		position: absolute;
		left: -10px;
		top: -10px;
		z-index: -100;	
		display: block;
	}	
	
	.gallery > .ety > .inr > .img > img {
		display: block; 		
		height: 220px;	
		transition: all .3s;
	}		
	
	.gallery > .ety > .inr .title {
		color: #000;
		font-size: 32px;
		display: block;	
		transition: all .3s;
	}	

	.gallery > .ety > .inr .title:hover {
		color: #d1b371;
		text-decoration: none;
	}

	.gallery > .ety:hover > .inr > .img > img {
		height: 230px;
		margin: -5px;	
	}
	
	/* post - list */

	.item-list .items {		
		display: flex;
		flex-wrap: wrap;		
	}		
	
	.item-list .items > .item {	
		width: 50%;
		padding: 10px;			
	}

	.item-list .items > .item > .inr {	
		display: flex;
	}

	.item-list .items > .item > .inr > .img {
		position: relative;
		padding: 10px;
		min-width: 200px;
		max-width: 200px;		
		height: 200px;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	
	.item-list .items > .item > .inr > .img::after {			
		content: "";
		position: absolute;			
		top: -10px;
		right: 10px;
		left: 10px;
		bottom: 14px;
		border: 1px solid #d1b371;
	}	
	

	.item-list .items > .item > .inr .img > img {	
		display: none;				
	}

	.item-list .items > .item > .inr .title  {	
		display: block;
		padding: 10px 10px 10px 20px;
		
		font-size: 20px;
		color: #d1b371;
	}

	.item-list .items > .item > .inr .txt  {			
		padding: 0 10px 10px 20px;
		font-size: 12px;
		line-height: 22px;
	}
	
	.item-list .items > .item > .inr .date  {			
		padding: 0 10px 10px 20px;
		font-size: 10px;
		display: flex;
		color: #666;
	}

	.item-list .items > .item > .inr .date::before  {			
		content: "\f017";
		color: #d1b371;
		display: block;
		font-family: FontAwesome;		
		font-size: 12px;		
		line-height: 1;	
		padding: 2px 6px 0 0;
		
	}	
	
	/* page - archive */
		
	.page-archive .item-list .items {
		max-width: 800px;
		margin: 0 auto;
		
	}		
		
	.page-archive .item-list .items > .item {
		width: 100%;
		
	}	
	
	
	
	
	

	/* pagination */

	.pagination > ul {
		padding: 5px;		
	}

	.pagination > ul {
		display: flex;
		flex-wrap: wrap;
	}

	.pagination > ul > li {
		padding: 5px;
	}

	.pagination > ul > li > a {
		display: block;
		border: 1px solid #000;
		padding: 0 5px;
		color: #000;
		text-decoration: none;
	}
	
	.pagination > ul > li > a:hover {
		border: 1px solid #d1b371;		
		color: #d1b371;
	}	
	
	.pagination > ul > li > span {
		display: block;
		border: 1px solid #d1b371;
		padding: 0 5px;
		color: #d1b371;
	}

	.img_lightbox  				{ border-radius:3px;margin:10px;float:left;width:140px;height:100px;overflow:hidden;display:block; }
	#imagelightbox  { 
		border-radius:3px;
		position:fixed;
		z-index:9999;
		-ms-touch-action:none;
		touch-action:none;
		box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
	}

	/* gallery */

	.bwg-title2 {
		font-weight: normal !IMPORTANT;
	}

	.bwg_gal_title_0 {
		font-weight: normal !IMPORTANT;
	}
	
	/* home - img */
	
	.home-img {
		margin: 50px 10px;
		position: relative;		
	}
	
	.home-img::after {
		content: "";
		position: absolute;
		top: 10px;
		right: 10px;
		left: 10px;
		bottom: 10px;
		border: 1px solid #d1b371;
		box-sizing: border-box;	
	}	
	
	.home-img img {
		max-width: 100%;
		display: block;
	}

	/* menu main - mobile */

	.menu-bar-mobile {
		cursor: pointer;		
		font-family: FontAwesome;
		font-size: 27px;
		cursor: pointer;
		display: none;
		position: absolute;
		right: 20px;		
	}
	
	.menu-bar-mobile:before {
		content: "\f0c9";	
	}	
	
	
	
	
	
	@media only screen and (max-width: 900px) {

		header > .inr > .nav {			
			position: absolute;
			bottom: -20px;
			right: 160px;
			height: 0;
			max-width: 120px;
			z-index: 9999;
		}

		header > .inr > .nav.right {
			right: 20px;
		}

		header > .inr > .nav > ul {
			flex-wrap: wrap;
			background: #fff;
			box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);			
			padding: 10px 0;
		}

		header > .inr > .nav > ul > li {
			width: 100%;
			padding: 0 10px;			
		}
		
		header > .inr {			
			justify-content: center;
		}

		.menu-bar-mobile {
			display: block;			
		}
		
		header > .inr > .nav {
			display: none;
		}		
				
	}

	@media only screen and (max-width: 900px) {
	
		#primary {
			flex-wrap: wrap;
		}
	
		.sidebar {
			min-width: 100% !IMPORTANT;
		}
		
		.sidebar {
			padding: 0 !IMPORTANT;
		}		
		
	}
		
	@media only screen and (max-width: 900px) {
		
		.item-list .items > .item {
			width: 100%;
			
		}	
	
	}
	
	@media only screen and (max-width: 700px) {
		
		.item-list .items > .item > .inr {
			flex-wrap: wrap;
		}
	
	}		
	
	@media only screen and (max-width: 940px) {
		
		.gallery > .ety {
			width: 100%;
		}			
	
	}	
	
	@media only screen and (max-width: 600px) {
		
		.gallery > .ety > .inr > .img {
			position: relative;
			left: 0;
			right: 0;			
			margin: -20px -30px;
			text-align: center;
		}

		.gallery > .ety > .inr {			
			height: auto;
			position: relative;
			padding: 20px 20px 20px 20px;			
		}

		.gallery > .ety:hover > .inr > .img > img {
			height: 220px;
			margin: 0;	
		}		

		.gallery > .ety > .inr > .img > img {
			display: inline-block;			
		}		
	
	}