/*  common  */

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body, table, div, input, textarea, select {font-family: 'Open Sans', sans-serif;color:#202020;font-weight:400;font-size:11pt}
sup {vertical-align:super;line-height:1em;font-size:0.6em}
sub {vertical-align:sub;line-height:1em;font-size:0.6em}

strong,b {font-weight:700}
em,i {font-style:italic}
a {color:#e02010;text-decoration:none}
a:hover {color:#d01000;text-decoration:none}
p {margin:0;line-height:1.6em}
label {cursor:pointer}
h1 {font-weight:700;font-size:20pt;margin:0 0 20px 0}
h2 {font-weight:700;font-size:18pt;margin:0 0 15px 0}

html {min-height:100%}
html,body {min-height:100%;background:#000;overflow-x:hidden;margin:0;padding:0}
body {margin:0;padding:0;text-align:center;min-height:100%;background:#000;overflow:hidden}

.page {margin:0 auto;max-width:1170px}
#head {background:url(gfx/header-bg.jpg) no-repeat center top;background-size:100% 100%}
#head .page {display:flex;flex-flow:row wrap;justify-content: space-between;align-items: center;min-height:102px;padding-top:30px;padding-bottom:40px}
.icon {font-size:30px}
#head .page>div {display:flex;flex-flow:row wrap;align-items:center;justify-content: flex-end}
#head .page div {color: #A9AF8F;}
.contactbox {padding:0 10px 0 22px;border-left:1px solid #6B7261;margin-left:30px;line-height:1.6em;display:flex;flex-flow:row wrap;align-items:center;justify-content: flex-end;text-align:left}
#head .page span, #head .page i {color: #7FA409;}
#head .page i {margin-right:20px}

#picall {width:100%;position:relative;max-height:600px;height:auto;background:#2b3113;}
#pic {position:relative;overflow:hidden;height:100%;}
#pic2 {height:0;position:relative;padding-top:30%}
#picin {top:0;left:0;right:0;bottom:0;position:absolute;max-height:600px;}
#skew {transform:skew(-25deg);width:60%;position:absolute;top:0;bottom:0;right:-13%;background:#7fa409;z-index:1}

#foty {position:absolute;;z-index:2;background:url(gfx/baner25.jpg) no-repeat center center;background-size:cover;top:0;bottom:10%;left:0;right:0}
#foty span {opacity:0;transition:all 0.5s ease-out;transform:scale(1.5) skew(25.1deg);display:inline-block;padding:10px 10px;border-radius:10px;color:#fff;background:#2B3113;font-weight:700;font-size:14pt}
#foto1 {height:100%;width:47.72%;transform:skew(-25.1deg);transition:all 0.3s linear;display:flex;align-items:center;justify-content: flex-end}
#foto1 span {margin-right:20%;margin-top:30px}
#foto1:hover {background:rgba(127,164,9,0.4)}
#foty a:hover span {opacity:1;transform:scale(1) skew(25.1deg)}
#foto2 {height:100%;position:absolute;right:-17.65%;top:0;bottom:0;width:70%;transform:skew(-25.1deg);transition:all 0.3s linear;;display:flex;align-items:center;justify-content: flex-start}
#foto2 span {margin-left:15%;margin-top:-60px}
#foto2:hover {background:rgba(127,164,9,0.4)}

#footer {background:url(gfx/footer-bg.jpg) no-repeat center top;background-size:100% 100%;padding:30px 0;flex:1 0 auto}
#description {color:#f0f0f0;line-height:1.6em;text-align:left;font-size:10pt}
#copyright {display:flex;justify-content:space-between;flex-flow:row wrap;align-items:center}
#copyright div {color:#fff;padding:5px}

@media
only screen  and (max-width:1170px) {
    .page {padding-left:20px;padding-right:20px;}
}
@media
only screen  and (max-width:990px) {
    #head .page {display:flex;flex-flow:row wrap;justify-content: center;align-items: center;}
    #head .page>div {justify-content: center}
    .contactbox {margin-top:15px;}
    #pic2 {padding-top:40%}
    #foto2 {right:-16.9%;}
    #foto1 {width:46.85%}
    #foty span {font-size:11pt}
}
@media
only screen  and (max-width:600px) {
    #head .page>div {align-items:flex-start;flex-flow:column nowrap}
    .contactbox {margin-top:15px;margin-left:10px;}
    #pic2 {padding-top:50%}
    #foto1 {width:46%}
    #foto2 {right:-16%;}
    #copyright {flex-flow:column nowrap;align-items:center}
    #foty span {font-size:10pt}
    #head .page span {font-size:10pt}
}