/*

Color Pallete (dark to light):

		Brain Education: #4F69C6 , #B7C1E8 , #E3E7F6

		Bullying:#0095B7 ,	#A3EEFF , #DEF9FF

		Conflict Resolution:#00CC99 , #A5FFE8 ,	#CCFFF2

		Emotional Regulation: #9C51B6 ,	#DBC0E4 , #F2E9F6

		Kindness: #FD3A4A ,	#FE9BA3 , #FFE9EB

		Mindfulness: #FA5B3D , #FCAC9D , #FEDCD6

		Trim: #000000 ,	#191970 ,#FFFFFF

background: #C0C0D8 



*/



/*GLOBAL Styles*/

html {

    box-sizing: border-box;

    height: 100%;

}



body{

    font-family: 'Hind', sans-serif;

    margin: 0;

    text-align: center;

    height: 100%;

   /* background: #C0C0D8;*/

     /*background: radial-gradient(#A5FFE8,#A3EEFF,#B7C1E8, #DBC0E4,#FCAC9D,#FE9BA3);

   background: linear-gradient(45deg, #A5FFE8,#A3EEFF,#B7C1E8, #DBC0E4,#FCAC9D,#FE9BA3);

   background: linear-gradient(217deg, #A5FFE8,#A3EEFF 70.71%),

            linear-gradient(127deg, #B7C1E8, #DBC0E4 70.71%),

            linear-gradient(336deg, #FCAC9D,#FE9BA3 70.71%);*/

    display: flex;

    flex-direction: column;

    height: 100vh;

}

h1, h2, h3 {

    font-family: 'Delius', cursive;

}



a {

    color: white;

}



a:hover{

    text-decoration: none;

}





/*Middle Content */

main{

     

    justify-content: center;

    align-items: center;

    width: 100%;

    overflow: hidden;

    position: relative;

    padding-top: 95px;

    padding-bottom: 161px;

    flex-direction: column;

    height: 100vh;

    display: inline-table;

    flex:  1 0 auto;

     min-height: 100%;

  margin: 0 auto -141px;

}



/*-------------LAYOUT STYLING------------

--------------------------------------- */



/*Navigation Bar*/



.nav-inner {

    width: 100%;

    margin: 0 auto;

    padding: 0;

    vertical-align: middle;

    text-align: left;

    position: fixed;

    top: 0;

    max-height: 75px;

}



nav a {

    display: inline-block;

    text-decoration: none;

    text-transform: uppercase;

    font-weight: 700;

}



.nav-inner .logo {

        width: auto;

        height: 100%;

        max-height: 75px;

        position: inherit;

        left: 0;

        vertical-align: middle;

        float: left;

        padding-left: 10px;

        align-self:center;

    }



.nav-inner .logo a img {

        max-height: 75px;

        vertical-align: middle;

    }



img {

    max-width: 100%;

    vertical-align: middle;

}





#navigation-sticky {

    width: 100%;

    height: 75px;

    top: 0;

    padding: 0;

    margin: 0;

    position: fixed;

    z-index: 9999;

    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

    -o-transition: all 0.5s;

    transition: all 0.5s;

    vertical-align: middle;

    background-color: #028090;

}

#navigation-sticky.dark-nav {

    background-color: #fff;

    box-shadow: 0 0 10px #028090;

}



.nav-menu {

    float: right;

    height: 100%;

    max-height: inherit;

}



.topnav {

  overflow: hidden;

    float: right;

    text-transform: uppercase;

}



.topnav a {

  float: left;

  display: block;

  text-align: center;

    padding: 25px 16px;

  text-decoration: none;

  font-size: 15px;

    height: 75px;

    vertical-align: middle;

    color: #0095B7;

    font-weight: 700;

}

.topnav .icon {

  display: none;

}



.dropdown-sections {

    float: left;

    overflow: hidden;

   

}



.dropdown-sections .dropbtn {

    font-size: 15px;    

    border: none;

    outline: none;

   color: #0095B7;

/*    padding: 14px 16px;*/

    background-color: inherit;

    font-family: inherit;

    margin: 0;

     padding: 23px 16px 27px 16px;

     height: 75px;

     text-transform:inherit;

    font-weight: 700;

}



