.clear{
	clear:both;
}

*{
	outline: 0;
}

img{
    border:none;
}

.nowrap{
    white-space: nowrap;
}

.hidden{
    visibility: hidden;
}

a{
    color:#667BE9;
}

html{
	padding:0px;
	margin:0px;
	min-height:100%;
	height: 100%;
    text-rendering: auto;
	text-rendering: optimizeLegibility;
	text-rendering: geometricPrecision;
	font-smooth: always;
	
	font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


body{
	padding:0px;
	margin:0px;
	min-height:100%;
	width:100%;
    height: 100%;
    max-width: 100%;
	-ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #393939;
    font-weight:normal;
    background-color: #FFFFFF;
}

#overlay{
    background-color:#4E3374;
    color:#fff;
    position:fixed;
    z-index: 300000;
    width:100vw;
    max-width: 900px;
    top:50%;
    left:50%;
	transform: translate(-50%, -50%);
    opacity:0;
    transition: all 0.5s ease-in-out;
    transition-delay: 0s;
    pointer-events: none;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);

}

#overlay .inside{
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

#overlay .inside p{
    margin-top: 0px;
}

#overlay .inside h1{
    color:#fff;
    margin-top: 0px;
}

#overlay.opened{
    display: block;
    opacity:1;
    pointer-events: auto;

}

#overlay a.close{
    display: inline-block;
    position: absolute;
    right:20px;
    top:20px;
    width:20px;
    height:20px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/fermer.svg);
}

#headerspacer{
    height:89px;
}

#header{
    width:100%;
    background-color: #F8F9FA;
    position: fixed;
    top:0px;
    left:0px;
    z-index: 3000;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
}

#header .inside{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height:89px;
}



#logo{
    width:164px;
    height:17px;
    background-image: url(../img/logo.svg);
    background-position: left center;
    background-size: contain;
    overflow: hidden;
    text-indent: -30000px;
    display: block;
}

.main_menu ul, .main_menu ul li{
    margin: 0px;
    padding: 0px;
    list-style: none;
    font-weight: 600;
   
}

.main_menu ul li a:not(.button){
    color: inherit;
    text-decoration: none;
    line-height: 2em;
    border-bottom:1px solid transparent;
    margin-left: 20px;
    margin-right: 20px;
    display: inline-block;
    font-size: 0.875em;
}

.main_menu ul li a:hover, .main_menu ul li a.active{
    color: #694B93;
    border-bottom:1px solid #694B93;
}

.main_menu ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#footer{
    background-color: #4E3374;
    color:#fff;
}

#footer .inside{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height:89px;
}

#footer .copyright{
    font-size: 0.750em;
}

#footer .copyright a{
    color: inherit;
    text-decoration: none;
}

.inside {
    position: relative;
    width: calc(100% - 30px);
    max-width: 1170px;
    margin: auto;
}

h1{
    font-size:2.750em;
    color:#694B93;
    font-weight: normal;
    font-family: 'Playfair Display', serif;
    line-height: 1.136em;
}

h2{
    font-size:1em;
    line-height: 1.813em;
}

h3{
    font-size: 0.688em;
    text-transform: uppercase;
}

p{
    line-height: 1.813em;
}

.page_intro{
    position: relative;
}

