@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
/* font-family: 'Poppins', sans-serif; */

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/GothamBlack.woff2') format('woff2'),
      url('../fonts/GothamBlack.woff') format('woff'); 
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

 @font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Medium.woff2') format('woff2'),
      url('../fonts/Gotham-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Black.woff2') format('woff2'),
      url('../fonts/Gotham-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

body{font-family: Poppins,sans-serif;}
header{height: 95px; background: rgba(255,255,255,0.70); -webkit-box-shadow: 0px 5px 13px -5px rgb(0 0 0 / 25%); -moz-box-shadow: 0px 5px 13px -5px rgba(0,0,0,0.25); box-shadow: 0px 5px 13px -5px rgb(0 0 0 / 25%); z-index: 10; position: absolute; left: 0; top:0; width: 1360px; left: 0; right: 0; margin: 0 auto;}
.headerFixed { position: fixed; top: 0px; background: rgba(255,255,255,1.00); }

.landing-logo-left{ width: 100%; max-width: 295px; height: auto; float: left; display: block; margin-top: 27px;}
.landing-logo-right{ width: 100%; max-width: 69px; height: auto; float: right; display: block; margin-top: 17px;}
.row{margin: 0px;}
.condominium_info img{display: block; border: 0px;}
.condominium_action{position: absolute; top: -30px; right: 0;}

.bottom-form{max-width: 1360px;
    margin: 0 auto;
    left: 0;
    right: 0; bottom: 0px;}
.transition{-webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out;  -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
.landing-box1{width: 100%; height: auto; float: left; display: block; position: relative;}
.landing-box1:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; }
.landing-header{ width: 100%; height: auto; float: left; display: block; position: relative; margin: 0; padding: 0;}
.landing-header img{ width: 100%;}
.desktop1920{ display: block;}
.laptop1360{ display: none;}
.mob380{ display: none;}
.header-text{ position: absolute; left: 0; right: 0; top: 20%;  margin: 0 auto; width:90%;  max-width: 1360px; z-index: 1;}
.header-text aside{ max-width: 768px; margin-left: 0; vertical-align: middle; z-index: 555; }
.header-text aside h2{font-family: 'Gotham'; font-size: 24px; font-weight:400; background-color: #ed8600; color: #fff; float: left; padding: 10px 20px; text-transform: uppercase; margin: 0;}
.header-text aside h3{font-family: 'Gotham'; color: #fff; font-size: 34px; line-height: 36px; font-weight:700; text-transform: uppercase; padding: 0 0 15px;}

.landing-box2{width: 100%; height: auto; float: left; display: block; position: relative; padding: 50px 0 20px 0; box-sizing: border-box; background-color: #f4f4f4;}
.wraper1140{ width: 90%; max-width:1360px; margin: 0 auto; position: relative; padding: 0px 0;}
.wrapper1140:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; }
.landing-box2 .bg2{background: url("../images/middlebg.jpg") no-repeat; height: 369px; width: 100%; padding: 25px 8% 0;}
.landing-box2 .bg2 ul{    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center; padding: 58px 0 0;}
.landing-box2 .bg2 ul li{width: 25%; border-right: 1px solid rgba(255,255,255,0.15); }
.landing-box2 .bg2 ul li:last-child{border-right: 0px solid rgba(255,255,255,0.15); }
.landing-box2 .bg2 ul li h3{color: #ffc600;}
.landing-box2 .bg2 ul li p{color: #fff; font-size: 18px; line-height: normal;}

.landing-box2 .bg3{background-color: #ffffff; height: 383px; margin: 10px 0 0;}
.landing-box2 .bg3 .left{float: left; width: 50%;}
.landing-box2 .bg3 .right{float: left; width: 50%; padding: 90px 60px;}
.landing-box2 .bg3 .right h3{font-size: 36px; color: #1968b3; padding: 0 0 25px;}
.landing-box2 .bg3 .right h3 small{display: block; font-size: 18px; color: #363b3f;}

.viveria-video-sec{width: 100%; padding: 0 0px; position: relative;}
.viveria-video-sec a{position: absolute; bottom: 20px; z-index: 9; right: 0px; color: #ffb400; right: 20px; font-weight: 600; text-decoration: underline !important;}
.viveria-video-sec .video-container{overflow: hidden;position: relative; height: 432px;padding-bottom: 56.25%; /* 16:9 */
  height: 0;}
.viveria-video-sec video{  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; object-fit: cover;}
.landing-box2 .bg4{text-align: center; padding: 20px 0; float: left; width: 100%;}
.landing-box2 .bg4 i{display: inline-block; width: 1005; padding: 0 0 20px;}
.landing-box2 .bg4 h3{font-size: 40px; color: #1968b3; font-weight: 300; margin: 0px; padding: 0px;}
.landing-box2 .bg4 h3 a{font-size: 40px; color: #1968b3; font-weight: 900;}
.landing-box2 .bg4 p{font-size: 22px; color: #1968b3; font-weight: 300; line-height: normal}

.landing-box3{width: 100%; height: auto; float: left; display: block; position: relative; background:#f3f3f3; border-bottom: 1px solid #efefef; border-top: 1px solid #efefef; padding: 75px 0 90px 0; box-sizing: border-box;}
.landing-box3a{width: 100%; height: auto; float: left; display: block; margin: 0; }
.landing-box3a h2{width: 100%; max-width: 510px;  height: auto; margin: 0 auto; display: block; font-family: 'Gotham'; font-size: 30px; font-weight: 700; color: #094a89; line-height: 41px; text-align: center; text-transform: uppercase; padding-bottom: 50px;}
.landing-box3a h2:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; }
.landing-box3a ul{width: 100%; max-width: 920px; margin: 0 auto; height: auto;  font-size: 0; line-height: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap;}
.landing-box3a ul li{display: inline-block;  margin-right: 15px;}
.landing-box3a ul li:last-child{padding-right: 0px; margin-right: 0px;}
.landing-box3a ul li aside{ width: auto; height: 100%; border-right: 1px solid #e5e5e5; padding-right: 10px; font-size: 18px; font-weight: 600; color: #5d5d5d; line-height: 26px; padding-left: 65px; position: relative;}
.landing-box3a ul li:last-child aside{border-right: 0px solid #e5e5e5; }
.landing-box3a ul li aside i{ position: absolute; left: 0; top: 0; width: 65px; height: 50px;}
.landing-box3a ul li aside span{font-size: 16px; font-weight: 600; color: #7d7d7d; line-height: 21px;}
.landing-box4{width: 100%; height: auto; float: left; display: block; position: relative; padding: 75px 0 30px 0; box-sizing: border-box;}
.wraper935{ width: 90%; max-width:935px; margin: 0 auto; position: relative; padding: 0px 0;}
.wrapper935:after{ content: ''; width: 100%; display: block; clear: both; line-height: 0; font-size: 0px; }
.landing-box4a{width: auto; height: auto; margin: 0 auto; display: table;  }
.landing-box4a article{width: auto; height: auto; float: left; }

.landing-box4a small{width:auto; height: 54px; float: left; display: block; margin-right: 15px;}
.landing-box4a small a{ display: block; padding:0  25px; background:#f79825; border:0px solid #c2c2c2; border-radius:25px; color:#FFF; font-size:14px; font-weight:400; line-height: 44px; text-transform:uppercase; cursor: pointer; background-image:linear-gradient(0, #1968b3, #1968b3); background-size: 0; transition: .8s; background-repeat: no-repeat;}
.landing-box4a small a:hover{ background-size:100%; color: #fff;}
.landing-box4a aside{width:auto; height: 54px; float: left; display: block; margin-left: 25px; border-left: 1px solid #cfe2f3; padding-left: 20px;}
.landing-box4a aside big{font-size: 40px; font-weight: 300; color: #4887c3; line-height: 54px; padding-right: 10px;}
.landing-box4a aside span{width:auto; height: 54px; font-size: 40px; font-weight: 700; color: #4887c3; line-height: 54px;}
.landing-box4a aside span a{color: #4887c3;}
.landing-box4a aside span a:hover{color: #4887c3;}
.clear{ width: 100%; clear: both; line-height: 0; font-size: 0px;}
.landing-pic3{ display: none;}


.foo-left{text-align: center;}


.landing-box22a{ height: auto; float: left; display: block; margin-left: -40px; margin-right: -40px;   }

.landing-box22b {width: 50%; height: auto; float: left; display: block; padding:0 40px; }
.landing-box22b aside{width: 100%; height: auto; float: left; display: block; }

.landing-box22a h3{width: 100%; height: auto; float: left; display: block; font-size: 16px; font-weight: 600; color: #023d6f; line-height: 24px; padding-bottom: 30px; margin: 0;}

.landing-box22b aside figure{width: 100%; height: auto; float: left;  margin-bottom: 30px;}
.landing-box22b aside figure img{ width: 100%; display: block;}
.landing-box22b aside p{width: 100%;  height: auto; float: left; display: block; font-size: 14px; font-weight: 400; color: #363b3f; line-height: 24px; padding-bottom: 30px; margin: 0;}
.landing-box22b aside p:last-child{padding-bottom: 0px;}
.images-text{} 
.images-text figure{ width: 80%!important; max-width: 184px; float: left;  margin-left: 10%; margin-right: 10%; } 
.images-text h3{ float: none!important;} 
.images-text p{ float: none!important;} 

.thnkyou{float: left; width: 100%; height: calc(100Vh - 280px); background-color: #e0e5e9; text-align: center; display: flex; justify-content: center; align-content: center; flex-direction: column}
.thnkyou h3{padding:30px 0 0; font-size: 24px; font-weight: 600;}
.thnkyou h4{padding: 0px 0 0; font-size: 20px; font-weight: 600;}
.benefits-solar{float: left; width: 100%;}

@media screen and (max-width: 1366px) {
	.landing-box1{ height: 100vh;}
.desktop1920{ display:none ;}
.laptop1360{ display:block ;}
.mob380{ display: none;}	
}
@media screen and (max-width: 1150px) {
	.header-text aside h2 { font-size: 40px;line-height: 45px;}
	.header-text aside h3 { font-size: 40px;line-height: 45px;}
}
@media screen and (max-width: 1070px) {
	.landing-box3a{overflow: hidden}
	.landing-box3a ul {margin-right: -2px; margin-bottom: -2px; }
	.landing-box3a ul li { width:50%; margin-right: 0px; float: left;   }
	.landing-box3a ul li aside{ width: auto; height: 100%; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding-right: 5%;  padding-left: 5%; padding-bottom: 45px; padding-top: 45px; position: relative; }
	.landing-box3a ul li aside i{ position: relative; margin: 0 auto 20px; width: auto; display: table;}
	.landing-box3a ul li aside span{ text-align: center; margin: 0 auto; width: auto; display: table;}
}
@media screen and (max-width: 1023px) {
	
	.images-text figure {
    width: 100%!important;  max-width:250px;margin-left: 0%;  margin-right: 0%;margin: 0 auto; text-align: center;}
	.images-text h3 { float: left!important;}
	.images-text p { float: left!important;}
	.landing-box22a{ margin-left: 0px; margin-right: 0px;   }
	.landing-box22b { width: 100%;padding: 0px; text-align: center;}
	.images-text figure{ margin: 0 auto; float: none!important; display: table; text-align: center; }
}



@media screen and (max-width: 900px) {
	.landing-box1 { height: auto;}
	.landing-box4a {width: 100%; max-width: 600px; height: auto; margin: 0 auto; display: table;}
	.landing-box4a article{width: 50%;}
	.landing-box4a small {width: 100%; margin-right: 0px;}
	
	.landing-box4a small a{ text-align: center;}
	.landing-box4a aside {width: calc(50% - 30px); height: auto; margin-left: 30px}
	.landing-box4a aside big{ display: block;}
	.landing-box4a aside span {width: auto; height: auto;font-size: 35px;}
	header {position: relative;}
	.landing-box2 .bg2 ul {
    width: 100%;
    text-align: center;
    display: block;
    align-items: center;
    justify-content: center;
    padding: 0px 0 0;
}
	.landing-box2 .bg2 ul li {
    width: 100%;
    border-right: 0px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
		padding: 30px 0;
}
	.landing-box2 .bg2 {
    background: url(../images/middlebg.jpg) no-repeat;
    height: auto;
    width: 100%;
    padding: 25px 8% 0;
    background-size: cover;
}
	

.landing-box2 .bg3 .left {
    float: left;
    width: 100%;
}
	.landing-box2 .bg3 {
    background-color: #ffffff;
    height: auto;
    margin: 10px 0 0;
    float: left;
    width: 100%;
}
	.landing-box2 .bg3 .right {
    float: left;
    width: 100%;
    padding: 30px 20px;
}
	header { width: 100%;}
	.landing-box2 .bg3 .right h3 {
    font-size: 26px;
    color: #1968b3;
    padding: 0 0 25px;
}
	.landing-box2 .bg2 ul li h3 {
    color: #ffc600;
    font-size: 24px;
}
}


@media screen and (max-width: 700px) {
	.landing-box2a h2{ text-align: center;}
	.landing-box2a p{text-align: center;}
	.header-text aside h2 { font-size: 28px; line-height: 30px;}
	.header-text aside h3 { font-size: 28px; line-height: 30px;}
	
	.landing-box4a aside big { font-size: 30px;line-height: 38px}
	.landing-box4a aside span {font-size: 25px;}
	.landing-box2 {padding: 30px 0 30px 0;}
	.bottom-form { margin: 0; width: 100%; float: left;}


	
}

@media screen and (max-width: 500px) {
.desktop1920{ display:none ;}
.laptop1360{ display:none ;}
.mob380{ display:block ;}
	header {height: 75px;}
.landing-logo-left {max-width: 220px;}
	.landing-logo-right {max-width: 45px;}
	.header-text aside h2 {font-size: 16px; line-height: normal;}
		.header-text aside h3 {
    font-size: 14px;
    line-height: normal;
}
	.condominium_action {
    position: absolute;
    top: -59px;
    right: 0;
}
	.landing-box2 {padding: 30px 0 30px 0;}
	.landing-box2a h2 {font-size: 20px;line-height: normal;}
	.landing-box2a aside { width: 100%;padding-right: 0%;margin-bottom: 20px;}
	.landing-pic3{ display: block; width: 100%!important; padding-left:0%!important;
    margin-bottom: 20px;}
	.landing-pic3 img{ width: 100%;}
	.landing-pic2{ display: none;}
	.landing-box3 {padding: 30px 0 30px 0;}
	.landing-box3a h2 { font-size: 18px;line-height: 27px;padding-bottom: 20px;}
	.landing-box3a ul li aside span br{ display: none;}
	.landing-box4a article { width: 44%;}
	.landing-box4a aside { width: calc(56% - 10px);margin-left: 10px; padding-left: 10px; padding-top: 13px; padding-bottom: 10px;} 
	.landing-box4a aside span { font-size: 26px; line-height: 40px;}
	.landing-box4a aside big {font-size: 28px;line-height: 30px;}
	.landing-box4 {padding: 40px 0 0px 0;}
	.landing-box2 .bg4 h3 {
    font-size: 24px;
}
	.landing-box2 .bg4 h3 a {
    font-size: 24px;
}
	.landing-box2 .bg4 p {
    font-size: 18px;
    color: #1968b3;
    font-weight: 300;
    line-height: normal;
}
	
}

@media screen and (max-width: 400px) {
.header-text {top: 16%;}
	.header-text aside {max-width: 155px;}
	.header-text aside h2 {
    font-size: 13px;
    line-height: normal;
}
	.header-text aside h3 {
    font-size: 13px;
    line-height: normal;
    border-bottom: 4px solid #0452aa;
}
}