﻿
body {
    font-family: "Metropolis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.mandate {color: red !important;}
label{font-size:14px !important}
.clear{clear:both;}
.create{text-align:center;padding:1% 0; color:#fff !important;}
.wrap{width:100%; max-width:100%;}
.headerofdoc{text-align:center; font-size:70px;}
.subwrap{width:1200px;max-width:100%;}
 ul li{list-style-type:none}
 .footerinfo{background-color:#444647;}
 .footeragentinfo{color:#000; margin:auto;padding:0 1%; width:1200px;}
 #header2 .subhead {width:49%;display:inline-block;}
 #header3 h2{padding:0 5%}
.profileimg img{height:110px; width:100%;}
.siginfo p{font-size:17px; margin:5px 0;}
.tx p{font-size:15px;padding-left:10px;text-align:justify;}
.sociallinks{padding-top:4%;}
.sociallinks .slinks{vertical-align:top}
.siginfo .mail{font-size:15px;}
.tx p{margin-bottom:0 !important}
.footerinfo .leftsociallinks, .rightsociallinks{width:40%;display:inline-block;text-align:left;}
#sigsubinfo{text-align:justify; padding:5%;font-size:15px;}
#sigsubinfo p{margin:0}
.footerinfo .disclosurelink{text-align:center}
.footerinfo .disclosurelink p{margin:0; color:#fff;}
.footerinfo .disclosurelink a{font-size:13px;color:#fff !important;}
.footerinfo .disclosurelink a:hover{color:#fff !important;}
.footerinfo hr{margin:10px 0;}
#fb {color: #4267B2} #insta{color:#e95950} #wtsup{color:#4fce5d}  #wechat{color:#09b83e} #snap{color:#fffc00}
#tq {font-size: 25px;margin: 20px 5px;font-weight: 600;text-align: center;}

/*prospect*/
#prospectwrapper #prospectheader {text-align: center;padding: 20px;margin: auto}
.prostext{display:inline-block;width:24%;}
#prospectwrapper #texts {padding: 5px;height: auto;width: 70%;display: inline-block;font-size: 25px;margin:auto;}
#prospectwrapper ul {display: inline-block;width: 30%;padding: 30px;margin:0 2%;font-size: 18px;list-style:none;}
.prospecttype{font-size:20px;padding:1% 4%;background-color:#ddd;}
#prospectwrapper #agentdetails {display: inline-block;box-shadow: 1px 1px 3px 2px #ddd;width: 35%;background-color: #ffffff9e;height: auto;text-align:left;color:#000 !important}
#prospectheader{margin-bottom:20px;}
#prospectwrapper label {font-size: 15px;}

/*youtube*/
#youtubewrapper {width: 100%;max-width: 100%}
#header2, #header3{padding:1% 2%; text-align:left;color:#fff !important;}
 #youtubeagentinformation #agentphoto, #agentaddress{display:inline-block;padding:1%;}
 #youtubeagentinformation #agentphoto{float:left;}
 #youtubeagentinformation #agentaddress{float:right;}
#youtubewrapper #propertydetails #propertydescription{float:left;}
#youtubewrapper #propertydetails #propertytype{float:right;}
#youtubewrapper #description ,#propertytype{height:auto !important;background-color:#ddd;}
#youtubewrapper #propertydetails .propertysection{display:inline;}
#youtubewrapper #propertydetails #proplist{top:-55px; position:relative}
#youtubewrapper #youtubeheader { text-align: center; margin: auto; overflow: hidden; }
#youtubewrapper #video {text-align: center;height: 630px;width: 77%;display: inline-block;float:left;margin:50px 0 20px 0;}
#youtubewrapper #agentdetails {display: inline-block;box-shadow: 2px 1px 8px 2px #ddd;width: 22%;margin: 50px 0 20px 0;background-color: #fff;float: right;color: #000 !important;}
#youtubewrapper label {font-size: 15px;}
#propertydetails #description{float:left;}
#propertydetails #propertytype{float:right;}
.footeragentinfo .agentsignature{float:left;}
.footeragentinfo .qrcode{float:right;}

    /*Register*/
#leadregister{width:100%; max-width:100%}
#leadregister .container {width: 75%;margin: 25px 0 25px 0;padding: 10px 10px 10px 0;float: left;}
.space{width:1200px;margin:auto;height:100px;}
#leadregister #thumbnails,#thumbnails2{padding: 1%;margin: 25px auto;text-align: justify;width: 10%;height: auto;}
#thumbnails{float:left}
#thumbnails2{float:right}
#leadregister form {box-shadow: 1px 2px 10px #dad0d0;padding: 10px;background-color:#fff;/*height:580px;*/height:auto;}
#leadregister #info {width: 25%;display: inline-block;padding-top:10px;margin:25px 0 25px 0;color:#000 !important;}
#leadregister #info .search-fields {padding: 5px 10px;}
.clear {clear: both;}
#leadregister #thumbnails img, #thumbnails2 img {margin: 8% auto;}
#leadregister  #infosubmit {background-color: #0061f2;color: #fff;padding: 10px;border-radius: 10px;border: none;font-size: 18px;outline: none;}

 /*Properties*/
#leadproperties #info {padding: 2%;width: 30%;background-color: #fff;color: #000 !important;}
#leadproperties .desc h1{font-size:35px;font-weight:700;}
#leadproperties #info label{font-size:15px;}
#leadproperties #info #infosubmit {width: 50% !important;border: none;padding: 3% 1%;border-radius: 10px;outline: none;background-color: #0061f2;color: #fff;}
#leadproperties #info input{font-size:15px !important}
#agentsig #sig, #qrcode {display: inline-block;width: 40%;padding: 10px;height: auto;font-size: 20px;}
#description ,#propertytype{padding:20px 50px;font-size:20px;text-align:justify;width:45%;margin:1% 2%; height:400px;}

/* Yard Sign*/
.yardsignwrapper {width: 100%;max-width: 100%;}
.yardsignwrapper .personalinfo{text-align: center; margin: auto;padding: 20px 10px;}
.yardsignwrapper .personalinfo img{height: 150px ; width: 150px;border-radius:50%;}
.yardsignwrapper .personalinfo div{margin: 10px;}
.yardsignwrapper .mediasection, .link, .propdesc{/*margin: 1% 10%;*/ margin:1% auto 0 auto; width:1200px; padding-bottom:1% ;}
.yardsignwrapper .mediasection .youtubevideo{width: 70%; display: inline-block;height:578px;}
.yardsignwrapper .mediasection .youtubevideo iframe{width: 100% !important; height: 614px; display:block;}
.yardsignwrapper .mediasection .userform{width: 29.5%;height: auto; background: #000; color: #fff; display: inline-block;padding: 1% 2%; vertical-align:top;}
.yardsignwrapper .mediasection .userform input, textarea, button{width: 100%;}
.yardsignwrapper .propdesc i img{width: 40px; height: 40px;}
.yardsignwrapper .propdesc label{font-size: 20px; vertical-align: middle;}
.yardsignwrapper .propdesc span{font-size: 20px; margin: 10px;font-weight: 600;}

/*  footer*/
.footer4 .footerinfomation{background-color:#191c1dcf ;color: #fff;}
.footer4{background-image: linear-gradient(25deg, #fff 70%, #000 30%); margin:auto; width:1200px;}
.footer4 .sociallinks a svg{width: 20px;height: 20px;padding: 10px; color: #fff; background-color: #000;}
.footer4 .sociallinks {padding: 1% 2%;width: 100%; background-color: #fff;}
.footer4 .qrcode .qr{margin:0 !important;}
.footer4 .footerinfomation .profilepic,.qrcode,.agentinfo, .logo{width:24%; vertical-align: top;word-break:break-all; display:  inline-block;margin: 1% 0;}
.footer4 .footerinfomation .profilepic img{border-radius: 50%;border: 2px solid #fff;}
.footer4 .footerinfomation img{width: 100%; height:auto;} .footer4 .footerinfomation .pic, .qr , .info{ width: 60%; margin: auto;}
.footer4 .footerinfomation .name{font-size: 25px;margin-top:0;}
.footer4 .footerinfomation p{font-size: 18px; margin: 10px 0;}
.footer4 .footerinfomation .logoimg img{width: 150px; height: 150px;}
.footer4 .footerinfomation .agentinfo{vertical-align: top;padding:0;}
.footer4  .sociallinks a {margin:2px;padding:5px 2px; text-decoration:none !important; font-size:18px;color:#000 !important; display:inline-block;}
.footer4   .sociallinks img{height:28px;width:28px;}

/*    Media queries*/
@media (max-width: 320px) {
    #leadregister #info {width: 100%;padding: 5%;margin:auto;}
    mb-0,h1{text-align:center}
    #leadregister #myCarousel{margin:0 3%}
    #leadregister .container {width: 95%;margin: 5% 2% !important;padding: 0; }
    #prospectwrapper #texts{ width:100% !important; margin:20px 0;}
    #prospectwrapper #texts ul{width:100% !important; margin:20px 0;}
    #agentdetails{width:100% !important}
    #youtubewrapper #agentdetails{margin:0 !important;width:100%;}
    #youtubewrapper #video{width:100%; height:auto !important; margin:0;}
    #youtubewrapper iframe{width:100%; height:auto !important;}
    #youtubewrapper #propertydetails #description, #propertytype{display:block; width:100%;float:none !important;}
     #youtubewrapper #propertydetails {padding:1% 2%;}
    #youtubewrapper #propertydetails #proplist{top:0}
    .container, #myCarousel .item img{height:auto !important}
    #youtubewrapper iframe{width:100%; height:auto !important;float:none !important;}
    #video iframe{height:auto !important}
   .footer4, .sociallinks{width:100% !important;margin:0 !important;}
    .footer4 .footerinfomation .profilepic,.qrcode,.agentinfo, .logo{width:100% !important;vertical-align: top;text-align:center; display:  inline-block;margin: 1%;}
    .sociallinks{float:left;}
    .footeragentinfo .profileimg, .siginfo, #sigsubinfo{width:100% !important; display:block;}
    .sociallinks .slinks{width:50% !important ; text-align:justify;}
    .footerinfo .footeragentinfo{width:auto;}
    #propertydetails #description, #propertytype{display:block; width:100%;margin:2% auto; float:none !important;}
    #header2 .subhead{width:100%;}
    .footer4   .agentinfo .info {text-align:center !important;width:100% !important;}

}

/* Testimonialpreview*/
.yardsignwrapper #reviewagentinfo  .agentinfoleft{float:left;}
.yardsignwrapper #reviewagentinfo .agentinforight, .link{float:right;}
.yardsignwrapper #reviewagentinfo .agin{display:inline-block; padding:10px 15px;}
.yardsignwrapper #reviewagentinfo .agin p{font-weight:600;}
.yardsignwrapper .link{margin:0;text-align:right;margin:0;padding:10px 20px;width:100%;margin:5px 0;}
.yardsignwrapper #youtubesectionreview {text-align:center;}
.yardsignwrapper #youtubesectionreview .youtubevideoreview{width:25%;margin:1% 2% ;display:inline-block;text-align:center;}
.yardsignwrapper #youtubesectionreview .youtubevideoreview iframe{width:100% ; height:auto !important; box-shadow:3px 3px 10px #000;}
.yardsignwrapper #youtubesectionreview .youtubevideoreview .description{padding:10px 5px; text-align:justify;}
.yardsignwrapper .container .pagination a:hover{background-color:#000!important; color:#fff !important;}

.yardsignwrapper .datatable iframe{width:300px ; height:200px;}
.yardsignwrapper .datatable .dataTables_filter,  .dataTables_info, #datatable_length{display:none !important;}
.yardsignwrapper table, tbody, td, th, tfoot, thead{border:none !important;}
.yardsignwrapper thead th{display:none;}
.yardsignwrapper .datatable .description{padding:10px 5px; text-align:justify; width:60%; margin:auto;}


@media (max-width: 320px) {
 .yardsignwrapper {width: 100%;max-width: 100%;}
    .yardsignwrapper .mediasection , .propdesc{margin: 0 2%; padding: 1% 2%; width:100%;}
    .yardsignwrapper .mediasection .youtubevideo iframe{height: 300px !important;width:100% !important;}
    .yardsignwrapper .mediasection .youtubevideo, .userform{width: 100% !important;height: auto !important;margin: 1% 0; display: block;}
    .yardsignwrapper .propdesc .link #agin, #nlink{display:block !important; width:100% !important;text-align:center !important;}
}

@media (min-width: 321px) and (max-width:480px){
    #leadregister #info {width: 100%;padding: 5%;margin:auto;margin:auto}
    mb-0, h1 {text-align: center}
    #leadregister #myCarousel{margin:0 3%}
    #leadregister .container{width:95%;margin:5% 2% !important;padding:0;}
    #leadregister #myCarousel{width:100%;}
    #prospectwrapper #texts{ width:100% !important}
    #prospectwrapper #texts ul{width:100% !important}
    #agentdetails{width:100% !important}
    #youtubewrapper #agentdetails{margin:0 !important;width:100%;}
    #youtubewrapper #video{width:100%; height:auto !important; margin:0;}   
    #youtubewrapper iframe{width:100%; height:200px !important;float:none !important;}
     #youtubewrapper #propertydetails {padding:1% 2%;}
    #youtubewrapper #propertydetails #proplist{top:0}
    .container, #myCarousel .item img{height:auto !important}
  .footer4, .sociallinks{width:100% !important;margin:0 !important;}
   .footer4 .footerinfomation .profilepic,.qrcode,.agentinfo, .logo{width:100% !important;vertical-align: top;text-align:center; display:  inline-block;margin: 1%;}
    .sociallinks{float:left;}
    .footerinfo .footeragentinfo{width:auto;}
    #propertydetails #description, #propertytype{display:block; width:100%;margin:2% auto; float:none !important;}
    #header2 .subhead{width:100%;}
    .footer4   .agentinfo .info {text-align:center !important;}
    .footer4 .qrcode .qr{margin:auto !important;}
     .footer4 .agentinfo .info{width:100% !important;}
    .yardsignwrapper #reviewagentinfo .agentinfoleft,  .agentinforight{display:block; float:none !important;}
    .yardsignwrapper #youtubesectionreview .youtubevideoreview{width:100% !important;}
    .yardsignwrapper .datatable iframe{width:370px  !important; height:200px !important;}

    .yardsignwrapper {width: 100%;max-width: 100%;}
    .yardsignwrapper .mediasection, .propdesc {/*margin: 0 2%;*/ padding: 1% 2%; width:100%;}
    .yardsignwrapper .mediasection .youtubevideo iframe{height: 300px !important;width:100% !important;}
    .yardsignwrapper .mediasection .youtubevideo, .userform{width: 100% !important;height: auto !important;margin: 1% 0; display: block;}
    .yardsignwrapper .propdesc .link #agin, #nlink{display:block !important; width:100% !important;text-align:center !important;}

}
@media (min-width: 481px) and (max-width:768px) {
    #leadregister .container {width: 95%;margin: 5% 2% !important;padding: 0;} 
    #leadregister #myCarousel{margin:0 3%}
    #leadregister #info {width: 100%;padding: 5%; margin:auto;}
    #prospectwrapper #texts{ width:100% !important}
    #prospectwrapper #texts ul{width:100% !important}
    #agentdetails{width:100% !important}
    #youtubewrapper #agentdetails{margin:0 !important;width:100%;}
    #youtubewrapper #video{width:100%; height:auto !important; margin:0;}  
    #youtubewrapper object{width:100%; height:auto;}
    #youtubewrapper iframe{width:100%; height:300px !important;float:none !important;}
    #youtubewrapper #propertydetails {padding:1% 2%;}
    #youtubewrapper #propertydetails #proplist{top:0}
    .container, #myCarousel .item img{height:auto !important}
   .footer4, .sociallinks{width:100%;margin:0;width:100% !important;margin:0 !important;}
    .footer4 .footerinfomation .profilepic,.qrcode,.agentinfo, .logo{width:100% !important;vertical-align: top;text-align:center; display:  inline-block;margin: 1%;}
     .sociallinks{float:left;}
     .footerinfo .footeragentinfo{width:auto;}
     #propertydetails #description, #propertytype{display:block; width:100%;margin:2% auto; float:none !important;}
    #header2 .subhead{width:100%;}
    .footer4   .agentinfo .info {text-align:center !important;}
    .footer4 .qrcode .qr{margin:auto !important;}
    .footer4 .agentinfo .info{width:100% !important;}
    .yardsignwrapper #reviewagentinfo .agentinfoleft, .agentinforight{display:block; float:none !important;}

     .yardsignwrapper {width: 100%;max-width: 100%;}
    .yardsignwrapper .mediasection, .propdesc {/*margin: 0 2%;*/ padding: 1% 2%; width:100%;}
    .yardsignwrapper .mediasection .youtubevideo iframe{height: 300px !important;width:100% !important;}
    .yardsignwrapper .mediasection .youtubevideo, .userform{width: 100% !important;height: auto !important;margin: 1% 0; display: block;}
    .yardsignwrapper .propdesc .link #agin, #nlink{display:block !important; width:100% !important;text-align:center !important;}
}
@media (min-width:769px) and (max-width:1024px) {
    #leadregister .container {width: 95%;margin: 5% 2% !important;padding: 0;}
    #leadregister #myCarousel{margin:0 3%}
    #leadregister #info {width: 100%;padding: 5%;margin:auto}
    #youtubewrapper #agentdetails{margin:0 !important;width:100%;}
    #youtubewrapper #video{width:100%; height:auto !important; margin:0;}  
    #youtubewrapper object{width:100%;}
    #youtubewrapper iframe{width:100%; height:400px !important;float:none !important;}
     #captcha{width:100%;}
     #captcha #canvas{width:100%}
     .footerinfo .footeragentinfo{width:auto;}
        .footer4, .sociallinks{width:100% !important;margin:0 !important;}
         .footer4 .footerinfomation .profilepic,.qrcode,.agentinfo, .logo{width:45% !important;vertical-align: top;text-align:center; display:  inline-block;margin: 1%;}
          .footer4 .agentinfo .info{width:60% !important;}
           .footer4 .qrcode .qr{margin:auto !important;}
}
@media (min-width:1025px) and (max-width:1200px) {
             .footerinfo .footeragentinfo{width:auto;}
                .footer4, .sociallinks{width:100% !important;margin:0 !important;}
                 .footer4 .footerinfomation .profilepic,.qrcode,.agentinfo, .logo{width:22% !important;vertical-align: top;text-align:center; display:  inline-block;margin: 1%;}


 .yardsignwrapper .mediasection , .propdesc{/*margin: 0 2%;*/ padding: 1% 2%;width:100%;}
 .yardsignwrapper .propdesc .link #agin, #nlink{display:block !important; width:100% !important;text-align:center !important;}
}


