html {
font-size: 10px;
}
.mail-response {
text-align:center;
}
.icon_check {
display: inline-block;
height: 20px;
vertical-align: middle;
width: 20px;
background: #fff url(./assets/images/check.png) center center no-repeat;
background-size: 24px;
border-radius: 100%;
}
.icon_trophy {
display: inline-block;
height: 60px;
width: 60px;
background: url(./assets/images/trophy.png) center center no-repeat;
position: absolute;
right: 20px;
}
.btn-default {
padding: 10px 15px;
border-radius: 1px;
transition: .3s;
text-decoration: none !important;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
font-size: 1.5rem;
}
.btn-second {
padding: 10px 15px;
border-radius: 1px;
transition: .3s;
text-decoration: none !important;
font-size: 1.5rem;
text-transform: uppercase;
border-radius: 3px;
border: 1px solid #333;
color: #333;
}
.btn-default:hover {
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
}
.btn-default--uppercase {
text-transform: uppercase;
}
.btn-default--orange {
background-color: #ff8300;
color: #fff;
}
.btn-default--orange:hover {
background-color: #ff8300;
color: #fff;
}
body {
font-family: Lato, Arial, Helvetica, sans-serif;
font-size: 16px;
}
header {
min-height: 570px;
background: url(./assets/images/header.jpg);
position: relative;
background-size: cover;
}
header:before, header:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
header:before {
top: 0;
background: rgba(102, 34, 136, 0.2);
}
header:after {
box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.25);
height: 80px;
background: rgba(102, 34, 136, 0.8);
}
#header-content {
margin-top: 50px;
position: relative;
z-index: 2;
}
#header-logos {
margin-bottom: 30px;
}
.suitcase-icon {
display: inline-block;
height: 80px;
width: 80px;
border-radius: 100%;
background: rgb(102, 34, 136) url(./assets/images/icon_case.png) center center no-repeat;
margin-left: 10px;
}
#header-text {
width: 90%;
max-width: 550px;
}
#header-button {
display: inline-block;
margin-top: 20px;
}
#header-counter {
}
#header-counter-box {
max-width: 400px;
width: 100%;
background: rgba(0, 0, 0, 0.3);
border: 1px solid #fff;
color: #fff;
border-radius: 10px;
align-self: center;
text-align: center;
padding: 10px;
}
#header-counter-box .count {
font-size: 4rem;
font-weight: 300;
}
#header-counter-box p {
font-size: 1.1rem;
}
#tablets {
padding: 50px 0px;
}
#profile {
padding: 60px 0px;
min-height: 635px;
background: url(./assets/images/profile.jpg);
background-position: 0px -90px;
position: relative;
background-size: cover;
}
#profile:before, #profile:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
#profile:before {
top: 0;
background: rgba(102, 34, 136, 0.9);
}
#profile:after {
height: 80px;
background: #fff;
}
@media screen and (max-width: 900px) {
#profile:after {
display: none;
}
.profile-item, .integration-item {
padding: 10px 0px;
width: 100%;
}
}
section > .container {
z-index: 2;
position: relative;
}
#profile .mediadevices {
position: absolute;
z-index: 2;
right: 0;
bottom: 20px;
width: 58%;
max-width: 800px;
}
.profile-item, .integration-item {
padding: 10px 0px;
width: 40%;
}
.mediadevices img {
width: 100%;
}
#integration {
position: relative;
padding: 80px 0px;
overflow: hidden;
}
#integration .phonemap {
position: absolute;
z-index: 2;
right: 0;
bottom: 0;
width: 45vw;
text-align: center;
overflow: hidden;
}
.map {
z-index: 2;
width: 90%;
position: relative;
}
.phone_hand {
z-index: 1;
position: absolute;
left: 173px;
top: 59px;
width: 60%;
}
#solutions {
padding: 60px 0px;
min-height: 570px;
background: url(./assets/images/solutions.jpg);
position: relative;
background-repeat: no-repeat;
background-position: center -100px
}
#solutions:before, #solutions:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
@media screen and (max-width: 1200px) {
#tablets_grid div > img {
height: 200px!important;
}
#tablets_grid .flex-item > div {
text-align: center;
}
}
@media screen and (max-width: 902px) {
#tablets_grid {
align-items: center
}
}
#solutions:before {
top: 0;
background: rgba(102, 34, 136, 0.8);
}
#solutions:after {
box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.25);
height: 60%;
background: #fff;
}
#solutions h2 {
margin: 40px 0px;
}
.bundle-option {
margin: 20px;
background: #fff;
min-height: 200px;
box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.2);
}
.bundle-header {
min-height: 50px;
color: #fff;
padding: 10px 20px;
position: relative;
background-color: #00a6f7;
}
.bundle-content {
padding: 20px;
}
.bundle-content p {
font-size: 1.3rem;
}
.bundle-content .icon_check {
margin-right: 5px
}
.bundle-button {
text-align: center;
padding: 25px 0px;
}
.solutions-button {
text-align: center;
margin: 40px 0px;
}
#faq {
padding: 70px 0px;
min-height: 200px;
background: url(./assets/images/faq.jpg);
position: relative;
background-position: center -550px;
background-repeat: no-repeat;
}
#faq h2 {
margin-bottom: 70px;
}
#faq:before, #faq:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
#faq:before {
top: 0;
background: rgba(102, 34, 136, 0.8);
}
#blog {
padding: 70px 0px;
min-height: 200px;
background: url(./assets/images/profile.jpg);
position: relative;
background-position: center -700px;
background-repeat: no-repeat;
}
#blog h2 {
margin-bottom: 70px;
}
#blog:before, #blog:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
#blog:before {
top: 0;
background: rgba(102, 34, 136, 0.8);
}
a.button-faq:hover {
background: #fd8435;
}
#send-mail {
padding: 50px 0px;
}
fieldset {
border: none;
}
form#sendmail {
max-width: 400px;
margin: 0 auto;
margin-top: 50px;
}
.form-row {
position: relative;
}
label.form-label {
position: absolute;
width: 100%;
line-height: 44px;
transition: .3s;
margin: 0;
left: 0;
top: 0;
text-align: center;
font-weight: 300;
font-size: 1.5rem;
color: #656565;
}
.form-input:focus + .form-label, .form-input.notempty + .form-label {
text-align: right;
left: -280px;
width: 260px;
}
.form-input {
width: 100%;
border: none;
line-height: 20px;
padding: 10px 15px;
margin-bottom: 30px;
outline: none !important;
background: #f1f1f1;
}
.error {
margin-top: 0px;
font-size: 11px;
color: red;
position: relative;
position: absolute;
bottom: 9px;
text-align: center;
width: 100%;
left: 0;
}
#header-content h1 {
font-size: 4rem;
}
#header-content p {
font-size: 1.8rem;
}
#tablets_grid {
margin-top: 50px;
}
#tablets_grid img {
height: 300px
}
#tablets_grid .flex-item > div {
margin-bottom: 20px
}
#tablet2 {
height: 330px !important;
margin-bottom: -30px;
}
.category-list {
position: absolute;
margin: 0;
width: 100%;
padding: 20px 15px;
top: 42px;
z-index: 2;
color: #333;
list-style: none;
font-weight: bold;
background: #fff;
max-height: 225px;
overflow-y: scroll;
box-shadow: 1px 0px 5px rgba(0,0,0,0.3);
}
.category-list li {
padding: 2px 10px;
}
.category-list p {
margin:1rem 0;
font-size:0.9rem;
}
.category-list li.active {
background: #f7f7f7f7;
}
.category-selector {
flex: 2;
position: relative;
}
.choose-category-container {
flex: 0 1 200px;
display: flex;
flex-flow: row wrap;
align-self: stretch;
color:#fff;
}
.bundle-button .choose-category-container {color:#333;padding: 0px 20px;}
.bundle-button
.current-category-container {
line-height: 40px;
border: 2px solid #ff7900;
border-radius: 2px;
padding: 0px 10px;
font-size: 1.2rem;
text-align:left;
}
.choose-category-btn {
flex:  1;
align-self: baseline;
background: #ff7900;
line-height: 42px;
border: none;
margin-left: 2rem;
color: #fff;
transition:.3s;
text-align: center;
text-decoration:none;
}
.choose-category-btn:hover {
background: #fb8010;
color:#fff;
text-decoration:none!important;
}
.current-category-container {
line-height: 40px;
border: 2px solid #fff;
border-radius: 2px;
padding: 0px 10px;
font-size: 1.6rem;
font-weight: 300;
transition:.3s;
}
.current-category-container:hover {
box-shadow:0px 0px 0px 1px #fff inset
}
.current-category-placeholder {
font-weight: bold;
}
.category-selector .glyphicon {
position: absolute;
right: 20px;
top: 15px;
}