/***********************************************
Text Logo
***********************************************/

.site-logo {
	width: 100%;
	max-width: em(200);
	height: auto;
	display: block;
	transition: all .3s;

	img {
		display: block;
		width: 100%;
		height: auto;
	}

	.no-touch &:hover {
		opacity: 0.7;
	}

	&--header {
		float: right;
	}

	@media screen and (min-width: $bp-small) {
		max-width: em(315);
	}
}

/***********************************************
Logo Mark
***********************************************/

.logo-mark {
	width: em(40);
	height: auto;
	display: block;
	margin: 0 auto;

	@media screen and (min-width: $bp-tablet) {
		width: em(75);
	}

	@media screen and (min-width: $bp-tablet) and (max-height: 800px) {
		width: em(50);
	}

	&--video {
		margin-bottom: 35px;
		@media screen and (min-width: $bp-tablet) {
			width: em(40);
		}

		@media screen and (min-width: $bp-tablet) and (max-height: 800px) {
			width: em(40);
		}
	}
}