body{
	font-family: 'Roboto', sans-serif;
	color: rgb(100,100,100);
}
a{
	color: #cf3c65;
	font-weight: bold;
	text-decoration: underline;
}
nav a, .side-bar a{
	text-decoration: none;
}
a:hover{
	color: #d9934d;
}
.img-responsive{
	display: inline;
}
.partial{
	float: left;
	display: none;
}
strong{	color: #d9934d;}
.site{text-transform: uppercase;}
h1,h2{
	font-weight: 100;
	color: #d9934d;
}
h2{
	font-size:3em;
	text-align: center;
	margin-bottom:0.75em;
}

.slogan{
	
	text-align: center;
	clear:both;

}

.slogan h1{
	color: rgb(100,100,100);
	border: 0px solid red;
	text-align: center;
	font-size: 50px !important;
	font-weight: 100 !important;

}

#slogan-1{
	opacity: 1;
	margin-bottom:50px;
}

#slogan-2{
	position: relative;
	opacity: 0;
	margin-bottom: 10px;
}

span.orange{
	color: #d9934d;
}

#myResponse{
	font-family: 'Roboto';
	font-size: 2em;
	color: #d9934d;
	font-weight: 300;
	margin-bottom:20px;
}

.FAQ h2{
	text-align: left;
	margin-bottom: 0.5em;
	margin-top: 0px;
}

.FAQ ol{
	font-size: 1.5em;
}
	
.FAQ {
	margin-bottom: 50px;
}


h3{
	font-weight: 300;
	color: #cf3c65;
	font-size: 1em;
}

p{
	
	font-weight: 300;
	font-size: 1.5em;
	line-height: 1.5em;
	margin-bottom: 20px;
	padding-bottom: 10px;

}

.gray-bg{
	background-color: rgb(240,240,240);
	padding-top: 30px;
	padding-bottom: 30px;
}

.white-bg{
	background-color: rgb(255,255,255);
	padding-top: 30px;
	padding-bottom: 30px;
}

footer ul{
	list-style: none;
}

footer ul li{
	display: inline-block;
}

.main h1{
	font-size: 4em;
}

.main h2{
	color: rgb(100,100,100);
	font-size: 2.5em;
	margin-bottom: 2em;

}
.main img{
	/*margin-bottom: 30px;*/
}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

.navbar-default .navbar-nav > li > a{
	color: #d9934d;
	font-size:1.5em;
	font-weight: 300;
}

footer .navbar-default{
	background: none;
	border:none;
	margin-bottom: 50px;
}

iframe{
	margin-bottom:20px;
}

.side-bar ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
.side-bar li{

	margin-bottom: 2em;
}
.side-bar a{
	font-weight: 300;
	font-size: 1.3em;
	color: #d9934d;
}

ol li{
	font-weight: 300;
	margin-bottom:1em;
}

h1.title{
	font-size: 5em;
	text-align: center;

}

.guide table{
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	display: inline-block;
	padding-bottom: 30px;
}

.guide h2{
	font-size: 2.2em;
}
.guide h2.pink{
	font-size: 3em;
}

input#email, input#name{

	border: 2px solid #d9934d;
	
	display: inline-block;
	list-style: none;
	background-color: none;
	border-radius: 10px; 
		padding: 10px;
		margin-bottom: 5px; margin-top: 5px;
	margin-right: 10px;
		color: #d9934d;
		font-weight: 500;
		font-size: 1.25em;
		width: 240px;


}

#play-video{
	text-align: center;
	background-color: inherit;
	border:0;
	font-weight: 300;
	font-family: 'Roboto';
	font-size: 2em;
	background: url('../images/play-button.svg');
	background-position: top center;
	background-repeat: no-repeat;
	padding-top: 60px;
	margin-top: 20px;
	text-decoration: none;
	height:80px;
	display:block;
}
#play-video:active{
	opacity: 0.7;
}

a#play-video{
	color: #3F3D39;
}

input#email::-moz-focus-inner,input#name::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input#email::-webkit-input-placeholder,input#name::-webkit-input-placeholder{
	color: #d9934d;
	text-align: center;
}

