/*=============================================================
    Authour URI: www.binarytheme.com
    License: Commons Attribution 3.0

    http://creativecommons.org/licenses/by/3.0/

    100% Free To use For Personal And Commercial Use.
    IN EXCHANGE JUST GIVE US CREDITS AND TELL YOUR FRIENDS ABOUT US
   
    ========================================================  */

/* =============================================================
   GENERAL STYLES
 ============================================================ */

body {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size:20px;
}

h1,h2,h4 {
    font-family: 'Open Sans', sans-serif;
}
.just-txt-div {
    padding-bottom:30px;
    padding-top:30px;
}
    .just-txt-div p {
        padding-top:10px;
    }
.head-line {
    font-weight:500;
    text-align:center;
    text-transform:uppercase;
    font-size:30px;
    font-family: 'Lobster', cursive;
}
.pad-set {
    padding-top:50px;
     padding-bottom:50px;
}
.pad-top {
     padding-top:50px;
}
/* =============================================================
   NAVBAR & MENU STYLES
 ============================================================ */

.right-div {
    float: right; 
    padding: 20px;
    font-size:20px;
}
#menu-top a {
    color:#000;
    text-decoration:none;
    font-weight:500;
    padding: 25px 15px 25px 15px;
    text-transform:uppercase;
    font-size:16px;
    font-weight:900;

}

/* Grisforssic */



/* endGrisforssic */
.menu-section {
    background-color: #f7f7f7;
    border-bottom:5px solid #CECECE;
    width:100%
}
.menu-top-active {
    background-color:#eeeeee;
}
.navbar-inverse {
background-color: #FFF;
border-color: rgba(155, 153, 153, 0.23);

}

.navbar {
    min-height: 70px;
    margin-bottom: 0px;
   
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color:transparent;
}
.navbar-toggle {
background-color: black;
border: 1px solid black;
}


/* =============================================================
   SLIDESHOW / CAROUSEL STYLES
 ============================================================ */

#carousel-div {
    border:3px solid #e1e1e1;
}
.carousel-caption {
    top:50px;
}
    .carousel-caption h1 {
        text-align:center;
        font-size:30px;
        font-weight:900;
        text-transform:uppercase;
        background-color:rgba(0, 0, 0, 0.65);
        max-width:440px;
        padding:15px 25px;
        


    }
     .carousel-caption h2 {
        text-align:center;
        font-size:25px;
        font-weight:900;
        text-transform:uppercase;
        background-color:rgba(0, 0, 0, 0.65);
        max-width:340px;
        padding:15px 25px;
        


    }
 /* =============================================================
    PAGE STYLES
 ============================================================ */
.below-slideshow {
    color:#fff;
    background:#01a2a6;
    padding-bottom:50px;
    
}
    .below-slideshow i {
        padding-bottom:15px;
    }
    .below-slideshow .txt-block {
        
        padding-top:50px;
    }
     .below-slideshow h4 {
        font-weight:800;
        font-size:20px;
    }
    .below-slideshow p {
        padding-right:30px;
    }
.tag-home {
    padding-top:50px;
    padding-bottom:30px;
    font-size:30px;
    text-align:center;
    line-height:45px
}

.parallax-like {
margin-top: 20px;
margin-bottom: 20px;
background: url(../img/par.jpg) no-repeat center center;
padding: 0;
-webkit-background-size: cover;
background-size: cover;
color: #fff;
background-attachment: fixed;
}
    .parallax-like .overlay {
        min-height:200px;
        background: rgba(15, 15, 15, 0.66);
        font-size:50px;
        
        
    }
    .vedio-style {
border: 0px;
width: 100%;
min-height: 300px;
}
.just-sec {
    padding-top:50px;
    padding-bottom:70px;
}
.set-div {
    border:1px solid #01a2a6;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}
.footer-sec {
    margin-top:50px;
    padding-top:30px;
    color:#fff;
    background:#091a32;
    padding-bottom:20px;
    
}
.flexslider {
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,0);
     -moz-box-shadow: 0 0px 0px rgba(0,0,0,0);
    -o-box-shadow: 0 0px 0px rgba(0,0,0,0);
    box-shadow: 0 0px 0px rgba(0,0,0,0);
}
.social-div a,a:hover{
    color:#fff;
    text-decoration:none;
}
.set-about-img {
    border:10px double #01a2a6;
     max-height:200px;
}
/*==========================================
   GALLERY/ PORTFOLIO STYLES
    =====================================================*/

