/*BEGIN General Classes for demo page*/
.demo_wrapper
{
  display: flex;
  width: 100%;
  height: 4em;
  background: rgba(250,250,250, 0.05);
  justify-content: space-around;
  align-items: center;
}
/*END General Classes for demo page*/
/*BEGIN normal close button Classes*/
.containerphoto
{
  position: sticky;
  width: 2em;
  height: 2em;
  cursor: pointer;
  margin-top: -71px;
  left: 49%;
}
.containerphoto:before
{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 0;
  width: 0;
  border: 1em solid #e80415;
  border-radius: 6em;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.containerphotoSend
{
  position: sticky;
  width: 2em;
  height: 2em;
  cursor: pointer;
  margin-top: -71px;
  left: 49%;
}
.containerphotoSend:before
{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 0;
  width: 0;
  border: 1em solid #e80415;
  border-radius: 6em;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  display:none;
}
.close_icon
{
  transition: all 0.075s ease-in-out;
  position: absolute;
  width: 3em;
  height: 3em;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 0.2em solid;
  border-color: rgba(250,250,250,0.8);
  border-radius: 6em;
  /*background: rgba(255,255,255,0.8);*/
}
.close_icon:after
{
  transition: all 0.075s ease-in-out;
  font: 1em Helvetica, arial;
  font-size: 1em;
  width: 100%;
  height: 100%;
  /*content:"x";*/
  color: rgba(250,250,250,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(0,-5%) scale(1.25,1);
}
/*END normal close button Classes*/
/*BEGIN First Close button Zoom and Shrink animations*/

.containerphoto.zoom_shrink:hover .close_icon.zoom_shrink
{
  font-size: 1.2em;
}

.containerphoto.zoom_shrink:active:before
{
  border-color: rgba(200,100,100,0.8);
}
.containerphoto.zoom_shrink:active .close_icon.zoom_shrink
{
  font-size: 1.2em;
  border-color: rgba(50,50,50,0.8);
}
.containerphoto.zoom_shrink:active .close_icon.zoom_shrink:after
{
  color: rgba(50,50,50,0.8);
}

/*END First Close button Zoom and Shrink animations*/
/*BEGIN Second Close button Inverted Zoom animations*/
.containerphoto.zoom_invert:hover:before
{
  font-size: 1.4em;
  border-color: #e80415;
}
.containerphoto.zoom_invert:hover .close_icon.zoom_invert
{
  border-color: rgba(200,200,200,1);
}
.containerphoto.zoom_invert:hover .close_icon.zoom_invert:after
{
  color: rgba(100,100,100,1);
}

.containerphoto.zoom_invert:active:before
{
  font-size: 1.2em;
  border-color: rgba(200,100,100,0.8);
}
.containerphoto.zoom_invert:active .close_icon.zoom_invert
{
  transition: all 0.05s ease-in-out;
  font-size: 1.2em;
  border-color: rgba(50,50,50,0.8);
}
.containerphoto.zoom_invert:active .close_icon.zoom_invert:after
{
  transition: all 0.05s ease-in-out;
  font-size: 1.2em;
  color: rgba(50,50,50,0.8);
}

.containerphotoSend.zoom_invert:hover:before
{
  font-size: 1.4em;
  border-color: #e80415;
}
.containerphotoSend.zoom_invert:hover .close_icon.zoom_invert
{
  border-color: rgba(200,200,200,1);
}
.containerphotoSend.zoom_invert:hover .close_icon.zoom_invert:after
{
  color: rgba(100,100,100,1);
}

.containerphotoSend.zoom_invert:active:before
{
  font-size: 1.2em;
  border-color: rgba(200,100,100,0.8);
}
.containerphotoSend.zoom_invert:active .close_icon.zoom_invert
{
  transition: all 0.05s ease-in-out;
  font-size: 1.2em;
  border-color: rgba(50,50,50,0.8);
}
.containerphotoSend.zoom_invert:active .close_icon.zoom_invert:after
{
  transition: all 0.05s ease-in-out;
  font-size: 1.2em;
  color: rgba(50,50,50,0.8);
}
/*END Second Close button Inverted Zoom animations*/
/*BEGIN Third Close button Spin animations*/
.containerphoto.spin:before
{
  animation: containerphoto_spin_back 0.2s ease-in-out forwards;
}
.close_icon.spin
{
  animation: icon_spin_back 0.2s ease-in-out forwards;
}

.containerphoto.spin:hover:before
{
  animation: containerphoto_spin 0.2s ease-in-out forwards;
}
.containerphoto.spin:hover .close_icon.spin
{
  animation: icon_spin 0.2s ease-in-out forwards;
}

.containerphoto.spin:active:before
{
  animation: containerphoto_spin_double 0.2s ease-in-out forwards;
}
.containerphoto.spin:active .close_icon.spin
{
  animation: icon_spin_double 0.2s ease-in-out forwards;
  border-color: rgba(50,50,50,0.8);
}
.containerphoto.spin:active .close_icon.spin:after
{
  color: rgba(50,50,50,0.8);
}
@keyframes containerphoto_spin
{
  0%{border-color: rgba(100,100,100,0.8);}
  50%{border-left-width: 0;
  border-right-width:  0;
  border-color: rgba(100,100,100,0.8);}
  100%{border-color: rgba(200,200,200,0.6);}
}
@keyframes containerphoto_spin_back
{
  0%{border-color: rgba(200,200,200,0.6);}
  50%{border-left-width: 0;
  border-right-width:  0;
  border-color: rgba(200,200,200,0.6);}
  100%{border-color: rgba(100,100,100,0.8);}
}
@keyframes containerphoto_spin_double
{
  0%{border-color: rgba(200,200,200,0.6);}
  50%{border-left-width: 0;
    border-right-width:  0;
    border-color: rgba(200,200,200,0.6);}
  100%{border-color: rgba(200,100,100,0.8);}
}
@keyframes icon_spin
{
  50%{width: 0;}
}
@keyframes icon_spin_back
{
  50%{width: 0;}
}
@keyframes icon_spin_double
{
  50%{width: 0;}
}
/*END Third Close button Spin animations*/

.uploadPhotoBtn {
  font-size: 40px; 
  color: #e80415;
}