.nopadding {

   padding: 0 !important;

   margin: 0 !important;

}



.blue-text {color: #01508c}

.white-text {color: white}

.blue-background {background: #01508c}

.top-buffer { margin-top:20px; }

.top-buffer-big { margin-top:50px; }



body {font-size: 17px}



html {

  height: 100%;

}



body {

  overflow: hidden;

  background: white url("../img/bg.jpg") no-repeat center center fixed;

  background-size: cover;

  position: fixed;

  padding: 0px;

  margin: 0px;

  width: 100%;

  height: 100%;

  font: normal 14px/1.618em "Roboto", sans-serif;

  -webkit-font-smoothing: antialiased;

}



/* 



  body:before {

  content: "";

  height: 0px;

  padding: 0px;

  border: 130em solid #313440;

  position: absolute;

  left: 50%;

  top: 100%;

  z-index: 2;

  display: block;

  -webkit-border-radius: 50%;

  border-radius: 50%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  -webkit-animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;

  animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;

}



*/



h1,

h2 {

  font-weight: 500;

  margin: 0px 0px 5px 0px;

}



h1 {

  font-size: 24px;

}



h2 {

  font-size: 16px;

}



p {

  margin: 0px;

}



.profile-card {

  background: #FFB300;

  width: 56px;

  height: 56px;

  position: absolute;

  left: 50%;

  top: 50%;

  z-index: 2;

  overflow: hidden;

  opacity: 0;

  margin-top: 70px;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  -webkit-border-radius: 50%;

  border-radius: 50%;

  -webkit-box-shadow: 0px 3px 166px rgba(0, 0, 0, 0.16), 0px 3px 166px rgba(0, 0, 0, 0.23);

  box-shadow: 0px 3px 166px rgba(0, 0, 0, 0.16), 0px 3px 166px rgba(0, 0, 0, 0.23);

  -webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;

  animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;

}



.profile-card header {

  width: 179px;

  height: 280px;

  padding: 40px 20px 30px 20px;

  display: inline-block;

  float: left;

  border-right: 2px dashed #EEEEEE;

  background: #FFFFFF;

  color: #000000;

  margin-top: 50px;

  opacity: 0;

  text-align: center;

  -webkit-animation: moveIn 1s 3.1s ease forwards;

  animation: moveIn 1s 3.1s ease forwards;

}



.profile-card header h1 {

  color: #004bab;

}



.profile-card header a {

  display: inline-block;

  text-align: center;

  position: relative;

  margin: 25px 30px;

}



/*.profile-card header a:after {

  position: absolute;

  content: "";

  bottom: 3px;

  right: 3px;

  width: 20px;

  height: 20px;

  border: 4px solid #FFFFFF;

  -webkit-transform: scale(0);

  transform: scale(0);

  background: -webkit-linear-gradient(top, #2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%);

  background: linear-gradient(#2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%);

  -webkit-border-radius: 50%;

  border-radius: 50%;

  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);

  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);

  -webkit-animation: scaleIn 0.3s 3.5s ease forwards;

  animation: scaleIn 0.3s 3.5s ease forwards;

}*/



.profile-card header a > img {

  width: 120px;

  max-width: 100%;

  -webkit-border-radius: 50%;

  border-radius: 50%;

  -webkit-transition: -webkit-box-shadow 0.3s ease;

  transition: box-shadow 0.3s ease;

  -webkit-box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);

  box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);

}



.profile-card header a:hover > img {

  -webkit-box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);

  box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);

}



.profile-card .profile-bio {

  width: 175px;

  height: 180px;

  display: inline-block;

  float: right;

  padding: 50px 20px 30px 20px;

  background: #FFFFFF;

  color: #333333;

  margin-top: 50px;

  text-align: center;

  opacity: 0;

  -webkit-animation: moveIn 1s 3.1s ease forwards;

  animation: moveIn 1s 3.1s ease forwards;

}



