/* ------------------------- GLOBAL -------------------------*/

body { margin-top:20px; background-color: #d44f7e; position: fixed }

aside { float:left;position: absolute; margin:0;margin-top:-1px; padding:0; left:-6px;z-index:1 }
aside ul, aside ul li { width:100%; margin:0; padding-left: 0; padding-bottom: 0; display: block; float: left; clear: left; }
aside img { height: 50px ; float: left; clear: left; margin-bottom: -2px; border: 0;
  -webkit-transition: all ease-in .2s;
  -moz-transition: all ease-in .2s;
  -o-transition: all ease-in .2s;
    transition: all ease-in .2s;}
aside img:hover { border-right: 5px solid #000; }
aside button {width:100%;border:0; outline:0; float:left; background: none; cursor:pointer}

section { width: 100%; height: 100vh;  }
section > div > img { width:auto; height: 93.7vh; position: absolute; right: -150px; top: 0px }
section div#collaboration img {right: -250px; top: inherit; bottom: 0}

article { min-width: 250px; max-width: 350px; height:100%; top:30px; left: 160px; margin: 0; padding: 0; cursor:default; display: block; padding-left: 30px}
article header { font-size:40px; border-bottom: 3px #000 solid ; }
article ul { margin: 0; padding: 0; padding-top: 25px}
article ul li { font-size:22px; line-height:35px; padding-top: 20px; font-family: 'Josefin Slab'; display: inline-block; font-weight: 500; }
article ul li a, article ul li a:visited { color:#000; text-decoration: none; color: #2ea2cc; }
article ul li a:hover { text-decoration: underline; color: #65d6ff}

/* ----------------------------------------------------------------*/

@media all and (max-width:1366px){ 
    
section > div > img { height: 92vh; right:0px}
section div#overview img { right: -50px !important; } 
section div#collaboration img { right: -250px !important; }
    
article { width: 20vw; }
article header { font-size:30px; border-bottom: 2px #000 solid ;   }
article ul { padding-top: 0px}
article ul li{ font-size:18px; line-height:28px; padding-top: 20px;}   

}
	
/* ----------------------------------------------------------------*/

@media all and (max-width:1024px){

body { position: relative}    
    
section { width: auto; height: inherit}    
section > div > img { display: none}
    
article { width:60% ; max-width: inherit; height:auto;}    
article header { font-size:50px;  }
article ul li{ font-size:22px; line-height:30px}   

}
	
/* ----------------------------------------------------------------*/

@media all and (max-width:1023px){
    
body { min-width: inherit}

}

/* ----------------------------------------------------------------*/

@media all and (max-width:700px){

body, html { width: 100%; height: 100%; min-width: inherit; padding: 0}
    
.main { clear: both }    
    
aside { position: relative; margin: 0 auto; width:100%; left:0; text-align: center}
aside ul, aside ul li { clear: none; }
aside ul li { width: 50%;}
aside img { width:100%; max-width: 300px; height: auto; float: none; clear: none; }  
    
section { height: auto;  }     
section > div > img { display: none}
        
article { width: 100%; height:auto; left: 0; margin:35px 0 100px 0; padding: 0; position: relative; overflow: hidden}
article header { font-size:40px}
article header, article hgroup  { margin: 20px }

}