* {
  font-family: century gothic, geneva, serif;
 
}

.container { 
  padding-top: 120px; 
}

.jumbotron {
  background-image: url("https://images.unsplash.com/photo-1426491546051-dfad91ddb345?auto=format&fit=crop&w=750&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D");
  background-size: cover;
  text-align: center;
  padding: 140px;
}

.jumbotron p {
  color: floralwhite;
  font-size: 26px;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}

.carousel-caption h3 {
  color: floralwhite;
}

.text-center h1 {
  font-size: 79px;
  text-align: center;
  color: red !important;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}

.container-fluid h1 {
  font-size: 50px;
  text-align: center;
  color: black;
  text-transform: uppercase;
}

a { 
  color: red; 
} 

div.container a {
  color: red;
  display: block;
  text-align: center;
  font-size: 20px;
}

.container h1 {
  color: crimson;
  font-weight: bold;
  color: #FF0000;
}

.container p {
  text-transform: uppercase;
  font-size: 20px;
  text-align: center;
  font-weight: 100;
}

.col-md-4 h2, h3 {
  text-transform: uppercase;
  color: black;
}

.row h2, h3 {
  text-transform: uppercase;
  color: black; 
}

.row p, li {
  color: lightslategray;
  font-size: 20px;
  text-align: left;
  text-transform: none 
}

.portfolio-concept p,
.project-goals p,
.course-goals p {
  color: lightslategray;
  font-size: 20px;
  text-align: left;
  text-transform: none;
}

.carousel {
  margin-left: -15px;
  margin-right: -15px;
}

.h1, .h2, .h3, h1, h2, h3 {
  margin-top: 60px;
  margin-bottom: 50px;
  padding-left: 50px
}

p {
  margin-top: 30px;
  margin-bottom: 25px;
  padding-left: 50px;
  padding-right: 50px;
}

#modalembed {
  height: 500px;
  width: 100%;
  padding: 10px;
}

/**video**/

iframe {
  display: block;
  margin: auto;
}



script type {
   display: block;
  margin: auto; 
}

/**** Contact page ****/


span:hover { 
  color: red; 
}

#contact p {
  text-align: center;
}

.email, .phone { 
  text-align: center;
}

.phone { 
  padding-bottom: 40px; 
} 

.image img { 
  background-size: cover; 
}

.coderedtech { 
  text-transform: uppercase; 
}

.coderedtech a { 
  color: white; 
}

#contact{
  background-image: url("../img/picseli-6732.jpg");
/*Add a background image*/
  background-attachment: fixed;
/*Give the background a fixed position does it not scroll when you scroll*/
  background-size: cover;
/*Have the background cover the entire div section*/
  color: white;
/*Change the color of the text on top so it is readable and adjust the padding as needed.*/
  padding:100px;
  padding-top: 50px;
}

.form-control {
  width: 80%;
}

.copywrite {
  float: right;
}

 /*** FAQ page ***/

.panel-heading { 
  background-color: black; 
}

.panel-title { 
  color: black; 
}

.panel-body {
  color: red; 
}

.learn-more {
  text-align: left;
  float: left;
}

.modal-button {
  padding-left: 50px;
}

.work-img {
  display: block; /* needed to center the element with margin */
  margin: auto; /* center the image inside the column if it's smaller */
  max-width: 200px; /* needs to be set to the width of your image files if they are relatively small */
  position: relative; /* is needed for .info position: absolute to work */
}




.img-responsive {
    padding-bottom: 50px;
}

.info {
  position: absolute; /* let's us move the text around and not worry about the image */
  top: 15%; /* position the text 15% away from the top */
}
.proj-title {

}

.info {
  position: absolute;
  top: 15%;
  left: 22%;
  color:#fff;
  font-family:Futura;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:0.5em;
  line-height:1.6;
  display: none;
}
.proj-title {
  font-weight:100;
}