| Current Path : /home/kamilrogam/komp/2018/180513/_MY_PROJECTS/kamin/css/ |
| Current File : /home/kamilrogam/komp/2018/180513/_MY_PROJECTS/kamin/css/main.css |
.lbox {
position: relative;
transition: all .2s ease;
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index: 999999999;
}
.loader:before {
content: "";
position: absolute;
top: 0px;
left: -25px;
height: 12px;
width: 12px;
border-radius: 12px;
-webkit-animation: loader10g 3s ease-in-out infinite;
animation: loader10g 3s ease-in-out infinite;
}
.loader {
position: fixed;
z-index: 9999999999;
width: 12px;
height: 12px;
left: 50%;
top: 50%;
margin-top: -6px;
margin-left: -6px;
border-radius: 12px;
-webkit-animation: loader10m 3s ease-in-out infinite;
animation: loader10m 3s ease-in-out infinite;
}
.loader:after {
content: "";
position: absolute;
top: 0px;
left: 25px;
height: 10px;
width: 10px;
border-radius: 10px;
-webkit-animation: loader10d 3s ease-in-out infinite;
animation: loader10d 3s ease-in-out infinite;
}
@-webkit-keyframes loader10g {
0% {
background-color: rgba(255, 255, 255, .2);
}
25% {
background-color: rgba(255, 255, 255, 1);
}
50% {
background-color: rgba(255, 255, 255, .2);
}
75% {
background-color: rgba(255, 255, 255, .2);
}
100% {
background-color: rgba(255, 255, 255, .2);
}
}
@keyframes loader10g {
0% {
background-color: rgba(255, 255, 255, .2);
}
25% {
background-color: rgba(255, 255, 255, 1);
}
50% {
background-color: rgba(255, 255, 255, .2);
}
75% {
background-color: rgba(255, 255, 255, .2);
}
100% {
background-color: rgba(255, 255, 255, .2);
}
}
@-webkit-keyframes loader10m {
0% {
background-color: rgba(255, 255, 255, .2);
}
25% {
background-color: rgba(255, 255, 255, .2);
}
50% {
background-color: rgba(255, 255, 255, 1);
}
75% {
background-color: rgba(255, 255, 255, .2);
}
100% {
background-color: rgba(255, 255, 255, .2);
}
}
@keyframes loader10m {
0% {
background-color: rgba(255, 255, 255, .2);
}
25% {
background-color: rgba(255, 255, 255, .2);
}
50% {
background-color: rgba(255, 255, 255, 1);
}
75% {
background-color: rgba(255, 255, 255, .2);
}
100% {
background-color: rgba(255, 255, 255, .2);
}
}
@-webkit-keyframes loader10d {
0% {
background-color: rgba(255, 255, 255, .2);
}
25% {
background-color: rgba(255, 255, 255, .2);
}
50% {
background-color: rgba(255, 255, 255, .2);
}
75% {
background-color: rgba(255, 255, 255, 1);
}
100% {
background-color: rgba(255, 255, 255, .2);
}
}
@keyframes loader10d {
0% {
background-color: rgba(255, 255, 255, .2);
}
25% {
background-color: rgba(255, 255, 255, .2);
}
50% {
background-color: rgba(255, 255, 255, .2);
}
75% {
background-color: rgba(255, 255, 255, 1);
}
100% {
background-color: rgba(255, 255, 255, .2);
}
}
* {
padding: 0;
margin: 0;
outline: none
}
body {
font-family: 'Arima Madurai', cursive;
font-size: 16px;
line-height: 19px;
color: #474a46;
width: 100%;
padding: 0;
word-wrap: break-word;
text-align: center;
-webkit-font-smoothing: antialiased!important;
font-smoothing: antialiased!important;
-moz-osx-font-smoothing: grayscale!important;
font-smooth: always!important;
background: #ffe0d2;
height: 100%;
position: relative
}
:after,
:before {
display: block;
content: '';
position: absolute
}
a {
text-decoration: none;
color: #7294b0
}
a:active,
a:hover,
a:focus {
text-decoration: none;
color: #23282d;
outline: 0
}
p {
margin-bottom: 0
}
ul,
ol {
margin-left: 0px;
text-align: left
}
ul li {
margin-left: 0px;
list-style-type: none;
display: list-item
}
img {
border: none;
max-width: 100%;
height: auto
}
hr {
border: none;
border-bottom: 1px solid #102235;
width: 300px!important;
margin: 0 auto 10px
}
img,
:before,
:after,
#toTop,
a {
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out
}
#toTop {
width: 100px;
z-index: 10;
border: 1px solid #000000;
background: #000000;
text-align: center;
padding: 5px;
position: fixed;
bottom: 0px;
right: 0px;
cursor: pointer;
display: none;
color: #FFFFFF;
text-transform: lowercase;
font-size: 12px
}
#toTop:hover {
color: #7294b0
}
.width {
width: 1000px;
margin: 0 auto;
position: relative;
border-left: 5px solid #474a46;
border-right: 5px solid #474a46;
padding: 25px
}
.img-cover {
width: 100%;
height: 100vh;
background: url('../img/intro.jpg') center center no-repeat fixed;
background-size: cover;
position: relative;
z-index: 9
}
.img-cover {
width: 100%;
height: 100vh;
background: url('../img/intro.jpg') center center no-repeat fixed;
background-size: cover;
position: relative;
z-index: 9
}
.anchor {
position: absolute;
left: 50%;
bottom: 0;
margin-left: -32px;
cursor: pointer
}
img.love {
max-width: 300px
}
h1,
h3 {
text-transform: uppercase
}
h1,
h2,
h3 {
font-weight: normal
}
h1 {
font-size: 50px;
line-height: 55px;
padding: 50px 0 30px
}
h2 {
font-size: 45px;
line-height: 50px;
font-style: italic;
padding: 100px 0
}
h3 {
font-size: 55px;
line-height: 60px;
padding: 35px 0 0
}
div#countdown {
font-size: 28px;
line-height: 35px;
padding: 10px 0 0
}
h2:before,
h2:after {
background: #474a46;
left: 50%;
width: 400px;
margin-left: -200px
}
h2:before {
height: 5px;
margin-top: -35px
}
h2:after {
height: 10px;
margin-top: 25px
}
h3 span:nth-child(2) {
margin-left: 15px
}
h3 span:nth-child(3) {
margin-left: 15px
}
.width.loveimg {
padding: 100px 25px 50px;
}
.float-container {
display: table;
width: 100%;
clear: both
}
.floatl {
float: left;
position: relative;
width: 500px
}
.floatr {
float: right;
width: 450px;
padding: 55px 0 0 50px
}
.txt {
font-family: 'Abril Fatface', cursive;
position: absolute;
top: 50%;
left: 50px;
margin-top: -264.5px;
font-size: 150px;
line-height: 175px;
color: #e6e6e6;
padding: 10px;
text-transform: uppercase;
max-width: 525px;
text-align: center
}
.txt span,
.fb a {
display: block
}
.controls button {
cursor: pointer;
position: fixed;
right: 30px;
bottom: 5px;
border: 0;
width: 24px;
height: 24px;
padding: 5px
}
.play {
background: url('../img/mute.png') center center no-repeat
}
.pause {
background: url('../img/volume.png') center center no-repeat
}
.fancybox-thumbs img {
filter: saturate(100%);
-webkit-filter: saturate(100%);
-moz-filter: saturate(100%);
-o-filter: saturate(100%);
-ms-filter: saturate(100%);
width: 200px
}
.fancybox-thumbs:hover img {
filter: saturate(150%);
-webkit-filter: saturate(150%);
-moz-filter: saturate(150%);
-o-filter: saturate(150%);
-ms-filter: saturate(150%)
}
.fb {
position: fixed;
left: 30px;
bottom: 3px;
border: 0;
width: 30px;
height: 30px
}
.fb a img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%)
}
.fb a:hover img {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%)
}
.copyrights {
position: absolute;
right: 0;
bottom: 0;
padding: 7px 10px 4.5px;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.3);
font-size: 13px;
line-height: 13px;
}
.copyrights a {
color: #fff;
}
p.godzina {
font-size: 40px;
text-transform: lowercase
}
.map p {
margin: 0 0 10px
}
@media screen and (max-width:1200px) {
.width {
width: 80%;
padding: 25px 5%;
}
.width.loveimg {
padding: 100px 5% 50px;
}
.floatr {
display: none;
}
.floatl {
float: none;
width: 100%
}
}
@media screen and (max-width:650px) {
.txt {
left: 5%;
font-size: 85px;
line-height: 90px;
margin-top: -145px;
}
img.love {
max-width: 80%
}
h1 span {
display: block
}
h2:before,
h2:after {
width: 80%;
margin-left: -40%;
}
h3 span {
margin: 0 !important;
display: block;
}
h3 {
font-size: 45px;
line-height: 55px;
}
p.godzina {
font-size: 35px;
line-height: 45px;
}
div#countdown {
font-size: 23px;
line-height: 28px;
}
}
@media screen and (max-width:450px) {
.txt {
margin-top: 0;
top: auto;
bottom: 50px;
}
}
@media screen and (max-width:350px) {
.txt {
max-width: 100%;
width: auto;
font-size: 75px;
line-height: 75px;
}
}
@media screen and (max-height:610px) {
.txt {
font-size: 75px;
line-height: 75px;
margin-top: 0;
top: auto;
bottom: 50px;
}
}