/*******************************************************************************
* 
* Program     : index.css
* Description : Main Page Style Sheet
* 
* Company     : Magnum Webster, LCC
* Project     : 82airborne-assoc.com, RMC
* Copyright   : 2019, 2020
*
* Notes       :
*  
*******************************************************************************/

body, html {
  height                  : 100%;
  font-size               : 16pt;
  margin                  : 0;
  padding                 : 0;
  overflow-x              : hidden;
}

.bg {
  background-color        : #a8bcc5;
  background-image        : url("../imgs/background4R.png");
  height                  : 100%;
  background-position     : center;
  background-repeat       : no-repeat;
  background-size         : cover;  
}

.titles {
  grid-area                 : titles;
  display                   : grid;
  margin                    : 0 0 0 6rem;
}

.toptitle {
  font-size                 : 1.4rem;
  justify-self              : start;
  margin                    : 2.5rem 0 0.4rem 4.2rem;
}

.title {
  font-size                 : 1.9rem;
  justify-self              : start;
  margin                    : 0;
}

.subtitle {
  font-size                 : 1.9rem;
  justify-self              : start;
  margin                    : 0 0 0 4rem;
}

.logos {
  display                   : grid;
  grid-template-areas       : " rmclogo1 "
                              " rmcberet "
                              " twologos ";
  width                     : 100%;
}

.rmclogo1 {
  grid-area                 : rmclogo1;
  margin                    : 0 1.9rem 0 0;
  justify-self              : end;
  width                     : 140px;
}

.rmcberet {
  grid-area                 : rmcberet;
  margin                    : 3rem 1.9rem 0 0;
  justify-self              : end;
  width                     : 140px;
}

.twologos {
  grid-area                 : twologos;
  display                   : grid;
  grid-template-areas       : " rmclogo2 rmcwings ";
  margin                    : 3rem 0 0 0;
}

.rmclogo2 {
  grid-area                 : rmclogo2;
  margin                    : 0 0 0 1.9rem;
  justify-self              : start;
  width                     : 140px;
}

.rmcwings {
  grid-area                 : rmcwings;
  margin                    : 0 1.9rem 0 0;
  justify-self              : end;
  width                     : 140px;
}

.dsp-menu {
  margin                    : -20rem 0 0 10rem;
  position                  : absolute;
}

.dsp-menu li {
  padding                   : 0.5rem;
  font-size                 : 1.2rem;
}

a {
  text-decoration           : none;
  color                     : #232323;
}

a:hover {
  color                     : tomato;
}

.mwfooter {
  font-size                 : 0.6rem;
  margin                    : 1rem 0 0 10rem;
  color                     : rgb(3, 70, 3);
}

.mail_link {
  margin                    : 0 0 0 1.8rem;
  text-decoration           : none;
  color                     :rgb(3, 70, 3);
}

.mail_link:hover {
  color                     : rgb(253, 44, 7);
}

/* Start Media Queries ********************************************************/

/* 2048 X 1536 iPad 3/4/5/6 (Landscape) ***************************************/

