/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
@import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,900");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700");
/* GLOBAL STYLES
-------------------------------------------------- */
html, body {
  height: 100%;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  padding-bottom: 20px;
  color: #222222;
}
/* --------------------------------------------------
Main Page
1. Navigation Area
2. Image Carousel Slider Area
3. Jumbotron Area
4. Marketing Message Area
5. Quotes Area
6. Featurettes Area
7. Cards Area
8. Footer Area

SubPage
1. About
2. Resources
3. Charts
4. Blog
-------------------------------------------------- */
/* Customize the Navigation Area
-------------------------------------------------- */
table, th, td {
  border: 1px solid #555;
  border-collapse: collapse;
}
th, td {
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  line-height: 20px;
  color: #7c8d93;
  text-align: center;
}
.textcenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.main_menu_area {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 30;
  padding: 0px 0px;
}
.main_menu_area .navbar {
  height: 70px;
  padding: .8rem;
  border-radius: 0px;
  border-bottom: 1px solid #aaaaaa;
  box-shadow: 0px 2px 5px grey;
  background-color: #ffffff;
}
.main_menu_area .navbar .navbar-toggler {
  border: none;
  border-radius: 0px;
  padding: 0px;
}
.main_menu_area .navbar .navbar-toggler span {
  height: 3px;
  width: 25px;
  display: block;
  background: #0b1033;
  margin-bottom: 3px;
}
.main_menu_area .navbar .navbar-toggler span:last-child {
  margin-bottom: 0px;
}
.navbar-brand {
  padding-left: 60px;
}
.main_menu_area .navbar .navbar-nav {
  display: inline-block;
  text-align: right;
  padding-right: 60px;
}
.main_menu_area .navbar .navbar-nav li {
  display: inline-block;
  margin-right: 35px;
}
.main_menu_area .navbar .navbar-nav li a {
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #888888;
  letter-spacing: .65px;
  padding: 0px;
  line-height: 90px;
  -webkit-transition: all 400ms linear 0s;
  -o-transition: all 400ms linear 0s;
  transition: all 400ms linear 0s;
}
.main_menu_area .navbar .navbar-nav li:hover a {
  color: #97ccfe;
}
.main_menu_area .navbar .navbar-nav li.active a {
  color: #2b2b2b;
}
.main_menu_area .navbar .navbar-nav li:last-child {
  margin-right: 0px;
}

/* ========== Links ========== */
a {
  color: #008dd2;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 14px;
}
a:hover {
  color: #FF9900;
  text-decoration: underline;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 14px;
}
a.main_page {
  color: #008dd2;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 22px;
    line-height: 36px;
}
a.main_page:hover {
  color: #FF9900;
  text-decoration: underline;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 22px;
    line-height: 36px;
}

