/* 
*  CSS TABLE OF CONTENTS
*   
*  1.0 - Reset
*  2.0 - Fonts
*  3.0 - Globals
*  4.0 - Top Title
*  5.0 - Color Palette
*  6.0 - Buttons & Lines
*  7.0 - Header
*  8.0 - Navigation Bar
*/

/*** 1.0 - Reset ***/
body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

/*** 2.0 - Fonts ***/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
}

body, p {
    font-family: 'Roboto', sans-serif;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6{
    font-family: 'Roboto', sans-serif;
}

/*** 3.0 - Globals ***/

/*** 3.1 - Scrollbar ***/

/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--light-grey); 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--zeipekkis-primary);  
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--zeipekkis-primary);  
  }

a:hover img{
    opacity: .9;
}

/* 4.0 - Top Title */

.main-p {
    margin-top: 35%;
}

/*** 5.0 - Color Palette ***/
:root {
    --zeipekkis-primary: #005F61;
    --zeipekkis-secondary: #B1E4E3;
    --pure-white: #FFFFFF;
    --grey: #A7A9AC;
    --light-grey: #E2E2E2;
}

body{
    color: var(--zeipekkis-primary);
    
}

::selection {
    color: var(--zeipekkis-primary);
    background: var(--pure-white);
}

.bg-zeipekkis-primary {
    background-color: var(--zeipekkis-primary);
}

.bg-zeipekkis-secondary {
    background-color: var(--zeipekkis-secondary);
}

.text-zeipekkis-primary {
    color: var(--zeipekkis-primary);
}
.text-zeipekkis-secondary {
    color: var(--zeipekkis-secondary);
}
.text-white {
    color: var(--pure-white);
}

.link-zeipekkis-primary {
    color: var(--zeipekkis-primary);
    text-decoration: none;
    transition: all .5s linear;
}
.link-zeipekkis-primary:hover,
.link-zeipekkis-primary:focus {
    color: var(--zeipekkis-secondary);
    transition: all .25s linear;
}

.link-zeipekkis-white {
    color: var(--pure-white);
    text-decoration: none;
    transition: all .5s linear;
}

.link-zeipekkis-white:hover,
.link-zeipekkis-white:focus {
    color: var(--zeipekkis-secondary);
    transition: all .25s linear;
}
.link-zeipekkis-secondary {
    color: var(--zeipekkis-secondary);
    text-decoration: none;
    transition: all .5s linear;
}

.link-zeipekkis-secondary:hover,
.link-zeipekkis-secondary:focus {
    color: var(--pure-white);
    transition: all .25s linear;
}

/*** 6.0 - Buttons ***/
.btn {
    border-width: 1.75px;
    font-family: 'Roboto', sans-serif;
    padding: .375rem .75rem;
    border-radius: 0;
    font-size: 1rem;
}

.btn-outline-primary {
    color: var(--zeipekkis-primary);
    border-color: var(--zeipekkis-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    color: var(--zeipekkis-primary);
    background-color: var(--zeipekkis-secondary);
    border-color: var(--zeipekkis-primary);
}

.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.1rem rgb(248 249 250 / 50%);
}
.blueline {
    border-top: 2px solid var(--zeipekkis-primary);
}

/*** 7.0 - Header ***/
h2 {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: 1.2;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.2rem;
}


/*** 8.0 - Navigation Bar ***/
.navbar {
    padding: 3%;
}

.nav-item {
    margin: .5%;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--pure-white);
    font-family: 'Roboto', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 1.2;
    text-transform: uppercase;
    transition: 2ms ease;
    letter-spacing:0.05em;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--pure-white);
    transition: 2ms ease;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show>.nav-link {
    color: var(--zeipekkis-secondary);
    transition: 2ms ease;
}

.bg-nav {
    background: transparent;
    transition: 500ms ease;
}

.scrolled {
    background-color: var(--zeipekkis-primary) !important;
}
.st0{
    fill:var(--zeipekkis-secondary);
}
.scrolled .st0{
    fill: var(--pure-white);
}
#logo {
    width: 120%;
    transition: 500ms ease;
}
.scrolled #logo {
    width: 100%;
}
.navbar-collapse {
    opacity: 0;
    transition: 500ms ease;
}
.scrolled .navbar-collapse {
    opacity: 1;
    transition: 500ms ease;
}
.navbar-toggler {
    background: transparent;
    border: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    margin: 0;
    opacity: 0;
}
.scrolled .navbar-toggler {
    opacity: 1;
    transition: 500ms ease;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
    padding: 2%;
}

.navbar-toggler span {
    color: var(--zeipekkis-secondary);
}

.dropdown-divider {
    border-top: 1px solid #A7A9AC;
}

.nav-item a:hover {
    color: var(--zeipekkis-secondary) !important;
}