@import url("animate.css");
@import url("normalize.css");

@font-face {
  font-family: "Montserrat Bold";
  src: url(../fonts/Montserrat-Bold.otf);
}

@font-face {
  font-family: "Montserrat";
  src: url(../fonts/Montserrat-Regular.otf);
}

@font-face {
  font-family: "Montserrat Medium";
  src: url(../fonts/Montserrat-Medium.otf);
}

@font-face {
  font-family: "Montserrat Light";
  src: url(../fonts/Montserrat-Light.otf);
}

@font-face {
  font-family: "Montserrat ExtraLight";
  src: url(../fonts/Montserrat-ExtraLight.otf);
}

* {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: normal;
}

header, main {
    margin: 0 auto;
    max-width: 50em;
}

main {
  padding: 4em 1em;
}

body {
    font-family: "Montserrat", "Helvetica", "Arial", sans-serif;
    color: white;
    margin: 0;
    padding: 0;
}

header {
  background: linear-gradient(0deg, #1D6684, #174677);
  background-image: url(../img/SplashPic2.png);
  background-size: cover;
  background-position: 50% 10%;
  position: relative;
  max-width: none;
  min-height: 100vh;
}

.section {
  overflow: hidden;
}

.mydp {
  width: 120px;
  border-radius: 70px;
  display: block;
  margin: auto;
  margin-bottom: 40px;
}

.aboutme {
  max-width: 570px;
  display: block;
  margin: auto;
  width: 100%;
  margin-bottom: 20px;
}

.aboutme h2 {
  color: #222222;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 26px;
}

.aboutme h2 a, .aboutme h2 a:visited {
  color: blue;
}

.section.portfolio {
  margin-top: 40px;
  background-color: #F5F7F8;
  min-height: 100vh;
}

.container {
  padding: 0px 40px;
  display: block;
  margin: auto;
}

.navcontainer {
  padding: 0px 64px;
}

h1 {
  font-family: "Montserrat Bold", sans-serif;
  font-size: 30px;
  line-height: 40px;
  margin-bottom: 5px;
}

h2 {
  font-family: "Montserrat Light", sans-serif;
  font-size: 24px;
  line-height: 29px;
}

b {

}

hr {
  max-width: 560px;
  opacity: 0.2;
  border: 0;
  border-top: 1px solid #174677;
  display: block;
  margin: 0 auto;
  z-index: 0;
}

.bottommargin {
  margin-bottom: 20px;
}

.topmargin {
  display: block;
  margin-top: 20px;
}

.iconrow {
  text-align: center;
}

.firsticonrow {
}

#about .sectionheader h1 {
  margin-top: 100px;
  margin-bottom: 40px;
}

.onethirdcolumn {
  width: 33%;
  display: inline-block;
}


.blogimage {
  padding: 20px 24px;
  width: 100%;
}

.secondiconrow {
  margin-top: 20px;
  margin-bottom: 40px;
}

.icons {
  width: 145px;
  margin-right: 30px;
}

.firsticons {
  margin-left: 30px;
}

@media screen and (max-width: 743px) {
  .icons:nth-child(4) {
    display: none;
  }
}

@media screen and (max-width: 565px) {
  .icons:nth-child(3) {
    display: none;
  }
}

.mission h1{
  padding: 20px 20px;
  color: #174677;
  font-family: "Montserrat Light", sans-serif;
  font-size: 26px;
  max-width: 660px;
  text-align: center;
  display: block;
  margin: auto;
}

@media screen and (max-width: 475px) {
  .mission h1{
    font-size: 22px;
    line-height: 33px;
  }
}

.splashtext{
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%);
  -webkit-transform: translate(-50%, -30%);
  -ms-transform: translate(-50%, -30%);
  -moz-transform: translate(-50%, -30%);
  max-width: 630px;
  text-align: center;
  padding: 0px 20px;
}

.learnMoreButton:link, .learnMoreButton:visited{
  position: absolute;
  bottom: 40px;
  left: calc(50% - 60px);
  display: block;
  width: 120px;
  transition: all 2s;
  opacity: 1;
  text-decoration: none;
}

