/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/

/* 
    Created on : Sep 5, 2015, 9:28:39 AM
    Author     : your problem-solver
*/

.page-header {
    margin-top: 80px;
}


.form-container {
    padding:40px;
}

.submit-div {
    margin-top: 30px;
}

.form {

}

.border {
    border-bottom-style: double;
    border-color: #000;
    border-width: 2px;
}

/* Row container: label column + field column + optional help */
.form-element {
  display: flex;
  align-items: flex-start;      /* never vertical-center */
  justify-content: flex-start;  /* never horizontal-center */
  gap: 8px;
  margin-bottom: 10px;
}

/* Label column: fixed width so all fields start at the same x-position */
.label-width {
  flex: 0 0 180px;              /* fixed column width */
  display: flex;
  align-items: center;          /* baseline look for single-line labels */
  white-space: nowrap;
}

/* Field column: wrapper for input + help, guarantees left alignment */
.field-cell {
  display: flex;
  align-items: flex-start;      /* top-align checkbox and textarea */
  gap: 8px;
  min-width: 0;
}

/* Do NOT grow everything. Only text-like controls can grow a bit if desired */
.field-cell > input[type="text"],
.field-cell > input[type="email"],
.field-cell > input[type="number"],
.field-cell > select,
.field-cell > textarea {
  flex: 0 1 360px;              /* left-aligned, bounded width */
  max-width: 100%;
  width: 360px;                 /* adjust to taste; remove if you prefer auto */
  box-sizing: border-box;
}

/* Checkboxes must never stretch */
.field-cell > input[type="checkbox"] {
  flex: 0 0 auto;
  align-self: flex-start;       /* pin to the top-left of the field cell */
  margin-top: 2px;              /* tiny optical tweak */
}

/* Inline help/description stays right after the control */
.help-inline {
  color: #666;
  font-size: 0.9em;
  white-space: normal;
}

/* Required asterisk inside the label */
.required-star {
  color: red;
  margin-left: 4px;
  font-weight: bold;
}

/* If you have this older rule, override it (or remove it):
   .form-element input, .form-element select { flex: 1; }
   This line makes controls stretch and is the root of centering issues. */
.form-element input,
.form-element select,
.form-element textarea {
  flex: 0 0 auto; /* reset any broad "flex:1" you had */
}



.spacer {
    margin-top: 10px;
    margin-bottom: 10px;
}

.snapshot {
    padding:8px;
    width:80%;
    height:80%;
    max-height: 283px;
    margin: auto;
}   

.btn {

    white-space: initial;
}

.navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar:hover {
    color: #fff;
    background-color: transparent;
}

.navbar-fixed-top {

    background-color: red;

}

.navbar .navbar-brand,
.navbar .navbar-brand {
    color: white;
    background-color: transparent;
}


.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {

    color: #ffff;
    font-weight: bold;
    font-size-adjust: .6;

}





.navbar .navbar-nav > li > a
{
    color: #ffff;
    background-color: transparent;
}
.navbar .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
    color: #ffff;
    font-weight: bold;
    background-color: transparent;
}

.navbar .navbar-text {
    color: white;
}
.navbar .navbar-nav > li > a {
    color: white;
}


.hr-separator{
    margin-bottom: 60px;
}

@keyframes fadeAndScale {
    from {
        opacity: 0;
        transform: scale(.9, .9);
    }
    to {
        opacity: 1;
        transform: scale(1, 1);
    }
}

#zoom .p {
    margin-bottom: 0px;
}

#zoom p {

    font-size: 28px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #FFF;
    margin: 0;
    padding: 0px 0 5px 0;
    transform-origin: 50% 100%;
    text-shadow: 2px 2px 2px #333;

    animation-duration: 5s;
    animation-name: fadeAndScale;
    animation-timing-function: cubic-bezier(.71,.55,.62,1.57);

}


#auteur {
    margin-top:5px;
    display: block;
    animation: rotate 15s infinite;
}


.print {
    display:none;
}

@keyframes rotate {

    100% {
        transform: rotateY(360deg);
    }
}

/*

#auteur
{
    position: relative;
    top: 30px;
    left: 0px;
    width: 100%;
    max-height: 60px;
    //background-color: #3b5598;
    display: block;
    
    -webkit-animation: auteur 7s ease;
}




@keyframes auteur
{
  0% {
    top: 50%;
  }
  100% {
    top: 10%;;
  }
}

*/



.wrapper {
    margin-top: 20px;
}


.social-networks {
    margin-bottom: 10px;
}

.text-dark {
    color: black;
}


.icon_new {

    width: 50px;
    height: 25px;
    margin-top : -10px;
    font-size: 10pt;
    font-style: oblique;
    font-variant-position: super;
    height: 5px;
    border-width: 1px;
    border-color: black;
    color: black;
    background-color: yellow;

    /*
    -webkit-box-shadow: 9px 10px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 9px 10px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 9px 10px 5px 0px rgba(0,0,0,0.3);
    */

}

