/* FONTS */
@font-face              {font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../fonts/OpenSans-Regular.ttf') format('truetype');}
@font-face              {font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../fonts/OpenSans-SemiBold.ttf') format('truetype');}
@font-face              {font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../fonts/OpenSans-Bold.ttf') format('truetype');}

/* BASIC */
* 						{margin: 0px; padding: 0px; border: none; box-sizing: border-box;}
html, body 				{width: 100%; height: 100%; min-width: 245px; font-family: 'Open Sans'; font-size: 100%; background-color: #333; -webkit-text-size-adjust: none;}
ul, li 					{list-style: none;}
h1                      {font-size: 1.625rem; font-weight: 700; color: #333; margin-top: 40px; margin-bottom: 40px;}
h2                      {font-size: 1.250rem; font-weight: 700; color: #333; margin-top: 20px; margin-bottom: 20px;}
h3                      {font-size: 1.000rem; font-weight: 700; color: #333; margin-top: 20px; margin-bottom: 20px;}
h1:first-of-type        {margin-top: 0px;}

/* NOSCRIPT */
#noscript               {position: fixed; width: 100%; top: 0px; padding: 20px; background: #000; font-size: 1rem; font-weight: 700; color: #FFF; text-align: center; z-index: 100;}

/**
header                  {position: absolute; width: 100%; height: 0px; top: 50%; text-align: center; z-index: 15; transition: 0.2s ease-in-out;}
#logo                   {display: inline-block; padding: 50px; margin: 0px auto; box-sizing: border-box; background-image: radial-gradient(farthest-corner at 0px 0px, RGBA(0,200,200,0.75) 0%, RGBA(0,0,255,0.25) 50%, RGBA(150,0,50,0.75) 100%);}
**/

header                  {position: fixed; top: 0px; width: 100%; z-index: 15; transition: opacity 0.5s ease-in-out;}
#logo                   {position: absolute; top: 0px; left: 0px; padding: 0px 20px; border-bottom-right-radius: 50px; background: RGBA(0,0,0,0.6);}
#hide                   {position: absolute; top: 15px; left: 15px;}
#hide a                 {display: block; cursor: pointer;}
#hide img               {width: 15px; height: 15px;}
header p                {margin-top: -50px;}
header p a              {cursor: pointer;}
header p img            {width: 20px; height: 20px;}
#share                  {position: fixed; top: 0px; right: 0px; padding: 15px 20px 15px 25px; background: RGBA(0,0,0,0.6); z-index: 15; font-size: 0.875rem; font-weight: 600; color: #FFF; border-bottom-left-radius: 20px; -moz-border-bottom-left-radius: 20px; -webkit-border-bottom-left-radius: 20px;}
#share p:last-child     {margin-top: -5px;}

/* OVERLAY */
#overlay                {display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; line-height: 100vh; background: RGBA(0,0,0,0.2); text-align: center; z-index: 50;}
#overlay > div          {position: relative; display: inline-block; max-width: 1200px; max-height: 100%; line-height: normal; background: #FFF; vertical-align: middle; overflow-y: scroll;}
.overlay                {display: none;}
#close_bttn             {position: absolute; right: 10px; top: 10px; z-index: 55;}
#close_bttn a           {display: block; width: 40px; height: 40px; cursor: pointer;}
#close_bttn img         {width: 40px; height: 40px; padding: 10px;}

/* SECTION */
section                 {position: relative; padding: 80px; text-align: left;}
section ul              {margin-bottom: 10px; font-size: 0.875rem; font-weight: 400;}
section ul li           {line-height: 25px; list-style: disc inside;}
section p               {line-height: 25px; margin-bottom: 10px; font-size: 0.875rem; font-weight: 400; color: #333;}
section p:last-of-type  {margin-bottom: 0px;}

/* MAIN */
#main                   {position: relative; width: 100%; max-width: 100%; box-shadow: 0px 0px 20px #000; background-color: #666; z-index: 5;}
#images ul              {width: 100%; min-width: 245px;}
#images ul li           {position: relative; float: left;}
#images ul li img       {width: 100%; height 100%; margin-bottom: -4px; min-width: 245px; min-height: 164px; max-width: 485px; max-height: 323px;}
#images ul li div       {visibility: hidden; position: absolute; bottom: 0px; width: 100%; padding: 15px 0px; text-align: center; background: RGBA(0,0,0,0.75); z-index: 10;}
#images ul li:hover div {visibility: visible;}
#images p               {line-height: 20px; font-size: 0.75rem; font-weight: 400; color: #FFF;}
#images p.title         {font-size: 0.875rem;; font-weight: 600; color: #FFF;}
#images p.diffus        {font-size: 0.75rem; font-weight: 400; color: #CCC;}
#images p span          {padding: 0px 4px; margin: 0px 2px; background: #CCC; font-size: 0.625rem; color: #333; border-radius: 1px;}

/* FOOTER */
footer                  {position: relative; width: 100%; padding: 40px 0px; font-size: 0.875rem; font-weight: 400; color: #999; text-align: center;}
footer a                {cursor: pointer;}
footer > p              {line-height: 20px; margin: 0px 40px; text-align: center;}
footer img              {width: 200px; margin-bottom: 40px;}

/* LINKS */
a:link                  {color: #333; text-decoration: underline;}
a:active                {color: #333; text-decoration: underline;}
a:visited               {color: #333; text-decoration: underline;}
a:hover                 {color: #333; text-decoration: underline;}

a.clear:link            {color: #FFF; text-decoration: none;}
a.clear:active          {color: #FFF; text-decoration: none;}
a.clear:visited         {color: #FFF; text-decoration: none;}
a.clear:hover           {color: #FFF; text-decoration: underline;}

footer a:link           {color: #999; text-decoration: none;}
footer a:active         {color: #999; text-decoration: none;}
footer a:visited        {color: #999; text-decoration: none;}
footer a:hover          {color: #CCC; text-decoration: none;}


@media screen and (min-width: 245px) and (max-width: 485px) {
    html, body          {font-size: 84%;}
    #logo img           {width: 150px; height: 150px;}
    #images ul li       {width: 100%;}
}

@media screen and (min-width: 486px) and (max-width: 970px) {
    html, body          {font-size: 87%;}
    #logo img           {width: 150px; height: 150px;}
    #images ul li       {width: calc(100% / 2);}
}

@media screen and (min-width: 971px) and (max-width: 1455px) {
    html, body          {font-size: 90%;}
    #logo img           {width: 200px; height: 200px;}
    #images ul li       {width: calc(100% / 3);}
}

@media screen and (min-width: 1456px) and (max-width: 1940px) {
    html, body          {font-size: 92%;}
    #logo img           {width: 200px; height: 200px;}
    #images ul li       {width: calc(100% / 4);}
}

@media screen and (min-width: 1941px) and (max-width: 2425px) {
    html, body          {font-size: 94%;}
    #logo img           {width: 200px; height: 200px;}
    #images ul li       {width: calc(100% / 5);}
}

@media screen and (min-width: 2426px) and (max-width: 2910px){
    html, body          {font-size: 96%;}
    #logo img           {width: 200px; height: 200px;}
    #images ul li       {width: calc(100% / 6);}
}

@media screen and (min-width: 2911px) and (max-width: 3395px){
    html, body          {font-size: 98%;}
    #logo img           {width: 200px; height: 200px;}
    #images ul li       {width: calc(100% / 7);}
}

@media screen and (min-width: 3396px) and (max-width: 3880px){
    html, body          {font-size: 100%;}
    #logo img           {width: 200px; height: 200px;}
    #images ul li       {width: calc(100% / 8);}
}