@font-face {
	font-family: 'Conv_GothaProReg';
	src: url('fonts/GothaProReg.eot');
	src: local('☺'), url('fonts/GothaProReg.woff') format('woff'), url('fonts/GothaProReg.ttf') format('truetype'), url('fonts/GothaProReg.svg') format('svg');
	font-weight: normal;
	font-style: normal;
    font-display: swap;
}
@font-face {
	font-family: 'Conv_GothaProBol';
	src: url('fonts/GothaProBol.eot');
	src: local('☺'), url('fonts/GothaProBol.woff') format('woff'), url('fonts/GothaProBol.ttf') format('truetype'), url('fonts/GothaProBol.svg') format('svg');
	font-weight: normal;
	font-style: normal;
    font-display: swap;
}
@font-face {
	font-family: 'Conv_Gabriela-Regular';
	src: url('fonts/Gabriela-Regular.eot');
	src: local('☺'), url('fonts/Gabriela-Regular.woff') format('woff'), url('fonts/Gabriela-Regular.ttf') format('truetype'), url('fonts/Gabriela-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
    font-display: swap;
}
*{
    box-sizing: border-box;
}
html, body{
    width:100%;
    height:100%;
}
body{
    margin:0;
    font: 1em 'Conv_GothaProReg',Helvetica Neue,Arial,sans-serif;
    color:#27282d;
    background:#fff;
    line-height: 1.4;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fl{float:left;}
.ar{text-align:right;}
.fr{float:right;}
.cl{clear:both}
.ac{text-align:center;}

form{margin:0;padding:0;}
input, select, textarea, button{outline:none;font: 1em 'Conv_GothaProReg',Helvetica Neue,Arial,sans-serif;color:#27282d;}
textarea{resize: vertical;overflow: auto;}
strong, b, .b{font-weight:normal;font-family: 'Conv_GothaProBol'}

a{outline:none;text-decoration:underline;color:#27282d;cursor:pointer;}
a:hover{text-decoration:none;}
p, div.par{margin:20px 0}

img{border:0;max-width:100%;max-height:100%;}
img[align=left]{margin:2px 10px 10px 0;}
img[align=right]{margin:2px 0 10px 10px;}

header, section, aside, footer, article, time, nav{display:block;}
section, article, header, nav, aside{max-width:1920px;margin:0 auto;}

.title{
    margin:0 auto;
    padding:0 50px;
    max-width:1300px;
}
.rel{position: relative;}
.clear:after, .title:after, nav ul:after, .leftbar:after{
    content:'';
    display:block;
    clear:both;
}

/*
#pagepiling{height:100%;}
#pagepiling > div{height: inherit;}*/
.rel{
    position: relative;
}
.flex{
    justify-content: space-between;
    display:flex;
    flex-wrap:wrap;
    flex-direction:row-reverse;
}
.avatar{
    width:42%;
    max-width:620px;
    border-right:1px solid #fff;
}
.information{
    width:58%;
    
}
.information:before{
    content:attr(data-label);
    background:#fff;
    text-transform: uppercase;
    left:-80px;
    top:80px;
    position: absolute;
    display: inline-block;
    padding:1px;
    line-height:1;
    z-index:2;
    letter-spacing:2px;
    font-family: 'Conv_GothaProBol';
}
.contik{
    background:#fbefdf;
    margin:25px 65px;
    
}
.pp-tableCell .contik{
    height:calc(100% - 50px)
}
.lang{
    position: absolute;
    z-index:100;
    top:25px;
    width:42px;
    right:65px;
    font-size:13px;
}
.lang a{
    display: block;
    margin-bottom:1px;
    background:#fff;
    line-height:42px;
    height:42px;
    width:100%;
    text-decoration:none;
    color:#27282d;
    text-transform: lowercase;
    text-align:center;
}
.lang a:hover{
    background:#937e5f;
    color:#fff;
}



.bars{
    position: fixed;
    left:17px;
    top:28px;
    z-index:255;
    cursor:pointer;
    text-align: center;
    font-size:12px;
}

.bars > div{
    position: relative;
    height:16px;
    width:100%;
    margin-bottom: 5px;
    border-bottom:2px solid #27282d;
}
.bars > div:before, .bars > div:after{
    content:"";
    left:0;
    width: inherit;
    height:2px;
    background:#27282d;
    display:block;
    transition:0.3s;
    position: absolute;
    z-index:1;
}
.bars > div:before{top:0;}
.bars > div:after{top:7px;}
.bars > div#active{border-bottom:0;}
.bars > div#active:before{
    top: 7px;
    transform: rotate(45deg);
}
.bars > div#active:after{
    transform: rotate(-45deg);
}
.bars > div.black{
    border-color:#27282d;
}
.bars > div.black:before, .bars > div.black:after{
    background:#27282d;
}

.avatar{
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain !important;
}
.pic1{background-image:url(im/pic1.jpg);}
.pic2{background-image:url(im/pic2.jpg);}
.pic3{background-image:url(im/pic3.jpg);}

.info{
    padding:105px 65px 65px;
    font-family: 'Conv_Gabriela-Regular';
    letter-spacing:1px;
}
.head, h1, h2, h3{
    font-size:500%;
    line-height:1.05;
    display:block;
    margin:50px 0;
    font-weight: normal;
}
h2{font-size:200%;margin:20px 0;}
h3{font-size:140%;margin:20px 0;}

.w48{width:48.5%}
.w100{width:100%}
fieldset{
    margin:10px 0;
    border:1px solid #b9a489;
}
fieldset legend{
    font-family: 'Conv_GothaProBol';
}
fieldset input, fieldset textarea{
    border:0;
    background: transparent;
    width:100%;
}

.btn{
    cursor:pointer;
    background:#fff;
    text-decoration:none;
    position: relative;
    font-family: 'Conv_GothaProReg';
    text-transform: uppercase;
    letter-spacing:1px;
    border:1px solid #27282d;
    color:#27282d;
    padding:15px 50px 15px 20px;
    transition:0.2s;
}
.btn:after{
    content:'';
    width:52px;
    height:9px;
    background: url(files/arrow.gif) right no-repeat;
    display: block;
    position: absolute;
    top:50%;
    margin-top:-4px;
    right:-18px;
    transition:0.2s;
}
.btn:hover{
    background: transparent;
}
.btn:hover::after{
    right:-25px;
}
.information em{
    color:#937e5f;
}
@keyframes tossing {
  0% {transform: translate(0,-20px);opacity: 1;}
  50% {transform: translate(0,0); opacity: 1; }   
  100% {transform: translate(0,-20px);opacity: 1;}
}
@keyframes tossing22 {
  0% {transform: scale(1.5);}
  50% {transform: scale(1);}   
  100% {transform: scale(1.5);}
}
/*
.mouse{
    position: absolute;
    bottom:50px;
    right:54px;
    width:22px;
    height:30px;
    z-index:264;
    background:url(files/mouse.png) center no-repeat;
    animation-name: tossing;-webkit-animation-name: tossing;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;
}*/
.dev{
    text-align:right;
    padding:15px 0;
    font-size:12px;
    margin-right:65px;
}
.dev a{
    color:#9b9da2;
    text-decoration:none;
    display: inline-block;
    padding:5px 0 5px 35px;
    background:url(files/art.gif) left center no-repeat;
    text-decoration:none;
}
.dev a:hover{
    color:#000;
}
.phone{
    left:23px;
    bottom:35px;
    position: fixed;
    z-index:30;
    width:19px;
    height:19px;
    animation-name: tossing22;-webkit-animation-name: tossing22;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;
}
.phone a{
    width: inherit;
    height: inherit;
    display: block;
    text-decoration:none;
    background:url(files/phone.png) center no-repeat;
    background-size: contain !important;
}
nav{
    display:none;
    left:50%;
    top:50%;
    position: fixed;
    z-index:255;
    right:50%;
    bottom:50%;
    background:#e8e8e8 url(files/1.gif) right;
    transition:0.2s;
    overflow:hidden;
}
nav.act{
    left:65px;
    right:65px;
    top:25px;
    bottom:25px;
    display:block;
}
nav > ul{
    margin:0 0 0 43%;
    padding:100px 0 0 0;
}
nav ul li{
    margin:30px 0;    
    padding:0;
    list-style:none;
}
nav > ul > li{
    width:100%;
    display:block;
    text-align:left;
    text-transform: uppercase;
    margin:25px 0;
}
nav > ul > li a{
    color:#27282d;
    text-decoration:none;
}
nav > ul > li > a, nav > ul > li > span{
    font-size:115%;
}
nav > ul > li > ul{
    margin-bottom:30px;
    padding:0;
    margin-top:20px;
}
nav > ul > li > ul > li{
    font-style: italic;
    font-family: 'Conv_Gabriela-Regular';
    margin:10px 0;
    text-transform: none;
}
nav > ul > li > ul > li a:before{
    height:1px;
    vertical-align: middle;
    width:30px;
    background:#27282d;
    content:'';
    display: inline-block;
    margin-right:10px;
}
nav > ul > li a.active{
    background:#fff;
    color:#beab92;
}
blockquote p{margin:0;}
blockquote{
    font-size:120%;
    margin:20px 0;
    padding:0;
}
.info strong{
    color:#b9a489;
}
.social{
    bottom:58px;
    left:20px;
    width:25px;
    position: fixed;
    z-index:4;
}
.social a{
    width:25px;
    height:25px;
    background-size: contain !important;
    display:block;
    margin-bottom:35px;
    text-decoration:none;
}
a.facebook{background:url(files/facebook.png) center no-repeat}
a.instagram{background:url(files/instagram.png) center no-repeat}

@media screen and (max-height: 800px) {
    .information:before{top:30px}
    .head, h1{margin:30px 0;font-size:350%;}
    .info{padding-top:55px;}
    p, div.par{margin:13px 0;}
    .avatar{background-size: contain !important;}
}
@media screen and (max-width: 1300px) {
    .head, h1{margin:30px 0;font-size:350%;}
    p, div.par{margin:13px 0;}
    .avatar{background-size: contain !important;}
}
@media screen and (max-width: 1150px) {
    .btn{text-transform:none;letter-spacing:0;}
}
@media screen and (max-width: 1000px) {
    .contik{margin:25px 0 25px 65px;}
    .head, h1{font-size:250%;margin:20px 0;}
    .info{padding:55px 25px 15px;}
    .avatar{width:35%;}
    .information{width:65%;font-size:90%;}
    blockquote{font-size:100%;}
    .information:before{top:30px}
    .lang, nav.act{right:0;}
}
@media screen and (max-width: 760px) {
    .pp-tableCell .contik{height:100%;}
    .contik{margin:0 0 0 65px;}
    nav.act{top:0;bottom:0;}
}
@media screen and (max-width: 680px) {
    nav > ul{padding-top:25px;margin-left:60px;}
    .avatar{width:100%;height:350px;background-position:left bottom;}
    .information:before{left:0;top:20px;}
    .bars{top:20px;}
    .information{width:100%;}
    .btn{padding:10px 50px 10px 10px;}
    .head, h1{font-size:200%;}
    .mouse{display:none;}
    .phone{bottom:30px;}
    .lang{left:0;width:65px;right:auto;top:67px;}
    .info{padding-top:44px;}
    nav{background-image:none;}
    body{line-height:1.2;}
    .w48{width:100%}
    .flex{flex-direction:row;}
}
@media screen and (max-width: 340px) {
    .btn:after{width:30px;}
    .btn{padding-right:20px;}
    .head, h1, h2{font-size:160%;}
}

@media screen and (max-width: 1000px) and (orientation: landscape) { 
    
    body:after{
        background:#fff url(files/rotate.png) center no-repeat;
        content:'Rotate device';
        text-align:center;
        left:0;
        top:0;
        bottom:0;
        width:100%;
        display:block;
        position: fixed;
        z-index:1000;
        background-size:80px !important;
        padding-top: 30px;
        font-family: 'Conv_Gabriela-Regular';
    }
}