@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800');


/* Reset */

        /* Document
        ========================================================================== */ 

        html {
            line-height: 1.15; /* 1 */
            -webkit-text-size-adjust: 100%; /* 2 */
            font-size: 62.5%;
        }
        
        /* Sections
            ========================================================================== */
        
        
        body {
            margin: 0;
            font-size: 1.6rem;
            font-family: 'Montserrat', sans-serif;
            background-color: #82a7c2;
            width: 100%;
        }
        
        h1 {
            font-size: 2em;
            margin: 0.67em 0;
        }

        .bolder{

            font-weight: 800;
        }
        

        /* Grouping content
            ========================================================================== */
        
        /**
        * 1. Add the correct box sizing in Firefox.
        * 2. Show the overflow in Edge and IE.
        */
        
        hr {
            box-sizing: content-box; /* 1 */
            height: 0; /* 1 */
            overflow: visible; /* 2 */
        }
        
        /**
        * 1. Correct the inheritance and scaling of font size in all browsers.
        * 2. Correct the odd `em` font sizing in all browsers.
        */
        
        pre {
            font-family: monospace, monospace; /* 1 */
            font-size: 1em; /* 2 */
        }
        
        /* Text-level semantics
            ========================================================================== */
        
        /**
        * Remove the gray background on active links in IE 10.
        */
        
        a {
            background-color: transparent;
            text-decoration: none;
        }
        
        /**
        * 1. Remove the bottom border in Chrome 57-
        * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
        */
        
        abbr[title] {
            border-bottom: none; /* 1 */
            text-decoration: underline; /* 2 */
            text-decoration: underline dotted; /* 2 */
        }
        
        /**
        * Add the correct font weight in Chrome, Edge, and Safari.
        */
        
        b,
        strong {
            font-weight: bolder;
        }
        
        /**
        * 1. Correct the inheritance and scaling of font size in all browsers.
        * 2. Correct the odd `em` font sizing in all browsers.
        */
        
        code,
        kbd,
        samp {
            font-family: monospace, monospace; /* 1 */
            font-size: 1em; /* 2 */
        }
        
        /**
        * Add the correct font size in all browsers.
        */
        
        small {
            font-size: 80%;
        }
        
        /**
        * Prevent `sub` and `sup` elements from affecting the line height in
        * all browsers.
        */
        
        sub,
        sup {
            font-size: 75%;
            line-height: 0;
            position: relative;
            vertical-align: baseline;
        }
        
        sub {
            bottom: -0.25em;
        }
        
        sup {
            top: -0.5em;
        }
        
        /* Embedded content
            ========================================================================== */
        
        /**
        * Remove the border on images inside links in IE 10.
        */
        
        
        img {
            max-width: 100%; /* Add !important if needed. */
            height: auto;    /* Add !important if needed. */
          }

        /* Forms
            ========================================================================== */
        
        /**
        * 1. Change the font styles in all browsers.
        * 2. Remove the margin in Firefox and Safari.
        */
        
        button,
        input,
        optgroup,
        select,
        textarea {
            font-family: inherit; /* 1 */
            font-size: 100%; /* 1 */
            line-height: 1.15; /* 1 */
            margin: 0; /* 2 */
        }
        
        /**
        * Show the overflow in IE.
        * 1. Show the overflow in Edge.
        */
        
        button,
        input { /* 1 */
            overflow: visible;
        }
        
        /**
        * Remove the inheritance of text transform in Edge, Firefox, and IE.
        * 1. Remove the inheritance of text transform in Firefox.
        */
        
        button,
        select { /* 1 */
            text-transform: none;
        }
        
        /**
        * Correct the inability to style clickable types in iOS and Safari.
        */
        
        button,
        [type='button'],
        [type='reset'],
        [type='submit'] {
            -webkit-appearance: button;
        }
        
        .button_y{
            background-color:#f8b943;
            border-radius: 2.5rem;
            color: black;
            font-weight: 500;
            letter-spacing: .2rem;
            padding: 1rem 2rem 1rem 2rem;
            border: none;
            margin-bottom: 2rem;
        }

        /**
        * Remove the inner border and padding in Firefox.
        */
        
        button::-moz-focus-inner,
        [type='button']::-moz-focus-inner,
        [type='reset']::-moz-focus-inner,
        [type='submit']::-moz-focus-inner {
            border-style: none;
            padding: 0;
        }
        
        /**
        * Restore the focus styles unset by the previous rule.
        */
        
        button:-moz-focusring,
        [type='button']:-moz-focusring,
        [type='reset']:-moz-focusring,
        [type='submit']:-moz-focusring {
            outline: 1px dotted ButtonText;
        }
        
        /**
        * Correct the padding in Firefox.
        */
        
        fieldset {
            padding: 0.35em 0.75em 0.625em;
        }
        
        /**
        * 1. Correct the text wrapping in Edge and IE.
        * 2. Correct the color inheritance from `fieldset` elements in IE.
        * 3. Remove the padding so developers are not caught out when they zero out
        *    `fieldset` elements in all browsers.
        */
        
        legend {
            box-sizing: border-box; /* 1 */
            color: inherit; /* 2 */
            display: table; /* 1 */
            max-width: 100%; /* 1 */
            padding: 0; /* 3 */
            white-space: normal; /* 1 */
            color: #82a7c2
        }
        
        /**
        * Add the correct vertical alignment in Chrome, Firefox, and Opera.
        */
        
        progress {
            vertical-align: baseline;
        }
        
        /**
        * Remove the default vertical scrollbar in IE 10+.
        */
        
        textarea {
            overflow: auto;
        }
        
        /**
        * 1. Add the correct box sizing in IE 10.
        * 2. Remove the padding in IE 10.
        */
        
        [type='checkbox'],
        [type='radio'] {
            box-sizing: border-box; /* 1 */
            padding: 0; /* 2 */
        }
        
        /**
        * Correct the cursor style of increment and decrement buttons in Chrome.
        */
        
        [type='number']::-webkit-inner-spin-button,
        [type='number']::-webkit-outer-spin-button {
            height: auto;
        }
        
        /**
        * 1. Correct the odd appearance in Chrome and Safari.
        * 2. Correct the outline style in Safari.
        */
        
        [type='search'] {
            -webkit-appearance: textfield; /* 1 */
            outline-offset: -2px; /* 2 */
        }
        
        /**
        * Remove the inner padding in Chrome and Safari on macOS.
        */
        
        [type='search']::-webkit-search-decoration {
            -webkit-appearance: none;
        }
        
        /**
        * 1. Correct the inability to style clickable types in iOS and Safari.
        * 2. Change font properties to `inherit` in Safari.
        */
        
        ::-webkit-file-upload-button {
            
            -webkit-appearance: button; /* 1 */
            font: inherit; /* 2 */
        }
        
        /* Interactive
            ========================================================================== */
        
        /*
        * Add the correct display in Edge, IE 10+, and Firefox.
        */
        
        details {
            display: block;
        }
        
        /*
        * Add the correct display in all browsers.
        */
        
        summary {
            display: list-item;
        }
        
        /* Misc
            ========================================================================== */
        
        /**
        * Add the correct display in IE 10+.
        */
        
        template {
            display: none;
        }
        
        /**
        * Add the correct display in IE 10.
        */
        
        [hidden] {
            display: none;
        }



    /* Style */

    /* style header */

        .header{
            max-width: 120rem;
            margin: auto;

        }

        .header__logo{
            margin-top: 4rem;
            width: 100%;
        }


    /* style main */

        .main{
            max-width: 120rem;
            margin: auto;
            padding: 3rem;
            
        }

    /* Colonne titre */
        .main__title{
            width: 60%;
            display: inline-block;

        }

        .main__photo{
            width: 30%;
            display: inline-block;
            opacity: .8;
            vertical-align: top;
            margin-top: 10rem;
        }

        .main__photo img{
            width: 50%;
            display: block;
            margin: auto;
            margin-bottom: 2rem;
        }

        .main__photo aside{
            text-align: center;
            font-size: 1.5rem;
        } 

        .main__photo aside::after{

            content: ' ';
            text-align: center;
            margin: auto;

            background-color: #3a4d58;

            display: block;
            height: 0.5em;
            width: 25%;
            margin-top: 2rem;
        }

        .main__title h1{
            font-size: 7rem;
            line-height: 120%;
            color: white;
            font-weight: 500;
            text-transform: uppercase;
            padding: 2rem 0 2rem 5rem;
        }
        
        .main__title h2 {
            font-size: 3rem;
            font-weight: 500;
            margin-bottom: 2rem;
            padding: 0rem 0 2rem 5rem;
            color: #2c4c69;
        }

    /* Colonne gauche */

        .main__columnL{
            width: 49%;
            display: inline-block;
            position: relative;
        }    

        .pastille{
            position: absolute;
            top: 50%;
        }

    /* Colonne de droite */

        .main__columnR{
            width: 40%;
            display: inline-block;
            padding: 3rem;
            margin-top: 8rem;
            vertical-align: top;
        }    



        .main__columnR p{
            font-size: 1.8rem;
            line-height: 2.8rem;
            color: #fff;
            margin-bottom: 5rem;
            text-align: justify;
    
        }   


    /* Illustration parallaxe */

        .illustration{
            height: 40rem;
 
        }

        .illustrationFull{
            background-image: url('https://lextenso.emsecure.net/images/Defrenois/guide_notaire_createur/parallaxeFull.png');
            background-position: bottom;
            background-size: contain;
            background-repeat: repeat-x;
            height: 40.1rem;
        }


        #sticky_column{
            background-image: url(https://lextenso.emsecure.net/images/Defrenois/guide_notaire_createur/parallaxeF_layer4.png);
            background-repeat: repeat-x;
            height: 50rem;
            position: absolute;
            top: 17%;
            width: 100%;
        
        }


    /* style fomrulaire */

        .formulaire__container{
            background-color:#fff;
        }

        .formulaire__intro{
            max-width: 120rem;
            margin: auto;
            text-align: center;
            background-color: #fff;
            font-size: 2.6rem; 
            line-height: 4rem;

            padding: 3rem;
            margin-bottom: 2rem;
        }

        .formulaire__inro p{
            font-weight: 500;
            color: #3a4d58;
        }
    
      
        
        .formulaire{
            max-width: 120rem;
            margin:auto;
            padding: 3rem;
            text-align: center;
        }

        #sticky_column2{
            height: 50rem;
            bottom: 0;
            left: 0;
        }        

        .form-group{
            width:100%;
            margin: auto;
        }

        .rgpd{
            height: 15rem;
            overflow: scroll;
            font-size: 1.2rem;
            line-height: 140%;
            width: 97rem;
            margin: auto;
            text-align: justify;
            color:#3a4d58;
            margin-bottom: 2rem;
        }

        input{
            padding: 1.5rem 2rem;
            width: 70%;
            margin: auto;
            margin-bottom: 2rem;
        }

        select{
            padding: 1.5rem 2rem;
            width: 74%;
            margin: auto;
            margin-bottom: 2rem;
        }

        [type='checkbox']
        {
            display: inline-block;
            width: unset;
            margin-right: 1rem;
        }

        [type='submit']
        {

            margin-top: 2rem;
            margin-bottom: 2rem;
        }

        label{

            display: inline-block;
        }
        
        :last-of-type{
          
        }

    /* Footer */

        footer{
            background-color: #3a4d58;
            color: #fff;
            font-size: 1.2rem;
            line-height: 140%;
            
            padding: 3rem 10rem 3rem 10rem;
            height:8rem;

        }



    /* style Mobile */

    @media only screen and (max-width : 627px) {



        .main__title h1{
            font-size: 5rem;
        }

        .main__title h1 , .main__title h2{
            padding: 0;
        }

        .header__logo{
            width: 100%;
            height: auto;
        }  

        .main{
            max-width: 62.7rem;
        }

        .main__title {
            width: 100%;
            display: inline-block;
        }

    

        .main__photo {
            width: 100%;
            display: inline-block;
        }



        .button_y{
            text-align: center;
            display: inline-block;
        }

            .main__columnL , .main__columnR{
            width: 100%;
            padding: 0;
            max-width: 62.7rem;
        }

        .main__columnL img{
            width: 42rem;
            height: 100%;
            display: block;
        }

        .pastille{
            position: absolute;
            top: 50%;
            width: 50%; 
        }

        .main__columnR img{
            display: block;
            width: 25rem;
            margin: auto;
            padding: 3rem;
            max-width: unset;
        }


        .rgpd {
            height: 15rem;
            overflow: scroll;
            font-size: 1.2rem;
            line-height: 140%;
            width: auto;
            margin: auto;
            text-align: justify;
            color: #3a4d58;
            margin-bottom: 2rem;
        }




    }