/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

body {
  background-color: #c1f0f0;
  font-family: 'Nunito', sans-serif;
}

a {
  color: black;
}

p {
  line-height: 2rem;
}

.contact {
  padding-left: 32px;
}

.countries 
{
  height: 20px;
  vertical-align: middle;
  padding-right: 10px;
}

.waves-effect.waves-amber .waves-ripple {
 /* The alpha value allows the text and background color
 of the button to still show through. */
  background-color: rgba(255, 171, 0, 0.65);
}

.waves-effect.waves-pink .waves-ripple {
 /* The alpha value allows the text and background color
 of the button to still show through. */
  background-color: rgba(255, 138, 128, 0.65);
}

.waves-effect.waves-blue .waves-ripple {
 /* The alpha value allows the text and background color
 of the button to still show through. */
  background-color: rgba(1, 87, 155, 0.65);
}

mark-g {
  padding: 0 .1em 0 .1em;
  background-color: rgba(111, 220, 220, 0.4);
  color: #000;
}

.menu-fixed {
  position: fixed;
  top: 100px;
  right: 150px;
  z-index: 2;
}

.header-section {
  height: 50vh;
}

h4.quote {
  font-style: italic;
}

.height-abtme {
  height: 8vh;
}

.item1 {
  background: -moz-linear-gradient(80deg, rgba(255, 255, 255, 0), rgba(1, 87, 155, 0.6) 100%), url('/img/galet.jpg') no-repeat;
  background: -webkit-linear-gradient(80deg, rgba(255, 255, 255, 0), rgba(1, 87, 155, 0.6) 100%), url('/img/galet.jpg') no-repeat;
  background: -webkit-gradient(linear, 80deg, from(rgba(255, 255, 255, 0)), to(rgba(1, 87, 155, 0.6))), url('/img/galet.jpg') no-repeat;
  background: -o-linear-gradient(80deg, rgba(255, 255, 255, 0), rgba(1, 87, 155, 0.6) 100%), url('/img/galet.jpg') no-repeat;
  background: linear-gradient(to 80deg, rgba(255, 255, 255, 0), rgba(1, 87, 155, 0.6) 100%), url('/img/galet.jpg') no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 0 30px 0 0;
}

.me {
  background-image: url('/img/camel-me.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 30px;
  background-color: #29a3a3;
}

.me-bg {
  background-color: red;
}

.rgba-gradient {
  background: -moz-linear-gradient(70deg, rgba(255, 255, 255, 0), rgba(255, 138, 128, 0.8) 100%), url('/img/clap.jpg') no-repeat;
  background: -webkit-linear-gradient(70deg, rgba(255, 255, 255, 0), rgba(255, 138, 128, 0.8) 100%), url('/img/clap.jpg') no-repeat;
  background: -webkit-gradient(linear, 70deg, from(rgba(255, 255, 255, 0)), to(rgba(255, 138, 128, 0.8))), url('/img/clap.jpg') no-repeat;
  background: -o-linear-gradient(70deg, rgba(255, 255, 255, 0), rgba(255, 138, 128, 0.8) 100%), url('/img/clap.jpg') no-repeat;
  background: linear-gradient(to 70deg, rgba(255, 255, 255, 0), rgba(255, 138, 128, 0.8) 100%), url('/img/clap.jpg') no-repeat;
  background-size: cover;
  border-radius: 30px 0 0 0;
}

.x-large {
  font-size: 12rem;
}

.rotate-180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

footer.page-footer {
  margin: 0;
}

.css-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 50vh  50vh;
  grid-template-areas:
  "item1 item2 item3"
  "item4 item5 item6";
}

.css-grid-item1 {
  grid-column: 1;
  grid-row: 1;
  grid-area: item1;
}

.css-grid-item2 {
  grid-column: 2;
  grid-row: 1;
  grid-area: item2;
  align-self: center;
  justify-self: center;
  width: 90%;
}

