@font-face {
font-family:'Audiowide';
src: url('../fonts/Audiowide.woff');
}

@font-face {
font-family:'Jura';
src: url('../fonts/Jura.woff'); }


@font-face {
font-family:'Orbitron';
src: url('../fonts/orbitron.woff2'); }


/**********************************************************************
 GENERIQUE 
**********************************************************************/

/* LINK */
a.link:link, a.link:visited {

        color: black;
        font-family:Jura;
        font-size:calc(0.6vw + 0.6vh + 0.6vmin);
        font-weight: bold;
        text-decoration:none;

        -moz-transition:color 1s ease;
        -o-transition:color 1s ease;
        -webkit-transition:color 1s ease;
        transition:color 1s ease;
}

a.link:hover, a.link:active
{
        color:red;
}

img.double-arrow {

        width:2vw;
        height:1.8vh;
	vertical-align:middle;
	margin-bottom:2px;
}


/**********************************************************************
 HOME PAGE
**********************************************************************/

/* HOME PAGE -> SECTION TITLE */
div.home-title {

        width:100%;
        margin:0px auto;

        color:black;
	padding:0px 0px 2px 0px;
        font-family:Audiowide;
        font-size:calc(0.7vw + 0.7vh + 0.7vmin);
        letter-spacing:0.1vw;
        text-align:left;
        border-bottom:1px solid red;
}

/* HOME PAGE -> WORLDMAP */
img.home-worldmap {

	width:100%;
	border:1px solid red;
	box-shadow:0px 0px 5px 0px black;
}

/* HOME PAGE -> SCREENSHOT */
img.home-screenshot {

	width:100%;
	border:1px solid black;
	box-shadow:0px 0px 5px 0px black;
}

/* HOME PAGE -> PROJETS */
div.home-projet-content {

        width:100%;
        margin:0px auto;
        padding:0px 0px 50px 0px;
        color:black;
        text-align:justify ;
}

div.home-projet-content .logo-container {

        float:left;
        width:19%;
        height:30%;
	margin:0px 10px 0px 0px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
        border:1px solid gray;
        background-color:rgba(0,0,0,0);
}

div.home-projet-content .logo-container img {

        width:100%;
	margin:0 auto;
        padding-top:1vh;
        padding-bottom:1vh;
}


/* HOME PAGE -> DERNIER LAB */
div.home-lab-frame {

        display:block;
        width:100%;
        margin:0px auto;
        padding:0px;

        border:1px solid black;
        border-radius:6px;
        background-color:rgba(255,255,255,1);

        box-shadow:0px 0px 10px 0px gray;
        -moz-box-shadow:0px 0px 10px 0px gray;
        -webkit-box-shadow:0px 0px 10px 0px gray;
        -o-box-shadow:0px 0px 10px 0px gray;

        transition:border-color 1s ease;
        -o-transition:border-color 1s ease;
        -moz-transition:border-color 1s ease;
        -webkit-transition:border-color 1s ease;

        transition:box-shadow 1s ease;
        -o-transition:box-shadow 1s ease;
        -moz-transition:box-shadow 1s ease;
        -webkit-transition:box-shadow 1s ease;
}

div.home-lab-frame:hover, div.home-lab-frame:active {

        border-color:red;
        box-shadow:0px 0px 30px 2px red;
        -moz-box-shadow:0px 0px 30px 2px red;
        -webkit-box-shadow:0px 0px 30px 2px red;
        -o-box-shadow:0px 0px 30px 2px red;
}

div.home-lab-frame div {

        width:100%;
        margin:0px auto;
	padding:20px 20px 20px 15px;

        color:black;
        font-size:calc(0.45vw + 0.45vh + 0.45vmin);
        text-align:justify;

	box-sizing:border-box;
}

div.home-lab-frame img {

        float:left;
        width:6vw;
        margin:0;
        padding-left:0px;
        padding-top:0px;
        padding-bottom:1vh;
        padding-right:2vw;
}

div.home-lab-frame .title {

        color:black;
        font-family:Audiowide;
        font-size:calc(0.6vw + 0.6vh + 0.6vmin);
        letter-spacing:1px;
        text-decoration:underline;
}


/* HOME PAGE -> DERNIER ARTICLES */
img.home-atc-icon {

        float:left;
        width:6vw;
        margin:0;
        padding-left:0;
        padding-top:0;
        padding-bottom:0;
        padding-right:2vw;
}

font.home-atc-title {

        font-family:Jura;
        color:black;
        font-size:calc(0.7vw + 0.7vh + 0.7vmin);
        letter-spacing:0vw;
        text-decoration:underline;
}

font.home-atc-date {

        font-family:Audiowide;
        color:gray;
        font-size:calc(0.5vw + 0.5vh + 0.5vmin);
        letter-spacing:1px;
        text-decoration:none;
}

hr.home-atc-separator
{
        width:100%;
        height:1px;
        margin:35px auto 25px auto;
        color:black;
        border:none;
        background-color:black;
}


/**********************************************************************
 PROJETS HOME PAGE
**********************************************************************/

