/* Resets all browsers */
/***********************************/
*{margin: 0; padding: 0; outline: 0}

/* RWD Img */
/***********************************/
img{max-width: 100%}
.container{max-width: 2560px; margin: 0 auto; padding: 0 20px}
.image{max-width: 100%}

/* Resources */
/***********************************/
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Dosis);
@font-face {
  font-family: 'Gloria Hallelujah';
  font-style: normal;
  font-weight: 400;
  src: local('Gloria Hallelujah'), local('GloriaHallelujah'), url(https://themes.googleusercontent.com/static/fonts/gloriahallelujah/v5/CA1k7SlXcY5kvI81M_R28Y5mSNQmgKshuii2YddNQzE.woff) format('woff');/*Oh, fancy. To be used only if needed*/
};

/* Helpers */
/***********************************/
.margin-top-10 {padding-top:10px;}
.margin-bot-10 {padding-bottom:10px;}

/* Tooltips */
/***********************************/
a[data-tooltip] {position: relative;}
a[data-tooltip]::before,
a[data-tooltip]::after {position: absolute;display: none; opacity: 0.85;}
/*
   * using data-tooltip instead of title so we 
   * don't have the real tooltip overlapping
   * we don't want the text to wrap */
a[data-tooltip]::before {
  content: attr(data-tooltip);
  background: orangered;
  color: #fff;
  font-size: 13px;
  padding: 5px;
  border-radius: 5px;
  white-space: nowrap;
  text-decoration: none;
}
a[data-tooltip]::after {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  content: '';
}

a[data-tooltip]:hover::before,
a[data-tooltip]:hover::after {display: block;}

/** positioning **/

/* left tooltip */
a[data-tooltip][data-placement="left"]::before {
  top: -25%;
  right: 100%;
  margin-right: 10px;
}
a[data-tooltip][data-placement="left"]::after {
  border-left-color: orangered;
  border-right: none;
  top: 50%;
  right: 100%;
  margin-top: -6px;
  margin-right: 4px;
}

/* right tooltip */
a[data-tooltip][data-placement="right"]::before {
  top: -25%;
  left: 100%;
  margin-left: 10px;
}
a[data-tooltip][data-placement="right"]::after {
  border-right-color: orangered;
  border-left: none;
  top: 50%;
  left: 100%;
  margin-top: -6px;
  margin-left: 4px;
}

/* top tooltip */
a[data-tooltip][data-placement="top"]::before {
  bottom: 100%;
  left: 0;
  margin-bottom: 10px;
}
a[data-tooltip][data-placement="top"]::after {
  border-top-color: orangered;
  border-bottom: none;
  bottom: 100%;
  left: 10px;
  margin-bottom: 4px;
}

/* bottom tooltip */
a[data-tooltip][data-placement="bottom"]::before {
  top: 100%;
  left: 0;
  margin-top: 10px;
}
a[data-tooltip][data-placement="bottom"]::after {
  border-bottom-color: orangered;
  border-top: none;
  top: 100%;
  left: 10px;
  margin-top: 4px;
}

/* Typography */
/***********************************/
body{font-size:16px;}
h1 {font-family: 'Noto Sans', sans-serif; font-size:2.3em; font-weight:400; text-transform: uppercase; color:black; padding:0; margin:0;margin-bottom: 30px;overflow: hidden;}
 
h2 {color: #009688; font-family: 'Noto Sans', sans-serif; font-size:2.5em; letter-spacing:20px; text-align:center; font-weight:400; text-transform:uppercase; z-index:10; opacity:.8;overflow: hidden;}
 
h3 {color: #009688; font-family: 'Noto Sans', sans-serif; font-size:1.8em; line-height:1.9rem; font-weight:300; letter-spacing:6px; text-transform: uppercase; overflow: hidden;}
h4 {font-family: 'Noto Sans', sans-serif; font-size:1.6em; line-height:1.9rem; font-weight:300; letter-spacing:1px; text-transform: uppercase; color:gainsboro;overflow: hidden;}  
p, li, .Scroll {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:1.5em; line-height:1.5em;letter-spacing:1px; margin-bottom: 10px;}
ul {list-style-type: square; margin-left: 1em; padding-left: 1.5}
.heading{text-align:center; font-family: 'Noto Sans'; padding: 2em;}
.key{color:grey; font-family:'Source Sans Pro', sans-serif; font-weight:400; overflow: hidden;}
 
a{line-height: 3em;} 
a:link, a:visited, a:active {color: darkslateblue; text-decoration: none; text-decoration-style:dotted;} 
a:hover {color: orangered; text-decoration: none;}
quote{font-family:'Gloria Hallelujah', sans-serif; font-weight:400; font-size:2.5em; line-height:2.7em; color: grey; font-style:italic;}
#projects {font-family:'Dosis', sans-serif; font-weight:400; font-size:2em; line-height:1.5em; color: grey; text-align: center;vertical-align: middle; display: block; margin-bottom: 1.6em;}
.likes{line-height:-30px; font-family: 'Source Sans Pro';}
.Scroll{text-align: center; color: white;}
a.white:link, a.white:visited, a.white:active {color: white; text-decoration: none;}
.title h1{font-size: 3em;}
.title h3{font-size: 1.3em;}
.center{text-align: center;} 

/* Icons, Buttons & Images */
/***********************************/
.pcpic{border-radius:180px;}
img{float: center; margin: 0 auto; display: block; margin-left: auto; margin-right: auto;  }
 
.btn-success, .btn-success:hover {
    color: #fff !important;
    background-color: #69a5dd !important;
    border-color: #69a5dd !important;
}

.brain-icon {width: 15%}

/* Container */
/***********************************/
body, .container {margin:0; padding:0;
    background-image: url(https://logicpanel.com/assets/img/welcome-page/abstract-bg.jpg);
  }

 
/* Section - NAV */
/***********************************/
nav{ padding: 0px 50px; height: 20px;}
nav a{float: right;}

@media screen and (max-width: 768px) {
  nav {padding: 0px !important; }
  .parallax-one, .parallax-two, .parallax-three, .parallax-four, .parallax-five, .parallax-six, .parallax-seven {
    padding:  10px !important;  
  }
  .title{clear: both;}
}
 
/* Section - Title */
/***********************************/
.title { padding: 60px; margin:0 auto; text-align:center;}
.title h1 {font-size:35px; letter-spacing:2px;}

/* Section - Block */
/***********************************/
.block {  padding: 15px; width:90%; margin:0 auto; text-align:justify;}
.block-gray {background: #f2f2f2;padding: 60px;}
.section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}

/* Section - Parallax */
/***********************************/
.parallax h2{ color:white;  }

.parallax{
  padding-top: 200px;
  padding-bottom: 200px;
  overflow: hidden;
  position: relative;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  line-height: 25em;
  background-attachment: fixed;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;}

.parallax-one{
    background-image: url(https://logicpanel.com/assets/img/welcome-page/abstract-bg.jpg);
    padding-top: 20px;
  }
  
.parallax-two {         
    background-image: url(https://logicpanel.com/assets/img/welcome-page/graph-tablet-background.png);
    overflow: hidden;
    box-shadow: inset 0 0 0 2000px rgba(46,63,80,0.6);
}


.parallax-three {
    background-image: url(https://logicpanel.com/assets/img/welcome-page/dark-dots.jpg);
    overflow: hidden;
    box-shadow: inset 0 0 0 2000px rgba(46,63,80,0.6);

}

.parallax-four {
     background-image: url(https://logicpanel.com/assets/img/welcome-page/team-productivity.jpg);
    overflow: hidden;
    box-shadow: inset 0 0 0 2000px rgba(46,63,80,0.6);

 }

.parallax-five {
 
  background-image: url(https://logicpanel.com/assets/img/welcome-page/tools.jpg);
   overflow: hidden;
    box-shadow: inset 0 0 0 2000px rgba(46,63,80,0.6);
 
}

.parallax-six {
  padding-top: 20px;
  padding-bottom: 30px;
  overflow: hidden;
  position: relative;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  line-height: 10rem;
  background-color: grey;
  background-attachment: fixed;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;}
.parallax-seven {
  padding-top: 200px;
  padding-bottom: 200px;
  overflow: hidden;
  position: relative;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  line-height: 25rem;
  background-color: #2D3339;
  background-attachment: fixed;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;}

/* Extras */
/***********************************/
.line-break {border-bottom:1px solid grey; width: 190px; margin:0 auto;}
input {
    width: 100%;
    height: 30px;
    margin: 10px;
    float: left;
    position: relative;
    left: -10px;
    padding: 5px;
    border: none;
}
input[type="submit"]{
    color: #fff !important;
    line-height: 1em;
    background: #009688 !important;
}
input[type="submit"]:hover{
  cursor: pointer;
    box-shadow: inset 0 0 0 2000px rgba(46,63,80,0.6);
 
}

/* Media Queries */
/***********************************/
@media screen and (max-width: 768px) {
    *{margin: 0; padding: 0; outline: 0}
    img, .image{max-width: 100%}
    .container{max-width: 2560px; margin: 0 auto;}
    .block {padding: 10px; width:90%;}
/*    img{margin: 0px auto; display: block; padding: 20px 0 20px 0; height: 10em; width: 10em;}*/
    .parallax-one, .parallax-two, .parallax-three, .parallax-four, .parallax-five, .parallax-six, .parallax-seven {padding-top:13em; padding-bottom:13em;}
    .about{text-align: center;margin: 0 auto; position: absolute; padding-left: 35%;}
    .pbackground{width:  767px; margin: 0px auto;}
    .container, .image{display: block; height: auto; width: 100%;}
    .parallax-seven quote{font-size: 1.6em;}
    .title h1{font-size: 2em;}
    h1{font-size: 1.6em;overflow: hidden;}
    h2{line-height:2.6rem; height: auto;overflow: hidden; font-size: 2em;}
    h3{font-size: 1em; letter-spacing:3px;}
/*    .title img{height: 12em; width: 12em;}*/
    .title h3{font-size: 1.2em;}
/*    .block img{height: 5em; width: 5em;}*/
    p, li{font-size: 1.1em; line-height: 1.3em;}
    ul {list-style-type: square; margin-left: .7em; padding-left: 1;}
    h1, h2, h3, h4, p, ul, li, img, div{overflow: hidden;}

    .business-impact h2{
      padding: 20px 0;
    }
}

@media (max-width:650px){
    .about{text-align: center;margin: 0 auto; position: absolute; padding-left: 25%;}
    .pbackground{width:  650px; margin: 0px auto;}
    .parallax-seven quote, #projects{font-size: 1.4em; line-height: 1.6em; margin-bottom: 2em;}
    .title h1{font-size: 2em;}
    h1{font-size: 1.6em;overflow: hidden;}
    h2{line-height:1.5rem; height: auto;overflow: hidden; font-size: 1.5em;}
    h3{font-size: 1em; letter-spacing:2px;}
/*    .title img{height: 10.5em; width: 10.5em;}*/
    .title h3{font-size: 1em;}
/*    .block img{height: 5em; width: 5em;}*/
    p, li{font-size: .9em; line-height: 1.2em;}
    quote{font-weight:200; font-size:.8em; line-height:.8em; color: grey; font-style:italic;}
    ul {list-style-type: square; margin-left: .5em; padding-left: .8;}
    h1, h2, h3, h4, p, ul, li, img, div{overflow: hidden;}
    
}
 

/*TAB STYLING*/

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,900");
 

.tabbed-content {
  background: #fff;
  box-shadow: 1px 1px 6px #ccc;
/*  max-width: 600px;*/
  padding: 1em;
  margin: 1em auto;
  min-height: 400px;
}
.tabs *, .tabbed-content p{font-size: 14px; font-weight: 100px;}
.tabs ul {
  margin: 0;
/*  padding: 0 0 1em 0;*/
  font-weight: bold;
      margin-right: 20px;
}
.tabs ul li {
  background: #eee;
}
.tabs ul li a {
  padding: 0.5em 1em;
}
.tabs ul li a:hover, .tabs ul li a.active {
  background: #444;
  color: #eee;
  
}

.item {
  margin-bottom: 2px;
}
.item::before {
  cursor: pointer;
  font-weight: bold;
  background: #eee;
  padding: 0.5em;
  display: block;
}
.item.active::before {
  background: #444;
  color: #eee;
}
.item.active .item-content {
  padding: 1em;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

@media all and (min-width: 800px) {
  .item.active .item-content {
    padding-top: 0;
  }

  .tabs-side .tabs li {
    margin-bottom: 2px;
  }
}
/* 
The project specific CSS starts here
This is the minimum CSS that you will need in order for this to work
*/
.tabbed-content .tabs {
  display: none;
}
.tabbed-content .item {
  min-height: 2em;
}
.tabbed-content .item::before {
  content: attr(data-title);
}
.tabbed-content .item .item-content {
  opacity: 0;
  visibility: hidden;
  height: 0;
  font-size: 14px;
}
.tabbed-content .item.active .item-content {
  opacity: 1;
  visibility: visible;
  height: auto;
}

@media all and (min-width: 800px) {
  .tabbed-content .tabs {
    display: block;
  }
  .tabbed-content .tabs li {
    display: inline-block;
  }
  .tabbed-content .tabs li a {
    display: block;
  }
  .tabbed-content .item {
    min-height: 0;
  }
  .tabbed-content .item::before {
    display: none;
  }
  .tabbed-content.tabs-side .tabs {
/*    width: 150px;*/
    width: 250px;
    float: left;
  }
  .tabbed-content.tabs-side .tabs li {
    display: block;
  }
  .tabbed-content.tabs-side .item {
    margin-left: 150px;
  }
}