.profile-social-links {

  width: 218px;

  display: inline-block;

  float: right;

  margin: 0px;

  padding: 15px 20px;

  background: #FFFFFF;

  margin-top: 50px;

  text-align: center;

  opacity: 0;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  -webkit-animation: moveIn 1s 3.1s ease forwards;

  animation: moveIn 1s 3.1s ease forwards;

}



.profile-social-links li {

  list-style: none;

  margin: -5px 0px 0px 0px;

  padding: 0px;

  float: left;

  width: 25%;

  text-align: center;

}



.profile-social-links li a {

  display: inline-block;

  color: red;

  width: 24px;

  height: 24px;

  padding: 6px;

  position: relative;

  overflow: hidden!important;

  -webkit-border-radius: 50%;

  border-radius: 50%;

}



.profile-social-links li a i {

  position: relative;

  z-index: 1;

}



.profile-social-links li a img,

.profile-social-links li a svg {

  width: 24px;

}



@-webkit-keyframes init {

  0% {

    width: 0px;

    height: 0px;

  }

  100% {

    width: 56px;

    height: 56px;

    margin-top: 0px;

    opacity: 1;

  }

}



@keyframes init {

  0% {

    width: 0px;

    height: 0px;

  }

  100% {

    width: 56px;

    height: 56px;

    margin-top: 0px;

    opacity: 1;

  }

}



@-webkit-keyframes puff {

  0% {

    top: 100%;

    height: 0px;

    padding: 0px;

  }

  100% {

    top: 50%;

    height: 100%;

    padding: 0px 100%;

  }

}



@keyframes puff {

  0% {

    top: 100%;

    height: 0px;

    padding: 0px;

  }

  100% {

    top: 50%;

    height: 100%;

    padding: 0px 100%;

  }

}



@-webkit-keyframes borderRadius {

  0% {

    -webkit-border-radius: 50%;

  }

  100% {

    -webkit-border-radius: 0px;

  }

}



@keyframes borderRadius {

  0% {

    -webkit-border-radius: 50%;

  }

  100% {

    border-radius: 0px;

  }

}



@-webkit-keyframes moveDown {

  0% {

    top: 50%;

  }

  50% {

    top: 40%;

  }

  100% {

    top: 100%;

  }

}



@keyframes moveDown {

  0% {

    top: 50%;

  }

  50% {

    top: 40%;

  }

  100% {

    top: 100%;

  }

}



@-webkit-keyframes moveUp {

  0% {

    background: #FFB300;

    top: 100%;

  }

  50% {

    top: 40%;

  }

  100% {

    top: 50%;

    background: #E0E0E0;

  }

}



@keyframes moveUp {

  0% {

    background: #FFB300;

    top: 100%;

  }

  50% {

    top: 40%;

  }

  100% {

    top: 50%;

    background: #E0E0E0;

  }

}



@-webkit-keyframes materia {

  0% {

    background: #E0E0E0;

  }

  50% {

    -webkit-border-radius: 4px;

  }

  100% {

    width: 440px;

    height: 280px;

    background: #FFFFFF;

    -webkit-border-radius: 4px;

  }

}



@keyframes materia {

  0% {

    background: #E0E0E0;

  }

  50% {

    border-radius: 4px;

  }

  100% {

    width: 440px;

    height: 280px;

    background: #FFFFFF;

    border-radius: 4px;

  }

}



@-webkit-keyframes moveIn {

  0% {

    margin-top: 50px;

    opacity: 0;

  }

  100% {

    opacity: 1;

    margin-top: -20px;

  }

}



@keyframes moveIn {

  0% {

    margin-top: 50px;

    opacity: 0;

  }

  100% {

    opacity: 1;

    margin-top: -20px;

  }

}



@-webkit-keyframes scaleIn {

  0% {

    -webkit-transform: scale(0);

  }

  100% {

    -webkit-transform: scale(1);

  }

}



