.firstNewLaptop{
    position: absolute;
    width: 250px;
    height: 250px;
    left: 77%;
    top: 4%;
    transform: rotate(20deg);
    opacity: 0.5;
    border-radius: 40%;
}
.axe{
     opacity: 0.5;
     position: absolute;
      border-radius: 70%;
}
.axe1{
    left:36%;
    top: 18%;
    transform: rotate(-20deg);
}
.axe2{
    left:37%;
    bottom: 30%;
    transform: rotate(20deg);
}
.axe3{
    bottom: 30%;
    left: 85%;
      transform: rotate(-20deg);
}


/*==========================================
 01.  PRELOADER - LINE (25-164)
 02.  NAVIGATION - LINE (169-179)
 03.  HOME - LINE (180-230)
 04.  Fonctionnalites - LINE (233-260)
 05.  Phone - LINE  (263-303)
 06.  Screens - LINE (305-480)
 07.  Recommandation - LINE (482-510)
 08.  Collaborateur - LINE (520-550)
 09. FOOTER - LINE (550-Fin)
 10. Email - LINE (670)
==========================================*/

/* ==========================================================================
      custom styles
   ========================================================================== */
:root {
  --green: #8cdaad;
  --orange: #fc967a ;
  --grey: #6e6e6e;
  --clrbg:#f8fdfa;
}


/*Preloader*/
    .loader {

  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
    }
    

    /*LOADER-1*/
    
    .loader-1 .loader-outter {
        position: absolute;
        border: 8px solid var(--orange);
        border-left-color: transparent;
        border-bottom: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
        animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
    }
    
    .loader-1 .loader-inner {
        position: absolute;
        border: 8px solid var(--green);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        left: calc(50% - 20px);
        top: calc(50% - 20px);
        border-right: 0;
        border-top-color: transparent;
        -webkit-animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
        animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
    }

    @-webkit-keyframes loader-1-outter {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    
    @keyframes loader-1-outter {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    
    @-webkit-keyframes loader-1-inner {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
    }
    
    @keyframes loader-1-inner {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
    }
    .dent-loader{
        margin-left: 15px;
        opacity: 0.3;
        -webkit-animation: dent-pulse 2s cubic-bezier(.42, .61, .58, .41) infinite;
        animation: dent-pulse 2s cubic-bezier(.42, .61, .58, .41) infinite;
    }

        @keyframes dent-pulse {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        50% {
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
        }
    }

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0; } 
  to { bottom:0px; opacity:1; }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0; } 
  to{ bottom:0; opacity:1; }
}

/*End off Preloader*/


/*
Nav Menu style
==================*/

.navbar-brand {
    padding: 30px 15px;
}

.logo{
    width: 150px;
    height: 50px;
    margin-top: -8%;
}
.logo-Mail{
    margin-left: 520px;
    width: 80px;
    height: 80px;
    border-radius: 25%;
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
}

/*.social{
    right: -190px !important;
    top: 300px !important;
    position: absolute;
    transform: rotate(90deg);
    background:  var(--orange);
}*/

.sidefixed {
      z-index: 99;
  padding: 0;
  background: var(--orange);
  color: white;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: fixed;
  right: 0px;
  top: 200px;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}
.sidefixed:hover {
  width: 200px;
  transition: all 0.25s ease-in-out;
}

.sidefixed2 {
    z-index: 99;
  padding:0;
  background: var(--green);
  color: white;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: fixed;
  right: 0px;
  top: 268px;
  transition: all 0.2s ease-in-out;
    overflow: hidden;
}
.sidefixed2:hover {
  width: 220px;
  transition: all 0.25s ease-in-out;
}


/*
Home Section style
==================*/

.home{
    background: url(../images/) no-repeat top center;
    background-size: cover;
    position: relative;
}

.laptop{
    position: absolute;
    left: 2%;
    top: -50px;
    transition: transform ;
    transition-duration: 0.8s;
}

.laptop:hover{
      -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);

   
}
.main_home{
    overflow: hidden;
    padding-top: 200px;
    padding-bottom: 350px;
}
.home_text h1{
    font-family: 'Ubuntu', sans-serif;
    font-size:3rem;
    font-weight: 600;
    line-height: 4.5rem;
}