div.projet-frame {

        display:block;
        width:100%;
        margin:0px auto;
        padding:0px;
        border:1px solid black;
        border-radius:6px;
        background-color:rgba(0,0,0,0.85);

        box-shadow:0px 0px 10px 0px gray;
        -moz-box-shadow:0px 0px 10px 0px gray;
        -webkit-box-shadow:0px 0px 10px 0px gray;
        -o-box-shadow:0px 0px 10px 0px gray;

        transition:border-color 1s ease;
        -o-transition:border-color 1s ease;
        -moz-transition:border-color 1s ease;
        -webkit-transition:border-color 1s ease;

        transition:box-shadow 1s ease;
        -o-transition:box-shadow 1s ease;
        -moz-transition:box-shadow 1s ease;
        -webkit-transition:box-shadow 1s ease;
}

div.projet-frame:hover, div.projet-frame:active {

        border-color:red;
        box-shadow:0px 0px 30px 2px red;
        -moz-box-shadow:0px 0px 30px 2px red;
        -webkit-box-shadow:0px 0px 30px 2px red;
        -o-box-shadow:0px 0px 30px 2px red;
}

div.projet-frame div {

        width:100%;
        margin:0px auto;
	padding:20px 20px 20px 15px;
        color:white;
        font-size:calc(0.45vw + 0.45vh + 0.45vmin);
        text-align:justify;
	box-sizing:border-box;
}

div.projet-frame img {

        float:left;
        width:6vw;
        margin:0;
        padding-left:0px;
        padding-top:0px;
        padding-bottom:1vh;
        padding-right:2vw;
}

div.projet-frame .title {

        font-family:Audiowide;
        font-size:calc(0.6vw + 0.6vh + 0.6vmin);
        letter-spacing:1px;
        text-decoration:underline;
}

/**/
div.pandora-infinity-sign {

	text-align:center;
	padding-top:1.5vh;
	padding-bottom:1vh;
	border-top:1px solid black;
	border-bottom:1px solid black;
}

div.pandora-infinity-sign img {

	width:35%;
	height:10%;
	object-fit:contain;
}

div.pandora-zero-logo {

	text-align:center;
	padding-top:1vh;
	padding-bottom:0vh;
	border-top:1px solid black;
	border-bottom:1px solid black;
}

div.pandora-zero-logo img {

	width:40%;
	object-fit:contain;
}


/**********************************************************************
 MANUAL LINKS
**********************************************************************/
div.manual-frame {

        display:block;
        width:100%;
        margin:0px auto;
	padding-top:1vh;
	padding-bottom:1vh;


        border:1px solid black;
        border-radius:6px;
        background-color:rgba(0,0,0,0.8);

        transition:border 1s ease, box-shadow 1s ease;
        -o-transition:border 1s ease, box-shadow 1s ease;
        -moz-transition:border 1s ease, box-shadow 1s ease;
        -webkit-transition:border 1s ease, box-shadow 1s ease;
}

div.manual-frame:hover, div.manual-frame:active {

        border-color:red;
        box-shadow:0px 0px 30px 2px red;
        -moz-box-shadow:0px 0px 30px 2px red;
        -webkit-box-shadow:0px 0px 30px 2px red;
        -o-box-shadow:0px 0px 30px 2px red;
}

A.manual-select:link, A.manual-select:visited {

	display:block;
        width:100%;
        height:100%;
        text-decoration:none;
}

div.manual-icon {

	display:inline-block;
	vertical-align:middle;
        width:15%;
        height:100%;
}

div.manual-icon span {

        display:flex;
        align-items:center;
        justify-content:center;
        height:100%;
        width:100%;
}

div.manual-icon span img {

	width:10vh;
	height:10vh;
	object-fit:contain;
}

div.manual-content {

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

        width:81%;
        margin:0px auto;
	padding:0vh 0vw 0vh 0vw;

        color:white;
        font-size:calc(0.45vw + 0.45vh + 0.45vmin);
        text-align:justify;
	box-sizing:border-box;
}

div.manual-content .manual-title {

	display:inline-block;
	margin:0vh 0 1vh 0;

        color:white;
        font-family:Audiowide;
        font-size:calc(0.6vw + 0.6vh + 0.6vmin);
        letter-spacing:1px;
        text-decoration:underline;
}



/**********************************************************************
 SERVICES HOME PAGE
**********************************************************************/
div.svc-frame {

        display:block;
        width:100%;
        margin:0px auto;
        padding:0px;

        border:1px solid black;
        border-radius:6px;
        background-color:rgba(255,255,255,1);

        box-shadow:0px 0px 10px 0px gray;
        -moz-box-shadow:0px 0px 10px 0px gray;
        -webkit-box-shadow:0px 0px 10px 0px gray;
        -o-box-shadow:0px 0px 10px 0px gray;

        transition:border-color 1s ease;
        -o-transition:border-color 1s ease;
        -moz-transition:border-color 1s ease;
        -webkit-transition:border-color 1s ease;

        transition:box-shadow 1s ease;
        -o-transition:box-shadow 1s ease;
        -moz-transition:box-shadow 1s ease;
        -webkit-transition:box-shadow 1s ease;
}