input[type=submit], button#join, button#join-bottom{

		border: 2px solid #d9934d;
	margin-bottom: 20px;
	display: inline-block;
	list-style: none;
	background-color: #d9934d;
	border-radius: 10px; 
		padding: 10px;
	margin-top: 10px;
	width: 240px;
		color: white;
		font-weight: 500;
		font-size: 1.25em;

}

div#signup-form{
	/*display: none;*/
}

.banner{
	

	margin-bottom: 0px;
}

.banner img{
	margin-top: 20px;
	max-width: 200px;
	
}

.banner h1{
	
    font-size: 2em;
    font-weight: 500;
    margin: 30px;
}

#recipe-box h1{
	color: #d9934d;
}
#hand{
	
	position: absolute;
	bottom: -80px;
	right:20px;
	max-width: 400px;
	min-width: 300px;
}


.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}

.navbar{
	margin-bottom: 0;
}

#banner-content{
	border: 0px solid red;
	text-align: center;
	
	margin-left: auto;
	margin-right: auto;
	overflow-x: hidden;
}

.benefit{
	color: #d9934d;
	font-weight: bold;
	text-transform: none;
	padding-top: 100px;
	background-repeat: no-repeat;
	background-position: top center;
	font-size: 1.7em;

}

.benefits .col-sm-4{
		border-right: 3px solid white;
}

.benefits .col-sm-4:last-child{
	border-right: 0;
}
th.caption{
	border:0 !important;
}
th.top-line{

	border: 2px solid #E8E8E8 !important;
}

.security{
	background-image: url('../images/security-icon.png');
}
.comfort{
	background-image: url('../images/comfort-icon.png');
}
.freedom{
	background-image: url('../images/freedom-icon.png');
}
.benefits p{
	/* font-size: 2.0em; */
}

table.advantages{
	border: 0;
	background-color: #E8E8E8 !important;
	

}

table.advantages td, table.advantages th{
	border: 0;

}

table.advantages thead{
	background-color: white !important;

}
table.advantages thead th{
	text-align: center  !important;
	font-weight: 200;
	font-size: 1.5em;
		 width: 152px !important;
}

div.table table.advantages.table thead tr th{
	 vertical-align: middle !important;
}

div.table table.advantages.table td{
	 font-size: 2em;
	 text-align: center;
	 vertical-align: middle;

}

div.table table.advantages.table td > p{
	 font-size: 0.5em !important;
	 text-align: center;
	 vertical-align: middle;
	 font-weight: 200;
}
.explanation{
	 font-size: 1.5em !important;
	 text-align: center;
	 vertical-align: middle;
	 font-weight: 200;
}

td.yes{
	color: #46C652;
	background-color: rgba(255,255,255,0.8);
}

td.some{
	background-color: rgba(255,255,255,0.5);	
}

div.table table.advantages.table tbody tr th{
	vertical-align: middle;
	font-size: 1.8em;
	font-weight: 200;
	padding: 20px;
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
	border-top: 3px solid white;
	border-right: 3px solid white;
}


.tryit h3{
	color: rgb(100,100,100);
	font-size: 1.3em;
}
.tryit #sitename{
	border: 0;
	margin-bottom: 20px;
	display: inline-block;
	list-style: none;
	background-color: #E8E8E8;
	border-radius: 10px; 
	padding: 10px;
	margin-top: 0px;
	width: 270px;
		color: rgb(0,0,0);
		font-weight: 300;
		font-size: 2em;
}

.tryit #generated-password{
	border: 0;
	margin-bottom: 20px;
	display: inline-block;
	list-style: none;
	background-color: #BA164B;
	border-radius: 10px; 
	padding: 10px;
	margin-top: 0px;
	width: 270px;
		color: rgb(255,255,255);
		font-weight: 300;
		font-size: 2em;
}


.tryit #recipe{
			color: rgb(0,0,0);
		font-weight: 300;
		font-size: 2em;

}
	
.recipe h3{
	opacity:0;
}
.recipe{
	margin-top: 50px;
	background-image: url('../images/plus.png');
	background-repeat: no-repeat;
	padding-left: 40px;
	padding-top: 10px;
	background-position: 0px 20px
}

.generated{

	background-image: url('../images/equals.png');
	background-repeat: no-repeat;

	background-position: 0px 75px
}

