@media (min-width: 999px) {
.first{
height:500px;
width:100vw;
position:relative;
display:;
z-index:0;
border:;
float:;
margin-top:850px;
padding-top:;
}
.second{
height:500px;
width:100vw;
position:relative;
display:;
z-index:0;
border:;
float:;
margin-top:250px;
padding-top:;
}
.third{
width:100% ; 
height:500px;
border:;

position:relative;
display:flex;
flex-direction:row;
z-index:0;
margin-top:120px;
padding-top:;
}
.fourth{
width:100% ; 
height:600px;
border:;

position:relative;
display:;
z-index:0;
margin-top:50px;
}
/*DOTTED IMAGE*/
.us{
 border:;
  padding: ;
  margin-top:;
  width:50%;
  height:500px;
  z-index:5;
  display:inline-block;
  position:absolute;
  left:0px;
}
.us h1{
font-size:30px;
}
.product{
border:;
  padding: ;
  margin-top:;
  width:50%;
  height:500px;
  z-index:5;
  display:inline-block;
  position:absolute;
 right:10px;
}

.choose {
  padding: 7rem 0;
  margin-top:;
  width:50%;
  height:500px;
  z-index:-1;
  display:inline-block;
  position:absolute;
  border:;
  right:50px;
}
.choosebox {
   width: ;
   margin-left:400px;
  height:;
   z-index:5;
   right:0px;
   display:inline-block;
  position:absolute;
  
   }
   .img-fluid{
     max-width:600px;
     height: auto;
      animation: turnrleft 5s linear infinite;
}
.gridsection {
  padding: 5rem 0;
  
  margin-top:;
  position:absolute;
  border:;
  width:50%;
  height:500px;
  left:2px;
  z-index:-1;
}
.containergrid{
width:100%;
height:500px;
position:absolute;
overflow:;
margin-left:;
display:inline-block;
left:;
border:;
left:2px;
margin-top:;
z-index:-1;
}

.choose .dot::before{
  position: absolute;
  content: "";
  width: 355px;
  height: 317px;
  background-image: url("../img/dots-yellow.svg");
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transform: translate(-40%, -40%);
  -ms-transform: translate(-40%, -40%);
  transform: translate(-40%, -40%);
  z-index: -1;
}


  .choose .dot img{
    border-radius: 20px;
}


img, svg {
  vertical-align: middle;
}
.choose .dot {
  position: relative;
  animation: turnleft 5s linear infinite;
}
.choose .dot img {
  border-radius: 20px;
}

*, ::after, ::before {
  box-sizing: border-box;
}

.justify-content-between {
  justify-content: space-between !important;
}


@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
  }

 @keyframes turnleft {
 0%{
    transform: rotate(0deg);
   }
100%{
    transform: rotate(6deg);
   }
}

}








/* GRID IMAGE---------------------------------------------------------------------------------   */
@media (min-width: 999px) {


.gridsection .imggrid {
  display: -ms-grid;
  display: grid;
 /* -ms-grid-columns: (1fr)[27];
  grid-template-columns: repeat(27, 1fr);*/
  position: relative;
  z-index:-1;
}
*, ::after, ::before {
  box-sizing: border-box;
}
.gridsection .imggrid .grid {
  position: relative;
  z-index:-1;
}
.gridsection .imggrid .grid img {
  border-radius: 20px;
  max-width: 100%;
  z-index:-1;
  position:relative;
}
.gridsection .imggrid .grid.grid-1 {
  -ms-grid-column: 1;
  -ms-grid-column-span: 20;
  grid-column: 7 / span 20;
  -ms-grid-row: 3;
  -ms-grid-row-span: 17;
  grid-row: 1/ span 8;
  animation: leftslide 10s linear 2s infinite alternate;
  z-index:-1;
}

@keyframes leftslide {
  
  0%   {leftslide; right:0px; top:0px;}
  25%  {leftslide; right:200px; top:0px;}
 50%  {leftslide; right:100px; top:0px;}
  100% {leftslide; right:0px; top:0px;}
}
.gridsection .imggrid .grid.grid-2 {
  -ms-grid-column: 19;
  -ms-grid-column-span: 27;
  grid-column: 7 / span 15;
  -ms-grid-row: 1;
  -ms-grid-row-span: 5;
  grid-row: 1 / span 5;
  padding-left: 10px;
}
.gridsection .imggrid .grid.grid-3 {
  -ms-grid-column: 15;
  -ms-grid-column-span: 15;
  grid-column: 1 / span 15;
  -ms-grid-row: 6;
  -ms-grid-row-span: 17;
  grid-row: 5 / span 8;
  padding-top: ;
   animation: rightslide 10s linear 2s infinite alternate;

}
 @keyframes rightslide {
  
  0%   {rightslide; left:0px; top:0px;}
  25%  {rightslide; left:200px; top:0px;}
 50%  {rightslide; left:100px; top:0px;}
  100% {rightslide; left:0px; top:0px;}
}


.justify-content-between {
  justify-content: space-between !important;
}
.gridbox{
  
    flex: 0 0 auto;
    width: 48.33333333%;
  }
 
.mb-lg-0 {
    margin-bottom: 0 !important;
  }
}

