/* AnyMote Home CSS */

* { border:0; margin:0; padding:0; font-weight:normal; }
html, body { font-family:"Proxima", "Myriad Pro", Helvetica, Arial, sans-serif; height:100%; text-align:center; }
strong { font-family:"Proxima Bold"; }
strong span { font-family:"Proxima"; }
a { text-decoration:none; transition: all 0.3s ease-in-out; }
em { display:none;  }

/* MENU */
#menu { width:100%; height:80px; border-bottom:1px solid rgba(0,0,0,0.1); position:fixed; left:0; top:0; z-index:10; backface-visibility: hidden; background-color:rgba(255,255,255,0.96); }
#menu h3 { position:absolute; left:0; top:0; }
#menu h3 a { display:block; width:180px; height:80px; background-image:url(anymote-logo.png); opacity:0.3; }
#menu h3 a:hover { opacity:1;  }

#menu ul { position:absolute; right:0; top:0; height:80px; list-style:none; margin-right:316px; padding-right:28px; }
#menu ul li { height:80px; float:right; line-height:80px; }
#menu ul li a { display:block; color:#c7c7c9; font-size:20px; padding:0 16px; height:80px; transition: all 0.5s ease-in-out; }
#menu ul li a:hover { color:#38383c; }

#menu a#buy { display:block; width:240px; text-align:left; line-height:80px; height:80px; position:absolute; right:0; font-size:19px; color:#5dac00;   
background:#fff url(shoping-cart.png) no-repeat 32px 0; transition:none; border-left:1px solid rgba(0,0,0,0.1); padding:0 0 0 72px;  }
#menu a#buy del { color:#b0adb4; text-decoration:line-through; }
#menu a#buy:hover { background-position:32px -80px; ; }


