@import url("https://fonts.googleapis.com/css?family=Nunito:200,400,600,700,800|Open+Sans:100,400,700,800");
html, body {
  height: 100%;
  min-width: 300px;
  margin: 0px;
  padding: 0px;
  font-family: 'Nunito', sans-serif !important;
  position: relative; }

.navbar {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 400; }

h1, h2, h3, h4 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 200;
  color: #000; }

.ExperienceName {
  font-size: 3rem;
  font-weight: 600; }

/* FOR REFERENCE
          $h1-font-size:                $font-size-base * 2.5 !default;
          $h2-font-size:                $font-size-base * 2 !default;
          $h3-font-size:                $font-size-base * 1.75 !default;
          $h4-font-size:                $font-size-base * 1.5 !default;
          $h5-font-size:                $font-size-base * 1.25 !default;
          $h6-font-size:                $font-size-base !default;
          */
.entry {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 200;
  font-size: 1.1rem;
  color: #3b424c; }

@media screen and (max-width: 767px) {
  .entry {
    font-size: 1.05rem; } }

@media screen and (max-width: 767px) {
  p.card-text {
    font-size: 1.05rem; } }

.progressFontSize {
  font-family: 'Nunito', sans-serif !important;
  font-size: 1.2rem; }

.bg-success {
  background-color: #95ce33 !important; }

h5, h6 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600; }

.inlineFontChange {
  display: inline; }

/*.progress{
          flex-direction: row;
        }
        */
.ulCenter {
  display: flex;
  justify-content: center; }

p {
  text-align: justify;
  font-size: 1.2rem;
  color: #3B424C; }

@media screen and (max-width: 767px) {
  p {
    font-size: 1rem; } }

#profilePic {
  margin-left: 20px;
  margin-top: 28px;
  margin-bottom: 10px;
  float: right; }

@media only screen and (max-width: 480px) {
  #profilePic {
    float: none;
    margin: 0 auto;
    justify-content: center;
    display: block; } }

.jarallax {
  position: relative;
  z-index: 0; }

.jarallax > .jarallax-img {
  position: absolute;
  object-fit: cover;
  /* support for plugin https://github.com/bfred-it/object-fit-images */
  font-family: 'object-fit: cover;';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; }

/* Help from: https://free.nkdev.info/jarallax/*/
.overlay {
  display: table;
  width: 100%;
  height: 75vh;
  background-color: rgba(190, 190, 190, 0.6); }

@media only screen and (max-height: 740px) {
  .overlay {
    height: 100vh; } }

.overlay-cell {
  position: absolute;
  left: 0;
  top: 34%;
  width: 100%;
  text-align: center; }

/*.heroSection {
          height: 100vh; //Controls the height of the Hero
        }
        */
.projectPageSection {
  height: 50vh; }

.subSection {
  height: 300px; }

.overlay-cell.header {
  top: 115px; }

.overlay-cell.project {
  top: 18vh; }

#baseNav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  transition: all 200ms ease-in-out; }

#baseNav.hide {
  transform: translateY(-100%); }

.navbar {
  top: 0;
  margin: 0;
  position: fixed;
  width: 100%; }

.navbar-nav .nav-link {
  font-size: 1.2rem;
  font-weight: bold; }
  @media (max-width: 34em) {
    .navbar-nav .nav-link {
      font-weight: normal; } }
  .navbar-nav .nav-link .navbar-nav .nav-item {
    padding: 0 1rem; }
    @media (max-width: 34 em) {
      .navbar-nav .nav-link .navbar-nav .nav-item {
        padding: 0; } }

.navbar-toggler {
  cursor: pointer; }

