@charset "UTF-8";
/*   
Theme Name: Proto App
Description: A beautiful and simple theme to showcase your app
Author: João Alberto
Author URI: http://jalberto.blacksheepz.org
Version: 1.0
*/
/*--------------------------------------------------------------------------------------- 
  INDEX
---------------------------------------------------------------------------------------*/
/* 
  1) BASIC STYLES
  2) FONTS
  3) HEADER
  4) SHOWCASE
  5) DOWNLOAD
  6) SUBSCRIBE
  7) SOCIAL
  8) FOOTER
  X) DEVICE SELECTION
*/

/*-------------------------------- 
  1) BASIC STYLES
--------------------------------*/
::-moz-selection { background: #d1ef51; color: #344955; text-shadow: none; }

::selection { background: #d1ef51; color: #344955; text-shadow: none; }

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; height: 3.3125rem; font-size: 18px; }

label { color: #344955; font-size: 1rem; }

sup { color: #fa5b5b; }

button, .button { margin: 0; background-color: #00a9e0; padding: 0.875rem 1.25rem; color: white; font-size: 1.125rem !important; }

.prefix, .postfix { height: 2.8125rem; line-height: 2.8125rem; }

textarea { resize: vertical; min-height: 100px; }

.l-pad { padding-left: 0; }

.r-pad { padding-right: 0; }

.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; }

/* 
  SPRITES
*/
.arrow, .ios a, .android a, .windows a, ul#features-list li, .s-fbook a, .s-twitter a, .s-instag a, .s-youtube a { background: url("../images/icons.png") no-repeat top left; }

.ios-l a, .android-l a, .windows-l a { background: url("../images/download_logos/download-logos.png") no-repeat top left; }


/*-------------------------------- 
  3) HEADER
--------------------------------*/
#hero-header { 
  background-repeat: no-repeat;
  background: url("../images/backgrounds/bg.webp") center center;
  background-size: cover;

  -webkit-box-shadow: 0 -4px 0 0 rgba(0, 0, 0, 0.1) inset; 
  -moz-box-shadow: 0 -4px 0 0 rgba(0, 0, 0, 0.1) inset; 
  box-shadow: 0 -4px 0 0 rgba(0, 0, 0, 0.1) inset; }
#hero-header a#logo { 
  text-align: center; 
  display: block; 
  margin: 2rem auto 2rem auto; }

#hero-header a#slogan { 
  text-align: center; 
  display: block; 
  margin: 0rem auto 4rem auto; }

#hero-header h1 { color: #03a9f4; font-size: 30px; font-family: Arial; font-weight: bold; line-height: 30px; letter-spacing: -2px; margin-top: 30px; text-align: center;}
#hero-header h2 { color: #028dcc; font-size: 18px; font-family: Arial; font-weight: bold; line-height: 0px; letter-spacing: -1px; text-align: center;}

/*-------------------------------- 
  7) SOCIAL
--------------------------------*/
#social { margin-top: 1.25rem; }
#social ul { text-align: center; }
#social ul li { display: inline-block; margin-right: 0.9375rem; }
#social ul li a { width: 32px; height: 32px; display: block; }
#social ul li a:hover { opacity: 0.75; filter: alpha(opactiy=75); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; -khtml-opacity: 0.75; -moz-opacity: 0.75; }
#social ul .s-fbook a { background-position: 0 -229px; }
#social ul .s-twitter a { background-position: 0 -527px; }
#social ul .s-instag a { background-position: 0 -311px; }
#social ul .s-youtube a { background-position: 0 -609px; }

/*-------------------------------- 
  8) FOOTER
--------------------------------*/
#main-footer { background: url("../images/backgrounds/footer.jpg") center center; min-height: 75px; height: auto; margin-top: 1.125rem; padding-top: 1.875rem; }
#main-footer p { text-align: center; }
@media only screen and (min-width: 64.063em) { #main-footer p { text-align: center; } }
#main-footer p, #main-footer a { font-size: 0.875rem; color: white; }
#main-footer a { -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -ms-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear; }
#main-footer a:hover { color: #f5f1e6; opacity: 0.85; filter: alpha(opactiy=85); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; -khtml-opacity: 0.85; -moz-opacity: 0.85; }
#main-footer ul { text-align: center; margin-left: 0; }
@media only screen and (min-width: 64.063em) { #main-footer ul { text-align: right; } }
#main-footer ul li { display: inline-block; margin-left: 1.25rem; }
@media only screen and (min-width: 64.063em) { #main-footer ul li:first-child { margin-left: 1.25rem; } }
@media only screen { #main-footer ul li:first-child { margin-left: 0; } }

/*-------------------------------- 
  X) DEVICE SELECTION
--------------------------------*/
#select-device { background: url("../images/backgrounds/header-blue.jpg") center center; }
#select-device h1 { color: white; font-size: 2.5rem; padding: 2.5rem 0; }