@charset "utf-8";
/* CSS Document */
*, *:before, *:after {-webkit-box-sizing: border-box;box-sizing:border-box}
*:before, *:after {content:""}
::selection {background-color:#d5d5d5}
::-moz-selection {background-color:transparent}
html {-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
body, nav, main, section, article, div, footer {position:relative;display:block;margin:0}
body {width:100%;min-height:120vh;font-family:"Lora",serif;font-size:16px;color:#444;background:url("../img/bg.jpg") top center repeat fixed;}
/* for preloading page 
nav,*/ main, footer {display:none}
.no-scrollbar {
	/* Hide scrollbar on html but let scrolling */
	overflow-y: auto;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.no-scrollbar::-webkit-scrollbar {
  	/* Hide scrollbar on html but let scrolling Chrome, Edge, Safari */
  	display: none;
}
b {font-weight:bold}
i, q {font-family:"Georgia";font-style:italic}
q:before,q:after {content:'"'}
p {padding:30px 0}
ol,ul {list-style:none;padding:0}
ul.sq {list-style:square inside}
img {max-width:100%;border:0}

/* TITLES */
h1 {color:#ba2b2b;font-size:3vw}
h2 {} /* photography empty grid */
h3 {} /* photography grid item hover */
h4 {} /**/
h5 {color:#908e58;font-family:"Montserrat";font-size:16px;font-weight:600;margin:0 0 20px} /*fancy main title*/
h6 {} /**/

/* LINKS */
a {color:#377ca2;font-weight:bold;text-decoration:none;outline:0 none}
a:hover {color:#7290b6}
span.link {clear:both;display:inline-block}
span.link a:after {
	content:" ";
	display:block;
	height:1px;
	width:100%;
	-webkit-transform:scale(0);
	-ms-transform:scale(0);
	transform:scale(0);
}
span.link a:after {background: #023f61}
span.link:hover a:after {
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	transform:scale(1);
}
/* INPUTS, BTTS */
button {cursor:pointer}

/*  TRANSITIONS  */
a,
header,
main,
.nav li,
.mobil,
input,
select,
textarea,
button {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease
}
span.link a:after {
	-webkit-transition:all .3s cubic-bezier(0.165,.84,.44,1);
	transition:all .3s cubic-bezier(0.165,.84,.44,1);
}

/*  Z-INDEX  */
/* preloader 10 
mobil 9
header 8*/

/* NAV INDEX AND CONTACT 
nav {position:fixed;width:100%;padding:10px;text-align:center;background:url("../img/bg.jpg") top center repeat}
nav div {display:block;margin:15px auto}
nav li {display:inline-block}
nav button, nav a, nav li a {display:inline-block;padding:0 20px;color:inherit;font-family:"Montserrat",sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:3px;border:none;background:rgba(255,255,255,0);}
nav button:hover, nav a:hover, nav li a:hover {color:#7290b6}
nav button.current, nav a.current, nav li.current a {color:#990000;font-weight:bold;cursor:inherit}
nav button.current:hover, nav a.current:hover, nav li.current a:hover {color:#990000}*/
/* NAV MOBIL INDEX 
.about nav a:not(.b8) {display:none}*/

/* MAIN GLOBAL */
main {width:100%;max-width:1200px;min-height:100vh;margin:0 auto;padding:100px 5% 5%;}
.about section {min-height:101vh}
.about main div {position:absolute;top:-100%;height:auto}
.about main img {display:block;}

.num {left:32%;}
.num::before {content:'-';font-size:4rem;line-height:4rem;color:#999;}
.num span {color:#aaa;font-family:"Playfair Display";font-size:8rem;font-weight:700;letter-spacing:2px;}
.h {left:50%;transform:translateX(-50%);}
.a {left:15%;font-size:30px;line-height:30px}
.i {left:50%;text-align:center;max-width:90%;} /*box-shadow:20px 20px 10px 10px rgba(51,51,51,0.15);*/
.t1 {left:35%;width:50%;}
.t2 {left:40%;width:50%;}
.f {left:25%;width:50%;}
.h {z-index:2}
.s, .a, .p, .f {z-index:1}
.i {z-index:0}

/* initial y pos after page load */
.about main .h1 {top:45%;left:60%;}
.about main .i1 {top:10%;left:20%}
.about main .p1a {top:40%;left:10%;width:35%}
.about main .p1b {top:10%;left:65%;width:30%}

/* individual positions/sizes */
.a2 {left:12%}
.i2a {left:10%;max-width:50%}
.i2b {left:46%}
.i2c {left:50%;max-width:40%;}
.p2a {left:5%;width:42%;}
.p2b {width:50%;}
.p2b p {padding-bottom:100px;}

.a3 {left:78%}
.i3d {left:51%;max-width:25%}
.i3c {left:11.5%;max-width:37.5%;;box-shadow:12px 12px 15px 10px rgba(51,51,51,0.25);}
.i3b {left:51%;max-width:37.5%;box-shadow:12px 12px 15px 10px rgba(51,51,51,0.25);}
.i3a {left:24%;max-width:25%;}
.p3a {left:11.5%;width:10%;text-align:right}
.p3b {left:78%;width:11%;}

.i4a {transform:translateX(-50%);}
.i4b {left:55%;max-width:30%;box-shadow:12px 12px 15px 10px rgba(51,51,51,0.25);}
.i4c {left:40%;max-width:30%;}
.i4c img {border-radius:50%}
.p4a {left:60%;max-width:30%}
.p4b {left:13%;width:25%;text-align:right}

.a5 {left:10%}
.p5a {left:10%;width:40%;}
.p5b {left:10%;width:40%}

.i6 {left:22%;}
.p6a {left:5%;width:45%;}
.p6b {left:70%;width:30%;}

.a7 {left:12%;text-align:right}
.p7a {left:5%;width:45%;text-align:right}
.p7b {left:35%;width:60%;}

footer {position:absolute;top:auto;bottom:0;left:auto;right:auto;width:100%;margin:20px auto;text-align:center;color:#555;font-family:"Montserrat",sans-serif;font-size:11px;letter-spacing:1.2px;}
footer .link a {font-family:"Montserrat";font-weight:600}

/* OTHER PAGES EXCEPT ABOUT AND CONTACT */
body:not(.about) .num {position:absolute;top:70px;height:auto;z-index:0}   
body:not(.about) h1 {position:relative;z-index:1}

/* CONTACT */
input,
input::-moz-focus-inner,
input[type=text]::-moz-focus-inner,
input[type=email]::-moz-focus-inner,
input[type=button]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner,
input[type=file]::-moz-focus-inner {
    border: none;
    outline: 0px none;
}
input[type=text],
input[type=email],
textarea {
position:relative;
width:100%;
min-width:250px;
margin:20px 0;
padding:12px 10px 12px 150px;
cursor:pointer;
color:#999;
font-size:14px;
line-height:22px;
border:none;
outline:0px none;
background:/*#e5e5e5*/rgba(229,229,229,0);
z-index:2;
}
input[type=text] {height:40px;}
input[type=text]:hover,
input[type=text]:focus,
input[type=email]:hover,
input[type=email]:focus,
select:hover,
textarea:hover,
textarea:focus {
color:#555;
background:/*#ededed*/rgba(229,229,229,0.4);
}
textarea {min-height:150px;max-height:300px;padding:65px 10px 14px;resize:vertical}
select {height:26px;padding:0 5px;cursor:pointer;color:#21759B;font-family:Georgia,serif;font-size:12px;border:2px solid #ddd}
select option {height:18px;padding:4px 5px 0;font-size:12px;border:2px solid transparent}
.contact button,
.contact input[type=button] {
padding:5px;
cursor:pointer;
color:#444;
font-family:"Montserrat";
font-size:12px;
line-height:16px;
border:none;
border-radius:3px;
background:#ddd
}
input[type=submit],
input[type=file] {
display:block;
width:150px;
height:60px;
margin:20px 0 20px auto;
padding:15px 10px;
cursor:pointer;
color:#444;
font-family:"Montserrat";
font-size:14px;
line-height:16px;
border:none;
background:/*#e5e5e5*/ url("../img/frame-send.png") center center/99% 99% no-repeat;
}
.contact button:hover,
.contact input[type=button]:hover,
input[type=submit]:hover,
input[type=file]:hover {
border:none;
background:/*#ddd*/ url("../img/frame-send.png") center center/80% 80% no-repeat;
/*box-shadow:0 8px 6px -6px rgba(0,0,0,0.8)*/
}

.contact-page h1 {text-align:center;}
.contact-page p {font-family:"Montserrat", sans-serif;text-align:center}
.contact {position:relative;display:block;width:50%;margin:0 auto;/*background:url("../img/contactform.png") center center/100% 100%*/}
#contactform {position:relative;display:block;max-width:800px;}
.form-label {position:absolute;left:0;width:140px;height:40px;padding:10px 10px !important;color:#444;font-family:"Montserrat";font-size:14px;background:#e5e5e5;z-index:0}
.label-name {top:20px;}
.label-email {top:100px;}
.label-subject {top:180px;}
.label-antispam {top:260px;}
.label-message {top:340px;width:100%;}
#verif {width:50% !important}
#verif-box {position:absolute;top:260px;left:61%;height:40px;padding:0}
#verif-box img {display:inline-block;height:40px;vertical-align:middle;}
.veriflink {display:inline-block;height:40px;padding:10px;vertical-align:middle;color:#444;font-size:14px;}
.veriflink:hover {border:none;background:#e5e5e5;}
.veriflink span {color:#444}
/*.veriflink:hover, .veriflink:hover .fa, .page-cont input[type=submit]:hover {background:#908e58}
 error for anti-spam and succes for all, generated by processform.php */
.frame {position:absolute;left:120px;width:calc(100% - 110px);max-width:none;height:55px;z-index:1}
.frame-name {top:10px;}
.frame-email {top:90px;}
.frame-subject {top:170px;}
.frame-antispam {top:250px;width:30%}
/*.frame-verif {top:-10px;left:-15px;width:125%;height:60px !important}*/
.frame-message {top:330px;left:-15px;width:calc(100% + 28px);height:190px;}
#response {display:none;padding:10%;text-align:center;color:#990000;font-family:"Times New Roman",Times,serif;font-style:italic;font-size:22px}
/* error for fields, not for anti-spam ! error-message div and its label inside is generated by contact.js */
.error-message {position:relative;display:block;padding:10px 5%;text-align:center;color:#990000;font-family:"Times New Roman",Times,serif;font-style:italic;font-size:22px;}
.error-message label {display:block}
/* error class is added to error fields and to error-message div */
.error {color:#990000 !important;font-family:"Times New Roman",Times,serif;font-style:italic;font-size:18px;font-weight:bold;z-index:2 !important}

@media only screen and (max-width:1200px) {
    body {font-size:14px}
}
@media only screen and (max-width:1023px) {
	h1 {font-size:2.2rem}
    .mobil {display:block}
    nav {position:fixed;top:0;left:-100%;height:100vh;max-height:100vh;background:url("../img/bg.jpg") top center repeat;overflow-y:scroll;-webkit-overflow-scrolling:touch}
    nav a, .about nav a:not(.b8) {display:block}
    .about nav a {margin:15px 0;text-align:justify}
	main {padding:5% 5% 15%}
	section {display:none}
	.about main div, .s, .h, .a, .i, .t1, .t2, .f, .about main .h1, .about main .i1, .about main .p1a, .about main .p1b {position:relative;top:auto;left:auto;transform:none;width:100%;}
	.h, .a, .i, .t1, .t2, .f {margin:0 auto;}
	.s {margin:50px 0 0}
	.a {font-size:1.3rem;text-align:right}
    .about p {padding:10px 0}
    .about .h {margin-top:-80px;}
    .i3a, .i3b, .i3c, .i3d {display:inline-block}
    .i3b, .i3d {margin-left:20%}
    .p4a {max-width:none}
    .i4a {margin-top: -100px;z-index:0}
    .i4c {z-index:1}
    .i4b, .i5a {display:none}
}
@media only screen and (max-width:768px) {

}
@media only screen and (max-width:680px) {

}
@media only screen and (max-width:480px) {
    main {padding:5% 5% 30%}
}
@media only screen and (max-width:360px) {

}
@media only screen and (max-width:280px) {

}