@font-face {
    font-family: 'SohoGothicPro-Regular';
    src: url('../fonts/SohoGothic/SohoGothicPro-Regular.eot');
    src: url('../fonts/SohoGothic/SohoGothicPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SohoGothic/SohoGothicPro-Regular.woff2') format('woff2'),
        url('../fonts/SohoGothic/SohoGothicPro-Regular.woff') format('woff'),
        url('../fonts/SohoGothic/SohoGothicPro-Regular.ttf') format('truetype'),
        url('../fonts/SohoGothic/SohoGothicPro-Regular.svg#SohoGothicPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SohoGothicPro-Light';
    src: url('../fonts/SohoGothic/SohoGothicPro-Light.eot');
    src: url('../fonts/SohoGothic/SohoGothicPro-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SohoGothic/SohoGothicPro-Light.woff2') format('woff2'),
        url('../fonts/SohoGothic/SohoGothicPro-Light.woff') format('woff'),
        url('../fonts/SohoGothic/SohoGothicPro-Light.ttf') format('truetype'),
        url('../fonts/SohoGothic/SohoGothicPro-Light.svg#SohoGothicPro-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SohoGothicPro-Medium';
    src: url('../fonts/SohoGothic/SohoGothicPro-Medium.eot');
    src: url('../fonts/SohoGothic/SohoGothicPro-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SohoGothic/SohoGothicPro-Medium.woff2') format('woff2'),
        url('../fonts/SohoGothic/SohoGothicPro-Medium.woff') format('woff'),
        url('../fonts/SohoGothic/SohoGothicPro-Medium.ttf') format('truetype'),
        url('../fonts/SohoGothic/SohoGothicPro-Medium.svg#SohoGothicPro-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SohoGothicPro-Bold';
    src: url('../fonts/SohoGothic/SohoGothicPro-Bold.eot');
    src: url('../fonts/SohoGothic/SohoGothicPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SohoGothic/SohoGothicPro-Bold.woff2') format('woff2'),
        url('../fonts/SohoGothic/SohoGothicPro-Bold.woff') format('woff'),
        url('../fonts/SohoGothic/SohoGothicPro-Bold.ttf') format('truetype'),
        url('../fonts/SohoGothic/SohoGothicPro-Bold.svg#SohoGothicPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SohoGothicPro-ExtraBold';
    src: url('../fonts/SohoGothic/SohoGothicPro-ExtraBold.eot');
    src: url('../fonts/SohoGothic/SohoGothicPro-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SohoGothic/SohoGothicPro-ExtraBold.woff2') format('woff2'),
        url('../fonts/SohoGothic/SohoGothicPro-ExtraBold.woff') format('woff'),
        url('../fonts/SohoGothic/SohoGothicPro-ExtraBold.ttf') format('truetype'),
        url('../fonts/SohoGothic/SohoGothicPro-ExtraBold.svg#SohoGothicPro-ExtraBold') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


*{
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
}

body{
    font-family: 'SohoGothicPro-Regular';
	font-size:16px;
	letter-spacing:0.0125em;
	line-height:1.5;
}
.wrapper{
	width:100%;
	display:inline-block;
	position:relative;
}
.employee{
	padding:15px;
	border:1px solid #ccc;
}
.employee-wrapper{
	width:100%;
	display:inline-block;
	padding:15px;
	background:#fff;
	position: relative;
}
.employee-wrapper:before{
	content:'';
	position:absolute;
	background-image:url(../imges/top-right.png);
	background-repeat:no-repeat;
	top:-15px;
	right:-15px;
	width:50px;
	height:50px;
	z-index:1;
}
.employee-wrapper:after{
	content:'';
	position:absolute;
	background-image:url(../imges/bottom-left.png);
	background-repeat:no-repeat;
	left:-15px;
	bottom:-15px;
	width:50px;
	height:50px;
	z-index:1;
}
.employee-section-img{
	overflow: hidden;
    position: absolute;
	width:100%;
	border:1px solid #ccc;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.employee-section-img img{
	width:100%;
}

.header {
    width: 100%;
    display: inline-block;
	padding: 20px 20px;
}
.logo{
	width:100px;
	display:inline-block;
	margin:0;
}

.logo img{
	width:100%;
	display:inline-block;
}
.logo-right{
	width:auto;
	float:right;
	display:inline-block;
	background:rgba(255,255,255,0.6);
	padding:5px;
}
.challenge{
    display: inline-block;
    margin-left: 2%;
}

.challenge h1{
    color: #005f9e;
    font-family: 'SohoGothicPro-Regular';
    font-size: 35px;
    font-weight: 600;
}

.challenge span{
    color: #ec2028;
}

.potrait{
    padding-top: 15px;
    width: 100%;
    display: inline-block;
}
.content1{
    margin-top: 0%;
}
.content{
    /*padding-top:45px;*/
    width: 100%;
	height:200px;
    display: inline-block;
	position:relative;
    /*background-image: url(../imges/border-top-right.png);
    background-repeat: no-repeat;
    background-position: center;
	background-size:cover;*/

}
.content:before{
	content:'';
	position:absolute;
	background-image: url(../imges/border-top-right.png);
	background-repeat:no-repeat;
	background-position:top right;
	top:0;
	right:0;
	width:100%;
	height:136px;
}
.content:after{
	content:'';
	position:absolute;
	background-image: url(../imges/botder-left-bottom.png);
	background-repeat:no-repeat;
	background-position:left bottom;
	bottom:0;
	left:0;
	width:100%;
	height:136px;
}
.top-left-corner {
	position:absolute;
	left:-5px;
}
/*.top-left-corner:before {
	content:'';
    position:absolute;
	width:46px;
	height:40px;
	background-image:url(../imges/top-colun.png);
	background-repeat:no-repeat;
    top: -5px;
    left: -5px;
}*/
.bottom-right-corner {
	position:absolute;
	right:-5px;
}
/*.bottom-right-corner:after {
	content:'';
    position:absolute;
	width:46px;
	height:40px;
	background-image:url(../imges/bottom-colun.png);
	background-repeat:no-repeat;
    bottom: -5px;
    right: -5px;
}*/

.content p {
    font-size: 20px;
    color: #005e9e;
    font-weight: 600;
	letter-spacing:0.0125em;
	line-height:1.5;
	margin-bottom:5px;
}

.content h4 {
    margin-left:0;
    font-size: 18px;
    padding-bottom: 40px;
	margin-bottom:0;
	letter-spacing:0.0125em;
	color:#5c5d5f;

}
.employee-msg{
	width:92%;
	margin:0 auto;
	padding-top:45px;
	z-index:99;
	cursor:inherit;	
}
.download{
    padding-top: 50px;
    width: 100%;
    display: inline-block;
    padding-bottom: 30px;
}

.hdfc{
    padding-top: 50px;
    display: inline-block;
    float: right;
    padding-bottom: 30px;
}

#footer{
    padding-top: 15px;
    width: 100%;
    display: inline-block;
}

#footer p{
    font-size: 14px;
    font-family: 'SohoGothicPro-Regular';
}

.YrsChallenge{
	width:100%;
	height:100%;
	background-image:url(../imges/TwentyYearChallange.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
	position: relative;
}
.bg-wrapper{
	width:100%;
	height:100%;
	display:inline-block;
	position:relative;
}
.photo-gallery{
	width: 650px;
    height: 360px;
    background:transparent;
    display: inline-block;
    position: absolute;
    left: 49%;
    top: 48%;
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
}
.picture{
	width:100%;
	height:100%;
	display:inline-block;
}
.product-img{
	margin:15px 0;
}
.employee-photo{
	width:100%;
	height:100%;
	display:inline-block;
	padding:0px 0;
}
.HDFC-popup{
	max-width:95%;
}
.HDFC-popup .modal-header{
	padding:10px 15px;
}

.HDFC-popup .pop-title{
	font-size:21px;
	font-family: 'SohoGothicPro-Medium';
	font-weight:500;
	line-height:1.5;
	letter-spacing:0.0125em;
	color:#085293;
}
.modal-body.slider-body{
	padding-top:0px;
	padding-bottom:0px;
}
.employee-profile{
	text-align:center;
}
.employee-profile > div{
	border:1px solid #ccc;
}
.employee-photo a.thumbnail{
	text-decoration:none;
}
.employee-photo a.thumbnail .employee-profile h4{
	font-size:16px;
	padding:18px 0;
	text-align:center;
	color:#58595b;
	font-weight:600;
	font-family:Arial, Helvetica, sans-serif;
	line-height:1.5;
	letter-spacing:0.025em;
	
}

.employee-photo .owl-theme{
	position:relative;
	margin-left: 0px;
}
.employee-photo .owl-theme .owl-item{
	/*margin: 0 10px !important;*/
}
.employee-photo .owl-theme .owl-nav{
	position: absolute;
    width: 100%;
    display: inline-block;
    top: 43%;
	z-index:2;
	transform:translate(0%,-43%);
	-moz-transform:translate(0%,-43%);
	-webkit-transform:translate(0%,-43%);
}
.employee-photo .owl-theme .owl-nav .owl-prev{
	position:absolute;
	background: #ec2028;
    left:0px;
    padding: 15px 15px !important;
}
.employee-photo .owl-theme .owl-nav .owl-prev > span{
	color:#fff;
	font-size:24px;
}
.employee-photo .owl-theme .owl-nav .owl-next{
	position:absolute;
	background: #ec2028;
	right:0;
	padding: 15px 15px !important;
}
.employee-photo .owl-theme .owl-nav .owl-next > span{
	color:#fff;
	font-size:24px;
}

.search-bar{
	width:500px;
	margin:0 auto;
	position:relative;
}
.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 3px solid #ec2028;
  border-right: none;
  padding: 5px;
  /*height: 20px;*/
  border-radius: 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #005eb6;
}

.searchButton {
  width: 40px;
  height: 40px;
  border: 1px solid #ec2028;
  background: #ec2028;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
    top: 0;
    right: 0;
}
.gallery{
    display: inline-block;
    margin-top: 20px;
}

.YrsMilestone{
	width:100%;
	height:100%;
	background-image:url(../imges/Milestone.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
	position: relative;
}

.year-glance{
    width:100%;
    height: 350px;
    background: transparent;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 57%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}
.year-glance .grid{
	width:5%;
	height:100%;
	float:left;
	display:inline-block;
	/*border:1px solid #ccc;*/
}
.year-glance .grid.y2001{
	width: 130px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2002{
	width: 103px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2003{
	width: 95px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2004{
	width: 90px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2005{
	width: 82px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2006{
	width: 77px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2007{
	width: 78px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2008{
	width: 72px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2009{
	width: 72px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2010{
	width: 70px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y20012020{
	width: 197px;
    height: 100%;
    position: relative;
}
.year-glance .grid.y2011{
	width: 70px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2012{
	width: 70px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2013{
	width: 72px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2014{
	width: 75px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2015{
	width: 80px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2016{
	width: 88px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2017{
	width: 84px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2018{
	width: 95px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2019{
	width: 105px;
    height: 100%;
	position:relative;
}
.year-glance .grid.y2020{
	width: 110px;
    height: 100%;
	position:relative;
}

.award-glance{
	width:100%;
	height:100%;
	display:inline-block;
}
.slide-page .award-glance{
	width:100%;
	height:90%;
}
.milestone-popup{
	max-width:420px;
}
.milestone-body{
	position:relative;
}
.milestone-body .close1{
	width:28px;
	height:28px;
    position: absolute;
    right: -15px;
    top: -15px;
    opacity: 1;
	text-indent:-99;
	background-color: transparent;
	background-image:url(../imges/fancy_close.png);
	background-repeat:no-repeat;
	border:none;
}
.milestone-body .close1:focus{
	outline:0;
	border:0;
}
.page{
	width:100%;
	height:100%;
	display:inline-block;
}
.page1{
	width:100%;
	height:90%;
	display:inline-block;
}
.page2{
	width:100%;
	height:10%;
	display:inline-block;
}
.certificate{
	padding:15px 0;
}



.TechEdge{
	width:100%;
	height:100%;
	background-image:url(../imges/Tech-Edge.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
	position: relative;
}
.TechEdge-stall{
    width:100%;
    height: 280px;
    background: transparent;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 53%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}
.stall{
	width:90%;
	height:100%;
	margin:0 auto;
}
.stall-row{
	width:100%;
	height:45%;
	display:inline-block;
	margin-bottom:0px;
}
.box1-grid{
	width:9.5%;
	height:100%;
	float:left;
	display:inline-block;
	position:relative;
	/*border:1px solid #ccc;*/
}
.box1{
	width:70px;
	height:100%;
	display:inline-block;

}
.box1 .icon-pdf{
	position: absolute;
	left:10px;
	bottom:5px;
}

.box2{
	width:85px;
	height:100%;
	display:inline-block;

}
.box2 .icon-pdf{
	position: absolute;
	left:4px;
	bottom:-9px;
}
.box3{
	width:265px;
	height:100%;
	display:inline-block;

}
.box3 .icon-pdf{
	position: absolute;
	left:15px;
	bottom:-15px;
}
/*.box3.mobile-app .gallery:first-child a.award-glance{
	width:99%;
	height:100%;
	float:left;
}
.box3.mobile-app .gallery:last-child a{
	width:1%;
	height:100%;
	float:right;
}*/
.box4{
	width:170px;
	height:100%;
	display:inline-block;

}
.box4 .icon-pdf{
	position: absolute;
	left:18px;
	bottom:-18px;
}
.box5{
	width:160px;
	height:100%;
	display:inline-block;

}
.box5 .icon-pdf{
	position: absolute;
	left:15px;
	bottom:-15px;
}
.box6{
	width:230px;
	height:100%;
	display:inline-block;

}
.
.box7{
	width:170px;
	height:100%;
	display:inline-block;

}
.box7 .icon-pdf{
	position: absolute;
	left:10px;
	bottom:-18px;
}
.box8{
	width:275px;
	height:100%;
	display:inline-block;

}
.box8 .icon-pdf{
	position: absolute;
	left:12px;
	bottom:-18px;
}
.box9{
	width:160px;
	height:100%;
	display:inline-block;

}
.box9 .icon-pdf{
	position: absolute;
	left:18px;
	bottom:-18px;
}
.box10{
	width:62px;
	height:100%;
	display:inline-block;

}
.box10 .icon-pdf{
	position: absolute;
	left:14px;
	bottom:-15px;
}
.box11{
	width:80px;
	height:100%;
	display:inline-block;

}
.box11 .icon-pdf{
	position: absolute;
	left:5px;
	bottom:-7px;
}
.box12 .icon-pdf{
	position: absolute;
	left:5px;
	bottom:-16px;
}
.box13 .icon-pdf{
	position: absolute;
	left:5px;
	bottom:-16px;
}
.box14 .icon-pdf {
    position: absolute;
    left: 13px;
    bottom: -18px;
}
.box15 .icon-pdf{
	position: absolute;
	left: 13px;
    bottom: -10px;
}
.box16 .icon-pdf{
	position: absolute;
	left: 11px;
    bottom: -12px;
}
.box17 .icon-pdf{
	position: absolute;
	left: 11px;
    bottom: -12px;
}
.box18 .icon-pdf{
	position: absolute;
	left: 11px;
    bottom: -12px;
}
.box19 .icon-pdf{
	position: absolute;
	left: 19px;
    bottom: -18px;
}
.box20 .icon-pdf{
	position: absolute;
	left: 15px;
    bottom: -18px;
}
.box21 .icon-pdf{
	position: absolute;
	left:5px;
	bottom:-16px;
}
.plazma{
	/*width:100%;
	height:70%;*/
	display:inline-block;
}
.icon-pdf{
	width: 23px;
    height: 23px;
	/*background:rgba(0,0,0,0.5);*/
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
}


.screen-popup{
	max-width:750px;
}
.aiml-popup{
	max-width:400px;
}

.hr-stall{
	width:100%;
	height:100%;
	background-image:url(../imges/HR-stall.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
	position: relative;
}
.stall-box1 {
    width: 33%;
    height: 650px;
    display: inline-block;
    left: 0;
    position: absolute;
    top: 10%;
}
.stall-box2 {
    width: 25%;
    height: 650px;
    display: inline-block;
    left: 47%;
    position: absolute;
    top: 10%;
}
.stall-box3 {
    width: 25%;
    height: 440px;
    display: inline-block;
    right: 2%;
    position: absolute;
    top: 38%;
}
.box-fit{
	width:100%;
	height:100%;
	display:inline-block;
	position:relative;
}
.hex-grid{
	width:160px;
	height:160px;
	display:inline-block;
	border-radius:40%;
}

.hex-grid.hex1{
	display:inline-block;
	position:absolute;
	top: 5%;
    left: 32%;
}
.hex-grid.hex2{
	display:inline-block;
	position:absolute;
	top: 5%;
    right: 4%;
}
.hex-grid.hex3{
    display: inline-block;
    position: absolute;
    top: 38%;
    left: 12%;
}
.hex-grid.hex4{
    display: inline-block;
    position: absolute;
    bottom: 3%;
    left: 31%;
}
.hex-grid.hex5{
    display: inline-block;
    position: absolute;
    top: 5%;
    left: 11%;
}
.hex-grid.hex6{
    display: inline-block;
    position: absolute;
    top: 28%;
    right: 5%;
}
.hex-grid.hex7{
    display: inline-block;
    position: absolute;
    bottom: 14%;
    left: 36%;
}
.hex-grid.hex8{
    display: inline-block;
    position: absolute;
    top: 7%;
    left: 40%;
}
.hex-grid.hex9{
    display: inline-block;
    position: absolute;
    bottom: 5%;
    left: 12%;
}
.little-stroke{
	width:80%;
	height:100%;
	margin:0 auto;
	position:relative;
}
.little-stroke .button{
	width:100%;
	height:auto;
	display:inline-block;
	position:absolute;
	bottom:0;
}
.little-stroke .view-icon{
	width:50%;
	height:auto;
	display:inline-block;
	float:left;
}
.little-stroke .view-icon span{
	padding: 5px;
	border-radius:7px;
    background: #015f9d;
    display: inline-block;
}
.little-stroke .view-icon i{
	font-size:18px;
	color:#fff;
}
.little-stroke .view-icon.picture{
	text-align:center;
}
.little-stroke .view-icon.PDF{
	text-align:center;
}

.hex-grid .gallery{
	position:absolute;
}
.hex-grid .gallery a.thumbnai{
	display:inline-block;
}
.hex-grid .gallery a.thumbnai.hr-box{
	width:100%;
	height:100%;
	display:inline-block;
}
.Little-stroke{
	max-width:800px;
}
.Zone{
	width:100%;
	height:100%;
	display:inline-block;
	position:absolute;
	top:0;
	left:0;
	padding:15px;
}
.zone-winner{
	width:100%;
	height:100%;
	display:inline-block;
	position:relative;

}
.zone-section{
	width:90%;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
.zone-block{
	padding:15px 0;
}
.btn-red{
	background:#ed1c24;
	border:none;
}
.btn-red:focus,
.btn-red:active,
.btn-red:visited{
	otline:0;
	border:none;
}
.brandjourney{
	width:100%;
	height:100%;
	background-image:url(../imges/brand-journey.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
	position: relative;
}
.brand{
	width:100%;
	height:100%;
	display:inline-block;
	position:relative;
}
.poster{
	width:30%;
	height:450px;
	display:inline-block;
}
.poster1{
	position: absolute;
    top: 35%;
    left: 6%;
    width: 18%;
    margin: 0 auto;
}
.poster2{
	position: absolute;
   	top: 35%;
    right: 6%;
    width: 16%;
    margin: 0 auto;
}
.brand-popup{
	max-width: 700px;
}
.CSR{
	width:100%;
	height:100%;
	background-image:url(../imges/bg-CSR.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
	position: relative;
}
.CSR-stall{
	width:100%;
	height:100%;
	position:relative;
}

	.CSR-row {
		width: 71%;
		height: 320px;
		position: absolute;
		top: 42%;
		left: 20%;
	}
	.CSR-box{
		position: relative;
		float: left;
		display: inline-block;
	}
	.CSR-box .CSR-PDF{
		width: 30px;
		display: inherit;
		height: auto;
		margin: 0 auto;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%,0);
	}
	.CSRBox1 {
    	width: 160px;
    	height: 190px;
		margin: 4% 0;
	}
	.CSRBox2 {
    	width: 148px;
    	height: 190px;
		margin: 4% 0;
	}
	.CSRBox3 {
    	width: 155px;
    	height: 190px;
		margin: 4% 0;
	}
	.CSRBox4 {
    	width: 423px;
		height: 100%;
		
	}
	.CSRBox4 .screen-av{
		width: 300px;
    	height: 170px;
		position: absolute;
		top: 54%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	.CSRBox4 .screen-av .CSR-AV{
			width: 30px;
			display: inherit;
			height: auto;
			margin: 0 auto;
			position: absolute;
			bottom: 8px;
			left: 5px;
			transform: translate(0%,0%);
	}
	
	.CSRBox5 {
    	width: 150px;
    	height: 190px;
		margin: 4% 0;
	}
	.CSRBox6 {
    	width: 172px;
    	height: 190px;
		margin: 4% 0;
	}
	
	.CSRBox7 {
    	width: 145px;
    	height: 190px;
		margin: 4% 0;
	}
.CSR-popup{
	max-width: 700px;
	height: 150px;
    margin: 4% auto;
}

.PPM{
	width:100%;
	height:100%;
	background-image:url(../imges/PPM.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
	position: relative;
}
.PPM-gallery {
    width: 175px;
    /*height: 360px;*/
    background: transparent;
    display: inline-block;
    position: absolute;
    left: 51%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}
.timer-box{
	/*width:50%;
	margin:0 auto;
	margin-top:10%;*/
	width: 60%;
    margin: 0 auto;
    margin-top: 2%;
	padding-bottom:5%;
	background:rgba(255,255,255,0.6);
	position:relative;
}
.count-box{
	width:100%;
	display:inline-block;
	padding:15px 10px;
	
}
.count-box h1{
	font-family: 'SohoGothicPro-Medium';
	font-size:42px;
	color:#ab130e;
	line-height:1.5;
	letter-spacing:0.0125em;
}
.count-box h2{
	font-family: 'SohoGothicPro-Medium';
	font-size:42px;
	color:#00558b;
	line-height:1.5;
	letter-spacing:0.0125em;
	text-transform:inherit;
}
#clockdiv{
	font-family: sans-serif;
	color: #fff;
	/*background:#d42427;*/
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
	width:90%;
	margin:0 0px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,30%);
}

#clockdiv > div{
	padding: 10px;
	border-radius: 3px;
	display: inline-block;
	width: 25%;
    float: left;
	text-align:center;
	position:relative;
}

#clockdiv div:before{
	content:'';
	position:absolute;
	width:5px;
	height:30px;
	border:1px solid #919190;
	border-left:none;
	top:40%;
	left:7%;
	background: rgb(1,83,139);
	background: linear-gradient(0deg, rgba(0,83,139,1) 0%, rgba(64,134,182,1)  100%);
	transform:translate(0,-50%);
	-moz-transform:translate(0,-50%);
	-webkit-transform:translate(0,-50%);
}

#clockdiv div:after{
	content:'';
	position:absolute;
	width:5px;
	height:30px;
	border:1px solid #919190;
	border-right:none;
	top:40%;
	right:7%;
	background: rgb(1,83,139);
	background: linear-gradient(0deg, rgba(0,83,139,1) 0%, rgba(64,134,182,1)  100%);
	transform:translate(0,-50%);
	-moz-transform:translate(0,-50%);
	-webkit-transform:translate(0,-50%);
}


#clockdiv div > span{
	padding: 45px 10px;
	border-radius: 3px;
	font-family: 'SohoGothicPro-Medium';
	background: rgb(1,83,139);
	background: linear-gradient(0deg, rgba(64,134,182,1) 0%, rgba(0,83,139,1) 100%);
	color:#fff;
	display: inline-block;
	width:100%;
    font-weight: bold;
    font-size:42px;
	position:relative;
}


.smalltext{
	width:80%;
	margin:0 auto;
	border-radius:3px;
	padding: 3px;
	font-size: 21px;
	font-family: 'SohoGothicPro-Regular';
	background:transparents;
	color:#ffffff;
	margin-top:5px;
}
.timer{
	width:100%;
	height:100%;
	background-image:url(../imges/timer.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
	position: relative;
}
.footer-time{
	width:100%;
	display:inline-block;
	position:absolute;
	bottom:0;
}
.timer-footer{
	width:100%;
	display:inline-block;
	padding:10px 0;
	background:rgba(255,255,255,0.6);
}
.timer-footer p{
	font-family: 'SohoGothicPro-Regular';
	font-size:13px;
	margin:0;
	letter-spacing:0.0125em;
	line-height:1.5;
	color:#000;
}
.footer-time .footer-logo{
	width:200px;
	display:inline-block;
	float:right;
	padding:5px 0;
	padding-bottom:20px;
	text-align:right;
}
.login-form{
	width:50%;
	display: inline-block;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}
.login-group{
	position: relative;
}
.Fill-form{
	width: 100%;
	height: 100%;
	padding: 35px;
	position: absolute;
	top: 0;
	left: 0;
}
.form-head{
	width: 100%;
	display: inline-block;
}
.form-head h1.blue{
	font-family: 'SohoGothicPro-Medium';
	font-size: 36px;
	color: #00558b;
	line-height: 1.5;
	letter-spacing: 0.0125em;
}
.employee-from{
	width:50%;
	margin: 30px auto;
}
.employee-from input{
	border-radius: 0;
	border:3px solid #ccc;
}
.employee-from .btn-login{
	float: right;
}
.csr-pages{
	padding: 15px 0;
}
.Zone-panel{
	width:100%;
	height: 100%;
	display: inline-block;
	background:url(../imges/banner.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
	
}
.Zone-area{
	width: 100%;
    height: 100%;
    display: inline-block;
    position: relative;
}
.zone-tab{
	width: 60%;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
}
@media(max-width:1680px){
	.photo-gallery{
		width: 600px;
		height: 350px;
		top: 48%;
	}
	.year-glance .grid.y2001{
		width: 105px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2002{
		width: 95px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2003{
		width: 90px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2004{
		width: 76px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2005{
		width: 74px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2006{
		width: 70px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2007{
		width: 66px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2008{
		width: 66px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2009{
		width: 56px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2010{
		width: 60px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y20012020{
		width: 175px;
		height: 100%;
		position: relative;
	}
	.year-glance .grid.y2011{
		width: 65px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2012{
		width: 64px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2013{
		width: 66px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2014{
		width: 68px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2015{
		width: 70px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2016{
		width: 70px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2017{
		width: 75px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2018{
		width: 85px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2019{
		width: 90px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2020{
		width: 90px;
		height: 100%;
		position:relative;
	}
	.TechEdge-stall {
    	width: 100%;
    	height: 280px;
	}
	
	.box1{
		width:60px;
		height:100%;
		display:inline-block;
	
	}
	.box2{
		width:75px;
		height:100%;
		display:inline-block;
	
	}
	.box3{
		width:230px;
		height:100%;
		display:inline-block;
	
	}
	.box4{
		width:160px;
		height:100%;
		display:inline-block;
	
	}
	.box5{
		width:130px;
		height:100%;
		display:inline-block;
	
	}
	.box6{
		width:200px;
		height:100%;
		display:inline-block;
	
	}	
	.box7{
		width:150px;
		height:100%;
		display:inline-block;
	
	}
	.box8{
		width:240px;
		height:100%;
		display:inline-block;
	
	}
	.box9{
		width:138px;
		height:100%;
		display:inline-block;
	
	}
	.box10{
		width:60px;
		height:100%;
		display:inline-block;
	
	}
	.box11{
		width:67px;
		height:100%;
		display:inline-block;
	
	}
	.stall-box1{
		height:565px;
	}
	.stall-box2{
		height:565px;
	}
	.stall-box3{
		height:385px;
	}
	.hex-grid{
		width:180px;
		height:180px;
		display:inline-block;
	}
	.hex-grid.hex1{
		top:1%;
		left:28%;
	}
	.hex-grid.hex2{
		top:1%;
		right:0%;
	}
	.hex-grid.hex3{
		top: 35%;
		left: 8%;
	}
	.hex-grid.hex4{
		bottom: 1%;
		left: 29%;
	}
	.hex-grid.hex5{
		top:2%;
		left: 6%;
	}
	.hex-grid.hex6{
		top: 24%;
	    right: 0%;
	}
	.hex-grid.hex7{
		bottom: 10%;
		left: 30%;
	}
	.hex-grid.hex8{
		top: 2%;
		left: 35%;
	}
	.hex-grid.hex9{
		bottom: 0%;
		left: 8%;
	}
	.poster{
		width:30%;
		height:385px;
		display:inline-block;
	}
	.poster1{
		position: absolute;
		top: 36%;
    	left: 2%;
		width: 18%;
		margin: 0 auto;
	}
	.poster2{
		position: absolute;
		top: 37%;
    	right: 2%;
		width: 16%;
		margin: 0 auto;
	}
	.brand-popup{
		max-width: 600px;
	}
	.CSR-row {
    	width: 78%;
    	height: 280px;
    	position: absolute;
    	top: 38%;
    	left: 17%;
	}
	.CSRBox1{
		width:150px;
		height:160px;
	}
	.CSRBox2{
		width:148px;
		height:160px;
	}
	.CSRBox3{
		width:140px;
	}
	.CSRBox4{
		width:420px;
	}
	.CSRBox5{
		width:145px;
	}
	.CSRBox6{
		width:165px;
	}
	.CSRBox7{
		width:140px;
	}
	.CSR-popup{
		max-width: 600px;
	}
	.PPM-gallery {
		width: 130px;
		/*height: 360px;*/
		background: transparent;
		display: inline-block;
		position: absolute;
		left: 51%;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	.count-box h1{
		font-size: 40px;
	}

}

@media(max-width:1600px){
	.CSR-row {
		width: 71%;
    	height: 260px;
		position: absolute;
		top: 44%;
		left: 20%;
	}
	.CSR-box{
		position: relative;
	}
	.CSR-box .CSR-PDF{
		width: 30px;
		display: inherit;
		height: auto;
		margin: 0 auto;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%,0);
	}
	.CSRBox1 {
    	width: 135px;
    	height: 160px;
	}
	.CSRBox2 {
    	width: 125px;
    	height: 160px;
	}
	.CSRBox3 {
    	width: 125px;
    	height: 160px;
	}
	.CSRBox4 {
    	width: 355px;
		height: 100%;
	}
	.CSRBox4 .screen-av{
		width: 250px;
		height: 145px;
		position: absolute;
		top: 54%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	.CSRBox4 .screen-av .CSR-AV{
			width: 30px;
			display: inherit;
			height: auto;
			margin: 0 auto;
			position: absolute;
			bottom: 8px;
			left: 5px;
			transform: translate(0%,0%);
	}
	
	.CSRBox5 {
    	width: 125px;
    	height: 160px;
	}
	.CSRBox6 {
    	width: 140px;
    	height: 160px;
	}
	.CSRBox6 {
    	width: 140px;
    	height: 160px;
	}
	.CSRBox7 {
    	width: 122px;
    	height: 160px;
	}
	
	.TechEdge-stall {
    	width: 100%;
    	height: 230px;
		top:55%;
	}
	.box1 .icon-pdf {
    	left: 5px;
    	bottom: 2px;
	}
	.box2 .icon-pdf {
    	left: 2px;
    	bottom: -7px;
	}
	.box3 .icon-pdf {
    	left: 4px;
    	bottom: -15px;
	}
	.box4 {
    	width: 135px;
	}
	.box4 .icon-pdf {
    	left: 0px;
    	bottom: -15px;
	}
	.box5 {
    	width: 120px;
	}
	.box5 .icon-pdf {
    	left: 0px;
    	bottom: -15px;
	}
	.box6 {
    	width: 200px;
	}
	
	.box7 {
    	width: 140px;
	}
	.box7 .icon-pdf {
		left: 5px;
		bottom: -15px;
	}
	.box8 {
    	width: 235px;
	}
	.box8 .icon-pdf {
		left: 3px;
		bottom: -16px;
	}
	.box9 {
    	width: 130px;
	}
	.box9 .icon-pdf {
		left: 2px;
    	bottom: -14px;
	}
	.box10 {
    	width: 45px;
	}
	.box10 .icon-pdf {
		left: 0px;
		bottom: -12px;
	}
	.box11 .icon-pdf {
		position: absolute;
		left: 0px;
		bottom: -6px;
	}
	.box1.box12 .icon-pdf {
		left: 5px;
		bottom: -17px;
	}
	.box2.box13 .icon-pdf {
		left: 5px;
		bottom: -17px;
	}
	.box2.box13 .icon-pdf {
		left: 0px;
		bottom: -17px;
	}
	.box3.box14 .icon-pdf {
		left: 5px;
		bottom: -17px;
	}
	.box4.box15 .icon-pdf {
		left: -4px;
    	bottom: -10px;
	}
	.box5.box16 .icon-pdf {
		left: 0px;
    	bottom: -10px;
	}
	.box7.box17 .icon-pdf {
		left: 5px;
    	bottom: -10px;
	}
	.box8.box18 .icon-pdf {
		left: 3px;
    	bottom: -10px;
	}
	.box9.box19 .icon-pdf {
		left: 3px;
    	bottom: -15px;
	}
	.box10.box20 .icon-pdf {
		left: 3px;
    	bottom: -15px;
	}
	.box11.box21 .icon-pdf {
		left: 2px;
    	bottom: -15px;
	}
	
}

@media(max-width:1527px){
	.CSR-row {
		width: 71%;
    	height: 260px;
		position: absolute;
		top: 44%;
		left: 20%;
	}
	.CSR-box{
		position: relative;
	}
	.CSR-box .CSR-PDF{
		width: 25px;
		display: inherit;
		height: auto;
		margin: 0 auto;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%,0);
	}
	.CSRBox1 {
    	width: 128px;
    	height: 160px;
	}
	.CSRBox2 {
    	width: 120px;
    	height: 160px;
	}
	.CSRBox3 {
    	width: 120px;
    	height: 160px;
	}
	.CSRBox4 {
    	width: 340px;
		height: 100%;
	}
	.CSRBox4 .screen-av{
		width: 245px;
		height: 140px;
		position: absolute;
		top: 56%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	.CSRBox4 .screen-av .CSR-AV{
			width: 25px;
			display: inherit;
			height: auto;
			margin: 0 auto;
			position: absolute;
			bottom: 8px;
			left: 8px;
			transform: translate(0%,0%);
	}
	
	.CSRBox5 {
    	width: 116px;
    	height: 160px;
	}
	.CSRBox6 {
    	width: 140px;
    	height: 160px;
	}
	.CSRBox6 {
    	width: 135px;
    	height: 160px;
	}
	.CSRBox7 {
    	width: 118px;
    	height: 160px;
	}
	
}

@media(max-width:1440px){
	.photo-gallery {
		width: 480px;
    	height: 270px;
    	top: 55%;
	}
	.year-glance .grid.y2001{
		width: 90px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2002{
		width: 85px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2003{
		width: 73px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2004{
		width: 66px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2005{
		width: 64px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2006{
		width: 58px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2007{
		width: 55px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2008{
		width: 56px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2009{
		width: 53px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2010{
		width: 53px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y20012020{
		width: 150px;
		height: 100%;
		position: relative;
	}
	.year-glance .grid.y2011{
		width: 50px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2012{
		width: 55px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2013{
		width: 54px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2014{
		width: 58px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2015{
		width: 60px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2016{
		width: 64px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2017{
		width: 70px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2018{
		width: 70px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2019{
		width: 75px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2020{
		width: 80px;
		height: 100%;
		position:relative;
	}
	.TechEdge-stall {
    	width: 100%;
    	height: 200px;
		top:55%;
	}

	
	.box1{
		width:53px;
		height:100%;
		display:inline-block;
	
	}
	.box1 .icon-pdf {
		left: 5px;
		bottom: 5px;
	}
	.box2{
		width:60px;
		height:100%;
		display:inline-block;
	
	}
	.box2 .icon-pdf {
		left: 2px;
		bottom: -3px;
	}
	.box3{
		width:200px;
		height:100%;
		display:inline-block;
	
	}
	.box3 .icon-pdf {
		left: 12px;
		bottom:-10px;
	}
	.box4{
		width:130px;
		height:100%;
		display:inline-block;
	
	}
	.box4 .icon-pdf {
		left: 14px;
		bottom:-10px;
	}
	.box5{
		width:115px;
		height:100%;
		display:inline-block;
	
	}
	.box5 .icon-pdf {
		left: 8px;
		bottom:-10px;
	}
	.box6{
		width:175px;
		height:100%;
		display:inline-block;
	
	}
	
	.box7{
		width:130px;
		height:100%;
		display:inline-block;
	
	}
	.box7 .icon-pdf {
		left: 9px;
		bottom:-10px;
	}
	.box8{
		width:205px;
		height:100%;
		display:inline-block;
	
	}
	.box8 .icon-pdf {
		left: 3px;
		bottom:-10px;
	}
	.box9{
		width:120px;
		height:100%;
		display:inline-block;
	
	}
	.box9 .icon-pdf {
		left: 6px;
		bottom: -10px;
	}
	.box9.box19 .icon-pdf {
		left: 8px;
		bottom: -15px;
	}
	.box10{
		width:50px;
		height:100%;
		display:inline-block;
	
	}
	.box10 .icon-pdf {
		left: 5px;
		bottom:-8px;
	}
	.box11{
		width:57px;
		height:100%;
		display:inline-block;
	
	}
	.box11 .icon-pdf {
		left: -5px;
		bottom:0px;
	}
	.box1.box12 .icon-pdf{
		left: 3px;
		bottom:-15px;
	}
	.box2.box13 .icon-pdf{
		left: 0px;
		bottom:-15px;
	}
	.box3.box14 .icon-pdf{
		left: 10px;
		bottom:-15px;
	}
	.box4.box15 .icon-pdf{
		left: 10px;
		bottom:-10px;
	}
	.box5.box16 .icon-pdf{
		left: 7px;
		bottom:-10px;
	}
	.box7.box17 .icon-pdf{
		left: 7px;
		bottom:-10px;
	}
	.box11.box21 .icon-pdf {
		left: -5px;
		bottom: -15px;
	}
	.stall-box1{
		height:485px;
	}
	.stall-box2{
		height:485px;
	}
	.stall-box3{
		height:330px;
	}
	.hex-grid{
		width:160px;
		height:160px;
		display:inline-block;
	}
	.hex-grid.hex1{
		top:0%;
		left:27%;
	}
	.hex-grid.hex2{
		top:0;
		right:0;
	}
	.hex-grid.hex3{
		top: 35%;
		left: 8%;
	}
	.hex-grid.hex4{
		bottom: 0;
		left: 28%;
	}
	.hex-grid.hex5{
		top: 2%;
		left: 4%;
	}
	.hex-grid.hex6{
		top: 23%;
	    right: 0%;
	}
	.hex-grid.hex7{
		bottom: 10%;
		left: 30%;
	}
	.hex-grid.hex8{
		top: 2%;
		left: 33%;
	}
	.hex-grid.hex9{
		bottom: 0%;
		left: 5%;
	}
	.poster{
		width:30%;
		height:320px;
		display:inline-block;
	}
	.poster1{
		position: absolute;
		top: 37%;
    	left: 2%;
		width: 18%;
		margin: 0 auto;
	}
	.poster2{
		position: absolute;
		top: 37%;
    	right: 2%;
		width: 16%;
		margin: 0 auto;
	}
	.brand-popup{
		max-width: 500px;
	}
	.CSR-row {
		width: 71%;
    	height: 240px;
		position: absolute;
		top: 43%;
		left: 20%;
	}
	.CSR-box{
		position: relative;
	}
	.CSR-box .CSR-PDF{
		width: 25px;
		display: inherit;
		height: auto;
		margin: 0 auto;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%,0);
	}
	.CSRBox1 {
    	width: 121px;
    	height: 145px;
	}
	.CSRBox2 {
    	width: 113px;
    	height: 145px;
	}
	.CSRBox3 {
    	width: 110px;
    	height: 145px;
	}
	.CSRBox4 {
    	width: 320px;
		height: 100%;
	}
	.CSRBox4 .screen-av{
		width: 228px;
		height: 130px;
		position: absolute;
		top: 54%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	.CSRBox4 .screen-av .CSR-AV{
			width: 25px;
			display: inherit;
			height: auto;
			margin: 0 auto;
			position: absolute;
			bottom: 8px;
			left: 8px;
			transform: translate(0%,0%);
	}
	
	.CSRBox5 {
    	width: 116px;
    	height: 145px;
	}
	.CSRBox6 {
    	width: 140px;
    	height: 145px;
	}
	.CSRBox6 {
    	width: 125px;
    	height: 145px;
	}
	.CSRBox7 {
    	width: 110px;
    	height: 145px;
	}
	.PPM-gallery {
		width: 100px;
		/*height: 360px;*/
		background: transparent;
		display: inline-block;
		position: absolute;
		left: 51%;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	
	.count-box h1 {
    	font-size: 30px;
	}
	.count-box h2{
		font-size:30px;
	}
	.form-head h1.blue{
		font-size: 32px;
	}
}

@media(max-width:1366px){
	.header{
		padding:15px 15px;
	}
	.logo-right{
		width:160px;
	}
	.photo-gallery {
		width: 480px;
    	height: 250px;
    	top: 48%;
	}
	.photo-gallery{
		width: 600px;
		height: 350px;
		top: 48%;
	}
	.year-glance .grid.y2001{
		width: 90px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2002{
		width: 72px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2003{
		width: 70px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2004{
		width: 62px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2005{
		width: 60px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2006{
		width: 55px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2007{
		width: 53px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2008{
		width: 50px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2009{
		width: 50px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2010{
		width: 50px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y20012020{
		width: 140px;
		height: 100%;
		position: relative;
	}
	.year-glance .grid.y2011{
		width: 54px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2012{
		width: 52px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2013{
		width: 55px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2014{
		width: 52px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2015{
		width: 55px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2016{
		width: 65px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2017{
		width: 62px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2018{
		width: 60px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2019{
		width: 75px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2020{
		width: 75px;
		height: 100%;
		position:relative;
	}
	
	.TechEdge-stall{
		width:100%;
		height: 200px;
		top: 48%;
		
	}
	.icon-pdf {
    	width: 20px;
    	height: 20px;
	}
	
	.box1{
		width:50px;
		height:100%;
		display:inline-block;
	}
	.box1 .icon-pdf {
		left: 5px;
		bottom: 0px;
	}
	.box2{
		width:70px;
		height:100%;
		display:inline-block;
	
	}
	.box2 .icon-pdf {
		left: 2px;
		bottom: -8px;
	}
	.box3{
		width:185px;
		height:100%;
		display:inline-block;
	
	}
	.box3 .icon-pdf {
		left: 0px;
		bottom: -15px;
	}
	/*.box3.mobile-app .gallery:first-child a.award-glance{
		width:99%;
		height:100%;
		float:left;
	}
	.box3.mobile-app .gallery:last-child a{
		width:1%;
		height:100%;
		float:right;
	}*/
	.box4{
		width:120px;
		height:100%;
		display:inline-block;
	
	}
	.box4 .icon-pdf {
		left: 5px;
		bottom: -15px;
	}
	.box5{
		width:105px;
		height:100%;
		display:inline-block;
	
	}
	.box5 .icon-pdf {
		left: 4px;
		bottom: -15px;
	}
	.box6{
		width:170px;
		height:100%;
		display:inline-block;
	
	}	
	.box7{
		width:120px;
		height:100%;
		display:inline-block;
	
	}
	.box7 .icon-pdf {
		left: 5px;
		bottom: -15px;
	}
	.box8{
		width:195px;
		height:100%;
		display:inline-block;
	
	}
	.box8 .icon-pdf {
		left: 2px;
		bottom: -15px;
	}
	.box9{
		width:113px;
		height:100%;
		display:inline-block;
	
	}
	.box9 .icon-pdf {
		left: 6px;
		bottom: -15px;
	}
	.box10{
		width:45px;
		height:100%;
		display:inline-block;
	
	}
	.box10 .icon-pdf {
    	left: 5px;
    	bottom: -13px;
	}
	.box11{
		width:55px;
		height:100%;
		display:inline-block;
	
	}
	.box11 .icon-pdf {
		left: -3px;
		bottom: -6px;
	}
	.box1.box12 .icon-pdf {
		left: 2px;
		bottom: -15px;
	}
	.box3.box14 .icon-pdf {
		left: -2px;
		bottom: -15px;
	}
	.box4.box15 .icon-pdf {
		left: 3px;
		bottom: -10px;
	}
	.box5.box16 .icon-pdf {
		left: 3px;
		bottom: -10px;
	}
	.box7.box17 .icon-pdf {
		left: 4px;
		bottom: -10px;
	}
	.stall-box1{
		height:460px;
	}
	.stall-box2{
		height:460px;
	}
	.stall-box3{
		height:320px;
	}
	.hex-grid{
		width:155px;
		height:155px;
		display:inline-block;
	}
	.hex-grid.hex1{
		top:0%;
		left:27%;
	}
	.hex-grid.hex2{
		top:0;
		right:0%;
	}
	.hex-grid.hex3{
		top: 34%;
		left: 7%;
	}
	.hex-grid.hex4{
		bottom: 0;
		left: 26%;
	}
	.hex-grid.hex5{
		top: 0;
		left: 4%;
	}
	.hex-grid.hex6{
		top: 23%;
	    right: 0;
	}
	.hex-grid.hex7{
		bottom: 9%;
		left: 30%;
	}
	.hex-grid.hex8{
		top: 2%;
		left: 33%;
	}
	.hex-grid.hex9{
		bottom: 0%;
		left: 5%;
	}
	.poster{
		width:30%;
		height:320px;
		display:inline-block;
	}
	.poster1{
		position: absolute;
		top: 35%;
		left: 6%;
		width: 18%;
		margin: 0 auto;
	}
	.poster2{
		position: absolute;
		top: 35%;
		right: 6%;
		width: 16%;
		margin: 0 auto;
	}
	.brand-popup{
		max-width: 500px;
	}
	.CSR-row{
		width: 71%;
    	height: 230px;
		left: 20%;
		top:38%;
	}
	.CSRBox1{
		width:115px;
		height: 140px;
	}
	.CSRBox2{
		width:106px;
		height: 140px;
	}
	.CSRBox3{
		width:110px;
		height: 140px;
	}
	.CSRBox4 {
    	width: 300px;
		height: 100%;
	}
	.CSRBox4 .screen-av{
		width: 220px;
		height: 130px;
		position: absolute;
		top: 54%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	.CSRBox4 .screen-av .CSR-AV{
			width: 25px;
			display: inherit;
			height: auto;
			margin: 0 auto;
			position: absolute;
			bottom: 9px;
			left: 9px;
			transform: translate(0%,0%);
	}
	.CSRBox5{
		width:110px;
		height: 140px;
	}
	.CSRBox6{
		width:115px;
		height: 140px;
	}
	.CSRBox7{
		width:110px;
		height: 140px;
	}
	.CSR-popup{
		max-width: 500px;
	}
	.PPM-gallery {
		width: 100px;
		/*height: 360px;*/
		background: transparent;
		display: inline-block;
		position: absolute;
		left: 51%;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	.timer-box{
		margin-top:3%;
	}
	#clockdiv div > span {
    	padding: 30px 10px;
	}
}

@media(max-width:1360px){
	.TechEdge-stall{
		width:100%;
		height: 200px;
		top: 58%;
		
	}
	.stall-row{
		margin:0;
	}
	
	.box1{
		width:50px;
		height:100%;
		display:inline-block;
	
	}
	.box2{
		width:70px;
		height:100%;
		display:inline-block;
	
	}
	.box3{
		width:185px;
		height:100%;
		display:inline-block;
	
	}
	/*.box3.mobile-app .gallery:first-child a.award-glance{
		width:99%;
		height:100%;
		float:left;
	}
	.box3.mobile-app .gallery:last-child a{
		width:1%;
		height:100%;
		float:right;
	}*/
	.box4{
		width:115px;
		height:100%;
		display:inline-block;
	
	}
	.box5{
		width:110px;
		height:100%;
		display:inline-block;
	
	}
	.box6{
		width:170px;
		height:100%;
		display:inline-block;
	
	}	
	.box7{
		width:118px;
		height:100%;
		display:inline-block;
	
	}
	.box8{
		width:195px;
		height:100%;
		display:inline-block;
	
	}
	.box9{
		width:108px;
		height:100%;
		display:inline-block;
	
	}
	.box10{
		width:45px;
		height:100%;
		display:inline-block;
	
	}
	.box11{
		width:55px;
		height:100%;
		display:inline-block;
	
	}
	
	.hr-stall {
		background-position:top center;
	}
	
	.stall-box1{
		height:460px;
	}
	.stall-box2{
		height:460px;
	}
	.stall-box3{
		height:320px;
		top:41%;
	}
	.hex-grid{
		width:120px;
		height:120px;
		display:inline-block;
		/*border:1px solid #ccc;*/
	}
	.hex-grid.hex1{
		top: 6%;
    	left: 31%;
	}
	.hex-grid.hex2{
		top:6%;
		right:3%;
	}
	.hex-grid.hex3{
		top: 40%;
		left: 11%;
	}
	.hex-grid.hex4{
		bottom: 0%;
		left: 30%;
	}
	.hex-grid.hex5{
		top: 7%;
		left: 10%;
	}
	.hex-grid.hex6{
		top: 30%;
	    right: 3%;
	}
	.hex-grid.hex7{
		bottom: 11%;
		left: 35%;
	}
	.hex-grid.hex8{
		top: 14%;
		left: 38%;
	}
	.hex-grid.hex9{
		bottom: 0%;
    	left: 10%;
	}
	.poster{
		width:30%;
		height:300px;
		display:inline-block;
	}
	.poster1{
		position: absolute;
		top: 42%;
		left: 6%;
		width: 18%;
		margin: 0 auto;
	}
	.poster2{
		position: absolute;
		top: 42%;
		right: 6%;
		width: 16%;
		margin: 0 auto;
	}
	.brand-popup{
		max-width: 420px;
	}
	.CSR-row{
		height: 230px;
    	top: 45%;
	}
	.CSRBox1{
		width:114px;
		height: 140px;
	}
	.CSRBox2{
		width:105px;
		height: 140px;
	}
	.CSRBox3{
		width:110px;
		height: 140px;
	}
	.CSRBox4{
		width:300px;
		
	}
	.CSRBox4 .screen-av {
		width: 215px;
		height: 125px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	.CSRBox5{
		width:107px;
		height: 140px;
	}
	.CSRBox6{
		width:120px;
		height: 140px;
	}
	.CSRBox7{
		width:100px;
		height: 140px;
	}
	.CSR-popup{
		max-width:420px;
	}
	.PPM-gallery {
    	width: 80px;
		top:58%;
	}
}

@media(max-width:1280px){
	.photo-gallery {
		width: 460px;
    	height: 250px;
    	top: 48%;
	}
	.year-glance .grid.y2001{
		width: 85px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2002{
		width: 68px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2003{
		width: 68px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2004{
		width: 56px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2005{
		width: 58px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2006{
		width: 52px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2007{
		width: 50px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2008{
		width: 48px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2009{
		width: 48px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2010{
		width: 48px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y20012020{
		width: 130px;
		height: 100%;
		position: relative;
	}
	.year-glance .grid.y2011{
		width: 50px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2012{
		width: 48px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2013{
		width: 50px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2014{
		width: 49px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2015{
		width: 54px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2016{
		width: 58px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2017{
		width: 58px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2018{
		width: 59px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2019{
		width: 70px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2020{
		width: 70px;
		height: 100%;
		position:relative;
	}
	
	.TechEdge-stall{
		width:100%;
		height: 200px;
		top: 50%;
		
	}
	.stall-row{
		margin:0;
	}
	
	.box1{
		width:50px;
		height:100%;
		display:inline-block;
	
	}
	.box2{
		width:50px;
		height:100%;
		display:inline-block;
	
	}
	.box3{
		width:185px;
		height:100%;
		display:inline-block;
	
	}
	
	.box4{
		width:110px;
		height:100%;
		display:inline-block;
	
	}
	.box5{
		width:100px;
		height:100%;
		display:inline-block;
	
	}
	.box6{
		width:160px;
		height:100%;
		display:inline-block;
	
	}	
	.box7{
		width:110px;
		height:100%;
		display:inline-block;
	
	}
	.box8{
		width:188px;
		height:100%;
		display:inline-block;
	
	}
	.box9{
		width:100px;
		height:100%;
		display:inline-block;
	
	}
	.box10{
		width:45px;
		height:100%;
		display:inline-block;
	
	}
	.box11{
		width:50px;
		height:100%;
		display:inline-block;
	
	}
	
	.stall-box1{
		height:460px;
	}
	.stall-box2{
		height:420px;
	}
	.stall-box3{
		height:280px;
		top:41%;
	}
	.hex-grid{
		width:130px;
		height:130px;
		display:inline-block;
	}
	.hex-grid.hex1{
		top:2%;
		left:29%;
	}
	.hex-grid.hex2{
		top:2%;
		right:0%;
	}
	.hex-grid.hex3{
		top: 33%;
		left: 9%;
	}
	.hex-grid.hex4{
		bottom: 7%;
		left: 29%;
	}
	.hex-grid.hex5{
		top: 2%;
		left: 7%;
	}
	.hex-grid.hex6{
		top: 26%;
	    right: 0;
	}
	.hex-grid.hex7{
		bottom: 9%;
		left: 32%;
	}
	.hex-grid.hex8{
		top: -5%;
		left: 35%;
	}
	.hex-grid.hex9{
		bottom: 2%;
    	left: 8%;
	}
	.poster{
		width:30%;
		height:300px;
		display:inline-block;
	}
	.poster1{
		position: absolute;
		top: 37%;
    	left: 2%;
		width: 18%;
		margin: 0 auto;
	}
	.poster2{
		position: absolute;
		top: 37%;
		right: 2%;
		width: 16%;
		margin: 0 auto;
	}
	.brand-popup{
		max-width: 420px;
	}
	.CSR-row{
		width: 78%;
		height: 240px;
		top: 38%;
		left: 17%;
	}
	
	.CSRBox1{
		width:114px;
		height: 145px;
	}
	.CSRBox2{
		width:112px;
		height: 145px;
	}
	.CSRBox3{
		width:110px;
		height: 145px;
	}
	.CSRBox4{
		width:315px;
	}
	.CSRBox4 .screen-av{
		width: 220px;
		height: 130px;
		position: absolute;
		top: 54%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	.CSRBox4 .screen-av .CSR-AV{
			width: 25px;
			display: inherit;
			height: auto;
			margin: 0 auto;
			position: absolute;
			bottom: 9px;
			left: 9px;
			transform: translate(0%,0%);
	}
	.CSRBox5{
		width:114px;
		height: 145px;
	}
	.CSRBox6{
		width:125px;
		height: 145px;
	}
	.CSRBox7{
		width:105px;
		height: 145px;
	}
	.CSR-popup{
		max-width:420px;
		height: 115px;
	}
	.PPM-gallery {
    	width: 80px;
		top:50%;
	}
	.form-head h1.blue{
		font-size: 28px;
	}
}
	

@media(max-width:1024px){
	.potrait {
    	padding-top: 15px;
    	width: 60%;
    	display: block;
    	margin: 0 auto;
	}
	.content{
		height:auto;
	}
	.employee-msg{
		width:92%;
	}
	.photo-gallery {
		top:48%;
	}
	.year-glance .grid.y2001{
		width: 70px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2002{
		width: 55px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2003{
		width: 52px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2004{
		width: 45px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2005{
		width: 45px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2006{
		width: 43px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2007{
		width: 40px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2008{
		width: 40px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2009{
		width: 38px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2010{
		width: 38px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y20012020{
		width: 100px;
		height: 100%;
		position: relative;
	}
	.year-glance .grid.y2011{
		width: 40px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2012{
		width: 40px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2013{
		width: 40px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2014{
		width: 39px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2015{
		width: 44px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2016{
		width: 48px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2017{
		width: 48px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2018{
		width: 48px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2019{
		width: 55px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2020{
		width: 55px;
		height: 100%;
		position:relative;
	}
	.TechEdge-stall{
		width: 100%;
    	height: 160px;
    	top: 50%;
	}
	.icon-pdf {
    	width: 25px;
    	height: 25px;
	}
	.box1{
		width:35px;
		height:100%;
		display:inline-block;
	
	}
	.box2{
		width:48px;
		height:100%;
		display:inline-block;
	
	}
	.box3{
		width:145px;
		height:100%;
		display:inline-block;
	
	}
	
	.box4{
		width:90px;
		height:100%;
		display:inline-block;
	
	}
	.box5{
		width:80px;
		height:100%;
		display:inline-block;
	
	}
	.box6{
		width:125px;
		height:100%;
		display:inline-block;
	
	}	
	.box7{
		width:90px;
		height:100%;
		display:inline-block;
	
	}
	.box8{
		width:150px;
		height:100%;
		display:inline-block;
	
	}
	.box9{
		width:75px;
		height:100%;
		display:inline-block;
	
	}
	.box10{
		width:40px;
		height:100%;
		display:inline-block;
	
	}
	.box11{
		width:40px;
		height:100%;
		display:inline-block;
	
	}
	.stall-box1{
		height:365px;
	}
	.stall-box2{
		height:335px;
	}
	.stall-box3{
		height:215px;
		top:41%;
	}
	.hex-grid{
		width:100px;
		height:100px;
		display:inline-block;
	}
	.hex-grid.hex1{
		top:2%;
		left:30%;
	}
	.hex-grid.hex2{
		top:2%;
		right:1%;
	}
	.hex-grid.hex3{
		top: 34%;
		left: 9%;
	}
	.hex-grid.hex4{
		bottom: 6%;
		left: 29%;
	}
	.hex-grid.hex5{
		top: 3%;
		left: 8%;
	}
	.hex-grid.hex6{
		top: 27%;
	    right: 1%;
	}
	.hex-grid.hex7{
		bottom: 9%;
		left: 33%;
	}
	.hex-grid.hex8{
		top: -2%;
		left: 35%;
	}
	.hex-grid.hex9{
		bottom: 1%;
    	left: 9%;
	}
	.poster{
		width:30%;
		height:230px;
		display:inline-block;
	}
	.poster1{
		position: absolute;
		top: 35%;
    	left: 5%;
    	width: 17%;
		margin: 0 auto;
	}
	.poster2{
		position: absolute;
		top: 35%;
		right: 5%;
		width: 16%;
		margin: 0 auto;
	}
	.brand-popup{
		max-width: 420px;
	}
	.CSR-row{
		width: 71%;
		height: 180px;
		top: 38%;
		left: 20%;
	}
	
	.CSRBox1 {
		width: 87px;
		height: 115px;
	}
	.CSRBox2{
		width: 80px;
    	height: 115px;
	}
	.CSRBox3{
		width: 80px;
    	height: 115px;
	}
	.CSRBox4{
		width: 225px;
	}
	
	.CSRBox4 .screen-av {
		width: 160px;
		height: 95px;
		position: absolute;
		top: 52%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	
	.CSRBox5{
		width:80px;
		height: 115px;
	}
	.CSRBox6{
		width:92px;
		height: 115px;
	}
	.CSRBox7{
		width:75px;
		height: 115px;
	}
	.PPM-gallery {
    	width: 80px;
	}
	.timer-box {
    	margin-top: 5%;
		width:60%;
	}
	.count-box h1 {
    	font-size: 30px;
	}
	.count-box h2 {
    	font-size: 28px;
	}
	#clockdiv div > span {
    	padding: 25px 10px;
	}
	.form-head h1.blue{
		font-size: 21px;
	}
	.zone-tab{
		width: 90%;
	}
}
@media(max-width:991px){
	.timer{
		background-position: center center;
		position:fixed;
	}
	.bg-wrapper{
		overflow-y:scroll;
	}
	.header {
    	width: 100%;
    	display: inline-block;
    	padding: 10px 10px;
	}
	.logo{
		width:80px;
	}
	.challenge {
    	display: inline-block;
    	margin-left: 2%;
	}
	.challenge h1{
		font-size:24px;
	}
	.potrait{
		width:90%;
	}
	.top-left-corner {
		padding:10px 5px 0 5px;
		background: #fff;
		position: absolute;
		left: -10px;
		top: -10px;
		z-index: 99;
	}
	.bottom-right-corner {
		padding: 15px;
		background: #fff;
		position: absolute;
		right: -10px;
		bottom: -10px;
		z-index: 99;
	}
	.employee-photo .owl-theme .owl-item {
     	margin: 0 !important;
		margin-right: 10px !important;
	}
	.photo-gallery {
		width: 100%;
		height: 510px;
		top: 48%;
	}
	.timer-box {
    	margin-top: 10%;
    	width: 80%;
	}
	.footer-time {
		position: relative;
		margin-top: 20%;
	}
	.CSR-row {
		height: 160px;
		width: 72%;
		left: 20%;
	}
	.CSRBox1 {
    	width: 80px;
		height: 85px;
	}
	.CSRBox2 {
    	width: 80px;
		height: 85px;
	}
	.CSRBox3 {
    	width: 80px;
		height: 85px;
	}
	.CSRBox4 {
    	width: 220px;
	}
	.CSRBox5 {
    	width: 80px;
		height: 85px;
	}
	.CSRBox6 {
    	width: 90px;
		height: 85px;
	}
	.CSRBox7 {
    	width: 75px;
		height: 85px;
	}
	.Fill-form{
		padding: 15px; 
	}
	.login-form {
		width: 80%;
	}
	
}
@media(max-width:904px){
	.CSR{
		background-position:center center;
	}
	.CSR-row {
		height: 165px;
		width: 72%;
		left: 20%;
		top: 33%;
	}
	.CSRBox1 {
    	width: 77px;
    	height: 102px;
	}
	.CSRBox2 {
    	width: 69px;
    	height: 102px;
	}
	.CSRBox3 {
    	width: 69px;
    	height: 102px;
	}
	.CSRBox4{
    	width:205px;
    	
	}
	.CSRBox4 .screen-av {
		width: 150px;
		height: 87px;
		position: absolute;
		top: 51%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	.CSRBox5{
    	width:68px;
    	height: 102px;
	}
	.CSRBox6{
    	width:80px;
    	height: 102px;
	}
	.CSRBox7{
    	width:80px;
    	height: 102px;
	}
	.login-form {
		width: 60%;
	}

}

@media(max-width:851px){
	.CSR{
		background-position:center center;
	}
	.CSR-row {
		height: 165px;
		width: 72%;
		left: 20%;
		top: 30%;
	}
	.CSR-box .CSR-PDF{
			width:22px;
	}
	.CSRBox1 {
    	width: 73px;
    	height: 102px;
	}
	.CSRBox2 {
    	width: 65px;
    	height: 102px;
	}
	.CSRBox3 {
    	width: 69px;
    	height: 102px;
	}
	.CSRBox4{
    	width:186px;
    	
	}
	.CSRBox4 .screen-av {
		width: 140px;
		height: 77px;
		position: absolute;
		top: 48%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	.CSRBox5{
    	width:68px;
    	height: 102px;
	}
	.CSRBox6{
    	width:75px;
    	height: 102px;
	}
	.CSRBox7{
    	width:65px;
    	height: 102px;
	}
	.login-form {
		width: 60%;
	}
}

@media(max-width:801px){
	.timer-box {
		margin-top: 30%;
		width: 80%;
	}
	.footer-time {
		position: absolute;
		margin:0;
		bottom:0;
	}
	.Fill-form{
		padding: 15px; 
	}
	.login-form {
		width: 80%;
	}

}

@media(max-width:800px){
	.timer-box {
		margin-top: 30%;
		width: 80%;
	}
	.footer-time {
		position: relative;
		margin:0;
		bottom:0;
	}
	.Fill-form{
		padding: 15px; 
	}
	.login-form {
		width: 80%;
	}

}
@media(max-width:768px){
	.timer-box {
		margin-top: 30%;
		width: 80%;
	}
	.footer-time {
		position: absolute;
		margin:0;
		bottom:0;
	}
	.poster1 {
    	position: absolute;
    	top: 45%;
    	left: 7%;
   	 	width: 16%;
		height:160px;
    	margin: 0 auto;
	}
	.poster2 {
    	position: absolute;
    	top: 45%;
    	right: 7%;
   	 	width: 15%;
		height:160px;
    	margin: 0 auto;
	}
	.CSR-row {
    	height: 115px;
    	width: 72%;
    	left: 20%;
		top:45%;
	}
	.CSRBox1 {
    	width: 65px;
    	height: 65px;
	}
	.CSRBox2 {
		width: 60px;
		height: 65px;
	}
	.CSRBox3 {
		width: 60px;
		height: 65px;
	}
	.CSRBox4 {
    	width: 170px;
	}
	.CSRBox5 {
    	width: 60px;
    	height: 65px;
	}
	.CSRBox6 {
    	width: 68px;
    	height: 65px;
	}
	.CSRBox7 {
    	width: 60px;
    	height: 85px;
	}
}
@media(max-width:767px){
	
	.timer-box {
    	margin-top: 5%;
    	width: 80%;
	}
	.count-box h1 {
    	font-size: 21px;
	}
	.count-box h2 {
    	font-size: 18px;
	}
	#clockdiv{
		top:40%;
	}
	#clockdiv div > span {
    	padding: 15px 10px;
		font-size:32px;
	}
	
	.footer-time {
		position: relative;
		margin-top: 30%;
	}
}
@media(max-width:724px){
	.CSR-row {
    	height: 115px;
    	width: 72%;
    	left: 20%;
		top:40%;
	}
	.CSRBox1 {
    	width: 60px;
    	height: 65px;
	}
	.CSRBox2 {
		width: 58px;
		height: 65px;
	}
	.CSRBox3 {
		width: 58px;
		height: 65px;
	}
	.CSRBox4 {
    	width: 155px;
	}
	.CSRBox5 {
    	width: 60px;
    	height: 65px;
	}
	.CSRBox6 {
    	width: 65px;
    	height: 65px;
	}
	.CSRBox7 {
    	width: 58px;
    	height: 85px;
	}
	.poster1{
		top:40%;
	}
	.poster2{
		top:40%;
	}
	.stall-box1{
		height:250px;
	}
	.stall-box2{
		height:250px;
	}
	.stall-box3{
		height: 155px;
    	top: 43%;
	}
	.hex-grid{
		width:60px;
		height:60px;
		display:inline-block;
	}
	.hex-grid.hex1{
		top: 6%;
    	left: 31%;
	}
	.hex-grid.hex2{
		top: 6%;
    	right: 3%;
	}
	.hex-grid.hex3{
		top: 39%;
    	left: 12%;
	}
	.hex-grid.hex4{
		bottom: 4%;
    	left: 30%;
	}
	.hex-grid.hex5{
		top: 6%;
		left: 9%;
	}
	.hex-grid.hex6{
		top: 29%;
    	right: 4%;
	}
	.hex-grid.hex7{
		bottom: 15%;
		left: 35%;
	}
	.hex-grid.hex8{
		top: 4%;
		left: 39%;
	}
	.hex-grid.hex9{
		bottom: 0%;
    	left: 10%;
	}
	.little-stroke{
		width:100%;
	}
	.little-stroke .view-icon span {
    	padding: 4px;
	}
	.little-stroke .view-icon i {
    	font-size: 12px;
    	color: #fff;
	}
	.zone-block {
    	padding: 5px 0;
	}
}

@media(max-width:672px){
	.YrsMilestone{
		background-position:center center;
			
	}
	.year-glance{
		height: 100px;
    	top: 70%;
	}
	
	.year-glance .grid{
		/*border:1px solid #ccc;*/
	}
	
	.year-glance .grid.y2001{
		width: 45px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2002{
		width: 38px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2003{
		width: 33px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2004{
		width: 30px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2005{
		width: 30px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2006{
		width: 28px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2007{
		width: 25px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2008{
		width: 26px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2009{
		width: 25px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2010{
		width: 24px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y20012020{
		width: 70px;
		height: 100%;
		position: relative;
	}
	.year-glance .grid.y2011{
		width: 25px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2012{
		width: 25px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2013{
		width: 25px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2014{
		width: 26px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2015{
		width: 28px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2016{
		width: 31px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2017{
		width: 32px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2018{
		width: 32px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2019{
		width: 36px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2020{
		width: 36px;
		height: 100%;
		position:relative;
	}
	.TechEdge-stall{
		width: 100%;
    	height: 100px;
    	top: 68%;
		
	}
	.icon-pdf {
    	width: 20px;
    	height: 20px;
	}
	
	.box1{
		width:25px;
		height:100%;
		display:inline-block;
	
	}
	.box2{
		width:30px;
		height:100%;
		display:inline-block;
	
	}
	.box3{
		width:93px;
		height:100%;
		display:inline-block;
	
	}
	
	.box4{
		width:58px;
		height:100%;
		display:inline-block;
	
	}
	.box5{
		width:55px;
		height:100%;
		display:inline-block;
	
	}
	.box6{
		width:80px;
		height:100%;
		display:inline-block;
	
	}	
	.box7{
		width:60px;
		height:100%;
		display:inline-block;
	
	}
	.box8{
		width:95px;
		height:100%;
		display:inline-block;
	
	}
	.box9{
		width:53px;
		height:100%;
		display:inline-block;
	
	}
	.box10{
		width:25px;
		height:100%;
		display:inline-block;
	
	}
	.box11{
		width:25px;
		height:100%;
		display:inline-block;
	
	}
	
	.brandjourney{
		background-position: center center;
	}
	.poster{
		width:30%;
		height:155px;
		display:inline-block;
	}
	.poster1{
		position: absolute;
		top: 30%;
		left: 6%;
		width: 18%;
		margin: 0 auto;
	}
	.poster2{
		position: absolute;
		top: 30%;
		right: 6%;
		width: 16%;
		margin: 0 auto;
	}
	.brand-popup{
		max-width: 420px;
	}
	.CSR{
		background-position:center center;
	}
	.CSR-row{
		height: 100px;
    	top: 33%;
	}
	.CSRBox1{
		width:57px;
		height: 60px;
	}
	.CSRBox2{
		width:52px;
		height: 60px;
	}
	.CSRBox3{
		width:55px;
		height: 60px;
	}
	.CSRBox4{
		width:145px;
	}
	.CSRBox5{
		width:55px;
		height: 60px;
	}
	.CSRBox6{
		width:58px;
		height: 60px;
	}
	.CSRBox7{
		width:57px;
		height: 60px;
	}
	.CSR-popup{
		max-width:420px;
		margin: 0 auto;
	}
	.footer-time {
    	position: relative;
    	margin-top: 20%;
	}
	.hr-stall {
		background-position: 100% 30%;
	}
	.stall-box1{
		top:0;
		height:100%;
	}
	.stall-box2{
		top:0;
		height:100%;
	}
	.stall-box3{
		height: 140px;
    	top: 43%;
	}
	.hex-grid{
		width:60px;
		height:60px;
		display:inline-block;
	}
	.hex-grid.hex1{
		top: 6%;
    	left: 30%;
	}
	.hex-grid.hex2{
		top: 6%;
    	right: 2%;
	}
	.hex-grid.hex3{
		top: 33%;
		left: 10%;
	}
	.hex-grid.hex4{
		bottom: 18%;
    	left: 30%;
	}
	.hex-grid.hex5{
		top: 6%;
		left: 9%;
	}
	.hex-grid.hex6{
		top: 25%;
	    right: 2%;
	}
	.hex-grid.hex7{
		bottom: 26%;
		left: 35%;
	}
	.hex-grid.hex8{
		top: 1%;
		left: 39%;
	}
	.hex-grid.hex9{
		bottom: -2%;
    	left: 10%;
	}
	.little-stroke{
		width:100%;
	}
	.little-stroke .view-icon span {
    	padding: 3px;
	}
	.little-stroke .view-icon i {
    	font-size: 10px;
    	color: #fff;
	}
	.zone-block {
    	padding: 5px 0;
	}
}
@media(max-width:667px){
	.CSR{
		background-position:center center;
	}
	.CSR-row {
		height: 125px;
		width: 72%;
		left: 20%;
		top: 38%;
	}
	.CSR-box .CSR-PDF{
		width:16px;
	}
	.CSRBox1 {
    	width: 58px;
    	height: 80px;
	}
	.CSRBox2 {
    	width: 51px;
    	height: 80px;
	}
	.CSRBox3 {
    	width: 52px;
    	height: 80px;
	}
	.CSRBox4{
    	width:146px;
    	
	}
	.CSRBox4 .screen-av {
		width: 108px;
    	height: 64px;
		position: absolute;
		top: 48%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
	}
	.CSRBox4 .screen-av .CSR-AV {
    	width: 16px;
	}
	.CSRBox5{
    	width:55px;
    	height: 80px;
	}
	.CSRBox6{
    	width:58px;
    	height: 80px;
	}
	.CSRBox7{
    	width:58px;
    	height: 80px;
	}
}
@media(max-width:640px){
	.year-glance{
		height: 150px;
		top:60%;
	}
	
	.year-glance .grid.y2001{
		width: 42px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2002{
		width: 38px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2003{
		width: 30px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2004{
		width: 30px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2005{
		width: 30px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2006{
		width: 25px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2007{
		width: 23px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2008{
		width: 25px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2009{
		width: 23px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2010{
		width: 23px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y20012020{
		width: 65px;
		height: 100%;
		position: relative;
	}
	.year-glance .grid.y2011{
		width: 25px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2012{
		width: 25px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2013{
		width: 25px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2014{
		width: 26px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2015{
		width: 27px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2016{
		width: 28px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2017{
		width: 30px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2018{
		width: 30px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2019{
		width: 32px;
		height: 100%;
		position:relative;
	}
	.year-glance .grid.y2020{
		width: 32px;
		height: 100%;
		position:relative;
	}
	
	.TechEdge-stall{
		width: 100%;
    	height: 90px;
    	top: 66%
		
	}
	
	.box1{
		width:25px;
		height:100%;
		display:inline-block;
	
	}
	.box2{
		width:27px;
		height:100%;
		display:inline-block;
	
	}
	.box3{
		width:90px;
		height:100%;
		display:inline-block;
	
	}
	
	.box4{
		width:55px;
		height:100%;
		display:inline-block;
	
	}
	.box5{
		width:50px;
		height:100%;
		display:inline-block;
	
	}
	.box6{
		width:80px;
		height:100%;
		display:inline-block;
	
	}	
	.box7{
		width:53px;
		height:100%;
		display:inline-block;
	
	}
	.box8{
		width:93px;
		height:100%;
		display:inline-block;
	
	}
	.box9{
		width:50px;
		height:100%;
		display:inline-block;
	
	}
	.box10{
		width:25px;
		height:100%;
		display:inline-block;
	
	}
	.box11{
		width:25px;
		height:100%;
		display:inline-block;
	
	}
	.hr-stall {
		background-position: 100% 30%;
	}
	.stall-box1{
		top:0;
		height:100%;
	}
	.stall-box2{
		top:0;
		height:100%;
	}
	.stall-box3{
		height: 140px;
    	top: 43%;
	}
	.hex-grid{
		width:60px;
		height:60px;
		display:inline-block;
	}
	.hex-grid.hex1{
		top: 6%;
    	left: 30%;
	}
	.hex-grid.hex2{
		top: 6%;
    	right: 2%;
	}
	.hex-grid.hex3{
		top: 33%;
		left: 10%;
	}
	.hex-grid.hex4{
		bottom: 20%;
    	left: 30%;
	}
	.hex-grid.hex5{
		top: 7%;
		left: 8%;
	}
	.hex-grid.hex6{
		top: 25%;
	    right: 2%;
	}
	.hex-grid.hex7{
		bottom: 28%;
		left: 35%;
	}
	.hex-grid.hex8{
		top: 1%;
		left: 38%;
	}
	.hex-grid.hex9{
		bottom: 2%;
    	left: 8%;
	}
	.little-stroke{
		width:100%;
	}
	.little-stroke .view-icon span {
    	padding: 3px;
	}
	.little-stroke .view-icon i {
    	font-size: 10px;
    	color: #fff;
	}
	.zone-block {
    	padding: 5px 0;
	}
	.poster{
		width:30%;
		height:155px;
		display:inline-block;
	}
	.poster1{
		position: absolute;
		top: 30%;
		left: 6%;
		width: 18%;
		margin: 0 auto;
	}
	.poster2{
		position: absolute;
		top: 30%;
		right: 6%;
		width: 16%;
		margin: 0 auto;
	}
	.CSR-row {
		height: 90px;
		top: 35%;
	}
	.CSRBox1{
		width:53px;
		height: 53px;
	}
	.CSRBox2{
		width:50px;
		height: 53px;
	}
	.CSRBox3{
		width:53px;
		height: 53px;
	}
	.CSRBox4{
		width:140px;
	}
	.CSRBox5{
		width:50px;
		height: 53px;
	}
	.CSRBox6{
		width:56px;
		height: 53px;
	}
	.CSRBox7{
		width:50px;
		height: 53px;
	}
	.CSR-popup{
		max-width:420px;
	}
}
@media(max-width:603px){
	.poster1{
		height:135px;
	}
	.poster2{
		height:135px;
	}
	.CSR-row {
		height: 90px;
		top: 32%;
	}
	.CSRBox1{
		width:51px;
		height: 53px;
	}
	.CSRBox2{
		width:46px;
		height: 53px;
	}
	.CSRBox3{
		width:50px;
		height: 53px;
	}
	.CSRBox4{
		width:130px;
	}
	.CSRBox5{
		width:50px;
		height: 53px;
	}
	.CSRBox6{
		width:52px;
		height: 53px;
	}
	.CSRBox7{
		width:45px;
		height: 53px;
	}
	.hr-stall {
		background-position: 100% 30%;
	}
	.stall-box1{
		top:0;
		height:100%;
	}
	.stall-box2 {
    	top:0;
		height:100%;
	}
	.stall-box3 {
    	height: 125px;
    	top: 45%;
	}
	.hex-grid {
    	width: 55px;
    	height: 55px;
	}
	
	.hex-grid.hex1{
		top: 5%;
    	left: 31%;
	}
	.hex-grid.hex2{
		top:5%;
		right:2%;
	}
	.hex-grid.hex3{
		top: 33%;
    	left: 11%;
	}
	.hex-grid.hex4{
		bottom: 16%;
    	left: 30%;
	}
	.hex-grid.hex5{
		top: 5%;
    	left: 9%;
	}
	.hex-grid.hex6{
		top: 25%;
    	right: 3%;
	}
	.hex-grid.hex7{
		bottom: 25%;
    	left: 35%;
	}
	.hex-grid.hex8{
		top: 0%;
    	left: 39%;
	}
	.hex-grid.hex9{
		bottom: 0%;
    	left: 9%;
	}
	.little-stroke{
		width:100%;
	}
	.little-stroke .view-icon i {
    	font-size: 11px;
    	color: #fff;
	}
	.little-stroke .view-icon span {
    	padding: 3px;
	}
	.zone-block {
    	padding: 4px 0;
	}
}
@media(max-width:479px){
	.photo-gallery{
		width:100%;
	}
	.count-box h1 {
    	font-size: 18px;
	}

}

@media(max-width:414px){
	.header {
		width: 100%;
		display: inline-block;
	}
	.logo {
    	width: 50px;
	}
	.logo-right {
    	width: 70px;
	}
	.challenge{
		float:right;
		width: 260px;
	}
	
	.content p{
		font-size:16px;
	}
	.timer-box {
   		margin-top: 10%;
    	width: 90%;
	}
	.count-box h1 {
    	font-size: 16px;
	}
	#clockdiv {
    	top: 45%;
		width:100%;
	}
	#clockdiv div > span {
    	padding: 15px 8px;
    	font-size: 26px;
	}
	.smalltext{
		margin:0;
		width:100%;
		font-size:14px;
	}
	
	.footer-time {
    	position: absolute;
		margin:0;
		bottom:0;
	}
	.timer-footer{
		margin:0;
		position:relative;
		bottom:0;
	}
	.timer-footer p{
		font-size: 12px;
	}
	.Fill-form{
		padding: 8px; 
	}
	.login-form {
		width: 95%;
	}
	.form-head h1.blue {
    	font-size: 14px;
		margin: 0;
	}
	.employee-from {
    	width: 70%;
    	margin: 5px auto;
	}
	.employee-from .form-group{
		margin-bottom: 10px;
	}
	.employee-from .form-group input{
		height: 30px;
	}
	.employee-from .btn-login{
		padding: 3px 10px;
	}
	.employee-photo.HR-stall .owl-theme .owl-nav {
		position: absolute;
		width: 100%;
		display: inline-block;
		top: 30%;
		z-index: 2;
		transform: translate(0%,-30%);
		-moz-transform: translate(0%,-30%);
		-webkit-transform: translate(0%,-30%);
	}
	.employee-photo.HR-stall .owl-theme .owl-nav .owl-prev,
	.employee-photo.HR-stall .owl-theme .owl-nav .owl-next{
		padding: 15px 7px !important;
	}
	.footer-time .footer-logo{
		width:120px;
	}
	
}
@media(max-width:412px){
	.timer-box {
    	margin-top: 10%;
    	width: 100%;
	}
	

}
@media(max-width:393px){
	.header {
		width: 100%;
		display: inline-block;
		padding:10px;
	}
	.logo {
    	width: 50px;
	}
	.challenge{
		float:right;
		width: 230px;
	}
	.challenge h1 {
    	font-size: 20px;
	}
}
@media(max-width:375px){
.timer-footer p {
    font-size: 10px;
}
}
@media(max-width:360px){
	.header {
		width: 100%;
		display: inline-block;
		padding:10px;
	}
	.logo {
    	width: 50px;
	}
	.challenge{
		float:right;
		width: 200px;
	}
	.challenge h1 {
    	font-size: 18px;
	}
	.count-box h1 {
    	font-size: 14px;
	}
	.count-box h2 {
    	font-size: 14px;
	}
	#clockdiv div > span {
    	padding: 15px 10px;
    	font-size: 24px;
	}
	.smalltext{
		font-size:13px;
	}
	.footer-time {
    	position: absolute;
    	margin-top: 30%;
    	bottom: 0;
	}
}

@media(max-width:320px){
	.header {
		width: 100%;
		display: inline-block;
		padding:10px;
	}
	.logo {
    	width:40px;
	}
	.challenge{
		float:right;
		width: 160px;
	}
	.challenge h1 {
    	font-size: 15px;
	}
	
	.modal-dialog.HDFC-popup {
   	 	max-width: 95%;
    	margin: 0% auto;
	}
	.footer-time{
		position: absolute;
		bottom: 0;
	}
	
}