html {
background-color: #f7f7f7;
background-image: url(../../images/flakes3.png);
color: inherit;
}
.thumb-img {
border-color: #000000 !important;
}
#loupeContainer div.background {
background-color: #f7f7f7;
background-image: url(../../images/flakes3.png);
color: inherit;
}
header div.background {
background-color: transparent !important;
color: inherit;
}
.custom-colorable {
fill: #C9D1D3 !important;
}
body {
background-color: #f7f7f7;
background-image: url(../../images/flakes3.png);
color: #828282 !important;
}
h1 {
text-align: center;
}
p {
font-size: 1.25em;
}
a {
color: #991818;
text-decoration: none;
-webkit-transition: .3s;
transition: .3s;
}
a:hover {
color: #3B3737;
}
/*********************************************************************************
KUHRTS EDITS
**********************************************************************************
1. Header
2. Instructions Section
3. Thumbnail Container
4. Footer
5. Media Queries
*********************************************************************************/
.kwrapper {
max-width: 1000px;
margin: 0 auto;
}
/*===== 1. Header =====*/
#logo {
position: relative;
width: 400px;
padding-bottom: 1em;
}
#galleryTitle {
color: #3B3737;
}
/*===== 2. Instructions Section =====*/
#instructions {
color: #3B3737;
text-align: center;
max-width: 1000px;
padding: 10em 1.5em 6em;
margin: 0 auto;
}
form div {
position: relative;
margin: 35px 0;
}
label {
position: absolute;
top: 0;
color: #991818;
font-size: 30px;
margin: 10px;
padding: 0 10px;
background-color: #f7f7f7;
-webkit-transition: top .2s ease-in-out,
font-size .2s ease-in-out;
transition: top .2s ease-in-out,
font-size .2s ease-in-out;
}
.active {
top: -25px;
font-size: 20px;
}
input[type=text] {
width: 90%;
padding: 20px;
border: 1px solid #828282;
font-size: 20px;
background-color: #f7f7f7;
color: #3B3737;
}
input[type=text]:focus {
outline: none;
}
.g-recaptcha div div {
margin: 0 auto;
}
.btn {
width: 75%;
max-width: 250px;
height: 60px;
margin: 10px auto;
border: 2px solid #3B3737;
background-color: #f7f7f7;
color: #991818;
text-align: center;
font-size: 1.5em;
position: relative;
overflow:hidden;
-webkit-transition: .3s;
transition: .3s;
}
.btn:after {
position: absolute;
transition: .3s;
content: '';
width: 0;
left: 50%;
bottom: 0;
height: 3px;
background: #3B3737;
left: 0;
bottom: auto;
top: -3px;
width: 100%;
}
.btn:hover {
cursor: pointer;
}
.btn:hover:after {
width: 100%;
left: 0;
top: calc(100% - 3px);
}
.btn input[type=submit] {
height: 100%;
width: 100%;
background: transparent;
color: #991818;
border: none;
}
/*===== 3. Thumbnail Container =====*/
.has-header #thumbnailContainer {
padding: 0;
}
#thumbnailContainer .thumbnails {
margin-top: 8px;
}
.downloadButton {
position: relative;
background-color: #991818;
color: #FFF;
font-size: 1.5em;
border-radius: 5px;
padding: .5em .75em;
}
.downloadButton:hover {
color: #C9D1D3;
}
.downloadButton:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
background-color: #C9D1D3;
-webkit-transition: .3s;
transition: .3s;
height: 6px;
width: 0;
z-index: 1;
}
.downloadButton:hover::after {
content: '';
width: 100%;
}
/*===== 4. Footer =====*/
footer {
background-color: #991818;
}
footer div {
text-align: center;
padding: 1em;
margin: 0 auto;
}
footer div i {
margin: 0 .5em;
}
footer a {
color: #f7f7f7;
}
footer a:hover {
color: #f7f7f7;
}
/*===== 5. Media Queries =====*/
@media screen and (max-width: 480px) {
#logo {
width: 300px;
}
}