/* FONTS */
@font-face { font-family: 'nevis-Bold'; src: url('webfont/nevis-Bold.eot?#iefix') format('embedded-opentype'), url('webfont/nevis-Bold.woff') format('woff'), url('webfont/nevis-Bold.ttf') format('truetype'), url('webfont/nevis-Bold.svg#nevis-Bold') format('svg'); font-weight: normal; font-style: normal; }
/* FONTS */
/* #024278 */
body{width: 100%; padding: 0; margin: 0; background-color: #024278;}

header{width: 100%;}

.globalheader{background: radial-gradient(ellipse at center -60px , #024278 25%, #001e30 100%) no-repeat fixed center top rgba(0, 0, 0, 0); -webkit-radial-gradient(ellipse at center -60px , #024278 25%, #001e30 100%) no-repeat fixed center top rgba(0, 0, 0, 0); -moz-radial-gradient(ellipse at center -60px , #024278 25%, #001e30 100%) no-repeat fixed center top rgba(0, 0, 0, 0); width: 100%; height: 100%; position: absolute; overflow:hidden;}

.stars{width: 100%; height: 100%; background: url("images/stars.svg") repeat-y scroll 0 0 / 100% auto rgba(0, 0, 0, 0) ; position: relative;}

.sphere{width: 100%; height: 100%; background:url(images/Sphere.png) no-repeat transparent; background-position: center center; background-size: 50% auto; position: absolute; opacity: 0; z-index: 0; }

.conteneur-cosmonaute{width:180px; height:180px; position: absolute; z-index: 2; cursor:help; }
.conteneur-cosmonaute .blabla-cosmonaute{width: 170px; top: 45px; line-height: 22px; padding: 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 5px; color: #024278; position:absolute; z-index: 3; opacity: 0; transition: all 0.3s; font-family: 'Iceland', cursive; font-size: 22px; text-align: center;}
.conteneur-cosmonaute .blabla-cosmonaute a{color: #024278;}
.conteneur-cosmonaute .cosmonaute{width: 146px; height:180px; background: url(images/Cosmo-1.png) no-repeat left bottom / 100% auto transparent; position: relative; z-index: 1; }
.conteneur-cosmonaute:hover .blabla-cosmonaute{opacity: 1;}

.description{position: absolute; width: 100%; top: 20px; z-index: 20;}
.description a{color: #FFF; text-decoration:none; font-size: 15px;}
.description p{font-family: 'nevis-Bold', sans-serif; font-size: 20px; line-height: 30px; text-transform: uppercase; letter-spacing: 2px; color: #FFF; margin: 0; padding: 0; display: block; width: auto;}
.description span{font-size: 26px; line-height: 36px;}
.description .left{float: left; margin-left: 80px;}
.description .middle{margin: 0 auto; float: none; width: 400px; text-align: center; line-height: 26px;}
.description .right{float: right; text-align: right; margin-right: 120px;}

.killerzone{margin: 0 auto; width: 80%; height: 100%; position: relative; overflow: hidden;}
.center{position:relative; background: url("images/center.svg") no-repeat scroll center center / auto 120% rgba(0, 0, 0, 0); height: 100%; margin: 0 auto; width: 100%;}
.center-align{height: 505px; position: absolute; width: 100%; top:50%; margin-top: -340px;}
.comete{background: url("images/comete.gif") no-repeat scroll center bottom / 100% auto rgba(0, 0, 0, 0); height: 355px; margin: 0 auto 25px; width: 310px;}

.anadorelogo{background: url("images/anadorelogo.svg") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); width: 550px; height: 85px; margin: 0 auto 10px; opacity: 0.4;}

.tagline{text-align: center; width: 620px; margin: 0 auto; height: 30px; font-family: 'nevis-bold', sans-serif; font-size: 30px; text-transform: uppercase; color: #FFF;}
.letter{float: left; opacity: 0; margin: 0 2px; }
.letter-space{width: 10px; height: 1px;}

.textbloc{width: 100%; height: 100%; position: absolute; top: 0;}
.controltext{font-family: 'Iceland', cursive; font-size: 14px; letter-spacing: 5px; color: #FFFFFF; opacity: 0.3; position: absolute;}
.ctrltxtborder{border: 1px solid #fff; bottom: 30px; font-size: 10px; left: 320px; padding: 2px 0 2px 6px;}
.ctrltxt1{left: 350px; top: 20px; }
.ctrltxt2{right: 390px; top: 60px;}
.ctrltxt3{right: 110px; top: 270px;}
.ctrltxt4 {right: 50px; top: 410px;}
.ctrltxt5{bottom: 40px; right: 320px;}
.ctrltxt6{bottom: 90px; left: 280px;}
.ctrltxt7{bottom: 200px; left: 150px;}
.ctrltxt8 {top: 330px; left: 10px}
.ctrltxt9{left: 180px; top: 140px;}

.radarbloc{height: 65px; width: 100%; position: absolute; bottom: 68px; opacity: 1; z-index: 20;}
.radar1{width: 75px; height: 65px; background: url("images/radar1.svg") no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0); float: left;}
.radar2{width: 65px; height: 65px; background: url("images/radar2.svg") no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0); margin: 0 auto;}
.radar3{width: 75px; height: 65px; background: url("images/radar1.svg") no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0); float:right;}

.spaceshipsbloc{height: 75px; width: 100%; position: absolute; bottom: 25px; z-index: 20;}
.spaceship1{background: url("images/spaceship1.svg") no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0); float: left; margin-left: 2px; width: 72px; height: 75px;}
.spaceship2{background: url("images/spaceship2.svg") no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0); margin: 0 auto; width: 140px; height: 75px;}
.spaceship3{background: url("images/spaceship3.svg") no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0); float:right; margin-right: 6px; width: 64px; height: 75px;}

.control1{width: 300px; height: 30px; background: url("images/control1.svg") no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0); position: absolute; bottom: 0; left: 40px; opacity: 0.3;}
.control2{width: 50px; height: 50px; background: url("images/control2.svg") no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0); position: absolute; top: 20px; right: 50px;}
.control3{width: 50px; height: 50px; background: url("images/control3.svg") no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0); position: absolute; top: 80px; right: 50px; opacity: 0.6;}
.control4{width: 30px; height: 460px; background: url("images/control4.svg") no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0); position: absolute; top: 0; right: 10px; opacity: 0.5;}

