/* CUTOUT CORNERS ----------------------------------------------- */

/* 300px width corner */
.coc-tl-300 {
  clip-path: polygon(300px 0, 100% 0, 100% 100%, 0 100%, 0 300px);
}
.coc-tr-300 {
  clip-path: polygon(0 0, calc(100% - 300px) 0, 100% 300px, 100% 100%, 0 100%);
}
.coc-br-300 {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 300px), calc(100% - 300px) 100%, 0 100%);
}
.coc-bl-300 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 300px 100%, 0 calc(100% - 300px));
}

/* 175px wide corner */
.coc-tl-175 {
  clip-path: polygon(175px 0, 100% 0, 100% 100%, 0 100%, 0 175px);
}
.coc-tr-175 {
  clip-path: polygon(0 0, calc(100% - 175px) 0, 100% 175px, 100% 100%, 0 100%);
}
.coc-br-175 {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 175px), calc(100% - 175px) 100%, 0 100%);
}
.coc-bl-175 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 175px 100%, 0 calc(100% - 175px));
}

/* 150px wide corner */
.coc-tl-150 {
  clip-path: polygon(150px 0, 100% 0, 100% 100%, 0 100%, 0 150px);
}
.coc-tr-150 {
  clip-path: polygon(0 0, calc(100% - 150px) 0, 100% 150px, 100% 100%, 0 100%);
}
.coc-br-150 {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 150px), calc(100% - 150px) 100%, 0 100%);
}
.coc-bl-150 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 150px 100%, 0 calc(100% - 150px));
}

/* 100px wide corner */
.coc-tl-100 {
  clip-path: polygon(100px 0, 100% 0, 100% 100%, 0 100%, 0 100px);
}
.coc-tr-100 {
  clip-path: polygon(0 0, calc(100% - 100px) 0, 100% 100px, 100% 100%, 0 100%);
}
.coc-br-100 {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), calc(100% - 100px) 100%, 0 100%);
}
.coc-bl-100 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 100px 100%, 0 calc(100% - 100px));
}

/* 80px wide corner */
.coc-tl-80 {
  clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%, 0 80px);
}
.coc-tr-80 {
  clip-path: polygon(0 0, calc(100% - 80px) 0, 100% 80px, 100% 100%, 0 100%);
}
.coc-br-80 {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), calc(100% - 80px) 100%, 0 100%);
}
.coc-bl-80 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 80px 100%, 0 calc(100% - 80px));
}

/* 25px wide corner */
.coc-tl-25 {
  clip-path: polygon(25px 0, 100% 0, 100% 100%, 0 100%, 0 25px);
}
.coc-tr-25 {
  clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%);
}
.coc-br-25 {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%);
}
.coc-bl-25 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 25px 100%, 0 calc(100% - 25px));
}

/* 17px wide corner */
.coc-tl-17 {
  clip-path: polygon(17px 0, 100% 0, 100% 100%, 0 100%, 0 17px);
}
.coc-tr-17 {
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%);
}
.coc-br-17 {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%);
}
.coc-bl-17 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 17px 100%, 0 calc(100% - 17px));
}


@media screen and (max-width: 1800px) { /* margins @ 280px */

  /* 300px width corner */
  .coc-tl-300 {
    clip-path: polygon(280px 0, 100% 0, 100% 100%, 0 100%, 0 280px);
  }
  .coc-tr-300 {
    clip-path: polygon(0 0, calc(100% - 280px) 0, 100% 280px, 100% 100%, 0 100%);
  }
  .coc-br-300 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 280px), calc(100% - 280px) 100%, 0 100%);
  }
  .coc-bl-300 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 280px 100%, 0 calc(100% - 280px));
  }

  /* 175px width corner */
  .coc-tl-175 {
    clip-path: polygon(165px 0, 100% 0, 100% 100%, 0 100%, 0 165px);
  }
  .coc-tr-175 {
    clip-path: polygon(0 0, calc(100% - 165px) 0, 100% 165px, 100% 100%, 0 100%);
  }
  .coc-br-175 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 165px), calc(100% - 165px) 100%, 0 100%);
  }
  .coc-bl-175 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 165px 100%, 0 calc(100% - 165px));
  }

}

@media screen and (max-width: 1600px) { /* margins @ 135px */

  /* 300px width corner */
  .coc-tl-300 {
    clip-path: polygon(250px 0, 100% 0, 100% 100%, 0 100%, 0 250px);
  }
  .coc-tr-300 {
    clip-path: polygon(0 0, calc(100% - 250px) 0, 100% 250px, 100% 100%, 0 100%);
  }
  .coc-br-300 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 250px), calc(100% - 250px) 100%, 0 100%);
  }
  .coc-bl-300 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 250px 100%, 0 calc(100% - 250px));
  }

  /* 175px width corner */
  .coc-tl-175 {
    clip-path: polygon(145px 0, 100% 0, 100% 100%, 0 100%, 0 145px);
  }
  .coc-tr-175 {
    clip-path: polygon(0 0, calc(100% - 145px) 0, 100% 145px, 100% 100%, 0 100%);
  }
  .coc-br-175 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 145px), calc(100% - 145px) 100%, 0 100%);
  }
  .coc-bl-175 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 145px 100%, 0 calc(100% - 145px));
  }

}

@media screen and (max-width: 1400px) { /* margins @ 50px */

  /* 300px width corner */
  .coc-tl-300 {
    clip-path: polygon(220px 0, 100% 0, 100% 100%, 0 100%, 0 220px);
  }
  .coc-tr-300 {
    clip-path: polygon(0 0, calc(100% - 220px) 0, 100% 220px, 100% 100%, 0 100%);
  }
  .coc-br-300 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 220px), calc(100% - 220px) 100%, 0 100%);
  }
  .coc-bl-300 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 220px 100%, 0 calc(100% - 220px));
  }

  /* 175px width corner */
  .coc-tl-175 {
    clip-path: polygon(125px 0, 100% 0, 100% 100%, 0 100%, 0 125px);
  }
  .coc-tr-175 {
    clip-path: polygon(0 0, calc(100% - 125px) 0, 100% 125px, 100% 100%, 0 100%);
  }
  .coc-br-175 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 125px), calc(100% - 125px) 100%, 0 100%);
  }
  .coc-bl-175 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 125px 100%, 0 calc(100% - 125px));
  }

  /* 80px wide corner */
  .coc-tl-80 {
    clip-path: polygon(50px 0, 100% 0, 100% 100%, 0 100%, 0 50px);
  }
  .coc-tr-80 {
    clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%);
  }
  .coc-br-80 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%);
  }
  .coc-bl-80 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50px 100%, 0 calc(100% - 50px));
  }

}

@media screen and (max-width: 1200px) {

  /* 300px width corner */
  .coc-tl-300 {
    clip-path: polygon(185px 0, 100% 0, 100% 100%, 0 100%, 0 185px);
  }
  .coc-tr-300 {
    clip-path: polygon(0 0, calc(100% - 185px) 0, 100% 185px, 100% 100%, 0 100%);
  }
  .coc-br-300 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 185px), calc(100% - 185px) 100%, 0 100%);
  }
  .coc-bl-300 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 185px 100%, 0 calc(100% - 185px));
  }

}

@media screen and (max-width: 900px) { /* margins @ 30px */

  /* 300px width corner */
  .coc-tl-300 {
    clip-path: polygon(140px 0, 100% 0, 100% 100%, 0 100%, 0 140px);
  }
  .coc-tr-300 {
    clip-path: polygon(0 0, calc(100% - 140px) 0, 100% 140px, 100% 100%, 0 100%);
  }
  .coc-br-300 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 140px), calc(100% - 140px) 100%, 0 100%);
  }
  .coc-bl-300 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 140px 100%, 0 calc(100% - 140px));
  }

  /* 175px width corner */
  .coc-tl-175 {
    clip-path: polygon(85px 0, 100% 0, 100% 100%, 0 100%, 0 85px);
  }
  .coc-tr-175 {
    clip-path: polygon(0 0, calc(100% - 85px) 0, 100% 85px, 100% 100%, 0 100%);
  }
  .coc-br-175 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 85px), calc(100% - 85px) 100%, 0 100%);
  }
  .coc-bl-175 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 85px 100%, 0 calc(100% - 85px));
  }

  /* 100px wide corner */
  .coc-tl-100 {
    clip-path: polygon(50px 0, 100% 0, 100% 100%, 0 100%, 0 50px);
  }
  .coc-tr-100 {
    clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%);
  }
  .coc-br-100 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%);
  }
  .coc-bl-100 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50px 100%, 0 calc(100% - 50px));
  }

}

