/**
* @file
* Basic Motion Box style
*
*
colores
grises usados
#919195
#8d8d8f
#777575
#707073
#5a5a5a
*
*
*
*/
/* src: url('../fonts/u45/UniversLTStd-Cn.otf'); */
@font-face {
font-family: 'UniversU45';
src: url('../fonts/univers/u45/Univers-Light.eot'); /* IE9 Compat Modes */
src: url('../fonts/univers/u45/Univers-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/univers/u45/Univers-Light.woff') format('woff'), /* Modern Browsers */
url('../fonts/univers/u45/Univers-Light.ttf') format('truetype'); /* Safari, Android, iOS */
font-weight: 100;
}
@font-face{
font-family:'UniversU67';
font-style:normal;
font-weight: normal;
src:url("../fonts/u67/UniversLTStd-BoldCn_0.otf");
src: url("fonts/u67/UniversLTStd-BoldCn_0.otf?#iefix") format('embedded-opentype');
src:url("../fonts/u67/UniversLTStd-BoldCn_0.ttf");
}
@font-face{
font-family:'UniversU67_2';
font-style:normal;
font-weight: normal;
src:url("../fonts/u67/UniversLTStd-BoldCnObl_0.otf");
src:url("../fonts/u67/UniversLTStd-BoldCnObl_0.ttf") format('truetype');
}
/*
** Bug fix, Hack (Don't touch this code unless you know what you are doing.)
*/
.container-fluid{
/*padding-left: 10px;
margin-right: 10px;
padding-right: 10px;
margin-left: 10px;*/
margin: 0;
padding: 0;
}
.container { /* hack for fix the bug of different width in cross browser. Keep this hack until Bootstrap resolve this issue */
max-width:1170px;
padding: 0;
font-family: "UniversU45";
}
.section.container {
padding: 80px 0 64px 0;
height: 100%;
}
/*
** Better-Bootstrap https://github.com/itapplication/Better-Bootstrap
** Example of iconlist of icons set
**
** - First list item.
** - Second list item
** - Third list item
**
**
** Example of iconlist of individual icons
**
** - First list item.
** - Second list item
** - Third list item
** - Second list item
**
*/
i.s150x,span.s150x,ul.s150x li:before{font-size:150%}
i.s200x,span.s200x,ul.s200x li:before{font-size:200%}
i.s250x,span.s250x,ul.s250x li:before{font-size:250%}
i.s300x,span.s300x,ul.s300x li:before{font-size:300%}
i.s350x,span.s350x,ul.s350x li:before{font-size:350%}
i.s400x,span.s400x,ul.s400x li:before{font-size:400%}
i.s450x,span.s450x,ul.s450x li:before{font-size:450%}
i.s500x,span.s500x,ul.s500x li:before{font-size:500%}
ul.iconlist.red li:before,ul.iconlist li.red:before{color:red}
ul.iconlist.blue li:before,ul.iconlist li.blue:before{color:#00f}
ul.iconlist.green li:before,ul.iconlist li.green:before{color:#0f0}
ul.iconlist{list-style:none;padding:0;}
ul.iconlist li:before{font-family:'Glyphicons Halflings';position:relative;top:1px;display:inline-block;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 10px;vertical-align:middle}
ul.iconlist.ok li:before{content:"\e013"}
ul.iconlist.check li:before{content:"\e067"}ul.iconlist.ok-sign li:before{content:"\e084"}
ul.iconlist.ok-circle li:before{content:"\e089"}
/** Fill free to edit below code to meet your needs **/
/*Layout*/
#page {
margin: 0 auto;
}
/***Styling***/
/*Font*/
body {
font-size:120%;
}
#content {
font-size: 1.12em;
color: #777575;
}
a {
color: white;
}
a:hover {
color: #919195;
text-decoration: none;
font-family: "UniversU45";
}
h1,
h2,
h3,
h4,
h5,
#page-title {
color: #5a5a5a;
font-family: "UniversU45"
}
h1 {
text-transform: uppercase;
font-size: 1.6em;
font-weight: bold;
}
h2 {
font-size: 1.25em;
font-weight: 900;
}
h3 {
font-size: 1.2em;
font-weight: 800;
}
h4 {
font-size: 1.1em;
font-weight: 700;
}
h5 {
font-size: 1em;
font-weight: 700;
}
hr{
color: #909193;
}
ul{
margin: 0;
padding: 0;
}
/*General*/
.white, .white a{
color: #fff;
}
.black, .black a{
color: #000;
}
.grey, .grey a{
color: grey;
}
.orange, .orange a{
color: #be6e33;
}
.blue, .blue a{
color: #00aeef;
}
.green, .green a{
color: #00a84b;
}
.pink, .pink a{
color: #ec008c;
}
.bg-white{
background-color: #FFF;
}
.bg-orange{
background-color: #be6e33;
}
.bg-blue{
background-color: #00aeef;
}
.bg-darkblue{
background-color:#009bdb;
}
.bg-transparent{
background-color: transparent;
}
.bg-green{
background-color: #00a84b;
}
.bg-pink{
background-color: #ec008c;
}
.bg-grey-light{
background-color: #f0f1f1;
}
.bg-grey-medium{
background-color: #909193;
}
.bg-grey-dark{
background-color: #4e4c4d;
}
img {
/* max-width:100% !important;*/
}
p {
line-height: 1.34em;
}
/*p {
margin: 2px 11px;
}*/
h2 {
margin: 2px 0 5px;;
}
hr {
margin: 0 auto;
}
hr .width25 {
width: 25%;
margin: 0 auto;
}
hr .width50 {
width: 50%;
margin: 0 auto;
}
hr .width75 {
width: 75%;
margin: 0 auto;
}
.box {
background: #f5f5f5;
border: 1em solid #f8f8f8;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
margin: 1em 3em;
}
.button, .form-submit{
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 1.3em;
padding: 10px 4px;
font-size: 0.9em;
text-align: center;
width: 120px;
color: white;
}
.form-submit{
color: #3c3a3b;
}
a .button{
color: white;
}
a .button:hover{
background: white !important;
}
a .button.bg-blue:hover{
border: 1px solid #337ab7 !important;
}
a .button.bg-blue:hover{
color: #337ab7 !important;
}
.button.bg-green:hover{
border: 1px solid #00a84b !important;
}
a .button.bg-green:hover {
color: #00a84b !important;
}
.button.bg-orange:hover{
border: 1px solid #be6e33 !important;
}
a .button.bg-orange:hover{
color: #be6e33 !important;
}
.button.bg-pink:hover{
border: 1px solid #ec008c !important;
}
a .button.bg-pink:hover{
color: #ec008c !important;
}
/*Drupal elements styling*/
#site-name a {
font-size: 1.88em;
text-decoration: none;
color: #555;
}
.item-list .pager{
margin-top: 20px;
text-align: left;
}
.pager li>a, .pager li>span {
border: none;
color: #3c3a3b;
padding: 5px 8px;
text-transform: capitalize;
}
.item-list .pager li {
padding: 0;
margin: 0;
}
.pager li>a:focus, .pager li>a:hover {
background: none;
}
.parallax-section{
background-attachment: fixed !important;
}
/****************
**** HEADER *****
****************/
#header{
color: #FFF;
background-color: #3c3a3b;
height: 80px;
-webkit-transition: height 0.5s ease 0s;
-moz-transition: height 0.5s ease 0s;
-o-transition: height 0.5s ease 0s;
-ms-transition: height 0.5s ease 0s;
transition: height 0.5s ease 0s;
}
#header a{
color: #FFF;
text-decoration: none;
font-family: "UniversU45";
}
#header.header-news{
background-color: #3c3a3b;
}
#header.header-news a,
#header.header-news ul#main-menu li a{
color: #dfdfdf !important;
}
#header .container{
margin: 0 auto;
box-shadow: none;
margin: 12px auto;
}
#header #logo, #header #name-and-slogan, .region-header {
float: left;
height: auto;
margin: 0;
padding: 0;
}
#header #logo img{
height: 55px;
padding: 2px 0;
-webkit-transition: margin 0.5s ease 0s, height 0.5s ease 0s;
-moz-transition: margin 0.5s ease 0s, height 0.5s ease 0s;
-o-transition: margin 0.5s ease 0s, height 0.5s ease 0s;
-ms-transition: margin 0.5s ease 0s, height 0.5s ease 0s;
transition: margin 0.5s ease 0s, height 0.5s ease 0s;
}
#header #name-and-slogan h1{
margin: 0;
}
/* main menu */
#header .top-header{
padding:0;
}
#header .top-header.logo{
float: left;
position: absolute;
z-index: 100;
}
#header .top-header.logoBS{
position: relative;
float: right;
z-index: 200;
right:inherit;
top: 1em;
margin-left: 2em;
margin-right: 2em;
text-align: right;
}
#header .top-header.menu{
float: right;
}
#header .navbar-default{
border: none;
background: none;
float: right;
margin: 9px 0 0;
box-shadow: none;
}
#header .language-menu{
display:none; /*ocultar por defecto en caso de que no haya jquery */
}
#header .language-menu, #header .options-menu{
float: left;
}
#header ul{
margin: 0;
padding: 0;
}
#header ul li{
line-height: 17px;
}
#header .navbar-default .navbar-collapse,#header .navbar-default .navbar-form {
padding-top: 10px;
box-shadow: none;
}
#header ul#main-menu {
text-align: right;
}
#header ul#main-menu li {
display: inline;
padding: 0;
}
#header ul#main-menu li a {
text-decoration: none;
color: #FFF;
display: inline-block;
padding: 0 15px;
font-size: 1.3em;
-webkit-transition: margin-left 0.5s ease 0.1s;
-moz-transition: margin-left 0.5s ease 0.1s;
-o-transition: margin-left 0.5s ease 0.1s;
-ms-transition: margin-left 0.5s ease 0.1s;
transition: margin-left 0.5s ease 0.1s;
}
#header ul#main-menu li a:after {
content: '';
display: block;
height: 2px;
width: 0;
background: transparent;
margin-left: -3px;
margin-top: 10px;
transition: width .5s ease, background-color .5s ease;
}
#header ul#main-menu li a:hover:after,
#header ul#main-menu li a.active:after{
width: 44px;
margin-left: -3px;
margin-top: 10px;
}
#header ul#main-menu li a:hover:after{
background-color: #00aeef;
}
/*
#header ul#main-menu li.menu-Box a:hover:after{
background-color: #be6e33;
}
#header ul#main-menu li.menu-TechTool a:hover:after{
background-color: #ec008c;
}
#header ul#main-menu li.menu-Features a:hover:after{
background-color: #00a84b;
}
#header ul#main-menu li.menu-Benefits a:hover:after{
background-color: #00aeef;
}
#header ul#main-menu li.menu-Customize a:hover:after{
background-color: #ed2800;
}
*/
#header ul#main-menu li a.active:after{
content: '';
display: block;
height: 2px;
transition: width .5s ease, background-color .5s ease;
}
#header ul#main-menu li.menu-Box a.active:after{
background-color: #be6e33;
background-color: #00aeef;
}
#header ul#main-menu li.menu-TechTool a.active:after{
background-color: #ec008c;
background-color: #00aeef;
}
#header ul#main-menu li.menu-Features a.active:after{
background-color: #00a84b;
background-color: #00aeef;
}
#header ul#main-menu li.menu-Benefits a.active:after{
background-color: #00aeef;
background-color: #00aeef;
}
#header ul#main-menu li.menu-Customize a.active:after{
background-color: #ed2800;
background-color: #00aeef;
}
/** share **/
#header .top-header .share{
float: right;
margin: 7px 4px 0 25px;
display: block;
-webkit-transition: margin-left 0.5s ease;
-moz-transition: margin-left 0.5s ease;
-o-transition: margin-left 0.5s ease;
-ms-transition: margin-left 0.5s ease;
transition: margin-left 0.5s ease;
}
#header .top-header .share .share-twitter{
display: block;
width: 37px;
height: 37px;
background-image: url("/sites/all/themes/binarysoul/images/share_icons/share_twitter.png");
background-size: 37px;
}
/** language-menu **/
#header .language-menu, #header .options-menu {
opacity:1;
margin-top: 16px;
margin-left: 1em;
-webkit-transition: opacity 1s linear, font-size 1s ease 0.3s;
-moz-transition: opacity 1s linear, font-size 1s ease 0.3s;
-o-transition: opacity 1s linear, font-size 1s ease 0.3s;
-ms-transition: opacity 1s linear, font-size 1s ease 0.3s;
transition: opacity 1s linear, font-size 1s ease 0.3s;
}
#header .menu-nocollapse{
float: right;
display: block;
}
#header .options-menu .button {
border-radius: 3.5em;
padding: 0.5em 0.25em;
font-size: 0.9em;
width: 9em;
float: right;
margin: 0 0.5em;
}
#header .options-menu .button.private{
border-color:#FFF;
border: 1px solid;
}
#header .language-menu ul{
text-align: right;
}
#header .language-menu li{
display: inline;
float: right;
padding: 0 9px;
}
#header .language-menu li a{
font-size: 1.3em;
color:#000;
}
#header .language-menu li.first{
border-left: 2px solid #99999b;
padding-right: 0;
}
#header .language-menu li.active {
font-weight: bold;
}
/** header small with scrool */
#header .header-small-height,
#header.header-small{
height: 50px;
}
.anchor-content{
display: block;
height: 49px; /*same height as header*/
margin-top: -49px; /*same height as header*/
visibility: hidden;
}
#header .header-small-height{
display: none;
}
#header.header-small{
-webkit-transition: height 0.3s linear;
-moz-transition: height 0.3s linear;
-o-transition: height 0.3s linear;
-ms-transition: height 0.3s linear;
transition: height 0.3s linear;
}
#header.header-small .container {
margin: 0 auto;
}
#header.header-small .container section{
padding: 10px 0;
height: 100%;
}
#header.header-small .top-header.logo{
margin-top: 7px;
}
#header.header-small .navbar-default {
margin: 0;
}
#header.header-small ul#main-menu li a:hover:after, #header.header-small ul#main-menu li a.active:after {
width: 30px;
}
#header.header-small ul#main-menu li a:after , #header.header-small ul#main-menu li a:hover:after, #header.header-small ul#main-menu li a.active:after {
margin-top: 2px;
}
#header.header-small ul#main-menu li a:after, #header.header-small ul#main-menu li a:hover:after {
height: 1px;
}
#header.header-small .top-header .share .share-twitter{
background-size: 20px;
width: 20px;
height: 20px;
}
#header.header-small .top-header .share {
margin: 12px 0;
-webkit-transition: margin-left 0.5s ease 0.1s;
-moz-transition: margin-left 0.5s ease 0.1s;
-o-transition: margin-left 0.5s ease 0.1s;
-ms-transition: margin-left 0.5s ease 0.1s;
transition: margin-left 0.5s ease 0.1s;
}
#header.header-small #logo img{
/*margin-top: 4px 0;*/
height: 35px;
-webkit-transition: margin 0.5s ease, height 0.5s linear;
-moz-transition: margin 0.5s ease, height 0.5s linear;
-o-transition: margin 0.5s ease, height 0.5s linear;
-ms-transition: margin 0.5s ease, height 0.5s linear;
transition: margin 0.5s ease, height 0.5s linear;
}
#header.header-small #main-menu {
}
#header.header-small #main-menu a{
font-size: 1em;
line-height: 24px;
-webkit-transition: font-size 0.5s ease 0s;
-moz-transition: font-size 0.5s ease 0s;
-o-transition: font-size 0.5s ease 0s;
-ms-transition: font-size 0.5s ease 0s;
transition: font-size 0.5s ease 0s;
}
#header.header-small .menu-nocollapse .language-menu,
#header.header-small .menu-nocollapse .options-menu{
visibility: hidden;
opacity: 0;
width: 0;
display: none !important;
}
.region-content ul.inline li {
color: #001155;
float: left;
font-size: 0.9em;
font-style: italic;
line-height: 2em;
list-style-type: none;
margin: 0.8em 0 0;
padding: 0.8em 0 0;
}
/*Admin*/
.overlay-active #page-title,
.page-node-edit #page-title {
font-size: 1em;
}
textarea, input {
color: #444444;
font-family: helvetica;
font-size: 1.01em;
line-height: 1.7em;
}
input[type="text"],
input[type="email"],
input[type="search"],
select {
max-width: 100%;
}
.page-admin table {
width: 95%;
max-width: 1020px;
margin: 0 auto;
}
.page-admin.page-admin-modules table {
width: 95%;
max-width: 95%;
}
tr.even td {
background-color: #fafafa !important;
}
#overlay-tabs a {
line-height: 1.5em !important;
}
.node .links.inline {
float: left;
width: 100%;
clear: both;
}
/* COMUN */
.container{
margin: 0 auto;
width: 90%;
}
.container.title{
margin: 10px auto;
}
/*************************
********* CAROUSEL ********
**************************/
#carousel .carousel {
min-height: 600px !important;
}
#carousel .carousel-inner {
background-image: url(../images/MotionBox_home.jpg);
background-size: 100% auto;
/*background-color: rgba(201,201,201,0.75); */
background-color: rgb(197, 206, 213);
background-position: bottom center;
background-size: 100% auto;
background-repeat: no-repeat;
/* if no jquery working */
padding-top: 200px;
min-height: 600px;
}
#carousel a:hover, #carousel a:focus{
color: white;
text-decoration: none;
}
#carousel .carousel-caption{
position: relative;
left: auto;
right: auto;
bottom: auto;
text-shadow: none;
}
#carousel .carousel-caption .carousel-caption-title{
font-size: 4em;
font-family: 'UniversU67', 'UniversU45';
font-weight: 700;
text-transform: uppercase;
line-height: 0.9em;
text-align: left;
width: 55%;
}
.carousel-indicators .active{
background-color: transparent;
}
.carousel-indicators {
margin-left: 0;
/*left: inherit!important;*/
/* if is not working the jquery */
display: none;
}
#carousel .carousel-indicators li{
margin: 0 4px;
display: block;
float: left;
border: none;
opacity: 0.5;
width: auto;
height: auto;
min-width: 30px;
min-height: 30px;
}
#carousel .carousel-indicators li.first{
margin-left: 0;
}
#carousel .carousel-indicators li.active{
opacity: 1.0;
}
#carousel .carousel-indicators li img{
max-height:78px;
display: block;
/*background-color: black;
min-width: 10px;
min-height: 10px; */
}
#carousel .demo{
display: block;
position: absolute;
font-size: 1.5em;
}
#carousel .demo a{
background: url(../images/icons/play-icon.png) no-repeat -11px 4px;
-webkit-background-size: 24px auto;
-moz-background-size: 24px auto;
background-size: 24px auto;
color: #fff;
display: block;
height: 44px;
line-height: 53px;
padding-left: 24px;
}
#carousel .carousel-caption .button a{
color:white;
font-size: 1.4em;
font-family: "UniversU45";
}
#carousel .more {
position: absolute;
bottom: inherit;
left: 50%;
margin-top: -4em;
}
#carousel .more:after {
content:"";
}
/* SOCIAL ICONS */
ul.social-icons {
width: auto;
padding: 0;
margin-left: 58px;
padding-top: 20px;
}
ul.social-icons li{
width: 20px;
height: 20px;
list-style: none;
background-color: transparent;
background-position: 0 0px;
background-size: 20px;
margin: 5px 0;
}
ul.social-icons li a {
display: block;
height: 100%;
width: 100%;
}
ul.social-icons li.facebook {
background-image: url(../images/share_icons/share_facebook.png);
}
ul.social-icons li.twitter {
background-image: url(../images/share_icons/share_twitter.png);
}
ul.social-icons li.googleplus {
background-image: url(../images/share_icons/share_facebook.png);
}
ul.social-icons li.pinterest {
background-image: url(../images/share_icons/share_twitter.png);
}
.hide-show-content{
display: none;
}
/*****************
***** ICONS *******
****************/
.icon img{
height: auto;
max-height:90px;
}
/*************************
********* QUOTES/INTROS ********
**************************/
.content.quote {
text-align: center;
}
.quote .title {
font-size: 3.0em;
margin-bottom: 1.0em;
line-height: 1.5em;
padding: 0;
}
.quote .description{
font-size: 1.6em;
line-height: 1.5em;
margin: 0.5em auto;
width: 50%;
font-weight: 500;
}
/*************************
********* EXPLANATIONS ********
**************************/
.section.container .icon {
margin-bottom: 2.4em;
text-align: left;
clear: both;
}
.explanation .icon {
margin-left: 5%;
height: 30%;
}
.explanation .presentation {
width: 100%;
clear: both;
border-bottom: solid 1px;
height: 40%;
overflow: hidden;
}
.explanation .presentation.border {
border-bottom: solid 1px;
}
.explanation .title {
font-size: 3.0em;
line-height: 1.2em;
width: 38%;
padding: 0;
display: inline-block;
margin-right: 12%;
border-right: none;
}
.explanation .description{
font-size: 1.5em;
line-height: 1.5em;
font-weight: 500;
width: 47%;
float: right;
padding: 0;
display: block;
margin: 10px 0 0 3%;
}
.explanation .description.bottom {
text-align: left;
padding: 26px 7% 0% 0%;
}
.explanation .details-table{
display: table;
height: 60%;
width: 100%;
}
.explanation .details-table .details{
width: 100%;
clear: both;
display: table-row;
height: 100%;
text-align: center;
}
.explanation .details-table .details .detail{
display: table-cell;
vertical-align: middle;
float: left;
height: 80%;
}
.explanation .details-table .details .detail-icon {
height: 25%;
display: block;
margin-top: 25%;
}
.explanation .details-table .details .detail-title {
display: block;
height: 20%;
color: #FFF;
font-size: 2.3em;
width: 70%;
margin-left: auto;
margin-right: auto;
line-height: 1.2em;
}
.explanation .details-table .details .detail-text {
display: block;
height: 40%;
font-size: 1.3em;
padding-top: 10px;
line-height: 1.6em;
}
.explanation .details .detail img{
max-height: 65px;
}
.explanation .details.three .detail{
padding: 1% 5%;
width: 33.33%;
height: auto;
opacity: 1;
}
/*
.explanation .details.three .detail{
transform: translateY(75px);
/*visibility: hidden;
opacity: 0;*//*
}
.explanation .details.three .detail:hover{
transform: matrix(1, 0, 0, 1, 0, 0);
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
-o-transform: matrix(1, 0, 0, 1, 0, 0);
transform: matrix(1, 0, 0, 1, 0, 0);
visibility: visible;
opacity: 1;
}
*/
.explanation .details.three .detail h3{
width: 80%;
}
.explanation .details.four .detail{
padding: 1% 3%;
width: 25%;
height: 100%;
}
.explanation .details.four .detail h3{
width: 90%;
}
#techTool .explanation .details.four .detail{
opacity: 1;
}
/*************************
********* INTRO ********
**************************/
#industry-intro {
/*min-height: 300px !important;*/
background-image: url("../images/MotionBox_industry_bg.png");
background-repeat: no-repeat;
background-position: center bottom;
background-size: auto 95%;
background-color: #4e4c4d;
text-align: center;
color: #FFF;
padding-top: 3em;
}
/*************************
********* THE BOX ********
**************************/
#box {
color: #FFF;
height: auto;
}
#box #box-image {
background-color: rgba(78, 75, 76, 0.75);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cccccc+0,eeeeee+99 */
background: rgb(204,204,204); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(204,204,204,1) 0%, rgba(238,238,238,1) 99%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(204,204,204,1)), color-stop(99%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(204,204,204,1) 0%,rgba(238,238,238,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(204,204,204,1) 0%,rgba(238,238,238,1) 99%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(204,204,204,1) 0%,rgba(238,238,238,1) 99%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(204,204,204,1) 0%,rgba(238,238,238,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
@-webkit-keyframes animatedHand{
0% { background-position: 0 0;}
25% { background-position: 25% 25px; }
50% { background-position: 0 50px; }
75% { background-position: -25% 25px; }
100% { background-position: 0 0px; }
}
@keyframes animatedHand {
0% { background-position: 0 0;}
25% { background-position: 25% 25px; }
50% { background-position: 0 50px; }
75% { background-position: -25% 25px; }
100% { background-position: 0 0px; }
}
#box #box-image {
height: 100%;
/*min-height: 650px !important;*/
background-image: url("../images/MotionBox-TheBox.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
}
#box #box-image .box-image-hand{
height: 100%;
background-image: url("../images/MotionBox-TheBox_hand.png");
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
animation: animatedHand 10s linear infinite;
}
#box #box-image.parallax-section-no,
#box #box-image.parallax-section-no .box-image-hand{
background-position: center center;
}
body {
/* width: 100%; */
height: auto;
min-width: 0 !important;
}
/*************************
********* TECH TOOL ********
**************************/
#techTool {
color: #FFF;
}
#techTool .tech-tool-container {
position: relative;
width: 100%;
height: 100%;
}
#techTool #techtool-intro{
background-image: url("../images/MotionBox_Tech-Tool_bg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
background-color: #0B0B0B;
}
#techTool #techtool-columns.explanation .presentation{
position: absolute;
height: 100%;
width: 100%;
float:left;
border-bottom:none;
clear:none;
display: table;
}
#techTool #techtool-columns.explanation .presentation .description{
float: none;
margin-left: 0;
}
#techTool #techtool-columns.explanation .icon{
height: 15%;
}
#techTool #techtool-columns.explanation .presentation-details {
height: 100%;
width: 100%;
position: relative;
display: table;
margin: 0;
clear: both;
}
#techTool #techtool-columns.explanation .presentation-details img{
max-width: 205px;
margin-bottom: 25px;
max-height: 550px;
}
#techTool #techtool-columns.explanation .presentation-details strong{
display: block;
}
#techTool #techtool-columns.explanation .title{
float: none;
width: 40%;
}
#techTool #techtool-columns #tech-head,
#techTool #techtool-columns #tech-column{
display: table-cell;
vertical-align: bottom;
width: 50%;
text-align: center;
}
#techTool #techtool-columns #tech-head h3,
#techTool #techtool-columns #tech-column h3 {
color:#FFF;
font-size: 2em;
min-height: 2.5em;
}
#techTool #techtool-columns #tech-head p,
#techTool #techtool-columns #tech-column p {
font-size: 1.3em;
width: 47%;
margin: 0 auto;
}
#techTool #techtool-photos{
width: 100%;
overflow: hidden;
position: relative;
}
#techTool #techtool-photos .picture{
margin:0px;
padding:0px;
width:25%;
float:left;
min-height: 0;
}
#techTool #techtool-photos img{
width:100%;
float: right;
}
/*************************
*****FEATURES REGION******
**************************/
#features{
color:#FFF;
}
#features #features-intro{
height: 40%;
}
#features #features-characteristics{
height: 60%;
}
#features #features-intro .explanation, #features #features-characteristics .explanation{
height: 100%;
}
#features #features-intro .presentation{
height: 100%;
border-bottom: none;
}
#features #features-intro .presentation .title{
padding: 0 10% 0 0;
}
/*
#features #features-characteristics .details {
height:100%;
}
*/
/*
#features #features-characteristics .explanation .details .detail{
width: 23%;
padding: 1% 3%;
}*/
#features #features-characteristics .explanation .details .detail-icon{
margin-top: 0%;
margin-bottom: 25%;
}
#features #features-characteristics .explanation .details .detail h3, #features #features-characteristics .explanation .details .detail-title{
color: #00aeef;
width:100%;
}
#features #features-display{
color: #fff;
height: 30%;
}
#features #features-display .content{
height: 100%;
}
#features #features-modes{
height: 70%;
min-height: 600px;
/* if no jquery no show video section */
display: none;
}
#features #features-modes .section.container{
padding-top: 10px;
padding-bottom: 0px;
min-height: 600px;
}
.modes-videos {
height: 100%;
}
#features #features-modes .video {
/*background-image: url("../images/Section_Features_Tv2.png");
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100% ;
background-size: auto 100% ;
background-color:#FFF;*/
/*width: 50%;*/
/*display: block;
/*float: left;*/
/*min-height: 520px;*/
/*margin-top: 110px;
/*JELOU*/
/* dejar el video como fondo */
/*position: absolute;
/*z-index: -1; así no se puede pausar etc.. a mano*/
/*margin: 0 auto;
/*width: 33%;
margin-left: 33%;
margin-right: 33%;*/
/*height: 100%;
width: 50%;
margin: 0 auto;*/
min-height: 600px;
display: block;
height: 100%;
width: 100%;
margin:0 auto;
position: relative;
}
#features #features-modes .video video{
height: 100%;
margin: 0 auto;
display: block;
/* width: 50%; */
/* margin-left: 25%; */
z-index: -10;
z-index: 0;
position: relative;
/*
background:url("../images/Section_Features_Tv2.jpg");
background-color: transparent;
background-repeat: no-repeat;
background-position: 0 0;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
*/
}
#features #features-modes .video .video_frame img.spinner{
position: absolute;
z-index: 10;
display: none;
width: 20%;
margin: 10% 40%;
}
#features #features-modes .video .video_frame {
height: 100%;
width: 100%;
z-index: 0;
display: block;
position: absolute;
}
#features #features-modes .video_frame .video-bg{
position: absolute;
display: block;
width: 100%;
height: 100%;
}
#features #features-modes .video_frame .video-bg img{
display: block;
margin: 0 auto;
height: 100%;
width: auto;
}
#features #features-modes .video_frame.vertical .video-bg img{
width: 100%;
height: auto;
}
#features #features-modes .video_frame.horizontal .video-bg img{
height: 100%;
width: auto;
}
#features #features-modes .video video.parallaxFix{
height: 120%;
margin-top: 5%;
}
#features #features-modes .modes {
width: 100%;
z-index: 99999;
z-index: 1009;
display: block;
height: 100%;
position: absolute;
}
#features #features-modes .modes a{
color: #919195;
display: block;
max-width: 120px;
max-height: 120px;
background-image: url("../images/icons/Section_Features_mode_off.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
background-color: transparent;
}
#features #features-modes .modes a:hover, #features #features-modes .modes a:active, #features #features-modes .modes a.playing {
background-image: url("../images/icons/Section_Features_mode_on.png");
}
#features #features-modes .modes.right a{
text-align: right;
float: right;
}
#features #features-modes .modes .mode{
width: 50%;
height: 20%;
display: inline-block;
float: left;
}
#features #features-modes .modes .mode.right {
float: right;
right: 0;
text-align: right;
display: block;
}
#features #features-modes .modes .mode.right a{
float: right;
background-image: url("../images/icons/Section_Features_mode_right_off.png");
}
#features #features-modes .modes .mode.right a:hover, #features #features-modes .modes .mode.right a:active, #features #features-modes .modes .mode.right a.playing{
background-image: url("../images/icons/Section_Features_mode_right_on.png");
}
/*
#features #features-modes .modes .mode:hover, #features #features-modes .modes .mode:active, #features #features-modes .modes .mode.on{
background-image: url("../images/icons/Section_Features_mode_on.png");
}
#features #features-modes .modes .mode.right:hover, #features #features-modes .modes .mode.right:active, #features #features-modes .modes .mode.right.on {
background-image: url("../images/icons/Section_Features_mode_right_on.png");
}*/
#features #features-modes .modes .mode img{
width: 3em;
float: left;
margin-right: 1em;
}
#features #features-modes .modes .mode p{
padding: 2em 1.2em;
height: 120px;
}
#features #features-modes .glyphicon{
display: none;
}
/*
#features #features-modes.videoFull .video video {
height: 85%;
width: auto;
margin: 0 auto;
position: relative;
padding-top: 0;
max-width: 100%;
}
#features #features-modes.videoFull .modes {
height: 15%;
position: relative;
margin: 0 auto;
z-index: 9;
}
#features #features-modes.videoFull .modes .mode {
width: 25%;
height: 100%;
display: block;
float: left;
}
#features #features-modes.videoFull .modes .mode a {
float: none;
max-width: 150px;
max-height: none;
background-size: 80% 95%;
height: 100%;
margin: 0 auto;
background-image: url("../images/icons/Section_Features_mode_down_off.png");
}
#features #features-modes.videoFull .modes .mode a:hover,
#features #features-modes.videoFull .modes .mode a:active,
#features #features-modes.videoFull .modes .mode a.playing{
background-image: url("../images/icons/Section_Features_mode_down_on.png");
}
#features #features-modes.videoFull .modes .mode p {
padding: 0.8em 0.5em;
height: 100%;
text-align: center;
width: 70%;
margin: 0 auto;
}
*/
#features .detail{
opacity: 1;
}
#features .detail.scaleBounce{
visibility:visible!important;
-webkit-animation:scaleBounce 1s linear;
-moz-animation:scaleBounce 1s linear;
-ms-animation:scaleBounce 1s linear;
-o-animation:scaleBounce 1s linear;
animation:scaleBounce 1s linear
}
@-ms-keyframes scaleBounce{
100%,50%{-ms-transform:scale(1)}
0%{-ms-transform:scale(1.5);opacity:0}
70%{-ms-transform:scale(1.1)}
100%{opacity:1}
}
@-moz-keyframes scaleBounce{
0%{-moz-transform:scale(1.5);transform:scale(1.5);opacity:0}
50%{-moz-transform:scale(1);transform:scale(1)}
70%{-moz-transform:scale(1.1);transform:scale(1.1)}
100%{-moz-transform:scale(1);opacity:1;transform:scale(1)}
}
@-webkit-keyframes scaleBounce{
0%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}
50%{-webkit-transform:scale(1);transform:scale(1)}
70%{-webkit-transform:scale(1.1);transform:scale(1.1)}
100%{-webkit-transform:scale(1);opacity:1;transform:scale(1)}
}
@-o-keyframes scaleBounce{
0%{-o-transform:scale(1.5);transform:scale(1.5);opacity:0}
50%{-o-transform:scale(1);transform:scale(1)}
70%{-o-transform:scale(1.1);transform:scale(1.1)}
100%{-o-transform:scale(1);opacity:1;transform:scale(1)}
}
@keyframes scaleBounce{
0%{transform:scale(1.5);opacity:0}
50%{transform:scale(1)}
70%{transform:scale(1.1)}
100%{opacity:1;transform:scale(1)}
}
/*************************
*****CUSTOMIZE REGION*****
**************************/
/*.techtool-parallax{
background-image: url("../images/MotionBox_benefits_bg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
color: #FFF;
}*/
#benefits{
background-image: url("../images/MotionBox_benefits_bg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
background-color: #08070b;
color: #FFF;
}
#benefits .mb-benefits{
height: 100%;
}
#benefits.explanation .mb-benefits .details .detail img{
max-height: 6em;
}
#benefits.explanation .presentation{
border-bottom:none;
width:50%;
float:left;
height: 100%;
}
#benefits.explanation .icon{
height: 15%;
}
#benefits.explanation .title {
width: 100%;
}
#benefits.explanation .presentation .description{
padding-left: 0;
width: 60%;
float: none;
margin-left: 0;
}
#benefits.explanation .details-table {
width: 50%;
}
#benefits.explanation .details{
width:100%;
float:left;
clear:none;
text-align: left;
}
#benefits.explanation .details .column-detail {
width: 40%;
float: left;
margin-right: 10%;
height: 100%;
}
#benefits.explanation .details .detail{
height: 50%;
}
#benefits.explanation .details .detail .detail-icon{
margin: 0;
height: auto;
}
#benefits.explanation .details .detail .detail-title{
font-size: 1.5em;
width: 100%;
margin: 1.5em 0 0;
height: auto;
}
#benefits.explanation .details .detail .detail-text{
font-size: 1em;
height: auto;
}
/*************************
*****CUSTOMIZE REGION*****
**************************/
#customize{
color: #000;
background-image: url("../images/MotionBox_customize.jpg");
background-position: center center;
background-repeat: no-repeat;
}
#customize .icon{
text-align: center;
}
/*************************
*****CONTACT REGION********
**************************/
#contact {
color: white;
}
#contact .logo{
width: 50%;
float: left;
}
#contact .text{
width: 50%;
float: left;
color: #3c3a3b;
}
#contact .text .title,
#contact .text .description{
width: 100%;
float: none;
}
#contact .text .title,
#contact .text .description{
width: 100%;
float: none;
margin: 0;
}
#contact .text .description{
margin-top: 40px;
}
#contact img{
width: 50%;
max-width: 180px;
}
#contact .links{
background-color: #919195;
}
#contact a, #contact h1, #contact h2, #contact h3{
color: white;
}
#contact .desc{
font-family: "UniversU45";
font-size: 2.2em;
}
#contact ul.contact{
margin: 60px 0 0;
padding: 0;
display: flex;
}
#contact ul.contact li{
display: block;
float: left;
width: 33%;
border-left: 1px solid white;
padding: 0 70px;
font-family: "UniversU45";
}
#contact ul.contact li.first-item{
border-left: none;
}
#contact ul.contact li .text{
font-size: 1.8em;
}
#contact ul.contact li .title{
font-size: 3.8em;
margin-bottom: 5px;
text-transform: capitalize;
}
#contact ul.contact li .info{
font-size: 2em;
margin-bottom: 15px;
}
#contact ul.contact li .text{
font-size: 1.4em;
}
#contact ul.contact .contact-icon{
height: 75px;
display: block;
margin: 0 auto 12px;
}
#contact ul.contact li .contact-icon.phone, /* #contact .links .contact-block ul li.contact-icon.phone */{
background-image: url("/sites/all/themes/binarysoul/images/contact/contact-phone.png");
background-position: center center;
background-repeat: no-repeat;
}
#contact ul.contact li .contact-icon.email, /* #contact .links .contact-block ul li.contact-icon.email */{
background-image: url("/sites/all/themes/binarysoul/images/contact/contact-email.png");
background-position: center center;
background-repeat: no-repeat;
}
#contact ul.contact li .contact-icon.address /*, #contact .links .contact-block ul li.contact-icon.address */{
background-image: url("/sites/all/themes/binarysoul/images/contact/contact-address.png");
background-position: center center;
background-repeat: no-repeat;
}
/*************************
*****LEGAL REGION********
**************************/
#info-pages {
display:none; /*por defecto oculta en caso de que no se cargue jquery */
}
#info-pages .container{
padding: 20px 0 10px 0;
color: #777575;
text-align:left;
}
#info-pages h1{
color:#777575!important;
margin-bottom: 0.5em;
text-align:left;
}
#info-pages a {
color:#777575!important;
text-align:left;
}
#info-pages .paragraph{
font-size: 13px;
line-height: 20px;
margin-top: 0.5em;
text-align:left;
}
/*************************
***** FOOTER REGION *******
**************************/
#footer {
background-color: #FFF;
color: #909193;
padding: 60px 0 90px 0;
}
#footer a, #footer h1, #footer h2, #footer h3{
font-family: "UniversU45";
}
#footer .section div{
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0!important;
}
#footer .footer-inner{
width:100%;
display:block;
}
#footer .footer-content{
margin: 0;
padding:0;
display: block;
border-bottom: solid 1px #909193;
padding-bottom: 3em;
}
#footer .footer-content .logo{
width:48.75%;
margin-left:0;
margin-right:1.25%;
display: inline-block;
vertical-align: top;
min-height: 8em;
}
#footer .logo img{
max-width: 150px !important;
}
#footer .logoBS {
float: right;
}
#footer .footer-content .menu{
width:45%;
margin-left:2.5%;
margin-right:0%;
display: inline-block;
min-height: 8em;
}
#footer .footer-content .menu .button {
border-radius: 3.5em;
padding: 0.5em 0.5em;
font-size: 1.0em;
padding-left: 2.5em;
width: 12em;
float: right;
margin: 0px 0.5em;
text-align: center;
background-image: url("../images/icons/download.png");
background-repeat: no-repeat;
background-position: 1em 0.75em;
height: 3.5em;
display: table;
}
#footer .menu ul {
width: 30%;
float: right;
text-transform: uppercase;
}
#footer .menu ul li{
list-style-type: none;
padding-right: 5px;
}
#footer .menu li.menu-name {
margin-bottom: 10px;
color: #3c3a3b;
font-size: 1.1em;
font-weight: bold;
}
#footer a, #footer .menu li a{
color: #919195;
font-size: 1em;
line-height: 1.6em;
}
#footer .menu li a:hover {
color: #00aeef;
}
#footer .copyright{
padding-top: 2em;
font-size: 1em;
clear: both;
display: inline-block;
margin-right: 1.25%;
width: 100%;
margin-left: 0;
}
#footer .copyright .rights{
padding-left:0px;
float:left;
display:inline-block;
}
#footer .copyright .legal{
float:left;
display:inline-block;
}
#footer .copyright .footer-link{
padding-left: 12px;
}
#footer .copyright a:hover{
color: #00aeef;
}
#footer .footer-products-links img{
max-width: 30px !important;
}
#footer .contact-info{
display: block;
clear: both;
}
/**********************************************************
/*********************** CONTACT ***********************
***********************************************************/
#contact .links .contact-block {
height: 50px;
/*background-color: #303030;*/
background-color: #fff;
}
#contact .links .contact-block ul {
max-height: 100px;
overflow: hidden;
margin: 0 auto;
width: 100%;
overflow: hidden;
position: relative;
top: -50px;
}
#contact .links .contact-block ul li {
box-sizing: border-box;
/*color: #505252;*/
color: #fff;
float: left;
height: 100px;
line-height: 12px;
overflow: hidden;
position: relative;
top: 50px;
width: 33.26%;
/*background-color: #f0f1f1;*/
background-color: #3c3a3b;
margin: 0;
-webkit-transition: top 0.5s ease 0s;
-moz-transition: top 0.5s ease 0s;
-o-transition: top 0.5s ease 0s;
-ms-transition: top 0.5s ease 0s;
transition: top 0.5s ease 0s;
}
#contact .links .contact-block ul li.middle{
margin: 0 0.10%;
}
#contact .links .contact-block ul li .title{
position: absolute;
/*color: #505252;*/
color: #fff;
height: auto;
width: 100%;
text-align: center;
font-size: 1.6em;
text-shadow: none;
text-transform: uppercase;
/* corrección para internet explorer */
position: relative;
margin-top:1em;
}
#contact .links .contact-block ul li div.content,
#contact .links .contact-block ul li a div.content,
#contact .links .contact-block ul li a div.content a {
opacity: 0;
/*color: #505252;*/
color: #fff;
margin-top: 20px;
padding-top: 30px;
text-align: center;
font-size: 1.25em;
font-weight: normal;
-webkit-transition: opacity 0.5s ease 0s;
-moz-transition: opacity 0.5s ease 0s;
-o-transition: opacity 0.5s ease 0s;
-ms-transition: opacity 0.5s ease 0s;
transition: opacity 0.5s ease 0s;
/* corrección para internet explorer */
padding-top: 5px;
}
#contact .links .contact-block ul li .all{
padding-top: 0px;
}
#contact .links .contact-block ul li:hover{
top: 25px !important;
-webkit-transition: top 0.5s ease 0s;
-moz-transition: top 0.5s ease 0s;
-o-transition: top 0.5s ease 0s;
-ms-transition: top 0.5s ease 0s;
transition: top 0.5s ease 0s;
}
#contact .links .contact-block ul li:hover .title{
font-weight: normal;
}
#contact .links .contact-block ul li:hover .content{
font-weight: normal;
opacity: 1 !important;
margin-top: 10px !important;
-webkit-transition: margin-top 0.5s ease 0s, opacity 0.5s ease 0s;
-moz-transition: margin-top 0.5s ease 0s, opacity 0.5s ease 0s;
-o-transition: margin-top 0.5s ease 0s, opacity 0.5s ease 0s;
-ms-transition: margin-top 0.5s ease 0s, opacity 0.5s ease 0s;
transition: margin-top 0.5s ease 0s, opacity 0.5s ease 0s;
}
/**********************************************************
/*********************** ORDER NOW MODAL ******************
***********************************************************/
.modal-backdrop.fade.in{
z-index: 1039!important;
}
#orderModal .modal-content {
border-radius: 0px;
border: 2px solid #00acec;
padding: 1em;
}
#orderModal .modal-content .modal_contact_section {
width:50%;
float:left;
padding-left: 2em;
padding-right: 2em;
}
#orderModal .modal-content .modal-header .logo{
text-align: left;
margin-bottom: 2em;
padding-top: 1em;
padding-left: 1em;
}
#orderModal .modal-content .modal-header .logo img{
width:20%;
}
#orderModal .modal-content .modal-body {
margin-top: 1em;
padding: 0px;
}
#orderModal .modal-content .modal-body .title{
margin-bottom: 3em;
}
#orderModal .modal-content .modal-body .title h3{
font-size: 1.75em;
}
#orderModal .modal-content .modal-body .phone, #orderModal .modal-content .modal-body .mail {
text-align:center;
margin-bottom: 2.5em;
}
#orderModal .modal-content .modal-body .phone span, #orderModal .modal-content .modal-body .mail span{
font-size: 3em;
margin-bottom: 0.25em;
}
#orderModal .modal-content .modal-body .phone p, #orderModal .modal-content .modal-body .mail p{
font-size: 1.4em;
margin-bottom: 0.25em;
}
#orderModal .modal-content .modal-header, #orderModal .modal-content .modal-footer {
min-height: 0;
padding: 0;
border-bottom: 0;
border-top: 0;
clear: both;
margin-top: 0.5em;
}
#orderModal .modal-content #contact_us{
border-right: 1px solid #00acec;
min-height: 32em;
}
#orderModal .modal-content #contact_you{
border-left: 1px solid #00acec;
}
#orderModal .modal-content .modal-footer div.boton{
width:50%;
float: left;
padding-left: 10%;
padding-right: 10%;
text-align:center;
}
#orderModal .modal-content .modal-footer #sendForm {
color:#FFF;
background-color: #00aeef;
border-color: #00aeef;
}
#orderModal .modal-content .modal-footer button.close:hover{
color:#00aeef;
}
/**********************************************************
/*********************** SVGS PEANA ***********************
***********************************************************/
#techtool-columns a {
position: relative;
display: inline-block;
margin: 0 auto;
color:#FFF;
cursor: default;
}
/*
#techtool-columns a:hover:after {
bottom: -10px;
opacity: 1;
}
#techtool-columns a:after {
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
content: "";
position: absolute;
bottom: -30px;
left: 0px;
height: 2px;
width: 60%;
left: 50%;
margin-left: -30%;
opacity: 0;
background-color: #FFF;
} */
#techtool-columns a svg path,
#techtool-columns a svg line.st0,
/*#techtool-columns a svg polyline,*/
#techtool-columns a svg circle,
#techtool-columns a svg rect,
#techtool-columns a svg polygon
{
stroke-dasharray: 1064px;
}
#techtool-columns a:hover svg path, #techtool-columns a.animado svg path,
#techtool-columns a:hover svg line.st0, #techtool-columns a.animado svg line.st0,
/*#techtool-columns a:hover svg polyline,*/
#techtool-columns a:hover svg circle, #techtool-columns a.animado svg circle,
#techtool-columns a:hover svg rect, #techtool-columns a.animado svg rect,
#techtool-columns a:hover svg polygon, #techtool-columns a.animado svg polygon {
stroke-dashoffset: 2128px;
}
#techtool-columns a svg {
display: block;
margin-bottom: 15px;
}
#techtool-columns #tech_head_animation a svg {
height: 200px;
}
#techtool-columns #tech_column_animation a svg {
height: 600px;
}
#techtool-columns a svg path,
#techtool-columns a svg line.st0,
/*#techtool-columns a svg polyline,*/
#techtool-columns a svg circle,
#techtool-columns a svg rect,
#techtool-columns a svg polygon {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
fill: none;
stroke-dashoffset: 0px;
}
#techtool-columns a svg text,
#techtool-columns a svg polyline
{
color: #FFF;
fill: none;
opacity:0.0;
}
#techtool-columns a svg line.st4
{
stroke-width:0;
stroke-dashoffset: 0px;
}
#techtool-columns a:hover svg line.st4, #techtool-columns a.animado svg line.st4 {
animation-duration: 4s;
animation-name: showSVGLine;
animation-fill-mode: forwards;
}
@keyframes showSVGLine {
50%{
stroke-width:0;
stroke-dashoffset: 0px;
}
100%{
stroke:#FFF;
stroke-width:0.25;
stroke-dasharray: 1064px;
stroke-dashoffset: 2128px;
}
}
#techtool-columns a:hover svg text, #techtool-columns a:hover svg polyline, #techtool-columns a.animado svg text, #techtool-columns a.animado svg polyline {
animation-duration: 4s;
animation-name: showSVGText;
animation-fill-mode: forwards;
fill: #FFF;
}
@keyframes showSVGText {
50%{
fill: #FFF;
opacity:0.0;
}
100%{
fill: #FFF;
opacity:1.0;
}
}
/**********************************************************
/*********************** RESPONSIVE ***********************
***********************************************************/
/* every section fix the height with the screen
& their divs height are with % */
@media (min-width: 1300px) and (min-height: 900px) {
.explanation .title {
margin: 0;
}
}
/* , is or */
@media (max-width: 1300px), (max-height: 900px) {
.explanation .icon {
height: auto;
}
.icon img {
height: 90px;
padding: 5px 0;
}
.explanation .title {
margin: 18px 0 0;
}
.section.container .icon {
margin-bottom: 0;
}
.explanation .title {
font-size: 3em;
line-height: 1.2em;
}
.explanation .presentation.border {
padding-bottom: 50px;
margin-bottom: 30px;
}
.explanation .details-table .details .detail-icon {
height: 60px;
margin-top: 0;
}
.explanation .details.three .detail {
padding: 0 5%;
}
.explanation .details .detail img {
max-height: 65px;
height: 100%;
width: auto;
}
.explanation .details-table .details .detail-title {
font-size: 2em;
height: auto;
padding: 10px 0;
min-height: 78px;
}
#techTool .tech-tool-container,
#techTool #techtool-columns.explanation .presentation,
#techTool #techtool-columns.explanation .presentation-details ,
#techTool #techtool-columns.explanation .icon{
height: auto;
}
#techTool #techtool-photos .carousel {
min-height: 100px!important;
}
#features #features-intro .presentation {
height: auto;
}
#features #features-intro .presentation .title {
padding: 0;
width: 40%;
margin-right: 10%;
}
#features #features-characteristics .explanation .details .detail-icon {
margin-bottom: 0;
}
#features #features-characteristics .explanation .details .detail-title {
min-height: 58px;
}
#benefits.explanation .details .detail .detail-icon {
padding:0;
}
#benefits.explanation .details .detail .detail-icon img{
max-height: 5em;
height: auto;
}
#benefits.explanation .details .detail .detail-title {
margin: 0;
min-height: 55px;
}
#benefits.explanation .details .detail {
height: 350px;
}
}
@media all and (orientation:landscape) {
#techTool #techtool-intro{
background-size: 100% auto;
}
}
@media all and (orientation:portrait) {
#benefits {
background-size: auto 100%;
}
#carousel .carousel-inner {
background-position: bottom center;
background-size: auto 100%;
}
#benefits{
background-size: auto 100%;
}
#techTool #techtool-intro{
background-size: auto 100%;
}
/*#box #box-image{
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}*/
}
/* Large desktop */
@media (max-width: 1300px) {
/* general */
h1 {
font-size: 1.5em;
margin-top: 15px;
margin-bottom: 6px;
}
h2 {
font-size: 1.2em;
}
.button {
border-radius: 1.3em;
padding: 7px 3px;
}
/* header */
#header {
height: 70px;
}
#header .container {
margin: 10px auto;
}
#header #logo img {
height: 48px;
}
#header ul#main-menu li a {
padding: 0 13px;
font-size: 1.2em;
}
#header ul#main-menu li a:after {
margin-top: 8px;
}
#header ul#main-menu li a:hover:after,
#header ul#main-menu li a.active:after{
margin-top: 8px;
}
#header .navbar-default {
margin: 0
}
#header .top-header .share {
float: right;
margin: 3px 3px 0 10px;
}
#header .top-header .share .share-twitter {
width: 30px;
height: 30px;
background-size: 30px;
}
#header .language-menu li a {
font-size: 1em;
}
#header.header-small,
#header .header-small-height {
height: 45px;
}
.anchor-content{
height: 44px; /*same height as header*/
margin-top: -44px; /*same height as header*/
}
#header .navbar-default .navbar-collapse,
#header .navbar-default .navbar-form {
padding-top: 12px;
}
#header.header-small #logo img {
height: 30px;
}
#header.header-small ul#main-menu li a:after,
#header.header-small ul#main-menu li a.hover:after,
#header.header-small ul#main-menu li a:active:after{
margin-top: 0 !important;
}
#header .top-header.logoBS {
margin-right: 0;
}
/* GENERAL */
.section.container {
padding: 100px 0 80px 0;
}
/* carousel */
#carousel .carousel-caption .carousel-caption-title {
font-size: 4em;
font-family: 'UniversU67', 'UniversU45';
font-weight: 700;
text-transform: uppercase;
line-height: 0.9em;
text-align: left;
width: 60%;
}
/* titles & icons & description */
.quote .title,
.explanation .title {
font-size: 2.8em;
}
.quote .description,
.explanation .description {
font-size: 1.5em;
line-height: 1.4em;
}
.explanation .details-table .details .detail-title {
font-size: 1.9em;
width: 75%;
}
.explanation .details .detail img {
max-height: 50px;
}
.explanation .details-table .details .detail-text {
line-height: 1.4em;
}
.explanation .title {
width: 45%;
}
/* techTool carousel */
#techTool #techtool-photos .picture {
width: 50%;
}
#benefits {
background-size: auto 100%;
}
#benefits.explanation .details .detail .detail-icon img {
max-height: 4em;
}
#benefits.explanation .details .detail .detail-title {
font-size: 1.5em;
line-height: 1em;
padding: 7px 0;
}
#benefits.explanation .details .detail .detail-text {
font-size: 1.1em;
}
#benefits.explanation .details-table .details .detail-text {
padding-top: 0px;
}
#benefits.explanation .details .column-detail {
width: 44%;
margin-right: 6%;
}
#benefits.explanation .details .detail {
height: 300px;
}
/* contact */
#contact .links .contact-block ul li {
width: 33.25%;
}
#contact .links .contact-block ul li div.content,
#contact .links .contact-block ul li a div.content,
#contact .links .contact-block ul li a div.content a {
font-size: 1.2em;
padding: 5px 15px;
}
/* more pages -> legal, ...*/
#info-pages .paragraph{
font-size: 12px;
}
/* footer */
#footer .footer-content .menu {
margin-left: 0;
}
#footer .menu ul {
width: 31%;
}
#footer .menu li.menu-name {
font-size: 1em;
}
#footer .menu li a {
font-size: 0.9em;
}
}
/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) {
/* general */
.container{
max-width: none !important;
width: 90% !important;
margin-left: auto;
margin-right: auto;
}
h1 {
font-size: 1.4em;
margin-top: 12px;
margin-bottom: 3px;
}
h2 {
font-size: 1em;
}
/* header */
#header {
height: 60px;
}
#header .container {
margin: 6px auto;
}
#header #logo img {
height: 43px;
}
#header ul#main-menu li a {
padding-right: 9px;
font-size: 1.2em;
}
#header .top-header .share .share-twitter {
width: 20px;
height: 20px;
background-size: 20px;
}
#header .top-header .share {
margin-top: 7px;
}
#header .language-menu li {
padding: 0 7px;
}
#header .language-menu li.first {
border-left: 1px solid #99999b;
}
/* button */
.button {
padding: 6px 0;
font-size: 0.8em;
width: 100px;
}
/* carousel */
#carousel .carousel-indicators li img{
max-height: 55px;
}
#carousel .carousel-caption .carousel-caption-title {
width: 40%;
}
/* contact */
#contact .logo img{
max-width: 125px;
}
#contact .links .contact-block ul li {
width: 33.12%;
}
#contact .links .contact-block ul li.middle{
margin: 0 0.30%;
}
/* GENERAL */
.section.container {
padding: 75px 0 55px 0;
}
/* FOOTER */
#footer .footer-content .logo {
width: 38.5%;
}
#footer .footer-content .menu {
width: 55%;
}
#footer .logo img {
max-width: 120px !important;
}
#footer .copyright {
font-size: 0.9em;
}
#footer .contact-info {
padding-top: 5px;
}
/* content */
.quote .title, .explanation .title {
font-size: 2.6em;
margin-bottom: 0.8em;
line-height: 1em;
}
.quote .description, .explanation .description {
font-size: 1.3em;
line-height: 1.3em;
}
.icon img {
height: 72px !important;
padding: 2px 0;
}
.explanation .details-table .details .detail-title {
font-size: 1.6em;
width: 80%;
}
.explanation .details.three .detail {
padding: 0 3%;
}
.explanation .details-table .details .detail-icon {
height: 55px;
}
.explanation .details-table .details .detail-text {
line-height: 1.3em;
font-size: 1.2em;
padding-top: 0px;
}
.explanation .description {
margin: 17px 0 0 3%;
}
#techTool .explanation .description.bottom {
padding: 0;
}
#techTool #techtool-columns.explanation .presentation-details img {
max-width: 150px;
margin-bottom: 20px;
max-height: 400px;
}
#techTool #techtool-columns #tech-head h3,
#techTool #techtool-columns #tech-column h3 {
color: #FFF;
font-size: 1.6em;
min-height: 2em;
}
#techTool #techtool-columns #tech-head p,
#techTool #techtool-columns #tech-column p {
font-size: 1.2em;
width: 50%;
line-height: 1.2em;
}
#techTool #techtool-columns #tech-head,
#techTool #techtool-columns #tech-column {
padding-top: 20px;
}
/* more pages -> legal, ...*/
#info-pages .paragraph{
font-size: 11px;
}
#info-pages .paragraph p{
line-height: 1.2em;
margin-bottom: 5px;
}
/*order now form */
#orderModal .modal-content .modal-body .title h3{
font-size: 1.5em;
text-align: center;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
/* general */
h1 {
font-size: 1.2em;
margin-top: 10px;
margin-bottom: 2px;
}
h2 {
font-size: 0.9em;
}
.h1, .h2, .h3, h1, h2, h3 {
margin-top: 12px;
margin-bottom: 8px;
}
.button {
padding: 3px 0;
}
/* header */
#header .menu-nocollapse .language-menu,
#header .menu-nocollapse .options-menu{
float: right;
}
#header .navbar, #header .navbar.navbar-header{
width: 100%;
}
#header .navbar .navbar-collapse{
width: 40%;
margin-left: 60%;
background-color: #3c3a3b;
border-top: none;
}
#header ul#main-menu {
text-align: right;
}
#header .col-md-9.top-header.menu{
width: 80%;
}
#header .navbar .navbar-collapse ul#main-menu li{
display: block !important;
width: 100%;
padding: 12px 0;
border-bottom: 1px dotted #8d8d8f;
font-size: 1.2em;
}
#header .menu-collapse{
float: right;
margin: 10px 0 20px;
}
#header .menu-collapse .language-menu li{
display: inline-block;
}
#header .navbar-collapse ul#main-menu li a.active:after,
#header .navbar-collapse ul#main-menu li a:after,
#header .navbar-collapse ul#main-menu li a.hover:after{
display: none;
}
#header.header-small #main-menu a{
line-height: 17px;
color: #ddd;
}
#header.header-small #main-menu a:hover,
#header.header-small #main-menu a.active{
color: white;
}
#header .navbar-toggle {
margin: 8px 0 0;
width: 36px;
height: 28px;
padding: 1px 5px;
}
/* GENERAL */
.section.container {
padding: 60px 0 40px 0;
}
/* FOOTER */
#footer .footer-content {
padding-bottom: 2em;
}
#footer .footer-content .logo{
width:80%;
clear:both;
}
#footer .footer-content .menu{
width:100%;
margin-left:0%;
margin-right:0%;
display: inline-block;
}
#footer .copyright{
display: inline-block;
margin-right: 0%;
width: 100%;
margin-left: 0%;
}
#footer .menu ul {
width: 33.33%;
}
#footer .menu li.menu-name {
font-size: 0.95em;
}
#footer .menu li a {
font-size: 0.85em;
}
#footer .menu li.menu-name {
margin-bottom: 8px;
}
#footer .menu ul li {
padding-right: 5px;
}
/*CONTACT*/
#contact .links .contact-block ul li .title{
font-size: 1.3em;
}
#contact .links .contact-block ul li div.content, #contact .links .contact-block ul li a div.content,
#contact .links .contact-block ul li a div.content a{
font-size: 1.05em;
padding-left: 0.25%;
padding-right: 0.25%;
}
#contact .text .description {
margin-top: 25px;
}
#customize .icon img {
max-height: 60px;
}
#customize .title {
margin-top: 12px;
}
/* CONTENT */
#carousel .carousel-caption .carousel-caption-title {
width: 65%;
}
.carousel-indicators {
width: auto;
}
#carousel .carousel-indicators li img {
max-height: 50px;
}
.quote .title{
width: 80%;
margin: auto;
}
.quote .title,
.explanation .title {
font-size: 2em;
margin-bottom: 0.5em;
line-height: 0.9em;
}
.explanation .title {
margin: 12px 0 0;
}
.quote .description {
width: 65%;
}
.quote .description,
.explanation .description {
font-size: 1.2em;
line-height: 1.2em;
}
.icon img {
height: 60px;
}
.explanation .title,
#benefits.explanation .title{
width: 42%;
}
.explanation .presentation.border {
padding-bottom: 20px;
margin-bottom: 25px;
}
.explanation .details .detail img {
max-height: 40px;
}
.explanation .details-table .details .detail-title {
font-size: 1.3em;
LINE-HEIGHT: 1.2em;
min-height: 52px;
padding: 5px 0;
}
.explanation .details-table .details .detail-icon {
height: 50px;
}
.explanation .details-table .details .detail-text {
font-size: 1em;
}
.explanation .details.four .detail {
padding: 1% 2%;
}
.explanation .details.three .detail {
padding: 0 2%;
}
.explanation .description.bottom {
padding: 0;
}
/* tech tool */
#techTool #techtool-columns.explanation .presentation-details img {
max-width: 135px;
margin-bottom: 20px;
max-height: 400px;
}
#techTool #techtool-columns.explanation .presentation{
width: 100%;
clear: both;
position: relative;
}
#techTool #techtool-columns.explanation .title, #techTool #techtool-columns.explanation .presentation .description{
width: 100%;
text-align: center;
}
#techTool #techtool-columns #tech-head, #techTool #techtool-columns #tech-column{
width: 100%;
clear: both;
display:block;
}
#techTool #techtool-columns #tech-head h3, #techTool #techtool-columns #tech-column h3 {
color: #FFF;
font-size: 1.3em;
min-height: 2em;
float: none;
clear: both;
text-align: center;
}
#techTool #techtool-columns #tech-head p, #techTool #techtool-columns #tech-column p {
font-size: 1em;
width: 60%;
line-height: 1.2em;
float: none;
clear: both;
text-align: center;
}
#techTool #techtool-columns #tech-column a svg{
height: 400px;
max-width: 100%;
}
#techTool #techtool-columns #tech-head a svg{
height: 100px;
}
.st3 {
font-size:12px!important;
}
/* tech tool */
#benefits.explanation .presentation {
border-bottom: none;
width: 100%;
float: none;
}
#benefits.explanation .presentation .description{
width: 47%;
float: right;
}
#benefits.explanation .details-table {
width: 100%;
margin-top: 60px;
}
#benefits.explanation .details .detail .detail-icon img {
max-height: 3em;
}
#benefits.explanation .details .detail .detail-title {
font-size: 1.4em;
text-align: center;
width: 80%;
margin: 0 auto;
}
#benefits.explanation .details .detail {
height: 275px;
}
#benefits.explanation .details .detail .detail-icon {
padding: 0;
text-align: center;
}
#benefits.explanation .details .detail .detail-icon img{
height: 3em;
}
#benefits.explanation .details .detail .detail-text{
line-height: 1.2em;
text-align: center;
}
/* more pages -> legal, ...*/
#info-pages .paragraph{
font-size: 10px;
}
#info-pages .paragraph p{
margin-bottom: 4px;
}
/* videos features */
#features #features-modes{
min-height: 0;
}
#features #features-modes .section.container{
min-height: 0;
}
#features #features-modes .modes .mode p {
font-size: 0.95em;
line-height: 1.1em;
}
#features #features-modes .section.container,
#features #features-modes .video {
min-height: 0;
}
/* videos -> mode left */
#features #features-modes.modes-left .modes .mode{
width: 100%;
display: block;
position: relative;
margin: 2% 0;
}
#features #features-modes.modes-left .modes .mode a{
float: none !important;
clear: both;
background-image: url("../images/icons/Section_Features_mode_off.png") !important;
text-align: left;
width: 25%;
background-size: 100% 100%;
}
#features #features-modes.modes-left .modes a:hover,
#features #features-modes.modes-left .modes a:active,
#features #features-modes.modes-left .modes a.playing {
background-image: url("../images/icons/Section_Features_mode_on.png") !important;
text-transform: none;
}
#features #features-modes.modes-left .modes .mode p {
padding: 0.6em 0.6em;
height: auto;
margin: 0;
font-size: 0.95em;
line-height: 1.1em;
}
#features #features-modes.modes-left .video .video_frame {
width: 80%;
margin-left: 20%;
}
#features #features-modes.modes-left .video video {
width: 100%;
height: auto;
}
/* videos -> mode top */
#features #features-modes.modes-top .video video {
height: 100%;
width: auto;
margin: 0 auto;
position: relative;
padding-top: 0;
max-width: 100%;
}
#features #features-modes.modes-top .video .video_frame {
height: 85%;
}
#features #features-modes.modes-top .modes {
height: 15%;
position: relative;
margin: 0 auto;
z-index: 9;
}
#features #features-modes.modes-top .modes .mode {
width: 25%;
height: 100%;
display: block;
float: left;
}
#features #features-modes.modes-top .modes .mode a {
float: none;
max-width: 150px;
max-height: none;
background-size: 97% 97%;
height: 100%;
margin: 0 auto;
background-image: url("../images/icons/Section_Features_mode_down_off.png");
}
#features #features-modes.modes-top .modes .mode a:hover,
#features #features-modes.modes-top .modes .mode a:active,
#features #features-modes.modes-top .modes .mode a.playing{
background-image: url("../images/icons/Section_Features_mode_down_on.png");
}
#features #features-modes.modes-top .modes .mode p {
padding: 0.8em 0.5em;
height: 100%;
text-align: center;
width: 90%;
margin: 0 auto;
}
/* order now modal */
#orderModal {
margin-top: 0 !important;
padding: 1% !important;
}
#orderModal .modal-content .modal-body {
margin-top: 0;
padding: 0px;
display: block;
width: 100%;
overflow: auto;
}
#orderModal .modal-content .modal-header{
display:none;
}
#orderModal .modal-content .modal-body .title {
margin-bottom: 2em;
}
#orderModal .modal-content #contact_us{
width: 35%;
min-height: 0;
border-right: none;
padding: 0 0.5em;
}
#orderModal .modal-content #contact_you{
width: 65%;
padding: 0 0.5em;
}
#orderModal .modal-content .modal-body .phone span,
#orderModal .modal-content .modal-body .mail span {
font-size: 2em;
}
#orderModal .modal-content .modal-body .phone p,
#orderModal .modal-content .modal-body .mail p {
font-size: 1.1em;
}
#orderModal .modal-content .modal-body .phone,
#orderModal .modal-content .modal-body .mail {
margin-bottom: 1em;
padding-top: 0;
}
#orderModal label {
display: inline-block;
max-width: 100%;
margin-bottom: 0;
font-size: 0.9em;
}
#orderModal input.form-control {
height: 26px;
}
#orderModal .modal-content #modalForm .form-control{
float: right;
width: 80%;
}
#orderModal .btn{
font-size: 1em;
}
/*
.modal-header
#orderModal .modal-content .modal_contact_section {
float:none;
clear:both;
width: 99%;
margin-left: 1%;
margin-right: 1%;
}
#orderModal .modal-content .modal-header .logo img{
display:none;
}
#orderModal .modal-content .modal-body .title{
margin-bottom: 1em;
text-align: center;
font-size: 0.8em;
}
#orderModal .modal-content #contact_us{
border-bottom: none;
border-right: none;
margin-bottom: 15px;
}
#orderModal .modal-content #contact_you{
border-top: 1px solid #00acec;
border-left: none;
padding: 0;
}
#orderModal .modal-content .modal-body .title h3 {
font-size: 1.2em;
text-transform: uppercase;
}
#orderModal .modal-content .modal-body .phone span, #orderModal .modal-content .modal-body .mail span{
font-size: 1em;
float: left;
margin-bottom: 0;
margin-right: 14px;
}
#orderModal .modal-content .modal-body .phone p, #orderModal .modal-content .modal-body .mail p{
font-size: 1em;
text-align: left;
}
#orderModal .modal-content .modal-body .phone, #orderModal .modal-content .modal-body .mail{
float: none;
width: 100%;
clear: both;
margin: 0;
overflow: hidden;
}
#orderModal .modal-content #contact_us{
min-height: 0em;
}
#orderModal .modal-content label{
font-size: 0.8em;
margin-bottom: 2px;
}
#orderModal .modal-content .modal-header{
display:none;
}
#orderModal .modal-content .modal-header, #orderModal .modal-content .modal-footer{
width: 90%;
margin: 0.5em auto 0;
}
#orderModal .modal-content .modal-footer button.close{
position: absolute;
right: inherit;
margin-left: 1em;
margin-top: 0.5em;
}
#orderModal .modal-content .modal-footer btn{
font-size: 12px;
}
#orderModal .modal-content #modalForm{
font-size: 110%;
}
#orderModal .modal-content #modalForm .form-control{
font-size: 12px;
height: 22px;
float: right;
width: 80%;
}
#orderModal .modal-content #modalForm textarea.form-control{
height: 37px;
}
#orderModal button{
padding: 3px 11px;
font-size: 0.9em;
}
#orderModal .modal-content .modal-footer div.boton {
padding-left: 0;
padding-right: 0;
}
#orderModal .form-group {
margin-bottom: 0.2em;
overflow: auto;
}
#orderModal .form-control {
height: 34px;
padding: 3px 8px;
}
#orderModal .modal-content {
padding: 0.5em;
width: 100%;
}*/
}
@media (min-width: 768px){
/* header */
#header .navbar .navbar-collapse ul#main-menu li{
padding: 8px 0;
}
#header .navbar-collapse .menu-collapse .language-menu,
#header .navbar-collapse .menu-collapse .share{
display: none;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
/* general */
h1 {
font-size: 1em;
}
h2 {
font-size: 0.8em;
}
.h1, .h2, .h3, h1, h2, h3 {
margin-top: 8px;
margin-bottom: 3px;
}
/* header */
#header .navbar .navbar-collapse{
width: 100%;
margin-left: 0;
}
#header .navbar .navbar-collapse ul#main-menu li{
padding: 8px 0;
}
#header .menu-collapse {
float: right;
margin: 3px 0;
}
/* carousel */
#carousel .carousel-inner {
background-image: url(../images/480/MotionBox_home.jpg);
}
#carousel .carousel-caption .carousel-caption-title {
font-size: 30px !important;
margin-top: 1em;
}
#carousel .carousel-caption .carousel-caption-subtitle {
font-size: 13px !important;
margin: 1em 0 1.5em;
}
#carousel .button{
padding: 3px;
font-size: 9px;
width: 80px;
}
#carousel .carousel-indicators li {
margin: 0;
}
#carousel .carousel-indicators li img {
max-height: 30px;
}
#carousel .demo a {
-webkit-background-size: 20px auto;
-moz-background-size: 20px auto;
background-size: 20px auto;
height: 36px;
line-height: 42px;
}
#carousel .demo{
font-size: 1em;
}
/* GENERAL */
.section.container {
padding: 35px 0 25px 0;
}
/* FOOTER */
#footer {
padding: 50px 0 60px 0;
}
#footer .copyright{
padding-top: 2em;
font-size: 0.85em;
}
#footer .footer-content .menu {
width: 50%;
}
#footer .menu ul {
width: 100%;
float: right;
margin-bottom: 15px;
}
#footer .menu li.menu-name {
margin-bottom: 2px;
}
#footer .footer-content .logo {
width: 40%;
float: left;
margin-right: 10%;
}
#footer .footer-content .logo {
min-height: 6em;
}
#footer .logo img {
max-width: 100px !important;
width: 90%;
}
#footer .logoBS {
float: left;
clear: both;
}
#footer .menu li.menu-name {
font-size: 0.9em;
}
#customize{
background-image: url("../images/MotionBox_customize.jpg"); }
/*CONTACT */
#contact .logo,
#contact .text{
width: 100%;
text-align: center;
}
#contact .logo img{
max-height: 60px;
width: auto;
}
#contact .text .title{
margin: 12px 0 0;
}
#contact .text .description{
margin-top: 10px;
}
#contact .links .contact-block {
/*height: 200px;*/
height: 150px;
}
#contact .links .contact-block ul {
/*max-height: 200px;*/
max-height: 150px;
top: 0px;
}
.node-type-product-page #contact .links .contact-block ul {
background: white;
}
#contact .links .contact-block ul li{
border-top-style: solid;
border-top-color: white;
border-top-width: 2px;
width:100%;
clear:both;
margin-left: 0% !important;
margin-right: 0% !important;
}
#contact .links .contact-block ul li:first-child{
z-index:1;
top: 0px;
}
#contact .links .contact-block ul li:first-child:hover{
top: -5px !important;
}
#contact .links .contact-block ul li.middle{
z-index:2;
top: -50px;
}
#contact .links .contact-block ul li.middle:hover{
top: -70px !important;
}
#contact .links .contact-block ul li:last-child{
z-index:3;
top: -100px;
}
#contact .links .contact-block ul li:last-child:hover{
top: -120px !important;
}
#contact .links .contact-block ul li .title{
font-size: 1.0em;
}
#contact .links .contact-block ul li div.content, #contact .links .contact-block ul li a div.content,
#contact .links .contact-block ul li a div.content a{
font-size: 0.9em;
}
/* content */
.quote .title,
.explanation .title {
font-size: 1.5em;
margin-bottom: 0.6em;
line-height: 1em;
width: 90%;
}
.quote .description,
.explanation .description {
font-size: 1em;
line-height: 1.1em;
width: 100%;
margin: 0;
text-align: center;
}
.section.container .icon {
margin-left: 0;
width: 30%;
margin: 0 auto;
}
.explanation .title {
width: 100%;
text-align: center;
}
.explanation .presentation.border {
padding-bottom: 16px;
margin-bottom: 22px;
}
.explanation .details-table .details {
width: 100%;
text-align: left;
}
.explanation .details .detail,
.explanation .details.three .detail,
.explanation .details.four .detail{
padding: 0;
width: 100%;
margin-bottom: 32px;
height: 20%;
}
.explanation .details-table .details .detail-icon {
width: 30%;
float: left;
padding-right: 5%;
}
.explanation .details-table .details .detail-title {
font-size: 1.1em;
LINE-HEIGHT: 1em;
min-height: 0;
padding: 0 0 10px 0;
width: 70%;
float: right;
font-weight: bold;
}
.explanation .details-table .details .detail-text {
font-size: 0.9em;
width: 70%;
float: right;
}
#box #box-image {
background-image: url("../images/480/MotionBox-TheBox.jpg");
}
#box #box-image .box-image-hand{
background-image: url("../images/480/MotionBox-TheBox_hand.png");
}
#techTool #techtool-intro{
background-image: url("../images/480/MotionBox_Tech-Tool_bg.jpg");
}
#techTool #techtool-columns.explanation .presentation {
position: relative;
}
#techTool #techtool-columns.explanation .title {
float: none;
width: 100%;
}
#techTool #techtool-columns #tech-head,
#techTool #techtool-columns #tech-column {
display: block;
width: 100%;
padding-top: 0;
text-align: left;
float: left;
}
#techTool #techtool-columns #tech-head #tech_head_animation, #techTool #techtool-columns #tech-head #tech_column_animation {
text-align: center;
}
#techtool-columns a:hover:after {
bottom: 10px;
}
#techTool #techtool-columns #tech-head{
margin: 3em 0;
}
.explanation .description.bottom {
text-align: center;
}
#techTool #techtool-columns.explanation .presentation-details img {
width: 50%;
margin-bottom: 0;
max-height: none;
float: left;
padding-right: 10%;
}
#techTool #techtool-columns h3,
#techTool #techtool-columns p {
width: 100%;
float: none;
clear:both;
}
#techTool #techtool-columns h3{
font-size: 1.2em;
min-height: 0;
margin-bottom: 0.5em;
}
#techTool #techtool-columns p{
width: 100%;
}
#features #features-characteristics .explanation .details .detail-icon {
float: right;
padding-right: 0;
padding-left: 5%;
}
#features #features-intro .presentation .title {
padding: 0;
width: 100%;
margin-right: 0;
}
#features #features-characteristics .explanation .details .detail h3,
#features #features-characteristics .explanation .details .detail-title {
width: 70%;
min-height: 0;
}
#features #features-modes .section.container {
min-height: 0;
}
/* VIDEOS */
/*
#features #features-modes .video video{
height: 100%;
width: 100%;
margin-left: 15%;
}
#features #features-modes .video video.parallaxFix{
}
#features #features-modes .modes .mode{
clear: both;
float: none!important;
}
#features #features-modes .modes .mode.right {
left:0;
right:none;
display: inline-block;
text-align: left;
}
#features #features-modes .modes .mode.right a{
background-image: url("../images/icons/Section_Features_mode_off.png");
float: none;
}
#features #features-modes .modes .mode.right a:hover, #features #features-modes .modes .mode.right a.playing{
background-image: url("../images/icons/Section_Features_mode_on.png");
}
#features #features-modes .modes a{
max-width: 100px;
max-height: 100px;
}
#features #features-modes .modes .mode p{
padding: 2em 1.0em;
height: 100px;
font-size: 10px;
}
*/
#features #features-modes,
#features #features-modes {
min-height: 0;
height: auto;
}
#features #features-modes .modes ,
#features #features-modes .modes {
height: auto;
position: relative;
overflow: auto !important;
}
#features #features-modes .modes .mode,
#features #features-modes .modes .mode {
width: 100%;
height: 100%;
display: block;
float: none !important;
background: none;
}
#features #features-modes .video .video_frame {
position: relative;
}
#features #features-modes .modes .mode a,
#features #features-modes .modes .mode a,
#features #features-modes .modes .mode a:hover,
#features #features-modes .modes .mode a:hover,
#features #features-modes .modes .mode a:active,
#features #features-modes .modes .mode a:active,
#features #features-modes .modes .mode a.playing,
#features #features-modes .modes .mode a.playing{
background: none;
text-align: left !important;
}
#features #features-modes .modes .mode a:hover,
#features #features-modes .modes .mode a:hover,
#features #features-modes .modes .mode a:active,
#features #features-modes .modes .mode a:active,
#features #features-modes .modes .mode a.playing,
#features #features-modes .modes .mode a.playing{
color: #00aeef;
text-align: left !important;
background: none !important;
min-height: 0;
}
#features #features-modes .video {
height: auto;
min-height: 0;
}
#features #features-modes .video video {
height: 100%;
}
#features #features-modes .glyphicon{
display: block;
float: left;
width: 10%;
}
#features #features-modes .modes .mode {
width: 100%;
float: none;
padding-bottom: 4px;
}
#features #features-modes .modes .mode a,
#features #features-modes .modes .mode.right a,
#features #features-modes .modes .mode.left a{
overflow: auto;
width: 100%;
max-width: none;
max-height: none;
height: auto;
background: none;
}
#features #features-modes .modes .mode a p{
text-align: left !important;
width: 90%;
font-size: 1em;
line-height: 1.3em;
margin: 0;
padding: 0;
float: right;
height: auto;
}
.explanation .title, #benefits.explanation .title {
width: 100%;
}
#benefits{
background-image: url("../images/480/MotionBox_benefits_bg.jpg");
}
#benefits.explanation .presentation .description {
width: 100%;
}
#benefits.explanation .details .column-detail {
width: 100%;
margin-right: 0;
}
#benefits.explanation .details-table {
width: 100%;
margin-top: 23px;
}
#benefits.explanation .details .detail,
#benefits.explanation .details .detail .detail-title,
#benefits.explanation .details .detail .detail-text{
text-align: left;
height: auto;
}
#benefits.explanation .details .detail .detail-title {
width: 70%;
font-size: 1.1em;
min-height: 0;
}
#benefits.explanation .details .detail .detail-text{
font-size: 0.9em;
}
#benefits.explanation .details .detail .detail-icon img {
max-width: 90%;
max-height: none;
padding-right: 10%;
height: 55px;
}
/* more pages -> legal, ...*/
#info-pages .paragraph{
font-size: 9px;
}
#info-pages .paragraph p{
margin-bottom: 3px;
}
#info-pages .container {
padding: 10px 0 0;
}
/* order now modal */
#orderModal {
padding-right: 0 !important;
}
#orderModal .modal-content .modal_contact_section {
float:none;
clear:both;
width: 99%;
margin-left: 1%;
margin-right: 1%;
}
#orderModal .modal-content .modal-body {
overflow: hidden;
}
#orderModal .modal-content .modal-body .title{
margin-bottom: 1em;
text-align: center;
font-size: 0.8em;
}
#orderModal .modal-content #contact_us{
border-bottom: none;
border-right: none;
margin-bottom: 15px;
width: 100%;
}
#orderModal .modal-content #contact_you{
border-top: 1px solid #00acec;
border-left: none;
padding: 0;
width: 100%;
margin: 0;
}
#orderModal .modal-content .modal-body .title h3 {
font-size: 1.2em;
text-transform: uppercase;
}
#orderModal .modal-content .modal-body .phone span, #orderModal .modal-content .modal-body .mail span{
font-size: 1em;
float: left;
margin-bottom: 0;
margin-right: 14px;
}
#orderModal .modal-content .modal-body .phone p, #orderModal .modal-content .modal-body .mail p{
font-size: 1em;
text-align: left;
}
#orderModal .modal-content .modal-body .phone, #orderModal .modal-content .modal-body .mail{
float: none;
width: 100%;
clear: both;
margin: 0;
overflow: hidden;
}
#orderModal .modal-content #contact_us{
min-height: 0em;
}
#orderModal .modal-content label{
font-size: 0.8em;
margin-bottom: 2px;
}
#orderModal .modal-content .modal-header{
display:none;
}
#orderModal .modal-content .modal-header, #orderModal .modal-content .modal-footer{
width: 90%;
margin: 0.5em auto 0;
}
#orderModal .modal-content .modal-footer button.close{
position: absolute;
right: inherit;
margin-left: 1em;
margin-top: 0.5em;
}
#orderModal .modal-content .modal-footer btn{
font-size: 12px;
}
#orderModal .modal-content #modalForm .form-control{
font-size: 12px;
height: 22px;
float: right;
width: 80%;
}
#orderModal .modal-content #modalForm textarea.form-control{
height: 37px;
}
#orderModal button{
padding: 3px 11px;
font-size: 0.9em;
}
#orderModal .modal-content .modal-footer div.boton {
padding-left: 0;
padding-right: 0;
}
#orderModal .form-group {
margin-bottom: 0.2em;
overflow: auto;
}
#orderModal .form-control {
height: 34px;
padding: 3px 8px;
}
#orderModal .modal-content {
padding: 0.5em;
width: 100%;
}
}
@media (max-height: 600px){
#carousel .carousel-inner,
#carousel .carousel {
min-height: 360px !important;
}
}
#carousel .carousel-inner {
background-image: url(../images/MotionBox_home.jpg);
background-size: 100% auto;
/* background-color: rgba(201,201,201,0.75); */
background-color: rgb(197, 206, 213);
background-position: bottom center;
background-size: 100% auto;
background-repeat: no-repeat;
padding-top: 200px;
/* min-height: 600px; */
@media (max-height: 400px){
/* carousel */
#carousel{
margin-top: 60px;
}
#carousel .carousel,
#carousel .carousel-inner {
min-height: 300px !important;
}
#carousel .carousel-caption .carousel-caption-title {
font-size: 20px !important;
margin-top: 1em;
}
#carousel .carousel-caption .carousel-caption-subtitle {
font-size: 13px !important;
margin: 1em 0 1.5em;
}
#carousel .button{
padding: 3px;
font-size: 9px;
width: 80px;
}
#carousel .carousel-inner{
padding-top: 67px;
}
}