@charset "utf-8";

/* ============================== */
/* 
	- Title: Purrfect
	- Autor: Imaginacionweb
	- Email: jmartinez@imaginacionweb.net
	- Version: 1.00
*/
/* ============================== */	

/* ---------------------- 
	Stylesheet Guide
-------------------------

01. Import styles
	-  bootstrap.css  - include resetes ( Media querys, grid-responsive,layout).
	-  bootstrap-responsive.css	
	-  flexslider.css  - Slide
	-  animate.css  - Animations in css3
	-  font-awesome.min.css  - Icons
	-  default.css  - Default color skin
	-  Google Fonts  - Open sans -Oswald - Roboto	
	
02. Basic Elements
	-  Standar Styles	
	-  Class and styles Generals
	-  center
	-  top
	-  bottons

0.3.  Structure
	-  Nav
	-  Features
	-  description
		-  Color Icons
	-  How to work
	-  Pricing Table
	-  More Features 
	-  Option Buy
	-  Footer		
	-  Contact Form	
	-  toTop
	
0.4.	Layout 1920px version

0.5.	Layout for 1440px Version

0.6.	Layout for 1024px Version

0.7.	Layout for 900px Version

0.8.	Layout for 767px mobile version

0.9.	Layout for 685px mobile version

10.		Layout for 600px mobile version

11.		Layout for 480px mobile version

12.		Layout for 380px mobile version

13.		Layout for 320px mobile version

*/

/* ---------------------------------------------------------------------- */
/*	Import styles
/* ---------------------------------------------------------------------- */

/* bootstrap.css  - include resetes ( Media querys, grid-responsive,layout).*/
@import url("bootstrap/bootstrap.css");
@import url("bootstrap/bootstrap-responsive.css");
/*flexslider*/
@import url("flexslider.css");
/*Animations*/
@import url("animations/animate.css");
/*Icons*/
@import url("icons/font-awesome.min.css");
/*Skins*/
@import url("skins/default.css");
/*Slide*/
@import url("slide/custom.css");
@import url("slide/style.css");
/*Google Fonts*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,600,700);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);


/* Standar Styles --------------------------------------------------------*/
body{	
	line-height:26px;
	background-color: #fff;
	color: #191919;
	font: normal 16px "Roboto",arial,sans-serif;
	font-weight: 300;
}
a:hover{
	text-decoration: none;	
}
p{
	color: #666;
	line-height: 1.8em;
}
h1 {font-size:24px;}
h2 {font-size:22px;}
h3 {font-size:18px;}
h4 {font-size:16px;}
h5 {font-size:14px;}
h6 {font-size:12px;}

h1, h2, h3, h4, h5, h6 {
	margin: 10px 0;
	line-height: 30px;
	font-weight: 700;
	font-family: 'Oswald', sans-serif;
}
h1, h2{	
	text-transform: uppercase;
}