@media only screen and (max-width: 2048px) and (max-height: 1536px) and
                       (min-width: 2048px) and (min-height: 1536px) and
                       (orientation: landscape) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : center;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }
  
  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 8rem;
  }
  
  .toptitle {
    font-size                 : 2.8rem;
    justify-self              : start;
    margin                    : 3.5rem 0 0.4rem 4.2rem;
  }
  
  .title {
    font-size                 : 3.3rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 3.3rem;
    justify-self              : start;
    margin                    : 0 0 0 4rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 10rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 3rem 0 0;
    justify-self              : end;
    width                     : 175px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 5rem 3rem 0 0;
    justify-self              : end;
    width                     : 175px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 5rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 3rem;
    justify-self              : start;
    width                     : 175px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 3rem 0 0;
    justify-self              : end;
    width                     : 175px;
  }
  
  .dsp-menu {
    margin                    : -32rem 0 0 20rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 1rem;
    font-size                 : 2.5rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 2rem;
    margin                    : 12rem 0 0 20rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     : white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 1680 X 1050 Desktop 22" Monitor Resolution *********************************/

@media only screen and (max-width: 1680px) and (max-height: 1050px) and
                       (min-width: 1680px) and (min-height: 1050px) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : center;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }
  
  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 8rem;
  }
  
  .toptitle {
    font-size                 : 1.6rem;
    justify-self              : start;
    margin                    : 2.5rem 0 0.4rem 4.2rem;
  }
  
  .title {
    font-size                 : 2.1rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 2.1rem;
    justify-self              : start;
    margin                    : 0 0 0 4rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 6rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 140px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 140px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.9rem;
    justify-self              : start;
    width                     : 140px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 140px;
  }
  
  .dsp-menu {
    margin                    : -25rem 0 0 10rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.7rem;
    font-size                 : 1.5rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 1rem;
    margin                    : 8.5rem 0 0 38rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     : white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 1600 X 900 Desktop 20" Monitor Resolution **********************************/

@media only screen and (max-width: 1600px) and (max-height: 900px) and 
                       (min-width: 1600px) and (min-height: 900px) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : bottom;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }
  
  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 8rem;
  }
  
  .toptitle {
    font-size                 : 1.5rem;
    justify-self              : start;
    margin                    : 2.5rem 0 0.4rem 4.2rem;
  }
  
  .title {
    font-size                 : 2rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 2rem;
    justify-self              : start;
    margin                    : 0 0 0 4rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 3rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 140px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 140px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.9rem;
    justify-self              : start;
    width                     : 140px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 140px;
  }
  
  .dsp-menu {
    margin                    : -22rem 0 0 10rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.6rem;
    font-size                 : 1.4rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 1rem;
    margin                    : 5rem 0 0 33rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     : white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 1536 X 2048 iPad 3/4/5/6 (Portrait) ****************************************/

@media only screen and (max-width: 1536px) and (max-height: 2048px) and
                       (min-width: 1536px) and (min-height: 2048px) and
                       (orientation: portrait) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 70% 100%;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }
  
  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0;
  }
  
  .toptitle {
    font-size                 : 2.5rem;
    justify-self              : center;
    margin                    : 3rem 0 0.4rem 0;
  }
  
  .title {
    font-size                 : 3rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 3rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 25rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 3rem 0 0;
    justify-self              : end;
    width                     : 175px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 5rem 3rem 0 0;
    justify-self              : end;
    width                     : 175px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 5rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 3rem;
    justify-self              : start;
    width                     : 175px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 3rem 0 0;
    justify-self              : end;
    width                     : 175px;
  }
  
  .dsp-menu {
    margin                    : -33rem 0 0 15rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 1rem;
    font-size                 : 2.5rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 1.8rem;
    margin                    : 22.5rem 0 0 6rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     : white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 1366 X 1024 iPad Pro (Landscape) *******************************************/

@media only screen and (max-width: 1400px) and (max-height: 1050px) and
                       (min-width: 1350px) and (min-height: 1000px) and 
                       (orientation: landscape) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : center;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 7rem;
  }
  
  .toptitle {
    font-size                 : 1.5rem;
    justify-self              : start;
    margin                    : 2.5rem 0 0.4rem 4.2rem;
  }
  
  .title {
    font-size                 : 2rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 2rem;
    justify-self              : start;
    margin                    : 0 0 0 4rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 8rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 120px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 120px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.9rem;
    justify-self              : start;
    width                     : 120px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 120px;
  }
  
  .dsp-menu {
    margin                    : -24rem 0 0 10rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.7rem;
    font-size                 : 1.4rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 1rem;
    margin                    : 8rem 0 0 25rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 1280 X 1024 Desktop 19" Monitor Resolution *********************************/

@media only screen and (max-width: 1280px) and (max-height: 1024px) and
                       (min-width: 1280px) and (min-height: 1024px) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : center;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 7rem;
  }
  
  .toptitle {
    font-size                 : 1.5rem;
    justify-self              : start;
    margin                    : 2.5rem 0 0.4rem 4.2rem;
  }
  
  .title {
    font-size                 : 2rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 2rem;
    justify-self              : start;
    margin                    : 0 0 0 4rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 8rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 120px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 120px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.9rem;
    justify-self              : start;
    width                     : 120px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 120px;
  }
  
  .dsp-menu {
    margin                    : -24rem 0 0 10rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.6rem;
    font-size                 : 1.4rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 1rem;
    margin                    : 8rem 0 0 23rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 1280 X 950 Touch Screen (Landscape) ******************************* LAPTOP */

@media only screen and (max-width: 1300px) and (max-height: 975px) and
                       (min-width: 1250px) and (min-height: 925px) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : center;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 6rem;
  }
  
  .toptitle {
    font-size                 : 1.2rem;
    justify-self              : start;
    margin                    : 2.5rem 0 0.4rem 4.2rem;
  }
  
  .title {
    font-size                 : 1.7rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1.7rem;
    justify-self              : start;
    margin                    : 0 0 0 4rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 4rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.9rem;
    justify-self              : start;
    width                     : 110px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .dsp-menu {
    margin                    : -20rem 0 0 10rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.5rem;
    font-size                 : 1.3rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.8rem;
    margin                    : 11rem 0 0 27rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 1280 X 800 Desktop Monitor Resolution Alt 1 ********************************/

@media only screen and (max-width: 1280px) and (max-height: 800px) and
                       (min-width: 1280px) and (min-height: 800px) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : center;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 6rem;
  }
  
  .toptitle {
    font-size                 : 1.2rem;
    justify-self              : start;
    margin                    : 2.5rem 0 0.4rem 4.2rem;
  }
  
  .title {
    font-size                 : 1.7rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1.7rem;
    justify-self              : start;
    margin                    : 0 0 0 4rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 4rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.9rem;
    justify-self              : start;
    width                     : 110px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .dsp-menu {
    margin                    : -20rem 0 0 10rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.5rem;
    font-size                 : 1.3rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.8rem;
    margin                    : 4.5rem 0 0 27rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 1112 X 834 iPad Pro 10.5 inch (Landscape) ************************** PHONE */
@media only screen and (max-width: 1150px) and (max-height: 850px) and
                       (min-width: 1100px) and (min-height: 800px) and
                       (orientation: landscape) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : center;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 6rem;
  }
  
  .toptitle {
    font-size                 : 1.2rem;
    justify-self              : start;
    margin                    : 2.5rem 0 0.4rem 4.2rem;
  }
  
  .title {
    font-size                 : 1.7rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1.7rem;
    justify-self              : start;
    margin                    : 0 0 0 4rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 4rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.9rem;
    justify-self              : start;
    width                     : 110px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .dsp-menu {
    margin                    : -20rem 0 0 10rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.5rem;
    font-size                 : 1.3rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.8rem;
    margin                    : 4.9rem 0 0 27rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 1024 X 1366 iPad Pro (Portrait) ********************************************/

@media only screen and (max-width: 1050px) and (max-height: 1400px) and
                       (min-width: 1000px) and (min-height: 1350px) and 
                       (orientation: portrait) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 72% 100%;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0;
  }
  
  .toptitle {
    font-size                 : 1.5rem;
    justify-self              : center;
    margin                    : 2.5rem 0 0 0;
  }
  
  .title {
    font-size                 : 2rem;
    justify-self              : center;
    margin                    : 0.3rem 0 0 0;
  }
  
  .subtitle {
    font-size                 : 2rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 20rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.9rem;
    justify-self              : start;
    width                     : 110px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .dsp-menu {
    margin                    : -25rem 0 0 7.5rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.8rem;
    font-size                 : 1.7rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 1.1rem;
    margin                    : 13rem 0 0 7rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 1024 X 768 iPad 1/2 (Landscape) ********************************************/

@media only screen and (max-width: 1050px) and (max-height: 800px) and
                       (min-width: 1000px) and (min-height: 750px) and
                       (orientation: landscape) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : center;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 4rem;
  }
  
  .toptitle {
    font-size                 : 1.2rem;
    justify-self              : start;
    margin                    : 2.5rem 0 0.4rem 4.2rem;
  }
  
  .title {
    font-size                 : 1.7rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1.7rem;
    justify-self              : start;
    margin                    : 0 0 0 4rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 4rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.9rem;
    justify-self              : start;
    width                     : 110px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 110px;
  }
  
  .dsp-menu {
    margin                    : -20rem 0 0 8rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.5rem;
    font-size                 : 1.3rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.8rem;
    margin                    : 3rem 0 0 16rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 1024 X 600 Fire 7 (Landscape) **********************************************/

@media only screen and (max-width: 1024px) and (max-height: 600px) {
    .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 100% 80%;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 3rem;
  }
  
  .toptitle {
    font-size                 : 1rem;
    justify-self              : start;
    margin                    : 0.6rem 0 0 3.5rem;
  }
  
  .title {
    font-size                 : 1.23rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1.23rem;
    justify-self              : start;
    margin                    : 0 0 0 3.2rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : -2.2rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 75px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 2rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 75px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 2rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.9rem;
    justify-self              : start;
    width                     : 75px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 75px;
  }
  
  .dsp-menu {
    margin                    : -10.7rem 0 0 8rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.15rem;
    font-size                 : 0.9rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.8rem;
    margin                    : 1.8rem 0 0 12rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 800 X 1280 Kindle Fire (Portrait) ********************************* TABLET */

@media only screen and (max-width: 800px) and (max-height: 1280px) and
                       (min-width: 800px) and (min-height: 1280px) and
                       (orientation: portrait) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 72% 100%;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 4rem;
  }
  
  .toptitle {
    font-size                 : 1.2rem;
    justify-self              : start;
    margin                    : 2rem 0 0.2rem 4.2rem;
  }
  
  .title {
    font-size                 : 1.7rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1.7rem;
    justify-self              : start;
    margin                    : 0 0 0 2rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 25rem 0 0 0;
    position                  : relative;
    z-index                   : 1;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 2rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 2rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 90px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .dsp-menu {
    margin                    : -24rem 0 0 5.3rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.5rem;
    font-size                 : 1.2rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.8rem;
    margin                    : 12rem 0 0 5.3rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 834 X 1112 iPad Pro 10.5 inch (Portrait) *************************** PHONE */

@media only screen and (max-width: 850px) and (max-height: 1150px) and
                       (min-width: 800px) and (min-height: 1100px) and
                       (orientation: portrait) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 72% 100%;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 4rem;
  }
  
  .toptitle {
    font-size                 : 1.2rem;
    justify-self              : start;
    margin                    : 2rem 0 0.2rem 4.2rem;
  }
  
  .title {
    font-size                 : 1.7rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1.7rem;
    justify-self              : start;
    margin                    : 0 0 0 2rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 14rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 2rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 2rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 90px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .dsp-menu {
    margin                    : -17rem 0 0 5.3rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.5rem;
    font-size                 : 1.2rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.8rem;
    margin                    : 15.5rem 0 0 5.3rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 823 X 411 Pixel 2 XL (Landscape) *******************************************/

@media only screen and (max-width: 850px) and (max-height: 450px) and
                       (min-width: 800px) and (min-height: 400px) and
                       (orientation: landscape) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : bottom;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 4rem;
  }
  
  .toptitle {
    font-size                 : 0.8rem;
    justify-self              : start;
    margin                    : 1.2rem 0 0.2rem 4.2rem;
  }
  
  .title {
    font-size                 : 1rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1rem;
    justify-self              : start;
    margin                    : 0 0 0 2rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : -1rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 2rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 2rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.9rem;
    justify-self              : start;
    width                     : 70px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .dsp-menu {
    margin                    : -10.5rem 0 0 8rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.2rem;
    font-size                 : 0.8rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.55rem;
    margin                    : 2rem 0 0 16rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 812 X 375 iPhone X (Landscape) *********************************************/

@media only screen and (max-width: 850px) and (max-height: 400px) and
                       (min-width: 800px) and (min-height: 350px) and
                       (orientation: landscape) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : bottom;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 4rem;
  }
  
  .toptitle {
    font-size                 : 0.8rem;
    justify-self              : start;
    margin                    : 1rem 0 0.2rem 4.2rem;
  }
  
  .title {
    font-size                 : 1rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1rem;
    justify-self              : start;
    margin                    : 0 0 0 2rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : -2rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 2rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 2rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.9rem;
    justify-self              : start;
    width                     : 70px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .dsp-menu {
    margin                    : -10rem 0 0 8rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.15rem;
    font-size                 : 0.8rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.55rem;
    margin                    : 1.7rem 0 0 16rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 768 X 1024 iPad 1/2 (Portrait) *********************************************/

@media only screen and (max-width: 800px) and (max-height: 1050px) and
                       (min-width: 750px) and (min-height: 1000px) and
                       (orientation: portrait) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 72% 100%;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 4rem;
  }
  
  .toptitle {
    font-size                 : 1.2rem;
    justify-self              : start;
    margin                    : 2rem 0 0.2rem 4.2rem;
  }
  
  .title {
    font-size                 : 1.7rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1.7rem;
    justify-self              : start;
    margin                    : 0 0 0 2rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 14rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 2rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 2rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 90px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .dsp-menu {
    margin                    : -18rem 0 0 5.3rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.5rem;
    font-size                 : 1.2rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.8rem;
    margin                    : 11.2rem 0 0 5.3rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 800 X 600 Desktop Monitor Resolution Alt 2 (Landscape) *********************/

@media only screen and (max-width: 800px) and (max-height: 600px) and
                       (min-width: 800px) and (min-height: 600px) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : bottom;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 3rem;
  }
  
  .toptitle {
    font-size                 : 1rem;
    justify-self              : start;
    margin                    : 3rem 0 0.2rem 4.2rem;
  }
  
  .title {
    font-size                 : 1.2rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1.2rem;
    justify-self              : start;
    margin                    : 0 0 0 2rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 4rem 0 0 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 2rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 2rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 70px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .dsp-menu {
    margin                    : -14rem 0 0 5.3rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.3rem;
    font-size                 : 1rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.65rem;
    margin                    : 3.3rem 0 0 12rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 731 X 411 Pixel 2 (Landscape) **********************************************/

@media only screen and (max-width: 750px) and (max-height: 450px) and
                       (min-width: 700px) and (min-height: 400px) and
                       (orientation: landscape) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : bottom;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 3rem;
  }
  
  .toptitle {
    font-size                 : 0.8rem;
    justify-self              : start;
    margin                    : 1rem 0 0.2rem 4.2rem;
  }
  
  .title {
    font-size                 : 1rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1rem;
    justify-self              : start;
    margin                    : 0 0 0 2rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 65px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 2rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 65px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 2rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 65px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 65px;
  }
  
  .dsp-menu {
    margin                    : -11rem 0 0 5.3rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.22rem;
    font-size                 : 0.8rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.6rem;
    margin                    : 2rem 0 0 10rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }
}

/* 740 X 360 Galaxy S9/S9+ (Landscape) ******************************** PHONE */

@media only screen and (max-width: 740px) and (max-height: 360px) and
                       (min-width: 740px) and (min-height: 360px) and
                       (orientation: landscape) {
    .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : bottom;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 3rem;
  }
  
  .toptitle {
    font-size                 : 0.8rem;
    justify-self              : start;
    margin                    : 1rem 0 0.2rem 4.2rem;
  }
  
  .title {
    font-size                 : 1rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1rem;
    justify-self              : start;
    margin                    : 0 0 0 2rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
    position                  : relative;
    z-index                   : 1;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : -1rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 60px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 2rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 60px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 2rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 60px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 60px;
  }
  
  .dsp-menu {
    margin                    : -10rem 0 0 5.3rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.15rem;
    font-size                 : 0.8rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.6rem;
    margin                    : 1rem 0 0 10rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }
}

/* 667 X 375 iPhone 6/7/8 (Landscape) *****************************************/

@media only screen and (max-width: 700px) and (max-height: 400px) and
                       (min-width: 650px) and (min-height: 350px) and
                       (orientation: landscape) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : bottom;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 2rem;
  }
  
  .toptitle {
    font-size                 : 0.8rem;
    justify-self              : start;
    margin                    : 1rem 0 0.2rem 4.2rem;
  }
  
  .title {
    font-size                 : 1rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1rem;
    justify-self              : start;
    margin                    : 0 0 0 2rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 65px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 1.5rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 65px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 1.5rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 65px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 65px;
  }
  
  .dsp-menu {
    margin                    : -10.5rem 0 0 5.3rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.2rem;
    font-size                 : 0.8rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.6rem;
    margin                    : 1rem 0 0 7rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }
}

/* 640 X 360 Galaxy S5 (Landscape) ********************************************/

@media only screen and (max-width: 650px) and (max-height: 400px) and
                       (min-width: 600px) and (min-height: 350px) and
                       (orientation: landscape)
{
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : bottom;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 2rem;
  }
  
  .toptitle {
    font-size                 : 0.75rem;
    justify-self              : start;
    margin                    : 1rem 0 0.2rem 4.2rem;
  }
  
  .title {
    font-size                 : 0.95rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 0.95rem;
    justify-self              : start;
    margin                    : 0 0 0 2rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 60px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 1.5rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 60px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 1.5rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 60px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 60px;
  }
  
  .dsp-menu {
    margin                    : -9.8rem 0 0 5.3rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.15rem;
    font-size                 : 0.8rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.55rem;
    margin                    : 1.2rem 0 0 9rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }
}

/* 600 X 1024 Fire 7 Tablet (Portrait) ****************************************/

@media only screen and (max-width: 600px) and (max-height: 1024px) {
    .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 75% 100%;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0;
  }
  
  .toptitle {
    font-size                 : 1rem;
    justify-self              : center;
    margin                    : 1rem 0 0.2rem 0;
  }
  
  .title {
    font-size                 : 1.25rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1.25rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 12rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 2rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 2rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 70px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 70px;
  }
  
  .dsp-menu {
    margin                    : -17rem 0 0 5.3rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.2rem;
    font-size                 : 1rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.7rem;
    margin                    : 6.2rem 0 0 2.2rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.8rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }
}

/* 568 X 320 iPhone 5/SE (Landscape) ******************************************/

@media only screen and (max-width: 600px) and (max-height: 350px) and
                       (min-width: 550px) and (min-height: 300px) and 
                       (orientation: landscape) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : bottom;
    background-repeat       : no-repeat;
    background-size         : cover;  
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 1.8rem;
  }
  
  .toptitle {
    font-size                 : 0.65rem;
    justify-self              : start;
    margin                    : 1rem 0 0.2rem 4.2rem;
  }
  
  .title {
    font-size                 : 0.85rem;
    justify-self              : start;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 0.85rem;
    justify-self              : start;
    margin                    : 0 0 0 2rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 1.3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 1.3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 55px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .dsp-menu {
    margin                    : -9rem 0 0 5.3rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.15rem;
    font-size                 : 0.7rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.55rem;
    margin                    : 1rem 0 0 6rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.4rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }
}

/* 414 X 896 iPhone XR (Portrait) ************************************* PHONE */

@media only screen and (max-width: 420px) and (max-height: 900px) and
                       (min-width: 410px) and (min-height: 890px) and
                       (orientation: portrait) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 75% 100%;
    background-repeat       : no-repeat;
    background-size         : cover; 
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 1.8rem;
  }
  
  .toptitle {
    font-size                 : 0.8rem;
    justify-self              : center;
    margin                    : 1.5rem 0 0.2rem 0;
  }
  
  .title {
    font-size                 : 1rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 13rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 1.3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 1.3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 55px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .dsp-menu {
    margin                    : -11rem 0 0 3.5rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.2rem;
    font-size                 : 0.8rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.7rem;
    margin                    : 12.5rem 0 0 3rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.4rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }
}

/* 411 X 823 Pixel 2 XL (Portrait) ********************************************/

@media only screen and (max-width: 450px) and (max-height: 850px) and
                       (min-width: 400px) and (min-height: 800px) and
                       (orientation: portrait) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 75% 100%;
    background-repeat       : no-repeat;
    background-size         : cover; 
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 1.8rem;
  }
  
  .toptitle {
    font-size                 : 0.8rem;
    justify-self              : center;
    margin                    : 1.5rem 0 0.2rem 0;
  }
  
  .title {
    font-size                 : 1rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
    position                  : relative;
    z-index                   : 1;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 14rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 1.3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 1.3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 55px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .dsp-menu {
    margin                    : -14rem 0 0 3.5rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.2rem;
    font-size                 : 0.8rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.7rem;
    margin                    : 8rem 0 0 3rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.4rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }
}

/* 411 X 731 Pixel 2 (Portrait) ***********************************************/

@media only screen and (max-width: 450px) and (max-height: 750px) and
                       (min-width: 400px) and (min-height: 700px) and
                       (orientation: portrait) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 80% 100%;
    background-repeat       : no-repeat;
    background-size         : cover; 
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0 0 0 1.8rem;
  }
  
  .toptitle {
    font-size                 : 0.8rem;
    justify-self              : center;
    margin                    : 1.5rem 0 0.2rem 0;
  }
  
  .title {
    font-size                 : 1rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 11rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 1.3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 1.3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 55px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .dsp-menu {
    margin                    : -13rem 0 0 3.5rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.2rem;
    font-size                 : 0.8rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.7rem;
    margin                    : 7rem 0 0 3rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.4rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }
}

/* 375 X 812 iPhone X (Portrait) **********************************************/

@media only screen and (max-width: 400px) and (max-height: 850px) and
                       (min-width: 350px) and (min-height: 800px) and
                       (orientation: portrait) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 75% 100%;
    background-repeat       : no-repeat;
    background-size         : cover; 
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0;
  }
  
  .toptitle {
    font-size                 : 0.8rem;
    justify-self              : center;
    margin                    : 1.2rem 0 0.2rem 0;
  }
  
  .title {
    font-size                 : 1rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 14rem 1.5rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 1.3rem 1.5rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 1.3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 55px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.5rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .dsp-menu {
    margin                    : -14rem 0 0 2.5rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.2rem;
    font-size                 : 0.8rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.65rem;
    margin                    : 8rem 0 0 2.5rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.4rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }
}

