/*
Theme Name: Education Positive
Theme URI: http://hhmedia.fr
Description: Theme created for Education Positive.
Version: 1.0
Author: HHMedia
Author URI: http://hhmedia.fr

*/


/* Font styles
-------------------------------------------------- */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,700,700italic,600italic,800,800italic);

body {
    position: relative;
    overflow-x: hidden;
    font-family: 'Open Sans', sans-serif;
    background-color: #FFF;
}
body,html { height: 100%;}
.nav .open > a, 
.nav .open > a:hover, 
.nav .open > a:focus {background-color: transparent;}



h1.home, .title-home {
    font-size: 40px;
    font-weight: lighter;
    color: #394042;
    margin-top: 0;
    margin-bottom: 60px;

}
h1.page {
    font-size: 25px;
    font-weight:  600;
    color: #000;
    margin-top: 10px;
    text-transform: uppercase;
}
h2 {
    font-family: 'Open Sans', sans-serif; 
    font-weight: 600;
    font-size: 18px;
    color: #000;
    margin: 0;
    text-transform: uppercase;
    padding-top: 20px;
    padding-bottom: 15px;
}

h2.home {
    font-family: 'Open Sans', sans-serif; 
    font-weight: 600;
    font-size: 18px;
    color: #000;
    margin: 0;
    text-transform: uppercase;
    padding-top: 10px;
    padding-bottom: 0;
}

footer {
  height: 100px;
}
#page-content-wrapper {
    width: 100%;
    padding-top: 70px;
}

.content {
  font-size: 22px;
  line-height: 30px;
  font-weight: normal;
  color: #394042;
  padding-top: 10px;
}
.small-separator {
  width: 6%;
  border: 1px solid #394042;
}

p.sub_title {
  font-size: 18px;
  color: #98a2a1;
  margin-top: 5px;
  margin-bottom: 30px;
}


/* Home page style*/

.thumbnail-themes {
  width: 100%;
  display: table;
  height: 150px;
  background-color: #394042;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  border: none;
}

a.thumbnail-themes:focus, a.thumbnail-themes:hover {
  color: inherit;
  text-decoration: none;
  border-color: transparent;
  background: #FFF;
}
.thumbnail-title {
  text-align: center;
  font-size: 20px;
  line-height: 20px;
  color: #FFF;
  display: table-cell;
  vertical-align: middle;
  text-transform: uppercase;
}

 
/* General style
-------------------------------------------------- */
.margin-top-10 {
  margin-top: 10px;
}
.margin-top-20 {
  margin-top: 20px;
}
.margin-top-30 {
  margin-top: 20px;
}
.margin-top-50 {
  margin-top: 50px;
}
.margin-top-70 {
  margin-top: 70px;
}
.margin-bottom-25 {
  margin-bottom: 25px;
}
/* Menu styles
-------------------------------------------------- */

/* Footer styles
-------------------------------------------------- */
/* Thèmes pages
-------------------------------------------------- */
.subtitleTheme, .subtitleTheme > a  {
  font-size: 10px;
  font-weight: 600;
  color: #394042;
  line-height: 10px;
  margin-top: 10px;
  text-transform: uppercase;
}
h2.themeTitle {
  font-size: 30px;
  font-weight: 600;
  line-height: 30px;
  color: #8981b5;
  text-transform: uppercase;
  margin: 0;
  padding-bottom: 0;
  padding-top: 10px;
}

.content.themePage {
  padding-top: 0;
}


.circleWrapper {
  width: 20%;
}


.circle-text {
    width:100%;
}
.circle-text:after {
    content: "";
    display: block;
    width: 100%;
    height:0;
    padding-bottom: 100%;
    background: #8981b5; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
}
.circle-text div {
    float:left;
    width:100%;
    height: auto; 
    padding-top:50%;
    line-height:1em;
    margin-top:-0.5em;
    text-align:center;
    color:#FFF;
    font-weight: 600;
    font-size: 5em;
}

.circle-text-bottom {
  width: 100%;
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #8981b5;
  text-transform: uppercase;
  text-align: center;
  margin-top: 15px;
}

.circle-text:hover:after {
  background: #FFF;
}
/*.circle-text div:hover {
  color: #8981b5;
}*/

