/*******************************************************************************************************************
*  Author: Tomas Lach (www.tomaslach.cz)                                                                           
*  Date: 23.12.2011                                                                                                
*******************************************************************************************************************/

/*******************************************************************************************************************
*  IMPORT OTHER STYLES                                                                                             
*******************************************************************************************************************/
@import url(reset.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic);

/*******************************************************************************************************************
*  BASE                                                                                                            
*******************************************************************************************************************/
html, body, table, th, tr, td, p, img, hr, ul, li, h1, h2, h3, h4, h5, div, form, fieldset {padding:0; margin:0; border:none;}
html {background: #37363b url('../img/noise.png');}
body {color: #71777d;font: normal o.8em Arial, Tahoma, Verdana;background:url(../img/Final%20Logo.png) repeat;margin: 0px;}
p {line-height: 1.4em;margin-bottom: 0.93em}
address {font-style: normal;padding-bottom: 15px;}

/*******************************************************************************************************************
*  LINKS                                                                                                           
*******************************************************************************************************************/
a, a:link, a:focus {color: #cb1829;outline: 0;text-decoration: none} /* color */
a:hover {color: #000;text-decoration: underline}
a.more {padding-right: 15px;color: #000;background: url('../img/arrow.png') no-repeat 100% 50%}

/*******************************************************************************************************************
*  H1 - H4                                                                                                         
*******************************************************************************************************************/
h1, h2, h3, h4 {font-family: "Lato", Arial;line-height: 1.5em;margin-bottom: 15px;font-weight: 700}
h1 {font-size: 2.8em;color: #fff;margin: 0;} 
h1 span {color: #e1aa02}
h2 {font-size: 1.75em;color: #5f5f61;text-shadow: 1px 1px 1px #fff;}
h3 {font-size: 0.9em;color: #000;text-shadow: 1px 1px 1px #fff;margin-bottom: 8px}
h4 {font-size: 1.0em;}
.separate {padding-bottom: 10px;margin-bottom: 20px;background: url('../img/double-border.png') repeat-x bottom}

/*******************************************************************************************************************
*  HEADER                                                                                                          
*******************************************************************************************************************/
#header {height: 98px;position: relative;} 
#header a#logo {font-size: 1.8em;font-weight: bold;display: block;line-height: 98px;position: absolute;top: 0;left: 0;color: #323338;font-family: "Lato", Arial;}
#header a#logo span {color: #d00401} /* color */
#header a#logo:hover {text-decoration: none;color: #000}
#header nav ul {position: absolute;top: 0;right: 0}
#header nav li {float: left;}
#header nav li a {float: left;color: #323338;display: block;padding: 32px 20px;text-decoration: none; }
#header nav li a strong {display: block;font-size: 1.1em;margin-bottom: 0;}
#header nav li a span {color: #989898;font-size: o.6em}
#header nav li.active a strong, #header nav li.active a span,
#header nav li a:hover strong, #header nav li a:hover span {cursor: pointer;color: #000 !important} 
#intro {color: #fff;height: 255px;position: relative;padding: 50px 550px 10px 0;position: relative}
#intro #macbook {position: absolute;bottom: -34px;right: 0;width: 550px;height: 309px;}
#intro #macbook img {position: relative;top: 20px;left:89px}
#intro h2 {font-size: 1.2em;text-shadow: 0 0 0;color: #afadae}
#intro p {color: #dddddd;margin-bottom: 20px}
#subIntro {height: 70px;position: relative;padding: 33px 0 7px 0;position: relative}
#subIntro h2 {color: #000;font-size: 1.4em;font-weight: normal;margin-bottom: 0}
#subIntro p {font-size: 1.1em}
#subIntro .button {position: relative;top: 5px;right: 60px !important}

/*******************************************************************************************************************
*  CONTENT                                                                                                         
*******************************************************************************************************************/
#container {background: #eeeff1;border-top: 1px solid #e0e0e0;border-bottom: 1px solid #e0e0e0;padding: 20px 0 0px}
#content .withIcon {padding-left: 135px;}
#content .icon1 {background:url(../img/image.jpg) no-repeat}
#content .icon2 {background:url(../img/course.jpg) no-repeat}
#content .icon3 {background:url(../img/salientfeatures.jpg) no-repeat}
.content img { margin-left:30px;}

/*******************************************************************************************************************
*  FOOTER                                                                                                          
*******************************************************************************************************************/
#twitterBar {background: #fff;padding: 15px 0 48px;}
#twitterBar .icon {position: absolute;top: -79px;left: -20px;display: block;width: 112px;height: 72px;background: url('../img/twitter.png') no-repeat}
#twitterBar p {margin: 0}
#footer {padding: 0 0 35px;color: #fff;font-size: 0.9em;}

#footer h3 {color: #fff;text-shadow: 0 0 0;margin-bottom: 20px;font-size: 1.4em}
#footer p {color: #fff;}
#footer a {color: #fff;}
#footer p .date {color: #fff}
#footer .followUs a {display: block;float: left;width: 27px;height: 28px;background-repeat: no-repeat;background-position: 0 0;text-indent: -9999px;margin-right: 5px}
#footer .followUs a:hover {background-position: 0 -1px}
#footer .followUs a.facebook {background-image:url(../img/Facebook_icon.png);}
#footer .followUs a.twitter {background-image:url(../img/Twitter-icon.png);}
#footer .followUs a.linkedin {background-image:url(../img/linkedin_logo.png);}
#footer .followUs a.youtube {background-image:url(../img/youtube_icon.png);}
#footer .followUs a.pin {background-image:url(../img/Pinterest-Logo.png);}

#footer .followUs a.delicious {}
#footer a#footerLogo {font-size: 2.0em;font-weight: bold;display: block;color: #fff;font-family: "Lato", Arial;margin-bottom: 16px;}
#footer a#footerLogo span {color: #ccc} /* color */
#footer a#footerLogo:hover {text-decoration: none;color: #ccc}
#footer input.text {background: #232323;border: 1px solid #454547;padding: 10px 5px;border-radius: 4px;width: 210px;color: #e0e0e0;font-style: italic;margin-bottom: 10px}
#footer input.submit {width: 108px;height: 31px;background: url('../img/submit-subscribe.png') no-repeat;border: 0;font-size: 1.0em;font-weight: bold;color: #660100;text-shadow: 1px 1px 1px #fb3752;font-family: Arial;cursor: pointer}
#footer input.submit:hover {color: #000}

/*******************************************************************************************************************
*  OTHER STYLES                                                                                                    
*******************************************************************************************************************/
.wrap {margin: 0 auto;position: relative;width: 940px}
.mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
a.button {display: block;float: left;background: url('../img/button-left.png') no-repeat;height: 42px;text-decoration: none;}
a.button span {cursor: pointer;position: relative;left: 20px;padding: 0 30px 0 10px;display: block;float: left;background: url('../img/button-right.png') no-repeat 100% 0;height: 42px;line-height: 43px;overflow: hidden;font-size: 1.0em;font-weight: bold;color: #660100;text-shadow: 1px 1px 1px #fb3752;text-decoration: none} /* shadow and text color */
a.button:hover span {color: #000}
.gallery .photo {margin-left: 20px}
.gallery .photo:first-child {margin-left: 0}
a.photo {display: block;float: left;}
a.photo img, img.photo {display: block;float: left;border: 1px solid #d3d3d3;background: #fff;padding: 3px}
a.photo:hover img {border-color: #d1d1d1}
.photoWrap {margin: 30px 0 30px}
.col1-3 {width: 280px;margin-left: 50px;float: left}
.col1-3 p:last-child, 
.col2-3 p:last-child {margin-bottom: 0}
.col1-3:first-child {margin-left: 0}
.col2-3 {width: 610px;margin-left: 50px;float: left}
.col1-4 {width: 280px;float: right; display:inline;margin: 30px 0 0 10px;}
.col1-4 ul                     { margin: 0; padding-left: 35px; }
.col1-4 ul li                  { font: 15px Georgia, Serif; margin: 0 0 8px 0; display:inline; }
.col1-4:first-child {margin-left: 0}
.col3-4 {width: 700px;float: right}
.marginBottom30 {margin-bottom: 30px; margin-top:40px;}
.date {font-size: 11px;display: block;margin-bottom: 10px }
.button_blue:hover{

 border:1px solid #68e9ff;
 background-color: #cef8ff; background-image: -webkit-gradient(linear, left top, left bottom, from(#cef8ff), to(#7fe0f8));
 background-image: -webkit-linear-gradient(top, #cef8ff, #7fe0f8);
 background-image: -moz-linear-gradient(top, #cef8ff, #7fe0f8);
 background-image: -ms-linear-gradient(top, #cef8ff, #7fe0f8);
 background-image: -o-linear-gradient(top, #cef8ff, #7fe0f8);
 background-image: linear-gradient(to bottom, #cef8ff, #7fe0f8);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#cef8ff, endColorstr=#7fe0f8);
}

.button_blue{border:1px solid #96f0ff; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:14px;font-family:arial, helvetica, sans-serif; padding: 5px 10px 5px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 
 background-color: #9bf1ff; background-image: -webkit-gradient(linear, left top, left bottom, from(#9bf1ff), to(#4fd4f5));
 background-image: -webkit-linear-gradient(top, #9bf1ff, #4fd4f5);
 background-image: -moz-linear-gradient(top, #9bf1ff, #4fd4f5);
 background-image: -ms-linear-gradient(top, #9bf1ff, #4fd4f5);
 background-image: -o-linear-gradient(top, #9bf1ff, #4fd4f5);
 background-image: linear-gradient(to bottom, #9bf1ff, #4fd4f5);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#9bf1ff, endColorstr=#4fd4f5);
}
.button_orange:hover{
border:1px solid #ff9913;
 background-color: #ffc579; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc579), to(#fb9d23));
 background-image: -webkit-linear-gradient(top, #ffc579, #fb9d23);
 background-image: -moz-linear-gradient(top, #ffc579, #fb9d23);
 background-image: -ms-linear-gradient(top, #ffc579, #fb9d23);
 background-image: -o-linear-gradient(top, #ffc579, #fb9d23);
 background-image: linear-gradient(to bottom, #ffc579, #fb9d23);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffc579, endColorstr=#fb9d23);
}

.button_orange{
 border:1px solid #ffad41; margin-left:10PX; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:14px;font-family:arial, helvetica, sans-serif; padding: 5px 10px 5px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #ffaf46; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffaf46), to(#e78404));
 background-image: -webkit-linear-gradient(top, #ffaf46, #e78404);
 background-image: -moz-linear-gradient(top, #ffaf46, #e78404);
 background-image: -ms-linear-gradient(top, #ffaf46, #e78404);
 background-image: -o-linear-gradient(top, #ffaf46, #e78404);
 background-image: linear-gradient(to bottom, #ffaf46, #e78404);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffaf46, endColorstr=#e78404);
}
#footer
{
	background:#000;
	border-top: solid 1px gainsboro;
	color: #999;
	font-size:14px;
	height:80px;
}

#footer.fixed
{
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 100;
	height: 64px;
	opacity: 0.9;
}

#footer.fixed:hover
{
	opacity: 1;	
}

#footer .content
{
	padding: 12px 0 10px 0;
}

#footer.fixed .content
{
	padding-top: 12px;
}

.no-footer
{
	margin-bottom: 75px;
}

.footer-left
{
	padding: 0 0 0 0px;
	width: 960px;
	background-position: 0 -340px;
	float: left;
}

.footer-right
{
	width:200px;
	float:right;
	font-size: 12px;
	line-height: 17px;
}

a.footer-twitter,a.footer-fb
{
	width: 40px;
	height: 38px;
	float: right;
	cursor: pointer;
}

a.footer-twitter:hover,a.footer-fb:hover
{
	opacity:0.7;
}

.footer-twitter
{
	background-position: -6px -411px;
}

.footer-fb
{
	background-position: -47px -411px;
}

#footer a,#footer a:link,#footer a:visited
{
	color: #999;
	font-weight:bold;
}

#footer a:hover
{
	color:#9dbc7a
}

.footer-copy
{
	font-size:0.75em;
}

.wrap-960
{
	width:960px;
	height:auto;
	margin:0 auto 0 auto;
	clear:both;
}
.fb-button
{
   
    background:#3c599b;
    width:100%;
   -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
padding: 5px 10px 5px 10px;
text-decoration: none;
display: inline-block;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
font-weight: bold;
color: #FFFFFF;
border:none;
margin-top:10px;
}
.marleft
{
    margin-left:0px;
}
.col1-9 .col1-3 .content img
{
    width:100%;
}
.icon1-footer {
width: 86px;
display: block;
height: auto;
position: absolute;
margin-left: -164px;
}
.icon1-footer img
{
    width:100%;
}