/* 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");

@import url("http://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700,900");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic");
@import url(http://fonts.googleapis.com/css?family=Raleway:400,200,300,100,500,700,600,800,900);

/* Orange:#FC7555 | Blue:#336699 | Light Gray:#DDDDDD | Text Gray:# 5e5e5e5  */


/* GLOBAL STYLES
-------------------------------------------------- */
html, body {
    height: 100%;
    width: 100%;
    font-family: 'Roboto', 'Poppins', sans-serif;
    padding-bottom: 20px;
    color: #222222;
	background-color: #fff;
}

h1, h2, h3, h4, h5 {font-family: 'Roboto', serif; }
p, li.normal, ul.normal, ol.normal, td, input { font-family: 'Roboto', serif; font-weight: 300; font-size: 16px; color: #5e5e5e; text-decoration: none; line-height:20px; vertical-align: baseline; clear:both; }

p.text20_24 { font-family: 'Roboto', serif; font-weight: 300; font-size: 20px; color: #5e5e5e; text-decoration: none; line-height: 30px;}


.textRoboto300 { font-family: 'Roboto', serif; font-weight: 300; font-size: 16px; color: #5e5e5e; text-decoration: none; line-height: 20px;}
.textRoboto400 { font-family: 'Roboto', serif; font-weight: 400; font-size: 16px; color: #5e5e5e; text-decoration: none;}
.textRoboto500 { font-family: 'Roboto', serif; font-weight: 500; font-size: 16px; color: #5e5e5e; text-decoration: none;}
.textRoboto700 { font-family: 'Roboto', serif; font-weight: 700; font-size: 26px; color: #5e5e5e; text-decoration: none;}
.textRoboto900 { font-family: 'Roboto', serif; font-weight: 900; font-size: 26px; color: #5e5e5e; text-decoration: none; }

.background_blue {background-color: #336699;} .background_orange {background-color: #fc7555;} 
.text_blue {color: #336699;} .text_orange {color: #fc7555;}

.valign {vertical-align: middle}
.vertical-center {margin: 0;position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.center {margin: 0;position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.text_justify {text-align: justify}
.text_height40 {line-height: 30px;}

a.menu_text  { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #336699; text-decoration: none; }
a.menu_text:hover, .highlight { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #fc7555; text-decoration: underline; }
a.mt_active { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #fc7555; text-decoration: underline; }
a.blog  { font-family: 'Roboto', serif; font-weight: 300; font-size: 12px; color: #555; text-decoration: none; line-height: 12px; }
a.blog:hover, .highlight { font-family: 'Roboto', serif; font-weight: 300; font-size: 12px; color: #fc7555; text-decoration: none; line-height: 12px;}
a.footer { color: #d5d5d5; font-size: 11px; }
a.footer:hover { color: #fff; font-size: 11px; }

.form_error { color: red; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
.success { color: green; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
.error { color: red; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }

fieldset { 
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove(internal value);
}

/* --------------------------------------------------
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 Us
2. Resources
3. Charts
4. Blog
-------------------------------------------------- */


/* Customize the Navigation Area
-------------------------------------------------- */
.bg-light{background-color:#f8f9fa !important}

.main_menu_area {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%; height: 73px;
  z-index: 30;
  padding: 0px 0px;
}

.main_menu_area .navbar {
  height: 90px;
  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 img {
  padding-left: 60px;
  height:75px; width:360px;
}

.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: 30px;
  border-bottom: solid 2px #f8f9fa;
  -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 {
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #FC7555;
  letter-spacing: .65px;
  padding: 0px;
  line-height: 30px;
  border-bottom: solid 2px #FC7555;
}
.main_menu_area .navbar .navbar-nav li.active a {
  color: #336699;
  border-bottom: solid 2px #f8f9fa;
}
.main_menu_area .navbar .navbar-nav li:last-child {
  margin-right: 0px;
}


/* Customize the Image Carousel Slider Area
-------------------------------------------------- */
.carousel {
    margin-top: 73px;
    margin-bottom: 0px;
	border-bottom: solid 2px #fff;
}

.carousel-indicators {
    background-color:#336699;
	opacity: 0.5;
}

.carousel-inner img {
    width: 100%;
    height: 100%;
}

.carousel-caption {
    position: absolute;
	top: 25%;
    transform: translateY(-25%)
}

.carousel-caption h1 {
	color: #fff;
    font-size: 250%;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #000;
}

.carousel-caption h3 {
	color: #fff;
	font-size: 140%;
    text-weight: 200px;
    text-shadow: 1px 1px 2px #000;
}

.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;
}

.no_margin {
	margin: 0px;
}

/* Customize the Marketing Message Area
-------------------------------------------------- */
/* Center align the text within the x columns below the carousel */

.bar {
	margin: 0; padding: o;
}

.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
	background-color: #fff;
}

.marketing .col-lg-3 {
  margin-bottom: 1.5rem;
  text-align: center;
	background-color: #fff;
}

.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;
}


/* 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;
}

hr.light-100 {
    border-top: 1px solid #d5d5d5;
    width: 100%;
    margin-top: -2rem;
    margin-botton: 1rem;
}

footer p {
    color: #d5d5d5;
    text-align: center;
    font-size: 11px;
    padding: 0 50px 20px 50px;
}
/* ---------------------------- 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: 75px auto 0 auto;
    margin-bottom: 0px;
}

.titlebar {
	height: 80px;
	border-bottom: solid 3px #f4a632;
}
.titlebar_words {
    font-family: 'Roboto', serif; 
    font-weight: 400; 
    font-size: 30px; padding-top: 25px;
    color: #ffffff; 
    vertical-align:middle;
}


/* Customize the About Us 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;
}

.cio_padding {
	padding: 0px 100px 30px 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
-------------------------------------------------- */


/* Customize the BLOG CONTENT
-------------------------------------------------- */
.blog_frame { float:left; padding: 30px 10px 0px 20px; margin: 20px 0px 0px 0px; border-left:#336699 solid 1px; border-right:#336699 solid 1px; background-color:#f1f1f1; }



/*---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;
}