@media screen and (max-width: 600px) {

  /* 300px width corner */
  .coc-tl-300 {
    clip-path: polygon(95px 0, 100% 0, 100% 100%, 0 100%, 0 95px);
  }
  .coc-tr-300 {
    clip-path: polygon(0 0, calc(100% - 95px) 0, 100% 95px, 100% 100%, 0 100%);
  }
  .coc-br-300 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 95px), calc(100% - 95px) 100%, 0 100%);
  }
  .coc-bl-300 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 95px 100%, 0 calc(100% - 95px));
  }

  /* 175px width corner */
  .coc-tl-175 {
    clip-path: polygon(55px 0, 100% 0, 100% 100%, 0 100%, 0 55px);
  }
  .coc-tr-175 {
    clip-path: polygon(0 0, calc(100% - 55px) 0, 100% 55px, 100% 100%, 0 100%);
  }
  .coc-br-175 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 55px), calc(100% - 55px) 100%, 0 100%);
  }
  .coc-bl-175 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 55px 100%, 0 calc(100% - 55px));
  }

  /* 150px wide corner */
  .coc-tl-150 {
    clip-path: polygon(50px 0, 100% 0, 100% 100%, 0 100%, 0 50px);
  }
  .coc-tr-150 {
    clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%);
  }
  .coc-br-150 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%);
  }
  .coc-bl-150 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50px 100%, 0 calc(100% - 50px));
  }

  /* 25px wide corner */
  .coc-tl-25 {
    clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
  }
  .coc-tr-25 {
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
  }
  .coc-br-25 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
  }
  .coc-bl-25 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 15px 100%, 0 calc(100% - 15px));
  }

  /* 17px wide corner */
  .coc-tl-17 {
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  }
  .coc-tr-17 {
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  }
  .coc-br-17 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  }
  .coc-bl-17 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  }

}

@media screen and (max-width: 500px) { /* margins @ 20px */

  /* 300px width corner */
  .coc-tl-300 {
    clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%, 0 80px);
  }
  .coc-tr-300 {
    clip-path: polygon(0 0, calc(100% - 80px) 0, 100% 80px, 100% 100%, 0 100%);
  }
  .coc-br-300 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), calc(100% - 80px) 100%, 0 100%);
  }
  .coc-bl-300 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 80px 100%, 0 calc(100% - 80px));
  }

  /* 175px width corner */
  .coc-tl-175 {
    clip-path: polygon(45px 0, 100% 0, 100% 100%, 0 100%, 0 45px);
  }
  .coc-tr-175 {
    clip-path: polygon(0 0, calc(100% - 45px) 0, 100% 45px, 100% 100%, 0 100%);
  }
  .coc-br-175 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 45px), calc(100% - 45px) 100%, 0 100%);
  }
  .coc-bl-175 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 45px 100%, 0 calc(100% - 45px));
  }

  /* 150px wide corner */
  .coc-tl-150 {
    clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px);
  }
  .coc-tr-150 {
    clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
  }
  .coc-br-150 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
  }
  .coc-bl-150 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 540px0px));
  }

  /* 80px wide corner */
  .coc-tl-80 {
    clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px);
  }
  .coc-tr-80 {
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
  }
  .coc-br-80 {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
  }
  .coc-bl-80 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px));
  }

}