.home_btns{
    margin-left:-10px;
}
.home_btns a{
    margin-left:10px;
}

.scrooldown{
    position: absolute;
    left: 48.5%;
    bottom: 10%;
    width: 40px;
    height: 40px;
    line-height: 37px;
    background: #f4f5f9;
    border-radius: 50%;
    text-align: center;
    z-index: 3;
}
.scrooldown a i{
    font-size:0.775rem;
    color:#e74c3c;
}

/*
Fonctionnalites section style
========================*/
.main_fonctionnalites{}
.fonctionnalites_item{}
.fonctionnalites_item .f_item_icon{
    float: left;
    width:20%;
    display: inline-block;
    margin-right: 15px;
}
.fonctionnalites_item .f_item_icon i{
    font-size:4rem;
    color:#fc6a42;
}
.fonctionnalites_item .f_item_text{
    display: inline-block;
    width:70%;
}

.pub-image{
    position: absolute;
    width: 54%;
    height: 500px;
    left: 23%;
    margin-top: 260px;
}
.pub{ 
    width: 60%;
    height: 403px;
   position: relative;
   left: 20%;
   top: 42px;
   border: none !important;
}

/*
Phone Section style
=====================*/
.main_drag{
    overflow: hidden;
}

.swiper-container {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    margin: 20px auto;
}
.swiper-slide {
    text-align: center;
    background-position: center;
    background-size: cover;
    width: 340px;
    height: 600px;


    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    box-shadow: 0px 0px 15px 0px #ddd;
}


/*
Screens Section style
=====================*/

.screen03,
.screen02,
.screen01{
    overflow: hidden;
    width: 100%;
}

.screen03_img,
.screen02_img,
.screen01_img{
    position: relative;
}
.screen03_img img,
.screen02_img img,
.screen01_img img{
    position: relative;
    z-index: 1;
}
.screen01_img img{
   padding-top: 90px;

}

.C1,
.R1{
    font-weight: 300;
    transform: rotate(-90deg);
    position: absolute;
    color: #ddd;
    z-index: 0;
}
.C1{ 
    top: 220px;
    right: 460px;
    font-size: 15rem;

}
.S1{
      font-weight: 300;
    transform: rotate(-90deg);
    position: absolute;
    color: #ddd;
    z-index: 0;
    top: 200px;
    right: 290px;
    font-size: 11.6rem;
}
.R1{
    top: 255px;
    right: 420px;
    font-size: 13rem;
}
.attr_rio,
.attr_deg{
    position: absolute; 
    width:55px;
    height: 55px;
    line-height: 55px;
    display: inline-block;
    border-radius: 50%;
}
.attr_deg{ 
    top: 10%;
    right: 6%;
    background-color: #ffffff;
}
.attr_rio{ 
    bottom:0;
    right:0;
    background-color: #fcec64;
}
.attr_deg4,
.attr_C2,
.attr_deg3,
.attr_sun2,
.attr_R1,
.attr_deg2,
.attr_lon,
.attr_sun{
    position: absolute; 
    width:90px;
    height: 90px;
    line-height: 90px;
    display: inline-block;
    border-radius: 50%;
}

.attr_sun{ 
    top: 45%;
    left: 0%;
    background-color: #fc6a42;
}
.attr_lon{ 
    top:40%;
    right:0%;
    background-color: #4466c9;
}
.attr_R1{ 
    top: 28%;
    right: 8%;
    background-color: var(--orange);
    z-index: 4;
}
.attr_deg2{ 
    top:60%;
    left:8%;
    background-color: var(--green);
    z-index: 4;
}
.attr_sun2{ 
    top: 15%;
    right: -2%;
    background-color: var(--green);
    z-index: 4;
}
.attr_deg3{ 
    top:60%;
    left:-3%;
    background-color: var(--orange);
    z-index: 4;
}
.attr_C2{
    top: 27%;
    right: 10%;
    background-color: var(--orange);
    z-index: 4;
}
.attr_deg4{ 
    top:60%;
    left:8%;
    background-color: var(--green);
    z-index: 4;
}

