/*
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 : 12 déc. 2017, 18:56:53
    Author     : bofp
*/


@media (max-width: 800px) {
    div#console {
	width:95vw;
        margin:auto;
        margin-bottom:30px;
    }
    
    div#console > div#productH {
	height:75px;
    }
    
    div#console > div#productF {
	height:66px;
    }
    
    div#console > div#product {
	border-left:0px solid #00FF00;	
	padding-left:16px;
        padding-right:16px;
    }
    
    H1,H2,H3 {
        font-size:22px;
	line-height:22px;
    }
    
    div#product > h2 {
	text-transform:uppercase;
    }
    
    div#product p {
        font-size:18px;
    }

    
    .boutons > input[type='submit']:before, .boutons > button:before,
    .boutons > input[type='submit']:after, .boutons > button:after {
	padding-right: 0px;
	margin-left: 0px;
    }
    
    .boutons > input[type='submit'], .boutons > button {
	font-size:15px;
	left:12px;
	top:3px;
	background-image:url('../bundles/spaceshopcommandes/images/HexaButGr.svg');
	background-repeat: no-repeat;
	background-position:center center;
	background-size:100% 100%;
	padding:1.5em;
    }
    
    #loginBouton {
        text-align: center !important;
        width: 100%;
    }
    
    #loginBouton > span {
        font-size:15px;
	left:12px;
	top:3px;
	background-image:url('../bundles/spaceshopcommandes/images/HexaButGr.svg');
	background-repeat: no-repeat;
	background-position:center center;
	background-size:100% 100%;
	padding:1.5em;
    }
    
    div#console > div#productF > div {
	margin-top:0px;
	padding-right:0px;
    }
    
    div#details > div {
	margin:auto;
	margin-top:30px;
    }
    
    div#controls {
	position: initial;
	text-align:center;
	margin-top:30px;
	margin-bottom:30px;
    }
    
    div#controls > img {
	display:none;
    }
    
    div#controls > a {
	margin-right:15px;
	margin-left:15px;
    }
    
    div#productH {
	display:none;
    }
    
    body {
	overflow:auto;
    }
    
    div#console > div#productF {
	background-image:none;
    }
    
    div.boutons {
	text-align:center;
    }
    
    #details > div > img {
	max-width: 70vw;
	max-height: 70vh;
    }
    
    .modal {
	padding:16px;
    }
    
    #soldout {
	background-image:url('../bundles/spaceshopcommandes/images/HexaButGr.svg');
	background-repeat: no-repeat;
	background-position:center center;
	background-size:100% 100%;
	text-align:center;
	padding:13px !important;
	margin-top:20px !important;
    }
    
    #offlimit {
	background-image:url('../bundles/spaceshopcommandes/images/HexaButGr.svg');
	background-repeat: no-repeat;
	background-position:center center;
	background-size:100% 100%;
	text-align:center;
	padding:13px !important;
	margin-top:20px !important;
    }
    
    #registered {
	background-image:url('../bundles/spaceshopcommandes/images/HexaButGr.svg');
	background-repeat: no-repeat;
	background-position:center center;
	background-size:100% 100%;
	text-align:center;
	padding:13px !important;
	margin-top:20px !important;
    }
    
    #register {
        
    }
    
    #unavailable {
	background-image:url('../bundles/spaceshopcommandes/images/HexaButGr.svg');
	background-repeat: no-repeat;
	background-position:center center;
	background-size:100% 100%;
	text-align:center;
	padding:9px !important;
	margin-top:20px !important;
    }
    
    #loginBouton {
        padding-right: 97px !important;
    }
    
    #pied > p {
	margin:auto !important;
	float:initial !important;
    }
}

