.page-template-natural-stone-supplier-page{

    .hero-section{
        padding-top: 15vh;
        padding-bottom: 90px;

        .hero-content{
            display: flex;
            gap: 30px;
        }
        .content{
            width: 58%;
        }
        .hero-image{
            line-height: 0;
            width: 42%;
            img{
                width: 100%;
            }
        }

        @media screen and (max-width: $break-md) {
            .hero-content{
                flex-wrap: wrap;
            }
            .content{
                width: 100%;
            }
            .hero-image{
                width: 100%;
            }
        }
    }

    .map-section{
        #map-container{
            position: relative;
            #mapdiv{
                width: 100%; background-color:#EEEEEE;
                height: 500px;
            }
            #desc_overlay {
                background: #fff;
                width: 350px;
                position: absolute;
                z-index: 1000;
                display: none;
                top: -40px;
                padding: 10px 15px;
                right: 70px;
                border: 1px solid #e7f6f4;
                font-family: 'PT Sans Narrow', sans-serif;
                -webkit-box-shadow: -1px 0px 15px 0px rgba(40, 50, 50, 0.42);
                -moz-box-shadow: -1px 0px 15px 0px rgba(40, 50, 50, 0.42);
                box-shadow: -1px 0px 15px 0px rgba(40, 50, 50, 0.42);
                color: #b19777;
                #ico_close {
                    position: absolute;
                    right: 10px;
                    top: 5px;
                    cursor: pointer;
                    img{
                        width: 20px;
                    }
                }
                h2{
                    margin-top: 5px;
                    margin-bottom: 0;
                    color: #151725;
                }
                #overlay-content {
                    font-size: 16px;
                    font-weight: 300;
                    height: auto;
                    width: 100%;
                    padding: 10px 0;
                    overflow: hidden !important;
                    ul{
                        list-style: none;
                        margin-bottom: 0;
                        padding-left: 0;
                        li{
                            margin-bottom: 0;
                        }
                    }
                }
                .phoca-flagbox {
                    width: 80px;
                    height: 80px;
                    display: inline-block;
                    position: relative;
                    float: right;
                    margin-left: 5px;
                }

                @media screen and (max-width: $break-sm) {
                    width: 280px;
                    h2{
                        font-size: 30px;
                    }
                    .phoca-flagbox {
                        width: 60px;
                        height: 60px;
                    }
                }
            }
        }
    }

    .source-section{
        .source-list{
            padding-top: 60px;
            display: flex;
            flex-direction: column;
            gap: 90px;
            .source-item{
                margin-bottom: 30px;
                &:nth-child(odd){
                    .source-item-wrap{
                        flex-direction: row-reverse;
                    }
                }
                .source-item-wrap{
                    display: flex;
                    gap: 30px;
                }
                .source-item-image{
                    width: 42%;
                    text-align: center;
                    img{
                        width: 100%;
                    }
                    .caption{
                        color: #9FA2B9;
                        margin-bottom: 0;
                    }
                }
                .source-item-content{
                    width: 58%;
                    .content{
 
                    }

                }
            }
        }
        @media screen and (max-width: $break-md) {
            .source-list{
                gap: 60px;
                .source-item{
                    .source-item-wrap{
                        flex-direction: column-reverse !important;
                        flex-wrap: wrap;
                    }
                    .source-item-image{
                        width: 100%;
                    }
                    .source-item-content{
                        width: 100%;
                    }
                }
            }
        }
    }

    .contact-section{
        padding-bottom: 120px;
        .heading{
            font-size: 16px;
            letter-spacing: 2px;
            color: $primary-color;
        }
        .form-container{
            div.gform_wrapper{
                form{
                    div.gform_body.gform-body{
                        .gform_fields{
                            .gfield{
                                .gform-field-label{
                                    display: none;
                                }
                                .ginput_container{
                                    input{
                                        color: #9FA2B9;
                                    }
                                    textarea{
                                        min-block-size: 117px;
                                        height: 117px;
                                        color: #9FA2B9;
                                    }
                                }
                            }
                    }
                        }
                }
            }
        }
        @media screen and (max-width: $break-md) {
            padding-bottom: 90px;
        }
    }

}