\ html,
body {
  height: 100%;
  box-sizing: border-box;
  font-family: Lato;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/*---------- Navigation ----------*/
.mainNav {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.mainNav .arrowToSite {
  position: absolute;
  width: 10px;
  height: 10px;
  background: transparent;
  border-top: 5px solid #cecece;
  border-right: 5px solid #cecece;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  right: 10px;
  top: 50px;
  -webkit-transition: width 0.2s, height 0.2s, background-color 0.2s, -webkit-transform 0.2s;
          transition: width 0.2s, height 0.2s, background-color 0.2s, transform 0.2s;
}

.mainNav .arrowToSite:hover,
.mainNav .arrowToSite:active {
  border-color: #00aeef;
  width: 15px;
  height: 15px;
}

.mainNav .logo {
  margin: auto;
  padding-top: 15px;
  padding-bottom: 15px;
}

.mainNav .logo img {
  max-height: 100%;
  max-width: 150px;
}

.mainNav .toSite {
  display: none;
  right: 15px;
  top: 50px;
}

/*---------- Hero ----------*/
.hero {
  height: 60vh;
}

.heroContent {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  color: white;
}

.heroContent .heroBgImg {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.heroContent .heroBgImg h1 {
  text-align: center;
  font-family: Montserrat;
  font-size: 2em;
  font-weight: 700;
  margin: 0;
  padding: 0 10px;
}

.heroContent .heroBgImg h2 {
  font-weight: 300;
  font-size: 1.2em;
  text-align: center;
  margin: 0;
  padding: 0 10px;
}

.heroContent .heroIcon {
  width: 50%;
  height: 20%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.heroGlobal {
  background-image: url("../assets/global.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.heroGlobal .heroIconGlobe {
  background-image: url("../assets/globe.png");
}

.heroGlobal .heroGlobalBgImg {
  background: -webkit-linear-gradient(45deg, rgba(186, 191, 16, 0.7), rgba(0, 174, 239, 0.7));
  background: linear-gradient(45deg, rgba(186, 191, 16, 0.7), rgba(0, 174, 239, 0.7));
}

.heroChange {
  background-image: url("../assets/change.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.heroChange .heroIconBulb {
  background-image: url("../assets/bulb.png");
}

.heroChange .heroChangeBgImg {
  background: -webkit-linear-gradient(45deg, rgba(237, 20, 91, 0.7), rgba(244, 119, 34, 0.7));
  background: linear-gradient(45deg, rgba(237, 20, 91, 0.7), rgba(244, 119, 34, 0.7));
}

.heroYourself {
  background-image: url("../assets/yourself.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.heroYourself .heroIconTag {
  background-image: url("../assets/tag.png");
}

.heroYourself .heroYourselfBgImg {
  background: -webkit-linear-gradient(45deg, rgba(146, 39, 143, 0.7), rgba(0, 122, 194, 0.7));
  background: linear-gradient(45deg, rgba(146, 39, 143, 0.7), rgba(0, 122, 194, 0.7));
}

.heroApply {
  background-color: #007ac2;
  text-transform: uppercase;
  color: white;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  font-weight: 300;
  width: 40%;
  max-width: 150px;
  padding: 10px;
  margin-top: 20px;
  -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
          transition: background-color 0.3s, transform 0.3s;
}

.heroApply:hover,
.heroApply:active {
  background-color: #005a8f;
}

/*----------- Social Media Nav -----------------*/
.socialMedia {
  margin: auto;
  padding: 16px;
}

.socialMedia h1 {
  color: #6d6e71;
  margin-top: 0;
  font-weight: 300;
  font-size: 1.2em;
  text-align: center;
}

.socialMedia .sm {
  margin: auto;
  max-width: 250px;
  padding-left: 0;
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.socialMedia .sm li div {
  height: 50px;
  width: 50px;
  text-indent: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.socialMedia .sm .fbImg {
  background-image: url("../assets/fb.png");
}

.socialMedia .sm .igImg {
  background-image: url("../assets/ig.png");
}

.socialMedia .sm .twImg {
  background-image: url("../assets/tw.png");
}

.socialMedia .sm .ytImg {
  background-image: url("../assets/yt.png");
}

/*------------- Pilars -----------------*/
.pilars {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  margin: auto;
  padding: 40px;
  padding-bottom: 0;
}

.pilars a {
  text-decoration: none;
  margin-bottom: 40px;
}

.pilars h2 {
  margin-top: 8px;
  margin-bottom: 0;
  font-family: Montserrat;
  font-weight: 400;
  text-align: center;
  color: #007ac2;
  letter-spacing: 0.1px;
}

.circle {
  margin: auto;
  border-radius: 50%;
  height: 200px;
  width: 200px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.icon {
  height: 200px;
  width: 200px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.icon:hover,
.icon:active {
  background-size: 110%;
  -webkit-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
      transform: rotate(10deg);
}

.study .studyCr {
  background: -webkit-linear-gradient(45deg, #ed145b, #f47722);
  background: linear-gradient(45deg, #ed145b, #f47722);
}

.study .studyCr .studyIcon {
  background-image: url("../assets/afsTag.png");
}

.host .hostCr {
  background: -webkit-linear-gradient(45deg, #babf10, #00aeef);
  background: linear-gradient(45deg, #babf10, #00aeef);
}

.host .hostCr .hostIcon {
  background-image: url("../assets/door.png");
}

.volunteer .volunteerCr {
  background: -webkit-linear-gradient(45deg, #92278f, #007ac2);
  background: linear-gradient(45deg, #92278f, #007ac2);
}

.volunteer .volunteerCr .volunteerIcon {
  background-image: url("../assets/hand.png");
}

.why .whyCr {
  background: -webkit-linear-gradient(45deg, #babf10, #f47722);
  background: linear-gradient(45deg, #babf10, #f47722);
}

.why .whyCr .whyIcon {
  background-image: url("../assets/puzzle.png");
}

/*------ Snapwidget ------*/
.igFeed {
  padding: 0 40px;
  margin: auto;
  width: 100%;
  max-width: 1280px;
}

/*------- Footer -------*/
footer a {
  font-weight: 400;
  color: #6d6e71;
  text-align: center;
  text-decoration: none;
}

footer a h1 {
  font-weight: 400;
  font-size: 1.5em;
  padding: 24px;
}

footer a a:hover,
footer a a:active {
  color: #007ac2;
  text-decoration: underline;
}

/*--------- Media Queries ---------*/
@media screen and (min-width: 600px) {
  .heroContent h2 {
    max-width: 80%;
    margin: auto;
  }
  .mainNav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .mainNav a {
    text-decoration: none;
    color: #6d6e71;
  }
  .mainNav a:hover,
  .mainNav a:active {
    text-decoration: underline;
    color: #007ac2;
  }
  .mainNav .arrowToSite {
    display: none;
  }
  .mainNav .toSite {
    display: block;
    margin-top: 50px;
    margin-right: 16px;
  }
  .mainNav .logo {
    margin: 0;
  }
  .pilars {
    padding: 40px 24px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
  }
  .pilars a {
    width: 50%;
  }
}

@media screen and (min-width: 380px) {
  .heroContent .heroBgImg h1 {
    font-size: 2.5em;
  }
  .heroContent .heroBgImg h2 {
    font-size: 1.5em;
  }
  .heroApply {
    font-size: 20px;
  }
}

@media screen and (min-width: 840px) {
  .heroContent {
    font-size: 115%;
  }
  .socialMedia h1 {
    font-size: 130%;
  }
  .socialMedia h2 {
    font-size: 1.5em;
  }
}

@media screen and (min-width: 960px) {
  .pilars {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .pilars a {
    width: 25%;
  }
  .pilars h2 {
    margin: 8px auto;
    font-size: 185%;
    max-width: 150px;
  }
  .pilars .circle {
    height: 175px;
    width: 175px;
  }
  .pilars .icon {
    height: 175px;
    width: 175px;
  }
}

@media screen and (min-width: 1280px) {
  main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .mainNav {
    max-width: 90%;
    margin: auto;
  }
  .pilars {
    max-width: 1280px;
  }
  .pilars .circle {
    height: 200px;
    width: 200px;
  }
  .pilars .icon {
    height: 200px;
    width: 200px;
  }
  .socialMedia {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
    padding-bottom: 40px;
    padding-top: 40px;
  }
  .socialMedia h1 {
    font-size: 160%;
  }
  .socialMedia .sm {
    max-width: 300px;
  }
  .socialMedia .sm li div {
    height: 65px;
    width: 65px;
  }
  .igFeed {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }
}

@media screen and (min-width: 1440px) {
  .heroContent {
    font-size: 125%;
  }
}

@media screen and (min-width: 1600px) {
  .heroglobal {
    background-position: 0 -200px;
  }
}