/*css reset below*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
/* colors:
#020231 = dk blue
#F2F2F2 = gray bkgd
*/
@font-face {
    font-family: OpenSans-Light;
    src: url("../fonts/OpenSans-Light.ttf") format("truetype");
}
@font-face {
    font-family: OpenSans-Regular;
    src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
    font-family: BodoniSvtyTwoITCTT-Book;
    src: url("../fonts/BodoniSvtyTwoITCTT-Book.ttf") format("truetype");
}

/*bootstrap size: xl*/
@media screen and (min-width: 1200px) {
  html{font-size: 16px;}
  #r2img,svg{
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 0;}
  .logotag{font-size:clamp(175px, 10 * (1vw + 1vh)/1.3, 200px);}
  .brandlogo:not(#shelllogolg){transform: scale(0.9,0.9) ;}
  #shelllogolg{transform: scale(0.8);}
  .greet{  font-size: clamp(15px, 10 * (1vw + 1vh) , 1.25rem);}
}

/*bootstrap size: lg*/
@media screen and (max-width: 1199px) and (min-width: 992px) {
  html{font-size: 14px;}
  #r2img,svg{
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 0;}
  .logotag{font-size:clamp(150px, 10 * (1vw + 1vh) / 2, 175px);}
  .brandlogo:not(#shelllogolg){transform: scale(0.9,0.9) ;}
  #shelllogolg{transform: scale(0.8);}
  .greet{  font-size: clamp(15px, 10 * (1vw + 1vh) , 1.15rem);}
}
/*bootstrap size: md*/
@media screen and (max-width: 991px) and (min-width: 768px) {
  html{font-size: 12px;}
  #r2img,svg{
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    max-height: 60vw;}
  .logotag{font-size:clamp(125px, 10 * (1vw + 1vh) / 2, 150px);}
  .greet{ font-size: clamp(15px, 10 * (1vw + 1vh) , 1.35rem);}
}
/*bootstrap size: sm*/
@media screen and (max-width: 767px) and (min-width: 576px) {
  html{font-size: 10px;}
  #r2img,svg{
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    max-height: 60vw;}
  .logotag{font-size:clamp(100px, 10 * (1vw + 1vh) / 2, 125px);}
  .brandlogo:not(#shelllogosm){transform: scale(0.9);}
  #shelllogosm{transform: scale(1.1, 1.1);}
  .greet{  font-size: clamp(15px, 10 * (1vw + 1vh) , 1.25rem);}
}
/*bootstrap size: xs(default)*/
@media screen and (max-width: 575px) {
  html{font-size: 8px;}
  #r2img,svg{
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    max-height: 60vw;}
  .logotag{font-size: clamp(40px, 10 * (1vw + 1vh) / 2, 100px);}
  .brandlogo:not(#shelllogosm){transform: scale(0.9);}
  #shelllogosm{transform: scale(1.2, 1.2);}
  .greet{  font-size: clamp(15px, 10 * (1vw + 1vh) , 1.25rem);}
}

.osl{font-family: OpenSans-Light;}
.osr{font-family: OpenSans-Regular;}
.b72b{font-family: BodoniSvtyTwoITCTT-Book;}

html{height:100%;min-width:100%;}
body{
  height:100%;
  width:100%;
  overflow-x: hidden;
  background-color: #f2f2f2;
}

a{
  text-decoration: none;
  color: white;}
a:hover, a:active {
  text-decoration: none;
  color: inherit;
}
#bkg{
  position:absolute;
  width: 100%;
  background: url('../media/mbpattern.png'), rgba(242, 242, 242, 0)   /*#f2f2f2*/;
  z-index: 1;
}
.row {
  padding:0;
  margin:0;
}
.tbl{
  color: black;
}

#introw{
  position: relative;
  background-color: #020231;
  min-width:100%;
  min-height:55vh;
  max-height:90vh;
  height:75vw;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  box-shadow: 0px 2px 7px #000;
  z-index: 2;
  overflow-y: hidden;
  overflow-x: hidden;
}
#outrow{
  background-color: #020231;
  margin-top: 15vh;
  min-width: 100%;
  min-height: 60vh;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  box-shadow: 0 2px 7px #000;
  z-index: 2;
  overflow-y: hidden;
  overflow-x: hidden;
  position: relative;
  color:white;
}

.logotag{
  max-width: 100%;
  letter-spacing: 0.625rem; /* 10px */
  color: rgba(256, 256, 256, .1);
  line-height: 1;

}

#intratag{
  width: 100%;
  color: white;
  font-size: clamp(15px, 10 * (1vw + 1vh) / 2, 1.8rem); /* <42px */
  line-height: clamp(20px, 10 * (1vw + 1vh) / 2, 3.87rem);
}

#outro{
  color:white;
}
#outrotag1{
  font-size: clamp(20px, 10 * (1vw + 1vh) / 2, 2.5rem);
  line-height: clamp(30px, 10 * (1vw + 1vh) / 2, 1);
}
#outrotag2,#outrotag3{
  /*font-size: max(13px, 1.12rem); !* 18px *!*/
  font-size: clamp(15px, 10 * (1vw + 1vh) / 2, 1.12rem);
  line-height: clamp(20px, 10 * (1vw + 1vh) / 2, 1.87rem);
}
#signature{
  pointer-events: none;
}

#mcc{
  padding-top: 7vh;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  z-index: 2;
}

#collabs1{
  font-size: clamp(15px, 10 * (1vw + 1vh) / 2, 1.2rem);
  line-height: 20px;
}

.brandlogo{
  max-width:100%;
}


#r2{
  margin-top: 7vh;
  width: auto;
  height: auto;
  background-color: #020231;
  border-radius: 8px;
  box-shadow: 0px 2px 7px #000;
  z-index: 2;
}
#r2img{
  width: 100%;
  height: auto;
  border-top-left-radius: 8px;
  /*background: url("mbpattern.png"), white;*/
  /*background-image: linear-gradient(to right, white 99.7%, #020231 0.3%);*/
  /*background-image: linear-gradient(to bottom, white 99.7%, #020231 0.3%);*/
  background-image: linear-gradient(to bottom right, white, #020231);
  z-index:2;
}svg{
  max-width: 100%;
  height: auto;
  border-top-left-radius: 8px;
}
#avatar{
  transform: scale(10, 10);
}

/*#greet1{*/
/*  color: white;*/
/*  font-size: max(13px, 2.5rem); !* 40px *!*/
/*}*/

.greet{
  color: white;
  line-height: clamp(20px, 10 * (1vw + 1vh) / 2, 1.87rem);;
}

#r3{
  margin-top: 12vh;
  width: 100%;
  height: auto;
}

#specs1{
  font-size: clamp(20px, 10 * (1vw + 1vh) / 2, 1.87rem);
  line-height: clamp(30px, 10 * (1vw + 1vh) / 2, 3.12rem);
}
#specs2,#specs3,#specs4,#specs5,#specs6{
  margin-top: 4.69rem;
}
.hspecs{
  margin-bottom: 0.81rem;
  font-size: clamp(15px, 10 * (1vw + 1vh) / 2, 2.25rem);
  line-height: clamp(20px, 10 * (1vw + 1vh) / 2, 1);
}
.dspecs{
  margin-top: 0.62rem;
  font-size: clamp(15px, 10 * (1vw + 1vh) / 2, 1.12rem);
  line-height: clamp(20px, 10 * (1vw + 1vh) / 2, 1.87rem);
}