.nav{
  background-color: white;
  width: 100%;  
}
#logo{
    text-align: center;
    margin-top: 50px;
}
nav{
    float: right;
    display: inline;
}
#follow{
  background-image: url("../images/concrete_seamless.png");
  margin-top: 150px;
  width: 100%;
}
.jumbotron{
    background-image: url("../images/jum.jpg");
    color: white;
}
body{
    background-image: url("../images/website.png");
    opacity: 0.9;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

nav li {
    display: inline-block;
  
    /* Box-model */
    padding-left: 15px;
  
    /* Positioning */
    margin-left: 15px;
  
    /* Typography */
    line-height: 18px;
  
    /* Visual */
    border-left: 1px solid #efefef;
  }
  
  nav a {
    /* Typography */
    color:white;
    text-decoration: none;
  }
  
  nav a:hover {
    color:white;
    background-color:gray;
  }
  
  nav li:first-child {
    /* Box-model */
    padding-left: 0;
  
    /* Positioning */
    margin-left: 0;
  
    /* Visual */
    border-left: 0 none;
  }
  

  .main-section {
    width: 100%;
    background-image: url("../images/concrete_seamless.png");
    margin-top: 150px;
  }
  
#carousel-example-generic{
  width: 100%;
  height: 100%;
}
#abtwork{
  background-color: #4aaaa5;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 20px;
  border-radius: 40px;
  padding: 20px;
  margin: 10px;
  height: 280px;
  font-size: 20px;
  font-family: cursive;
  overflow: auto;
}
p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
}
h1,h2{
  text-align: center;
  padding: 10px;
}
h1{
  color: rgb(24, 73, 50);
}

  footer{
            /* Box-model */
        padding: 30px 0;

        /* Positioning */
        clear: both;
        font-size: 12px;

        /* Typography */
        color: #ccc;
        text-align: center;

        /* Visual */
        background: rgb(102, 100, 100);
        border-top: 8px solid #4aaaa5;
  }
  footer .nav{
        background: rgb(102, 100, 100);
       
  }


  /*form*/

  

  form{
    width: 100%;
    
    padding: 20px;
    border-radius: 0px;
  }
  #formset{
    margin-top: 150px;
    margin-bottom: 150px;
    background-image: url("../images/concrete_seamless.png");
  }



  /*back to top*/
  
  #myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: rgb(173, 38, 38);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
  }  

  #myBtn:hover {
    background-color: rgb(54, 126, 145);
  }


  /*project styling*/

  .image {
    opacity: 1;
    display: block;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
  }
  
  
  .middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .container:hover .image {
    opacity: 0.6;
    transform:scale(1.3);
	transition:1s;
  }
  
  .container:hover .middle {
    opacity: 1;
  }
  
  .text1,.text2 {
    background-color: rgb(216, 37, 37);
    border-radius: 100px;
    color: white;
    /*display: inline;*/
    margin:5px;
    font-size: 16px;
    width: 100px;
    padding: 20px;
  }
  

  a:hover{
    text-decoration: none;
  }


  /*portfolio*/

  #portfolio{
    margin-top: 150px;
    margin-bottom: 150px;
    background-image: url("../images/concrete_seamless.png");
  }

  

  #project1,#project2,#project3{
    background-color: white;
    margin: 10px;
    padding: 10px;
    width: 30%;
    color:black;
    text-align: center;
  }

  #projectabt{
    font-style: italic;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

  }

.img-wrapper{
  height: 85%;
  width: 85%;
}




  .hover1{
 
    height:85%;
    width: 85%;
  }

  .hover2{
    height: 50%;
    width: 50%;
  }


  

.img-wrapper img {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    vertical-align: middle;
}

.img-wrapper img:hover {
    transform:scale(1.1);
    -ms-transform:scale(1.1); /* IE 9 */
    -moz-transform:scale(1.1); /* Firefox */
    -webkit-transform:scale(1.1); /* Safari and Chrome */
    -o-transform:scale(1.1); /* Opera */
}


.btn-change{
  height: 50px;
  width: 100px;
  background: white;
  margin: 20px;
  float: left;
  box-shadow: 0 0 1px #ccc;
  -webkit-transition: all 0.5s ease-in-out;
  border: 0px;
  color: #fff;
}
.btn-change:hover{
  -webkit-transform: scale(1.1);
  background: white;
}