/*****Reset Compressed*****/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt, dd, ol, ul, li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size: 100%;font-family:inherit;vertical-align:baseline;} :focus{outline: 0;} ol,ul{list-style:none;} table {border-collapse: collapse;border-spacing:0;} caption,th,td{text-align:left;font-weight:normal;} blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes: "" "";}

/*****General Markup*****/
body{ line-height:1;
      color:black;
      background:white;
      font-size: 11px;
      font-family: arial, helvetica, sans-serif }

a:link, a:visited, a:active {
  text-decoration: underline ;
  color: black}

a:hover {
  text-decoration: underline ;
  color: #555555 }

img { font-size: 16px ; font-weight: bold; letter-spacing: -0.03em; color: #777 ; background: #f1f1f1 ; line-height: 50px ; text-align: center }

p { line-height: 150% }

hr { color: #e5e5e5 ; height: 1px ; background-color: #e5e5e5 ; border: solid 0px #e5e5e5 ; margin: 0 }

h1 { font-size: 200% ; letter-spacing: -0.03em }
h2 { font-size: 160% ; letter-spacing: -0.03em }
h3 { font-size: 130% ; letter-spacing: -0.03em }

#graytop { height: 40px ; background: #ccc ; width: 100% }
#graytop h2 { font: italic 16px "Minion Pro", "Times New Roman", serif ; color: #888 ; padding: 10px ; letter-spacing: 0.05em ; float: left; }

#namegroup { float: left ; height: 130px ; width: 450px ; margin: 35px }
#namegroup img { float: left ; margin: 20px  }
#namegroup h1 { font: 100 50px "Minion Pro", "Times New Roman", serif ; color: #111 }
#namegroup h2 { font: italic 16px "Minion Pro", "Times New Roman", serif ; color: #7f7f7f ; margin: 16px 0 0 0 }

#menu { float: left ; height: 130px ; width: 100px ; margin: 40px 0 0 0 }
#menu a { display: block ; font: italic 13px "Minion Pro", "Times New Roman", serif ; color: #7f7f7f ; margin: 5px ; text-decoration: none ; border-bottom: solid 1px #ccc }
#menu a:hover { color: black ; border-bottom-color: #444 }

#contact { float: left ; height: 130px ; width: 250px ; margin: 40px 0 0 80px }
#contact h3 { font: italic 11px "Minion Pro", "Times New Roman", serif ; color: #888 ; margin: 15px 0 ; letter-spacing: 0.05em ; line-height: 10px }
#contact p { line-height: 14px ; color: #444 }


#imggroup { margin: 35px 20px 50px 15px }
#imggroup img { float: left ; margin: 22px }

.cat { height: 340px ; width: 220px ; float: left ; margin: 22px ; background: #eee ; position: relative }
.cat h2 { display: block ; margin: 40px 30px 0 30px ; font: italic 36px "Minion Pro", "Times New Roman", serif ; color: #999 ; line-height: 30px }
.cat h3 { display: block ; margin: 10px 30px 0 30px ; font: italic 20px "Minion Pro", "Times New Roman", serif ; color: #bbb ; line-height: 17px}
.cat span { font-size: 70px ; color: #ddd ; cursor: default ; display: block ; margin: 0 ; position: absolute ; bottom: 10px ; left: 30px  }

#footer { height: 200px ; margin: 35px }

.clear { clear: both }
.lic { padding: 20px ; background: #f7f7f7 ; width: 200px ; float: right }
.dis { cursor: default ; color: #eee !important ; border-bottom-color: #eee !important }
.fb { float: right ; width: 400px ; margin: 10px 10px 0 0 }



.announce {

text-align: center;
margin: 40px 0;
font-size: 1.2em;

}

.announce h2 {
    margin-bottom: 30px;
}

.announce strong {
    font-weight: bold
}

.hl { background: yellow;}


.subscribe { float: right ; margin-right: 15px;}

.subscribe .mc-field-group { display: inline-block; }
.subscribe input { display: inline-block;}

.subscribe input[type=email],
.subscribe input[type=submit]
 {
	font-size: 18px;
	padding: 4px 8px;
	border: solid 1px #444;
	margin: 4px 0;
}

.subscribe input[type=submit] {
	background: #333;
	color: white;
}

.subscribe label {
	font-size: 14px;
	font-weight: bold;
	margin-right: 15px;
}

.subscribe .mce-response {
	display: inline-block;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: bold;
	margin: 4px 0;
	border-radius: 3px;
}
.subscribe .mce-success { background: #3aa53a; color: white; }
.subscribe .mce-error   { background: #c94747; color: white; }


/*****Mobile / small screens*****/
/* Surgical fixes only — lets fixed widths relax on narrow viewports.
   Desktop layout (>=720px) is unchanged. */

@media (max-width: 720px) {

  /* Top gray bar: let it grow to fit the stacked subscribe form */
  #graytop {
    height: auto;
    padding: 8px 0;
    overflow: hidden;
  }
  #graytop h2 {
    float: none;
    display: block;
    padding: 6px 15px;
  }

  /* Subscribe form: stack label + email + button full-width */
  .subscribe {
    float: none;
    margin: 0 15px 6px 15px;
  }
  .subscribe .mc-field-group,
  .subscribe input {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .subscribe label {
    display: block;
    margin: 6px 0 4px 0;
  }
  .subscribe input[type=email] {
    margin: 0 0 6px 0;
  }
  .subscribe input[type=submit] {
    width: auto;
    padding: 8px 16px;
    margin: 0;
  }
  .subscribe .mce-response {
    display: block;
    margin: 6px 0;
  }

  /* Name block: drop the 450px width, re-center, keep layout readable */
  #namegroup {
    float: none;
    width: auto;
    height: auto;
    margin: 20px 15px;
    overflow: hidden; /* contain the floated portrait */
  }
  #namegroup img {
    float: left;
    margin: 0 15px 10px 0;
  }
  #namegroup h1 {
    font-size: 40px;
    line-height: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  /* The inline style on the second <h1> ("Вениамин Николаевич") sets
     font-size:27px and a too-tight line-height that clips — relax it. */
  #namegroup h1[style] {
    font-size: 22px !important;
    line-height: 1.1 !important;
    margin: 4px 0 0 0 !important;
  }
  #namegroup h2 {
    margin-top: 10px;
    clear: left;
  }

  /* Menu + Contact: stack full-width, no fixed heights */
  #menu, #contact {
    float: none;
    width: auto;
    height: auto;
    margin: 15px;
  }
  #menu a {
    margin: 0 0 6px 0;
    padding-bottom: 4px;
  }
  #contact p { line-height: 1.4 }
  #contact h3 { line-height: 1.4 }

  /* Gallery: single-column, full-width, preserve aspect ratios */
  #imggroup {
    margin: 20px 15px 30px 15px;
  }
  #imggroup img,
  #imggroup a {
    float: none;
    display: block;
    margin: 12px auto;
  }
  #imggroup img {
    width: 100%;
    height: auto;
    max-width: 420px; /* don't blow illustrations up past their native size */
  }

  /* Category cards: full-width, auto height so text doesn't clip */
  .cat {
    float: none;
    width: auto;
    height: auto;
    min-height: 160px;
    margin: 20px 0;
    padding: 24px 20px 60px 20px;
    box-sizing: border-box;
    position: relative;
  }
  .cat h2, .cat h3 { margin-left: 0; margin-right: 0 }
  .cat h2 { margin-top: 0; line-height: 1.1 }
  .cat h3 { line-height: 1.2 }
  .cat span {
    bottom: 12px;
    left: 20px;
    font-size: 50px;
    line-height: 1;
  }

  /* Footer: let floated license + facebook blocks stack cleanly */
  #footer {
    height: auto;
    margin: 20px 15px;
  }
  .lic, .fb {
    float: none;
    width: auto;
    margin: 10px 0;
  }
  .lic { padding: 15px }
}