.home2024_top {
	background: rgb(66,92,116);
	background: linear-gradient(142deg, rgba(66,92,116,1) 0%, rgba(116,153,193,1) 35%);
	width:100%;
	min-height:300px;
}

.home2024_top .title {
	font-family:Poppins, sans-serif;
	font-weight: 700;
	font-size:42px;
	color:rgba(255,255,255,0.5);
	text-align:center;
	padding-top:30px;
	line-height:1.1em;
    width:700px;
    margin-left:auto;
    margin-right:auto;
}

.master_perso {
    position:absolute;
    left:-30px;
    top:100px;
    height:700px;
}

#cta {
    position:relative;
    line-height:14px;
    font-size:15px;
    margin-top:40px;
    text-align:center;
	font-weight: 300;
    color:#495D76;
}

#cta .no_eng {
    font-weight:300;
    bottom:-17px;
    left:95px;
    display:inline-block;
    position:absolute;
    font-size:13px;
}


@media only screen and (min-width:900px) and (max-width: 1100px) {
    .home2024_top .title {
       margin-left:200px;
    }
}

@media only screen and (max-width: 900px) {
    .home2024_top .title {
       margin:0;
       width:100%;
    }
    .master_perso {
        height:400px;
        top:290px;
    }
    .home2024_top .title {
        font-size:27px;
    }

    #cta {
        font-size:15px;
    }
}


.home2024_top .title .fonction, .home2024_top .title .quoi {
	font-weight: 800;
	color:white;
}


@keyframes brath{
	0%{background-color:rgba(255,255,255,.9);}
	50%{background-color:rgba(255,255,255,0.7);}
	100%{background-color:rgba(255,255,255,.9);}
}

.home2024_top .title ul {
    margin:0;
    height:1.4em;
    overflow-y:hidden;
}

.home2024_top .title ul li {
	transition:transform 1.3s ease;
    line-height:1.4em;
    height:1.4em;
}

.home2024_top .title ul li.notransition {
	transition:none;
}


#cta a {
    text-transform:uppercase;
    font-weight:bold;
    color:#495D76;
    height:60px;
    line-height:60px;
    background-color:white;
    border-radius:30px;
    transition:
        color 0.3s ease,
        background-color 0.3s ease;
    position:relative;
    font-size:20px;
    padding-left:47px;
    padding-right:47px;
    padding-top:6px;
    padding-bottom:19px;
}

#cta a:hover {
    color:white;
    background-color:#495D76;
}

#mockupcontainer {
    position:relative;
    height:370px;
    margin-top:80px;
    text-align:center;
    width:100%;
    /*border:1px solid red;*/
    overflow:hidden;
}

#mockupcontainer #mac {
    display:inline-block;
    left:calc(50% - 250px);
    top:40px;
    width:500px;
    height:300px;
    position:absolute;
    /*border:1px solid red;*/
}

#mac_cnt {
    position:absolute;
    left:12.8%;
    top:2%;
    width:74%;
    height:77.3%;
}

#mac_mu {
    position:absolute;
    left:calc(50% - 250px);
    top:0px;
    width:500px;
}

#mockupcontainer #iPhone {
    display:inline-block;
    left:calc(50% + 150px);
    top:150px;
    width:100px;
    height:200px;
    position:absolute;;
}

@media only screen and (max-width:500px) {
    #mockupcontainer #iPhone {
        position:absolute;
        display: block;
        left: calc(100% - 100px);
    }
}

#iPhone_cnt {
    position:absolute;
    left:0;
    width:97px;
    height:200px;
    border-radius:15px;
}

#iPhone_mu {
    position:absolute;
    left:0;
    width:100px;
    height:200px;
}


#mockupcontainer #iPad {
    display:inline-block;
    width:300px;
    height:220px;
    top:140px;
    left:calc(50% - 430px);
    position:absolute;;
}

@media only screen and (max-width:560px) {
    #mockupcontainer #iPad {
        display: block;
        left: -150px;
    }
}


#iPad_cnt {
    position:absolute;
    left:20px;
    top:10px;
    width:260px;
    height:200px;
}

#iPad_mu {
    position:absolute;
    left:0px;
    top:0px;
    width:300px;
}

#mockupcontainer #txt_content {
    position:absolute;
    width:100%;
    top:0;
    text-align:center;
    font-family:Poppins, sans-serif;
	font-weight: 300;
    line-height:1em;
    color:rgba(255,255,255,0.7);
}

#mockupcontainer #txt_content b {
    color:rgba(255,255,255,0.9);
}


.bubble {
    position:absolute;
    top:300px;
    left:0px;
    width:500px;
    height:500px;
    border-radius:250px;
    background: linear-gradient(142deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 35%, rgba(255,255,255,0) 100%);
}


@media only screen and (max-width:550px) {
    .bubble {
        width:100%;
    }
}


.bubble2 {
    position:absolute;
    top:-30px;
    right:0px;
    width:300px;
    height:300px;
    border-radius:150px;
    background: linear-gradient(142deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 35%, rgba(255,255,255,0) 100%);
}

.submock .title {
    font-size:28px;
    margin-top:28px;
    margin-bottom:28px;
    color:#222222;
}

.submock .contenu {
    font-size:18px;
    margin-top:28px;
    margin-bottom:28px;
    color:#222222;
    padding:0 40px 40px 40px;
}


.feature-list .feature {
    position:relative;
    padding:10px 15px 110px 202px;
}

.feature-list .feature .title {
    margin-bottom:10px;
    text-transform: uppercase;
    font-size:16px;
    font-weight:bold;
    letter-spacing: 3px;
}

.feature-list .feature .contenu {
    color:#666;
    line-height:1.8em;
}


.feature-list .feature .image {
    width:200px;
    height:200px;
    position:absolute;
    top:0;
    left:0;
    padding:10px 20px 0 0;
    text-align:right;
    overflow:hidden;
}

.feature-list .feature .image img {
    width:80px;
}

a {
    color:#7B98BF;
}