html {  overflow-y:scroll;
}
body {padding:0px; margin:0; font-family:"Arial"; color:#4D4D4D;
    overflow: hidden;
    background: linear-gradient(#FFFFFF, #DEDEDE);
    background-image: url(images/background.jpg);
    background-size: cover;background-position: left top;background-attachment: fixed;background-repeat: no-repeat;
    font-family: sans-serif; font-weight: 300;
}
/*ul li#SignIn {display:none;}*/

::selection {background: dimgrey; }
ul {list-style: square;}
table {border-collapse: collapse;}
a, a:active, a:visited {text-decoration: none; color:darkblue; transition: .2s;}
a:hover {color:yellow;}
button {background: rgba(250,250,250,.7); color: black; border:1px solid white; transition:.2s; 
    padding:8px; border-radius: 7px; font-size:18px;}
button:hover {background: skyblue;}
button:active {background: aqua;}

input {padding:3%; box-sizing: border-box;}
input[type="checkbox"] {display:inline-block; height:20px; width:20px; border:1px solid darkgray;}

/* CHECKBOX */
[type="checkbox"].CB {display: none;}
[type="checkbox"].CB + label {display:inline-block; position: relative; cursor:pointer; padding-left:20px; margin:2px;}
[type="checkbox"].CB + label::before {
    position:absolute; content: ''; left:2px;; top: 2px;
    width:14px; height:14px; border-radius: 3px; border: 1px solid darkgray; background:#f2f2f2;
     cursor:pointer; transition:.3s; 
}
[type="checkbox"].CB:checked + label::after {position:absolute; left:4px; top: 4px;
    content: "\2713"; color:black;  line-height: 0.8; }
[type="checkbox"].CB + label:hover::before {background: #8CB4FF;}
[type="checkbox"].CB + label:active::before {background: #53a3a5;}

/*------------------------Fixed Area + Bodies------------------*/
#navbar {position:fixed; display:flex;justify-content: space-between; top:0;
    width:100%; opacity:1; z-index: 10;
    -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;-moz-user-select: none; 
    -ms-user-select: none; user-select: none; }
#navbar ul {list-style: none; padding:0px; margin:0px;}
#menuTitle {display: inline;top:5px; margin-left:60px; margin-right:20px; opacity:0;cursor:pointer; white-space: nowrap; font-size:40px; color:#404040;}
#menuTitle span:nth-of-type(1) {font-style: italic;}
#menuTitle span:nth-of-type(2) {font-style: italic; font-size:30px; padding-bottom: 6px;}
#menuTitle span:nth-of-type(3) {font-style: italic; font-size:24px;}
#menuTitle span:nth-of-type(4) {font-size:24px;}

#menuMobile {display:none;}
#menuWrapper { position: relative; float:right; clear:both;}
#menu {display: inline; float:right; clear:both; position: relative; padding:0px; font-size: 0px;
    background: rgba(178,203,212,.6); opacity:0;
   }

   /* #menu > li > span {color:rgb(47, 53, 206);} */
#menu > li {display: inline-block; position:relative; text-align: center; margin:0px;
    padding:15px; box-sizing: border-box;
   font-size:16px; color:black; white-space: nowrap; transition: .35s; }
#menu > li:hover, ul#menu > li > ul > li:hover { background: #3B3B3B; color:white;}
#menu > li:hover > ul {display:block;}

#menu > li > ul {display:none; position:absolute; left: 0%; top: 100%; padding:0px; padding-top:10px;}
#menu > li > ul > li {background: rgba(186,209,222,.75); color:black; padding:10px; padding-left:15px; padding-right:15px; font-size: 16px; transition: .2s; vertical-align: middle; }

#signInText {border:1px solid dimgray; border-radius:10px; padding:8px;}
#UNPW {display:none; position:absolute; width:200px; right:10%; top: 110%; 
    padding:10px; background: rgba(86,144,191,.2); }
#UNPW div {margin:2%;font-size: 18px;}
#username, #password {width:95%;font-size:15px; outline:none; border:1px solid dimgray; border-radius:15px; background: rgba(240,240,240,.8);}
#signedInUser {font-size:14px; margin-left:6%; font-style:italic;}

.downArrow {text-align: left; font-size: 18px; transition:.4s;}
.downArrow:hover {color:aqua !important;}
h1 {font-size:22px;margin:0px;padding:0px;}

