bootstrap-practice.css

body{
	border:20px solid #3A4245;
	margin:0 auto;
}

header {
	background-image:url("images/laptop-and-person.jpg");
	background-size:cover;
	height:675px;
	margin-top: 0;
}

#des-box {
	height:160px;
	padding:30px;
}

nav {
	background-color:#8C92A1;
	padding-right:15px;
	padding-left:15px;
}
nav img {
	width:100px;
	padding-top:25px;
}

#owl-box {
	background-color:white;
	height:161px;
}
nav li {
	background-color:#8C92A1;
	list-style-type: none;
	padding:20px;
	margin:0;
}

nav li:hover {
	background-color:#ED98B1;

}

nav a:hover {
	color:white;
	text-decoration: none;
}

nav a {
	color:white;
	text-decoration: none;
}

#gray-box {
	background-color:#545D70;
}

#pink-box {
	background-color:#B56B81;
}

#aqua-box {
	background-color:#5FC9AA;
}

#des-box {
	background-color:#545D70;
}
footer {
	background-color:#545D70;
}

hr {
	text-align:center;
	width:90%;
}
p {
	color:white;
	font-size:16px;
	font-family: 'Crimson Text', serif;
}

.big-2-p {
	font-size:24px;
	color:black;
}

.big-p {
	font-size:18px;
}

#header-info {
	background-color:hsla(42, 98%, 80%, 0.56);
	height:600px;
	border-left:14px solid #3A4245;
	padding-left:50px;
	padding-right:50px;
}

#header-info h4{
	padding-top:75px;
}

#logo-bar {
	background-color:white;
	border-left:14px solid #3A4245;
	height:75px;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
}

#logo-bar h4 {
	font-size:14px;
	font-family: 'Roboto', sans-serif;
}

#header-info h1, #gray-box h1, #pink-box h1, #aqua-box h1, #white-box h1 {
	font-size:44px;
	font-family: 'Playfair Display', serif;
}

#header-info h1 {
	color:#B56B81;
}

#white-box h1, #gray-box h1 {
	color:#5FC9AA;
}

#pink-box h1, #aqua-box h1 {
	color:white;
}

#gray-box img{
	width:200px;
	height:175px;
	border:5px solid white;
}

#pink-box img {
	width:350px;
	margin-left:2%;
	border:5px solid white;
	padding:0;
	margin-top:20px;
}

#pink-box h1, #pink-box p {
	text-align:center;
}

#button{
	background-color:#545D70;
	border-radius:5px;
	color:#E9ED98;
	width:165px;
	margin-left:45px;
	margin-top:15px;

}

#header-info h4,#caption {
	color:white;
}

#aqua-box a {
	color:white;
}

#aqua-box a:hover {
	color:#E9ED98;
}

#aqua-box h4 a {
	color:#E9ED98
}

#pink-box a {
	color:#ED98B1;
}

#gray-box .green {
	color:#5FC9AA;
}

#gray-box a {
	color:#E9ED98;
}


#my-nav h4, #header-info h4, #gray-box h4, #pink-box h4, #aqua-box h4, #white-box h4 {
	font-size:14px;
	font-family: 'Roboto', sans-serif;
}

footer li {
	list-style-type: none;
	color:#E9ED98;
	float:left;
	width:30%;
}

footer {
	border-right:14px solid #3A4245;
	border-left:14px solid #3A4245;

}

.glyphicon {
	padding:10px;
}

#gray-box img {
		margin-top:25px;
		margin-bottom:25px;
	}

#gray-box, #pink-box, #aqua-box, #white-box, footer {
	padding:50px;
}

footer li {
	padding:5px;
}

.padding {
	padding-top:40px;
}

#gray-box h1, #gray-box p {
	padding-bottom:20px;
}

#gray-box img {
	margin-top:10px;
}

#green {
	color:#5FC9AA;
}
/*mobile styles*/
@media screen and (max-width:768px){
	#header-info {
		border-right:15px solid #3A4245;
	}

	#gray-box .padding, #aqua-box .padding{
	padding-top:10px;
	}

	#logo-bar {
		border-right:15px solid #3A4245;
	}

	footer ul {
		padding-bottom:20px;
	}

	#box-1, #box-2, #box-3, #box-4 {
		text-align:center;
	}

	#des-box {
		background-color:white;
	}

	#des-box p {
		color:black;
		text-align:center;
		padding-right:50px;
		padding-left:50px;
	}

	#button {
		margin:25px;
	}

	#gray-box h1, #gray-box p, #aqua-box h1, #aqua-box p {
		text-align: center;
	}

	#pink-box img {
		margin-left:20%;
		width:50%;
	}
}	

@media screen and (min-width:769px) and (max-width: 992px){
	#button {
		margin:25px;
	}


	#pink-box img {
		margin-left:25%;
	}

	#gray-box .padding, #aqua-box .padding{
	padding-top:10px;
	}

}

@media screen and (min-width:992px) and (max-width: 1225px){
	#pink-box img {
		margin-left:8%;
	}
}