h3.exercicesTitle {
  font-size: 20px;
  line-height: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #8981b5;
  text-transform: uppercase;
  margin: 0;
  margin-top: 10px;
}

.content.exercicesPage {
  font-size: 18px;
  color: #000;
  line-height: 22px;
}

.content.exercicesPage p {
  padding-top: 18px;
}
.content.exercicesPage ul>li {
  padding-top: 10px ;
}


/* Responsive */
@media (min-width: 768px) {
  .navbar-toggle {
    display: block;
  }
  .navbar-brand {
    display: none;
  }
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;
  }
  .navbar-default .navbar-toggle {
    border-color: #394042;
    top: 60px;
  }
  .navbar-toggle>.menuTitle {
    font-size: 7px;
    font-weight: 700;
    color: #FFF;
    text-transform: uppercase;
    margin-top: 5px;
  }
  .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
  }
  .icon-close {
    background: url('assets/img/close.png');
    background-size: cover;
    width: 22px;
    height: 22px;
    margin-left: 3px;
  }
  #Menu {
    margin-top: 30px;
    width: 100%;
    position: relative;
    height: auto;
    float: left;
  }

  .menuTitleTheme>a {
    font-size: 20px;
    color: #FFF;
    text-transform: uppercase;
    padding: 10px 15px 10px 40px;    
  }
  .menuTitleTheme>a:hover {
    text-decoration: none;
  }
  #wrapper {
    height: 100%;
      padding-left: 70px; 
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  #wrapper.toggled {
      padding-left: 350px;
  }
  #wrapper.toggled #sidebar-wrapper {
      width: 350px;
  }
  #wrapper.toggled #page-content-wrapper {
      position: absolute;
      margin-right: -350px;
  }
  #sidebar-wrapper {
      z-index: 1000;
      left: 350px;
      width: 70px;
      height:100%;
      top: 0;
      bottom: 0;
      margin-left: -350px;
      overflow-y: auto;
      overflow-x: hidden;
      background: #394042;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;

  }

  #sidebar-wrapper::-webkit-scrollbar {
    display: none;
  }
  .sidebar-nav {
      /*position: absolute;*/
      width: 350px;
      margin: 0;
      padding: 0;
      list-style: none;
  }

  .sidebar-nav li {
      position: relative; 
      line-height: 15px;
      display: inline-block;
      width: 100%;
  }
  .sidebar-nav .dropdown-menu li {
      line-height: 15px;
  }
  .sidebar-nav .dropdown-menu li a {
      display: block;
      color: #FFF;
      font-size: 15px;
      line-height : 15px;
      font-weight: 400;
      padding: 0px 0px 12px 40px;
      text-transform: none;
  }
  .sidebar-nav .dropdown-menu li a:first-letter {
    text-transform: uppercase;
  }
  .sidebar-nav .dropdown-menu li:hover,
  .sidebar-nav .dropdown-menu li:active,
  .sidebar-nav .dropdown-menu li:focus,
  .sidebar-nav .dropdown-menu li a:hover,
  .sidebar-nav .dropdown-menu li a:active,
  .sidebar-nav .dropdown-menu i a:focus
  {
      text-decoration: underline;
  }

  .sidebar-nav li:before {
      -webkit-transition: width .2s ease-in;
        -moz-transition:  width .2s ease-in;
         -ms-transition:  width .2s ease-in;
              transition: width .2s ease-in;

  }

  .sidebar-nav li:hover:before,
  .sidebar-nav li.open:hover:before {
      width: 100%;
      -webkit-transition: width .2s ease-in;
        -moz-transition:  width .2s ease-in;
         -ms-transition:  width .2s ease-in;
              transition: width .2s ease-in;

  }

  .sidebar-nav li a {
      display: block;
      color: #FFF;
      text-decoration: none;
      padding: 10px 15px 10px 40px;   
      font-size: 15px;
      font-weight: 600;
      text-transform: uppercase; 
  }

  .sidebar-nav li a:hover,
  .sidebar-nav li a:active,
  .sidebar-nav li a:focus,
  .sidebar-nav li.open a:hover,
  .sidebar-nav li.open a:active,
  .sidebar-nav li.open a:focus{
      color: #fff;
      text-decoration: none;
      background-color: transparent;
  }


  .sidebar-nav .dropdown-menu {
      position: relative;
      width: 100%;
      padding: 0;
      margin: 0;
      border-radius: 0;
      border: none;
      background-color: transparent;
      box-shadow: none;
  }
  li.dropdown.dropdownThemes.open {
    color: #FFF;
  }


  ul#menu-menu-principal {
    position: relative;
    top: 50px;
    list-style: none;
  }
  ul#menu-menu-principal > li {
    padding-bottom: 20px;
  }

  ul#menu-menu-principal > li a {
    font-size: 15px;
    font-weight: 600;
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
  }

  .menu_footer {
    position: relative;
    top: 50px;
    padding-left: 40px;
    font-size: 14px;
    color: #98a2a1;
  }

  ul#menu-menu-footer {
    padding: 0;
    list-style: none;
  }

  ul#menu-menu-footer > li a {
    font-size: 14px;
    color: #98a2a1;
    text-decoration: none;
  }
  ul#menu-menu-footer > li a:hover {
    text-decoration: underline;
  }

}

