.head-banner{
    height:300px;
    clip-path: polygon(100% 0, 100% 75%, 70% 99%, 0 55%, 0 0);
}



@media only screen and (min-width: 300px) {
    /* For mobile phones: */
  .head-banner-bottom{
    clip-path: polygon(100% 100%, 100% 40%, 70% 75%, 0% 0%, 0 100%);
    margin-top:-50%;
 }
}

@media only screen and (min-width: 400px) {
    /* For mobile phones: */
  .head-banner-bottom{
    clip-path: polygon(100% 100%, 100% 40%, 70% 75%, 0% 0%, 0 100%);
    margin-top:-40%;
 }
}

@media only screen and (min-width: 500px) {
    /* For mobile phones: */
  .head-banner-bottom{
    clip-path: polygon(100% 100%, 100% 40%, 70% 75%, 0% 0%, 0 100%);
    margin-top:-35%;
 }
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .head-banner-bottom{
    position:absolute;
    clip-path: polygon(100% 100%, 100% 40%, 70% 75%, 0% 0%, 0 100%);
    margin-top:-42%;
 }

}

@media only screen and (min-width: 700px) {
  /* For tablets: */
  .head-banner-bottom{
     /*width:100%;*/
    position:absolute;
    clip-path:polygon(100% 100%, 100% 40%, 70% 75%, 0% 0%, 0 100%);
    margin-top:-35%;
 }

}

@media only screen and (min-width: 800px) {
  /* For desktop: */
   .head-banner-bottom{
      /*width:100%;*/
    position:relative;
    clip-path: polygon(100% 100%, 100% 40%, 70% 75%, 0% 0%, 0 100%);
    margin-top:-31%;
 }
}

@media only screen and (min-width: 900px) {
  /* For desktop: */
   .head-banner-bottom{
    /*width:100%;*/
    position:relative;
    clip-path: polygon(100% 100%, 100% 40%, 70% 75%, 0% 0%, 0 100%);
    margin-top:-26%;
 }
}

@media only screen and (min-width: 1000px) {
  /* For desktop: */
   .head-banner-bottom{
     position:relative;
    clip-path: polygon(100% 100%, 100% 40%, 70% 75%, 0% 0%, 0 100%);
    margin-top:-20%;
 }
}

@media only screen and (min-width: 1200px) {
  /* For desktop: */
   .head-banner-bottom{
       position:relative;
    clip-path:polygon(100% 100%, 100% 40%, 70% 75%, 0% 0%, 0 100%);
   margin-top:-19%;
 }
}

@media only screen and (min-width: 1400px) {
  /* For desktop: */
   .head-banner-bottom{
   position:relative;
    clip-path: polygon(100% 120%, 100% 30%, 70% 70%, 0% 0%, 0% 100%);
     margin-top:-15.5%;
 }
}



.icon-box{
    backround:blue;
    width: 20px;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #555;
	border-bottom: 25px solid transparent;
}


.arrow-left{
    background-position:left;
}
}