body{
	margin: 0;
	padding: 0;
	font-family: 'Raleway';
}

nav{
	position: fixed;
	background-color: #000;
	top: 0;
	left: 0;
	width: 100%;
	height: 12vh;
	padding: 33px 100px;
	box-sizing: border-box;
	transition: .3s;
	text-align: center;
}

nav ul{
	list-style: none;
	float: right;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
}

nav ul li{
	list-style: none;
}

nav ul li a {
	color: #fff;
	padding: 12px 20px;
	margin: 10px;
	font-size: 25px;
	text-decoration: none;
	text-transform: uppercase;
	transition: .3s;
}

nav ul li a:focus{
	outline: none;
}

nav ul li a:hover{
	background-color: #47a5e8;
	border-radius: 6px;
}

section.quote{
	width: 100%;
	height: 100vh;
	color: white;
	background-image: url(bg.png);
	background-size: cover;
	background-position: center;
	text-align: center;
}

section.quote h1{
	font-size: 7vw;
	padding-top: 35vh;
	padding-bottom: 1%;
	margin: 0;
}

section.sec1{
	width: 100%;
	height: 100vh;
	color: black;
	background-color: #ffd600;
	background-size: cover;
	background-position: center;
	text-align: center;
}

section.sec1 h1{
	font-size: 7vw;
	padding-top: 35vh;
	padding-bottom: 1%;
	margin: 0;
}

section.sec1 p{
	font-size: 1.75vw;
	width: 75%;
	padding: 0px 12%;
}

section.software{
	width: 100%;
	height: 100vh;
	color: white;
	background-color: #277c9c;
	background-size: cover;
	background-position: center;
	text-align: center;
}

section.software h1{
	font-size: 6em;
	padding-top: 35vh;
	margin: 0 0 1.5vh;
}

section.software p{
	font-size: 2em;
	margin: 0;
}

section.software h2 a{
	color: #5cf6db;
	text-decoration: underline;
	font-size: 1.5em;
}

section.contact{
	width: 100%;
	height: 100vh;
	color: black;
	background-color: #ffc7d1;
	background-size: cover;
	background-position: center;
	text-align: center;
}

section.contact h1{
	font-size: 100px;
	padding-top: 35vh;
	margin: 0;
}

section.contact ul{
	list-style-position: inside;
	font-size: 45px;
	text-align: left;
	padding-left: 40%;
	transform: translateY(-20%);
}

section.contact ul li a{
	color: black;
	text-decoration: underline;
}

section.cright{
	width: 100%;
	height: 6vh;
	color: white;
	background-color: #fff;
	text-align: right;
	margin: 0 auto;
}

section.cright h1{
	font-size: 2vh;
	color: black;
	padding-right: 2%;
	padding-top: .7%;
}

#title{
	margin-right: 10vw;
}

#title:hover{
	background-color: transparent;
}

/* Landscape 1 */
@media (min-width: 930px) and (max-width: 1116px) and (max-height: 880px){
	#title{
		line-height: 0;
		font-size: 1em;
		color: #000;
	}

	#title::after{
		content: "Speed and Quality Software";
		color: #fff;
		font-size: 1.3em;
		line-height: initial;
		display: block;
		transform: translate(-2vw, -7vh);
	}

	section.sec1 h1{
		padding-top: 3em;
	}

	section.sec1 p{
		font-size: 4vh;
	}
}

/* Landscape 2 */
@media (min-width: 1116px) and (max-width: 1393px) and (max-height: 880px){
	#title{
		line-height: 0;
		color: #000;
	}

	#title::after{
		content: "Speed and Quality Software";
		color: #fff;
		font-size: 1em;
		line-height: initial;
		display: block;
		transform: translate(-2vw, -6vh);
	}

	section.sec1 h1{
		padding-top: 3em;
	}

	section.sec1 p{
		font-size: 4vh;
	}
}

/* Landscape 3 */
@media (min-width: 1000px) and (max-width: 1409px) and (min-height: 880px){
	#title{
		line-height: 0;
		color: #000;
	}

	#title::after{
		content: "SAQS - Speed and Quality Software";
		color: #fff;
		font-size: 1em;
		line-height: initial;
		display: block;
		transform: translate(-2vw, -4vh);
	}

	section.quote h1{
		padding-top: 41vh;
	}

	section.sec1 p{
		font-size: 3vh;
	}
}

