/*-----------------------------------------------------------------------------------
-------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------
-- Home
-------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------*/
body{
    overflow: hidden;
}
div.s-s_homeImageBox {
    width: 50%;
    height: 100vh;
    position: relative;
    display: flex;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

div.s-s_homePfadi{
	float: left;
	clear: none;
}

div.s-s_homeHV{
	float: right;
	clear: none;
}

div.s-s_homeOverlay{
	width: 100%;
	height: 100vh;
	background-color: #8c8c8c;
	opacity: 0.8;
	position: absolute;
}

div.s-s_homeContent{
	text-align: center;
	width: 50%;
	min-height: 50px;
	transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	position: relative;
	animation: fadein 2s;
	-moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

a.s-s_homeButton{
	background-color: rgba(215, 215, 215, 0.9)
}

h1.s-s_homeTitle{
	color: #d7d7d7;
}

p.s-s_homeText{
	color: #d7d7d7;
	padding-bottom: 20px;
}

	/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	++ Mediaquerys
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
	@media screen and (max-width: 750px) {
		div.s-s_homeContent{
			width: 75%;
		}
	}
	@media screen and (max-width: 750px) and (max-height: 750px){
        div.s-s_homeImageBox {
            width: 100%;
            height: 50vh;
        }

		div.s-s_homePfadi{
			float: none;
			clear: none;
		}

		div.s-s_homeHV{
			float: none;
			clear: none;
		}
		div.s-s_homeContent{
			width: 85%;
			transform: translate(-50%, -60%);
			transform: translate(-50%, -60%);
			top: 25%;
			left: 50%;
		}
	}
    @media screen and (max-width: 500px) {
        div.s-s_homeImageBox {
            width: 100%;
            height: 50vh;
        }

        div.s-s_homePfadi {
            float: none;
            clear: none;
        }

        div.s-s_homeHV {
            float: none;
            clear: none;
        }

        div.s-s_homeContent {
            width: 85%;
            transform: translate(-50%, -60%);
            transform: translate(-50%, -60%);
            top: 25%;
            left: 50%;
        }
    }
    @media screen and (max-height: 500px) {
        a.s-s_homeButton {
            padding: 10px;
        }
    }


	/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	++ Animation
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

	@keyframes fadein {
		from {
			left: 60%;
		}
		to {
			left: 50%;
		}
	}
	@-moz-keyframes fadein { /* Firefox */
		from {
			left: 60%;
		}
		to {
			left: 50%;
		}
	}
	@-webkit-keyframes fadein { /* Safari and Chrome */
		from {
			left: 60%;
		}
		to {
			left: 50%;
		}
	}
	@-o-keyframes fadein { /* Opera */
		from {
			left: 60%;
		}
		to {
			left: 50%;
		}
	}