#generated-password{
	color: #E2B186 !important;
		font-family: 'Roboto Slab', serif;
		font-weight: 300;
}

.tryit #recipe{
	margin-bottom: 20px;
}

div#random{



	  font-family: 'Glyphicons Halflings';
	  font-style: normal;
	  font-weight: normal;
	  line-height: 1;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  padding:10px;
	    font-size: 40px;
	    color: #BA164B;
	  cursor: pointer;
}


/* animation css */

#password-animation{
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	
}

#incoming, #outgoing{
	width:250px;
	float:left;
	border:1px solid white;
	
}

#incoming-site{
	font-size: 30px;
    font-weight: 100;
    position: relative;
    right: 40px;
    text-align: center;
    top: 150px;
	
}
#outgoing-password{
	width: 240px;
	position: relative;
	font-size: 30px;
	font-family: 'Roboto Slab', serif;
	font-weight: 400;
	top: 150px;
	left: 100px;
	height: 100px;
}
#incoming-arrow{
	width: 100px;
	position: relative;
	top:97px;
	left: 140px;
}
#outgoing-arrow{
	width: 100px;
		position: absolute;
	top:-10px;
	left: -100px;
}

#recipe-box ul{
	list-style: none;
	border:0px solid red;
	margin-left:-15px;
}
#recipe-box ul li{
	background-color: #dbdad9;
	border-radius: 15px;
	margin:20px;
	margin-left: 40px;
	margin-right: 40px;
	height: 30px;
	border:0px solid red;
	position: relative;
	transition: background-color .6s ease;

}
#recipe-box ul li div{
	background-color: white;
	border-radius: 15px;
	height: 30px;

	display: none;

}

#recipe-box ul li:before{
	color: #de9349;
	position: absolute;
	left: -40px;
	top: -10px;
	font-size: 28px;
}
.one{
	margin-right: 20% !important;
}
.one:before{
	content: '1';
}
.three{
	margin-right: 30% !important;
}
.four{
	margin-right: 10% !important;
}
.two:before{
	content: '2';
}
.three:before{
	content: '3';
}
.four:before{
	content: '4';
}

.active{
	background-color: white !important;
	transition: background-color .6s ease;
}

#recipe-box{
	float: left;
	width: 300px;
	height: 400px;
	border-radius: 22px 22px 22px 22px;
-moz-border-radius: 22px 22px 22px 22px;
-webkit-border-radius: 22px 22px 22px 22px;
border: 0px solid #000000;

background: rgba(232,232,232,1);
background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(219,219,219,1) 0%, rgba(232,232,232,1) 70%, rgba(254,254,254,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(232,232,232,1)), color-stop(0%, rgba(219,219,219,1)), color-stop(70%, rgba(232,232,232,1)), color-stop(100%, rgba(254,254,254,1)));
background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(219,219,219,1) 0%, rgba(232,232,232,1) 70%, rgba(254,254,254,1) 100%);
background: -o-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(219,219,219,1) 0%, rgba(232,232,232,1) 70%, rgba(254,254,254,1) 100%);
background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(219,219,219,1) 0%, rgba(232,232,232,1) 70%, rgba(254,254,254,1) 100%);
}

#next{
	clear:both;
}

/* end animation css */

#first-tip{
	position: relative;
}
#often{
	margin-left: 40px;
}

.guide table{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.guide table th{
	text-align: center;
	font-size: 2em;
	color: #d44470;
	font-weight: 300;
}

.guide table td{
	padding: 10px;
	font-size: 2em;
	color: #d44470;
	font-weight: 200;
}

#tap-often{



	  font-family: 'Glyphicons Halflings';
	  font-style: normal;
	  font-weight: normal;
	  line-height: 1;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  padding:10px;
	    font-size: 40px;
	    color: #BA164B;
	  cursor: pointer;
	  position: absolute;
	  top:-10px;
	  left: 40px;

}

div#view-recipe span{
	  font-family: 'Glyphicons Halflings';
	  font-style: normal;
	  font-weight: normal;
	  line-height: 1;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  padding:10px;
	    font-size: 20px;
	    color: #BA164B;
	  border: 3px solid #BA164B;
	  border-radius: 50%;
	  margin-bottom: 10px;
	  cursor: pointer;

}

