@charset "utf-8";

/* IMPORT RESET */
@import url("normalize.css");

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(../js/boxsizing.htc);
	/*
		If you need support for IE7 and lower make
		sure the boxsizing.htc file is linked properly.
		More info here:  https://github.com/Schepp/box-sizing-polyfill
	*/
}

/*font*/
@font-face
{
    font-family: 'itc-bk';
    src: url('../fonts/ITCAvantGardeStd-Bk.otf');
}

.ft-itc-bk {
    font-family: itc-bk;
}

@font-face
{
    font-family: 'itc-demi';
    src: url('../fonts/ITCAvantGardeStd-Demi.otf');
}

.ft-itc-demi {
    font-family: itc-demi;
}

@font-face
{
    font-family: 'itc-bk-obl';
    src: url('../fonts/ITCAvantGardeStd-BkObl.otf');
}

.ft-itc-bk-obl {
    font-family: itc-bk-obl;
}

@font-face
{
    font-family: 'segoe-ui';
    src: url('../fonts/segoeui.ttf');
}

.ft-segoe-ui {
    font-family: segoe-ui;
}

@font-face
{
    font-family: 'segoe-ui-bold';
    src: url('../fonts/segoeuib.ttf');
}

.ft-segoe-ui-bold {
    font-family: segoe-ui-bold;
}

@font-face
{
    font-family: 'photograph-sign';
    src: url('../fonts/PhotographSignature.ttf');
}

.ft-photograph-sign {
    font-family: photograph-sign;
}


/* Global */
html, body {
    padding: 0px;
    margin: 0px;

    background: #000;
	color: #fff;
}

img {
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	/*color: inherit;*/
	text-decoration: none;
}

a:focus {
	outline: 0;
}

.window-width {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
}

.window-height {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100vh;
	width: 0px;
}

.mid {
	position: relative;
	width: 100%;
	height: 100%;

	justify-content: center;
	display: flex;
	align-items: center;
}

.container {
	position: relative;
	display: block;
	overflow: hidden;
}

.color-orange {
	color: #d5a85f;
}

.footer-container {
	position: relative;
	display: block;
	padding: 25px 0px 80px;
	width: calc(100% - 40px);
	text-align: center;
	margin: auto;
}

.footer-icon-group {
	position: relative;
	display: block;
	font-size: 0px;
	text-align: center;
	margin: 0px auto 45px;
}

.footer-icon-group > * {
	font-size: 14px;
}

.footer-icon {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin: 0px 16px;
	height: 21px;
}

.footer-icon:before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	opacity: 0;
	
	-webkit-transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	-ms-transition: opacity 0.4s;
	transition: opacity 0.4s;
}

.footer-icon:hover:before {
	opacity: 1;

	-webkit-transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	-ms-transition: opacity 0.4s;
	transition: opacity 0.4s;
}

.footer-icon.tiktok {
	background: url('../images/lynford_barbershop_tiktok_white_icon.svg') no-repeat;
	background-position: 50% !important;
	background-size: contain !important;
	width: 18px;
}

.footer-icon.tiktok:before {
	background: url('../images/lynford_barbershop_tiktok_gold_icon.svg') no-repeat;
	background-position: 50% !important;
	background-size: contain !important;
}

.footer-icon.instagram {
	background: url('../images/lynford_barbershop_instagram_white_icon.svg') no-repeat;
	background-position: 50% !important;
	background-size: contain !important;
	width: 21px;
}

.footer-icon.instagram:before {
	background: url('../images/lynford_barbershop_instagram_gold_icon.svg') no-repeat;
	background-position: 50% !important;
	background-size: contain !important;
}

.footer-icon.facebook {
	background: url('../images/lynford_barbershop_facebook_white_icon.svg') no-repeat;
	background-position: 50% !important;
	background-size: contain !important;
	width: 11px;
}