@keyframes scaleIn {

  0% {

    transform: scale(0);

  }

  100% {

    transform: scale(1);

  }

}



@-webkit-keyframes ripple {

  0% {

    transform: scale3d(0, 0, 0);

  }

  50%,

  100% {

    -webkit-transform: scale3d(1, 1, 1);

  }

  100% {

    opacity: 0;

  }

}



@keyframes ripple {

  0% {

    transform: scale3d(0, 0, 0);

  }

  50%,

  100% {

    transform: scale3d(1, 1, 1);

  }

  100% {

    opacity: 0;

  }

}



@media screen and (min-aspect-ratio: 4/3) {

  body {

    background-size: cover;

  }

  body:before {

    width: 0px;

  }

  @ -webkit-keyframes puff {

    0% {

      top: 100%;

      width: 0px;

      padding-bottom: 0px;

    }

    100% {

      top: 50%;

      width: 100%;

      padding-bottom: 100%;

    }

  }

  @keyframes puff {

    0% {

      top: 100%;

      width: 0px;

      padding-bottom: 0px;

    }

    100% {

      top: 50%;

      width: 100%;

      padding-bottom: 100%;

    }

  }

}



@media screen and (min-height: 480px) {

  .profile-card header {

    width: auto;

    height: auto;

    padding: 30px 20px;

    display: block;

    float: none;

    border-right: none;

  }

  .profile-card .profile-bio {

    width: auto;

    height: auto;

    padding: 15px 20px 30px 20px;

    display: block;

    float: none;

  }

  .profile-social-links {

    width: 100%;

    display: block;

    float: none;

  }

  @ -webkit-keyframes materia {

    0% {

      background: #E0E0E0;

    }

    50% {

      -webkit-border-radius: 4px;

    }

    100% {

      width: 350px;

      height: 350px;

      background: #FFFFFF;

      -webkit-border-radius: 4px;

    }

  }

  @keyframes materia {

    0% {

      background: #E0E0E0;

    }

    50% {

      border-radius: 4px;

    }

    100% { 

      width: 350px;

      height: 350px;

      background: #FFFFFF;

      border-radius: 4px;

    }

  }

}





/* shop */



* {

  font-family: "Roboto";

  list-style: none;

  margin: 0;

  padding: 0;

  text-decoration: none;

  letter-spacing: 1px;

  box-sizing: border-box;

}

body {

  background: #f9fafa;

  padding: 20px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -ms-flex-wrap: wrap;

      flex-wrap: wrap;

}

.block {

  margin: 20px;

  border-radius: 4px;

  width: 280px;

  min-height: 430px;

  background: #fff;

  padding: 23px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  box-shadow: 0 2px 55px rgba(0,0,0,0.1);

}

.top {

  border-bottom: 1px solid #e5e5e5;

  padding-bottom: 10px;

}

.top ul {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

}

.top a {

  color: #9e9e9e;

}

.top a:hover {

  color: #c7ccdb;

}

.converse {

  padding: 2px 10px;

  border-radius: 20px;

  text-transform: uppercase;

  font-size: 14px;

}

.middle {

  margin-bottom: 40px;

}

.middle img {

  width: 100%;

}

.bottom {

  text-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

  -webkit-box-flex: 1;

      -ms-flex-positive: 1;

          flex-grow: 1;

}

.heading {

  font-size: 17px;

  text-transform: uppercase;

  margin-bottom: 5px;

  letter-spacing: 0;

}

.info {

  font-size: 14px;

  color: #969696;

  margin-bottom: 10px;

}

.style {

  font-size: 16px;

  margin-bottom: 20px;

}

.old-price {

  color: #f00;

  text-decoration: line-through;

}