/* 360 X 740 Galaxy S9/S9+ (portrait) ********************************* PHONE */

@media only screen and (max-width: 360px) and (max-height: 740px) and
                       (min-width: 360px) and (min-height: 740px) and
                       (orientation: portrait) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 76% 100%;
    background-repeat       : no-repeat;
    background-size         : cover; 
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0;
  }
  
  .toptitle {
    font-size                 : 0.8rem;
    justify-self              : center;
    margin                    : 1.2rem 0 0.2rem 0;
  }
  
  .title {
    font-size                 : 1rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 11rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 1.3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 1.3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 55px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .dsp-menu {
    margin                    : -13rem 0 0 2rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.2rem;
    font-size                 : 0.8rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.65rem;
    margin                    : 7.5rem 0 0 2.5rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.4rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }
}

/* 375 X 667 iPhone 6/7/8 (Portrait) ******************************************/

@media only screen and (max-width: 400px) and (max-height: 700px) and
                       (min-width: 350px) and (min-height: 650px) and
                       (orientation: portrait) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 76% 100%;
    background-repeat       : no-repeat;
    background-size         : cover; 
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0;
  }
  
  .toptitle {
    font-size                 : 0.8rem;
    justify-self              : center;
    margin                    : 1.2rem 0 0.2rem 0;
  }
  
  .title {
    font-size                 : 1rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 1rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 11rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 1.3rem 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 1.3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1.3rem;
    justify-self              : start;
    width                     : 55px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.9rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .dsp-menu {
    margin                    : -14rem 0 0 3.1rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.2rem;
    font-size                 : 0.8rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.65rem;
    margin                    : 4.1rem 0 0 2.5rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.4rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }
}