.dropdown-content {

    display: none;

    position: absolute;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

    background-color: inherit;

    height: auto;

    margin: 0;

    box-shadow: none;
    border-radius: 0;

    border-top: 2px solid;

    border-left: transparent !important;

    border-bottom: transparent !important;

    border-right: transparent !important;

    padding: 0;

    background-color: #191970;

/*    opacity: 0.7;*/

    

}



.dropdown-content a {

    float: none;

    color: #0095B7;

    padding: 5px 5px;

    text-decoration: none;

    display: block;

    text-align: left;

    height: auto;

}



.topnav a:hover, .dropdown-sections:hover  {

     background-color: #191970;

  color: white;

}



.dropdown-content a:hover {

    background-color: white;

    color: #555;

}

.show {display:block;}





/* Header and Footer

----------------*/

header, footer {

      background: #D1D7D7; /*#028090;*/

    color: #0095B7;/*#FFF;*/

     background-color: #fff;

    box-shadow: 0 0 10px #028090;

}



header {

    text-align: center;

    position: relative;

    height: auto;

}



header h1, header h2{

    color: #0095B7;

    margin: 0;

}

/* footer */

footer {

    text-align: center;

    bottom: 0;

    position:relative;

    width: 100%;

    height: 141px;

    padding-bottom: 10px;

}

.footer,

.push {

  height: 141px;

}

.contact-info a{    

    color:#0095B7;

    padding: 10px;

    display: inline-block;

    font-size: 20px

}

.content-wrap{

    padding-top: 1px;

}



/*--------INDEX PAGE ---------- */

/*Typer styling*/

.typerParagraph {

    /*If the width of the browser is less than 950 px then it will use 100%*/

    max-width: 950px;

    margin: 0 auto;

    overflow: auto;

    padding: 60px 50px;

   /* text-align: center;

    align-content: center;*/

    font-family: 'Caveat', cursive;

    font-weight: bold;

    display: inline-block;

    

}

.typer{

    background-color: white;

}



.getstartedbtn{

    padding-bottom: 30px;

}





/*----------STYLING FOR SCRENN SIZES LESS THAN 600px------------*/



@media only screen and (max-width: 600px) {

  .topnav a, .dropdown-sections .dropbtn {

    display: none;

      width: 150px;

          height: auto;

    padding: 5px;

  }

  .topnav a.icon {

    float: right;

    display: inline-block;

      text-align: center;

       height: 75px;

      padding: 25px 16px;

  }

    .dropdown-content{

        opacity: 1;

        min-width: 150px;

    }

    .dropdown-content a{

        background-color: #42428A;

        

    }

    

  .topnav.responsive {position: relative;}

  .topnav.responsive .icon {

    right: 0;

    top: 0;

      height: 75px;

      padding: 25px 16px;

  }

  .topnav.responsive a {

    float: none;

    display: block;

    text-align: center;

  }

    .topnav.responsive a:not(.icon),.topnav.responsive .dropbtn {

    background-color: #191970;

  }

  .topnav.responsive .dropdown-sections {float: none;}

  .topnav.responsive .dropdown-content {position: relative;}

  .topnav.responsive .dropdown-sections .dropbtn {

    display: block;

    width: 100%;

    text-align: center;

  }

    .topnav.responsive a:not(.icon):hover, .dropdown-sections:hover{

    background-color: white;

    color: #555;

}

    .logo{

        padding: 5px;

    }

    .site_logo{

        width: 150px;

        height: auto;

    }

 .col-md-4, .col-sm-6, .col-xs-6, .col-xl-2{

    height: 200px;

}

}





/*-----------------------

Home page style

------------------------*/

.homecontentwrap{

    background:#f1f1f1; /*radial-gradient(#A5FFE8,#A3EEFF,#B7C1E8, #DBC0E4,#FCAC9D,#FE9BA3);*/

}

.option-item-link:hover {

    text-decoration: none

}



