@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
@font-face {
    font-family: 'Imagine';
    src: url('fonts/imagine_font-webfont.woff2') format('woff2'),
         url('fonts/imagine_font-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mokimono';
    src: url('fonts/moki-mono.woff2') format('woff2'),
         url('fonts/moki-mono.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

body { background-image: url('../img/bg-carton.jpg'); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; }

header { padding: 10px 0; }
footer { background: #888888; padding: 20px 0; box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.7) inset; color: #FFF; font-size: 11px; margin-top: 30px; }
.navbar-brand img { height: 20px; float: left; }
table tbody tr td { vertical-align:middle !important; }
.panel-heading h3 { margin-top: 10px; }
.panel-body .well { margin-bottom: 0; }
.packBlock { height: 180px; }
.full-width { width: 100%; }
h1 span, label span { color: #D2B493; }
h2 { font-family: 'Oswald', sans-serif; font-weight: 700; color: #6F6F6F; }
h3 { font-family: 'Oswald', sans-serif; font-weight: 500; color: #888; }
h3 .badge { font-size: 30px; }

table { background: #FFF; box-shadow: 0 0 5px #947b61; }
table tbody tr td, table thead tr th { text-align: center; }
table tbody tr td:first-child { font-weght: bold; }

.jumbotron { border: none; box-shadow: 0 0 5px #947b61; background-color: rgba(238, 238, 238, 0.7); text-shadow: 0 0 5px #FFF, 0 0 10px #FFF; }
.jumbotron h1 { font-family: 'mokimono' !important; color: #6F6F6F; font-size: 45px !important; text-transform: uppercase; margin-top: 0; padding-top: 0; }
.jumbotron h2 { margin-top: 0; }
.jumbotron .btn { text-shadow: none; }
.panel { border: none; box-shadow: 0 0 5px #947b61; background-color: rgba(255, 255, 255, 0.7); text-shadow: 0 0 5px #FFF, 0 0 10px #FFF; }
.panel .btn { text-shadow: none; }
#mapBlock { box-shadow: 0 0 5px #947b61; overflow: hidden !important; border-radius: 5px !important; }

.panel.panel-default.formulaire { background: rgba(237,220,193,0.7); border-radius: 10px; }
.panel.panel-default.formulaire h2 { margin-top: 0; padding-top: 0; color: #aa9378; text-align: center; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); }

.panel.panel-default.formulaire .form-group.dimension { display: inline-block; width: 30%; margin-bottom: 5px; }
.panel.panel-default.formulaire .form-group.quantite { width: 100%; }
.panel.panel-default.formulaire .form-group.quantite input { width: 100%; border-color: #CDB396; border-radius: 0; text-align: right; }
.panel.panel-default.formulaire .form-group.dimension input { width: 100%; border-color: #CDB396; border-radius: 0; text-align: center; }
.panel.panel-default.formulaire .img-responsive  { margin-left: auto; margin-right: auto; }

.panel.panel-default.formulaire .form-control:focus {
border-color: #EDDCC1;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.01),0 0 8px rgba(237,220,193,1);
box-shadow: inset 0 1px 1px rgba(0,0,0,.01),0 0 8px rgba(237,220,193,1);
}


.prix { font-size: 1.2em; }
.total { font-size: 1.4em; font-weight: bold;}

.carton { color: #D2B493; }

.btn { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

.logo2 { height: 100px; margin-right: 30px; }

.telephone { font-size: 40px; font-family: 'Oswald'; }

/* bouton */
.btn-carton { 
  color: #575757;
  /*color: #FFF;*/
  text-shadow: 0 0 3px #947b61, 0 0 5px #947b61, 0 0 10px #947b61, 0 0 20px #947b61;
  background-color: #F0DCBE; 
  border-color: #EBD2AF; 
  border-radius: 50px;
}

.btn-carton .label { text-shadow: none; }
 
.btn-carton:hover, 
.btn-carton:focus, 
.btn-carton:active, 
.btn-carton.active, 
.open .dropdown-toggle.btn-carton { 
  color: #575757; 
  background-color: #D2B493; 
  border-color: #EBD2AF; 
} 
 
.btn-carton:active, 
.btn-carton.active, 
.open .dropdown-toggle.btn-carton { 
  background-image: none; 
} 
 
.btn-carton.disabled, 
.btn-carton[disabled], 
fieldset[disabled] .btn-carton, 
.btn-carton.disabled:hover, 
.btn-carton[disabled]:hover, 
fieldset[disabled] .btn-carton:hover, 
.btn-carton.disabled:focus, 
.btn-carton[disabled]:focus, 
fieldset[disabled] .btn-carton:focus, 
.btn-carton.disabled:active, 
.btn-carton[disabled]:active, 
fieldset[disabled] .btn-carton:active, 
.btn-carton.disabled.active, 
.btn-carton[disabled].active, 
fieldset[disabled] .btn-carton.active { 
  background-color: #F0DCBE; 
  border-color: #EBD2AF; 
} 
 
.btn-carton .badge { 
  color: #F0DCBE; 
  background-color: #575757; 
}

/* bouton 2 */
.btn-carton2 { 
  color: #FFF;
  /*text-shadow: 0px 0px 3px #947b61, 0 0 5px #947b61, 0 0 10px #947b61, 0 0 20px #947b61;*/
  background-color: #aa9378; 
  border-color: #aa9378; 
  border-radius: 50px;
}

.btn-carton2 .label { text-shadow: none; }
 
.btn-carton2:hover, 
.btn-carton2:focus, 
.btn-carton2:active, 
.btn-carton2.active, 
.open .dropdown-toggle.btn-carton2 { 
  color: #FFF;
  background-color: #c7a986; 
  border-color: #c7a986; 
} 
 
.btn-carton2:active, 
.btn-carton2.active, 
.open .dropdown-toggle.btn-carton2 { 
  background-image: none; 
  box-shadow: none !important;
} 
 
.btn-carton2.disabled, 
.btn-carton2[disabled], 
fieldset[disabled] .btn-carton2, 
.btn-carton2.disabled:hover, 
.btn-carton2[disabled]:hover, 
fieldset[disabled] .btn-carton2:hover, 
.btn-carton2.disabled:focus, 
.btn-carton2[disabled]:focus, 
fieldset[disabled] .btn-carton2:focus, 
.btn-carton2.disabled:active, 
.btn-carton2[disabled]:active, 
fieldset[disabled] .btn-carton2:active, 
.btn-carton2.disabled.active, 
.btn-carton2[disabled].active, 
fieldset[disabled] .btn-carton2.active { 
  background-color: #b2a18d; 
  border-color: #b2a18d; 
} 
 
.btn-carton2 .badge { 
  color: #F0DCBE; 
  background-color: #c7a986; 
}


.btn-none>div { margin-top: 5px; border-radius: 10px; }

.btn-none:active, 
.btn-none.active, 
.open .dropdown-toggle.btn-none { 
  background-image: none; 
  box-shadow: none !important;
}

.btn-none:active>div, 
.btn-none.active>div, 
.open .dropdown-toggle.btn-none>div {
  background: #EDDCC1;
  color: #504538;
  box-shadow: 1px 1px 2px #A7937B;
} 


/* CUBE */
@-webkit-keyframes spin {
	from { transform: rotateY(0); }
	to   { transform: rotateY(360deg); }
}

/* scene wrapper */
.wrapper{
	height: 200px;
	margin-top:60px;
	margin-bottom: -40px;
	position:relative;
	-webkit-perspective: 800;
	-webkit-perspective-origin: 50% -200px;
	-moz-perspective: 800;
	-moz-perspective-origin: 50% -200px;
	perspective: 800px;
	perspective-origin: 50% -200px;
}

/* cube wrapper */
.cube{
	position: relative;
	margin: 0 auto;
	width: 100px;
	transform-style: preserve-3d;
	animation: spin 20s infinite linear;
	transition: all 0.5s linear;
}

/* outer cube */
b{
	position:absolute;
	width:100px;
	height:100px;
	display:block;
	background:rgba(237, 220, 193,1);
	box-shadow:inset 0 0 30px rgba(170, 147, 120,0.5);
	border: solid 1px rgba(170, 147, 120,1);
	font-size:20px;
	text-align:center;
	line-height:100px;
	transition: all 1s linear;
}

b.back{
	transform: translateZ(-50px) rotateY(180deg);
	transform: translateZ(-50px) rotateY(180deg);
}
b.right{
	transform:rotateY(-270deg) translateX(50px);
	transform-origin: top right;
	transform:rotateY(-270deg) translateX(50px);
	transform-origin: top right;
}
b.left{
	transform:rotateY(270deg) translateX(-50px);
	transform-origin: center left;
	transform:rotateY(270deg) translateX(-50px);
	transform-origin: center left;
}

b.bottom{
	transform:rotateX(90deg) translateY(50px);
	transform-origin: bottom center;
	box-shadow: 0 0 15px rgba(0,0,0 0.5);
	transform:rotateX(90deg) translateY(50px);
	transform-origin: bottom center;
	box-shadow: 0 0 15px rgba(0,0,0 0.5);
}

b.front{
	transform: translateZ(50px);
	transform: translateZ(50px);
}

/* cover */
i {
	position:absolute;
	width:100px;
	height:50px;
	display:block;
	background:rgba(237, 220, 193,1);
	box-shadow:inset 0 0 30px rgba(170, 147, 120,0.5);
	border: solid 1px rgba(170, 147, 120,1);
	transition: all 0.5s linear;
}

u {
	position:absolute;
	width:50px;
	height:100px;
	display:block;
	background:rgba(237, 220, 193,1);
	box-shadow:inset 0 0 30px rgba(170, 147, 120,0.5);
	border: solid 1px rgba(170, 147, 120,1);
	transition: all 0.5s linear;
}

i.topLeft{
	transform:rotateX(-90deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
	transform-origin: top right;
	transition-delay: 0.3s;
}

/*i.topRight{
	transform:rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(-50px) translateZ(0px);
	transform-origin: top center;
	transition-delay: 0.3s;
}*/

i.topFront{
	transform: rotateX(-90deg) rotateY(2deg) rotateZ(90deg) translateX(-50px) translateY(-50px) /*translateZ(0.5px)*/;
	transform-origin: top left;
}

i.topBack{
	transform: rotateX(90deg) rotateY(2deg) rotateZ(90deg) translateX(50px) translateY(0px) /*translateZ(-0.5px)*/;
	transform-origin: top right;
}

/* hover transformations */
.cube:hover i.topLeft{
	transform:rotateX(45deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(-50px) translateZ(0px);
	transform-origin: top center;
	transition-delay: 0s;
}

/*.cube:hover i.topRight{
	transform:rotateX(-45deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(-50px) translateZ(0px);
	transform-origin: top center;
	transition-delay: 0s;
}*/

.cube:hover i.topFront{
	transform: rotateX(-90deg) rotateY(45deg) rotateZ(90deg) translateX(-50px) translateY(-50px) /*translateZ(0)*/;
	transform-origin: top left;
	transition-delay: 0.3s;
}

.cube:hover i.topBack{
	transform: rotateX(90deg) rotateY(45deg) rotateZ(90deg) translateX(50px) translateY(0px) /*translateZ(0)*/;
	transform-origin: top right;
	transition-delay: 0.3s;
}









/* Collecte */
.panel-heading.demande { background: #b247ca; color: #61246f; }
.panel-heading.abonnement { background: #fdb460; color: #7e582c; }

/* Packs */
.panel-heading.studio { background: #BFC946; color: #383B15; }
.panel-heading.start { background: #FCDD61; color: #726325; }
.panel-heading.medium { background: #F98166; color: #5f2d22; }
.panel-heading.maxi { background: #C44767; color: #541a29; }
.prixPack { font-size: 30px; font-weight: bold; text-align: center; margin-top: 20px; }
.prixPack sup { font-size: 15px; font-weight: normal; }

.prixPack.studio { color: #BFC946; }
.prixPack.start { color: #FCDD61; }
.prixPack.medium { color: #F98166; }
.prixPack.maxi { color: #C44767; }

/* Footer */
footer a { cursor: pointer; }
footer a, footer a:link, footer a:visited, footer a:active, footer a:focus { color: #FFF; text-decoration: underline; }
footer a:hover { color: #D2B493; }

/* Menu */
.nav.menu { background: #FFF; box-shadow: 0 0 5px #947b61; border-radius: 50px; overflow: hidden; }
.nav.menu>li.active { font-weight: bold; }
.nav.menu>li>a, .nav.menu>li>a:link, .nav.menu>li>a:visited { color: #888; }
.nav.menu>li.active>a, .nav.menu>li.active>a:link, .nav.menu.active>li>a:visited { color: #CCAF8E !important; }
.nav.menu>li>a:focus, .nav.menu>li>a:hover, .nav.menu>li>a.active:focus, .nav.menu>li>a.active:hover { background-color: #ECD9BA; color: #FFF !important; text-shadow: 0 0 3px #947b61, 0 0 5px #947b61, 0 0 10px #947b61, 0 0 20px #947b61; }
.menu.nav-justified { border-bottom: solid 1px #ECD9BA; }

/* Debug bloc */
#debug { width: 200px; position: absolute; opacity: 0.7; background: #000; padding: 5px; border-radius: 0 5px 5px 0; left: -1; top: 200px;}
#debug pre { color: #EEE; font-family: Consolas, Courier New; font-size: 9px; margin: 0; padding: 0; background: none; border: 0; }
#debug h5 { margin: 0 0 5px 0; padding: 0; color: #FFF; }

/* Inner Search Icon */
.inner-addon { position: relative; }
.inner-addon .glyphicon { position: absolute; padding: 10px; pointer-events: none; }
.left-addon .glyphicon  { left:  0px; color: #AAA; }
.right-addon .glyphicon { right: 0px; color: #AAA; }
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }


/* Responsive utilities */
@media (max-width: 400px)
{
	.packBlock { height: auto; }
	.navbar-brand { font-family: 'mokimono' !important; color: #6F6F6F; text-transform: uppercase; font-size: 10px !important; letter-spacing: 0px; }
	.logo2 { display: none; }
	.navbar-default { margin-bottom: 0; border: none; border-radius: 5px; box-shadow: 0 0 5px #947b61; }
	.jumbotron { padding-top: 15px; }
	.jumbotron h1 { font-size: 26px !important; text-align: center; }
	.jumbotron h2 { font-size: 20px; text-align: center; }
	.jumbotron p { font-size: 14px; }
	
	.btn-group-vertical .btn { font-size: 14px; }
}

@media (min-width: 401px) and (max-width: 767px)
{
	.packBlock { height: auto; }
	.navbar-brand { font-family: 'mokimono' !important; color: #6F6F6F; text-transform: uppercase; font-size: 12px !important;}
	.logo2 { display: none; }
	.navbar-default { margin-bottom: 0; border: none; border-radius: 5px; box-shadow: 0 0 5px #947b61; }
	.jumbotron { padding-top: 15px; }
	.jumbotron h1 { font-size: 30px !important; text-align: center; }
	.jumbotron h2 { font-size: 24px; text-align: center; }
	.jumbotron p { font-size: 16px; }
	.panel.panel-default.formulaire .form-group.dimension { display: block; width: 100%; }
	.panel.panel-default.formulaire .times { display: none; }
}

@media (min-width: 768px) and (max-width: 991px)
{
	.panel-body.recycle { height: 390px; }
	.panel-body.home-panel p { height: 300px; }
	.panel-carton { height: 642px; }
	ul.nav li a { height: 60px; }
	
	h2 { font-size: 24px; }
	.jumbotron p { font-size: 16px; }
	
	.jumbotron h1 { font-size: 30px !important; }
	.logo2 { height: 64px; margin-right: 15px; }
	.panel.panel-default.formulaire .form-group.dimension { display: block; width: 100%; }
	.panel.panel-default.formulaire .times { display: none; }
}

@media (min-width: 992px) and (max-width: 1199px)
{
	.panel-body.recycle { height: 390px; }
	.panel-body.home-panel p { height: 220px; }
	.panel-carton { height: 630px; } 
	ul.nav li a { height: 60px; }
	
	.jumbotron h1 { font-size: 41px !important; }
	.logo2 { height: 88px; margin-right: 20px; }
	.panel.panel-default.formulaire .form-group.dimension { display: inline-block; width: 29%; }
}

@media (min-width: 1200px)
{
	.panel-body.recycle { height: 430px; }
	.panel-body.home-panel p { height: 160px; }
	.panel-carton { height: 637px; }
}