/**********************************************************/
/**********************************************************/
/***************** CAEGORY VISUEL LEFT ********************/
/**********************************************************/
/**********************************************************/
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:700|Anton|Arapey:400i|BioRhyme:300|Bungee|Cinzel|Kanit:700i|La+Belle+Aurore|Michroma|Oswald:200,700|Pacifico|Pattaya|Quicksand:300|Rock+Salt|Source+Code+Pro:900|Syncopate:700|Timmana|Ultra');

body {
  font-family: 'Varela Round', sans-serif;
}


#accueil, #banque-de-visuels{
  min-height:calc(100vh - 35px);
}
.downloadFromBank{
  width:70%;
  margin-left: 15%;
  display: block;
  background-color: #004588;
  color:#fff;
  border : solid 1px #004588;
  border-radius : 5px;
  padding:5px;
  margin-bottom: 5px;
}

.downloadFromBank:hover{
  background-color: #fff;
  color:#004588;
  text-decoration: none;
}
.logo{max-width: 150px;
    max-height: 170px;
    position: absolute;
    left:10%;
    top: 5px;
}

.blueCustom{
  background: #3d8dc1;
  color: #fff;
}

.redCustom{
  background: #c14848;
  color: #fff;
}
.greenCustom{
  background: #4aaf3d;
  color: #fff;
}
.blackCustom{
  background: #303030;
  color: #fff;
}
.yellowCustom{
  background: #9a8204;
  color: #fff;
}

.pinkCustom{
  background: #c353b5;
  color: #fff;
}
.purpleCustom{
  background: #8a43b7;
  color: #fff;
}


.header{
  padding-top: 1%;
  padding-bottom: 1%;
  margin-bottom: 20px;
}



/**********************************************************/
/**********************************************************/
/********************** COLOR CLASS ***********************/
/**********************************************************/
/**********************************************************/

.magenta {
  color: #E2007A;
}

.pink {
  color: pink;
}

.grey {
  color: #555;
}

.blue {
  color: #004588;
}




/* Entete item magenta */

.itemPersonalisation {
  height: 35px;
  background-color: #E2007A;
  color: white;
  font-weight: bold;
  line-height: 35px;
  width: 100%;
}

/**********************************************************/
/**********************************************************/
/********************** INDEX.HTML ************************/
/**********************************************************/
/**********************************************************/

.btn {
  border-radius: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-success {
  background: none;
  border: 3px solid #5cb85c;
  color: #5cb85c;
}

.btn-success:hover, .btn-success:active {
  color: #FFF;
  background: #47a447;
}

.btn-success-invert {
    background: #47a447;
    border: 3px solid #47a447;
    color: #FFF;
    padding-top: 10px;
padding-bottom: 10px;
font-size: 18px;

}

.btn-success-invert:hover, .btn-success-invert:active {
  background: none;
  color: #47a447;
}

.btn-info {
  background: none;
  border: 3px solid #5bc0de;
  color: #5bc0de;
}

.btn-info:hover, .btn-info:active {
  color: #FFF;
  background: #39b3d7;
}

.btn-prim {
  background: none;
  border: 3px solid #0755b1;
  color: #0755b1;
}

.btn-prim:hover, .btn-prim:active {
  color: #FFF;
  background: #0755b1;
}

.btn-custom {
  background: none;
  border: 3px solid #c3b10a;
  color: #c3b10a;
}

.btn-custom:hover, .btn-custom:active {
  color: #FFF;
  background: #dac508;
}
.btn-orange {
  background: none;
  border: 3px solid #c97f0f;
  color: #df8d11;
}

.btn-orange:hover, .btn-orange:active {
  color: #FFF;
  background: #df8d11;
}
.btn-red {
  background: none;
  border: 3px solid #a70032;
  color: #a70032;
}

.btn-red:hover, .btn-red:active {
  color: #FFF;
  background: #cf0642;
}

#folder {
  margin-top: 10px;
}

/**********************************************************/
/**********************************************************/
/******************** IMAGEBANK.HTML **********************/
/**********************************************************/
/**********************************************************/

.size {
  display: inline-block;
  width: 25%;
  padding: 1%;
  margin-bottom: 5px;
  text-align: center;
  position: relative;
}

.size img {
  width: 50%;
  margin-left: 25%;
  margin-bottom: 10px;
  border-radius: 50%;
}

.size input {
  width: 50px;
}