#loginPage {display:flex; flex-direction: column; margin:7%; justify-content: flex-start; align-content:space-between;}
#loginPage #signInText {display:none;}
#loginPage > div:nth-of-type(1){font-size:24px; text-align: center;}
#loginPage > * {margin:10px;}
#loginPanel {display:flex; flex-direction: column; align-items:center; }
#loginPanel > * {margin:5px; height:30px;}
#loginPage button { font-size:15px;}
#loginPage #signedInUser {text-align: center; font-size:20px; color:deepskyblue;}

body > section:not(#home) {display:none; position: absolute; margin:8%; margin-top:6%; font-size:18px; padding:20px; }
.sectionTitle {position: relative; font-size:40px; margin-bottom:2.3%; display:inline-block; left:10%;
    animation: animateSectionTitle 1.8s ease-out; 
}
.sectionBody {position:relative; left:0%; animation: animateSectionBody 1.8s ease-out; background: rgba(200,215,227,.86); padding:15px; border-radius:13px; line-height: 30px;}

/*----------------------HOME------------------*/
#home {position: absolute; display:block; top:7%; height:90%; width:100%; border:0px solid red;}
#homeHeader {display:inline-block; color:#4D4D4D; font-size:22px; position: absolute; 
    top:18%; left:10%; margin-right:10%; line-height: 35px;}
#shortcut {padding:15px; color:black; font-size:20px;border-radius:10px; border:1px solid dimgray; background: rgba(244,244,244,.7); cursor:pointer; transition:.3s;
    display:inline-block; margin-top:20px; position:absolute; right:190px;
}
#shortcut a {color:dimgray;}
#shortcut:hover {background:lightblue;}
#shortcut  #deeplearningShortcut {font-size:25px; color: #0645BA ;}

#oneLiners {position:absolute; bottom:50px; left: 1%; display:none;}
#oneLiners div {opacity:0; font-size:20px; font-weight: 900; font-family: sans-serif; color:white; margin-top:10px; white-space: nowrap; letter-spacing: 2px;}

#coverQuotes {position: absolute; right:2%; bottom: 0%; width:42%; height:40%; opacity:1; 
     overflow:hidden; 
/*    animation:slideFromBottom 1.5s ease-out; animation-delay: 1s; animation-fill-mode:forwards;*/
}
#coverQuotes div { position: absolute; opacity: 0; padding:15px; background: rgba(0,0,0,.6); bottom:0;
    color:white; font-size:20px; font-family: sans-serif; line-height: 35px;}



.invisible {display:none;}
/*------------OVERVIEW--------------*/
#overview div {display:block;
   margin-bottom:1%; padding:1%; border-radius: 10px;
}
#overview > div:nth-child(1) {position:relative; left: 0%; width:60%;}
#overview > div:nth-child(1) {position:relative; left: 20%; width:60%;}
#overview > div:nth-child(1) {position:relative; left: 10%; width:60%;}
#overview > div:nth-child(1) {position:relative; left: 30%; width:60%;}

/*-----------------TEAM-----------------*/
#team .sectionBody > div:not(.fullBios) {display: inline-block; width:100%; margin:1%; vertical-align: top;}
#team .sectionBody > div > div:nth-child(2) {font-size:18px; font-style: italic; margin-bottom:2%;}
#team .sectionBody > div > div:nth-child(3) { }
.fullBios {padding:3%; border-radius: 5px; margin-bottom:3%;
    background: rgba(245,245,245,.3); }

/*---------------CONTACT US------------*/
#contact .sectionBody > div {padding:1%;}
#contact .sectionBody > div:nth-of-type(1) {display:inline-block;} 
#contact .sectionBody > div:nth-of-type(2) {display:inline-block; vertical-align: top;}
#contact .sectionBody > div:nth-of-type(3) {position:relative; bottom:-30%; }

/*-----------------UNLOCK-----------------*/
#unlock div {font-size:20px;}

/*-----------------OPTIMIZE-----------------*/
#optimize .sectionBody > div:nth-child(1) {width:70%;}
.cases {display:none; width:80%; padding:5px;}
.caseClick { width:60%; padding:1%; margin:1%; 
    color:dimgrey; font-weight:600; background: rgba(255,255,255,.7); border-radius: 10px;transition:.4s;}