/* 360 X 640 Galaxy S5 (Portrait) *********************************************/

@media only screen and (max-width: 400px) and (max-height: 650px) and
                       (min-width: 350px) and (min-height: 600px) and
                       (orientation: portrait) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 80% 100%;
    background-repeat       : no-repeat;
    background-size         : cover; 
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0;
  }
  
  .toptitle {
    font-size                 : 0.75rem;
    justify-self              : center;
    margin                    : 1.2rem 0 0.2rem 0;
  }
  
  .title {
    font-size                 : 0.95rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 0.95rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 11rem 1.6rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 1.3rem 1.6rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 1.3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1rem;
    justify-self              : start;
    width                     : 55px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1.6rem 0 0;
    justify-self              : end;
    width                     : 55px;
  }
  
  .dsp-menu {
    margin                    : -14rem 0 0 3rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.18rem;
    font-size                 : 0.75rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.65rem;
    margin                    : 3.5rem 0 0 2.5rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.4rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }
}

/* 320 X 568 iPhone 5/SE (Portrait) *******************************************/

@media only screen and (max-width: 350px) and (max-height: 600px) and
                       (min-width: 300px) and (min-height: 550px) and
                       (orientation: portrait) {
    .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 75% 100%;
    background-repeat       : no-repeat;
    background-size         : cover; 
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0;
  }
  
  .toptitle {
    font-size                 : 0.7rem;
    justify-self              : center;
    margin                    : 1rem 0 0.2rem 0;
  }
  
  .title {
    font-size                 : 0.9rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .subtitle {
    font-size                 : 0.9rem;
    justify-self              : center;
    margin                    : 0;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 8.5rem 1rem 0 0;
    justify-self              : end;
    width                     : 50px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 1.3rem 1rem 0 0;
    justify-self              : end;
    width                     : 50px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 1.3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1rem;
    justify-self              : start;
    width                     : 50px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1rem 0 0;
    justify-self              : end;
    width                     : 50px;
  }
  
  .dsp-menu {
    margin                    : -12rem 0 0 1.5rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.16rem;
    font-size                 : 0.75rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.6rem;
    margin                    : 3.5rem 0 0 2rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.4rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }
}

