/*css*/
@import "../css/reset.css";
@import "../css/skeleton.css";
@import "../css/font-awesome.css";
@import "../css/superfish.css";
@import "../css/italic.css";
@import "../css/Jockey.css";
@import "../css/family.css";
body{
min-width: 960px;
font: 12px/22px 'Arial';
color: #8f8e8e;
}
p {
margin-bottom: 22px;
}
img {
max-width: 100%;
}
input {
border-radius: 0 !important;
outline: none !important;
-webkit-appearance: none;
}
h2{
font-size: 48px;
line-height: 48px;
letter-spacing: -4px;
font-family: 'Cantarell', sans-serif;
color: #fff;
}
h3{
line-height: 39px;
color: #fff;
text-shadow: 1px 1px 0px #ADADAD;
font-family: 'sans-serif';
font-size: 48px;
text-transform: uppercase;
padding-bottom: 28px;
margin-bottom: 30px;
}
h4{
margin-bottom: 14px;
text-transform: uppercase;
font: 36px/30px 'sans-serif';
display: inline-block;
color: #000;
}
h5{
font: 33px/36px 'sans-serif';
text-transform: uppercase;
color: #2f2f2f;
margin-bottom: 22px;
}
h6{
padding: 65px 0 18px;
margin-bottom: 18px;
color: #444;
position: relative;
font: 38px/38px 'sans-serif';
}
h6:before{
content: '';
bottom: 0;
text-align: center;
width: 146px;
right: 17%;
position: absolute;
height: 1px;
display: inline-block;
background: #d3d3d3;
}
a[href^="tel:"] {
color: inherit;
text-decoration: none;
}
* {
-webkit-text-size-adjust: none;
}
figure{
position: relative;
}
figcaption{
color: #fff;
text-transform: uppercase;
right: 28px;
position: absolute;
font: bold 48px/44px 'Arial';
text-align: right;
bottom: 32px;
}
figcaption span{
font-size: 36px;
display: block;
}
/*-----------Header------------*/
#header{
text-align: center;
}
#header h1{
clear: both;
padding-top: 44px;
margin-bottom: 40px;
display: inline-block;
}
#header h1 img{
display: block;
}
.shadow{
position: relative;
background: url('../images/bg4.png') center 148px no-repeat;
}
h2 span{
font-size: 68px;
display: block;
margin-bottom: 10px;
}
.brd1{
border-bottom: #e6f9fe solid 1px;
}
.brd2{
border-bottom: #fde9f0 solid 1px;
}
.brd3{
border-bottom: #f5fceb solid 1px;
}
.item{
padding: 60px 19px 64px;
margin-top: 28px;
}
.item1{
background: #00bff3;
}
.item2{
background: #ee1c67;
}
.item3{
background: #94e238;
}
/*-----------Content-----------*/
#content{
text-align: center;
}
.bg1{
background: url('../images/bg1.jpg');
padding-bottom: 49px;
border-top: 1px solid #e5e5e5;
}
.bg6{
background: url('../images/bg1.jpg');
padding-bottom: 65px;
border-top: 1px solid #e5e5e5;
}
.bg2{
background: url('../images/bg1.jpg');
padding-bottom: 49px;
}
.bg3{
background: url('../images/bg6.jpg');
padding-bottom: 10px;
border-top: 1px solid #e5e5e5;
}
.bg5{
background: url('../images/bg6.jpg');
padding-bottom: 50px;
border-top: 1px solid #e5e5e5;
}
.div1{
color: #fff;
margin-top: 46px;
padding: 3px 18px 9px;
display: inline-block;
border-radius: 34px;
text-shadow: 1px 1px 0px #CFCFCF;
position: relative;
letter-spacing: -2.5px;
font: bold 36px/48px 'Cantarell';
background: #00bff3;
}
.flt{
float: left;
}
.div1:before{
bottom: -31px;
content: '';
left: 50%;
position: absolute;
height: 31px;
background: url('../images/corner.png') no-repeat;
width: 31px;
margin-left: 7px;
}
.block2{
margin: 18px 0 30px;
background: #e5e5e5;
position: relative;
padding: 25px 25px 30px;
}
.block2:before{
content: '';
left: 50%;
margin-left: -16px;
position: absolute;
border-top: 20px solid #e5e5e5;
border-right: 16px solid transparent;
border-bottom: none;
border-left: 16px solid transparent;
width: 0px;
height: 0px;
bottom: -15px;
}
.block1, .block3, .block4, .block5{
margin-bottom: 20px;
border: 1px solid #e3e3e3;
background: #fff;
padding: 24px 18px 25px 31px;
}
.div6, .div3, .div4, .div5{
width: 65px;
display: inline-block;
height: 54px;
overflow: hidden;
margin: 6px 15px 15px 0;
float: left;
}
.div6{
background: url('../images/page2_icon1.png') 0 0 no-repeat;
}
.div3{
background: url('../images/page2_icon2.png') 0 0 no-repeat;
}
.div4{
background: url('../images/page2_icon3.png') 0 0 no-repeat;
}
.div5{
background: url('../images/page2_icon4.png') 0 0 no-repeat;
}
.block1:hover .div6,.block3:hover .div3,.block4:hover .div4,.block5:hover .div5{
background-position: right 0;
}
.brd4{
border-bottom: 1px solid #d3d3d3;
overflow: hidden;
padding-bottom: 8px;
margin-bottom: 15px;
}
.block6{
background: #e5e5e5;
margin-bottom: 20px;
overflow: hidden;
border: 1px solid #e3e3e3;
}
div.p8{
padding: 25px 75px 18px 15px;
}
/*------------Images-----------*/
a.lightbox {
display: block;
position: relative;
}
a.lightbox span {
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
display: block;
position: absolute;
z-index: 10;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url(../images/magnify.png) -100px center no-repeat;
}
a.lightbox:hover span {
background-position: center center;
}
.img{
display: inline-block;
margin-bottom: 20px;
}
.img1{
margin: 0 0 1px 1px;
display: inline-block;
float: right;
border: 1px solid #e3e3e3;
}
.img2{
margin-bottom: 0;
display: inline-block;
border: 1px solid #e3e3e3;
}
.img3{
margin: 0 ;
border: 1px solid #e3e3e3;
}
.img1, .img2, .img3, .block6{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
/*-------------Text------------*/
.txt{
text-align: left;
}
.p1{
text-transform: uppercase;
color: #000;
text-align: center;
margin-bottom: 20px;
}
h2.p1>span{
color: #000;
display: block;
font-size: 72px;
}
.p2{
color: #fff;
font: 12px/18px 'Ubuntu', sans-serif;
}
.p3{
font: 13px/21px 'Ubuntu', sans-serif;
}
.p4{
color: #444;
text-transform: uppercase;
font: 12px/21px 'Ubuntu', sans-serif;
padding:0 0 0 20px;
}
.p5{
font: 40px/40px 'sans-serif';
}
.p6{
font: 14px/18px 'sans-serif';
text-transform: uppercase;
color: #aeaeae;
}
.p7{
text-transform: uppercase;
display: block;
color: #444;
margin-bottom: 20px;
}
.p8, .p9, .p10{
text-transform: uppercase;
color: #444;
position: relative;
}
.p10{
font: 30px/30px 'sans-serif';
border-bottom: #d3d3d3 solid 1px;
padding-bottom: 18px;
margin-bottom: 18px;
}
/*-------------Links-----------*/
a {
text-decoration: none;
color: inherit;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
a:hover {
color: #00bff3;
}
.a1{
padding: 10px 18px 10px;
position: relative;
font: 11px/18px 'Ubuntu', sans-serif;
text-transform: uppercase;
margin-top: 18px;
background: #fff;
display: inline-block;
border-radius: 5px;
}
.a2{
color: #00bff3
}
.a3{
color: #ee1c67;
}
.a4{
color: #94e238;
}
.a1:hover {
color: #afafb6;
background: #fbfbfb;
}
.a5{
width: 125px;
position: relative;
font: 14px 'arial';
margin-top: 4px;
padding-top: 10px;
height: 26px;
color: #fff;
display: inline-block;
border-radius: 4px;
}
.a6{
background: #ee1c67;
}
.a7{
background: #00bff3;
}
.a5+.a5{
margin-left: 3px;
}
.a8{
display: inline-block;
width: 43px;
background: url('../images/link6.png') right 0 no-repeat;
height: 43px;
margin-bottom: 38px;
-o-transition: 0s ease;
-webkit-transition: 0s ease;
transition: 0s ease;
}
.a8:hover{
background-position: left 0;
-o-transition: 0s ease;
-webkit-transition: 0s ease;
transition: 0s ease;
}
.a9{
color: #00bff3;
text-transform: none;
}
.a9:hover{
color: #444;
}
.a10{
text-transform: uppercase;
color: #444;
}
.a10:hover{
color: #00bff3;
}
.a11{
margin-bottom: 3px;
display: inline-block;
font-size: 19px;
font-weight: bold;
}
.a12{
top: 50%;
display: inline-block;
right: 20px;
position: absolute;
width: 43px;
background: url('../images/link6.png') left 0 no-repeat;
height: 43px;
margin-top: -22px;
-o-transition: 0s ease;
-webkit-transition: 0s ease;
transition: 0s ease;
}
.a12:hover, .a13:hover{
background-position: right 0;
-o-transition: 0s ease;
-webkit-transition: 0s ease;
transition: 0s ease;
}
.a13{
width: 43px;
display: inline-block;
margin-bottom: 30px;
background: url('../images/link6.png') left 0 no-repeat;
height: 43px;
-o-transition: 0s ease;
-webkit-transition: 0s ease;
transition: 0s ease;
}
.a6:hover {
color: #fff;
background-color: #fe4186;
}
.a7:hover {
color: #fff;
background: #4cdffc;
}
/*-------------Indent-----------*/
.pad1{
padding-top: 10px;
}
.pad2{
padding-top: 30px;
}
.pad3{
padding-top: 75px;
}
.pad4{
padding-bottom: 80px;
}
.mrg1{
margin-top: 28px;
}
.mrg2{
margin-top: 0px;
}
.mrg3{
margin:0 0 0 20px;
float:right;
}
.mrg4{
margin-bottom: 26px;
}
.mrg5{
margin-top: 49px;
}
.mrg6{
margin-bottom: 76px;
}
.mrg7{
margin-bottom: 32px;
}
.mrg8{
margin-top: 45px;
}
.mrg9{
margin-bottom: 32px;
}
.mrg10{
margin-top: 70px;
}
/*-------------List------------*/
.list{
margin: 8px 0 17px;
}
.list a{
font-family: 'Jockey One';
font-size: 14px;
text-transform: uppercase;
line-height: 30px;
color: #aeaeae;
}
.list li:hover a{
color: #ee1c67;
}
.list li:hover{
background: url('../images/link7.png') 0 9px no-repeat;
}
.list1 figure{
margin-top: 6px;
margin-bottom: 16px;
}
/*-------------Footer-----------*/
footer{
text-align: center;
padding-bottom: 30px;
}
footer h1{
margin: 40px 0 8px;
display: inline-block;
}
.brd{
border-top: 6px solid #eaeaea;
position: relative;
}
.brand>a{
margin-top: 24px;
display: inline-block;
background: #fff;
}
.brand>a+a{
margin-left: 32px;
}
.privacy{
color: #444;
font-size: 11px;
text-transform: uppercase;
line-height: 12px;
letter-spacing: 0.5px;
}
.socials a{
margin: 0 9px;
display: inline-block;
background: #fff;
}
.socials>a:hover, .brand>a:hover{
opacity: 0.5;
filter:alpha(opacity=50);
}
/*--------------To_Top----------*/
#toTop {
display: none;
text-decoration: none;
position: fixed;
bottom: 40px;
left: 51%;
margin-left: 500px;
overflow: hidden;
width: 52px;
height: 52px;
border: none;
text-indent: -999px;
z-index: 20;
background: url(../images/totop.png) no-repeat left 0;
transition: 0s ease;
-o-transition: 0s ease;
-webkit-transition: 0s ease;
}
#toTop:hover {
outline: none;
opacity: 0.5;
filter:alpha(opacity=50);
}
/*--------------Map-------------*/
.map {
overflow: hidden;
margin-bottom: 70px;
}
.map figure {
display: block;
width: 100%;
border: 1px solid #e3e3e3;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.map figure iframe {
width: 100%;
height: 489px;
max-width: 100%;
}
address {
font-style: normal;
margin-bottom: 30px;
line-height: inherit;
}
address dt {
color: #444;
text-transform: uppercase;
margin-bottom: 20px;
}
address dd{
height: 22px;
}
address dd span {
color: inherit;
padding: 0;
display: inline-block;
text-align: left;
}
address a{
color: #00bff3;
}
address a:hover{
color: #444;
}
/*=======================RESPONSIVE LAYOUTS===========================*/
@media only screen and (max-width: 995px) {
body {
min-width: 768px;
}
.caption{
height: 130px !important;
}
.caption h2{
font-size: 38px;
line-height: 38px;
}
.caption h2 span {
font-size: 58px;
}
.shadow:before{
left: 0;
width: 100% !important;
}
.list li{
padding-left: 17px;
}
.list a{
line-height: 12px;
}
.list li:hover{
background-position: 0 0;
}
}
@media only screen and (max-width: 767px) {
body {
min-width: 420px;
}
.caption{
height: 110px !important;
}
.caption h2{
font-size: 34px;
letter-spacing: -2px;
line-height: 30px;
}
.caption h2 span {
font-size: 46px;
}
.camera_pag {
bottom: 8px !important;
}
h2{
line-height: 64px;
}
.mrg1{
margin-top: 37px;
}
.mrg2{
margin-top: 37px;
}
.img1, .flt {
float: none;
}
h6{
padding-top: 15px;
}
.mrg11{
margin-top: 0px;
}
.mrg12{
margin-bottom: 12px;
}
h6:before{
width: 85%;
right: 10%;
}
.mrg6 {
margin-bottom: 30px;
}
.list a:hover{
position: relative;
color: #ee1c67;
display: inline-block;
}
.list a:hover:before{
content: '';
width: 13px;
position: absolute;
height: 13px;
background: url('../images/link7.png') 0 0 no-repeat;
top: 1px;
display: block;
left: -18px;
}
.list li:hover{
background: none;
}
.gallery1 a.lightbox img{
width: 100%;
}
.a13{
margin-bottom: 40px;
}
}
@media only screen and (max-width: 480px) {
body {
min-width: 300px;
}
.caption {
display: none !important;
}
h2{
margin-top: 44px !important;
font-size: 36px;
line-height: 40px;
}
h2.p1 > span{
font-size: 50px;
}
.img{
width: 100%;
}
}