/*COMPONENTS*/ .clearfix { &:after { display: block; content: ""; clear: both; } } .placeholder { &:focus::-webkit-input-placeholder { color: transparent; opacity: 0; filter: alpha(opacity=0); } &:focus:-moz-placeholder { color: transparent; opacity: 0; filter: alpha(opacity=0); } &:focus::-moz-placeholder { color: transparent; opacity: 0; filter: alpha(opacity=0); } &:focus:-ms-input-placeholder { color: transparent; opacity: 0; filter: alpha(opacity=0); } } .border-radius(@r:0px) { border-radius: @r; -moz-border-radius: @r; -webkit-border-radius: @r; -khtml-border-radius: @r; } .round-corners(@lt:0px, @rt:0px, @rb:0px, @lb:0px) { border-radius: @lt @rt @rb @lb; -moz-border-radius: @lt @rt @rb @lb; -webkit-border-radius: @lt @rt @rb @lb; } .transition(@for: all, @time: 0.1s, @effect: linear, @delay: 0s) { -webkit-transition: @for @time @effect @delay; -moz-transition: @for @time @effect @delay; -o-transition: @for @time @effect @delay; transition: @for @time @effect @delay; } /*COMPONENTS*/ /*Animation*/ @-webkit-keyframes arrow { 0% {right: 5px;} 25% {right: -2px;} 50% {right: 5px;} 75% {right: -2px;} 100% {right: 5px;} } @keyframes arrow { 0% {right: 5px;} 25% {right: -2px;} 50% {right: 5px;} 75% {right: -2px;} 100% {right: 5px;} } @keyframes shake_icon { 0% {transform:rotate(5deg);} 20% {transform:rotate(-5deg);} 40% {transform:rotate(5deg);} 60% {transform:rotate(-5deg);} 80% {transform:rotate(5deg);} 100% {transform:rotate(-5deg);} } @-webkit-keyframes shake_icon { 0% {transform:rotate(5deg);} 20% {transform:rotate(-5deg);} 40% {transform:rotate(5deg);} 60% {transform:rotate(-5deg);} 80% {transform:rotate(5deg);} 100% {transform:rotate(-5deg);} } @keyframes text_shadow { 0% {text-shadow:0 0 0 #2d5620;} 50% {text-shadow:0 0 3px #2d5620;} 100% {text-shadow:0 0 0 #2d5620;} } @-webkit-keyframes shake_icon { 0% {text-shadow:0 0 0 #2d5620;} 50% {text-shadow:0 0 3px #2d5620;} 100% {text-shadow:0 0 0 #2d5620;} } @keyframes callback_animation { 0% { opacity: 0.1; transform: rotate(0deg) scale(0.5) skew(0deg); } 30% { opacity: 0.5; transform: rotate(0deg) scale(0.7) skew(0deg); } 100% { opacity: 0.6; transform: rotate(0deg) scale(1) skew(0deg); } } @-webkit-keyframes callback_animation { 0% { opacity: 0.1; transform: rotate(0deg) scale(0.5) skew(0deg); } 30% { opacity: 0.5; transform: rotate(0deg) scale(0.7) skew(0deg); } 100% { opacity: 0.6; transform: rotate(0deg) scale(1) skew(0deg); } } @keyframes cbh-circle-img-anim { 0%{transform:rotate(0deg) scale(1) skew(1deg)} 10%{transform:rotate(-25deg) scale(1) skew(1deg)} 20%{transform:rotate(25deg) scale(1) skew(1deg)} 30%{transform:rotate(-25deg) scale(1) skew(1deg)} 40%{transform:rotate(25deg) scale(1) skew(1deg)} 50%{transform:rotate(0deg) scale(1) skew(1deg)} 100%{transform:rotate(0deg) scale(1) skew(1deg)} } @-webkit-keyframes cbh-circle-img-anim { 0%{-webkit-transform:rotate(0deg) scale(1) skew(1deg)} 10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)} 20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)} 30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)} 40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)} 50%{-webkit-transform:rotate(0deg) scale(1) skew(1deg)} 100%{-webkit-transform:rotate(0deg) scale(1) skew(1deg)} } @keyframes cbh-circle-fill-anim { 0%{transform:rotate(0deg) scale(0.7) skew(1deg);opacity:0.2} 50%{transform:rotate(0deg) scale(1) skew(1deg);opacity:0.2} 100%{transform:rotate(0deg) scale(0.7) skew(1deg);opacity:0.2} } @-webkit-keyframes cbh-circle-fill-anim { 0%{-webkit-transform:rotate(0deg) scale(0.7) skew(1deg);opacity:0.2} 50%{-webkit-transform:rotate(0deg) scale(1) skew(1deg);opacity:0.2} 100%{-webkit-transform:rotate(0deg) scale(0.7) skew(1deg);opacity:0.2} } @keyframes cbh-circle-anim { 0%{transform:rotate(0deg) scale(0.5) skew(1deg);opacity:0.1;} 30%{transform:rotate(0deg) scale(.7) skew(1deg);opacity:0.5;} 100%{transform:rotate(0deg) scale(1) skew(1deg);opacity:0.6;} } @-webkit-keyframes cbh-circle-anim { 0%{-webkit-transform:rotate(0deg) scale(0.5) skew(1deg);opacity:0.1;} 30%{-webkit-transform:rotate(0deg) scale(.7) skew(1deg);opacity:0.5;} 100%{-webkit-transform:rotate(0deg) scale(1) skew(1deg);opacity:0.6;} } /*Animation*/ body { background-color: #fbe6d2; font-family: Arial; margin: 0; padding: 0; .section-wrap { width: 1200px; margin: 0 auto; } .header { background: url('../images/head-stripe.jpg') repeat-x; height: 35px; width: 100%; .section-wrap { p { margin: 0 0 0 475px; font-size: 20px; color: #FFF; line-height: 35px; position: relative; &:before { background: url('../images/head-locations-icon.png') no-repeat; content: ""; display: block; height: 28px; left: -35px; position: absolute; top: 3px; width: 28px; } } } } .wrapper { background-color: #FFF; width: 1200px; min-height: 1000px; margin: 0 auto; box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); /*Sidebar --------------------------------------------------------------------- */ .sidebar { position: relative; margin: -35px 0 0 10px; z-index: 2; width: 280px; float: left; padding: 0 0 30px; .logo { background: url('../images/logo_bg.png') no-repeat; height: 170px; width: 280px; a { background: url('../images/logo.png') no-repeat; display: block; height: 147px; width: 280px; } }/*logo*/ .order-widget { background: url('../images/order-widget-bg.png') no-repeat; background-size: 100% 100%; box-sizing: border-box; height: auto; margin: -14px 0 0; padding: 35px 0 24px; width: 280px; .ow__head { font-size: 26px; color: #FFF; text-align: center; padding: 0 0 10px; border-bottom: 2px solid #40c5d8; line-height: 1; span { display: block; } } .ow__content { padding: 14px 16px 0; .wpcf7-response-output { background-color: #fff; margin: 0; margin-bottom: 45px; padding: 5px 15px; position: relative; text-align: center; z-index: 9; } p { margin: 0 0 7px; span { display: block; input[type="text"], input[type="tel"], input[type="email"] { .placeholder; width: 100%; box-sizing: border-box; .border-radius(5px); background-color: #FFF; background-image: url('../images/form-icons.png'); background-repeat: no-repeat; border: none; height: 26px; padding: 0 10px 0 35px; &.wpcf7-not-valid { box-shadow: inset 0 0 5px red; -moz-box-shadow: inset 0 0 5px red; -webkit-box-shadow: inset 0 0 5px red; } } &.name { input { background-position: 0 0; } } &.tel { input { background-position: 0 -33px; } } &.email { input { background-position: 0 -130px; } } &.date { input { background-position: 0 -66px; } } &.date2 { input { background-position: 0 -66px; } } } .wpcf7-not-valid-tip { display: none; } } div.guests-block, div.kids-block { float: left; width: 49%; label { display: block; font-size: 18px; color: #FFF; margin: 0 0 5px; } span { display: block; position: relative; width: 100%; .select { .border-radius(5px); background-color: #fff; box-sizing: border-box; color: #299dae; font-size: 18px; height: 26px; line-height: 24px; padding: 0 7px; width: 100%; &:after { background: url("../images/form-icons.png") no-repeat scroll 0 -100px; content: ""; display: block; height: 24px; position: absolute; right: 1px; top: 1px; width: 24px; } } select { position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; cursor: pointer; } } } div.room { float: left; width: 100%; label { display: block; font-size: 18px; color: #FFF; margin: 0 0 5px; } span { display: block; position: relative; width: 100%; .select { .border-radius(5px); background-color: #fff; box-sizing: border-box; color: #299dae; font-size: 12px; height: 26px; line-height: 24px; padding: 0 7px; width: 100%; &:after { background: url("../images/form-icons.png") no-repeat scroll 0 -100px; content: ""; display: block; height: 24px; position: absolute; right: 1px; top: 1px; width: 24px; } } select { position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; cursor: pointer; } } } div.kids-block { float: right; } .wpcf7-submit { .border-radius(5px); cursor: pointer; background-color: #f58a27; border: medium none; color: #fff; font-family: Arial; font-size: 24px; height: 44px; margin: 10px 0 0; width: 100%; } } }/*order-widget*/ .action-widget { background: url('../images/action_banner.png') no-repeat; height: 169px; margin: -11px 0 0; width: 280px; text-align: center; position: relative; a.more { background-color: #f58a27; color: #fefefe; display: inline-block; font-size: 18px; line-height: 27px; padding: 0 14px; position: relative; text-align: center; text-decoration: none; top: 125px; .border-radius(3px); } }/*action-widget*/ .reviews-widget { margin: -12px 0 0; .rw__head { background: url('../images/reviews-widget-head.png') no-repeat; width: 280px; padding: 40px 0 7px 0; text-align: center; font-size: 26px; color: #40c5d8; border-bottom: 2px solid #40c5d8; } .rw__content { background: url('../images/reviews-widget-center.png') repeat-y; width: 280px; padding: 0 0 20px; height: auto; .reviews-list { .review { border-bottom: 2px solid #40c5d8; padding: 5px 17px; color: #2d909e; .review-head { .clearfix; margin: 0 0 10px; font-size: 18px; .rh__left { float: left; max-width: 61%; .review-author { margin: 0 0 5px; } } .review-date { width: 39%; text-align: right; float: right; } } .review-content { font-size: 16px; line-height: 1.3; } } } .all-reviews { display: block; width: auto; margin: 20px 17px 0; line-height: 44px; .border-radius(5px); font-size: 24px; color: #FFF; text-decoration: none; text-align: center; background-color: #f58a27; } } .rw__foot { background: url('../images/reviews-widget-foot.png') no-repeat; width: 280px; height: 35px; } }/*reviews-widget*/ /*menu-widget*/ .menu-widget { margin: 10px 0 25px; ul.menu { margin: 0; padding: 0; list-style: none; >li { margin: 0 0 3px; >a { .transition(all, 0.15s, linear, 0s); height: 49px; line-height: 47px; color: #FFF; font-size: 24px; padding: 0 15px; background-color: #0c7bc9; display: block; text-decoration: none; } &:hover, &.current-menu-item, &.current-menu-parent { >a { background-color: #42aefe; } ul.sub-menu { display: block; } } ul.sub-menu { display: none; border: 3px solid #40c5d8; margin: 0 9px; padding: 0; box-sizing: border-box; li { a { .transition(all, 0.15s, linear, 0s); text-decoration: none; line-height: 31px; color: #FFF; font-size: 20px; background-color: #0c7bc9; border-bottom: 3px solid #40c5d8; display: block; padding: 0 8px; box-sizing: border-box; } &.current-menu-item, &:hover { a { background-color: #42aefe; } } &:last-child { a { border: none; } } } } } } } /*menu-widget*/ }/* SIDEBAR */ /*Container --------------------------------------------------------------------- */ .container { width: 890px; padding: 0 0 30px; float: right; #slider { height: 100%; overflow: hidden; position: relative; width: 100%; .contacts-block { background: url('../images/slider-contacts.png') no-repeat; position: absolute; right: 10px; top: 0; z-index: 9; width: 280px; height: 124px; box-sizing: border-box; .free-call { background: url('../images/slider-contacts-icons.png') no-repeat 0 5px; margin: 12px 0 0 9px; padding: 0 0 0 42px; label { font-size: 16px; color: #FFF; } p { font-size: 26px; color: #ffa24c; font-weight: bold; } } .mail { background: url('../images/slider-contacts-icons.png') no-repeat 0 -46px; display: block; padding: 0 0 0 42px; margin: 10px 0 0 9px; line-height: 30px; color: #ffa24c; font-size: 14px; } } .carousel-inner { position: relative; width: 100%; overflow: hidden; .item { position: relative; display: none; -webkit-transition: .6s ease-in-out left; transition: .6s ease-in-out left; img, a > img { /*line-height: 1;*/ display: block; max-width: 100%; width: 100%; height: auto; } &.active { left: 0; } &.active, &.next, &.prev { display: block; } &.next, &.prev { position: absolute; top: 0; width: 100%; } &.next { left: 100%; } &.prev { left: -100%; } &.next.left, &.prev.right { left: 0; } &.active.left { left: -100%; } &.active.right { left: 100%; } } } .carousel-control { background: url('../images/slider-arrows.png') no-repeat; display: block; height: 22px; outline: medium none; position: absolute; top: 48%; width: 48px; &.left { background-position: left 0; left: 10px; &:hover { background-position: left -22px; } } &.right { background-position: right 0; right: 10px; &:hover { background-position: right -22px; } } } .carousel-indicators { position: absolute; bottom: 15px; width: 100%; text-align: center; margin: 0; padding: 0; list-style: none; li { border-top: 26px solid rgba(255, 255, 255, 0.6); border-left: 13px solid rgba(255, 255, 255, 0.6); border-right: 13px solid rgba(255, 255, 255, 0.6); display: inline-block; margin: 0 5px; width: 0; height: 0; cursor: pointer; .transition(all, 0.1s, linear, 0s); &:hover { border-top: 28px solid rgba(255, 255, 255, 0.6); border-left: 14px solid rgba(255, 255, 255, 0.6); border-right: 14px solid rgba(255, 255, 255, 0.6); } &.active { border-top: 30px solid rgba(255, 255, 255, 0.8); border-left: 15px solid rgba(255, 255, 255, 0.8); border-right: 15px solid rgba(255, 255, 255, 0.8); } } } }/*Slider*/ /*Navigation*/ nav.main-navigation { background: url('../images/menu_bg.jpg') no-repeat; height: 39px; line-height: 39px; width: 100%; .nav-wrap { .responsive-menu { display: none; } ul.menu { display: table; margin: 0; text-align: center; padding: 0; width: 890px; list-style: none; li { display: table-cell; position: relative; a { font-size: 20px; color: #FFF; text-decoration: none; display: block; } &:hover { background-color: #42aefe; } ul.sub-menu { display: none; } &.current-menu-item { background-color: #42aefe; } &.no-display { display: none; } } } } } /*Navigation*/ .content { padding: 15px 10px 0 0; h1, h2, h3, h4, h5, h6 { font-family: Arial; font-weight: bold; color: #014650; line-height: 1.3; } h1 { font-size: 24px; margin: 0 0 10px; } h2, h3 { font-size: 22px; margin: 0 0 10px; } h4, h5 { font-size: 20px; margin: 0 0 5px; } p { font-size: 20px; line-height: 1.2; color: #014650; margin: 0 0 20px; } ul, ol { font-size: 20px; line-height: 1.2; color: #014650; margin: 0 0 20px; padding: 0 0 0 20px; list-style: inside disc; } .alignleft { float: left; margin: 0 10px 10px 0; } .alignright { float: right; margin: 0 0 10px 10px; } .aligncenter { margin: 0 auto 10px; display: block; } .alignnone { float: left; margin: 0 10px 10px 0; } strong { font-weight: bold; } a { color: #014650; text-decoration: underline; &:hover { text-decoration: none; } } table { font-family: Arial; font-size: 24px; border: none; thead { tr { td { font-size: 26px; color: #FFF; border: 1px solid #FFF; } } } tr { td { color: #056fc4; padding: 10px 15px; vertical-align: middle; text-align: center; border: 1px solid #40c5d8; } } } /*Rooms*/ .rooms { .clearfix; margin: 0 0 20px; .room { position: relative; float: left; width: 280px; &.center { margin: 0 20px; } .room-title { background-color: rgba(5, 124, 235, 0.8); border-left: 3px solid #40c5d8; border-right: 3px solid #40c5d8; border-top: 3px solid #40c5d8; box-sizing: border-box; color: #fff; font-size: 20px; height: 40px; line-height: 38px; position: absolute; text-align: center; width: 100%; } img { border: 3px solid #40c5d8; width: 100%; height: auto; display: block; box-sizing: border-box; } .room-foot { .clearfix; background: url('../images/room_bg.png') no-repeat; width: 100%; height: 55px; .room-price { float: left; text-indent: 55px; line-height: 35px; font-size: 24px; color: #179b01; font-weight: bold; } .room-more { font-size: 16px; color: #fefefe; background-color: #f58a27; display: inline-block; float: left; margin: 5px 10px; text-decoration: none; .border-radius(3px); padding: 0 7px; line-height: 26px; } } } } /*Rooms*/ /*bread_crumb*/ .bread_crumb { margin: 0 0 10px 0; line-height: 1; padding: 0; list-style: none; .clearfix; li { font-size: 18px; color: #2e8dd0; font-weight: bold; float: left; position: relative; a { position: relative; font-weight: normal; color: #2e8dd0; &:after { content: " > "; display: inline-block; margin: 0 5px; } } } } /*bread_crumb*/ /*Order page*/ .order-page-content { background: url('../images/order-page-bg.jpg') no-repeat; border: 5px solid #40c5d8; background-size: 100% 100%; padding: 15px; .border-radius(5px); height: auto; position: relative; box-sizing: border-box; p { max-width: 450px; margin: 0 0 15px; span { display: block; input[type="text"], input[type="tel"], input[type="email"] { .placeholder; width: 100%; box-sizing: border-box; .border-radius(5px); background-color: #FFF; background-image: url('../images/form-icons.png'); background-repeat: no-repeat; border: none; height: 26px; padding: 0 10px 0 35px; } &.name { input { background-position: 0 0; } } &.tel { input { background-position: 0 -33px; } } &.email { input { background-position: 0 -130px; } } &.date { input { background-position: 0 -66px; } } &.date2 { input { background-position: 0 -66px; } } } .wpcf7-not-valid-tip { box-sizing: border-box; color: #f00; display: block; right: 1px; font-size: 16px; line-height: 28px; padding: 0 15px; position: absolute; text-align: right; top: 0; width: 240px; } } div.guests-block, div.kids-block { float: left; max-width: 125px; width: 49%; label { display: block; font-size: 18px; color: #FFF; margin: 0 0 5px; } span { display: block; position: relative; width: 100%; .select { .border-radius(5px); background-color: #fff; box-sizing: border-box; color: #299dae; font-size: 18px; height: 26px; line-height: 24px; padding: 0 7px; width: 100%; &:after { background: url("../images/form-icons.png") no-repeat scroll 0 -100px; content: ""; display: block; height: 24px; position: absolute; right: 1px; top: 1px; width: 24px; } } select { position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; cursor: pointer; } } } div.room{ float: left; max-width: 450px; width: 100%; label { display: block; font-size: 18px; color: #FFF; margin: 0 0 5px; } span { display: block; position: relative; width: 100%; .select { .border-radius(5px); background-color: #fff; box-sizing: border-box; color: #299dae; font-size: 18px; height: 26px; line-height: 24px; padding: 0 7px; width: 100%; &:after { background: url("../images/form-icons.png") no-repeat scroll 0 -100px; content: ""; display: block; height: 24px; position: absolute; right: 1px; top: 1px; width: 24px; } } select { position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; cursor: pointer; } } } div.guests-block { float: left; margin: 0 20px 0 0; } .wpcf7-submit { .border-radius(5px); cursor: pointer; background-color: #f58a27; border: medium none; color: #fff; font-family: Arial; font-size: 24px; height: 44px; margin: 15px 0 0; width: 100%; max-width: 270px; } } /*Order page*/ /*Reviews page*/ .reviews-list { border-top: 1px solid #40c5d8; .review { .clearfix; border-bottom: 1px solid #40c5d8; padding: 5px 10px; .review-head { .clearfix; margin: 0 0 10px; .review-title { .clearfix; color: #2d909e; font-size: 18px; margin: 0 0 2px; .review-author { margin: 0 20px 0 0; float: left; } } } .review-body { p { font-size: 16px; color: #2d909e; margin: 0; } } } } .navigation { margin: 30px 0 20px; text-align: center; span { display: inline-block; font-size: 24px; color: #FFF; background-color: #2d909e; padding: 0 5px; } a { padding: 0 3px; font-size: 24px; color: #2d909e; text-decoration: none; display: inline-block; &:hover { text-decoration: underline; } &.prev, &.next { margin: 0 5px; } } } .leave_review_form { margin: 0 0 30px; .comment-respond { background: url('../images/leave-review-bg.jpg') no-repeat; border: 5px solid #40c5d8; box-sizing: border-box; background-size: 100% 100%; padding: 10px 20px; width: 100%; .border-radius(5px); .comment-reply-title, .comment-notes { display: none; } .comment-form { p, >div { .clearfix; height: auto; padding: 0; margin: 0 0 10px; label { display: block; font-size: 22px; color: #FFF; margin: 0 0 5px; } input[type="text"], input[type="email"], textarea { font-family: Arial; width: 610px; max-width: 100%; height: 35px; padding: 0 10px; box-sizing: border-box; .border-radius(5px); background-color: #FFF; border: none; .placeholder; font-size: 18px; color: #565656; &#captcha_code { margin: 10px 0 0; width: 150px !important; text-align: center; } } textarea { height: 60px; padding: 5px 10px; } .captcha_img { width: 150px; .clearfix; position: relative; img.si-captcha { width: 150px; height: auto; } #si_refresh_com { position: absolute; right: -30px; top: 0; } } .submit { background-color: #f58a27; height: 44px; padding: 0 30px; border: none; font-size: 24px; color: #FFF; cursor: pointer; .border-radius(5px); max-width: 100%; text-align: center; } } } } } /*Reviews page*/ }/*Content*/ } /*Container*/ } /*wrapper*/ /*FOOTER*/ footer { background-color: #0353b6; height: 150px; width: 100%; .footer-info { .clearfix; height: 115px; >div { min-height: 95px; float: left; margin: 10px 0; border-right: 1px solid #FFF; } .contacts-block { width: 272px; padding: 0 30px 0 20px; box-sizing: border-box; label { color: #fff; display: block; font-size: 14px; line-height: 1.2; margin: 0 0 4px; } p { font-size: 18px; color: #ffa24c; line-height: 1; &.indent { text-indent: 10px; } } } .callback-block { width: 270px; padding: 0 35px; box-sizing: border-box; label { color: #fff; display: block; font-size: 14px; line-height: 1.1; margin: 0 0 4px; } p { font-size: 22px; color: #ffa24c; margin: 0 0 4px; line-height: 0.6; } a { background: url('../images/socials.png') no-repeat; display: inline-block; margin: 0 5px 0 0; height: 34px; width: 34px; &.google { background-position: 0 0; } &.twitter { background-position: -40px 0; } &.vk { background-position: -80px 0; } &.facebook { background-position: -120px 0; } } } .location-block { width: 350px; box-sizing: border-box; padding: 0 30px; a.email { display: block; font-size: 14px; color: #FFF; line-height: 40px; padding: 0 0 0 50px; background: url('../images/footer-location.png') no-repeat; margin: 0 0 15px; } p.location { display: block; font-size: 14px; color: #FFF; text-decoration: underline; line-height: 40px; padding: 0 0 0 50px; background: url('../images/footer-location.png') no-repeat 0 -43px; } } .order-block { padding: 0 25px 0 35px; border: none; width: 245px; a.order-button { color: #FFF; font-size: 24px; text-align: center; display: block; background-color: #f58a27; .border-radius(5px); line-height: 42px; height: 44px; width: 100%; text-decoration: none; } } } .footer-nav { .clearfix; background-color: #40c5d8; height: 35px; width: 100%; .section-wrap { ul.menu { display: table; margin: 0 auto; width: 880px; li { display: table-cell; a { line-height: 33px; font-size: 20px; color: #FFF; &:hover { text-decoration: none; } } &:last-child { display: none; } } } } } } /*FOOTER*/ /*Callback fixed*/ .callback-fixed { bottom: 20px; cursor: pointer; float: none; height: 200px; min-width: initial; opacity: 1; position: fixed; right: 20px; .transition(all, 1s, ease, 0s); width: 200px; z-index: 10000; &:hover { .cf__radial1 { opacity: 0.8 !important; } .cf__radial2 { opacity: 0.8 !important; } .cf__logo { img { animation: cbh-circle-img-anim 1s infinite ease-in-out !important; -webkit-animation: cbh-circle-img-anim 1s infinite ease-in-out !important; } } } div { box-sizing: content-box; min-width: inherit; transform-origin: initial; } .cf__radial1 { animation: cbh-circle-anim 2.2s infinite ease-in-out !important; -webkit-animation: cbh-circle-anim 2.2s infinite ease-in-out !important; background-color: transparent; border: 1px solid #40c5d8; border-radius: 100%; display: block; float: none; height: 160px; left: 19px; opacity: 1; position: absolute; top: 19px; .transition(all, 0.5s, ease, 0s); width: 160px; } .cf__radial2 { animation: cbh-circle-fill-anim 2.2s infinite ease-in-out !important; -webkit-animation: cbh-circle-fill-anim 2.2s infinite ease-in-out !important; background-color: #40c5d8; border: 2px solid transparent; border-radius: 100%; display: block; float: none; height: 100px; left: 48px; opacity: 0.1; position: absolute; top: 48px; .transition(all, 0.5s, ease, 0s); width: 100px; } .cf__logo { border-radius: 100%; display: block; float: none; height: 55px; left: 72.5px; position: absolute; top: 72.5px; width: 55px; img { height: auto; max-width: 100%; width: 55px; } } } .callback-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 99998; .cp__wrap { position: fixed; z-index: 99999; background-color: #FFF; padding: 30px 40px 20px; width: 460px; .border-radius(10px); .close-popup { background: none repeat scroll 0 0 transparent; border: medium none; color: #000; font-weight: bold; padding: 0; position: absolute; right: 15px; top: 10px; cursor: pointer; } .cpw__title { font-family: 'Open Sans', sans-serif; font-weight: 100; font-size: 24px; color: #333; height: auto; line-height: 34px; text-align: left; position: relative; margin: 0 0 25px; &:before { background: url('../images/popup_arrow.png') no-repeat; content: ""; display: block; position: absolute; top: 18px; left: -25px; width: 17px; height: 50px; } } .cpw__content { p { &:after { display: block; clear: both; content: ""; } .callback-tel { display: block; float: left; width: 65%; input { width: 100%; box-sizing: border-box; padding: 0 10px; height: 40px; border: 1px solid #DDD; .border-radius(5px); background: transparent; .placeholder; } .wpcf7-not-valid-tip { color: #f00; display: block; right: 1px; font-size: 13px; position: absolute; text-align: center; top: 45px; width: 180px; } } .wpcf7-submit { float: right; width: 30%; font-size: 16px; border: none; .border-radius(5px); background-color: #333; color: #FFF; height: 40px; cursor: pointer; min-width: 85px; .transition(background-color, 0.15s, linear, 0s); &:hover { background-color: #40c5d8; } } } .cpw__description { font-weight: 100; font-size: 14px; margin: 15px 0 0; line-height: 1.5; color: #333; } } } } /*Callback fixed*/ .to-top { background: url('../images/to-top.png') no-repeat; width: 70px; height: 70px; border: none; position: fixed; z-index: 99; bottom: 0; left: 0; display: none; cursor: pointer; &:hover { background-position: 0 bottom; } } }