/* Customize the Image Carousel Slider Area
-------------------------------------------------- */
.carousel {
  margin-top: 78px;
  margin-bottom: 0px;
}
.carousel-inner img {
  width: 100%;
  height: 100%;
}
.carousel-caption {
  position: absolute;
  top: 25%;
  transform: translateY(-25%)
}
.carousel-caption h1 {
  font-size: 300%;
  text-transform: uppercase;
  text-shadow: 1px 1px 15px #000;
}
.carousel-caption h3 {
  font-size: 120%;
  text-weight: 100px;
  text-shadow: 1px 1px 10px #000;
  padding-bottom: 1rem;
}
.btn-primary {
  background-color: #6648b1;
  border: 1px solid #6648b1;
}
.btn-primary:hover {
  background-color: #563d7c;
  border: 1px solid #563d7c;
}
/* Customize the Jumbotron Area
-------------------------------------------------- */
.jumbotron {
  padding: 50px 110px 50px 110px;
  border-radius: 0px;
  border-top: 1px solid #555;
  border-bottom: 3px solid #fc7555;
}
/* Customize the Marketing Message Area
-------------------------------------------------- */
/* Center align the text within the x columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing .col-lg-3 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
.bd-placeholder-img {
  padding-bottom: 25px;
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.padding_bottom20 {
  padding-bottom: 20px;
}
a.pic_rotate:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
  opacity: 0.5;
}
.resource_links {
  padding: 20px;
  border: 2px solid #336699;
  margin-bottom: 25px;
  -webkit-box-shadow: 4px 4px 4px 0px #555555;
  box-shadow: 4px 4px 4px 0px #555555;
}
/* Customize the Quotes Area
-------------------------------------------------- */
.quotes {
  border: 1px solid #336699;
  background-color: #336699;
  color: white;
  margin: 20px 0px 30px 0px;
  font-size: 1rem;
}
.quotes h3 {
  font-weight: 100px;
}
.quotes_padding_a {
  padding: 20px 50px 20px 50px;
  border-right: 1px solid #d5d5d5;
}
.quotes_padding_b {
  padding: 20px 50px 20px 50px;
}
/* Customize the Featurettes Area
-------------------------------------------------- */
.featurette-divider {
  margin-top: 1rem;
  margin-bottom: 2rem;
}
/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}
.success {
  color: #31B806;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  text-align: center;
}
.error {
  color: #FA0105;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  text-align: center;
}
.signup_container {
  margin: 10px auto 0px auto;
  padding: 10px 50px 10px 50px;
  width: 50%;
  height: auto;
  border: solid 1px #706F6F;
  background-color: #eeeeee;
  border-radius: 30px;
}
/* Customize the Footer Area
-------------------------------------------------- */
footer {
  background-color: #3f3f3f;
  color: #d5d5d5;
  padding-top: 1rem;
}
hr.light {
  border-top: 1px solid #d5d5d5;
  width: 75%;
  margin-top: .8rem;
  margin-botton: 1rem;
	  text-align: center;
}
hr.light-100 {
  border-top: 1px solid #d5d5d5;
  width: 100%;
  margin-top: -2rem;
  margin-botton: 1rem;
}
footer a {
  color: #d5d5d5;
}
footer a:hover {
  color: #fff;
}
footer p {
  color: #d5d5d5;
  text-align: center;
  font-size: 12px;
  padding: 0 50px 20px 50px;
}
/* Slider
-------------------------------------------------- */
input[type=range] {
  -webkit-appearance: none;
  margin: 20px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: #03a000;
  border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
  height: 40px;
  width: 10px;
  border-top-left-radius: 70%;
  border-top-right-radius: 70%;
  border-bottom-left-radius: 20%;
  border-bottom-right-radius: 20%;
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #03a9f4;
}
.range-wrap {
  width: 95%;
  position: relative;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 0px 0px 0px 0px;
}
.range-value {
  position: absolute;
  top: -50%;
}
.range-value span {
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #03a9f4;
  color: #fff;
  font-size: 14px;
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 5px;
  box-shadow: 3px 3px 10px #888888;
}
.range-value span:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #03a9f4;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}
@media (max-width: 830px) {
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}
.slidercontainer {
  width: auto;
  padding: 10px;
  margin: 0px;
  background-color: #ecf5fb;
  position: relative;
}
.slidertitle {
  width: 100%;
  padding: 5px;
  margin: 0px;
  background-color: #058dd2;
  color: #dddddd;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
}
.slidertitle2 {
  float: right;
  padding: 0px;
  margin: 0px;
  background-color: #058dd2;
  color: #dddddd;
  font-weight: bold;
  font-family: "Roboto", sans-serif;
  font-size: 30px;
}
.sliderbox {
  background-color: #ffffff;
}
.slidertitlewords {
  color: #ecf5fb;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
}
/* ---------------------------- END MAIN PAGE ---------------------------- */
/* Customize the WELCOME CONTENT
-------------------------------------------------- */
.padding {
  padding-bottom: 2rem;
}
.welcome {
  width: 75%;
  margin: 0 auto;
  padding-top: 2rem;
}
.welcome hr {
  border-top: 2px solid #b4b4b4;
  width: 95%;
  margin-top: .3 rem;
  margin-bottom: 1rem;
}
.fa-code {
  color: #e54d26;
}
.fa-bold {
  color: #563d7c;
}
.fa-css3 {
  color: #2163af;
}
.fa-code, .fa-bold, .fa-css3 {
  font-size: 4em;
  margin: 1rem;
}
/* Customize the SOCIAL CONTENT
-------------------------------------------------- */
.social a {
  font-size: 2em;
  padding: .7rem;
}
.fa-facebook {
  color: #3b5998;
}
.fa-twitter {
  color: #00aced;
}
.fa-google-plus-g {
  color: #dd4b39;
}
.fa-instagram {
  color: #517fa4;
}
.fa-youtube {
  color: #bb0000;
}
.fa-linkedin {
  color: #007bb5;
}
.fa-facebook:hover, .fa-twitter:hover, .fa-google-plus-g:hover, .fa-instagram:hover, .fa-youtube:hover, .fa-linkedin:hover {
  color: #d5d5d5;
}
/* SUBPAGE CONTAINER STYLE ITEMS
-------------------------------------------------- */
.subpage_container {
  margin-top: 100px;
  margin-bottom: 0px;
}
/* Customize the About Page
-------------------------------------------------- */
.featurette_area {
  overflow: hidden;
}
.featurette_text_inner p {
  padding-right: 25px;
}
.featurette_img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.featurette_img .featurette_img_inner {
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.4);
  padding: 20px;
}
.padding_right_100 {
  padding-right: 100px;
}
img.center {
  display: block;
  margin: 0 auto;
}
/* Customize the Charts Page 
-------------------------------------------------- */
.chart_submenu {
  padding-top: 30px;
}
.chart_submenu li a {
  color: #555;
  font-size: 12px;
}
.chart_submenu li.active a, .chart_submenu li.active a:active {
  color: #222;
  font-size: 12px;
  background-color: #ddd;
}
.chart_submenu li a:hover {
  color: #fff;
  font-size: 12px;
  background-color: #bbb;
}
/* Customize the CIRCLE CHART CONTENT
-------------------------------------------------- */
.circle_chart_area {
  padding: 45px 0px 80px 0px;
}
.circle_progress .circle_progress_inner {
  position: relative;
  max-width: 175px;
  margin: auto;
}
.circle_progress .circle_progress_inner strong {
  position: absolute;
  left: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  font-size: 36px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: #0b1033;
  margin-top: -13px;
}
.circle_progress .circle_progress_inner h4 {
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  color: #7c8d93;
  font-weight: 500;
  position: absolute;
  left: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  margin-top: 18px;
}
.circle_progress .circle_progress_inner .percentage {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  position: absolute;
  left: -8px;
  top: 2px;
  background: #80cfff;
  /* Old browsers */
  background: -moz-linear-gradient(left, #80cfff 0%, #997aff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #80cfff 0%, #997aff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, right top, from(#80cfff), to(#997aff));
  background: -o-linear-gradient(left, #80cfff 0%, #997aff 100%);
  background: linear-gradient(to right, #80cfff 0%, #997aff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80cfff', endColorstr='#997aff', GradientType=1);
  /* IE6-9 */
}
.circle_progress .circle_progress_inner .percentage:after {
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 50%;
  position: absolute;
  left: 5px;
  top: 5px;
  background: #fff;
}
/* End Circle Chart Area css
-------------------------------------------------- */
/* Customize the SLIDER CONTENT
-------------------------------------------------- */
.slidecontainer {
  width: 100%;
}
.slider {
  -webkit-appearance: none;
  width: 70%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider:hover {
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
/* End Slider Area css
-------------------------------------------------- */
/*---Firefox Bug Fix
-------------------------------------------------- */
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/*--- Fixed Background Image
-------------------------------------------------- */
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0 !important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
/*--- Bootstrap Padding Fix
-------------------------------------------------- */
[class*="col-"] {
  padding: 1rem;
}