Learn CSS (4).css

html.body{
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
 position: relative;
}
#wrapper {
 width: 100%;
 min-height: 100%;
 overflow: hidden;
}

#blackwall {
 background: rgba(120,255,12,0.6);
 position : absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 heigh: 100%;
 z-index: 9999;
 display: none;
}
#modal{
 width: 100%;
 max-width: 500px;
 min-height: 300px;
 box-sizing: border-box;
 background: #fff;
 border-radius: 5px;
 margin: 10% auto 0;
 box-shadow: 1px 2px 30px #af0;
 overflow: hidden;
 transition: all 1s ease;
 transform: scale(1,1);
}
#modal-header{
 width: 100%;
 height: 60px;
 line-height: 60px;
 padding: 0 25px;
 color: #fff;
 font-family: oswald;
 background: #6CB344;
 box-sizing: border-box;
}
#modal-header h1{
 margin: 0;
 font-size: 22px;
 float: left;
}
#modal-header .hider{ 
 float: right;
 cursor: pointer;
 transition: all 2s ease;
}
#modal-header .hider:hover{ 
 transform: scale(1.2,1.2);
 transition: all 0.5s ease;
}
#modal-body{
 font-family: arial;
 box-sizing: border-box;
 padding: 5px 15px;
 color: #333;
 text-align: justify;
}
.blockScroll{
 overflow: hidden;
}
#callModal {
 position: absolute;
 top: 40%;
 left: 50%;
 background-color: #0da;
 color: #030;
 width: 100px;
 height: 50px;
 border-radius: 0px 0px 10px 10px;
 transform: translate(-50px, 0px);
 transition: all 0.2s linear;
}
#callModal:hover {
 background-color: #0d3;
 color: #050;
 transform: scale(1.1, 1.1) translate(-45px, 0px);
 border-radius: 15px; 
}
p {
 padding: 20px;
}