.spin {
	-webkit-animation: spin 0.5s ease both;
    animation: spin 0.5s ease 1;
    margin-top:0px;
}

@keyframes spin {

 100% {
 transform:rotate(360deg);
 -webkit-transform:rotate(360deg);
 }
 0%{
 	 transform:rotate(0deg);
 -webkit-transform:rotate(0deg);
 }
}
@-webkit-keyframes spin {
 100% {
 transform:rotate(360deg);
 -webkit-transform:rotate(360deg);

 }
 0%{
 	 transform:rotate(0deg);
 -webkit-transform:rotate(0deg);
 }
}


.pink {
    color: rgb(221, 60, 102);
}
span.pink {
    color: #dd3c66 !important;
    font-weight: bold !important;
}

#recipe-view-s{
	font-family: 'Roboto';
	font-weight: 400 !important;
}
#recipe-view-s ol li{
	font-weight: 400 !important;
}
#recipe-view-s ol{ margin-left:0;}
#recipe-view-s h2 {
	font-size: 15px;
    font-weight: bold;

    text-align: center;
}

.popover{
        max-width:300px;

    }

 .guide ol li {
 	font-size: 2em;

 	
 }
 ol li h3{
 	 	color: rgb(100, 100, 100);
 	 	font-weight: 300;
 }
 ol li p{
 	font-size: 0.75em;
 }

 #message{
 	color: rgba(100,100,100, 0.7);
 	font-size: 0.5em;
 }

footer p{
	font-size: 1em;
}

@media (max-width: 767px) {


	/* animation css small */

#password-animation{
	width: 100%;
	
}

#incoming, #outgoing{
	width:33%;
	float:left;
}

#incoming-site{
	font-size: 12px;
    left: 10px;
    top: 80px;
    font-weight: normal;
	
}
#outgoing-password{
	width: 240px;
	font-size: 12px;
	top: 80px;
	left: 30px;
	height: 100px;
}
#incoming-arrow{
	width: 100px;
	position: relative;
	top:13px;
	right: 10%;
	display: none !important;
}
#outgoing-arrow{
	width: 100px;
	top:-20px;
	left: -70px;
}

#outgoing-arrow img, #incoming-arrow img{
	max-width: 20px;
}

#recipe-box ul{
	list-style: none;
	margin-left: -15px;
}
#recipe-box ul li{
	border-radius: 5px;
	margin:10px;
	margin-left: 10px;
	margin-right: 10px;
	height: 10px;
}
#recipe-box ul li div{
	background-color: white;
	border-radius: 5px;
	height: 10px;

}

#recipe-box ul li:before{
	left: -20px;
	top: -10px;
	font-size: 18px;
}
.one{
	margin-right: 20% !important;
}
.three{
	margin-right: 30% !important;
}
.four{
	margin-right: 10% !important;
}

#recipe-box h1{
	
    font-size: 10px !important;
    font-weight: 500;
    margin: 20px;
    font-weight: bold !important;
}

.banner h1{
	color: #4f4c49;
}



#recipe-box{

	width: 33%;
	height: 150px !important;
	border-radius: 22px 22px 22px 22px;
-moz-border-radius: 22px 22px 22px 22px;
-webkit-border-radius: 22px 22px 22px 22px;

}

#slogan{
	
}

#next{
	clear:both;
}

/* end animation css */
#slogan{
	
	text-align: center;
	clear:both;

}

#slogan h1{
	text-align: center;
	font-weight: 100;
	font-size: 30px;

}

#slogan-1{
	opacity: 1;
}

