/* Portrait tablet to landscape and desktop */
@media (max-width: 1200px) {
	#promo .text {
		font-size: 100px;
	}
	#motto span {
		font-size: 16px;
		line-height: 30px;
	}
}
@media (max-width: 1024px) {


	html, body {
		cursor: auto;
		background: transparent !important;
		z-index: 22
	}
	#bakcground-svg{
		z-index: -1
	}
	#logoTop {
		top:0px;
		left:0px;
		z-index: 120;
		background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0));
		width: 100%;
		height: 80px;
		padding-left: 20px;
		padding-top: 20px;
	}

	#logoTop img {
		width: 100px;
		height: auto;
	}

	#menu-close-button {
		display: inline;
		position: absolute;
		right: 20px;
		top: 26px;
		cursor: pointer;
	}

	#menu-button {
		display: inline;
		position: fixed;
		right: 20px;
		top: 26px;
		cursor: pointer;
		z-index:130;
	}

	#menu {
		right: 0px;
		top: 0px;
		background-color: #656566;
		width: 100%;
		height: 100%;
		z-index:150;
		/*padding-top: 100px;*/
	}

	#menu .header {
		display: block;
		height: 100px;
	}

	#menu a,
	#sub-menu a {
		display: block;
		text-align: left;
		line-height: 40px;
		font-size: 16px;
		margin-left: 20px;
		margin-right: 20px;
	}

	#sub-menu {
		position: static;
		/*top: 250px;*/
		z-index: 110;
		/*border-bottom: 1px solid #b5b5b7;*/
	}

	#menu, #sub-menu {
		left: 100%;
		-webkit-transition: left 500ms ease-in-out;
		-moz-transition: left 500ms ease-in-out;
		-o-transition: left 500ms ease-in-out;
		transition: left 500ms ease-in-out;
	}

	#menu.active, #sub-menu.active {
		left: 0px;
	}

	#menu .seperator {
		display: block;
		border-bottom: 1px solid #888888;
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	#promo .text {
		font-size: 40px;
	}

	#promo .text.fragrance {
		text-align: left;
		top: 150px;
		left:20px;
		height: 50px;
	}

	#promo .text.flavor {
		text-align: left;
		top: 200px;
		left: 20px;
		height: 50px;
	}

	#motto {
		left: 20px;
		right: 20px;
		bottom: 50px;
	}

	#motto span {
		font-size: 12px;
		letter-spacing: 0px;
		line-height: 20px;
		text-align: left;
	}

	#logoBottom {
		position: absolute;
		left: 20px;
		bottom: 20px;
	}

	#copy {
		position: static;
		bottom: 40px;
		width: 100%;
		left: 0xp;
		right: 0px;
	}

	#copy .left {
		position: static;
		text-align: left;
		display: inline;
	}

	#copy .left a {
		display: inline;
		margin-left: 20px;
		margin-right: 0px;
	}

	#copy .right {
		position: static;
		display: inline;
		text-align: left;;
	}

	#copy .right span {
		margin-left: 20px;
		margin-right: 0px;
	}



	#button-next-svg,
	#button-prev-svg {
		display: none;
	}

	.slide {
		position: static;
		width: 100%;
		height: 300px;
		-webkit-transition: height 500ms ease-in-out;
		-moz-transition: height 500ms ease-in-out;
		-o-transition: height 500ms ease-in-out;
		transition: height 500ms ease-in-out;
		border-bottom: 2px solid #fff
	}

	.slide.opened {
		height: auto;
	}

	.slide.opened .detail {
		display: block;
		position: static;
	}

	.slide .detail {
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 40px;
	}

	.slide .detail span {
		font-family: 'Montserrat', sans-serif;
		font-size: 14px;
		line-height: 20px;
		color: #fff;
	}

	.slide .title {
		position: relative;
		background-size: cover;
		left: 0px;
		top: 0px;
	}

	.slide .title span {
		position: relative;
		font-size: 50px;
		line-height: 44px;
		top: 100px;
		left: 18px;
	}

	.slide .link {
		position: relative;
		left: 23px;
		top: -80px;
		padding-left: 0px;
	}

	#slide-container {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
		/*-webkit-overflow-scrolling: touch; */
	}

	#slide-container .footer {
		display: block;
		width: 100%;
		height: 200px;
		background-color: #353536;
	}

	#one-content {
		position: static;
		width: 100%;
		height: 100%;
		overflow: hidden;
		overflow-y: scroll;
		 -webkit-overflow-scrolling: touch;
	}

	#one-content .helper {
		position: static;
	}

	#one-content img {
		position: static;
		max-width: 100%;
		opacity: .8;
	}

	#one-content .detail {
		position: static;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 30px;
		padding-bottom: 30px;
		width: auto;
	}

	a.active {
		border-bottom:0px;
		border-left: 10px solid #76bc21;
		margin-left: 0px !important;
		padding-left: 10px;
	}

	.subs {
		position: static;
		width: auto;
	}

	#myBtn {
		margin: 20px 20px 60px 0px;
		width: 100%;
	}
	.modal-content{
		width: 90%
	}
	.modal-body{
		flex-direction: column;
	}
	.subs-form, .contact-form{
		padding: 1rem;
		width: 90%;
	}
	.subs-form{
		border-right: 0;
		border-bottom: 1px solid #bdbdbd;
		padding-top: 2rem
	}
	.contact-form{
		padding-top: 2rem
	}
	.close{
		top: 50px;
		right: 50px
	}
	.modal{
		padding-top: 0;
		z-index: 999
	}
	#promo .text{
		width: auto;
	}
	#promo canvas{
		left: 20px
	}
	.popup-trigger{
		right: 20px;
    bottom: 60px;
    width: 120px;
    height: 140px;
	}
	.seluzPopupBody img{
		/*width: 90% !important;*/
	}
	.seluzPopupClose{
		right: 20px;
    top: 20px;
	}
	.seluzPopupBody{
		width: 95%;
	}
}