@charset "UTF-8";
/* CSS Document */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}


/*
Perusrunko
 */

::-moz-selection {
  background: #FFF;
  text-shadow: none;
}

::selection {
  background: #FFF;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}


fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}


textarea {
  resize: vertical;
}


.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

.color-primary-0 {
  color: #3499DB
}


.rgba-primary-0 {
  color: rgba( 52, 153, 219, 1)
}

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

.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html,
body {
  font-family: 'Montserrat', sans-serif; !important;
}

.glyphicon,
.fa {
  color: #83a43e;
}

header {
  background-image: linear-gradient(rgba( 181, 200, 139, 0.8), rgba( 230, 237, 216, 0.8)), url('tausta-01.png');
  background-size: cover;
  background-position: center;
  height: 100vh;
  min-height: 500px;
}

.navbar,
.navbar-default {
  background-color: #ffffff !important;
  border: none !important;
  padding: 1rem 1rem !important;
}

.navbar-nav > li > a:link,
.navbar-nav > li > a:visited {
  color: black !important;
  text-transform: uppercase !important;
  font-size: 1.2rem;
  border-bottom: 1px solid transparent !important;
  padding: 0;
  margin: 15px;
}

.navbar-brand {
  color: white !important;
  font-size: 1.2rem;
}

.navbar-brand .glyphicon {
  color: #83a43e !important;
  margin-left: 1rem;
  font-size: 2rem;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:active {
  color: #83a43e !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid white !important;
  transition: border-bottom 1s;
  padding: 0;
  margin: 15px;
}

.navbar-scrolled {
  background-color: #FFFFFF !important;
  transition: background-color 0.4s;
}

#main-heading {
  font-size: 8rem;
  font-weight: 300;
  text-transform: uppercase;
  width: 80vw;
}

#main-subheading {
  font-size: 6rem;
  font-weight: 300;
}

@media (max-width:1024px) {
  #main-heading {
    font-size: 5rem;
  }
  #main-subheading {
    font-size: 4rem;
  }
}

@media (max-width:768px) {
  #main-subheading {
    font-size: 3rem;
  }
}

.navbar-default .navbar-toggle:hover {
  background-color: #83a43e !important;
  transition: all 0.4s;
}

.navbar-default .navbar-toggle:focus {
  background-color: #83a43e !important;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #83a43e !important;
}

.hero-text-box {
  position: absolute;
  text-align: center;
  color: #FFF;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero-text-box a {
  position: relative;
  top: 100px;
}

.hero-text-box .btn,
.hero-text-box .btn-default,
.hero-text-box .btn-default:visited,
.hero-text-box .btn-default:active:hover,
.hero-text-box .btn-default:active:focus {
  color: white;
  background-color: #9cb665;
  transition: all 0.4s;
}

.hero-text-box .btn:hover,
.hero-text-box .btn-default:hover,
.hero-text-box .btn-default:focus{
  color: white;
  background: #83a43e;
  transition: all 0.4s;
}

#yritys .glyphicon {
  font-size: 50px;
  margin: 2rem;
}

#yritys h3 {
  margin: 2rem;
}

#yritys p {
  padding: 1rem 2rem;
  font-size: 1.6rem;
  text-align: center;
}

@media (max-width: 1024px) {
  #yritys p {
    font-size: 1.6rem;
  }
  #yritys h3 {
    padding: 0;
    margin-bottom: 1rem;
  }
}

@media (max-width: 768px) {
  #yritys p {
    font-size: 1.4rem;
    padding: 10px;
  }
}

@media (max-width: 425px) {
  #yritys .glyphicon {
    margin: 0;
  }
}

#yritys {
	 background-color: #f8f8f8;
  padding-top: 5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #e7e7e7;
}

#palvelut .glyphicon {
  font-size: 50px;
  margin: 2rem;
}

#palvelut h3 {
  margin: 2rem;
}