/* Class and styles General ----------------------------*/
.clearfix{
	width:1px;
	height:1px;	
	display:block;
	clear:both;
	content:" , ";
}
ul{
	margin: 0;
}
.center{
	text-align:center; 
}
.top{
	margin-top: 40px;
}
.botton{
	padding:10px 25px;
	text-align: left;
	font-weight: 400;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	-webkit-transition: all .2s ease-in-out; 
	text-shadow: 1px 1px 0 rgba(0,0,0,.15);
}
.botton:hover{
	border-radius: 10px;
	background-color: #303030;
	-webkit-transition: all .2s ease-in-out; 
}
.logo li,
.copry ul li{	
	border-right: 1px solid #969696;
}
/* Nav --------------------------------------------------*/
nav,footer{
	padding: 25px 0;
}
.social{
	text-align: right;
}
.logo li,.social li{
	display: inline-block;
}
.logo li a{
	font-size: 25px;
	font-weight: 700;
	font-family: 'Open Sans', sans-serif;
}
.logo li{
	margin-right: 20px;
	padding-right: 30px;
}
.logo li:last-child{
	border-right: none;
	font-size: 17px;
	color: #6e7982;
}
.social li a{
	font-size: 25px;
}
.social li a:hover{
	color: #6e7982;
}
/* Home ------------------------------------------------------------------*/
.download,.botton_phone{
	margin: 10px 0 0 0;	
	font-family: 'Open Sans', sans-serif;
}
.download li{
	list-style: none;
	display: inline-block;
	margin-right: 25px;
}
.botton_phone{
	padding: 3px 15px 4px 15px;
	border-radius: 5px;
	text-align: left;
}
.download a, .download p{
	width: 100%;
	font-weight: 400;
}
.download .botton_phone li{
	margin-right: 0;
}
.download .botton_phone i{
	font-size: 45px;
}
.download .botton_phone p{
	font-size: 13px;
	line-height: 17px;
	margin: 0 auto;
	padding: 0;
}
.download .botton_phone span{
	font-size: 16px; 
	font-weight: 600;
}
/* Features  ------------------------------------------------------------------*/
.features{
	padding: 100px 0;
	border: 1px solid #edede5;
}
.features h2{
	font-size: 32px;
	line-height: 42px;
	margin-bottom: 80px;
}
.features .icons i{
	font-size: 40px;
	border: 2px dashed #9f9f9f;
	border-radius: 50%;
	padding: 30px;
	color: #9f9f9f;
}
.features .icons p{
	margin-top: 40px;
	text-transform: uppercase;
}
.features .icons{
	text-align: center;
	margin: 60px 0;
}
.slider_bg{
	background: url(../img/ipad_carrousel.png) no-repeat;
	width: 600px;
	height: 402px;
	border-bottom: 1px solid #dededa;
}
.flexslider.features_phone{
	width: 346px;
	height: 346px;
	padding-top: 55px;
	margin-left: 128px;
	z-index: 9999;
}
.flexslider.features_phone .flex-control-nav{
	display: none;
}
/* description ------------------------------------------------------------------*/
.description,.sponsors{
	margin: 13px 0 80px 80px;
}
.description h3{
	text-transform: uppercase;
}
.description ul{
	margin: 0;
}
.description ul li{
	list-style: none;
	line-height: 65px;
	font-size: 16px;
	-webkit-transition: all .2s ease-in-out; 
}
.description ul li i{
	font-size: 35px;
}
.description li:hover i{
	padding: 10px;
	border-radius: 50%;
	-webkit-transition: all .4s ease-in-out; 
	margin-right: 10px;
}
.description li:hover{
	cursor: pointer;
}
/*Color Icons ------------------------------------------------------------------*/
	.icon-money,.icon-usd{
		color: #0F8622;
	}
	.icon-picture{
		color: #FFD526;
	}
	.icon-rocket,.icon-heart{
		color: #CA0000;
	}
	.icon-retweet,.icon-cogs{
		color: #29A2F9;
	}
	.icon-plus-sign-alt{
		color: #858585;
	}
	.description .icon-thumbs-up{
		color: #C72C71;
	}
	.icon-bar-chart{
		color: #FF6000;
	}
	.icon-desktop{
		color: #2C649B;
	}
	.icon-dashboard{
		color: #D65D4C;
	}

