/*FONT */
@font-face{font-family:'avenir_lt_45_bookregular';src:url('fonts/avenir_lt_45_book-webfont.eot');src:url('../fonts/avenir_lt_45_book-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/avenir_lt_45_book-webfont.woff') format('woff'),url('../fonts/avenir_lt_45_book-webfont.ttf') format('truetype'),url('../fonts/avenir_lt_45_book-webfont.svg#avenir_lt_45_bookregular') format('svg');font-weight:normal;font-style:normal;}
@font-face{font-family:'avenir_lt_55_romanbold';src:url(../'fonts/avenir_lt_85_heavy-webfont.eot');src:url('../fonts/avenir_lt_85_heavy-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/avenir_lt_85_heavy-webfont.woff') format('woff'),url('../fonts/avenir_lt_85_heavy-webfont.ttf') format('truetype'),url('../fonts/avenir_lt_85_heavy-webfont.svg#avenir_lt_55_romanbold') format('svg');font-weight:normal;font-style:normal;}
 @font-face{font-family:'AvenirLTStd-Light';src:url('../fonts/313FB6_0_0.eot');src:url('../fonts/313FB6_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/313FB6_0_0.woff2') format('woff2'),url('../fonts/313FB6_0_0.woff') format('woff'),url('../fonts/313FB6_0_0.ttf') format('truetype');font-weight:normal;font-style:normal;}
