/* STANDART */

/* .grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: repeat(3, 200px);

  grid-gap: 20px;

} */



/* .grid {

	display: grid; */

/* 	grid-template-columns: 300px 200px 300px; */

/*   grid-template-columns: 2fr 1fr 100px; */

/*   grid-template-columns: repeat(2, 1fr 2fr); */

/*    grid-template-columns: minmax(150px, 250px) 1fr 1fr;

   grid-template-rows: 100px 200px;

   grid-auto-rows: 100px;



  grid-column-gap: 20px;

  grid-row-gap: 20px;

} */



/* .grid {

	display: grid;

  grid-template-columns: minmax(150px, 250px) 1fr 1fr;

  grid-auto-rows: minmax(100px, auto);

  grid-gap: 20px;

} */



/* .grid {

	display: grid;

  grid-template-columns: minmax(150px, 250px) 1fr 1fr;

  grid-auto-rows: minmax(100px, auto);

  grid-gap: 20px;

  grid-auto-flow: column;

  grid-template-rows: 200px 200px 200px;

} */





/* COOL RESPONSIVE */

.grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  grid-gap: 70px;

}



/* AUTOFILL */

/* .grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));

  grid-gap: 20px;

} */



/* AUTOFIT */

/* .grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));

  grid-gap: 20px;

} */



/*  Some crazy shit*/

/* .grid div:nth-child(1) {

  grid-column-start: 2;

  grid-column-end: 4;

} */



/* .grid div:nth-child(1) {

  grid-column-start: 2;

  grid-column-end: -1;

} */



/* .grid div:nth-child(1) {

  grid-column: 1 / 4;

} */





/* JUSTIFY ALIGN */



/* .grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: repeat(3, 200px);

  grid-gap: 20px;

  justify-items: center;

  align-items: center;

}



.grid div:nth-child(1) {

  grid-column: 1 / 4;

  align-self: end;

  justify-self: end;

} */

.alert>.start-icon {

    margin-right: 0;

    min-width: 20px;

    text-align: center;

}



.alert>.start-icon {

    margin-right: 5px;

}



.greencross

{

  font-size:18px;

      color: #25ff0b;

    text-shadow: none;

}



.alert-simple.alert-success

{

  border: 1px solid rgba(36, 241, 6, 0.46);

    background-color: rgba(7, 149, 66, 0.12156862745098039);

    box-shadow: 0px 0px 2px #259c08;

    color: #0ad406;

  text-shadow: 2px 1px #00040a;

  transition:0.5s;

  cursor:pointer;

}

.alert-success:hover{

  background-color: rgba(7, 149, 66, 0.35);

  transition:0.5s;

}

.alert-simple.alert-info

{

  border: 1px solid rgba(6, 44, 241, 0.46);

    background-color: rgba(7, 73, 149, 0.12156862745098039);

    box-shadow: 0px 0px 2px #0396ff;

    color: #0396ff;

  text-shadow: 2px 1px #00040a;

  transition:0.5s;

  cursor:pointer;

}



.alert-info:hover

{

  background-color: rgba(7, 73, 149, 0.35);

  transition:0.5s;

}



.blue-cross

{

  font-size: 18px;

    color: #0bd2ff;

    text-shadow: none;

}



.alert-simple.alert-warning

{

      border: 1px solid rgba(241, 142, 6, 0.81);

    background-color: rgba(220, 128, 1, 0.16);

    box-shadow: 0px 0px 2px #ffb103;

    color: #ffb103;

    text-shadow: 2px 1px #00040a;

  transition:0.5s;

  cursor:pointer;

}



.alert-warning:hover{

  background-color: rgba(220, 128, 1, 0.33);

  transition:0.5s;

}



.warning

{

      font-size: 18px;

    color: #ffb40b;

    text-shadow: none;

}



.alert-simple.alert-danger

