.sec{
    border: 0.5em solid black;
    border-radius: 6%;
    background-color: white;
    box-sizing: border-box;
    width: 70rem;
    height: 30rem;
    position: relative;
    margin: 0 auto;
    bottom: 2rem;
}

.showing{
    -moz-animation: showingf ease 0.5s normal;
    -webkit-animation: showingf ease 0.5s normal;
    animation: showingf ease 0.5s normal;
}

@-moz-keyframes showingf{

    0%   {opacity: 0;}
   25%  {opacity: 0.25;}
   50%  {opacity: 0.5;}
   75%  {opacity: 0.75;}
   100% {opacity: 1;}
}

@-moz-keyframes showingf{

    0%   {opacity: 0;}
   25%  {opacity: 0.25;}
   50%  {opacity: 0.5;}
   75%  {opacity: 0.75;}
   100% {opacity: 1;}
}

@keyframes showingf{
    0%   {opacity: 0;}
   25%  {opacity: 0.25;}
   50%  {opacity: 0.5;}
   75%  {opacity: 0.75;}
   100% {opacity: 1;}
}

.hiding{
    -moz-animation: hidingf ease 0.5s reverse;
    -webkit-animation: hidingf ease 0.5s reverse;
    animation: hidingf ease 0.5s reverse;
}

@-moz-keyframes hidingf{

    0%   {opacity: 0;}
   25%  {opacity: 0.25;}
   50%  {opacity: 0.5;}
   75%  {opacity: 0.75;}
   100% {opacity: 1;}
}

@-moz-keyframes hidingf{

    0%   {opacity: 0;}
   25%  {opacity: 0.25;}
   50%  {opacity: 0.5;}
   75%  {opacity: 0.75;}
   100% {opacity: 1;}
}

@keyframes hidingf{
    0%   {opacity: 0;}
   25%  {opacity: 0.25;}
   50%  {opacity: 0.5;}
   75%  {opacity: 0.75;}
   100% {opacity: 1;}
}