/* HTML5 ✰ */

footer, header, section {display:block;}

html {font-size:100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body {margin:0; font-size:13px; line-height:1.231; font-family:sans-serif; color:#222;}

::-moz-selection {background:#fe57a1; color:#fff; text-shadow:none;}
::selection {background:#fe57a1; color:#fff; text-shadow:none;}

ul, ol {margin:1em 0; padding:0 0 0 40px;}
img {border:0; -ms-interpolation-mode:bicubic; vertical-align:middle;}

body {color:#000; font:16px Arial, Helvetica, "Liberation sans", "Bitstream Vera Sans", sans-serif; line-height:1; position:relative; background:#6382b0; /*url('img/bg.png') repeat top right;*/}
/*a,a:hover,a:focus {color:#f2ea9b;}*/
h1 {font-size:2em; font-weight:700; margin:0 0 0.75em;}

#container {width:1195px; height:796px; margin:-10px auto 0 auto; padding-top:10px; background:url(img/bg.jpg) no-repeat 0 0;}
#contact {margin:5px auto 0 100px; width:325px; font-size:1em; color:#fff;}
#social {width:185px; *width:200px; border:0px solid; float:right; margin:-15px 10px 0 auto;}
header {height:201px; text-indent:-99999px; background:url('img/heading1.png') no-repeat center 20px;}
#main {height:450px;}
#sites {margin-top:40px; list-style:none; text-align:center; font-size:12px;}
	#sites li {display:inline; margin-right:40px;}
		#sites li a {color:#000;}
/* ================================================================ 
This copyright notice must be untouched at all times.

Copyright (c) 2005-2011 Stu Nicholls - CSS play. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* this is a CSS answer to fix the hover tilde problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {0% {zoom:1;} 100% {zoom:1;}}

.slide {width:8500px; position:absolute; height:425px; right:-2160px; text-align:right;}
.window {width:720px; height:405px; position:relative; margin:0 auto; overflow:hidden;}
.slide img {display:inline-block; width:240px; opacity:0.5; margin:70px 0 0 0; cursor:pointer;
-o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
-ms-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.slide .p7 {margin-right:0; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s;}
.slide img:focus {width:480px; margin-left:-60px; margin-right:-60px; margin-bottom:-80px; margin-top:0; position:relative; z-index:100; opacity:1; outline:0;
-o-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
-ms-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
}
.slide .p1:focus ~ img.p21 {margin-right:-2460px;}
.slide .p2:focus ~ img.p21 {margin-right:-2220px;}
.slide .p3:focus ~ img.p21 {margin-right:-1980px;}
.slide .p4:focus ~ img.p21 {margin-right:-1740px;}
.slide .p5:focus ~ img.p21 {margin-right:-1500px;}
.slide .p6:focus ~ img.p21 {margin-right:-1260px;}
.slide .p7:focus ~ img.p21 {margin-right:-1020px;}
.slide .p8:focus ~ img.p21 {margin-right:-780px;}
.slide .p9:focus ~ img.p21 {margin-right:-540px;}
.slide .p10:focus ~ img.p21 {margin-right:-300px;}
.slide .p11:focus ~ img.p21 {margin-right:-60px;}
.slide .p12:focus ~ img.p21 {margin-right:180px;}
.slide .p13:focus ~ img.p21 {margin-right:420px;}
.slide .p14:focus ~ img.p21 {margin-right:660px;}
.slide .p15:focus ~ img.p21 {margin-right:900px;}
.slide .p16:focus ~ img.p21 {margin-right:1140px;}
.slide .p17:focus ~ img.p21 {margin-right:1380px;}
.slide .p18:focus ~ img.p21 {margin-right:1620px;}
.slide .p19:focus ~ img.p21 {margin-right:1860px;}
.slide .p20:focus ~ img.p21 {margin-right:2100px;}
.slide .p21:focus {margin-right:2280px;}

/*footer {margin:5px 0 0 -30px; font-size:12px;}
	footer a , footer a:visited , footer a:hover {color:#000;}
	footer a:focus {outline:thin dotted;}
	footer a:hover, footer a:active {outline: 0; text-decoration:underline;}*/

/* ==|== non-semantic helper classes ======================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* ==|== media queries ====================================================== */
@media only screen and (min-width: 480px) {}
@media only screen and (min-width: 768px) {}

/* ==|== print styles ======================================================= */
 @media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}