/* ---------------------------------------------------*/
/* --------------- CSS GRID FRAMEWORK --------------- */
/* ---------------------------------------------------*/

/* --------------- GLOBAL STYLES --------------- */

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

body {
    margin: 0;
    padding: 0;
    font-family: tahoma, sans-serif;
}

/* --------------- TYPEOGRAPHY --------------- */

h1, h2, h3, h4, h5, h6, p {
    margin-left: 5px;
    margin-right: 5px;
}


a {
    text-decoration: none;
    color: rgb(34, 109, 222);
}

hr {
    margin: 10px 0;
    border: none;
    height: 1px;
    background-color: lightgrey;
}

/* --------------- LAYOUT STYLES --------------- */
.container {
    width: 1200px;
    margin: auto;
    background-color: #fff;
}

/* --------------- BUTTON STYLES --------------- */
[class*="btn-"] {
    display: inline-block;
    margin: 20px auto;
    padding: 10px;
    border-radius: 15px;
    text-align: center;
}

.btn-primary {
    color: white;
    background-color: #6884be;
}

.btn-secondary {
    color: #6884be;
    background-color: #fff;
    border: 1px solid #6884be;
    margin-left: 20px;
    margin-right: 20px;
}

/* --------------- CALLOUT STYLES --------------- */
[class*="callout-"] {
    padding: 19px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: solid 1px transparent;
}

.callout-primary {
    color: 004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

.callout-secondary {
    color: black;
    background-color: #f5f5f5;
    border-color: #e3e3e3;
}

/* --------------- IMAGE STYLES ---------------  */
img.img-fluid {    /* Any Image class that has the image-fluid class, not just inside */
    width: 100%;
}

img.img-rounded {
    border-radius: 10px;
}

img.img-circle {
    border-radius: 50%;
}


/* --------------- NAVBAR ---------------  */
/* FOR JS */
#navbar {
    overflow: hidden;
    transition: 0.4s;
    z-index: 1;
    position: fixed;
    top: 0;
    width: 100%;
    /* padding-right: 20px; */
}

.topnav {
    padding: 5% 0;
}

.topnav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
}

/* .topnav li {

} */

.topnav a {
    color: #fff;
    text-decoration: none;
    background-color: #0064ff;
    /* display: block; */
    padding: 10px 12px;
    border-radius: 5px;
    border: 1px solid lightgrey;
    margin-top: 2%;
}

.menu a {
    line-height: 40px;
}

.menu a:hover {
    background-color: black;
    color: white;
}

label {
    font-size: 26px;  /*For HBM */
    line-height: 70px;
    display: none;
}

#toggle {  /*For HBM */
    display: none;
}


/* --------------- FOOTER ---------------*/
footer {
    color: #fff;
    padding: 5px;
    background-color: #000;
    text-align: center;
}

/* Imported */
/* Main styles */
p {
    margin: 16px 0;
}
/* Top Bar */

.heading-row {
    z-index: 1;
    background-color: #fff;
}

header .row {
    border-bottom: 2px solid grey;
    padding: 1%;
}

header img, header .btn-primary {
    width: 100%;
}

#get-involved {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
}

#get-involved a {
    background-color: rgb(231, 175, 42);
    border: 1px solid black;
    padding: 20px;
    color: black;
    font-weight: bold;
}

.banner {
    background-image: url('img/header-image.jpg'); /* Need a bigger image */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    position: relative;
    margin-top: 100px;
}

.header-text {
    background-color: #6884be;
    color: #fff;
    padding: 20px;
    position: absolute;
    position: absolute;
    width: 30%;
    top: 80px;
    left: 10%;
}

header h1 {
    font-size: 3.25em;
    padding: 10px 0;
    margin: 2% 0;
}

header .col-1 i {
    display: block;
    font-size: 2em;
    margin: 10% auto;
    text-align: center;
    color: black;
}

.title-blue {
    color: #6884be;
}

.title-green {
    color: #037517;
}

.title-gold {
    color: #ffcf34;
}

/* Company Intro */

.box {
    margin: 5%;
    padding: 5%;
}

#welcome {
    background-color: #6884be;
    color: white;
    margin: 50px;
    padding: 11% 50px;
}


#events .box {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 300px;
}

#events a {
    padding: 20px 50px;
    font-size: 1.5em;
}

#event-support a:hover, #consultancy a:hover {
    color: #6884be;
    background-color: #fff;
}

#our-events a:hover {
    color: #fff;
    background-color: #6884be;
}

#event-support {
    background-image: url('img/toronto.jpg');
    background-size: cover;
    background-position: center center;
}

#our-events {
    background-image: url('img/elf-team.jpg');
    background-size: cover;
    background-position: center center;
}

#consultancy {
    background-image: url('img/consulting1.jpg');
    background-size: cover;
    background-position: center center;
}

/* 2019 Events */
#current-events {
    text-align: center;
    margin: 3% 1%;
}