/* How to work ------------------------------------------------------------------*/
.how_work{
	padding: 100px 0;
}
.how_work h2{
	margin-bottom: 30px;
}
.how_work i{
	font-size: 50px;
}
.how_work h3{
	position: relative;
	left: 40px;
	top: -55px;
	padding-left: 15px;
}
.progress_line {
	position: relative;
	width: 100%;
	height: 2px;
	margin: 60px 0 30px 0;
}
.circle_progress{
	position: absolute;
	left: -2px;
	top: -30px;
	width: 45px;
	height: 35px;
	padding-top: 10px;
	border-radius: 50%;
	font-weight: bold;
	-webkit-transition: all .2s ease-in-out; 
	-webkit-transform-origin-x: 0px;
}
.how_work .span4:hover .circle_progress{
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	-webkit-transition: all .2s ease-in-out; 
	-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.5);
	box-shadow: -2px 3px 6px rgba(0,0,0,.5);
}
.how_work .span4:hover .progress_line{
	-webkit-transition: all .2s ease-in-out; 
	-webkit-box-shadow: -2px 3px 6px rgba(0,0,0,.2);
	box-shadow: -2px 3px 6px rgba(0,0,0,.2);	
}
.how_work h2{
	font-size: 32px;
	line-height: 42px;
}
.text_how a{
	text-decoration: underline;
}
/* Pricing Table ------------------------------------------------------------------*/
.pricing_table{
	width: 80%;
	margin: 100px auto;
}
.item_table{
	border-radius: 4px;		
	background-color: #fefcfc;
	padding: 20px 0;
	text-align: center;
	border: 1px solid #dededa;
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;	
}
.item_table:hover{
	margin-top: -5px;
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;	
}
.head_table{	
	text-align: center;
	margin-bottom: -20px;
}
.head_table h1{
	font-size: 25px;
	line-height: 35px;	
}
.head_table h3{	
	font-size: 30px;
	margin: 0 auto;
	padding: 40px 0;
	border-radius: 50%;
	max-width: 118px;
}
.item_table ul{
	margin-top: 20px; 
}
.item_table ul li{
	list-style: none;
	border-top: 1px solid #dededa;
	width: 60%;
	margin: 0 auto;
	line-height: 40px;
	text-align: center;
	padding: 5px 0;
	text-transform: uppercase;
}
.item_table ul li a{
	color: #666;
}
.item_table ul li i{
	color: #555;
	padding-right: 5px;
}
.item_table ul li:first-child{
	border-top: none;
}
.promotion_table{
	margin-top: -15px;
}
.promotion_table:hover{
	margin-top: -20px;
}
.promotion_table .head_table{
	text-align: center;
}
/* More Features ------------------------------------------------------------------*/
.more_features{
	padding: 0 0 100px 0;
	border: 1px solid #edede5;
}
.more_features h2{
	margin-bottom: 20px;
}
.more_features .item_features{
	border-bottom: 1px solid #edede5;	
	padding: 100px 0;
}
.more_features .item_features ul li{
	list-style: none;
	line-height: 40px;
	padding-top: 5px;
}
.more_features .item_features ul li p i{
	font-size: 25px;
}
.sponsors ul li{
	display: inline-block;
	margin-right: 30px;
}
.info_item{
	padding-top: 100px;
}
.info_item ul,.content_info{
	margin-bottom: 20px;
}
.info_item ul li{
	display: inline-block;
	list-style: none;
	padding: 0 20px;
}
.info_item ul li:first-child{
	padding-left: 0;
}
.info_item ul li:last-child{
	border-right: none;
}
.info_item .content_info li{
	border-right: 1px solid #edede5;
}
.content_info li i{
	font-size: 55px;
	list-style: 65px;
}
/* Option Buy ------------------------------------------------------------------*/
.buy{
	padding: 80px 0;
}
.buy ul{
	margin-top: 30px;
	margin-bottom: 30px;
}
.buy ul li{
	list-style: none;
	font-size: 17px;
	line-height: 37px;
}
.buy ul li i{
	font-size: 25px;
}
.terms-of-service-space {
	width: 100%;
	height: 200px;
	overflow: auto;
	padding: 5px;
	border: 1px solid #edede5;
}
.terms-of-service-space p{
	font-size: 14px;
	line-height: 24px;
}
.contact_form_to_buy input[type="submit"]{
	border: none;
}
.contact_form_to_buy h3{
	border-bottom: 1px solid #edede5;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
.personal_info input,.billing_info input,.card_info input{
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	height: 30px;
	font-size: 13px;
	padding: 3px 10px;
	width: 90%;
	margin-right: 0;
	margin-bottom: 25px;
}
.personal_info label{
	color: #414040;
}
.card_info .payment{
	margin-top: 10px;
	margin-bottom: 15px;
}
.card_info select{
	margin-bottom: 25px;
}
.card_info .cvv{
	width: 50%;
}
.card_info a{
	font-size: 14px;
	line-height: 24px;
	margin-top: -10px;
}
.testimonials {
	background-color: #FEFCFC;
	padding: 20px 20px 20px 9px;
	border-radius: 4px;
	position: relative;
	text-align: right;
	border: 1px solid #dededa;
	margin-bottom: 20px;
}
.testimonials .person_circle {
	float: right;
	margin-left: 12px;
}
.testimonials.top{
	margin-top: 60px;
}
.testimonials p{
	font-size: 14px;
}
.testimonials span{
	font-size: 14px;
	color: #414040;
	font-weight: 400;
}
.testimonials .person_circle img {
	border-radius: 50%;
}
.testimonials h6 {
	color: #313a40;
	padding: 10px 0 0 0;
	line-height: 16px;
}
/* Footer ------------------------------------------------------------------*/
footer{	
	border-bottom: 1px solid #303030;
	padding: 40px 0;
}
footer .botton_phone{
	margin: 0;
}
footer .download a{
	color: #F1F0E5;
}
footer .download .botton_phone{
	background-color: #272727;
	padding: 3px 12px 4px 12px;
}
.payment li{
	display: inline-block;
	margin: 5px 5px 5px 0; 
}
.newsletter input[type="email"]{
	background-color: #272727;
	border: none;
	font-size: 13px;
	line-height: 23px;
	height: 28px;
	padding-left: 15px;
	border-radius: 0;
	width: 90%;
}
.newsletter input[type="submit"]{
	background-color: #272727;
	border: none;
	color: #F1F0E5;
	height: 37px;
	width: 100%;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
}
.copry{
	background-color: #181818;
	padding: 25px 0 20px 0;
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
}
.copry ul{
	margin: 0;
}
.copry ul li{
	list-style: none;
	display: inline-block;
	margin-right: 10px;
	padding: 0 30px 0 20px;
}
.copry ul li:last-child{
	border-right: none;
}
.copry ul li a{
	font-weight: normal;
}
/* Contact Form  ---------------------------------------------------------*/
.form_online{
	width: 90%;
	text-align: left;
}
.form_online textarea{
	width: 100%;
	height: 100px;
	font-size: 13px;
	line-height: 23px;
	color: #6e7982;
}
.form_online label{
	color: #222222;
}
.form_online input{
	width: 100%;
	height: 25px;
	color: #6e7982;
	margin-bottom: 15px;
	font-size: 13px;
	line-height: 23px;
	padding-left: 10px;
}
.form_online .botton{
	height: 45px;
	line-height: 20px;
	width: 30%;
	padding-left: 10%;
}
#result{
	color: #222222;
	text-align: left;
	font-size: 13px;
	line-height: 23px;	
}
.modal-header h3 {
	text-align: left;
}
/* toTop ---------------------------------------------------------*/

