style.css 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488
  1. /*MAIN PAGE*/
  2. /*HEADER*/
  3. header{
  4. position: fixed;
  5. height: 45px;
  6. width: 100%;
  7. background: #3b434d;
  8. z-index: 99999999;
  9. }
  10. header .menu{
  11. position: relative;
  12. height: 100%;
  13. width: 100%;
  14. }
  15. header .menu ul li a{
  16. height: 100%;
  17. color: #fff;
  18. font-family: Cuprum, sans-serif;
  19. font-size: 16px;
  20. }
  21. header .menu ul li a:hover{
  22. text-decoration: none;
  23. color: #5597d1;
  24. }
  25. header .menu ul{
  26. padding: 0;
  27. margin-bottom:0;
  28. height: 100%;
  29. width: 100%;
  30. list-style: none;
  31. top: 0;
  32. left: 0;
  33. display: flex;
  34. align-items: center;
  35. justify-content: center;
  36. overflow: hidden;
  37. }
  38. header .menu ul li{
  39. padding-top: 13px;
  40. margin:0 10px;
  41. height: 100%;
  42. float: left;
  43. }
  44. header .menu .circles{
  45. right: 0;
  46. position: absolute;
  47. padding-top: 5px ;
  48. }
  49. header .circles .circle{
  50. margin: 5px 2px;
  51. float: left;
  52. width: 30px;
  53. height: 30px;
  54. background:url(../images/circle-1.png);
  55. }
  56. header .circles .circle:nth-child(2){
  57. background:url(../images/circle-2.png);
  58. }
  59. header .circles .circle:nth-child(3){
  60. background:url(../images/circle-3.png);
  61. }
  62. header .burger{
  63. display: none;
  64. width: 30px;
  65. height: 30px;
  66. background: url(../images/menu-burger.png) center no-repeat;
  67. cursor: pointer;
  68. }
  69. header .menu-mobile{
  70. list-style: none;
  71. text-align: center;
  72. color: #000;
  73. background: #3b434d;
  74. }
  75. header .menu-mobile ul{
  76. list-style: none;
  77. }
  78. header .menu-mobile ul li{
  79. margin-top: 10px;
  80. }
  81. header .menu-mobile ul li a{
  82. color: #fff;
  83. font-family: Cuprum, sans-serif;
  84. font-size: 18px;
  85. }
  86. header .menu-mobile ul li a:hover{
  87. text-decoration: none;
  88. cursor: pointer;
  89. color: #5597d1;
  90. }
  91. /*HEADER END*/
  92. .main-container{
  93. padding-top: 60px;
  94. }
  95. /*LEFT SIDE*/
  96. .left-side{
  97. font-family: Cuprum, sans-serif;
  98. font-weight: 400;
  99. width: 20%;
  100. }
  101. @media (min-width: 992px){
  102. .left-side{
  103. padding-right: 20px;
  104. }
  105. }
  106. @media (min-width: 768px){
  107. .left-side{
  108. padding: 0 2px;
  109. }
  110. }
  111. .left-side .info{
  112. padding: 0 10px;
  113. margin-bottom: 20px;
  114. }
  115. .left-side .logo{
  116. text-align: center;
  117. margin-bottom: 15px
  118. }
  119. .left-side .logo-subtitle{
  120. line-height: 16px;
  121. font-size: 14px;
  122. text-align: center;
  123. color:#a1a1a1;
  124. }
  125. .left-side .howtoget_button{
  126. font-size: 16px;
  127. display: block;
  128. cursor: pointer;
  129. padding: 10px 0;
  130. text-align: center;
  131. text-decoration: underline;
  132. color:#929292;
  133. background: #ebebeb;
  134. margin: 10px 0;
  135. }
  136. /*
  137. .left-side .contacts{
  138. padding-left: 10px;
  139. }*/
  140. .left-side .contact{
  141. color:#929292;
  142. font-size: 14px;
  143. }
  144. .left-side .value{
  145. font-size: 16px;
  146. margin-bottom: 5px;
  147. }
  148. .left-side .all-phones{
  149. display: inline-block;
  150. text-decoration: underline;
  151. }
  152. .left-side .all-phones img{
  153. margin-left: 5px;
  154. }
  155. .left-side .specializations .spec-header{
  156. padding: 6px 10px;
  157. font-size: 22px;
  158. font-weight: 700;
  159. background: #929292;
  160. color: #fff;
  161. }
  162. .left-side .specializations .spec-header a{
  163. display: inline-block;
  164. float: right;
  165. }
  166. .left-side .spec{
  167. margin-top: 10px;
  168. height: 54px;
  169. background: #ebebeb;
  170. border-radius: 32px 0 0 32px;
  171. position: relative;
  172. }
  173. .left-side .spec .spec-avatar{
  174. width: 50px;
  175. height: 50px;
  176. border-radius: 50%;
  177. display: block;
  178. position: absolute;
  179. margin-left: -10px;
  180. z-index: 10;
  181. left: 12px;
  182. top: 2px;
  183. }
  184. .left-side .spec .text{
  185. margin-left: 55px;
  186. padding-top: 5px;
  187. }
  188. .left-side .spec .text .subtitle{
  189. font-size: 14px;
  190. color: #929292;
  191. }
  192. .left-side .spec .text .title{
  193. font-size: 16px;
  194. }
  195. .left-side .more{
  196. text-align: right;
  197. margin-top: 10px;
  198. }
  199. .left-side .more a{
  200. font-size: 14px;
  201. color:#929292;
  202. }
  203. .left-side .add-info{
  204. width: 100%;
  205. display: inline-block;
  206. margin-top: 40px;
  207. }
  208. .left-side .add-info .info{
  209. padding-top: 20px;
  210. height: 90px;
  211. font-size: 20px;
  212. line-height: 20px;
  213. font-weight: 700;
  214. background: #ebd0ce;
  215. text-align: center;
  216. color: #fff;
  217. }
  218. /*LEFT-SIDE END*/
  219. /*MAIN TITLE*/
  220. .main-title{
  221. position: relative;
  222. }
  223. .main-title .title{
  224. font-family: Cuprum;
  225. font-weight: 700;
  226. color: #004d7b;
  227. }
  228. .main-title .subtitle{
  229. font-family: Cuprum;
  230. font-weight: 700;
  231. font-size: 16px;
  232. color: #929292;
  233. margin-bottom: 20px;
  234. }
  235. .soc{
  236. position: absolute;
  237. right: 60px;
  238. top: 30px;
  239. }
  240. .soc .social{
  241. float: left;
  242. width: 25px;
  243. height: 25px;
  244. margin-right: 4px;
  245. border-radius: 50%;
  246. background: blue;
  247. display: block;
  248. }
  249. .soc .social:nth-child(1){
  250. background: url(../images/soc-fb.png)
  251. }
  252. .soc .social:nth-child(2){
  253. background: url(../images/soc-vk.png)
  254. }
  255. .soc .social:nth-child(3){
  256. background: url(../images/soc-ok.png)
  257. }
  258. .soc .social:nth-child(4){
  259. background: url(../images/soc-twitter.png)
  260. }
  261. .soc .social:nth-child(1):hover{
  262. background: url(../images/soc-fb-hover.png)
  263. }
  264. .soc .social:nth-child(2):hover{
  265. background: url(../images/soc-vk-hover.png)
  266. }
  267. .soc .social:nth-child(3):hover{
  268. background: url(../images/soc-ok-hover.png)
  269. }
  270. .soc .social:nth-child(4):hover{
  271. background: url(../images/soc-twitter-hover.png)
  272. }
  273. /*MAIN TITLE END*/
  274. /*MAIN CONTENT*/
  275. .main-container .col-lg-10{
  276. width: 80%;
  277. }
  278. /*.main-container .content{
  279. padding-right: 0;
  280. }*/
  281. .content-left{
  282. padding-right: 0;
  283. }
  284. .content-left .slider{
  285. position: relative;
  286. }
  287. .content-left .arrow{
  288. width: 10px;
  289. height: 16px;
  290. position: absolute;
  291. z-index: 10;
  292. top: 50%;
  293. cursor: pointer;
  294. }
  295. .content-left .arrow-left{
  296. background: url(../images/slide-arrow-left.png);
  297. left: 10px;
  298. }
  299. .content-left .arrow-right{
  300. background: url(../images/slider-arrow-right.png);
  301. right: 10px;
  302. }
  303. .content-left .swiper-slide img{
  304. display: block;
  305. }
  306. .content-left .about{
  307. display: inline-block;
  308. margin-top: 40px;
  309. }
  310. .content-left .about .block-header{
  311. padding: 6px 10px;
  312. font-size: 22px;
  313. font-weight: 700;
  314. font-family: Cuprum, sans-serif;
  315. background: #929292;
  316. color: #fff;
  317. margin-bottom: 10px;
  318. }
  319. .content-left .about .block-header img{
  320. float: right;
  321. margin-top: 3px;
  322. }
  323. .content-left .doctor{
  324. font-family: Cuprum, sans-serif;
  325. font-weight: 400;
  326. }
  327. .content-left .doctor .doctor-avatar{
  328. margin-bottom: 8px;
  329. text-align: center;
  330. }
  331. .content-left .doctor .doctor-name{
  332. text-align: center;
  333. font-size: 22px;
  334. color: #004d7b;
  335. line-height: 22px;
  336. margin-bottom: 4px;
  337. }
  338. .content-left .doctor .doctor-desc{
  339. text-align: center;
  340. color: #929292;
  341. }
  342. .content-left .doctor .doctor-link{
  343. padding: 9px 0;
  344. font-size: 14px;
  345. margin-top: 15px;
  346. text-align: center;
  347. background: #ebebeb;
  348. }
  349. .content-left .doctor .doctor-link a{
  350. color: #929292;
  351. text-decoration: underline;
  352. }
  353. .content-left .about .about-text .title{
  354. font-family: Cuprum, sans-serif;
  355. font-weight: 700;
  356. font-size: 16px;
  357. }
  358. .content-left .about .about-text .text{
  359. font-family: Open Sans, sans-serif;
  360. font-size: 16px;
  361. color: #3b434d;
  362. }
  363. .content-left .about .more-text{
  364. font-family: Open Sans, sans-serif;
  365. margin-top: 10px;
  366. }
  367. .content-left .about .more{
  368. margin-top: 10px;
  369. text-align: right;
  370. }
  371. .content-left .about .more a{
  372. font-size: 14px;
  373. color:#929292;
  374. }
  375. .content-left .clinics{
  376. margin-top: 40px;
  377. }
  378. .content-left .clinics .clinic{
  379. position: relative;
  380. display: inline-block;
  381. margin-bottom: 10px;
  382. border: 1px solid #ebebeb;
  383. }
  384. .content-left .clinics .block-header{
  385. padding: 6px 10px;
  386. font-size: 22px;
  387. font-weight: 700;
  388. font-family: Cuprum, sans-serif;
  389. background: #929292;
  390. color: #fff;
  391. margin-bottom: 10px;
  392. }
  393. .content-left .clinics .block-header img{
  394. float: right;
  395. margin-top: 3px;
  396. }
  397. .content-left .clinics .clinic-image{
  398. margin-right: 15px;
  399. display: block;
  400. float: left;
  401. height: 100%;
  402. }
  403. .content-left .clinics .text{
  404. /*padding-left: 115px;*/
  405. }
  406. .content-left .clinics .text .title{
  407. font-size: 18px;
  408. line-height: 18px;
  409. font-family: Cuprum, sans-serif;
  410. }
  411. .content-left .clinics .text .subtitle{
  412. font-family: Open Sans, sans-serif;
  413. color: #a1a1a1;
  414. padding-left: 10px;
  415. }
  416. .content-left .clinics .clinic .recomended{
  417. position: absolute;
  418. left: -7px;
  419. bottom: 5px;
  420. height: 36px;
  421. width: 196px;
  422. padding-top: 6px;
  423. font-family: Cuprum, sans-serif;
  424. font-size: 16px;
  425. color: #fff;
  426. padding-left: 6px;
  427. background:url(../images/green-recomended.png) no-repeat;
  428. }
  429. .content-left .clinics .more{
  430. text-align: right;
  431. margin-top: 10px;
  432. }
  433. .content-left .clinics .more a{
  434. font-size: 14px;
  435. color:#929292;
  436. }
  437. .content-right{
  438. padding-left: 0;
  439. }
  440. .content .importants{
  441. font-family: Open Sans, sans-serif;
  442. }
  443. .content .importants .important{
  444. height: 90px;
  445. margin-left: 10px;
  446. margin-bottom: 10px;
  447. padding:0;
  448. display: block;
  449. background: #d7d7d7;
  450. }
  451. .content .importants .important:hover{
  452. text-decoration: none;
  453. background: #004d7b;
  454. }
  455. .content .importants .important:focus{
  456. text-decoration: none;
  457. }
  458. .content .importants .important:nth-child(1) .description{
  459. padding-top: 20px;
  460. }
  461. .content .importants .important:nth-child(2) .description{
  462. padding-top: 15px;
  463. padding-left: 0;
  464. }
  465. .content .importants .important:nth-child(4) .description{
  466. padding-top: 10px;
  467. }
  468. .content .importants .important:nth-child(6) .description{
  469. padding-top: 20px;
  470. }
  471. .content .importants .important .important-image{
  472. padding-top: 20px;
  473. margin-left: 5px;
  474. height: 100%;
  475. width: 25%;
  476. display: block;
  477. float: left;
  478. }
  479. .content .importants .important .description{
  480. color: #fff;
  481. font-weight: 700;
  482. height: 100%;
  483. font-size: 15px;
  484. padding-left: 65px;
  485. }
  486. .content-right .today{
  487. margin-top: 25px;
  488. padding-left: 15px;
  489. display: inline-block;
  490. }
  491. .content-right .today .today-item .head{
  492. background: #929292;
  493. padding: 12px 5px;
  494. font-size: 13px;
  495. font-family: Cuprum;
  496. text-align: right;
  497. height: 40px;
  498. color: #fff;
  499. border-radius: 10px 0 0 0;
  500. }
  501. .content-right .today .today-item .head-blue{
  502. background: #5597d1;
  503. }
  504. .content-right .today .today-item .head .date{
  505. float: left;
  506. display: block;
  507. }
  508. .content-right .today .today-item .head .name{
  509. float: right;
  510. display: block;
  511. }
  512. .content-right .today .today-item{
  513. padding-right: 0;
  514. }
  515. .content-right .today .block-header{
  516. padding: 6px 10px;
  517. font-size: 22px;
  518. font-weight: 700;
  519. font-family: Cuprum, sans-serif;
  520. background: #929292;
  521. color: #fff;
  522. margin-bottom: 10px;
  523. }
  524. .content-right .today .block-header img{
  525. float: right;
  526. margin-top: 3px;
  527. }
  528. .content-right .today .image{
  529. position: relative;
  530. margin-top: 10px;
  531. }
  532. .content-right .today .image img{
  533. display: block;
  534. width: 200px;
  535. margin: 0 auto;
  536. }
  537. .content-right .today .logo{
  538. position: absolute;
  539. top: 0;
  540. font-family: Cuprum, sans-serif;
  541. right: 15px;
  542. width: 60px;
  543. height: 60px;
  544. }
  545. .content-right .today .logo img{
  546. width: 60px;
  547. height: 60px;
  548. }
  549. .content-right .today .free{
  550. position: absolute;
  551. padding-top: 5px;
  552. padding-left: 7px;
  553. top: 60px;
  554. left: -5px;
  555. font-family: Cuprum, sans-serif;
  556. color: #fff;
  557. width: 200px;
  558. height: 40px;
  559. background: url(../images/free-bg.png) no-repeat;
  560. }
  561. .content-right .today .desc{
  562. margin-top:10px;
  563. margin-bottom: 10px;
  564. font-family: Cuprum, sans-serif;
  565. padding-left: 5px;
  566. font-size: 14px;
  567. }
  568. .content-right .today .org{
  569. font-family: Cuprum, sans-serif;
  570. font-weight: 600;
  571. text-align: center;
  572. border-top:1px solid #ebebeb;
  573. padding-top: 5px;
  574. color: #004d7b;
  575. }
  576. .content-right .today .adress{
  577. margin-top: 5px;
  578. font-family: Cuprum, sans-serif;
  579. font-size: 14px;
  580. padding: 15px 0;
  581. background: #ebebeb;
  582. color: #929292;
  583. text-align: center;
  584. }
  585. .content-right .news .block-header{
  586. padding: 6px 10px;
  587. font-size: 22px;
  588. font-weight: 700;
  589. font-family: Cuprum, sans-serif;
  590. background: #929292;
  591. color: #fff;
  592. margin-bottom: 10px;
  593. }
  594. .content-right .news .block-header img{
  595. float: right;
  596. margin-top: 3px;
  597. }
  598. .content-right .news-item{
  599. height: 320px;
  600. padding: 0 10px;
  601. padding-right: 0;
  602. margin-bottom: 20px;
  603. }
  604. .content-right .news-item .inner{
  605. height: inherit;
  606. background: #ebebeb;
  607. }
  608. .content-right .news{
  609. display: inline-block;
  610. margin-top: 25px;
  611. padding-left: 15px;
  612. }
  613. .content-right .news .image{
  614. font-family: Cuprum, sans-serif;
  615. margin-bottom: 10px;
  616. color:#fff;
  617. height: 140px;
  618. width: 100%;
  619. position: relative;
  620. }
  621. .content-right .news .image img{
  622. display: block;
  623. width: 200px;
  624. margin: 0 auto;
  625. }
  626. .content-right .news .image .title{
  627. font-size: 16px;
  628. position: absolute;
  629. bottom: 10px;
  630. left: 20%;
  631. }
  632. .content-right .news .desc{
  633. font-family: Open Sans, sans-serif;
  634. padding-left: 10px;
  635. font-size: 14px;
  636. line-height: 17px;
  637. }
  638. .content-right .news .data{
  639. padding: 10px 0;
  640. margin:10px;
  641. margin-top:20px;
  642. color: #929292;
  643. text-align: right;
  644. border-top: 1px solid #d4d4d4;
  645. }
  646. /*footer*/
  647. footer{
  648. position: absolute;
  649. margin-top: 40px;
  650. width: 100%;
  651. padding-top: 40px;
  652. padding-bottom: 20px;
  653. display: inline-block;
  654. background: #3b434d;
  655. }
  656. footer .list{
  657. position: relative;
  658. list-style: none;
  659. float: left;
  660. width: 25%;
  661. font-family: Cuprum, sans-serif;
  662. font-size: 16px;
  663. }
  664. footer .list a{
  665. color: #f2f2f3
  666. }
  667. footer .list li:nth-child(1){
  668. }
  669. footer .list li:nth-child(1) a{
  670. color: #75787b;
  671. font-weight: 700;
  672. font-size: 18px;
  673. }
  674. footer .admin-button{
  675. background: #ebebeb;
  676. margin-top: 25px;
  677. padding: 10px 5px;
  678. text-align: center;
  679. display: block !important;
  680. }
  681. footer .admin-button a{
  682. font-size: 14px;
  683. color: #929292;
  684. text-decoration: underline;
  685. }
  686. footer .admin-button a:hover{
  687. text-decoration: underline;
  688. }
  689. footer .copyright{
  690. float: right;
  691. height: auto;
  692. margin-top: 40px;
  693. }
  694. footer .copyright .text{
  695. color: #919293;
  696. font-family: Open Sans, sans-serif;
  697. float: left;
  698. width: 60%;
  699. text-align: right;
  700. }
  701. footer .copyright a{
  702. font-family: Open Sans, sans-serif;
  703. padding-left: 8px;
  704. text-decoration: underline;
  705. color: #9e9e9e;
  706. }
  707. footer .copyright a:hover{
  708. color: #9e9e9e;
  709. text-decoration: underline;
  710. }
  711. footer .copyright .logo{
  712. text-align: center;
  713. float: left;
  714. margin-left: 20px;
  715. }
  716. /**/
  717. @media (min-width: 1200px){
  718. .important{
  719. width: 47%;
  720. }
  721. }
  722. @media (min-width: 992px){
  723. .content-right .today .today-item{
  724. width: 50%;
  725. margin-top: 20px;
  726. }
  727. .content-right .news-item{
  728. width: 50%;
  729. }
  730. }
  731. @media (min-width: 768px){
  732. .content-right .today .today-item{
  733. float: left;
  734. width: 50%;
  735. }
  736. .content-right .news-item{
  737. float: left;
  738. width: 50%;
  739. }
  740. }
  741. @media (max-width: 992px){
  742. .left-side{
  743. width: 27% !important;
  744. }
  745. .content-a-lot{
  746. padding-right: 0;
  747. }
  748. .main-container .col-lg-10{
  749. width: 73% !important;
  750. }
  751. header .circles{
  752. position: static !important;
  753. }
  754. header .menu ul li a{
  755. font-size: 14.5px ;
  756. }
  757. }
  758. @media (max-width: 1200px){
  759. .main-title .soc{
  760. display: none;
  761. }
  762. footer .admin-button{
  763. width: 80%;
  764. }
  765. }
  766. @media (max-width: 1200px){
  767. .left-side{
  768. width: 20%;
  769. }
  770. .content-left{
  771. width: 100%;
  772. }
  773. .content-left .clinic{
  774. width: 100%;
  775. }
  776. .content-right{
  777. width: 100%;
  778. }
  779. }
  780. @media (max-width: 768px){
  781. .left-side .specializations .spec{
  782. display: none;
  783. }
  784. .left-side .specializations .more{
  785. display: none;
  786. }
  787. .left-side .add-info{
  788. display: none;
  789. }
  790. .main-container .main-title{
  791. display: none;
  792. }
  793. .content .clinics{
  794. display: none;
  795. }
  796. .content-right{
  797. padding-right: 0;
  798. }
  799. .content-right .importants{
  800. display: none;
  801. }
  802. .left-side{
  803. width: 100% !important;
  804. margin-bottom: 40px;
  805. }
  806. .main-container .col-lg-10 {
  807. width: 100% !important;
  808. }
  809. .main-container .main-title{
  810. width: 100% !important;
  811. }
  812. .main-container .content-right{
  813. width: 100% !important;
  814. }
  815. .main-container .content-right .today{
  816. width: 100% !important;
  817. }
  818. .importants{
  819. width: 100% !important;
  820. }
  821. .main-container .content-left{
  822. width: 100% !important;
  823. }
  824. .main-container .content-left .clinic{
  825. width: 100% !important;
  826. }
  827. .main-container .mobile{
  828. display: block;
  829. }
  830. .left-side .title{
  831. font-size: 32px;
  832. }
  833. .left-side .main-title{
  834. padding: 0;
  835. }
  836. .left-side{
  837. padding-right: 15px;
  838. }
  839. .left-side .logo-subtitle{
  840. width: 50%;
  841. margin: 0 auto;
  842. }
  843. .left-side .specializations .spec-header a{
  844. transform: rotate(90deg);
  845. }
  846. .content-left .doctor{
  847. margin-bottom: 30px;
  848. }
  849. .content-left .about .about-text{
  850. margin-bottom: 30px;
  851. }
  852. .main-container .content-a-lot{
  853. padding-right: 0;
  854. }
  855. .content-right .today .today-item{
  856. width: 50%;
  857. float: left;
  858. }
  859. .content-right .news .news-item{
  860. width: 50%;
  861. float: left;
  862. }
  863. header .menu li{
  864. display: none;
  865. }
  866. header .menu ul .circles{
  867. display: block;
  868. position: absolute !important;
  869. }
  870. header .menu ul .burger{
  871. left: 0;
  872. }
  873. header .menu-mobile{
  874. position: absolute;
  875. width: 100%;
  876. }
  877. header .menu-mobile ul{
  878. padding: 0;
  879. }
  880. footer .list{
  881. width: 100%;
  882. padding-right: 40px;
  883. }
  884. footer .list li{
  885. display: none;
  886. }
  887. footer .list li:nth-child(1){
  888. display: block;
  889. }
  890. }
  891. @media(max-width: 485px){
  892. .content-right .news .news-item{
  893. width: 100%;
  894. }
  895. .content-right .today .today-item{
  896. width: 100%;
  897. }
  898. }
  899. .mobile{
  900. display: none;
  901. }
  902. /*MAIN CONTENT END*/
  903. /*END MAIN PAGE*/
  904. /*CONTACTS PAGE*/
  905. .contacts-container .side-bar .logo{
  906. margin-bottom: 50px;
  907. }
  908. .contacts-container .main-title{
  909. padding-left: 40px;
  910. }
  911. .contacts-container .main-title .title{
  912. font-size: 34px;
  913. }
  914. .contacts-container .side-bar ul{
  915. list-style: none;
  916. padding-left: 0;
  917. }
  918. .contacts-container .side-bar li{
  919. padding: 7px 0;
  920. text-align: right;
  921. border-bottom: 1px solid #ebebeb;
  922. }
  923. .contacts-container .side-bar li:first-child{
  924. border-top: 1px solid #ebebeb;
  925. }
  926. .contacts-container .side-bar li a{
  927. color: #004d7b;
  928. font-family: Cuprum, sans-serif;
  929. font-weight: 600;
  930. font-size: 17px;
  931. }
  932. .contacts-container .side-bar li a:hover{
  933. text-decoration: none;
  934. }
  935. .contacts-container .map{
  936. margin-bottom: 50px;
  937. }
  938. .contacts-container #map{
  939. height: 345px;
  940. margin: auto;
  941. }
  942. .contacts-container .right-side-bar .info{
  943. margin-bottom: 10px;
  944. }
  945. .contacts-container .right-side-bar .soc{
  946. position: static;
  947. display: inline-block;
  948. text-align: center;
  949. padding: 0 10px;
  950. margin-top: 0;
  951. margin-bottom: 20px;
  952. }
  953. .contacts-container .center-content .work-time{
  954. margin-bottom: 40px;
  955. }
  956. .contacts-container .center-content .work-time .min-title{
  957. margin-bottom: 20px;
  958. font-family: Cuprum, sans-serif;
  959. font-size: 20px;
  960. font-weight: 700;
  961. }
  962. .contacts-container .center-content .work-time .text{
  963. font-size: 16px;
  964. }
  965. .contacts-container .center-content .to-doctors{
  966. margin-bottom: 60px;
  967. display: inline-block;
  968. }
  969. .contacts-container .center-content .to-doctors .min-title{
  970. margin-bottom: 20px;
  971. font-family: Cuprum, sans-serif;
  972. font-size: 18px;
  973. font-weight: 700;
  974. }
  975. .contacts-container .center-content .callback .min-title-text{
  976. font-size: 16px;
  977. font-family: Cuprum;
  978. font-weight: 700;
  979. }
  980. .contacts-container .center-content .to-doctors .personal-doctor{
  981. width: 33.33333333332%;
  982. display: inline-block;
  983. color: #000;
  984. padding: 0;
  985. padding-right: 10px;
  986. text-decoration: none;
  987. margin-bottom: 40px;
  988. }
  989. .contacts-container .center-content .to-doctors .personal-doctor .doctor-type{
  990. font-size: 14px;
  991. font-family: Cuprum, sans-serif;
  992. color: #929292;
  993. }
  994. .contacts-container .center-content .to-doctors .personal-doctor .doctor-header{
  995. display: inline-block;
  996. width: 100%;
  997. background: #ebebeb;
  998. border-radius: 30px 0 0 30px;
  999. }
  1000. .contacts-container .center-content .to-doctors .personal-doctor .doctor-image{
  1001. float: left;
  1002. }
  1003. .contacts-container .center-content .to-doctors .personal-doctor .doctor-name{
  1004. padding-top: 10px;
  1005. padding-left: 65px;
  1006. font-family: Cuprum, sans-serif;
  1007. color: #004d7b;
  1008. font-size: 18px;
  1009. line-height: 18px;
  1010. }
  1011. .contacts-container .center-content .to-doctors .personal-doctor .doctor-category .image{
  1012. width: 13%;
  1013. float: left;
  1014. padding-top: 70px;
  1015. }
  1016. .contacts-container .center-content .to-doctors .personal-doctor .doctor-category .text{
  1017. padding-top: 10px;
  1018. width: 87%;
  1019. float: left;
  1020. }
  1021. .contacts-container .center-content .to-doctors .personal-doctor .doctor-category .text .category{
  1022. color: #929292;
  1023. margin-bottom: 10px;
  1024. }
  1025. .contacts-container .center-content .to-doctors .personal-doctor .doctor-category .text .otdels{
  1026. color: #004d7b;
  1027. font-family: Open Sans, sans-serif;
  1028. }
  1029. .contacts-container .center-content .to-doctors .personal-doctor .contacts{
  1030. display: inline-block;
  1031. margin-top: 10px;
  1032. width: 100%;
  1033. background: #ebebeb;
  1034. padding-top: 10px;
  1035. padding-left: 5px;
  1036. padding-right: 5px;
  1037. }
  1038. .contacts-container .center-content .to-doctors .personal-doctor .contact{
  1039. color:#929292;
  1040. font-size: 14px;
  1041. font-family: Cuprum, sans-serif;
  1042. }
  1043. .contacts-container .center-content .to-doctors .personal-doctor .value{
  1044. font-size: 16px;
  1045. margin-bottom: 5px;
  1046. font-family: Cuprum, sans-serif;
  1047. }
  1048. .contacts-container .center-content .to-doctors .personal-doctor .value a {
  1049. font-size: 15px;
  1050. }
  1051. .contacts-container .center-content .to-doctors .personal-doctor .priem{
  1052. margin-top: 10px;
  1053. font-weight: 700;
  1054. font-size: 16px;
  1055. font-family: Cuprum, sans-serif;
  1056. }
  1057. .contacts-container .center-content .callback{
  1058. display: inline-block;
  1059. }
  1060. .contacts-container .center-content .callback .min-title{
  1061. margin-bottom: 20px;
  1062. font-family: Cuprum, sans-serif;
  1063. font-size: 20px;
  1064. font-weight: 700;
  1065. }
  1066. .contacts-container .center-content .callback .min-title-text{
  1067. font-size: 19px;
  1068. margin-bottom: 30px;
  1069. }
  1070. .contacts-container .center-content .callback form p{
  1071. font-size: 12px;
  1072. color: #929292;
  1073. }
  1074. .contacts-container .center-content .callback form input{
  1075. margin-bottom: 10px;
  1076. padding-left: 5px;
  1077. font-family: Open Sans, sans-serif;
  1078. font-size: 14px;
  1079. font-weight: 400;
  1080. width: 100%;
  1081. height: 30px;
  1082. color: #929292;
  1083. background: #ebebeb;
  1084. border: none;
  1085. }
  1086. .contacts-container .center-content .callback form input[type = "checkbox"]{
  1087. width: 20px;
  1088. height: inherit;
  1089. }
  1090. .contacts-container .center-content .callback form span{
  1091. font-size: 12px;
  1092. color: #929292;
  1093. }
  1094. .contacts-container .center-content .callback form textarea{
  1095. width: 100%;
  1096. height: 110px;
  1097. padding-left: 5px;
  1098. font-family: Open Sans, sans-serif;
  1099. font-size: 14px;
  1100. color: #929292;
  1101. background: #ebebeb;
  1102. border: none;
  1103. resize: none;
  1104. }
  1105. .contacts-container .center-content .callback form .form-button{
  1106. margin-top: 10px;
  1107. cursor: pointer;
  1108. padding: 7px 0;
  1109. color: #fff;
  1110. text-align: center;
  1111. font-family: Cuprum , sans-serif;
  1112. font-weight: 700;
  1113. background: #004d7b;
  1114. border: 0;
  1115. }
  1116. .contacts-container .center-content .to-doctors .doctor-button{
  1117. display: inline-block;
  1118. width: 100%;
  1119. margin-top: 10px;
  1120. text-align: center;
  1121. text-decoration: underline;
  1122. font-family: Cuprum, sans-serif;
  1123. padding: 7px 0;
  1124. color: #929292;
  1125. background: #ebebeb;
  1126. }
  1127. .contacts-container .center-content .to-doctors .doctor-button:hover{
  1128. color: #fff;
  1129. background: #004d7b;
  1130. }
  1131. /*
  1132. .contacts-container .center-content .*/
  1133. @media (max-width: 1200px){
  1134. .contacts-container .left-side {
  1135. width: 20% !important;
  1136. }
  1137. .contacts-container .importants .important:nth-child(2) .description{
  1138. padding-left:58px;
  1139. }
  1140. }
  1141. @media (min-width: 1200px){
  1142. .contacts-container .main-title {
  1143. width: 60%;
  1144. padding-left: 40px;
  1145. }
  1146. .contacts-container .focus-content {
  1147. width: 60%;
  1148. padding-left: 40px;
  1149. }
  1150. .contacts-container .important{
  1151. width: 100%;
  1152. }
  1153. }
  1154. @media (max-width: 1200px){
  1155. .contacts-container .center-content .callback{
  1156. margin-bottom: 40px;
  1157. }
  1158. .contacts-container .left-side {
  1159. width: 100% !important;
  1160. margin-bottom: 40px;
  1161. }
  1162. .contacts-container .left-side .main-title{
  1163. float: none;
  1164. width: 100% !important;
  1165. }
  1166. .contacts-container .center-content{
  1167. width: 100%;
  1168. }
  1169. .contacts-container .center-content .to-doctors .personal-doctor{
  1170. width: 100%;
  1171. }
  1172. .contacts-container .center-content .callback form .form-button{
  1173. width: 100%;
  1174. }
  1175. .contacts-container .main-title{
  1176. padding-left: 15px;
  1177. }
  1178. .contacts-container .center-content .to-doctors .personal-doctor .doctor-category .image{
  1179. width: 10%;
  1180. padding-top: 20px;
  1181. }
  1182. .contacts-container .left-side .importants .important-image{
  1183. width: 10%;
  1184. }
  1185. .contacts-container .left-side .importants .description{
  1186. padding-top: 20px;
  1187. }
  1188. .contacts-container .right-side-bar .info .logo{
  1189. display: none;
  1190. }
  1191. .contacts-container .main-title{
  1192. display: block;
  1193. }
  1194. .contacts-container .center-content .title{
  1195. display: none;
  1196. }
  1197. .contacts-container .center-content .subtitle{
  1198. display: none;
  1199. }
  1200. }
  1201. /*CONTACTS PAGE END*/