#scanFold {
  padding: 0;
  margin-top: 20px;
}


.modal-footer {
  border: none;
}


footer {
  height: 35px;
  text-align: center;
}

footer p {
  padding: 10.5px;
  margin: 0px;
  line-height: 100%;
}


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

@media (max-width: 767px) {
  .size {
    display: inline-block;
    padding: 1%;
    border: 1px solid #f0f0f0;
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .size {
    display: inline-block;
    padding: 1%;
    border: 1px solid #f0f0f0;
    margin-bottom: 5px;
    text-align: center;
    width: 50%;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
   .size {
     display: inline-block;
     padding: 1%;
     border: 1px solid #f0f0f0;
     margin-bottom: 5px;
     text-align: center;
    width: 33%;
  }
  .div-prim{
    width: 100%;
  }
}

.absoluteDiv{
  position: absolute;
  top: 20px;
  left: 5%;
  z-index: 1000;
  font-size: 30px;
}
a {color:inherit;}
a:hover {color:inherit;}


#mainMenu{padding-top: 50px;}
.no-decoration, .no-decoration:hover{text-decoration:none;}
#revendeurName,.revendeurName{text-transform:uppercase;font-size:1.5em}
.titleBloc{ padding:10px;margin-bottom:25px;}


.mainButtons{
  position: absolute;
  top:20px;
  right:5%;
}
.mainButtons i{
  font-size: 25px;
  padding-left: 25px;
}

@media screen and (min-width:768px){
    .navbar-brand-centered {
        position: absolute;
        left: calc(50% - 80px);
        display: block;
        width: 160px;
        text-align: center;
    }
}

.navbar, .navbar-header, .navbar-collapse{border: none;}

.mainButtonsNavBar{  color:#fff !important;}
.mainButtonsNavBar:hover{opacity: 0.8;}
.mainButtonsNavBar i{
  font-size: 15px;
  padding-right: 5px;
}


.delBut{display: none;position: absolute;top:0;right:15%;border:none;color:red;padding: 5px;background: transparent;font-size: 20px;}

.size:hover .delBut{display: block;}

.navbar-default {margin-bottom: 75px !important;}

.div-prim{
  background: none;
  border: 3px solid #0755b1;
  color: #0755b1;
  width: 29%;
  margin: calc(3% / 2);
  display: inline-block;
  padding: 20px;
  font-size: 16px;
}
.div-prim i{
  font-size: 35px;
  margin-bottom: 20px;
}
.div-prim:hover {
  color: #FFF;
  background: #0755b1;
  cursor: pointer;
}

@media (max-width: 991px) {
  .div-prim{
    width: 97%;
  }
}

.navbar-default .navbar-toggle {
    border-color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {background-color: #fff;}


.navbar-default .navbar-toggle:hover {
    background: transparent;
}



.cd-popup-container{
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(21, 21, 21, 0.8);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;

}
.cd-popup-container.is-visible {
  opacity: 1;
  z-index: 800;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.pop-inside{
  position: absolute;
  top:25%;
  left:20%;
  right:20%;
  background: #fff;
  border : 5px solid #0755b1;
  color: #0755b1;
}
.div-prim-pop{
  background: none;
  border: 3px solid #0755b1;
  color: #0755b1;
  background: #fff;
  width: 44%;
  margin: calc(5% / 2);
  display: inline-block;
  padding: 20px;
  font-size: 16px;
}
.div-prim-pop i{
  font-size: 35px;
  margin-bottom: 20px;
}
.div-prim-pop:hover{
  color: #fff;
  background: #0755b1;
}

.closePop{position: absolute;top:5px;
right: 5px;font-size: 25px;}
.closePop:hover{opacity: 0.8;cursor: pointer;}

@media (max-width: 991px) {
  .div-prim-pop{
    width: 94%;
  }
  .pop-inside{
  left:10%;right: 10%;}
}
#globalInfos{margin-bottom:50px;padding-top:50px;}
#globalInfos .infoClient{border:1px solid #555;padding-top:20px;padding-bottom: 20px;}
.mon-espace-block{margin-bottom:50px;}

  #overlay {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.8);
  z-index: 5000;
}
#loading {
  width: auto;
  height: auto;
  position: absolute;
  top: 250px;
    margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
color:#fff;
text-transform: uppercase;
}
#loading img{
	width:100px;
	opacity: 0.3;
}