/* style sheet for Active Learning Module  */
/* text styles */
/* end of text styles */
/* Start Implement Active Learning  */

.class_head {
    width: 200px;
    height: 100px;
    padding: 10px;
}

.class_head h3 {
    text-align: center;
    font-size: 1.5em;
    color: #ffffff;
    margin-top: 0.5em;
}

.small_head {
    background: #ae513f;
}

.large_head {
    background: #1E242B;
}

.online_head {
    background: #27776c;
}

.class_box {
    width: 200px;
    height: 100px;
    padding: 10px;
}

.class_box p {
    text-align: center;
    font-size: 1.2em;
    color: #ffffff;
    line-height: 1.2em;
}

.class_head_small {
    width: 90%;
    height: 100px;
    padding: 10px;
    background: #ae513f;
    margin-left: auto;
    margin-right: auto;
}

.class_head_small h3 {
    text-align: center;
    font-size: 1.5em;
    color: #ffffff;
    margin-top: 0.5em;
}

.class_head_large {
    width: 90%;
    height: 100px;
    padding: 10px;
    background: #1E242B;
    margin-left: auto;
    margin-right: auto;
}

.class_head_large h3 {
    text-align: center;
    font-size: 1.5em;
    color: #ffffff;
    margin-top: 0.5em;
}

.class_head_online {
    width: 90%;
    height: 100px;
    padding: 10px;
    background: #27776c;
    margin-left: auto;
    margin-right: auto;
}

.class_head_online h3 {
    text-align: center;
    font-size: 1.5em;
    color: #ffffff;
    margin-top: 0.5em;
}

.btn-custom1 {
    background: #5C666F;
    border-color: #5C666F;
    color: #fff;
    width: 50%;
    margin: 5px;
}

.btn-custom1:hover,
.btn-custom1:focus {
    background: #3EBFAC;
    border-color: #3EBFAC;
    color: #fff;
}

.btn-custom1:active {
    background: #5C666F;
    border-color: #5C666F;
    color: #fff;
}

.smallclass {
    background-color: #D4624D;
    height: 140px;
    position: relative;
    width: 90%;
    text-align: center;
    color: #F1F1F1;
    font-weight: 400;
    font-size: 1.2em;
    padding: 1.2em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.3em;
}

.smallclass p {
    text-align: center;
    font-size: 1.2em;
    color: #ffffff;
    line-height: 1.2em;
}

.smallclass:after,
.smallclass:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.smallclass:after {
    border-color: rgba(212, 98, 77, 0);
    border-left-color: #D4624D;
    border-width: 10px;
    margin-top: -10px;
}

.smallclass:before {
    border-color: rgba(212, 98, 77, 0);
    border-left-color: #D4624D;
    border-width: 10px;
    margin-top: -10px;
}

.largeclass {
    background-color: #5C666F;
    height: 140px;
    position: relative;
    width: 90%;
    text-align: center;
    color: #F1F1F1;
    font-weight: 400;
    font-size: 1.2em;
    padding: 1.2em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.3em;
}

.largeclass p {
    text-align: center;
    font-size: 1.2em;
    color: #ffffff;
    line-height: 1.2em;
}

.largeclass:after,
.largeclass:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.largeclass:after {
    border-color: rgba(212, 98, 77, 0);
    border-left-color: #5C666F;
    border-width: 10px;
    margin-top: -10px;
}

.largeclass:before {
    border-color: rgba(212, 98, 77, 0);
    border-left-color: #5C666F;
    border-width: 10px;
    margin-top: -10px;
}

.onlineclass {
    background-color: #2f9183;
    height: 140px;
    position: relative;
    width: 90%;
    text-align: center;
    color: #F1F1F1;
    font-weight: 400;
    font-size: 1.2em;
    padding: 1.2em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.3em;
}

.onlineclass p {
    text-align: center;
    font-size: 1.2em;
    color: #ffffff;
    line-height: 1.2em;
}

.onlineclass:after,
.onlineclass:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.onlineclass:after {
    border-color: rgba(212, 98, 77, 0);
    border-left-color: #2f9183;
    border-width: 10px;
    margin-top: -10px;
}

.onlineclass:before {
    border-color: rgba(212, 98, 77, 0);
    border-left-color: #2f9183;
    border-width: 10px;
    margin-top: -10px;
}
/* End Implement Active Learning  */
/* image and video styles */

