@font-face{ font-family:'Matiz';
 src:url('Matiz.ttf');

}
@font-face{ font-family:'Troika';
 src:url('troika.otf');

}

@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,300);

body {
    padding:0px;
    margin:0px;
    background-color:#eee;
}
.menu {
    border-top:5px solid #5d7e32;
    position:fixed;
    top:0px;
    height:50px;
    width:100%;
    background:#324816;
    text-align:center;
    border-bottom:4px dashed #3d5a17;
    background-image:url(bg.png);
}
.menu a {
    color:white;
    margin:0 20px 0 20px;
    height:40px;
    display:inline-block;
    padding:10px 20px 0px 20px;
    -webkit-transition:0.2s;
    transition:0.2s;
    font-size:25px;
    text-decoration:none;
    font-family:"Matiz";
    text-shadow:2px 2px 0px #324816,
    3px 3px 0px #324816;
}
.menu a:hover {
    padding-bottom:10px;
    background:#5d7e32;
    text-shadow:2px 2px 0px #5d7e32,
    4px 4px 0px #8ea86d;
}
.header {
    background-image:url(https://cdn.artstation.rocks/p/users/covers/000/036/026/default/68366d2f428d1f37dd57da04b26a7267.jpg?1421591960);
    background-attachment:fixed;
    background-size:100%;
    position:absolute;
    top:50px;
    width:100%;
    height:500px;
}
.header h1 {
    margin:20px 0px 0px 0px;
    text-align:center;
    font-size:180px;
    color:white;
    font-family:"Troika";
    text-shadow:4px 4px 0px #7d6c54,
    8px 8px 0px #a53b1b;
}
.header h2 {
    text-align:center;
    font-size:70px;
    margin:0px 0px 20px 0px;
    color:white;
    font-family:"Troika";
    text-shadow:2px 2px 0px #6c593f,
    4px 4px 0px #7c280e;
}
.header a {
    color:white
}
.header h3 {
    text-align:center;
    font-size:40px;
    margin:0px 0px 20px 0px;
    color:white;
    font-family:"Troika";
    text-shadow:2px 2px 0px #6c593f,
    4px 4px 0px #7c280e;
}
.content {
    margin-top:500px;
    display:block;
}
.title {
    font-family:"Matiz";
    color:white;
    font-size:30px;
    text-align:center;
    width:100%;
    position:relative;
    display:block;
    float:left;
    background-color:#61a0b2;
    background-image:url(bg.png);
    height:45px;
    padding-top:10px;
    border-top:4px dashed #8ebfcc;
    border-bottom:4px solid #8ebfcc;
    text-shadow:2px 2px 0px #61a0b2,
    4px 4px 0px rgba(255,
    255,
    255,
    0.6);
}
.grid {
    margin:0 auto;
    background:red;
    width:70%;
}
.griditem {
    width:50%;
    height:400px;
    display:inline-block;
    float:left;
    -webkit-transition:0.2s;
    transition:0.2s;
    overflow:hidden;
    text-align:center;
    background-size:cover;
    background-position:center;
}
.griditem:hover {
    box-shadow:inset 0 0 0px 10px rgba(255,
    255,
    255,
    0.5);
}
.griditem h1 {
    position:relative;
    top:-50px;
    margin:0 auto;
    -webkit-transition:0.2s;
    transition:0.2s;
    font-family:"Matiz";
    background:#a53b1b;
    display:inline-block;
    width:auto;
    padding:5px;
    color:white;
    text-decoration:none;
}
.griditem span {
    display:block;
    height:100%;
    background:rgba(0,
    0,
    0,
    0.2);
    -webkit-transition:0.2s;
    transition:0.2s;
    width:100%;
}
.griditem:hover span {
    background:rgba(0,
    0,
    0,
    0);
}
.griditem:hover h1 {
    top:0px;
}
.griditem h2 {
    position:relative;
    top:0px;
    margin:0 auto;
    -webkit-transition:0.2s;
    transition:0.2s;
    font-family:"Matiz";
    background:#a53b1b;
    display:inline-block;
    width:auto;
    padding:5px;
    padding-bottom:10px;
    color:white;
    text-decoration:none;
}
.griditem:hover h2 {
    top:-40px;
}
.column {
    display:inline-block;
    float:left;
    background:#ddd
}
.sixty {
    width:70%
}
.fourty {
    width:30%
}
.column p {
    padding:0px 20px 20px 20px;
    font-size:20px;
    font-family:sans-serif;
    text-align:justify;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 100;
}
.column h3 {
    width:100%;
    display:block;
    background:#6d9638;
    padding:7px 0px 7px 0px;
    color:white;
    text-align:center;
    border-bottom:4px dashed #567c24;
    font-family:"Matiz";
    font-size:30px;
    margin:0px;
}
.mail {
    font-family:"Matiz";
    font-size:60px;
    width:100%;
    background:#a53b1b;
    display:block;
    color:white;
    text-align:center;
    padding:30px 0px 30px 0px;
    background-image:url(stamp.png);
    background-repeat:no-repeat;
    background-position:right top;
    -webkit-transition:0.2s;
    transition:0.2s;
    text-decoration:none;
}
.mail:hover {
    box-shadow:inset 0 0 0px 10px rgba(255,
    255,
    255,
    0.8);
}
.column a img {
    -webkit-transition:0.2s;
    transition:0.2s;
}
.bg1 {
    background-image:url(bg/1.jpg)
}
.bg2 {
    background-image:url(bg/2.jpg)
}
.bg3 {
    background-image:url(bg/3.jpg)
}
.bg4 {
    background-image:url(bg/4.jpg);
}
.column a:hover img {
    opacity:0.8
}