.screen01_content{}
.screen03_content p,
.screen02_content p,
.screen01_content p{
    font-size:1.500rem;
    line-height: 2.125rem;
}
.screen03_content ul li,
.screen02_content ul li,
.screen01_content ul li{
    border: 1px dashed #ddd;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    line-height: 60px;
    box-shadow: 0px 0px 10px 0px #ededf2;
    margin-right: -15px;
    background-color: #fff;
    position: relative;
    color:#ededf2;
}
.screen03_content ul li:nth-child(1),
.screen02_content ul li:nth-child(1),
.screen01_content ul li:nth-child(1){
    z-index: 2; 
}
.screen03_content ul li:nth-child(2),
.screen02_content ul li:nth-child(2),
.screen01_content ul li:nth-child(2){
    z-index: 1;
}
.screen03_content ul li:nth-child(3),
.screen02_content ul li:nth-child(3),
.screen01_content ul li:nth-child(3){
    z-index: 0
}

/*
Recommandation Section style
=====================*/

.main_reviews .head_title{
    padding-bottom:1rem;
}
.reviews_content{}
.reviews_item{
    position: relative;
    width:100%;
}
.reviews_item h3,
.reviews_item h5{
    color:#353854;
}
.reviews_item_icon{
    display: block;
    width: 100%;
    font-size: 6rem;
    color: #648cff;
    height: 55px;
    margin-bottom: 20px;
}
.reviews_item_icon1{
    display: inline-block;
    width: 80px;
    font-size: 6rem;
    color: #648cff;
    height: 55px;
    position: absolute;
    right: 0;
    bottom: -45px;
    transform: rotate(-180deg);
}
.Recommandation img{
    max-width: 200px !important;

}

/*
Collaborateur Section style
=====================*/
.Collaborateur{
    position: relative;
  background: url(../images/dent4.png) no-repeat left top fixed;
  width: 100%;
  overflow: hidden;
       
}
.Collaborateur_item h5{
    line-height: 1.5rem;
    width:70%;
}
.Collaborateur_item img.app_right{
    position: relative;
    bottom:-60px;
}
.Collaborateur_app{
    margin-left:-10px;
}
.Collaborateur_app a{
    margin-left:10px;
}
.Colab{
    padding-left: 150px;
}
/*
Footer Section style
=====================*/
nav.navbar.bootsnav.footer-menu{
    background-color: transparent;
    border-bottom: 0px;
}
nav.navbar.bootsnav.footer-menu ul li a{
    color:#b5b5c8;
}
nav.navbar.bootsnav.footer-menu ul li a:hover{
    color: #6e6e6e ;
}
.divider{
    width:100%;
    height: 1px;
    background-color: #434769;
    display: inline-block;
}
.main_footer{
    overflow: hidden;
}

.main_footer i {
    padding: 0px 5px;
    color: #ff0000;
}



/*Scroll Up*/
.scrollup {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    opacity: .3;
    position: fixed;
    bottom: 20px;
    right: 25px;
    color: #fff;
    cursor: pointer;
    background-color: #000;
    z-index: 1000;
    transition: opacity .5s, background-color .5s;
    -moz-transition: opacity .5s, background-color .5s;
    -webkit-transition: opacity .5s, background-color .5s;
}

.scrollup i {
    font-size: 13px;
    position: absolute;
    opacity: 1;
    color: #fff;
    left: 50%;
    top: 50%;
    margin-top: -7px;
    margin-left: -6px;
    text-decoration: none;
}

.scrollup:hover {
    background-color: blueviolet;
    color:#fff;
}


.showvideo #v1,#v2,#v3,#v4{ 
    position: absolute;
    transition: transform ;
    transition-duration: 0.5s;
}
#v1{
    width: 50%;
    left: 25%;
    top:  35%;
}
#v2{
    width: 50%;
    left: 25%;
    top:  20%;
}
#v3{
    width: 50%;
    left: 25%;
    top:  20%;
}
#v4{
    width: 50%;
    left: 25%;
    top:  20%;
}

.showvideo:hover #v1,.showvideo:hover #v3{
     z-index: 5;
    transform: scale(2);
-webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
    }

.showvideo:hover #v2,.showvideo:hover #v4{
         z-index: 5;
    transform: scale(2.2);
-webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
    }