/*================================================
    11. 404 CSS
=================================================*/
#ic-error-page {
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #f6f6f6;
    height: 100vh;
    //Responsive
    @media #{$tablet-device}{
        height: auto;
    }
    @media #{$large-mobile}{
        height: auto;
    }

    .ic-error-page-content{
        padding: 85px 0 100px;
        //Responsive
        @media #{$tablet-device}{
            padding: 50px 0 10px;
        }
        @media #{$large-mobile}{
            padding: 50px 0 10px;
        }
    }

    .ic-error-img img{
        height: 100vh;
        //Responsive
        @media #{$tablet-device}{
            height: auto;
        }
        @media #{$large-mobile}{
            height: auto;
        }
    }

    .ic-content-text {
        margin-bottom: 75px;
    }

    .ic-btn-g {
        margin-bottom: 40px;
    }

    .ic-content-text {
        .ic-et-text {
            color: $primary;
            font-weight: 900;
        }

        .ic-numeric {
            font-family: "lato", sans-serif;
            font-size: 300px;
            line-height: .85;
            //Responsive
            @media #{$laptop-device}{
                font-size: 200px;
            }
            @media #{$desktop-device}{
                font-size: 150px;
            }
            @media #{$tablet-device}{
                font-size: 150px;
            }
            @media #{$large-mobile}{
                font-size: 150px;
            }
        }

        .ic-text-s,
        h1 {
            font-family: 'Playfair Display', serif;
        }

        .ic-text-s {
            font-size: 72px;
            //Responsive
            @media #{$desktop-device}{
                font-size: 56px;
            }
            @media #{$tablet-device}{
                font-size: 56px;
            }
            @media #{$large-mobile}{
                font-size: 56px;
            }
        }

        h1 {
            text-transform: capitalize;
            margin-bottom: 26px;
            @media #{$desktop-device}{
                font-size: 24px;
            }
            @media #{$tablet-device}{
                font-size: 24px;
            }
            @media #{$large-mobile}{
                font-size: 24px;
                line-height: 32px;
            }
        }

        h3 {
            font-weight: bold;
            font-family: "lato", sans-serif;
            color: $text-color;
            text-transform: none;
            line-height: 1.5;
            //Responsive
            @media #{$desktop-device}{
                font-size: 20px;
            }
            @media #{$tablet-device}{
                font-size: 18px;
            }
            @media #{$large-mobile}{
                font-size: 18px;
            }
        }
    }

    ul.social {
        width: 100%;

        li {
            a {
                width: 40px;
                height: 40px;
                border: 0;

                i {
                    color: $primary;
                    font-size: 25px;
                }

                &:hover {
                    background-color: $primary;

                    i {
                        color: $white;
                    }
                }
            }

            &:not(:last-child) {
                margin-right: 7px;
            }
        }
    }
}