/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #060707;
}
body {
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
.required
{
color: red !important;
border-color: red !important;
}
.success
{
margin: 300px auto 0px auto;
width: 42px;
height: 41px;
font-size: 21px;
line-height: 41px;
overflow: hidden;
padding-left: 1px;
text-align: center;
color: #00aeea;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
a, span{
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
a,a:hover, a:active, a:focus {
outline: 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* --- FONTS --- */
@font-face {
font-family: libre_baskervilleitalic;
src: url(../fonts/LibreBaskerville-Italic-webfont.eot);
src: url(../fonts/LibreBaskerville-Italic-webfont.eot?#iefix),
url(../fonts/LibreBaskerville-Italic-webfont.woff),
url(../fonts/LibreBaskerville-Italic-webfont.ttf),
url(../fonts/LibreBaskerville-Italic-webfont.svg#libre_baskervilleitalic);
/* src:url(../fonts/LibreBaskerville-Italic-webfont.woff);
*/ font-weight: normal;
font-style:italic;
}
@font-face {
font-family: 'montserratbold';
src: url('../fonts/Montserrat-Bold-webfont.eot');
src: url('../fonts/Montserrat-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Montserrat-Bold-webfont.woff') format('woff'),
url('../fonts/Montserrat-Bold-webfont.ttf') format('truetype'),
url('../fonts/Montserrat-Bold-webfont.svg#montserratbold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'montserratregular';
src: url('../fonts/Montserrat-Regular-webfont.eot');
src: url('../fonts/Montserrat-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Montserrat-Regular-webfont.woff') format('woff'),
url('../fonts/Montserrat-Regular-webfont.ttf') format('truetype'),
url('../fonts/Montserrat-Regular-webfont.svg#montserratregular') format('svg');
font-weight:normal;
font-style: normal;
}
.montserratBold{font-family: 'Montserrat', sans-serif; font-weight:bold;}
.montserratReg{font-family: montserratregular; font-weight:400;}
.baskervilleItalic{font-family: 'libre_baskervilleitalic', Serif;}
letterSpacing120{letter-spacing:0.120em;}
.alpha0{opacity:0;}
.loader{ position:fixed; height:60px; width:60px; margin-top:-30px; margin-left:-30px; top:50%; left:50%; background:url(img/loader.gif) center no-repeat; background-size:40px;}
/* --- ! --- */
/* --- GLOBAL --- */
body{font-family: 'libre_baskervilleitalic', Serif; font-size:14px; letter-spacing:0.12em; text-align:center; -webkit-font-smoothing: antialiased;}
#main{min-width:1005px; background:url(../images/bg-blueline.png) repeat-y center; background-size:1px; border-radius: 50px;}
#main>header>.logo{height:104px; width:303px; background:url(../images/logo-mi.png) no-repeat; background-size:303px; margin:30px auto 30px auto;}
#main>.scroll1{ width:194px; height:90px; margin:15px auto 15px auto; padding:30px auto 30px auto; background:#FFF;}
#main>.scroll1>.next>a{ display:block; height:30px; width:30px; background:url(../images/down@2x.png) center bottom no-repeat; background-size:30px; margin:auto; border:solid 2px #7cddff; border-radius: 50px;}
#main>.scroll1>.next>a:hover{background:url(../images/down@2x.png) center top no-repeat; background-size:30px; border:solid 1px #00aeea;}
#main>.scroll{ width:194px; height:60px; margin:0px auto 20px auto; color:#00aeea; font-size:12px; background:#FFF;}
#main>.scroll>.next>a{ display:block; height:30px; width:30px; background:url(../images/down@2x.png) center bottom no-repeat; background-size:30px; margin:auto; border:solid 2px #7cddff; border-radius: 50px;}
#main>.scroll>.next>a:hover{background:url(../images/down@2x.png) center top no-repeat; background-size:30px; border:solid 1px #00aeea;}
#main>.number>div{ margin:250px auto 0px auto; width:42px; height:41px; background:url(../images/bg-numbers.png) no-repeat; font-size:12px; line-height:41px; overflow:hidden; padding-left:1px; text-align:center; color:#00aeea; }
#main>section strong{ color:#00aeea; font-family: 'montserratbold', sans-serif; font-weight:bold; font-style:normal;}
#main>section>h1{font-size:54px; line-height:60px; margin:0px auto 0px auto; text-transform:uppercase; font-weight:normal;}
.mainWidth{ width:1005px;}
.scrollText{color:#00aeea; font-size:12px; margin:12px 0px 12px 0px; line-height:15px; text-transform:uppercase; font-weight:bold; font-size:18px;}
.sectionPadding{padding-top:80px; padding-bottom:30px;}
/* --- ! --- */
/* --- NAV --- */
#main>.pagination{ position:fixed; right:6px; top:50%; margin-top:-116px; z-index:1;}
#main>.pagination>ul>li>a{display:block; height:10px; width:10px; padding:12px 12px 12px 12px;}
#main>.pagination>ul>li>a>span{ display:block; height:8px; width:8px; background-color:#00aeea; opacity:0.3; border-radius: 50px; }
#main>.pagination>ul>li>a:hover>span{opacity:1;}
#main>.pagination>ul>li>a>.navSelect{opacity:1;}
/* --- ! --- */
/* --- VIDEO --- */
#main>header>.video>#youtube{opacity:0; background:rgba(0, 0, 0, 0.6);}
#main>header>.video>#youtube>.close{width:40px; height:40px; top:40px; right:0px;}
#main>header>.video>#youtube>.close>a{display:block; opacity:1; width:40px; height:40px; background:url(../images/close@2x.png) no-repeat center; background-color:#00aeea; background-size:40px;}
#main>header>.video{width:100%; height:500px; background:url(../images/bg-video.jpg) no-repeat center top; background-size:cover; color:#FFF; }
#main>header>.video>.description{width:700px; margin-top:-185px; margin-left:-350px; text-align:center;}
#main>header>.video>.description>h1{font-size:60px; line-height:72px; margin:0px -140px 0px -90px; letter-spacing:0.12em;}
#main>header>.video>.description>h2{font-size:30px;line-height:35px; margin:15px 0px 0px 0px; letter-spacing:0.12em; -webkit-font-smoothing: antialiased;}
#main>header>.video>.description>.play{text-decoration:none; color:#FFF; display:block; height:70px; width:650px; margin:40px auto 40px auto; background:#00aeea;}
#main>header>.video>.description>.play>.playIco{ display:block; width:70px; height:70px; background:url(../images/play-ico.png) center no-repeat; border-left:solid 1px #7cddff;}
#main>header>.video>.description>.play>.cta{ width:578px; font-size:16px; text-transform:uppercase; line-height:72px; letter-spacing:0.25em;-webkit-font-smoothing: antialiased;}
#main>header>.video>.description>.share{ width:140px; margin:auto;}
#main>header>.video>.description>.share>h3{width:136px; font-size:12px; line-height:16px; margin:auto; text-align:center; letter-spacing:0.3em;}
#main>header>.video>.description>.share>h3>.title{ margin:auto 18px auto 18px;}
#main>header>.video>.description>.share>h3>.line{ display:block; width:20px; height:1px; margin-top:5%; border-top:solid 1px #FFF;}
#main>header>.video>.description>.share>ul{ margin-left:-8px; margin-bottom:0px;}
#main>header>.video>.description>.share>ul>li{width:25%;}
#main>header>.video>.description>.share>ul>li>a{ display:block; width:30px; height:30px; border-radius:15px;}
#main>header>.video>.description>.share>ul>li>a:hover{ background-color:rgba(255,255,255,0.3);}
#main>header>.video>.description>.share>ul>li>a>img{ margin-top:6px; text-align:center;}
/* --- ! --- */
/* --- 01 WHAT IS MI --- */
#main>#whatismi{margin:auto; background:#FFF;}
#main>#whatismi>figure{ margin-top:40px; width:100%; height:178px; background:url(../images/about.jpg) no-repeat bottom; background-size:965px;}
#main>#whatismi>p{ font-size:23px; margin:40px auto 0px auto; font-family: 'libre_baskervilleitalic', Serif; font-style:italic;}
#main>#whatismi>p>strong{ font-weight:bold; font-style:normal;}
/* --- ! --- */
/* --- 02 WHY NOW ---
#main>#pastsuccesses{margin:auto; background:#FFF;}
#main>#pastsuccesses>.clearfix>.cul{ width:33%; margin-top:60px;}
#main>#pastsuccesses>.clearfix>.cul>figure{ width:230px; height:230px; margin:auto; border-radius:50%; }
#main>#pastsuccesses>.clearfix>.cul>.img01{ background: url(img/s02-cul01-smartphoneswithgps.png) center no-repeat, url(img/bg-blue-noise.png);}
#main>#pastsuccesses>.clearfix>.cul>.img02{ background: url(img/s02-cul02-aerialsensors.png) center no-repeat, url(img/bg-blue-noise.png);}
#main>#pastsuccesses>.clearfix>.cul>.img03{ background: url(img/s02-cul03-socialnetwork.png) center no-repeat, url(img/bg-blue-noise.png);}
#main>#pastsuccesses>.clearfix>.cul>h2{ font-size:16px; text-transform:uppercase; color:#00aeea; letter-spacing:0.2em; margin-top:40px;}
#main>#pastsuccesses>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#00aeea url(img/bg-blueline.png);}
#main>#pastsuccesses>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:auto;}
/* --- ! --- */
/* --- 03 HOW BIG IS BIGDATA ---
#main>#howbig{margin:auto; background:#FFF;}
#main>#howbig>.clearfix>.cul{ width:25%; margin-top:60px;}
#main>#howbig>.clearfix>.cul .img01{ background:url(img/sprite-infographics01@2x.png) left 0px no-repeat; background-size:250px; height:200px;}
#main>#howbig>.clearfix>.cul .img02{ background:url(img/sprite-infographics01@2x.png) left -250px no-repeat; background-size:250px; height:200px;}
#main>#howbig>.clearfix>.cul .img03{ background:url(img/sprite-infographics01@2x.png) left -500px no-repeat; background-size:250px; height:200px;}
#main>#howbig>.clearfix>.cul .img04{ background:url(img/sprite-infographics01@2x.png) left -1750px no-repeat; background-size:250px; height:200px;}
#main>#howbig>.clearfix>.cul>figure{ width:200px; margin:auto;}
#main>#howbig>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:20px auto 0px auto;}
/* --- ! --- */
/* --- 02 SERVICES --- */
#main>#services{margin:auto; background:#FFF;}
#main>#services>.clearfix>.cul{ width:25%; margin-top:60px;}
#main>#services>.clearfix>.cul .img01{ background:url(../images/sprite-infographics02@2x.png) left 0px no-repeat; background-size:250px; height:200px;}
#main>#services>.clearfix>.cul .img02{ background:url(../images/sprite-infographics02@2x.png) left -250px no-repeat; background-size:250px; height:200px;}
#main>#services>.clearfix>.cul .img03{ background:url(../images/sprite-infographics02@2x.png) left -500px no-repeat; background-size:250px; height:200px;}
#main>#services>.clearfix>.cul .img04{ background:url(../images/sprite-infographics02@2x.png) left -750px no-repeat; background-size:250px; height:200px;}
#main>#services>.clearfix>.cul>h2{ font-size:16px; text-transform:uppercase; color:#00aeea; letter-spacing:0.2em; margin-top:40px;}
#main>#services>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#00aeea url(../images/bg-blueline.png);}
#main>#services>.clearfix>.cul>figure{ width:200px; margin:auto;}
#main>#services>.clearfix>.cul>p{ font-size:15px; line-height:22px; width:77%; margin:20px auto 0px auto; font-style:italic;}
/* --- ! --- */
/* --- 03 PAST SUCCESSES --- */
#main>#pastsuccesses{margin:auto; background:#FFF;}
#main>#pastsuccesses>.clearfix>.cul{ width:33%; margin-top:60px;}
#main>#pastsuccesses>.clearfix>.cul>figure{ width:230px; height:230px; margin:auto; border-radius:50%; }
#main>#pastsuccesses>.clearfix>.cul>.img01{ background: url(../images/01.png) center no-repeat, url(../images/bg-blue-noise.png);}
#main>#pastsuccesses>.clearfix>.cul>.img02{ background: url(../images/02.png) center no-repeat, url(../images/bg-blue-noise.png);}
#main>#pastsuccesses>.clearfix>.cul>.img03{ background: url(../images/03.png) center no-repeat, url(../images/bg-blue-noise.png);}
#main>#pastsuccesses>.clearfix>.cul>h2{ font-size:18px; text-transform:uppercase; color:#00aeea; letter-spacing:0.2em; margin-top:40px; font-weight:bold;}
#main>#pastsuccesses>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#00aeea url(../images/bg-blueline.png);}
#main>#pastsuccesses>.clearfix>.cul>p{ font-size:15px; line-height:22px; width:69%; margin:auto; font-style:italic;}
/* --- ! --- */
/* --- 04 CONTACT --- */
#main>#contact{margin:auto; background:#FFF;}
#main>#contact>figure{ margin-top:40px; width:100%; height:178px; background:url(../images/about.jpg) no-repeat bottom; background-size:965px;}
#main>#contact>p{ font-size:23px; margin:40px auto 0px auto; font-style:italic;}
/* Contact
---------------------------------*/
.main-section.contact{
padding:90px 0 100px;
}
.main-section.contact{
background:url(../img/bg-map.png) left 190px no-repeat;
}
.contact-info-box{
font-size:15px;
margin:0 0 14px 68px;
padding-left:0;
}
.contact-info-box h3{
font-size: 15px;
font-weight:400;
float:left;
width:102px;
margin-right:12px;
line-height:28px;
}
.contact-info-box h3 i{
font-style:normal;
font-size:18px;
color:#222222;
font-family: 'FontAwesome';
font-weight:normal;
margin-right:7px;
}
.contact-info-box span{
line-height:28px;
display:block;
overflow:hidden;
}
.form{
margin:30px 66px 100px 30px;
}
.input-text{
padding:15px 16px;
border:1px solid #ccc;
width:50%;
height:20px;
display:block;
border-radius:4px;
font-size:15px;
color:#aaa;
font-family: 'Montserrat', sans-serif;
margin: 0 auto 15px auto;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
font-weight:300;
}
.input-text:focus {
border: 1px solid #00aeea;
outline:0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
}
.input-text.text-area{
height:165px;
resize:none;
overflow:auto;
}
.input-btn{
width:175px;
height:50px;
background:#00aeea;
color:#ffffff;
font-size:14px;
text-transform:uppercase;
font-family: 'Montserrat', sans-serif;
font-weight:400;
border:0px;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.input-btn:hover{
background: #00a4e0;
color: #fff;
}
footer { margin:-635px auto 0px auto; height:400px; padding-top:204px; padding-left:45%;}
footer>.cont{ position:absolute; width:600px; margin:auto; margin-left:100px; margin-top:-50px; height:500px; z-index:50;}
footer>.cont>.line{ height:1px; width:120px; margin:50px auto 50px auto; background:#FFF; opacity:0.5;}
footer>.trinagle {height:800px; width:800px; background:url(../images/bg-blue-noise.png); transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg);}
footer>.cont>p{ color:#FFF; font-size:25px;}
footer>.cont>p>a{ color:#FFF; text-decoration:none; font-size:38px;}
footer>.cont>.social{width:271px; margin:auto;}
footer>.cont>.social>.fb{ overflow:hidden; width:84px; padding-right:20px;}
footer>.cont>.social>.tw{ overflow:hidden; width:87px; padding-right:20px;}
footer>.cont>.social>.g{ overflow:hidden; width:60px;}
.bigTwitter{ height:43px; width:63px; background:url(../images/big-tw@2x.png) no-repeat center; background-size:63px; margin:auto;}
iframe{ overflow:hidden;}
#debug{position:fixed; bottom: 0px; width:100%; background-color:#333333; color:#FFFFFF; font-size:0.750em; opacity:0.5; z-index:200; text-align:center; font-family:Arial, Helvetica, sans-serif;}
#debug p{margin: 10px 10px 10px 10px;}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
.ul-nostyle{ padding:0px 0px 0px 0px; list-style:none;}
.maxWidth { width:100%;}
.maxHeight { height:100%; margin:0 auto;}
.floatL{ float:left; }
.floatR{ float:right; }
.relative{ position:relative;}
.fixed{ position:fixed;}
.absolute{position:absolute;}
.centerAbsolute{position:absolute; top:50%; left:50%;}
.collapsfix{overflow:hidden;}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (max-width : 1024px) {
#main>header>.logo{height:78px; width:227px; background:url(../images/logo-mi@2x.png) no-repeat; background-size:contain; margin:10px auto 10px auto;}
#main{min-width:100%;}
.mainWidth{width:90%;}
}
@media only screen and (max-width : 970px) {
#awwwards {display: none;}
#main>section>h1{font-size:45px; line-height:45px; margin:0px auto 0px auto; text-transform:uppercase;}
main>header>.video>.description{width:520px; margin-top:-150px; margin-left:-260px; text-align:center;}
#main>header>.video>.description>h1{font-size:60px; line-height:72px; margin:0px -140px 0px -90px; letter-spacing:0.12em;}
#main>header>.video>.description>h2{font-size:30px;line-height:29px; margin:0px 0px 0px 0px; letter-spacing:0.08em}
#main>header>.video>.description>.play{text-decoration:none; color:#FFF; display:block; height:70px; width:480px; margin:20px auto 20px auto;}
#main>header>.video>.description>.play>.playIco{ display:block; width:70px; height:70px; background:url(../images/play-ico.png) center no-repeat;}
#main>header>.video>.description>.play>.cta{ width:408px; font-size:12px;}
#main>#pastsuccesses>.clearfix>.cul{ width:33%; margin-top:60px;}
#main>#pastsuccesses>.clearfix>.cul>figure{ width:180px; height:180px; margin:auto; border-radius:50%; }
#main>#howbig>.clearfix>.cul{ width:50%; margin-top:50px; height:300px;}
#main>#services>.clearfix>.cul{ width:50%; margin-top:50px; height:450px;}
#main>#ourambitions>.clearfix>.cul{ width:33%;}
#main>#ourambitions>h1{font-size:35px; line-height:38px;}
footer { margin:0px auto 0px auto; padding-top:50px; height:300px; padding-left:0px; background:url(../images/bg-blue-noise.png);}
footer>.cont{width:100%; margin:auto; height:auto; margin-left:0px; margin-top:0px;}
footer>.cont>.line, .br1{display:none;}
footer>.trinagle {display:none;}
footer>.cont>p{ color:#FFF; font-size:25px;}
footer>.cont>p>a{ color:#FFF; text-decoration:none; font-size:45px;}
footer>.cont>.social{width:271px; margin:auto;}
footer>.cont>.social>.fb{ overflow:hidden; width:84px; padding-right:20px;}
footer>.cont>.social>.tw{ overflow:hidden; width:87px; padding-right:20px;}
footer>.cont>.social>.g{ overflow:hidden; width:60px;}
.sectionPadding{padding-top:40px; padding-bottom:30px;}
#main>#ourambitions{padding-top:40px;}
#main>#ourambitions>.clearfix>.cul{ width:50%;}
#main>#ourambitions>.clearfix>.center{ height:484px;}
#main>#ourambitions>.clearfix>.cul .verticalLine{ visibility:hidden; display:none;}
#main>#ourambitions .diamond{background:#FFF; overflow:hidden; height:150px; width:150px; transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); margin:60px auto 0px auto;}
#main>#ourambitions .diamond>img{transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); margin-top:-78%; margin-left:-78%; width:160%; height:160%;}
#main>#ourambitions>.clearfix>.cul>.space{ height:20px;}
#main>#ourambitions>.clearfix>.cul>h2{ font-size:16px; text-transform:uppercase; color:#00aeea; letter-spacing:0.2em; margin-top:60px;}
#main>#ourambitions>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#00aeea url(../images/bg-blueline.png);}
#main>#ourambitions>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:235px; margin:20px auto 0px auto;}
.input-text{ width:100%;}
}
@media only screen and (max-height : 750px) {
#main>header>.logo{height:78px; width:227px; background:url(../images/logo-mi@2x.png) no-repeat; background-size:contain; margin:15px auto 15px auto;}
#main>header>.video>.description{width:520px; margin-top:-150px; margin-left:-260px; text-align:center;}
#main>header>.video>.description>h1{font-size:60px; line-height:72px; 0px -140px 0px -90px; letter-spacing:0.12em;}
#main>header>.video>.description>h2{font-size:30px;line-height:33px; margin:0px 0px 0px 0px; letter-spacing:0.08em}
#main>header>.video>.description>.play{text-decoration:none; color:#FFF; display:block; height:70px; width:480px; margin:20px auto 20px auto;}
#main>header>.video>.description>.play>.playIco{ display:block; width:70px; height:70px; background:url(../images/play-ico.png) center no-repeat; border-right:solid 1px #00aeea;}
#main>header>.video>.description>.play>.cta{ width:408px; font-size:12px;}
}
@media only screen and (max-width : 650px) {
/* --- GLOBAL --- */
.mainWidth{ width:80%;}
#main>header>.logo{height:52px; width:151px; background:url(../images/logo-mi@2x.png) no-repeat; background-size:contain; margin:18px auto 18px auto;}
/* --- ! --- */
#main>.number>div{ margin:250px auto 0px auto; width:42px; height:41px; background:url(../images/bg-numbers.png) no-repeat; font-size:12px; line-height:41px; overflow:hidden; padding-left:1px; text-align:center; color:#00aeea; }
#main>section strong{ color:#00aeea; font-family: 'montserratbold','Times New Roman',Arial, Helvetica, sans-serif;}
#main>section>h1{font-size:30px; line-height:30px; margin:0px auto 10px auto; text-transform:uppercase;}
#main>.scroll1{ width:194px; height:90px; margin:8px auto 8px auto; padding:30px auto 30px auto; background:#FFF;}
/* --- VIDEO --- */
#main>header>.video{width:100%; height:280px;}
#main>header>.video>.description{width:300px; height:230px; margin-top:-115px; margin-left:-150px; text-align:center;}
#main>header>.video>.description>h1{font-size:34px; line-height:34px;}
#main>header>.video>.description>h2{font-size:16px;line-height:16px; margin:8px 0px 0px 0px; font-family: 'montserratbold','Times New Roman',Arial, Helvetica, sans-serif;}
#main>header>.video>.description>h3{ margin:0px 0px 0px 0px; overflow:hidden; height:20px;}
#main>header>.video>.description>.play{ width:70px; margin:20px auto 0px auto; border-radius:70px;}
#main>header>.video>.description>.play>.playIco{ display:block; width:69x; height:70px; border-radius:70px; background:url(../images/play-ico.png) center no-repeat; border:solid 0px;}
#main>header>.video>.description>.play>.cta{ visibility:hidden; display:none;}
#main>header>.video>.description>.share{ width:275px; position:absolute; bottom:0px; left:15px;}
#main>header>.video>.description>.share>h3{ display:block; width:100px; margin:auto; float:left; border-left:solid 1px #FFF;}
#main>header>.video>.description>.share>h3>.title{font-size:12px; letter-spacing:0.4em; font-family: 'montserratbold','Times New Roman',Arial, Helvetica, sans-serif; text-transform:uppercase;}
#main>header>.video>.description>.share>h3>.line{visibility:hidden;}
#main>header>.video>.description>.share>ul{ width:180px; float:left; margin-top:0px; border-left:solid 1px #FFF; border-right:solid 1px #FFF;}
#main>header>.video>.description>.share>ul>li{width:24%;}
#main>header>.video>.description>.share>ul>li>a{margin:auto;}
/* --- ! --- */
/* --- 01 WHAT IS MI --- */
#main>#whatismi{ width:90%; margin:auto; padding-top:30px; padding-bottom:15px; background:#FFF;}
#main>#whatismi>p{ font-size:18px; margin:20px auto 0px auto;}
#main>#whatismi br{display:none;}
/* --- ! --- */
/* --- 03 PAST SUCCESSES --- */
#main>#pastsuccesses{margin:auto; padding-top:30px; padding-bottom:30px; background:#FFF;}
#main>#pastsuccesses br{display:none;}
#main>#pastsuccesses>.clearfix>.cul{ width:100%; margin-top:20px;}
#main>#pastsuccesses>.clearfix>.cul>figure{ width:230px; height:230px; margin:auto; border-radius:50%; }
#main>#pastsuccesses>.clearfix>.cul>h2{ font-size:14px; text-transform:uppercase; color:#00aeea; letter-spacing:0.2em; margin-top:20px;}
#main>#pastsuccesses>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#00aeea url(../images/bg-blueline.png);}
#main>#pastsuccesses>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:auto;}
/* --- ! --- */
/* --- 03 HOW BIG IS BIGDATA ---
#main>#howbig{margin:auto; padding-top:30px; padding-bottom:30px; background:#FFF;}
#main>#howbig>.clearfix>.cul{ width:100%; margin-top:30px; height:auto;}
#main>#howbig>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:20px auto 0px auto;}
/* --- ! --- */
/* --- 02 SERVICES --- */
#main>#services{margin:auto; padding-top:30px; padding-bottom:30px; background:#FFF;}
#main>#services>.clearfix>.cul{ width:100%; margin-top:0px; height:auto;}
#main>#services>.clearfix>.cul>h2{ font-size:16px; text-transform:uppercase; color:#00aeea; letter-spacing:0.2em; margin-top:0px;}
#main>#services>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#00aeea url(../images/bg-blueline.png);}
#main>#services>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:20px auto 0px auto;}
/* --- ! --- */
/* --- 04 CONTACT --- */
#main>#contact{ width:90%; margin:auto; padding-top:30px; padding-bottom:15px; background:#FFF;}
#main>#contact>p{ font-size:18px; margin:20px auto 0px auto;}
#main>#contact br{display:none;}
/* --- ! --- */
/* --- 03 ---
#main>#ourambitions{margin:auto; padding-top:30px; padding-bottom:0px; background:#FFF;}
#main>#ourambitions>h1{ font-size:20px; line-height:26px; margin-bottom:60px;}
#main>#ourambitions br{display:none;}
#main>#ourambitions>.clearfix>.cul{ width:100%; height:auto;}
#main>#ourambitions>.clearfix>.cul>.verticalLine{display:none; visibility:hidden;}
#main>#ourambitions>.clearfix>.center>.verticalLine{display:none; visibility:hidden;}
#main>#ourambitions>.clearfix>.center{ height:auto;}
#main>#ourambitions .diamond>img{transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); margin-top:-78%; margin-left:-78%;}
#main>#ourambitions>.clearfix>.cul>.space{ height:0px;}
#main>#ourambitions>.clearfix>.cul>h2{ font-size:16px; text-transform:uppercase; color:#00aeea; letter-spacing:0.2em; margin-top:60px;}
#main>#ourambitions>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#00aeea url(bg-blueline.png);}
#main>#ourambitions>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:20px auto 60px auto;}
#main>#ourambitions .diamond{ margin:0px auto 0px auto;}
/* --- ! --- */
footer>.cont>p{ width:85%; margin-left:auto; margin-right:auto;}
}
@media only screen and (max-width : 500px) {
footer>.cont>p>a{ color:#FFF; text-decoration:none; font-size:36px;}
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
/*#main>.number>div{background:url(../images/bg-numbers@2x.png) no-repeat right; width:42px; background-size:42px;}
*/#main>#pastsuccesses>.clearfix>.cul>.img01{ background: url(../images/01@2x.png) center no-repeat, url(../images/bg-blue-noise.png); background-size:contain;}
#main>#pastsuccesses>.clearfix>.cul>.img02{ background: url(../images/02@2x.png) center no-repeat, url(../images/bg-blue-noise.png); background-size:contain;}
#main>#pastsuccesses>.clearfix>.cul>.img03{ background: url(../images/03@2x.png) center no-repeat, url(../images/bg-blue-noise.png); background-size:contain;}
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
@media ( max-width:480px ){
#main>header>.video>.description{ margin-left:-160px;}
#main>.pagination{ margin-top:0;}
#main>.pagination>ul>li>a{ margin-bottom:10px;}
}
@media ( max-width:320px ){
#main>header>.video>.description{ margin-left:-150px; width:260px;}
#main>header>.video>.description>h1{ font-size:30px;}
.description a{ letter-spacing:3px !important; font-size:14px !important;}
.ban_contact{ text-align:center; margin-left:30px;}
#main>header>.video>.description>h2{ margin:8px 0 0 40px;}
}
/*6june2016*/
.description a{ color:#fff; text-decoration:none; background-color:#307c9c; padding:15px 15px 15px 50px; border-radius:5px; display:inline-block; position:relative; margin-top:20px; font-size:18px; font-weight:bold; font-family: 'Montserrat', sans-serif; letter-spacing:5px;}
.description a:before{ position:absolute; content:url(../images/contact-icon.png); left:10px; top:10px;}
#services h1{ font-size:54px; font-weight:bold; font-family: 'Montserrat', sans-serif;}
#main>.pagination>ul>li>a.active{ background-color:#00aeea;}
#main>.pagination>ul>li>a{ background-color:#b9e9fb; display:block; width:10px; height:10px; padding:0; margin-bottom:40px; border-radius:50%;}
.errInput{ border:solid 1px #FF0000;}
.txtBx{ padding:15px 10px; width:170px;}