html {
background-color: #fff;
font-family: 'Exo';  
}

body {
max-width: 1512px;  
margin: 0px auto;  
background-color: #EEFCFF;
color: #201B21;  
text-align: center;  
}

header {
background: url(/picsporner-logo.png) no-repeat center 0 #CEEBF1;
border-top: 1px solid #CEEBF1;
margin-top: 0;
padding: 0 10px 10px 10px;  
text-align: center;
font-size: 13px;  
}

a {
color: #201B21;
text-decoration: none;
}

h1 {
font-size: 16px;
margin: 0;
}

h1 a {
display: block;
margin: 3px auto 2px;
width: 240px;
padding-top: 42px;
text-transform: uppercase;  
}

h2::first-letter {
text-transform: uppercase;
}

p {
margin: 0;  
}

ul {
padding: 0;
background: #ccebf1;
font-size: 16px;  
}

ul li {
display: inline-block;
margin: 2px; 
padding: 10px;  
}

ul.page-list li:hover, ul.category-list li:hover {
background-color: #EEFCFF;
}

ul.topmenu {
margin: 10px 0 0 0;
text-align: center;  
}

ul.topmenu li {
padding: 5px;
}

ul.topmenu li a {
font-weight: bold;
}

ul.topmenu li.extlink a {
color: #ff0000;  
}

ul.category-list {
padding-top: 2px; 
columns: 200px auto;
-moz-columns: 200px auto;
-webkit-columns: 200px auto;
}

ul.category-list li {
display: block;
text-align: left;  
}

section.gallery {
max-width:1508px;
margin: 0 2px 0 1px;  
  padding: 0;
    column-count: auto;
-moz-column-count: auto;
-webkit-column-count: auto;
        column-width: 300px;
    -moz-column-width: 300px;
  -webkit-column-width: 300px;
   column-gap: 2px;
-moz-column-gap: 2px;
-webkit-column-gap: 2px;
line-height: 0;
}

section.text {
padding: 0 10px 50px;  
text-align: left;  
}

@media (max-width: 1520px) {
body {
  max-width: 1210px;}
section.gallery {
max-width:1206px;
}
}

@media (max-width: 1210px) {
body {
  max-width: 908px;}
section.gallery {
max-width:904px;
}
}

@media (max-width: 908px) {
body {
  max-width: 606px;}
section.gallery {
max-width:602px;
}
}

@media (max-width: 606px) {
body {
  max-width: 606px;}
section.gallery {
max-width:602px;
}
}

section.gallery div {
position: relative;
 display: inline-block;
 width: 300px;
 height: 300px;
 overflow: hidden; 
 margin: 1px;
}

section.gallery div img {
width: 300px;
margin: 0;
padding: 0;  
}

section.gallery div img:hover {
width: 298px;
height: 298px;
border: 1px solid #EEFCFF;  
}

section.gallery div span {
position: absolute;
display: block;
background: #fff;
height: 14px;
top: 0px;
padding: 14px 8px 0px;
opacity:0.7;  
}

section.gallery div.adv-insde img {
width: 300px; 
margin: 10px auto;
}



section.gallery div.ad300 {
width: 300px;
height: 300px;
background: #ccebf1;  
}

section.gallery div.ad300 div.ad300in {
margin: 25px 0;  
}

section.gallery div.ad300 div.ad300in img:hover {
  width: 300px;
  height: 250px;
}


section.banner-adv, section.text-adv {
 clear: both;
  background-color: #25C7EE;
  font-size: 2em;
  font-weight: bold;
  margin: 1em auto;
}

section.banner-adv {
padding: 0.5em 0 0.1em;
}

section.text-adv a:hover {
color: #f2f2f2;
}


section.page {
max-width:970px;
min-height: 1000px;  
background: #fff;
padding: 20px 10px;  
margin: 0;
}

section.page p {
font-size: 0.8em;  
font-weight: 300;
}


section.banner-adv, section.text-adv {
 clear: both;
  background-color: #016ABC;
  font-size: 2em;
  font-weight: bold;
  margin: 1em auto;
}

section.banner-adv {
padding: 0.5em 0 0.1em;
}

section.text-adv a {
color: #fff;
}

section.text-adv a:hover {
color: #ECF6FF;
}



footer {
font: 0.7em Arial;
}

footer .footer-text {
background: #ccebf1;
padding: 1em;
margin-top: 1.5em;  
}

@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 400;
  src: local('Alegreya'), local('Alegreya-Regular'), url(http://fonts.gstatic.com/s/alegreya/v7/4vRXIs1BEbKX6mQ7lGu1I_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 700;
  src: local('Alegreya Bold'), local('Alegreya-Bold'), url(http://fonts.gstatic.com/s/alegreya/v7/F5BSMOSf_T8GT2wiqqpj3Y4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
}