/*0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000*/
 
@media (max-width: 768px) {
  .containergrid {
 width:250px;
height:;
position:;
overflow:;
margin-left:;
position:;
  }
 .gridbox {
  flex: 0 0 auto;
    width: 68.33333333%;
  } 
  
  .gridsection .imggrid {
  display: -ms-grid;
  display: grid;
 /* -ms-grid-columns: (1fr)[27];
  grid-template-columns: repeat(27, 1fr);*/
  position: relative;
  z-index:-1;
}
*, ::after, ::before {
  box-sizing: border-box;
}
.gridsection .imggrid .grid {
  position: relative;
  z-index:-1;
}
.gridsection .imggrid .grid img {
  border-radius: 20px;
  max-width: 100%;
  z-index:-1;
  position:relative;
}
.gridsection .imggrid .grid.grid-1 {
  -ms-grid-column: 1;
  -ms-grid-column-span: 20;
  grid-column: 7 / span 20;
  -ms-grid-row: 3;
  -ms-grid-row-span: 17;
  grid-row: 1/ span 8;
  animation: leftslide 10s linear 2s infinite alternate;
  z-index:-1;
}

@keyframes leftslide {
  
  0%   {leftslide; right:0px; top:0px;}
  25%  {leftslide; right:200px; top:0px;}
 50%  {leftslide; right:100px; top:0px;}
  100% {leftslide; right:0px; top:0px;}
}
.gridsection .imggrid .grid.grid-2 {
  -ms-grid-column: 19;
  -ms-grid-column-span: 27;
  grid-column: 7 / span 15;
  -ms-grid-row: 1;
  -ms-grid-row-span: 5;
  grid-row: 1 / span 5;
  padding-left: 10px;
}
.gridsection .imggrid .grid.grid-3 {
  -ms-grid-column: 15;
  -ms-grid-column-span: 15;
  grid-column: 1 / span 15;
  -ms-grid-row: 6;
  -ms-grid-row-span: 17;
  grid-row: 5 / span 8;
  padding-top: ;
   animation: rightslide 10s linear 2s infinite alternate;

}
 @keyframes rightslide {
  
  0%   {rightslide; left:0px; top:0px;}
  25%  {rightslide; left:200px; top:0px;}
 50%  {rightslide; left:100px; top:0px;}
  100% {rightslide; left:0px; top:0px;}
}


.justify-content-between {
  justify-content: space-between !important;
}
.gridbox{
  
    flex: 0 0 auto;
    width: 48.33333333%;
  }
 
.mb-lg-0 {
    margin-bottom: 0 !important;
  }
  
  
  .first{
height:900px;
width:100vw;
position:relative;
display:;
z-index:0;
border:;
float:;
margin-top:550px;
margin-bottom:250px;
}
.second{
height:800px;
width:100vw;
position:relative;
display:;
z-index:0;
border:;
float:;
margin-top:250px;
margin-bottom:250px;
}
.third{
width:100% ; 
height:600px;
border:;

position:relative;
display:flex;
flex-direction:column;
z-index:0;
margin-top:120px;
}
.fourth{
width:100% ; 
height:;
border:;

position:relative;
display:;
z-index:0;
margin-top:0px;
}
/*DOTTED IMAGE*/
.us{
 border:;
  padding: ;
  margin-top:;
  width:70%;
  height:800px;
  z-index:5;
  display:inline-block;
  position:absolute;
  left:0px;
}
.us h1{
font-size:25px;
}
.product{
border:;
  padding: ;
  margin-top:;
  width:100%;
  height:500px;
  z-index:5;
  display:inline-block;
  position:absolute;
 right:;
}

.choose {
  padding: 15rem 0;
  margin-top:;
  width:50%;
  height:500px;
  z-index:-1;
  display:inline-block;
  position:absolute;
  border:;
  right:40px;
}
.choosebox {
   width: ;
   margin-left:400px;
  height:;
   z-index:5;
   right:-30px;
   display:flex;
  position:absolute;
  
   }

.img-fluid{
     max-width:170px;
      height: auto;
}
 .choose .dot img{
    border-radius: 15px;
}
.choose .dot::before{
  position: absolute;
  content: "";
  width: 120px;
  height: 137px;
  background-image: url("../img/dots-yellow.svg");
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transform: translate(-40%, -40%);
  -ms-transform: translate(-40%, -40%);
  transform: translate(-40%, -40%);
  z-index: -1;
   
  }
.container {
   
   width: 100px;
   margin-left:190px ;
  height:150px;
   z-index:5;
  }
  
  }