:root
  {

  }

  .svgX{ position: ; cursor: pointer;}
  #svgLanding{ width: inherit;}
  #dvTitleLanding{ text-align: center; }
  #landing{ color: white;}

/************************************  1800 >>> +& *****************************************************/

  @media(min-width: 1800px) and (orientation: landscape)
  {
    svg{ width: 5vw; margin-top: 9vh; margin-left: 9vw}
    #svg2{  width: 4.2vw; margin-top: 9.5vh}
    #svg3{  width: 4.2vw; margin-top: 9.8vh}

    #landing
    {
      background-color: ; width: 90vw; height: 90vh;
      margin-left: 5vw; font-size: calc(1.9vh + 1.9vw);
    } 

    #svgLanding{ height: 35vh; width: 100%; background-color: ;}
    .svgX{ width: 25%;  height: inherit;}
    .svgX:nth-child(1){ margin-left: 0vw; margin-top: 0vh}
    .svgX:nth-child(2){ margin-left: 25%; margin-top: -35vh}
    .svgX:nth-child(3){ margin-left: 50%; margin-top: -35vh;}
    .svgX:nth-child(4){ margin-left: 75%; margin-top: -35vh;}
  }

/************************************  1000 >>> 1800 *****************************************************/

  @media(min-width: 1000px) and (max-width: 1799px) and (orientation: landscape)
  {
    svg{ width: 5vw; margin-top: 9vh; margin-left: 9vw}
    #svg2{  width: 4.2vw; margin-top: 9.5vh}
    #svg3{  width: 4.2vw; margin-top: 9.8vh}

    #landing
    {
      background-color: ; width: 90vw; height: 90vh;
      margin-left: 5vw; font-size: calc(1.9vh + 1.9vw);
    } 

    #svgLanding{ height: 35vh; width: 100%; background-color: ;}
    .svgX{ width: 25%;  height: inherit;}
    .svgX:nth-child(1){ margin-left: 0vw; margin-top: 0vh}
    .svgX:nth-child(2){ margin-left: 25%; margin-top: -35vh}
    .svgX:nth-child(3){ margin-left: 50%; margin-top: -35vh;}
    .svgX:nth-child(4){ margin-left: 75%; margin-top: -35vh;}
  }

/************************************  100 >>> 1000 *****************************************************/

  @media(min-width: 100px) and (max-width: 999px) and (orientation: landscape)
  {
    svg{ width: 5vw; margin-top: 9vh; margin-left: 9vw}
    #svg2{  width: 4.2vw; margin-top: 9.5vh}
    #svg3{  width: 4.2vw; margin-top: 9.8vh}

    #landing
    {
      background-color: ; width: 90vw; height: 90vh;
      margin-left: 5vw; font-size: calc(1.9vh + 1.9vw);
    } 

    #svgLanding{ height: 35vh; width: 100%; background-color: ;}
    .svgX{ width: 25%;  height: inherit;}
    .svgX:nth-child(1){ margin-left: 0vw; margin-top: 0vh}
    .svgX:nth-child(2){ margin-left: 25%; margin-top: -35vh}
    .svgX:nth-child(3){ margin-left: 50%; margin-top: -35vh;}
    .svgX:nth-child(4){ margin-left: 75%; margin-top: -35vh;}
  }


/**********************************************************************************************
                        PORTRAIT  PORTRAIT  PORTRAIT  PORTRAIT  PORTRAIT
**********************************************************************************************/
/************************************ <<< 500 ************************************************/

@media(max-width: 500px) and (orientation: portrait)
  {
   :root{ --a: -17.4vh;}

    svg{ width: 18vw; margin-top: 9vh; margin-left: 9vw}
    #svg2{  width: 18.4vw; margin-top: 9.5vh}
    #svg3{  width: 17.6vw; margin-top: 9.8vh}

    #landing
    {
      background-color: ; width: 96vw; height: 90vh;
      margin-left: 2vw; font-size: calc(2.2vh + 2.2vw);
    } 

    #svgLanding{ height: 35vh; width: 100%; background-color: ;}
    .svgX{ width: 25%;  height: inherit}
    .svgX:nth-child(1){ margin-left: 28vw; margin-top: -6vh}
    .svgX:nth-child(2){ margin-left: 28vw; margin-top: var(--a);}
    .svgX:nth-child(3){ margin-left: 29vw; margin-top: var(--a);}
    .svgX:nth-child(4){ margin-left: 29vw; margin-top: var(--a);} 
  }

/************************************  500 >>> 700 *****************************************************/

@media(min-width: 500px) and (max-width: 699px) and (orientation: portrait)
  {
   :root{ --a: -17.4vh;}

    svg{ width: 15vw; margin-top: 9vh; margin-left: 9vw}
    #svg2{  width: 14vw; margin-top: 9.5vh}
    #svg3{  width: 13.4vw; margin-top: 9.8vh}

    #landing
    {
      background-color: ; width: 90vw; height: 90vh;
      margin-left: 5vw; font-size: calc(2.7vh + 2.7vw);
    } 

    #svgLanding{ height: 35vh; width: 100%;}
    .svgX{ width: 25%;  height: inherit}
    .svgX:nth-child(1){ margin-left: 27vw; margin-top: -6vh}
    .svgX:nth-child(2){ margin-left: 27vw; margin-top: var(--a);}
    .svgX:nth-child(3){ margin-left: 27vw; margin-top: var(--a);}
    .svgX:nth-child(4){ margin-left: 27vw; margin-top: var(--a);} 
  }

/************************************  700 >>> 900 *****************************************************/


@media(min-width: 700px) and (max-width: 900px) and (orientation: portrait)
  {

   :root{ --a: -17.4vh;}

    svg{ width: 15vw; margin-top: 9vh; margin-left: 9vw}
    #svg2{  width: 14vw; margin-top: 9.5vh}
    #svg3{  width: 13.4vw; margin-top: 9.8vh}

    #landing
    {
      background-color: ; width: 90vw; height: 90vh;
      margin-left: 5vw; font-size: calc(2.7vh + 2.7vw);
    } 

    #svgLanding{ height: 35vh; width: 100%; background-color: ;}
    .svgX{ width: 25%;  height: inherit}
    .svgX:nth-child(1){ margin-left: 27vw; margin-top: -6vh}
    .svgX:nth-child(2){ margin-left: 27vw; margin-top: var(--a);}
    .svgX:nth-child(3){ margin-left: 27vw; margin-top: var(--a);}
    .svgX:nth-child(4){ margin-left: 27vw; margin-top: var(--a);}
  }

/************************************ 900 >>> *****************************************************/

@media(min-width: 700px) and (max-width: 900px) and (orientation: portrait)
  {

   :root{ --a: -17.4vh;}

    svg{ width: 15vw; margin-top: 9vh; margin-left: 9vw}
    #svg2{  width: 14vw; margin-top: 9.5vh}
    #svg3{  width: 13.4vw; margin-top: 9.8vh}

    #landing
    {
      background-color: ; width: 90vw; height: 90vh;
      margin-left: 5vw; font-size: calc(2.7vh + 2.7vw);
    } 

    #svgLanding{ height: 35vh; width: 100%; background-color: ;}
    .svgX{ width: 25%;  height: inherit}
    .svgX:nth-child(1){ margin-left: 27vw; margin-top: -6vh}
    .svgX:nth-child(2){ margin-left: 27vw; margin-top: var(--a);}
    .svgX:nth-child(3){ margin-left: 27vw; margin-top: var(--a);}
    .svgX:nth-child(4){ margin-left: 27vw; margin-top: var(--a);}
  }