/** * Template Name: Spot * Template URL: https://templatemag.com/spot-bootstrap-freelance-template/ * Author: TemplateMag.com * License: https://templatemag.com/license/ */ body { background-color: #fff; font-family: "Roboto", sans-serif; font-weight: 300; font-size: 20px; color: #191a25; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; } /* Titles */ h1, h2, h3, h4, h5, h6 { font-weight: 300; color: #4f98c2; } /* Paragraph & Typographic */ p { line-height: 28px; margin-bottom: 25px; display: block; } td p { line-height: 28px; margin-bottom: 25px; display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 1em; smargin-inline-end: 1em; } .centered { text-align: center; } .lefted { text-align: left; } .lefted.bottom { border-bottom: 1px solid #d65386; margin-bottom: 10px; } /* Links */ a { color: #d65386; word-wrap: break-word; transition: color 0.1s ease-in, background 0.1s ease-in; } a:hover, a:focus { color: #7b7b7b; text-decoration: none; outline: 0; } a:before, a:after { transition: color 0.1s ease-in, background 0.1s ease-in; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #57A1D2; margin: 1em 0; padding: 0; } .title-main { background-color: #57a1d2; color: #fff; font-size: 24px; text-align: center; margin: 0; padding: 5px; border-bottom: 1px solid #fff; font-weight: 300; } .btn { padding: 6px 10px; background-color: #d65386; color: #fff; } .navbar { font-weight: 400; font-size: 14px; padding-top: 20px; padding-bottom: 20px; } .navbar-inverse .navbar-nav > .active > a { background: #d65386 } .navbar-inverse .navbar-nav > a:hover { background: #d65386; } .navbar-inverse .navbar-brand { color: #999999; font-weight: bolder; font-size: 22px; letter-spacing: 1px; } .navbar.navbar-inverse { padding-top: 15px; padding-bottom: 10px; margin-bottom: 0!important; border-radius: 0; } .navbar-inverse .navbar-brand img { width: 175px; height: auto; left: -15px; margin-top: -15px; } /*TILT*/ .tilt { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .tilt:hover { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } .tilt img { border: 10px solid #4f98c2; margin-bottom: 5px; border-radius: 10px; width: 100%; } /* ========================================================================== Slider ========================================================================== */ #block-for-slider { width: 100%; margin: 0 auto; } #viewport { width: 100%; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; text-align: center; } #slidewrapper { position: relative; width: calc(100% * 5); -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transition-timing-function: cubic-bezier(.67, .01, .23, 1); -o-transition-timing-function: cubic-bezier(.67, .01, .23, 1); transition-timing-function: cubic-bezier(.67, .01, .23, 1); } #slidewrapper, #slidewrapper ul, #slidewrapper li { margin: 0; padding: 0; } .slide { width: calc(100%/5); list-style: none; display: inline; float: left; min-height: 455px; /*margin-top: 30px!important;*/ background-size: cover; background-position: center; } .slide-img { width: 100%; } #prev-btn, #next-btn { position: absolute; padding-top: 10px; color: #fff; width: 50px; height: 50px; border: 2px solid #fff; border-radius: 50%; top: calc(50% - 15px); } #prev-btn:hover, #next-btn:hover { cursor: pointer; } #prev-btn { left: 20px; } #next-btn { right: 20px; } #nav-btns { position: absolute; width: 100%; bottom: 20px; padding: 0; margin: 0; text-align: center; } .slide-nav-btn { position: relative; display: inline-block; list-style: none; width: 20px; height: 20px; border-radius: 50%; border: 0px solid #fff; margin: 3px; } .slide-nav-btn:hover { cursor: pointer; } .headphone { line-height: 0.4; color: #fff; height: 63px; } .headphone.mobcented a:hover{ background-color: transparent!important; color: #333!important; } #copyrights a:hover{ color: #333!important; } /* ========================================================================== Wrap Sections ========================================================================== */ #headerwrap { background: url(../img/header-bg.jpg) no-repeat center top; margin-top: -10px; padding-top: 20px; text-align: center; background-attachment: relative; background-position: center center; min-height: 350px; width: 100%; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #slidewrapper { position: relative; } #slidewrapper h1 { margin-top: 0px; color: white; font-size: 50px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; } #slidewrapper h2 { margin-top: 145px; color: white; font-size: 32px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } #slidewrapper h2.sert { font-size: 50px; margin-top: 180px; color: white; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } @media (max-width: 768px) { #slidewrapper h1 { font-size: 24px; margin-left: 60px; } #slidewrapper h2 { font-size: 20px; margin-top: 45px; margin-left: 60px; } .mobcented { text-align: center !important; } .navbar { font-size: 20px; } .headphone { border-left: 0px; border-top: 1px solid #fff; margin-top: 10px; margin-left: 0; padding-top: 20px; height: auto; } .slide { min-height: 200px; background-position: bottom; } .hcont { font-size: 24px !important; } } /* Dark Grey Wrap */ #dg { padding-top: 20px; padding-bottom: 30px; text-align: center; } #dg h4 { font-weight: 700; } /* Light Grey */ #lg { padding-top: 70px; padding-bottom: 70px; text-align: center; } #lg h4 { font-weight: 700; } /* Red Wrap */ #r { padding-top: 35px; padding-bottom: 35px; } #r h4 { font-weight: 700; } #r p { color: #191a25; } /* Blue Wrap */ #blue { background: #3498db; padding-top: 35px; padding-bottom: 35px; } #blue h4 { color: white; font-weight: 700; } #blue p { color: white; } /* Footer Wrap */ #f { background: #2d2d2d; padding-top: 30px; padding-bottom: 30px; } #f i { color: #bdbdbd; font-size: 30px; padding: 20px; } #f i:hover { color: #d65386; } /****** SECTIONS *****/ .w { padding-top: 35px; } .w h4 { font-weight: 700; } .w i { color: #d65386; font-size: 30px; } .wb { padding-top: 50px; margin-bottom: 0px; } .wb h4 { font-weight: 700; } .desc { padding-top: 35px; } .desc h4 { font-weight: 700; } .desc i { color: #d65386; font-size: 12px; padding: 5px; } /***** MODAL CONTACT *****/ .modal-content { border-radius: 0px; } .modal-header { background: #bdbdbd; color: white; } .modal-header h4 { font-weight: 700; } .modal-body { background: #f2f2f2; font-family: "Lato"; font-weight: 300; font-size: 16px; color: #555; } .modal-footer { background: #f2f2f2; margin-top: 0px; } /* ========================================================================== Pricing Tables ========================================================================== */ .pricing-option { padding-bottom: 40px; } .pricing-option .pricing-top { position: relative; background: #222; color: white; text-align: center; font-weight: bold; padding: 40px 20px 30px 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pricing-option .pricing-top .special-label { display: block; width: 100%; position: absolute; top: 0; left: 0; background: #1abc9c; text-transform: uppercase; font-size: 15px; font-weight: bold; padding: 3px 0; } .special .pricing-top { background: black; } .pricing-option .pricing-edition { text-transform: uppercase; display: block; font-size: 25px; letter-spacing: 8px; } .pricing-option .price { display: inline-block; position: relative; } .pricing-option .price sup { position: absolute; top: 50px; left: -10px; font-size: 24px; } .pricing-option .price .price-amount { font-size: 108px; letter-spacing: -4px; } .pricing-option .price small { position: relative; left: -10px; font-size: 18px; } .pricing-option ul { list-style: none; margin: 0; background: #eee; text-align: center; padding-left: 0px; } .pricing-option ul li { border-bottom: solid 1px #e1e1e1; padding-top: 20px; padding-bottom: 20px; } .pricing-option .pricing-signup { display: block; text-align: center; font-size: 18px; font-weight: bold; padding: 15px 10px; color: white; background: #1abc9c; } .pricing-option .pricing-signup:hover { background: #d65386; } /* Contact Form */ .contact-form { text-align: left; padding: 0 15px; } .contact-form label { color: #999; } .contact-form input, .contact-form textarea { padding: 10px 12px; border-radius: 0; box-shadow: none; font-size: 14px; height: auto; } .contact-form .form-send { text-align: center; } .contact-form .form-send button { background: #d9534f; border: 0; padding: 10px 30px; color: #fff; transition: 0.4s; cursor: pointer; } .contact-form .form-send button:hover { background: #e65f5b; } .contact-form .validate { display: none; color: red; margin: 0 0 15px 0; font-weight: 400; font-size: 13px; } .contact-form .loading { display: none; color: #555; background: #fff; text-align: center; padding: 15px; margin: 15px 0; } .contact-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; border: 3px solid #18d26e; border-top-color: #eee; -webkit-animation: animate-loading 1s linear infinite; animation: animate-loading 1s linear infinite; } @-webkit-keyframes animate-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes animate-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .contact-form .error-message { display: none; color: #fff; background: #ed3c0d; text-align: center; padding: 15px; font-weight: 600; margin: 15px 0; } .contact-form .sent-message { display: none; color: #fff; background: #18d26e; text-align: center; padding: 15px; font-weight: 600; margin: 15px 0; } .chat-w { width: fit-content; position: fixed; color: #4f98c2; right: 0; margin-right: 10px; z-index: 100; bottom: 10px; background-color: rgba(255, 255, 255, 0.7); padding: 2px 10px 2px 2px; border-radius: 26px; transition: all 0.4s ease-in-out; margin-left: -6px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); -ms-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); } .chat-w:hover { background-color: rgba(255, 255, 255, 1); color: #d65386; } .chat-w a{ text-decoration: none; } .chat-w p{ margin-bottom: 0!important; } /* Copyrights */ #copyrights { padding: 20px 0; text-align: center; color: #fff; font-size: 14px; background: #57A1D2; } #copyrights a { color: #fff; } a.header-social { color: #fff; padding: 3px 6px!important; margin: 3px; font-size: 25px; display: inline-block!important; } a.header-social :hover { color: #333; } .mobcented.pad { padding-left: 25px; } .navbar-nav > li > a.header-social:hover, .navbar-nav > li > a.header-social:focus{ background-color: transparent!important; } #copyrights p { margin-bottom: 5px; } .credits { color: #999; } #breadcrumb { border-bottom: 1px solid #eee; margin-bottom: 15px; padding: 7px 0 9px 0; } .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px } #breadcrumb a{ color: #57a1d2; } .breadcrumb>li+li:before { padding: 0 5px; color: #ccc; content: "/\00a0" } .breadcrumb>.active { color: #777 } #breadcrumb ul{ margin:0; padding:0; list-style:none; } #breadcrumb ul li { display:inline; } #breadcrumb ul li.current a { text-decoration:underline; } .footer-social { padding-bottom: 30px; } .headphone.mobcented .fa-map-marker{ font-size: 16px; } .headphone.mobcented { text-align: left; } .copyrights .fa-map-marker { font-size: 16px; } .footer-logo a img { max-width: 265px; } .main-partners a img{ margin: 10px; } #accordion .panel-heading { padding: 0px; background-color: transparent; cursor: pointer; } #accordion .panel-heading a{ font-family: Roboto, sans-serif; color: #fff; text-decoration: none; font-size: 16px; padding: 6px 5px 5px 5px; width: 100%; font-weight: 600; } #accordion .panel-heading a:hover{ text-decoration: none; } #accordion .panel-title a:hover{ text-decoration: none; } #accordion .panel.panel-default { border-radius: 0px; } #accordion .panel { border: none; } #accordion .panel-heading { border-top-left-radius: 0px; border-top-right-radius: 0px; } #accordion .panel-default { border-color: transparent; } #accordion td, th { border: 1px solid #57a1d2; } .fa.fa-angle-right:before { content: "\f107"; } #accordion h3.panel-title:hover .fa.fa-angle-right { padding-left: 10px; } .fa.fa-angle-right { transition: all 0.3s ease; } h3.panel-title.collapsed i.fa.fa-angle-right:before { content: "\f105"; } #accordion .panel-title { margin-top: 0; font-size: 20px; } .clinic-i { margin-bottom: 30px; } .clinic-i span{ font-weight: 500; color: #4f98c2; } .clinic-i b{ font-weight: 500; } .clinic-i p{ margin-bottom: 8px; } .clinic-i h2{ color: #d65386; } .nav.navbar-nav.navbar-left { border-top: 1px solid #fff; width: 100%; padding-top: 11px; font-size: 17px; } .article-center { text-align: center; } .article-center img{ max-width: 300px; } .nav > li > a { padding: 10px 26px; } .akcii-menu { margin-top: 4px; margin-left: 47px; background-color: #d65386; font-weight: 500; } .akcii-menu:hover{ color: #333!important; background-color: #fff!important; } a.akcii-menu { padding: 6px 10px!important; border-radius: 4px; } .akcii img{ width: 100%; } .block.video-block video { border: 10px solid #4f98c2; border-radius: 10px; } a.article_page { color: #4f98c2; } a.article_page:hover { color:#d65386; } .adres-head a.ocu-phone { color:#fff; } .adres-head a:hover { color:#333!important; } .adres-head a { color: #fff; } .clinic-doctor h2 { color: #d65386; font-size: 25px; } .clinic-doctor { margin-bottom: 30px; } .clinic-doctor li { list-style-type: none; } .clinic-doctor li { color: #4f98c2; background-image: url(/assets/img/icon/map-r15.png); background-repeat: no-repeat; } .clinic-doctor li b { padding-left: 25px; } .doctors-list h3 { font-size: 18px; color: #191a25; } .doctors-list { font-size: 18px; } .clinic-doctor.list h2{ font-size: 23px; } .clinic-doctor.list li{ font-size: 17px; } input[type=email], input[type=text], input[type=password], textarea { border: 1px solid #ddd; padding: 5px; width: 100%; } select { width: 100%; background: transparent; padding: 5px; font-size: 16px; border: 1px solid #ccc; height: 42px; margin-bottom: 10px; } .doctors-list-all { margin-top: 45px; } .form-back { margin-bottom: 20px; } .form-back label { margin-top: 5px; display: block; font-weight: 500; } .form-back .data input { width: 98%; border: 1px solid #ccc; } .form-back span { color: #ff0000; } .btn.w300 { width: 300px; font-size: 15px; } .btn.w100 { width: 100%; font-size: 15px; } .btn.w300.b { background-color: #4f98c2; } .btn.main { max-width: 1140px; font-size: 20px; border: 10px solid #4f98c2; border-radius: 10px; font-weight: 300; margin-top: 30px; } span.error { font-size: 11px; position: absolute; width: 100%; } .main-pic { margin-top: 1px; } .main-pic img { width: 100%; } .main-pic-mobile { margin-top: 1px; display: none; } .main-pic-mobile img { width: 100%; } .main-pic { background-image: url(/assets/img/main-pic-24.jpg); height: 575px; background-repeat: no-repeat; background-position: center; } .main-pic .app-pic { position: absolute; top: 714px; right: calc(50% - 697px); } .main-pic .app-pic a { width: 285px; display: block; color: #d0ffd9; background-color: #d65386; text-transform: uppercase; font-size: 16px; transition: all 0.3s; padding: 7px 20px 5px 20px; box-shadow: 5px 5px 15px rgb(0 0 0 / 40%); -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 5px 5px 15px rgb(0 0 0 / 40%); -ms-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4); } .main-pic .app-pic a:hover { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -ms-box-shadow: none; transform: scale(0.98); } .direct100 .btn { width: 100%; margin-bottom: 20px; font-size: 17px; text-transform: uppercase; } .entry-personal.pre-entry.personal-direct a { width: 300px; background-color: #4f98c2; font-size: 15px; } @media all and (max-width: 1199px) and (min-width: 992px){ .navbar-inverse .navbar-brand img { height: 43px; margin-top: 4px; } .nav > li > a { padding: 10px 20px; } .mobcented.pad { padding-left: 5px; } .headphone { font-size: 22px; padding-left: 15px; } #slidewrapper h2.sert { margin-top: 155px; } .navbar-inverse .navbar-brand img { width: 140px; height: auto; } .lefted.bottom { border-bottom: none; margin-bottom: 0; } } @media (max-width:992px) { .personal-i img { max-width: 300px; display: unset; } .lefted.bottom { border-bottom: none; margin-bottom: 0; } } @media all and (max-width: 991px) and (min-width: 768px){ .headphone.mobcented { width: 210px; font-size: 21px; } .headphone span { font-size: 12px; } .navbar-header { width: 100%; margin-bottom: 10px; } a.navbar-brand { width: 100%; margin-bottom: 25px; } .navbar-inverse .navbar-brand img { width: 100%; } .mobcented.pad { display: none; } .navbar.navbar-inverse { padding-top: 0; } .navbar-header a.navbar-brand img { margin-top: -20px; margin-left: auto; margin-right: auto; width: 175px } .nav > li > a { padding: 10px 15px; } .footer-social { text-align: left; } .btn.main { margin-top: 0px; } } @media (max-width:768px) { .navbar-collapse { margin-top: 13px; border-color: #fff!important; } .tilt:hover { transform: scale(1.03); opacity: 0.9; } .personal-i { text-align: center; } .navbar-header a.navbar-brand img { margin-top: -35px; } .nav.navbar-nav.navbar-left { border-top: none; } .akcii-menu { width: fit-content; margin-left: 17px; background-color: transparent; } #slidewrapper h2.sert { font-size: 25px; margin-top: 70px; width: 80%; margin-left: 72px; } .form-back input { width: 100%; } .btn.main { margin-top: 0px; } .form-back .data input { width: 100%; } .main-pic { display: none; } .main-pic-mobile { display: block; } .main-pic-mobile .app-pic a { width: 100%; border-radius: 0; font-size: 18px; font-weight: 300; } .main-pic-mobile .app-pic a:hover { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -ms-box-shadow: none; transform: none; } .wb { padding-top: 5px; } } @media (max-width:500px) { #accordion td, th { font-size: 15px; font-weight: 400; } .p-mobile p{ font-size: 15px; font-weight: 400; line-height: inherit; } #accordion h3.panel-title:hover .fa.fa-angle-right { padding-left: 0px; } .title-main { font-size: 22px; } .article-center img{ width: 100%; } #slidewrapper h2.sert { font-size: 19px; width: 70%; } .btn.w300 { width: 100%; } .entry-personal.pre-entry.personal-direct a { width: 100%; } } @media (max-width:345px) { .navbar-inverse .navbar-brand img { height: 53px; } } /******/ @media all and (max-width: 1735px) and (min-width: 1507px){ .main-pic { background-size: 1735px; height: 499px; } .main-pic .app-pic { top: 653px; right: calc(50% - 631px); } } @media all and (max-width: 1506px) and (min-width: 1309px){ .main-pic { background-size: 1507px; height: 433px; } .main-pic .app-pic { top: 596px; right: calc(50% - 570px); } } @media all and (max-width: 1308px) and (min-width: 1137px){ .main-pic { background-size: 1308px; height: 376px; } .main-pic .app-pic { top: 546px; right: calc(50% - 506px); } } @media all and (max-width: 1136px) and (min-width: 992px){ .main-pic { background-size: 1136px; height: 327px; } .main-pic .app-pic { top: 520px; right: calc(50% - 465px); } } @media all and (max-width: 991px) and (min-width: 860px){ .main-pic { background-size: 991px; height: 285px; } .main-pic .app-pic { top: 648px; right: calc(50% - 424px); } .main-pic .app-pic a { font-size: 14px; padding: 5px 10px 3px 10px; } } @media all and (max-width: 859px) and (min-width: 769px){ .main-pic { background-size: 859px; height: 247px; } .main-pic .app-pic { top: 616px; right: calc(50% - 356px); } .main-pic .app-pic a { font-size: 14px; padding: 5px 10px 3px 10px; width: 231px; } }