*{
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		margin: 0; padding: 0; outline: none;
	}
	ul{list-style: none;}
	a{text-decoration: none;}
	body{line-height: normal;}
	html, body{height: 100%; min-height: 100%;}
	/* BREAK */



	body, div, a, p, input, button, li{
		font-family: 'Inter';
	}
	h1, h2, h3, h4, h5, h6{
		font-family: 'DM Sans';
	}
	/* BREAK */




	/* HEADER */
	header{
		position: fixed;
		width: 20%; height: 100%;
		z-index: 10;
		padding:30px;
		overflow-y: auto;
		left: 0; top: 0;
		background: #fff;
	}
	body.black header{
		background: #000;
	}
	body.magenta header{
		background: #aa0144;
	}
	a.logo{
		float: left;
		width: 100%;
		margin: 0 0 40px 0;
	}
	a.logo img{
		float: left;
		width: 110px; height: auto;
	}
	a.logo.center{
		float: none;
		display: table;
		width: auto;
		margin: 0 auto 40px auto;
	}


	.content{
		float: left; 
		width: 100%;
		margin:0 0 50px 0;
		padding-bottom: 20px;
		position: relative;
	}
	.content:after{
		position: absolute;
		left: 0;  bottom: 0;
		content: '';
		margin: 0 0 0 0;
		width: 60px; height: 2px;
		background: #000;
	}
	.content.center:after{
		right: 0; margin: 0 auto;
	}
	.content h3{
		text-align:left;
		color:#000;
		font-size:16px;
		text-transform: uppercase;
		margin:0 0 20px 0;
	}
	.content p{
		text-align:left;
		color:#000;
		font-size:14px; line-height: 130%;
		margin:0 0 20px 0;
	}
	.content p:last-of-type{
		margin-bottom: 0;
	}
	.content.center h3,
	.content.center p{
		text-align: center;
	}
	body.black .content h3{color: #9b9b9b;}
	body.black .content p{color: #fff;}
	body.black .content:after{background: #9b9b9b;}
	body.magenta .content h3{color: #7adb13;}
	body.magenta .content p{color: #fff;}
	body.magenta .content:after{background: #7adb13;}



	.header-right{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding-bottom: 40px;
	}
	.contact{
		float: left;
		width: 100%;
		position: relative;
		margin:0 0 50px 0;
		padding-bottom: 20px;
	}
	.contact:after{
		position: absolute;
		left: 0;  bottom: 0;
		content: '';
		margin: 0 0 0 0;
		width: 60px; height: 2px;
		background: #000;
	}
	.contact.center:after{
		right: 0; margin: 0 auto;
	}
	.contact h4{
		text-align:left;
		color:#000;
		font-size:16px;
		text-transform: uppercase;
		margin:0 0 6px 0;
		position: relative;
	}
	.contact h4:before{
		content:'\f0e0';
		font-family:'Font Awesome 7 Free';
		font-weight: normal;
		margin-right: 10px;
	}
	.contact p{
		text-align:left;
		color:#000;
		font-size:15px;
		margin:0 0 0 0;
	}
	.contact p a{
		color: #000;
		transition:0.2s;
		-webkit-transition:0.2s;
	}
	.contact p a:hover{
		color: #0954ff !important;
	}
	.contact.center h4,
	.contact.center p{
		text-align: center;
	}
	body.black .contact:after{background: #9b9b9b;}
	body.black .contact h4{color: #9b9b9b;}
	body.black .contact p,
	body.black .contact p a{color: #fff;}

	body.magenta .contact:after{background: #7adb13;}
	body.magenta .contact h4{color: #7adb13;}
	body.magenta .contact p{color: #fff;}
	body.magenta .contact p a{color: #fff;}
	body.magenta .contact p a:hover{color: #7adb13 !important;}


	.social{
		float: left;
		width: 100%;
	}
	.social h4{
		text-align:left;
		color:#000;
		font-size:16px;
		text-transform: uppercase;
		margin:0 0 6px 0;
	}
	.social a{
		color:#000;
		font-size:14px;
		margin-right: 10px;
		transition:0.2s;
		-webkit-transition:0.2s;
	}
	.social.center h4,
	.social.center p{
		text-align: center;
	}
	.social.center .icons{
		text-align: center;
	}
	.social a:hover{
		color: #0954ff !important;
	}
	body.black .social h4{color: #9b9b9b;}
	body.black .social p,
	body.black .social a{color: #fff;}

	body.magenta .social h4{color: #7adb13;}
	body.magenta .social p,
	body.magenta .social a{color: #fff;}
	body.magenta .social a:hover{color: #7adb13 !important;}



	/* PORTFOLIO */
	.portfolio{
		float: right;
		width: 80%;
	}
	.portfolio-items{
		float: left;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.portfolio-items .item{
		float: left;
		width: 25%;
		position: relative;
		overflow: hidden;
	}
	.portfolio-items .item a{
		float: left;
		width: 100%;
		position: relative;
	}
	.portfolio-items .item img{
		float: left;
		width: 100%; height: auto;
		aspect-ratio: 1/1;
		object-fit: cover;
		object-position: center;
		transform: scale(1);
		transition:0.6s; -webkit-transition:0.6s;
	}
	.portfolio-items .item:hover img{
		transform: scale(1.1);
	}
	.portfolio-items .item .text{
		position: absolute;
		width: 100%;
		padding: 15px;
		z-index: 4;
		left: 0; bottom: -200px;
		opacity: 0;
		transition:0.6s; -webkit-transition:0.6s;
	}
	.portfolio-items .item:hover .text{
		bottom: 0;
		opacity: 1;
	}
	.portfolio-items .item .text h4{
		text-align:left;
		color:#fff;
		font-size:16px;
		text-transform: uppercase;
		margin:0 0 5px 0;
	}
	.portfolio-items .item .text p{
		text-align:left;
		color:#fff;
		font-size:11px;
		text-transform: capitalize;
		margin:0 0 0 0;
	}
	.portfolio-items .item a:before{
		position: absolute;
		width: 100%; height: 100%;
		z-index: 2;
		left: 0; top: 0;
		content: '';
		background: rgba(0,0,0,0.4);
		opacity: 0;
		transition:0.6s; -webkit-transition:0.6s;
	}
	.portfolio-items .item a:after{
		position: absolute;
		width: 100%; height: 100%;
		z-index: 5;
		left: 0; top: 0;
		content: '+';
		text-align:center;
		color:#fff;
		font-size:36px;
		margin:0 0 0 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		font-weight: normal;
		visibility: hidden;
	}
	.portfolio-items .item:hover a:before{
		opacity: 1;
	}
	.portfolio-items .item:hover a:after{
		visibility: visible;
	}
	/* BREAK */






	footer{
		float: right;
		width: 80%;
		padding:20px 20px;
		background: #eee;
	}
	body.black footer{background: #0b0b0b;}
	body.magenta footer{background: #d7115f;}
	footer .copyright{
		float: left;
		text-align:left;
		color:#000;
		font-size:12px;
		text-transform: uppercase;
		margin:0 0 0 0;
	}
	footer .copyright a{
		color: #000;
		transition:0.2s;
		-webkit-transition:0.2s;
	}
	footer .copyright a:hover{
		color:#0954ff !important;
	}
	footer .follow{
		float: left;
		text-align:left;
		color:#000;
		font-size:12px;
		text-transform: uppercase;
		margin:0 0 0 20px;
	}
	footer .follow a{
		color: #0954ff;
		text-decoration: none;
		transition:0.2s; -webkit-transition:0.2s;
	}
	footer .follow a:hover{
		color:#9b9b9b !important;
	}
	body.black .copyright,
	body.black .copyright a,
	body.black .follow{
		color: #fff;
	}

	body.magenta .copyright,
	body.magenta .copyright a,
	body.magenta .follow,
	body.magenta .follow a{
		color: #fff;
	}
	body.magenta footer .copyright a:hover{color:#7adb13 !important;}
	body.magenta footer .follow a{color:#7adb13 !important;}
	body.magenta footer .follow a:hover{color:#fff !important;}
	/* BREAK */



	/* BREAK */
	.sl-overlay{
		opacity: 0.9 !important;
	}
	body.black .sl-overlay{
		background: #000;
		opacity: 0.9 !important;
	}
	body.black .sl-wrapper .sl-close,
	body.black .sl-wrapper .sl-counter,
	body.black .sl-wrapper .sl-navigation button{
		color: #fff;
	}

	body.magenta .sl-overlay{
		background: #aa0144;
		opacity: 0.9 !important;
	}
	body.magenta .sl-wrapper .sl-counter{
		color: #fff;
	}
	body.magenta .sl-wrapper .sl-close,
	body.magenta .sl-wrapper .sl-navigation button{
		color: #7adb13;
	}