.option-item {

    display: inline-block;

    text-align: center;

    width: 250px;

/*    height: 250px;*/

    max-width: 250px;

    margin: 10px 0px;

    position: relative;

}



.option-item:hover .option-item__img {

    animation: jump 1s infinite;

}



.option-item:hover .option-item__name {

    background-color: transparent;

    color: #fff;

    transition: background-color .5s linear;

    -webkit-transition: background-color .5s linear;

    -moz-transition: background-color .5s linear;

    -o-transition: background-color .5s linear;

    -ms-transition: background-color .5s linear

}



.option-item:hover .option-item__name.bullying {

    background-color: #0095B7;

}



.option-item:hover .option-item__name.brain-education {

    background-color: #4F69C6;

}



.option-item:hover .option-item__name.conflict-res {

    background-color: #00CC99;

}



.option-item:hover .option-item__name.emotional-reg {

    background-color: #9C51B6;

}

.option-item:hover .option-item__name.kindness {

    background-color: #FD3A4A;

}



.option-item:hover .option-item__name.mindfulness {

    background-color: #FA5B3D;

}



.option-item .option-item__img {

    width: 160px;

    height: auto;

    position: absolute;

    top: 0;

    left: 50px;

    z-index: 1;

    

}



.option-item .option-item__shadow {

    position: absolute;

    z-index: 0;

    top: 150px;

    left: 85px;

    width: 80px;

    height: 20px;

    background: #E3E7F6;

    opacity: 0.7;

    border-radius: 50%;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%

}

div.option-item__shadow.brain-ed-shadow{

    background: #E3E7F6;

}

div.option-item__shadow.bullying-shadow{

    background: #DEF9FF;

}

div.option-item__shadow.conflict-res-shadow{

    background: #CCFFF2;

}

div.option-item__shadow.emotional-reg-shadow{

    background: #F2E9F6;

}

div.option-item__shadow.kindness-shadow{

    background: #FFE9EB;

}

div.option-item__shadow.mindfulness-shadow{

    background: #FEDCD6;

}



.option-item .option-item__name {

    font-size: 22px;

    line-height: 21px;

    color: #18444e;

    text-align: center;

    margin-top: 180px;

    padding: 5px 15px;

    border-radius: 20px;

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    display: inline-block;

    font-family: 'Delius', cursive;

}

.row{

        margin-right: 0;

        margin-left: 0;

    }



@media (max-width: 767px) {

    .option-item {

        width:160px;

/*        height: 300px*/

    }

    .option-item .option-item__img {

        width:80%;

        height: auto;

        left: 10%

    }

     .option-item .option-item__name {

    font-size: 17px;

        margin-top: 130px;

        padding-top: 0px;

    }

}



@keyframes jump {

    0% {

        top: 0

    }



    50% {

        top: 20px

    }



    100% {

        top: 0

    }

}







/*-----------------------------

Lesson Landing pages style

---------------------------*/

.lesson-title{

     display: inline-block;

    border-radius: 12px;

    border: solid;

    padding: 10px;

    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}



.lessonlanding-brained{

   background:#E3E7F6; /* radial-gradient(#E3E7F6,#B7C1E8 ,#4F69C6 );*/

}



.brain-ed-title{

    background-color: #FFFFFF;

    color: #000000;

}



.brain-ed-lessons-title{

    background-color: #4f69c6;

    color: #e3e7f6;

}



.brain-ed-content{   

    background-color: #B7C1E8;

    color: #000000;

}



