/* Citrus Grid System
Created by Tim Smith
*/

html, body {
    margin:0px;
    padding:0px;
}

/* The Grid
---------------------------------------- */

.column {
    width:100%;
    float:left;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}

.h-250 {height:250px;}
.h-500 {height:500px;}
.h-750 {height:750px;}
.h-1000 {height:1000px;}
.responsive:after {content:'';display:block;padding-bottom:100%;}
.responsive * {position:absolute;width:100%;height:100%;}

@media (max-width:600px) {
    .d-0.column {display:none;}
    .d-10.column {width:10%;}
    .d-20.column {width:20%;}
    .d-25.column {width:25%;}
    .d-30.column {width:30%;}
    .d-33.column {width:33.3333333333%;}
    .d-40.column {width:40%;}
    .d-50.column {width:50%;}
    .d-60.column {width:60%;}
    .d-66.column {width:66.6666666666%;}
    .d-70.column {width:70%;}
    .d-75.column {width:75%;}
    .d-80.column {width:80%;}
    .d-90.column {width:90%;}
    .d-100.column {width:100%;}
    
    .od-10 {margin-left:10%;}
    .od-20 {margin-left:20%;}
    .od-25 {margin-left:25%;}
    .od-30 {margin-left:30%;}
    .od-33 {margin-left:33.3333333333%;}
    .od-40 {margin-left:40%;}
    .od-50 {margin-left:50%;}
    .od-60 {margin-left:60%;}
    .od-66 {margin-left:66.6666666666%;}
    .od-70 {margin-left:70%;}
    .od-75 {margin-left:75%;}
    .od-80 {margin-left:80%;}
    .od-90 {margin-left:90%;}
}

@media (min-width:600px) and (max-width:899px) {
    .s-0.column {display:none;}
    .s-10.column {width:10%;}
    .s-20.column {width:20%;}
    .s-25.column {width:25%;}
    .s-30.column {width:30%;}
    .s-33.column {width:33.3333333333%;}
    .s-40.column {width:40%;}
    .s-50.column {width:50%;}
    .s-60.column {width:60%;}
    .s-66.column {width:66.6666666666%;}
    .s-70.column {width:70%;}
    .s-75.column {width:75%;}
    .s-80.column {width:80%;}
    .s-90.column {width:90%;}
    .s-100.column {width:100%;}
    
    .os-10 {margin-left:10%;}
    .os-20 {margin-left:20%;}
    .os-25 {margin-left:25%;}
    .os-30 {margin-left:30%;}
    .os-33 {margin-left:33.3333333333%;}
    .os-40 {margin-left:40%;}
    .os-50 {margin-left:50%;}
    .os-60 {margin-left:60%;}
    .os-66 {margin-left:66.6666666666%;}
    .os-70 {margin-left:70%;}
    .os-75 {margin-left:75%;}
    .os-80 {margin-left:80%;}
    .os-90 {margin-left:90%;}
}

@media (min-width:900px) and (max-width:1199px) {
    .m-0.column {display:none;}
    .m-10.column {width:10%;}
    .m-20.column {width:20%;}
    .m-25.column {width:25%;}
    .m-30.column {width:30%;}
    .m-33.column {width:33.3333333333%;}
    .m-40.column {width:40%;}
    .m-50.column {width:50%;}
    .m-60.column {width:60%;}
    .m-66.column {width:66.6666666666%;}
    .m-70.column {width:70%;}
    .m-75.column {width:75%;}
    .m-80.column {width:80%;}
    .m-90.column {width:90%;}
    .m-100.column {width:100%;}
    
    .om-10 {margin-left:10%;}
    .om-20 {margin-left:20%;}
    .om-25 {margin-left:25%;}
    .om-30 {margin-left:30%;}
    .om-33 {margin-left:33.3333333333%;}
    .om-40 {margin-left:40%;}
    .om-50 {margin-left:50%;}
    .om-60 {margin-left:60%;}
    .om-66 {margin-left:66.6666666666%;}
    .om-70 {margin-left:70%;}
    .om-75 {margin-left:75%;}
    .om-80 {margin-left:80%;}
    .om-90 {margin-left:90%;}
}

