/*! * Start Bootstrap - One Page Wonder (http://startbootstrap.com/template-overviews/one-page-wonder) * Copyright 2013-2017 Start Bootstrap * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-one-page-wonder/blob/master/LICENSE) */ @font-face { font-family: Merriweather; src: url('../merriweather/Merriweather-Regular.ttf'); } @font-face { font-family: Merriweather; src: url('../merriweather/Merriweather-Bold.ttf'); } @font-face { font-family: Arial Black; src: url('../arial-black/Arial Black.ttf'); } body { padding-top: 54px; } @media (min-width: 992px) { body { padding-top: 56px; } } header.masthead { background: url('../img/1.png') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; margin-top: -10%; } header.masthead > .overlay { padding: 5rem 0; text-align: center; /*background: rgba(0, 0, 0, 0.6);*/ } @media (min-width: 992px) { header.masthead > .overlay { padding: 10rem 0; } } .hovereffect { width: 100%; height: 100%; float: left; overflow: hidden; position: relative; cursor: default; } .hovereffect .overlay { position: absolute; overflow: hidden; width: 80%; height: 80%; left: 10%; top: 10%; border-bottom: 1px solid #FFF; border-top: 1px solid #FFF; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(0,1); -ms-transform: scale(0,1); transform: scale(0,1); } .hovereffect:hover .overlay { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .hovereffect img { display: block; position: relative; -webkit-transition: all 0.35s; transition: all 0.35s; } .hovereffect:hover img { filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: brightness(0.6); -webkit-filter: brightness(0.6); } .hovereffect h2 { text-transform: uppercase; text-align: center; position: relative; font-size: 17px; background-color: transparent; color: #FFF; padding: 1em 0; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } .hovereffect a, .hovereffect p { color: #FFF; padding: 1em 0; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); } .hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }