/*
 * spa.css
 * Root namespace styles
*/

/** Begin reset */
  * {
    margin  : 0;
    padding : 0;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
  }
  h1,h2,h3,h4,h5,h6,p { margin-bottom : 6pt; }
  ol,ul,dl { list-style-position : inside;}

  * { 
    -webkit-user-select : none;
    -khtml-user-select  : none;
    -moz-user-select    : -moz-none;
    -o-user-select      : none;
    -ms-user-select     : none;
    user-select         : none;

    -webkit-user-drag : none;
    -moz-user-drag    : none;
    user-drag         : none;

    -webkit-tap-highlight-color : transparent;
    -webkit-touch-callout       : none;
  }

  input, textarea, .spa-x-user-select {
    -webkit-user-select : text;
    -khtml-user-select  : text;
    -moz-user-select    : text;
    -o-user-select      : text;
    -ms-user-select     : text;
    user-select         : text;
  }

/** End reset */

/** Begin standard selectors */
  html, body {
	margin:0; padding:0; overflow:hidden; 
    font : 10pt 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
    color            : #444;
    background-color : #888;
	background-image : url('../images/background.jpg');
	background-size  : 100%;
  }
  a { text-decoration : none; }
    a:link, a:visited { color : inherit; }
    a:hover { text-decoration: underline; }

  strong {
    font-weight : 800;
    color       : #000;
  }
/** End standard selectors */

/** Begin spa namespace selectors */
  #spa {
    position   : absolute;
    top        : 0;
    left       : 0;
    bottom     : 0;
    right      : 0;
    background : #fff;
    min-height : 15em;
    min-width  : 35em;
    overflow   : hidden;
  }
/** End spa namespace selectors */

/** Begin utility selectors */
  .spa-x-select {}
  .spa-x-clearfloat {
    height     : 0      !important;
    float      : none   !important;
    visibility : hidden !important;
    clear      : both   !important;
  }
/** End utility selectors */
    svg {
      position:absolute;
	  height: 90%;
	  top: 0;
	  right: 0; 
	  left: 0; 
	  bottom: 0;
	  margin: auto;
	  /* left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) */
    }
	
		#myImg {
		    border-radius: 5px;
		    cursor: pointer;
		    transition: 0.3s;
		}

		#myImg:hover {opacity: 0.7;}

		/* The Modal (background) */
		.modal {
		    display: none; /* Hidden by default */
		    position: fixed; /* Stay in place */
		    z-index: 1; /* Sit on top */
		    padding-top: 100px; /* Location of the box */
		    left: 0;
		    top: 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.9); /* Black w/ opacity */
		}

		/* Modal Content (image) */
		.modal-content {
		    margin: auto;
		    display: block;
		    width: 80%;
		    max-width: 700px;
		}

		/* Caption of Modal Image */
		#caption {
		    margin: auto;
		    display: block;
		    width: 80%;
		    max-width: 700px;
		    text-align: center;
		    color: #ccc;
		    padding: 10px 0;
		    height: 150px;
		}

		/* Add Animation */
		.modal-content, #caption {    
		    -webkit-animation-name: zoom;
		    -webkit-animation-duration: 0.6s;
		    animation-name: zoom;
		    animation-duration: 0.6s;
		}

		@-webkit-keyframes zoom {
		    from {-webkit-transform:scale(0)} 
		    to {-webkit-transform:scale(1)}
		}

		@keyframes zoom {
		    from {transform:scale(0)} 
		    to {transform:scale(1)}
		}

		/* The Close Button */
		.close {
		    position: absolute;
		    top: 15px;
		    right: 35px;
		    color: #f1f1f1;
		    font-size: 40px;
		    font-weight: bold;
		    transition: 0.3s;
		}

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

		/* 100% Image Width on Smaller Screens */
		@media only screen and (max-width: 700px){
		    .modal-content {
		        width: 100%;
		    }
		}