
$base-font-size: 62.5%;
$yellow: #fab901;
$orange: #fab800;

@font-face {
    font-family: 'SomfySans-Light';
    src: url('fonts/SomfySans-Light.eot'); /* IE9 Compat Modes */
    src: url('fonts/SomfySans-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/SomfySans-Light.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/SomfySans-Light.woff') format('woff'), /* Pretty Modern Browsers */
         url('fonts/SomfySans-Light.ttf')  format('truetype'); /* Legacy iOS */
  }
  
  @font-face {
    font-family: 'SomfySans-Medium';
    src: url('fonts/SomfySans-Medium.eot'); /* IE9 Compat Modes */
    src: url('fonts/SomfySans-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/SomfySans-Medium.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/SomfySans-Medium.woff') format('woff'), /* Pretty Modern Browsers */
         url('fonts/SomfySans-Medium.ttf')  format('truetype'); /* Legacy iOS */
  }
  
  @font-face {
    font-family: 'SomfySans-Regular';
    src: url('fonts/SomfySans-Regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/SomfySans-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/SomfySans-Regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/SomfySans-Regular.woff') format('woff'), /* Pretty Modern Browsers */
         url('fonts/SomfySans-Regular.ttf')  format('truetype'); /* Legacy iOS */
  }


html, body{
    margin: 0;
    padding: 0;
}

