/* 
(c) 2022 BEST Athens, All rights reserved.

This CSS stylesheet was created by the IT Team of BEST Athens.


---------- USE ----------

This stylesheet should be included in EVERY HTML script / code you create.

!_WARNING_!
 For its magic to happen you must follow a specific order 
 for your linked stylesheets in your HTML page.

 In your HTML page you MUST follow this order:

    <link rel="stylesheet" href="page-name.css">

    <link rel="stylesheet" href="base.css">
    
    <link rel="stylesheet" href="media.css">

!_WARNING_!

Contact us any time you need help.

----------  x  ---------- */

* {
  margin: 0;
  padding: 0;
}

/* --- BEST colors --- */
:root {
  --BEST-blue: rgb(0, 113, 185);
  --BEST-orange: rgb(255, 166, 21);
  --BEST-green: rgb(117, 191, 30);
  --section-title: rgb(59, 59, 59);
  --color-p: rgb(90, 90, 90);

  /* 
  Copy this :root {} rule inside your own stylesheet.
  
  These colors are only suggestions, colors primarly used in BEST.
  Feel free to innovate, express your creativity and suprise us all.
  
  But, for many reasons, such as coherence, you should ALWAYS use them in:

  section-titles' border-bottoms 
  (choose between BEST-blue, BEST-orange or BEST-green).

  <p> div, any text
  (choose color-p)

  */
}

/* --- links --- */
a {
  text-decoration: none;
  color: var(--BEST-orange);
  cursor: pointer;
}

a:hover {
  color: var(--BEST-green);
  transition: 0.3s;
}

/* --- section titles --- */

.section-title {
  width: 26%;
  position: absolute;
  left: 50%;

  padding: 14% 0 8px 0;

  transform: translate(-50%, -50%);
  text-align: center;
}

.section-title p {
  text-decoration: none;
  text-align: center;

  position: relative;

  font-size: 38px;
  font-family: "Noto Sans", sans-serif;
  color: var(--section-title);
}

/* 
---------- USE ----------

The use of these classes will be clarified by an example:

Let's assume we want to create a section-title "New Event" in section-alpha.

In your HTML script / code, inside the <section class="section-alpha"></section>, 
the FIRST piece of code you MUST write is:

  <div class="section-title">
    <p id="sectionalpha-title"><b>New Event</b></p>
  </div>

!_WARNING_!

the class="section-title" should be the same for every single title in your HTML code.

You have to change the id tag, every time choosing the right BEST-color,
writing in your own page CSS stylesheet:

#sectionalpha-title {
  border-bottom: 5px solid var(--BEST-color);
}

!_WARNING_!
/* --- x --- */

/* --- side-menu burger button --- */

.dropbtn {
  background-color: white;
  color: white;

  padding: 0;
  margin-left: 20px;
  margin-right: 15px;
  border: none;

  font-size: 16px;
  font-family: "Noto Sans", sans-serif;

  cursor: pointer;
}

/* The button image can be changed */
.button-img {
  min-height: 25px;
  width: 25px;
}

/* --- navigation bar --- */
nav {
  background-color: #e2e2e2;
  display: flex;
  padding: 0.5% 4%;
  justify-content: space-between;
  align-items: center;
}

nav img {
  width: 115px;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-image: url(menu-bg.svg);
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 120px; /* Place content from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  font-family: "Noto Sans", sans-serif;
  color: #f0f0f0;
  display: block;
  transition: 0.2s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 45px;
  margin-left: 50px;
}

/* --- Footer --- */
.site-footer {
  background-color: white;
  padding: 20px 0 20px;
  font-size: 15px;
  line-height: 24px;
  color: rgb(1, 100, 100);
}

.site-footer .social-icons {
  text-align: center;
  margin-top: 2%;
}

.site-footer .social-icons a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-left: 6px;
  margin-right: 0;
  border-radius: 100%;
  background-color: #dfdfdf;
}

.copyright-text {
  font-family: "Noto Sans", sans-serif;
  text-align: center;
  font-weight: 600;
}

@media (max-width: 991px) {
  .site-footer [class^="col-"] {
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .site-footer {
    padding-bottom: 0;
  }
  .site-footer .copyright-text,
  .site-footer .social-icons {
    text-align: center;
  }
}

.social-icons {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.social-icons li {
  display: inline-block;
  margin-bottom: 4px;
}

.social-icons li.title {
  margin-right: 15px;
  text-transform: uppercase;
  color: #96a2b2;
  font-weight: 700;
  font-size: 13px;
}

.social-icons a {
  background-color: #eceeef;
  color: #818a91;
  font-size: 16px;
  display: inline-block;
  line-height: 44px;
  width: 44px;
  height: 44px;
  text-align: center;
  margin-right: 8px;
  border-radius: 100%;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.social-icons a:active,
.social-icons a:focus,
.social-icons a:hover {
  color: #fff;
  background-color: #29aafe;
}
.social-icons.size-sm a {
  line-height: 34px;
  height: 34px;
  width: 34px;
  font-size: 14px;
}

.social-icons a.facebook:hover {
  background-color: #3b5998;
}

.social-icons a.instagram:hover {
  background-color: #e288dd;
}
.social-icons a.linkedin:hover {
  background-color: #007bb6;
}

@media (max-width: 767px) {
  .social-icons li.title {
    display: block;
    margin-right: 0;
    font-weight: 600;
  }
}

/* --- x --- */

ul {
  list-style-type: circle;
  font-family: "Noto Sans", sans-serif;
  font-size: 17px;
  font-weight: 700;
  padding: 0 5vw 0 2vw;

  color: var(--color-p);
  margin: 0;
}