/* COMMON */
* { -webkit-appearance: none; padding:0; margin:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; list-style-type:none; color:#000000; font-family: 'AvenirLTStd-Light', Helvetica, Arial, sans-serif; outline:none; border:none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent; text-align:center; font-weight:normal;}
 input::-moz-focus-inner {
 border: 0;
}
.ios a, .ios { text-decoration:none; color:#000000;}
body { background:#ffffff; -webkit-text-size-adjust: 100%; }
a { color:#000000; }
a:hover { color:#000000; }
body #wrapper, body #wrapper #bodyInner, body #wrapper #bodyOuter {width:100%; position:fixed;}
.card {background:#ffffff; position:absolute; top:0; left:0; width:100%;}
/*.card.dismiss {left:-9999px; display:none; opacity:0;}*/
#card2 , #card3{display:none;}
.footerrow {position:absolute; bottom:0; width:100%; text-align:center; padding:25px;}
.footerrow img {display:inline;max-height: 37px;}
::-webkit-input-placeholder { font-size: 15px;}
::-moz-placeholder { font-size: 15px;}
:-ms-input-placeholder {font-size: 15px;}
:-moz-placeholder {font-size: 15px;}
small {font-size:10px; display:block; text-align:center; padding:10px 0;}

/* TEMP*/
body #wrapper.temp{ background:#af1b1b;}
#wrapper.temp #bodyInner { background:#af1b1b;width:100%; padding:150px 15px; text-align:center;}
#wrapper.temp #bodyInner img {display:inline;}
#wrapper.temp #bodyInner p {color:#ffffff; padding:15px;}
#wrapper.temp #bodyInner span {color:#ffffff; font-weight:bold; font-size:25px; line-height:50px;}


/*CARD 0*/ 
#card0 .searchInner:first-child{margin:0 0 7px;}
#card0 .buttonrow { padding: 20px;}
#card0 .buttonrow:first-child { padding:0 20px;}
#card0 .buttonrow span {cursor:pointer;}
#card0 .error .dismiss {background: url(cancel2.png) no-repeat right -4px;  background-size: 28px;  cursor: pointer; float: right; display: inline-block; width: 30px; height: 31px;  margin: -31px 0px 0 0px;}
#card0 .error {background:#000; padding:15px; position: fixed; top:-80px; z-index:200; width:100%;  -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
#card0 .error p {color:#ffffff; font-size: calc(11px + 0.5vw); width:80%; text-align:left; line-height: calc(15px + 0.5vw);}
#card0 .error.active {top:0;}
#card0 p.intro { font-size: calc(11px + 0.5vw); line-height: calc(15px + 0.5vw);text-transform:none; padding:15px 15px 0 15px;}
 #card0 h1 { font-size:calc(34px + 0.5vw); text-transform:uppercase; margin: 20px 0 0 0;}

/*CARD 1*/
#card1 .content { position: relative;}
#card1.loading .logo, #card1.loading .content, #card0.loading .logo, #card0.loading .content { opacity: 0; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
#card1 .logo, #card0 .logo {padding:20px; display:block; width:100%; opacity: 1; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
#card1 .content, #card0 .content {opacity: 1; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
#card1 .logo img, #card0 .logo img {    max-width: 300px;   display: inline-block;   width: calc(100% + 0.5vw);}
#card1 h1 { font-size:calc(34px + 0.5vw); text-transform:uppercase; margin: 60px 0 0 0;}
#card1 h1 span, #card0 h1 span { font-size:calc(17px + 0.5vw); text-transform: initial;}
#card1 .buttonrow {padding:40px;}
#card1 .buttonrow  .button, #card0 .buttonrow  .loginbutton{text-transform:uppercase; border:1px solid #000000; padding:21px; display:inline-block; font-size:calc(13px + 0.5vw); -o-transition: .4s; -ms-transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; transition: .4s; cursor:pointer; background:#ffffff;}
#card1 .buttonrow  .button:active, #card1 .buttonrow  .button:hover, #card0 .buttonrow  .loginbutton:active, #card0 .buttonrow  .loginbutton:hover {cursor:pointer;background:#f9fafa;}

/*CARD 2*/
#card2 h1 { font-size:calc(31px + 0.5vw); text-transform:uppercase; margin: 20px 0 0 0;}
#card2 .searchrow, #card0 .searchrow {padding:30px;  max-width: 600px;   margin: 0 auto;}
#card2 .searchInner, #card0 .searchInner{text-transform:uppercase; border:1px solid #000000; padding:7px 0px 7px 15px; display:inline-block;  font-family: 'avenir_lt_55_romanbold', Helvetica, Arial, sans-serif; -o-transition: .4s; -ms-transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; transition: .4s; background:#ffffff; width:100%; text-align:left;}
#card2 .searchInner input, #card0 .searchInner input {width:90%; text-align:left; font-size: 15px; height: 35px;}
#card2 .searchInner .icon-search {background: url(search.png) no-repeat right 5px center;background-size: 23px; float:right; display:inline-block; width:30px; height:31px; margin: 0 0 0 2px;}
#card2 .searchInner .icon-loading {background: url(loading.gif) no-repeat right 5px center;background-size: 23px; float:right; display:inline-block; width:30px; height:31px; margin: 0 0 0 2px;}
#card2 .searchInner .icon-cancel {background: url(cancel.png) no-repeat right 5px center;background-size: 23px; cursor:pointer;float:right; display:inline-block; width:30px; height:31px; margin: 0 0 0 2px;}
#card2  a {display:block; text-align:left; text-decoration:none; margin:2px 0;}
#card2 .search-results { padding: 0 30px;   max-width: 600px;   margin: 0 auto;}
#card2 .search-results a { padding: 0 0 8px 0;}

/* CARD 3 */
#card3 {background:transparent;}
#card3 h1 { font-size:calc(31px + 0.5vw); text-transform:uppercase; margin: 20px 0 0 0;}
#card3 #wheelHolder {z-index:200;margin:0;position: absolute; text-align:center; bottom: 0;  -webkit-transition: all 7s ease-in-out; -moz-transition: all 7s ease-in-out; -o-transition: all 7s ease-in-out; transition: all 1s ease-in-out; width: 160%; margin:0 -30%; bottom:-430px;}
#card3 #wheelHolder.loading { margin: 0 auto; width: 160%; margin:0 -30%; bottom: calc(40% + 0.5vh);}
#card3 #wheel {max-width:600px;width: 100%; -webkit-animation: stop 0s infinite linear;  transform: rotate(0deg);   -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
#card3 .searching {  line-height: 22px;  font-size:calc(15px + 0.5vw); position: absolute; width: 200px; top: 120px;  margin: 0 0 0 -100px;  left: 50%;}
#card3 #wheelHolder #wheel .segment {opacity:0.3; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
#card3 #wheelHolder.loading #wheel .segment {opacity:0; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out;}
#card3 #wheelHolder.loading #wheel  {-webkit-animation: rotation 1s infinite linear; margin: 0 auto; width: 60%; max-width:320px;}
#card3 #row {margin: 25px 5px; position: relative; z-index:300; opacity:0;  -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out;}
#card3 #row.loaded {opacity:1;margin-top:105px;}
#card3 .result{overflow:hidden; width: 33.333333%; float: left; display: block; cursor:pointer; position: absolute; padding: 12px 15px 24px 15px;  -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
#card3 .result.rank0 {left:0;}
#card3 .result.rank1 {left:33.333333%; margin:0 0 0 0;}
#card3 .result.rank2 {right:0;}
#card3 .result.rank1.active{margin:0 -5.3333335%}
#card3 .result.active {z-index:10; border:1px solid #000000; width: 44%; background:#ffffff; overflow:visible;}
#card3 .result .resultTitle{ font-size: calc(14px + 0.5vw); margin:15px 0 0 0; display:block; width:100%; opacity: 0.2;}
#card3 .result .resultnotes{ font-size: calc(11px + 0.5vw); margin:15px 0 0 0; display:block; width:100%; opacity: 0.2; line-height: calc(14px + 0.5vw);}
#card3 .result .resultImage{ width:100%; min-height:20vh; height:20vh; background-size: contain!important;}
#card3 .result.active span {display:block; width:100%;height:10px; position: absolute; bottom:-1px; left:0;}
#card3 #wheelHolder #wheel .segment.active, #card3 .result.active .resultTitle, #card3 .result.active .resultnotes {opacity:1;}
#card3 #familyName_1, #card3 #familyName_2, #card3 #familyName_3 {cursor:pointer;font-size: 20px;display: inline-block;margin: 0 0 0 -60px;width:120px;text-transform: uppercase;position: absolute;text-align: center;top: 0px;color: #ffffff; padding:24px 0; text-shadow: 1px 1px 17px #000000; left: 50%; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; opacity:1;}
#card3 #familyName_1.loading, #card3 .sa.loading, #card3 h1.loading, #card3 #familyName_2, #card3 #familyName_3 {opacity:0;}
#card3 .familyName {z-index:0;}
#card3 .familyName.active {z-index:100; opacity:1!important;}
/*#card3 .sa { opacity:1; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out;  margin: 0;  display: inline-block;  background: url(back.png) no-repeat left 0px;  background-size: 22px;  font-size: 16px;  text-align: right;  height: 26px; cursor: pointer;  width: 25px;  float: left;  position: absolute;  top: 28px;   left: 10px;}*/
#card3 .result.family_03 span, #card3 .modal.family_03  { background:#EC028C;}
#card3 .result.family_10 span, #card3 .modal.family_10  { background:#72C167;}
#card3 .result.family_09 span, #card3 .modal.family_09  { background:#FFDE00;}
#card3 .result.family_00 span, #card3 .modal.family_00  { background:#009AC7;}
#card3 .result.family_07 span, #card3 .modal.family_07  { background:#34715A;}
#card3 .result.family_11 span, #card3 .modal.family_11   { background:#514E86;}
#card3 .result.family_08 span, #card3 .modal.family_08  { background:#8A845C;}
#card3 .result.family_04 span, #card3 .modal.family_04  { background:#C92D92;}
#card3 .result.family_05 span, #card3 .modal.family_05  { background:#98022E;}
#card3 .result.family_06 span, #card3 .modal.family_06  { background:#BA5A15;}
#card3 .result.family_12 span, #card3 .modal.family_12  { background:#BB813B;}
#card3 .result.family_13 span, #card3 .modal.family_13   { background:#F57B21;}
#card3 .result.family_02 span, #card3 .modal.family_02 { background:#F172AC;}
#card3 .result.family_01 span, #card3 .modal.family_01 { background:#EE4136;}

#card3 .modal, #card3 #modalMask {opacity:1; -webkit-transition: opacity .5s ease-out; -moz-transition: opacity .5s ease-out; -o-transition: opacity .5s ease-out; transition: opacity .5s ease-out;}
#card3 .modal {width: 310px; margin:105px auto; text-align:left; overflow:hidden; display:block;}
#card3 #modalMask {width:100%; z-index: 800; background:rgba(217, 217, 217, 0.82); position:absolute; left:0; top:0; text-align:center;}
#card3 #modalMask.inactive, #card3 #modalMask.inactive .modal { left:-99999px; opacity:0;}
#card3 .modal.inactive { display:none;}
#card3 .modal .modaltitle, #card3 .modal .modaldescription {padding:25px; text-align:left; float:left;}
#card3 .modal .modaltitle {width:80%; float:left;}
#card3 .modal .modaltitle h2 {color:#ffffff; text-align:left; font-size: calc(16px + 0.5vw); float: left;}
#card3 .modal .modaldescription p {color:#ffffff;text-align:left; font-size: calc(13px + 0.5vw); line-height: calc(20px + 0.5vw);}
#card3 .modal .dismiss {background: url(cancel2.png) no-repeat right -4px;background-size: 28px; cursor:pointer;  float:right; display:inline-block; width:30px; height:31px; margin: 21px 20px 0 0px;}
#card3 .modal .modalimage {width:100%; height:120px; background-size:contain;}
#card3 .modal.family_09 .modaldescription p, #card3 .modal.family_09 .modaltitle h2 {text-shadow: 1px 1px 17px #b5922a;}
#card3 .modal.family_03 .modalimage {background:url(floral_oriental.png) no-repeat center top;}
#card3 .modal.family_10 .modalimage {background:url(green.png) no-repeat center top;}
#card3 .modal.family_09 .modalimage {background:url(citrus.png) no-repeat center top;}
#card3 .modal.family_00 .modalimage {background:url(water.png) no-repeat center top;}
#card3 .modal.family_07 .modalimage {background:url(mossy_woods.png) no-repeat center top;}
#card3 .modal.family_11 .modalimage {background:url(aromatic.png) no-repeat center top;}
#card3 .modal.family_08 .modalimage {background:url(dry_woods.png) no-repeat center top;}
#card3 .modal.family_04 .modalimage {background:url(soft_oriental.png) no-repeat center top;}
#card3 .modal.family_05 .modalimage {background:url(oriental.png) no-repeat center top;}
#card3 .modal.family_06 .modalimage {background:url(woody_oriental.png) no-repeat center top;}
#card3 .modal.family_12 .modalimage {background:url(woods.png) no-repeat center top;}
#card3 .modal.family_13 .modalimage {background:url(fruity.png) no-repeat center top;}
#card3 .modal.family_02 .modalimage {background:url(soft_floral.png) no-repeat center top;}
#card3 .modal.family_01 .modalimage {background:url(floral.png) no-repeat center top;}

#loader {z-index:200;margin:0;position: absolute; text-align:center; bottom: 0;  -webkit-transition: all 7s ease-in-out; -moz-transition: all 7s ease-in-out; -o-transition: all 7s ease-in-out; transition: all 1s ease-in-out; width: 160%; margin:0 -30%; bottom:-430px;}
#loader.loading { margin: 0 auto; width: 160%; margin:0 -30%; bottom: calc(40% + 0.5vh);}
#loader #wheelloading {max-width:600px;width: 100%; -webkit-animation: stop 0s infinite linear;  transform: rotate(0deg);   -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
#loader .searching {  line-height: 22px;  font-size:calc(15px + 0.5vw); position: absolute; width: 200px; top: 120px;  margin: 0 0 0 -100px;  left: 50%;}
#loader.loading #wheelloading {-webkit-animation: rotation 1s infinite linear; margin: 0 auto; width: 60%; max-width:320px;}
.logoloading {	padding: 20px 20px 0 20px;	display: block;	width: 85%;	opacity: 1;	-webkit-transition: all 1s ease-in-out;	-moz-transition: all 1s ease-in-out;	-o-transition: all 1s ease-in-out;	transition: all 1s ease-in-out;margin-left: 100px;}
.logoloading .frag {	font-size: calc(14px + 0.5vw);	margin: 15px 0 0 0;	display: block;	width: 100%;}
.logoloading .thick {font-weight: bold;}

@media (min-width : 220px) and (max-width : 560px) {
#card3 .result .resultTitle { font-size: calc(12px + 0.5vw);}
#card2 .searchInner input {width:75%;}
 #card3 #familyName_1, #card3 #familyName_2, #card3 #familyName_3 { font-size: 17px; padding:37px 0; }

    /*#card3 .sa {top:18px;}*/
}

@media (max-height : 768px)  and (max-width : 560px)  {
#card1 h1{font-size: calc(27px + 0.5vw); margin: 60px 0 0 0; padding: 0 4px;}
#card2 h1, #card0 h1, #card3 h1 {font-size: calc(27px + 0.5vw); margin: 15px 0 0 0; padding: 0 4px;}
#card1 h1 span, #card0 h1 span { font-size: calc(16px + 0.5vw);}
#card1 .logo, #card0 .logo { padding: 15px;}
#card2 .searchrow { padding: 17px;}
#card2 .searchInner span { background: url(search.png) no-repeat right 5px top 5px; background-size: 24px;}
#card2 .searchInner span.cancel {background: url(cancel.png) no-repeat right 5px top 5px;  background-size: 24px;}
#card3 .result {top: -11px;}
.footerrow { padding: 10px;}
#card3 .result .resultnotes { margin: 7px 0 0 0;}
}



@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg); -moz-transform : rotate(0deg); -ms-transform  : rotate(0deg); -o-transform : rotate(0deg);	 transform : rotate(0deg);
	  
		}
		to {
				-webkit-transform: rotate(359deg); -moz-transform : rotate(359deg); -ms-transform  : rotate(359deg); -o-transform : rotate(359deg);	 transform : rotate(359deg);
		}
}
@-webkit-keyframes stop {
		from {
				-webkit-transform: rotate(0deg); -moz-transform : rotate(0deg); -ms-transform  : rotate(0deg); -o-transform : rotate(0deg);	 transform : rotate(0deg);
	  
		}
		to {
				-webkit-transform: rotate(0deg); -moz-transform : rotate(0deg); -ms-transform  : rotate(0deg); -o-transform : rotate(0deg);	 transform : rotate(0deg);
		}
}