#port-folio {
    padding-top: 80px; 
    padding-bottom: 100px; 
}
.portfolio-item {
    border:15px double #01a2a6;
    margin:3px;
}
    .portfolio-item p {
        padding:30px;
        color:#fff;
    }

.portfolio-item .overlay {
   position: absolute;
  top: 0;
  left: 0;
    width: 100%;
  height: 100%;
  opacity: 0;
  background-color: #CECECE;
  text-align: center;
  vertical-align: middle;
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  -o-transition: opacity 300ms;
  transition: opacity 300ms;
  cursor:pointer;
  border-radius: 5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
 
}
.portfolio-item .overlay .preview {
  position: relative;
  top: 50%;
  display: inline-block;
  margin-top: -20px;
}
.portfolio-item:hover .overlay {
  opacity: 1;
  zoom: 1;
	filter: alpha(opacity=100);
}
.overlay a,overlay a:hover{
    color:#fff;
    text-decoration:none;
}
#port-folio .overlay p > span {
    display:block;
    padding-bottom:20px;
}

/*==========================================
   GALLERY/ PORTFOLIO FILTER STYLES
    =====================================================*/
ul#filters {
	padding: 0px;
}
#filters {
	margin: 3% 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
	#filters li {
		display: -webkit-inline-box;
	}
	#filters li span {
		display: block;
		padding: 5px 4px;
		text-decoration: none;
		color: #d51111;
		cursor: pointer;
		font-size: 18px;
	}
 	#port-folio .portfolio-item {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		width: 100%;		
        opacity:.2;
		float:left;
		overflow:hidden;
	}
	

/* =============================================================
  MEDIA QUERIES 
 ============================================================ */


@media (min-width: 740px) and (max-width: 1040px) {
    .carousel-caption h2 {
        display: none;
    }
}

@media (min-width: 100px) and (max-width: 740px) {
    .carousel-caption h1 {
        display: none;
    }

    .carousel-caption h2 {
        display: none;
    }
}
.below-slideshow{
  background-color: white;
  
}
#carousel-div{
  border:none;
}
.tag-home{
  color:#10294;e
}

.navbar-forssic {
  background-color: #304d6f;
  color: white;
}

.navbar-brand img{
	margin-top: -5px !important;
}


#menu-top .logo-j{
    padding: 0 15px 0 15px;
}
.logo-j img{
  
}

.forssic-block1{
  background-color: #091a32;
}
.forssic-block2{
  background-color: #1b334f;
}
.forssic-block3{
  background-color: #154182;
}
.forssic-block4{
  background-color: #95B3D7;
}
.below-slideshow .row{
    overflow: hidden; 
}
.below-slideshow [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

.aforssic-up .row{
    overflow: hidden; 
}
.aforssic-up [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;

}


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  .below-slideshow .container{
    padding-left:30px;
    padding-right: 30px; 
  }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  .below-slideshow .container{
    padding-left:0px;
    padding-right: 6px; 
  }
}
.below-slideshow h4{
  
}
.below-slideshow p{
  text-align: justify;
}
.txt-block > a {
  color:white;
  text-decoration: none;
}
.txt-block > a:hover{
  color:#D0D0D0;
}
 .container-cat{

      margin:0 auto;
      /*background-color: #EDF1F4;*/
    }
    .container-cat > .col-cat{
      padding:5px;
    }
    .col-cat img{
      width:100%;
    }

#cat {
      float:left;
      text-align: center;
      background-color: #fff;
      vertical-align: middle;
      background-size: auto 50px;
}

    #cat img {
      margin-top: -30px;
      position: relative;
      z-index: 1;
    }

    #cat img:hover {
      opacity: 0.5;
    }

    #cat a {
      color: #fff;
      font-weight: bold;
      font-family: 'Cambay', sans-serif;
      font-size: 23px;
      text-decoration: none;
    }

    .nomcat {
      height: 30px;
      position: relative;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.5);
      line-height: 20px;
      float: top;
      padding-top: 10px;
      pointer-events: none;
    }
    .container-sscat{
        padding:1% 5%;
        /*background-color: rgba(230,230,230,0.95);*/
        /*background-color: #CFDAE0;*/

    }

