body {font-family: 'Montserrat', sans-serif;}

a {color: #67caee;}
.fa, .fas {font-size: 14px;}

.header-section {overflow:hidden;text-align:center;}
.picture-div-mobile {display:none;}
.picture-div {position:relative;bottom:0;right:0;height:750px;text-align:center;}
.picture-divide-div {display:inline-block;width:1106px;height:100%;text-align:right;}
.picture-divide-div2 {display:inline-block;width:530px;height:100%;}
.picture-divide-div3 {position:relative;width:100%;height:91%;}
.picture-divide-div4 {position:absolute;width:100%;height:530px;bottom:0;}
.relative-start-area {position:relative;width:100%;height:100%;top:0;left:0;}
.absolute-left-area {position:absolute;width:40%;height:40%;top:50%;left:50%;
  transform:translate(-225%, 50%);}
.absolute-middle-area {position:absolute;width:100%;height:100%;top:50%;left:50%;
  transform:translate(-50%, -50%);}
.absolute-right-area {position:absolute;width:50%;height:50%;top:50%;left:50%;
  transform:translate(70%, -150%);}
.left-pic-area {position:relative;width:100%;height:100%;}
.left-pic-area img:first-child {position:absolute;top:0;left:0;width:100%;}
.left-pic-area img:last-child {position:absolute;bottom:0;left:0;width:87.5%;}

.middle-pic-area {position:relative;width:100%;height:100%;}
.middle-pic-area img:first-child {position:absolute;top:0;left:0;width:100%;}
.middle-pic-area img:last-child {position:absolute;bottom:8px;left:11px;width:85.5%;} /* Initial - {position:absolute;bottom:0;left:0;width:87.5%;} */

.right-pic-area {position:relative;width:100%;height:100%;}
.right-pic-area img:first-child {position:absolute;top:0;left:0;width:100%;}
.right-pic-area img:last-child {position:absolute;bottom:6px;left:7px;width:85.5%;} /* Initial - {position:absolute;bottom:0;left:0;width:87.5%;} */

.content-div {position:absolute;top:0;left:0;width:100%;text-align:center;}
.content-inner-div {display:inline-block;height:100%;text-align:left;}
.xen-logo-wrapper {padding:13% 0 1% 0%;width:280px;} .xen-logo-wrapper img {width:100%;}
.xen-title {font-size:48px;font-weight:600;letter-spacing:-1.8px;}
.xdn-title {font-size:65px;font-weight:600;color:#fff;}
.xdn-title span {background-color:#78cfdd;line-height:-1.0px;}
.xdn-content {font-size:20px;letter-spacing:-0.5px;font-weight:normal;}
.xdn-content-mobile {display:none;}
.same-margin {margin-left:1.5%;margin-top:1%;}

.why-xdn-section {position:relative;}
.same-title {font-size:48px;font-weight:600;color:#17637e;text-align:center;padding-top:8%;margin:0;}
.same-p {padding-top:3%;padding-bottom:6%;width:65%;margin:0 auto;text-align:center;font-size:16px;color:#222222;}
.sky-blue-background {background-image: linear-gradient(to top, #e4f1f8, #ebf7fe, #fff, #fff, #fff, #fff, #fff, #fff, #ebf7fe, #e4f1f8);}

.relative-div {position:relative;width:80%;height:0;padding-bottom:79%;margin:0 auto;}
.absolute-div-before {content:'';position:absolute;top:50%;transform:translate3d(-50%, -50%, 0);left:50%;
  background-image: linear-gradient(to left, #9fd3be, #66caf0);width:100%;height:100%;transition:1s ease-in-out;
  border-radius:100%;padding:1%;border:3px solid #fff;box-sizing:content-box;opacity:0;}
  .absolute-circle {
      cursor: grab;
  }
.absolute-div-after {content:'';position:absolute;top:50%;transform:translate3d(-50%, -50%, 0);left:50%;
  background-image: linear-gradient(to left, #9fd3be, #66caf0);width:106%;height:106%;opacity:0;
  border-radius:100%;padding:1%;z-index:-1;transition:1s ease-in-out;}
.absolute-div {position:absolute;display:flex;flex-flow:column nowrap;
  width:100%;height:100%;top:0;left:0;text-align:center;padding-top:30%;border:1px solid white;border-width:1px;
  border-radius:100%;background-image: linear-gradient(to left, #9fd3be, #66caf0);}

.main-content {font-size:48px;font-weight:bold;letter-spacing:-1.0px;color:#fff;line-height:1.0;}
.sub-content {font-size:16px;color:#fff;letter-spacing:-0.5px;font-weight:400;padding-top:5%;}
.mid-size-content {font-size:28px;font-weight:bold;letter-spacing:-1.0px;color:#fff;line-height:1.0;letter-spacing:-1.0;}

.advantages {display: block;height: 220px;max-width: 1190px;margin: 0 auto;}
.advantages-mobile {
  display: none;
}
.advantages .advantage
    {
      padding: 15px 10px 0;
      width: 20%;
      float: left;
      height: 170px;
      margin-right: -1px;
      border-left: 1px solid;
      border-right: 1px solid;
      border-image-slice: 1;
      border-width: 1px;
      border-image-source: linear-gradient(to bottom, #99d1c2, #fff);
      text-align: center;
    }

.advantages .advantage .stick-area {height:30px;}
.advantages .advantage .stick-area .stick-span {height:100%;width:0;border-left:1px solid #78cfdd;display:inline-block;}

.advantages .advantage .strength-area {padding-top:16%;font-size:16px;line-height:1.5;}
.strength-area-mobile, .strength-area-mobile2 {display:none;}

.img-wrapper {width:95%;margin:0 auto;padding-top:5%;padding-bottom:6%;}
.img-wrapper img {width:100%;}

.logo-row-1 {padding-top:8%;}
.logo-row-3 {padding-bottom:11%;}

.col-img .logo-wrapper img {width:100%;-webkit-filter: grayscale(100%);filter: gray;transition:0.5s ease-in-out;margin-bottom:20px;}
.col-img .logo-wrapper:hover img {width:100%;-webkit-filter: grayscale(0%);filter: none;}

.col-contact {text-align:center;padding-top:13%;padding-bottom:8%;}

.info-area {font-weight:500;color:#222222;font-size: 14px}
.contact-area {font-weight:600;font-size:28px;line-height:normal;color:#67caee;}

/* start of map-section */
.map-section-mobile {display:none;}
.map-section-container {position:relative;}
.absolute-inner-wrap {position:absolute;display:flex;flex-flow:row wrap;width:100%;height:100%;top:0;left:0;}
.pointer-relative {width:32%;}

/* california los angeles, orange county */
.pointer-relative .sub-divide-div {position:relative;height:75%;}
.pointer-relative .sub-divide-div .sub-divide-div2 {position:absolute;display:flex;align-items:center;bottom:0;height:53%;width:100%;}
.sub-divide-div2 .relative-start-point {position:relative;left:25%;width:31%;height:0;padding-bottom:31%;}
.sub-divide-div2 .relative-start-point .absolute-start-point {position:absolute;width:100%;height:100%;top:0;left:0;z-index:100;}
.absolute-small {position:absolute;width:60%;height:60%;top:50%;left:50%;
  transform:translate(-50%, -50%);}
.absolute-middle {position:absolute;width:73%;height:73%;top:50%;left:50%;
  transform:translate(-50%, -50%);
  transition:transform 0.5s ease-in-out 0.1s;}
.absolute-large {position:absolute;width:75%;height:75%;top:50%;left:50%;
  transform:translate(-50%, -50%);transition:transform 0.5s ease-in-out 0.2s;}
.sub-divide-div2 .relative-start-point .absolute-eastla {transition:transform 0.5s ease-in-out 0.0s;}
.sub-divide-div2 .relative-start-point .absolute-sandiego {transition:transform 0.5s ease-in-out 0.3s;}
.sub-divide-div2 .relative-start-point .absolute-torrance {transition:transform 0.5s ease-in-out 0.4s;}
.sub-divide-div2 .relative-start-point .absolute-valley {transition:transform 0.5s ease-in-out 0.5s;}
/* california los angeles, orange county */

/* texas Lewisville */
.pointer-relative-texas {position:relative;width:33%;}
.texas-georgia-div {position:absolute;bottom:0;width:100%;height:50%;display:flex;flex-flow:row wrap;
  justify-content:center;align-items:center;}
.texas-georgia-div .relative-start-point {position:relative;width:31%;height:0;padding-bottom:31%;}
/* texas Lewisville */

/* Gorgia Duluth */
.pointer-relative-georgia {position:relative;width:17%;}
.pointer-relative-georgia .texas-georgia-div {height:60%;}
.pointer-relative-georgia .relative-start-point {position:relative;width:60%;height:0;padding-bottom:60%;}
/* Gorgia Duluth */

/* Common Circle Element */
.relative-circle {position:relative;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%, -50%);}
.relative-circle .absolute-circle {position:absolute;display:flex;flex-flow:column nowrap;justify-content:center;
  width:100%;height:100%;top:0;left:0;border-radius:100%;text-align:center;background-color:#fff;}
.pointer-relative .absolute-start-point .relative-circle .absolute-circle {opacity:1.0;}
.relative-circle .absolute-circle-before {position:absolute;top:50%;transform:translate3d(-50%, -50%, 0);left:50%;
  background-color: #fff;width:115%;height:115%;border-radius:100%;opacity:0.5;box-shadow:0 0 18px 0 rgba(0, 0, 0, 0.35);}
.num-area {font-size:27px;letter-spacing:-0.5px;font-weight:600;line-height:1.0;color:#272c6f;}
.region-area {font-size:12px;letter-spacing:-0.5px;font-weight:600;line-height:1.0;color:#272c6f;}
/*.relative-circle:hover .num-area {color:#67caee}
.relative-circle:hover .region-area {color:#67caee}*/
.relative-circle:hover .absolute-circle-before {width: 125%; height: 125%}
.middle-num-area {font-size:32px;color:#272c6f;}
.absolute-start-point .num-area {font-size:48px;font-weight:600;letter-spacing:-1.0px;line-height:1.0;}
.absolute-start-point .region-area {font-size:18px;font-weight:600;letter-spacing:-0.5px;line-height:1.0;}
/* Common Circle Element */

.input-wrapper {text-align:center;}
.input-wrapper input {width:73%;text-align:center;padding:1%;background-color:rgb(255, 255, 255, 0.1);
  border:none;border-bottom:1px solid grey;}
.input-wrapper input:focus {outline:none;}

.state-row {padding-top:12%;}
.georgia-row {padding-top:4%;padding-bottom:12%;}

.georgia-img-col {padding-left:5%;}
.georgia-explain-col {padding-left:10%;}
.state-img-wrapper{width:100%;} .state-img-wrapper img {width:100%;}
.state-explain-col {display:flex;align-items:center;}
.state-explain {width:100%;}
.same-state-name {font-size:30px;font-weight:600;letter-spacing:-0.75px;margin-bottom:10%;}
.same-ul {margin:0;padding-left:13%;}
.same-li {font-size:21px;color:#222;}
/* end of map-section */

.button-wrapper {position:relative;display:flex;justify-content:center;align-items:center;text-align:center;padding:6% 0 8% 0;}
.request-button {position:absolute;border:none;border-radius:50px;color:#fff;box-sizing:content-box;padding:20px 25px;
  background-image: linear-gradient(to left, #9fd3be, #66caf0);font-size:14px;letter-spacing: 1px;transition:opacity 1s ease-in-out;}

.row-link {padding:5% 0;}
.col-link {text-align:center;font-size:20px;font-weight:600;color:#17637e}
.col-link a {color:#17637e; font-size: 22px;}

.modal-container {position:fixed;top:0;left:0;display:none;flex-flow:row wrap;justify-content:center;align-items:center;
  width:100%;height:100%;z-index: 101;background-color:rgba(0, 0, 0, 0.5);}
.modal {display:block;top:auto;left:auto;z-index: 150; margin:0 auto;width: 790px;max-height:80%;
  overflow: auto; align-items:center;}
.modal-content {position:relative;background-color: #fefefe;margin:auto auto;}
.modal-title {font-size:48px;font-weight:600;color:#17637e;text-align:center;margin:5% 0}
.modal-subtitle {color:#17637e;text-align:center;margin-bottom:7%;}
.content-wrapper {margin:0 6% 7% 6%;}
.content {display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;margin-bottom:4%;}
.content .img-area {position:relative;width:50%;} .content .img-area img {width:100%;}
.current {display:block;}
.hidden {display:none;}
.text-area {float:right;}
.site-form {font-weight:600;line-height:1.5;color:#17637e;}
.site-form-address {vertical-align:baseline;}
.site-info-address {max-width:210px;}
.site-info {font-weight:500;line-height:1.5;color:#8c9aa0;padding-left:6%;}
.modal-content img {width: 100%;}
.close {color: #000;position: absolute;top: 0px;right: 10px;font-size: 28px;font-weight: bold;
opacity: 1;z-index:200;}
.close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}
.absolute-btn {position:absolute;display:flex;justify-content:space-between;top:0;left:0;width:100%;height:100%;}
.modal-left, .modal-right {height:100%;width:13%;text-align:center;font-size:2rem;color:#fff;
  display:flex;align-items:center;justify-content:center;z-index:100;cursor:pointer;}
@media only screen and (min-width:1680px){
  .picture-divide-div {width:1306px;}
}
@media only screen and (min-width: 1200px){
  .container {max-width:1190px;}
}
@media only screen and (max-width:1199px) {
  .relative-div {width:88%;padding-bottom:88%;}
  .main-content {font-size:34px;}
  .sub-content {font-size:16px;}
  .mid-size-content {font-size:21px;}

  .picture-div {height:650px;}
  .picture-divide-div {width:790px;}
  .picture-divide-div2 {width:460px;}
  .picture-divide-div4 {height:460px;}

  .content-inner-div {width:1200px;}
  .xen-logo-wrapper {width:240px;}
  .xen-title {font-size:34px;}
  .xdn-title {font-size:51px;}
  .xdn-content {font-size:16px;}
}
@media only screen and (max-width:991px) {
  .picture-div {height:550px;}
  .picture-divide-div {width:768px;}
  .picture-divide-div2 {width:380px;}
  .picture-divide-div4 {height:380px;}

  .relative-div {width:93%;padding-bottom:93%;}
  .main-content {font-size:26px;}
  .sub-content {font-size:12px;}
  .mid-size-content {font-size:16px;}

  .num-area {font-size:20px;letter-spacing:-0.5px;font-weight:600;}
  .region-area {font-size:10px;letter-spacing:-0.5px;font-weight:600;}
  .middle-num-area {font-size:24px;}
  .absolute-start-point .num-area {font-size:36px;font-weight:600;letter-spacing:-1.0px;line-height:1.0;}
  .absolute-start-point .region-area {font-size:14px;font-weight:600;letter-spacing:-0.5px;line-height:1.0;}
  .col-link {font-size:29px;}
}
@media only screen and (max-width:767px){
  .picture-div {display:none;}
  .picture-div-mobile {display:flex;align-items:flex-end;width:767px;height:975px;padding-bottom:65px;}
  .picture-divide-div-mobile {width:100%;height:auto;display:flex;flex-flow:row wrap;
    justify-content:space-around;align-items:center;}
  .left-pic-area-mobile {position:relative;width:30%;height:0;padding-bottom:30%;margin-left:3%;}
  .left-pic-area-mobile img:first-child {position:absolute;top:0;left:0;width:100%;height:100%;}
  .left-pic-area-mobile img:last-child {position:absolute;left:0;bottom:0;width:87%;height:87%;}

  .middle-pic-area-mobile {position:relative;width:52%;height:0;padding-bottom:52%;}
  .middle-pic-area-mobile img:first-child {position:absolute;top:0;left:0;width:100%;height:100%;}
  .middle-pic-area-mobile img:last-child {position:absolute;left:0;bottom:0;width:87%;height:87%;}

  .content-inner-div {width:auto;}
  .container.content-inner-div {max-width:767px;padding:0;}
  .xen-logo-wrapper {width:240px;padding-top:60px;}
  .xen-title {width:767px;font-size:42px;}
  .xdn-title {font-size:64px;}
  .xdn-content {display:none;}
  .xdn-content-mobile {position:relative;display:block;letter-spacing:-0.5px;font-weight:normal;font-size:18px;width:275px;}
  .same-margin {margin-top:15px;margin-left:7%;}

  .same-title {padding-top:12%;font-size:38px;}
  .client-section .same-title {padding-top:18%;}
  .same-p {width:100%;font-size:24px;padding-top:16%;padding-bottom:10%;}

  .relative-div {width:100%;padding-bottom:99%;margin-bottom:16%;}
  .advantages {display:none;padding-top:5%;padding-bottom:10%;}
  .advantages-mobile {
    display: block;
    max-width: 1190px;
    margin: 0 auto 50px;
  }
  .advantages .advantage {display:flex;flex-flow:row wrap;max-width:100%;}
  .advantages .advantage .stick-area {display:none;}

  .strength-area-mobile {font-size:20px;font-weight:600;display:flex;align-items:center;padding-top:0%;width:100%;}
  .stick-div {border:1px solid black;width:4%;display:inline-block;margin-right:4%;}
  .strength-area-mobile2 {display:block;width:100%;font-size:20px;font-weight:600;}
  .strength-area-mobile2 > div {display:flex;align-items:center;}
  .strength-area-mobile2 > div:last-child {margin-top:-5px;}
  .hidden-stick-div {visibility: hidden;}

/* map section */
  .map-section {display:none;}
  .map-section-mobile {display:block;}

  .main-content {font-size:48px;}
  .sub-content {font-size:16px;}
  .mid-size-content {font-size:28px;}
/* map section */

  .logo-row-1 {padding-top:10%;}
  .logo-row-3 {padding-bottom:14%;}

  .col-contact:first-child {padding-top:13%;padding-bottom:10%;}
  .col-contact:last-child {padding-top:0%;padding-bottom:16%;}

  .button-wrapper {padding:12% 0 12% 0;}
  .input-wrapper input {font-size:14px;}

  .row-link {padding:0;}
  .xen-footer {width:50%; margin: 20px 0;}
  .xen-footer p {
    font-size: 18px;
}
.xen-footer i {
    font-size: 40px !important;
}

  .modal {width: 90%;}
  .modal-subtitle {margin-left:5%;padding-right:5%;margin-bottom:3%;}
  .content-wrapper {margin:0 4% 7% 4%;}
  .content .img-area {flex:1 1 0;}
  .text-area {flex:1 1 0;}
  .site-form {padding-left:4%;font-size:14px;}
  .site-info {padding-left:6%;font-size:14px;}
}
@media only screen and (max-width:699px){
  .site-form, .site-info {font-size:11px;}
}
@media only screen and (max-width:575px) {
  .picture-div-mobile {align-items:flex-end;width:158%;height:auto;max-height:1000px;padding-top:87%;padding-bottom:11%;}
  .picture-divide-div-mobile {justify-content:flex-start;}
  .left-pic-area-mobile {width:26.5%;padding-bottom:26.5%;margin-left:1%;margin-right:1%;}
  .middle-pic-area-mobile {width:46.5%;height:0;padding-bottom:46.5%;}

  .container.content-inner-div {max-width:767px;padding:0;}
  .xen-logo-wrapper {width:220px; padding-top:10%;} .xen-logo-wrapper img {width:100%;}
  .xen-title {width:auto;font-size:39px;}
  .xdn-title {font-size:58px;}
  .xdn-content {display:none;}
  .xdn-content-mobile {display:block;width:65%;font-size:18px;}
  .same-margin {margin-top:2%;margin-left:7%;}

  .same-p {font-size:16px;}
  .advantages {display: none;}
  .strength-area-mobile {font-size:17px;}
  .strength-area-mobile2 {font-size:17px;}
  .request-button {padding: 10px 15px}
  .state-row > div:first-child {padding-left:7%;}
  .relative-div {/*width:255px;padding-bottom:255px;*/margin-bottom:7%;}
  .main-content {font-size: 38px;}
  .sub-content {font-size: 14px;}
  .mid-size-content {font-size: 22px;}

  .same-state-name {font-size:24px;}
  .same-li {font-size:18px;}

  .modal-title {margin-bottom:5%;}
  .modal-subtitle {margin-bottom:10%;}
  .content {flex-flow:column wrap;margin-bottom:10%;}
  .content .img-area {width:100%;flex:initial;clear:both;}
  .text-area {width:100%;flex:initial;clear:both;margin-top:2%;}
  .site-form, .site-info {font-size:20px;}

  .four-circle {
    width: 50%;
}



}
@media only screen and (max-width:469px) {
  .xen-title {font-size:34px;}
  .xdn-title {font-size:50px;}
  .xdn-content-mobile {font-size:15px;}

  .same-title {font-size:26px;}

  .strength-area-mobile {font-size:14px; text-align: left;}
  .strength-area-mobile2 {font-size:14px;}

  .same-state-name {font-size:22px;}
  .same-li {font-size:14px; text-decoration: underline;}

  .input-wrapper input {font-size:10px;}

  .col-link {font-size:22px;}

  .site-form, .site-info {font-size:16px;}
  .site-form {width: 30%;}
}
@media only screen and (max-width:399px){
  .xen-title {font-size:32px;}
  .xdn-title {font-size:40px;}
  .xdn-content-mobile {font-size:16px;}

  .modal-title {font-size:42px;}
  .site-form, .site-info {font-size:15px;}
}