/*Custom Added CSS*/
.medsecheader{
    margin-top: 60px
}
.higsecheader{
    margin-top: 70px
}
.mt-50percent{
    margin-top: 50%;
}
.in-pyramid-headings{
/*
    background-color:   white;
    background-blend-mode: color-burn;
    opacity: 0.90
*/
	font-weight: normal;
	position: relative;
	text-shadow: 0 -1px rgba(0,0,0,0.6);
	font-size: 12px;
	
	background: #355681;
	background: rgba(53,86,129, 0.8);
	border: 1px solid #fff;
	padding: 5px 15px;
	color: white;
    width:50% !important;
    margin: 0 auto !important;
    
	
	box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
	font-family: 'Muli', sans-serif;
    text-transform: uppercase;
}


.ccdLogo {
    background: url("https://crystalcleardesigns.co.uk/img/CCDlogo.svg") no-repeat center / 100%;
    height:100px;
    width:150px;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .ccdLogo:before {
    content: "Click to view more pens";
    color:transparent;
    font-size:14px;
    position: absolute;
    top:-2px;
    left:5px;
    transition:0.4s;
  }
  .ccdLogo:hover:before {
  color:#2B7B9B;
    transform: translateY(-10px);
  }
  
  
/*
  .wrapper {
    margin-left: auto;
    margin-right: auto;
  }
*/
  .pyramid {
    float: left;
    /* shape-outside:polygon(410px 0px, 130px 405px, 558px 405px); */
    shape-outside: polygon(364px 0px, 5px 434px, 726px 435px);
    /* padding-right:60px;
    width: 500px;
    height:500px; */
  }
  .zone {
    padding:40px 0;
   margin: 0 auto;
    text-align:center;
    color: black;
    background-blend-mode:darken;
      transition: 0.5s;
   
  }
  .zone:nth-child(1){
     /* background:rgba(202,197,95,0.7) url("https://pixabay.com/static/uploads/photo/2016/01/05/13/34/laugenbrotchen-1122509_960_720.jpg") center / cover; */
     background:#FF8585 url("../img/Products/max_security_v2.png") center / contain;
     background-repeat: no-repeat;
    /* width: 25%; */
    /* //clip-path:url("#part1"); */
    clip-path:polygon(50% 0%,100% 100%, 0% 100%);
    -webkit-clip-path:polygon(50% 0%,100% 100%, 0% 100%);
    width: 25vh;
    height: 15vh;
      -webkit-animation: bounce-in-top 2.1s both;
	        animation: bounce-in-top 2.1s both;
     
  }
  .zone:nth-child(1):hover {
      clip-path:polygon(-0.26% 0.00%, 100.26% 0px, 100% 100%, 0% 100%);
      width: 100%;
      height: 100%;
      text-align: left;
      
    
  }
.zone-bk{
    background: none !important;
}
  .zone:nth-child(2){ 
    /* background: rgba(202,197,95,0.7) url("https://pixabay.com/static/uploads/photo/2016/01/27/14/22/orange-1164504_960_720.jpg") center / cover; */
    background: #fae7da url("../img/Products/high_security_v2.png") center / contain;
    background-repeat: no-repeat;
    /* width: 50%; */
    clip-path:url("#part2");
    clip-path:polygon(25% 0%,75% 0, 100% 100%,0% 100%);
    -webkit-clip-path:polygon(25% 0%,75% 0, 100% 100%,0% 100%);
    width: 50vh;
    height: 15vh;
      
      -webkit-animation: bounce-in-top 1.5s both;
	        animation: bounce-in-top 1.5s both;
      
  }

  .zone:nth-child(2):hover{
    clip-path:polygon(-0.26% 0.00%, 100.26% 0px, 100% 100%, 0% 100%);
    width: 100%;
      height: 100%;
      text-align: left;
  }

  .zone:nth-child(3){
    /* width: 75%; */
    /* background:rgba(202,197,95,0.7) url("https://pixabay.com/static/uploads/photo/2015/11/21/18/07/apple-juice-1055331_960_720.jpg") center /cover; */
    background:#dafae7 url("../img/Products/medium_security_v2.png") center / contain;
    background-repeat: no-repeat;
    clip-path:url("#part3");
    clip-path:polygon(16.5% 0, 83% 0, 100% 100%,0% 100%);
    -webkit-clip-path:polygon(16.5% 0, 83% 0, 100% 100%,0% 100%);
    width: 75vh;
    height: 15vh;
    margin-left: 2px;
      
      -webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
      
  }
/*
  .zone:nth-child(4){
    background:rgba(202,197,95,0.7) url("https://pixabay.com/static/uploads/photo/2016/01/17/04/29/rain-drops-1144448_960_720.jpg") center / cover;
    width: 100%;
    clip-path:url("#part4");
    clip-path:polygon(12.5% 0, 0%,87.5% 0, 100% 100%,0% 100%);
    -webkit-clip-path:polygon(12.5% 0,87.5% 0, 100% 100%,0% 100%);
  }
*/
  /* .zone:hover {
    background-color: rgba(255,255,255,0.3);
    color: white;
  } */
  


/*Animations*/

.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-6-1 14:48:41
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}