.footer-icon.facebook:before {
	background: url('../images/lynford_barbershop_facebook_gold_icon.svg') no-repeat;
	background-position: 50% !important;
	background-size: contain !important;
}

.footer-icon.youtube {
	background: url('../images/lynford_barbershop_youtube_white_icon.svg') no-repeat;
	background-position: 50% !important;
	background-size: contain !important;
	width: 29px;
}

.footer-icon.youtube:before {
	background: url('../images/lynford_barbershop_youtube_gold_icon.svg') no-repeat;
	background-position: 50% !important;
	background-size: contain !important;
}

.footer-icon.linkedin {
	background: url('../images/lynford_barbershop_linkedin_white_icon.svg') no-repeat;
	background-position: 50% !important;
	background-size: contain !important;
	width: 21px;
}

.footer-icon.linkedin:before {
	background: url('../images/lynford_barbershop_linkedin_gold_icon.svg') no-repeat;
	background-position: 50% !important;
	background-size: contain !important;
}

.footer-icon.email {
	background: url('../images/lynford_barbershop_email_white_icon.svg') no-repeat;
	background-position: 50% !important;
	background-size: contain !important;
	width: 25px;
}

.footer-icon.email:before {
	background: url('../images/lynford_barbershop_email_gold_icon.svg') no-repeat;
	background-position: 50% !important;
	background-size: contain !important;
}

.footer-tx {
	position: relative;
	display: block;
	text-align: center;
	font-size: 14px;
	letter-spacing: 1px;
}


.header-container {
	position: fixed;
	display: block;
	width: 100%;
	height: 105px;
	background: #000;
	left: 0px;
	top: 0px;
	z-index: 1000;
}

.header-logo {
	position: relative;
	display: table;
	width: 168px;
	top: calc((100% - 48px) / 2);
	margin-left: 65px;
	z-index: 1;
	opacity: 1;
	
	-webkit-transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	-ms-transition: opacity 0.4s;
	transition: opacity 0.4s;
}

.header-logo img {
	max-height: 100%;
}

.header-nav-group {
	position: absolute;
	display: block;
	text-align: center;
	right: 65px;
	top: calc((100% - 11px) / 2);
	font-size: 0px;
	width: 495px;

	-webkit-transition: width 0.4s, right 0.4s;
	-moz-transition: width 0.4s, right 0.4s;
	-ms-transition: width 0.4s, right 0.4s;
	transition: width 0.4s, right 0.4s;
}

.header-nav-group > * {
	font-size: 12px;
}

.header-top-item {
	position: relative;
	display: inline-block;
	vertical-align: top;
	line-height: 11px;
	margin: 0px 0px 0px 45px;
	letter-spacing: 1px;
	padding-bottom: 10px;
	border-bottom: 2px solid transparent;
	color: #fff;
	
	-webkit-transition: color 0.4s, 0.4s;
	-moz-transition: color 0.4s, 0.4s;
	-o-transition: color 0.4s, 0.4s;
	transition: color 0.4s, 0.4s;
}

.header-top-item:first-child {
	margin-left: 0px;
}

.header-top-item:hover {
	color: #d5a85f;
	border-bottom: 2px solid #d5a85f;

	-webkit-transition: color 0.4s, 0.4s;
	-moz-transition: color 0.4s, 0.4s;
	-o-transition: color 0.4s, 0.4s;
	transition: color 0.4s, 0.4s;
}


.headroom--pinned {
    opacity: 1 !important;
	top: 0px !important;
	background: #000;

    -webkit-transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
    -moz-transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
    -ms-transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
    transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
}

.headroom--unpinned {
    opacity: 0 !important;
	top: -105px !important;

    -webkit-transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
    -moz-transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
    -ms-transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
    transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
}

.headroom--top {
	opacity: 0 !important;
	top: -105px !important;
	background: transparent !important;

    -webkit-transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
    -moz-transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
    -ms-transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
    transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
}

