@font-face {
    font-family: 'Berthold Akzidenz-Grotesk';
    src: url('/wp-content/themes/obsidian/assets/fonts/AkzidenzGroteskBE-Light.eot');
    src: url('/wp-content/themes/obsidian/assets/fonts/AkzidenzGroteskBE-Light.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/themes/obsidian/assets/fonts/AkzidenzGroteskBE-Light.woff2') format('woff2'),
        url('/wp-content/themes/obsidian/assets/fonts/AkzidenzGroteskBE-Light.woff') format('woff'),
        url('/wp-content/themes/obsidian/assets/fonts/AkzidenzGroteskBE-Light.ttf') format('truetype'),
        url('/wp-content/themes/obsidian/assets/fonts/AkzidenzGroteskBE-Light.svg#AkzidenzGroteskBE-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}
body{
height:100%;
font-family: 'Berthold Akzidenz-Grotesk', sans-serif;
    width:100%;
    margin: 0;
    padding: 0;
font-size: 20px;
}
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



/* .button */

.button {
    display: inline-block;
    position: relative;
    min-height: 50vh;
    width: 25%;
    line-height: 50vh;
    overflow: hidden;
    text-decoration: none;
    float: left;
    font-size: 30vh;
    outline: none;
    text-align: center;
    color: black;
    
    /* font-family: 'raleway', sans-serif;*/
    border: none;
    text-transform: uppercase;
}

.button span {
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.button:before,
.button:after {
    content: '';
    position: absolute;
    background: #c8e9ef;
    /*top: 0.67em; */
    font-size: 1.7vw;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 1;
    -webkit-transition: .2s,opacity .8s;
    -moz-transition: .2s,opacity .8s;
    -o-transition: .2s,opacity .8s;
    transition: .2s,opacity .8s;
}

/* :before */

.button:before {
    content: attr(data-hover);
    -webkit-transform: translate(-150%,0);
    -moz-transform: translate(-150%,0);
    -ms-transform: translate(-150%,0);
    -o-transform: translate(-150%,0);
    transform: translate(-150%,0);
}

/* :after */



/* Span on :hover  */

.button:hover span, .button.hover span {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3);
}

/*  
    We show :before pseudo-element on :hover 
    and :after pseudo-element on :active 
*/

.button:hover:before, .button.hover:before{
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
    -webkit-transition-delay: .2s;
    -moz-transition-delay: .2s;
    -o-transition-delay: .2s;
    transition-delay: .2s;
}

/* 
  We hide :before pseudo-element on :active
*/

.button2 {
    display: inline-block;
    position: relative;
    min-height: 50vh;
    width: 25%;
    line-height: 50vh;
    overflow: hidden;
    text-decoration: none;
    float: left;
    font-size: 30vh;
    outline: none;
    text-align: center;
    color: black;
    
    /* font-family: 'raleway', sans-serif;*/
    border: none;
    text-transform: uppercase;
}

.button2 span {
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.button2:before,
.button2:after {
    content: '';
    position: absolute;
    background: #8bcc97;
    /*top: 0.67em; */
    font-size: 1.7vw;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 1;
    -webkit-transition: .2s,opacity .8s;
    -moz-transition: .2s,opacity .8s;
    -o-transition: .2s,opacity .8s;
    transition: .2s,opacity .8s;
}

/* :before */

.button2:before {
    content: attr(data-hover);
    -webkit-transform: translate(-150%,0);
    -moz-transform: translate(-150%,0);
    -ms-transform: translate(-150%,0);
    -o-transform: translate(-150%,0);
    transform: translate(-150%,0);
}

/* :after */



/* Span on :hover  */

.button2:hover span {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3);
}

/*  
    We show :before pseudo-element on :hover 
    and :after pseudo-element on :active 
*/

.button2:hover:before {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
    -webkit-transition-delay: .2s;
    -moz-transition-delay: .2s;
    -o-transition-delay: .2s;
    transition-delay: .2s;
}

.button3 {
    display: inline-block;
    position: relative;
    min-height: 50vh;
    width: 25%;
    line-height: 50vh;
    overflow: hidden;
    text-decoration: none;
    float: left;
    font-size: 30vh;
    outline: none;
    text-align: center;
    color: black;
    
    /* font-family: 'raleway', sans-serif;*/
    border: none;
    text-transform: uppercase;
}

.button3 span {
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.button3:before,
.button3:after {
    content: '';
    position: absolute;
    background: #ef4130;
    /*top: 0.67em; */
    font-size: 1.7vw;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 1;
    -webkit-transition: .2s,opacity .8s;
    -moz-transition: .2s,opacity .8s;
    -o-transition: .2s,opacity .8s;
    transition: .2s,opacity .8s;
}

/* :before */

.button3:before {
    content: attr(data-hover);
    -webkit-transform: translate(-150%,0);
    -moz-transform: translate(-150%,0);
    -ms-transform: translate(-150%,0);
    -o-transform: translate(-150%,0);
    transform: translate(-150%,0);
}

/* :after */



/* Span on :hover  */

.button3:hover span {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3);
}

/*  
    We show :before pseudo-element on :hover 
    and :after pseudo-element on :active 
*/

.button3:hover:before {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
    -webkit-transition-delay: .2s;
    -moz-transition-delay: .2s;
    -o-transition-delay: .2s;
    transition-delay: .2s;
}

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

    .button {
    display: inline-block;
    position: relative;
    min-height: 25vh !important;
    width: 50% !important;
line-height: 25vh !important;
    overflow: hidden;
    text-decoration: none;
    float: left;
    font-size: 18vh !important;
    outline: none;
    text-align: center;
    color: black;
    
    /* font-family: 'raleway', sans-serif;*/
    border: none;
    text-transform: uppercase;
}
.button2 {
    display: inline-block;
    position: relative;
    min-height: 25vh !important;
    width: 50% !important;
line-height: 25vh !important;
    overflow: hidden;
    text-decoration: none;
    float: left;
    font-size: 18vh !important;
    outline: none;
    text-align: center;
    color: black;
    
    /* font-family: 'raleway', sans-serif;*/
    border: none;
    text-transform: uppercase;
}
.button3 {
    display: inline-block;
    position: relative;
    min-height: 25vh !important;
    width: 50% !important;
line-height: 25vh !important;
    overflow: hidden;
    text-decoration: none;
    float: left;
    font-size: 18vh !important;
    outline: none;
    text-align: center;
    color: black;
    
    /* font-family: 'raleway', sans-serif;*/
    border: none;
    text-transform: uppercase;
}
.button:before,
.button:after {
    font-size: 2vh !important;
    }
.button2:before,
.button2:after {
    font-size: 2vh !important;
    }
.button3:before,
.button3:after {
    font-size: 2vh !important;
    }

    }