#palvelut p {
  padding: 1rem 2rem;
  font-size: 1.6rem;
  text-align: center;
}

@media (max-width: 1024px) {
  #palvelut p {
    font-size: 1.5rem;
  }
  #palvelut h3 {
    padding: 0;
    margin-bottom: 1rem;
  }
}

@media (max-width: 768px) {
  #palvelut p {
    font-size: 1.6rem;
    padding: 10px;
  }
}

@media (max-width: 425px) {
  #palvelut .glyphicon {
    margin: 0;
  }
}

#palvelut {
	 background-color: #f8f8f8;
  padding-top: 5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #e7e7e7;
}

#tiimimme .glyphicon {
  font-size: 50px;
  margin: 2rem;
}

#tiimimme h3 {
  margin: 2rem;
}

#tiimimme p {
  padding: 1rem 2rem;
  font-size: 1.6rem;
  text-align: center;
}

@media (max-width: 1024px) {
  #tiimimme p {
    font-size: 1.6rem;
  }
  #tiimimme h3 {
    padding: 0;
    margin-bottom: 1rem;
  }
}

@media (max-width: 768px) {
  #tiimimme p {
    font-size: 1.6rem;
    padding: 10px;
  }
}

@media (max-width: 425px) {
  #tiimimme .glyphicon {
    margin: 0;
  }
}

#tiimimme {
	 background-color: #f8f8f8;
  padding-top: 5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #e7e7e7;
}

#referenssit .glyphicon {
  font-size: 50px;
  margin: 2rem;
}

#referenssit h3 {
  margin: 2rem;
}

#referenssit p {
  padding: 1rem 2rem;
  font-size: 1.6rem;
  text-align: center;
}

@media (max-width: 1024px) {
  #referenssit p {
    font-size: 1.6rem;
  }
  #referenssit h3 {
    padding: 0;
    margin-bottom: 1rem;
  }
}

@media (max-width: 768px) {
  #referenssit p {
    font-size: 1.6rem;
    padding: 10px;
  }
}

@media (max-width: 425px) {
  #referenssit .glyphicon {
    margin: 0;
  }
}

#referenssit {
	 background-color: #f8f8f8;
  padding-top: 5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #e7e7e7;
}

#p {
	 background-color: #f8f8f8;
  padding-top: 5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #e7e7e7;
}

h3 {
  padding-bottom: 2rem;
}

.fizz {
  font-size: 6rem;
  color: #3499DB;
}

#yhteys {
  color: white;
  background-color: #9cb665;
  padding: 3rem 0;
}

#yhteys i,
#yhteys .glyphicon,
#yhteys img {
  padding: 10px 10px;
  font-size: 30px;
  margin-bottom: 30px;
}

#yhteys p {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

@media (max-width: 1024px) {
  #yhteys p {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  #yhteys p {
    font-size: 1.6rem;
  }
}

#yhteys .glyphicon,
#yhteys .fa {
  color: white;
}

#yhteys .glyphicon:hover,
#yhteys .fa:hover {
  color: #C9C9C9;
  transition: all 0.4s;
}


.hidden {
  display: none !important;
}


.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}


.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}


@media only screen and (min-width: 35em) {

}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
  
}


