/*************************************/
/************** GENERAL **************/
/*************************************/

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap');


body {
    margin: 0px;
    font-family: 'Raleway', sans-serif;
    background: grey;
     background: linear-gradient(white, grey);
  }
  
  img{
    max-width: 100%;
  }
  
  img#headmule{
	height: 500px; object-fit: cover; object-position: 100% 50%;
  }
  
  img.img100{
	width: 100%;
  }
  
   img.img65{
	width: 65%;
  }
  
  
   img.img80{
	width: 80%;
  }
  
  
  h1{
    color: #4194d0 ;
    font-size: 4vw;
    text-align: center;
    margin-bottom: 5px;
  }
  
  h2{
    text-align: center;
    font-size: 1vw;
    margin: 5px;
  }
  .h2bis{
    text-align: center;
    font-size: 1vw;

  }
  .h2ter{
    text-align: left;
    font-size: 1.5vw;


  }
  .textCenter{
    text-align: center;
  }
  .imgMiddle{
    vertical-align:middle;
  }

  .marginbottom25px{
    margin-bottom: 25px;
  }

  .bgWhite{
    background-color: #fff;
  }
  .bgColor{
    background-color: #F6F8F9;
  }
  
  .bgBlue{
    background-color: #49AFFD;
  }
  .bgLighterBlue{
    background-color: #b7dbf7;
  }
  .bgDarkerBlue{
    background-color: #4194d0;
    box-shadow: 5px 5px 3px -1px rgba(0,0,0,0.16);
  }
  .txtBlue{
    color: #49AFFD;
  }
  .txtDarkerBlue{
    color: #4194d0;
  }
  .txtBlack{
    color: #000000;
  }
  .txtGrey{
    color: #3a3939;
  }
  
  .txtWhite{
    color: #fff;
  }
  .noDeco{
    text-decoration: none;
  }

  .topnav {
    overflow: hidden;
  }
  
  .topnav .icon {
    display: none;
    color: #49AFFD;
    padding: 20px;
  }
  .div2{
  margin:20px;
  }
  .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

  
  @media screen and (max-width: 880px) {
    .topnav li {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 880px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive li {
      float: none;
      display: block;
      text-align: left;
    }
  }

  @media screen and (min-width: 1500px) {
    .bigContainer{
      display: flex;
      justify-content: center;
    }
    .bigContainer2 {
      display: flex;
      flex-flow: column wrap;
      align-content: center;
    }
    .container{
      width: 70%;
    }
  }
  .bigContainerUsePhone {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
  .containerUsePhone {
    display: flex;
    width: 90%;
    flex-flow: row wrap;
    justify-content: center;
  }

  .padding25{
    padding: 25px;
  }

  .logo{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-weight: bold;
  }

  #page {
    padding: 0 0 0 0;
    color: #444;
    clear: both;
    max-width: 100%;
    margin: auto;
  }
  .rcorners1 {
    border-radius: 25px;
  }


  .outerDiv
  {
    display: table;
    height: 100%;
    width: 100%;
  }
  .leftDiv
  {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    width: 35%;
    padding: 1rem;
  }
  .rightDiv
  {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 65%;
    padding: 1rem;
  }

h1.header {
	margin-top: 0px;
	margin-bottom: 0px;
}

.image-container {
  
}
.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: white;
  font-size: 80px;

}
    

  /*************************************/
/************** NAVBAR ***************/
/*************************************/

nav {
    margin: 0 ;
    padding: 5px ;
    text-align: right ;
    background: #F6F8F9;
    display: flex;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    z-index: 10;
  }
  nav ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  nav li {
    display: flex;
    color: #fff ;
    padding: 10px;
  }
  nav li a {
    padding: 4px;
    color: rgb(116, 99, 99) ;
    font: 1em "Trebuchet MS",Arial,sans-serif ;
    text-decoration: none ;
  }
  nav li a:hover, nav li a:focus, nav li a:active, nav li a#selectedMenu{
    color: #49AFFD;
  }


nav.nav2
{
    margin: 0 ;
    padding: 0px ;
    text-align: right ;
	 background: #fbfbfbff;
    display: flex;
    justify-content: space-between;
	position: sticky;
    width: 100%;
    z-index: 10;
	border-radius: 2px;
    box-shadow: 5px 5px 3px -1px rgba(0,0,0,0.16);
  }
  nav.nav2 ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
	width: 100%;
  }
  nav.nav2 li {
    display: flex;
    color: #000 ;
    padding: 10px;
	float:left
  }
  nav.nav2 li a {
    padding: 4px;
    color: #000 ;
    font: 1em "Trebuchet MS",Arial,sans-serif ;
    text-decoration: none ;
  }
  nav.nav2 li a:hover, nav li a:focus, nav li a:active, nav li a#selectedMenu{
    color: #555;
	cursor : pointer;
  }

  /*************************************/
/************** HOMEEEE **************/
/*************************************/

.getstarted-img{
    text-align: center;
  }
  
  @media screen and (max-width: 800px) {
    .containerHome{
      display: flex;
      flex-flow: column wrap;
      justify-content: space-around;
      padding: 20px;
      width: 90%;
      border-radius: 2px;
	  
	  
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;

    }
  }
  
  @media screen and (min-width: 800px) {
    .containerHome{
      display: flex;
      flex-flow: column wrap;
      justify-content: space-around;
      padding: 20px;
      width: 90%;
      border-radius: 2px;
      box-shadow: 5px 5px 3px -1px rgba(0,0,0,0.16);
    
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;

	}
  }
  
  .contentHome1{
    padding: 20px;
    flex: 1;
    height: 100%;
    justify-content: end;
  }
  
  @media screen and (max-width: 1000px) {
    .containerQualities{
      flex-flow: row wrap;
    }
  }
  
  @media screen and (min-width: 1000px) {
    .containerQualities{
      flex-flow: row nowrap;
    }
  }
  .containerQualities{
    display: flex;
    justify-content: center;
  }
  
  .contentQualities{
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
    align-items: center;
    padding: 10px;
    text-align: center;
 
  }
  .contentQualities2{
    width: 33%;
  }
/*
  .contentQualities3 {

    background: white;
    position: relative;
}

.contentQualities3:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 35px solid #49AFFD;
    border-left: 35px solid white;
    width: 0;
}*/


  .contentQualities3{
    height: 100%;
    width: 80%;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 85% 0);
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 85% 0);
  }
  .contentQualities4{
    width: 15%;
  }
  
  .contentOffer{
    display: flex;
    align-items: center;
    max-width: 500px;
    min-width: 200px;
    width: 20%;
    border-radius: 2px;
    text-align: center;
    box-shadow: 5px 5px 3px -1px rgba(0,0,0,0.16);
    margin: 2px;
  }
  
/****************************************/
/************** FOOTER ******************/
/****************************************/

.containerFooter{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
  }
  .contentFooter{
    display: flex;
    list-style: none;
  }
  .contentFooter a{
    padding: 0 10px 0 0;
  }