.page_intro .background{
    background-color:#4E3374;
    position: absolute;
    z-index: 1;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

.page_intro .image{
    position: absolute;
    z-index: 2;
    top:0px;
    right:0px;
    width:50%;
    height:100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.page_intro .inside{
    z-index: 3;
    position: relative;
}

.page_intro .inside .content{
    color:#fff;
    box-sizing: border-box;
    width:50%;
    padding-top: 90px;
    padding-bottom: 90px;
    padding-right: 30px;
}

.page_intro .inside .content h2{
    font-size: 1em;
    font-weight: normal;
}

.page_intro .inside .content h1{
    font-size: 3.250em;
    color:#fff;
    line-height: 1.154em;
}

.page_features .featureitem{
    margin-top: 46px;
    margin-bottom: 46px;
}

.page_features .featureitem .featurecontent{
    float:left;
    width:50%;
    box-sizing: border-box;
    padding-top:37px;
    padding-bottom: 67px;
}

.page_features .featureitem.even .featurecontent{
    text-align: right;
}

.page_features .featureitem.even .featurecontent h1{
    margin-top:0px;
}




.page_features .featureitem .screenshotcontainer{
    float:left;
    width:50%;
    box-sizing: border-box;
    text-align: right;
    padding-left:30px;
    padding-right: 30px;
}

.page_features .featureitem.even .screenshotcontainer{
    text-align: left;
    float: right;
}



.page_features .featureitem .screenshot{
    width:453px;
    max-width: 100%;
    /*height:453px;*/
    background-image: url(../img/screenshot_back.svg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.page_features .featureitem .screenshot .imagecontainer{
    width:100%;
    height:100%;
    box-sizing: border-box;
    padding: 14.348785%;
    overflow: hidden;
    padding-bottom: 0px;
    margin-bottom: 14.348785%;
}

.page_features .featureitem .screenshot .imagecontainer .features_screenshot_featurescrenshot{
    box-shadow: 0 18px 36px -18px rgba(0,0,0,0.30), 0 30px 60px -22px rgba(0,0,0,0.25);
    border-bottom:1px solid #E3E5E7;
}

.page_about{
    background-color:#F8F9FA;
    padding-top: 95px;
    padding-bottom: 95px;
}

.page_about h1{
    font-size: 1em;
    line-height: 1.813em;
    font-family: 'Montserrat', sans-serif;
    color:inherit;
}

.page_about .aboutcontent{
    width:calc(100% - 300px);
    float:left;
}

.page_about .aboutimage{
    width:270px;
    float:right;
    margin-top: 36px;
}

.rounded_image_roundedimage{
    border-radius:50%;
}

.page_about .quote{
    font-size:2.250em;
    line-height:1.222em;
    position: relative;
}
.page_about .quote:before{
    content:"“";
    font-size: 1.778em;
    display: block;
    position: absolute;
    top:24px;
    left:-18px;
    transform:translateX(-100%);
}

.page_about .quote p:after{
    content:"”";
    font-size: 1.778em;
    color:#7B7B7B;
    display: inline-block;
    vertical-align: -webkit-baseline-middle;
    margin-left: 15px;
}

.page_about .quote p{
    line-height:1.222em;
}

.page_pricing{
    position: relative;
}

.page_pricing .background{
    background-color:#4E3374;
    position: absolute;
    z-index: 1;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

.page_pricing .image{
    position: absolute;
    z-index: 2;
    top:0px;
    left:0px;
    width:37.5%;
    height:100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.page_pricing .devices{
    width:330px;
    height:411px;
    left:37.5%;
    top:50%;
    transform: translate(-140px, -50%);
    position: absolute;
    background-image: url(../img/devices.png);
    background-position: left center;
    background-repeat: no-repeat;
    z-index: 3;
}

.page_pricing .inside{
    z-index: 5;
    position: relative;
}

.page_pricing .inside .content{
    color:#fff;
    box-sizing: border-box;
    width:62.5%;
    padding-top: 90px;
    padding-bottom: 90px;
    padding-left: 220px;
    float: right;
}


.page_pricing .inside .content h1{
    color:#fff;
}
.page_pricing .inside .content h1 small{
    font-size: 0.455em;
}

.page_pricing ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.page_pricing ul li{
    position: relative;
    padding-left: 0px;
    list-style: none;
    margin-bottom: 1em;
}
.page_pricing ul li:before {
    content: '';
    width: 16px;
    height: 13px;
    position: absolute;
    background-image: url('../img/check.svg');
    background-size: contain;
    background-position: center;
    left: -10px;
    top: 1px;
    transform: translateX(-100%);
   
}

.page_instagram{
    padding-top:95px;
    padding-bottom: 105px;
}

.instagramitem{
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border:1px solid #efefef;
    display: block;
}

.instagramitem:after{
    content:"";
    padding-top: 100%;
    display: block;
}

.instagramitem img{
    max-width: 100%;
}

#instagramNav button{
    border:1px solid #E3E5E7;
    width:40px;
    height:40px;
    border-radius:50%;
    margin-left: 5px;
    cursor: pointer;
    font-size: 18px;
    color:#4D4D4D;
}


.button{
    border:1px solid;
    color:#694B93;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.750em;
    text-decoration: none;
    border-radius:100px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

.button.filled{
    background-color:#694B93;
    border-color:#694B93;
    color:#fff;
}

.main_menu .button{
    margin-left: 20px;
}

.page_intro .button, .page_pricing .button{
    color:#fff;
    border-color:#fff;
    margin-right: 20px;
}

.page_intro .filled, .page_pricing .button.filled{
    color:#694B93;
    border-color:#fff;
    background-color:#fff;
}

#footer .button{
    color:#fff;
    border-color:#fff;
    margin-left: 20px;
}

#footer .filled{
    color:#694B93;
    border-color:#fff;
    background-color:#fff;
}

.button:hover{
    background-color: #393939 !important;
    color:#fff !important;
}


.marks_gallery{
    width:570px;
    float: left;
    min-height: 10px;
}

.marks_gallery img{
    max-width: 100%;
    margin-bottom:30px;
    border: 1px solid #efefef;
    box-sizing: border-box;
}


.marks_description{
    width:calc(100% - 570px);
    float: left;
    box-sizing: border-box;
    padding-left: 25px;
}

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

.marks_description h3{
    margin-top: 30px;
    margin-bottom: 0px;
}

.marks_description h3:first-child{
    margin-top: 0px;
}

.marks_description p{
    margin-top: 0px;
}

.marks_description .description{
    margin-top: 30px;
}

#website{
    display: none;
}

@media (max-width:950px){
    .main_menu ul li a:not(.button){
        margin-left: 10px;
        margin-right: 10px;
    }

    .main_menu .button {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-top: 5px;
    }
}

@media (max-width:870px){

    
   


    .page_intro .image{
        position: relative;
        width:100%;
        height:300px;
    }
    .page_intro .image:after{
        content: "";
        padding-top:39.93%;
    }

    .page_intro .inside .content{
        width:100%;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .page_pricing .image{
        width:20%;

    }

    .page_pricing .inside .content{
        width:80%;
    }

    .page_pricing .devices{
        left:20%;
    }

    .page_about h1{
        margin-left: 34px;
    }
    .page_about .aboutimage{
        float: none;
        margin-left: 34px;
    }

    .page_about .aboutcontent{
        float: none;
        width:calc(100% - 34px);
        margin-left: 34px;
    }

    
}

@media (max-width:768px){
    .main_menu  .nomobile{
        display: none;
    }
}

@media (max-width:750px){

    

    .page_features .featureitem .screenshotcontainer{
        float: none !important;
        width:100%;
        text-align: center !important;
    }

    .page_features .featureitem .featurecontent{
        float: none !important;
        width:100%;
        text-align: left !important;
    }
}

@media (max-width:625px){

    .page_pricing .image{
        display: none;
    }

    .page_pricing .inside .content{
        width:100%;
        padding-left: 30px;
    }

    .page_pricing .devices{
        display: none;
    }

    .page_about h1{
        text-align: center;
        margin: auto;
    }

    .page_about .aboutimage{
        float: none;
        margin: auto;
    }

    .page_about .quote{
        font-size: 1.5em;
        text-align: center;
    }
    .page_about .quote:before{
        content:none;
    }

    .page_about .quote p:after{
        content:none;
    }

    h1{
        font-size: 2em;
    }
}