.social {height: 30px; position: absolute; width: 170px; z-index: 21; font-family: 'Iceland', cursive; font-size: 16px; letter-spacing: 5px; color: #FFFFFF; text-transform: uppercase;}
.social img{height:100%;}
.social a{height: 30px; opacity: 0.3; display: block; text-decoration: none; color: #FFFFFF; transition: all 0.2s ease 0s;}
.social a:hover{opacity: 1;}
.social span{display: block; display: none;}

.facebook{float: left; bottom: 20px; left: 50%; margin-left: 80px;}
.facebook a{float: left;}
.facebook img{float: left;}
.facebook span{float: left; padding: 5px 10px;}
.facebook a:hover span{display: inline-block;}

.twitter{float: right; bottom: 20px; left: 50%; margin-left: -250px;}
.twitter a{float: right;}
.twitter img{float: right;}
.twitter span{float: right; padding: 5px 10px;}
.twitter a:hover span{display: inline-block;}

.spacer{clear: both;}

/*************/
/*ANIMATIONS*/
/***********/

/* LETTRES */
.letter{
    animation-name:letter;
    animation-duration:0.5s;
    animation-iteration-count:1;
    animation-timing-function:linear;    
    animation-fill-mode:forwards;
}

@keyframes letter{
    from{opacity:0; margin-top: -15px; }
    to{ opacity:1; margin-top: 0;}
}
@-webkit-keyframes letter{
    from{opacity:0; margin-top: -15px; }
    to{ opacity:1; margin-top: 0;}
}
@-moz-keyframes letter{
    from{opacity:0; margin-top: -15px; }
    to{ opacity:1; margin-top: 0;}
}

.letter-0{animation-delay:0s;}
.letter-1{animation-delay:0.1s;}
.letter-2{animation-delay:0.2s;}
.letter-3{animation-delay:0.3s;}
.letter-4{animation-delay:0.4s;}
.letter-5{animation-delay:0.5s;}
.letter-6{animation-delay:0.6s;}
.letter-7{animation-delay:0.7s;}
.letter-8{animation-delay:0.8s;}
.letter-9{animation-delay:0.9s;}
.letter-10{animation-delay:1s;}
.letter-11{animation-delay:1.1s;}
.letter-12{animation-delay:1.2s;}
.letter-13{animation-delay:1.3s;}
.letter-14{animation-delay:1.4s;}
.letter-15{animation-delay:1.5s;}
.letter-16{animation-delay:1.6s;}
.letter-17{animation-delay:1.7s;}
.letter-18{animation-delay:1.8s;}
.letter-19{animation-delay:1.9s;}
.letter-20{animation-delay:2s;}
.letter-21{animation-delay:2.1s;}
.letter-22{animation-delay:2.2s;}
.letter-23{animation-delay:2.3s;}
.letter-24{animation-delay:2.4s;}


/*STARS*/

@-moz-keyframes stars {
    0% { background-position: 0 0; }
    50% { background-position: 0 -4000px; }
    100% { background-position: 0 0; }
}
@-webkit-keyframes stars {
    0% { background-position: 0 0; }
    50% { background-position: 0 -4000px; }
    100% { background-position: 0 0; }
}
@keyframes stars {
    0% { background-position: 0 0; }
    50% { background-position: 0 -4000px; }
    100% { background-position: 0 0; }
}

.stars{
    -webkit-animation-name: stars;
    -webkit-animation-duration: 1300000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: stars;
    -moz-animation-duration: 1300000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: stars;
    -ms-animation-duration: 1300000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: stars;
    animation-duration: 1300000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
/* ROTATION MAILLES qui partent de droite à gauche et de haut à bas */
@keyframes sphere {
    0% { top:45%; left: 45%; opacity: 0; transform:rotate(0deg); background-size: 35% auto; }
    2% { opacity: 0.15; }
    22%{ opacity: 0.15; }
    24%{ top:45%; left: 45%; opacity: 0; transform:rotate(-15deg); background-size: 35% auto;}
    25%{ top:-45%; left: -45%; opacity: 0; transform:rotate(0deg); background-size: 30% auto; }
    27%{ opacity: 0.15; }
    47%{ opacity: 0.25; }
    49%{ top:-45%; left: -45%; opacity: 0; transform:rotate(10deg); background-size: 30% auto;}
    50%{ top: 45%; left: -45%; opacity: 0; transform:rotate(0deg); background-size: 48% auto;}
    52%{ opacity: 0.15;}
    72%{ opacity: 0.15; }
    74%{ top: 45%; left: -45%; opacity: 0; transform:rotate(20deg); background-size: 48% auto;}
    75%{ top: -45%; left: 45%; opacity: 0; transform:rotate(0deg); background-size: 50% auto;}
    77%{ opacity: 0.15; }
    97%{ opacity: 0.15; }
    99%{ top: -45%; left: 45%; opacity: 0; transform:rotate(-25deg); background-size: 50% auto;}
    100% { opacity: 0; top:45%; left: 45%; transform:rotate(0deg); background-size: 35% auto;}
    
}
@-webkit-keyframes sphere {
    0% { top:45%; left: 45%; opacity: 0; -webkit-transform:rotate(0deg); background-size: 35% auto; }
    2% { opacity: 0.15; }
    22%{ opacity: 0.15; }
    24%{ top:45%; left: 45%; opacity: 0; -webkit-transform:rotate(-15deg); background-size: 35% auto;}
    25%{ top:-45%; left: -45%; opacity: 0; -webkit-transform:rotate(0deg); background-size: 30% auto; }
    27%{ opacity: 0.15; }
    47%{ opacity: 0.25; }
    49%{ top:-45%; left: -45%; opacity: 0; -webkit-transform:rotate(10deg); background-size: 30% auto;}
    50%{ top: 45%; left: -45%; opacity: 0; -webkit-transform:rotate(0deg); background-size: 48% auto;}
    52%{ opacity: 0.15;}
    72%{ opacity: 0.15; }
    74%{ top: 45%; left: -45%; opacity: 0; -webkit-transform:rotate(20deg); background-size: 48% auto;}
    75%{ top: -45%; left: 45%; opacity: 0; -webkit-transform:rotate(0deg); background-size: 50% auto;}
    77%{ opacity: 0.15; }
    97%{ opacity: 0.15; }
    99%{ top: -45%; left: 45%; opacity: 0; -webkit-transform:rotate(-25deg); background-size: 50% auto;}
    100% { opacity: 0; top:45%; left: 45%; -webkit-transform:rotate(0deg); background-size: 35% auto;}
    
}
@-moz-keyframes sphere {
    0% { top:45%; left: 45%; opacity: 0; -moz-transform:rotate(0deg); background-size: 35% auto; }
    2% { opacity: 0.15; }
    22%{ opacity: 0.15; }
    24%{ top:45%; left: 45%; opacity: 0; -moz-transform:rotate(-15deg); background-size: 35% auto;}
    25%{ top:-45%; left: -45%; opacity: 0; -moz-transform:rotate(0deg); background-size: 30% auto; }
    27%{ opacity: 0.15; }
    47%{ opacity: 0.25; }
    49%{ top:-45%; left: -45%; opacity: 0; -moz-transform:rotate(10deg); background-size: 30% auto;}
    50%{ top: 45%; left: -45%; opacity: 0; -moz-transform:rotate(0deg); background-size: 48% auto;}
    52%{ opacity: 0.15;}
    72%{ opacity: 0.15; }
    74%{ top: 45%; left: -45%; opacity: 0; -moz-transform:rotate(20deg); background-size: 48% auto;}
    75%{ top: -45%; left: 45%; opacity: 0; -moz-transform:rotate(0deg); background-size: 50% auto;}
    77%{ opacity: 0.15; }
    97%{ opacity: 0.15; }
    99%{ top: -45%; left: 45%; opacity: 0; -moz-transform:rotate(-25deg); background-size: 50% auto;}
    100% { opacity: 0; top:45%; left: 45%; -moz-transform:rotate(0deg); background-size: 35% auto;}
    
}

.sphere{
    animation-name: sphere;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /*animation-direction: alternate;*/
}

/*COSMONAUTE*/
@keyframes cosmonaute {

    from {transform:rotate(-200deg); }
    to {transform:rotate(520deg); }
}

@-moz-keyframes cosmonaute {

    from {-moz-transform:rotate(-200deg); }
    to {-moz-transform:rotate(520deg); }
}

@-webkit-keyframes cosmonaute {

    from {-webkit-transform:rotate(-200deg); }
    to {-webkit-transform:rotate(520deg); }
}

@keyframes cosmonaute-taille{
    from{background-size: 100% auto;}
    to{background-size: 90% auto;}
}
@-webkit-keyframes cosmonaute-taille{
    from{background-size: 100% auto;}
    to{background-size: 90% auto;}
}
@-moz-keyframes cosmonaute-taille{
    from{background-size: 100% auto;}
    to{background-size: 90% auto;}
}

@keyframes conteneur-cosmonaute{
    from { left: -20%; bottom: 15%; }
    to { left: 105%; bottom: 90%; }
}

@-webkit-keyframes conteneur-cosmonaute{
    from { left: -20%; bottom: 15%; }
    to { left: 105%; bottom: 90%; }
}

@-moz-keyframes conteneur-cosmonaute{
    from { left: -20%; bottom: 15%; }
    to { left: 105%; bottom: 90%; }
}

.cosmonaute{
    -webkit-animation-name: cosmonaute;
    -webkit-animation-duration: 70s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: cosmonaute;
    -moz-animation-duration: 70s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: cosmonaute;
    -ms-animation-duration: 70s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: cosmonaute;
    animation-duration: 70s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.conteneur-cosmonaute:hover .cosmonaute-taille{
    animation-name: cosmonaute-taille;
    animation-play-state: paused;

    -moz-animation-name: cosmonaute-taille;
    -moz-animation-play-state: paused;

    -webkit-animation-name: cosmonaute-taille;
    -webkit-animation-play-state: paused;

    -ms-animation-name: cosmonaute-taille;
    -ms-animation-play-state: paused;
}

.conteneur-cosmonaute{
    -webkit-animation-name: conteneur-cosmonaute;
    -webkit-animation-duration: 70s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: conteneur-cosmonaute;
    -moz-animation-duration: 70s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: conteneur-cosmonaute;
    -ms-animation-duration: 70s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: conteneur-cosmonaute;
    animation-duration: 70s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.conteneur-cosmonaute:hover{
    animation-name: conteneur-cosmonaute;
    animation-play-state: paused;

    -moz-animation-name: conteneur-cosmonaute;
    -moz-animation-play-state: paused;

    -webkit-animation-name: conteneur-cosmonaute;
    -webkit-animation-play-state: paused;

    -ms-animation-name: conteneur-cosmonaute;
    -ms-animation-play-state: paused;
}

/*ROTATION RADAR*/

@-moz-keyframes rotation {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes rotation {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@keyframes rotation {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.rotation{
    -webkit-animation-name: rotation;
    -webkit-animation-duration: 35000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: rotation;
    -moz-animation-duration: 35000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: rotation;
    -ms-animation-duration: 35000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    -o-transition: rotate(3600deg);
}

/*CLIGNOTEMENT*/

@-moz-keyframes flash {
    0% {opacity: 0.2;}
    1% {opacity: 0.7;}
    2% {opacity: 0.2;}
    50% {opacity: 0.2;}
    51% {opacity: 0.7;}
    52% {opacity: 0.2;}
    100% {opacity: 0.2;}
}
@-webkit-keyframes flash {
    0% {opacity: 0.2;}
    1% {opacity: 0.7;}
    2% {opacity: 0.2;}
    50% {opacity: 0.2;}
    51% {opacity: 0.7;}
    52% {opacity: 0.2;}
    100% {opacity: 0.2;}
}
@keyframes flash {
    0% {opacity: 0.2;}
    1% {opacity: 0.7;}
    2% {opacity: 0.2;}
    50% {opacity: 0.2;}
    51% {opacity: 0.7;}
    52% {opacity: 0.2;}
    100% {opacity: 0.2;}
}

.flash{
    -webkit-animation-name: flash;
    -webkit-animation-duration: 10000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: flash;
    -moz-animation-duration: 10000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: flash;
    -ms-animation-duration: 10000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

/*************/
/*RESPONSIVE*/
/***********/

@media screen and (max-height: 1280px) and (max-width: 1200px;) {

    .center{background: url("images/center.svg") no-repeat scroll center center / 100% auto rgba(0, 0, 0, 0);}

}

@media screen and (max-width: 1300px) {

    .ctrltxtborder{display: none;}

}

@media screen and (max-width: 1140px) {

    .sphere{display: none;}
    .description p{font-size: 16px; line-height: 24px;}
    .description .middle{line-height: 16px;}
    .description span{font-size:22px;}
    .description .left{margin-left: 20px;}
    .description .right{margin-right: 20px;}
    .control2,
    .control3,
    .control4,
    .textbloc {display: none;}

}


@media screen and (max-width: 999px) {

    header #menu-menu a:hover{background: none ; color: #FFFFFF;}
    .killerzone{width: 95%; min-width: 95%;width: 95%; margin: 0 auto;}
    .center{width: 100%;}
    .center2{width: 100%;}
    .ctrltxtborder,
    .control1 {display: none;}

}

@media screen and (max-width: 768px) {

    body{background: url("images/stars.svg") #024278;}
    .globalheader,
    .stars{background: transparent;}

    .killerzone{height: auto;}
    .center-align{height: 450px; position: relative; margin-top: 30px;}
    .comete {height: 250px; width: 230px;}
    .anadorelogo {height: 70px; margin: 0 auto 5px; width: 460px;}
    .facebook {margin-left: 15px;}
    .twitter {margin-left: -175px;}
    .description {position: relative; top: auto;}
    .description p.left, .description p.middle, .description p.right{float: none; margin:0 auto 30px; width: 100%; display: block; text-align: center;}

    .conteneur-cosmonaute,
    .spaceshipsbloc,
    .radarbloc{display: none;}

}

@media screen and (max-width: 650px) {
    .center-align{height: 420px}
    .tagline{display: none;}
}

@media screen and (max-width: 480px) {
    .anadorelogo{width: 100%;}

}

@media screen and (max-width: 390px) {

}