.marquee {

    height:35px;
    width: 100%;
    margin: 0px;
    background-color:#ffffff;
    font-family:Cursive;
    font-size:14pt;
    color:#000000;
}


.carousel-caption-slide1 h1 h2 h3 h4 {
    color: black;
    text-shadow: none;
    font-weight: bold;
}


.carousel-caption-slide1 {
    color: black;
    text-shadow: none;

    left:25%;
    right:45%;

    top:10px;


}

.carousel-caption-slide1 h2 {
    color: black;
    text-shadow: none;
    font-weight: bold;





}



.carousel-caption-slide2 h2 {


    font-size: 25px;
    color:black;



    /*
    margin-bottom: 180px;
    margin-left: 35%;
    margin-right: 35%;
    */



    display:       inline-block; 
    vertical-align:  auto; 


    text-align: center; 




}





.carousel-caption-slide2  {

    color:white;


}


.carousel-caption-slide3 {

    color: #fff;
    color:white;
    text-shadow: 2px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
    font-size: 8em;


}



.carousel-caption-slide3 h2 {

    color: #fff;
    text-shadow: 2px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
    bottom: 40%;
    font-size: .9em;
    margin-bottom: 3px;
    margin-top: 3px;
}

.carousel-control.left {
    background-image:none;

}

.carousel-control.right {
    background-image:none;
}



.panel-body {
    min-height: 340px;

}


.divsmall {
    font-size: 72%;
}


.bottom-btn {

    position:absolute; 
    width:140px;
    bottom:40px;
    margin:auto;
    left: 50%;
    margin-left: -70px; /* half of the button width */

}



.carousel {

    min-height: 250px;
    color: black;
    background: #57D53B;
}

.carousel-indicators {
    display:none;
}



blink, .blink {
    -webkit-animation: blink 1s step-end infinite;
    -moz-animation: blink 1s step-end infinite;
    -o-animation: blink 1s step-end infinite;
    animation: blink 1s step-end infinite;
    font-weight: bold;
    text-decoration: blink;

}

@-webkit-keyframes blink {
    67% { opacity: 0 }
}

@-moz-keyframes blink {
    67% { opacity: 0 }
}

@-o-keyframes blink {
    67% { opacity: 0 }
}

@keyframes blink {
    67% { opacity: 0 }
}




/* KEEP */

/*

.carousel{

    color:white;

    background-image: -webkit-linear-gradient(right top, #000080 0%, #34C924 100%);
    background-image:    -moz-linear-gradient(right top, #000080 0%, #34C924 100%); 
    background-image:     -ms-linear-gradient(right top, #000080 0%, #34C924 100%);
    background-image:      -o-linear-gradient(right top, #000080 0%, #34C924 100%);
    background-image:         linear-gradient(right top, #000080 0%, #34C924 100%);

}

*/

@media (max-width:1200px) {                                

    .panel-body {
        min-height: 440px;
    }


    .thumbnail h3 {
        overflow: hidden; 
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .panel-heading h4 {
        overflow: hidden; 
        text-overflow: ellipsis;
        white-space: nowrap;
    }



}
@media (max-width:767px) {



    .panel-body {
        min-height: 387px;
    }

    .carousel {
        min-height: 360px;
    }

    .carousel-caption, .carousel-caption-slide1, .carousel-caption-slide3, .h2, h2 {
        font-size: 25px;
    }

    /*
    .carousel-caption, .carousel-caption-slide1, .carousel-caption-slide3 p {
        font-size: 10px;
    }
    */
    .carousel-caption-slide2 h2 {

        margin-bottom: 100px;
        margin-left: 33%;
        margin-right: 35%;

        font-size: 16px;

    }


}

@media print {

    .print {
        display:block;
    }


    .soumission {
        display:none;
    }

    h2 {
        font-size: small;
    }

    body, div {  width: 90%;     border: 0;     margin: 0 5%;     padding: 0;     float: none;     position: static;     overflow: visible; }

}



@media (min-width: 777px) {
    /*applied if browser window width is less than or equal to 600px*/
    .text {
        display: none !important; 
    }
}

@media (max-width: 776px) {
    /*applied if browser window width is greater than 600px*/
    .icon {
        display: none !important;
    }
}



@media (max-height:600px) {

    /*

    .panel-body {
        min-height: 440px;
    }
    */
    .carousel {
        min-height: 340px;
    }

    .carousel-caption, .carousel-caption-slide1, .carousel-caption-slide3, .h2, h2 {
        font-size: 16px;
    }

    .carousel-caption, .carousel-caption-slide1, .carousel-caption-slide3 p {
        font-size: 12px;
    }



}


@media (max-width:350px) {

    .panel-body {
        min-height: 450px;
    }

}

.intro-message {
    position: relative;
}

.intro-message > h1 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 5em;
}

.intro-divider {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.intro-message > h3 {
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

@media(max-width:767px) {
    .intro-message {
        padding-bottom: 15%;
    }

    .intro-message > h1 {
        font-size: 3em;
    }

    ul.intro-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.intro-social-buttons > li:last-child {
        margin-bottom: 0;
    }

    .intro-divider {
        width: 100%;
    }
}