@media(max-width: 768px) {


  /* Content site*/
  h1.home, .title-home {
    font-size:  35px;
    margin-bottom: 20px;
  }
  .content {
    font-size: 18px;
    line-height: 24px;
    text-align: justify;
    padding-top: 0px; 
  }
  .small-separator {
    width: 15%;
  }
  .small-separator.margin-top-70 {
    margin-top: 20px;
  }
  p.sub_title, h2.themeTitle, .content.margin-top-20.themePage {
    margin-top: 0;
  }
  .circleWrapper {
    width: 50%;
  }
  .circle-text-bottom  {
    margin-bottom: 15px;
  }
  .thumbnail-title {
    font-size: 18px;
    line-height: 18px;
  }
  /* Menu fixed top*/
  #page-content-wrapper {
    padding-top: 50px;
  }

  .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color: #FFF;
  }
  .navbar-default .navbar-brand, .navbar-brand:hover{
    color: #FFF;
  }
  
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;
  }
  li.dropdown.dropdownThemes {
    text-transform: uppercase;
  }
  .dropdown-menu li {
      line-height: 15px;
  }
  .dropdown-menu li a {
      display: block;
      /*color: #FFF;*/
      text-decoration: none; 
      font-size: 15px;
      font-weight: 400;
      padding: 0px 0px 12px 40px;
      text-transform: lowercase;
  }
  .dropdown-menu li a:first-letter {
    text-transform: uppercase;
  }

  .menuTitleTheme>a {
    font-size: 20px;
    color: #FFF;
    text-transform: uppercase;
    padding-left: 15px;
    line-height: 20px;
  }
   .menuTitleTheme>a:hover {
    text-decoration: none;
  }
  .icon-close {
    background: url('assets/img/close.png');
    background-size: cover;
    width: 22px;
    height: 22px;
    margin-left: 3px;
  }
  .menuTitle {
    display: none;
  }
  div#wrapper.toggled>nav#sidebar-wrapper {
    height: 100%;
    overflow-x:scroll;
  }
  nav#sidebar-wrapper {
    background-color: #394042;
  }
  div#Menu {
    float: left;
    width: 100%;
  }
  ul.nav.sidebar-nav {
    margin-top: 15px;
  }
  .navbar-default .navbar-toggle {
    border-color: #394042;
    background-color: #394042;
  }
  .sidebar-nav .dropdown-menu {
      position: relative;
      width: 100%;
      padding: 0;
      margin: 0;
      border-radius: 0;
      border: none;
      background-color: transparent;
      box-shadow: none;
  }
  li.dropdown.dropdownThemes.open {
    color: #FFF;
  }

  .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #394042;
  }

  ul#menu-menu-principal {
      margin-top: 20px;
      list-style: none;
      padding-left: 15px;
  }
  ul#menu-menu-principal > li {
    padding-bottom: 20px;
  }

  ul#menu-menu-principal > li a {
    font-size: 15px;
    font-weight: 600;
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
  }

  .menu_footer {
    padding-left: 15px;
    font-size: 14px;
    color: #98a2a1;
  }

  ul#menu-menu-footer {
    padding: 0;
    list-style: none;
  }

  ul#menu-menu-footer > li a {
    font-size: 14px;
    color: #98a2a1;
    text-decoration: none;
  }
  ul#menu-menu-footer > li a:hover {
    text-decoration: underline;
  }
}