section{

    &#section-0{

        img{
            width: 100%;
            max-width: 1920px;
        }
    }

    &#section-1,&#section-4,&#section-7,&#section-8,&#section-9,&#section-10,&#section-11,&#section-12,&#section-13{

        padding-top: 220px;
        padding-bottom: 220px;

        @media(max-width:1000px){
            
            padding-top: 110px;
            padding-bottom: 60px;
            
        }

        &.nop{
            padding-bottom: 0;
        }

        div.row{
            display: flex;
            max-width: 1000px;
            margin: auto;

            @media(max-width:1000px){

                max-width: none;
                width: 100%;
            }

            @media(max-width:425px){
                flex-flow: wrap;
            }

            .left{
                width: 50%;

                &.image{
                    text-align: right;

                    @media(max-width:1000px){
                        img{
                            width: 100%;
                        }
                    }
                }

                @media(max-width:425px){
                    width: 100%;
                }

                &.text{
                    

                    h2{
                        margin-right: 117px;
                        font-family: "SomfySans-Regular";
                        font-size: 2.0rem;

                        strong{
                            font-family: 'SomfySans-Medium';
                        }

                        @media(max-width:1000px){

                            margin-right: 50px;
                            font-size: 1.5rem;
                            margin-left: 10px;
                        }
                    }

                    p{
                        margin-right: 117px;
                        font-family: 'SomfySans-Light';
                        font-size: 1.2rem;
                        padding-bottom: 45px;

                        @media(max-width:1000px){

                            margin-right: 50px;
                            font-size: 1.0rem;
                            padding-bottom: 25px;
                            margin-left: 10px;
                        }

                        &.nop{
                            padding-bottom: 10px;
                        }
                    }

                    a{
                        color: #fff;
                        text-transform: uppercase;
                        background-color: $orange;
                        border-radius: 30px;
                        padding-left: 40px;
                        padding-right: 40px;
                        padding-top: 13px;
                        padding-bottom: 13px;
                        font-size: 1.4rem;
                        font-family: 'SomfySans-Light';
                        text-decoration: none;

                        @media(max-width:1000px){

                            font-size: 1.1rem;
                            margin-left: 10px;
                        }
                    }
                }
            }

            .right{
                width: 50%;

                @media(max-width:425px){
                    width: 100%;
                }

                &.text{
                    

                    h2{
                        margin-left: 117px;
                        font-family: "SomfySans-Regular";
                        font-size: 2.0rem;

                        @media(max-width:1000px){

                            margin-left: 50px;
                            font-size: 1.5rem;
                            margin-left: 10px;
                            margin-right: 10px;
                        }
                    }

                    p{
                        margin-left: 117px;
                        font-family: 'SomfySans-Light';
                        font-size: 1.2rem;
                        padding-bottom: 45px;

                        &.nop{
                            padding-bottom: 10px;
                        }

                        @media(max-width:1000px){

                            margin-left: 50px;
                            font-size: 1.0rem;
                            padding-bottom: 25px;
                            margin-left: 10px;
                            margin-right: 10px;
                        }
                    }

                    a{
                        margin-left: 117px;
                        color: #fff;
                        text-transform: uppercase;
                        background-color: $orange;
                        border-radius: 30px;
                        padding-left: 40px;
                        padding-right: 40px;
                        padding-top: 13px;
                        padding-bottom: 13px;
                        font-size: 1.4rem;
                        font-family: 'SomfySans-Light';
                        text-decoration: none;

                        @media(max-width:1000px){

                            font-size: 1.1rem;
                            margin-left: 10px;
                        }
                    }
                }

                &.image{
                    text-align: left;

                    @media(max-width:1000px){
                        img{
                            width: 100%;
                        }
                    }
                }
            }
        }

        &.rev{

            div.row{

                @media(max-width:425px){
                    flex-direction: column-reverse;
                }
            }
        }
    }

    &#section-2,&#section-5{

        padding-top: 0px;
        padding-bottom: 0px;

        div.row-1{
            display: flex;
            max-width: 1210px;
            margin: auto;
            justify-content: center;

            h2{
                font-family: 'SomfySans-Light';
                font-size: 2.3rem;
                margin-bottom: 45px;

                .yellow{
                    font-family: 'SomfySans-Regular';
                    color: $yellow;
                }

                @media(max-width:1000px){

                    font-size: 2rem;
                }

                @media(max-width:425px){
                    font-size: 1.5rem;
                }
            }
        }

        div.row-2{
            display: flex;
            max-width: 1210px;
            margin: auto;
            justify-content: center;

            .col{
                width: 33%;
                text-align: center;

                p{
                    margin: auto;
                    font-family: 'SomfySans-Light';
                        font-size: 1.3rem;
                        text-align: center;
                        width: 70%;
                        padding-top: 45px;

                        @media(max-width:1000px){
                            font-size: 1.0rem;
                        }
                }

                h3{
                    margin: auto;
                    font-family: 'SomfySans-Medium';
                        font-size: 1.3rem;
                        text-align: center;
                        width: 70%;
                        padding-top: 45px;
                        color: $yellow;

                        @media(max-width:1000px){
                            font-size: 1.0rem;
                        }
                }
            }
        }
    }

    &#section-3{

        padding-top: 220px;

        @media(max-width:1000px){
            padding-top: 60px;
        }

        div.row-1{
            display: flex;
            max-width: 1210px;
            margin: auto;
            justify-content: center;
            margin-bottom: 100px;

            h2{
                font-family: 'SomfySans-Light';
                font-size: 2.3rem;
                
                text-align: center;
                margin: auto;

                .yellow{
                    font-family: 'SomfySans-Regular';
                    color: $yellow;
                }

                @media(max-width:1000px){
                    font-size: 2rem;
                }

                @media(max-width:425px){
                    font-size: 1.5rem;
                }
            }
        }

        div.row-2{
            display: flex;

            margin: auto;
            justify-content: center;

            @media(max-width:1000px){
                flex-flow: wrap;
            }

            .col{
                width: 12.5%;
                text-align: center;

                @media(max-width:1000px){
                    width: 25%;

                    img{
                        margin-bottom: 30px;
                    }
                }

                @media(max-width:425px){
                    width: 50%;

                    img{
                        margin-bottom: 30px;
                    }
                }
            }
        }

        
    }

    &#section-6{

        padding-top: 220px;
        div.row-1{
            display: flex;
            max-width: 1210px;
            margin: auto;
            justify-content: center;

            h2{
                font-family: 'SomfySans-Light';
                font-size: 2.3rem;
                margin-bottom: 45px;
                text-align: center;

                .yellow{
                    font-family: 'SomfySans-Regular';
                    color: $yellow;
                }

                @media(max-width:1000px){
                    font-size: 2rem;
                }

                @media(max-width:425px){
                    font-size: 1.5rem;
                }
            }
        }

        div.row-2{
            display: flex;
            max-width: 1210px;
            margin: auto;

            @media(max-width:425px){
                flex-flow: wrap;
            }

            .left{

                width: 55%;

                &.image{
                    text-align: right;
                }

                @media(max-width:425px){
                    width: 100%;
                }
            }

            .right{
                left: 45%;

                @media(max-width:425px){
                    width: 100%;
                }

                &.text{
                    
                    

                    h2{
                        margin-left: 117px;
                        font-family: "SomfySans-Regular";
                        font-size: 2.2rem;
                        
                    }

                    p{
                        margin-left: 117px;
                        font-family: 'SomfySans-Medium';
                        font-size: 1.4rem;
                        color: $yellow;
                        padding-top: 50px;

                        @media(max-width:1000px){
                            font-size: 1.0rem;
                        }
                    }

                    ul{
                        margin-left: 117px;

                        li{
                            font-family: 'SomfySans-Light';
                            font-size: 1.4rem;

                            @media(max-width:1000px){
                                font-size: 1.0rem;
                            }
                        }
                    }
                }
            }
        }

    }

    &#section-14{

        background-color: #f8f7f5;
        height: 120px;
    }

}