@media (min-width: 801px) and (max-width: 1024px) {
    div#console {
	width:260px;
	position: relative;
	right: 0px;
	top: 0px;
    }
    
    div#console > div#productH {
	height:56px;
    }
    
    div#console > div#productF {
	height:52px;
    }
    
    div#console > div#product {
	border-left:.7px solid #00FF00;	
	padding-left:24px;
        padding-right:25px;
    }
    
    H1,H2,H3 {
        font-size:19px;
	line-height:19px;
    }
    
    div#product > p {
	font-size:14px;
    }
    
    .boutons > input[type='submit']:before, .boutons > button:before,
    .boutons > input[type='submit']:after, .boutons > button:after {
	margin-left: -19px;
	margin-top: -16px;
    }
    
    .boutons > input[type='submit'], .boutons > button {
	font-size:12px;
	left:31px;
	top:-7px;
	background-image:none;
	padding:0px;
    }
    
    div#console > div#productF > div {
	margin-top:-1.5px;
	padding-right:75px;
    }
    
    div#details > div {
	margin:auto;
    }
    
    div#controls {
	position: relative;
	text-align:left;
	margin-top:0px;
    }
    
    div#controls > img {
	display:initial;
    }
    
    div#controls > a {
	margin:0px;
    }
    
    div#productH {
	display:block;
    }
    
    body {
	overflow:hidden;
    }
    
    div#console > div#productF {
	background-image:url('../bundles/spaceshopproducts/images/RBas.svg');
    }
    
    div.boutons {
	text-align:right;
    }
    
    #details > div > img {
	max-width: 40vw;
	max-height: 50vh;
    }
    
    .modal {
	padding:25px;
    }

    #soldout {
	padding-top:26px !important;
	padding-right:52px !important;
	font-size:12px !important;
    }
    
    #offlimit {
	padding-top:26px !important;
	padding-right:51px !important;
	font-size:12px !important;
    }
    
    #registered {
	padding-top:26px !important;
	padding-right:43px !important;
	font-size:12px !important;
    }
    
    #register {
        padding-right:83px !important;
    }
    
    #unavailable {
	padding-top:20px !important;
	padding-right:0px !important;
	font-size:12px !important;
	text-align: center;
	margin-right: -104px;
    }
        
    #loginBouton {
        padding-right: 57px !important;
        padding-top: 24px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    div#console {
	width:335px;
	position: relative;
	right: 0px;
	top: 0px;
    }
    
    div#console > div#productH {
	height:72px;
    }
    
    div#console > div#productF {
	height:64px;
    }
    
    div#console > div#product {
	border-left:1px solid #00FF00;	
	padding-left:24px;
        padding-right:25px;
    }
    
    H1,H2,H3 {
        font-size:21px;
	line-height:21px;
    }
    
    div#product > p {
	font-size:15px;
    }
    
    .boutons > input[type='submit']:before, .boutons > button:before,
    .boutons > input[type='submit']:after, .boutons > button:after {
	margin-left: -24px;
	margin-top: -19px;
    }
    
    .boutons > input[type='submit'], .boutons > button {
	font-size:15px;
	left:18px;
	top:0px;
	background-image:none;
	padding:0px;
    }
    
    div#console > div#productF > div {
	margin-top:-1.5px;
	padding-right:75px;
    }
    
    div#details > div {
	margin:auto;
    }
    
    div#controls {
	position: relative;
	text-align:left;
	margin-top:0px;
    }
    
    div#controls > img {
	display:initial;
    }
    
    div#controls > a {
	margin:0px;
    }
    
    div#productH {
	display:block;
    }
    
    body {
	overflow:hidden;
    }
    
    div#console > div#productF {
	background-image:url('../bundles/spaceshopproducts/images/RBas.svg');
    }
    
    div.boutons {
	text-align:right;
    }
    
    #details > div > img {
	max-width: 40vw;
	max-height: 50vh;
    }
    
    .modal {
	padding:25px;
    }
    
    #soldout {
	padding-top:32px !important;
	padding-right:67px !important;
	font-size:15px !important;
    }
    
    #offlimit {
	padding-top:32px !important;
	padding-right:69px !important;
	font-size:15px !important;
    }
    
    #registered {
	padding-top:32px !important;
	padding-right:58px !important;
	font-size:15px !important;
    }
    
    #register {
        padding-right:86px !important;
        padding-top:32px !important;
    }
    
    #unavailable {
	padding-top:25px !important;
	padding-right:0px !important;
	font-size:15px !important;
	text-align:center;
	margin-right: -133px;
    }
        
    #loginBouton {
        padding-right: 80px !important;
        padding-top: 31px !important;
    }
}

