body {
    background: darkslategrey;
  background: white;
  /*-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;*/
  margin-top: 0;
  margin-bottom: 0;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}


/* ******************************************************************************************************* */
/* > iPad Size -- start*/
/*@media (min-width: 1081px) {*/
@media (min-width: 500px) {
 
   :root {
      --mediaHeight: 25vh;
      --conHeight: 50vh;
      --varTop: 6vh; /*min(5vh,70px);  */
      --varBottom: 5vh;
      --varFontSizeH1: 4vh;   
      --varFontSizeH2: 2.5vh;
      --varFontSizeH3: 2.5vh;
      --varFontSizeText: 2vh;
      --varFontSizeLogo: 3.5vh;
      --varFontSizeTitle: 5px;
      --varFontSizeBottom: 1.5vh;
      --varFontSizeLang: 1vh;
      --varH1Padding: 12vh;
      --varMaxWidth: 1700px;
      --varContWidth: min(60vw,calc(0.6*var(--varMaxWidth)));
      --varMediaWidth: min(40vw,calc(0.4*var(--varMaxWidth)));
      --varMenuTopFontSize: 18px;
      --varMenuTopElementMargin: min(4vw,80px);
      }

    #centerContainer{
      width: min(100vw,calc(var(--varMaxWidth)));
      margin-left:  auto;
      margin-right: auto;
      padding-left: 0;
      padding-right: 0;
      }

    .topnav {
      display: none;
    }

    .rowElementLast{
      display: grid;
      height:  auto; 
      max-width:  var(--varMaxWidth);
      margin-bottom: max(2vw,4vh);
     }

    .rowElement{
      display: grid;
      /*grid-template-rows: max-content;*/
      height:  auto; 
      max-width:  var(--varMaxWidth);
      margin-bottom: max(2vw,4vh); 
    }

    .video-box {
      grid-column: 1;
      grid-row: 1;
      background-color: darkslategrey;
      height:  100%; /*var(--mediaHeight);*/
      width:  var(--varMediaWidth);
      overflow:  hidden;
      padding:  0;
      margin-top: 0;
      overflow: hidden;
      background-image: url('../img/trading2.jpg');
      background-size: 100% 100%;
    }

    #myVideo{
      height: 100%;
      width: 100%;
      top: 0; 
      left: 0;
      /*background-size: cover;*/
      overflow: hidden;
          
    }

    .video-box_overlay {
        grid-column: 1;
        grid-row: 1;
        animation:  fadeOutVideo;
        animation-duration: 15s;
        animation-timing-function: ease;
        animation-delay:  0s;
        animation-fill-mode: forwards;
        width: var(--varMediaWidth);
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 4;
        text-align: center;
    }

    p{
      /*font-size: var(--varFontSizeText);*/
    }

    h1{
      margin:auto;
      vertical-align:middle;
      text-decoration: none;
      font-weight: bold;
      font-family: sans-serif, 'Roboto';
      color: white;
      text-transform: uppercase;
      font-size: 3rem;
      padding-top: var(--varH1Padding);
      z-index: 2;
       }

     h2{
      margin:auto;
      vertical-align:middle;
      text-decoration: none;
      font-weight: bold;
      font-family: sans-serif;
      color: white;
      text-transform: uppercase;
      font-size: 1.5rem;
      font-weight:  100;
      z-index: 3;
     }

     .tradingContent {
      grid-column: 2;
      grid-row: 1;
      top: calc(5px + var(--mediaHeight));
      right: 2vw;
      height: auto; /*var(--conHeight);*/
      width: var(--varContWidth);
      font-size: 1.0rem;
      color: white;
      resize: none;
      background:  radial-gradient(#3b6363, #2F4F4F);
      font-family: 'Syncopate', sans-serif;
      text-align: left;
      z-index: 4;
     
     }

  

    .techContent {
      grid-column: 2;
      grid-row: 1;
      right: 2vw;
      height: auto; /*var(--conHeight);*/
      width: var(--varContWidth); 
      color: white;
      font-size: var(--fontSizeText);  
      resize: none;
      background-color: darkslategrey;
      /*background-color: rgba(0, 0, 0, 0.4);*/
      font-family: 'Syncopate', sans-serif;
      text-align: left;
      z-index: 4;
    }

    @keyframes fadeOutVideo {
      from {background-color: rgba(0, 0, 0, 0.2)}
      to {background-color: rgba(0, 0, 0, 0.4)}
    }


    /*.serviceImg_overlay {
      grid-column: 1;
      grid-row: 1;
      top:  calc(20vh + 5vw + 33vh - (10vw / 3));
      right:  0;
      height: auto;
      width: calc(96%);
      background-color: rgba(0, 0, 0, 0.4);
       z-index: 4;
    }*/


    .video-container .filter {
        z-index: 100;
       background: rgba(255, 255, 255, 0.4);
        width: 100%;
    }

     .serviceContent {
      grid-column: 1;
      grid-row: 1;
      width: var(--varContWidth);
      height:  auto; 
      color: white;
      font-size: var(--fontSizeText);  
      resize: none;
      background: linear-gradient(#3b6363, darkslategrey);
      font-family: 'Syncopate', sans-serif;
      text-align: left;
      z-index: 4;
    }

    #serviceImage {
      width: 50%;
      height: 50%;
    }

    .serviceImg{
      grid-column: 2;
      grid-row: 1;
      left: 2vw;
      width: var(--varMediaWidth);
      /*background-color: red;*/
      overflow: hidden;
      background-image: url('../img/services3.jpg');
      background-size: 100% 100%;
  
    }

    .techImg Img{
      width: 100%;
      height: 100%;
     }

    .techImg{
      grid-column: 1;
      grid-row: 1;
      left: 2vw;
      height: inherit;/*var(--mediaHeight);*/
      width:var(--varMediaWidth);
      overflow: hidden;
      background-image: url('../img/tech5.jpg');
      background-size: 100% 100%;
    }

     .cLogo{
      display: none;
       position: absolute;
      top:  1vh;
      left:  2vw;
      height: 3.8vw;
      width: 5vw;
      overflow: hidden;
      background-image: url('../img/comapny_logo_temp.png');
      background-size: 100% 100%;
    }

    .wrapperTop{
      position: fixed;
      display: flex;
      align-content: left;
      /*margin-top: 1vh;*/
      padding: 0;
      height: var(--varTop);
      z-index: 7;
      background: white;
      width: min(100vw,calc(var(--varMaxWidth)));
    }

    .spacer{
      height: var(--varTop);
      width: 100%;
      background-color: white;
    }

      .myLogo {
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-top: 0.8vh;
      margin-left: 1vw;
      height: var(--varTop);
      font-size: var(--varFontSizeLogo);
      color:  darkslategrey;
      /*width: 8vw;*/
      /*padding: 1.25vw;*/
      font-family: 'Syncopate', sans-serif;
      text-align: left;
      text-decoration: none;
      font-weight: bold;
      z-index: 4;
    }

    .menuTop {
      height: var(--varTop);
      color: darkslategrey;
      font-family: 'Syncopate', sans-serif;
      text-align: center;
      z-index: 3;
    }

    .menuTop nav{  
      margin-left: 5vw;
      height: var(--varTop);
      display: flex;
      align-items: center;
      justify-content: left;
    }

    .menuTop a {
      color: darkslategrey;
      margin-right:  var(--varMenuTopElementMargin);
      margin-top: 1vh;
      text-decoration: none;
      float: left;
      font-size: --varMenuTopFontSize
    }

    #firstElement{
      margin-left: 0;
    }

    .menuTop a:hover {
      font-weight: 600;
    }

    .menuLang {
      height: var(--varTop);
      color: darkslategrey;
      margin-left: auto;
      margin-top: 2vh;
      font-family: 'Syncopate', sans-serif;
      text-align: center;
       z-index: 3;
    }

    .menuLang nav{
      margin-right: 3vw;

    }


    .menuLang a {
      color: darkslategrey;
      margin-left:  2vw;
      margin-top: 0;
      text-decoration: none;
      float: right;
      font-size: font-size: min(0.9vw,18px);
    }

    .menuLang a:hover {
      font-weight: 600;
    }


    .alignTexts{
      grid-column: 1;
      grid-row: 1;
      background: rgba(0, 0, 0, 0.0);
      height: var(--mediaHeight);
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      text-align: center;
    }

    .artStyle h3{
      
      font-size: var(--varFontSizeH3);
      font-weight: 300;
      /*font-family: 'Syncopate', sans-serif;*/
      
      font-style: italic;
      margin-bottom: 1vw;
      margin-top: 1vw;
      word-break: normal;
      font-family: "Roboto";
      font-weight: 400;
    }

    .myList{
       list-style-type: square;
  
    }

    .myList li{
      margin-top: 1vw;
      
    }

    .artStyle{
      padding: 2% 5%;
      /*text-align: justify;*/
     
    }

    .menuBottom {
        /*background-color: darkslategrey;*/
        background: linear-gradient(#3b6363, darkslategrey);
        width: min(100vw,var(--varMaxWidth));
        height: var(--varBottom);
        bottom: 0px;
        font: white;

      }

    .menuBottom nav {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;
      width: auto;
      height: var(--varBottom);
      font-family: 'Syncopate', sans-serif;
      } 

    .menuBottom a {
      margin-left:  2vw;
      margin-right: 2vw;
      text-decoration: none;
      font-size: var(--varFontSizeBottom);
      color: white;
      float: left;
      text-align: center;
    }

    .menuBottom a:hover {
      font-weight: 600;
      cursor: default;
      
    }

}
/* > iPad Size -- END*/