/* LAYOUT */
.page { width:100%; height:100%; background-color:#fff; position:relative; z-index:1; }

/* FIRST */
#first { background:url(anymote_photo_white.jpg) no-repeat center center; -webkit-animation: intro 4s ease-in 1; overflow:hidden; }
#first #supporting { width:1080px; height:42px; position:absolute; left:50%; top:100%; margin:-80px 0 0 -540px; background:url(anymote_supported_devices.png) no-repeat center center;  }
#first h1 { color:#777; font-size:36px; margin:-256px 0 0 -400px; width:800px; left:50%; top:50%; position:absolute; }
#first h2 { color:#38383c; font-size:48px; margin:-200px 0 0 -400px; width:800px; left:50%; top:50%; position:absolute;  }
#first #play { display:block; height:600px; width:560px; left:50%; top:50%; position:absolute; margin:-300px 0 0 -280px; outline:none; cursor:pointer; color:#c7c7c9; background:url(icon_video.png) no-repeat 158px 497px; }
#first #play strong { display:block; padding-top:500px; color:#1b88da; font-size:20px; transition: all 0.3s ease-in-out; }
#first #play:hover strong { color:#2ba4ff;  }
#video { z-index:4; position:relative; display:none;  }

/* USE CASES */
#usecases { overflow:hidden; }
#usecases ul { width:400%; height:100%; color:#fff; transition: all 0.8s ease-in-out; list-style:none; }
#usecases ul li { width:25%; height:100%; float:left; background:url(usecase_01.jpg); background-size:cover; position:relative;  }
#usecases ul li:nth-child(2) { background-image:url(usecase_02.jpg); }
#usecases ul li:nth-child(3) { background-image:url(usecase_03.jpg); }
#usecases ul li:nth-child(4) { background-image:url(usecase_04.jpg); }
#usecases ul li p { position:absolute; left:50%; top:120px; opacity:0.5; z-index:2; width:600px; margin-left:-300px; font-size:18px;  }
#usecases ul li h5 { position:absolute; left:50%; top:50%; width:280px; height:64px; border:3px solid #fff; margin:-60px 0 0 -140px; font-size:30px; line-height:64px; border-radius:20px; }
#usecases ul li h3 { position:absolute; left:50%; top:50%; width:600px; margin:48px 0 0 -300px; font-size:36px; line-height:48px; border-radius:20px; }

#paging { width:160px; height:24px; position:absolute; z-index:1; top:100%; left:50%; margin:-140px 0 0 -62px; }
#paging em { display:block; width:16px; height:16px; border-radius:24px; border:4px solid rgba(255,255,255,0.5); float:left; margin-right:12px; }
#paging em.selected { border-color:#fff; background-color:#fff; }


/* SECOND */
#second { overflow:hidden; }
#second h1 { color:#777; font-size:30px; line-height:48px; margin:-300px 0 0 -500px; width:1000px; left:50%; top:50%; position:absolute; }
#second h1 strong { color:#38383c; font-size:48px; display:block; line-height:56px; }
#second h1 a { color:#777; }

#howitworks { width:100%; height:100%; position:relative; }
#scheme { width:1000px; height:380px; background:url(scheme.jpg) no-repeat scroll 0 0; margin:-128px 0 0 -500px; left:50%; top:50%; position:absolute; }
#scheme p { padding:8px 0 16px 664px; font-size:22px; line-height:28px; color:#888; text-align:left; }
#scheme p strong { color:#38383c; display:block; }
#scheme p a { padding-left:32px; background:url(info.png) no-repeat 0 2px; }

#second h6 { color:#777; font-size:25px; width:1200px; margin:0 auto; margin:350px 0 0 -500px; width:1000px; left:50%; top:50%; position:absolute;  }
#second a { color:#1b88da; }
#second a:hover { color:#2ba4ff; }

/* Smaller resolution support */
@media all and (max-height: 850px) and (min-height: 670px) { #howitworks { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); } }
@media all and (max-height: 669px) { #howitworks { -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); } }

/* THIRD */
#third { background:#aab1b2 url(supported-brands_desktop.png) no-repeat center center; background-size:contain; }
#third h2 { color:#fff; font-size:32px; line-height:40px; padding-top:12%; width:780px; margin:0 auto; }

/* FOURTH */
#fourth { background:url(anymote_photo.jpg) no-repeat center center; background-size:cover; }
#fourth h6 { width:500px; position:absolute; left:50%; top:50%; margin:-160px 0 0 -250px; color:#fff; font-size:20px; line-height:30px; }
#fourth h6 strong { display:block; font-size:28px; }

#fourth a#buy { display:block; width:514px; height:166px; background-image:url(order_anymote_button.png); position:absolute; left:50%; top:50%; margin:-32px 0 0 -257px; }
#fourth a h4 { color:#fff; font-size:36px; line-height:44px; padding-top:40px; }
#fourth a h4 del { opacity:0.4;   }
#fourth a h4 strong { display:block; font-size:48px; }
#fourth a#buy:hover { opacity:0.9; }
#fourth p { color:#fff; font-size:13px; position:absolute; left:50%; top:100%; margin:-100px 0 0 -500px; width:1000px; opacity:0.6; }


/* FIFTH - PURCHASE OPTIONS */
#fifth h6 { width:500px; position:absolute; left:50%; top:50%; margin:-200px 0 0 -240px; color:#b6b2b9; font-size:36px; line-height:30px; }
#fifth div { width:800px; height:280px; position:absolute; left:50%; top:50%; margin:-120px 0 0 -400px; border:4px solid #d0d0d0; border-radius:24px; }

#fifth div a { display:block; width:399px; height:280px; float:left; color:#38383c; line-height:36px; font-size:20px;   }
#fifth div a#full { border-right:1px solid #d0d0d0; }
#fifth div span { display:block; width:40px; height:40px; background-color:#fff; position:absolute; left:380px; top:120px; text-align:center; line-height:36px; font-size:24px; color:#38383c; }
#fifth div a h4 { font-size:24px; line-height:36px; padding-top:72px; font-family:"Proxima Bold"; }
#fifth div a h4 strong { font-size:48px; }
#fifth div a del { color:#bab7bd; font-family:"Proxima", "Myriad Pro", Helvetica, Arial, sans-serif; }
#fifth div a p { line-height:30px; }
#fifth div a em { display:block; width:200px; height:48px; background-color:#00a6f3; position:relative; left:100px; top:44px; font-style:normal; line-height:48px; color:#fff; font-size:24px; border-radius:24px;  }
#fifth div a#full em { background-color:#5dac00;  }
#fifth div a:hover h4 { opacity:0.8; }
#fifth div a:hover em { background-color:#1ab0f5; }
#fifth div a#full:hover em { background-color:#6bbf09;  }

#fifth h6 span { display:block; width:44px; height:28px; float:left; margin-right:-32px; background-repeat:no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAYAAAAa/l2sAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1RDk5MzNBQTk4QjMxMUU1OUZDMUZFRjZEMjZEOTQzOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1RDk5MzNBQjk4QjMxMUU1OUZDMUZFRjZEMjZEOTQzOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVEOTkzM0E4OThCMzExRTU5RkMxRkVGNkQyNkQ5NDM4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVEOTkzM0E5OThCMzExRTU5RkMxRkVGNkQyNkQ5NDM4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+i8BxlwAAAyhJREFUeNrMl21ojWEYx59z9uKYTV5mXuZl8z6Osi+ML3xhkSgvHxSTyMlLPhBTavMSPowiYkIiIZqyokzxYUq0IdSSd3FmyGbYMub43/qdelo7Lzs7p3Ou+nXf5+l5zvO/7+e6rvu6HNcrb1jdsByRC4NFP5EmUoVD/Bat4pvwivfipXgu2iN5YXIEz8yHApEnnBH8xxtRK6rERdEcC8GTxSUxxuq+5cAisV8cE8XhPNiV3bkaJbEdLUNsFYXRFLxEDLdia0eiKXgnY7WoEL4oibwv9jEfLcZFw4cnEFzG5oofZIQpIp8MMVIMFH1ET5HC/X/EL/FdNIh34pV4LGrEM+7LFkXigJgXTIwjjLT2QozCz8rC2IAejA4Et0Go577iz0bwtUhdYiVivWGI9e/oT/JuE1+jLcznNjM/HakPmx06ZAu6WNsJ8UkMEOsjEbyNT2SRI3NjLHiVyGJeFkhbIMEmcHYx38HJVAMm0c8Wmd0U6BYeTjoTjFvEQk498/7SrgTdYbGBCHdxbSyRPEMMEUnUCo285CNjK9d9BJPJGOnsXl8ySTqb1UymuCLO2zaolOd7EwdBBWdTpBhbK8oD7NB4cLOALFzIhUgHBY4JuhbxmUxQR+Z5EKCGcHCfWdhZsSKU4LsUNo/Is/GwWRRGFlruBfLhQm4wttqKn920iTwVLOiOM1ZR/sXT/Bs2USzoTPByMYK5x4q/PRWVzI92Jvgg4znSWCLYOkYT1Gvsgotpb4xttBLHPoiTzE1hlOwkje3h4nbyaiLZJnK8yd0lThJ1Ehf3WolnpjQtYb7UScFh4RLl7Hgi2WKO7f9VnZNdraM19xBwZ8Qc0StOIt2IfCgu23rJ3cnUr/k49zLO/yJooo25I56wsPqutOVh2DCYJKaJqRz5dnvNAio6Hs35lHmm/R4UxKfqaXm8iP9C0d5KwdRO8ZLEBrioM/pT0GTiemYcGmQxt8QFW6YIWK2ZF00XM+ndCqJQToayv7hALV/0tq0IC9mEttMhV/M7la42j9MwhzSTQQ+XxpjCYv353YcQfzPq/wItfJlGysu3uFtDqFX9E2AABAnC53rMtoEAAAAASUVORK5CYII=);
}


/* TECH SPECS */
#specs { display:none; z-index:11; position:fixed; left:0; top:0; width:100%; height:100%; background:url(specs_background.png); text-align:left; overflow:auto; }
#specs #inside { width:960px; margin:0 auto; }
#specs h5 { font-size:40px; color:#fff; padding:80px 0 20px 0; }
#specs ul { width:50%; float:left; }
#specs ul li { color:#fff; font-size:17px; line-height:24px; padding-right:48px; }
#specs ul li:nth-child(1) { list-style:none; padding-bottom:12px; }
#specs ul li a { color:#fff; border-bottom:1px dotted #fff; }
#close { display:none; z-index:12; position:fixed; left:100%; top:0; width:100px; height:100px; margin:0 0 0 -100px; cursor:pointer; background:url(close_button.png) no-repeat center center;  }


/* MOBILE VERSION */
@media only screen and (max-width: 920px) { 
  #menu ul { display:none; }
  #menu a#buy { font-family:"Proxima Bold"; width:180px; font-size:32px; }
  #menu a#buy strong { display:none; }

  #first #supporting { width:600px; background-size:contain; margin-left:-300px;  }

  #usecases ul li p { opacity:0.75; font-size:22px;  }
  #usecases ul li h5 { position:absolute; left:50%; top:50%; width:280px; height:64px; border:3px solid #fff; margin:-60px 0 0 -140px; font-size:32px; line-height:64px; border-radius:20px; }
  #usecases ul li h3 { position:absolute; left:50%; top:50%; width:600px; margin:48px 0 0 -300px; font-size:48px; line-height:48px; border-radius:20px; line-height:64px; }

  
  #third { background-image:url(supported-brands_mobile.jpg); }
  #third h2 { font-size:36px; padding:20% 10% 0 10%; width:auto;  }
  
  #second { height:auto; overflow:visible; }
  #second #howitworks { -webkit-transform:none; transform:none; }
  #second h1, #second h6 { margin:0 auto; padding:120px 0 80px 0; width:80%; left:0; top:0; position:relative; }
  #second h6 { padding:40px 0 80px 0; font-size:28px; }
  #scheme { width:100%; height:auto; background-image:url(scheme-mobile.jpg); background-size:contain; margin:0; left:0; top:0; position:relative; padding-top:420px; }
  #scheme p { padding:0 20px 36px 20px; font-size:32px; line-height:48px; color:#888; text-align:center; }
  #scheme p a { padding-left:36px; background:url(info.png) no-repeat 0 8px; }

  #fourth { background-image:url(anymote_photo_mobile.jpg); }
  #fourth h6 { width:560px; margin:-200px 0 0 -280px; font-size:26px; line-height:36px; }
  #fourth p { color:#fff; font-size:20px; left:10%; margin:-128px 0 0 0; width:78%; opacity:0.6; }

  #specs { overflow:scroll; color:#fff; font-size:32px; }
  #specs #inside { width:80%; height:auto; margin:0 10%; padding:40px 0; }
  #specs h5 { font-size:48px; padding:0 0 16px 0;  }
  #specs ul { width:100%; float:none; }
  #specs ul li { font-size:32px; line-height:48px; padding-right:48px; } 
  #close { width:128px; height:128px; margin:0 0 0 -128px; background-size:50% 50%; }
  
  #fifth { min-height:1080px; }
  #fifth h6 { width:500px; position:absolute; left:50%; top:128px; margin:0 0 0 -230px; color:#b6b2b9; font-size:36px; line-height:30px; }
  #fifth div { width:560px; height:760px; position:absolute; top:208px; left:50%; margin:0 0 0 -284px; border:4px solid #d0d0d0; border-radius:24px; margin-bottom:80px; }
  #fifth div a { display:block; width:560px; height:380px; float:left; color:#38383c; line-height:48px; font-size:30px;   }
  #fifth div a#full { border:0; border-bottom:1px solid #d0d0d0; }
  #fifth div a#full del { display:none; }
  #fifth div a h4 { font-size:36px; line-height:42px; padding-top:48px; font-family:"Proxima Bold"; }
  #fifth div a p { line-height:40px; }
  #fifth div span { background-color:#fff; position:absolute; left:260px; top:360px; text-align:center; line-height:36px; font-size:24px; }
  #fifth div a em { width:400px; height:88px; left:80px; top:16px; font-style:normal; line-height:88px; font-size:42px; border-radius:44px;  }

}

/*ANIMATIONS */
@-webkit-keyframes intro {
	from { opacity:0.8; }
	to { opacity:1; }
}

/* FONTS */
@font-face { font-family:"Proxima"; src:url("./ProximaNova-Light.ttf"); }
@font-face { font-family:"Proxima Bold"; src: url("./ProximaNova-Bold.ttf"); }