@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.html#itcavantgardestdbold') format('svg');
    font-weight: normal;
    font-style: normal;
}


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

/*#header, #content, #footer {display: block;}   */
.container {width: 940px;}
.background {background-color: #FFF; float: left; width: 100%;}

.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(250,86,90,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;}

#topPanel {
width: 100%; 
height: 69px; 
	background-color: #FFFFFF; /* layer fill content */
	-moz-box-shadow: 0 1px 3px rgba(2,3,3,.3), inset 0 4px 0 #fa565a; /* drop shadow and inner shadow */
	-webkit-box-shadow: 0 1px 3px rgba(2,3,3,.3), inset 0 4px 0 #fa565a; /* drop shadow and inner shadow */
	box-shadow: 0 1px 3px rgba(2,3,3,.3), inset 0 4px 0 #fa565a; /* drop shadow and inner shadow */
}
#topPanel #logo {font-family: 'Avantgarde'; font-size: 22px; color: #333333; display: inline-block; position: relative; top: 25px; left: 50%;}
#topPanel #getInTouchBtn {border: 1px solid #d5dae0; 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: #fa565a;  color: #fe4445;}




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

#header #get-app h1, #header #get-app h2 {color: #FFF; text-shadow: 0 1px 2px rgba(0,0,0,.5);}

#header #get-app {width: 500px; height: 400px; display: block; position: absolute; right: 0; top: 170px;}

#header #get-app h1 {font-size: 60px; font-weight: bold;}
#header #get-app h2 {font-size: 32px; line-height: 1.4; font-weight: bold; margin-top: 20px;}



/*=============================*/
/*========= 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 #212325; display: block; clear: both; margin-top: 200px; line-height: 1.4;}
#columns li P {color: #7c8387; 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: #f8f8f9 url('../design/layout/hr.png') 0 0 repeat-x; height: 435px; width: 100%; clear: both;}
#infoLine .container {background: url('../design/devices/iphone2.png') right bottom no-repeat; height: 435px;}
#infoLine .container h2 {font-family: 'Avantgarde'; color: #fa565a; font-size: 36px; display: inline-block; margin-top: 100px;}
#infoLine .container P {font-size: 14px; color: #7c8387; 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: #212325;}
#showcase P {color: #7c8387; font-size: 14px; margin-top: 20px; line-height: 1.6;}


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

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

/* #footer {width: 100%; height: 92px; margin-top: 40px; background-color: #FFF; clear: both;}   */

#footer {padding-top: 50px;}
#footer #copyright {font-size: 14px; clear: both; float: left; margin: 26px 0 0 0; color: #78797d; 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 #e6e9ed; width: 100%; text-align: center; margin-top: 60px; float: left; padding: 40px 0 40px 0; display: block; clear: both;}
#footer #credits P {color: #212325; font-size: 14px;}
#footer #credits P.authors {color: #7c8387; font-size: 13px; margin-top: 10px;}
#footer #credits P.authors a {color: #7c8387;}


/*=============================*/
/*======== 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: 0px -1px -1px #c84549; 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: #f95559; /* 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: #fd4345; /* 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;}