.solution-internal{
    padding-top:0;
    position: relative;
    .solution-header{
        padding: 20px 0 50px 0;
        background:$black;
        .breadcrumb{
            padding:5px 20px;
            border-radius: 20px;
            background: $black-dark;
            float: left;
            overflow: hidden;
            margin-bottom:30px;
            li{
                float: left;
                color: $black-light;
                font-size: 1.1rem;
                a{
                    color: $black-light;
                    &:hover{
                        color:$yellow;
                    }
                }
            }
        }
        h1{
            font-size: 3.2rem;
            font-weight: 500;
            color:$yellow;
            position: relative;
            padding:0px 0 70px 0;
            margin-bottom: 30px;
            &:before{
                @include transition();
                content:'';
                display: block;
                background: $yellow;
                width: 30px;
                height:4px;
                position: absolute;
                bottom:0;
                border-radius: 8px;
            }
        }
    }
    .product-detail{
        border-bottom:1px solid $gray-light;
        p{
            font-size: 1.6rem;
            color:#666666;
            line-height: 2;
            font-family: 'Roboto', sans-serif;
            a{
                color:$yellow;
                text-decoration:underline;
            }
            strong{
                color: $black-dark;
            }
        }
        figure{
            @include flexbox();
            @include justify-content(center);
            @include align-items(center);
            margin:40px 0;
            img{
                max-width: 100%;
            }
        }
        .summary{
            padding-bottom:30px;
        }   
    }
    .talk-to-experts{
        position: absolute;
        top:0;
        left:50%;
        max-width: 350px;
        margin-left: 225px;
        .form{
            background: $black-dark;
            h2{
                color:$gray-light;
            }
            h1{
                color:$yellow;
            }
            .form-control{
                background: $black;
                border-color: $black;
                color:$white;
                &.error{
                    border-color:red;
                }
            }
            .select{
                border-color:$black;
                select{
                    background: $black;
                    color:$white;
                }
            }
        }
    }
    &.service{
        .solution-header{
            padding-top:0;
            h1{
                padding: 0;
                &:before{
                    display: none;
                }
            }
            p{
                font-size: 2.4rem;
                padding:0px 0 50px 0;
                position: relative;
                display: block;
                &:before{
                    @include transition();
                    content:'';
                    display: block;
                    background: $yellow;
                    width: 30px;
                    height:4px;
                    position: absolute;
                    bottom:0;
                    border-radius: 8px;
                }
            }
            .breadcrumb{
                position: relative;
                top:-11px;
            }
            .banner{
                width: 100%;
                height: 280px;
                background-size: cover;
                background-position: center;
            }
        }
        .talk-to-experts{
            top:240px;
        }
    }
}

@include breakpoint(992px){
    .solution-internal{
        .solution-header{
            padding:20px 0;
            .breadcrumb{
                display: none;
            }
            h1{
                padding-bottom: 30px;
                margin-bottom: 10px;
            }
        }
        .talk-to-experts{
            position: relative;
            width:100%;
            padding: 0;
            flex-basis: 100%;
            left: 0;
            top:0!important;
            max-width: 100%;
            margin:30px 0 0;
            .form{
                .form-control{
                    width: calc(50% - 10px);
                    float: left;
                    &:nth-child(2n+2){
                        float: right;
                    }
                }
            }
        }
        .related{
            margin-top: 40px;
        }
        &.service{
            .solution-header{
                .banner{
                    height: 112px;
                }
                h1{
                    padding:20px 0 0;
                    font-size: 2.6rem;
                }
                p{
                    padding:0 0 30px;
                }
            }
        }
    }
}

@include breakpoint(500px){
    .solution-internal{
        .talk-to-experts{
            .form{
                .form-control{
                    width: 100%;
                }
            }
        }
        .related{
            margin-top: 0;
        }
        &.service{
            .solution-header{
                .banner{
                    height: 50px;
                }
            }
        }
    }
}