/* ================================================================================
    #Reset
================================================================================ */

* { margin: 0; padding: 0; outline: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

header, footer, nav, section, article, aside, figure, details, summary { display: block; }

@font-face {
    font-family: 'Komikax';
    src: url('fonts/komikax_-webfont.eot');
    src: url('fonts/komikax_-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/komikax_-webfont.woff2') format('woff2'),
         url('fonts/komikax_-webfont.woff') format('woff'),
         url('fonts/komikax_-webfont.ttf') format('truetype'),
         url('fonts/komikax_-webfont.svg#komika_axisregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ================================================================================
    #Base
================================================================================ */

body, html { height: 100%; }

body {
    font-family: arial, helvetica, sans-serif; 
    font-size: 15px;
    line-height: 1.2;
    color: #000;
    background: #9ac4cb;
   
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

a { color: #47b3ff; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: none; }
a img { border: 0; }
img { height: auto; max-width: 100%; font-size: 0; vertical-align: middle; }

h1, h2, h3, h4, h5, h6 { line-height: 1.1; font-weight: normal; font-family: 'Komikax', arial, helvetica, sans-serif; }

h1 { }
h2 { }
h3 { }
h4 { }
h5 { }
h6 { }

p { font-size: 26px; color: #0c4a5f; font-family: 'Open Sans', sans-serif; font-weight:700;}

ul { list-style: disc inside none; }
ol { list-style: decimal inside none; }

.caption {position: absolute; top: 45%; left:20%; margin: 0 auto; text-align: center;  vertical-align: middle;}
.caption:hover {visibility:hide;}


/* ================================================================================
    #Form Elements
================================================================================ */

input, textarea, select { font-family: arial, helvetica, sans-serif;  font-size: 12px; }
textarea { overflow: auto; resize: none; -webkit-overflow-scrolling: touch; }

input,
textarea { box-sizing: border-box; max-width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; box-shadow: none; }

input[type="checkbox"] { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; }
input[type="radio"] { -webkit-appearance: radio; -moz-appearance: radio; appearance: radio; }

input[type="radio"],
input[type="checkbox"] { width: auto; height: auto; padding: 0; border: 0; }

input[type="submit"],
input[type="button"],
input[type="reset"],
button { cursor: pointer; }

button::-moz-focus-inner,
input::-moz-focus-inner { padding: 0; border: 0; }

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #30363c;
}
input:-moz-placeholder,
textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #30363c;
   opacity:  1;
}
input::-moz-placeholder,
textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #30363c;
   opacity:  1;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #30363c;
}
input:placeholder-shown,
textarea:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    #30363c;
}

/* ================================================================================
    # Clear 
================================================================================ */

.cl { height: 0; clear: both; }

.cl,
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }

.clearfix { *zoom: 1; }
.clearfix:after { content: ''; font-size: 0; line-height: 0; display: block; clear: both; }

/* ==========================================================================
    #Helpers
========================================================================== */

.left,
.alignleft { float: left; }

.right,
.alignright { float: right; }

.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.alignnone { display: block; }

/* ================================================================================
    #Containers
================================================================================ */

.shell { width: 960px; margin: 0 auto; }

.holder { width: 630px; vertical-align: middle; margin: 40px auto; }
.box { width: 300px; height: 300px; background: #72aeb6; margin-bottom: 30px; transition: background-position .5s ease; position: relative;}

.header-top { float: left; width: 162px; margin-bottom: 54px; }
.header-bottom { clear: both; float: right; width: 324px; margin-top: 24px; }

.box-holder { clear: both; }
.box-1, .box-3 { float: left; }
.box-2, .box-4 { float: right; }

.box-1 { background: url(images/m3.png) no-repeat 0 0; background-size: cover; display: block; margin-left: auto; margin-right: auto;}
.box-2 { background: url(images/i4.png) no-repeat 0 0; background-size: cover; }
.box-3 { background: url(images/l3.png) no-repeat 0 0; background-size: cover; }
.box-4 { background: url(images/d3.png) no-repeat 0 0; background-size: cover; }

.box-1:hover { background-position: 0 -302px; }
.box-2:hover { background-position: 0 -302px; }
.box-3:hover { background-position: 0 -302px; }
.box-4:hover { background-position: 0 -302px; }

@media(max-width: 699px) {
    .header-top,
    .header-bottom { margin: 0 auto 30px auto; float: none; display: block; }

    .holder { width: auto; }

    .box:last-child { margin-bottom: 34px; }
    
    .box { display: block; float: none; margin: 0 auto; }
    .box + .box { margin-top: 40px; }
}

@media(max-width: 419px) {
    .header-top,
    .header-bottom { max-width: 80%; }

    .box { width: 260px; height: 260px; }

    .box-1:hover { background-position: 0 -262px; }
    .box-2:hover { background-position: 0 -262px; }
    .box-3:hover { background-position: 0 -262px; }
    .box-4:hover { background-position: 0 -262px; }

    
}