/* 320 X 240 Nokia 8110 4G (Landscape) ******************************** PHONE */

@media only screen and (max-width: 320px) and (max-height: 240px) and
                       (min-width: 320px) and (min-height: 240px) and
                       (orientation: landscape) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 75% 100%;
    background-repeat       : no-repeat;
    background-size         : cover; 
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0;
  }
  
  .toptitle {
    font-size                 : 0.4rem;
    justify-self              : start;
    margin                    : 0.6rem 0 0 1rem;
  }
  
  .title {
    font-size                 : 0.5rem;
    justify-self              : start;
    margin                    : 0 0 0 0.8rem;
  }
  
  .subtitle {
    font-size                 : 0.5rem;
    justify-self              : start;
    margin                    : 0 0 0 1rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
    position                  : relative;
    z-index                   : 1;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 1.5rem 1rem 0 0;
    justify-self              : end;
    width                     : 30px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 1.3rem 1rem 0 0;
    justify-self              : end;
    width                     : 30px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 1.3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1rem;
    justify-self              : start;
    width                     : 30px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1rem 0 0;
    justify-self              : end;
    width                     : 30px;
  }
  
  .dsp-menu {
    margin                    : -6rem 0 0 1.5rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.05rem;
    font-size                 : 0.5rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.4rem;
    margin                    : 0.05rem 0 0 6.5rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.4rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}