#current-events h2, #previous-clients h2, #contact h2 {
    padding: 10px 0 2px 0;
    text-align: center;
    font-size: 3em;
    color: #ffcf34;
    letter-spacing: -0.05em;
    text-shadow: 1px 1px 3px black;
}

/* Previous Clients */
#previous-clients {
    margin: 1% 3%;
}

.event-box {
    position: relative;
}

#event-1, #event-2, #event-3 {
    text-align: center;
    margin: 0 auto;
    position: absolute;
    padding-left: 12%;
    padding-right: 12%;
    top: 5%;
}

#event-1 h3, #event-2 h3, #event-3 h3 {
    color: #128f00;
    margin-bottom: 0;
    margin-top: 10%;
}

#event-1 i, #event-2 i, #event-3 i {
    font-size: 3em;
    color: #128f00;
    margin-top: 10px;
}

.bg-img img {
    opacity: 0.15;
    margin: 0;
    height: 500px;
}

.event-img {
    height: 150px;
    margin: 0 auto;
    width: 40%;
}

/* Contact Us */
#contact {
    margin: 0;
}

#contact .col-5, #contact .col-7, #contact img {
    padding: 0;
    height: 500px;
}

#contact img {
    margin: auto 0;
    background-color: #6a79dd;
}

#contact-form {
    width: 60%;
    margin: 5% auto;
    padding: 3%;
}

#contact .col-7 {
    background-color: #6a79dd;
    text-align: center;
    color: white;
}

#contact .col-7 a {
    color: white;
}

#contact .col-7 i {
    font-size: 3em;
    color: white;
    padding-right: 50px;
}

#contact td {
    font-size: 1.5em;
    padding: 10px 0;
}

#contact .left-align {
    text-align: left;
}

/* ABOUT PAGE */
/* Simon, change the background color of other pages below (this rule) */
#about-body {
    background-color: #a9e2f9;
}

#about-text {
    padding: 3% 10%;
}


/* --------------- GRID STYLES ---------------*/
/* Row */
nav::after,
section::after,
aside::after,
main::after,
footer::after,
.row::after {
  content: "";
  clear: both;
  display: table;
}

.row {
    margin: 0 -10px;      /* Counter the padding below */
}

/* Columns */
[class*="col-"] {
  float: left;
  padding: 0 10px;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* Media Quieres - This is for responsive design */

/* Tablet */
@media all and (max-width:900px){
       .col-1{ width: 33.33%;  }
       .col-2{ width: 50%;     }
       .col-3{ width: 83.33%;  }
       .col-4{ width: 100%;    }
       .col-5{ width: 100%;    }
       .col-6{ width: 100%;    }

       /* Hidden Areas - From Tablet Down */

       #social-media-top, #company-intro .col-5, #previous-clients, #contact .col-5, #get-involved {
           display: none;
       }

     /* Menu Changes start */
        header .col-1 {
            width: 20%;
            margin: 0 auto;
        }

       #logo {
           width: 100px;
           margin: 0 auto;
       }

      header .col-4 {
          width: 80%;
          text-align: center;
      }

      .topnav {
          text-align: center;
          margin: 0;
          padding: 0;
      }

      #get-involved .col-1 {
          width: 100%;
          padding: 0 10%;
      }

      /* Menu Changes End */

      .banner h1 {
          font-size: 2em;
      }

        #company-intro .row {
            padding: 0;
            margin: 0;
        }

      #company-intro .col-7, #welcome {
          width: 100%;
          margin: 0;
      }

      #company-intro .col-7 {
          padding: 0;
      }

      .container {
          width: 100%;
      }

      #current-events .col-3 {
          width: 50%;
      }

      #contact .col-7, #about-text {
          width: 100%;
      }

      #contact .col-7 {
          height: auto;
      }

      #contact a, #contact i {
          font-size: 16px;
      }

      #about-main img{
          width: 400px;
          margin: 0 50px;
      }

}

/* Phones */
@media all and (max-width:650px){
     .col-1{ width: 50%;     }
     .col-2{ width: 100%;    }
     .col-3{ width: 100%;    }
     .col-4{ width: 100%;    }
     .col-5{ width: 100%;    }
     .col-6{ width: 100%;    }

    /* Hamburger Menu Start */
    label {
        display: block;
        cursor: pointer;
        width: 26px;
        margin: 0 auto;
    }

    .menu {
        text-align: center;
        width: 100%;
        display: none;
    }

    .menu a {
        clear: right;
        display: block;
        border-bottom: #eaeaeb;
        margin: 0;
    }

    #toggle:checked + .menu {
        display: block;
    }

    /* Hamburger Menu End */

    header .col-1 {
        display: none;
    }

    header .col-4, header .col-5 {
        width: 100%;
    }

    .banner h1 {
        font-size: 1em;
    }

    .topnav a {
        border-radius: 0;
    }


}