/* Css for my portfolio page */
/* Designed 7-19-22 */

/**** MAIN LAYOUT ****/

html,
body {
    margin:0;
    padding:0;
    height:100%;
    overflow-x: hidden;
}
body{
    font-family: sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-family: sans-serif;
    /*-webkit-text-shadow:2px 2px #000;
    -moz-text-shadow:2px 2px #000;
    -o-text-shadow:2px 2px #000;
    text-shadow:2px 2px #000;*/
    font-weight: 700;
}
p{
    font-size:24px;
    color:#A52A2A;
}
#footer2 {
    background:#222;
    border-top:3px solid #A52A2A; 
}
footer p{
    text-align:center;
    margin-right:auto;
    margin-left:auto;
    font-size:20px;
    color:#fff;
}
section {
    padding-bottom: 40px;
}
section h2{
    padding-top:40px;
}
hr.style15 {
padding-bottom:0;
border: 0;
width:150px;
height:5px;
background-color:#A52A2A;
background-repeat: no-repeat;
}
/**** BACK TO TOP ****/
a.back-to-top {
    display: none;
    width: 60px;
    height: 60px;
    text-indent: -9999px;
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 20px;
    background: #222 url("double_arrow.png") no-repeat center 50%;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

/**** PORTFOLIO ****/
#portfolio {
    background-image: url(patternblack-wood.jpg);
    border-top:3px solid #FFE4E1;
    border-bottom:3px solid #FFE4E1;
}
#portfolioh2{
    color:#fff; 
    font-size:50px;
}
#portfolio img{
    width:100%;
    height:295px;
    margin-bottom:10px;
    margin:15px 0 15px 0;
}
/*Hover Over Images*/
.hovereffect {
    /*float: left;*/
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}
.hovereffect .overlay {
  position: absolute;
  overflow:hidden;
  top: 15px;
  bottom: 0;
  left: 0;
  right: 0;
  width:100%;
  height:295px;
  opacity: 0;
  transition: .5s ease;
  background-color: #222 !important;
}
.hovereffect img {
    display: block;
    /*position: relative;*/
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    /*padding:15px 0 15px 0;*/
    padding:0; 
    /*width:100% !important;*/
}
.hovereffect h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
}
.hovereffect p {
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 14px;
    padding: 10px;
}
.hovereffect a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #fff;
    margin: 50px 0 0 0;
    background-color: transparent;
    /*-webkit-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;*/
}
.hovereffect a.info:hover {
    box-shadow: 0 0 5px #fff;
}

.hovereffect:hover .overlay {
    opacity: 0.9;
}
.hovereffect:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

.hovereffect:hover h2 {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

@media only screen and (min-width:600px) and (max-width:768px){
    #portfolio {
        width:100%;
    }
    #portfolio img{
        width:100%;
        height:470px !important;
        padding-bottom:85px !important;
    }
    .hovereffect .overlay {
        top: 15px;
        height:385px !important;
    }
}/*end of query*/
@media only screen and (min-width:768px) and (max-width:1024px){
    #portfolio {
        width:100%;
    }
    #portfolio img{
        width:100%;
        height:590px !important;
    }
    .hovereffect .overlay {
        top: 15px;
        height:510px !important;
    }
}/*end of query*/