@charset "utf-8";

body {
  position: relative;
}


.cpMedia {
	background-color: rgb(241, 244, 245);
}


canvas {
  display: block;
  position: fixed;
  zindex: 1;
  pointer-events: none;
  top:0px;
  left:0px;
}

footer {
	margin-top: 80px;
	padding: 40px;
	background-color: #eee;
}

.number {
	font-weight: 700;
	font-size: 1.2em;
	color: white;
	background-color: #b0191e;
	display: inline;
	padding: 0 5px;
}

h2 {
	color: white;
	background-color: #006BA1;
	display: inline;
	padding: 0 5px;
}

p {
	
	font-size: 1.4em;
}

.card-title{
	color: white;
	text-decoration: none;
	font-size: 1.1em;
	font-weight: 600;
}

.card-text{
	color: white;
	font-size: 0.8em;
}

.card{
	background-color:#006BA1;
}

.card hr{
	border-color: white;	
}


.logo {
    margin: 10px 50px 0 0;
}

.login{
	color: #FFF;
	padding: 5px 5px;
}
.login a{
	font-weight: 600;
	background-color: #006BA1;
	padding: 5px 10px;
	text-decoration: none;
	color: #FFF;
 }

.login a:hover{
	color: #FFF;
	text-decoration: none;
	background-color: gray;
 }
.login a:active, .login a:visited{
	color: #FFF;
	text-decoration: none;
}


.thumbnail a, .thumbnail a:active, .thumbnail a:visited{
	color: #000;
	text-decoration: none;
}
.thumbnail a:hover{
	background-color: #c8e1fb;
}

.thumbnail p{
	color: #000;
	font-size: 1.1em;
	font-weight: 600;
	padding: 5px 0 0 0;
	line-height: 1.1em;	
}

.thumbnail{
	display: block;
}


.carousel-control-prev{
	width: 100px;
}
.carousel-control-next{
	width: 100px;
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}



.carousel.slide{
 	padding: 10px 5%;
}



#products .carousel-control-prev{
	width: 50px;
}
#products .carousel-control-next{
	width: 50px;
}
#products .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
#products .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

#products .carousel-inner {
	width: 95%;
	background-color: #dfedfb;
} 

#products .carousel.slide{
 	padding: 10px 5%;
	background-color: #dfedfb;
}


.products {
    background-color: #dfedfb;
}
#products .carousel h3{font-size: 14px;}


#products .carousel_icon{
    margin-left: auto;
    margin-right: auto;
	visibility: hidden;
	display: none;
}
.productcategory{
	background-color: #dfedfb;
}

.productcategory h2{
	font-size: 24px;
	font-weight:  bold;
}

.jumbotron{
    background-size: cover;
	min-height: 450px;
    padding: 3em 3em;
    margin: 0;
}

.jumbotron.excel1{
    background-image: url("../Library/hero_excel1.jpg");
}

.jumbotron.excel2{
    background-image: url("../Library/hero_excel2.jpg");
}
.jumbotron.word1{
    background-image: url("../Library/hero_word1.jpg");
}
.jumbotron.word2{
    background-image: url("../Library/hero_word2.jpg");
}
.jumbotron.powerpoint{
    background-image: url("../Library/hero_powerpoint.jpg");
}
.jumbotron.outlook{
    background-image: url("../Library/hero_outlook.jpg");
}
.jumbotron.default{
    background-image: url("../Library/hero_default.jpg");
}

.jumbotron h1{
    font-weight: 500;
    color: #006BA1;
    background-color: rgba(255,255,255,0.71);
    padding: 2px 10px 5px 5px;
    display: inline;
}

.lead{
    margin-top: 10px;
    margin-left: 0px;
    margin-bottom: 0px;
    padding: 2px 10px 5px 5px;
    font-weight: 400;
    background-color: rgba(255,255,255,0.71);
}

.optInfo{
	padding: 20px 0;
}

.optInfo a, .optInfo a:hover, .optInfo a:visited, .optInfo a:active{
	color: #000;
}



#toc h2{
	font-size: 2em;
	font-weight: 100;
	padding: 0.2em 0 0em;
}

#toc h3{
	font-size: 1.6em;
	font-weight: 100;
	padding: 0.1em 0 0em;
}


#toc .lesson a, #toc .lesson a:active, #toc .lesson a:visited{
    font-size: 1.2em;
    font-weight: 400;
	color: black;
    padding: 0 0 0 0em;
}


.chapter{
	background-color:#006BA1;
	color: #fff;
	padding:0;
	margin-bottom: 2px;
	margin-top: 2px;
}

.chapter2{
	background-color:rgba(147,187,213,1.00);
	color: #fff;
	padding:0;
	margin-bottom: 2px;
	margin-top: 2px;
}


.lesson{
    background-color:#E9EBF5;
    padding: 1px 4px;
    margin-bottom: 2px;
    margin-top: 2px;
}

.lesson:hover{
	background-color:rgba(212,215,233,1.00)
}

#toc .docsBt a, #toc .docsBt a:active, #toc .docsBt a:visited, 
#toc .exerciseBt a, #toc .exerciseBt a:active, #toc .exerciseBt a:visited{
	color: #000;
}


.detail {
    margin: 0.2em 0;
    background-color: #FFF;
	padding:15px 0 15px 0;
}

.detail h3{
	font-size: 1.4em;
	font-weight: 500;
}

.detail a, .detail a:active, .detail a:visited{
	font-size: 1em;
}

.detail ul a{
	color: #000;
}



#formview h5{
	color: #000;
}

#formview .card{
	background-color:#eee;
}

#formview .form-label-group{
	padding: 5px 0;
}

#formview .btn{
	background-color: #006BA1;
	color: #FFF;
}

#error {
	color: red;
	font-weight: 600;
	font-size: 1em;
}



#subscribeModal .modal-content{
	overflow:hidden;
}




/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {  

}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 

}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	#products .carousel h3{font-size: 18px;}
	#products .carousel_icon{
		visibility: visible;
		display:block;
	}
	.lead{
		margin: 10px 45% 0px 0px;
		padding: 2px 10px 5px 5px;
		font-weight: 400;
		background-color: rgba(255,255,255,0.71);
	}	
	
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
	#products .carousel h3{font-size: 18px;}
	#products .carousel_icon{
		visibility: visible;
		display:block;
	}
}