@charset "utf-8";
/* CSS Document */

/******* reset styles ******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0;  border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
/*****************************/

@viewport {
	width: device-width;
}
@-ms-viewport {
	width: device-width;
}

* {
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
}
body { 
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 14px;
	color:#666;
	background-color: #eee;
}
.wrapper {
	position: relative;
	margin:auto;
    max-width:900px;
    height:700px;
    /*outline: 3px solid red;*/
}
.header {
    text-align: center;
	font-size: 18px;
	margin-top: 8px;
    width: 100%;
    height:30px;
    padding-top:6px;
    /*outline: 1px solid grey;
    background-color: #f1f1f1;*/
}
.content {
    width: 100%;
    padding: 20%;
    /*outline: 1px solid blue;*/
}
.contentLEFT {
    width: 50%;
    float: left;
    padding: 5px;
    outline: 1px solid blue;
}
.contentRIGHT {
    width: 50%;
    float: right;
    padding: 5px;
    /*outline: 1px solid blue;*/
}
.photo img {
    display: block;
    margin: auto;
	margin-top:20px;
    max-width: 80%;
    height: auto;
    box-shadow: 5px 5px 5px #888888;
}

.footer {
   	position:absolute;
   	bottom:0;
    text-align: center;
    width: 100%;
    height:20px;
    padding-top:2px;
    outline: 1px solid grey;
    background-color: #f1f1f1;
}
/***** HOVER STYLE **************/
#pop-up {
	display: none;
	position: absolute;
	width: 500px;
	padding: 10px;
	background:none;
	color: #888;
	border: 1px solid #888;
	font-size: 90%;
	-webkit-box-shadow: 10px 10px 5px 0px #a2a2a2;
	-moz-box-shadow: 10px 10px 5px 0px #a2a2a2;
	box-shadow: 10px 10px 5px 0px #a2a2a2;
}
/********************************************/
@media only screen and (max-width: 400px) {
/********************************************/
.header {
	font-size: 95%
}
}
/********************************************
	Styling for the 'Preloader'
********************************************/
#preloader {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  text-align: center;
  color:#666;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff; /* change colour of mask */
  z-index: 99; /* makes sure it stays on top */
}
#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;  /* centers the loading animation horizontally */
  top: 50%;   /* centers the loading animation vertically */
  background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;  /* is width and height divided by two */
}