.css-grid-item3 {
  grid-column: 3;
  grid-row: 1;
  grid-area: item3;
}

.css-grid-item4 {
  grid-column: 1;
  grid-row: 2;
  grid-area: item4;
  align-self: center;
  justify-self: center;
  width: 90%;
}

.css-grid-item5 {
  grid-column: 2;
  grid-row: 2;
  grid-area: item5;
  border-radius: 0 0 0 30px;
}

.css-grid-item6 {
  grid-column: 3;
  grid-row: 2;
  grid-area: item6;
  align-self: center;
  justify-self: center;
  width: 90%;
}

.css-grid-container2 {
  display: grid;
  grid-template-columns: 100px auto 100px calc(33.33% - 100px) 100px;
  grid-template-rows: 100px calc(40vh - 100px) auto 100px;
  grid-template-areas:
  ". . . item-bg1 item-bg1"
  ". abt-me item-me item-me item-bg2"
  ". abt-me item-me item-me ."
  "item-bg3 item-bg3 item-me item-me item-bg4";
}


.css-grid-item-abt-me {
  grid-column: 2;
  grid-row: 2 / span 2;
  grid-area: abt-me;
}

.flow-text {
  padding-right: 20px;
  font-size: 1rem;
}

.educ-container {
  position: relative;
  margin-top: -50px;
}

blockquote {
  font-size: 1.2rem;
}

.css-grid-item-me {
  position: relative;
  grid-column: 3 /span 2;
  grid-row: 2 / span 3;
  grid-area: item-me;
}

.css-grid-item-bg1 {
  grid-column: 4 / span 2;
  grid-row: 1;
  grid-area: item-bg1;
}

.css-grid-item-bg2 {
  grid-column: 5;
  grid-row: 2;
  grid-area: item-bg2;
}

.css-grid-item-bg3 {
  grid-column: 1 /span 2;
  grid-row: 4;
  grid-area: item-bg3;
}

.css-grid-item-bg4 {
  grid-column: 5;
  grid-row: 4;
  grid-area: item-bg4;
}

.img-frog1, .img-frog2, .img-frog3{
  width: 150px;
  height: 150px;
}

.img-certif {
  width: 284px;
  height: 150px;
}

.card-image-size {
  height: 120px;
}

