/* GENERAL
========================================================================== */
h6 {
  font-weight: bold;
}

body {
  font-family: Montserrat, sans-serif;
}

a {
  color: #d23;
  text-decoration: none;
}

a:hover {
  color: #6200ff;
}

section {
  width: 100%;
  padding: 60px 20px;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1100px;
  }
}

/* STYLES
========================================================================== */
.portrait {
  width: 100%;
  max-width: 360px;
}


.portfolio {
  max-height: 500px;
  width: auto;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.portfolio:hover {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}

.rating {
  float: right;
  font-size: .8em;
  color: #d23;
}

.socials {
  font-size:2em;
  color:#ccc;
  margin-right:8px;
}

.fa-square-behance:hover {
  color:#053eff 
}

.fa-linkedin:hover {
  color:#0e76a8 
}

.fa-square-dribbble:hover {
  color:#ea4c89 
}

/* TYPO
========================================================================== */
.surimi {
  font-family: surimi;
  line-height:1.1em;
}

@font-face {
  font-family: 'surimi';
  src: url("./fonts/Surimi-Thin.woff2") format("woff2"), url("./fonts/Surimi-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'surimi';
  src: url("./fonts/Surimi-Light.woff2") format("woff2"), url("./fonts/Surimi-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'surimi';
  src: url("./fonts/Surimi-Medium.woff2") format("woff2"), url("./fonts/Surimi-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'surimi';
  src: url("./fonts/Surimi-Bold.woff2") format("woff2"), url("./fonts/Surimi-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

/* COULEURS
========================================================================== */
.lightbg {
  background-color: #eee;
}

.lightbggraphic {
  background: top center/contain no-repeat url("fond-01.png") #eee;
}

.darkbg {
  color: #fff;
  background-color: #222;
}

.darkbggraphic {
  color: #fff;
  background: top center/contain no-repeat url("fond-02.png") #222;
}

.light {
  color: #eee;
}

.dark {
  color: #222;
}

.text-grey {
  color: #777;
  line-height: 1.6em;
}

.primary {
  color: #d23;
}

.primarybg {
  background-color: #d23;
  color: #fff;
}

/* BOUTONS
========================================================================== */
.btn {
  border-radius: 12px;
  border: 0;
  display: block;
  margin: 5px auto;
}

.btn-primary {
  font-size: 1.2em;
  font-weight: 500;
  padding: 20px 30px;
  color: #fff;
  background-color: #d23;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.btn-primary:hover {
  background-color: #7810ce;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}