.learnMoreButton span{
  font-family: "Montserrat Light", sans-serif;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  margin-bottom: 10px;
  display: block;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.2s;
}

.learnMoreButton:hover span{
  color: white;
}

.learnMoreButton:hover img{
  width: 30px;
  height: 30px;
  opacity: 1;
}

.learnMoreButton img{
  width: 25px;
  height: 25px;
  display: block;
  margin: auto;
  transition: 0.2s all;
  border-radius: 100px;
  opacity: 0.5;
}

.customNavbar {
  background-color: none;
  display: block;
  height:60px;
  position: absolute;
  width: 100%;
}

.logoDiv{
  float: left;
}

.customNavbar .logoDiv .logoImage{
  display: inline-block;
  vertical-align: middle;
  float:left;
  margin-top: 10px;
  height: 40px;
}

.hide {
  display: inline-block;
}

.hide li{
  margin-right: 30px;
}

.margintop {
  display: inline-block;
}

@media screen and (max-width: 996px){
  .hide {
    display: none;
    margin-top: 20px;
  }
  .margintop {
    margin-top: 3px;
  }
}

.logoDiv .logoText{
  font-family: 'Montserrat Bold', sans-serif;
  font-size: 20px;
  margin-top: 17px;
  margin-left: 20px;
  padding-left: 0px;
  color: white;
  float: left;
  text-transform: uppercase;
  letter-spacing: 5px;
}

.logoText a{
  text-decoration: none;
}

.logoText a:visited{
  color: #ffffff;
}

.logoText a:active{
  color: #ffffff;
}

.navlinks ul {
  margin-top: 19px;
  list-style: none;
  text-decoration: none;
}

.navlinks li {
  display: inline-block;
  font-size: 14px;
  font-family: "Montserrat Light", sans-serif;
  text-transform: none;
}

.navlinks a {
  text-decoration: none;
  color: white;
}

.floatLeft {
  float:right;
}

.floatLeft li:hover {
  text-decoration: none;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  transition: 0.3s ease-out;
  cursor: pointer;
}

.floatLeft li:hover a {
  color: #50E3C2;
}

.navlinks .resume {
  border: 1px solid white;
  padding: 10px 15px;
  border-radius: 3px;
  color: white;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  transition: 0.3s ease-out;
}

.floatRight {
  float: right;
  margin-top: 20px;
  margin-left: 80px;
}

ul {
  padding: 0px;
}

.customNavbar.fixed{
  position: fixed;
  background-color: white;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0px 2px 4px #D4D4D4;
  z-index: 10;
}

.customNavbar.fixed .navlinks a {
  color: black;
}

.customNavbar.fixed .floatLeft li:hover a {
  color: #50E3C2;
  transition: all 200ms ease-out;
  transition-property: color, background;
}

.customNavbar.fixed .navlinks .resume {
  border: 1px solid #174677;
  padding: 10px 15px;
  border-radius: 3px;
  background-color: #174677;
  color: white;
}

.customNavbar .logoDiv .logoImage.hide{
  display: none;
}

.logoDiv .logoText.blue {
  color: #174677;
}

.logoDiv .logoText.blue a:visited{
  color: #174677;
}

.mybio p {
  font-family: "Lato", sans-serif;
  color: #444444!important;
  display: block;
  margin: auto;
  margin-top: 30px;
  line-height: 1.5;
}

.portfolio {
  margin-top: 0px;
  padding-bottom: 50px;
}

.sectionheader h1 {
  color: black;
  text-align: center;
  font-size: 48px;
  line-height: 58px;
}

.sectionheader.blogheader h2 {
  margin-bottom: 40px;
}

.sectionheader h2 {
  color: black;
  text-align: center;
  margin-top: 10px;
  font-family: "Open Sans";
  font-size: 20px;
}

.sectionheader h1 {
  margin-top: 40px;
}

