

#modal-container, #modal-container-two,  #modal-container-three,  #modal-container-four, #modal-container-five,  #modal-container-six, #modal-container-eight{
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  color:#000;
  transform: scale(0);
  z-index: 99999999999;
}

#modal-container.one, 
#modal-container-two.two,
#modal-container-three.three, 
#modal-container-four.four, 
#modal-container-five.five,
#modal-container-six.six,
#modal-container-eight.eight {
  transform: scaleY(0.01) scaleX(0);
    color:#000;
  animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.one .modal-background .modal, 
#modal-container-two.two .modal-background .modal-two,  
#modal-container-three.three .modal-background .modal-three,
#modal-container-four.four .modal-background .modal-four, 
#modal-container-five.five .modal-background .modal-five, 
#modal-container-six.six .modal-background .modal-six,
#modal-container-eight.eight .modal-background .modal-eight
{
  transform: scale(0);
  animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    color:#000;
}
#modal-container.one.out ,
#modal-container-two.two.out, 
#modal-container-three.three.out, 
#modal-container-four.four.out,
#modal-container-five.five.out, 
#modal-container-six.six.out,
#modal-container-eight.eight.out {
  transform: scale(1);
      color:#000;
  animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.out .modal-background .modal, 
#modal-container-two.out .modal-background .modal-two, 
#modal-container-three.out .modal-background .modal-three,
#modal-container-four.out .modal-background .modal-four, 
#modal-container-five.out .modal-background .modal-five, 
#modal-container-six.out .modal-background .modal-six,
#modal-container-eight.out .modal-background .modal-eight
 { animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }



#modal-container .modal-background,
 #modal-container-two .modal-background,  
 #modal-container-three .modal-background, 
 #modal-container-four .modal-background, 
 #modal-container-five .modal-background, 
 #modal-container-six .modal-background,
#modal-container-eight .modal-background {
  display: table-cell;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  vertical-align: middle;
      color:#000;
}
#modal-container .modal-background .modal, 
#modal-container-two .modal-background .modal-two,
#modal-container-three .modal-background .modal-three,
#modal-container-four .modal-background .modal-four,
 #modal-container-five .modal-background .modal-five,
  #modal-container-six .modal-background .modal-six,
#modal-container-eight .modal-background .modal-eight  {
  background: white;
  width:100%;
  border:10px solid #802c80;
  padding-left:10%;
  padding-right:10%;
  display: inline-block;
  border-radius: 3px;
  font-weight: 300;
      color:#000;
  position: relative;
}
.simplePopup {
display:none;
position:fixed;
border:8px solid #802c80;
background:#fff;
z-index:999999;
padding:12px;
width:80%;
    color:#000;
min-width:80%;
box-shadow:inset 2px 2px 20px #ccc;
}

.popup_head
{
font-size:20px;
color:#802c80;
text-shadow:0px 0px 1px #212121;
padding:2%;
text-align:center;
width:100%;
}
.modal-background  table
{
border:3px solid #802c80;
}

.modal-background  table th
{
padding:10px;
text-align:center;
color:#802c80;
border-bottom:1px solid #802c80;
border-right:1px solid #802c80;
line-height:2em;
}
 .modal-background  table tr td
{
padding:10px;
border-bottom:1px solid #802c80;
border-right:1px solid #802c80;
line-height:2em;
}
 .modal-background  .service_list
{
padding-left:1%;
text-align:justify;
color:#000;
text-shadow:1px 0px 1px #fff;
font-family:'Roboto', sans-serif;
word-spacing: 3px;
font-size: 15px;


}
 .modal-background p {
font-size:15px;
text-align:justify;
line-height:2em;
}

 .modal-background .service_list li {
font-size:15px;
display:block;
margin-left:1%;
line-height:2em;

}
.modal-background  .service_list li  i {
color:#802c80;
}

#modal-container .modal-background .modal h2, 
#modal-container-two .modal-background .modal-two h2,
#modal-container-three .modal-background .modal-three h2,
#modal-container-four .modal-background .modal-four h2, 
#modal-container-five .modal-background .modal-h2,
#modal-container-six .modal-background .modal-six h2
#modal-container-eight .modal-background .modal-eight h2 {
  font-size: 25px;
  line-height: 25px;
  margin-bottom: 15px;
}
#modal-container .modal-background .modal p,
#modal-container-two .modal-background .modal-two p, 
#modal-container-three .modal-background .modal-three p, 
 #modal-container-four .modal-background .modal-four p, 
 #modal-container-five .modal-background .modal-five p,
  #modal-container-six .modal-background .modal-six p,
#modal-container-eight .modal-background .modal-eight {
font-size:15px;
color:#000;
text-align:justify;
line-height:2em;
}
#modal-container .modal-background .modal .modal-svg, 
#modal-container-two .modal-background .modal-two .modal-svg,
#modal-container-three .modal-background .modal-three .modal-svg,
#modal-container-four .modal-background .modal-four .modal-svg,
 #modal-container-five .modal-background .modal-five .modal-svg,
  #modal-container-six .modal-background .modal-six .modal-svg  
#modal-container-eight .modal-background .modal-eight .modal-svg  {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 3px;
}

