@charset "utf-8";
*{box-sizing:border-box;outline:0}
html{height:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0;padding:0;font-family:'Raleway';font-weight:normal;height:100%;color: #353535;width:  100%;overflow:  hidden;}
ul,li{margin:0;padding:0;text-decoration:none;display:block;list-style:none}
input,textarea{outline:0;display:block}
h1,h2,h3,h4,h5{margin:0;padding:0;text-transform:none; font-weight: 600;}
h1{font-size:21px}
h2{font-size:19px}
h3{font-size:17px}
h4{font-size:16px}
h5{font-size:15px}

.fs-30{ font-size: 30px;}

.intro{height: 100%;overflow: hidden;}
.box1{background: url(../images/mobilya2.jpg) no-repeat;background-position: -200px center;background-size:  cover;}
.box2{background: url(../images/beyazesya.jpg) no-repeat;background-position: -200px center;background-size:  cover;}

#introBox{position: relative;transition:  all .5s;overflow:  hidden;}
#introBox:before{
    content: '';
    position: absolute;
    background: rgba(0, 0, 0, 0.52) none repeat scroll 0 0;
    height: 200%;
    left: 0;
    top: 0;
    transition: all 0.6s ease 0s;
    width: 250%;
    transform: skew(45deg) translateX(40%);
}
#introBox:after{
    background: rgba(0, 0, 0, 0.52) none repeat scroll 0 0;
    content: "";
    height: 200%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all 0.6s ease 0s;
    width: 250%;
    transform: skew(45deg) translateX(-60%);
}
#introBox div{ position: relative; z-index: 99;}
#introBox:hover:before{
    transform: skew(45deg) translateX(0px);
}
#introBox:hover:after{
    transform: skew(45deg) translateX(0px);
}
#introBox:hover{text-decoration: none !important;background-position: center center;}


@media (max-width: 991px) {
    .box1, .box2{ background-position: 0px center}
    #introBox{ height: 50%;}

}