.blogrow {
  margin-top: 20px;
}


.row {
  width: 100%;
  float: right;
  margin-top: 50px;
}

.secondrow, .thirdrow {
  margin-top: 0px;
}

.image {
  width: 100%;
}

.image:hover {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    transition: 0.3s ease-out;
    opacity:0.8;
    background-color: #174677;
}

.blogimage:hover {
  padding: 20px 24px;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  transition: 0.3s ease-out;
  opacity:0.8;
}

.onehalfcolumn {
  display: block;
  width: 50%;
  float: right;
  text-align: left;
  padding: 10px 40px;
  box-sizing: border-box;
}

.secondrow .onehalfcolumn {
  float: right;
}

.section.about .onehalfcolumn h1, .section.about .onehalfcolumn h2, .blogrow h2{
  color: #222222;
  font-size: 30px;
  max-width: 400px;
  margin-top: 25px;
  font-weight: 300;
  text-align: left;
  float: left;
  font-weight: 400;
}

.section.about .onehalfcolumn h2, .blogrow h2{
  font-weight: 300;
  font-size: 16px;
  margin-top: 1em;
}

.blogrow h2 {
  font-family: "Open Sans";
  font-weight: 700;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 0px;
}

.blogrow h2:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  transition: 0.3s ease-out;
}

.blogrow.second {
  margin-top: 40px;
  margin-bottom: 40px;
}

.section.about .secondrow .onehalfcolumn.text h1, .section.about .secondrow .onehalfcolumn.text h2 {
  text-align: right;
  float: right;
}

.secondrow .onehalfcolumn.text h1{
  margin-top: 20px;
}

.row .onehalfcolumn.text h1, .secondrow .onehalfcolumn.text h1, .thirdrow .onehalfcolumn.text h1{
  color: #174677;
  font-family: "Montserrat Medium", sans-serif;
  font-size: 28px;
  margin-top: 20px;
}

.row .onehalfcolumn.text h2, .secondrow .onehalfcolumn.text h2, .thirdrow .onehalfcolumn.text h2 {
  color: #444444;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  margin-top: 5px;
  line-height: 29px;
}

.button {
  display: inline-block;
  font-size: 14px;
  font-family: "Montserrat Light", sans-serif;
  color: #174677;
  margin-top: 20px;
  padding: 12px 30px;
  border: 1px solid #174677;
  border-radius: 3px;
  text-decoration: none;
}

.button:hover {
  background-color: #174677;
  color: white;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  transition: 0.3s ease-out;
}

.row a:visited, .row a, {
  text-decoration: none;
  color: white;
}

.blogheader h2 a:visited, .blogheader h2 a, .sectionheader h2 a:visited, .sectionheader h2 a {
  color: #174677;
}

@media screen and (max-width: 1108px){
  .row .onehalfcolumn.text h2 {
    font-size: 16px;
  }
  .row a:visited, .row a {
    text-decoration: none;
    color: white;
  }
}

@media screen and (min-width: 1004px){
  .onehalfcolumn.mybio {
    padding-right: 64px;
  }
  hr {
    max-width: 512px;
  }
}

