@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: #15a0b7; 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; }

/*-------------------------------- 
  2) FONTS
--------------------------------*/
.button { font-family: 'Varela Round', sans-serif; font-weight: 400; font-style: normal; }

#subscribe p, #select-device h1 { font-family: 'Open Sans', sans-serif; font-weight: 300; font-style: normal; }

#contactModal p { font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: normal; }

#hero-header .f-dropdown { font-family: 'Open Sans', sans-serif; font-weight: 600; font-style: normal; }

.button { font-size: 1.125rem; }

/*-------------------------------- 
  3) HEADER
--------------------------------*/
#title { text-align: center; display: block; margin: 1rem auto 2.125rem auto; }

#hero-header { background: url("../images/backgrounds/header-blue.jpg") center center; -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 h1, #hero-header h2, #hero-header h3, #hero-header h4, #hero-header h5, #hero-header h6 { color: white; }
#hero-header .button {
	background-color: #377882;
	padding: 0.6rem 1.25rem 1rem 1rem;
	color: white;
	display: block;
	-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;
}
#hero-header .button:hover, #hero-header .button:focus { opacity: 0.85; filter: alpha(opactiy=85); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; -khtml-opacity: 0.85; -moz-opacity: 0.85; }
@media only screen and (max-width: 40em) { #hero-header .button { width: 100%; margin: 1rem auto 2rem auto; } #hero-header #title-logo img { width: 70%; text-align:center; margin:0 auto 1rem auto }  }
@media only screen and (min-width: 40.063em) and (max-width: 64em) { #hero-header .button { width: 37%; margin: 3rem auto 3rem auto; } }
@media only screen and (min-width: 64.063em) { #hero-header .button { width: 27%; margin: 3rem auto 3rem auto; } }
#hero-header .button .arrow { background-position: 0 -154px; width: 25px; height: 25px; float: left; }
#hero-header .dropdown.button:before, #hero-header button.dropdown:before { display: none; }
#hero-header .f-dropdown.open:before { left: 1.875rem; }
#hero-header .f-dropdown.open:after { display: none; }
#hero-header .f-dropdown { max-width: 280px; margin-top: 13px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; border: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95); }
#hero-header .f-dropdown li { font-size: 1rem; }
#hero-header .f-dropdown li a { color: #344955; padding: 1.25rem; -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; }
#hero-header .f-dropdown li a:hover { background-color: white; }
#hero-header .f-dropdown .ios a { background-position: 96% -63px; }
#hero-header .f-dropdown .android a { background-position: 96% 15px; }
#hero-header .f-dropdown .windows a { background-position: 96% -675px; }

/*-------------------------------- 
  4) SHOWCASE
--------------------------------*/
#showcase { background: url("../images/backgrounds/info-blue.jpg") center center; -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; color: white; }
#showcase p { font-weight: 300; font-size: 1.125rem; }
#showcase h2 { color: white; padding-top: 1.5625rem; padding-bottom: 0.6875rem; }
#showcase h4 { color: white; font-weight: 400; padding-top: 0; padding-bottom: 0; font-size: 1.375rem; }
@media only screen and (min-width: 64.063em) { #showcase h4 { padding-top: 1.25rem; padding-bottom: 0.6875rem; } }
#showcase .large-6 p:first-of-type { padding-top: 0; }
@media only screen and (min-width: 64.063em) { #showcase .large-6 p:first-of-type { padding-top: 2.5rem; } }
#showcase ul#features-list { margin-left: 0; }
@media only screen and (max-width: 40em) { #showcase ul#features-list { text-align: center; } }
@media only screen and (min-width: 40.063em) and (max-width: 64em) { #showcase ul#features-list { text-align: center; } }
#showcase ul#features-list li { list-style-type: none; padding-left: 1.5625rem; background-position: 0 -453px; line-height: 1.875rem; font-size: 1.125rem; text-align:left }
@media only screen and (max-width: 40em) { #showcase ul#features-list li { display: inline-block; margin-left: 1.25rem; } }
@media only screen and (min-width: 40.063em) and (max-width: 64em) { #showcase ul#features-list li { display: inline-block; margin-left: 1.25rem; } }
#showcase ul#features-list li:nth-child(odd) { background-position: 0 -386px; }
#showcase #gallery-container { margin-bottom: 2rem; margin-top:1.3rem }
#showcase .th { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
#showcase .clearing-close:hover, #showcase .clearing-close:active, #showcase .clearing-close:focus { color: #d1ef51; }
@media only screen and (min-width: 40.063em) and (max-width: 64em) { #showcase .clearing-thumbs, #showcase [data-clearing] { text-align: center; } }
@media only screen and (max-width: 40em) { #showcase .clearing-thumbs, #showcase [data-clearing] { text-align: center; } }
#showcase .clearing-thumbs li, #showcase [data-clearing] li { margin-top: 1.875rem; }
@media only screen and (min-width: 40.063em) and (max-width: 64em) { #showcase .clearing-thumbs li, #showcase [data-clearing] li { display: inline-block; float: none; } }
@media only screen and (max-width: 40em) { #showcase .clearing-thumbs li, #showcase [data-clearing] li { display: inline-block; float: none; } }

/* 
  iPhone Slideshow
*/ 
#showcase .slider-container.iphone { background: url("../images/device_ios.png") no-repeat center bottom; height: 635px; width: 356px; margin: 1.4375rem auto 0 auto; }
#showcase .slider-container.iphone .orbit-container { margin: 0 0 0 1.9375rem; padding-top: 6.5rem; width: 84%; }
#showcase .slider-container.iphone .orbit-container .orbit-timer { right: 80px; top: 80px; }
#showcase .slider-container.iphone .orbit-container .orbit-timer.paused > span { display: none; }
#showcase .slider-container.iphone .orbit-container .orbit-progress { background-color: #d1ef51; }

/* 
  Android Slideshow
*/ 
#showcase .slider-container.android-phone { background: url("../images/device_android.png") no-repeat center bottom; height: 639px; width: 370px; margin: 1.4375rem auto 0 auto; }
#showcase .slider-container.android-phone .orbit-container { margin: 0 0 0 1.125rem; padding-top: 3.75rem; width: 90%; }
#showcase .slider-container.android-phone .orbit-container .orbit-timer { right: 95px; top: 44px; }
#showcase .slider-container.android-phone .orbit-container .orbit-timer.paused > span { display: none; }
#showcase .slider-container.android-phone .orbit-container .orbit-progress { background-color: #d1ef51; }

/*
  Windows Slideshow
*/
#showcase .slider-container.windows-phone { background: url("../images/device_windows.png") no-repeat center bottom; height: 635px; width: 369px; margin: 1.4375rem auto 0 auto; }
#showcase .slider-container.windows-phone .orbit-container { margin: 0 0 0 1.875rem; padding-top: 5.375rem; width: 83%; }
#showcase .slider-container.windows-phone .orbit-container .orbit-timer { right: 75px; top: 64px; }
#showcase .slider-container.windows-phone .orbit-container .orbit-timer.paused > span { display: none; }
#showcase .slider-container.windows-phone .orbit-container .orbit-progress { background-color: #d1ef51; }

/*-------------------------------- 
  5) DOWNLOAD
--------------------------------*/
#download h3 { color: #344955; padding-top: 1.5625rem; }
#download h4 { color: #7c8f99; font-size: 1.625rem; }
#download ul { margin-top: 2.8125rem; margin-bottom: 1.875rem; }
#download ul li a { display: block; margin: 0 auto; }
#download .has-tip { border: 0 none; }
#download .ios-l a { background-position: 0 -348px; height: 144px; width: 133px; }
#download .ios-l a:hover { background-position: 0 -522px; }
#download .android-l a { background-position: 0 0; height: 144px; width: 133px; }
#download .android-l a:hover { background-position: 0 -174px; }
#download .windows-l a { background-position: 0 -696px; height: 144px; width: 133px; }
#download .windows-l a:hover { background-position: 0 -870px; }

/*-------------------------------- 
  6) SUBSCRIBE
--------------------------------*/
#subscribe { margin-bottom: 1.25rem; }
#subscribe h4 { font-size: 1.75rem; color: #344955; padding-top: 0.625rem; padding-bottom: 0.625rem; }
#subscribe p { color: #7c8f99; font-size: 1.125rem; line-height: 1.875rem; }
#subscribe form { margin-top: 0.9375rem; margin-bottom: 1.5625rem; }
#subscribe form button {
	margin: 0;
	background-color: #15a0b7;
	padding: 0.875rem 1.25rem;
	color: white;
	font-size: 1.125rem;
	height: 3.3125rem;
}
@media only screen and (min-width: 40.063em) { #subscribe form .left-off { margin-left: 12.625rem; } }

/*-------------------------------- 
  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/header-blue.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: left; } }
#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; } }

#contactModal { -webkit-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.1) inset; box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.1) inset; }
#contactModal .close-reveal-modal { position: absolute; right: -11px; top: -11px; }
@media only screen and (max-width: 40em) { #contactModal .close-reveal-modal { right: 42%; top: -3%; } }
#contactModal h2 { color: #344955; font-size: 2.375rem; line-height: 2.75rem; margin-bottom: 1.25rem; margin-top: 0.3125rem; }
#contactModal form { margin: 0.9375rem 0 1.25rem; }
#contactModal form button { margin-top: 0.625rem; }
#contactModal .notification_error { color: white; }
#contactModal .notification_ok { color: white; }
#contactModal .alert-box.alert { background-color: #fa5b5b; border-color: #fa5b5b; }
#contactModal p { color: #7c8f99; font-size: 0.875rem; margin-bottom: 0.625rem; line-height: 1.5rem; }
#contactModal p a { color: #344955; }
#contactModal p a:hover { color: #7c8f99; }

/*-------------------------------- 
  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; }