body, html{
	padding: 0px;
	margin: 0px;
	font-family: 'Roboto', open-sans;
}








.mainPageWrap{
	display: block;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}



.logoContainer{
	display: block;
    position: relative;
    width: 90%;
    /* margin-top: 25vh; */
    /* padding-left: 6%; */
    z-index: 100;
    margin: 25vh auto 0;
    /* overflow: hidden; */
}


.logo_dp{
	
	height: 50vh;
    width: 25vw;
    float: left;
    margin-right: 1%;

    background-image: url(../media/img/NewLogo.svg);
    background-size: 92% auto;
    background-position: center;
    background-repeat: no-repeat;
}


.digitalText_dp{
	position: relative;
	width: 31vw;
    display: block;
    height: 50vh;
    float: left;
    line-height: 46vh;
    color: #1fa98a;
    font-weight: 700;
    font-size: 7.5vw;
    overflow: hidden;
}

.peopleText_dp{
	position: relative;
	width: 31vw;
    display: block;
    height: 50vh;
    float: left;
    line-height: 46vh;
    color: #333;
    font-weight: 300;
    font-size: 7.5vw;
    overflow: hidden;
}

.poweredByText_dp{
    position: absolute;
    font-size: 4vw;
    width: 31vw;
    display: block;
    line-height: 4vw;
    top:-5vw;
}


.moreInfo_btnContainer{
	width: 56vw;
    display: block;
    height: 2vw;
    position: relative;
    text-align: center;
    margin-left: 27vw;
}

.moreInfoBtn_Circles{
	display: block;
    overflow: hidden;
    width: 9vw;
    height:9vw;
    margin: 0 auto;
    border-radius: 50%;
    position: relative;
    text-decoration: none;
}

.moreInfo_btn{
    display: block;
    overflow: hidden;
    width: 9vw;
    margin: 0 auto;
    line-height: 9vw;
    /*border: 2px solid #f4f5f6;*/
    border-radius: 50%;
    background: #1fa98a;
    color: #f4f5f6;
    cursor: pointer;
    font-size: 1.4vw;
    position: relative;
    opacity: 0;
    text-decoration: none;

}

.moreInfo_btn a{
	text-decoration: none;
	color: #333;
}


.moreInfoBtn_Circles svg{
	height: 9vw;
	width:9vw;
	position: absolute;
	top:0;
	left: 0;
	cursor: pointer;
}

.moreInfoBtn_CircleOToComplete{
    stroke-width: 5;
    stroke-dasharray: 0, 1000;
    fill: none;
    stroke: #6d6f71;
    animation: OToCOmplete 2s linear alternate 1;
  }

  .moreinfo_CirlceComplete{
  	stroke-width: 3;
    stroke-dasharray: 1000, 1000;
    fill: none;
    stroke: #f4f5f6;
  }

  

  .moreinfo_CirlceMoving{
  	stroke-width: 3;
    stroke-dasharray: 120, 20;
    fill: none;
    stroke: #1fa98a;
    
  }

  .moreInfo_CirlceMovingSVG{
  	animation: CircleMoving 10s linear infinite;
  }



 @keyframes OToCOmplete {
  from {
    stroke-dasharray: 0, 1000;
  }
  to {
    stroke-dasharray: 1000, 1000;
  }
}


@keyframes CircleMoving { 
    100% { 
      transform: rotateZ(360deg); 
    }
  }



/* ############### Shapes  ######################### */
.mainGreyShapeContainer{

    width: 60vw;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
}



.mainGreyShape1{
	width: 60vw;
    /* background: #333; */
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    border-left: 60vw solid #333;
    border-top: 0vw solid #1fa98a;
}

.mainGreyShape2{}




.topGreenContainer{}
.topGreenShape1{}
.topGreenShape2{}
.topGreyShape1{}



.bottomGreenContainer{}
.bottomGreenShape1{}
.bottomGreenShape2{}
.bottomGreyShape1{}




.dp_infoBlock{
	display: block;
	position: absolute;
	top: -50vw;
	right:0px;
	width:40vw;
	z-index: 1000;
}

.dp_infoBlockItem{
	text-align: center;
    margin-top: 2vh;
    font-size: 2vw;
}

.dp_infoBlockItem a{
	text-decoration: none;
	color:#FFF;
}