@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Pro:300,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i');
html {
  /*scroll-behavior: smooth;*/
}
body {
  overflow-x: hidden;
  font-family: 'Source Sans Pro', sans-serif;
  color: #505962;
}

/*-- Navigation --*/

.navbar {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.1rem;
  background-color: #fafafa !important;
  /*min-height: 6rem;*/

}

.navbar-toggler.toggler-example {
cursor: pointer;
border:0px;
outline: none!important;
  box-shadow: none;
  border:0px;
}


.navbar-toggler.toggler-example:focus, .navbar-toggler.toggler-example:active, {
cursor: pointer;
border:0px;
outline: none!important;
  box-shadow: none;
  border:0px;
}

.navbar-light .navbar-toggler-icon{
  outline: none!important;
  border:0px;
}

.navbar-nav li {
  padding-right: 0.7rem;
}

.navbar-light .navbar-nav .nav-link {
  color: #a9a9a9;

}

.navbar-brand {
    /*width:80% !important;*/
}

.navbar-toggler-icon {
  transform: rotate(0deg);
  transition: transform 1s linear;
  -webkit-transition: -webkit-transform 0.5s ease-in;
  position: relative;
  right: 2rem;
}

.navbar-toggler-icon.open{
  transform: rotate(180deg);
  transition: transform 1s linear;
  -webkit-transition: -webkit-transform 0.5s ease-in;

}

.icon.active .navbar-toggler-icon{
  background: rgba(0,0,0,0);
}
.title {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.3rem;
}
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
  color: black;
}

.nav-item{
  position: relative;
  right: 2rem;
  padding-bottom:0.25rem;
}
.navbar-nav {
  padding-top: 0.75rem;
}
/* Start of landing page --*/
.home-inner {
  background-image: url(img/achow.jpg);
}

.caption {
  width: 100%;
  max-width: 100%;
  position: absolute;
  top: 38%;
  left: 55%;
  z-index: 1;
  color: darkgrey;
}

.caption h3 {
  font-size: 3.5rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
  color: #2E2D33;
  padding-bottom: 1rem;
}

#aboutme {
  font-size: 2rem;
  font-weight: 100!important;
  color: #2E2D33;
  padding-bottom: 1rem;
  width: 29rem;
  letter-spacing: 0.05rem;
}

#description {
  font-size: 2rem;
  font-weight: 100!important;
  color: #2E2D33;
  letter-spacing: 0.05rem;
  position:relative;
  bottom:0.5rem;
}
#skillz {
  font-size: 2rem;
  font-weight: 100!important;
  color: #2E2D33;
  padding-bottom: 1rem;
  width: 29rem;
  letter-spacing: 0.05rem;
  margin-left: 1.5rem;
}

#resumeTit {
  font-size: 2rem;
  font-weight: 100!important;
  color: #2E2D33;
  padding-bottom: 1rem;
  width: 29rem;
  letter-spacing: 0.05rem;
}
#touch{
  background-color: transparent;
  border-radius: 5px;
  border-color: #fafafa;
  border-width: thin;
  margin-top: 1rem;

}

#touch:hover {
  background-color: #ffcdc4;
}
.email {
  color: #2E2D33;
  font-size: 1.1rem;
  font-weight: 300!important;
  padding: 1rem;
  padding-top: 0.75!important;
  padding-bottom: 0.75!important;
}


.email:hover {
  color: white;
  text-decoration: none;
}
.btn-lg {
  border-width: medium;
  border-radius:0.2;
  padding: 0.6rem 1.3rem;
  font-size: 1.1rem;
}
.narrow {
  width: 75%;
  margin: 1.5rem auto;
  padding-top: 2rem;
}
.narrow h1 {
    font-size: 2.4rem;
  }

/*-- Start of About Page --*/
#about {
  padding-top: 2rem;
  background-color: #DDE5E6 !important;
  /*#C26868;*/
  background-color: #4C5364; /*4C5364;  171c28; fec8c2 */
  color: black;

}

.row {
  padding: 5rem;
}

.bars {
  padding: 0;
  position: relative;
  right: 1rem;
}

.category{
  color: #35656E; /*#171c28;*/
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-size: 1.2rem;
}

.skills {
  padding-top: 1.5rem;
}

.progress-wrap h5 {
  font-size: 1rem;
  margin-bottom: 0.5rem; }
}

.js .animate-box {
  opacity: 0; }


.type {
  font-weight: 600;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  letter-spacing: 0.05em;
  font-weight: 300;
  font-size: 1.2rem;
  color: black;
  margin-bottom: 1rem;
}

.entry {
  letter-spacing: 0.05em;
  font-weight: 300;
  font-size: 1.2rem;
  color: black;}

.text {
  letter-spacing: 0.05em;
  font-weight: 100;
  font-size: 1.1rem;
  color: black;
  font-family: 'Karla', sans-serif;


}

.btn-secondary {
  border-width: medium;
  border-radius: 0;
  padding: .6rem 1.2rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  margin: 1rem;
  border-color: #1EBBA3;
  background-color: #1EBBA3;
  color: white;
}
.btn-secondary:hover,
.btn-secondary:focus {
  border-color: #189582;
  background-color: #189582;
  color: white;
}

/* Start of resume section */

#resume {
  padding-top: 2rem;
  background-color: #FEDFC2 !important;
  padding-bottom: 3rem;
  color: black;
}

#resumeTitle {
  margin-top: 3rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-family: 'Source Sans Pro', sans-serif;

}

.section-tagline {
  font-family: 'Open Sans Pro', sans-serif;
  font-weight: 700;
  margin-top: 3rem;
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  position: relative;
  width: 100%;
  padding-bottom: 1rem;
  border-bottom: 1px solid #fafafa;
}

.resumeText{
    font-family: 'Karla', sans-serif;
    font-size: 1rem;
    color: #333333;
    text-transform: none;

}

p
{
  margin:0;
  padding:0;
}

#name {
  font-weight: 700;
  padding: 0;
  margin: 0;
}

#year {
  font-style: italic;
}

#coursework {
  margin-top: 1rem;
  font-size: 1rem;
}

ul.resumeText {
  list-style-type:circle;
  padding-top: 0.5rem;
}

li {
  margin-top: 0.2rem;
}

.btn-group {
  margin-left: 0rem;
  margin-top: 1rem;
}
.language {
  background-color: transparent;
  border-radius: 5px;
  border: 1px solid #b38253; /*#f5f5f5;*/
  color: #b38253;
  font-size: 0.7rem;
  width: 5rem;
  margin-right: 1rem;
  padding: 0.3rem;
  font-weight: 400;
  text-align: center;
}

.iconResume {
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: 10rem;
  left: -5.5rem;
}

#portfolio {
  background-color: #eee;
}

.demo {
  width: 100%;
  background-color: white;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  padding: 1rem !important;
  text-transform: none !important;

}

/*-- Photography */

.gallery {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-width: 33%;
-moz-column-width: 33%;
column-width: 33%; }
.gallery .pics {
-webkit-transition: all 350ms ease;
transition: all 350ms ease; }
.gallery .animation {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }

@media (max-width: 450px) {
.gallery {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-width: 100%;
-moz-column-width: 100%;
column-width: 100%;
}
}

@media (max-width: 400px) {
.btn.filter {
padding-left: 1.1rem;
padding-right: 1.1rem;
}
}
/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/