div.svc-frame:hover, div.svc-frame:active {

        border-color:red;
        box-shadow:0px 0px 30px 2px red;
        -moz-box-shadow:0px 0px 30px 2px red;
        -webkit-box-shadow:0px 0px 30px 2px red;
        -o-box-shadow:0px 0px 30px 2px red;
}

div.svc-frame div {

        width:100%;
        margin:0px auto;
	padding:20px 20px 20px 15px;

        color:black;
        font-size:calc(0.45vw + 0.45vh + 0.45vmin);
        text-align:justify;

	box-sizing:border-box;
}

div.svc-frame img {

        float:left;
        width:6vw;
        margin:0;
        padding-left:0px;
        padding-top:0px;
        padding-bottom:1vh;
        padding-right:2vw;
}

div.svc-frame .title {

        color:black;
        font-family:Jura;
        font-size:calc(0.5vw + 0.5vh + 0.5vmin);
	font-weight:bold;
        letter-spacing:0px;
        text-decoration:underline;
}


/* SERVICE PAGES */
div.svc-categorie {

        width:100%;
        margin:0px auto;

        color:black;
	padding:0px 0px 2px 0px;
        font-family:Audiowide;
        font-size:calc(0.6vw + 0.6vh + 0.6vmin);
        letter-spacing:0.1vw;
        text-align:left;
        border-bottom:1px solid gray;
}

div.svc-categorie img {

	width:calc(1vw + 1vh + 1vmin);
	height:calc(1vw + 1vh + 1vmin);
	vertical-align:bottom;
}

a.svc-link {

	color:black;
	font-family:Jura;
	font-size:calc(0.6vw + 0.6vh + 0.6vmin);
	letter-spacing:0vw;
	text-decoration:none;

	transition:color 1s ease;
	-o-transition:color 1s ease;
        -moz-transition:color 1s ease;
        -webkit-transition:color 1s ease;
}

a.svc-link:hover {

	color:red;
}

div.svc-content-logo-container {

        float:left;
        width:15%;
        height:20%;
	margin:0px 10px 0px 0px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
        border:1px solid lightgray;
        background-color:rgba(0,0,0,0);
}

div.svc-content-logo-container img {

        width:100%;
	margin:0 auto;
        padding-top:1vh;
        padding-bottom:1vh;
}


/**********************************************************************
 ARTICLES HOME PAGE
**********************************************************************/
div.atc-categorie {

        width:100%;
        margin:0px auto;

        color:black;
	padding:0px 0px 2px 0px;
        font-family:Audiowide;
        font-size:calc(0.6vw + 0.6vh + 0.6vmin);
        letter-spacing:0.1vw;
        text-align:left;
        border-bottom:1px solid gray;
}

div.atc-categorie img {

	width:calc(1vw + 1vh + 1vmin);
	height:calc(1vw + 1vh + 1vmin);
	vertical-align:bottom;
}

div.atc-categorie span {

	float:right;
	color:red;
}

a.atc-link {

	color:black;
	font-family:Jura;
	font-size:calc(0.6vw + 0.6vh + 0.6vmin);
	letter-spacing:0vw;
	text-decoration:none;

	transition:color 1s ease;
	-o-transition:color 1s ease;
        -moz-transition:color 1s ease;
        -webkit-transition:color 1s ease;
}

a.atc-link:hover {

	color:red;
}

/*  */
div.atc-picture {

	width:100%;
	padding:10px 0;
	border:1px solid black;
	box-shadow:0px 0px 5px 0px black;
}

div.atc-picture img {

        display:flex;
        align-items:center;
        justify-content:center;
	margin:0 auto;
	height:100%;
}

/**/
div.pic-legend {

	text-align:center;
	color:black;
        font-family:Jura;
        font-size:14px;
}



/**********************************************************************
 FX
**********************************************************************/
div.fadein  {

    -webkit-animation: fadein 800ms; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 800ms; /* Firefox < 16 */
        -ms-animation: fadein 800ms; /* Internet Explorer */
         -o-animation: fadein 800ms; /* Opera < 12.1 */
            animation: fadein 800ms;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* */
.comingsoon{

	color:black;
	font-family:Consolas, Monaco, 'Andale Mono', monospace;

	position: relative;
	top:50%;  
	width:15em;
	margin:0 auto;
	border-right:4px solid rgba(0,0,0,1);

	font-size:180%;
	text-align:center;
	white-space:nowrap;
	overflow:hidden;
	transform:translateY(-50%);    
}

.anim-typewriter{
	animation: typewriter 2s steps(27) 0.5s 1 normal both, blinkTextCursor 600ms steps(27) infinite normal;
}
@keyframes typewriter{
	from{width: 0;}
	to{width: 15em;}
}
@keyframes blinkTextCursor{
	from{border-right-color: rgba(255,0,0,1);}
	to{border-right-color: transparent;}
}