/* * * * * * * * * * * *
 * * GENERAL STYLES  * *
 * * * * * * * * * * * */
body {
  padding-top: 3rem;
  color: #5a5a5a;
  font-family: 'Nunito', sans-serif;
}
h1,h2{
   color: #2842a2;
}
h2{
font-family: 'Roboto', sans-serif;
font-size: 2.5em;
font-weight: 500;
}
footer h2{
  font-family: 'Nunito', sans-serif;
  font-size: 2em;
font-weight: 400;
}

/* * * * * * * * * * *
 * * NAVBAR STYLES * *
 * * * * * * * * * * */
#navbarSupportedContent .navbar-nav{
    text-align: left;
    position: absolute;
    right: 0;
    margin-top: .25em;
    padding: 1em;
    padding-left: 7vw;
}
#navbarSupportedContent .navbar-nav li a{
  color: #ffc107;
}
#navbarSupportedContent .navbar-nav li a:hover{
  color: rgba(255,255,255,.75);
}
nav{
  background-color: #2842a2;
  color:  white;
  padding: 1em 0em;
}
nav a, nav .nav-link{
  color:  white;
}
nav a:hover, nav .nav-link:hover{
  color: #fff !important;
}

#nav-name, #nav-name:hover{
  color: #ffc107;
  font-size: 1.5em;
  font-weight: 600;
}

@media only screen and (max-width: 750px){
  #navbarSupportedContent .navbar-nav{
    background-color: #2842a2;
    width: 100vw;
    text-align: center;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(255,255,255,.55);
  }
}
.navbar-toggler{
  border: none !important;
}

/* * * * * * * * * * *
 * * INTRO SECTION * *
 * * * * * * * * * * */
#main-intro{
  height: calc(100vh - 40px);
  background-color: #2842a2;
}
#main-intro h1{
  color: #ffc107;
}
#main-intro h3{
  color: white;
  font-weight: 400; padding-bottom:7em;
}
#main-intro .row{
  padding: 2em 0; height: calc(94vh);
}
#intro-left{
  margin: auto !important
}
#intro-right{
  margin: auto; padding: 2em;
}
#intro-right img{
  width: 100%;
} 


/* * * * * * * * * * * * * * *
 * * MY BACKGROUND SECTION * *
 * * * * * * * * * * * * * * */
#my-background{
  background-image: url("../img/cubic-background.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /*background-color: #f5f5f5;*/
  padding: 5em 0em;
  color: #2842a2;
}
#my-background h2{
  color: #2842a2;
  border-bottom: 1px solid #2842a4;
    padding-bottom: 0.25em;
}
#my-background h4{
  color: #555;
  font-weight: 400;
  padding: 1em 0;
    /*  border-bottom: 1px solid #2842a4;
    padding-bottom: 1.25em;*/
}
#in-touch-button-wrapper{
  padding-top: 3.5em;
}
#in-touch-button-wrapper a{
  border-radius:25px;
}
#in-touch-button{
  color: #2842a2;
  border-color: #2842a2;
  border:  2px solid #2842a2;
  padding: .5em 1.5em;
  font-size: 1.25em;
  font-weight: 600;
}
#in-touch-button:hover{
  background-color: #ffc107;
}

/* * * * * * * * * * * *
 * * SKILLS SECTION  * *
 * * * * * * * * * * * */
 #my-toolbox{
  background-color: #2842a2;
  padding: 5em 0em;
  color: white;

}
#my-toolbox h2{
  color:  #ffc107;
  border-bottom: 1px solid #ffc107;
    padding-bottom: 0.25em;
}
#my-toolbox h4{
  padding: 1em 0; 
  font-weight: 400;
}
#my-toolbox .row{
  padding: 0em 2em;
/*  border-bottom: 1px solid #ffc107;
    padding-bottom: 1.25em;*/
}
#my-toolbox ul {
  list-style: none; 
}
#my-toolbox ul  li{
  font-size: 1.25em;
}
#my-toolbox ul li::before {
  content: "\2022";  
  color: #ffc107; 
  font-weight: bold; 
  display: inline-block; 
  width: 1em; 
  margin-left: -1em;
}
#view-work-button{
  color: #ffc107;
  border:  2px solid #ffc107;
  padding: .5em 1.5em;
  font-size: 1.25em;
  font-weight: 600;
  border-radius: 25px;
  margin-top: .5em;
}
#view-work-button:hover{
  color: #2842a2;
  background-color: #ffc107;
}
/* * * * * * * * * * * *
 * * CONTACT SECTION * *
 * * * * * * * * * * * */

#contact{
  padding-top: 5em;
  padding-bottom: 5em;
  background-color: #F5F5F5;
  background-image: url("../img/cubic-background.jpeg");
  background-repeat: no-repeat;
  background-position: center;background-size: cover;

}
#contact h2{
   border-bottom: 1px solid #2842a4;
    padding-bottom: 0.25em;
}
#contact h4{
  color: #555;
  padding: 1em 0; 
  font-weight: 400;
  text-align: center;
}
#contact form{
  border: 1.5px solid #2842a2;
  border-radius: 4px;
  padding: 1.5em 2.5em 2.5em 2.5em;
  background-color: #2842a2;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 /* margin-top: -.25em;*/
}
#contact form label{
  color:  #ffc107;
  padding-top: 1em;padding-bottom: .375em;
}
#contact form input, #contact form textarea{
  background-color: #f5f5f5 !important;
}
#submit-button{
  color: #ffc107;
  border:  2px solid #ffc107;
  padding: .5em 1.5em;
  font-size: 1.25em;
  font-weight: 600;
  border-radius: 25px;
  margin-top: 2em;

/*  style="margin-top: 2em; color: #ffc107; border-color: #ffc107; border-radius: 25px; padding: 0.5em 1.5em;"*/
}
#submit-button:hover{
  color: #2842a2;
  background-color: #ffc107;
}
#recaptcha-verbiage{
  color: lightgrey;
    font-size: .75em;
    margin-bottom: -1em;
}
#recaptcha-verbiage a{
  color: white;
  text-decoration: none;
}
.grecaptcha-badge { 
  visibility: hidden; 
}


#form-success{
  display: none;
    background-color: white;
    color: green;
    padding: 1em 2em;
    margin-top: 2em;
    text-align: left;
    border: 2px solid green;
  }
/* * * * * * * * * * *
 * * FOOTER STYLES * *
 * * * * * * * * * * */
footer{
  background-color: #2842a2;
  color:  white;
  padding-top: 2.5em;
}
footer h2{
  color:  #ffc107;
  text-align: center;
}
footer a{
  color: #fff;
  text-decoration: none;
}
footer a:hover{
  color: #ffc107;
  text-decoration: none;
}
footer p{
  text-align: right; 
 /* color: #999;*/
  color: lightgrey;
}
#footer-links{
  text-align: center;
}
#footer-list-wrapper{
  margin-left: auto; 
  margin-right: auto;
}
#footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex
}
#footer-links ul li{
  padding: .5em 1em;
}