#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url(../img/ui.totop.png) no-repeat left top;
}
#toTopHover {
	background:url(../img/ui.totop.png) no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;	
}
#toTop:active, #toTop:focus {
	outline:none;
}
/* ---------------------------------------------------------------------- */
/*	1920 Version
/* ---------------------------------------------------------------------- */ 
@media handheld, only screen and (max-width: 1920px) {

}
/* ---------------------------------------------------------------------- */
/*	1440 Version
/* ---------------------------------------------------------------------- */ 
@media handheld, only screen and (max-width: 1440px) {
}
/* ---------------------------------------------------------------------- */
/*	1024 Version
/* ---------------------------------------------------------------------- */
@media handheld, only screen and (max-width: 1024px) {
	.home{
		height: auto;
	}
	.description ul li {
		font-size: 15px;
	}
	.how_work h3 {
		left: 30px;
		padding-left: 25px;
	}
	.slider_bg{
		background: url(../img/ipad_carrousel2.jpg) no-repeat;
	}
	.flexslider.features_phone{
		margin-left: 56px;
	}
	.newsletter input[type="submit"] {
		width: 95%;
		padding-left: 10px;
	}
	footer .download .botton_phone {
		margin-bottom: 10px;
	}
}

/* Color Charger----------------------------------------*/

#colorchanger { 
	position: fixed;
	left: 0;
	top: 210px; 
	background: #fff;
	padding: 10px 10px 10px 7px;	
	border: 1px solid #dedede;
	border-left: 0;
	z-index: 10;
	margin: 0;
	list-style: none;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}
