html,
body {
    margin: 0;
    padding: 0;
    font-size: 22px;
    line-height: 1.3;
    font-family: 'akzidenz-grotesk_next_regulRg';
}

.spacer {
    position: relative;
    width: 100%;
    height: 100px;
    z-index: 2;
}

 .fixed-footer {
          font-size: 12px;
     background:white;
        width: 100%;
        position: fixed;        
        padding: 15px;
          text-align: center;
        color: #000;
            z-index:999;
    }
    .fixed-header{
        top: 0;
    }
    .fixed-footer{
        bottom: 0;
    }    

/* title */

h1 {
    font-size: 20px;
    position:fixed;
    font-family: 'akzidenz-grotesk_next_regulRg';
    margin-left: 40px;
    margin-top: 40px;
    color: black;
    z-index: 999;
}

h1:hover {  -moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
    color:black;
}

.title {font-size:18px;}

h2 {
    font-size: 50px;
     line-height:1;
    font-family: 'akzidenz-grotesk_next_regulRg';
}


/* NAV */

ul {
    list-style-type: none;
    margin-top: -30px;
    padding: 0px;
    position: relative;
    z-index: 100;
}


/*Create a horizontal list with spacing*/

li {
    display: block;
    margin-top:40px;
    float: right;
    margin-right: 40px;
}

/*Style for menu links*/

li a {
    display: block;
    text-align: left;
    font-family: 'akzidenz-grotesk_next_regulRg';
    -webkit-font-smoothing: antialiased;
    font-size: 20px;
    color: blue;
    text-decoration: none;
}

li:hover a {
    text-decoration: none;
}

/*Prevent text wrapping*/

li ul li {
    width: auto;
    min-width: 100px;
}


/* HEADER / BODY */

#A1-main {
    position: relative;
    /** Main div to adapt all the element to the body**/
    width: 100%;    
    height: 100%;
    z-index: 1;
}


a {
    color:black;
    transition: all 0s ease-in-out;
    letter-spacing: 0.5px;
    text-decoration: none;
    left: 0px;
    padding-bottom: 0px;
        font-family: 'akzidenz-grotesk_next_regulRg';

}
a:link {
text-decoration:none;}

a.dark:link, a.dark:active a.dark {color:blue;
text-decoration:underline;}

a:hover {
    transition: all 0s ease-in-out;
    color: blue;
    letter-spacing: 0.5px;
    text-decoration: underline;
}

.flip{transition: all 0s ease-in-out; }

.flip:hover {  -moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
    color:black;
}

.active { 
    -moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
    color:black;
}


/* PART 3 PORTFOLIO ARTICLES 3 GRID LEFT/RIGHT/MID */

#wrapper-A3 {
    width:92%;
    height:auto;
    position: relative;
    z-index: 3;
    left: 4%;
    right:4%;
    padding:0;
    padding-top: 100px;
    padding-bottom: 90px;
    overflow: hidden;
}

#A3-right,
#A3-left,
#A3-middle {
   
    float: left;
    width: 30%;
    height: auto;
    z-index: 1;
}

#A3-right {
    margin-right: 0;
}

#A3-left {
    padding-right: 4%;
}

#A3-middle {
    left: 30%;
    padding-right: 4%;
}


/* ARTICLES 1-9 EXAMPLE */

#wrapper-post1,
#wrapper-post4,
#wrapper-post7 {
    position: relative;
    height:auto;
    width: 100%;
    padding-top: 0px;
        padding-bottom: 45px;
height: auto;
}

#A3-left-title-1,
#A3-left-title-2,
#A3-left-title-3,
#A3-middle-title-4,
#A3-middle-title-5,
#A3-middle-title-6,
#A3-right-title-7,
#A3-right-title-8,
#A3-right-title-9,
#A3-right-title-10{
    position: relative;
    left: 1px;
    text-align: left;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    font-family: 'akzidenz-grotesk_next_regulRg';
    top: 50px;
    z-index: 999;
}
#wrapper-post2,
#wrapper-post3,
#wrapper-post5,
#wrapper-post6,
#wrapper-post8,
#wrapper-post9,
#wrapper-post10{
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 20px;
}
#A3-left-image-1,
#A3-left-image-2,
#A3-left-image-3,
#A3-middle-image-4,
#A3-middle-image-5,
#A3-middle-image-6,
#A3-right-image-7,
#A3-right-image-8,
#A3-right-image-9,
#A3-right-image-10
{
    position: relative;
    width: 100%;
    z-index: 1;
    top: 50px;
    left: 0;
    overflow: hidden;
}

