#about-me {
    width: 60%;
    padding: 20px;
    border: 1px #000 solid;
    margin: 20px auto;
}

#portfolio-wrapper h1 {
    font-size: 36px;
    font-family:"Fascinate",sans-serif;
    color: #176B81;
    text-align: center;
}

#portfolio img {
    display: block;
    width: 70%;
    margin: 0 auto;
}



#logo img {
    width: 25%;
    padding: 10px;
}

header {
    margin-bottom: 20px;
}

#photoshop-box {
    position: relative;
    background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(44,107,167, 0.50), 
      rgba(44,107,167, 0.50)
    ),
    /* bottom, image */
    url(photoshop.jpg);
        background-size: cover;
        background-repeat: no-repeat;
     background-position: center; 
        height: 325px;
        width: 100%;

}

#photoshop-box h1{
    color:white;
    font-size: 36px;
    font-family:"Fascinate",sans-serif;
    position: absolute;
    display: block;
    width: 100%;
    text-align: center;
top: 40%;
transform: translateY(-50%);
    letter-spacing: 3px;
}

#photoshop-box img {
    width: 100%;
}

#web-box {
    position: relative;
    background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(23,107,129, 0.50), 
      rgba(23,107,129, 0.50)
    ),
    /* bottom, image */
    url(web%20design.jpg);
        background-size: cover;
        background-repeat: no-repeat;
     background-position: center; 
        height: 325px;
        width: 100%;
}

#web-box h1{
    color:white;
    font-size: 36px;
    font-family:"Fascinate",sans-serif;
    position: absolute;
    display: block;
    width: 100%;
    text-align: center;
top: 40%;
transform: translateY(-50%);
    letter-spacing: 3px;
}

#web-box img {
    width: 100%;
}

#photography-box {
    position: relative;
    background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(133,176,196, 0.50), 
      rgba(133,176,196, 0.50)
    ),
    /* bottom, image */
    url(photography.jpg);
        background-size: cover;
        background-repeat: no-repeat;
     background-position: center; 
        height: 325px;
        width: 100%;
}

#photography-box h1{
    color:white;
    font-size: 36px;
    font-family:"Fascinate",sans-serif;
    position: absolute;
    display: block;
    width: 100%;
    text-align: center;
top: 40%;
transform: translateY(-50%);
    letter-spacing: 3px;
}

#photography-box img {
    width: 100%;
}

p {
    font-family: 'Open Sans', sans-serif; 
    color: #2c6ba7;
    text-align: center;
}






.hamburger{
  background:none;
  position:absolute;
  top:0;
  right:0;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.cross{
  background:none;
  position:absolute;
  top:0px;
  right:0;
  padding:7px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:3em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1;  position:absolute; text-align:center; font-size:12px;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu li:hover{display: block;    background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu ul li a { text-decoration:none;  margin: 0px; color:#666;}
.menu ul li a:hover {  color: #666; text-decoration:none;}
.menu a{text-decoration:none; color:#666;}
.menu a:hover{text-decoration:none; color:#666;}

.glyphicon-home{
  color:white; 
  font-size:1.5em; 
  margin-top:5px; 
  margin:0 auto;
}



#carousel {
    display: none;
    width: 75%;
}


#portfolio-wrapper #carousel {
    display: block;
    margin: 0 auto;
}



@media screen and (min-width: 769px) {
    #photoshop-box {
       
        background-size: cover;
        background-repeat: no-repeat;
        height: 325px;
        width: 49.5%;
        display: inline-block;
        overflow: hidden;
        
    }
    
    #web-box {
       
        background-size: cover;
        background-repeat: no-repeat;
        height: 325px;
        width: 49.5%;
        display: inline-block;
        overflow: hidden;
        
    }
    
    #photography-box {
    
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center; 
        height: 325px;
        width:100%;
        display: inline-block;
        overflow: hidden;
    }
    
    #logo img {
    width: 13%;
}
    
    
}



@media screen and (min-width: 1024px) {
    #photoshop-box {
        width: 33%;
        overflow: hidden;
        height: 300px;
    }
    
    #web-box {
        width: 33%;
        display: inline-block;
        overflow: hidden;
        height: 300px;
    }
    
    #photography-box {
        width:33%;
        display: inline-block;
        overflow: hidden;
        height: 300px;
    }
    
    #logo img {
    width: 7%;
}
    #carousel {
        display: block;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
        overflow: hidden;
       
    }
    
    .menu {
        width: 20%;
        right: 0px;
        
    }
}