.headroom--not-top {
	height: 105px;
	background: #000;

    -webkit-transition: opacity 0.4s, top 0.4s, background 0.4s, top 0.4s;
    -moz-transition: opacity 0.4s, top 0.4s, background 0.4s, top 0.4s;
    -ms-transition: opacity 0.4s, top 0.4s, background 0.4s, top 0.4s;
    transition: opacity 0.4s, top 0.4s, background 0.4s, top 0.4s;
}


.line80 {
	position: fixed;
	top: 80vh;
	left: 0px;
	width: 0px;
	height: 0px;
}

.left-anim {
	left: 300px;
	opacity: 0;

    -webkit-transition: 0s left 0.2s, 0s opacity 0.2s;
    -moz-transition: 0s left 0.2s, 0s opacity 0.2s;
    -ms-transition: 0s left 0.2s, 0s opacity 0.2s;
    transition: 0s left 0.2s, 0s opacity 0.2s;
}

.left-anim.animate-active {
    left: 0px;
    opacity: 1;

    -webkit-transition: 1.2s left 0s, 1.2s opacity 0s;
    -moz-transition: 1.2s left 0s, 1.2s opacity 0s;
    -ms-transition: 1.2s left 0s, 1.2s opacity 0s;
    transition: 1.2s left 0s, 1.2s opacity 0s;
}


/* Desktops and laptops */
@media screen and (max-width : 1366px) {
	
}

/* Tablet */
@media screen and (max-width: 1150px) {

}

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

}

/* Mobile */
@media screen and (max-width: 768px) {
    
}

@media screen and (max-width : 500px) {
	.header-logo {
		width: 145px;
		/* height: 41px; */
		top: 30px;
		margin: 0px auto;
	}

	.header-nav-group {
		width: 100%;
		right: 0px;
		top: calc((100% - 40px) / 2);

		-webkit-transition: width 0.4s, right 0.4s, top 0.4s;
		-moz-transition: width 0.4s, right 0.4s, top 0.4s;
		-ms-transition: width 0.4s, right 0.4s, top 0.4s;
		transition: width 0.4s, right 0.4s, top 0.4s;
	}

	.header-top-item {
		margin: 0px 15px 10px !important;
		line-height: 10px;
	}

	.headroom--top {
		opacity: 0 !important;
		top: -180px !important;
		background: transparent !important;

		-webkit-transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
		-moz-transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
		-ms-transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
		transition: opacity 0.4s, top 0.4s, background 0.4s, height 0.4s;
	}

	.headroom--top .header-nav-group {
		width: 100%;
		right: 0px;
		top: calc((100% - 40px) / 2);

		-webkit-transition: width 0.4s, right 0.4s, top 0.4s;
		-moz-transition: width 0.4s, right 0.4s, top 0.4s;
		-ms-transition: width 0.4s, right 0.4s, top 0.4s;
		transition: width 0.4s, right 0.4s, top 0.4s;
	}

	.headroom--not-top {
		opacity: 1;
		height: 180px;
		background: #000;

		-webkit-transition: opacity 0.4s, top 0.4s, background 0.4s, top 0.4s;
		-moz-transition: opacity 0.4s, top 0.4s, background 0.4s, top 0.4s;
		-ms-transition: opacity 0.4s, top 0.4s, background 0.4s, top 0.4s;
		transition: opacity 0.4s, top 0.4s, background 0.4s, top 0.4s;
	}

	.headroom--not-top .header-nav-group {
		width: 100%;
		right: 0px;
		top: calc(((100% - 40px) / 2) + 30px);

		-webkit-transition: width 0.4s, right 0.4s, top 0.4s;
		-moz-transition: width 0.4s, right 0.4s, top 0.4s;
		-ms-transition: width 0.4s, right 0.4s, top 0.4s;
		transition: width 0.4s, right 0.4s, top 0.4s;
	}
}