#A3-left-image-2 img,
#A3-left-image-3 img,
#A3-middle-image-4 img,
#A3-middle-image-5 img,
#A3-middle-image-6 img,
#A3-right-image-8 img,
#A3-right-image-9 img,
#A3-right-image-10 img{
width: 100%;
    margin-bottom:0pt;
}


        img {
            width: 100%;
            height: auto;
        }
        
        video {
            width: 100%;
            height: auto;
        }

 


/* Reponsive */

@media (max-width: 1080px) {
    #wrapper-A3,
    #wrapper-A5,
    #wrapper-A5b,
    #line-A7 {
        width: 92%;
        padding-top: 50px;
       left: 50%;
right:0%
    }
    
 body
{font-size:15px;}
    
    #A3-left,
    #A3-middle,
    #A3-right,
    #A5-left,
    #A5-middle,
    #A5-right,
    #A5b-left,
    #A5b-middle,
    #A5b-right {
        float: none;
        position: relative;
        width: 90%;
        height: auto;
        left: 0;
        padding-right: none;
        padding-top: 20px;
        padding-bottom: 20px;}
  
    #spacer {
        width: 100%;
        height: 80px;
        margin-bottom: 0px;
    }
  
    /*Make all menu links full width*/
    ul li,
    li {
        width: 100%;
        width: auto;
    }

h1 {font-size:20px;
    }
}




@media (max-width: 768px) {
    #wrapper-A3,
    #wrapper-A5,
    #wrapper-A5b,
    #line-A7 {
     width: 600px;
       margin-left: -300px;
padding-top: 50px;
       left: 50%;
right:0%
    }
    
 body
{font-size:15px;}
    
    #A3-left,
    #A3-middle,
    #A3-right,
    #A5-left,
    #A5-middle,
    #A5-right,
    #A5b-left,
    #A5b-middle,
    #A5b-right {
        float: none;
        position: relative;
        width: 90%;
        height: auto;
        left: 0;
        padding-right: none;
        padding-top: 20px;
        padding-bottom: 20px;}
  
    #spacer {
        width: 100%;
        height: 80px;
        margin-bottom: 0px;
    }
  
    
        /*Make all menu links full width*/
    ul li,
    li {
        position:relative;
        padding:1px;
        padding-top:40px;
                padding-bottom:5px;

        margin:8px;
        top:40px;
        left:25px;
        display:inline-block;
        width:auto;
        float:left;
    }
    
    li a {
    display: inline-block;
    text-align: left;
    font-family: 'akzidenz-grotesk_next_regulRg';
    -webkit-font-smoothing: antialiased;
    font-size: 18px;
    color: blue;
    text-decoration: none;
}

    
    
    

h1 {font-size:20px;
    margin-left: 30px;
       padding-top:-20px;
    position:fixed;
    font-family: 'akzidenz-grotesk_next_regulRg';
           z-index: 999;
    }
    }
    
        /*Mobile*/

@media (max-width: 650px) {
    
    
    
    body {
    font-size:18px;
    line-height: 1.2;
    }
    
    #wrapper-A3,
    #wrapper-A5,
    #wrapper-A5b,
      #line-A7{
        width: 380px;
        margin-left: -180px;
        padding-top: 40px;
        padding-bottom: 5px;
    left: 50%;
     right:0%;


    }
    #A7 {
        display: none;
    }
    
    .fixed-footer {
          font-size: 8px;
    }
    #A3-right,
#A3-left,
#A3-middle {
    width: 95%;
    height: auto;
    z-index: 1;
}
     /*Make all menu links full width*/
    ul li,
    li {
        position:relative;
        padding:1px;
        padding-top:40px;
                padding-bottom:5px;

        margin:4px;
        top:40px;
        left:25px;
        display:inline-block;
        width:auto;
        float:left;
    }
    
    li a {
    display: inline-block;
    text-align: left;
    font-family: 'akzidenz-grotesk_next_regulRg';
    -webkit-font-smoothing: antialiased;
    font-size: 12px;
    color: blue;
    text-decoration: none;
}

    

   h1 {font-size:20px;
                margin-left: 30px;
       padding-top:-20px;
    position:fixed;
    font-family: 'akzidenz-grotesk_next_regulRg';
           z-index: 999;
    }
}