@media screen and (max-width: 1004px){
  #about .sectionheader h1{
    margin-bottom: 32px;
  }
  .onehalfcolumn.aboutmission {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .row a:visited, .row a {
    text-decoration: none;
    color: white;
  }
  .image {
    max-width: 600px;
  }
  .onehalfcolumn {
    width: 100%;
  }
  .onehalfcolumn.text {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .section.about .secondrow .onehalfcolumn.text h1, .section.about .secondrow .onehalfcolumn.text h2 {
    text-align: left;
    float: none;
    margin-right: auto;
  }
  .row .onehalfcolumn.text h1{
    margin-top: 10px;
  }
  .section.about .secondrow .onehalfcolumn.text h1 {
    text-align: center;
  }
  .secondrow .onehalfcolumn {
    float: left;
  }
  .section.about .onehalfcolumn h1{
    text-align: center;
    display: block;
    margin: auto;
    float: none;
  }
  .section.about .onehalfcolumn h2{
    float: none;
    max-width: 450px;
    padding: 0px;
  }
  .onehalfcolumn, .onehalfcolumn .alignleft{
    text-align: center;
  }
  .onehalfcolumn.mybio {
    text-align: left;
  }
  .aboutme {
    max-width: 560px;
  }
  .row .onehalfcolumn.text h2 {
    max-width: 600px;
    text-align: left;
    display: block;
    margin: auto;
  }
  .button {
    display: block;
    max-width: 600px;
    margin: auto;
    margin-top: 20px;
    text-decoration: none;
  }
}

@media screen and (max-width: 688px){
}

@media screen and (max-width: 619px){
  .row a:visited, .row a {
    text-decoration: none;
    color: white;
  }
  .sectionheader h1 {
    margin-top: 30px;
    font-size: 40px;
    margin-bottom: 0px;
  }
  .container {
  padding: 0px;
  }
  .navcontainer {
    padding-left: 40px;
  }
  .floatLeft {
    position: absolute;
    top:0;
    right:40px;
  }
  .row:nth-child(1) {
    margin-top: 30px;
  }
  #about .sectionheader h1{
    margin-bottom: 30px;
  }
}

@media screen and (max-width:518px) {
  .row a:visited, .row a {
    text-decoration: none;
    color: white;
  }
  .row .onehalfcolumn.text h1 {
    font-size: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .row .onehalfcolumn.text h2 {
    font-size: 14px;
    line-height: 21px;
  }
  .navcontainer {
    padding-left: 24px;
  }
  .floatLeft {
    right:24px;
  }
}

@media screen and (max-width:462px) {
  .row a:visited, .row a {
    text-decoration: none;
    color: white;
  }
  .sectionheader h1 {
    margin-top: 20px;
    font-size: 30px;
  }
  #about .sectionheader h1{
    margin-top: 90px;
    margin-bottom: 20px;
  }
  .sectionheader h2 {
    font-size: 16px;
    margin-top: 0px;
  }
  #portfolio .sectionheader h2 {
    line-height: 24px;
  }
  #contact .sectionheader h2 {
    line-height: 24px;
  }
  .row:nth-child(1) {
    margin-top: 20px;
  }
  .logoText {
    display: none;
  }
}

.section.contact {
  background-color: F5F7F8;
}

@media screen and (max-width: 463px) {
  .icons {
    width: 120px;
  }
  #about .onehalfcolumn {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (max-width:425px) {
  .sectionheader h2{
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (max-width:400px) {
  .onehalfcolumn {
    padding: 10px 20px;
  }
}

@media screen and (max-width:386px) {
  .splashtext h2 {
    font-size: 18px;
  }
}

@media screen and (max-width:383px) {
  .icons {
    width: 80px;
  }
}

@media screen and (max-width:372px) {
  .mission h1 {
    font-size: 16px;
    line-height: 24px;
  }
}

@media screen and (max-width:338px) {
  .icons {
    width: 80px;
  }
}

.social-icons {
  display: block;
  margin: auto;
  text-align: center;
}

.social-icon {
  margin: 15px 50px 60px 0px;
  width: 30px;
}

.social-icon:hover {
  opacity: 0.8;
  -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
  transition: 0.3s ease-out;
}

.firsticon {
  margin-left: 50px;
}

@media screen and (max-width: 905px) {
  .onethirdcolumn, .blogrow h2 {
    width: 100%;
    display: inline-block;
  }
  .blogrow h2 {
    max-width: 100%;
    text-align: center;
    margin-bottom: 30px;
    font-size: 20px;
  }
  .blogrow.second {
    margin-top: 0px;
    margin-bottom: 8px;
  }

}

@media screen and (max-width: 640px) {
  .blogrow h2 {
    font-size: 16px;
    margin-bottom: 20px;
  }
}

.aboutmission {
  float: left;
}

.portfolio .onehalfcolumn {
  padding: 10px 24px;
}