/*
Project Name: Create a Responsive Web Design Template
Author: Harry Atkins
Published on: http://www.onextrapixel.com/
*/

::-moz-selection {
background-color: #91D8f7;
color: #fff;
}
::selection {
background-color: #91D8f7;
color: #fff;
}

a {
 outline: 0;
 color: #0099FF;
 text-decoration: none;
}

a:hover {
 text-decoration: underline;
}

p a:hover {
 color: #00FFFF;
}

a:active {
 outline: none;
 position: relative;
 top: 2px;
}

.clearfix {
 clear: both;
}

/*------------------------------------*\
  MAIN
\*------------------------------------*/

body {
 background: url("images/bg_jack.jpg") no-repeat fixed 0 0 #333333;
 background-size:cover;
 color: #fff;
 font:100% "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
 -webkit-transition-property: font-size;
 -moz-transition-property: font-size;
 transition-property: font-size;
 -webkit-transition-duration: 0.5s, 0.5s;
 -moz-transition-duration: 0.5s, 0.5s;
 transition-duration: 0.5s, 0.5s;
 -webkit-transition-timing function: linear, ease-in;
 -moz-transition-timing function: linear, ease-in;
 transition-timing function: linear, ease-in;
}

#wrapper {
 margin: 0 auto;
 max-width: 980px;
 width: 90%;
 padding: 0px 0;
}

#header {
 padding: 0 3px;
}

#header h1 a {
 -moz-transition: opacity 0.5s ease-out 0s;
 background: none repeat scroll 0 0 transparent;
 display: block;
 height: 73px;
padding: 24px 144px;
 width: 624px;
}

#masthead h1 a:hover {
 -moz-transition: opacity 0.15s ease-in 0s;
 opacity: 0.75;
 border:2px solid red;
}

h1 {
 font-size: 40px;
 
 padding: 0 10px;
 -webkit-transition-property: font-size;
 -moz-transition-property: font-size;
 transition-property: font-size;
 -webkit-transition-duration: 0.5s, 0.5s;
 -moz-transition-duration: 0.5s, 0.5s;
 transition-duration: 0.5s, 0.5s;
 -webkit-transition-timing function: linear, ease-in;
 -moz-transition-timing function: linear, ease-in;
 transition-timing function: linear, ease-in;
 font-family:Arial, Helvetica, sans-serif;
 color:#fff;
 text-shadow: 0 0 0.2em #99ffff, 0 0 0.2em #99ffff, 0 0 0.2em #99ffff;
}

.logo a:hover {
 text-decoration: none;
 color: #27B3CF;
}

h2 {
 font-size: 20px;
  padding: 0px;
 -webkit-transition-property: font-size;
 -moz-transition-property: font-size;
 transition-property: font-size;
 -webkit-transition-duration: 0.5s, 0.5s;
 -moz-transition-duration: 0.5s, 0.5s;
 transition-duration: 0.5s, 0.5s;
 -webkit-transition-timing function: linear, ease-in;
 -moz-transition-timing function: linear, ease-in;
 transition-timing function: linear, ease-in;
 font-family:Arial, Helvetica, sans-serif;
 color:#fff;
 text-shadow: 0 0 0.2em #99ffff, 0 0 0.2em #99ffff, 0 0 0.2em #99ffff;
}

h3 {
 font-size: 15px;
 padding:1px 5px;
 -webkit-transition-property: font-size;
 -moz-transition-property: font-size;
 transition-property: font-size;
 -webkit-transition-duration: 0.5s, 0.5s;
 -moz-transition-duration: 0.5s, 0.5s;
 transition-duration: 0.5s, 0.5s;
 -webkit-transition-timing function: linear, ease-in;
 -moz-transition-timing function: linear, ease-in;
 transition-timing function: linear, ease-in;
 font-family:Arial, Helvetica, sans-serif;
 color:#fff;
 text-shadow: 0 0 0.2em #99ffff, 0 0 0.2em #99ffff, 0 0 0.2em #99ffff;
}