{

  border: 1px solid rgba(241, 6, 6, 0.81);

    background-color: rgba(220, 17, 1, 0.16);

    box-shadow: 0px 0px 2px #ff0303;

    color: #ff0303;

    text-shadow: 2px 1px #00040a;

  transition:0.5s;

  cursor:pointer;

}



.alert-danger:hover

{

     background-color: rgba(220, 17, 1, 0.33);

  transition:0.5s;

}



.danger

{

      font-size: 18px;

    color: #ff0303;

    text-shadow: none;

}



.alert-simple.alert-primary

{

  border: 1px solid rgba(6, 241, 226, 0.81);

    background-color: rgba(1, 204, 220, 0.16);

    box-shadow: 0px 0px 2px #03fff5;

    color: #03d0ff;

    text-shadow: 2px 1px #00040a;

  transition:0.5s;

  cursor:pointer;

}



.alert-primary:hover{

  background-color: rgba(1, 204, 220, 0.33);

   transition:0.5s;

}



.alertprimary

{

      font-size: 18px;

    color: #03d0ff;

    text-shadow: none;

}



.square_box {

    position: absolute;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

    border-top-left-radius: 45px;

    opacity: 0.302;

}



.square_box.box_three {

    background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);

    background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);

    background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);

    opacity: 0.059;

    left: -80px;

    top: -60px;

    width: 500px;

    height: 500px;

    border-radius: 45px;

}



.square_box.box_four {

    background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);

    background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);

    background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);

    opacity: 0.059;

    left: 150px;

    top: -25px;

    width: 550px;

    height: 550px;

    border-radius: 45px;

}



.alert:before {

    content: '';

    position: absolute;

    width: 0;

    height: calc(100% - 44px);

    border-left: 1px solid;

    border-right: 2px solid;

    border-bottom-right-radius: 3px;

    border-top-right-radius: 3px;

    left: 0;

    top: 50%;

    transform: translate(0,-50%);

      height: 20px;

}



.fa-times

{

-webkit-animation: blink-1 2s infinite both;

	        animation: blink-1 2s infinite both;

}





/**

 * ----------------------------------------

 * animation blink-1

 * ----------------------------------------

 */

@-webkit-keyframes blink-1 {

  0%,

  50%,

  100% {

    opacity: 1;

  }

  25%,

  75% {

    opacity: 0;

  }

}

@keyframes blink-1 {

  0%,

  50%,

  100% {

    opacity: 1;

  }

  25%,

  75% {

    opacity: 0;

  }

}
.image-one-by-one {
  width: 640px;
  height: 380px;
  margin: 20px auto;
  color: #FFF;
  position: relative;
  &:hover {
    .one {
      height: 100%;
    }
    .two {
      transition-delay: .3s;
      width: 100%;
    }
    .three {
      transition-delay: .6s;
      height: 100%;
    }
    .four {
      transition-delay: .9s;
      width: 100%;
    }
  }
  span {
    position: absolute;
    background-color: orange;
    transition: .3s;
  }
  .one {
    left: 0;
    top: 0;
    height: 0;
    width: 3px;
  }
  .two {
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
  }
  .three {
    right: 0;
    bottom: 0;
    height: 0;
    width: 3px;
  }
  .four {
    top: 0;
    right: 0;
    width: 0;
    height: 3px;
  }
}
.image-effect {
  width: 640px;
  height: 380px;
  margin: 20px auto;
  color: #FFF;
  position: relative;
  &:hover {
    .one {
      height: 100%;
    }
    .two {
      transition-delay: .3s;
      width: 100%;
    }
    .three {
      transition-delay: .6s;
      height: 100%;
    }
    .four {
      transition-delay: .9s;
      width: 100%;
    }
  }
  span {
    position: absolute;
    background-color: orange;
    transition: .3s;
  }
  .one {
    left: 0;
    top: 0;
    height: 0;
    width: 3px;
  }
  .two {
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
  }
  .three {
    right: 0;
    bottom: 0;
    height: 0;
    width: 3px;
  }
  .four {
    top: 0;
    right: 0;
    width: 0;
    height: 3px;
  }
}