/* -------------    FONTS     ------------------------

font-family: 'Merriweather', serif;
font-family: 'ZCOOL XiaoWei', serif;
font-family: 'Lato', sans-serif;
---------           Colors    -------------------------
/*   background dark green  background-color: #011f01;
background dark red  color: #530000;
light yellow          color: #eded56;
yellow                color: #f7f726:
/*-----------------------------------------------------*/

/* ---------------------------
/*         BASIC SETUP
-----------------------------*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  background-color: #000;
  color: #555;
  font-family: 'Lato', 'Arial', sans-serif;
  font-size: 20px;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  margin-top: 0px;
}

a:visited {
  color: #fff;
}

clearfix {
  zoom: 1;
}

.clearfix:after {
  content: '.';
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

.width-50 {
  margin-right: 25%;
  margin-left: 25%;
  text-align: center;
}

.width-60 {
  margin-right: 20%;
  margin-left: 20%;
  text-align: center;
}

.width-70 {
  margin-right: 20%;
  margin-left: 20%;
  text-align: center;
}

.width-80 {
  margin-right: 10%;
  margin-left: 10%;
  text-align: center;
}

.width-90 {
  margin-right: 5%;
  margin-left: 5%;
  text-align: center;
}

#main-table {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
}

.left {
  text-align: left;
}

.row {
  margin: 0 auto;
}

.box {
  padding: 1%;
}

.box img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}

.white {
  color: #fff;
}

.yellow {
  color: yellow;
}
.minHeight {
  min-height: 100vh;
}
/* ---------------------------
/*     HEADINGS
-----------------------------*/
h1,
h2,
h3 {
  font-weight: 300;
  text-transform: uppercase;
}

h1 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #fff;
  font-size: 200%;
  letter-spacing: 1px;
  word-spacing: 3px;
  font-family: 'ZCOOL XiaoWei', serif;
}

h2 {
  font-size: 180%;
  word-spacing: 2px;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 1px;
  word-spacing: 3px;
}

h2:after {
  display: block;
  height: 2px;
  background-color: #d35400;
  content: ' ';
  width: 100px;
  margin: 0 auto;
  margin-top: 30px;
}

h3 {
  font: 110%;
  margin-bottom: 15px;
}

/*---------------------------------------
                 TOP NAV
________________________________________*/