.souscat {
  position:relative;
  width: 96%;
  margin-bottom:4%;
  transition: 0.3s;
  vertical-align: middle;
  background-color: #D7D7D7;
  text-align: center;
  margin-right: 0;
}

.souscat img{
  z-index: 1;
  display: block;
  width:100%;
  transition: 0.3s;
}

.souscat img:hover {
  opacity: 0.5;
}

.nomsouscat {
  position: absolute;
  top:30%;
  right:0;
  left:0;
  font-size: 1em;
  z-index: 2;
  color: #fff;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;

  padding-top: 0px;
  pointer-events: none;
}


.idsujet {
  height: 30px;
  border-width: 1px ;
  padding: 10px 0px 0px;
  transition: 0.3s;
  vertical-align: middle;
  background-color: #E0E7EB;
  margin:1px auto;
}

.idsujet img {
  display: inline-block;
  vertical-align: middle;
  margin-top: -40px;
  height: 25px;
}

.idsujet i {
  color: #c6c6c6;
}
  
.idsujet a {
  color: #fff;
  padding-left: 30px;
  font-weight: bold;
  font-weight: bold;
}


.idsujet:hover {
  background-color: #51a9cf;
  height: 30px;
  /* height: 50px; */
}


.sujet {
  font-weight: bold;
  color:#304D6F;

}
.theme{
  font-weight: bold;
  color:#304D6F;
  font-size: 0.8em;
}
.col-xs-15,
    .col-sm-15,
    .col-md-15,
    .col-lg-15 {
        position: relative;


    }
    .col-xs-15 {
        width: 20%;
        float: left;
    }

@media (min-width: 768px) {
    .col-sm-15 {
            width: 20%;
            float: left;
        }
    }
    @media (min-width: 992px) {
        .col-md-15 {
            width: 20%;
            float: left;
        }

    }
    @media all and (max-device-width: 480px){
        .col-md-15 {
          width: 100%;
        }
    }
    @media (min-width: 1200px) {
        .col-lg-15 {
            width: 20%;
            float: left;
        }
    }
    .suj{
      list-style-type:none;
      padding-left:1em;
    }
    .suj a{
      text-decoration: none;
      color:#1A2856;
      font-weight: bold;
      border-radius: ;
    }
    .suj > a: hover{
      color:#1A2856;
      font-size:1.1em;
    }
    .suj:hover{
      background-color: #E0E7EB;
      
      transition: 0.2s;
      border-radius: 30px;
    }
    .suj:active{
      background-color: #E0E7EB;
      font-size:1.05em;
      transition: 0.1s;
      border-radius: 30px;
    }
    .col-sscat{
              

    }

  #formleft {
    font-size: 1.1em;
    height: auto;
    overflow: hidden;
    display: block;
    padding: 0px 2% 0px 11%;
    padding-top:1em;
}

#formright {
    font-size: 1.1em;
    display: block;
    vertical-align: top;
    padding: 0px 11% 0px 2%;
}

#formrightm {
  width: 40%;
  display: inline-block;
  vertical-align: top;
  padding: 0px 40px 0px 40px;
}

.sujet p{
}
.precis p {
  text-align: justify;
}
.container-inscription{
  background-color: #E0E7EB;
  margin:0;
  width:100%;
}
.container-inscription h3{
  text-align: center; 
}
.nolink:hover{
  color:#154182;
}
.forssic-container{

}
.forssic-container p{
  text-align: justify;
}
.forssic-container h2{
  text-align:center;text-decoration: underline; margin:1em 0;
}
.forssic-container a:hover{
  color:#154182;
}
.card{
      border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}
.forssic-sscat{

  border: 1px solid #304D6F;

  text-align: center;
  display: block;
  margin:1%;
  width:98%;
  font-weight: bold;
  font-size: 1.1em;
}

.catou img{
  width:50%;
  display: block;
  margin:0 auto;
}
.catou .catou-name{
  text-align: center;
  color:black;
  font-weight: bold;
  font-size: 1.2em;
}

.navbar {
    border-radius: 0px;
}
p{

}

.alert{
  margin:0;
}