@media (min-width: 1441px) {
    div#console {
	width:345px;
	position: relative;
	right: 0px;
	top: 0px;
    }
    
    div#console > div#productH {
	height:75px;
    }
    
    div#console > div#productF {
	height:66px;
    }
    
    div#console > div#product {
	border-left:1px solid #00FF00;	
	padding-left:34px;
        padding-right:35px;
    }
    
    H1,H2,H3 {
        font-size:22px;
	line-height:22px;
    }
    
    div#product > p {
	font-size:16px;
    }
    
    .boutons > input[type='submit']:before, .boutons > button:before,
    .boutons > input[type='submit']:after, .boutons > button:after {
	margin-left: -22px;
	margin-top: -20px;
    }
    
    .boutons > input[type='submit'], .boutons > button {
	font-size:15px;
	left:14px;
	top:3px;
	background-image:none;
	padding:0px;
    }
    
    div#console > div#productF > div {
	margin-top:-1px;
	padding-right:75px;
    }
    
    div#details > div {
	margin:auto;
    }
    
    div#controls {
	position: relative;
	text-align:left;
	margin-top:0px;
    }
    
    div#controls > img {
	display:initial;
    }
    
    div#controls > a {
	margin:0px;
    }
    
    div#productH {
	display:block;
    }
    
    body {
	overflow:hidden;
    }
    
    div#console > div#productF {
	background-image:url('../bundles/spaceshopproducts/images/RBas.svg');
    }
    
    div.boutons {
	text-align:right;
    }
    
    #details > div > img {
	max-width: 50vw;
	max-height: 50vh;
    }
    
    .modal {
	padding:35px;
    }
    
    #soldout {
	padding-top:33px !important;
	padding-right:71px !important;
	font-size:15px !important;
    }
    
    #offlimit {
	padding-top:33px !important;
	padding-right:69px !important;
	font-size:15px !important;
    }
    
    #registered {
	padding-top:33px !important;
	padding-right:61px !important;
	font-size:15px !important;
    }
    
    #register {
        padding-right:84px !important;
    }
    
    #unavailable {
	padding-top:26px !important;
	padding-right:0px !important;
	font-size:15px !important;
	text-align: center;
	margin-right: -139px;
    }
        
   #loginBouton {
        padding-right: 81px !important;
        padding-top: 34px !important;
    }
}


H1,H2,H3 {
    margin:0px;
    font-family: reso;
    letter-spacing: 0.06em;
}

div#details {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    margin:0;
    border:0;
    height:100%;
}

div#details > div {
    font-size: 100%;
    color: #55FF55;
    flex-shrink: 0;
}

#details > div > img {
    width: auto;
    height: auto;
}

#details > img {
    position:absolute;
    margin:10px;
    z-index:11;
}

img#produit{
    cursor: url('/spaceshop/image/Souris.svg'), pointer !important;
    outline:none;
}

div#details > div > h3 > span:first-child {
    margin-bottom:15px;
    display:block;
}

div#produit {
    flex:1 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position:center center;
    margin:auto;
}

div#controls > a > img {
    vertical-align:middle;
    vertical-align:-moz-middle-with-baseline;
    height:40px;
    width:auto;
}

div#controls > a:last-of-type {
}

div#controls {
    width: 100%;
    bottom: 10px;
    left: 0px;
}

div#console {
    z-index:10;
}

div#console > div > a > img  {
    display:inline-block;
    width:auto;
    margin-left:0.5em;
}

div#console > div {
    text-align:right;
    margin:5px;
}

div#main > div > form {
    z-index:10;
}