.colorbox { width:20px; height:20px;border-radius: 2px; float:left; margin:5px; cursor:pointer; display:block; }
.colordefault { background-color:#08c; }
.color1 { background-color:#f4c008; }
.color2 { background-color:#C0392B; }
.color3 { background-color:#67B32C; }


/* ---------------------------------------------------------------------- */
/*	Mobile Version
/* ---------------------------------------------------------------------- */


@media handheld, only screen and (max-width: 768px){
	#colorchanger{
		display: none;
	}
	body{
		padding: 0;
	}
	nav,footer,.social{
		text-align: center;
	}
	.social{
		margin-top: 15px;
	}
	.home img,.flexslider .slides img,.home .video_layout iframe{
		display: none;
		padding-top: 0px;
	}
	.home .text_home,.home .video_layout .text_home{
		width: 80%;
		padding-top: 0;
		margin: 0 auto;
		margin-bottom: 50px;
	}
	.home h1 {
		font-size: 50px;
		line-height: 60px;
	}
	.home .video_layout h1 {
		padding-top: 5%;
	}
	.how_work,.more_features,.buy{
		padding: 100px;
	}
	.how_work h3 {
		padding-left: 35px;
	}
	.how_work .progress_line{
		margin-top: 100px;
	}
	.features{
		text-align: center;
	}
	.slider_bg{
		margin: 0 auto;
	}
	.flexslider.features_phone img{
		display: block;
	}
	.description,.sponsors {
		margin: 30px 0;
	}
	.more_features .item_features{
		padding: 50px 0;
	}
	.more_features .item_features .top{
		margin-bottom: 40px;
	}
	.item_table{
		margin: 0 auto;
		margin-bottom: 30px;
		max-width: 500px;
	}
	.newsletter input[type="email"] {
		width: 50%;	
	}
	.newsletter input[type="submit"] {
		width: 30%;
		padding-left: 0;
		text-align: center;
	}
}
/* ---------------------------------------------------------------------- */
/*	685px Version
/* ---------------------------------------------------------------------- */
@media handheld, only screen and (max-width: 685px) {	
	nav{
		padding: 20px 0 15px 0;
	}
	.home h1 {
		font-size: 45px;
		line-height: 55px;
	}
	.how_work,.more_features,.buy{
		padding: 50px 100px;
	}
	.how_work h2 {
		margin-bottom: 0px;
	}
	.how_work .progress_line{
		margin-top: 90px;
	}
	.features{
		padding: 50px 0;
	}
	.features h2 {
		margin-bottom: 50px;
	}
	.sponsors{
		text-align: center;
	}
	footer{
		padding: 40px;
	}
	
}
/* ---------------------------------------------------------------------- */
/*	600px Version
/* ---------------------------------------------------------------------- */
@media handheld, only screen and (max-width: 600px) {
	.home h1 {
		font-size: 38px;
		line-height: 48px;
	}
	.slider_bg {
		margin-left: 50px;
	}
	.pricing_table{;
		margin: 50px auto;
	}
	.item_features .slider_bg {
		margin-left: -60px;
		width: 500px;
	}
	.item_table{
		max-width: 400px;
	}
	.how_work h3 {
		padding-left: 25px;
	}
	.slider_bg{
		width: auto;
	}
}
/* ---------------------------------------------------------------------- */
/*	568px Version
/* ---------------------------------------------------------------------- */
@media handheld, only screen and (max-width: 568px) {
	.how_work,.more_features,.buy{
		padding-left: 40px;
		padding-right: 40px;
	}
	.item_table:hover{
		margin-top: 0;
	}
	.item_features .slider_bg {
		margin-left: 0;
		width: 500px;
	}
	.more_features .item_features {
		padding: 20px 0;
	}
	.info_item{
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* ---------------------------------------------------------------------- */
/*	480px Version
/* ---------------------------------------------------------------------- */


@media handheld, only screen and (max-width: 480px) {
	.home .text_home, .home .video_layout .text_home {
		margin-top: -30px;
	}
	.download li {
		margin-right: 0;
	}
	.slider_bg {
		margin-left: 0;
	}
	.slider_bg{
		background: url(../img/ipad_carrousel_mini.png) no-repeat;
		width: 400px;
		height: 306px;
	}
	.flexslider.features_phone{
		width: 262px;
		height: 346px;
		padding-top: 43px;
		margin-left: 98px;
	}
	.flexslider.features_phone .flex-control-nav {
		bottom: 90px;
	}
	.item_features .slider_bg {
		margin-left: -50px;
		width: auto;
	}
	.newsletter input[type="submit"] {
		width: 50%;
	}
}

/* ---------------------------------------------------------------------- */
/*	380px Version
/* ---------------------------------------------------------------------- */


@media handheld, only screen and (max-width: 380px) {	
	
	.botton_phone {
		padding: 3px 5px 4px 5px;
	}
	.home .text_home, .home .video_layout .text_home {
		text-align: center;
	}
	.features{
		padding-right: 20px;
		padding-left: 20px;
	}
	.slider_bg{
		display: none;
	}
	.description,.sponsors {
		margin: 0 0 20px 0;
	}
	.features h2 {
		margin-bottom: 0px;
	}
	.info_item ul li {
		margin-bottom: 20px;
	}
	.newsletter input[type="email"] {
		width: 90%;
	}
	.copry ul li{
		padding: 0 20px 0 20px; 
	}
	.logo li, .copry ul li {
		border-right: none;
	}
	.logo li {
		margin-right: 0px;
	}
}

/* ---------------------------------------------------------------------- */
/*	320px Version
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 320px) {
	.how_work,.more_features,.buy{
		padding-left: 20px;
		padding-right: 20px;
	}
	.how_work h3 {
		padding-left: 35px;
		left: 20px;
	}
	.features .botton{
		padding: 10px 5px;
	}
	.info_item .content_info li{
		border-right: none;
	}
	.item_table{
		max-width: 280px;
	}
	.item_table ul li {
		width: 70%;
	}
	.logo li {
		padding-right: 5px;
	}
}