body {
    background-image: url('/static/profile_light.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: contain;
  background-position: center;
   position: relative;
  margin: 0;
      padding-top: 5px;
  background-color: #dddddd;
      color: #34495e;
  color: black;
}
/*END POSITIONING*/

/*BOX MODEL*/
* {
  box-sizing: border-box;
}

footer {
  padding: 15px 10px 10px 0px;
}

.anchor {
  padding-top: 50px;
}

header {
  margin-bottom: 60px;
}

header p {
  margin-top: 10px;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.container-customized {
  margin: 0 auto;
  margin-bottom: 5%;
  width: 80%
}

.image-square {/*rounded corner image*/
  border-radius: 5%;
}

.work-img { /*image list image objects*/
  display: block;
  margin: auto;
  max-width: 600px;
  position: relative;
  padding-bottom: 20px;
}

.info { /*image list image objects*/
  position: absolute;
  top: 15%;
  left: 22%;
  text-transform: uppercase;
  display: none;
}

.video-container {/*Embedded video element*/
  width: 100%;
}

.carousel {/*Image carousel*/
  margin-top: -78px;
  margin-left: -15px;
  margin-right: -15px;
}

.carousel-caption {/*Image carousel caption*/
  margin-bottom: 23%;
}

.carousel-indicators {/*Image carousel indicators*/
  padding-bottom:  5%;
}

.modal-button {
  float: right;
  padding-right: 15px;
  margin-top: 20px;
}

.container-main-text {
  clear: both;
  padding-top: 60px;
}

#faq h2 {
  text-align: left;
  float: left;
  padding-left: 15px;
}

#modal-embed {
  height: 600px;
  width: 100%;
  padding: 10px;
}

#contact {
  padding-top: 50px;
}

#contact ul {
  padding-left: 0px;
}

#contact li {
  padding: 5px 0;
}

#map {
  width: 100%;
  height: 250px;
}

#about .row {
  padding: 10px 0;
}

.social-media-buttons {
  display: block;
  padding: 2px;
}

.social-media-buttons a,
.social-media-buttons iframe {
  display: block;
  margin: 0 auto;
}

.social-media-buttons span {
  display: table;
  margin: 0 auto;
}

@media (min-width: 762px) {
  #contact .row {
      padding-top: 50px;
      padding-bottom: 50px;
  }
}
/*END BOX MODEL*/

/*TYPOGRAPHY*/
h1,
h2,
h3 {
  font-family: 'Quicksand', Futura, Helvetica, Arial, sans-serif;
}

h2,
h3,
h3 {
  text-transform: uppercase;
}

p,
li {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', Garamond, serif;
  font-size: 1.2em;
}

header p {
  text-align: center;
}

header h1 {
  text-align: center;
  font-family: 'Pacifico', cursive;
}

footer p {
  color: white;
  font-size: 1em;
  letter-spacing: 0.05em;
  font-family: 'Quicksand', Futura, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}

#nav-links a,
.project-name a {/*Bootstrap navigation bar links*/
  letter-spacing: 0.05em;
  font-family: 'Quicksand', Futura, Helvetica, Arial, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}

.carousel-caption h1 {/*Image carousel caption header*/
  font-family: 'Pacifico', cursive;
  color: #1de9b6;
}

.carousel-caption p {/*Image carousel caption paragraph*/
  font-size: 2em;
  text-shadow: 0 1px 2px rgba(0,0,0, 1);
}

.introduction p,/*About page introduction and skills list typography*/
.skills-column li{
  font-family: 'Quicksand', Futura, Helvetica, Arial, sans-serif;
}

@media (min-width: 992px) {
  .skills-column h3 {
      text-align: center;
  }

  .introduction h2,
  .introduction p,
  .skills-column h2 {
      text-align: center;
  }
  #about .row {
      padding: 10px 0;
  }
}

#contact h2,
#contact p,
#contact li {
  color: black;
}

#contact h2 {
  font-family: 'Permanent Marker', cursive;
}

#contact li,
#contact p {
  font-family: 'Quicksand', Futura, Helvetica, Arial, sans-serif;
}

#work-list h2 {
  font-family: 'Permanent Marker', cursive;
  color: black;
}

.project-title { /*work list hover title*/
  font-family: 'Permanent Marker', cursive;
  font-size: 1.5em;
  color: #fff;
}

.panel-title a {/*Bootstrap accordion panel anchor*/
  text-decoration: none;
}

.project-name {
  text-transform: uppercase;
}
/*END TYPOGRAPHY*/

/*VISUAL*/
footer {
  background: rgba(0, 0, 0, 0.9);
  color: #34495e;
}

.carousel-control.left,
.carousel-control.right {
  background-image: none
}

a:link {
  color: black;
}

a:active,
a:visited:active {
  color: yellow;
}

a:visited {
  color: black;
}

a:hover,
a:visited:hover {
   color: black;
}

#contact li {
  list-style: none;
}

#nav-links a:hover,/*Bootstrap navigation bar visual styling*/
.project-name a:hover {
  color: #1de9b6;
  text-decoration: none;
}

.panel-title a:hover {/*Bootstrap accordion visual styling*/
  color: #1de9b6;
  text-decoration: none;
}

.navbar-brand a,/*Bootstrap navigation bar transition*/
.navbar-inverse .navbar-nav>li>a {
  color: white;
  -webkit-transition: color 1000ms;
      -moz-transition: color 1000ms;
          -o-transition: color 1000ms;
                  transition: color 1000ms;
}

.navbar-inverse .navbar-nav>.active>a,/*Bootstrap navigation bar active effects*/
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
  color: yellow;
}

.navbar-inverse {/*Bootsrap navigation bar background opacity*/
  opacity: 0.9;
}

.glyphicon:hover {
   color: #1de9b6;
}

.glyphicon {
  -webkit-transition: color 1000ms;
      -moz-transition: color 1000ms;
          -o-transition: color 1000ms;
                  transition: color 1000ms;
}

.image-square {/*Rounded corner square image div*/
  border-radius: 1%;
}

#contact {
  background-image: url("../img/background2.jpg");;
  background-size: cover;
}

#about .row {
  background: rgba(255, 255, 0, 0.3)
}

@media (min-width: 762px) {/*Contact page background effect with minimum width*/
.container-customized {
  background-attachment: fixed;
  background-size: cover;
}

  #work-1 {
      background-image: url("../img/paint1.jpg");
  }

  #work-2 {
      background-image: url("../img/paint2.jpg");
  }
}

.panel {/*Accordion panel border*/
  border-style: dashed;
  border-color: #ddd;
}

.panel-default>.panel-heading {/*Bootstrap Accordion panel colors*/
  background-color: white;
}

.panel-title a:hover {/*Bootstrap Accordion title hover effect*/
  -webkit-transition: color 1000ms;
      -moz-transition: color 1000ms;
          -o-transition: color 1000ms;
                  transition: color 1000ms;
}

.btn-default:hover,/*Bootstrap buttons background on hover*/
.btn-info:hover {
  background-color: #1de9b6;
}

.btn {/*Bootstrap buttons styling*/
  background-color: transparent;
  border: dashed 1px black;
}
/*END VISUAL*/