div#console > div#product {
    margin:0;
    margin-top:-1px;
    padding-top:0px;
    text-align:left;
    height: auto;
    min-height:23px;
    overflow: hidden;
    animation-name: openWin;
    animation-duration: 2000ms;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    background-color: rgba(0,0,0,.785);
}

div#product > div {
    margin-top:22px;
}

div#product > h3:last-of-type {
    margin-top:10px;
}

div#product > h2:first-of-type {
    margin-bottom:1em;
}

div#product > p {
    color:white;
    letter-spacing: 0.07em;
    margin-top:10px;
    line-height:1.25em;
}

div#product > p > select {
    background-color: black;
    border: 0px solid #0F0;
    color: #0F0;
    font-family: reso;
}

div#console > div#productH > div {
    padding-top: 10px;
    padding-left: 74px;
    font-size:85%;
}

div#console > div#productF > div {
    font-family: resoLight;
    font-size:15px;
    letter-spacing: 0.1em;
    padding-top: 30px;
}

div#console > div#productH {
    background-image:url('../bundles/spaceshopproducts/images/RHaut.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position:right bottom;
    margin:0;
    margin-top:5vh;
    text-align:left;
}

div#console > div#productF {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position:right top;
    margin:0;
    margin-bottom:5vh;
}

div#contenu > form {
    height:100%;
}

.boutons > input[type='submit'], .boutons > button {
    border:0px;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0);
    color:#00FF00;
    font-family: resoLight;
    letter-spacing: 0.1em;
    cursor: pointer;
    text-transform:uppercase;
}

.boutons > input[type='submit'], .boutons > button:after ,
.boutons > input[type='submit'], .boutons > button:before {
    background-image:url('../bundles/spaceshopcommandes/images/HexaButGr.svg');
    background-repeat: no-repeat;
    background-position:center center;
    background-size:100% 100%;
    padding:1.5em;
}

.flotteBis {
    position: relative;
    animation-name: opening, apesanteur;
    animation-duration: 1000ms, 8000ms;
    animation-delay: 0ms, 1000ms;
    animation-timing-function: linear, linear;
    animation-iteration-count: 1, infinite;
    animation-direction: normal, alternate;
}

@media (min-width: 801px) {
    .flotte {
	animation-name:  moveAlongInfinity;
	animation-duration: 120000ms;
	animation-delay: 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
    }

    .desaxe {
	animation-name: opening, selfMovement;
	animation-duration: 1000ms, 120000ms;
	animation-delay: 0ms, 1000ms;
	animation-timing-function: linear, linear;
	animation-iteration-count: 1 , infinite;
	animation-direction: normal, normal;
    }
}

.flotte2 {
    position:relative;
    animation: apesanteur 8s linear 0s infinite alternate-reverse;
}

@keyframes apesanteur {
        0% {transform:skew(0deg,0deg) translate3d(0,0,0) scale3d(1,1,1);}
        33% {transform:skew(-.5deg,.5deg) translate3d(3px,-3px,-3px) scale3d(1.01,1.01,1.01);}
        66% {transform:skew(.5deg,-.5deg) translate3d(-3px,3px,3px) scale3d(0.99,0.99,0.99);}
        100% {transform:skew(0deg,0deg) translate3d(0,0,0) scale3d(1,1,1);}
        }
        
@keyframes moveAlongInfinityX {
        0% {transform: translateX(-25%);}
        50% {transform: translateX(25%);}
        100% {transform: translateX(-25%);}
}
        
@keyframes moveAlongInfinityY {
        0% {transform: translateY(0);}
        12.5% {transform: translateY(25%);}
        25% {transform: translateY(0);}
        37.5% {transform: translateY(-25%);}
        50% {transform: translateY(0);}
        62.5% {transform: translateY(25%);}
        75% {transform: translateY(0);}
        87.5% {transform: translateY(-25%);}
        100% {transform: translateY(0);}
}
        