.icon_left {
    float: left;
    margin-right: 10px;
    margin-top: -10px;
}
/* end of image styles */
/* page styles - header/module */
.section h1 {
    font-size: 2.25em;
}
.section2_img, .section3_img, .section4_img, .section5_img, .section6_img {
    margin-bottom: 1em;
}
.section1_img {
    background-image: url(../images/module_implement.jpg);
}

.section1_img_flush {
    background-image: url(../images/module_implement.jpg);
}

.section2_img {
    background-image: url(../images/module_evidence.jpg);
}

.section2_img_flush {
    background-image: url(../images/module_evidence.jpg);
}

.section3_img {
    background-image: url(../images/module_examples.jpg);
}

.section3_img_flush {
    background-image: url(../images/module_examples.jpg);
}

.section4_img {
    background-image: url(../images/module_implement.jpg);
}

.section4_img_flush {
    background-image: url(../images/module_implement.jpg);
}

.section5_img {
    background-image: url(../images/module_thinking.jpg);
}

.section5_img_flush {
    background-image: url(../images/module_thinking.jpg);
}

.section6_img {
    background-image: url(../images/module_resources.jpg);
}

.section6_img_flush {
    background-image: url(../images/module_resources.jpg);
}
.section1_img h1, .section1_img_flush h1, .section2_img h1, .section2_img_flush h1, .section3_img h1, .section3_img_flush h1, .section4_img h1, .section4_img_flush h1, .section5_img h1, .section5_img_flush h1, .section6_img h1, .section6_img_flush h1 {
    font-size: 2.25em;
}
/* page styles - header/module */
/* page styles - content layouts */

.dark_page {
    background-color: #1E242B;
    color: #f1f1f1;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: -1em;
}

.dark_page h2 {
    color: #f1f1f1;
    font-size: 1.5em;
    margin-top: 0.5em;
    padding-left: 10px;
}

.dark_section {
    background-color: #1E242B;
    color: #f1f1f1;
    padding: 15px;
}

.dark_section h2 {
    color: #f1f1f1;
    font-size: 2em;
    margin-top: 0.5em;
    padding-left: 10px;
}
/* end of page styles - content layouts */
/* Start of Image Caption
--------------------*/

.caption-wrapper {
    position: relative;
    overflow: hidden;
    height: 300px;
    cursor: pointer;
    cursor: hand;
}

.caption-wrapper .image-container {
    display: block;
    position: absolute;
    width: 100%;
    height: 300px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #C6C8CA;
    /* grey light */
}

