.contact-page{
    .text-zone{
        position: absolute; 
        align-content: center;
        left: 10%; 
        top: 30%; 
        transform: translateY(-50%); 
        max-height: 90%; 
        display: absolute;
        max-width: 80%;
        margin-top: 100px;
    }
    h1{
        color: #fff; 
        font-size: 60px; 
        margin: 0; 
        font-weight: 600; 
        cursor: pointer;
  
        &::before { 
            color: #ffd700; 
            position: absolute; 
            margin-top: -40px; 
            left: 15px; 
            opacity: 0.6; 
        }
  
        &::after { 
            color: #ffd700; 
            position: absolute; 
            margin-top: 18px; 
            left: 20px; 
            animation: fadeIn 1s 1.7s backwards; 
            opacity: 0.6; 
        }
      }
      h2{
        color: #fff;
        font-weight: 300;
      }
    .contact-form{
        width: 100%; 
        margin-top: 100px;

        ul {
            padding: 0; 
            margin: 0;

            li{
                padding: 0; 
                margin: 0; 
                list-style: none; 
                margin-bottom: 10px;
                overflow: hidden; 
                display: block; 
                position: relative; 
                opacity: 0;
                animation: fadeInUp 3s; 
                animation-fill-mode: forwards;
                clear: both;
            }

            li.half { 
                width: 49%; 
                margin-left: 2%; 
                float: left; 
                clear: none; 

                &:first-child { 
                    margin-left: 0;
                }
            }
        }

        input[type='text'], 
        input[type='email'] { 
            width: 100%; 
            border: 0; 
            background: #222;
            height: 50px; 
            font-size: 16px; 
            color: #fff;
            padding: 0 20px; 
            box-sizing: border-box;
        }

        textarea{ 
            width: 100%; 
            border: 0; 
            background: #222; 
            height: 200px; 
            font-size: 16px; 
            color: #fff; 
            padding: 20px; 
            min-height: 150px; 
            box-sizing: border-box; 
        }

        .flat-button{
            color: #ff4000; 
            background: 0 0; 
            font: 11px; 
            letter-spacing: 3px; 
            text-decoration: none; 
            padding: 8px 10px; 
            border: 1px solid #ff4000; 
            float: right; 
            border-radius: 4px;

            &:hover { 
                background: #ff4000; 
                color: #222;
            }
        }
    }

    .icon{
        width: 50px;
        margin: 30px;
        opacity: 0.8;
        color: #ff4000; 

        &:hover { 
            opacity: 1;
        }
    }
    .right-side{
        padding-left: 500px;
    }
    .left-side{
        position: absolute;
        width: 450px;
        margin-top: 100px;
    }
    @media screen and (max-width: 1150px){
        h1{
            font-size: 50px;
        }
        .text-zone{
            overflow: hidden;
        }
        .map-wrap {
            float: none; 
            width: 100%; 
            height: 400px; 
            margin: 0; 
        }
        .info-map{
            display: none; 
        }
        .left-side{
            width: 100%;
            margin-top: -15px;
            padding-left: 0;
        }
        .right-side{
            padding-left: 10000px;
        }
        .icon{
            margin: 10px;
        }
    }

}