@media print {
  *,
  *:before,
  *:after,
  *:first-letter,
  *:first-line {
    background: transparent !important;
    color: #000 !important;

                                   
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

.responsive {
    max-width: 25%;
    height: auto;
}

.responsive2 {
    max-width: 50%;
    height: auto;
}

.responsive3 {
    max-width: 70%;
    height: auto;
}

.responsive4 {
    max-width: 30%;
    height: auto;
}

.responsive5 {
  max-width: 200px
}

.responsive6 {
  max-width: 85%
}

.responsive7 {
  max-width: 95%
}

/*
 * Profiilikortit
 */

h4 {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.2;
  margin: 4.5% 0 0 4.5%;
}

h5 {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  margin: 0 0 4% 4.5%;
  color: #627b2f;
}

.profile-card {
  z-index: 100;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-width: 290px;
  max-width: 450px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(0%, 0%);
  -webkit-animation: bouncei 1s;
  animation: bouncein 1s;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.profile-card > he {
  display: block;
  line-height: 0;
  width: 88%;
  max-width: 88%;
  background: #fff;
}

.profile-card > he > a {
  line-height: 0;
  display: block;
  background-image: url('');
  background-size:
}

.profile-card > he a > img {
  width: 100%;
}

.profile-card:hover > he a > img {
  opacity: 100;
}

.profile-card:hover > he + .profile-bio {
  max-height: 600px;
  -webkit-transition: max-height .5s ease-in;
  transition: max-height .5s ease-in;
}

.profile-card:hover > he + .profile-bio p {
  -webkit-animation: fadein 2s;
  animation: fadein 2s;
}

.profile-bio {
  clear: both;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 88%;
  width: 88%;
  max-height: 0;
  -webkit-transition: max-height .5s ease-out;
  transition: max-height .5s ease-out;
  color: #fff;
  background: #83a43e;
  -webkit-order: 1;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.profile-bio p {
  margin: 4.5%;
  -webkit-animation: fadeout 2s;
  animation: fadeout 2s;
}

.profile-social-links {
  line-height: 0;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  max-width: 12%;
  width: 12%;
  margin: 0;
  padding: 3.5%;
  list-style-type: none;
  text-align: center;
  background: url('aarnenimi.png') #627b2f no-repeat center 7%;
  background-image: url('aarnenimi.png');
  background-size: 40% auto;
  flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -webkit-flex-pack: end;
  -ms-flex-pack: end;
}

.profile-social-links img {
  width: 100%;
  height: auto;
  margin-top: 10px;
  -webkit-filter: saturate(0) brightness(100);
  filter: saturate(0) brightness(100);
}

.profile-social-links li:first-child {
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.profile-social-links li:first-child:hover {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

.profile-social-links li:nth-child(2):hover {
  -webkit-animation: pulse .4s ease-in-out;
  animation: pulse .4s ease-in-out;
}

.profile-social-links li:last-child:hover {
  -webkit-animation: shake .7s ease-in-out;
  animation: shake .7s ease-in-out;
}

.profile-social-links li:last-child {
  -webkit-order: -1;  
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.profile-social-links li:last-child img {
  width: 90%;
  -webkit-filter: saturate(0) invert(100%);
  filter: saturate(0) invert(100%);
}

@media (max-width: 480px) {
  .profile-card {
    flex-direction: column;
    -webkit-flerowx-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
  }
  .profile-card > he,
  .profile-bio {
    max-width: 100%;
    width: 100%;
  }
  .profile-bio {
    max-height: 100%;
  }
  .profile-card:hover > he + .profile-bio p,
  .profile-bio p {
    -webkit-animation: none;
    animation: none;
  }
  h1 {
    font-size: 16px;
  }
  h2 {
    line-height: 1.2;
    margin-top: 0.5%;
  }
  .profile-social-links {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    max-width: 100%;
    width: 100%;
    max-height: 70px;
    background: url('aarnenimi2.png') #627b2f no-repeat 4.5% center;
    background-image: url('aarnenimi2.png');
    background-size: auto 15px;
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-order: -1;
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .profile-social-links img {
    width: auto;
    height: 18px;
    margin-top: 0;
    margin-left: 8px;
    -webkit-filter: saturate(0) brightness(100);
    filter: saturate(0) brightness(100);
  }
  .profile-social-links li:last-child img {
    width: auto;
  }
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-1px);
    transform: translateX(-1px);
  }
  40% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  60% {
    -webkit-transform: translateX(-1px);
    transform: translateX(-1px);
  }
}

@keyframes shake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-1px);
    transform: translateX(-1px);
  }
  40% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  60% {
    -webkit-transform: translateX(-1px);
    transform: translateX(-1px);
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-webkit-keyframes bouncein {
  0% {
    -webkit-transform: translate(-50%, -200%);
    transform: translate(-50%, -200%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translate(-50%, -30%);
    transform: translate(-50%, -30%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-50%, -50%);
    transform: translateY(-50%, -50%);
  }
}

@keyframes bouncein {
  0% {
    -webkit-transform: translate(-50%, -200%);
    transform: translate(-50%, -200%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translate(-50%, -30%);
    transform: translate(-50%, -30%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-50%, -50%);
    transform: translateY(-50%, -50%);
  }
}

.profile-card2 {
  z-index: 100;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-width: 290px;
  max-width: 450px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(0%, 0%);
  -webkit-animation: bouncei 1s;
  animation: bouncein 1s;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.profile-card2 > he {
  display: block;
  line-height: 0;
  width: 88%;
  max-width: 88%;
  background: #fff;
}

.profile-card2 > he > a {
  line-height: 0;
  display: block;
  background-image: url('');
  background-size:
}

.profile-card2 > he a > img {
  width: 100%;
}

.profile-card2:hover > he a > img {
  opacity: 100;
}

.profile-card2:hover > he + .profile-bio2 {
  max-height: 600px;
  -webkit-transition: max-height .5s ease-in;
  transition: max-height .5s ease-in;
}

.profile-card2:hover > he + .profile-bio2 p {
  -webkit-animation: fadein 2s;
  animation: fadein 2s;
}

.profile-bio2 {
  clear: both;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 88%;
  width: 88%;
  max-height: 0;
  -webkit-transition: max-height .5s ease-out;
  transition: max-height .5s ease-out;
  color: #fff;
  background: #83a43e;
  -webkit-order: 1;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.profile-bio2 p {
  margin: 4.5%;
  -webkit-animation: fadeout 2s;
  animation: fadeout 2s;
}

.profile2-social-links {
  line-height: 0;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  max-width: 12%;
  width: 12%;
  margin: 0;
  padding: 3.5%;
  list-style-type: none;
  text-align: center;
  background: url('anttinimi.png') #627b2f no-repeat center 7%;
  background-image: url('anttinimi.png');
  background-size: 40% auto;
  flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -webkit-flex-pack: end;
  -ms-flex-pack: end;
}

.profile2-social-links img {
  width: 100%;
  height: auto;
  margin-top: 10px;
  -webkit-filter: saturate(0) brightness(100);
  filter: saturate(0) brightness(100);
}

.profile2-social-links li:first-child {
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.profile2-social-links li:first-child:hover {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

.profile2-social-links li:nth-child(2):hover {
  -webkit-animation: pulse .4s ease-in-out;
  animation: pulse .4s ease-in-out;
}

.profile2-social-links li:last-child:hover {
  -webkit-animation: shake .7s ease-in-out;
  animation: shake .7s ease-in-out;
}

.profile2-social-links li:last-child {
  -webkit-order: -1;  
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.profile2-social-links li:last-child img {
  width: 90%;
  -webkit-filter: saturate(0) invert(100%);
  filter: saturate(0) invert(100%);
}

@media (max-width: 480px) {
  .profile-card2 {
    flex-direction: column;
    -webkit-flerowx-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
  }
  .profile-card2 > he,
  .profile-bio2 {
    max-width: 100%;
    width: 100%;
  }
  .profile-bio2 {
    max-height: 100%;
  }
  .profile-card2:hover > he + .profile-bio2 p,
  .profile-bio2 p {
    -webkit-animation: none;
    animation: none;
  }
  
  .profile2-social-links {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    max-width: 100%;
    width: 100%;
    max-height: 70px;
    background: url('anttinimi2.png') #627b2f no-repeat 4.5% center;
    background-image: url('anttinimi2.png');
    background-size: auto 15px;
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-order: -1;
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .profile2-social-links img {
    width: auto;
    height: 18px;
    margin-top: 0;
    margin-left: 8px;
    -webkit-filter: saturate(0) brightness(100);
    filter: saturate(0) brightness(100);
  }
  .profile2-social-links li:last-child img {
    width: auto;
  }
}

.profile-card3 {
  z-index: 100;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-width: 290px;
  max-width: 450px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(0%, 0%);
  -webkit-animation: bouncei 1s;
  animation: bouncein 1s;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.profile-card3 > he {
  display: block;
  line-height: 0;
  width: 88%;
  max-width: 88%;
  background: #fff;
}

.profile-card3 > he > a {
  line-height: 0;
  display: block;
  background-image: url('');
  background-size:
}

.profile-card3 > he a > img {
  width: 100%;
}

.profile-card3:hover > he a > img {
  opacity: 100;
}

.profile-card3:hover > he + .profile-bio3 {
  max-height: 600px;
  -webkit-transition: max-height .5s ease-in;
  transition: max-height .5s ease-in;
}

.profile-card3:hover > he + .profile-bio3 p {
  -webkit-animation: fadein 2s;
  animation: fadein 2s;
}

.profile-bio3 {
  clear: both;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 88%;
  width: 88%;
  max-height: 0;
  -webkit-transition: max-height .5s ease-out;
  transition: max-height .5s ease-out;
  color: #fff;
  background: #83a43e;
  -webkit-order: 1;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.profile-bio3 p {
  margin: 4.5%;
  -webkit-animation: fadeout 2s;
  animation: fadeout 2s;
}

.profile3-social-links {
  line-height: 0;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  max-width: 12%;
  width: 12%;
  margin: 0;
  padding: 3.5%;
  list-style-type: none;
  text-align: center;
  background: url('elmonimi.png') #627b2f no-repeat center 7%;
  background-image: url('elmonimi.png');
  background-size: 40% auto;
  flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -webkit-flex-pack: end;
  -ms-flex-pack: end;
}

.profile3-social-links img {
  width: 100%;
  height: auto;
  margin-top: 10px;
  -webkit-filter: saturate(0) brightness(100);
  filter: saturate(0) brightness(100);
}

.profile3-social-links li:first-child {
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.profile3-social-links li:first-child:hover {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

.profile3-social-links li:nth-child(2):hover {
  -webkit-animation: pulse .4s ease-in-out;
  animation: pulse .4s ease-in-out;
}

.profile3-social-links li:last-child:hover {
  -webkit-animation: shake .7s ease-in-out;
  animation: shake .7s ease-in-out;
}

.profile3-social-links li:last-child {
  -webkit-order: -1;  
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.profile3-social-links li:last-child img {
  width: 90%;
  -webkit-filter: saturate(0) invert(100%);
  filter: saturate(0) invert(100%);
}

@media (max-width: 480px) {
  .profile-card3 {
    flex-direction: column;
    -webkit-flerowx-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
  }
  .profile-card3 > he,
  .profile-bio3 {
    max-width: 100%;
    width: 100%;
  }
  .profile-bio3 {
    max-height: 100%;
  }
  .profile-card3:hover > he + .profile-bio3 p,
  .profile-bio3 p {
    -webkit-animation: none;
    animation: none;
  }
  
  .profile3-social-links {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    max-width: 100%;
    width: 100%;
    max-height: 70px;
    background: url('elmonimi2.png') #627b2f no-repeat 4.5% center;
    background-image: url('elmonimi2.png');
    background-size: auto 15px;
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-order: -1;
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .profile3-social-links img {
    width: auto;
    height: 18px;
    margin-top: 0;
    margin-left: 8px;
    -webkit-filter: saturate(0) brightness(100);
    filter: saturate(0) brightness(100);
  }
  .profile3-social-links li:last-child img {
    width: auto;
  }
}