.caseClick:hover {background:#0645BA; color:white;}

/*-----------------GROW-----------------*/
#gps123 .sectionBody > div:nth-of-type(2) {display:inline-block; width:30%; vertical-align: top;}
#gps123 .sectionBody > div:nth-of-type(3) {display:inline-block; width: 60%; min-width:300px;}
#gps123 #gpsimg {width:100%; height:auto;}
#gpsDemo {position:relative;}
#gpsDemo img{width:100%;}
.subscript {font-size:13px;}
.superscript {font-size:24px; color:royalblue;}

/*--------------DEMOS---------*/
#Demos {display:none !important;}
#gps img {width:86%; margin-bottom:25px; display:block;}
#gps .cases, #ProductDesign .cases {float:none;}
#gps .caseClick, #ProductDesign .caseClick {float:none; width:50%; padding:.5%;}
#productDesign {width:83%;}
#ProductDesign .sectionBody {width:100%; }

/*-----------------TOOLS AND SKILLS-----------------*/
#toolsSkills ul {margin:0px;}
#toolsSkills .skillLists {display:inline-block; vertical-align: top; width:25%; padding:3%; transition: .5s;}
#toolsSkills .skillLists:hover {background: rgba(134,220,240,.7); color:black; border-radius: 10px; opacity: .88;}

/*-----------------RECOGNITION-----------------*/
#recognition .sectionBody div {font-size:22px; font-style:italic;}
#recognition .sectionBody div div {font-style: normal;}

/*-----------------CLIENTS-----------------*/
#clients .sectionBody > article {display:inline-block; width:48%; vertical-align: top;}
#clients .sectionBody > article:nth-of-type(1) {padding-right:3%;}
#clients .sectionBody header {text-transform: uppercase; font-size:30px; font-weight: 600;}
#clients .clientNames {font-size: 18px; font-style: italic; text-align: right;}


/*---------------------KEYFRAME ANIMATIONS---------------*/
@keyframes animateSectionTitle {
    0%   {opacity:0;left:0%;}
    100% {opacity:1;left:10%;}
}
@keyframes animateSectionBody {
    0%   {opacity:0;left:30%;}
    100% {opacity:1;left:0%;}
}

@keyframes animateText {
    0%   {opacity:0;}
    100% {opacity:1; }
}

@keyframes slideFromBottom {
    0%   { bottom:-10%; opacity:0; }
    100% { bottom:0%; opacity: 1;}
}

@keyframes slideFromLeft {
    0% {opacity:0;}
    100% {width:20%; opacity:.65}
}

@keyframes expandOut {
    0%   { width:80%; height:100%; margin:8%;}
    99% {opacity:0; margin-left:-18%; margin-top:-18%; width:150%; height:150%;}
    100% {opacity:0;}
}
@keyframes expandOut2 {
    0%   { }
    50% {opacity:0; }
    100% {opacity:0;}
}
.expandOut {animation: expandOut2 2s; animation-fill-mode:forwards;}



/*MARKETMAP WHITEPAPER------------------------*/
#whitepaperMain {margin: 0;padding-left:5%; padding-right:5%;background:#fcfcfc; height:100vh; overflow: scroll;}
#whitepaperMain table td {padding:5px;}
#whitepaperMain img {max-width: 100%;}
.whitepaperTitle {font-size:20px; color:steelblue; margin-bottom:10px;}
#menuTitle2 {font-size: 25px;}

/*-----------------------------------------------------LAYOUT FOR MOBILE-----------------------------------------------*/
@media screen and (max-width: 720px) {
    video, audio {width:100%;}
    #menuMobile {display: inline-block;width:15%; padding:10px; font-size: 30px; text-align: center; color:black; background: rgba(220,220,220,.5);  cursor: pointer;z-index:10;position:fixed;right:0;}
    
    body, html {height:100%; width:100%;}
    body { font-family: "Arial"; background: #ebebeb; overflow:auto;
        background-image: url(images/mobile.jpg); background-size: auto 100%; 
        background-position: right top;
        background-attachment:fixed;
        background-size: cover;
        background-repeat: no-repeat;}
    button {background: #6E6E6E; border-radius: 3px; transition: none; font-size:13px;}
    
    #menuTitle { color:black;}
    #menuTitle span:nth-of-type(1) {font-style: italic;}
    #menuTitle span:nth-of-type(2) {font-style: italic; font-size:22px; padding-bottom: 6px;}
    #menuTitle span:nth-of-type(3) {font-style: italic;font-size:18px;}
    #menuTitle span:nth-of-type(4) {font-size:15px;}

    #menuWrapper {float:none;position:fixed; display:none; width:100vw; height:100vh; overflow:auto;z-index:2; background:rgba(206,228,240,.98);}
    #menu { overflow:auto; width:100%; height:90%; background:none;}
    #menu > li {display: block; padding:3%;text-align: center;font-size:18px; color:black; cursor: pointer;}
    #menu > li:hover {background:#e1f0f7; color:black;}
    
#menu > li > ul { position:relative; display:block; left:0%;}
#menu > li > ul > li {font-size: 16px; background: none; padding:1%;}
#UNPW {position:fixed; width:100%; left:0%; top:0%;
    padding:0%; background: #393A3B; border:none; }
#UNPW div {margin:1%;clear:both;}
#username, #password {width:85%;}
    
body > section:not(#home) {font-size:15px; top:70px; margin:5px;}
#home {top:7%; }
.sectionTitle {font-size:20px; left:5%; margin-bottom:20px; animation:none;}
.sectionBody {left:0%; animation:none;}
.downArrow {font-size: 16px;}
h1 {font-size:15px;}
a, a:active, a:visited {color:skyblue;}

/*-------------HOME---------*/ 
#homeHeader {display:inline-block; color:black; background: rgba(195, 228, 239, 0.658); left:2%; padding: 5px; border-radius:5px; margin:5px; font-size:18px; text-align: center; line-height: 30px;}
#shortcut {padding:10px;font-size:15px; right:10px; }
    #loginPage {color:black;}

#oneLiners {display:none; bottom:30%; margin-left:10px;}
#oneLiners div {opacity:0; left:0px; font-size:14px; margin-top:10px; white-space: pre-wrap; color:black;}

#coverQuotes {display: none; height:250px; width:60%;}
#coverQuotes div { padding:7px; font-size: 14px; bottom:0px; line-height: 20px;
    color:black; background:rgba(255,255,255,.8);}


    /*------------OVERVIEW--------------*/

    
    /*-----------------TEAM-----------------*/
#team .sectionBody > div:not(.fullBios) {display: block; width:100%;}
#team .sectionBody > div > div:nth-child(2) {font-size:15px; }
#team .sectionBody > div > div:nth-child(3) {font-size:14px; }

/*---------------CONTACT US-------*/


/*-----------------UNLOCK-----------------*/
#unlock .sectionTitle {font-size:17px;}
#unlock div {font-size:13px;}

/*-----------------OPTIMIZE-----------------*/
#optimize .sectionBody > div:nth-child(1) {width:100%;}
.cases {display:none; width:100%; padding:5px;}
.caseClick { width:100%; padding:1%; margin:1%; }
.caseClick:hover {background:#0645BA; color:white;}

/*-----------------GROW-----------------*/   
#gps123 #gpsimg {width:80vw; height:auto;}

/*-----------------DEMOS----------flash doesnt work on mobile-------*/
#ConsumerPreference section {width:97%;}
#productDesign section {width:97%;}
    
/*-----------------TOOLS AND SKILLS-----------------*/
#toolsSkills ul {font-size:13px;}
#toolsSkills .skillLists {width:80%;}
#toolsSkills .skillLists:hover {background: rgba(30,30,30,.7); color:white; border:1px solid darkgrey;}

/*-----------------RECOGNITION-----------------*/
#recognition .sectionBody > div {font-size:13px; width:85%;}
#recognition .sectionBody > div > div {font-size:15px; position:relative; left:10%;}

/*-----------------CLIENTS-----------98 bc of hr------*/
#clients .sectionBody > article {width:82%; font-size:14px;} 
#clients .sectionBody header { font-size:16px;}
#clients .sectionBody > article span, #Clients .sectionBody > article div {position:relative; left: 15px;}
#clients .clientNames {font-size: 13px;}

}



@media only screen and (max-device-width: 720px) and (orientation:landscape) {
     body, html {width:100%;}
    body {  background-size: 100% auto; }
}