a {
	text-decoration: none;
}

body {
	height: 100%;
	overflow: hidden;
	background-color: #000;
	width: 100%;
}


.logo {
	position: fixed;
	top: 30%;
	left: 50%;
	margin-left: -125px;
	z-index: 2;
}

.sx {
    background: url('../img/background-sx.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    width: 50%;
    height: 100%;
    min-height: 830px;
    float: left;

}

.sx:hover {
	-webkit-filter: brightness(80%);
    filter: brightness(80%);
}

.dx {
    background: url('../img/background-dx.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    width: 50%;
    height: 100%;
    min-height: 830px;
    float: right;    
}

.dx-content {
	position: fixed;
	top: 40%;
	right: 50px;
	z-index: 2;
}

.dx-content p {
	color: #fff;
	font-size: 35px;
	font-family: 'Montserrat', sans-serif;
}

.dx-content .btn {
	float: right;
	text-transform: uppercase;	
}

.dx:hover {
	-webkit-filter: brightness(80%);
    filter: brightness(80%);    
}

.dx-arrow {
	z-index: 3;
	position: fixed;
	top: 45%;
	left: 60%;
	visibility: hidden;
}

.dx-link:hover + .dx-arrow {
    visibility: visible;
}

.sx-content:hover ~ .sx-link {
	opacity: 0.8;
}

.sx-content:hover ~ .sx-arrow {
	visibility: visible;
}

.dx-content:hover ~ .dx-link {
	opacity: 0.8;
}

.dx-content:hover ~ .dx-arrow {
	visibility: visible;
}


.sx-content {
	position: fixed;
	top: 40%;
	left: 50px;
	z-index: 2;
}

.sx-content p {
	color: #fff;
	font-size: 35px;
	font-family: 'Montserrat', sans-serif;
}

.sx-content .btn {
	float: left;
	text-transform: uppercase;	
}

.sx:hover {
	-webkit-filter: brightness(80%);
    filter: brightness(80%);    
}

.sx-arrow {
	z-index: 3;
	position: fixed;
	top: 45%;
	right: 60%;
	visibility: hidden;
}


.sx-link:hover + .sx-arrow{
    visibility:visible;
}

.copyright {
	z-index: 2;
	color: #fff;
	width: 600px;
	position: fixed;
	bottom: 10px;
	font-size: 11px;
	left: 50%;
	margin-left: -145px;
	font-family: 'Montserrat', sans-serif;
}
.copyright a {
	color: #fff;
	font-family: 'Montserrat', sans-serif;
}
.logo-top {
	display: none;
	width: 100%;
	background-color: #fff;
	padding: 20px;
	text-align: center;
}

@media screen and (max-width: 1150px) {
	.sx-content p, .dx-content p {
		font-size: 20px;
	}
	.sx-arrow, .dx-arrow {
		display: none;
	}
}

@media screen and (max-width: 890px) {
	body {
		overflow: visible;
	}
	.logo-top {
		display: block;
	}
	.sx, .dx {
		width: 100%;
	    height: 400px;
	    min-height: initial;
	    float: none;
	    position: relative;
	}
	.logo {
		display: none;
	}
	.sx-content .btn, .dx-content .btn {
		float: none;		
	}
	.sx-content {
		top: 250px;
	}
	.dx-content {
		top: 650px;
	}
	.sx-content, .dx-content {
		text-align: center;
		left: 50%;
		margin-left: -200px;
		width: 400px;
		position: absolute;
	}
	.sx-content p, .dx-content p {
		font-size: 30px;
	}
	.copyright {
		width: 100%;
		background-color: #fff;
		color: #000;
		position: initial;
		margin-left: 0px;
		text-align: center;
		padding: 20px;
	}
	.copyright a {
		color: #000; 
	}
}

@media screen and (max-width: 450px) {	
	.sx-content, .dx-content {
		margin-left: -150px;
		width: 300px;
	}
	.sx-content p, .dx-content p {
		font-size: 24px;
	}
	.sx-content {
		top: 150px;
	}
	.dx-content {
		top: 360px;
	}
	.sx, .dx {
		height: 200px;
	}
}