@font-face { font-family: 'Kaspersky-Sans-Bold'; src: url('KasperskySans-Bold.otf'); src: url('KasperskySans-Bold.ttf');}
@font-face { font-family: 'Kaspersky-Sans-Light'; src: url('KasperskySans-Light.otf'); src: url('KasperskySans-Light.ttf');}
@font-face { font-family: 'Kaspersky-Sans-Regular'; src: url('KasperskySans-Regular.otf'); src: url('KasperskySans-Regular.ttf');}

body, body * {
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0 none;
    vertical-align: baseline;
    font-family:  'Kaspersky-Sans-Regular','sans-serif';
    font-weight: 300;
    font-style: normal;
}

#main-container {
    position: relative;
    opacity: 0;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 300px;
    height: 250px;
    border: 1px solid #000;
    background-color: #ffffff;
    cursor: pointer;
    z-index: 0;
    display: none;
    left: 0px;
    top: 0px;
    user-select: none;
    -webkit-user-select: none;
    user-drag: none;
}

#feature {
    overflow: hidden;
    width: 300px;
    height: 250px;
    z-index: 1;
    top: -1px;
    left: -1px;
}  
 
/*common styles*/
.mcommon {    
    position: absolute;
}    
     
.relcommon {        
    position: relative;               
}                    
             
.seccommmon {
    display: inline-block;
    float: left;             
    width: 100%;
}              
     
.transformcommon {    
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);  
    -webkit-transform: translate(-50%, -50%);
    top: 50%; 
    left: 50%;
    text-align: center;
    position: relative; 
}
.margincommon {
    margin: 0 auto;
    left: 0px;
    right: 0px;
}
 
.margincommonT {
    margin: auto 0;
    top: 0px;
    bottom: 0px;
}

/*  ------------- User -------------  */ 
.frames{
    width: 100%;
    height: 100%;
}
.bgimgparent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.bgimg{
    width: 100%;
    height: auto;
}
.hexagonimgparent{
    width: 170px;
    height: 170px;
    top: 32px;
    left: 124px;
}

.hexagonimg{max-width: 100%;max-height: 100%;}
.fgimgparent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.fgimg{
    width: 100%;
    height: auto;
}
.copyparents{
    width: 250px;
    height: 150px;
    top: 18px;
    left: 22px;
}
.copytxts {
    font-size: 23px;
    float: left;
    display: inline-block;
}
#copytxt1{
    text-align: left;
    transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    -webkit-transform: translate(0%, 0%);
    top: 0%;
    left: 0%;
    font-size: 22px;
    font-family: Kaspersky-Sans-Bold;
}


.copyimgparent{
    left: 145px;
    top: 340px;
    height: 75px;
    width: 130px;
}
.copyimg{
    max-width: 100%;
    max-height: 100%;
    transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    -webkit-transform: translate(0%, 0%);
    top: 0%;
    left: 0%;
}
.logoparent{
    left: 16px;
    width: 240px;
    height: 26px;
    bottom: 12px;
}
.logoimg{
    max-width: 100%;
    max-height: 100%;
    transform: translate(0%, -100%);
    -ms-transform: translate(0%, -100%);
    -webkit-transform: translate(0%, -100%);
    top: 100%;
    left: 0%;
}
.timgparent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.timg{
    width: 100%;
    height: auto;
}
.productcontainer{
    width: 120px;
    height: 176px;
    top: 24px;
    left: 160px;
}
.productimgparent{
    width: 100%;
    height: 100%;
}
.productimg{
    max-width: 100%;
    max-height: 100%;
    transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    -webkit-transform: translate(0%, 0%);
    top: 0%;
    left: 0%;
}
.productshadowparent{
    bottom: -13px;
    width: 100%;
    height: 43px;
}
.productshadow{
    width: 100%;
    height: 100%;
}
.ctaparent{
    width: 70px;
    height: 26px;
    bottom: 72px;
    left: 16px;
    border-radius: 4px;
}
.ctatxtparent{
    width: 80%;
    height: 14px;
    margin: auto;
    top: 0px;
    bottom: 0;
}
.ctatxt{
    display: inline-block;
    float: left;
    line-height: 1;
    font-size: 12px;
}
.tcolorparent{
    width: 100%;
    height: 100%;
}


#copyparent2{top: 24px;height: 100px;width: 134px;left: 16px;}
#copytxt2{text-align: left;font-family: Kaspersky-Sans-Bold;font-size: 20px;transform: translate(0%, 0%);-ms-transform: translate(0%, 0%);-webkit-transform: translate(0%, 0%);top: 0%;left: 0%;}

.subcopyparents {width: 134px;height: 20px;top: 20px;left: 16px;}
.subcopytxts {line-height: 1;text-align: left;display: inline-block;transform: translate(-0%, -0%);-ms-transform: translate(-0%, -0%);-webkit-transform: translate(-0%, -0%);top: 0%;left: 0%;font-size: 20px;} 
#subcopyparent1{top: 114px;width: 146px;height: 30px;left: 22px;}
#subcopyparent2{top: 126px;}

#subcopytxt1{}
#subcopytxt2{}

#topline{height: 100%;width: 100%;background: #000;}
#lineparent{height: 3px;width: 62px;top: 16px;left: 16px;overflow: hidden;}
#copyparent1{width: 146px;height: 84px;}

#hexagonimgparent2{width: 400px;height: 400px;top: -68px;left: -52px;}
#hexagonparent{width: 100%;height: 100%;}

#logoparent1{width: 240px;height: 26px;left: 22px;bottom: 12px;}