@import url('reset.css');
@import url('utilities.css');


/*==============================*/
/*
  Name: DEFAULT VERSION
  Author: Bronislav Churư
  Author URL: http://www.bronislavchury.cz
  Note: All content are copyrighted by author. Please, don't steal anything.
*/

/*========= CONTENT ==========*/
/*
  1} Body 
  2} Main Structure
  3} Content
  4} Footer
  4} Buttons
*/
/*==============================*/

/*=============================*/
/*========= 1} BODY ===========*/
/*=============================*/

html { -webkit-font-smoothing: antialiased; }
  
BODY {font-family: Helvetica, Arial, "Lucida Grande", sans-serif; width: 100%; font-size: 13px;}



/* =====[ FONTS ]================================================================================ */

/* -----[ AVANTGARDE GOTHIC ]-------------------------------------------------------------------- */

@font-face {
    font-family: 'Avantgarde';
    src: url('../fonts/avantgarde.eot');
    src:
        url('../fonts/avantgarde.eot?#iefix') format('embedded-opentype'),
        url('../fonts/avantgarde.woff') format('woff'),
        url('../fonts/avantgarde.ttf') format('truetype'),
        url('../fonts/avantgarde.svg#itcavantgardestdbold') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*=============================*/
/*====== 2} SCRURCTURE ========*/
/*=============================*/

.container {width: 940px;}
.background {background-color: #1a1c1e; float: left; width: 100%;}


#topPanel {
width: 100%; 
height: 69px; 
	background-color: #191b1d; /* layer fill content */
	-moz-box-shadow: 0 1px 3px rgba(2,3,3,.3), inset 0 4px 0 #19abf3; /* drop shadow and inner shadow */
	-webkit-box-shadow: 0 1px 3px rgba(2,3,3,.3), inset 0 4px 0 #19abf3; /* drop shadow and inner shadow */
	box-shadow: 0 1px 3px rgba(2,3,3,.3), inset 0 4px 0 #19abf3; /* drop shadow and inner shadow */
text-align: center;
}
#topPanel #logo {font-family: 'Avantgarde'; font-size: 22px; color: #FFFFFF; display: inline-block; position: relative; top: 25px;}
#topPanel #getInTouchBtn {border: 1px solid #333536; font-weight: bold;  text-align: center; color: #8e96a0; padding: 10px; position: absolute; right: 20px; top: 18px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; transition: all 200ms ease-out}
#topPanel #getInTouchBtn:hover {border-color: #1aabf4;  color: #1aabf4;}




#header {height: 947px; width: 940px; background: url('../design/devices/mac.png') center bottom no-repeat; position: relative;}

#header #get-app {width: 100%; display: block; position: absolute; text-align: center; right: 0; top: 70px;}
#header #get-app h1, #header #get-app h2 { text-shadow: 0 1px 2px rgba(0,0,0,.5);}
#header #get-app h1 {font-size: 60px; font-weight: bold; color: #FFF;}
#header #get-app h2 {font-size: 32px; line-height: 1.4; font-weight: normal; margin-top: 20px; color: #FFFFFF;}
#header #get-app .getAppBtn {left: 40%; margin-top: 50px;}


/*=============================*/
/*========= 3} CONTENT ========*/
/*=============================*/

#columns {width: 100%; float: left; clear: both; margin: 90px 0 80px 0;}
#columns li {width: 250px; float: left; display: inline-block; background-position: center top; background-repeat: no-repeat; text-align: center; margin-right: 90px; }
#columns li:nth-child(3) {margin-right: 0;}
#columns li h3 {font-size: 22px; color: #FFFFFF; display: block; clear: both; margin-top: 200px; line-height: 1.4;}
#columns li P {color: #bcbcc4; font-size: 14px; margin-top: 30px; line-height: 2;}

#columns li.phone {background-image: url('../design/icons/icon1.png');}
#columns li.brush {background-image: url('../design/icons/icon2.png');}
#columns li.wheel {background-image: url('../design/icons/icon3.png');}


#infoLine {background: #212325 url('../design/layout/hr.png') 0 0 repeat-x; height: 435px; width: 100%; clear: both;}
#infoLine .container {background: url('../design/devices/led.png') right bottom no-repeat; height: 435px;}
#infoLine .container h2 {font-family: 'Avantgarde'; font-size: 36px; color: #1aabf4; margin-top: 100px; display: inline-block;}

#infoLine .container p {font-size: 14px; color: #bcbcc4; width: 50%; margin-top: 25px; line-height: 1.6;}

#showcase {padding: 100px 0 100px 0; display: block; clear: both; width: 100%; float: left;}
#showcase h2 {font-family: 'Avantgarde'; font-size: 36px; color: #FFFFFF;}
#showcase P {color: #bcbcc4; font-size: 14px; margin-top: 20px; line-height: 1.6;}



.gallery {width: 940px; margin: 40px 0 10px 0;}
.gallery li {float: left; position: relative; margin: 0 20px 20px 0;}
.gallery li:nth-child(4n) {margin-right: 0;}
.gallery li img {float: left;}
.gallery li .hover {position: absolute; width: 100%; height: 100%; background: rgba(26,171,244,0.9) url('../design/icons/zoom.png') 50% 50% no-repeat; opacity: 0; -webkit-transition: opacity 300ms ease-out; -moz-transition: opacity 300ms ease-out; -ms-transition: opacity 300ms ease-out; -o-transition: opacity 300ms ease-out; transition: opacity 300ms ease-out;}
.gallery li a:hover > .hover {opacity: 1;}



#bottom {background: url('../design/layout/hr.png') 0 0 repeat-x; height: 400px; width: 100%; clear: both; position: relative;}
#bottom P {font-family: 'Avantgarde'; font-size: 28px; color: #FFFFFF; 	text-shadow: 0 2px 2px rgba(2,3,3,.35); /* drop shadow */ display: inline-block; float: left; width: 80%; top: 160px; position: relative; }
#bottom a.getAppBtn {float: right; top: 55px;}

/*=============================*/
/*======== 4} FOOTER ==========*/
/*=============================*/

#footer {padding-top: 50px;}

#footer #copyright {font-size: 14px; clear: both; float: left; margin: 26px 0 0 0; color: #bcbcc4; line-height: 1.5;  display: inline-block;}
#footer #copyright .heart {color: #f5006e;}
#footer #copyright a {color: #f5006e;}
#footer #copyright a:hover {text-decoration: underline;}

#footer #social {float: right; display: inline-block; margin: 10px 0 0 0;}
#footer #social li {float: left; margin-right: 25px; height: 44px; position: relative; width: 112px;}
#footer #social li a {display: block; position: relative;height: 44px;}
#footer #social li a span {display: block; height: 44px; position: absolute;}
#footer #social li a .normal {background-position: 0 0; z-index: 5;}
#footer #social li a .hover {background-position: 0 -44px; opacity: 0; z-index: 10; -webkit-transition: opacity 300ms ease-out; -moz-transition: opacity 300ms ease-out; -ms-transition: opacity 300ms ease-out; -o-transition: opacity 300ms ease-out; transition: opacity 300ms ease-out;}

#footer #social li.twitter a span {background-image: url('../design/icons/twitter.png'); width: 99px;}
#footer #social li.facebook a span {background-image: url('../design/icons/facebook.png'); width: 119px; }
#footer #social li.google a span {background-image: url('../design/icons/google.png'); width: 110px; }

#footer #social li a:hover > .hover {opacity: 1;}

#footer #credits {border-top: 1Px solid #323435; width: 100%; text-align: center; margin-top: 60px; float: left; padding: 40px 0 40px 0; display: block; clear: both;}
#footer #credits P {color: #FFFFFF; font-size: 14px;}
#footer #credits P.authors {color: #bcbcc4; font-size: 13px; margin-top: 10px;}
#footer #credits P.authors a {color: #bcbcc4;}


/*=============================*/
/*======== 5} BUTTONS =========*/
/*=============================*/

.getAppBtn {display: block; position: relative; margin-top: 40px; width: 199px; height: 51px;}
.getAppBtn .text {font-size: 18px; font-weight: bold; color: #FFF; text-transform: uppercase; text-align: center; display: block; 	text-shadow: 0 -1px 0 rgba(2,3,3,.2); position: absolute; line-height: 3; z-index: 10; width: 199px; height: 51px;}

.getAppBtn .normal {
  position: absolute;
  z-index: 1;
  display: block;
  	width: 199px;
	height: 51px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; /* border radius */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /* prevents bg color from leaking outside the border */
	background-color: #1aabf3; /* layer fill content */
	-moz-box-shadow: 0 2px 2px rgba(2,3,3,.15), inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 5px rgba(255,255,255,.05); /* drop shadow, inner shadow and inner glow */
	-webkit-box-shadow: 0 2px 2px rgba(2,3,3,.15), inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 5px rgba(255,255,255,.05); /* drop shadow, inner shadow and inner glow */
	box-shadow: 0 2px 2px rgba(2,3,3,.15), inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 5px rgba(255,255,255,.05); /* drop shadow, inner shadow and inner glow */
  behavior: url('pie.html');
}


.getAppBtn .hover {position: absolute; top: 0; left: 0; opacity: 0; 
  width: 199px;
  height: 51px;
  z-index: 5;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; /* border radius */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /* prevents bg color from leaking outside the border */
	background-color: #008bed; /* layer fill content */
	-moz-box-shadow: 0 2px 2px rgba(2,3,3,.15), inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 5px rgba(255,255,255,.05); /* drop shadow, inner shadow and inner glow */
	-webkit-box-shadow: 0 2px 2px rgba(2,3,3,.15), inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 5px rgba(255,255,255,.05); /* drop shadow, inner shadow and inner glow */
	box-shadow: 0 2px 2px rgba(2,3,3,.15), inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 5px rgba(255,255,255,.05); /* drop shadow, inner shadow and inner glow */
  behavior: url('pie.html');
  -webkit-transition: opacity 300ms ease-out; -moz-transition: opacity 300ms ease-out; -ms-transition: opacity 300ms ease-out; -o-transition: opacity 300ms ease-out; transition: opacity 300ms ease-out;
  }



.getAppBtn:hover > .hover {opacity: 1;}