/* Add a black background color to the top navigation */
.topnav {
  background-color: #000;
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 100%;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: rgba(0, 0, 0, 0.37);
  color: #fff;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}



/*-----------------------------
     REUSABLE COMPONENTS
-----------------------------*/
.section-pics {
  background-color: #000;
}

.caption {
  font-size: 110%;
  color: #fff;
  text-align: center;
  padding-bottom: 10px;
}

.Heading {
  font-family: 'ZCOOL XiaoWei', serif;
  font-size: 160%;
  font-weight: 400;
  color: #fff;
}

/* ---------------------------
/*       PIC BORDERS
-----------------------------*/

.pic-border-aqua {
  border-color: #99ccff;
  border-style: ridge;
  border-width: 6px;
  width: 90%;
  height: auto;
}

.pic-border-maroon {
  border-color: #880505;
  border-style: ridge;
  border-width: 8px;
  width: 90%;
  height: auto;
}

.pic-border-orange {
  border-color: #e67e22;
  border-style: ridge;
  border-width: 6px;
  width: 90%;
  height: auto;
}

.pic-border-grey {
  border-color: #c0c0c0;
  border-style: ridge;
  border-width: 6px;
  width: 90%;
  height: auto;
}

.pic-border-green {
  border-color: #035723;
  border-style: ridge;
  border-width: 6px;
  width: 90%;
  height: auto;
}

/* ---------------------------
/*       ICONS
-----------------------------*/

.icon-big {
  font-size: 300%;
  display: block;
  color: #e67e22;
  margin-bottom: 10px;
}

.icon-small {
  display: inline-block;
  width: 30px;
  text-align: center;
  color: #e67e22;
  font-size: 120%;
  margin-right: 10px;

  /* how to align icons and text  */
  line-height: 120%;
  vertical-align: middle;
  margin-top: -5px;
}

/* ---------------------------
/*       LINKS
-----------------------------*/

a:link,
a:active {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  margin-bottom: 1px;
}

a:hover,
a:active {
  color: #555;
  border-bottom: 1px solid #e67e22;
  -webkit-transition: border-bottom 0.5s, color 0.5s;
  transition: border-bottom 0.5s, color 0.5s;
}

section-pics a:link,
a:active {
  text-decoration: none;
  margin-bottom: 1px;
}

section-pics a:hover {
  color: #555;
  border-bottom: 1px solid #e67e22;
  border-bottom: 1px solid transparent;
  -webkit-transition: border-bottom 0.5s, color 0.5s;
  transition: border-bottom 0.5s, color 0.5s;
}

/* -------------  SECTION XX---------------*/
.section {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url(img/bg-RenaissancePhotography.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  padding-top: 50px;
  padding-bottom: 10px;
}

/* -------------  SECTIONS  ---------------*/
.shiftLeft {
  padding-left: 15%;
}

/* --------------------------------
/*      SECTION RENAISSANCE
-----------------------------------*/

#section-Renaissance {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)),
    url(img/bg-Renaissance.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 900px;
  padding-top: 50px;
}

.Renaissance {
  width: 50%;
  padding-top: 50px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#section-RenaissancePhotography {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)),
    url(img/bg-RenaissancePhotography.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 900px;
  padding-top: 50px;
}

/* ---------------------------
/*      WELCOME
-----------------------------*/
.section-welcome {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url(img/bg-Renaissance.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin-top: 0px;
  padding-top: 50px;
  padding-bottom: 30px;
  text-align: center;
  background-color: #000;
  min-height: 800px;
}

.welcome-showcase {
  width: 60%;
  margin-left: 20%;
  margin-bottom: 20px;
  margin-top: 40px;
}

.home-img-circle {
  width: 80%;
  height: auto;
  border-radius: 50%;
  border: 2px solid #d4cdcd;
}

.home-img-circle:hover {
  opacity: 0.7;
  height: 100%;
  border-bottom: 1px #000 solid;
}

/* ---------------------------/*
           Section CONTACT
-----------------------------*/
.section-contact {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url(img/bg-FirstTeeBulkhead.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
  background-color: rgba(206, 205, 205, 0.01);
  min-height: 900px;
  padding-top: 40px;
}

.section-contact i {
  font-size: 180%;
  color: #fff;
  margin-top: 20%;
}

.section-contact h1 {
  color: #fff;
  text-align: center;
  line-height: 130%;
  margin-top: 1%;
  margin-bottom: 2%;
}

.section-contact p {
  color: #fff;
  font-size: 120%;
  text-align: center;
  line-height: 130%;
}

.contact {
  text-align: left;
  color: #fff;
  font-size: 110%;
  line-height: 130%;
}

.section-contact a:visited {
  color: #fff;
  border-bottom: 2px solid;
  -webkit-transition: border-bottom 0.5s;
  transition: border-bottom 0.5s;
  padding: 8px 0;
}

/* ---------------------------
/*      ABOUT
-----------------------------*/
.section-about {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url(img/bg-SunsetFirstHole.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin-top: 0px;
  padding-top: 50px;
  padding-bottom: 30px;
  text-align: left;
  line-height: 120%;
  padding-left: 20%;
  padding-right: 20%;
  background-color: #000;
  min-height: 800px;
}

.section-about p {
  color: #ffF;
  font-weight: 700;
  line-height: 120%;
  padding-bottom: 7px;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  background-color: #000;
}

.section-about a {
  color: #f7f726;
  font-weight: 700;
  padding-bottom: 15px;
  text-decoration: underline;
  background-color: #000;
}

/*------BUTTONS----------*/
.btn:link,
.btn:visited,
input[type='submit'] {
  display: inline-block;
  padding: 10px 30px;
  font-weight: 300;
  text-decoration: none;
  border-radius: 200px;
  color: #fff;
  -webkit-transition: background-color 0.5s, border 0.5s color 0.5s;
  transition: background-color 0.5s, border 0.5s color 0.5s;
}

.btnReset {
  display: inline-block;
  padding: 5px 20px;
  font-weight: 300;
  text-decoration: none;
  border-radius: 200px;
  color: #fff;
  -webkit-transition: background-color 0.5s, border 0.5s color 0.5s;
  transition: background-color 0.5s, border 0.5s color 0.5s;
}

.btn-full:link,
.btn-full:visited,
input[type='submit'] {
  background-color: rgba(1, 31, 1, 0.6);
  border: solid 1px #b5b3b3;
}

.btn-ghost:link,
.btn-ghost:visited {
  border: solid 1px #b5b3b3;
  color: #fff;
}

.btn:hover,
.btn:active,
input[type='submit']:hover,
input[type='submit']:active {
  background-color: rgba(1, 31, 1, 0.6);
}

.btn-full:visited,
.btn-full:active {
  background-color: rgba(1, 31, 1, 0.6);
  border: solid 1px #b5b3b3;
}

.btn-ghost:hover,
.btn-ghost:active {
  border: solid 1px #b5b3b3;
  color: aliceblue;
}

/* ---------------------------
          HEADER
-----------------------------*/
header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)),
    url(img/bg-tufa.jpg);
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  background-attachment: fixed;
  padding-bottom: 25px;
}

.home-box {
  position: absolute;
  width: 100vh;
  top: 45%;
  left: 50%;
  margin: 0 auto;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* ----------- NAV2  --------------*/
#navigation {
  position: fixed;
  width: 100%;
  top: 0px;
  overflow: hidden;
  background-color: #000;
  padding-left: 10px;
}

#navigation-notFixed {
  width: 100%;
  top: 0px;
  overflow: hidden;
}

.logo2 {
  letter-spacing: -2px;
  font-family: 'Merriweather', serif;
  font-size: 140%;
  font-weight: 400;
  color: #fff;
  float: left;
  margin-left: 80px;
  margin-top: 10px;
}

.nav2 {
  float: right;
  list-style: none;
  margin-right: 25px;
  margin-bottom: 10px;
  width: 100%;
  text-align: right;
}

.nav2 li {
  display: inline-block;
  margin-left: 1%;
  margin-top: -5px;
  font-size: 80%;
  margin-bottom: 5px;
}

.nav2 li a:link,
.nav2 li a:visited {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 90%;
  border-bottom: 2px solid transparent;
  -webkit-transition: border-bottom 0.5s;
  transition: border-bottom 0.5s;
  padding: 8px 0;
}

.nav2 li a:active,
.nav2 li a:hover {
  border-bottom: 2px solid #e67e22;
}

.navInstagram {
  width: 30px;
  height: auto;
  margin-top: px;
  margin-left: 35px;
}

/* ----------------------------------------------- */
/*               Animations */
/* ----------------------------------------------- */
.Flash-4s {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-iteration-count: 4;
  animation-name: flash;
  -webkit-text-decoration: underline #807979;
  text-decoration: underline #807979;
}

.Flash-2s {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-iteration-count: 2;
  animation-name: flash;
  -webkit-text-decoration: underline #807979;
  text-decoration: underline #807979;
}

.Flash-1s {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-name: flash;
  -webkit-text-decoration: underline #807979;
  text-decoration: underline #807979;
}

.tada {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-name: tada;
  -webkit-text-decoration: underline #807979;
  text-decoration: underline #807979;
}

.Left-Slide {
  animation-duration: 2s;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-name: slideInLeft;
}

.Up-Slide {
  animation-duration: 2s;
  animation-delay: 0.75s;
  animation-iteration-count: 1;
  animation-name: slideInUp;
}

.index-Slide {
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-name: slideInUp;
}

.Zoom-In {
  animation-duration: 2s;
  animation-delay: 0.5s;
  animation-iteration-count: 3;
  animation-name: zoomIn;
}

/* ---------------------------
/*     RPC Header Logo
-----------------------------*/

#logo {
  text-align: left;
  letter-spacing: -2px;
  text-shadow: 0px 0px 8px #000;
  font-family: 'Merriweather', serif;
  font-size: 250%;
  font-weight: 400;
  margin-top: 1%;
  margin-left: 5%;
  color: #fff;
  float: left;
}

.green {
  color: #aef080;
}

/*******************************************
               PIC NAV
*******************************************/
.picNav {
  list-style: none;
  padding-top: 10px;
  padding-right: 5px;
  padding-left: 100px;
  padding-bottom: 10px;
  margin-bottom: 1%;
  width: 100%;
  text-align: left;
  background-color: #000;
  min-height: 40px;
}

.picNavLogo {
  display: inline-block;
  padding-right: 150px;
  letter-spacing: -2px;
  font-family: 'Merriweather', serif;
  font-size: 130%;
  font-weight: 400;
  color: #fff;
  /* float: left; */
}

.picNavText {
  display: inline-block;
  color: #fff;
  font-size: 100%;
  padding-right: 55px;
  padding-top: 5px;
}

/*******************************************
               Member Pages
*******************************************/
.section-member {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url(img/bg-SunsetRenaissance.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
  background-color: rgba(206, 205, 205, 0.01);
  min-height: 900px;
  padding-top: 40px;
}

.section-member a {
  color: #d35400;
  font-family: 'ZCOOL XiaoWei', serif;
  font-size: 130%;
}

.listing {
  background-color: #e2dfdf;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  margin-bottom: 20px;
  border-radius: 25px;
}

/*******************************************
               Olympics Pages
*******************************************/
.section-olympics {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url(img/bg-Olympics.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
  background-color: rgba(206, 205, 205, 0.01);
  min-height: 900px;
  padding-top: 40px;
}

.section-olympics a {
  color: #d35400;
  font-family: 'ZCOOL XiaoWei', serif;
  font-size: 130%;
}

.tableOlympics {
  margin-left: 10%;
  width: 80%;
  font-size: 100%;
  line-height: 160%;
  text-align: center;
  border-style: solid;
  color: #c0c0c0;
  font-weight: 700;
}

/*******************************************
               Member Websites
*******************************************/
.section-memberSites {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url(img/bg-SunsetFirstHole.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
  background-color: rgba(206, 205, 205, 0.01);
  min-height: 900px;
  padding-top: 40px;
}

.section-memberSites a {
  color: #d35400;
  font-family: 'ZCOOL XiaoWei', serif;
  font-size: 130%;
}

/*******************************************
           Upcoming Events
*******************************************/
.section-events {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)),
    url(img/bg-SunsetFirstHole.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
  background-color: rgba(206, 205, 205, 0.01);
  min-height: 900px;
  padding-top: 30px;
}

.tableEvents {
  margin-left: 25%;
  width: 50%;
  font-size: 100%;
  line-height: 160%;
  text-align: center;
  border-style: solid;
  color: #c0c0c0;
  font-weight: 700;
}
/* --------------------------------
/*      SECTION ASSIGNMENTS
-----------------------------------*/

.section-assignments {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)),
    url(img/bg-MorningFog.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 900px;
  padding-top: 50px;
  padding-left: 10%;
  padding-right: 10%;
}

.assignments {
  width: 100%;
  padding-top: 50px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.thisMonth {
  font-family: 'Merriweather', serif;
  font-weight: 700;
  font-size: 140%;
  color: #aef080;
  padding-bottom: 10px;
}
.photoCredit {
  margin-top: 5px;
  margin-bottom: 10px;
  color: #aef080;
  font-style: italic;
}


/*-----------------------------------------
        VARIOUS TAGS
-----------------------------------------*/

.bold {
  font-weight: 700;
}

.italic {
  font-style: italic;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
  align-content: right;
}

.roundCorner {
  border-radius: 25px;
}

.minHeight {
  min-height: 100vh;
}

/*---------- DIV WIDTHS -----------*/
.width90 {
  padding-left: 5%;
  padding-right: 5%;
}

.width80 {
  padding-left: 10%;
  padding-right: 10%;
}

.width70 {
  width: 100%;
  padding-left: 15%;
  padding-right: 15%;
}

.width60 {
  width: 100%;
  padding-left: 20%;
  padding-right: 20%;
}

.width50 {
  padding-left: 25%;
  padding-right: 25%;
}

.width40 {
  padding-left: 30%;
  padding-right: 30%;
}

.width30 {
  padding-left: 35%;
  padding-right: 35%;
}

.width20 {
  padding-left: 40%;
  padding-right: 40%;
}

/*-------- COLORS ---------*/
.lightGreen {
  color: #233d26;
}

.darkPurple {
  color: #280e37;
  font-weight: 700;
}

.black {
  color: #000;
}

.green {
  color: rgb(3, 112, 9);
}

.blue {
  color: rgb(37, 51, 250);
}

.red {
  color: red;
}

.white {
  color: #fff;
}

.yellow {
  color: yellow;
}
.gold {
  color: #bf8604;
}

.goldPulse {
  font-size: 120%;
  color: #ddba00;
}

.whitePulse {
  font-size: 120%;
  color: #fff;
}

.maroonPulse {
  font-size: 120%;
  color: #640709;
}
.purplePulse {
  font-size: 120%;
  color: #5807a3;
}

/*------ ADDITIONAL SPACE ----------*/

.top5px {
  padding-top: 5px;
}
.top10px {
  padding-top: 10px;
}

.top20px {
  padding-top: 20px;
}

.top30px {
  padding-top: 30px;
}

.top40px {
  padding-top: 40px;
}

.top50px {
  padding-top: 50px;
}

.bottom5px {
  padding-bottom: 5px;
}

.bottom10px {
  padding-bottom: 10px;
}

.bottom20px {
  padding-bottom: 20px;
}

.bottom30px {
  padding-bottom: 30px;
}

.marginLeft25 {
  margin-left: 25px;
}

.left40px {
  margin-left: 40px;
}

.right40px {
  padding-right: 40px;
}

/*-------- FONT SIZES -------*/
.p70 {
  font-size: 70%;
}

.p80 {
  font-size: 80%;
}

.p90 {
  font-size: 90%;
}

.p105 {
  font-size: 105%;
}

.p110 {
  font-size: 110%;
}

.p120 {
  font-size: 120%;
}

.merriweatherYellow110 {
  font-family: "Merriweather", serif;
  font-size: 110%;
  color: #fdfd00;
}

.merriweatherWhite120 {
  font-family: "Merriweather", serif;
  font-size: 120%;
  color: #fff;
}

/*------- IMAGE SIZES -----------*/
.pic20 {
  width: 20%;
  height: auto;
}

.pic30 {
  width: 30%;
  height: auto;
}

.pic40 {
  width: 40%;
  height: auto;
}

.pic50 {
  width: 50%;
  height: auto;
}

.pic60 {
  width: 60%;
  height: auto;
}

.pic70 {
  width: 70%;
  height: auto;
}

.pic80 {
  width: 80%;
  height: auto;
}

.pic90 {
  width: 90%;
  height: auto;
}

.pic100 {
  width: 100%;
  height: auto;
}

.pic110 {
  width: 110%;
  height: auto;
}

.pic120 {
  width: 120%;
  height: auto;
}

.pic130 {
  width: 130%;
  height: auto;
}

.video50 {
  width: 50%;
  margin-bottom: 30px;
}

.video60 {
  width: 60%;
  margin-bottom: 30px;
}

.video70 {
  width: 70%;
  margin-bottom: 30px;
}

.video80 {
  width: 80%;
  margin-bottom: 30px;
}

.video90 {
  width: 90%;
  margin-bottom: 30px;
}

.video100 {
  width: 100%;
  margin-bottom: 30px;
}

.flierJPG {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border-color: #797c7c;
  border-style: ridge;
  border-width: 6px;
}


/*-----------------------------
     REUSABLE COMPONENTS
-----------------------------*/

.left {
  text-align: left;
}

.row {
  margin: 0 auto;
}

.box {
  padding: 1%;
}

.box img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}

.table2rows {
  width: 60%;
  margin-right: auto;
  margin-left: auto;
}

/* ---------------------------
/*       PIC BORDERS
-----------------------------*/

.pic-border-aqua {
  border-color: #99ccff;
  border-style: ridge;
  border-width: 6px;
  width: 90%;
  height: auto;
}

.pic-border-maroon {
  border-color: #880505;
  border-style: ridge;
  border-width: 8px;
  width: 90%;
  height: auto;
}

.pic-border-orange {
  border-color: #e67e22;
  border-style: ridge;
  border-width: 6px;
  width: 90%;
  height: auto;
}

.pic-border-grey {
  border-color: #c0c0c0;
  border-style: ridge;
  border-width: 6px;
  width: 90%;
  height: auto;
}

.pic-border-green {
  border-color: #035723;
  border-style: ridge;
  border-width: 6px;
  width: 90%;
  height: auto;
}

/* ---------------------------
/*       ICONS
-----------------------------*/

.icon-big {
  font-size: 300%;
  display: block;
  color: #e67e22;
  margin-bottom: 10px;
}

.icon-small {
  display: inline-block;
  width: 30px;
  text-align: center;
  color: #e67e22;
  font-size: 120%;
  margin-right: 10px;

  /* how to align icons and text  */
  line-height: 120%;
  vertical-align: middle;
  margin-top: -5px;
}
/* CSS Grid */
.grid-3 {
  width:100%;
  align-items: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:repeat(auto, 1fr);
  justify-content: center;
  /* align-content: center; */
  padding: 10px;
  gap: 40px;
}
.grid-3_noGap {
  width:100%;
  align-items: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:repeat(auto, 1fr);
  justify-content: center;
  /* align-content: center; */
  padding: 10px;
  gap: 0px;
}
.grid-4 {
  width:100%;
  align-items: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows:repeat(auto, 1fr);
  justify-content: center;
  gap: 40px;
}
.gridItem {
  width:90%;
  height:auto
}


/* -------------    FONTS     ------------------------

font-family: 'Merriweather', serif;
font-family: 'ZCOOL XiaoWei', serif;
font-family: 'Lato', sans-serif;
---------           Colors    -------------------------
/*   background red  color: #160000;
background dark red  color: #530000;
light yellow          color: #eded56;
yellow                color: #f7f726:
/*-----------------------------------------------------*/