@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/merriweather-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/merriweather-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/merriweather-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/merriweather-boldit.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}





@font-face {
    font-family: 'Clear';
				src: url('../fonts/ClearSans-Thin.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Clear';
    src: url('../fonts/ClearSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Clear';
    src: url('../fonts/ClearSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Clear';
    src: url('../fonts/ClearSans-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Clear';
    src: url('../fonts/ClearSans-Medium.eot');
    src: url('../fonts/ClearSans-Medium.eot?#iefix') format('embedded-opentype'),
url('../fonts/ClearSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Clear';
    src: url('../fonts/ClearSans-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Clear';
    src: url('../fonts/ClearSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Clear';
    src: url('../fonts/ClearSans-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}





html {
height: 100%;
box-sizing: border-box;
}

*, *:before, *:after {
box-sizing: inherit;
}


body {
min-height: 100vh;
margin: 0;
padding: 0;
font-family: 'Merriweather', serif;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
color: #000;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
background-color: #fff;
}

#wrap {
min-height: 100vh;
display: flex;
flex-direction: column;
}

.lining {
max-width: 1024px;
margin: 0 auto;
}
header .lining {
position: relative;
padding: 35px 40px 40px;
}
.lining.contact {
padding: 50px 40px 60px;
}
.lining.about {
padding: 60px 40px 70px;
}
footer .lining {
padding: 50px;
}

.illu img {
width: 100%;
}
.title {
position: absolute;
left: 0;
top: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.7);
}

main {
flex: 1;
width: 100%;
}
header, footer {
flex-shrink: 0;
font-family: 'Clear';
line-height: 1;
text-align: center;
}

img {
display: block;
border: none;
}

a {
color: #2787F1;
text-decoration: none;
outline: none;
}
a:hover, a:focus {
color: #EB5252;
}


h1 {
font-size: 3.4em;
font-weight: 400;
margin: 0;
}
.hr {
height: 2px;
width: 60px;
margin: 1.4em auto;
background-color: #000;
}
header p {
font-size: 1.5em;
margin: 0;
}

h2 {
font-family: 'Clear';
font-size: 2em;
font-weight: 400;
/*text-align: center;*/
margin: 0 0 .75em 0;
}

.contact p {
margin: 1em 0;
border-bottom: 1px dotted #999;
padding-bottom: 5px;
}

footer {
font-size: .75em;
border-top: 1px solid #ccc;
}


/*** Navmain ***/

#navmain {
font-family: "Clear";
text-align: left;
position: fixed;
top: 0;
right: 0;
z-index: 100;
background-color: rgba(0, 0, 0, 0.8);
}
#navmainswitch {
display: block;
position: fixed;
top: 0;
right: 0;
width: 60px;
height: 60px;
background: #000 url(../img/trigger1.png) no-repeat center center;
z-index: 110;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#navmainswitch.active {
background: #3F3F3F url(../img/trigger2.png) no-repeat center center;
}

#nav {
display: none;
width: 240px;
margin: 61px 0 30px;
}
#nav a {
display: block;
padding: 15px 30px;
color: #fff;
border-bottom: 1px solid #3F3F3F;
}
#nav a:hover,
#nav a:focus {
color: #fff;
background-color: #3F3F3F;
}



/*** end Navmain ***/







@media screen and (max-width: 1279px) {

header .lining {
padding: 25px 40px 30px;
}
.lining.contact {
padding: 40px 40px 50px;
}
.lining.about {
padding: 40px 40px 50px;
}
footer .lining {
padding: 40px 40px;
}


h1 {
font-size: 3em;
}
.hr {
margin: 1em auto;
}
header p {
font-size: 1.2em;
}
h2 {
font-size: 2em;
margin: 0 0 .75em 0;
}

}






@media screen and (max-width: 1024px) {

header .lining {
padding: 25px 40px 25px;
}

h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.8em;
}

}






@media screen and (max-width: 889px) {


.title {
position: static;
background-color: transparent;
}

}






@media screen and (max-width: 768px) {

body {
font-size: 16px;
}

h2 {
font-size: 1.6em;
}
footer {
font-size: .85em;
}

#navmainswitch {
width: 50px;
height: 49px;
background: #000 url(../img/trigger3.png) no-repeat center center;
}

#navmainswitch.active {
background: #000 url(../img/trigger4.png) no-repeat center center;
}

.lining.about {
padding: 40px;
}


}






@media screen and (max-width: 640px) {

header .lining {
padding: 80px 40px 25px;
}

.hr {
width: 50px;
}

#navmain {
width: 100%;
height: 49px;
background-color: rgba(0, 0, 0, 0.4);
}
#navmainswitch {
left: 0;
}

#nav {
width: 100%;
background-color: #000;
margin: 49px 0 0;
border-top: 1px solid #3F3F3F;
}

}





@media screen and (max-width: 480px) {

ul li {
margin-left: -1em;
}

}



@media screen and (max-width: 460px) {


header .lining {
padding: 80px 30px 25px;
}
.lining.contact {
padding: 40px 30px 50px;
}
.lining.about {
padding: 40px 30px 40px;
}
footer .lining {
padding: 40px 30px;
}

h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}


}