.navbar {
  background-color: rgba(59, 66, 76, 0); }
  .navbar .navbar-brand {
    color: #ffffff; }
    .navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
      color: #10becb; }
  .navbar .navbar-text {
    color: #ffffff; }
  .navbar .navbar-nav .nav-link {
    color: #ffffff;
    border-radius: .25rem;
    margin: 0 0.25em; }
    .navbar .navbar-nav .nav-link:not(.disabled):hover, .navbar .navbar-nav .nav-link:not(.disabled):focus {
      color: #10becb; }
  .navbar .navbar-nav .dropdown-menu {
    background-color: #3b424c; }
    .navbar .navbar-nav .dropdown-menu .dropdown-item {
      color: #ffffff; }
      .navbar .navbar-nav .dropdown-menu .dropdown-item:hover, .navbar .navbar-nav .dropdown-menu .dropdown-item:focus, .navbar .navbar-nav .dropdown-menu .dropdown-item.active {
        color: #10becb; }
  .navbar .navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-item.active .nav-link:hover, .navbar .navbar-nav .nav-item.active .nav-link:focus, .navbar .navbar-nav .nav-item.show .nav-link, .navbar .navbar-nav .nav-item.show .nav-link:hover, .navbar .navbar-nav .nav-item.show .nav-link:focus {
    color: #10becb; }
  .navbar .navbar-toggle .navbar-toggler-icon {
    color: #ffffff; }
  .navbar .navbar-collapse,
  .navbar .navbar-form {
    border-color: #ffffff; }
  .navbar .navbar-link {
    color: #ffffff; }
    .navbar .navbar-link:hover {
      color: #10becb; }

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ffffff; }
    .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #10becb; }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #10becb; } }

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ffffff; }
    .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #10becb; }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #10becb; } }

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ffffff; }
    .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #10becb; }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #10becb; } }

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ffffff; }
    .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #10becb; }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #10becb; } }

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #ffffff; }
  .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #10becb; }

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #10becb; }

.nav-item.active {
  border-bottom: #95ce33 2px solid;
  margin: 0; }

.containerPadding {
  padding-top: 3em;
  padding-bottom: 3em; }

.logoImages {
  margin: auto;
  display: block; }

dt {
  font-size: 1.3em;
  position: relative; }

dt:not(:first-of-type) {
  margin-top: 2em; }

dt:before {
  content: "";
  font-family: FontAwesome;
  left: -40px;
  top: 5px;
  display: inline-block;
  margin-right: 8px; }

dt.achievement:before {
  content: "\f091"; }

dt.academic:before {
  content: "\f19d"; }

dd {
  margin-left: 0; }

dd.description {
  font-size: 1.2rem; }

dd.subdescription {
  font-size: 1rem;
  font-weight: 700; }

/*
          


          li:before {
            content: ""; 
            font-family: FontAwesome;
            left: -40px;
            position:absolute;
            top: 5px;
        }

        li.achievement:before {
            content: "\f091"; 

          //These two nested lines control the FA Icon animation! because of the fact i am using a ::before element, I cannot use the native fa spinning classes explicitly in the html
          -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear;
        }
        
        li.puzzle:before {
          content: "\f12e"; 
          -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear;
        }

        li.wrench:before {
          content: "\f0ad"; 
          -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear;
        }

        li.academic:before {
          content: "\f19d"; 
          -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear;
        }

        li.plane:before {
          content: "\f072"; 
          -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear;
        }

        li.car:before {
          content: "\f1b9"; 
          -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear;
        }

        li.volunteer:before {
          content: "\f0c0"; 
          -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear;
        }

        li.camera:before {
          content: "\f030"; 
          -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear;
        }

        */
.skillcol {
  margin: auto; }

li.puzzle::before {
  font-family: "FontAwesome";
  font-size: 1.1rem;
  content: "\f12e";
  margin-right: 8px;
  display: inline-block;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear; }

@media (max-width: 767.98px) {
  li.puzzle::before {
    font-size: 0.83rem; } }

li.code::before {
  font-family: "FontAwesome";
  font-size: 1.1rem;
  content: "\f121";
  margin-right: 8px;
  display: inline-block;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear; }

@media (max-width: 767.98px) {
  li.code::before {
    font-size: 0.83rem; } }

li.money::before {
  font-family: "FontAwesome";
  font-size: 1.1rem;
  content: "\f0d6";
  margin-right: 8px;
  display: inline-block;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear; }

@media (max-width: 767.98px) {
  li.money::before {
    font-size: 0.83rem; } }

li.wrench::before {
  font-family: "FontAwesome";
  font-size: 1.1rem;
  content: "\f0ad";
  margin-right: 8px;
  display: inline-block;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear; }

@media (max-width: 767.98px) {
  li.wrench::before {
    font-size: 0.83rem; } }

li.plane::before {
  font-family: "FontAwesome";
  font-size: 1.1rem;
  content: "\f072";
  margin-right: 8px;
  display: inline-block;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear; }

@media (max-width: 767.98px) {
  li.plane::before {
    font-size: 0.83rem; } }

li.car::before {
  font-family: "FontAwesome";
  font-size: 1.1rem;
  content: "\f1b9";
  margin-right: 8px;
  display: inline-block;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear; }

@media (max-width: 767.98px) {
  li.car::before {
    font-size: 0.83rem; } }

li.volunteer::before {
  font-family: "FontAwesome";
  font-size: 1.1rem;
  content: "\f0c0";
  margin-right: 8px;
  display: inline-block;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear; }

@media (max-width: 767.98px) {
  li.volunteer::before {
    font-size: 0.83rem; } }

li.camera::before {
  font-family: "FontAwesome";
  font-size: 1.1rem;
  content: "\f030";
  margin-right: 8px;
  display: inline-block;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear; }

@media (max-width: 767.98px) {
  li.camera::before {
    font-size: 0.83rem; } }

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }

.shift {
  margin-left: 20px; }

.barbie {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #3b424c;
  justify-content: center; }

.barbieitem {
  font-size: 1.1em; }

@media (max-width: 767.98px) {
  .barbieitem {
    font-size: 0.88rem; } }

.testphoto {
  display: inline-block;
  vertical-align: middle; }

.joblist {
  display: inline-block; }

.labname {
  display: inline-block;
  vertical-align: middle;
  border: solid black 1px; }

.youtube {
  max-width: 300px;
  max-height: 300px;
  position: relative !important;
  float: right; }

.teensie {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.teensie2 {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.hoverAnimationRow {
  padding: 10px 0;
  text-align: center; }

.hoverAnimationRow > div > div {
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: 0.2s; }

.hoverAnimationRow > div:hover > div {
  margin-top: -10px;
  border: 1px solid #c8c8c8;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
  background: rgba(200, 200, 200, 0.1);
  transition: 0.5s; }

.portfolio-item {
  margin-bottom: 30px; }

label {
  color: #333; }

.btn-send {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px; }

.presentationSum {
  font-size: 1.1rem;
  color: #3b424c; }

@media screen and (max-width: 767px) {
  .presentationSum {
    font-size: 0.95rem; } }

.PILink {
  color: #95ce33; }

.ExperienceName_Link {
  color: #000000; }

.honorsColor {
  color: #3b424c; }

.jarallaxTextResize {
  vertical-align: middle; }

@media screen and (max-width: 767px) {
  .jarallaxTextResize {
    font-size: 2.8rem; } }

@media screen and (max-width: 767px) {
  .jarallaxSubtextResize {
    font-size: 1.8rem; } }

/*img-hover {
  width: 310px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

:after .transition {
  -webkit-transform: scale(1.1); 
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);

}
*/
.fadeInImgDown {
  transition: all 1s ease-in-out;
  opacity: 0;
  transform: translate3d(0, -60%, 0); }

.fadeInImgDown.load {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

.fadeInImgDown.load.floated {
  transition: all .1s ease-in-out; }

@media only screen and (min-width: 640px) and (min-height: 450px) {
  .fadeInImgDown.load.floated:hover {
    transform: scale(1.1); } }

.smallHeroSwap {
  display: none; }

@media only screen and (max-width: 500px) {
  .defaultHero {
    display: none; }
  .smallHeroSwap {
    display: block; } }

/* 
 
 //From mhmdmodan.com
.bannericon {
  height: 64px;
  width: 64px;
  margin-left: 25px;
  margin-right: 25px;
}

@media only screen and (max-width: 640px), only screen and (max-height: 480px) {
  .bannericon {
      //height: 100px;
      //width: 100px;
      height: 64px;
      width: 64px;
  }
}

@media only screen and (max-width: 480px) {
  .bannericon {
     // height: 87px;
      //width: 87px;
      height: 64px;
      width: 64px;
  }
}

@media only screen and (max-width: 410px), only screen and (max-height: 370px) {
  .bannericon {
      //height: 70px;
      //width: 70px;
      height: 64px;
      width: 64px;
  }
}

@media only screen and (max-width: 640px) {
  .bannericon {
      //margin-left: 20px;
      //margin-right: 20px;
      height: 16px;
      width: 16px;
  }
}

@media only screen and (max-width: 370px) {
 .bannericon {
      //margin-left: 10px;
      //margin-right: 10px;
  }
}

*/
.bannericon {
  height: 64px;
  width: 64px; }

.bannericon {
  margin-left: 25px;
  margin-right: 25px; }

@media only screen and (max-width: 640px), only screen and (max-height: 480px) {
  .bannericon {
    height: 64px;
    width: 64px; } }

@media only screen and (max-width: 480px) {
  .bannericon {
    height: 50px;
    width: 50px; } }

@media only screen and (max-width: 410px), only screen and (max-height: 370px) {
  .bannericon {
    height: 50px;
    width: 50px; } }

@media only screen and (max-width: 640px) {
  .bannericon {
    margin-left: 20px;
    margin-right: 20px; } }

@media only screen and (max-width: 370px) {
  .bannericon {
    margin-left: 10px;
    margin-right: 10px; } }

.footerText {
  font-size: 0.8rem;
  color: gray; }

.footerTextName {
  font-size: 1 rem;
  margin-top: 0;
  margin-bottom: 0rem;
  color: white; }

.footer {
  background-color: #3B424C;
  height: 80px; }

.blogAuthor {
  font-size: 0.8rem; }

.blog-post .post-footer {
  font-size: 0.8em;
  margin-top: 20px; }

.post .avatar {
  max-width: 40px;
  min-width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 10px; }

.post-meta {
  margin: 10px 0;
  font-size: 0.8em; }

.post-meta .date {
  text-transform: uppercase;
  font-weight: 400; }

.post-meta .date::after {
  display: none; }

.post p:not(.lead) {
  font-weight: 400;
  color: #3b424c;
  font-size: 1em; }

.post a {
  text-decoration: none; }

.post a:hover, .post a:focus {
  text-decoration: none; }

.post .category a {
  color: #3b424c;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none; }

.post .category p {
  color: #3b424c;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none; }

.post .date {
  letter-spacing: 0.05em;
  font-weight: 400;
  text-transform: uppercase;
  color: #3b424c; }

.post .avatar {
  max-width: 40px;
  min-width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 10px; }

.post .title,
.post .date,
.post .comments,
.post .views {
  font-weight: 400;
  color: #3b424c;
  text-transform: capitalize; }

.post .title i,
.post .date i,
.post .comments i,
.post .views i {
  margin-right: 5px;
  font-size: 1.1em; }

.post .title::after,
.post .date::after,
.post .comments::after,
.post .views::after {
  content: '|';
  display: inline-block;
  margin: 0 7px;
  font-size: 0.9em;
  color: #3b424c; }

.post .post-tags {
  margin-top: 30px; }

.post h3 {
  color: #3b424c; }

.post .post-tags .tag {
  padding: 5px 25px;
  border: 1px solid #ddd;
  margin: 5px;
  color: #777;
  font-size: 0.75em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border-radius: 50px; }

.post .post-tags .tag:hover {
  background: #3b424c;
  color: #fff;
  border-color: #3b424c; }

.post .meta-last::after {
  display: none; }

.blog-post {
  padding-left: 0;
  padding-right: 0; }

.blog-post .icon {
  min-width: 35px;
  max-width: 35px;
  height: 35px;
  border-radius: 50%;
  line-height: 32px;
  border: 1px solid #ddd;
  color: #3b424c;
  font-size: 1.5em;
  text-align: center;
  -webkit-transition: all 0.2s;
  transition: all 0.2s; }
  @media (max-width: 767px) {
    .blog-post .icon .posts-nav a {
      width: 100% !important; } }

@media (max-width: 575px) {
  .blog-post .title::after {
    display: none !important; }
  .blog-post .author {
    margin-bottom: 10px; } }

.blog-post .post-footer {
  margin-top: 20px; }

.blog-post .post-body {
  margin-top: 40px; }

.blog-post .post-thumbnail img {
  width: 75%;
  margin-bottom: 10px;
  margin-top: 30px; }

.blog-post .post-body p {
  margin-bottom: 30px; }

.blog-post .post-body p:not(.lead) {
  font-size: 1.2em;
  line-height: 1.7em;
  font-weight: 200; }

.postBackgroundColor {
  background-color: #e5e5e5; }

.postBodyPic {
  width: 50%;
  margin-bottom: 10px;
  margin: 10px;
  align-content: center; }

main.posts-listing {
  padding-top: 50px;
  padding-left: 0;
  padding-right: 0; }

main.posts-listing .post {
  margin-bottom: 50px; }

main.posts-listing .post-footer {
  font-size: 0.8em; }

.centerCaptcha {
  text-align: center; }

.g-recaptcha {
  display: inline-block; }

.table {
  margin: auto; }

.card {
  margin: auto; }

@font-face {
  font-family: 'si';
  src: url("../fonts/socicon.eot");
  src: url("../fonts/socicon.eot?#iefix") format("embedded-opentype"), url("../fonts/socicon.woff") format("woff"), url("../fonts/socicon.ttf") format("truetype"), url("../fonts/socicon.svg#icomoonregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: si;
    src: url(PATH_TO/socicon.svg) format(svg); } }

.soc {
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none; }

.soc li {
  display: inline-block;
  *display: inline;
  zoom: 1; }

.soc li a {
  font-family: si !important;
  font-style: normal;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -o-transition: .1s;
  -ms-transition: .1s;
  -moz-transition: .1s;
  -webkit-transition: .1s;
  transition: .1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  overflow: hidden;
  text-decoration: none;
  text-align: center;
  display: block;
  position: relative;
  z-index: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 27px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin-right: 50px;
  color: #ffffff;
  background-color: #10bdcb; }

.soc a:hover {
  z-index: 2;
  -webkit-transform: scale(1.1);
  transform: scale(1.1); }

.soc-icon-last {
  margin: 0 !important; }

.soc-linkedin:before {
  content: '\e049'; }

.soc-twitter:before {
  content: '\e040'; }

.soc-facebook:before {
  content: '\e041'; }

.soc-github:before {
  content: '\e030'; }

@media screen and (max-width: 767px) {
  .soc li a {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 24px; } }