/* Normal styles for the modal */ .modal1 { /* left:50%; */ padding-top: 15%; margin:-70% 0 0 9%; opacity: 0; position:relative; /* top:1%; */ visibility: hidden; width:80%; box-shadow:0 3px 7px rgba(0,0,0,.25); box-sizing:border-box; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; z-index: 9999; float: left; } .modal1:target { opacity: 1; top:50%; visibility: visible; } .modal1 .header,.modal .footer { border-bottom: 1px solid #e7e7e7; border-radius: 5px 5px 0 0; } .modal1 .footer { border:none; border-top: 1px solid #e7e7e7; border-radius: 0 0 5px 5px; } .modal1 h2 { margin:0; } .modal1 .btn1 { color: #ab3f46; } .modal1 .copy,.modal1 .header, .modal1 .footer { padding:15px; } .modal1-content { background: #f7f7f7; position: absolute; z-index: 99; border-radius:5px; } .modal1 .copy { background: #fff; }  .modal1 .overlay { background-color: #000; background: rgba(0,0,0,.5); height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 10; } .icon-md:hover { -webkit-animation: tiembla 0.2s 2; -moz-animation: tiembla 0.2s 2; } @-webkit-keyframes tiembla{ 0%  { -webkit-transform:rotateZ(-5deg); } 50% { -webkit-transform:rotateZ( 0deg) scale(.8); } 100%{ -webkit-transform:rotateZ( 5deg); } }   @-moz-keyframes tiembla{ 0%  { -moz-transform:rotateZ(-5deg); } 50% { -moz-transform:rotateZ( 0deg) scale(.8); } 100%{ -moz-transform:rotateZ( 5deg); } }   /* Normal styles for the modal */ .modal2 { /* left:50%; */ padding-top: 15%; margin:-70% 0 0 22%; opacity: 0; position:relative; /* top:1%; */ visibility: hidden; width:80%; box-shadow:0 3px 7px rgba(0,0,0,.25); box-sizing:border-box; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; z-index: 9999; float: left; } .modal2:target { opacity: 1; top:50%; visibility: visible; } .modal2 .header,.moda2 .footer { border-bottom: 1px solid #e7e7e7; border-radius: 5px 5px 0 0; } .modal2 .footer { border:none; border-top: 1px solid #e7e7e7; border-radius: 0 0 5px 5px; } .modal2 h2 { margin:0; } .modal2 .btn1 { color: #ab3f46; } .modal2 .copy,.modal2 .header, .modal2 .footer { padding:15px; } .modal2-content { background: #f7f7f7; position: absolute; z-index: 99; border-radius:5px; } .modal2 .copy { background: #fff; }  .modal2 .overlay { background-color: #000; background: rgba(0,0,0,.5); height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 10; } .icon-md:hover { -webkit-animation: tiembla 0.2s 2; -moz-animation: tiembla 0.2s 2; } @-webkit-keyframes tiembla{ 0%  { -webkit-transform:rotateZ(-5deg); } 50% { -webkit-transform:rotateZ( 0deg) scale(.8); } 100%{ -webkit-transform:rotateZ( 5deg); } }   @-moz-keyframes tiembla{ 0%  { -moz-transform:rotateZ(-5deg); } 50% { -moz-transform:rotateZ( 0deg) scale(.8); } 100%{ -moz-transform:rotateZ( 5deg); } }