@import url("/integrated/mobile/styles/typography.css");
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{margin:0;padding:0;border:0;font:inherit;font-size:16px; font-family:glametrix, tahoma, Geneva, sans-serif;}
html{line-height:1; background-color:#FFFFFF;}
ol,ul{list-style:none}
q,blockquote{quotes:none}
q:before,q:after,blockquote:before,blockquot e:after{content:"";content:none}
a img{border:none}
img {border:none}
html{background:#F5F7FA}
:root {
	--menu-speed: 0.4s;
}

.minlogo {
	position: fixed;
	top: 5px;
	left:5px;
	z-index: 1;
	width:41px;
	height:40px;
}

.menu-wrap {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}

.menu-wrap .toggler {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	height: 75px;
	width: 150px;
	cursor: pointer;
	z-index: 20000;
	border:10px solid #FFFFFF;
}

.menu-wrap .hamburger {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 60px;
	background: transparent;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.menu-wrap .hamburger > div {
	position: relative;
	top: 0;
	left: 0;
	width: 75%;
	height: 2px;
	background: #FFFFFF;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.4s;
}

.menu-wrap .hamburger > div:before,
.menu-wrap .hamburger > div:after {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	background: inherit;
	height: 2px;
	width: 100%;
	z-index: 1;
}

.menu-wrap .hamburger > div:after {
	top: -10px;
}

.menu-wrap .toggler:checked + .hamburger > div {
	transform: rotate(135deg);
	background:#000000;
	margin-left:-100px;
	width: 50%;
}

.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
	top: 0;
	transform: rotate(90deg);
}

.menu-wrap .toggler:checked:hover + .hamburger > div {
	transform: rotate(225deg);
}

.menu-wrap .toggler:checked ~ .menu {
	opacity: 1;
	margin-left: 0px;
	transition: all var(--menu-speed) ease;
}

.menu-wrap .toggler:checked ~ .menu > div {
	opacity: 1;
	transition: opacity 0.4s ease-in;
}

.menu-wrap .toggler:checked ~ .menu > div a {
	opacity: 1;
	transition: opacity 1s ease-in;
}

/*
@media (max-width: 500px) {
	header {
		background: url("./bg-img.jpg") no-repeat 40% center / cover;
	}

	.menu-wrap .toggler:checked ~ .menu {
		width: 65vw;
	}
}
*/
.NDMenu {
	float: left;
	width: 375px;
	border: 1px solid #CCCCCC;
	height: 90vh;
	background-color: #fafafa;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	margin: 0px;
	padding: 0px;
	box-shadow: 0 2px 6px 2px #CCCCCC;
	margin-left: -400px;
	transition: all var(--menu-speed) ease;
}

.CircleShape {
	background: #75ba75;
	border-radius: 50%;
	/*
	width: 800px;
	height: 500px;
    */
    width: 700px;
	height: 500px;
	clip-path: inset(200px 425px 0px 0px);
	margin-top: -250px;
	float: left;
	border: 2px solid #FFFFFF;
}

.CircleShape > img {
	border-radius: 50%;
	width: 175px;
	height: 175px;
	display: block;
	margin-top: 275px;
	margin-left: 100px;
	border: 5px solid #FFFFFF;
}

.NDIMenu {
	float: left;
	margin-left: 0px;
	margin-top: 10px;
	padding-bottom: 100px;
	cursor: pointer;
}

.NDIMenu > div {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 20px;
	text-transform: uppercase;
	font-weight: bold;
	color: #666666;
	width: 200px;
	padding: 2px;
	margin-left: 50px;
	transition: 0.5s;
}

.NDIMenu > div:hover {
	background-color: #75ba75;
	color: #FFFFFF;
	border-radius: 15px;
	transition: 0.5s;
}

.LPNDMenu {
	width: 300px;
	border: 1px solid #CCCCCC;
	background-color: #fafafa;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 0px;
	box-shadow: 0 2px 6px 2px #CCCCCC;
	margin-right: 40px;
	margin-left: 30px;
	
	box-shadow:  20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;
	
}

.LPCircleShape {
	background: #21bec6;
	border-radius: 50%;
	width: 700px;
	height: 500px;
	clip-path: inset(230px 400px 0px 0px);
	margin-top: -230px;
	float: left;
}

.LPCircleShape > img {
	border-radius: 50%;
	width: 175px;
	height: 175px;
	display: block;
	margin-top: 240px;
	margin-left: 60px;
	border: 5px solid #FFFFFF;
}

.LPNDIMenu {
	float: left;
	margin-left: 20px;
	margin-top: 50px;
}

.LPNDIMenu > div {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 20px;
	text-transform: uppercase;
	font-weight: bold;
	color: #666666;
}

.LPMenuCot {
	width:100%;
	border: 0px solid #CCCCCC;
	/*background-color: #FEFEFE;*/
    background:none;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 0px;
}

.WV3Holder
{
    display:flex; margin-top:30px; border:0px solid #000000; flex-flow:row;
    margin-top:100px; width:90%; margin-left:5%;

}

.WebStoreBg{background-color:#126f74;width:100%; height:50px; text-align: center; color:#FFFFFF; font-size:50px;line-height:50px;position:fixed; top:0px; z-index:1;
            
            box-shadow:  20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;
            
            }
.WebStoreMask{position:absolute; width:100%;top:0px; left:0px;opacity:0.9; background-color:#000000;color:#FFFFFF; font-size:30px;display:none; text-align:center;}
.LPMIN {float:left; width:18%; height:150px; border:1px solid #EEEEEE; margin:0.75%; padding-top:1.25%; border-radius:5%;transition: 0.5s;cursor: pointer;}
.LPMIN:hover {background-color: #21bec6;transition: 0.5s;color: #FFFFFF;opacity: .9;}
.LPMIN > div{float:left; width:100%; text-align:center;font-size:25px;}
.LPMIN > div > img{width:75px; height:75px;margin:0 auto; text-align:center;}
.LPMIN:hover > img {filter: brightness(0) invert(1);opacity: 1;}

.AVName{text-align:center; font-size:30px; font-weight:bold; border-bottom:0px solid #e3e3e3; width:95%; margin-left:2.5%; margin-bottom:5px;}
.AVDesig{text-align:center; font-size:25px;}
.AVBranch{text-align:center; font-size:20px;border-bottom:0px solid #e3e3e3;}
.AVEmpid{text-align:center; font-size:28px; font-weight:bold; border-bottom:1px solid #e3e3e3; width:95%; margin-left:2.5%; margin-bottom:5px;}


div.WDV {box-sizing: border-box;font-family:open_sans_condensedbold; margin-top:-10px;}
div.WDV * {box-sizing: border-box;font-family:open_sans_condensedbold;}

.WV3Container
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start; align-items:center;
    align-content:normal;
    background:none;
}
	
.WV3Container > div { height:auto; width:15%; border:1px solid #ECECEC; margin:15px; border-radius:10px; background:#FFFFFF; padding-bottom:10px; cursor:pointer;
                      
                      
box-shadow:  20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;
                      
                      }
.WV3Container div.MRI{ min-height:100px; border:0px solid #000000;text-align:center; display:flex; justify-content: center; align-items:center;}
.WV3Container div.MRD{min-height:30px;  text-align:center; font-size:25px; }
.MRIImage{height: 75px; width: 75px; object-fit: contain; text-align:center;}
.WV3Container > div:hover {background-color: #21bec6;transition: 0.5s;color: #FFFFFF;opacity: .9;}
.WV3Container > div:hover > div.MRI >img{filter: brightness(0) invert(1);opacity: 1}
.WV3Container > div:hover > img {filter: brightness(0) invert(1);opacity: 1;}

.SMDevicePI_2{background-color:#FDC678;width:100%;text-align:center;width:160px; height:160px; border-radius:50%; text-align:center;margin-top:5px;margin-left:5px;}
.SMDevicePI_Img{width:150px; height:150px; border-radius:50%; text-align:center; margin-top:5px;}

.SMDevice{display:none}
.WebStoreBg:after{content:'INTEGRATED ENTERPRISES INDIA (PRIVATE) LIMITED'}

.MAVName{text-align:left; font-size:35px; font-weight:bold; border-bottom:0px solid #e3e3e3;white-space:nowrap; color:#FFFFFF;}
.MAVDesig{text-align:left; font-size:25px;}
.MAVBranch{text-align:left; font-size:20px;border-bottom:0px solid #e3e3e3;}
.MAVEmpid{text-align:left; font-size:28px; font-weight:bold; border-bottom:0px solid #e3e3e3; }


@media only screen and (min-width: 0px) and (max-width: 1024px)
{
    /*.WebStoreBg{display:none;}*/
    .WebStoreBg:after{content:'INTEGRATED ENTERPRISES'}
    .SMDevice{display:block;}
    .LPNDMenu{display:none;}
    .SMDevice{display:flex; width:100%; border:0px solid #000000; margin-top:50px; align-items:center; justify-content:center; background:#21BEC6; padding-top:20px;padding-bottom:20px;}    
    .SMDevicePI{width:auto; border:0px solid #000000; align-item:right; justify-content:right;}
    .SMDevicePD{width:auto; border:0px solid #000000;}
}
/*.minlogo{display:none;}*/
@media only screen and (min-width: 0px) and (max-width: 800px)
{
    .WV3Holder{display:flex; margin-top:30px; border:0px solid #000000; flex-flow:row;margin-top:50px; width:100%; margin-left:0%;}
    .WV3Container{justify-content: center; align-items:center;width:100%;}
    .WV3Container > div { height:auto; width:23%; border:0px solid #999999; margin:15px; border-radius:10px; background:#FFFFFF; padding-bottom:10px; cursor:pointer;}
    .WV3Container div.MRI{ min-height:100px; border:0px solid #000000;text-align:center; display:flex; justify-content: center; align-items:center;}
    .WV3Container div.MRD{min-height:30px;  text-align:center; font-size:35px; }
    .WV3Container > div:hover {background-color: #21bec6;transition: 0.5s;color: #FFFFFF;opacity: .9;}
    .WV3Container > div:hover > div.MRI >img{filter: brightness(0) invert(1);opacity: 1}
    .WV3Container > div:hover > img {filter: brightness(0) invert(1);opacity: 1;}
}

@media only screen and (min-width: 0px) and (max-width: 650px)
{
    .WebStoreBg:after{content:'INTEGRATED'}
}

@media only screen and (min-width: 0px) and (max-width: 500px)
{
    header {background: url("./bg-img.jpg") no-repeat 40% center / cover;}
	.menu-wrap .toggler:checked ~ .menu {width: 65vw;}
	
    .WebStoreBg:after{content:'INTEGRATED'}
    .WV3Holder{display:flex; margin-top:30px; border:0px solid #000000; flex-flow:row;margin-top:10px; width:100%; margin-left:0%;}
    .WV3Container{justify-content: center; align-items:start;width:100%;}
    .WV3Container > div {min-height:100px; height:auto; width:23%; border:0px solid #999999; margin:15px; border-radius:10px; background:#FFFFFF; padding-bottom:10px; cursor:pointer;}
    .WV3Container div.MRI{ min-height:70px; border:0px solid #000000;text-align:center; display:flex; justify-content: center; align-items:center;}
    .WV3Container div.MRD{min-height:30px;  text-align:center; font-size:20px; padding:2px; font-weight:bold; }
    .WV3Container > div:hover {background-color: #21bec6;transition: 0.5s;color: #FFFFFF;opacity: .9;}
    .WV3Container > div:hover > div.MRI >img{filter: brightness(0) invert(1);opacity: 1}
    .WV3Container > div:hover > img {filter: brightness(0) invert(1);opacity: 1;}
    
    .MRIImage{height: 50px; width: 50px; object-fit: contain; text-align:center;}
    
    .SMDevice{display:flex; flex-flow:column; width:100%; border:0px solid #000000; margin-top:50px; align-items:center; justify-content:center; background:#21BEC6; padding-top:0px;padding-bottom:10px;}    
    .SMDevicePI{width:auto; border:0px solid #000000; align-item:right; justify-content:right; margin-top:2px;}
    .SMDevicePD{width:auto; border:0px solid #000000; width:100%; text-align:center;}
    
    .MAVName{text-align:center; font-size:35px; font-weight:bold; border-bottom:0px solid #e3e3e3;white-space:nowrap; color:#FFFFFF;}
    .MAVDesig{text-align:center; font-size:25px;}
    .MAVBranch{text-align:center; font-size:20px;border-bottom:0px solid #e3e3e3;}
    .MAVEmpid{text-align:center; font-size:28px; font-weight:bold; border-bottom:0px solid #e3e3e3; }
}

@media only screen and (min-width: 0px) and (max-width: 420px)
{
 .WebStoreBg{font-size:35px;}   
}