body {
  background-color: white;
  color: RGB(60,63,65);
  font-family: 'Open Sans', serif;
  padding-top: 54px;
  zoom: 100%;
}

nav {
  background: url(../img/NavBar.jpg) 50% 0 no-repeat fixed;
  /*background-color: RGB(60,63,65); */
}

button:focus { outline: none; }

h1,
h2,
h3 {
  color: darkgray;
  font-family: 'Saira Extra Condensed', serif;
  font-weight: 700;
  text-transform: uppercase;
}

h1 {
  font-size: 6rem;
  line-height: 5.5rem;
}

h2 { font-size: 3.5rem; }

.subheading {
  font-family: 'Open Sans', serif;
  font-size: 1.25rem;
  font-weight: 600;
}

.firstcharacter {
  color: rgba(21, 191, 175, 1);
  font-weight: 900;
}

.social-icons a {
  color: #515860;
  transition: color .3s;
}

.social-icons a:hover { color: rgba(21, 191, 175, 1); }
.social-icons a .fa-lg { font-size: 1.75rem; }

.fa-ul i { color: rgba(21, 191, 175, 1); }

a {
  color: rgba(21, 191, 175, 1) ;
  transition: color .3s;
}

a:hover, 
a:focus, 
a:active {
  color: orange;
}

#sideNav .navbar-nav .nav-item .nav-link {
  font-weight: 600;
  text-transform: uppercase;
}

#about {
  background: url("../img/about.jpg") 50% 0 no-repeat fixed;
}

#skills {
  background: url("../img/about.jpg") 50% 0 no-repeat fixed;
}
#experience{
  background: url("../img/work.jpg") 50% 0 no-repeat fixed;
}

#projects{
  background: url("../img/work.jpg") 50% 0 no-repeat fixed;
}

#contact{
  background: url("../img/contact.jpg") 50% 0 no-repeat fixed;
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #07BDAE /*rgba(48, 61, 70, .75)*/;
}

.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show > .nav-link {
  color: #07BDAE /*rgba(48, 61, 70, 1)*/;
}

section.resume-section {
  border-bottom: 1px solid rgba(48, 61, 70, .1);
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

section.resume-section .resume-item .resume-date {  }

.text-acqua-color { color: rgba(21, 191, 175, 1) !important; }
.text-work-in-progress { color: #ff6b44 !important;}

/*************************
      MEDIA QUERIES
*************************/

@media (min-width: 992px) {
  body {
    padding-top: 0;
    padding-left: 17rem;
  }

  #sideNav {
    display: flex;
    flex-direction: column;
    height: 100vh;
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 17rem;
  }

  #sideNav .navbar-brand {
    display: flex;
    margin: auto auto 0;
    padding: 1rem;
  }

  #sideNav .navbar-brand .profile-pic {
    max-width: 15rem;
    max-height: 15rem;
    border: .5rem solid rgba(48, 61, 70, .4);
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, .4);
  }

  #sideNav .navbar-collapse {
    display: flex;
    align-items: flex-start;
    flex-grow: 0;
    width: 100%;
    margin-bottom: auto;
  }

  #sideNav .navbar-collapse .navbar-nav {
    flex-direction: column;
    width: 100%;
  }

  #sideNav .navbar-collapse .navbar-nav .nav-item { display: block; }
  #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link { display: block; }

  section.resume-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

@media (min-width: 768px) {
  section.resume-section { min-height: 100vh; }
  section.resume-section .resume-item .resume-date { min-width: 10rem; }
}

@media (max-width: 576px) {
  h1 {
    font-size: 4.8rem;
    line-height: 5rem;
  }
}

@media (max-width: 375px) {
  h1 {
    font-size: 4.2rem;
    line-height: 4.5rem;
  }
}

@media (max-width: 320px) {
  h1 {
    font-size: 3.8rem;
    line-height: 4rem;
  }
}

/**********************
      SKILL BAR
 ******************/
#skill {
  list-style:none;
  padding-top:10px;
}

#skill li {
  margin-bottom:70px;
  background:white;
  height:5px;
  border-radius:3px;
  border-left:1px solid #111;
  border-top:1px solid #111;
  border-right:1px solid #333;
  border-bottom:1px solid #333;
}

#skill li em {
  position:relative;
  top:-30px;
}

.expand {
  height:3px;
  margin:1px 0;
  background:#07BDAE;
  position:absolute;
  box-shadow:0px 0px 10px 2px lightgray;
}

.html5       { width:80%;  -moz-animation:html5 2s ease-out;       -webkit-animation:html5 2s ease-out;       }
.web       { width:65%;  -moz-animation:web 2s ease-out;       -webkit-animation:web 2s ease-out;       }
.java        { width:80%;  -moz-animation:css3 2s ease-out;        -webkit-animation:css3 2s ease-out;        }
.jquery      { width:85%;  -moz-animation:jquery 2s ease-out;      -webkit-animation:jquery 2s ease-out;      }
.photoshop   { width:75%;  -moz-animation:photoshop 2s ease-out;   -webkit-animation:photoshop 2s ease-out;   }
.dreamweaver { width:85%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }
.docker   {width:70%;  -moz-animation:docker 2s ease-out;       -webkit-animation:container 2s ease-out;    }

@-moz-keyframes html5       { 0%  { width:0px;} 100%{ width:80%;}  }
@-moz-keyframes docker       { 0%  { width:0px;} 100%{ width:70%;}  }
@-moz-keyframes web       { 0%  { width:0px;} 100%{ width:60%;}  }
@-moz-keyframes java        { 0%  { width:0px;} 100%{ width:80%;}  }
@-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width:85%;}  }
@-moz-keyframes photoshop   { 0%  { width:0px;} 100%{ width:75%;}  }
@-moz-keyframes dreamweaver { 0%  { width:0px;} 100%{ width:85%;} }

@-webkit-keyframes html5       { 0%  { width:0px;} 100%{ width:80%;}  }
@-webkit-keyframes docker       { 0%  { width:0px;} 100%{ width:70%;}  }
@-webkit-keyframes web       { 0%  { width:0px;} 100%{ width:60%;}  }
@-webkit-keyframes java        { 0%  { width:0px;} 100%{ width:80%;}  }
@-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width:85%;}  }
@-webkit-keyframes photoshop   { 0%  { width:0px;} 100%{ width:75%;}  }
@-webkit-keyframes dreamweaver { 0%  { width:0px;} 100%{ width:85%;} }


/**
CONTACT ME section
 */

.btn{
  background-color: gray ;
  border: none;
}

.btn:hover{
  background-color: rgba(21, 191, 175, 1);
}

.landing-page .section-contact-us .title {
  margin-bottom: 15px;
}

.landing-page .section-contact-us .description {
  margin-bottom: 30px;
}

.landing-page .section-contact-us .input-group,
.landing-page .section-contact-us .send-button,
.landing-page .section-contact-us .textarea-container {
  padding: 0 40px;
}

.landing-page .section-contact-us .textarea-container {
  margin: 40px 0;
}

.landing-page .section-contact-us a.btn {
  margin-top: 35px;
}

/* Contact Information Style */
.cc-contact-information {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.cc-contact-information .cc-contact {
  padding: 8% 0 8% 20%;
}

@media (max-width: 767px) {
  .cc-contact-information .cc-contact {
    padding: 30px 0px 30px 0px;
  }
}