html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
.cf:after, .slick-dots:after {
content: "";
display: table;
clear: both;
}
*, *:before, *:after {
box-sizing: border-box;
}
.container {
position: relative;
}
.slick-dots {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0 3px;
}
.slick-dots li {
cursor: pointer;
float: left;
width: 25%;
padding: 0;
border-right: 1px solid #fff;
}
.slick-dots li:last-child {
border: none;
}
.slick-dots li, .slick-dots li button {
outline: none;
}
.slick-dots li button {
background: #FAAB18;
border: none;
width: 0px;
height: 5px;
padding: 0;
cursor: pointer;
display: none;
}
.slick-slide .img--holder {
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}
.contact-page-map {
width:100%;
height:auto;
}
.contact-page-left {
width:50%;
float:left;
}
.contact-page-right {
width:49%;
float:left;
margin-left:1%;
}
.contact {padding: 80px 0px 40px;}
.contact-form input, textarea, select {
width: 90%;
height: 45px;
border: 1px solid #999;
padding: 0px 15px;
font-size: 14px;
margin-bottom: 15px;
text-transform: none;
color: #000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 1px solid #999;
OUTLINE: NONE;
}
.contact-form form {padding-top: 10px;}
.contact-form textarea {height: 120px; padding-top: 10px;}
.contact-form input[type="submit"] {
width: 120px;
color: #fff;
text-align: center;
border: 0px none;
background-color: #000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
}
.contact-form input[type="submit"]:hover {background: #222;}
.social {
width: 200px;
height: 220px;
position: fixed;
margin-top: 18%;
perspective: 1000px;
z-index:9999;
}
.social li a {
display: block;
height: 40px;
width: 40px;
background: #fff;
border-bottom: 1px solid #333;
font: normal normal normal
16px/20px
'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
color: #000;
-webkit-font-smoothing: antialiased;
padding: 10px;
text-decoration: none;
text-align: center;
transition: background .5s ease .300ms
}
.social li:first-child a:hover { background: #3b5998 }
.social li:nth-child(2) a:hover { background: #00acee }
.social li:nth-child(3) a:hover { background: #8A0889 }
.social li:nth-child(4) a:hover { background: #dd4b39 }
.social li:first-child a { border-radius: 0 5px 0 0 }
.social li:last-child a { border-radius: 0 0 5px 0 }
.social li a span {
width: 100px;
float: left;
text-align: center;
background: #222;
color: #fff;
margin: -25px 45px;
padding: 8px;
transform-origin: 0;
visibility: hidden;
opacity: 0;
transform: rotateY(45deg);
border-radius: 5px;
transition: all .5s ease .300ms
}
.social li span:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 7px;
border: 10px solid transparent;
border-right: 10px solid #222;
}
.social li a:hover span {
visibility: visible;
opacity: 1;
transform: rotateY(0)
}
.wrapper {
height: 100vh;
margin-left: auto;
margin-right: auto;
position: relative;
}
/* -------------------------------------------------------------------------
begin Scroll Down Button
* ------------------------------------------------------------------------- */
button.scroll_down {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
height: 50px;
width: 30px;
bottom: 60px;
background-color: transparent;
border: 2px solid white;
border-radius: 20px;
cursor: pointer;
outline: none;
}
button.scroll_down:before {
position: absolute;
top: 10px;
left: 50%;
content: '';
width: 6px;
height: 6px;
margin-left: -3px;
background-color: #fff;
border-radius: 100%;
-webkit-animation: scroll_down_btn-animation 2s infinite;
animation: scroll_down_btn-animation 2s infinite;
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
.loader{
height: 10px;
background-color: #000;
position: absolute;
}
.content{
height: 100vh;
width: 100%;
background: #000;
display: none;
}
@keyframes scroll_down_btn-animation {
0% {
transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
transform: translate(0, 20px);
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes scroll_down_btn-animation {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
-webkit-transform: translate(0, 20px);
transform: translate(0, 20px);
opacity: 0;
}
100% {
opacity: 0;
}
}
/* -------------------------------------------------------------------------
end Scroll Down Button
* ------------------------------------------------------------------------- */
/* ## Test ## */
.block {
height: auto;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.social {
width: 200px;
height: 220px;
position: fixed;
margin-top: 69%;
perspective: 1000px;
z-index:9999;
}
}