#slogan-2{

	opacity: 0;


}



	.nav > li{
		float: left;
		font-size: .7em;
	}


  input#email, input#name, input#submit{
  	margin-top: 0px;
  	margin-right:5px;
  	margin-left:5px;

  	}
  .visible-xs {
    display: block !important;
  }
  table.visible-xs {
    display: table;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
  #hand{
    display: none;
  }
  
 

  .recipe{
	padding-left: 15px;
	background: none;
	margin-top: 0px;
	
  }
  .recipe:before{
  	content: url('../images/plus.png');
  	position: relative;
  	top: -20px;
  	left: center;

  }
  .generated{
  		padding-left: 15px;
	background: none;
	margin-top: 0px;
	padding-top: 0px;
  }

  .generated:before{
  	content: url('../images/equals.png');
  	position: relative;
  	top: -5px;
  	left: center;
  }

  .benefits .col-sm-4{
		border: 0px;
  }
  	table {
		overflow-x: auto;
		display: block;
		
	}

	table.advantages.table tbody tr th {
		font-size: 10px !important;
		font-weight: bold !important;
		
		text-align: left;
		
		
	}
	table.advantages thead th {
		max-width: 50px;
		font-size: 1em !important;
	}
	table.advantages.table td {
    	font-size: 1.3em !important;
    }

    .explanation {
    	font-size: 1em !important;
    }
    html body div.container-fluid div.row.white-bg div.container div.row div.table table.advantages.table tbody tr td.explanation{
    	font-size: 8px !important;
    }

    .guide-text{
    	font-size: 20px !important;
    }
    .title{
    	font-size: 40px !important;
    }

}
@media (max-width: 767px) {
  .visible-xs-block {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline {
    display: inline !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {

	.recipe{
	padding-left: 15px;
	background: none;
	margin-top: 0px;
	
  }
  .recipe:before{
  	content: url('../images/plus.png');
  	position: relative;
  	top: -20px;
  	left: center;

  }
  .generated{
  		padding-left: 15px;
	background: none;
	margin-top: 0px;
	padding-top: 0px;
  }

  .generated:before{
  	content: url('../images/equals.png');
  	position: relative;
  	top: -5px;
  	left: center;
  }

  #hand{
    display: none;
  }
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
	
	#hand{
    	right: -100px;
  }

  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block {
    display: block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline {
    display: inline !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
  table.visible-lg {
    display: table;
  }
  tr.visible-lg {
    display: table-row !important;
  }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {

  .hidden-lg {
    display: none !important;
  }
}
@media (min-width: 1350px){
		#hand{
	
	position: absolute;
	bottom: -80px;
	right:70px;
	max-width: 400px;
	min-width: 300px;
}
}

.swiper-container {
    width: 100%;
    height: 500px;
}

.swiper-slide .text-right{
	padding-left: 100px;
}

.number{
	width: 186px;
	height: 186px;
	border-radius: 93px;
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	font-size: 78px;
	color: black;
	font-weight: 100;
	padding-top: 35px;
	margin-bottom: 20px;
}

.number.gray{
	background-color: rgb(240,240,240);
}

.guide-text{
	font-size:32px;
	color: #C92D5D;
	font-weight: 100;
}

ul.comparison{
	text-align: left;
	font-weight: 300;
}
ul.comparison li{
	margin:10px;
}
.share-buttons{
	max-width: 240px;
	margin-left:auto;
	margin-right: auto;
	margin-bottom: 20px;
}

.flat-phone{
	background: url('/images/app-laying-flat-alt-2.png');
	background-position: bottom center;
	background-repeat: no-repeat;
	/*background-attachment: fixed;*/
	background-size: 50%;
	background-color: rgba(255,255,255,0.5);
	padding-bottom:100px;

}

td .btn-large{
	background-color: #d9934d;
	border-color: #d9934d;
}

td .btn-large:hover{
	background-color: #cf3c65;
	border-color: #cf3c65;
}

td a{
	text-decoration: none;
}

.sample-table img{
	max-width: 100px;
}

.download-appstore{
	margin:40px;
	text-align: center;
	border: 0px solid red;
}

.featured{
	margin-top: 40px;
	text-align: center;

}
.featured h3{
	font-size: 12pt;
	font-weight: bold;
}

.orange-bg{
	background-color: #d9934d;
	color: white;
	font-size: 16pt;
	font-weight: 200;
}
.orange-bg div{
	text-align: center;
}
.orange-bg .row{
	padding-top: 20px;
	padding-bottom: 20px;
}

.orange-bg img{
	padding: 10px;
	padding-top: 20px;
	padding-bottom:20px;
	max-width: 140px;
}

.featured-in{
	margin-top:20px;
}