body {
}

.w100 {
    width: 100%;
    height: 100%;
}

.tile {
    width: 100%;
    height: 200px;
    position: relative;
    cursor: pointer;
    text-align: center;
    font-size: 20px;
}

.deactive a, .deactive div {
    cursor: default !important;
}

.tile a {
    width: 100%;
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.5s;
    padding-top: 85px;
    z-index: 2 !important;
    color: #fff;
    text-decoration: none;
}

.tile::after {
    content: "";
    width: 100%;
    height: 200px;
    background: #000;
    opacity: .3;
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.5s;
    z-index: 1 !important;
}

.tile:hover::after {
    animation-name: flipInX1;
    animation-duration: .7s;
    opacity: .6;
}

.tile:hover > a {
    animation-name: flipInX1;
    animation-duration: .7s;
    opacity: 1;
}

.Col {
    padding: 2px;
}

.tile_Amaken {
    background: url('/Portals/PortalAmaken/Images/Amaken.jpg') center center no-repeat;
    background-size: cover;
}

.tile_Hospital {
    background: url('/Portals/PortalHospital/Images/Hospital.jpg') center center no-repeat;
    background-size: cover;
}

.tile_EBusiness {
    background: url('/Portals/PortalEB/Images/EBusiness.jpg') center center no-repeat;
    background-size: cover;
}

.tile_Hotel {
    background: url('/Portals/PortalHotel/Images/Hotel.jpg') center center no-repeat;
    background-size: cover;
}

.tile_SoftCompanyHotel {
    background: url('/Portals/PortalCo/Images/Company.jpg') center center no-repeat;
    background-size: cover;
}

.tile_Mosaferin {
    background: url('/Portals/PortalMosaferin/Images/Mosaferin.jpg') center center no-repeat;
    background-size: cover;
}

.tile_Nezarati {
    background: url('/Portals/PortalNezarati/Images/Nezarati.jpg') center center no-repeat;
    background-size: cover;
}

.tile_Parking {
    background: url('/Portals/PortalParking/Images/Parking.jpg') center center no-repeat;
    background-size: cover;
}

.tile_Reservation {
    background: url('/Portals/PortalCo/Images/Reservation.jpg') center center no-repeat;
    background-size: cover;
}

.tile_Talar {
    background: url('/Portals/PortalTalar/Images/Talar.jpg') center center no-repeat;
    background-size: cover;
}


.tile_Etehadiye {
    background: url('/Portals/PortalEtehadiye/Images/Etehadie.jpg') center center no-repeat;
    background-size: cover;
}


@-webkit-keyframes flipInX1 {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
        transform: perspective(400px) rotate3d(1,0,0,90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: .2;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
        transform: perspective(400px) rotate3d(1,0,0,-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: .4;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,10deg);
        transform: perspective(400px) rotate3d(1,0,0,10deg);
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg);
        transform: perspective(400px) rotate3d(1,0,0,-5deg);
        opacity: .6;
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}



.title_footer {
    margin-top: 20px;
    right: 0;
    color: #000;
    z-index: 20;
    margin-bottom: 20px;
}

    .title_footer a {
        color: #000;
        text-decoration: none;
    }


.hotelmotel {
    width: 100%;
    float: right;
    margin-top: 20px;
    background: #f8f8f8;
    border: #ddd dashed 1px;
    padding: 10px;
}

    .hotelmotel p {
        margin: 0;
        font-size: 11.5px;
    }

    .hotelmotel .img {
        margin-top: 15px;
    }

@media (max-width: 375px) {
    .hotelmotel .img {
        padding: 5px;
    }

        .hotelmotel .img img {
            width: 130px;
        }
}