#modal-container .modal-background .modal .modal-svg rect, 
#modal-container-two .modal-background .modal-two .modal-svg rect,
#modal-container-three .modal-background .modal-three .modal-svg rect,
#modal-container-four .modal-background .modal-four .modal-svg rect,
#modal-container-five .modal-background .modal-five .modal-svg rect,
 #modal-container-six .modal-background .modal-six .modal-svg rect,
#modal-container-eight .modal-background .modal-eight .modal-svg rect {
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 778;
  stroke-dashoffset: 778;
}







.content {
  min-height: 100%;
  height: 100%;
  background: white;
  position: relative;
  z-index: 0;
}

.content h1 {
  padding: 75px 0 30px 0;
  text-align: center;
  font-size: 30px;
  line-height: 30px;
}

.content .buttons {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.content .buttons .button {
  display: inline-block;
  text-align: center;
  padding: 10px 15px;
  margin: 10px;
  background: red;
  font-size: 18px;
  background-color: #efefef;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.content .buttons .button:hover {
  color: white;
  background: #009bd5;
}
 @keyframes 
unfoldIn {  0% {
 transform: scaleY(0.005) scaleX(0);
}
 50% {
 transform: scaleY(0.005) scaleX(1);
}
 100% {
 transform: scaleY(1) scaleX(1);
}
}
@keyframes 
unfoldOut {  0% {
 transform: scaleY(1) scaleX(1);
}
 50% {
 transform: scaleY(0.005) scaleX(1);
}
 100% {
 transform: scaleY(0.005) scaleX(0);
}
}
@keyframes 
zoomIn {  0% {
 transform: scale(0);
}
 100% {
 transform: scale(1);
}
}
@keyframes 
zoomOut {  0% {
 transform: scale(1);
}
 100% {
 transform: scale(0);
}
}
@keyframes 
fadeIn {  0% {
 background: transparent;
}
 100% {
 background: rgba(0, 0, 0, 0.7);
}
}
@keyframes 
fadeOut {  0% {
 background: rgba(0, 0, 0, 0.7);
}
 100% {
 background: transparent;
}
}
@keyframes 
scaleUp {  0% {
 transform: scale(0.8) translateY(1000px);
 opacity: 0;
}
 100% {
 transform: scale(1) translateY(0px);
 opacity: 1;
}
}
@keyframes 
scaleDown {  0% {
 transform: scale(1) translateY(0px);
 opacity: 1;
}
 100% {
 transform: scale(0.8) translateY(1000px);
 opacity: 0;
}
}
@keyframes 
scaleBack {  0% {
 transform: scale(1);
}
 100% {
 transform: scale(0.85);
}
}
@keyframes 
scaleForward {  0% {
 transform: scale(0.85);
}
 100% {
 transform: scale(1);
}
}
@keyframes 
quickScaleDown {  0% {
 transform: scale(1);
}
 99.9% {
 transform: scale(1);
}
 100% {
 transform: scale(0);
}
}
@keyframes 
slideUpLarge {  0% {
 transform: translateY(0%);
}
 100% {
 transform: translateY(-100%);
}
}
@keyframes 
slideDownLarge {  0% {
 transform: translateY(-100%);
}
 100% {
 transform: translateY(0%);
}
}
@keyframes 
moveUp {  0% {
 transform: translateY(150px);
}
 100% {
 transform: translateY(0);
}
}
@keyframes 
moveDown {  0% {
 transform: translateY(0px);
}
 100% {
 transform: translateY(150px);
}
}
@keyframes 
blowUpContent {  0% {
 transform: scale(1);
 opacity: 1;
}
 99.9% {
 transform: scale(2);
 opacity: 0;
}
 100% {
 transform: scale(0);
}
}
@keyframes 
blowUpContentTwo {  0% {
 transform: scale(2);
 opacity: 0;
}
 100% {
 transform: scale(1);
 opacity: 1;
}
}
@keyframes 
blowUpModal {  0% {
 transform: scale(0);
}
 100% {
 transform: scale(1);
}
}
@keyframes 
blowUpModalTwo {  0% {
 transform: scale(1);
 opacity: 1;
}
 100% {
 transform: scale(0);
 opacity: 0;
}
}
@keyframes 
roadRunnerIn {  0% {
 transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
}
 70% {
 transform: translateX(30px) skewX(0deg) scaleX(0.9);
}
 100% {
 transform: translateX(0px) skewX(0deg) scaleX(1);
}
}
@keyframes 
roadRunnerOut {  0% {
 transform: translateX(0px) skewX(0deg) scaleX(1);
}
 30% {
 transform: translateX(-30px) skewX(-5deg) scaleX(0.9);
}
 100% {
 transform: translateX(1500px) skewX(30deg) scaleX(1.3);
}
}
@keyframes 
sketchIn {  0% {
 stroke-dashoffset: 778;
}
 100% {
 stroke-dashoffset: 0;
}
}

@media (min-width:200px) and (max-width:450px){
.modal-background table tr td
{
padding:5px;
border-bottom:1px solid #802c80;
border-right:1px solid #802c80;
line-height:2em;
font-size:10px;}

.modal-background table th
{
padding:1px;
text-align:center;
color:#802c80;
border-bottom:1px solid #802c80;
border-right:1px solid #802c80;
line-height:2em;
font-size:10px;}

.modal-background p {
font-size:10px;
text-align:justify;
line-height:2em;
}

}