.center-vertical {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.caption-title-bg {
    position: absolute;
    top: 235px;
    width: 100%;
    background-color: #F1F1F1;
    /* grey light */
    
    height: 70px;
}

.caption-wrapper .caption-title {
    padding: 20px 30px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #1E242B;
    /* orange */
}

.caption-wrapper .caption-overlay {
    opacity: 0;
    position: absolute;
    top: 200px;
    left: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    z-index: 199;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.caption-wrapper .caption-overlay-bg {
    height: 100%;
    padding: 30px;
    background-color: #2f9183;
    color: #fff;
}

.caption-wrapper:hover .caption-overlay,
.caption-wrapper:focus .caption-overlay {
    opacity: 1;
    transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -moz-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    -o-transform: translateY(-200px);
}

.caption-overlay-icon {
    display: block;
    margin: 15px auto;
    max-width: 100%;
    height: auto;
}

.caption-overlay-heading {
    color: #fff;
    font-weight: bold;
    font-size: 24px;
    line-height: 2;
}
/* End of Image Caption */
/* Start of Active Learning Activities */

.activities {
    background-image: url(../images/learning_venn.png);
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    max-width: 580px;
    height: 538px;
    color: #1E242B;
    position: relative;
    margin-top: 10px;
}

.activities a.black_link {
    font-size: 150%;
    display: block;
    padding-top: 140px;
    padding-bottom: 150px;
    padding-left: 20px;
    text-align: center;
}
.activities a:focus,  .activities a:hover {
    color: #fff;
}
.small_venn {
    position: absolute;
    top: 220px;
    width: 300px;
    height: 300px;
}

.venn1 {
    background-color: #2f9183;
    position: absolute;
    top: 0px;
    left: -50px;
    width: 250px;
    text-align: left;
    color: #F1F1F1;
    font-weight: 400;
    font-size: 1.5em;
    padding-top: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -0.5em;
    margin-bottom: 1em;
    line-height: 1.3em;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    font-size: 1.2em;
}

.venn1:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 10px solid transparent;
    border-top-color: #2f9183;
    top: 100%;
    left: 80%;
    margin-left: -10px;
}

.large_venn {
    text-align: center;
    vertical-align: middle;
    margin: auto;
    width: 300px;
    height: 300px;
}

.venn2 {
    background-color: #D4624D;
    position: absolute;
    top: 0px;
    left: 370px;
    width: 225px;
    text-align: left;
    color: #F1F1F1;
    font-weight: 400;
    font-size: 1.5em;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.3em;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    font-size: 1.2em;
}

.venn2:after,
.venn1:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.venn2:after {
    border-color: rgba(30, 36, 43, 0);
    border-right-color: #D4624D;
    border-width: 10px;
    margin-top: -30px;
}

.venn2:before {
    border-color: rgba(30, 36, 43, 0);
    border-right-color: #D4624D;
    border-width: 10px;
    margin-top: -10px;
}

.individual_venn {
    position: absolute;
    top: 220px;
    left: 270px;
    width: 300px;
    height: 300px;
}

.venn3 {
    background-color: #2b3435;
    height: 175px;
    position: absolute;
    top: 385px;
    left: 340px;
    width: 230px;
    text-align: left;
    color: #F1F1F1;
    font-weight: 400;
    font-size: 1.5em;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.3em;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    font-size: 1.2em;
}

.venn3:after,
.venn3:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.venn3:after {
    border-color: rgba(30, 36, 43, 0);
    border-bottom-color: #2b3435;
    border-width: 10px;
    margin-left: -10px;
}

.venn3:before {
    border-color: rgba(30, 36, 43, 0);
    border-bottom-color: #2b3435;
    border-width: 10px;
    margin-left: -10px;
}
/* End of Active Learning Activities */
/* Start of Active Learning Questions */

.background {
    background-image: url(../images/questions.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #1E242B;
    height: 667px;
    width: 100%;
    max-width: 1000px;
    margin-bottom: 1em;
    position: relative;
}

.question_box {
    padding: 15px;
    width: 40%;
    background-color: #ffffff;
    opacity: 0.9;
    color: #1E242B;
    float: right;
    margin-top: 60px;
    margin-right: 20px;
}
/* End of Active Learning Questions */
/* Checkbox styles */
.checkbox {
  padding-left: 20px;
  margin-top:1em;
  margin-bottom:1em;
   }
   
  .checkbox label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 5px; }
	
    .checkbox label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid #cccccc;
      border-radius: 3px;
      background-color: #fff;
      -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
	  
    .checkbox label::after {
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      font-size: 11px;
      color: #555555; }
	  
  .checkbox input[type="checkbox"],
  .checkbox input[type="radio"] {
    opacity: 0;
    z-index: 1; }
    .checkbox input[type="checkbox"]:focus + label::before,
    .checkbox input[type="radio"]:focus + label::before {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
    .checkbox input[type="checkbox"]:checked + label::after,
    .checkbox input[type="radio"]:checked + label::after {
      font-family: "FontAwesome";
      content: "\f00c"; }
    .checkbox input[type="checkbox"]:disabled + label,
    .checkbox input[type="radio"]:disabled + label {
      opacity: 0.65; }
      .checkbox input[type="checkbox"]:disabled + label::before,
      .checkbox input[type="radio"]:disabled + label::before {
        background-color: #eeeeee;
        cursor: not-allowed; }
  .checkbox.checkbox-circle label::before {
    border-radius: 50%; }
  .checkbox.checkbox-inline {
    margin-top: 0; }

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
  background-color: #D4624D;
  border-color: #D4624D; }
.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
  color: #fff; }

.btn-info{
	background-color:#3EBFAC;
	border-color:#3EBFAC;	
}

.btn-info:hover{
	background-color:#2F9183;
	border-color:#2F9183;	
}

.btn-info:focus{
	background-color:#3EBFAC;
	border-color:#3EBFAC;		
}