h4 {
 font-size: 13px;
 padding: 1px 5px;
 -webkit-transition-property: font-size;
 -moz-transition-property: font-size;
 transition-property: font-size;
 -webkit-transition-duration: 0.5s, 0.5s;
 -moz-transition-duration: 0.5s, 0.5s;
 transition-duration: 0.5s, 0.5s;
 -webkit-transition-timing function: linear, ease-in;
 -moz-transition-timing function: linear, ease-in;
 transition-timing function: linear, ease-in;
 font-family:Arial, Helvetica, sans-serif;
 color:#fff;
 text-shadow: 0 0 0.2em #99ffff, 0 0 0.2em #99ffff, 0 0 0.2em #99ffff;
}

#nav {
 background: #222;
 padding: 0;
 margin: 10px 0;
 font-family:Arial, Helvetica, sans-serif;
}

#nav li {
 float: left;
 height: 23px;
 padding: 10px 0;
 width: 18%;
}

#nav li:first-child {
 background: none;
}

#nav a {
 color: #0099ff;
 text-decoration:none;
}

#nav a:hover {
 text-decoration: none;
 color: #ccc;
}

#nav a.active {
 color:#F6F;
}

#nav li.current a:link,
#nav li.current a:visited,
#nav li.current a:hover {
 color:#00FFFF;
}

nav {
 background: #222;
 padding: 0;
 margin: 10px 0;
}

nav a {
 color: #F9F9F9;
 display: block;
 float: left;
 padding: 10px;
}

nav a:visited {
 color: #f9f9f9;
}

nav a:hover {
 text-decoration: none;
 background: #27B3CF;
}

nav a:active {
 position: relative;
 top: 0;
}

.left-col {
 width: 50%;
 float: left;
}

.sidebar {
 width: 40%;
 float: right;
 margin-bottom: 10px;
 -webkit-transition-property: width;
 -moz-transition-property: width;
 transition-property: width;
 -webkit-transition-duration: 0.5s, 0.5s;
 -moz-transition-duration: 0.5s, 0.5s;
 transition-duration: 0.5s, 0.5s;
 -webkit-transition-timing function: linear, ease-in;
 -moz-transition-timing function: linear, ease-in;
 transition-timing function: linear, ease-in;
}

#featured {
 padding: 20px;
}

#latest {
 padding: 20px 0;
}

#about {
 padding: 20px;
}

p {
 padding: 0 5px 15px 5px;
}

ul {
 list-style: none;
}

ul li {
 margin: 0 5px;
}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - footer */
#footer {
 border-top:1px solid #ccc;
 font-size: 10px;
 margin-bottom: 90px;
 padding: 40px 5px;
}

ul#footer-one {
 color:#fff;
 float: right;
}

ul#footer-one li a:link {
}

ul#footer-one li a:hover {
 opacity:0.8;
 filter:alpha(opacity=80);
}

ul#footer-two {
 float: left;
 list-style:none;
}

.li1 {
 background: url("images/youtube.png") no-repeat scroll 0 50% transparent;
 padding-left: 32px;
 margin-bottom:10px;
}

.li1 a {
 color:00FFFF;
}

.li1 a:hover {
 color:#00FFFF;
}

.li2 {
 background: url("images/vimeo.png") no-repeat scroll 0 50% transparent;
 padding-left: 32px;
}

.li2 a {
 color:00FFFF;
}

.li2 a:hover {
 color:#00FFFF;
}

.heading {
 font-weight:bold;
 font-size:12px;
 margin-bottom:15px;
 color:#FFF
}

/*#footer {
 padding: 5px;
 border-top:1px solid #ccc;
}

#footer p {
 color: #ccc;
 display: inline;
 font-size: 11px;
 padding: 5px;
}

#footer a {
 color:#555;
 text-decoration:none;
}

#footer a:hover {
 color:#fff;
 text-decoration:underline;
}*/

pre {
 overflow: scroll;
 font-size: 10px;
}

.left-side {
 width: 40%;
 float: right;
 margin-bottom: 10px;
 -webkit-transition-property: width;
 -moz-transition-property: width;
 transition-property: width;
 -webkit-transition-duration: 0.5s, 0.5s;
 -moz-transition-duration: 0.5s, 0.5s;
 transition-duration: 0.5s, 0.5s;
 -webkit-transition-timing function: linear, ease-in;
 -moz-transition-timing function: linear, ease-in;
 transition-timing function: linear, ease-in;
}

.right-side {
 width: 50%;
 float: left;
}

.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

#nav2 {
 padding: 0;
 margin: 10px 0;
}

#nav2 li {
 float: left;
 padding: 10px 0;
 width: 45%;
}

