﻿.rtb { position: relative; }
.img-responsive { display: block; max-width: 100%; height: auto; }


.box-all { position: absolute; top: 0; background: rgba(0, 0, 0, 0.7); text-align: center; right: 0; left: 0; box-shadow: 2px 2px 2px 2px #ffeb3b; }

.contactbox { width: 39%; margin: 8% auto; padding: 50px; border-radius: 10px; }

.box-contact { position: relative; width: 35%; z-index: 999; top: 0; right: 0; margin: 8% auto; text-align: center; box-shadow: 0px 0px 12px 4px #ddd; padding: 30px; }
.box-fixed { position: fixed; top: 0; background: rgba(0, 0, 0, 0.5); bottom: 0; content: ''; right: 0; left: 0; }



.box-contact h3, .aboutbox h3 { text-transform: uppercase; font-size: 25px; margin-bottom: 45px; color: #fff; position: relative; padding-bottom: 6px; }

    .box-contact h3:after, .box-contact h3:before, .aboutbox h3:after, .aboutbox h3:before { position: absolute; left: 0; right: 0; content: ''; text-align: center; margin: auto; }

    .box-contact h3:after, .aboutbox h3:after { bottom: -10px; width: 120px; height: 3px; background: #fbeb45; }
    .box-contact h3:before, .aboutbox h3:before { width: 10px; height: 10px; background: #fff; border-radius: 50%; bottom: -13px; z-index: 99; }
.aboutbox p { font-size: 17px; color: #fff; line-height: 26px; }
.aboutbox a { display: inline-block; background: #e4ce0f; padding: 13px 28px; border-radius: 50px; color: #141414; text-decoration: none; margin-top: 20px; transition: all .5s ease-in-out; }
    .aboutbox a:hover { background: #1fa77e; color: #fff; }
.error { position: absolute; right: 10px; top: 16px; color: #e90606 !important; z-index: 9; }


.textfrm label, .textfrm span { font-size: 13px; color: #fff; }
.textfrm { margin-bottom: 10px; }
    .textfrm i { position: absolute; top: 13px; font-size: 13px; color: #bbbbbb; left: 16px; border-right: 1px solid #bbbbbb; padding-right: 10px; width: 22px; text-align: center; }

    .textfrm .itext { display: block; color: #000; outline: none; transition: 0.5s all ease; font-size: 12px; padding: 13px 10px 13px 48px; width: 100%; border: 1px solid #eee; transition: 0.4s all ease; border-radius: 4px; box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02); }
        .textfrm .itext:focus { border: 1px solid #1fa77e; }
.mr5 { margin-right: 5px; }
.btnsub { background: #FFEB3B; padding: 12px 10px; display: block; width: 100%; border: 1px solid #e2d02c; transition: all .5s ease-in-out; }
    .btnsub:hover { border: 1px solid #1fa77e; background: #1fa77e; color: #fff; }

.aboutbox { width: 50%; margin: 10% auto; text-align: center; position: relative; }

@media only screen and (max-width: 480px) {
    .s3d__navigation-link { font-size: 11px !important; border-radius: inherit; text-align: center; padding: 10px !important; height: auto !important; }
        .s3d__navigation-link:before, .s3d__navigation-link:after { display: none; }

    .aboutbox p { font-size: 12px; color: #fff; line-height: 17px; }
    .aboutbox a { padding: 9px 20px; font-size: 12px; }
}

@media only screen and (max-width: 600px) {
    .box-contact, .aboutbox { width: 97%; }
    .s3d__side:nth-child(1) { background-image: url("../images/imgn1.jpg"); }

    .s3d__navigation { top: 0; transform: translateY(0); position: relative; overflow: hidden; }
    .s3d__navigation-item { list-style: none; margin-bottom: 5px; float: left; overflow: hidden; position: relative; }
        .s3d__navigation-item.active .s3d__navigation-link { right: 0; }
    .s3d__navigation-link { padding: 10px 23px; right: 0; padding-right: 0; font-size: 13px; margin: 5px; }

        .s3d__navigation-link:hover { right: 0 !important; opacity: 1; }

        .s3d__navigation-link:before { top: 8px; }
        .s3d__navigation-link:after { top: 10px; }
}
