@font-face
    {
    font-family:'lato-regular';
    src:url(../fonts/lato-reg-webfont.ttf) format("truetype");
    font-weight:normal;
    font-style:normal;
    }
	
@font-face
    {
    font-family:'lato-bold';
    font-weight:bold;
    font-style:normal;
    src:url(../fonts/lato-bol-webfont.ttf) format("truetype");
    }
	
@font-face
    {
    font-family:'montserrat-regular';
    src:url(../fonts/montserrat-regular-webfont.ttf) format("truetype");
    font-weight:normal;
    font-style:normal;
    }
	
@font-face
    {
    font-family:'montserrat-semibold';
    src:url(../fonts/montserrat-semibold-webfont.ttf) format("truetype");
    font-weight:normal;
    font-style:normal;
    }





.igFrame {
	width: 100%; height: 100%;
	position: absolute; top: 0; left: 0;
	border-radius: 10px;
	overflow: hidden;
	}


.igBody {
	width: 1024px; height: 768px; 
	position: absolute; top: 0; left: 0;
    overflow: hidden;
    border-radius: 10px;
    background-size: 100%;
    background-repeat: no-repeat;
    font-size: 100%;
    line-height: 1.4;
    font-family: 'lato-regular', Verdana, Tahoma, "dejaVu Sans", sans-serif;
	}
	
.igBody h1, h2, h3, dt, legend {
    font-family:  'montserrat-semibold', Verdana, Tahoma, "dejaVu Sans", sans-serif;
    font-weight: normal;
    line-height: 1.2;    
    }

.igBody  h1 {
    font-family: 'montserrat-regular', Verdana, Tahoma, "dejaVu Sans", sans-serif;
    margin-bottom: 0.5em;
    }    
    
.igBody h2, h3, dt, legend {
    font-size: 2em;
    color: #6d6e71;
    margin: 1em 0px 0.25em;
    }    
    
.igBody h3, dt {
    font-size: 1.5em;
    }
    
.igBody h4 {
    font-size: 1em;
    line-height: 1.5em;
    }
    
.banner-text {
	position: absolute; left: 0; top: 0; width: 100%; height: 108px; 
    text-align: center;
	font-family: Montserrat-regular, Verdana, Tahoma, "dejaVu Sans", sans-serif; color: #6d6e71;
	font-size: 32pt;
	z-index: 2;
	}
	
	
.banner-bold {
	font-family: Montserrat-semibold, tahoma; 
	}


		
.instruction {
	font-style: italic;
	}
	
	
		
#shade {
	width: 100%; height: 100%;
	position: absolute; top: 0; left: 0; z-index: -4;
	background: none; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(white, #C1C1C1); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white, #C1C1C1); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(white, #C1C1C1); /* For Firefox 3.6 to 15 */
    background: linear-gradient(white, #C1C1C1); /* Standard syntax */
	}
		

	
	
#page-content {
	background: transparent;
	}		

#servicesList {
	font-size: 14px;
	position: absolute; 
	background-color: #c8c8c8; 
	color: #505050;
}
	
.bluebox, .salmonbox, .yellowbox, .instructionbox	{
	position: absolute;
	width: 210px;
	border-radius: 10px; padding: 7px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	font-size: 14px;
	}

.bluebox {
	background-color: #DDDDDD;
	}
	
	
.instructionbox {
	background: none; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, #C5DCDF , #D5ECEF); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, #C5DCDF, #D5ECEF); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, #C5DCDF, #D5ECEF); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #C5DCDF , #D5ECEF); /* Standard syntax */
	font-size: 14px;
	}
	
.salmonbox {
	background: #FCD4B2;
	font-size: 14px;
	}
	
 .instructionbox {
	animation-delay: 3s; 
	right: 10px; bottom: 10px; width: 200px; height: 130px; z-index: 2;
	}
	
	
	
@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

.next {
	color: #00aaad;
	text-decoration: none;
	border-bottom: 4px solid #00aaad;
	}

    
@keyframes fadeIn {
    0%      {opacity: 0}
    100%    {opacity: 1}
    }

.fadeIn {
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 3s;
    _animation-delay: 3s;
    animation-fill-mode: forwards;        
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    }
	
.yellowbox {
	height: 300px; bottom: 10px; _top:  50%; _margin-top:  -150px; 
	width: 	450px; left: 50%; margin-left: -280px; 
	opacity: 0.9;
	background: #e1f1b7;
	}	