/* RESET */
*{margin:0;padding:0;box-sizing:border-box;}

/* FLEXBOX LAYOUT */
html{
	margin-top:30px;
	background:#fffeeb; /* #dbfed4 */
}

body{
	font-family:raleway;
}

header{
	display:flex;
	flex-direction:row;
	width:100%;
	margin:0 auto;
	align-items:center;
	justify-content:space-around;
	/*padding:10px 0 10px 60px;*/
	padding:0 0 1% 1%;
}

.logo{
	flex-basis:60%;
}

.logo img{
	width:300px;
}

/* LINKS */
nav{
	flex-basis:16%;
	margin:0;
	padding:0;
}

nav a, nav a:visited{
	color:#777;
	text-decoration:none;
	margin-left:18px;
}

nav a:hover{
	color:#28ba9d; /* #f8b450 */
}
/* END LINKS */

/** WORK **/
.bigbox{
	text-align:center;
	margin:auto;
}

h3{
	font-weight: 400;
	padding:0 0 20px 0;
}

.box{
	position:relative;
	display:inline-block;
	overflow:hidden;
	max-width:100%;
	height:auto;
	margin:6px;
}

.box img{
	max-width:100%;
	border:1px solid #28ba9d;
}

/** ABOUT **/
.aboutbox{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	width:100%;
	padding:20px 140px;
	align-items:center;
	justify-content:center;
}

.imagebox{
	width:50%;	
}

.imagebox img{
	width:90%;
	border-radius:8px;
}

.textbox{
	width:50%;
	padding:20px;
}

.button{
	width:140px;
	background:#28ba9d;
	padding:10px 8px;
	text-align:center;
	border-radius:10px;
}

.button:hover{
	background:#777;
}

.button a{
	color:#fff;
	text-decoration:none;
}

footer{
	width:100%;
	text-align:center;
	padding:18px;
}

.footertext{
	color:#777;
	font-size:14px;
}

.info{
	width:100%;
	clear:both;
	float:none;
	text-align:center;
	font-size:16px;
	color:#222;
	margin-bottom:10px;
	padding:0;
}

.info a{
	font-size:16px;
	color:#222;
	text-decoration: none;
}

.info a:hover{
	font-size:16px;
	color:#28ba9d;
	text-decoration: none;
}

.insta a{
	font-size:24px;
	color: transparent;
	background: -webkit-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	background: -o-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	background-clip: text;
	-webkit-background-clip: text;
}


.insta a:hover{
	font-size:24px !important;
	color: #222;
}

.fa-phone, .fa-envelope{
	font-size:16px;
	color:#28ba9d;
	margin-left:20px;
	padding:0;
}

.footertext{
	clear:both;
	float:none;
	text-align:center;
	font-size:12px;
	color:#888;
	margin:0;
	padding:0;
}

.bottomnav{
	display:none;

}

#navbar{
	transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

/* ABOUT */ /* ABOUT */ /* ABOUT */


/* CONTACT */ /* CONTACT */ /* CONTACT */

/* MEDIA QUERY */
@media all and (max-width:620px) {
	header{
		flex-direction:column;
		justify-content:center;
		flex-wrap:wrap;
	}

	.logo{
		justify-content:center;
	}

	header h3{
		margin:0;
		justify-content: center;
		padding-bottom:20px;
	}

	nav{
		display:none;
	}

	.aboutbox{
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	width:100%;
	padding:20px;
	align-items:center;
	justify-content:center;
	margin:auto;
	}

	.imagebox{ 
		order: 1; 
	}

	.textbox{ 
		order: 2; 
	}

	.imagebox{
	width:100%;
	margin:auto;	
	}

	.textbox{
	width:100%;
	padding:20px;
	}

	/* BOTTOMNAV */
	.bottomnav{
		position:fixed;
		bottom:0;
		width:100%;
		height:40px;
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		text-align:center;
		margin-top:18px;
	}

	.bottomnav a, .bottomnav a:visited{
		width:50%;
		line-height:40px;
		color:#fff;
		text-decoration:none;
		background:#28ba9d;
	} 

	.bottomnav a:hover{
		color:red;
	}

	footer{
		margin-bottom:90px;
	}
}

/*** MEDIA QUERY TABLET */
@media all and (min-width:768 and max-width:920px) {

	header{
		flex-direction:column;
		justify-content:center;
		flex-wrap:wrap;
	}

	.logo{
		justify-content:center;
	}

	header h3{
		margin:0;
		justify-content: center;
		padding-bottom:20px;
	}

	nav{
		display:none;
	}

	.bigbox{
	display:grid;
	grid-column:1 / span 4;
	text-align:center;
	margin:auto;
	}

	.bigbox img{
	grid-column:1 / span 4;
	border:1px solid #28ba9d;
	}

	.aboutbox{
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	width:100%;
	padding:20px;
	align-items:center;
	justify-content:center;
	margin:auto;
	}

	.imagebox{ 
		order: 1; 
	}

	.textbox{ 
		order: 2; 
	}

	.imagebox{
	width:100%;
	margin:auto;	
	}

	.textbox{
	width:100%;
	padding:20px;
	}

	/* BOTTOMNAV */
	.bottomnav{
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		text-align:center;
		margin-top:18px;
	}

	.bottomnav a, .bottomnav a:visited{
		width:50%;
		line-height:40px;
		color:#fff;
		text-decoration:none;
		background:#28ba9d;
	} 

	.bottomnav a:hover{
		color:red;
	}
}