/* ******************************************************************************************************* */
/* iPad Size -- start*/
/*@media (min-width: 500px) and (max-width: 559px) {
 
   

}
/* iPad Size -- END*/

/* ******************************************************************************************************* */
/* < iPad Size -- start*/
@media (min-width: 0px) and (max-width: 499px) {
 
    :root {
      --mediaHeight: 25vh;
      --conHeight: 50vh;
      --varTop: 6vh;  
      --varBottom: 5vh;
      --varFontSizeH1: 3vh;   
      --varFontSizeH2: 2vh;
      --varFontSizeH3: 2.5vh;
      --varFontSizeText: 2vh;
      --varFontSizeLogo: 2.5vh;
      --varFontSizeTitle: 5px;
      --varFontSizeBottom: 15px;
      --varFontSizeLang: 12px;
      --varH1Padding: 9vh;
      --varMenuTopFontSize: 10px;
      --varMenuTopElementMargin: min(8vw,80px);
      }

    #centerContainer{
      /*position:  absolute;
      top: 0;*/
      width: min(100vw,calc(var(--varMaxWidth)));
      /*margin-left:  auto;
      margin-right: auto;
      padding-left: 1vw;
      padding-right: 2vw;*/
      margin-top: 50px;
      padding-top: 0;

      }

    .rowElementLast{
      display: grid;
      height:  auto; 
      width:  100%;
      margin-bottom: 0; /*max(2vw,4vh); */
      }

    .rowElement{
      display: grid;
      height:  auto; 
      width:  100%;
      margin-bottom: max(2vw,4vh); 
    }

    .video-box {
      grid-column: 1;
      grid-row: 1;
      background-color: darkslategrey;
      height:  var(--mediaHeight);
      width:  100%;
      overflow:  hidden;
      padding:  0;
      margin-top: 0;
         overflow: hidden;
      background-image: url('../img/trading2.jpg');
      background-size: 100% 100%;
    }

    #myVideo{
      height: 100%;
       top: 0; 
      left: 0;
      /*background-size: cover;*/
      overflow: hidden;
          
    }

    .video-box_overlay {
        grid-column: 1;
        grid-row: 1;
        animation:  fadeOutVideo;
        animation-duration: 15s;
        animation-timing-function: ease;
        animation-delay:  0s;
        animation-fill-mode: forwards;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 4;
        text-align: center;
    }

    p{
      font-size: var(--varFontSizeText);
    }

    h1{
      margin:auto;
      vertical-align:middle;
      text-decoration: none;
      font-weight: bold;
      font-family: 'Syncopate', sans-serif;
      color: white;
      text-transform: uppercase;
      font-size: var(--varFontSizeH1);
      padding-top: var(--varH1Padding);
      z-index: 2;
     }

     h2{
      margin:auto;
      vertical-align:middle;
      text-decoration: none;
      font-weight: bold;
      font-family: 'Syncopate', sans-serif;
      color: white;
      text-transform: uppercase;
      font-size: var(--varFontSizeH2);
      font-weight:  100;
      z-index: 3;
     }

     .tradingContent {
      grid-column: 1;
      grid-row: 2;
      top: calc(5px + var(--mediaHeight));
      right: 2vw;
      height: auto; /*var(--conHeight);*/
      width: 100%;
      font-size: var(--fontSizeText);
      color: white;
      resize: none;
      background:  radial-gradient(#3b6363, darkslategrey);
      font-family: 'Syncopate', sans-serif;
      text-align: left;
      z-index: 4;
    }

    .serviceContent {
      grid-column: 1;
      grid-row: 2;
      width: 100%;
      height:  auto; /*var(--conHeight);*/
      color: white;
      font-size: var(--fontSizeText);  
      resize: none;
      background: linear-gradient(#3b6363, darkslategrey);
      font-family: 'Syncopate', sans-serif;
      text-align: left;
      z-index: 4;
    }

    .techContent {
      grid-column: 1;
      grid-row: 2;
      t/*op: calc(var(--varTop) + 3*var(--mediaHeight) + 2* var(--conHeight));*/
      right: 2vw;
      height: auto; /*var(--conHeight);*/
      width: 100%; 
      color: white;
      font-size: var(--fontSizeText);  
      resize: none;
      background-color: darkslategrey;
      /*background-color: rgba(0, 0, 0, 0.4);*/
      font-family: 'Syncopate', sans-serif;
      text-align: left;
      z-index: 4;
    }

    @keyframes fadeOutVideo {
      from {background-color: rgba(0, 0, 0, 0.2)}
      to {background-color: rgba(0, 0, 0, 0.4)}
    }

    .video-container .filter {
        z-index: 100;
       background: rgba(255, 255, 255, 0.4);
        width: 100%;
    }


    #serviceImage{
      height: 100%;
      width: 100%;
    }

    .serviceImg{
      grid-column: 1;
      grid-row: 1;
      left: 2vw;
      height: var(--mediaHeight);
      width: 100%;
      overflow: hidden;
      background-image: url('../img/services3.jpg');
      background-size: 100% 100%;
    }

    #techImage{
      height: 100%;
      width: 100%;
    }

    .techImg{
      grid-column: 1;
      grid-row: 1;
      left: 2vw;
      height: var(--mediaHeight);
      width: 100%;
      overflow: hidden;
      background-image: url('../img/tech5.jpg');
      background-size: 100% 100%;
    }


    .alignTexts{
      grid-column: 1;
      grid-row: 1;
      background: rgba(0, 0, 0, 0.3);
      height: var(--mediaHeight);
      width: 100%;
      top: 0;
      left: 0;
      text-align: center;
    }

    .artStyle h3{
      
      font-size: var(--varFontSizeH3);
      font-weight: 300;
      /*font-family: 'Syncopate', sans-serif;*/
      font-family: "Avenir Next LT W01 Demi","Avenir Next LT Com","Helvetica Neue",Helvetica;
      font-style: italic;
      margin-bottom: 1vw;
      margin-top: 1vw;
      word-break: normal;
    }

    .myList{
       list-style-type: square;
       font-size: var(--varFontSizeText);
    }

    .myList li{
      margin-top: 1vw;
      
    }

    .artStyle{
      padding: 2% 5%;
      /*text-align: justify;*/
      line-height: 1.2;
    }


}
/* < iPad Size -- END*/