.icon-circle .fa{

    font-size           : 12px;

    color               : #e84700;

    margin              : 0 auto;

    height              : 60px;

    width               : 60px;

    border-radius       : 50%;

    border              :2px solid #e84700;

    line-height         : 60px;

    cursor              : pointer;

    -webkit-transition  : all  ease-in-out 0.35s;

    -moz-transition     : all  ease-in-out 0.35s;

    -o-transition       : all  ease-in-out 0.35s;

    -ms-transition      : all  ease-in-out 0.35s;

    transition          : all  ease-in-out 0.20s,background-color ease-in-out 0.05s;

}



.icon-circle  .fa:hover{

    

    background-color        : #e84700;    

    color                   : #fff;

    border                  : 1px solid #e84711;

    -moz-box-shadow         : inset 0px 0px 0px 5px #ffffff;

    -o-box-shadow           : inset 0px 0px 0px 5px #ffffff;

    -ms-box-shadow          : inset 0px 0px 0px 5px #ffffff;

    -webkit-box-shadow      : inset 0px 0px 0px 5px #ffffff;

    box-shadow              : inset 0px 0px 0px 5px #ffffff;

    -ms-transform           : scale(1.2,1.2); 

    -webkit-transform       : scale(1.2,1.2);

    -moz-transform          : scale(1.2,1.2); 

    -o-transform            : scale(1.2,1.2); 

    transform               : scale(1.2,1.2);  

}



.icon-circle  i:before{

    margin-left         : 0px;

    font-size           : 40px;

}



@media (min-width:320px) and (max-width:768px) {





 .icon-circle .fa{

    font-size           : 15px;

    color               : #e84700;

    margin              : 0 auto;

    height              : 40px;

    width               : 40px;

    border-radius       : 50%;

    border              :2px solid #e84700;

    line-height         : 40px;

    cursor              : pointer;

    -webkit-transition  : all  ease-in-out 0.35s;

    -moz-transition     : all  ease-in-out 0.35s;

    -o-transition       : all  ease-in-out 0.35s;

    -ms-transition      : all  ease-in-out 0.35s;

    transition          : all  ease-in-out 0.20s,background-color ease-in-out 0.05s;

}



.icon-circle  .fa:hover{

    

    background-color        : #e84700;    

    color                   : #fff;

    border                  : 1px solid #e84711;

    -moz-box-shadow         : inset 0px 0px 0px 5px #ffffff;

    -o-box-shadow           : inset 0px 0px 0px 5px #ffffff;

    -ms-box-shadow          : inset 0px 0px 0px 5px #ffffff;

    -webkit-box-shadow      : inset 0px 0px 0px 5px #ffffff;

    box-shadow              : inset 0px 0px 0px 5px #ffffff;

    -ms-transform           : scale(1.2,1.2); 

    -webkit-transform       : scale(1.2,1.2);

    -moz-transform          : scale(1.2,1.2); 

    -o-transform            : scale(1.2,1.2); 

    transform               : scale(1.2,1.2);  

}



.icon-circle  i:before{

    margin-left         : 0px;

    font-size           : 20px;

}   

}



.ifacebook .fa{

    color               :#3B5998;

    border              :2px solid #3B5998;

}



.ifacebook .fa:hover{

    

    background-color        : #3B5998;    

    color                   : #fff;

    border                  : 1px solid #3B5998;



}



.itwittter .fa{

    color               : #33ccff;

    border              :2px solid #33ccff;

}



.itwittter .fa:hover{

    

    background-color        : #33ccff;    

    color                   : #fff;

    border                  : 1px solid #33ccff;



}



.igoogle .fa{

    color               : #BD3518;

    border              :2px solid #BD3518;

}



.igoogle .fa:hover{

    

    background-color        : #BD3518;    

    color                   : #fff;

    border                  : 1px solid #BD3518;



}



.iLinkedin .fa{

    color               : #007bb7;

    border              :2px solid #007bb7;

}



.iLinkedin .fa:hover{

    

    background-color        :#007bb7;    

    color                   : #fff;

    border                  : 1px solid #007bb7;



}