html {
   font-size: 62.5%;
}

@font-face {
   font-family: 'Tajawal';
   src: url(fonts/tajawal/tajawal-v1-latin-regular.woff);
}

.sv-container {
	position: absolute;
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
	font-family: 'Tajawal', 'Myriad Pro', Arial, sans-serif;
}

.sv-scroll,
.sv-panel {
	position: relative;
	width: 100%;
	height: 100%;
}

.sv-scroll {
	top: 0;
	left: 0;
}

.sv-panel{
	background: #fff;
	overflow: hidden;
}

.sv-deco{
	width: 200px;
	height: 200px;
	position: absolute;
	top: 0px;
	left: 50%;
	margin-left: -100px;
	background: #fa96b5;
	-webkit-transform: translateY(-50%) rotate(45deg);
	-moz-transform: translateY(-50%) rotate(45deg);
	-o-transform: translateY(-50%) rotate(45deg);
	-ms-transform: translateY(-50%) rotate(45deg);
	transform: translateY(-50%) rotate(45deg);
}

.box-logo{
	width: 2.5%;
	height: auto;
	position: absolute;
	margin: -40px -4.2% 0 0;
	padding: 0;
	top: 50%;
}

.box-cyan{
	background: rgb(0, 176, 239);
	right: 15.5%;
}

.box-magenta{
	background: rgb(255, 0, 125);
	right: 12%;
}

.box-yellow{
	background: rgb(255, 240, 0);
	right: 8.5%;
}

.box-black{
	background: rgb(0, 0, 0);
	right: 5%;
}

.box-logo:before{
	content: "";
	display: block;
	padding-top:60%;
}

.sv-panel h2 {
	color: rgb(39, 37, 37);
	position: absolute;
	font-size: 5.4rem;
	font-weight: 900;
	letter-spacing: 0.5rem;
	font-stretch: 200%;
	width: 100%;
	right: 4.5%;
	text-align: right;
	line-height: 0.8em;
	margin: -120px 0 0 0;
	padding: 0;
	top: 50%;
	-webkit-backface-visibility: hidden;
}

.sv-panel p {
	position: absolute;
	text-align: right;
	font-size: 4.6rem;
	line-height: 1.2em;
	color: rgb(39, 37, 37);
	letter-spacing: 0.25rem;
	z-index: 2;
	padding: 0;
	width: 100%;
	right: 5%;
	top: 55%;
	margin: 10px 0 0 0;
	-webkit-backface-visibility: hidden;
}
.sv-panel p.address{
	margin: -175px 0 0 0;
	color: rgb(255,255,255);
}

.sv-color,
.sv-deco{
	background: rgb(0, 176, 239);
}

@media screen and (min-width: 1281px) and (max-width: 1600px) {
	.sv-panel h2 {
		color: rgb(39, 37, 37);
		position: absolute;
		font-size: 4.4rem;
		font-weight: 900;
		letter-spacing: 0.5rem;
		width: 100%;
		right: 4.5%;
		text-align: right;
		line-height: 0.8em;
		margin: -120px 0 0 0;
		padding: 0;
		top: 50%;
		-webkit-backface-visibility: hidden;
	}

	.sv-panel p {
		position: absolute;
		text-align: right;
		font-size: 3.6rem;
		line-height: 1.2em;
		color: rgb(39, 37, 37);
		letter-spacing: 0.25rem;
		z-index: 2;
		padding: 0;
		width: 100%;
		right: 5%;
		top: 55%;
		margin: 10px 0 0 0;
		-webkit-backface-visibility: hidden;
	}
	.sv-panel p.address{
		margin: -125px 0 0 0;
		color: rgb(255,255,255);
	}
	.box-logo{
		width: 2.5%;
		height: auto;
		position: absolute;
		margin: -50px -4.2% 0 0;
		padding: 0;
		top: 50%;
	}

	.box-cyan{
		background: rgb(0, 176, 239);
		right: 15.5%;
	}

	.box-magenta{
		background: rgb(255, 0, 125);
		right: 12%;
	}

	.box-yellow{
		background: rgb(255, 240, 0);
		right: 8.5%;
	}

	.box-black{
		background: rgb(0, 0, 0);
		right: 5%;
	}

	.box-logo:before{
		content: "";
		display: block;
		padding-top:55%;
	}
}

@media screen and (min-width: 569px) and (max-width: 1023px) {
	.sv-panel h2 {
		font-size: 4.4rem;
		margin: -110px 0 0 0;
	}
	
	.sv-panel p {
		width: 90%;
		left: 5%;
		font-size: 3.6rem;
		margin-top: -10px;
	}
	
	.sv-panel p.address{
		font-size: 3.6rem;
		margin: -87px 0 0 0;
		color: rgb(255,255,255);
	}
	
	.box-logo{
		width: 5%;
		height: auto;
		position: absolute;
		margin: -50px -4.2% 0 0;
		padding: 0;
		top: 50%;
	}

	.box-cyan{
		background: rgb(0, 176, 239);
		right: 23%;
	}

	.box-magenta{
		background: rgb(255, 0, 125);
		right: 17%;
	}

	.box-yellow{
		background: rgb(255, 240, 0);
		right: 11%;
	}

	.box-black{
		background: rgb(0, 0, 0);
		right: 5%;
	}

	.box-logo:before{
		content: "";
		display: block;
		padding-top:40%;
	}

}