@keyframes moveAlongInfinity {
        0% {transform: translate3d(0,5vh,0) skew(0deg,0deg);}
        12.5% {transform: translate3d(7vw,-5vh,0) skew(0deg,0deg);}
        25% {transform: translate3d(14vw,5vh,0) skew(0deg,0deg);}
        37.5% {transform: translate3d(7vw,15vh,0) skew(0deg,0deg);}
        50% {transform: translate3d(0,5vh,0) skew(0deg,0deg);}
        62.5% {transform: translate3d(-7vw,-5vh,0) skew(0deg,0deg);}
        75% {transform: translate3d(-14vw,5vh,0) skew(0deg,0deg);}
	87.5% {transform: translate3d(-7vw,15vh,0) skew(0deg,0deg);}
	100% {transform: translate3d(0,5vh,0) skew(0deg,0deg);}

}

@keyframes selfMovement {
        0% {transform: translate3d(0,0,0) rotate(0deg);}
        12.5% {transform: translate3d(0,0,0) rotate(-3deg);}
        25% {transform: translate3d(0,0,0) rotate(0deg);}
        37.5% {transform: translate3d(0,0,0) rotate(-3deg);}
        50% {transform: translate3d(0,0,0) rotate(0deg);}
        62.5% {transform: translate3d(0,0,0) rotate(3deg);}
        75% {transform: translate3d(0,0,0) rotate(0deg);}
        87.5% {transform: translate3d(0,0,0) rotate(3deg);}
        100% {transform: translate3d(0,0,0) rotate(0deg);}
}
        
@keyframes opening {
        0% {
	    transform: scale3d(0,0,1) translate3d(0%,5vh,0);
	    -moz-opacity: 0.2;-webkit-opacity: 0.2; filter: alpha(opacity=20);opacity:0.2;
	}
        100% {
	    transform: scale3d(1,1,1) translate3d(0%,5vh,0);
	    -moz-opacity:1;-webkit-opacity: 1; filter: alpha(opacity=100);opacity:1;
	}
}
        
@keyframes openWin {
        0% {max-height:1em;}
        50% {max-height:1em;}
        100% {max-height:100em;}
}

#imgFocus {
    width:auto;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    display:flex;
    justify-content: space-around;
    flex-direction:column;
    user-select:none;
}

#imgFocus > div {
    display:none;
}

#imgFocus > div > a {
    display:flex;
    flex-direction:row;
    justify-content: space-around;
}

#imgFocus > div > img {
    position:relative;
    height:auto;
    width:auto;
    max-height:80%;
    max-width:80%;
    margin:auto;
}

#imgFocus > div[id^="zoom"]:target {
    display:flex;
    flex-direction:row;
    justify-content: space-around;
    background-color: rgba(0,0,0,.85);
    position:fixed;
    height:100%;
    width:100%;
    top:0px;
    left:0px;
    z-index:1500;
}

#imgFocus > div[id^="zoom"]:target ~ #reperes {
    display:flex;
}

#imgFocus > div[id^="zoom"]:target > a {
    position: absolute;
    top: 20px;
    right:20px;
}

#imgFocus > div[id^="zoom"]:target > a > img {
    height:25px;
    width:auto;
    z-index:1002;
}

#imgFocus > div[id^="zoom"]:target > img {
    animation-name: zoom;
    animation-duration: 0.6s;
}

#reperes {
    justify-content: space-around;
    position:fixed;
    bottom:10px;
    z-index:1500;
    font-size:60px;
    font-family:reso;
    width:100%;
}

