@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700|Rozha+One&subset=latin-ext');

*
{
 padding: 0;
 margin: 0;
 color: #000;
 font-family: 'Lato', arial, sans-serif;
 box-sizing: border-box;
}

.rozha *
{
 font-family: 'Rozha One', 'Times New Roman', Times, serif !important;
}

html
{
 overflow-y: scroll;
 min-height: 100%;
}

body
{
 height: 100%;
 margin: 0;
}

.center
{
 text-align: center;
}

.clr
{
 clear: both;
}

a
{
 text-decoration: none;
}

p
{
 margin-bottom: 1.5em;
}

.mobile-only {display: none !important;}

header
{
 padding: 20px;
 width: 100%;
 top: 0;
}

header.fixed
{
 position: fixed;
 z-index: 1000;
 background-color: #fff;
 -webkit-box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.3);
 box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.3);
 transition: box-shadow 0.3s ease-in-out;
}

header.index
{
 border-bottom: 0;
}

header a
{
 color: #999;
 font-size: 12pt;
}

header a:hover
{
 color: #e02;
}

#logo
{
 float: left;
 height: 30px;
}

#logo img,
#logo-index img
{
 max-width: 100%;
 height: 100%;
}

#logo-index
{
 display: inline-block;
 height: 55px;
 max-width: 90%;
 margin: 0 auto;
}

.wrapper
{
 margin: 0 auto;
 max-width: 1104px;
}

footer
{
 width: 100%;
 padding: 2em 0;
 background-color: #63666a;
 text-align: center;
}

footer > div
{
 color: #fff;
}

nav{margin-top: 5px; float: right;}
nav#menu > ul{list-style-type: none; display: flex; clear: both; justify-content: space-between; width: 100%; margin: 0; padding: 0;}
nav#menu > ul > li {display: block; margin: 0;}
nav#menu > ul > li > a {display: block; white-space: nowrap; text-decoration: none; text-transform: uppercase; font-size: 16px; color: #333; font-weight: bold; padding: 0 20px 0 20px;}
nav#menu > ul > li > a:hover {color: #e02;}
#menu-h {display: none;}

#content-wrapper
{
 max-width: 1104px;
 margin: 20px auto;
}

#index
{
 text-align: center;
}

.index-box-container
{
 display: inline-block;
 width: 49.8%;
 margin: 0;
 vertical-align: top;
 background-color: #fff;
 position: relative;
 background: url(/img/index-shadow-black.png) center no-repeat;
 background-size: 100%;
 padding: 20px;
}

.index-box-container:hover
{
 background: url(/img/index-shadow-red.png) center no-repeat;
}

.index-box
{
 display: inline-block;
 margin: 0 auto;
 vertical-align: top;
 background-color: #fff;
 position: relative;
 padding: 20px 20px 40px 20px;
}

.index-box img
{
 max-width: 100%;
 display: inline-block;
 cursor: pointer;
 margin: 0 ;
}

/* */

#about-photo
{
 float: right;
 margin-left: 50px;
 display: inline-block;
 max-width: 50%;
}

#about-photo > img
{
 display: inline-block;
 width: 100%;
 height: auto;
}

h2
{
 clear: both;
 text-transform: uppercase;
 font-size: 18pt;
 margin: .5em 0;
}

h3
{
 clear: both;
 font-size: 18pt;
 margin: .5em 0;
}

/* */

.button-more
{
 display: inline-block;
 padding: 10px 30px;
 border-radius: 10px;
 background: linear-gradient(90deg, rgba(206,0,44,1) 0%, rgba(255,49,49,1) 100%);
 color: #fff;
 text-transform: uppercase;
 text-decoration: none;
}

div.button
{
 position: absolute;
 z-index: 100;
}

div.button > a
{
 display: block;
 width: 120px;
 height: 40px;
 position: relative;
 text-decoration: none;
 text-transform: uppercase;
 color: #fff;
 text-align: center;
 border-radius: 10px;
 overflow: hidden;
}

div.button > a:after
{
 position: absolute;
 content: '';
 display: inline-block;
 background: linear-gradient(90deg, rgba(226,19,45,1) 0%, rgba(255,49,49,1) 12.5%, rgba(226,19,45,1) 25%, rgba(255,49,49,1) 37.5%, rgba(226,19,45,1) 50%, rgba(226,49,49,1) 62.5%, rgba(255,19,45,1) 75%, rgba(226,49,49,1) 87.5%, rgba(255,19,45,1) 100%);
 width: 480px;
 height: 40px;
 top: 0;
 left: 0;
 z-index: -1;
 transform: translateX(-360px);
 transition: transform 1000ms;
}

div.button > a:hover:after
{
 transform: translateX(0px);
}

div.button > a > span
{
 position: relative;
 top: 10px;
 color: #fff;
}

/* MEDIA QUERIES */

@media screen and (max-width: 1160px)
{
 #content-wrapper {margin: 2em 25px; padding: 0px 0 20px 0;}
}

@media screen and (max-width: 900px)
{
 nav#menu > ul > li > a  {font-size: 14px; padding: 0 10px;}
}

@media screen and (max-width: 730px)
{
 .desktop-only {display: none;}

 header {padding: 10px;}
 #index {margin-top: 20px;}
 #content-wrapper {margin: 2em 10px; padding: 0 0 0 0;}

 .desktop-only {display: none !important;}
 #logo-index {width: 100% !important;}

 nav#menu > ul {display: none;}
 #menu-h {display: block; width: 35px; height: 35px; float: right; margin: 0 0 0 10px;}
 #menu-h > img {width: 100%; height: auto; cursor: pointer;}
 nav {}
 nav#menu > ul {list-style-type: none; background-color: #ccc; position: absolute; top: 60px; right: 0; height: auto; z-index: 9999; padding: 0; margin: 0;}
 nav#menu > ul > li {display: block; text-align: center; padding: .25em 0;}
 nav#menu > ul > li > a {display: block; text-decoration: none; text-transform: uppercase; color: #333; font-size: 16px; padding: .5em 0;}
 nav#menu > ul > li:hover {border-top: 0; margin-top: 0;}
}

@media screen and (max-width: 500px)
{
 .index-box {width: 100%; margin-bottom: 50px;}
 .index-box:first-child {margin-right: 0;}
}