html {
	overflow-y: scroll;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;  
    font-size: 14px;
    font-weight: bold;
    color: #000;
    background-color: #FFF;
    margin: 0;
}

a:link,
a:active,
a:visited {
    color: #000;
    text-decoration: none;
}
  
a:hover {
    color: #157493;
	transition: .1s linear;
}

a {
   outline: 0;
}

img {
    border: 0;
}

.dropShadow {
	-moz-box-shadow: 2px 2px 4px #444;
	-webkit-box-shadow: 2px 2px 4px #444;
	box-shadow: 2px 2px 4px #444;
}

.navbar {
    height: 240px;
    padding: 90px 40px 0 40px;
    margin-bottom: 28px;
    background-color: #F5F5F5 !important;
    background-image: url(../images/background.png);
    align-items: baseline !important;
}

.navbar-toggler {
    padding: 0;
    border: 0;
}

.navbar-toggler-icon {
    background-color: #FFF;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(22, 114, 147)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.navbar-brand {
    padding: 0;
    margin: 0 40px 0 140px;
}

.nav-link:hover {
    color: #157493 !important;
	transition: .1s linear;
}

.nav-link:focus {
  color: rgba(0, 0, 0, 0.5) !important;
}

#title {
    font-weight: bold;
    color: #157493;
/*    margin: 30px 0 0 40px;*/
    text-align: right;
}

#title div:nth-of-type(1) {
    font-size: 32px;
    line-height: 32px;
}

#title div:nth-of-type(2) {
    font-size: 16px;
    line-height: 16px;
    color: #333;
	padding-right: 2px;
}

#solutionQuote {
    position: absolute;
/*    left: 558px;*/
    left: 768px;
    top: 190px;
    color: #157493;
    font-size: 16px;
}

#wrapper {
    display: flex;
	min-height: 100vh;
}

#container {
    width: 74%;
/*	background-image: url(../images/background.png);*/
}

#container p {
    margin-bottom: 4px;
}

#leftSide {
    width: 13%;
/*    background-image: url(../images/background_square.png);
	background-image: url(../images/background_square.png), -webkit-linear-gradient(right, #167293, #1FA294);
	background-image: url(../images/background_square.png), -o-linear-gradient(left, #167293, #1FA294);
	background-image: url(../images/background_square.png), moz-linear-gradient(left, #167293, #1FA294);
	background-image: url(../images/background_square.png), linear-gradient(to left, #167293, #1FA294);*/
	background: -webkit-linear-gradient(right, #167293, #1FA294);
	background: -o-linear-gradient(left, #167293, #1FA294);
	background: moz-linear-gradient(left, #167293, #1FA294);
	background: linear-gradient(to left, #167293, #1FA294);
}

#rightSide {
    width: 13%;
/*    background-image: url(../images/background_square.png);
	background-image: url(../images/background_square.png), -webkit-linear-gradient(left, #167293, #1FA294);
	background-image: url(../images/background_square.png), -o-linear-gradient(right, #167293, #1FA294);
	background-image: url(../images/background_square.png), moz-linear-gradient(right, #167293, #1FA294);
	background-image: url(../images/background_square.png), linear-gradient(to right, #167293, #1FA294);*/
	background: -webkit-linear-gradient(left, #167293, #1FA294);
	background: -o-linear-gradient(right, #167293, #1FA294);
	background: moz-linear-gradient(right, #167293, #1FA294);
	background: linear-gradient(to right, #167293, #1FA294);
}

#projects {
    text-align: center;
}

#projects > div {
    display: inline-block;
    text-align: left;
	margin: 0 20px 30px 20px;
}

#projects div p {
	margin-bottom: 0;
	padding-bottom: 4px;
}

#projects > div:last-of-type {
	margin-bottom: 40px;
}

#johnPic {
    position: absolute;
    left: 0;
    bottom: 0;
}

#social {
	position: absolute;
	top: 98px;
	left: 816px;
}

#social a:nth-of-type(1),
#social a:nth-of-type(2) {
	margin-right: 20px;
}

@media (min-width: 1600px) {
	#social {
		display: none;
	}
	.nav-item {
        margin-right: 40px;
    }
}

@media (min-width: 992px) and (max-width: 1300px) {
	#social {
		top: 138px;
		left: 578px;
	}
}

@media (min-width: 992px) {
    .nav-item {
        margin-right: 30px;
    }
    .nav-item:nth-of-type(4),
    .nav-item:nth-of-type(5),
    .nav-item:nth-of-type(6) {
        margin-top: -6px;
    }
    .nav-item:nth-of-type(4),
    .nav-item:nth-of-type(5){
        margin-right: 10px;
    }
}

@media (min-width: 992px) and (max-width: 1599px) {
	.navbar-nav li:nth-of-type(4),
    .navbar-nav li:nth-of-type(5),
    .navbar-nav li:nth-of-type(6) {
        display: none;
    }
	#social {
		display: inline;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
    .nav-item {
        margin-right: 20px;
    }
    .navbar-brand {
        margin: 0 20px 0 130px;
    }
	#social {
		left: 540px;
	}
/*	#social a {
		margin-right: 15px;
	}*/
}

@media (max-width: 991px) { 
    .navbar {
        padding-left: 20px;
        padding-right: 20px;
    }
    .navbar-brand {
        padding-left: 20px;
		margin: 0 20px 0 130px;
    }
    .navbar-nav {
	    background-color: #167293;
        margin-top: 106px;
        padding: 20px 0;
    }
	.nav-link {
		text-align: center;
		color: #FFF !important;
	}
	.nav-link:hover,
	.nav-link:focus {
		color: #CCC !important;
	}
	#social {
		display: none;
	}
}

@media (max-width: 767px) {
    .navbar {
        height: 133px;
        padding: 45px 20px 0 20px;
    }
    .navbar-brand {
        padding-left: 30px;
    }
    .navbar-nav {
        margin-top: 50px;
    }
    #title div:nth-of-type(1) {
        font-size: 24px;
        line-height: 24px;
    }
    #title div:nth-of-type(2) {
        font-size: 14px;
        line-height: 14px;
    }   
    #johnPic img {
        height: 133px;
        width: 92px;
    }
    .navbar-brand {
        margin: 0 10px 0 50px;
    }
    #projects > div {
        font-size: 12px;
    }
    #projects > div img {
        height: 133px;
        width: 200px;
    }
    #container {
    width: 100%;
    }
    #leftSide {
        width: 0%;
    }
    #rightSide {
        width: 0%;
    }
    #the-menu {
		text-align: center;
		border: none;
	}
}