@charset "utf-8";
/* CSS Document */
@media only screen and (min-width: 768px) and (orientation: landscape) {
	body {
		background-image: url("../images/pattern.jpg");
		background-repeat: repeat;
		margin: 0 auto;
		box-sizing: border-box;
		height: 100vh;
		overflow: hidden;
	}
	.devilGrl{
		background-image: url("../images/devilgirl.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		width: 40%;
		height: 55vh;
		margin: 0px 15px -4px 0px;
		box-sizing: border-box;
		display: inline-block;
		font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	    font-size: 1.3em;
		font-weight: 400;
		font-style: normal;
		line-height: 1.1em;
		color:azure;
		text-shadow: 0px 0px 7px black;
		text-align: center;
		padding: 1vh 3vw 1vh 2vw;
	}
	
	.slider{
		position: absolute;
		top: -8vh;
		transform: rotate(-65deg);
    	transform-origin: top center;
		right: 0vw;
		transition: top 2s;
	}
	
	.sliderSwingL{
		position: absolute;
		top: -6vh;
		right: 11vw;
		transform: rotate(15deg);
    	transform-origin: top center;
		transition-delay: 3s;
		transition: all 2s;
	}
	.sliderImg{
		width: auto;
		height: 40vh;
		
	}
	.Blk {
		mix-blend-mode: multiply;
		font-family: "veneer", sans-serif;
		font-weight: 400;
		font-style: normal;
		padding: 15px;
		box-sizing: border-box;
	}
	.BlkLogo {
		background-image: url("../images/decor-logo.png");
		background-repeat: no-repeat;
		background-size: auto 90%;
		background-position-x: center;
		background-color: #F5E6C1;
		opacity: .8;
		height: 7em;
		box-sizing: border-box;
	}
	.BlkOne {
		background-color: #F5E6C1;
		font-size: 3.5em;
		color: #25333D;
		display: inline-block;
		width: 50%;
		height: 15vw;
		box-sizing: border-box;
		margin: 0px 0px 0px -4px;
		padding: .6vw 0vw 2vw 3vw;
	}
	* a {
		text-decoration: none;
	}
	.BlkOvr:hover *{
		background-color: #303030;
		color: red;

	}
	.Blk2Ovr:hover .BlkFour{
		background-color: red;

	}
	.Blk2Ovr:hover .BlkFour .BlkFourText {
		color: white;
	}
	.BlkOne a:hover img {
		text-decoration: none;
		mix-blend-mode: multiply;
		border: 10px orange solid;
		transition: all .5s;
		box-sizing: border-box;
		width: 22%;
	}
	.BlkOneImg {
		width: 20%;
		height: auto;
		margin: 0vw 1vw .6vw 0vw;
		border-radius: .7vw;
		box-sizing: border-box;
		box-shadow: 0px 0px 6px 0px black;
		transition: all .5s;
		vertical-align: top;
		max-height: 15vh;
		
		object-fit: cover;
	}
	.BlkTwo {
		background-color: black;
		height: 1em;
	}
	.BlkThree {
		background-color: #6F8E81;
		width: 100%;
		box-sizing: border-box;
		margin: 0px;
		padding: 0px;
	}
	.BlkThree a .tiles {
		text-decoration: none;
		border: 0px orange solid;
		transition: all .5s;
	}
	.BlkThree a:hover .tiles {
		text-decoration: none;
		border: 10px orange solid;
		transition: all .25s;
		box-sizing: border-box;
	}
	.BlkFour {
		background-color: #4D565F;
		width: 10vw;
		height: 15vw;
		box-sizing: border-box;
		margin: 0px;
		padding: .6vw;
		display: inline-block;
		vertical-align: top;
	}
	.BlkFourText {
		width: 14vw;
		height: 14vw;
		font-size: 4vw;
		transform: rotate(-90deg);
		color: #6F8E81;
		text-align: right;
	}
	.BlkFourTextSign {
		font-size: 7.5vw;
		color: #4fab21;
		position: relative;
		top: -9vw;
		float: left;
		left: 4.3vw;
	}

	.tiles {
		background-color: #D8D8CE;
		width: calc(30% - 3.5vw);
		height: 19vw;
		display: inline-block;
		box-sizing: border-box;
		margin: 4vw 1vw;
		padding: 2em;
		vertical-align: top;
		border-radius: .7em;
		box-shadow: 0px 0px 12px 0px black;
	}
	.tiles h2 {
		opacity: .7;
		margin: 0px;
		color: #000000;
		font-size: 4vw;
		letter-spacing: 2px;
	}
	.tiles p {
		opacity: .7;
		margin: 0px 50% 0px 0px;
		color: #000000;
		font-size: 1vw;
		line-height: 1.5vw;
	}
	.buttonOne {
		background-image: url("../images/buttonOne.png");
		background-repeat: no-repeat;
		background-size: auto 115%;
		background-position-x: right;
		background-position-y: -.6vw;
	}
	.buttonTwo {
		background-image: url("../images/buttonTwo.png");
		background-repeat: no-repeat;
		background-size: auto 115%;
		background-position-x: right;
		background-position-y: -.6vw;
	}
	.Blk2 {
		display: inline-block;
		width: 34%;
		box-sizing: border-box;
		font-size: 5.1vw;
		vertical-align: top;
	}
	.BlkFive {
		background-color: #F79447;
		width: 100%;
		box-sizing: border-box;
		color: #673012;
		margin: 0px 0px 0px -4px;
		padding: 1.1vw 0vw 0.5vw 2vw;
	}

	.BlkFive img {
		width: 6vw;
		height: auto;
		margin: -14px 1vw;
		padding: 0px;
	}
	.BlkSix {
		background-color: #6F8F82;
		width: 100%;
		box-sizing: border-box;
		vertical-align: top;
		color: #A6C8B8;
		margin: 0px 0px 0px -4px;
		padding: 1.4vw 0vw 1vw 2vw;
	}

	.BlkSix img {
		width: 6vw;
		height: auto;
		margin: -14px 0vw;
		padding: 0px;
	}
	.BlkSeven {
		background-color: #4D565F;
	   width: 6.05vw;
		height: 15vw;
		box-sizing: border-box;
		margin: 0px 0px 0px -9px;
		padding: 1vw 1vw 1vw 1.5vw;
		display: inline-block;
		vertical-align: top;
	}
	.BlkSevenText {
		width: 14vw;
		height: 14vw;
		font-size: 3vw;
		transform: rotate(-90deg);
		color: #6F8E81;
		text-align: right;
	}
	.LongBlk {
		width: 100%;
		height: 15vw;
		overflow: hidden;
	}
}




@media only screen and (orientation: portrait )  {
	body {
		background-image: url("../images/pattern.jpg");
		background-repeat: repeat;
		margin: 0 auto;
		box-sizing: border-box;
	}
	.devilGrl{
		background-image: url(../images/devilgirl.jpg);
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 100%;
		height: auto;
		padding: 1vw 8vw;
		margin: 0px;
		box-sizing: border-box;
		border-bottom: 1vh solid black;
		display: inline-block;
		font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
		font-size: 2.2vh;
		font-weight: 400;
		font-style: normal;
		line-height: 2.4vh;
		color: azure;
		text-shadow: 0px 0px 7px black;
		text-align: center;
	}
	
	
	.slider{
		position: absolute;
		top: -8vh;
		transform: rotate(-65deg);
    	transform-origin: top center;
		right: 0vw;
		transition: top 2s;
	}
	
	.sliderSwingL{
		position: absolute;
		top: -4vh;
		right: 1vw;
		transform: rotate(15deg);
    	transform-origin: top center;
		transition-delay: 3s;
		transition: all 2s;
	}
	.sliderImg{
		width: auto;
		height: 15vh;
		
	}
	.Blk {
		mix-blend-mode: multiply;
		font-family: "veneer", sans-serif;
		font-weight: 400;
		font-style: normal;
		padding: 15px;
		box-sizing: border-box;
	}
	.BlkLogo {
		background-image: url("../images/decor-logo.png");
		background-repeat: no-repeat;
		background-size: auto 90%;
		background-position-x: center;
		background-color: #F5E6C1;
		opacity: .8;
		height: 7em;
		box-sizing: border-box;
	}
	.BlkOne {
		background-color: #F5E6C1;
		font-size: 5vh;
		color: #25333D;
		display: inline-block;
		width: 70%;
		box-sizing: border-box;
		margin: 0px 0px 0px -4px;
		padding: 1.6vh 0vw 5vh 3vw;
		float: right;
	}
	* a {
		text-decoration: none;
	}
	.BlkOvr:hover *{
		background-color: #303030;
		color: red;

	}
	.Blk2Ovr:hover .BlkFour{
		background-color: red;

	}
	
	.BlkOneImg {
		width: 43%;
		height: auto;
		margin: 0vh 2vw 1.6vh 0vw;
		border-radius: 0.7vw;
		box-sizing: border-box;
		box-shadow: 0px 0px 6px 0px black;
		transition: all .5s;
		vertical-align: top;
	}
	.BlkTwo {
		background-color: black;
		height: 1em;
	}
	.BlkThree {
		background-color: #6F8E81;
		width: 100%;
		box-sizing: border-box;
		margin: 0px;
		padding: 0px;
    text-align: center;
	}
	.BlkThree a .tiles {
		text-decoration: none;
		border: 0px orange solid;
		transition: all .5s;
	}
	.BlkFour {
		background-color: #4D565F;
		width: 30vw;
		height: 22vh;
		box-sizing: border-box;
		margin: 0px;
		padding: .6vw;
		display: inline-block;
		vertical-align: top;
	}
	.BlkFourText {
		width: 20vh;
		height: 24vw;
		font-size: 6vh;
		transform: rotate(-90deg);
		color: #6F8E81;
		text-align: right;
		/* line-height: 6vh; */
		padding: 0vh 0vh 0vh 0vh;
		margin: 0vh;
		/* background-color: aqua; */
		transform-origin: 63% 75%;
	}
	.BlkFourTextSign {
		font-size: 10.5vh;
		color: #4fab21;
		position: relative;
		top: -3vw;
		float: left;
		left: 17.3vw;
	}

	.tiles {
		background-color: #D8D8CE;
		width: calc(75% - 3.5vw);
		height: 49vw;
		display: inline-block;
		box-sizing: border-box;
		margin: 4vw 1vw;
		padding: 2em;
		vertical-align: top;
		border-radius: 0.7em;
		box-shadow: 0px 0px 12px 0px black;
	}
	.tiles h2 {
		opacity: .7;
		margin: 0px 7vw 0px 0px;
		color: #000000;
		font-size: 5vh;
		letter-spacing: 2px;
	}
	.tiles p {
		opacity: .7;
		margin: 0px 44% 0px 0px;
		color: #000000;
		font-size: 5vw;
		line-height: 5vw;
		text-align: left;
	}
	.buttonOne {
		background-image: url("../images/buttonOne.png");
		background-repeat: no-repeat;
		background-size: auto 115%;
		background-position-x: right;
		background-position-y: -.6vw;
	}
	.buttonTwo {
		background-image: url("../images/buttonTwo.png");
		background-repeat: no-repeat;
		background-size: auto 115%;
		background-position-x: right;
		background-position-y: -.6vw;
	}
	.Blk2 {
		display: inline-block;
		width: 30%;
		box-sizing: border-box;
		font-size: 9.1vw;
		vertical-align: top;
	    margin: 0px 0px 0px 4px;
	}
	.BlkFive {
		background-color: #F79447;
		width: 100%;
		font-size: 5.5vh;
		line-height: 5.7vh;
		box-sizing: border-box;
		color: #673012;
		margin: 0px 0px 0px -4px;
		padding: 1.1vw 0vw 0.5vw 2vw;
	}

	.BlkFive img {
		width: 9vw;
		height: auto;
		margin: -11vh 1vw;
		padding: 0px;
		float: right;
	}
	.BlkSix {
		background-color: #6F8F82;
		width: 100%;
		box-sizing: border-box;
		vertical-align: top;
		color: #A6C8B8;
		margin: 0px 0px 0px -4px;
		padding: 1.4vw 0vw 1vw 2vw;
	}

	.BlkSix img {
		width: 6vw;
		height: auto;
		margin: -14px 0vw;
		padding: 0px;
	}
	.BlkSeven {
		background-color: #4D565F;
		width: 70%;
		height: auto;
		box-sizing: border-box;
		margin: -4vh 0px;
		padding: 0.5vh 1vw;
		vertical-align: top;
		float: right;
	}
	.BlkSevenText {
		text-align: center;
		font-size: 3vh;
		color: #6F8E81;
		text-align: center;
	}
	.LongBlk {
		width: 100%;
		height: auto;
	}
}