#contact-area {
     max-width: 100%;
     margin: 0 auto;
 }

 #contact-area input {
     margin: 20px 0;
     font-family: sans-serif;
     height: 20px;
     display: block;
     width: 100%;
     font-size: 1em;
     background-color: transparent;
     color: #e7e7e7;
     border: 0.5px solid #e7e7e7;
 }

 #contact-area textarea {
     display: block;
     width: 100%;
     background-color: transparent;
     color: #e7e7e7;
     border: 0.5px solid #e7e7e7;
 }

 #contact-area input[type="submit"] {
     height: 50px!important;
     width: 100px !important;
     background-color: black;
     border: 0;
     color: white;
     font-size: 1.5em;
     font-weight: bold;
     margin: 0 auto;
     transition: all 0.3s ease-in-out;
 }

 #contact-area input[type="submit"]:hover {
     background-color: white;
     color: black;
 }

 #contact-area label {
     font-size: 1em;
     float: left;
 }


 /* The Modal (background) */

 .modal {
     display: none;
     /* Hidden by default */
     position: fixed;
     /* Stay in place */
     z-index: 110;
     /* Sit on top */
     padding-top: 100px;
     top: 0;
     left: 0;

     width: 100%;
     /* Full width */
     height: 100%;
     /* Full height */
     overflow: auto;
     /* Enable scroll if needed */
     background-color: rgb(0, 0, 0);
     /* Fallback color */
     background-color: rgba(0, 0, 0, 0.7);
     /* Black w/ opacity */
 }

 /* Modal Content */

 .modal-content {
     position: relative;
     background-color: rgba(0, 0, 0, 0.8);
     margin: auto;
     padding: 0;
     /*    border: 1px solid #888;*/
     width: 30%;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     -webkit-animation-name: animatetop;
     -webkit-animation-duration: 0.4s;
     animation-name: animatetop;
     animation-duration: 0.4s
 }

 /* Add Animation */

 @-webkit-keyframes animatetop {
     from {
         top: -300px;
         opacity: 0
     }
     to {
         top: 0;
         opacity: 1
     }
 }

 @keyframes animatetop {
     from {
         top: -300px;
         opacity: 0
     }
     to {
         top: 0;
         opacity: 1
     }
 }

 /* The Close Button */

 .close {
     color: white;
     float: right;
     font-size: 28px;
     font-weight: bold;
 }

 .close:hover,
 .close:focus {
     color: #999;
     text-decoration: none;
     cursor: pointer;
 }

 .modal-header {
     padding: 2px 16px;
     background-color: rgba(0, 0, 0, 1);
     color: white;
     text-align: center;
     font-size: 2em;
 }

 .modal-body {
     margin-top: 20px;
     font-size: 1em;
     color: white;
     padding: 10px 16px;
 }





 @media screen and (max-width: 580px) {
     .modal-content {
         width: 100%;

         font-size: 0.8em;
         top: -10% !important;
     }
     #contact-area textarea {
         height: 50px;
     }
     #contact-area input[type="submit"] {
         height: 25px!important;
         width: 50px !important;
         font-size: 1em;
     }


 }


 /* The Modal (background) */

 .modal-sec {
     display: none;
     /* Hidden by default */
     position: fixed;
     /* Stay in place */
     z-index: 110;
     /* Sit on top */
     padding-top: 300px;
     top: 0;
     left: 0;

     width: 100%;
     /* Full width */
     height: 100%;
     /* Full height */
     overflow: auto;
     /* Enable scroll if needed */
     background-color: rgb(0, 0, 0);
     /* Fallback color */
     background-color: rgba(0, 0, 0, 0.7);
     /* Black w/ opacity */
 }

 /* Modal Content */

 .modal-content-sec {
     position: relative;

     margin: auto;
     padding: 0;
     /*    border: 1px solid #888;*/
     width: 50%;

 }



 .modal-header2 {


     color: white;
     text-align: center;
     font-size: 2em;
 }

 .close2 {
     color: white;
     float: right;
     font-size: 28px;
     font-weight: bold;
 }

 .close2:hover,
 .close2:focus {
     color: #999;
     text-decoration: none;
     cursor: pointer;
 }

 .modal-body-sec {
     margin-top: 20px;
     font-size: 1em;
     color: white;
     padding: 10px 16px;
 }


 #comic-btn {

     color: #999;
     font-size: 1.3em;
     cursor: pointer;
     transform-origin: 50% 50%;
 }

 .buton p {
     padding: 10px;
     background-color: rgba(0, 0, 0, 0);
     border: 1px solid white;
     border-radius: 5%;
     animation: mymove 0.2s 3 linear;
 }

 .buton:hover > p {

     animation: mymove 0.2s infinite;
 }

 @keyframes mymove {
     0% {
         transform: translate(4%, 0)
     }
     50% {
         transform: translate(-4%, 0)
     }
     100% {
         transform: translate(0, 0)
     }
 }


 .smallscreen {
     display: none;
     width: 100%;
 }

 .smallscreen img {
     max-width: 100%;
 }

 @media screen and (max-width: 580px) {
     .modal-content-sec {
         top: -70% !important;
     }
     .smallscreen {
         display: block !important;
     }

     .flipbook-viewport {
         display: none !important;
     }

 }

 .contact-icon {
     position: fixed;
     bottom: 15px;
     color: white;
     right: 15px;
 }

 .buton {
     position: fixed;
     z-index: 11;
     top: 50%;
     right: -5px;
     background: rgba(0, 0, 0, 0.5);
     width: 100px;
     height: 50px;
     z-index: 1000;
 }