@media screen and (min-width: 579px) and (max-width: 1023px) and (orientation: landscape){
	.sv-container {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		font-family: 'Tajawal', 'Myriad Pro', Arial, sans-serif;
	}
	.sv-scroll{
		position: relative;
		width: 100%;
		height: 100%;
	}
	.sv-panel {
		position: relative;
		width: 50%;
		height: 100%;
		float: left;
	}
	.sv-panel h2 {
		font-size: 1.8rem;
		margin: -90px 0 0 0;
	}
	
	.sv-panel p {
		width: 90%;
		left: 5%;
		font-size: 1.6rem;
		margin-top: -30px;
	}
	
	.sv-panel p.address{
		font-size: 1.4rem;
		margin: -87px 0 0 0;
		color: rgb(255,255,255);
	}
	
	.sv-container > a {
		font-size: 13px;
	}
	
	.box-logo{
		width: 7%;
		height: auto;
		position: absolute;
		margin: -60px -4.2% 0 0;
		padding: 0;
		top: 50%;
	}

	.box-cyan{
		background: rgb(0, 176, 239);
		right: 35%;
	}

	.box-magenta{
		background: rgb(255, 0, 125);
		right: 25%;
	}

	.box-yellow{
		background: rgb(255, 240, 0);
		right: 15%;
	}

	.box-black{
		background: rgb(0, 0, 0);
		right: 5%;
	}

	.box-logo:before{
		content: "";
		display: block;
		padding-top:15%;
	}

}

@media screen and (min-width: 320px) and (max-width: 480px){
	.sv-container {
		position: absolute;
		width: 100%;
		height: 50%;
		top: 0;
		left: 0;
		font-family: 'Tajawal', 'Myriad Pro', Arial, sans-serif;
	}
	.sv-scroll{
		position: relative;
		width: 100%;
		height: 100%;
	}
	.sv-panel {
		position: relative;
		width: 100%;
		height: 100%;
		float: left;
	}
	.sv-panel h2 {
		font-size: 1.8rem;
		margin: -50px 0 0 0;
	}
	
	.sv-panel p {
		width: 90%;
		left: 5%;
		font-size: 1.6rem;
		margin-top: 0px;
	}
	
	.sv-panel p.address{
		font-size: 1.4rem;
		margin: -50px 0 0 0;
		color: rgb(255,255,255);
	}
	
	.sv-container > a {
		font-size: 13px;
	}
	
	.box-logo{
		width: 5%;
		height: auto;
		position: absolute;
		margin: -20px -4.2% 0 0;
		padding: 0;
		top: 50%;
	}

	.box-cyan{
		background: rgb(0, 176, 239);
		right: 24.5%;
	}

	.box-magenta{
		background: rgb(255, 0, 125);
		right: 18%;
	}

	.box-yellow{
		background: rgb(255, 240, 0);
		right: 11.5%;
	}

	.box-black{
		background: rgb(0, 0, 0);
		right: 5%;
	}

	.box-logo:before{
		content: "";
		display: block;
		padding-top:6%;
	}

}

@media screen and (min-width: 320px) and (max-width: 568px) and (orientation: landscape){
	.sv-container {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		font-family: 'Tajawal', 'Myriad Pro', Arial, sans-serif;
	}
	.sv-scroll{
		position: relative;
		width: 100%;
		height: 100%;
	}
	.sv-panel {
		position: relative;
		width: 50%;
		height: 100%;
		float: left;
	}
	.sv-panel h2 {
		font-size: 1.8rem;
		margin: -90px 0 0 0;
	}
	
	.sv-panel p {
		width: 90%;
		left: 5%;
		font-size: 1.6rem;
		margin-top: -30px;
	}
	
	.sv-panel p.address{
		font-size: 1.4rem;
		margin: -87px 0 0 0;
		color: rgb(255,255,255);
	}
	
	.sv-container > a {
		font-size: 13px;
	}
	
	.box-logo{
		width: 7%;
		height: auto;
		position: absolute;
		margin: -60px -4.2% 0 0;
		padding: 0;
		top: 50%;
	}

	.box-cyan{
		background: rgb(0, 176, 239);
		right: 35%;
	}

	.box-magenta{
		background: rgb(255, 0, 125);
		right: 25%;
	}

	.box-yellow{
		background: rgb(255, 240, 0);
		right: 15%;
	}

	.box-black{
		background: rgb(0, 0, 0);
		right: 5%;
	}

	.box-logo:before{
		content: "";
		display: block;
		padding-top:15%;
	}

}

@media screen and (max-width: 360px) {
	.sv-panel h2 {
		font-size: 1.8rem;
		margin: -60px 0 0 0;
	}
	
	.sv-panel p {
		width: 90%;
		left: 5%;
		font-size: 1.6rem;
		margin-top: 0;
	}
	.sv-panel p.address{
		margin: -55px 0 0 0;
		color: rgb(255,255,255);
	}
	.box-logo{
		width: 5%;
		height: auto;
		position: absolute;
		margin: -35px -4.2% 0 0;
		padding: 0;
		top: 52.5%;
	}

	.box-cyan{
		background: rgb(0, 176, 239);
		right: 27.5%;
	}

	.box-magenta{
		background: rgb(255, 0, 125);
		right: 20%;
	}

	.box-yellow{
		background: rgb(255, 240, 0);
		right: 12.5%;
	}

	.box-black{
		background: rgb(0, 0, 0);
		right: 5%;
	}

	.box-logo:before{
		content: "";
		display: block;
		padding-top:1%;
	}
}