*{
    margin: 0;
    padding: 0;
}

*,::after, ::before{
    box-sizing:border-box;
}

html {  
    font-family: sans-serif;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.1s;
}


body{
    margin: 0;
    padding: 0;
    color: black;
    background: #f1f2f2;
}
/**************************
FORMS
***************************/

form {
  width: 100%;
}

input, textarea {
  border: 1px solid #9f782d;
  border-radius: 20px;
  min-height: 40px;
  font-family: "Oswald";
  padding: 10px 10px;
  display: block;
  width: 100%;
  margin-bottom: 15px;
  color: #545454;
}

textarea {
  min-height: 120px;
}

.video-manage {
  max-width: 500px;
  margin: 0 auto;
}

/**************************
BODY
***************************/

      .content{
       width: 100%;
       margin-top: 100vh;
       padding: 120px;
}
       
       .content-title,.effect-title{
           width: 100%;
           text-align: center;
           padding: 45px 0 30px 0;
           font-size: 25px;
      
       }
   
       .effect-title h4{ 
           font-size: 25px;
       }
       
       .content-title{
           width: 100%;
           height: 1px;
           left:0;
       }

         .column{
           width: 100%;
           padding: 20px 50px;
           max-width: 100%;
       }
       
       .section-title{
 
           width: 100%;
           text-align: center;
           padding: 45px 0 30px 0;
       }
   
       .section-title::after{
           content: "";
           width: 100%;
           height: 1px;
           left:0;
           background: #eee;
       }
   
       .row{
           display: flex;
           flex-wrap: wrap;
           margin-left: -15px;
           margin-right: -15px;
       }

        .effect{
           margin-bottom: 30px;
           overflow: hidden;
       }
       
       .effect .effect-img{
       font-size: 0;
       border: 3px solid #fff;
       overflow:hidden;
       border-radius:6px;
       }
   
       
       .effect .effect-img img{
           width: 100%;
           height: auto; 
           display: block;
           transition: 0.3s ease-in-out;   
       }
       
       .effect .effect-img img{
           /*transform: scale(1.2);*/
           height: 300px;
       }
       
       .effect-img:after{
           width: 100%;
           position: absolute;
           left:0;
       }
       
       .effect-img:after{
             width: 100%;
           height: 100%;
           top:0;
           transition: 0.5s;
       }
       
       .effect-img:hover img{
           display: block;
           -webkit-transform: scale(1);
           transform: scale(1);
       }

        .effect .effect-menu {
           background: rgba(0,0,0,0.5);
           cursor: pointer;
           position: relative;
           width: 100%;
           text-align: center;  
           justify-content: center;
           opacity: 0;
           transition: all 0.3s;
           top:0px;
           bottom:0px;
           left: 0px;
           right:0px;
           display: flex;
           overflow: hidden;
           margin: 0;
       }
       
       
       .effect .effect-menu .menu{
           position: relative;
           width: 100%;
           z-index:1;
           justify-content: center;
           display: inline-block;
           list-style: none;
           background-color: #bbbba4;
           top:0;
           bottom: 0;
           overflow: hidden;
       }
   
   
       .effect .effect-menu:before,
       .effect .effect-menu:after,
       .effect .effect-des:before,
       .effect .effect-des:after{
       position: absolute;
       display: flex;
       width: 100%;
       height: 0;
       content: '';
       }
       
       .effect .effect-menu:before{
           border-top: 3px solid #000;
           border: 3px solid #000;
           left:-100%;
           top:0;
       }
       
     .effect .effect-menu :after{
           border-bottom: 3px solid #000;
           border: 3px solid #000;
           left:100%;
           bottom:0;
       }
       
       .effect:hover .effect-menu,
       .effect:hover .effect-des{
           opacity: 1;
       }
   
       .effect:hover .effect-menu:after,
       .effect:hover .effect-menu:before, 
       .effect:hover .effect-des:after,
       .effect:hover .effect-des:before{
       
           animation-delay: .1s;
           animation-duration: .5s;
           animation-iteration-count: 1;
           animation-timing-function: ease-in-out;
           animation-fill-mode: forwards;
       }
   
       .effect:hover .effect-menu:after{
           animation-name: left-up;
       }
   
       .effect:hover .effect-menu:before{
           animation-name: right-dn;
       }
       
       .effect-menu .menu li{
           display:flex;
           width: 100%;
           justify-content: center;
           list-style: none;
           text-decoration: none;
           padding:20px 40px;
           cursor: pointer;
       }
       
       .effect-menu .menu li a{
           text-decoration: none;
           padding: 10px 20px;
            color:#000;
            cursor: pointer;
       
       }
       
       .effect-menu .menu li :hover{
           background-color:#c85c5c;
           width: 100%;
           color: #fff;
           transition: ease all 0.4s;
           padding:20px 80px;
           border: 2px solid #000;
           justify-content: center;
       }
   
       .effect .effect-des{
       background: rgba(181, 170, 170, 0.5);
       cursor: default;
       position: relative;
        width: 100%;
        height: 43.3%;
        transform: translate(0px, -697px);
       text-align: center;  
       justify-content: center;
       opacity: 0;
       transition: all 0.3s;
       top:0px;
       bottom:0px;
       left: 0px;
       right:0px;
       display: flex;
       overflow: hidden;
       margin: 0;
       }
   
      .effect .effect-des .para{
           position: relative;
           z-index:1;
           width: 100%;
           height: 43.3%;
           justify-content: center;
           display: block;
           top:0;
           bottom: 0;
           font-size: 18px;
           color:#fff;
           line-height: 2em;
           padding: 50px 30px;
       }
   
       @media only screen and (min-width: 995px) and (max-width: 1px) {
       
       }
       
       
       @media(min-width:992px){
           .column{
               flex:0 0 33.333333%;
               max-width: 33.333333%;
           }
       }
       
       @media (max-width:767px){
       .inner-text h2{
           font-size:16px;
       }
       }
       
    
    @-webkit-keyframes left-up{
        0%{
            left:100%;
            height:0;
        }
    
        50%{
            left: 0;
            height: 0;
        }
    
        100%{
            height: 100%;
            left:0;
        }
    }
    
    @-webkit-keyframes right-dn{
        0%{
            left:-100%;
            height:0;
        }
    
        50%{
            left: 0;
            height: 0;
        }
    
        100%{
            height: 100%;
            left:0;
        }
    }