/* reset -------------------------- */
html,
body,
div,
ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
dfn,
del,
p,
blockquote,
fieldset,
input,
textarea,
select,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
button,
canvas,
video {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
address,
caption,
cite,
code,
th,
dfn,
del {
font-weight: normal;
font-style: normal;
}
ul,
ol {
list-style: none;
margin-left: 35px;
}
fieldset,
img {
border: none;
}
caption,
th {
text-align: left;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
cursor: pointer;
line-height: normal;
}
button,
input {
line-height: normal;
}
input[type="hidden"],
[hidden],
.hidden {
display: none;
}
textarea {
overflow: auto;
resize: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
nav,
section,
.clearfix {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
a > img {
vertical-align: bottom;
}
strong,
b {
font-weight: bold;
}
em,
i {
font-style: italic;
}
del {
text-decoration: line-through;
}
:focus {
outline: none;
}
/* tools -------------------------- */
.clear {
clear: both;
display: block;
line-height: 0;
height: 0;
font-size: 0;
}
.clearfix:after,
.wrap:after,
aside:after,
section:after,
article:after,
.text:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
font-size: 0;
}
.align-left {
float: left !important;
}
.align-right {
float: right !important;
}
.overflow-hidden {
overflow: hidden;
display: block;
}
/* common -------------------------- */
html {
height: 100%;
background: #ffffff;
}
body {
height: 100%;
font-family: "Open Sans";
font-size: 15px;
color: #f5f5f5;
-webkit-font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
}
.main {
min-height: 100%;
background-color: 3b1725;
overflow: hidden;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.intro {
width: 100%;
height: auto;
overflow: hidden;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/intro_bg_opt.jpeg) no-repeat top center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.wrap {
margin: 0 auto;
max-width: 990px;
padding: 0 30px;
}
h1, h2, h3, h5, h6 {
color: #3b1725;
}
h1, h2 {
font-size: 30px;
line-height: 40px;
margin: 0 0 30px;
}
h3 {
font-size: 17px;
margin-top: 15px;
}
h4 {
color: #f2e088;
font-size: 16px;
margin-top: 15px;
}
h5 {
font-size: 20px;
margin-top: 50px;
margin-bottom: 30px;
}
img {
max-width: 100%;
height: auto;
margin-top: 15px;
}
/* header -------------------------- */
header {
padding-top: 70px;
padding-bottom: 15px;
}
header .logo {
float: left;
}
header .logo a {
display: inline-block;
}
header .social {
float: right;
padding: 2px 0;
width: 325px;
}
header .social li {
float: left;
margin-bottom: 0;
}
header .social-1 li a {
display: block;
width: 45px;
height: 45px;
border-radius: 100%;
border: solid 2px #f2e088;
font-size: 24px;
outline: 0;
color: #f2e088;
margin-top: 5px;
margin-left: 15px;
margin-right: 5px;
padding: 3px 0 0 15px;
}
header .social-2 li a {
display: block;
width: 45px;
height: 45px;
border-radius: 100%;
border: solid 2px #f2e088;
font-size: 24px;
outline: 0;
color: #f2e088;
margin-top: 5px;
margin-left: 15px;
margin-right: 5px;
padding: 3px 0 0 12px;
}
/* content -------------------------- */
.simple {
text-align: center;
padding: 90px 0 40px;
}
.simple p {
margin: 0 60px 16px;
}
.app-screen {
margin-top:20px;
margin-bottom:40px;
}
.promo {
color: #f2e088;
}
.promo .wrap {
position: relative;
min-height: 545px;
}
.promo-text {
width: 620px;
height: 500px;
padding-top: 80px;
display: table-cell;
vertical-align: middle;
font-size: 18px;
line-height: 30px;
margin: 0;
}
.promo-text p {
padding: 25px 0 0;
}
.promo-text ul li {
padding: 10px 0 0 10px;
list-style-image: url(../img/arrow.png);
}
.promo .wrap img {
position: absolute;
bottom: 0;
right: 0px;
}
.promo-title {
font-size: 30px;
line-height: 55px;
}
.promo-subtitle {
font-size: 22px;
line-height: 30px;
padding: 10px 0 0;
}
.promo-button img.available {
position: inherit;
left: 0;
}
.promo-button img.unavaliable {
position: inherit;
left: 0;
}
.promo-button a {
display: -webkit-inline-box;
}
.promo-app {
margin-top:40px;
margin-bottom:40px;
}
.available {
display: inline-block;
height: 60px;
line-height: 52px;
}
.unavaliable {
display: inline-block;
height: 60px;
line-height: 52px;
opacity: 0.3;
}
.content {
position: relative;
background: #f5f5f5;
}
.content-text {
margin: 0 auto;
vertical-align: middle;
font-size: 18px;
color: #3b1725;
max-width: 700px;
padding: 0 30px;
}
.info {
text-align: left;
margin-top: 10px;
}
.info ul li {
padding: 10px 0 0 10px;
list-style-image: url(../img/arrow.png);
}
.features {
margin: -25px 0 60px;
}
.features-columns {
margin: 0 -25px;
}
.feature {
float: left;
width: 33.33%;
text-align: center;
font-size: 14px;
line-height: 21px;
padding: 0 25px;
margin: 0 0 50px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* clients -------------------------- */
.content-partners {
position: relative;
background: #e2eaf0;
}
.clients {
text-align: center;
padding-top: 90px;
}
.clients-text {
margin: 0 auto;
vertical-align: middle;
font-size: 18px;
color: #f2e088;
max-width: 700px;
padding: 0px;
}
.carousel {
margin-bottom: 0;
text-align: center;
padding: 30px 60px 80px 75px;
}
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
.carousel-thumbnail {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
/* footer -------------------------- */
.border{
background-color: #f2e088;
height:10px;
}
footer {
background-color: #471c2d;
padding-top: 60px;
text-align: center;
}
footer .logo img {
display: block;
}
footer .social {
float: center;
margin-top: 40px;
width: 440px;
}
footer .social li {
float: left;
}
footer .social li a {
display: block;
width: 42px;
height: 42px;
border-radius: 100%;
border: solid 2px #f2e088;
font-size: 22px;
outline: 0;
color: #f2e088;
margin-top: 5px;
margin-left: 15px;
margin-right: 5px;
padding-top: 3px;
}
footer .partners {
margin-top: 30px;
width: 250px;
}
footer .partners li {
float: left;
}
footer .partners li a {
display: block;
outline: 0;
margin-left: 15px;
margin-right: 5px;
}
footer .copy {
font-size: 14px;
line-height: 36px;
margin-top: 20px;
margin-bottom: 30px;
}
/* Responsive -------------------------- */
@media (max-width: 959px){
.promo-title {
font-size: 23px;
line-height: 50px;
padding-left: 10px;
}
.promo-subtitle {
font-size: 19px;
line-height: 30px;
padding: 10px 0 0 10px;
}
.promo-text {
display: block;
height: auto;
width: auto;
padding: 80px 0 48px;
font-size: 17px;
}
.promo-phone img{
width: 245px;
}
.promo-app {
margin-right: 250px;
margin-top: 0;
margin-bottom: 20px;
}
.wrap {
min-height: 0;
margin: 0 auto;
max-width: 990px;
padding: 0;
}
footer .partners {
display: none;
}
footer .copy {
font-size: 14px;
margin-top: 20px;
margin-bottom: 30px;
}
}
@media (max-width: 767px){
.promo .content-text{
min-height: 0;
}
.promo .wrap img {
position: relative;
right: auto;
bottom: auto;
display: block;
margin: 0 auto;
}
.promo-phone img{
width: 232px;
}
.promo-app {
margin-right: 0px;
}
.promo-text {
text-align: center;
display: block;
height: auto;
width: auto;
padding: 65px 0 48px;
}
.promo-title {
font-size: 25px;
line-height: 50px;
}
.promo-text ul li {
list-style-image: none;
}
.promo-link,
.promo-button {
margin: 30px 15px 15px;
}
header {
text-align: center;
}
header .logo {
float: none;
display: inline-block;
}
header .social {
display: none;
}
footer .partners {
display: none;
}
footer .copy {
font-size: 14px;
margin-top: 20px;
margin-bottom: 30px;
}
.wrap {
margin: 0 auto;
max-width: 990px;
padding: 0;
}
.simple {
text-align: center;
padding: 80px 0 25px;
}
.info {
text-align: left;
margin-top: 10px;
}
.feature {
width: 100%;
}
}
@media (max-width: 479px){
body {
word-wrap: break-word;
}
.wrap {
margin: 0 auto;
max-width: 990px;
padding: 0;
}
.promo-text {
text-align: center;
display: block;
height: auto;
width: auto;
margin: 65px 10px 0 10px;
padding: 0;
}
.info {
text-align: left;
margin-top: 10px;
}
.simple {
text-align: center;
padding: 80px 0 25px;
}
.simple p {
margin-left: 0;
margin-right: 0;
}
footer .social {
margin-left: -15px;
}
}
/* Retina -------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (-o-min-device-pixel-ratio:2/1),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:192dpi),
only screen and (min-resolution:2dppx){
.social li a{
background-image: url(images/sprite@2x.png);
-moz-background-size: 300px 150px;
-ie-background-size: 300px 150px;
-o-background-size: 300px 150px;
-webkit-background-size: 300px 150px;
background-size: 300px 150px;
}
}