#imgFocus > div:nth-of-type(1):target ~ #reperes > div > a:nth-of-type(1),
#imgFocus > div:nth-of-type(2):target ~ #reperes > div > a:nth-of-type(2),
#imgFocus > div:nth-of-type(3):target ~ #reperes > div > a:nth-of-type(3),
#imgFocus > div:nth-of-type(4):target ~ #reperes > div > a:nth-of-type(4),
#imgFocus > div:nth-of-type(5):target ~ #reperes > div > a:nth-of-type(5),
#imgFocus > div:nth-of-type(6):target ~ #reperes > div > a:nth-of-type(6),
#imgFocus > div:nth-of-type(7):target ~ #reperes > div > a:nth-of-type(7),
#imgFocus > div:nth-of-type(8):target ~ #reperes > div > a:nth-of-type(8),
#imgFocus > div:nth-of-type(9):target ~ #reperes > div > a:nth-of-type(9),
#imgFocus > div:nth-of-type(10):target ~ #reperes > div > a:nth-of-type(10),
#imgFocus > div:nth-of-type(11):target ~ #reperes > div > a:nth-of-type(11) {
    color:#00FF00;
}

#reperes > div > a {
    text-decoration:none;
    color:#007700;
    padding-left:4px;
    padding-right:4px;
}

.zoomBut {
    flex-direction: column;
    display: flex;
    justify-content: space-around;
    min-width:74px;
    text-align:center;
}

.zoomBut > a > img {
    height:45px;
    width:auto;
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

@media (max-width: 800px){
    .zoomBut {
	display:none;
    }
    
    #imgFocus > div > img {
	max-height:95%;
	max-width:95%;
    }
}


#catalogue > div {
    width: 23vw;
    height:auto;
    overflow:hidden;
    display: inline-block;
    font-size: 88%;
    color: #55FF55;
    margin-top: 30px;
    margin-left:10px;
    margin-right:10px;
    max-width:280px;
    min-width:175px;
}

i {
    color: white;
    font-size:90%;
}

#titre {
    margin-top:10px;
    margin-bottom:0px;
    white-space:nowrap;
}

#catalogue > div > a {
    color: #55FF55;
    text-decoration: none;
    display:block;
}

#catalogue {
    vertical-align: top;
    text-align: center;
    margin:auto;
    margin-top: 50px;
    margin-bottom: 50px;
    width:90%;
}

#cattitle {
    color: #55FF55;
    margin: auto;
    display: block;
    font-size:130%;
    margin-top:-24px;
    width:11em;
    background-color: black;
}

#separateur {
    text-align:center;
    margin-top:4em;
}

div.image {
    height: 22vw;
    width:22vw;
    margin:auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 280px;
    max-height: 280px;
}

#details > div > div > h2 {
    padding-bottom:0.5em;
    border-bottom: 1px dashed #55FF55;
    margin-top:0em;
    font-size:125%;
}

div.produit {
/*    height: 35vw;
    width:35vw;
    min-width:250px;
    margin:auto;
*/
    margin-right:0vw;
    cursor: pointer;
    z-index:-1;
}

div.thumbnails {
    height:4vw;
    width: 4vw;
    margin: auto;
    margin-bottom:1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: 0.3s;
    max-width: 60px;
    max-height: 60px;
    min-width: 40px;
    min-height: 40px;
}

div#imagelist {
    width: 6vw !important;
    min-width:30px !important;
    max-width:100px !important;
    margin-right: 1em;
    vertical-align:top;
    display:inline-block;
}

#details > div > div > h3 > span > input[type='submit'], #details > div > div > h3 > span > button {
    padding:0.2em;
    padding-left:2em;
    padding-right:2em;
    border:1px solid #55FF55;
    margin-bottom:1vw;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0);
    color:#55FF55;
    font-family: 'pixeletteregular';
    cursor: pointer;
    transition: 0.3s;
}

#details > div > div > h3 > span >input[type='submit']:hover, #details > div > div > h3 > span > button:hover {
    background-color: rgba(0,255,0,.3)
}

#shipIncl {
    font-size:60%;
}

#loginBouton > span > a {
    text-decoration: none;
    color: #0F0;
}

/*************** modifications du pied de page pour cette page ************/

#pied {
    z-index: 11;
    pointer-events: none;
}

#pied > p {
    position: relative;
    right: 0px;
    margin: 0;
    padding: 0;
    float: right;
    pointer-events: auto;
    z-index: 11;
}