.brain-ed-button {

    background: linear-gradient(#8b9cda, #4f69c6);

    border: solid 1px #4f69c6;

    box-shadow: inset 1px 1px #4f69c6, 2px 2px 5px #e3e6f5;

/*    text-shadow: 1px 1px #FFFFFF;*/

}



.brain-ed-button:hover {

    box-shadow: inset 1px 1px #8b9cda, 2px 2px 10px #4f69c6;

    color: #FFFFFF;

}



.brain-ed-download-button {

    box-shadow: 5px 5px 10px #B7C1E8;

}



.brain-lesson-border {

    border: solid 5px #4f69c6;

}



.lessonlanding-bullying{

   background:#def9ff; 

}



.bullying-title{   

    background-color: #0095B7;

    color: #DEF9FF;

}



.bullying-ed-title {

    background-color: #FFFFFF;

}



.bullying-ed-content{

    background-color: #a3eeff;

}



.bullying-ed-button{

    background: linear-gradient(#0095b6, #00bbe6);

    border: solid 1px #00bbe6;

    box-shadow: inset 1px 1px #00bbe6, 2px 2px 5px #0095b6;

}



.bullying-ed-button:hover {

    box-shadow: inset 1px 1px #0095b6, 2px 2px 10px #00bbe6;

    color: #FFFFFF;

}



.bullying-download-button {

    box-shadow: 5px 5px 10px #0095b6;

}



.bullying-lesson-border {

    border: solid 5px #0095b6;

}



.lessonlanding-conflictres{

   background:#CCFFF2; 

}



.conflictres-title{   

    background-color: #00CC99;

    color: #CCFFF2;

}



.conflictres-ed-title{

    background-color: #FFFFFF;

}



.conflictres-ed-content{

    background-color: #a5ffe8;

}



.conflictres-ed-button{

    background: linear-gradient(#00ffbf, #00cc99);

    border: solid 1px #00ffbf;

    box-shadow: inset 1px 1px #00cc99, 2px 2px 5px #00ffbf;

}



.conflictres-ed-button:hover {

    box-shadow: inset 1px 1px #00ffbf, 2px 2px 10px #00cc99;

    color: #FFFFFF;

}



.conflictres-download-button {

    box-shadow: 5px 5px 10px #00cc99;

}



.conflictres-lesson-border {

    border: solid 5px #00cc99;

}



.lessonlanding-emotionreg{

   background:#F2E9F6; 

}



.emotionreg-title{   

    background-color: #9C51B6;

    color: #F2E9F6;

}



.emotionreg-ed-title {

    background-color: #FFFFFF;

}



.emotionreg-ed-content{

    background-color: #dbc0e4;

}



.lessonlanding-kindness{

   background:#FFE9EB; 

}



.kindness-title{   

    background-color: #FD3A4A;

    color: #FFE9EB;

}



.kindness-ed-content{

    background-color: #fe9ba3;

}



.kindness-ed-button{

    background: linear-gradient(#fd6874, #fd3a4a);

    border: solid 1px #fd6874;

    box-shadow: inset 1px 1px #fd3a4a, 2px 2px 5px #fd6874;

}



.kindness-ed-button:hover {

    box-shadow: inset 1px 1px #fd6874, 2px 2px 10px #fd3a4a;

    color: #FFFFFF;

}



.kindness-download-button {

    box-shadow: 5px 5px 10px #fd3a4a;
}



.kindness-lesson-border {

    border: solid 5px #fd3a4a;

}

.lessonlanding-mindfulness{

   background:#fedcd6; 

}



.mindfulness-title{   

    background-color: #FFFFFF;

    color: #000000;

}



.mindfulness-lessons-title{

     background-color: #FA5B3D;
    color: #FEDCD6;

}



.mindfulness-content {

    background-color: #fcac9d;

}



.mindfulness-ed-button {

    background: linear-gradient(#ff8068, #FA5B3D);

    box-shadow: inset 1px 1px #ffc0b5, 2px 2px 5px #b12e15;*/

    color: #FEDCD6;

    text-shadow: 1px 1px #b12e15;

    border: solid 1px #FA5B3D;

}


.mindfulness-lesson-border {

   border: solid 5px #FA5B3D;
}


.mindfulness-download-button {

    box-shadow: 5px 5px 10px #FA5B3D;
}


.lesson-button:hover {

    color: #FEDCD6;

    box-shadow: inset 1px 1px #ffc0b5, 2px 2px 10px #b12e15 ;

}



.back-arrow {

	display: block;

	text-align: left;

	margin-left: 10px;

}



.back-arrow a {

	font-size: 1.8em;

	color: #000;

}



.back-arrow span {

	font-size: .8em;

}





/*---Custom header and footer for lesson pages------------ */

/*Brain Education*/

#navigation-sticky.brained-header-footer,.brained-header-footer{   

    box-shadow: 0 0 10px #4F69C6;

    color: #4F69C6 !important;

}

.brained-header a,.brained-header .dropdown-sections .dropbtn,.brained-footer a{

     color: #4F69C6 !important;

}

.brained-header .dropdown-sections .dropdown-content{

    background-color: #E3E7F6 !important;

}



.brained-header a:hover, .brained-header .dropdown-sections:hover,.brained-header .dropdown-sections .dropbtn:hover  {

     background-color: #4F69C6 !important;

  color: #E3E7F6 !important;

}



/*Bullying*/

#navigation-sticky.bullying-header-footer,.bullying-header-footer{   

    box-shadow: 0 0 10px #0095B7;

    color: #0095B7 !important;

}

.bullying-header a,.bullying-header .dropdown-sections .dropbtn,.bullying-footer a{

     color: #0095B7 !important;

}

.bullying-header .dropdown-sections .dropdown-content{

    background-color: #DEF9FF !important;

}



.bullying-header a:hover, .bullying-header .dropdown-sections:hover,.bullying-header .dropdown-sections .dropbtn:hover  {

     background-color: #0095B7 !important;

  color: #DEF9FF !important;

}



/*Conflict Resolution*/

#navigation-sticky.conflictres-header-footer,.conflictres-header-footer{   

    box-shadow: 0 0 10px #00CC99;

    color: #00CC99 !important;

}

.conflictres-header a,.conflictres-header .dropdown-sections .dropbtn,.conflictres-footer a{

     color: #00CC99 !important;

}

.conflictres-header .dropdown-sections .dropdown-content{

    background-color: #CCFFF2 !important;

}



.conflictres-header a:hover, .conflictres-header .dropdown-sections:hover,.conflictres-header .dropdown-sections .dropbtn:hover  {

     background-color: #00CC99 !important;

  color: #CCFFF2 !important;

}



/*Emotional Regulation*/

#navigation-sticky.emotionreg-header-footer,.emotionreg-header-footer{   

    box-shadow: 0 0 10px #9C51B6;

    color: #9C51B6 !important;

}

.emotionreg-header a,.emotionreg-header .dropdown-sections .dropbtn,.emotionreg-footer a{

     color: #9C51B6 !important;

}

.emotionreg-header .dropdown-sections .dropdown-content{

    background-color: #F2E9F6 !important;

}



.emotionreg-header a:hover, .emotionreg-header .dropdown-sections:hover,.emotionreg-header .dropdown-sections .dropbtn:hover  {

     background-color: #9C51B6 !important;

  color: #F2E9F6 !important;

}



/*Kindness*/

#navigation-sticky.kindness-header-footer,.kindness-header-footer{   

    box-shadow: 0 0 10px #FD3A4A;

    color: #FD3A4A !important;

}

.kindness-header a,.kindness-header .dropdown-sections .dropbtn,.kindness-footer a{

     color: #FD3A4A !important;

}

.kindness-header .dropdown-sections .dropdown-content{

    background-color: #FFE9EB !important;

}



.kindness-header a:hover, .kindness-header .dropdown-sections:hover,.kindness-header .dropdown-sections .dropbtn:hover  {

     background-color: #FD3A4A !important;

  color: #FFE9EB !important;

}



/*mindfulness*/

#navigation-sticky.mindfulness-header-footer,.mindfulness-header-footer{   

    box-shadow: 0 0 10px #FA5B3D;

    color: #FA5B3D !important;

}

.mindfulness-header a,.mindfulness-header .dropdown-sections .dropbtn,.mindfulness-footer a{

     color: #FA5B3D !important;

}

.mindfulness-header .dropdown-sections .dropdown-content{

    background-color: #FEDCD6 !important;

}



.mindfulness-header a:hover, .mindfulness-header .dropdown-sections:hover,.mindfulness-header .dropdown-sections .dropbtn:hover  {

     background-color: #FA5B3D !important;

  color: #FEDCD6 !important;

}