633 lines
12 KiB
CSS
633 lines
12 KiB
CSS
body {
|
||
color: #222;
|
||
font-family: 'montserrat', sans-serif;
|
||
background-color: #FBFBFB;
|
||
margin: 0;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.header {
|
||
color: #8a8989;
|
||
text-align: center;
|
||
font-size: 5.5vw;
|
||
}
|
||
|
||
.galleries-grid {
|
||
width: 100%;
|
||
position: relative;
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
padding: 0px;
|
||
}
|
||
|
||
.galleries-line {
|
||
width: 100%;
|
||
margin-bottom: -5px; /* YOLO */
|
||
}
|
||
|
||
.covers-1 .gallery-square {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: auto;
|
||
/*padding-bottom: 47%;*/
|
||
position: relative;
|
||
}
|
||
|
||
.covers-2 .gallery-square {
|
||
width: 50%;
|
||
height: 100%;
|
||
margin: 0 0 0;
|
||
/*padding-bottom: 47%;*/
|
||
position: relative;
|
||
display: inline-grid;
|
||
}
|
||
|
||
.covers-3 .gallery-square {
|
||
width: 33.333333333%;
|
||
height: 100%;
|
||
margin: 0;
|
||
/*padding-bottom: 47%;*/
|
||
position: relative;
|
||
display: inline-grid;
|
||
}
|
||
|
||
.gallery-square a {
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 0px;
|
||
z-index: 555;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
@keyframes darken {
|
||
from {background-color: rgba(0, 0, 0, 0);}
|
||
to {background-color: rgba(0, 0, 0, 0.3);}
|
||
}
|
||
|
||
.gallery-square a:hover {
|
||
animation-name: darken;
|
||
animation-duration: 0.15s;
|
||
animation-iteration-count: 1;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.gallery-cover {
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 0px;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-position: center center;
|
||
background-size: cover;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.gallery-title {
|
||
color: white;
|
||
width: 100%;
|
||
position: absolute;
|
||
top: initial;
|
||
bottom: 0px;
|
||
text-align: center;
|
||
z-index: 3;
|
||
background: transparent linear-gradient(rgba(255, 255, 255, 0) 0%, transparent 1%, rgba(0, 0, 0, 0.07) 26%, rgba(0, 0, 0, 0.5) 71%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0% 0%;
|
||
padding: 20% 0 10px 0;
|
||
}
|
||
|
||
.gallery-header {
|
||
text-align: center;
|
||
margin-top: 8em;
|
||
margin-bottom: 6.5em;
|
||
}
|
||
|
||
.static-header {
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
#logo {
|
||
width: 10%;
|
||
}
|
||
|
||
.gallery-header > h1 {
|
||
font-size: 2.6vw;
|
||
text-transform: uppercase;
|
||
letter-spacing: 3px;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.gallery-header > h4 {
|
||
font-size: 1.4vw;
|
||
color: #444;
|
||
font-style: italic;
|
||
font-weight: normal;
|
||
font-family: 'crimson', serif;
|
||
margin-top: .5em;
|
||
}
|
||
|
||
.gallery-header > hr {
|
||
width: 14%;
|
||
margin-top: 3.5em;
|
||
color: #BBB;
|
||
}
|
||
|
||
.gallery-title > h2 {
|
||
text-transform: uppercase;
|
||
margin-bottom: .2em;
|
||
letter-spacing: 2px;
|
||
font-size: 1.7vw;
|
||
}
|
||
|
||
.gallery-title > h3 {
|
||
font-style: italic;
|
||
margin-top: 0;
|
||
margin-bottom: .7em;
|
||
font-family: 'crimson', serif;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.gallery-datetime {
|
||
font-family: 'crimson', serif;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
footer {
|
||
margin-top: 7em;
|
||
text-align: center;
|
||
position: relative;
|
||
font-family: 'crimson', serif;
|
||
font-size: 11px;
|
||
color: #555;
|
||
background-color: #EEE;
|
||
border-top: solid 2px #DDD;
|
||
padding-bottom: 10px;
|
||
padding-top: 14px;
|
||
}
|
||
|
||
footer p {
|
||
margin: 0;
|
||
}
|
||
|
||
footer a {
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
font-family: 'montserrat', sans-serif;
|
||
color: #111;
|
||
}
|
||
|
||
nav.old {
|
||
background-color: #FBFBFB;
|
||
width: 100%;
|
||
height: 56px;
|
||
line-height: 56px;
|
||
}
|
||
|
||
body.night nav.old {
|
||
background-color: #061F2F;;
|
||
}
|
||
|
||
nav.old .nav-wrapper {
|
||
position: relative;
|
||
height: 100%;
|
||
margin: 0px auto;
|
||
max-width: 1280px;
|
||
}
|
||
|
||
nav.old ul {
|
||
margin: 0;
|
||
}
|
||
|
||
nav.old ul li {
|
||
padding: 0;
|
||
list-style-type: none;
|
||
display:inline-block;
|
||
}
|
||
|
||
nav.old a.first-item-menu {
|
||
margin-left: -42px;
|
||
}
|
||
|
||
nav.old ul li.active {
|
||
background-color: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
nav.old ul a {
|
||
transition: background-color .3s;
|
||
font-size: 1rem;
|
||
display: block;
|
||
padding: 0 15px;
|
||
cursor: pointer;
|
||
text-transform: uppercase;
|
||
margin: 0px;
|
||
letter-spacing: 1px;
|
||
font-weight: 700;
|
||
color: #424242;
|
||
font-style: normal !important;
|
||
}
|
||
|
||
.center, .center-align {
|
||
text-align: center;
|
||
}
|
||
|
||
nav.old ul li > a.item-menu::before {
|
||
content: "/";
|
||
margin-right: 22px;
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
color: #cfcfcf;
|
||
}
|
||
|
||
.gallery-tag {
|
||
font-size: 13px;
|
||
text-transform: uppercase;
|
||
font-style: normal;
|
||
display: inline;
|
||
font-family: "adobe-garamond-pro", serif;
|
||
}
|
||
|
||
.gallery-tag span {
|
||
font-size: 12px;
|
||
border-bottom: solid 1px rgba(255,255,255,0.2);
|
||
display: inline-block;
|
||
margin: 0 0 0 3px;
|
||
font-weight: bold;
|
||
font-family: "europa", sans-serif;
|
||
text-transform: uppercase;
|
||
letter-spacing: 3px;
|
||
font-style: normal;
|
||
}
|
||
|
||
.gallery-cover video.fillWidth {
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 0px;
|
||
}
|
||
|
||
.gallery-cover img.fillWidth,
|
||
.gallery-cover video.fillWidth {
|
||
top: 0;bottom: 0;right: 0;left: 0;margin: auto;
|
||
}
|
||
|
||
.gallery-cover video.fillWidth {
|
||
min-width: 50%;
|
||
}
|
||
|
||
.back-to-home {
|
||
text-align: center;
|
||
}
|
||
|
||
.back-to-home hr {
|
||
width: 14%;
|
||
color: #DDD;
|
||
}
|
||
|
||
.back-to-home #logo {
|
||
background: transparent url("../img/logo.svg") no-repeat scroll center top / cover;
|
||
border-radius: 100em;
|
||
border: 7px solid black;
|
||
margin: auto;
|
||
margin-top: 1em;
|
||
height: 150px;
|
||
width: 150px;
|
||
color: transparent;
|
||
font-size: 40px;
|
||
}
|
||
|
||
.back-to-home a {
|
||
position: relative;
|
||
text-decoration: none;
|
||
color: transparent;
|
||
}
|
||
|
||
.back-to-home #logo:hover {
|
||
background-color: black;
|
||
text-decoration: none;
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
text-transform: uppercase;
|
||
font-family: 'montserrat', sans-serif;
|
||
font-weight: bold;
|
||
}
|
||
|
||
body.night {
|
||
background-color: #061F2F;
|
||
color: #d3d4d4;
|
||
}
|
||
|
||
body.night footer {
|
||
background-color: #0f1b29;
|
||
color: #fff;
|
||
}
|
||
|
||
body.night footer a {
|
||
color: #fff;
|
||
}
|
||
|
||
body.night ul.icon a {
|
||
-webkit-filter: invert(1);
|
||
filter: invert(1);
|
||
}
|
||
|
||
body.night .back-to-home #logo {
|
||
-webkit-filter: invert(1);
|
||
filter: invert(1);
|
||
}
|
||
|
||
body.night a {
|
||
color: #9CD7F7;
|
||
}
|
||
|
||
body.night .audio-player {
|
||
background: #1f3341
|
||
}
|
||
|
||
body.night #logo {
|
||
-webkit-filter: invert(1);
|
||
filter: invert(1);
|
||
}
|
||
|
||
body.night .gallery-header h4 {
|
||
color: #c1f1f0;
|
||
}
|
||
|
||
.floating-menu {
|
||
font-family: sans-serif;
|
||
padding: 5px;;
|
||
width: 45px;
|
||
z-index: 556;
|
||
position: fixed;
|
||
bottom: 0px;
|
||
right: 0px;
|
||
}
|
||
|
||
.switch {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 40px;
|
||
height: 22px;
|
||
}
|
||
|
||
.switch input {display:none;}
|
||
|
||
.slider {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #ccc;
|
||
-webkit-transition: .4s;
|
||
transition: .4s;
|
||
}
|
||
|
||
.slider:before {
|
||
position: absolute;
|
||
content: "";
|
||
height: 15px;
|
||
width: 15px;
|
||
left: 4px;
|
||
bottom: 4px;
|
||
background-color: white;
|
||
}
|
||
|
||
input:checked + .slider {
|
||
background-color: #2196F3;
|
||
}
|
||
|
||
input:focus + .slider {
|
||
box-shadow: 0 0 1px #2196F3;
|
||
}
|
||
|
||
input:checked + .slider:before {
|
||
-webkit-transform: translateX(18px);
|
||
-ms-transform: translateX(18px);
|
||
transform: translateX(18px);
|
||
}
|
||
|
||
/* Rounded sliders */
|
||
.slider.round {
|
||
border-radius: 34px;
|
||
}
|
||
|
||
.slider.round:before {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.subgaldiv {
|
||
height: 50vh;
|
||
position: relative;
|
||
}
|
||
|
||
.gallery-tags_as_list {
|
||
text-align: left;
|
||
}
|
||
|
||
@media only screen and (max-device-width: 700px) {
|
||
.gallery-square {
|
||
width: 100% !important;
|
||
margin-bottom: -7px !important;
|
||
/*padding-bottom: 70% !important;*/
|
||
}
|
||
|
||
.gallery-title > h2 {
|
||
font-size: 3.7vw;
|
||
}
|
||
/* BEGIN polaroid-group */
|
||
a.polaroid {
|
||
/*Size by calculating image size*/
|
||
width: auto !important;
|
||
height: auto !important;
|
||
}
|
||
|
||
/* Size image for mobile so screen is not getting */
|
||
a.polaroid img {
|
||
-webkit-transform: scale(0.7); /* Saf3.1+, Chrome */
|
||
-moz-transform: scale(0.7); /* FF3.5+ */
|
||
-ms-transform: scale(0.7); /* IE9 */
|
||
-o-transform: scale(0.7); /* Opera 10.5+ */
|
||
transform: scale(0.7);
|
||
/* IE6–IE9 */
|
||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
|
||
}
|
||
|
||
a.polaroid h5 {
|
||
display: none !important; /*No image text on mobile - too small space*/
|
||
}
|
||
/* END polaroid-group */
|
||
}
|
||
|
||
/* These are added for the top nav menu for gallery pages (navmenu section) */
|
||
/* As you can see these use html id so should not clash with the default menu navigation CSS */
|
||
/* BEGIN: navmenu */
|
||
/* z-index: 2147483647; is the maximum, but I lowered it a bit */
|
||
.navmenu {
|
||
margin-bottom: 0;
|
||
margin-top: 0;
|
||
position: fixed;
|
||
top: 0px;
|
||
left: 0px;
|
||
z-index: 900;
|
||
}
|
||
|
||
#nav { /*nav rész szélességes, színe*/
|
||
width:100vw;
|
||
display:block;
|
||
background-color:#11bf22;
|
||
border-bottom:8px solid #006f18;
|
||
}
|
||
|
||
#nav p { /* For email and phone for example */
|
||
color:#FFF;
|
||
text-align:left;
|
||
font-size:2.5vmin;
|
||
padding:0;
|
||
margin:0;
|
||
}
|
||
|
||
#nav ul { /*lista stílus igazítás*/
|
||
padding:0;
|
||
margin:0;
|
||
list-style: none;
|
||
position: relative;
|
||
}
|
||
|
||
#nav ul:After {
|
||
content: "";
|
||
display:block;
|
||
clear:both;
|
||
}
|
||
|
||
#nav ul li {
|
||
display:list-item;
|
||
list-style: none;
|
||
float:left;
|
||
background-color:#11bf22;
|
||
}
|
||
|
||
#nav ul li i { /*betűméret - szélesség (ikonsor)*/
|
||
font-size:2.8vmin;
|
||
width:3.0vw;
|
||
}
|
||
|
||
#nav ul li a { /*betűméret - menü szöveg*/
|
||
display:block;
|
||
padding:1.5vh 3.0vw;
|
||
color:#FFF;
|
||
font-size:2.8vmin;
|
||
text-decoration:none;
|
||
font-family: Georgia, serif;
|
||
text-align:center;
|
||
}
|
||
|
||
#nav li a:hover { background-color: #5bbcb9; } /*hover szín*/
|
||
|
||
/* Dropdown */
|
||
/* almenük elrejtése */
|
||
#nav ul ul {
|
||
display: none;
|
||
position: absolute; top: 100%;
|
||
}
|
||
|
||
/* hover-re megjelenítés */
|
||
#nav ul li:hover > ul {
|
||
display:list-item;
|
||
}
|
||
|
||
/* almenük lista nézetben */
|
||
#nav ul ul li {
|
||
width:40vw;
|
||
float:none;
|
||
position: relative;
|
||
border-bottom:none;
|
||
}
|
||
|
||
#nav ul ul li i { /*almenü ikon igazítása*/
|
||
margin-right:12px;
|
||
}
|
||
|
||
#nav ul ul li a {
|
||
padding:16px 20px;
|
||
text-align:left;
|
||
}
|
||
|
||
/* 3. almenü követően */
|
||
nav ul ul ul li {
|
||
position: absolute relative;
|
||
top:-80px;
|
||
left:200px;
|
||
}
|
||
|
||
#nav li > a:after { content: ' >'; }
|
||
|
||
#nav > li > a:after {content: ' >'; }
|
||
|
||
#nav li > a:only-child:after {content: ''; }
|
||
/* END: navmenu */
|
||
|
||
/* START: polaroid-group */
|
||
|
||
.polaroid-line {
|
||
width: 70vw;
|
||
margin: auto;
|
||
position: relative; /*Needed when cust_pos becomes active and children are absolute positioned for this one*/
|
||
}
|
||
|
||
a.polaroid {
|
||
display: block;
|
||
padding: 10px 10px 25px 10px;
|
||
border: 2px solid #BFBFBF;
|
||
background-color: white;
|
||
z-index: 2;
|
||
/* Shadows around the box */
|
||
-webkit-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
|
||
-moz-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
|
||
box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
|
||
/* Transition to lower speed when removing rotation on hover */
|
||
-webkit-transition: -webkit-transform 0.6s ease-in;
|
||
transition: width 1s, height 1s, transform 1s;
|
||
-moz-transition: width 1s, height 1s, -moz-transform 1s;
|
||
-ms-transition: width 1s, height 1s, -ms-transform 1s;
|
||
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
|
||
-o-transition: width 1s, height 1s,-o-transform 1s;
|
||
text-align: center;
|
||
overflow: hidden; /*Bullet-proofing*/
|
||
margin: auto;
|
||
}
|
||
|
||
/* Remove rotation and make it visible (z-index) */
|
||
a.polaroid:hover,
|
||
a.polaroid:focus,
|
||
a.polaroid:active {
|
||
z-index: 100 !important;
|
||
border-color: #BFBFBF;
|
||
-webkit-box-shadow: 5px 5px 6px rgba(149,150,151,0.3); /* Same as above */
|
||
-moz-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
|
||
box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
|
||
/* The "!important" keywords is needed to override higher preference of generated inline styling! */
|
||
-webkit-transform: rotate(0deg) !important; /* Removes rotation through a transition */
|
||
-moz-transform: rotate(0deg) !important;
|
||
-ms-transform: rotate(0deg) !important;
|
||
transform: rotate(0deg) !important;
|
||
}
|
||
|
||
a.polaroid img {
|
||
border: none;
|
||
display: block;
|
||
min-width: 10vw;
|
||
max-width: 100%;
|
||
max-height: 85%; /* Never hide the text this way! */
|
||
margin: auto; /* Centers wth display: block */
|
||
}
|
||
|
||
/* END: polaroid-group */
|