@charset "utf-8";

/* ********** Extra Small Mobile Layout: 320px. ********** */
body
{
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* *** Backgrounds - Intro Page *** */
.background1
{
	background-color: #000000;
	padding-bottom: 20%;
}

.background2
{
	/* can be treated like a fallback */
	background-color: #000064;
	background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#000064));
	background: -webkit-linear-gradient(#000000, #000064);
	background: -o-linear-gradient(#000000, #000064);
	background: linear-gradient(#000000, #000064);
	background-repeat: repeat;
	padding-bottom: 20%;
}

.background3
{
	/* can be treated like a fallback */
	background-color: #0000fa;
	background: -webkit-gradient(linear, left top, left bottom, from(#000064), to(#0000fa));
	background: -webkit-linear-gradient(#000064, #0000fa);
	background: -o-linear-gradient(#000064, #0000fa);
	background: linear-gradient(#000064, #0000fa);
	padding-bottom: 20%;
}

.background4
{
	/* can be treated like a fallback */
	background-color: #0064fa;
	background: -webkit-gradient(linear, left top, left bottom, from(#0000fa), to(#0064fa));
	background: -webkit-linear-gradient(#0000fa, #0064fa);
	background: -o-linear-gradient(#0000fa, #0064fa);
	background: linear-gradient(#0000fa, #0064fa);
	padding-bottom: 20%;
}

.background5
{
	/* can be treated like a fallback */
	background-color: #00c8fa;
	background: -webkit-gradient(linear, left top, left bottom, from(#0064fa), to(#00c8fa));
	background: -webkit-linear-gradient(#0064fa, #00c8fa);
	background: -o-linear-gradient(#0064fa, #00c8fa);
	background: linear-gradient(#0064fa, #00c8fa);
	padding-bottom: 20%;
}

.background6
{
	/* can be treated like a fallback */
	background-color: #64c8fa;
	background: -webkit-gradient(linear, left top, left bottom, from(#00c8fa), to(#64c8fa));
	background: -webkit-linear-gradient(#00c8fa, #64c8fa);
	background: -o-linear-gradient(#00c8fa, #64c8fa);
	background: linear-gradient(#00c8fa, #64c8fa);
	padding-bottom: 20%;
}

.background7
{
	/* can be treated like a fallback */
	background-color: #ccedff;
	background: -webkit-gradient(linear, left top, left bottom, from(#64c8fa), to(#ccedff));
	background: -webkit-linear-gradient(#64c8fa, #ccedff);
	background: -o-linear-gradient(#64c8fa, #ccedff);
	background: linear-gradient(#64c8fa, #ccedff);
	padding-bottom: 55%;
	padding-top: 5%;
}

/* *** Backgrounds - About Page *** */
.backgroundabout2
{
	/* can be treated like a fallback */
	background-color: #00c8fa;
	background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#00c8fa));
	background: -webkit-linear-gradient(#000000, #00c8fa);
	background: -o-linear-gradient(#000000, #00c8fa);
	background: linear-gradient(#000000, #00c8fa);
	padding-top: 1%;
	padding-bottom: 5%;
}

.backgroundabout3
{
	/* can be treated like a fallback */
	background-color: #00ffff;
	background: -webkit-gradient(linear, left top, left bottom, from(#0096fa), to(#00ffff));
	background: -webkit-linear-gradient(#0096fa, #00ffff);
	background: -o-linear-gradient(#0096fa, #00ffff);
	background: linear-gradient(#0096fa, #00ffff);
	padding-top: 10%;
	padding-bottom: 55%;
}

.backgroundabout4
{
	/* can be treated like a fallback */
	background-color: #ccedff;
	background: -webkit-gradient(linear, left top, left bottom, from(#00ffff), to(#ccedff));
	background: -webkit-linear-gradient(#00ffff, #ccedff);
	background: -o-linear-gradient(#00ffff, #ccedff);
	background: linear-gradient(#00ffff, #ccedff);
	padding-top: 10%;
	padding-bottom: 55%;
}

/* *** Backgrounds - Contact Page *** */
.backgroundcontact2
{
	/* can be treated like a fallback */
	background-color: #00cbfa;
	background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#00cbfa));
	background: -webkit-linear-gradient(#000000, #00cbfa);
	background: -o-linear-gradient(#000000, #00cbfa);
	background: linear-gradient(#000000, #00cbfa);
	padding-top: 2%;
}

.backgroundcontact3
{
	/* can be treated like a fallback */
	background-color: #00ffff;
	background: -webkit-gradient(linear, left top, left bottom, from(#00cbfa), to(#00ffff));
	background: -webkit-linear-gradient(#00cbfa, #00ffff);
	background: -o-linear-gradient(#00cbfa, #00ffff);
	background: linear-gradient(#00cbfa, #00ffff);
	padding-top: 20%;
	padding-bottom: 55%;
}

/* *** Backgrounds - Services Page *** */
.backgroundservices1
{
	background-color: #000000;
	height: 600px;
	padding-bottom: 5%;
}

.backgroundservices2
{
	/* can be treated like a fallback */
	background-color: #000064;
	background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#000064));
	background: -webkit-linear-gradient(#000000, #000064);
	background: -o-linear-gradient(#000000, #000064);
	background: linear-gradient(#000000, #000064);
	padding-top: 20%;
}

.backgroundservices3
{
	/* can be treated like a fallback */
	background-color: #000096;
	background: -webkit-gradient(linear, left top, left bottom, from(#000064), to(#000096));
	background: -webkit-linear-gradient(#000064, #000096);
	background: -o-linear-gradient(#000064, #000096);
	background: linear-gradient(#000064, #000096);
	padding-top: 20%;
}

.backgroundservices4
{
	/* can be treated like a fallback */
	background-color: #0000fa;
	background: -webkit-gradient(linear, left top, left bottom, from(#000096), to(#0000fa));
	background: -webkit-linear-gradient(#000096, #0000fa);
	background: -o-linear-gradient(#000096, #0000fa);
	background: linear-gradient(#000096, #0000fa);
	padding-top: 20%;
}

.backgroundservices5
{
	/* can be treated like a fallback */
	background-color: #0032fa;
	background: -webkit-gradient(linear, left top, left bottom, from(#0000fa), to(#0032fa));
	background: -webkit-linear-gradient(#0000fa, #0032fa);
	background: -o-linear-gradient(#0000fa, #0032fa);
	background: linear-gradient(#0000fa, #0032fa);
	padding-top: 20%;
}

.backgroundservices6
{
	/* can be treated like a fallback */
	background-color: #00cbfa;
	background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#00cbfa));
	background: -webkit-linear-gradient(#000000, #00cbfa);
	background: -o-linear-gradient(#000000, #00cbfa);
	background: linear-gradient(#000000, #00cbfa);
	padding-top: 20%;
}

.backgroundservices7
{
	/* can be treated like a fallback */
	background-color: #0096fa;
	background: -webkit-gradient(linear, left top, left bottom, from(#0064fa), to(#0096fa));
	background: -webkit-linear-gradient(#0064fa, #0096fa);
	background: -o-linear-gradient(#0064fa, #0096fa);
	background: linear-gradient(#0064fa, #0096fa);
	padding-top: 20%;
}

.backgroundservices8
{
	/* can be treated like a fallback */
	background-color: #00c8fa;
	background: -webkit-gradient(linear, left top, left bottom, from(#0096fa), to(#00c8fa));
	background: -webkit-linear-gradient(#0096fa, #00c8fa);
	background: -o-linear-gradient(#0096fa, #00c8fa);
	background: linear-gradient(#0096fa, #00c8fa);
	padding-top: 20%;
}

.backgroundservices9
{
	/* can be treated like a fallback */
	background-color: #32cafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#00c8fa), to(#32cafa));
	background: -webkit-linear-gradient(#00c8fa, #32cafa);
	background: -o-linear-gradient(#00c8fa, #32cafa);
	background: linear-gradient(#00c8fa, #32cafa);
	padding-top: 20%;
}

.backgroundservices10
{
	/* can be treated like a fallback */
	background-color: #64cafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#32cafa), to(#64cafa));
	background: -webkit-linear-gradient(#32cafa, #64cafa);
	background: -o-linear-gradient(#32cafa, #64cafa);
	background: linear-gradient(#32cafa, #64cafa);
	padding-top: 20%;
}

.backgroundservices11
{
	/* can be treated like a fallback */
	background-color: #00ffff;
	background: -webkit-gradient(linear, left top, left bottom, from(#64cafa), to(#00ffff));
	background: -webkit-linear-gradient(#64cafa, #00ffff);
	background: -o-linear-gradient(#64cafa, #00ffff);
	background: linear-gradient(#64cafa, #00ffff);
	padding-top: 20%;
	padding-bottom: 55%;
}

/* *** Header *** */
.logo
{
	width: 140px;
	height: 140px;
	float: left;
}


.navi
{
	width: 170px;
	height: 120px;
	text-align: center;
	-ms-transform: rotate(350deg);
	/* IE 9 */
	-webkit-transform: rotate(350deg);
	/* Safari 3-8 */
	transform: rotate(350deg);
	color: #1b98e0;
	font-family: Rockwell;
	font-size: 20px;
	line-height: 150%;
	float: right;
	margin-top: 2%;
	margin-bottom: 5%;
	margin-right: 1%;
	margin-left: 1%;
}

/* *** Loader *** */
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}

/* *** Main Image *** */
img
{
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.imagecenter
{
	width: 100%;
	overflow: hidden;
	display: inline-block;
	text-align: center;
}

.imagecenter img
{
	max-width: 800px;
	margin-left: -70%;
	min-height: 600px;
}

/* *** Spotlight Animation *** */
.spot1
{
	left: 30%;
	-webkit-animation: move 4s alternate infinite;
	animation: move 4s alternate infinite;
}

.spot2
{
	left: 60%;
	-webkit-animation: move2 5s alternate infinite;
	animation: move2 5s alternate infinite;
}

.spotlight
{
	position: absolute;
	width: 50px;
	height: 0px;
	border-top: 800px solid rgba(255,255,255,0.25);
	border-left: 40px solid transparent;
	border-bottom: 0px solid #999;
	border-right: 40px solid transparent;
	background-color: transparent;
	-webkit-transform-origin: 50% 100% 0;
	transform-origin: 50% 100% 0;
	z-index: 0;

/* -webkit-transition-timing: ease-in-out */
}

@-webkit-keyframes move
{
	0%
	{
		-webkit-transform: rotate(30deg);
	}
	
	50%
	{
		-webkit-transform: rotate(-30deg);
	}
	
	100%
	{
		-webkit-transform: rotate(30deg);
	}
}

@-webkit-keyframes move2 
{
	0%
	{
		-webkit-transform: rotate(-30deg);
	}
	
	50%
	{
		-webkit-transform: rotate(30deg);
	}
	
	100%
	{
		-webkit-transform: rotate(-30deg);
	}
}

@keyframes move
{
	0%
	{
		transform: rotate(30deg);
	}
	
	50%
	{
		transform: rotate(-30deg);
	}
	
	100%
	{
		transform: rotate(30deg);
	}
}

@keyframes move2 
{
	0%
	{
		transform: rotate(-30deg);
	}
	
	50%
	{
		transform: rotate(30deg);
	}
	
	100%
	{
		transform: rotate(-30deg);
	}
}

/* *** Links *** */
a.nav
{
	color: #1b98e0;
	text-decoration: none;
}

a
{
	color: #2f3dfd;
	text-decoration: none;
}

a.email
{
	text-decoration: underline;
}

a.email:hover
{
	color: #000000;
}

a.current
{
	color: #ffffff;
}

a:hover
{
	color: #2f3dfd;
}

a:focus
{
	outline: thin dotted;
}

/* improve readability when focused and hovered in all browsers */
a:hover, a:active
{
	outline: 0;
}

/* *** Headings *** */
h1.heading1
{
	line-height: 40px;
	color: #2f3dfd;
	font-family: Verdana;
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	font-style: italic;
	margin: 10px;
	position: relative;
	top: -120px;
}

h2
{
	line-height: 50px;
	color: #ffffff;
	font-family: Verdana;
	font-size: 40px;
	font-weight: 700;
	text-align: center;
	font-style: italic;
	padding: 10px;
}

h2.heading2
{
	line-height: 40px;
	color: #ffffff;
	font-family: Verdana;
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	font-style: italic;
	margin: 5px;
}

h2.heading2dark
{
	color: #3f1be0;
	line-height: 40px;
	color: #3f1be0;
	font-family: Verdana;
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	font-style: italic;
	margin: 20px;
}

h3
{
	color: #2f3ded;
	font-family: Verdana;
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	font-style: italic;
	clear: both;
	padding: 10px;
}

h3.light
{
	color: #ffffff;
}

h4
{
	color: #2f3dfd;
	font-family: Verdana;
	font-size: 18px;
	font-weight: 700;
	font-style: italic;
	text-align: center;
	padding: 10px;
}

h4.lighter
{
	color: #f9f9f9;
}

h5
{
	color: #ffffff;
	font-family: Verdana;
	font-size: 16px;
	font-weight: 700;
	font-style: italic;
	text-align: center;
	padding: 5px;
	width: 100%;
}

/* *** General *** */
p
{
	font-family: Verdana;
	font-size: 16px;
	font-weight: 400;
	font-style: italic;
	padding: 10px;
	text-align: center;
}

p.box
{
	padding: 0px;
	font-family: Verdana;
	font-size: 12px;
	font-style: italic;
}

p.web
{
	color: #1b98e0;
}

p.design
{
	color: #2f3dfd;
}

p.designweb
{
	color: #dddddd;
}

p.designlight
{
	color: #1b98e0;
}

p.aboutkristy
{
	color: #1b98e0;
	font-size: 14px;
	display: block;
	font-family: Verdana;
	padding: 20px;
	margin: 10px auto;
	line-height: 20px;
	text-align: center;
	position: relative;
	top: -120px;
	font-weight: 700;
}

p.about
{
	line-height: 23px;
	color: #1b98e0;
	font-family: Verdana;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	font-style: italic;
	background-color: #000000;
	padding: 10px;
}

p.light
{
	color: #ffffff;
}

p.left
{
	color: #ffffff;
}
	
p.right
{
	color: #ffffff;
}

/* Images */
.image
{
	width: 100%;
	height: 50%;
	max-width: 800px;
	display: block;
}

.smallphoto
{
	width: 150px;
	height: 150px;
	text-align: center;
	padding-top: 5%;
}

.logoround
{
	width: 150px;
	height: 150px;
}

.icon
{
	width: 25px;
	height: 25px;
}

.thumbnail, .thumbnail1, .harlogo
{
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.thumbnail:hover, .thumbnail1:hover, .harlogo: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 (Image Text) - Same Width as the Image */
#caption 
{
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

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

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

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

/* The Close Button */
.close 
{
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    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%;
    }
}

.column 
{
	margin: 5px;
	padding: 0 10px;
    float: left;
    width: 20%;
	border: 2px solid #ffffff;
}

.mySlides, mySlides1 
{
  display: none;
}

.cursor 
{
  cursor: pointer;
}

/* Number text (1/3 etc) */
.numbertext 
{
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img 
{
  margin-bottom: -4px;
}

.caption-container 
{
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo, .demo1
{
  opacity: 0.6;
}

.active,
.demo:hover. .demo1:hover 
{
  opacity: 1;
}

/* Buttons */
button.learn
{
	cursor: pointer;
	margin: 10px;
	width: 150px;
	height: 40px;
	font-family: Verdana;
	font-size: 16px;
	font-weight: 700;
	background-color: #1b98e0;
	color: #ffffff;
	float: right;
}

button.planner
{
	cursor: pointer;
	width: 150px;
	height: 60px;
	font-family: Verdana;
	font-size: 20px;
	color: #ffffff;
	background-color: #3f1be0;
	text-align: center;
	font-weight: 700;
	font-style: italic;
	border: 3px solid #cdcdcd;
	border-radius: 10px;
}

button.nav
{
	cursor: pointer;
	width: 75px;
	height: 40px;
	font-size: 14px;
	color: #000000;
	background-color: #1b98e0;
	text-align: center;
	font-weight: 500;
	font-style: italic;
	border: 3px solid #cdcdcd;
	border-radius: 25px;
	font-family: Verdana;
}

/* Specific CSS */
.heroweb
{
	width: 90%;
	height: 350px;
	background-color: #64c8fa;
	border-radius: 10px;
	border: 1px solid #eeeeee;
	margin-right: auto;
	margin-left: auto;
}

.herologo
{
	width: 90%;
	height: 350px;
	background-color: #00c8fa;
	border-radius: 10px;
	border: 1px solid #eeeeee;
	margin-right: auto;
	margin-left: auto;
}

.heromarketing
{
	width: 90%;
	height: 350px;
	background-color: #0096fa;
	border-radius: 10px;
	border: 1px solid #eeeeee;
	margin-right: auto;
	margin-left: auto;
}

.herobranding
{
	width: 90%;
	height: 350px;
	background-color: #0032fa;
	border-radius: 10px;
	border: 1px solid #eeeeee;
	margin-right: auto;
	margin-left: auto;
}

.herosocial
{
	width: 90%;
	height: 350px;
	background-color: #0000fa;
	border-radius: 10px;
	border: 1px solid #eeeeee;
	margin-right: auto;
	margin-left: auto;
}

.herodigital
{
	width: 90%;
	height: 350px;
	background-color: #0000c8;
	border-radius: 10px;
	border: 1px solid #eeeeee;
	margin-right: auto;
	margin-left: auto;
}

ul.contact
{
	font-family: Rockwell;
	font-size: 20px;
	font-weight: 500;
	-ms-transform: rotate(350deg);
	/* IE 9 */
	-webkit-transform: rotate(350deg);
	/* Safari 3-8 */
	transform: rotate(350deg);
	padding-top: 2%;
}

li.contactblack
{
	color: #000000;
	line-height: 150%;
}

li.contactlink
{
	color: #2f3dfd;
	font-size: 20px;
	font-family: Rockwell;
	line-height: 100%;
	text-decoration: underline;
}

ul.servicelist
{
	margin-top: 15%;
	margin-bottom: 15%;
}

li
{
	margin-top: 5%;
	margin-bottom: 5%;
}

.social
{
	margin-left: 10px;
	margin-right: 10px;
}

.footer
{
	margin-top: 10%;
}

/* Slideshow container */
.slideshow-container
{
	position: relative;
	margin: auto;
	width: auto;
}

/* Next & Previous buttons */
.prev, .next
{
	cursor: pointer;
	position: absolute;
	width: auto;
	margin-top: -220px;
	padding: 16px;
	color: #666;
	font-weight: bold;
	font-size: 18px;
	-webkit-transition: 0.6s ease;
	-o-transition: 0.6s ease;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
}

/* Position the "prev button" to the left */
.prev
{
	left: 0px;
}

/* Position the "next button" to the right */
.next
{
	right: 0px;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit of see-through */
.prev:hover, .next:hover
{
	background-color: #ffffff;
}

/* Translucent text box at bottom of slideshow*/
.transbox1
{
	background-color: #c00;
	opacity: 0.8;
	height: 100px;
	position: relative;
}

.transbox2
{
	background-color: #f60;
	opacity: 0.8;
	height: 100px;
	position: relative;
}

.transbox3
{
	background-color: #3c0;
	opacity: 0.8;
	height: 100px;
	position: relative;
}

.transbox4
{
	background-color: #f3f;
	opacity: 0.8;
	height: 100px;
	position: relative;
}

.transbox5
{
	background-color: #93f;
	opacity: 0.8;
	height: 100px;
	position: relative;
}

/* Slideshow image caption text */
.text
{
	color: #ffffff;
	font-size: 12px;
	text-align: center;
	padding-top: 10px;
	font-weight: 700;
}

/* The dots/bullets/indicators */
.dot, .dot1, .dot2, .dot3, .dot4, .dot5, .dot6
{
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 100px;
	display: inline-block;
	-webkit-transition: background-color 0.6s ease;
	-o-transition: background-color 0.6s ease;
	transition: background-color 0.6s ease;
}

.center
{
	text-align: center;
}

.active, .dot:hover
{
	background-color: #717171;
}

/* Fading animation */
.fade
{
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}

@-webkit-keyframes fade
{
	from
	{
		opacity: 4;
	}
	to
	{
		opacity: 1;
	}
}

@keyframes fade
{
	from
	{
		opacity: 4;
	}
	to
	{
		opacity: 1;
	}
}

/* *** Planner Form *** */
label
{
	color: #ffffff;
}

input, select
{
	width: 200px;
	height: 20px;
	margin-bottom: 20px;
}

textarea
{
	width: 200px;
	margin-bottom: 20px;
}

input.button
{
	width: 100px;
	text-align: center;
	background-color: #1b98e0;
	font-weight: 500;
	font-style: italic;
	border: 3px solid #cdcdcd;
	border-radius: 25px;
	font-family: Verdana;
	font-size: 14px;
	height: 40px;
}

/* *** Services Page *** */
span.services1
{
	color: #1B98E0;
	line-height: 36px;
	font-family: Verdana;
	font-size: 14px;
	text-align: center;
	display: inline-block;
	position: absolute;
	width: 190px;
	left: 130px;
	top: 200px;
	border-radius: 25px;
	border: 1px solid #DDDDDD;
	height: 36px;
	font-weight: bold;
	background-color: #DDDDDD;
	float: left;
	margin-left: 10px;
}

.services1:hover, .services1:active
{
	background-color: #FFFFFF;
}

span.services2
{
	color: #1B98E0;
	line-height: 36px;
	font-family: Verdana;
	font-size: 14px;
	background-color: #DDDDDD;
	text-align: center;
	display: inline-block;
	position: absolute;
	width: 190px;
	left: 120px;
	top: 240px;
	border-radius: 25px;
	border: 1px solid #DDDDDD;
	height: 36px;
	font-weight: bold;
}

.services2:hover, .services2:active
{
	background-color: #FFFFFF;
}

span.services3
{
	color: #1B98E0;
	line-height: 36px;
	font-family: Verdana;
	font-size: 14px;
	background-color: #DDDDDD;
	text-align: center;
	display: inline-block;
	position: absolute;
	width: 190px;
	left: 105px;
	top: 280px;
	border-radius: 25px;
	border: 1px solid #DDDDDD;
	height: 36px;
	font-weight: bold;
}

.services3:hover, .services3:active
{
	background-color: #FFFFFF;
}

span.services4
{
	color: #1B98E0;
	line-height: 36px;
	font-family: Verdana;
	font-size: 14px;
	background-color: #DDDDDD;
	text-align: center;
	display: inline-block;
	position: absolute;
	width: 190px;
	left: 90px;
	top: 320px;
	border-radius: 25px;
	border: 1px solid #DDDDDD;
	height: 36px;
	font-weight: bold;
}

.services4:hover, .services4:active
{
	background-color: #FFFFFF;
}

span.services5
{
	color: #1B98E0;
	line-height: 36px;
	font-family: Verdana;
	font-size: 14px;
	background-color: #DDDDDD;
	text-align: center;
	display: inline-block;
	position: absolute;
	width: 190px;
	left: 75px;
	top: 360px;
	border-radius: 25px;
	border: 1px solid #DDDDDD;
	height: 36px;
	font-weight: bold;
}

.services5:hover, .services5:active
{
	background-color: #FFFFFF;
}

span.services6
{
	color: #1B98E0;
	line-height: 36px;
	font-family: Verdana;
	font-size: 14px;
	background-color: #DDDDDD;
	text-align: center;
	display: inline-block;
	position: absolute;
	width: 190px;
	left: 60px;
	top: 400px;
	border-radius: 25px;
	border: 1px solid #DDDDDD;
	height: 36px;
	font-weight: bold;
}

.services6:hover, .services6:active
{
	background-color: #FFFFFF;
}

span.services7
{
	color: #1B98E0;
	line-height: 36px;
	font-family: Verdana;
	font-size: 14px;
	background-color: #DDDDDD;
	text-align: center;
	display: inline-block;
	position: absolute;
	width: 190px;
	left: 45px;
	top: 440px;
	border-radius: 25px;
	border: 1px solid #DDDDDD;
	height: 36px;
	font-weight: bold;
}

.services7:hover, .services7:active
{
	background-color: #FFFFFF;
}

span.services8
{
	color: #1B98E0;
	line-height: 36px;
	font-family: Verdana;
	font-size: 14px;
	background-color: #DDDDDD;
	text-align: center;
	display: inline-block;
	position: absolute;
	width: 190px;
	left: 30px;
	top: 480px;
	border-radius: 25px;
	border: 1px solid #DDDDDD;
	height: 36px;
	font-weight: bold;
}

.services8:hover, .services8:active
{
	background-color: #FFFFFF;
}

span.services9
{
	color: #1B98E0;
	line-height: 36px;
	font-family: Verdana;
	font-size: 14px;
	background-color: #DDDDDD;
	text-align: center;
	display: inline-block;

	position: absolute;
	width: 190px;
	left: 15px;
	top: 520px;
	border-radius: 25px;
	border: 1px solid #DDDDDD;
	height: 36px;
	font-weight: bold;
}

.services9:hover, .services9:active
{
	background-color: #FFFFFF;
}

span.services10
{
	color: #1B98E0;
	line-height: 36px;
	font-family: Verdana;
	font-size: 14px;
	background-color: #DDDDDD;
	text-align: center;
	display: inline-block;
	position: absolute;
	width: 190px;
	left: 0px;
	top: 560px;
	border-radius: 25px;
	border: 1px solid #DDDDDD;
	height: 36px;
	font-weight: bold;
}

.services10:hover, .services10:active
{
	background-color: #FFFFFF;
}

.fancyunderline
{
	width: 470px;
	height: 80px;
}

.thumbnail
{
	width: 250px;
	height: 350px;
}

.harlogo
{
	width: 250px;
	height: 150px;
}

.thumbnail1
{
	width: 250px;
	height: 300px;
}

.har1
{
	padding: 20px;
}

.har3
{
	margin: 20px;
}

.har4
{
	margin: 20px;
}

.beast1
{
	padding: 20px;
}

.beast3
{
	margin: 20px;
}

.beast4
{
	margin: 20px;
}

.cmp1
{
	padding: 20px;
}

.bargainz1
{
	padding: 20px;
}

.bargainz3
{
	margin: 20px;
}

.bargainz4
{
	margin: 20px;
}

.soccer1
{
	padding: 20px;
}

.hobbit1
{
	padding: 20px;
}

.star1
{
	padding: 20px;
}

.star2
{
	margin: 20px;
}

.star3
{
	margin: 20px;
}

.game1
{
	padding: 20px;
}

.thai1
{
	padding: 20px;
}

.thai3
{
	margin: 20px;
}
/* ********** END OF EXTRA SMALL MOBILE LAYOUT ********** */


/* ********** Extra Small Mobile Layout: 350px. ********** */

	/* *** Main Image *** */
	.imagecenter img
	{
		margin-left: -60%;
	}

/* ********** END OF LAYOUT ********** */


/* ********** Small Mobile Layout: 381px to 479px. Inerits styles from: Extra Small Mobile Layout. ********** */
@media only screen and (min-width: 381px)
{
	/* *** Main Image *** */
	.imagecenter img
	{
		margin-left: -50%;
	}
	
	.heroweb
	{
		height: 280px;
	}
	
	.herologo
	{
		height: 260px;
	}
	
	.heromarketing
	{
		height: 320px;
	}
	
	.herobranding
	{
		height: 320px;
	}
	
	.herosocial
	{
		height: 300px;
	}
	
	.herodigital
	{
	height: 200px;
	}
	
	/* *** Planner Form *** */
	input, select
	{
		width: 300px;
	}
	
	textarea
	{
		width: 300px;
	}
}
/* ********** END OF SMALL MOBILE LAYOUT ********** */


/* ********** Mobile Layout: 480px to 550px. Inherits styles from: Small Mobile Layout. ********** */
@media only screen and (min-width: 480px)
{	
	/* *** Main Image *** */
	.imagecenter img
	{
		margin-left: -30%;
	}
	
	.block
	{
		display: inline-block;
	}
	
	.left
	{
		width: 250px;
		float: left;
		display: block;
	}
	
	.right
	{
		width: 250px;
		float: right;
		display: block;
	}
	
	p.left
	{
		color: #ffffff;
		width: 250px;
		float: left;
		display: block;
	}
	
	p.right
	{
		color: #ffffff;
		width: 250px;
		float: right;
		display: block;
	}
	
	span.services1
	{
		left: 280px;
		top: 200px;
	}

	span.services2
	{
		left: 250px;
		top: 240px;
	}

	span.services3
	{
		left: 220px;
		top: 280px;
	}
	
	span.services4
	{
		left: 190px;
		top: 320px;
	}

	span.services5
	{
		left: 160px;
		top: 360px;
	}

	span.services6
	{
		left: 130px;
		top: 400px;
	}
	
	span.services7
	{
		left: 100px;
		top: 440px;
	}

	span.services8
	{
		left: 70px;
		top: 480px;
	}

	span.services9
	{
		left: 40px;
		top: 520px;
	}

	span.services10
	{
		left: 10px;
		top: 560px;
	}
}


/* ********** Mobile Layout: 550px to 649px. Inherits styles from: Small Mobile Layout. ********** */
@media only screen and (min-width: 560px)
{	
	/* *** Main Image *** */
	.imagecenter img
	{
		margin-left: -20%;
	}
}
/* ********** END OF LAYOUT ********** */


/* Tablet Layout: 650px to 750px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 650px)
{
	/* *** Main Image *** */
	.imagecenter img
	{
		margin-left: -10%;
	}
	
	.heroweb
	{
		height: 200px;
	}
	
	.herologo
	{
		height: 200px;
	}
	
	.heromarketing
	{
		height: 200px;
	}
	
	.herobranding
	{
		height: 200px;
	}
	
	.herosocial
	{
		height: 200px;
	}
	
	.herodigital
	{
		height: 200px;
	}
	
	.left
	{
		width: 400px;
	}
	
	.right
	{
		width: 400px;
	}
	
	p.left
	{
		width: 400px;
	}
	
	p.right
	{
		width: 400px;
	}
	
	span.services1
	{
		width: 210px;
		left: 540px;
	}
	
	span.services2
	{
		width: 210px;
		left: 490px;
	}
	
	span.services3
	{
		width: 210px;
		left: 430px;
	}
	
	span.services4
	{
		width: 210px;
		left: 380px;
	}
	
	span.services5
	{
		width: 210px;
		left: 320px;
	}
	
	span.services6
	{
		width: 210px;
		left: 260px;
	}
	
	span.services7
	{
		width: 210px;
		left: 200px;
	}
	
	span.services8
	{
		width: 210px;
		left: 140px;
	}
	
	span.services9
	{
		width: 210px;
		left: 80px;
	}
	
	span.services10
	{
		width: 210px;
		left: 20px;
	}
	
	.har1
	{
		float: left;
	}
	
	.har2
	{
		padding: 20px;
	}
	
	.har3
	{
		float: right;
	}
	
	.har4
	{
		margin: 20px;
	}
	
	.beast1
	{
		float: left;
	}
	
	.beast2
	{
		padding: 20px;
		float: right;
	}
	
	.beast3
	{
		float: left;
	}
	
	.beast4
	{
		float: right;
	}
	
	.cmp1
	{
		padding: 20px;
	}
	
	.cmp1 img
	{
		width: 600px;
	}
	
	.bargainz1
	{

	}
	
	.bargainz1 img
	{
		width: 450px;
	}
	
	.bargainz2
	{
		padding: 20px;
	}
	
	.bargainz2 img
	{
		width: 450px;
	}
	
	.bargainz3
	{

	}
	
	.bargainz3 img
	{
		width: 450px;
	}
	
	.bargainz4
	{

	}
	
	.bargainz4 img
	{
		width: 450px;
	}
	
	.soccer1
	{
		float: left;
	}
	
	.soccer1 img
	{
		width: 400px;
	}
	
	.soccer2
	{
		float: right;
	}
	
	.soccer2 img
	{
		width: 400px;
	}
	
	.hobbit1 img
	{
		width: 600px;
	}
	
	.star1
	{
		float: left;
	}
	
	.star1 img
	{
		width: 450px;
	}
	
	.star2
	{
		padding: 20px;
	}
	
	.star2 img
	{
		width: 450px;
	}
	
	.star3
	{

	}
	
	.star3 img
	{
		width: 450px;
	}
	
	.game1 img
	{
		width: 600px;
	}
	
	.thai1
	{
		left: 20%;
		position: relative;
	}
	
	.thai1 img
	{
		width: 450px;
	}
	
	.thai2
	{
		padding: 20px;
	}
	
	.thai2 img
	{
		width: 450px;
	}
	
	.thai3
	{
		position: relative;
		left: -20%;

	}
	
	.thai3 img
	{
		width: 450px;
	}
	
}
/* ********* END OF TABLET LAYOUT ********** */


/* ********** Mobile Layout: 751px to 850px. Inherits styles from: Small Mobile Layout. ********** */
@media only screen and (min-width: 751px)
{	
	/* *** Main Image *** */
	.imagecenter img
	{
		margin-left: -2%;
	}
	
	/* *** Planner Form *** */
	input, select
	{
		width: 400px;
	}
	
	textarea
	{
		width: 400px;
	}
}
/* ********** END OF LAYOUT ********** */


/* ********** Desktop Layout: 850px to a max of 1000px.  Inherits styles from: Mobile Layout and Tablet Layout.********** */
@media only screen and (min-width: 850px)
{
	/* *** Main Image *** */
	.imagecenter img
	{

	}
	
	.left
	{
		width: 500px;
	}
	
	.right
	{
		width: 500px;
	}
	
	p.left
	{
		width: 500px;
	}
	
	p.right
	{
		width: 500px;
	}
	
	.smallphoto
	{
		float: left;
		left: 20%;
		position: relative;
		margin-top: 20px;
	}
	
	.contact
	{
		float: left;
		left: 22%;
		position: relative;
		top: 10px;
	}
	
	.servicelist
	{
		display: block;
		float: right;
		font-family: Verdana;
		font-size: 14px;
		right: 10%;
		position: relative;
	}
	
	.socialmedia
	{
		float: left;
		position: relative;
		left: 33%;
		clear: left;
		margin-top: 100px;
	}
	
	.footer
	{
		float: left;
		position: relative;
		left: 20%;
		clear: left;
	}
	
	.nav
	{
		margin-left: 10px;
		margin-right: 10px;
	}
	
	span.services1
	{
		width: 230px;
		left: 720px;
	}
	
	span.services2
	{
		width: 230px;
		left: 660px;
	}
	
	span.services3
	{
		width: 230px;
		left: 580px;
	}
	
	span.services4
	{
		width: 230px;
		left: 500px;
	}
	
	span.services5
	{
		width: 230px;
		left: 420px;
	}
	
	span.services6
	{
		width: 230px;
		left: 340px;
	}
	
	span.services7
	{
		width: 230px;
		left: 260px;
	}
	
	span.services8
	{
		width: 230px;
		left: 180px;
	}
	
	span.services9
	{
		width: 230px;
		left: 100px;
	}
	
	span.services10
	{
		width: 230px;
		left: 20px;
	}
	
	.beast1 img
	{
		width: 400px;
	}
	
	.beast2 img
	{
		width: 400px;
	}
	
	.beast3 img
	{
		width: 400px;
	}
	
	.beast4 img
	{
		width: 400px;
	}
	
	.soccer1
	{

	}
	
	.soccer2
	{
		padding: 20px;
	}
}
/* ********** END OF DESKTOP LAYOUT ********** */


/* ********** Large Desktop Layout: 1000px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout.********** */
@media only screen and (min-width: 1000px)
{	
	span.services1
	{
		left: 720px;
	}
	
	span.services2
	{
		left: 660px;
	}
	
	span.services3
	{
		left: 580px;
	}
	
	span.services4
	{
		left: 500px;
	}
	
	span.services5
	{
		left: 420px;
	}
	
	span.services6
	{
		left: 340px;
	}
	
	span.services7
	{
		left: 260px;
	}
	
	span.services8
	{
		left: 180px;
	}
	
	span.services9
	{
		left: 100px;
	}
	
	span.services10
	{
		left: 20px;
	}
}


/* Extended Desktop Layout: 1233px to a max of 1400px.  Inherits styles from: Mobile Layout and Tablet Layout and Desktop Layout. */
@media only screen and (min-width: 1233px)
{	
	.left
	{
		width: 650px;
	}
	
	.right
	{
		width: 650px;
	}
	
	p.left
	{
		width: 650px;
	}
	
	p.right
	{
		width: 650px;
	}
	
	.contact
	{
		left: 25%;
	}
	
	span.services1
	{
		left: 950px;
		top: 200px;
	}
	
	span.services2
	{
		width: 250px;
		left: 850px;
	}
	
	span.services3
	{
		width: 250px;
		left: 750px;
	}
	
	span.services4
	{
		width: 250px;
		left: 650px;
	}
	
	span.services5
	{
		width: 250px;
		left: 550px;
	}
	
	span.services6
	{
		width: 250px;
		left: 450px;
	}
	
	span.services7
	{
		width: 250px;
		left: 350px;
	}
	
	span.services8
	{
		width: 250px;
		left: 250px;
	}
	
	span.services9
	{
		width: 250px;
		left: 150px;
	}
	
	span.services10
	{
		width: 250px;
		left: 50px;
	}
	
	.har1 img
	{
		width: 450px;
	}
	
	.har3 img
	{
		width: 450px;
	}
	
	.har4 img
	{
		width: 450px;;
	}
	
	.beast1 img
	{
		width: 500px;
	}
	
	.beast2 img
	{
		width: 500px;
	}
	
	.beast3 img
	{
		width: 500px;
	}
	
	.beast4 img
	{
		width: 500px;
	}
	
	.cmp1 img
	{
		width: 800px;
	}
	
	.hobbit1 img
	{
		width: 800px;
	}
	
	.game1 img
	{
		width: 800px;
	}
}
/* ********** END OF LARGE DESKTOP LAYOUT ********** */


/* ********** Extra Large Desktop Layout: 1401px to a max of 1550px.  Inherits styles from: Mobile Layout and Tablet Layout and Desktop Layout and Extended Desktop Layout.********** */
@media only screen and (min-width: 1401px)
{
	.left
	{
		width: 750px;
	}
	
	.right
	{
		width: 750px;
	}
	
	p.left
	{
		width: 750px;
	}
	
	p.right
	{
		width: 750px;
	}
	
	span.services1
	{
		width: 300px;
		left: 1100px;
	}
	
	span.services2
	{
		width: 300px;
		left: 1000px;
	}
	
	span.services3
	{
		width: 300px;
		left: 900px;
	}
	
	span.services4
	{
		width: 300px;
		left: 800px;
	}
	
	span.services5
	{
		width: 300px;
		left: 700px;
	}
	
	span.services6
	{
		width: 300px;
		left: 600px;
	}
	
	span.services7
	{
		width: 300px;
		left: 500px;
	}
	
	span.services8
	{
		width: 300px;
		left: 350px;
	}
	
	span.services9
	{
		width: 300px;
		left: 200px;
	}
	
	span.services10
	{
		width: 300px;
		left: 50px;
	}
}


/* Extended Large Desktop Layout: 1551px 1700px.  Inherits styles from: Mobile Layout and Tablet Layout and Desktop Layout and Extra Large Desktop Layout. */
@media only screen and (min-width: 1551px)
{
	.left
	{
		width: 800px;
	}
	
	.right
	{
		width: 800px;
	}
	
	p.left
	{
		width: 800px;
	}
	
	p.right
	{
		width: 800px;
	}
	
	.beast1 img
	{
		width: 600px;
	}
	
	.beast2 img
	{
		width: 600px;
	}
	
	.beast3 img
	{
		width: 600px;
	}
	
	.beast4 img
	{
		width: 600px;
	}
	
	.bargainz1 img
	{
		width: 600px;
	}
	
	.bargainz2 img
	{
		width: 600px;
	}
	
	.bargainz3 img
	{
		width: 600px;
	}
	
	.bargainz4 img
	{
		width: 600px;
	}
	
	.soccer1 img
	{
		width: 600px;
	}
	
	.soccer2 img
	{
		width: 600px;
	}
	
	.hobbit1 img
	{
		width: 800px;
	}
	
	.star1 img
	{
		width: 600px;
	}
	
	.star2 img
	{
		width: 600px;
	}
	
	.star3 img
	{
		width: 600px;
	}
	
	.game1 img
	{
		width: 800px;
	}
	
	.thai1 img
	{
		width: 600px;
	}
	
	.thai2 img
	{
		width: 600px;
	}
	
	.thai3 img
	{
		width: 600px;
	}
}
/* ********** END OF EXTENDED DESKTOP LAYOUT ********** /*


/* Super Large Desktop Layout: 1701px to 2000px.  Inherits styles from: Mobile Layout and Tablet Layout and Desktop, Extra Large Desktop, and Extended Desktop Layout. */
@media only screen and (min-width: 1701px)
{
	.left
	{
		width: 1000px;
	}
	
	.right
	{
		width: 1000px;
	}
	
	p.left
	{
		width: 1000px;
	}
	
	p.right
	{
		width: 1000px;
	}	
}