html {
  scroll-behavior: smooth;
}

nav {
    background-color: #ffffff;
}
.section-block {

   font-family: 'Roboto', sans-serif;
   font-size: 16px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizelegibility;
   padding: 50px 0 50px;
   color: #444444;
   position: relative;
   background-size: cover;
   background-position: center;
   overflow: hidden;
   margin: 50px 0 50px;
   
}


.section-block h1, .section-block .text-h1 {
    font-size: 2.75rem;
    margin-bottom: .5em;
    margin-top: .3em;
    font-weight: 400; }
  .section-block h2, .section-block .text-h2 {
    font-size: 2rem;
    margin-bottom: .5em;
    margin-top: .3em;
    font-weight: 300; }
  .section-block h3, .section-block .text-h3 {
    font-size: 1.125rem;
    margin-bottom: .5em;
    margin-top: .3em;
    font-weight: 400; }
  .section-block h4, .section-block .text-h4 {
    font-size: 1rem;
    margin-bottom: .5em;
    margin-top: .3em;
    font-weight: 400; 
}

.navbar {

	margin-top: 15px;
}


.logo {
	width: 100px;
	display: block;
}

.logo img{
	max-width: 100%;
}
.hero-image {
	position: absolute;
    width: 640px;
}
.hero-blob {
    
}

.hero-form button {
    width: 100%;
    margin-top:10px;
    /*width: -webkit-fill-available;*/
    border-radius: 25px;
}

.sign_in_btn,.signup_in_btn {
    width: 118px;
    margin-right: 10px;
    padding: 6px 0px;
    /* padding-left: 5px; */
    /* padding-right: 0px; */
    /* width: -webkit-fill-available; */
    border-radius: 25px;
}

.sign_in_btn {
    border-color: #135283;
    background-color: #fff;
    color: #000;
}
.sign_in_btn::hover,.signup_in_btn::hover {
    border-color: #135283;
    background-color: #528bff;
    color: #FFF;
    display: inline-block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-decoration: none;
    border: solid 2px #528bff;
}

#bg-community {
    background-image: url(../images/header_blob.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: -100px 0px;
}

 #signUpPhone {
        width: 300px;
    }

/* Larger than mobile */
@media (min-width: 320px) and (max-width: 550px)  {
    section {
         overflow: hidden;
    }
    .section-block {
        padding-bottom: 0px;
    }
    .section-block h2, .section-block .text-h2 {
    font-size: 1.57rem; 
    }

    .hero-text {
        color: #313131 !important;
    }   
    .hero-image {
        
    position: absolute;
    left: auto;
    width: 100%;
    top: 30%;
    }
    .hero-form {
    position: relative;
    top: 80px;
    }
    .hero-app-wrap {
    position: relative;
    top: 101px;
    padding-bottom: 60px;
    margin-bottom: 35px;
    width: 240px;
    }

     .card {
        flex-direction: column !important;
        align-items: center;
        width: 275px !important;
        /*margin:15px;*/
    }

    .card span {
        left: 0px;
        position: relative;
    }

    .badges-wrap img {
        /*width: 120px !important;*/
    }

    .shop-images-wrap img:nth-child(2) {
        display: none;
    }

    .no-network-block {
    color: black !important;
    background-position: center 290px !important;


    /*top: -200px;*/
    }

    .no-network-block h2 {
        color: #444444 !important;
        padding: 0px !important;
        padding: none !important;
       /* margin-top: 15px;
        margin-bottom: 15px;*/
    }
    /*phone input handle*/
    #signUpPhone {
        width: 215px;
    }
    .contact-block {
        background-position: right 365px !important;
    }
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {

    .hero-image {
    max-width: 100%;
    position: absolute;
    left: -5%;
    top: -35px;
    }
    .navbar {
        margin-top: 0px;
    }

    #hero-section {
        margin-top: 70px;
    }
}
/*landscape mode*/
@media (min-width: 550px) and (max-width: 767px) and (orientation:landscape) {

    .hero-text {
        padding-left: 2px;
        position: relative;
        padding-top: 90px;
        }
    .shop-images-wrap {

        position: relative;
        top: 160px;
        height: 400px;
        width: 215px;
        justify-content: center;
    }
    .app-img-convertion 
    {
        position: relative;
        left: 150px;
    }
    .no-network-block
    {
        color: black;
    }
    
    .bg-community {
        background-position: 0px 0px;
    }
    .section-block {
        padding-top: 25px;
        margin:0px;
    }
    

}