.end-picture {
  height: 90vh;
  background-image: url('/img/family.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
}

.courtesy {
  position: absolute;
  bottom: 0;
  right: 5px;
}

.pr {
  margin-right: 20px;
  margin-bottom: 0;
  margin-top: 0;
}

.row-footer h5 {
  margin-bottom: 5px;
  margin-top: 0;
  padding-left: 64px;
}
.prs {
  margin-right: 10px;
}

.row-end-picture {
  height:20px;
}

.card-height {
  height: 300px;
}

@media only screen and (max-width : 1281px) {
  .css-grid-container2 {
    display: grid;
    grid-template-columns: 50px auto 120px calc(33.33% - 50px) 50px;
    grid-template-rows: 50px 40vh auto 50px;
    grid-template-areas:
    ". . . item-bg1 item-bg1"
    ". abt-me item-me item-me item-bg2"
    ". abt-me item-me item-me ."
    "item-bg3 item-bg3 item-bg3 item-bg3 item-bg4";
  }

  .flow-text {
    padding-right: 10px;
  }


  .height-abtme {
    height: 8px;
  }

  h2.header {
    font-size: 2.5rem;
  }
}

@media only screen and (max-width : 992px) {
  .menu-fixed {
    top: 50px;
    right: 100px;
  }
}

@media only screen and (max-width : 600px) {
  .menu-fixed {
    top: 20px;
    right: 40px;
  }

  .header-section {
    height: 70vh;
  }

  h4.quote {
    font-size: 1.2rem;
  }

  h2.header {
    font-size: 2rem;
  }

  h3.header {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 0;

  }

  h6.header {
    font-size: 0.8rem;
  }

  .height-abtme {
    height: 20px;
  }

  .pt {
    padding-top: 40px;
  }

  h1.white-text {
    font-size: 1.8rem;
  }

  .me {
    background-image: url('/img/camel-me_min.jpg');
  }

  .item1 {
    background: -moz-linear-gradient(80deg, rgba(255, 255, 255, 0), rgba(1, 87, 155, 0.6) 100%), url('/img/cailloux.jpg') no-repeat;
    background: -webkit-linear-gradient(80deg, rgba(255, 255, 255, 0), rgba(1, 87, 155, 0.6) 100%), url('/img/cailloux.jpg') no-repeat;
    background: -webkit-gradient(linear, 80deg, from(rgba(255, 255, 255, 0)), to(rgba(1, 87, 155, 0.6))), url('/img/cailloux.jpg') no-repeat;
    background: -o-linear-gradient(80deg, rgba(255, 255, 255, 0), rgba(1, 87, 155, 0.6) 100%), url('/img/cailloux.jpg') no-repeat;
    background: linear-gradient(to 80deg, rgba(255, 255, 255, 0), rgba(1, 87, 155, 0.6) 100%), url('/img/cailloux.jpg') no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 0 30px 0 0;
  }

  .flow-text {
    padding-right: 0px;
    font-size: 1.2rem;
  }

  .css-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 30vh 30vh 30vh;
    grid-template-areas:
    "item1 item4"
    "item2 item5"
    "item3 item6";
  }

  .css-grid-item5 {
    border-radius: 0;
  }


  .css-grid-container2 {
    display: grid;
    grid-template-columns: 25px auto calc(50% - 25px) 25px;
    grid-template-rows: 25px calc(30vh - 25px) 30vh auto;
    grid-template-areas:
    ". . item-bg1 item-bg1"
    "item-me item-me item-me item-bg2"
    "item-me item-me item-me ."
    ". abt-me abt-me .";
  }

  .img-certif {
    width: 300px;
    height: 158px;
  }

  .card .card-title {
    font-size: 16px;
  }

  .row-end-picture {
    height:0px;
  }

  .end-picture {
    height: 40vh;
  }
}

@media only screen and (max-width : 1024px) and (max-height : 600px){
  .menu-fixed {
    top: 50px;
    right: 60px;
  }

  h4.quote {
    font-size: 1.6rem;
  }

  h3.header {
    font-size: 2rem;
  }
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .css-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 250px  250px;
    grid-template-areas:
    "item1 item2 item3"
    "item4 item5 item6";
  }

  .css-grid-container2 {
    display: grid;
    grid-template-columns: 50px auto calc(33.33% - 150px) 100px 50px;
    grid-template-rows: 100px calc(250px - 100px) 55vh auto;
    grid-template-areas:
    ". . item-bg1 item-bg1 item-bg1"
    "item-me item-me item-me item-bg2 item-bg2"
    "item-me item-me item-me . ."
    ". abt-me abt-me abt-me .";
  }

  .height-abtme {
    height: 6vh;
  }

  .pt {
    padding-top: 40px;
  }

  .end-picture {
    height: 40vh;
  }

  .card-height {
    height: 300px;
  }
}

@media all and (device-width: 1024px) and (device-height: 1366px) and (orientation:portrait) {
  .css-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 340px  340px;
    grid-template-areas:
    "item1 item2 item3"
    "item4 item5 item6";
  }

  .css-grid-container2 {
    display: grid;
    grid-template-columns: 50px auto 120px calc(33.33% - 50px) 50px;
    grid-template-rows: 50px 290px auto 50px;
    grid-template-areas:
    ". . . item-bg1 item-bg1"
    ". abt-me item-me item-me item-bg2"
    ". abt-me item-me item-me ."
    "item-bg3 item-bg3 item-bg3 item-bg3 item-bg4";
  }

  .end-picture {
    height: 40vh;
  }

  .card-height {
    height: 350px;
  }
}