/* Portrait 1 */
@media (min-width: 700px) and (max-width: 1000px) and (min-height: 900px) and (max-height: 1200px){
	nav{
		padding: 40px 20px;
	}

	nav ul li a{
		font-size: 2vh;
		margin: 0;
	}

	#title{
		line-height: 0;
		color: #000;
	}

	#title::after{
		content: "Speed and Quality Software";
		color: #fff;
		font-size: 3vw;
		line-height: initial;
		display: block;
		transform: translate(-2vw, -4vh);
	}

	section.sec1 p{
		font-size: 2.9vh;
	}
}

/* Portrait 2 */
@media (min-width: 1000px) and (max-width: 1100px) and (min-height: 1200px) and (max-height: 1500px){
	nav{
		padding: 33px 50px;
		padding-top: 50px; 
	}

	nav ul li a{
		font-size: 2vh;
	}

	#title::after{
		font-size: 2.3vh;
		transform: translate(-0.5em, -2em);
	}

	section.quote h1{
		padding-top: 43vh;
	}
}

/* Portrait 3 */
@media (min-width: 1100px) and (max-width: 1200px) and (min-height: 1200px){
	nav{
		padding: 33px 50px;
		padding-top: 50px; 
	}

	nav ul li a{
		font-size: 3vh;
	}

	#title::after{
		font-size: 2vh;
	}
}


/* Normal phone */
@media screen and (max-width: 480px) {
	nav{
		height: 10vh;
		padding: 2vh 5vh;
	}

	nav ul li a {
		color: #000;
		padding: 1vh;
		margin: 2vw;
		font-size: 2vw;
		text-decoration: none;
		text-transform: uppercase;
	}

	nav ul li a:focus{
		outline: none;
	}

	nav ul li a:hover{
		background-color: transparent;
		border-radius: 0;
	}

	#title{
  		line-height: 0;
	}
	#title::after{
		content: "SAQS - Speed and Quality Software";
		color: #fff;
		font-size: 3.04vw;
		line-height: initial;
		display: block;
		transform: translate(75%, -100%);
	}

	section.quote{
		height: 53vh;
	}

	section.quote h1{
		padding-top: 26vh;
	}

	section.sec1{
		height: 45vh;
	}

	section.sec1 h1{
		font-size: 10vw;
		padding-top: 14vh;
	}

	section.sec1 p{
		font-size: 3.15vw;
		width: 75%;
		padding: 0px 12%;
	}

	section.software{
		height: 46vh;
	}

	section.software h1{
		font-size: 10vw;
		padding-top: 14vh;
	}

	section.software p{
		font-size: 2vh;
		padding: 0px 12%;
	}

	section.software h2{
		font-size: 1.5vh;
	}

	section.contact{
		width: 100%;
		height: 46vh;
	}

	section.contact h1{
		font-size: 12vw;
		padding-top: 10vh;
		margin: 0;
	}

	section.contact ul{
		list-style-position: inside;
		font-size: 7vw;
		text-align: left;
		padding-left: 30%;
	}

	section.cright{
		height: 3vh;
	}

	section.cright h1{
		padding-top: .3%;
	}
}

/* XS phone */
@media screen and (max-height: 570px) and (max-width: 480px){
	#title::after{
		transform: translate(75%, -140%);
	}
}

/* Small phone */
@media (min-height: 570px) and (max-height: 670px) and (max-width: 500px){
	#title::after{
		transform: translate(70%, -120%);
	}
}

/* S8 */
@media (max-width: 480px) and (min-height: 670px){
	#title::after{
		font-size: 2.7vw;
		transform: translate(8em, -5em);
	}
}

/* Big phone */
@media (max-width: 416px) and (min-height: 750px){
	#title::after{
		font-size: 3.5vw;
		transform: translate(7.5em, -115%);
	}

	section.contact h1{
		padding-top: 12vh;
	}
}