/* 240 X 320 Nokia 8110 4G (Portrait) ********************************* PHONE */

@media only screen and (max-width: 240px) and (max-height: 320px) and
                       (min-width: 240px) and (min-height: 320px) and
                       (orientation: portrait) {
  .bg {
    background-color        : #a8bcc5;
    background-image        : url("../imgs/background4R.png");
    height                  : 100%;
    background-position     : 75% 100%;
    background-repeat       : no-repeat;
    background-size         : cover; 
  }

  .titles {
    grid-area                 : titles;
    display                   : grid;
    margin                    : 0;
  }
  
  .toptitle {
    font-size                 : 0.4rem;
    justify-self              : start;
    margin                    : 0.6rem 0 0 1rem;
  }
  
  .title {
    font-size                 : 0.5rem;
    justify-self              : start;
    margin                    : 0 0 0 0.8rem;
  }
  
  .subtitle {
    font-size                 : 0.5rem;
    justify-self              : start;
    margin                    : 0 0 0 1rem;
  }
  
  .logos {
    display                   : grid;
    grid-template-areas       : " rmclogo1 "
                                " rmcberet "
                                " twologos ";
    width                     : 100%;
    margin                    : 0;
    position                  : relative;
    z-index                   : 1;
  }
  
  .rmclogo1 {
    grid-area                 : rmclogo1;
    margin                    : 4rem 1rem 0 0;
    justify-self              : end;
    width                     : 30px;
  }
  
  .rmcberet {
    grid-area                 : rmcberet;
    margin                    : 1.3rem 1rem 0 0;
    justify-self              : end;
    width                     : 30px;
  }
  
  .twologos {
    grid-area                 : twologos;
    display                   : grid;
    grid-template-areas       : " rmclogo2 rmcwings ";
    margin                    : 1.3rem 0 0 0;
  }
  
  .rmclogo2 {
    grid-area                 : rmclogo2;
    margin                    : 0 0 0 1rem;
    justify-self              : start;
    width                     : 30px;
  }
  
  .rmcwings {
    grid-area                 : rmcwings;
    margin                    : 0 1rem 0 0;
    justify-self              : end;
    width                     : 30px;
  }
  
  .dsp-menu {
    margin                    : -7.5rem 0 0 0.5rem;
    position                  : absolute;
  }
  
  .dsp-menu li {
    padding                   : 0.05rem;
    font-size                 : 0.5rem;
  }
  
  a {
    text-decoration           : none;
    color                     : #232323;
  }
  
  a:hover {
    color                     : tomato;
  }
  
  .mwfooter {
    font-size                 : 0.4rem;
    margin                    : 1.3rem 0 0 2rem;
    color                     : white;
  }
  
  .mail_link {
    margin                    : 0 0 0 1.4rem;
    text-decoration           : none;
    color                     :white;
  }
  
  .mail_link:hover {
    color                     : lightblue;
  }  
}