/* TRANSLATION INTO ENGLISH */


/* COLOR SCHEME & GENERAL STYLING*/

/* white */
.color1{
	background-color: #ffffff;
}
/* blue */
.color2{
	background-color: #9dd6d6;
}
/* tomato */
.color3{
	background-color: #ff6347;
}
/* rose */
.color4{
	background-color: #fff0ee;
} 
/* wine */
.color5{
	background-color: #e75a40;
}

:root {
    --color1: #ffffff;
	--color2: #9dd6d6;
	--color3: #ff6347;
	--color4: #fff0ee;
	--color5: #e75a40;
	
	font-size: 16px;
}

@media all and (max-width: 400px){
	:root{
		font-size: 12px;
	}
}

*{
	font-family: questrial, sans-serif;
	letter-spacing: 1;
	line-height: 1.8;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

ul{
	list-style-type: none;
}

h5{
	font-size: .7rem;
	letter-spacing: 5px;
}

a{
	text-decoration: none;
	color: #000000;
}

a.contact {
	padding: .25rem 0 .30rem 0;

	background: linear-gradient(var(--color3), var(--color3));
	background-position: 0% 100%;
	background-repeat: repeat-x;
	background-size: 100% 25%;
 	transition: background-size .3s;
}

a.contact:hover {
  background-size: 100% 100%;
}









/* NAVIGATION */

nav{
	position: fixed;
	width: 100%;
	height: 75px;
	display: flex;
	border-bottom: 4px solid var(--color1);	
}
nav a{
	flex: 20%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	padding: 7px;
}
nav a:hover{
	background-color: var(--color2);
}

/* tablet */
@media all and (max-width: 1000px){
	nav{
		background: linear-gradient(var(--color3), var(--color3));
		background-position: 0% 100%;
		background-repeat: repeat-x;
		background-size: 100% 50%;
	}
}
@media all and (max-width: 800px){
	nav{
		flex-wrap: wrap;
	}
	nav a{
		background-color: #ff6347;
	}
	nav a:nth-child(1){
		flex: 100%;
		background-color: #ffffff;
	}
}
	
/* mobile */

@media all and (max-width: 400px){
	nav a{
		flex: 50%;
	}
}


/* MAIN LAYOUT */

/* full display */
body{
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
.wrapper{
	display: flex;
}
.sidebar{
	flex: 0 0 20%;
}
.main{
	flex: 0 0 800px;
	padding: 100px 2rem 5rem 2rem;
}
.overflow{
	flex: 5 5 20%;
}

/* tablet */
@media all and (max-width: 1000px){
	.sidebar{
		display: none;
	}
	.main{
		flex: 1 1 100%;
	}
	.overflow{
		display: none;
	}
}

/* mobile */
@media all and (max-width: 600px){
	.main{
		padding: 100px 1rem 6rem 1rem;
	}
}



/* INTERIOR LAYOUT */

/* full display */
.text{
	padding: 1rem 2rem 2rem 2rem;
}
.text h2, .text h3, .text p, .text li{
	padding-bottom: 1rem;
}
.sub, .sub-contact, .sub-small{
	flex: 1 1 100%;
	display: flex;	
	justify-content: space-between;
}
.sub-half{
	flex: 1 1 45%;
	display: flex; 
	flex-direction: column;
	justify-content: space-between;
}
.sub-quarter{
	flex: 1 1 20%;
}
.buffer{
	flex: 1 5 1rem;
}
.center{
	display: flex;
	align-items: center;
	justify-content: center;
}

/* tablet */
@media all and (max-width: 800px){
	.sub, .sub-small {
		flex-direction: column;
	}
	.sub-half, .sub-quarter{
		flex: auto;
	}
}

/* mobile */
@media all and (max-width: 600px){
	.sub-contact, .sub-small {
		flex-direction: column;
	}
	
	.text{
		padding: 1rem;
	}
	.qualifications br{
		display: none;
	}
}



/* CONTENT */

/* icon images */
.icon{
	height: 5em;
	width: 5em;
	margin: 1em;
}

/* contact */
.inline>*{
	display: inline;
}
.envelope-image{
	width: 12em;
	height: 12em;
	padding: 2em;
}

/* quality guarantee */
.qualifications p{
	display: flex;
	align-items: center;
	font-style: italic;
}

/* pricing */
.quote:hover{
	background-color: var(--color3);
}

/* process arrow indicators */
.arrow{
  margin: 2rem 0 0 -1px;
  
  width: 0; 
  height: 0; 
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  
  border-left: 1rem solid var(--color4);
  
}
@media all and (max-width: 800px){
	.arrow{
		margin: -1px 0 0 4rem;
  		
  		width: 0; 
 		height: 0; 
 		border-left: 1rem solid transparent;
  		border-right: 1rem solid transparent;
  
  		border-top: 1rem solid var(--color4);
		}
}

/* why freelance checklist */
.checklist{
	display: flex;
	align-items: center;
}

/* collaborate elsewhere on the web icons */
.elsewhere{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
@media all and (max-width: 800px){
	.elsewhere a{
		flex: 50%;
		text-align: center;
	}
}

/* profile photo */
.profile{
	margin: 1rem 0 2rem 0;
	flex: 1 0 40%;
	background: url("images/samantha.jpg");
	background-size: cover;
	background-position: center center;
}


/* FOOTER */

footer{
	background: var(--color4);
}
footer *{
	color: var(--color5);
	text-transform: uppercase;
	line-height: 3;
	font-size: .7rem;
	letter-spacing: 5px; 
}
footer div{
	padding: 5rem 1rem 6rem 1rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
footer h5{
	display: inline;
	text-align: center;
}