/*CSS Document*/
/*MAIN CSS SETTINGS*/
html, body {
margin: 0px;
padding: 0px;
width: 100vw;
}
p, h1, h2, h3, h4, h5, ul {
font-family: Arial, Helvetica, sans-serif;
}
/*LINK STYLING*/
/* unvisited link */
a:link {
color: white;
text-decoration: none;
transition: color 1s ease;
-webkit-transition: color 1s ease;
}
/* visited link */
a:visited {
color: white;
text-decoration: none;
transition: color 1s ease;
-webkit-transition: color 1s ease;
}
/* mouse over link */
a:hover, ::selection {
color: lightgrey;
text-decoration: none;
-webkit-transition: color 1s; /* Safari */
transition: color 1s;
}
/* selected link */
a:active {
color: grey;
text-decoration: none;
transition: color 1s ease;
-webkit-transition: color 1s ease;
}
/*END LINK STYLING*/
/*ARROW*/
.arrow {
position: absolute;
width: 4vh;
height: 4vh;
-ms-transform: rotate(135deg); /* IE 9 */
-webkit-transform: rotate(135deg); /* Safari */
transform: rotate(135deg); /* Standard syntax */
border-top: 10px solid white;
border-right: 10px solid white;
margin-top: 60vh;
margin-left: 48vw;
}
.arrow {
-webkit-animation: wiggle 0.5s infinite;
-moz-animation: wiggle 0.5s infinite;
animation: wiggle 0.5s infinite;
}
/* safari and chrome */
@-webkit-keyframes wiggle {
0% {-webkit-transform:rotate(127deg);}
50% {-webkit-transform:rotate(143deg);}
100% {-webkit-transform: rotate(127deg);}
}
/* firefox */
@-moz-keyframes wiggle {
0% {-moz-transform:rotate(127deg);}
50% {-moz-transform:rotate(143deg);}
100% {-moz-transform:rotate(127deg);}
}
/* anyone brave enough to implement the ideal method */
@keyframes wiggle {
0% {transform:rotate(127deg);}
50% {transform:rotate(143deg);}
100% {transform:rotate(127deg);}
}
/*END ARROW*/
/*END MAIN SETTINGS CSS*/
/*SCROLLBAR*/
::-webkit-scrollbar-track {
visibility: hidden;
}
::-webkit-scrollbar {
visibility: hidden;
}
::-webkit-scrollbar-thumb {
visibility: hidden;
}
/*SITE ARE*/
/*TITLE AREA*/
/*MENU AREA*/
/*CONTENT AREA*/
.content_page {
width: 100vw;
height: 99vh;
margin-bottom: 1vh;
}
.content_page h1 {
font-family: 'Cinzel', serif;
margin: 0px;
padding-top: 8vh;
font-size: 6vw;
text-align: center;
color: white;
}
.page1, .page2, .page3 {
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.page1 {
background-image: url("images/brickwall3.jpg");
}
.page2 {
background-image: url("images/brickwall6.jpg");
}
.page3 {
background-image: url("images/brickwall.jpg");
}
.title_underline {
height: .85vw;
width: 50vw;
background-color: white;
margin-left: 25vw;
border-top-left-radius: 1vw;
border-bottom-right-radius: 1vw;
}
.outer_page1_text, .outer_page2_text {
float: right;
width: 34vw;
height: 50vh;
margin-top: 10vh;
margin-right: 24vw;
}
.page1_text, .page2_text {
position: absolute;
width: 34vw;
height: 50vh;
/*FONT SETTINGS*/
color: white;
word-wrap: break-word;
}
.page1_text h2, .page2_text h2 {
margin: 0px;
font-size: 3vw;
}
.page1_text p, .page2_text p {
font-size: 2vw;
}
.page2 p {
text-align: justify;
}
.page1_text_background, .page2_text_background {
position: absolute;
width: 34vw;
height: 50vh;
-webkit-filter: blur(100px); /* Safari 6.0 - 9.0 */
filter: blur(100px);
background-color: rgba(0,0,0,.5);
}
/*FOOTER AREA*/
@media screen and (max-width: 800px) {
@media screen and (orientation:landscape) {
.content_page {
height: 220vw;
}
}
html {
background-image: url("images/brickwall3_1.jpg");
background-size: 100vw;
}
/*SITE ARE*/
.content_page {
height: 120vh;
}
.page1, .page2, .page3 {
background-image: none;
}
.arrow {
margin-left: 85vw;
}
/*TITLE AREA*/
.content_page h1 {
font-size: 13vw;
}
/*MENU AREA*/
/*CONTENT AREA*/
.outer_page1_text, .outer_page2_text {
float: center;
width: 90vw;
height: 60vh;
margin: 5vh 5vw;
}
.page1_text, .page2_text {
position: absolute;
width: 90vw;
height: 60vh;
/*FONT SETTINGS*/
color: white;
word-wrap: break-word;
}
.page1_text h2, .page2_text h2 {
margin: 0px;
font-size: 7vw;
}
.page1_text p, .page2_text p {
font-size: 7vw;
}
.page2 p {
text-align: left;
}
.page1_text_background, .page2_text_background {
position: absolute;
width: 34vw;
height: 50vh;
-webkit-filter: blur(100px); /* Safari 6.0 - 9.0 */
filter: blur(100px);
background-color: rgba(0,0,0,.5);
}
/*FOOTER AREA*/
}