html,body {
height: 100%;
width: 100%;
background-color: white;
color: white;
font-family: 'Montserrat', sans-serif;
padding: 0px;
margin: 0px;
font-weight: 500;
overflow-x: hidden;
overflow-y: overlay;
/* overflow-y:initial ; */
margin:0px;
padding:0px;
/* user-select: none; */
}
body::after{
position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
content:url(assets/img/home-img-wall-led.png) url(assets/img/home-img-tv.png);
}
* {transition: height 0.5s ease;}
*, *::after, *::before {background-repeat: no-repeat;}
a {text-decoration: none;}
/* Scroll*/
::-webkit-scrollbar { display:none; width: 5px;}
::-webkit-scrollbar:hover { width: 10px; }
::-webkit-scrollbar-track { background: white;}
::-webkit-scrollbar-thumb { background-color: #1d1d1f; }
::-webkit-scrollbar-thumb:hover { background-color: #1d1d1f; width: 10px;}
/* ---- Elements ---- */
.left {float: left;}
.right {float: right;}
.desktop-hide {display:none;}
.phone-hide {display: block;}
.main-holder {
position: relative;
float: left;
width: 1440px;
height: 100%;
box-sizing: border-box;
padding: 0px 40px;
margin-left: calc(50% - 720px);
/* background-color: #c9d0da; */
}
.segment {
position: relative;
float: left;
height: 650px;
height: fit-content;
width: 100%;
/* background-color: antiquewhite; */
/* border-bottom: 1px solid #c9d0da; */
padding: 70px 0px;
}
.segment.black {background-color: black;}
.segment.gray {background-color: #ededed;}
.black {background-color: black;}
.main-holder.two-col {
display: grid;
grid-template-columns: 560px 800px;
grid-gap: 40px;
box-sizing: border-box;
}
.main-holder.large {padding: 0px;}
.tilted-card {
position: relative;
float: left;
height: 320px;
width: 240px;
transform-origin: center;
transform: rotate(45deg);
/* background-color: black; */
box-sizing: border-box;
/* border: 1px solid white; */
border-radius: 120px;
border-radius: 120px;
background-color: #212121;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* .tilted-card:hover {background-color: #101010;} */
.tilted-card .heat {
width: 150%;
height: 150%;
background-size: 360px auto;
background-position: center;
background-image: url(assets/img/air-con.png);
background-repeat: no-repeat;
transform: rotate(-45deg);
top: -25%;
position: absolute;
left: -25%;
}
.tilted-card .lights {
width: 100%;
height: 100%;
background-size: 170px auto;
background-position: right;
background-image: url(assets/img/lights.png);
background-repeat: no-repeat;
transform: rotate(-45deg);
position: absolute;
}
.tilted-card .blinds {
width: 100%;
height: 100%;
background-size: 140px auto;
background-position: center;
background-image: url(assets/img/blinds-img.png);
background-repeat: no-repeat;
transform: rotate(-45deg);
position: absolute;
}
.tilted-card .cctv {
width: 150%;
height: 150%;
background-size: 345px auto;
background-position: center;
background-image: url(assets/img/cctv-img.png);
background-repeat: no-repeat;
transform: rotate(-45deg);
position: absolute;
left: -25%;
top: -25%;
}
.tilted-card .tv {
width: 150%;
height: 150%;
background-size: 440px auto;
background-position: center;
background-image: url(assets/img/tv-img.png);
background-repeat: no-repeat;
transform: rotate(-45deg);
position: absolute;
left: -25%;
top: -25%;
}
.tilted-card .washing-machine {
width: 150%;
height: 150%;
background-size: 350px auto;
background-position: center;
background-image: url(assets/img/washing-machine-img.png);
background-repeat: no-repeat;
transform: rotate(-45deg);
position: absolute;
left: -25%;
top: -25%;
}
.tilted-card.gray {background-color: #ededed; border: none;}
/* Hamburger menu */
.hamburger {
position: relative;
float: right;
width: 30px;
height: 30px;
margin-top: 14px;
cursor: pointer;
display: none;
}
.hamburger .line{
width: 30px;
height: 3px;
background-color: black;
display: block;
margin: 6px auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border-radius: 1.5px;
}
#hamburger-1.is-active .line:nth-child(2){
opacity: 0;
}
#hamburger-1.is-active .line:nth-child(1){
-webkit-transform: translateY(9.5px) rotate(45deg);
-ms-transform: translateY(9.5px) rotate(45deg);
-o-transform: translateY(9.5px) rotate(45deg);
transform: translateY(9.5px) rotate(45deg);
}
#hamburger-1.is-active .line:nth-child(3){
-webkit-transform: translateY(-9.5px) rotate(-45deg);
-ms-transform: translateY(-9.5px) rotate(-45deg);
-o-transform: translateY(-9.5px) rotate(-45deg);
transform: translateY(-9.5px) rotate(-45deg);
}
/* .hamburger-lines {
display: block;
height: 26px;
width: 32px;
position: relative;
top: 17px;
left: 20px;
z-index: 2;
flex-direction: column;
justify-content: space-between;
margin-top: 34px;
display: flex;
float: right;
margin-top: 28px;
display: none;
}
.hamburger-lines .line {
display: block;
height: 4px;
width: 100%;
border-radius: 10px;
background: #0e2431;
}
.hamburger-lines .line1 {
transform-origin: 0% 0%;
transition: transform 0.4s ease-in-out;
}
.hamburger-lines .line2 {
transition: transform 0.2s ease-in-out;
}
.hamburger-lines .line3 {
transform-origin: 0% 100%;
transition: transform 0.4s ease-in-out;
} */
/* Input */
input {
position: relative;
float: left;
width: 440px;
height: 50px;
border-radius: 25px;
box-sizing: border-box;
border: 1px solid #b7bdc1;
line-height: 50px;
padding: 0px 30px;
font-family: 'Montserrat', sans-serif;
}
textarea {
position: relative;
float: left;
width: 440px;
height: 110px;
border-radius: 25px;
box-sizing: border-box;
border: 1px solid #b7bdc1;
line-height: 50px;
padding: 0px 30px;
font-family: 'Montserrat', sans-serif;
}
select {
position: relative;
float: left;
width: 440px;
height: 50px;
border-radius: 25px;
box-sizing: border-box;
border: 1px solid #b7bdc1;
line-height: 50px;
padding: 0px 30px;
font-family: 'Montserrat', sans-serif;
appearance: none;
margin-top: 15px;
background-color: transparent;
}
/* Txt */
h1,h2,h3,h4,h5 {
margin-block-start: 0;
margin-block-end: 0;
color: #1d1d1f;
}
/* Size in px */
h1.extra {font-size: 50px; line-height: 50px; margin-bottom: 30px;}
h1 {font-size: 40px; font-weight: 800; margin-bottom: 30px;}
h2 {font-size: 30px; font-weight: 600;}
h3 {font-size: 20px; font-weight: 700;}
h4 {font-size: 16px; font-weight: 700;}
h5 {font-size: 12px; font-weight: 600;}
/* --------------------------------------------*/
/* Size in rem */
/* h1.extra {font-size: 3.125em; line-height: 50px; margin-bottom: 30px;}
h1 {font-size: 2.500rem; font-weight: 800; margin-bottom: 30px; line-height: 40px;}
h2 {font-size: 1.875rem; font-weight: 600;}
h3 {font-size: 1.250rem; font-weight: 700;}
h4 {font-size: 1.000rem; font-weight: 700;}
h5 {font-size: 0.750rem; font-weight: 700; line-height: 8px;} */
/* --------------------------------------------*/
.main-holder h1 {width: 500px;}
p {font-size: 16px; color: #334041; font-weight: 400; line-height: 24px;}
p.light {color: #b6c2c3;}
.main-txt {font-size: 16px; color: #334041; font-weight: 400; line-height: 24px;}
.main-txt.light {color: #b6c2c3;}
/* For black segment */
.segment.black h1, .segment.black h2, .segment.black h3, .segment.black h4, .segment.black h5 { color: white; }
.segment.black .main-txt {color: #b6c2c3;}
.app.segment h1 {color: white;}
.app.segment .info-col .main-txt {color: #b6c2c3;}
/* --------------------------------------------*/
li {list-style: none;}
ul {
display: block;
list-style-type: disc;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}
/* a {color: #04bb81; font-weight: 700;} */
.important-txt {color:#c9d0da; font-weight: 700;}
/* Btn */
.main-btn {
position: relative;
min-width: 200px;
max-width: fit-content;
height: 60px;
box-sizing: border-box;
padding: 0px 25px;
border-radius: 30px;
font-size: 14px;
font-weight: 600;
text-align: center;
line-height: 60px;
/* text-transform: capitalize; */
cursor: pointer ;
color: white;
background: #1d1d1f;
border:none;
font-family: 'Montserrat', sans-serif;
transition: background 0.3s ease, box-shadow 0.3s ease;
/* margin-top: 30px; */
}
.main-btn.hide { display:none; }
.main-btn:hover {background: #13a1ff;box-shadow: 0px 0px 30px 0px #13a1ff;}
/* .main-btn:hover {background: #1d1d1f;box-shadow: 0px 0px 30px 0px #1d1d1f;} */
.arrow-btn {
position: absolute;
right: 0px;
width: 50px;
height: 50px;
border-radius: 20px;
background-color: white;
background-size: 15px auto;
background-position: center;
background-image: url(assets/ic/arrow-right-ic.svg);
cursor: pointer;
z-index: 3;
box-sizing: border-box;
transition: animation 0.3s ease;
animation: none;
}
/* .arrow-btn:hover {
animation: pulse 1s infinite;
} */
.arrow-btn.left {
left: 0px;
background-image: url(assets/ic/arrow-left-ic.svg);
}
.arrow-btn.contour {border: 1px solid #b7bdc1;}
.tilted-btn {
position: relative;
float: left;
height: 64px;
width: 49px;
background-color: #1d1d1f;
border-radius: 23px;
transform: rotate(45deg);
margin-right: 25px;
background-position: center;
background-size: 20px;
cursor: pointer;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.tilted-btn:hover {background: #13a1ff;box-shadow: 0px 0px 30px 0px #13a1ff;}
.tilted-btn .fb {
position: relative;
float: left;
width: 100%;
height: 100%;
background-image: url(assets/ic/fb-ic.svg);
background-position: center;
background-size: 20px;
transform: rotate(-45deg);
}
.tilted-btn .insta {
position: relative;
float: left;
width: 100%;
height: 100%;
background-image: url(assets/ic/insta-ic.svg);
background-position: center;
background-size: 20px;
transform: rotate(-45deg);
}
.tilted-btn .linkedin {
position: relative;
float: left;
width: 100%;
height: 100%;
background-image: url(assets/ic/linkedin-ic.png);
background-position: center;
background-size: 20px;
transform: rotate(-45deg);
}
.tilted-btn .youtube {
position: relative;
float: left;
width: 100%;
height: 100%;
background-image: url(assets/ic/youtube-ic.svg);
background-position: center;
background-size: 20px;
transform: rotate(-45deg);
}
/* Icons */
.filled-ic {
position: relative;
float: left;
width: 60px;
height: 60px;
box-sizing: border-box;
border-radius: 27px;
border: 1px solid #959ea3;
background-size: 20px auto;
background-position: center;
}
.filled-ic.home {background-image: url(assets/ic/home-ic.svg);}
.filled-ic.office {background-image: url(assets/ic/office-ic.svg);}
.filled-ic.building {background-image: url(assets/ic/building-ic.svg);}
.filled-ic.hotel {background-image: url(assets/ic/hotel-ic.svg); background-size: 25px auto;}
.filled-ic.industrial {background-image: url(assets/ic/industrial-ic.svg);}
.filled-ic.email {background-image: url(assets/ic/email-ic.svg);}
.filled-ic.phone {background-image: url(assets/ic/phone-ic.svg);}
.filled-ic.location {background-image: url(assets/ic/location-ic.svg);}
.minimal-ic {
position: relative;
float: left;
width: 60px;
height: 60px;
box-sizing: border-box;
border-radius: 27px;
/* border: 1px solid #959ea3; */
background-size: 40px auto;
background-position: center;
}
.minimal-ic.control {background-image: url(assets/ic/control-ic.svg);}
.minimal-ic.time {background-image: url(assets/ic/time-ic.svg);}
.minimal-ic.money {background-image: url(assets/ic/money-ic.svg);}
.minimal-ic.security {background-image: url(assets/ic/security-ic.svg);}
.minimal-ic.app {background-image: url(assets/ic/app-ic.svg);}
.minimal-ic.custom {background-image: url(assets/ic/custom-ic.svg);}
.check-ic {
position: relative;
float: left;
width: 36px;
height: 36px;
border-radius: 27px;
background-color: white;
background-size: 15px auto;
background-position: center;
background-image: url(assets/ic/check-ic.svg);
}
.play-ic {
position: relative;
float: left;
width: 60px;
height: 60px;
background-size: 16px auto;
background-position: center;
background-image: url(assets/ic/play-ic.svg);
/* animation: rotating 8s linear infinite ; */
}
.play-ic::after {
content: "";
position: absolute;
width: 60px;
height: 60px;
border-radius: 30px;
border: 2px dashed #1d1d1f;
animation: rotating 8s linear infinite;
box-sizing: border-box;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* Round Card Large */
.round-card-large {
position: relative;
float: left;
height: 620px;
width: 465px;
border-radius: 200px;
background-color: #ededed;
background: url(assets/img/features-img.jpg);
background-size: cover;
background-position: center;
}
/* Nav */
.nav {
position: fixed;
float: left;
height: 70px;
background-color: white;
width: 100%;
opacity:0;
transition:opacity 0.3s ease, height 0.5s ease;
overflow: hidden;
}
.nav.active { opacity:1; }
.nav .main-holder {height: 100%;}
.nav .nav-logo {
position: relative;
float: left;
height:70px;
width: 120px;
background-image: url(assets/oni-logo.svg);
background-size: auto 30px;
background-position: left center;
margin-right: 70px;
cursor: pointer;
}
.nav ul {
position: relative;
float: left;
height: 60px;
width: fit-content;
}
.nav ul li {
position: relative;
float: left;
width: fit-content;
height: 50px;
line-height: 50px;
font-size: 16px;
font-weight: 600;
color: black;
margin-right: 30px;
margin-top: 10px;
cursor: pointer;
transition: color 0.3s ease;
}
.nav ul li:hover, .nav ul li.active {color: #13a1ff; }
.nav .lang {
position: relative;
float: right;
height: 50px;
width: 50px;
box-sizing: border-box;
line-height: 50px;
border: 1px solid #959ea3;
border-radius: 20px;
font-size: 14px;
font-weight: 800;
color: black;
text-align: center;
cursor: pointer;
margin-top: 9px;
}
.nav.fixed {
position: fixed;
background: rgb(255 255 255 / 70%);
height: 60px;
z-index: 100;
box-shadow: inset 0 0 0px 0px rgb(0 0 0 / 30%), 0px 0px 10px 0px rgb(0 0 0 / 10%);
backdrop-filter: saturate(180%) blur(10px);
}
.nav:not(.active) {pointer-events: none;}
.nav.fixed .nav-logo {
position: relative;
float: left;
height: 60px;
width: 120px;
background-image: url(assets/oni-logo.svg);
background-size: auto 30px;
background-position: left center;
margin-right: 70px;
cursor: pointer;
}
.nav.fixed .lang {margin-top: 5px; }
.nav.fixed ul li { margin-top: 5px;}
.nav.open {
box-shadow: inset 0 0 0px 0px rgb(0 0 0 / 30%), 0px 0px 10px 0px rgb(0 0 0 / 10%);
backdrop-filter: saturate(180%) blur(10px);
background: rgb(255 255 255 / 80%);
height: 100%;
position: absolute;
z-index: 3;
/* height: 100%; */
}
.nav.open ul {height: fit-content;}
/* .nav .nav-links li { opacity:0; } */
.nav.open .nav-links li { opacity:1; }
/* Home segment */
.home.segment {height: 630px; padding: 0px; margin-top: 60px;}
.info-col {
display: flex;
height: fit-content;
flex-direction: column;
align-self: center;
}
.home.segment .info-col .main-btn {margin-top:80px;}
.img-col {
display: flex;
height: fit-content;
flex-direction: column;
align-self: center;
}
.home-img {
position: relative;
height: 550px;
width: 1080px;
/* right: -240px; */
border-radius: 270px 0px 0px 270px;
background-color: #1d1d1f;
background-image: url(assets/img/home-img.png);
overflow: hidden;
background-size: cover;
align-items: end;
display: flex;
background-position: center;
transition: background-image 0.3s ease;
}
.home-img.wall-led {
background-image: url(assets/img/home-img-wall-led.png);
}
.home-img.wall-tv {
background-image: url(assets/img/home-img-tv.png);
}
.home-img .loader-something {
position: absolute;
width: calc(100% - 1px);
height: calc(100% - 2px);
background: black;
z-index: 4;
top: 1px;
}
.home-img .loader-something.hide { display:none; }
.home-img .loader-something img {
float: left;
margin-left: calc(50% - 50px);
margin-top: 20%;
}
.home-img .glass-effect {
position: absolute;
position: relative;
float: left;
width: 100%;
height: 130px;
box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 54%);
z-index: 1;
overflow: hidden;
box-shadow: inset 0 0 2000px 100px rgb(0 0 0 / 30%), 0px 0px 10px 0px rgb(0 0 0 / 54%);
backdrop-filter: saturate(150%) blur(10px);
/* display:none; */
}
.home-img .glass-effect.activate { display:block }
/* .home-img .glass-effect::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
filter: blur(10px);
background: inherit;
width: 100%;
height: 120%;
} */
.home-img .card-holder {
position: absolute;
bottom: 60px;
left: 150px;
width: 520px;
/* width: 35vw; */
height: 125px;
/* background-color: red; */
/* overflow: hidden; */
z-index: 2;
white-space: nowrap;
cursor: pointer;
user-select: none;
overflow-x:auto;
overflow-y:hidden;
/* display:none; */
}
.home-img .card-holder.activate { display:block; }
.home-img .card-holder .device-card {
position: relative;
/* float: left; */
width: 185px;
height: 125px;
border-radius: 30px;
background-color: white;
box-shadow: 0px 0px 35px 0px rgba(109, 109, 120, 0.11);
box-sizing: border-box;
padding: 20px;
margin-right: 6px;
display: inline-block;
}
.home-img .card-holder .device-card .device-img {
position: relative;
float: left;
width: 65px;
height: 40px;
border-radius: 15px;
background-color: #ededed;
background-size: 70px auto;
background-position: center;
}
.home-img .card-holder .device-card .device-img.led {
background-image: url(assets/img/led-img.PNG);
}
.home-img .card-holder .device-card .device-img.tv {
background-image: url(assets/img/tv-off-img.PNG);
}
.toggle {
position: relative;
float: right;
width: 40px;
height: 20px;
border-radius: 15px;
background-color: #97a0a5;
transition: background-color 1s ease, box-shadow 0.5s ease;
cursor: pointer;
margin-top: 10px;
}
.toggle .thumb {
position: absolute;
top: 0px;
left: 0px;
width: 20px;
height: 20px;
border-radius: 10px;
box-sizing: border-box;
border: 1px solid white;
background-color: black;
transition: left 0.5s ease-out;
/* transition-property: left; */
}
.toggle .thumb::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: white;
border-radius: 50px;
top: 4px;
left: 4px;
}
.toggle.active {background: #3eb4ff;}
.device-card.selected .toggle {background-color: #3eb4ff; box-shadow: 0px 0px 20px 0px #13a1ff;}
.device-card.selected .toggle .thumb {left:20px;}
.home-img .card-holder .info-holder {
position: relative;
float: left;
width: 100%;
height: fit-content;
margin-top: 10px;
}
.home-img .card-holder .info-holder .sub-info { font-size: 12px; color: #97a0a5; font-weight: 500;}
.img-col .arrow-btn {bottom: 115px; right: 40px;}
/* Bar segment */
.type.segment { padding: 70px 0px 0px 0px;}
.bar {
/* position: relative;
float: left; */
width: 100%;
height: fit-content;
box-sizing: border-box;
padding: 20px 40px;
box-shadow: 0px 0px 35px 0px rgb(109 109 120 / 20%);
border-radius: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.bar .bar-item {
position: relative;
float: left;
height: 60px;
width: fit-content;
display: flex;
align-items: center;
}
.bar .bar-item .filled-ic {margin-right: 20px;}
.bar .bar-item h4 {position: relative; float: left; width: 150px;}
/* Features segment */
.info-col .features-holder {
position: relative;
float: left;
height: fit-content;
width: 100%;
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 30px;
}
.info-col .features-holder .feature {
position: relative;
float: left;
}
.info-col .features-holder .feature .minimal-ic {
height: 100%;
margin-right: 20px;
}
.info-col .features-holder .feature .info-holder {
position: relative;
float: left;
width: calc(100% - 110px);
}
/* Automation segment */
.grid-holder {
position: relative;
float: left;
height: fit-content;
width: 100%;
display: grid;
grid-gap: 30px;
box-sizing: border-box;
}
.grid-holder.three { grid-template-columns: auto auto auto;}
/* .grid-holder.four { grid-template-columns: auto auto auto auto;} */
.grid-holder .list-holder {
/* position: relative;
float: left; */
/* width: 100%; */
display: flex;
flex-direction: column;
align-items: center;
margin: 30px 0px;
}
.grid-holder .list-holder .tilted-card {margin-bottom: 60px; }
.grid-holder .list-holder .info-holder {
position: relative;
float: left;
width: 330px;
display: grid;
align-items: center;
grid-gap: 10px;
}
.grid-holder .list-holder .info-holder h3 {margin-bottom: 20px;}
.grid-holder .list-holder .info-holder .list-row {
position: relative;
float: left;
align-items: center;
display: flex;
}
.grid-holder .list-holder .info-holder .list-row .check-ic {margin-right: 20px;}
.grid-holder .list-holder .info-holder .list-row .main-txt {
position: relative;
float: left;
width: calc(100% - 56px);
}
.contact-banner {
position: relative;
float: left;
height: 134px;
width: 100%;
background-color: white;
border-radius: 45px;
display: flex;
justify-content: space-between;
color: #1d1d1f;
font-size: 20px;
box-sizing: border-box;
padding: 0px 60px;
align-items: center;
margin-top: 40px;
}
/* Devices Segment */
.devices.segment .carousel {
float: left;
display: block;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
height: fit-content;
white-space: nowrap;
box-sizing: border-box;
padding: 0px 0px 0px 30px;
}
.devices.segment .info-col {
width: 560px;
position: relative;
float: left;
margin-bottom: 30px;
}
.devices.segment .slider-holder {
position: relative;
float: left;
width: 100%;
margin-left: 0px;
cursor: pointer;
}
.devices.segment .arrow-btn {position: relative; margin-top: 30px; float: right;transition:opacity 0.3s ease;}
.devices.segment .arrow-btn.left {float: left;}
.devices.segment .arrow-btn.disabled {
opacity:0;
pointer-events: none;
}
.devices.segment .carousel .col {
position: relative;
float: none;
width: calc(25% - 15px);
display: inline-block;
margin-right: 30px;
height: 380px;
/* height: fit-content; */
}
.devices.segment .carousel .col h4 {
float: left;
width: calc(100% - 30px);
white-space: normal;
}
.devices.segment .carousel .col .tilted-card.gray {align-self: center; width: 240px; height: 320px;}
.devices.segment .carousel .col .tilted-card.gray .img-holder {
position: relative;
float: left;
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
transform: rotate(-45deg);
}
.img-holder.device1 { background-image: url(assets/img/device-img.png); }
.img-holder.device2 { background-image: url(assets/img/device2-img.png); }
.img-holder.device3 { background-image: url(assets/img/device3-img.png); }
.img-holder.device4 { background-image: url(assets/img/device4-img.png); }
.img-holder.device5 { background-image: url(assets/img/device5-img.png); }
/* .img-holder.device6 { background-image: url(assets/img/device6-img.png); } */
/* Scheme Segment */
.scheme-holder {
position: relative;
float: left;
width: 100%;
height: 225px;
background-color: white;
border-radius: 60px;
border: 1px solid #b7bdc1;
box-sizing: border-box;
padding: 0px 40px;
}
.scheme-holder.grid-holder.three {
grid-template-columns: 30% 30% 30%;
}
.scheme-holder .scheme {
position: relative;
float: left;
width: 100%;
height: 100%;
text-align: center;
}
.scheme-holder .num {
position: absolute;
top: 25px;
left: 0px;
width: 34px;
height: 34px;
border-radius: 17px;
border: 3px solid black;
background-color: white;
text-align: center;
color: #1d1d1f;
font-size: 16px;
font-weight: 700;
line-height: 28px;
box-sizing: border-box;
}
.scheme-holder .scheme .scheme-img {
width: 100%;
height: 150px;
background-position: center;
/* background-image:url(assets/img/scheme-img.png) ; */
}
.scheme-img.switch {background-image: url(assets/ic/switch-ic.svg); background-size: 120px auto;}
.scheme-img.controller {background-image: url(assets/ic/controller-ic.svg); background-size: 180px auto;}
.scheme-img.lamp {background-image: url(assets/ill/lamp-ill.svg); background-size: 110px auto;}
/* App Segment */
.app.segment .main-holder.large .background{
position: absolute;
left: 0px;
top: 60px;
width: 100%;
height: 500px;
background-color: black;
border-radius: 200px;
}
/* .app.segment .main-holder.large .main-holder.two-col {margin-top: 50px;} */
.app.segment .main-holder.large .main-holder.two-col .img-col {
position: relative;
float: left;
width: 100%;
height: 635px;
align-self: center;
}
.app.segment .main-holder.large .main-holder.two-col .img-col .phone-img {
position: relative;
float: left;
width: 100%;
height: 100%;
background-size: 224px auto;
background-position: center;
background-image: url(assets/img/phone-img.png);
}
.app.segment .info-col {width: 530px; margin-top: 80px;}
.badge-holder {
position: relative;
float: left;
height: 50px;
width: 100%;
}
.gallery-holder {
position: relative;
float: left;
width: 100%;
height: fit-content;
overflow: hidden;
margin-top: 20px;
}
.gallery-holder .slider-holder {
position: relative;
float: left;
width: calc(100% - 80px);
height: fit-content;
overflow: hidden;
white-space: nowrap;
padding: 10px;
box-sizing: border-box;
}
/* .app.segment .gallery-holder::after {
content: "";
position: absolute;
right: 0px;
width: 50px;
height: 50px;
border-radius: 20px;
background-color: white;
background-size: 15px auto;
background-position: center;
background-image: url(assets/ic/arrow-right-ic.svg);
cursor: pointer;
z-index: 3;
box-sizing: border-box;
top: 30px;
} */
.app.segment .gallery-holder::after:hover {
animation: pulse-white 1s infinite;
}
.gallery-holder .img {
position: relative;
float: left;
width: 125px;
height: 170px;
border-radius: 30px;
background-color: #ededed;
margin-right: 10px;
background: #ededed;
cursor: pointer;
background-repeat: no-repeat;
box-sizing: border-box;
}
.app.segment .gallery-holder .img {
box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%);
/* border: 1px solid #b7bdc1; */
}
.app.segment .gallery-holder .img.screen1 {
background-image: url(assets/img/rooms-img.png);
background-size: cover;
}
.app.segment .gallery-holder .img.screen2 {
background-image: url(assets/img/security-screen-img.png);
background-size: cover;
}
.app.segment .gallery-holder .img.screen3 {
background-image: url(assets/img/security2-screen-img.png);
background-size: cover;
}
.gallery-holder .arrow-btn {margin-top: 30px;}
.badge-holder {
position: relative;
float: left;
height: fit-content;
width: 100%;
}
.badge-holder .tooltip {
position: absolute;
top: 5px;
height: 30px;
width: 200px;
background-color: white;
color: #1d1d1f;
font-size: 14px ;
font-weight: 700;
text-align: center;
box-sizing: border-box;
padding: 0px 15px;
line-height: 30px;
z-index: 50;
border-radius: 10px;
opacity: 0;
transition: opacity 0.3s ease;
left: calc(50% - 175px);
}
.badge-holder:hover .tooltip {opacity: 1;}
.badge-holder:hover .badge {opacity: 0.5;}
.badge-holder .badge {
position: relative;
float: left;
width: 135px;
height: 40px;
background-size: auto 40px ;
transition: opacity 0.2s ease;
margin-bottom: 10px;
}
.badge.app-store {background-image: url(assets/img/app-store.svg); width: 124px;}
.badge.google-play {background-image: url(assets/img/google-play.png);}
.badge.huawei {background-image: url(assets/img/huawei.png);}
.tutorial-banner {
position: relative;
float: left;
width: 100%;
height: 156px;
border-radius: 50px;
background-color: white;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 40px;
color: black;
font-size: 20px;
box-sizing: border-box;
padding: 0px 60px;
align-items: center;
margin-top: 40px;
border: 1px solid #b7bdc1;
}
/* Tablet Segment */
.tablet-img {
position: relative;
float: left;
height: 620px;
width: 100%;
background-position: center;
background-size: contain;
background-image: url(assets/img/tablet-img.png);
}
.tablet.segment .gallery-holder .img {
/* background: white; */
/* border: 1px solid #b7bdc1 ; */
background-size: 120% auto;
background-repeat: no-repeat;
background-position: center;
box-sizing: border-box;
width: 200px;
height: 280px;
cursor: auto;
border-radius: 40px;
}
.tablet.segment .img.tablet1-ill {background-image: url(assets/ill/tablet1-ill.svg);}
.tablet.segment .img.tablet2-ill {background-image: url(assets/ill/tablet2-ill.svg);}
/* Custom design Segment */
/* .custom-design.segment .img-col . */
.design-img {
position: relative;
float: left;
height: 345px;
width: 100%;
background-position: center;
background-size: contain;
}
.design-img.photo1 { background-image: url(assets/img/design-img.png);}
.design-img.photo2 { background-image: url(assets/img/design2-img.png);}
.design-img.photo3 { background-image: url(assets/img/design3-img.png);}
.design-img::before {
content: "";
position: absolute;
left: 0px;
width: 50px;
height: 50px;
border-radius: 20px;
background-color: white;
background-size: 15px auto;
background-position: center;
background-image: url(assets/ic/arrow-left-ic.svg);
cursor: pointer;
z-index: 3;
box-sizing: border-box;
top: calc(50% - 30px);
}
.design-img::after {
content: "";
position: absolute;
right: 0px;
width: 50px;
height: 50px;
border-radius: 20px;
background-color: white;
background-size: 15px auto;
background-position: center;
background-image: url(assets/ic/arrow-right-ic.svg);
cursor: pointer;
z-index: 3;
box-sizing: border-box;
top: calc(50% - 30px);
}
/* Footer Segment */
.footer.segment .main-holder > .info-col {
align-self: flex-start;
}
.input-holder {
position: relative;
float: left;
width: 440px;
height: fit-content;
margin: 10px 0px;
}
.input-holder label {
position: relative;
float: left;
width: fit-content;
height: 30px;
font-size: 1.000rem;
font-weight: 700;
line-height: 30px;
overflow:hidden;
box-sizing: border-box;
padding: 0px 30px;
color: #1d1d1f;
}
.input-holder .arrow-select {
content: "";
position: absolute;
width: 30px;
background-image: url(assets/ic/arrow-select.svg);
background-size: 12px auto;
background-position: center;
z-index: 0;
height: 50px;
top: 45px;
right: 15px;
}
.input-holder input, .input-holder textarea {margin-top: 15px; resize: none;}
.input-holder.required label::after {
content: "\002A";
position: relative;
float: right;
color: #ff3456;
margin-left: 5px;
}
input:invalid {border: 1px solid #ff3456;}
.message-ok {
position: relative;
float: left;
height: fit-content;
width: 440px;
background-color: #5dff6a;
color: #1d1d1f;
font-size: 14px;
padding: 15px;
box-sizing: border-box;
border-radius: 30px;
text-align: center;
font-weight: 700;
/* position: absolute; */
/* bottom: 92px; */
height: 64px;
line-height: 32px;
animation: pulse 1s ease;
animation-iteration-count: 1;
margin-top: 30px;
display:none;
}
.message-ok.show { display:block; }
.message-fail {
position: relative;
float: left;
height: fit-content;
width: 440px;
background-color: #ff4e4e;
color: #1d1d1f;
font-size: 14px;
padding: 15px;
box-sizing: border-box;
border-radius: 30px;
text-align: center;
font-weight: 700;
/* position: absolute; */
/* bottom: 92px; */
height: 64px;
line-height: 32px;
animation: pulse 1s ease;
animation-iteration-count: 1;
margin-top: 30px;
display:none;
}
.message-fail.show { display:block; }
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(173, 255, 47, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 20px rgba(173, 255, 47, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(173, 255, 47, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(173, 255, 47, 0.4);
box-shadow: 0 0 0 0 rgba(173, 255, 47, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 20px rgba(173, 255, 47, 0);
box-shadow: 0 0 0 20px rgba(173, 255, 47, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(173, 255, 47, 0);
box-shadow: 0 0 0 0 rgba(173, 255, 47, 0);
}
}
.axion-holder {
position: relative;
float: left;
width: 100%;
height: fit-content;
box-sizing: border-box;
padding: 26px 40px;
border-radius: 60px;
border: 1px solid #b7bdc1;
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
}
.axion-holder .img-holder {
position: relative;
float: left;
width: 84px;
height: 84px;
border-radius: 27px;
background-color: black;
background-image: url(assets/axion-ic.svg);
background-size: 50px auto;
background-position: center;
margin-right: 20px;
}
.contacts-holder {
position: relative;
float: left;
width: 100%;
height: fit-content;
box-sizing: border-box;
padding: 40px 30px 0px 30px;
user-select: text;
}
.contacts-holder .row {
position: relative;
float: left;
height: 60px;
width: 100%;
margin-bottom: 34px;
}
.contacts-holder .row .info-holder {
position: relative;
float: left;
height: 50px;
box-sizing: border-box;
padding-top: 9.5px;
}
.contacts-holder .row .filled-ic {margin-right: 34px;}
.contacts-holder .row .main-btn {float: right; margin-top: 0px;}
.contacts-holder .map-holder {
position: relative;
float: left;
width: 100%;
height: 230px;
background-color: #ededed;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 40px;
}
.footer.segment .main-txt.copyright {
position: relative;
float: left;
width: 100%;
/* margin-left: calc(50% - 140px); */
/* text-align: center; */
}
/* ---- Resolutions --------*/
/* ----1500px to 1200px -----*/
@media screen and (max-width: 1500px) and (min-width: 1201px) {
.segment {padding: 50px 0px;}
.main-holder {
width: 100%;
margin-left: 0px;
}
.main-holder.large {padding: 0px 40px;}
.main-holder.two-col {
box-sizing: border-box;
grid-template-columns: 40% calc(60% - 40px);
width: 100%;
margin-left: 0px;
}
/* Home segment */
.home.segment {height: fit-content;}
.home.segment .home-img {width: 120%;}
.home-img .card-holder {width: 50%;}
.home-img .glass-effect { background-position: bottom;}
.bar {
justify-content: space-between;
/* padding: 40px 40px; */
/* width: calc(100% - 80px);
margin-left: 40px; */
border-radius: 80px;
width: 100%;
margin-left: 0px;
border-radius: 0px;
}
.bar .bar-item .filled-ic {width: 50px;}
/* .bar .bar-item {
flex-direction: column;
text-align: center;
height: fit-content;
} */
/* .bar .bar-item .filled-ic { margin-right: 0px; margin-bottom: 20px;} */
/* Bar Segment */
.type.segment .main-holder.large {padding: 0px;}
/* Features Segment */
.info-col .features-holder { grid-template-columns: 100%;}
.img-col .round-card-large {height: 100%; position: absolute; top: 0px; background-color: black;}
/* Devices Segment */
/* .devices.segment .carousel { } */
.devices.segment .carousel .col { width: calc(33% - 15px);}
/* .devices.segment .carousel .col .tilted-card.gray { width: 180px; height: 230px; } */
/* APP segment */
.app.segment .main-holder.large .background { width: calc(100% - 80px); left: 40px;}
.tutorial-banner {height: fit-content; padding: 20px 40px; grid-gap: 30px;}
}
/* ---- 1200px to 901px -----*/
@media screen and (max-width: 1200px) and (min-width: 901px) {
/* Txt */
/* Size in px */
h1.extra {font-size: 40px; line-height: 40px; margin-bottom: 30px;}
h1 {font-size: 40px; font-weight: 800; margin-bottom: 30px;}
h2 {font-size: 24px; font-weight: 600;}
h3 {font-size: 20px; font-weight: 700;}
h4 {font-size: 16px; font-weight: 700;}
h5 {font-size: 12px; font-weight: 600;}
.main-holder h1 {width: fit-content; max-width: 500px;}
.segment {padding: 50px 0px;}
.main-holder {
width: 100%;
margin-left: 0px;
padding: 0px 30px;
}
.info-col {justify-self: center;}
/* .img-col {justify-self: center;} */
/* .main-txt {width: 800px;} */
.main-holder.large {padding: 0px 40px;}
.main-holder.two-col {
box-sizing: border-box;
/* grid-template-columns: 40% calc(60% - 40px); */
grid-template-columns: 100%;
width: 100%;
margin-left: 0px;
}
/* Nav */
.nav {height: 60px;}
.nav .nav-logo {margin-right: 10px !important; background-size: auto 26px !important;}
.nav ul li {font-size: 14px; margin-top: 10px; margin-right: 20px;}
.nav .lang {margin-top: 10px;}
/* Home segment */
.home.segment {height: fit-content;}
.home.segment .main-holder.two-col { grid-template-columns: 45% 55%; grid-gap: 20px; width: 880px; margin-left: calc(50% - 440px);}
/* .home.segment .main-holder h2 {width: 600px;} */
.home.segment .info-col {height: 500px; justify-content: center; margin-left: 0px; }
.home.segment .info-col .main-btn {margin-top: 20px;}
.home.segment .img-col .arrow-btn {display: none;}
.home.segment .home-img {width: 140%; height: 420px;}
.home-img .card-holder { left: 100px; bottom: 40px;}
.home-img .card-holder .device-card {padding: 15px; height: 115px; width: 170px;}
.home-img .glass-effect { display: none;}
.bar {
justify-content: space-between;
padding: 0px;
/* width: calc(100% - 80px);
margin-left: 40px; */
border-radius: 80px;
width: 100%;
margin-left: 0px;
box-shadow: none;
}
.bar .bar-item {
flex-direction: column;
text-align: center;
height: fit-content;
}
.bar .bar-item .filled-ic { margin-right: 0px; margin-bottom: 20px;}
/* Type segment */
.type.segment {padding: 30px 0px; border-bottom: 1px solid #ededed; border-top: 1px solid #ededed;}
.type.segment .main-holder.large {width: 880px; margin-left: calc(50% - 440px);}
/* Features Segment */
.features.segment .main-holder.two-col { grid-gap: 20px; grid-template-columns: 100%;}
.info-col .features-holder { grid-template-columns: 50% 50%;}
.features.segment .img-col { width: 800px; justify-self: center;}
.img-col .round-card-large {width: 100%; height: 400px;}
.features.segment .info-col {width: 800px;}
/* Automation Segment */
.automation.segment .main-holder {width: 880px; margin-left: calc(50% - 440px);}
.automation.segment .grid-holder.three { grid-template-columns: auto auto; }
.automation-banner {width: 800px; margin-left: calc(50% - 400px);}
.automation-banner span {font-size: 18px; margin-right: 20px;}
/* Devices Segment */
.devices.segment .carousel .col { width: calc(33% - 15px); height: 300px;}
.devices.segment .main-holder.large {width: 900px; margin-left: calc(50% - 450px);}
.devices.segment .carousel .col .tilted-card.gray { width: 180px; height: 230px; }
/* Scheme Segment */
.scheme.segment .main-txt {width: 800px;}
.scheme-holder {width: 800px; margin-left: calc(50% - 400px);}
/* APP segment */
.app.segment .main-holder.large .background { width: calc(100% - 80px); left: 40px; height: 1080px;}
.app.segment .info-col { margin-top: 0px; justify-self: center; }
.tutorial-banner {height: fit-content; padding: 20px 40px; grid-gap: 30px;}
/* Tablet Segment */
.tablet.segment .main-txt {width: 800px;}
/* Design Segment */
.custom-design.segment .main-txt {width: 800px;}
.custom-design.segment .img-col {width: 800px; justify-self: center;}
/* Footer Segment */
.footer.segment .main-holder > .info-col {
width: 800px;
justify-self: center;
align-items: center;
}
.main-txt.copyright {text-align: center;}
.row.social {margin-left: calc(50% - 160px);}
}
/* ---- 900px to 701px -----*/
@media screen and (max-width: 900px) and (min-width: 701px) {
/* Txt */
/* Size in px */
h1.extra {font-size: 40px; line-height: 40px; margin-bottom: 30px;}
h1 {font-size: 40px; font-weight: 800; margin-bottom: 30px;}
h2 {font-size: 24px; font-weight: 600;}
h3 {font-size: 20px; font-weight: 700;}
h4 {font-size: 16px; font-weight: 700;}
h5 {font-size: 12px; font-weight: 600;}
.main-holder h1 {width: fit-content; max-width: 500px;}
.segment {padding: 50px 0px;}
.main-holder {
width: 100%;
margin-left: 0px;
padding: 0px 30px;
width: 660px;
margin-left: calc(50% - 330px);
}
.info-col {justify-self: center;}
.main-holder.large {padding: 0px;}
.main-holder.two-col {
box-sizing: border-box;
grid-template-columns: 100%;
width: 100%;
margin-left: 0px;
width: 660px;
margin-left: calc(50% - 330px);
}
.info-col .main-txt {width: 600px;}
.lang {display: none;}
.hamburger {display: block;}
/* Nav */
.nav {height: 60px;}
.nav .main-holder {width: 100%; margin-left: 0px;}
.nav .nav-logo {margin-right: 10px !important; background-size: auto 26px !important;}
.nav ul {display: none;}
.nav .lang {margin-top: 5px;}
.nav.open ul {display: block;}
.nav.open ul li {
margin-top: 10.5px;
width: 100%;
text-align: center;
}
.nav.fixed.open {height: 100%;}
/* Home segment */
.home.segment {height: fit-content;}
.home.segment .info-col {height: 350px; justify-content: center; margin-left: 0px; }
.home.segment .info-col .main-btn {margin-top: 20px;}
.home.segment .img-col {width: 660px; margin-left: calc(50% - 330px);}
.home.segment .home-img {width: 140%; height: 420px;}
.home.segment .img-col .arrow-btn {display: none;}
.home-img .card-holder {bottom: 40px;}
.home-img .glass-effect { display: none;}
/* Type segment */
.type.segment {padding: 30px 0px;}
.bar {
justify-content: space-between;
justify-content: center;
display: grid;
grid-template-columns: 33% 33% 33%;
align-self: center;
justify-self: center;
padding: 0px;
box-shadow: none;
}
.bar .bar-item {
flex-direction: column;
text-align: center;
height: fit-content;
align-self: center;
justify-self: center;
margin: 15px 0px;
}
.bar .bar-item .filled-ic { margin-right: 0px; margin-bottom: 20px;}
/* Features Segment */
.features.segment .main-holder.two-col { grid-gap: 20px; grid-template-columns: 100%;}
.info-col .features-holder { grid-template-columns: 100%;}
.img-col .round-card-large {width: 100%; height: 400px;}
.features.segment .info-col .main-txt {width: 100%;}
/* Automation Segment */
.automation.segment .grid-holder.three { grid-template-columns: auto; }
.automation.segment .contact-banner span {font-size: 18px; margin-right: 20px;}
.automation.segment .info-holder { width: 400px; }
/* Devices Segment */
/* .devices.segment .carousel {width: 120%;} */
.devices.segment .carousel .col { width: calc(33% - 15px); height: 300px;}
.devices.segment .carousel .col .tilted-card.gray { width: 180px; height: 230px; }
.devices.segment .slider-holder { width: 118%; }
.devices.segment .info-col {width: 100%;}
/* Scheme Segment */
/* APP segment */
.app.segment .main-holder.large .background { width: 900px; left: -120px; height: 1080px;}
.app.segment .info-col { margin-top: 0px; justify-self: center; }
.tutorial-banner {height: fit-content; padding: 20px 40px; grid-gap: 30px; grid-template-columns: auto;}
.gallery-holder .slider-holder .img { display: inline-block; float: none; }
/* Tablet Segment */
.tablet.segment .main-txt {width: 600px;}
/* Design Segment */
/* .custom-design.segment .main-txt {width: 800px;} */
.custom-design.segment .img-col {width: 600px; justify-self: center;}
/* Footer Segment */
.footer.segment .main-holder > .info-col {
width: 600px;
justify-self: center;
align-items: center;
}
.contacts-holder .row .filled-ic {
margin-right: 14px;
}
.row.social {margin-left: calc(50% - 160px);}
.main-txt.copyright {text-align: center;}
}
/* ---- 700px to 501px -----*/
@media screen and (max-width: 700px) and (min-width: 501px) {
/* Txt */
/* Size in px */
h1.extra {font-size: 40px; line-height: 40px; margin-bottom: 30px;}
h1 {font-size: 30px; font-weight: 800; margin-bottom: 10px;}
h2 {font-size: 24px; font-weight: 600;}
h3 {font-size: 20px; font-weight: 700;}
h4 {font-size: 16px; font-weight: 700;}
h5 {font-size: 12px; font-weight: 600;}
.main-holder h1 {width: fit-content; max-width: 500px;}
.segment {padding: 30px 0px;}
.main-holder {
width: 100%;
margin-left: 0px;
padding: 0px 20px;
width: 460px;
margin-left: calc(50% - 230px);
}
.info-col {justify-self: center;}
.main-holder.large {padding: 0px;}
.main-holder.two-col {
box-sizing: border-box;
grid-template-columns: 100%;
width: 100%;
margin-left: 0px;
width: 460px;
margin-left: calc(50% - 230px);
padding: 0px 20px;
grid-gap: 20px;
}
.info-col .main-txt {width: 400px;}
.lang {display: none;}
.hamburger {display: block;}
/* Nav */
.nav {height: 60px;}
.nav .main-holder {width: 100%; margin-left: 0px;}
.nav .nav-logo {margin-right: 10px !important; background-size: auto 26px !important;}
/* .nav ul {display: none;} */
.nav .lang {margin-top: 5px;}
.nav.open ul {display: block;}
.nav.open ul li {
margin-top: 10.5px;
width: 100%;
text-align: center;
}
.nav.fixed.open {height: 100%;}
/* Home segment */
.home.segment {height: fit-content;}
.home.segment .info-col {height: 350px; justify-content: center; margin-left: 0px; }
.home.segment .info-col .main-btn {margin-top: 20px;}
.home.segment .img-col {width: 460px; margin-left: calc(50% - 230px);}
.home.segment .home-img {width: 140%; height: 420px;}
.home.segment .img-col .arrow-btn {display: none;}
.home-img .card-holder { left: 100px; bottom: 40px;}
.home-img .card-holder .device-card {padding: 15px; height: 115px; width: 170px;}
.home-img .glass-effect { display: none;}
/* Type segment */
.type.segment {padding: 30px 0px;}
.bar {
justify-content: space-between;
justify-content: center;
display: grid;
grid-template-columns: 50% 50%;
align-self: center;
justify-self: center;
padding: 0px;
box-shadow: none;
}
.bar .bar-item {
flex-direction: column;
text-align: center;
height: fit-content;
align-self: center;
justify-self: center;
margin: 15px 0px;
}
.bar .bar-item .filled-ic { margin-right: 0px; margin-bottom: 20px;}
/* Features Segment */
.features.segment .main-holder.two-col { grid-gap: 20px; grid-template-columns: 100%;}
.info-col .features-holder { grid-template-columns: 100%;}
.img-col .round-card-large { height: 540px; width: 100%; border-radius: 170px;}
.features.segment .info-col .main-txt {width: 100%;}
.features.segment .main-holder.two-col h1 {margin-bottom: 40px;}
/* Automation Segment */
.automation.segment .grid-holder.three { grid-template-columns: auto; }
.automation.segment .info-holder { width: 400px; }
.automation.segment .contact-banner {flex-direction: column; height: fit-content; justify-content: center; padding: 40px;}
.automation.segment .contact-banner span {font-size: 18px; margin-right: 0px; margin-bottom: 30px; font-weight: 700;}
.automation.segment .contact-banner .main-btn {align-self: baseline;}
/* Devices Segment */
.devices.segment .carousel .col { width: calc(50% - 15px); height: 300px;}
.devices.segment .carousel .col .tilted-card.gray { width: 160px; height: 215px; }
.devices.segment .slider-holder { width: 126%; }
.devices.segment .info-col {width: 100%;}
/* Scheme Segment */
.scheme.segment .grid-holder.three { grid-template-columns: auto; height: fit-content; padding: 40px; align-items: center;}
/* .scheme.segment .main-holder.two-col { padding: 0px;} */
/* APP segment */
.badge-holder .tooltip {left: calc(50% - 100px);}
.app.segment .main-holder.large .background { width: 152%; left: -26%; height: 1080px;}
.app.segment .info-col { width: 400px; margin-top: 0px; justify-self: center; }
.tutorial-banner {height: fit-content; padding: 20px 40px; grid-gap: 30px; grid-template-columns: auto;}
.gallery-holder .slider-holder {margin-top: 20px;}
.gallery-holder .slider-holder .img { display: inline-block; float: none; width: 90px; height: 130px;}
/* .gallery-holder .img { width: 90px; height: 130px; } */
/* Tablet Segment */
.tablet.segment .main-txt {width: 400px;}
.tablet.segment .tablet-img {height: 300px;}
/* Design Segment */
/* .custom-design.segment .main-txt {width: 800px;} */
.custom-design.segment .img-col {width: 360px; justify-self: center;}
.custom-design.segment .design-img {height: 280px;}
.custom-design.segment .design-img::before {left: -50px;}
.custom-design.segment .design-img::after {right: -50px;}
/* Footer Segment */
.footer.segment .main-holder > .info-col { width: 440px; justify-self: center; align-items: center; }
.footer.segment .main-holder.two-col {grid-gap: 30px;}
.footer.segment .contacts-holder { padding: 30px 0px;}
.row.social {margin-left: calc(50% - 160px);}
.contacts-holder .row .filled-ic { margin-right: 0px; margin-bottom: 20px; }
.contacts-holder .row:not(.social) {
margin-bottom: 34px;
height: fit-content;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.footer.segment .main-btn {margin-top: 30px;}
.footer.segment .main-txt.copyright {text-align: center;}
}
/* ---- 500px to 320px -----*/
@media screen and (max-width: 500px) and (min-width: 320px) {
/* Txt */
/* Size in px */
h1.extra {font-size: 30px; line-height: 30px; margin-bottom: 20px;}
h1 {font-size: 24px; font-weight: 800; margin-bottom: 10px;}
h2 {font-size: 18px; font-weight: 600;}
h3 {font-size: 18px; font-weight: 700;}
h4 {font-size: 15px; font-weight: 700;}
h5 {font-size: 12px; font-weight: 600;}
.main-txt {font-size: 15px;}
.main-holder h1 {width: fit-content; max-width: 280px;}
.segment {padding: 50px 0px;}
.main-holder {
width: 100%;
margin-left: 0px;
padding: 0px 20px;
width: 100%;
margin-left: 0px;
}
.gallery-holder .img {width: 100px; height: 140px; margin-right: 5px;}
.info-col {justify-self: center;}
.main-holder.large {padding: 0px;}
.main-holder.two-col {
box-sizing: border-box;
grid-template-columns: 100%;
width: 100%;
margin-left: 0px;
width: 100%;
margin-left: 0px;
/* margin-left: calc(50% - 230px); */
padding: 0px 20px;
grid-gap: 20px;
}
.info-col .main-txt {width: 100%;}
.lang {display: none;}
.hamburger {display: block;}
/* Nav */
.nav {height: 60px;}
.nav .nav-logo {margin-right: 10px !important; background-size: auto 26px !important;}
.nav ul {display: none;}
.nav .lang {margin-top: 5px;}
.nav .nav-logo {
background-size: auto 20px;
}
.nav.open ul {display: block;}
.nav.open ul li {
margin-top: 10.5px;
width: 100%;
text-align: center;
}
.nav.fixed.open {height: 100%;}
/* Home segment */
.home.segment {height: fit-content;}
.home.segment .info-col {height: 300px; justify-content: center; margin-left: 0px; }
.home.segment .info-col .main-btn {margin-top: 20px;}
.home.segment .img-col {width: 460px; margin-left: calc(50% - 230px);}
.home.segment .home-img {width: 105%; height: 355px;}
.home.segment .img-col .arrow-btn {display: none;}
.home-img .card-holder { left: 90px; bottom: 40px;}
.home-img .card-holder .device-card {padding: 15px; height: 115px; width: 135px;}
.home-img .card-holder .device-card .device-img {width: 60px;}
.home-img .card-holder .device-card .info-holder {text-overflow: ellipsis; overflow: hidden;}
.home-img .card-holder .device-card .info-holder h5 {text-overflow: ellipsis; overflow: hidden;}
.home-img .glass-effect { display: none;}
/* Type segment */
.type.segment {padding: 30px 0px;}
.bar {
justify-content: center;
display: grid;
grid-template-columns: 100%;
align-self: center;
justify-self: center;
text-align: left;
padding: 0px;
box-shadow: none;
}
.bar .bar-item {
flex-direction: column;
height: fit-content;
justify-self: center;
margin: 15px 0px;
flex-direction: row;
}
.bar .bar-item .filled-ic { margin-right: 20px; margin-bottom: 0px;}
/* Features Segment */
.features.segment .main-holder.two-col { grid-gap: 20px; grid-template-columns: 100%;}
.info-col .features-holder { grid-template-columns: 100%;}
.info-col .features-holder .feature { position: relative; float: left; width: 280px; justify-self: center; }
.info-col .features-holder .feature .minimal-ic { height: 100%; margin-right: 20px; height: 80px; width: 60px; }
.info-col .features-holder .feature .info-holder { position: relative; float: left; width: 100%; }
.img-col .round-card-large { height: 425px; width: 150%; border-radius: 170px; left: -25%;}
.features.segment .info-col .main-txt {width: 100%;}
.features.segment .main-holder.two-col h1 {margin-bottom: 20px;}
/* Automation Segment */
.grid-holder .list-holder .tilted-card {margin-bottom: 30px; width: 200px; height: 280px; }
.tilted-card .heat { background-size: 100% auto;}
.tilted-card .lights { background-size: auto 100%;}
.tilted-card .blinds { background-size: auto 100%;}
.tilted-card .cctv { background-size: 100% auto;}
.tilted-card .tv { background-size: 100% auto;}
.grid-holder .list-holder .info-holder .list-row .check-ic { margin-right: 20px; width: 24px; }
.automation.segment .grid-holder.three { grid-template-columns: auto; }
.automation.segment .info-holder { width: 280px; }
.automation.segment .contact-banner {flex-direction: column; height: fit-content; justify-content: center; padding: 40px;}
.automation.segment .contact-banner span {font-size: 18px; margin-right: 0px; margin-bottom: 30px; font-weight: 700;}
.automation.segment .contact-banner .main-btn {align-self: baseline;}
.grid-holder .list-holder { margin: 15px 0px; }
/* Devices Segment */
.devices.segment .main-holder.large {padding: 0px 30px;}
.devices.segment .slider-holder {width: 112%;}
.devices.segment .carousel {width: 112%; height: 150px;}
.devices.segment .carousel .col { width: 140px; height: 250px; margin-right: 10px;}
.devices.segment .carousel .col .tilted-card.gray { width: 110px; height: 140px; }
.devices.segment .carousel .col h4 {width: 100%;}
.devices.segment .info-col {width: 100%;}
/* Scheme Segment */
.scheme.segment .grid-holder.three { grid-template-columns: auto; height: fit-content; padding: 40px; align-items: center;}
/* .scheme.segment .main-holder.two-col { padding: 0px;} */
/* APP segment */
.badge-holder .tooltip {opacity: 1; left: 0px; top: 28px;}
.badge-holder .badge {opacity: 0.5;}
.app.segment {background-color: black;}
.app.segment .main-holder.large .background { width: 100%; left: 0px; height: 940px; border-radius: 50px;}
.app.segment .info-col { width: 300px; margin-top: 0px; justify-self: center; }
.tutorial-banner {height: fit-content; padding: 20px 40px; grid-gap: 30px; grid-template-columns: auto; margin-top: 20px;}
.gallery-holder .slider-holder .img { display: inline-block; float: none; width: 100px; height: 140px;}
.app.segment .main-holder.large .main-holder.two-col .img-col { height: 460px; }
.app.segment .main-holder.large .main-holder.two-col .img-col .phone-img { background-size: 160px auto; }
/* Tablet Segment */
.tablet.segment .main-txt {width: 280px;}
.tablet.segment .tablet-img { height: 390px; width: 180%; background-position: left;}
.tablet.segment .gallery-holder .img {width: 100%; height: 360px; margin-bottom: 20px;}
/* Design Segment */
/* .custom-design.segment .main-txt {width: 800px;} */
.custom-design.segment .img-col {width: 360px; justify-self: center;}
.custom-design.segment .design-img {height: 280px;}
.custom-design.segment .design-img::before {left: -50px;}
.custom-design.segment .design-img::after {right: -50px;}
/* Footer Segment */
.footer.segment .main-holder > .info-col { width: 100%; justify-self: center; align-items: center; }
.footer.segment .main-holder .info-col .axion-holder {flex-direction: column;}
.footer.segment .main-holder .info-col .axion-holder .img-holder{margin-right: 0px; margin-bottom: 30px;}
.footer.segment .main-holder .info-col .axion-holder .info-holder{text-align: center;}
.footer.segment .main-holder.two-col {grid-gap: 30px;}
.footer.segment .contacts-holder { padding: 30px 0px;}
.row.social {display: flex; flex-direction: row; justify-content: center;}
.contacts-holder .row .filled-ic { margin-right: 0px; margin-bottom: 20px; }
.contacts-holder .row:not(.social) {
margin-bottom: 34px;
height: fit-content;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.footer.segment .main-btn {margin-top: 30px;}
.footer.segment .input-holder {width: 100%;}
.footer.segment input, .footer.segment select, .footer.segment textarea {width: 100%;}
.main-txt.copyright {text-align: center;}
}
.scroller {
float:left;
width:100%;
height: 100%;
}