/* @charset "utf-8"; */
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: inherit;
}
body {
	box-sizing: border-box;
	font: 17px 'Alata', sans-serif;
	background: #f5f5f5;
	color: #555;
}
ul {
	list-style-type: none;
}
a {
	text-decoration: none;
}

h1, h2, h3 {
	font: 30px 'Ibarra Real Nova', serif;
}
/*styling header */
nav {
	background: #fff;
	display: flex;
	justify-content:space-between;
	align-items: center;
	height: 60px;
	padding: 0 15px;
}
nav ul {
	display: flex;
}
nav ul li {
	padding: 0 15px;
	border-right: 1px solid #c0c4c1;
}
nav ul li:last-child {
	border-right: none;
}
nav ul li a, nav .logo-holder a {
	color: #34495e;
	text-align: center;
	font-size: 20px;
}
nav ul li a:hover{
	color: #1abc9c;
}
/*styling container */
.container {
	margin: 50px auto 10px auto;
	max-width: 1000px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
/*the boxes within the container */
.item {
	width: 30%;
	margin-bottom: 4%;
	position: relative;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 20px #c2c3c3;
	border: 1 px solid #10a0b6;
	padding: 20px 20px 30px 20px;
}
.container .main-section .article1 {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.container .main-section .article2 {
    width: 400px;
}
.container .main-section .article3 {
    width: 400px;
}
.container .main-section {
    width: 1280px;
}





/*making the boxes responsive */
@media screen and (max-width: 600px) {
	.container {
	justify-content: center;
	}
	.item {
	width: 80%;
	min-width: 320px;
	}	
}

/* styling the box content */
h1 {
	padding: 0 0 15px 25 px;
	font: 35 px 'Lora', serif;
}
h1 a {
	color: #10a0b6;
}
.text-holder {
	border-bottom: 1px solid #e1e1e1;
	padding-bottom: 10px;
}
/* rows and links */
.links {
	padding: 15px 0 0;
}
.rows {
	display: flex;
	justify-content: space-between;
	padding: 0 0 10px;
}
.rows h3 {
	font: 16px verdana, sans-serif;
	font-weight: 300;
}
.rows a {
	color: #10a0b6;
}
.rows a:hover {
	text-decoration: underline;
}
.rows a::after {
	/*content: '>>';*/
	padding: 0 0 3px;
}
.frame001 {
			border: 2px solid black;
			background-color: lightgray;
			border-radius: 2px;
			text-align: center;
			padding: 5px;
}
