@charset "utf-8";
/* CSS Document */

body {
  font-family: 'Lato', sans-serif;
}
h1 {
  /*! text-align: center; */
  margin-top: 50px;
}
h3 {
  /*! letter-spacing: 1px; */
  /*! line-height: 25px; */
  /*! margin: 0; */
  color: #ffffff;
}
h4 {
  text-align: center;
  font-weight: normal;
}
p {
  /*! line-height: 25px; */
  /*! margin: 0; */
  /*! color: #ffffff; */
  font-size: 15px;
  font-family: 'Questrial-Regular';
  color: #fff;
  line-height: 20px;
}
#content {
  margin-top: 50px;
  margin-bottom: 30px;
  width: 100%;
  overflow:hidden;
}
.item-1 {
   width: 95%; 
   margin: 0%; 
   float: left; 
   overflow: hidden; 
   position: relative; 
}
.item img {
  /*! max-width: 100%; */
  /*! display: block; */
  /*! transition: all 0.5s ease; */
}

/*effect 1*/
.e1 img {
  -webkit-filter: grayscale(85%);
  filter: grayscale(85%);
  transition: all 0.3s ease;
}
.text1 {
  position: absolute;
  bottom: 5%;
  left: 20px;
  color: #ffffff;
  transition: all 0.5s ease;
  cursor: pointer;
}
.text1 p {
  text-align: left;
  opacity: 0;
}
.e1:hover img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}
.e1:hover .text1 {
  position: absolute;
  bottom: 18%;
}
.e1:hover p {
  opacity: 1;
}

/*effect 2*/
.text2 {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 42%;
  cursor: pointer;
}
.e2 img {
  transition: all 0.4s ease;
}
.line{
  position:absolute;
  width: 0px;
  height: 0px;
  transition: all 0.5s ease;
  background: #ffffff;
}
.top{
  top:10%;
  left:50%;
}
.bottom{
  bottom:10%;
  left:50%;
}
.left{
  top:50%;
  left:10%;
}
.right{
  top:50%;
  right:10%;
}
.e2:hover img {
  -webkit-filter: brightness(.6);
}
.e2:hover .top{
  left:10%;
  width: 80%;
  height: 1px;
}
.e2:hover .bottom{
  left:10%;
  width: 80%;
  height: 1px;
}
.e2:hover .left{
  top:10%;
  width: 1px;
  height: 80%;
}
.e2:hover .right{
  top:10%;
  width: 1px;
  height: 80%;
}

/*effect 3*/
.text3 h3 {
  position: absolute;
  top: 19%;
  left:10%;
  padding:1.5%;
  border:1px solid #ffffff;
    cursor: pointer;
}

.text3 p{
  position: absolute;
  top: 45%;
  left:10%;
  opacity:0;
  transition: all 0.5s ease;
    cursor: pointer;
}

.e3:hover p{
  position: absolute;
  top: 37%;
  left:10%;
  opacity:1;
}

.e3:hover img{
-webkit-filter: blur(1px); /* Chrome, Safari, Opera */
    filter: blur(1px);
  transition: all 0.5s ease;
}

/*effect 4*/
.text4 {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 37%;
  opacity:0;
  transition: all 0.5s ease;
  cursor: pointer;
}
.text4 p{
  margin-top:20px;
}

.middle{
  position:absolute;
  top:50%;
  left:50%;
}

#e4bk{
  position:absolute;
  top:0%;
  left:0%;
  width:100%;
  height:100%;
  background:#FF1654;
  opacity:0;
  transition: all 0.5s ease;
}
#e4bk:after{
   background-color: #000000;
    content: '';
    display: block;
    position: absolute;
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
  opacity:0;
  transition: all 0.5s ease;
}

.e4:hover .text4{
  opacity:1;
}

.e4:hover .middle{
  position: absolute;
  top: 50%;
  left:32%;
  width:36%;
  height:1px;
}

.e4:hover #e4bk{
  opacity:0.2;
}
.e4:hover #e4bk:after{
  opacity:1;
}

/*effect 5*/
.text5 {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 55%;
  opacity:0;
  transition: all 0.5s ease;
    cursor: pointer;
}
#e5bk{
  position:absolute;
  top:0%;
  left:3%;
  width:94%;
  height:86%;
  background:#000000;
  opacity:0;
  transition: all 0.5s ease;
}
.inside{
  position:absolute;
  top:68%;
  left:50%;
}
.e5:hover .text5{
  opacity:1;
  position: absolute;
  top: 42%;
}
.e5:hover #e5bk{
  opacity:0.6;
}

.e5:hover .line{
  position: absolute;
  top: 68%;
  left:30%;
  width:40%;
  height:1px;
}

/* effect 6 */
.text6 {
  text-align: left;
  position: absolute;
  width: 90%;
  bottom:0;
  padding:5% 0 5% 10%;
  opacity:0;
  transition: all 0.5s ease;
    cursor: pointer;
}

.e6:hover .text6{
  position: absolute;
  bottom:0;
  opacity:1;
  background:rgba(0,0,0,0.6);
}

@media only screen and (max-width: 480px) { 

#e5bk {
    position: absolute;
    top: 0%;
    left: 4%;
    width: 91%;
    height: 85%;
    background: #000000;
    opacity: 0;
    transition: all 0.5s ease;
}

}


@media only screen and (min-width: 768px) and (max-width: 1024px) {
#e5bk {
	left: 11%;
	width: 78%;
}
p {
	font-size:13px;
}
h3 {
	font-size:20px;
}
}