#nav2 li:last-child {
 width: 40%;
 float: right;
 margin-bottom: 10px;
}

/*-----------------------------------------------------------------about */
#nav4 {
 padding: 0;
 margin: 10px 0;
 border-bottom:1px dotted #ccc;
}

#nav4 li {
 float: left;
 padding: 10px 0;
 width: 45%;
}

#nav4 li:last-child {
 width: 40%;
 float: right;
 margin-bottom: 10px;
}

#nav5 {
 padding: 0;
 margin: 10px 0;
 border-bottom:1px dotted #ccc;
}

#nav5 li {
 float: left;
 padding: 10px 0;
 width: 45%;
}

#nav5 li:last-child {
 width: 40%;
 float: right;
 margin-bottom: 10px;
}

#nav6 {
 padding: 0;
 margin: 10px 0;
}

#nav6 li {
 float: left;
 padding: 10px 0;
 width: 45%;
}

#nav6 li:last-child {
 width: 40%;
 float: right;
 margin-bottom: 10px;
}




#about-list {
 padding: 0;
 margin: 10px 0;

}

#about-list li {
 list-style:url(images/bullet-point.png);
 /*background:url(images/bullet-point.png) 1px 4px no-repeat;*/
 
 
  float: left;
 padding: 10px 0;
 width: 100%;
 margin:7px 0 20px 20px;
 
 
 
 
 
 
}

#about-list li:last-child {
 width: 100%;
 float: left;
 margin-bottom: 10px;
}
/*-----------------------------------------------------------------homepage */
#nav3 {
 padding: 0;
 margin: 10px 0;
}

#nav3 li {
 float: left;
 padding: 10px 0;
 width: 100%;
}

#nav2 li:first-child {
 background: none;
}

/*-----------------------------------------------------------------contact page */
#contact {
 padding: 0;
 margin: 10px 0;
}

#contact li {
 float: left;
 padding: 10px 0;
 width: 45%;
}

#contact li:last-child {
 width: 40%;
 float: right;
 margin-bottom: 10px;
}

/*-----------------------------------------------------------------form */
#contactarea {
 margin:0px auto;
 text-align:left;
 padding:0px;
 border:0px solid #333;
 font-size: 16px;
}

#inputlabel {
 font-family:Arial, Helvetica, sans-serif;
 color:#fff;
 text-shadow: 1px 1px 1px #000;
 font-size: 12px;
 padding-right:10px;
 height:20px;
 width:80px;
 display:inline-block;
 margin-bottom:10px;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
}

#inputbox {
 border: 1px solid #000;
 height:21px;
 width: 200px;
 padding: 0px;
 font-family:Arial, Helvetica, sans-serif;
 font-size: 12px;
 color:#666666;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
}

#textarea {
 border: 1px solid #000;
 height:100px;
 width:;
 padding: 0px;
 font-family:Arial, Helvetica, sans-serif;
 font-size: 12px;
 color:#666666;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
}

#submitbutton {
 border: 1px solid #000;
 background:-moz-linear-gradient(center top, #fff39b, #ffca7d) repeat scroll 0 0 transparent;
 height:35px;
 width:80px;
 color:#000000;
 margin-left:90px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
}

/*-----------------------------------------------------------------list */

#main ul {
 padding:0px;
 margin:0px;
 margin-left:10px;
}

#main li {
 list-style:url(images/bullet-point.png);
 /*background:url(images/bullet-point.png) 1px 4px no-repeat;*/
 
 
  float: left;
 padding: 10px 0;
 width: 100%;
 margin:7px 0 20px 10px;
}

.image-border {
 border:3px solid #ccc;
 -moz-box-shadow:-10px 10px 0px #666;
 -webkit-box-shadow:-10px 10px 0px #666;
 box-shadow:-10px 10px 0px #666;
}
.image-border-purple {
 border: 3px solid #129BFD;
 -moz-box-shadow:-10px 10px 0px #E002EC;
 -webkit-box-shadow:-10px 10px 0px #E002EC;
box-shadow: -10px 10px 0 #E002EC;
}
.image-border-yellow {
 
 border: 3px solid #E08340;
    box-shadow: -10px 10px 0 #FFE26F;
 -moz-box-shadow:-10px 10px 0px #FFE26F;
 -webkit-box-shadow:-10px 10px 0px #FFE26F;

}