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

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

/*******************************************************************************************************************
*  WEB FONTS
*******************************************************************************************************************/
@font-face {
    font-family: 'eurostile';
    src: url('../webfonts/137-webfont.eot');
    src: url('../webfonts/137-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/137-webfont.woff') format('woff'),
         url('../webfonts/137-webfont.ttf') format('truetype'),
         url('../webfonts/137-webfont.svg#eurostileregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*******************************************************************************************************************
*  BASE
*******************************************************************************************************************/
html {background: #37363b url('../img/noise.png');}
body {color: #71777d;font: normal 13px Arial, Tahoma, Verdana; }
p {line-height: 1.7em;margin-bottom: 15px}
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}
#slider h3, #slider h2, h1 {font-size: 1.8em;color: #fff;margin: 0;}
#slider h3{}
h1 span {color: #e1aa02}
h2 a, h2 {font-size: 1.5em;color: #5f5f61;text-shadow: 1px 1px 1px #fff;}
h3 {font-size: 1em;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; background:#FFFFFF;}
header{background:#ffffff url('../img/background-x.png') repeat-x; }
#header a#logo { width:356px; height:70px; display:block; text-indent:-9999px; background:url(../img/gem-agenies.gif) no-repeat left bottom;}
#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; font-family:"eurostile";}
#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.2em;margin-bottom: 0; text-transform:uppercase;}
#header nav li a span {color: #989898;font-size: 11px}
#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: 348px;position: relative;padding: 20px 0; position: relative; background:url(../img/gem.png) no-repeat center center;}

#slider, #intro #macbook {position: absolute; right: 0; top:40px; width: 575px; height: 383px; overflow:hidden; }
#slider.fullwidth, #slider.fullwidth li{ width:100%; background-repeat:no-repeat; background-position:right bottom;}
#slider li{position:absolute; display:none; width:575px; height:383px;}
#slider li.active{display:inline;}
#intro #macbook img {position: relative;top: 20px;left:89px}
#intro p {color: #dddddd;margin-bottom: 20px}
#subIntro {height: 250px;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 20px}
#content .withIcon {padding-left: 100px;}
#content .icon1 {background: url('../img/tablet.png') no-repeat}
#content .icon2 {background: url('../img/support.png') no-repeat}
#content .icon3 {background: url('../img/cctv.png') no-repeat}


/*******************************************************************************************************************
*  FOOTER
*******************************************************************************************************************/
#twitterBar {background: #fff;padding: 15px 0; height:50px; overflow: hidden;}
#twitterBar ul{width:940px; margin:auto;}
#twitterBar li{float:left; margin:0 5px; height: 80px;}
#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: 40px 0;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/icon-facebook.png');}
#footer .followUs a.twitter {background-image: url('../img/icon-twitter.png');}
#footer .followUs a.rss {background-image: url('../img/icon-rss.png');}
#footer .followUs a.linkedin {background-image: url('../img/icon-linkedin.png');}
#footer .followUs a.vimeo {background-image: url('../img/icon-vimeo.png');}
#footer .followUs a.digg {background-image: url('../img/icon-digg.png');}
#footer .followUs a.delicious {background-image: url('../img/icon-delicious.png');}
#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}


.col450{width:450px; margin-left:40px; float:left;}
.no-pad{margin-left:0;}

/*
* CLEAR FIX
*/
.clear:after{
  content: "";
  display: table;
  clear: both;
}
.right{float: right;}
.blackbg{background-color: #000000; }
.blackbg iframe{ margin: auto}
/*******************************************************************************************************************
*  OTHER STYLES
*******************************************************************************************************************/
.wrap {margin: 0 auto;position: relative;width: 980px}
.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}
.product_list li, .gallery li{float: left; margin: 0 45px 45px 0;}
.product_list li:nth-child(4n+4), .gallery li:nth-child(4n+4){ margin-right: 0;}
.product_list .photo ,.gallery .photo {margin-left: 20px}
.product_list .photo , .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}
.col{float:left;}
.size1of2{width:50%;}
.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: 220px;margin-left: 20px;float: left}
.col1-4:first-child {margin-left: 0}
.col3-4 {width: 700px;float: right}
.marginBottom30 {margin-bottom: 30px}
.date {font-size: 11px;display: block;margin-bottom: 10px }

/*
* FORM
*/
.form_btn{width:123px; height:42px; background:url(../img/submit.png) no-repeat; float:right;}
.form_btn input{width:123px; height:42px; border:none; background:none; text-align:center; font-size: 1.0em;font-weight: bold;color: #660100;text-shadow: 1px 1px 1px #fb3752;}
textarea, input{ width:450px; border:1px solid #aaa; background:#fff; padding:10px; font-size:16px; margin-bottom:20px;}
textarea{height:100px; min-height:100px; max-height:100px; min-width:450px; max-width:450px;}
.error{border-color:#F00; background-color:#F00; color:#FFF;}
#contact_frm{min-height:300px;}