@media (min-width:1200px) {
    .l-0.column {display:none;}
    .l-10.column {width:10%;}
    .l-20.column {width:20%;}
    .l-25.column {width:25%;}
    .l-30.column {width:30%;}
    .l-33.column {width:33.3333333333%;}
    .l-40.column {width:40%;}
    .l-50.column {width:50%;}
    .l-60.column {width:60%;}
    .l-66.column {width:66.6666666666%;}
    .l-70.column {width:70%;}
    .l-75.column {width:75%;}
    .l-80.column {width:80%;}
    .l-90.column {width:90%;}
    .l-100.column {width:100%;}
    
    .ol-10 {margin-left:10%;}
    .ol-20 {margin-left:20%;}
    .ol-25 {margin-left:25%;}
    .ol-30 {margin-left:30%;}
    .ol-33 {margin-left:33.3333333333%;}
    .ol-40 {margin-left:40%;}
    .ol-50 {margin-left:50%;}
    .ol-60 {margin-left:60%;}
    .ol-66 {margin-left:66.6666666666%;}
    .ol-70 {margin-left:70%;}
    .ol-75 {margin-left:75%;}
    .ol-80 {margin-left:80%;}
    .ol-90 {margin-left:90%;}
    
    .max-s.column {max-width:600px;}
    .max-l.column {max-width:900px;}
}

/* Base Styles
---------------------------------------- */
html {
  font-size: 10px; 
}

body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; 
}

h1 {font-size:6rem;margin:0px;font-weight:400;}
h2 {font-size:5rem;margin:0px;font-weight:400;}
h3 {font-size:4rem;margin:0px;font-weight:400;}
h4 {font-size:3rem;margin:0px;font-weight:400;}
h5 {font-size:2rem;margin:0px;font-weight:400;}
p {margin:0px;}

@media screen and (max-width:400px) {
    h1 {font-size:3.5rem;margin:0px;}
    h2 {font-size:3rem;margin:0px;}
    h3 {font-size:2.5rem;margin:0px;}
    h4 {font-size:2rem;margin:0px;}
    h5 {font-size:1.5rem;margin:0px;}
    p {font-size:1rem;margin:0px;}
}

@media screen and (min-width:401px) and (max-width:599px) {
    h1 {font-size:4.5rem;margin:0px;}
    h2 {font-size:4rem;margin:0px;}
    h3 {font-size:3.5rem;margin:0px;}
    h4 {font-size:3rem;margin:0px;}
    h5 {font-size:2rem;margin:0px;}
    p {font-size:1.5rem;margin:0px;}
}

a {text-decoration:none;margin:0px;}

.h-nav {position:relative;left:-25px;margin-top:0;margin-bottom:0;}
.h-nav li {list-style:none;display:inline-block;margin:0 20px;}

.button {
  position:relative;
  background-color:transparent;
  border:#222 2px solid;
  border-radius:0px;
  padding-top:5px;
  height:40px;
  text-align:center;
  transition:all .25s ease-in-out;
  -webkit-transition:all .25s ease-in-out;
  -moz-transition:all .25s ease-in-out;
  -o-transition:all .25s ease-in-out;
}

.button:hover {background-color:#222;color:white;}

.button * {position:absolute;top:50%;transform:translateY(-50%);width:100%;font-weight:400;}

button, button:focus, button:active {background:transparent;border:none;outline:0;}

form {margin:30px 0px;}
input {margin:10px 0px;padding:7.5px;border:#222 1px solid;border-radius:0px;}
textarea {margin:10px 0px;padding:7.5px;height:150px;border:#222 1px solid;border-radius:0px;}
input[type="submit"] {
    background-color:transparent;border:#222 2px solid;border-radius:0px;
    transition:all .25s ease-in-out;
    -webkit-transition:all .25s ease-in-out;
    -moz-transition:all .25s ease-in-out;
    -o-transition:all .25s ease-in-out;
}
input[type="submit"]:hover {background-color:#222;color:white;}


/* Utilities
---------------------------------------- */

.left {float:left;}
.right {float:right;}
.align-left {text-align:left;}
.align-right {text-align:right;}
.h-center {text-align:center;width:100%;}
.v-center {position:relative;}
.v-center * {position: absolute; top: 50%; transform: translateY(-50%);}
.circle {border-radius:100%;}


/* Components
---------------------------------------- */

.zoom {overflow:hidden;}
.zoom img {
    height:100%;
    width:auto;
    left:-25%;
    top:0px;
    transition:all 1s;
    -moz-transition:all 1s;
    -webkit-transition:all 1s;
    -o-transition:all 1s;
    transform:scale(1,1);
    -moz-transform:scale(1,1);
    -ms-transform:scale(1,1);
    -o-transform:scale(1,1);
    -webkit-transform:scale(1,1);
}

.zoom:hover img {
    transform:scale(1.3,1.3);
    -moz-transform:scale(1.3,1.3);
    -ms-transform:scale(1.3,1.3);
    -o-transform:scale(1.3,1.3);
    -webkit-transform:scale(1.3,1.3);
}

.overlay {
    position:relative;
}

.overlay div {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    color: white;
    opacity:0;
    z-index:1000;
    transition:all .5s ease-in-out;
}

.overlay:hover div {
    opacity:1;
}

.overlay div * {
    position:initial;
    height:auto;
}