@media (max-width: 420px) { 
   
}

/* Larger than tablet */
@media (min-width: 750px) and (max-width: 1024px) {

    .no-network-block {
        background-image: url(../images/blob_no_network.png);
        background-color: #135283;
        background-repeat: no-repeat;
        background-position: center center;
        height: auto;
        color: white !important;
        position: relative;
        /*top: -200px;*/
    }
    #container_community {
        margin-left: 0px !important;
    }

    /*phone input handle*/
    #signUpPhone {
        /*width: 425px;*/
    }

    .contact-block {
        background-position: 300px !important;
        height: 445px;
    }
}

/* Larger than desktop */
@media (min-width: 1000px) {
    .hero-image {

    max-width: 60%;
    position: absolute;
    left: -2%;
    top: -5%;
    
    }
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

.sub-title {
    color: white !important;
}
.no-network-block p {
    color: white !important;
}


.badges-wrap {
       display: inline-flex;
    align-items: center;
}

.badge {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	
}

.badge img {
	height: 70px;
}

img{
	max-width: 100%;
}

.shopping-img {
	border-radius: 100%;
    height: auto;
    position: relative;
}

.navbar {

    display: flex;
    list-style: none;
    align-items: baseline;
    justify-content: space-around;
}

.card {
	

   /* margin-bottom: 20px;
    height: 180px;*/

    flex-direction: row;
    /*width: 350px;*/
    width: 415px;
    background: white;
    padding: 20px;
    padding-bottom: 10px;
    border-radius: 15px;
    /*box-shadow: 1px 2px 1px 2px #e8e8e8;*/
}

.card span {
    color: white;
    margin-right: 20px;
	position: relative;
    display: flex;
    padding: 20px;
    height: 25px;
    font-size: 30px;
    border-radius: 50%;
    width: 25px;
    align-items: center;
    justify-content: center;
    background-color: #008cff;
    box-shadow: #58595a 0px 0px 10px 2px;
}


.bg-blob-wrap {

    position: absolute;
    left: 20%;
    z-index: -1;
    max-width: 200px;
}

.shop-images-wrap {

    display: flex;
    flex-direction: row;
    padding: 20px;
}
.shop-images-wrap img {

    object-fit: contain;
    max-height: 300px;
}
.contact-block {

    background-image: url(./images/contact_blob.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    /*height: 700px;*/
}

.no-network-block {
    background-image: url(../images/blob_no_network.png);
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center 170px;
    height: auto;
    /*padding: 100px;*/
    position: relative;
    color: #444444;

    /*top: -200px;*/
}

.no-network-block h2 {
        padding: 50px ;
    }

.no-network-block h2,p {
    
}

.modal-header,.modal-footer {
    margin:15px;
  border:none;
  background-image: url(../images/blob2.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 20px center;
}
.modal-footer {
    background-position: bottom right;
}

#toTopBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */

    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 13px; /* Increase font size */
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#toTopBtn i {
    color: #fff;
    margin: 0;
    position: relative;
    left: -6px;
    font-size: 15px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#toTopBtn:hover {
    background: rgba(0, 0, 0, 0.9);
}
#toTopBtn:hover i {
    color: #fff;
    top: 5px;
}
@media (min-width: 750px) and (max-width: 1000px) {

 #toTopBtn {
    display: none !important;
 }

}

/* flags plugin*/
.selected-dial-code {
    color: #000;
}
.iti-flag {background-image: url("../images/flags.png");}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti-flag {background-image: url("../images/flags@2x.png");}
}
/* flags plugin*/


/*CGU*/
.breadcumb .active {
    
    color: rgba(0,0,0,.9);
}
.breadcumb a {
    
    color: rgba(0,0,0,.5);
}

    
.cgu-menu {
    width: 280px;
    background-color: #f6f6f6 !important;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 15px;
    padding: 1px;
}

.cgu-menu li a {
display: block;
font-size: 1.0em;
padding: 10px;
text-decoration: none;   
}

@media (max-width: 768px) {

.cgu-content-wrap {

padding-left: 40px;
padding-right: 40px;

}
  
.cgu-menu-wrap {

 display: none !important;
}
.cgu-menu {
    /*display: none !important;*/
 }