/* Table of Contents 01. Icons ------------------------------------ Ico Bracket ------------------------------ 02. Reset ------------------------------------ 03. Base ------------------------------------- 04. Fonts ------------------------------------ 05. Helpers ---------------------------------- Clear ------------------------------------ Notext ----------------------------------- No Scroll -------------------------------- Hidden ----------------------------------- Alignleft -------------------------------- Alignright ------------------------------- Disabled --------------------------------- Grid ------------------------------------- 06. Title With Brackets ---------------------- Responsive Helpers ----------------------- 07. Transitions ------------------------------ 08. Container -------------------------------- 09. Content ---------------------------------- 10. Footer ----------------------------------- Small Desktop ---------------------------- 11. Header ----------------------------------- Small Desktop ---------------------------- 12. Header Primary --------------------------- Large Desktop ---------------------------- 13. Main ------------------------------------- 14. Shell ------------------------------------ 15. Sidebar ---------------------------------- 16. Wrapper ---------------------------------- 17. Article ---------------------------------- Small Desktop ---------------------------- 18. Article Inverse -------------------------- Small Desktop ---------------------------- 19. Article Alt ------------------------------ 20. Benefit ---------------------------------- 21. Box Item --------------------------------- Small Desktop ---------------------------- 22. box Item Alt ----------------------------- 23. Button ----------------------------------- Button Block ----------------------------- 24. Counter ---------------------------------- 25. Event ------------------------------------ 26. Fact ------------------------------------- 27. Feature ---------------------------------- 28. Form Elements ---------------------------- 29. Radio ------------------------------------ 30. Form Filters ----------------------------- 31. Intro ------------------------------------ Edge ------------------------------------- 32. Intro Home ------------------------------- 33. Link Skip -------------------------------- 34. Link Brackets ---------------------------- 35. List ------------------------------------- 36. List Links ------------------------------- 37. List Places ------------------------------ 38. List Researches -------------------------- 39. List Events ------------------------------ 40. List Contact Info ------------------------ 41. List Institutes -------------------------- 42. Logo ------------------------------------- 43. Map ------------------------------------- 44. Member ----------------------------------- 45. Nav -------------------------------------- Large Desktop ---------------------------- Small Desktop ---------------------------- 46. Nav Secondary ---------------------------- 47. Nav Show --------------------------------- 48. Paging ----------------------------------- 49. Place ------------------------------------ 50. Restult ---------------------------------- 51. Search ----------------------------------- 52. Search--programs ------------------------- 53. Section Offset bottom -------------------- 54. Section Welcome -------------------------- Small Desktop ---------------------------- 55. Section News ----------------------------- 56. Section Details -------------------------- 57. Section Details Missions ----------------- 58. Section Details Facts -------------------- 59. Section Details Histort ------------------ 60. Section Details Student Life ------------- 61. Section Details Alumni ------------------ 62. Section Details Academics --------------- 63. Section Leadership ----------------------- 64. Section Features ------------------------- 65. Section Research ------------------------- 66. Section Stories -------------------------- Large Desktop ---------------------------- 67. Section History -------------------------- Large Desktop ---------------------------- 68. Section Places --------------------------- 69. Section Contact -------------------------- 70. Section Benefits ------------------------- 71. Section Colleges ------------------------- 72. Section Article -------------------------- 73. Section Programs ------------------------- Small Desktop ---------------------------- 74. Slider ----------------------------------- 75. Slider Learning -------------------------- 76. Slider Benefits -------------------------- 77. Slider Benefits Inverse ------------------ 78. Table ------------------------------------ 79. Update ----------------------------------- Small Desktop ---------------------------- 80. Widget ----------------------------------- */ /* ------------------------------------------------------------ *\ Icons \* ------------------------------------------------------------ */ [class^="ico-"] { font-size: 0; line-height: 0; text-indent: -4004px; display: inline-block; vertical-align: middle; background-repeat: no-repeat; } .ico-shape-diamond { width: 50px; height: 50px; border: 3px solid #ec1c23; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .ico-shape-diamond--xs { width: 25px; height: 25px; border-width: 5px; } .ico-shape-diamond--blue { border-color: #011e40; } .ico-shape-diamond--lg { width: 60px; height: 60px; } /* Ico Bracket */ .ico-bracket { width: 4px; background: #f40606; height: 34px; position: relative; } .ico-bracket:before, .ico-bracket:after { content: ''; width: 7px; height: 4px; position: absolute; background: #f40606; } .ico-bracket--left:before { left: 0; top: 0; } .ico-bracket--left:after { left: 0; bottom: 0; } .ico-bracket--right:before { right: 0; top: 0; } .ico-bracket--right:after { right: 0; bottom: 0; } @media(max-width: 768px){ .ico-shape-diamond { width: 28px; height: 28px; } .ico-shape-diamond--lg { width: 60px; height: 60px; } } .ico-arrow-right-red { background: url(/etc/designs/university-2017/images/sprite/ico-arrow-right-red.png) no-repeat 0 0; background-size: 100% 100%; width: 27px; height: 8px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-right-short-grey { background: url(/etc/designs/university-2017/images/sprite/ico-arrow-right-short-grey.png) no-repeat 0 0; background-size: 100% 100%; width: 18px; height: 15px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-right { background: url(/etc/designs/university-2017/images/sprite/ico-arrow-right.png) no-repeat 0 0; background-size: 100% 100%; width: 27px; height: 8px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-up { background: url(/etc/designs/university-2017/images/sprite/ico-arrow-up.png) no-repeat 0 0; background-size: 100% 100%; width: 26px; height: 32px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-down-red { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-down-red.png) no-repeat 0 0; background-size: 100% 100%; width: 14px; height: 9px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-down-white { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-down-white.png) no-repeat 0 0; background-size: 100% 100%; width: 14px; height: 9px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-down { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-down.png) no-repeat 0 0; background-size: 100% 100%; width: 14px; height: 9px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-left-blue-lg { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-left-blue-lg.png) no-repeat 0 0; background-size: 100% 100%; width: 16px; height: 27px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-left-blue { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-left-blue.png) no-repeat 0 0; background-size: 100% 100%; width: 8px; height: 14px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-right-blue-lg { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-right-blue-lg.png) no-repeat 0 0; background-size: 100% 100%; width: 16px; height: 27px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-right-blue { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-right-blue.png) no-repeat 0 0; background-size: 100% 100%; width: 8px; height: 14px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-right-grey { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-right-grey.png) no-repeat 0 0; background-size: 100% 100%; width: 8px; height: 13px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-right-white { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-right-white.png) no-repeat 0 0; background-size: 100% 100%; width: 8px; height: 13px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close { background: url(/etc/designs/university-2017/images/sprite/ico-close.png) no-repeat 0 0; background-size: 100% 100%; width: 19px; height: 19px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-filters { background: url(/etc/designs/university-2017/images/sprite/ico-filters.png) no-repeat 0 0; background-size: 100% 100%; width: 28px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search-blue { background: url(/etc/designs/university-2017/images/sprite/ico-search-blue.png) no-repeat 0 0; background-size: 100% 100%; width: 23px; height: 23px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search-grey { background: url(/etc/designs/university-2017/images/sprite/ico-search-grey.png) no-repeat 0 0; background-size: 100% 100%; width: 19px; height: 19px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search-red { background: url(/etc/designs/university-2017/images/sprite/ico-search-red.png) no-repeat 0 0; background-size: 100% 100%; width: 19px; height: 19px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search { background: url(/etc/designs/university-2017/images/sprite/ico-search.png) no-repeat 0 0; background-size: 100% 100%; width: 23px; height: 23px; display: inline-block; vertical-align: middle; font-size: 0; } .logo-mobile { background: url(/etc/designs/university-2017/images/logo-mobile@2x.png) no-repeat 0 0; background-size: 100% 100%; width: 207px; height: 73px; display: inline-block; vertical-align: middle; font-size: 0; } .logo-white { background: url(/etc/designs/university-2017/images/sprite/logo-white.png) no-repeat 0 0; background-size: 100% 100%; width: 270px; height: 98px; display: inline-block; vertical-align: middle; font-size: 0; } .logo { background: url(/etc/designs/university-2017/images/sprite/logo.png) no-repeat 0 0; background-size: 100% 100%; width: 138px; height: 34px; display: inline-block; vertical-align: middle; font-size: 0; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .ico-arrow-right-red { background: url(/etc/designs/university-2017/images/sprite/ico-arrow-right-red@2x.png) no-repeat 0 0; width: 27px; height: 8px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-right-short-grey { background: url(/etc/designs/university-2017/images/sprite/ico-arrow-right-short-grey@2x.png) no-repeat 0 0; width: 18px; height: 15px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-right { background: url(/etc/designs/university-2017/images/sprite/ico-arrow-right@2x.png) no-repeat 0 0; width: 27px; height: 8px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-up { background: url(/etc/designs/university-2017/images/sprite/ico-arrow-up@2x.png) no-repeat 0 0; width: 26px; height: 32px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-down-red { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-down-red@2x.png) no-repeat 0 0; width: 14px; height: 9px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-down-white { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-down-white@2x.png) no-repeat 0 0; width: 14px; height: 9px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-down { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-down@2x.png) no-repeat 0 0; width: 14px; height: 9px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-left-blue-lg { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-left-blue-lg@2x.png) no-repeat 0 0; width: 16px; height: 27px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-left-blue { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-left-blue@2x.png) no-repeat 0 0; width: 8px; height: 14px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-right-blue-lg { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-right-blue-lg@2x.png) no-repeat 0 0; width: 16px; height: 27px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-right-blue { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-right-blue@2x.png) no-repeat 0 0; width: 8px; height: 14px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-right-grey { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-right-grey@2x.png) no-repeat 0 0; width: 8px; height: 13px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-chevron-right-white { background: url(/etc/designs/university-2017/images/sprite/ico-chevron-right-white@2x.png) no-repeat 0 0; width: 8px; height: 13px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close { background: url(/etc/designs/university-2017/images/sprite/ico-close@2x.png) no-repeat 0 0; width: 19px; height: 19px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-filters { background: url(/etc/designs/university-2017/images/sprite/ico-filters@2x.png) no-repeat 0 0; width: 28px; height: 20px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search-blue { background: url(/etc/designs/university-2017/images/sprite/ico-search-blue@2x.png) no-repeat 0 0; width: 23px; height: 23px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search-grey { background: url(/etc/designs/university-2017/images/sprite/ico-search-grey@2x.png) no-repeat 0 0; width: 19px; height: 19px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search-red { background: url(/etc/designs/university-2017/images/sprite/ico-search-red@2x.png) no-repeat 0 0; width: 19px; height: 19px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search { background: url(/etc/designs/university-2017/images/sprite/ico-search@2x.png) no-repeat 0 0; width: 23px; height: 23px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .logo-mobile { background: url(/etc/designs/university-2017/images/logo-mobile@2x.png) no-repeat 0 0; background-size: 100% 100%; width: 207px; height: 73px; display: inline-block; vertical-align: middle; font-size: 0; } .logo-white { background: url(/etc/designs/university-2017/images/sprite/logo-white@2x.png) no-repeat 0 0; width: 270px; height: 98px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; } .logo { background: url(/etc/designs/university-2017/images/sprite/logo@2x.png) no-repeat 0 0; width: 138px; height: 34px; background-size: 100% 100%; display: inline-block; vertical-align: middle; font-size: 0; }} .row:after, .footer .footer__content:after, .section--programs .shell:after, .section--programs .section__aside:after { content: ''; line-height: 0; display: table; clear: both; } /* ------------------------------------------------------------ *\ Reset \* ------------------------------------------------------------ */ *, *:before, *:after { padding: 0; margin: 0; outline: 0; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main { display: block; } html { tap-highlight-color: rgba(0,0,0,0); } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } img, iframe, video, audio, object { max-width: 100%; } img, iframe { border: 0 none; } img { height: auto; display: inline-block; vertical-align: middle; } b, strong { font-weight: bold; } address { font-style: normal; } svg:not(:root) { overflow: hidden; } a, button, input[type="submit"], input[type="button"], input[type="reset"], input[type="file"], input[type="image"], label[for] { cursor: pointer; } a[href^="tel"], button[disabled], input[disabled], textarea[disabled], select[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, a[href^="tel"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } textarea { overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; color: inherit; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } button, select { text-transform: none; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } nav ul, nav ol { list-style: none outside none; } /* ------------------------------------------------------------ *\ Base \* ------------------------------------------------------------ */ body { min-width: 320px; background: #fff; font-family: 'Lato', sans-serif; font-size: 16px; line-height: 1.3; color: #000; } a { color: inherit; text-decoration: underline; } a:hover { text-decoration: none; } a[href^="tel"] { text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.65em; } h1 { font-size: 70px; font-weight: 700; } h2 { font-size: 50px; } h3 { font-size: 32px; letter-spacing: 0.025em; } h4 { font-size: 25px; } h5 { font-size: 20px; } h6 { font-size: 14px; } p, ul, ol, dl, table, blockquote { margin-bottom: 1.3em; } h1[class], h2[class], h3[class], h4[class], h5[class], h6[class], h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child, blockquote:last-child { margin-bottom: 0; } @media (max-width: 767px) { h1 { font-size: 40px; } h2 { font-size: 32px; line-height: 1.38; } h3 { font-size: 32px; } h4 { font-size: 21px; } } /* ------------------------------------------------------------ *\ Fonts \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Helpers \* ------------------------------------------------------------ */ /* Clear */ .clear:after { content: ''; line-height: 0; display: table; clear: both; } /* Notext */ .notext { white-space: nowrap; text-indent: 100%; text-shadow: none; overflow: hidden; } .notext-old { font-size: 0; line-height: 0; text-indent: -4000px; } /* No Scroll*/ .no-scroll { position: fixed; top: 0; left: 0; bottom: 0; right: 0; } /* Hidden */ [hidden], .hidden { display: none; } /* Alignleft */ .alignleft { float: left; } /* Alignright */ .alignright { float: right; } /* Disabled */ [disabled], .disabled { cursor: default; } /* Grid */ .cols { margin: 0 -15px; } .row:after { } .col { float: left; width: 100%; padding: 0 15px; } .col-1of2 { width: 50%; } .flex-stretch { display: -webkit-flex; display: -ms-flexbox; display: flex; } @media (max-width: 1023px) { .flex-stretch { display: block; } } /* ------------------------------------------------------------ *\ Title With Brackets \* ------------------------------------------------------------ */ .title-with-brackets { position: relative; padding: 0 40px; } .title-with-brackets:before, .title-with-brackets:after { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .title-with-brackets:before { content: ''; background: url(/etc/designs/university-2017/images/bracket-left@2x.png) no-repeat center center; background-size: cover; width: 19px; height: 88px; position: absolute; left: 5px; } .title-with-brackets:after { content: ''; background: url(/etc/designs/university-2017/images/bracket-right@2x.png) no-repeat center center; background-size: cover; width: 19px; height: 88px; position: absolute; right: 5px; } @media (max-width: 767px) { .title-with-brackets:before, .title-with-brackets:after { width: 12px; height: 58px; } .title-with-brackets:before { left: 10px; } .title-with-brackets:after { right: 10px; } } /* Responsive Helpers */ .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media (max-width: 767px) { .hidden-xs { display: none !important; } .visible-xs-block { display: block !important; } .visible-xs-inline { display: inline !important; } .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 768px) and (max-width: 1023px) { .hidden-sm { display: none !important; } .visible-sm-block { display: block !important; } .visible-sm-inline { display: inline !important; } .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 1024px) and (max-width: 1200px) { .hidden-md { display: none !important; } .visible-md-block { display: block !important; } .visible-md-inline { display: inline !important; } .visible-md-inline-block { display: inline-block !important; } } @media (min-width: 1201px) { .hidden-lg { display: none !important; } .visible-lg-block { display: block !important; } .visible-lg-inline { display: inline !important; } .visible-lg-inline-block { display: inline-block !important; } } /* ------------------------------------------------------------ *\ Transitions \* ------------------------------------------------------------ */ .pop-toggle-enter-active { transition: all .5s } .pop-toggle-enter { opacity: 0; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); } /* ------------------------------------------------------------ *\ Container \* ------------------------------------------------------------ */ .container {} /* ------------------------------------------------------------ *\ Content \* ------------------------------------------------------------ */ .content {} /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ .footer { background: #212121; color: #fff; padding: 62px 0 50px; position: relative; } .footer > .copyright { display: none; } .footer .shell { position: relative; z-index: 1; } .footer .row { display: -webkit-flex; display: -ms-flexbox; display: flex; } .footer .copyright { font-size: 11px; color: #5a5a5a; letter-spacing: 0.05em; font-weight: 400; text-align: center; width: 100%; padding-bottom: 13px; } .footer .footer__image { position: absolute; top: 0; bottom: 0; right: 0; width: 152px; background-size: cover; } .footer .footer__aside { padding-top: 13px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;} .footer .footer__aside .copyright { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } .footer .footer__content { padding: 7px 0 0 52px; } .footer .footer__content:after { } .footer .list-links { margin-bottom: 35px; } .footer .footer__entry h5 { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 900; position: relative; padding-top: 10px; margin-bottom: 30px; } .footer .footer__entry h5:before { content: ''; width: 17px; height: 3px; background: #f40606; position: absolute; top: 0; left: 0; } .footer .footer__entry--left-offset { padding-left: 4px; } .footer .list-places { float: left; max-width: 250px; } .footer .list-places ~ .list-places { float: right; max-width: 235px; } .footer .link-to-top { display: none; } /* Small Desktop */ @media (max-width: 1200px) { .footer .footer__content { padding-left: 0; } .footer .list-places { max-width: 240px; } } @media (max-width: 1023px) { .footer { padding-top: 44px; } .footer .row { display: block; } .footer .col-md-3, .footer .col-md-6, .footer .col-md-2 { width: 100%; margin-bottom: 30px; } .footer .footer__aside { display: block; text-align: center; margin-bottom: 20px; } .footer .footer__aside .copyright { display: none; } .footer > .copyright { display: block; padding: 18px 0 53px; } .footer .footer__content, .footer .footer__entry { max-width: 500px; margin: 0 auto 30px; } .footer .list-places ~ .list-places { float: left; } .footer .footer__image { display: none; } .footer .footer__image-mobile { position: absolute; bottom: 0; left: 0; right: 0; height: 57px; } .footer .link-to-top { display: inline-block; position: absolute; bottom: 41px; right: 27px; } } @media (max-width: 767px) { .footer { position: relative; overflow: hidden; } .footer:before { content: ''; background: url(/etc/designs/university-2017/images/footer-stripes.png) no-repeat 0 0; width: 208px; height: 15px; background-size: cover; position: absolute; top: -4px; left: 50%; margin-left: -104px; } .footer .footer__content, .footer .footer__entry--left-offset { padding: 0 12px; } .footer .footer__content { padding-top: 50px; margin-bottom: 42px; } .footer .list-links { margin-bottom: 47px; } .footer .footer__entry h5:before { width: 22px; } } @media (max-width: 479px) { .footer .list-places { float: none; width: 100%; } .footer .list-places ~ .list-places { padding-top: 15px; } } /* ------------------------------------------------------------ *\ Header \* ------------------------------------------------------------ */ .header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; background: #fff; } .header .header__inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .header .search { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: calc(100% - 125px); z-index: 1; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .header .header__content { width: calc(100% - 125px); } .header .header__aside { background: #f3f3f3; width: 125px; } .header .logo { float: left; } .header .nav-show { float: right; margin: 5px 5px 0 0; } .header .search.active { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* Small Desktop */ @media (max-width: 1200px) { .header .header__aside { width: 125px; } .header .header__content, .header .search { width: calc(100% - 125px); } } @media (max-width: 1023px) { .header { padding: 10px 15px; transition: background .3s; } .header:before { content: ''; width: 1px; height: 68px; background: #d8d8d8; position: absolute; top: 17px; right: 85px; } .header .header__inner { margin-top: -1px; position: absolute; top: 100%; left: 0; right: 0; background: #f7f7f7; height: calc(100vh - 99px); overflow-y: auto; display: block; padding: 34px 0; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, -webkit-transform .3s; transition: transform .3s, opacity .3s, visibility .3s; transition: transform .3s, opacity .3s, visibility .3s, -webkit-transform .3s; z-index: -1; } .header .header__content, .header .header__aside { width: 100%; } .header .search { display: block; position: static; width: 100%; background: none; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .header.active, .header .header__aside { background: #f7f7f7; } .header.active .header__inner { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; z-index: 1; } } /* ------------------------------------------------------------ *\ Header Primary \* ------------------------------------------------------------ */ .header--primary { padding-left: 34px; } .header--primary .logo {margin-top: 20px; } .header--primary .nav > li > a { padding: 0 26px; } .header--primary .nav .nav__icon { right: 5px; } .header--primary .nav .has-dropdown .nav__dropdown { left: 26px; } /* Large Desktop */ @media (max-width: 1350px) { .header--primary { padding-left: 15px; } .header--primary .nav > li > a { padding: 0 15px; } .header--primary .nav .has-dropdown .nav__dropdown { left: 15px; } .header--primary .nav .nav__icon { right: 0; } } @media (max-width: 1023px) { .header { padding: 10px 15px; } .header--primary .nav > li > a { padding: 0; } .header--primary .nav .has-dropdown .nav__dropdown { left: 0; } } /* ------------------------------------------------------------ *\ Main \* ------------------------------------------------------------ */ .main {} /* ------------------------------------------------------------ *\ Shell \* ------------------------------------------------------------ */ .shell { max-width: 1200px; padding-left: 15px; padding-right: 15px; margin: auto; } .shell-fluid { max-width: none; } /* ------------------------------------------------------------ *\ Sidebar \* ------------------------------------------------------------ */ .sidebar {} /* ------------------------------------------------------------ *\ Wrapper \* ------------------------------------------------------------ */ .wrapper { min-height: 100vh; } /* ------------------------------------------------------------ *\ Article \* ------------------------------------------------------------ */ .article { position: relative; color: #273fd8; line-height: 2.19; padding-top: 90px; } .article h3 { line-height: 1.41; margin-bottom: 42px; } .article .article__image { max-width: 470px; position: relative; top: -90px; } .article .article__image .article-bg { display: none; } .article .article__image:before { content: ''; width: 14px; height: 66px; background: url(/etc/designs/university-2017/images/bracket-left@2x.png); position: absolute; top: 56px; left: -66px; background-size: cover; } .article .article__content { position: relative; top: -10px; letter-spacing: 0.05em; } .article .article-bg { position: absolute; top: 90px; left: 0; bottom: 20px; width: 46.71%; background-size: cover; background-position: center; opacity: .4; } .article .article__content a { text-decoration: none; display: block; position: relative; color: #737373; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; font-size: 13px; } .article .article__content a ~ a { margin-top: 6px; } .article .article__content a span { position: relative; display: inline-block; vertical-align: middle; margin-right: 12px; } .article .article__content a span:before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #273fd8; transition: width .3s; } .article .article__content a:focus span:before, .article .article__content a:hover span:before, .article .article__content a:active span:before { width: 100%; } /* Small Desktop */ @media (max-width: 1200px) { .article .article__image { max-width: 400px; margin-left: auto; top: -45px; } } @media (max-width: 1023px) { .article { padding-top: 0; } .article [class^="col-"] { padding: 0; } .article .article__image { margin: 0 auto; padding: 27px; max-width: 100%; } .article .article__content { max-width: 100%; top: 0; padding: 33px 27px 40px; } .article .article-bg { top: 0; left: 0; height: 100%; right: 0; width: 100%; display: none; } .article .article__image { top: 0; text-align: center; } .article .article__image .article-bg { display: block; } .article .article__image img { position: relative; z-index: 1; margin: 0 auto; } .article .article__image:before { top: 16px; left: 10px; width: 9px; height: 43px; z-index: 1; } } @media (max-width: 767px) { .article h3 { margin-bottom: 30px; } .article .article__content p { line-height: 1.56; letter-spacing: 0.05em; margin-bottom: 40px; } .article .article__content a { line-height: 1.38; } .article .article__content a span { display: inline-block; width: calc(100% - 20px); } .article .article__content a i { float: right; margin-top: 3px; } .article .article__content a ~ a { margin-top: 36px; } } /* ------------------------------------------------------------ *\ Article Inverse \* ------------------------------------------------------------ */ .article--inverse h3 { margin-bottom: 18px; } .article--inverse .article-bg { left: auto; right: 0; } .article--inverse .article__image:before { background: url(/etc/designs/university-2017/images/bracket-right@2x.png); background-size: cover; left: auto; right: -66px; } .article--inverse .article__content { max-width: 467px; } .article--inverse .article__content p { margin-bottom: 30px; } /* Small Desktop */ @media (max-width: 1200px) { .article--inverse .article__image { margin: 0 auto 0 0; } } @media (max-width: 1023px) { .article--inverse .article__image { margin: 0 auto; } .article--inverse .article__content { max-width: 100%; } .article--inverse .article__image:before { background: url(/etc/designs/university-2017/images/bracket-left@2x.png); background-size: cover; right: auto; left: 10px; } } @media (max-width: 767px) { .article--inverse .article__content a span { margin-right: 0; } } /* ------------------------------------------------------------ *\ Article Alt \* ------------------------------------------------------------ */ .article--alt h3 { margin-bottom: 18px; } .article--alt:before { content:''; background: url(/etc/designs/university-2017/images/features-ornament-blue.png);width: 65px; height: 68px; position: absolute; z-index: 1; top: 50%; left: 46.71%; margin-left: -42px; margin-top: 23px; } .article--alt.article--inverse:before { left: auto; right: 46.71%; margin: 23px -24px 0 0; } @media (max-width: 1023px) { .article--alt:before { content: none; } .article--alt .article__image:after { content:''; background: url(/etc/designs/university-2017/images/features-ornament-blue.png) ;width: 65px; height: 68px; position: absolute; z-index: 1; bottom: -22px; right: 0; } } /* ------------------------------------------------------------ *\ Benefit \* ------------------------------------------------------------ */ .benefits { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .benefit { width: 50%; max-width: 500px; padding: 0 15px; } .benefit a { color: #011e40; } .benefit p { line-height: 2.19; letter-spacing: 0.05em; } .benefit .benefit__image { position: relative; top: -40px; margin-bottom: -3px; } .benefit .benefit__image img { width: 100%; height: auto; } .benefit a:hover, .benefit a:focus, .benefit a:active { text-decoration: none; color: #f40606; } @media (max-width: 767px) { .benefits { display: block; } .benefits .benefit { width: 100%; max-width: 100%; } .benefit { padding: 0 27px; } .benefit ~ .benefit { margin-top: 133px; } .benefit h3 { margin-bottom: 14px; } .benefit p { line-height: 1.56; } .benefit .benefit__image { top: -90px; margin-bottom: -71px; } } /* ------------------------------------------------------------ *\ Box Item \* ------------------------------------------------------------ */ .box-items { text-align: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .box-item { position: relative; width: calc(50% - 52px); max-width: 532px; padding: 80px 40px 80px 43px; margin: 0 26px; background: #fff; border-bottom: 3px solid #273fd8; color: #737373; } .box-item:before { content: ''; background: url(/etc/designs/university-2017/images/fact-ornament-blue.png); width: 29px; height: 17px; background-size: cover; position: absolute; top: -6px; left: 50%; margin-left: -14px; } .box-item h3 { color: #273fd8; } .box-item h4 { letter-spacing: 0.025em; } .box-item a { text-transform: uppercase; font-size: 13px; font-weight: 900; letter-spacing: 0.15em; text-decoration: none; position: relative; padding-bottom: 4px; margin: 0 35px; cursor: pointer; } .box-item a span { display: inline-block; vertical-align: middle; margin-right: 10px; } .box-item a:before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #273fd8; transition: width .3s; } .box-item a:hover:before, .box-item a:focus:before, .box-item a:active:before { width: 100%; } .box-item .box-item__actions { padding-top: 20px; } .box-item .box-item__head { padding-bottom: 66px; border-bottom: 2px solid #dadada; } .box-item .box-item__body { padding: 46px 0 4px; text-align: left; } /* Small Desktop */ @media (max-width: 1200px) { .box-item a { margin: 0 15px; } } @media (max-width: 1023px) { .box-item { margin: 0 20px; width: calc(50% - 40px); } .box-item h4 { font-size: 32px; } .box-item h3 { font-size: 32px; } } @media (max-width: 767px) { .box-items { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .box-item { width: 100%; margin: 0; max-width: 100%; padding: 68px 40px;} .box-item ~ .box-item { margin-top: 44px; } .box-item a { margin: 0; display: block; padding-bottom: 0; } .box-item a ~ a { margin-top: 16px; } .box-item .box-item__head { padding-bottom: 56px; } } /* ------------------------------------------------------------ *\ box Item Alt \* ------------------------------------------------------------ */ .box-item--alt { border-bottom-color: #f40606; } .box-item--alt a { font-weight: 400; font-size: 16px; letter-spacing: 0.05em; text-transform: none; } .box-item--alt:before { background: url(/etc/designs/university-2017/images/fact-ornament.png); } .box-item--alt .list-contact-info { color: #273fd8; padding-top: 35px; } /* ------------------------------------------------------------ *\ Button \* ------------------------------------------------------------ */ .btn { display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Button Block */ .btn-block { display: block; padding-left: 0; padding-right: 0; } /* ------------------------------------------------------------ *\ Counter \* ------------------------------------------------------------ */ .counter { position: absolute; top: 0; left: -30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .counter .mobile-image { display: none; } @media (max-width: 767px) { .counter { left: 0; top: -60px; right: 0; text-align: center; } .counter img { display: none; } .counter .mobile-image { display: block; margin: 0 auto; } } /* ------------------------------------------------------------ *\ Event \* ------------------------------------------------------------ */ .event { position: relative; color: #fff; text-align: center; padding: 138px 0 158px; } .event h3 { margin-bottom: 8px; } .event:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.6); z-index: 1; } .event:after { content: ''; border: 2px solid #2a41d8; position: absolute; top: 44px; left: 44px; right: 44px; bottom: 44px; z-index: 1; } .event .event__background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-position: center; opacity: .7; } .event .event__content { position: relative; z-index: 2; max-width: 370px; margin: 0 auto; line-height: 1.56; letter-spacing: 0.05em; } @media (max-width: 767px) { .event { padding: 50px 0; } .event .event__content { max-width: 240px; } .event:after { top: 10px; bottom: 10px; right: 10px; left: 10px; } } /* ------------------------------------------------------------ *\ Fact \* ------------------------------------------------------------ */ .fact-items { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .fact-items .fact-item { width: 50%; text-align: center; border-top: 2px solid #f4f4f4; padding: 64px 0 78px; } .fact-items .fact-item:nth-child(1), .fact-items .fact-item:nth-child(2) { border-top-color: transparent; } .fact-items .fact-item:nth-child(even) { border-left: 2px solid #f4f4f4; } .fact { color: #273fd8; max-width: 480px; margin: 0 auto; position: relative; } .fact:before { content: ''; background: url(/etc/designs/university-2017/images/fact-ornament.png) no-repeat 0 0; width: 29px; height: 17px; display: inline-block; vertical-align: middle; margin-bottom: 20px; } .fact .fact__number { font-size: 70px; width: 100%; margin-bottom: 10px; letter-spacing: 0.025em; } .fact .fact__description { font-size: 32px; line-height: 1.25; letter-spacing: 0.025em; } @media (max-width: 767px) { .fact { padding: 0 10px; } .fact .fact__number { font-size: 40px; } .fact .fact__description { font-size: 21px; } } @media (max-width: 479px) { .fact-items .fact-item { width: 100%; padding: 30px 0; } .fact-items .fact-item:nth-child(2) { border-top: 2px solid #f4f4f4; } .fact-items .fact-item:nth-child(even) { border-left: none; } } /* ------------------------------------------------------------ *\ Feature \* ------------------------------------------------------------ */ .features { list-style: none; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .feature { width: 428px; max-width: 428px; text-align: center; margin: 0 22px 42px; } .feature a { display: block; position: relative; height: 240px; text-decoration: none; line-height: 240px; text-align: center; } .feature a > i { position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -30px; } .feature h3 { display: inline-block; vertical-align: middle; line-height: 1.41; color: #fff; position: relative; z-index: 1; letter-spacing: 0.025em; } .feature .feature__background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; background-size: cover; background-position: center center; } .feature .feature__background:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(34, 67, 220, 0.70); transition: background .3s; } .feature.active a .feature__background, .feature.active a:hover .feature__background, .feature.active a:focus .feature__background, .feature.active a:active .feature__background, .feature a:hover .feature__background, .feature a:focus .feature__background, .feature a:active .feature__background { filter: gray; -webkit-filter: grayscale(1); } .feature.active a .feature__background:before, .feature.active a:hover .feature__background:before, .feature.active a:focus .feature__background:before, .feature.active a:active .feature__background:before, .feature a:hover .feature__background:before, .feature a:focus .feature__background:before, .feature a:active .feature__background:before { background: rgba(0, 0, 0, 0.5); } .feature.active a .ico-shape-diamond, .feature.active a:hover .ico-shape-diamond, .feature.active a:focus .ico-shape-diamond, .feature.active a:active .ico-shape-diamond, .feature a:hover .ico-shape-diamond, .feature a:focus .ico-shape-diamond, .feature a:active .ico-shape-diamond { border-color: #767676; } @media (max-width: 1023px) { .feature { max-width: 340px; width: 340px; } } @media (max-width: 767px) { .feature { max-width: 100%; width: 100%; margin: 0; } .feature ~ .feature { margin-top: 20px; } .feature a { height: 208px; line-height: 208px; padding: 0 10px; } } /* ------------------------------------------------------------ *\ Form Elements \* ------------------------------------------------------------ */ input::-webkit-input-placeholder { color: inherit; opacity: 1; } input:-ms-input-placeholder { color: inherit; opacity: 1; } input::placeholder { color: inherit; opacity: 1; } textarea::-webkit-input-placeholder { color: inherit; opacity: 1; } textarea:-ms-input-placeholder { color: inherit; opacity: 1; } textarea::placeholder { color: inherit; opacity: 1; } input:-webkit-autofill { -webkit-text-fill-color: inherit; -webkit-box-shadow: 0 0 0 1000px #fff inset; } .field {} .textarea {} .select {} .radio {} .checkbox {} /* ------------------------------------------------------------ *\ Radio \* ------------------------------------------------------------ */ .radio ~ .radio { margin-top: 11px; } .radio input { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; z-index: -1; overflow: hidden; } .radio .form__label { padding-left: 42px; position: relative; min-height: 24px; display: block; line-height: 24px; user-selcect: none;} .radio .form__label span { display: inline-block; vertical-align: middle; line-height: 1.43; } .radio .form__label:before { content: ''; width: 24px; height: 24px; border-radius: 50%; background: #f2f2f2; position: absolute; top: 50%; left: 0; margin-top: -12px; } .radio .form__label:after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: #f40606; position: absolute; top: 50%; left: 5px; margin-top: -7px; opacity: 0; visibility: hidden; } .radio input:checked ~ .form__label:after { opacity: 1; visibility: visible; } @media (max-width: 767px) { .radio .form__label:before { background-color: #fff; } } /* ------------------------------------------------------------ *\ Form Filters \* ------------------------------------------------------------ */ .form fieldset { border: none; } .form .form__section { background: #fff; border-radius: 2px; } .form .form__section ~ .form__section { margin-top: 19px; } .form .form__section-head a { display: block;text-decoration: none; padding: 22px 29px 23px; position: relative; } .form .form__section-head a:before { content: ''; background: url(/etc/designs/university-2017/images/chevron-down@2x.png) no-repeat 0 0; background-size: cover; width: 14px; height: 9px; position: absolute; top: 50%; right: 25px; margin-top: -4px; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .form .form__section-head span { font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; color: #f40606; font-weight: 900; } .form .form__section-body { padding: 0 27px 33px; } .form .form__label { color: #788e9c; font-size: 13px; letter-spacing: 0.035em; font-weight: 900; } .form .form__body { margin-bottom: 20px; } .form .form__btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; border-radius: 0; border-radius: 2px; background: #fff; font-size: 13px; font-weight: 900; letter-spacing: 0.15em; display: block; width: 100%; padding: 26px 0 23px; text-align: center; } .form .form__btn.hidden { display: none; } .form .form__btn:focus, .form .form__btn:hover, .form .form__btn:active { color: #273fd8; } .form .form__section .form__section-body { display: none; } .form .form__section.expanded .form__section-head a:before { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @media (max-width: 767px) { .form .form__section { background-color: transparent; border-radius: 0; } .form .form__section ~ .form__section { margin-top: 4px; } .form .form__section-head { padding: 11px 14px 0; } .form .form__section-head a { padding: 12px 0px; border-bottom: 2px solid #dfdfdf; } .form .form__section-head a:before { right: 6px; } .form .form__section-body { padding: 13px 14px 0px; } .form .form__body { margin-bottom: 37px; } .form .form__actions { padding: 0 10px 0 14px; } .form .form__btn { padding: 21px 0 20px; } } /* ------------------------------------------------------------ *\ Intro \* ------------------------------------------------------------ */ .intro { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-top: 69px; height: 450px; text-align: center; color: #fff; } .intro .blue-heading { background-color: rgba(39,62,217,0.5); padding: 30px 15px; } .intro .blue-subheading { background: rgba(38,64,213,1); padding: 3px; position: absolute; left: 30%; right: 30%; top: -15px; } .intro h1 { line-height: 1; letter-spacing: -0.025em; position: relative; } .intro h5 { font-size: 19px; letter-spacing: 0.12em; text-transform: uppercase; } .intro .intro__background { /*background-color: rgba(39, 63, 216, 0.5);*/ background-size: cover; background-position: top center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-blend-mode: multiply; } /*.intro .intro__background:before { content:''; background: url(/etc/designs/university-2017/images/intro-bg-pattern.png) no-repeat 0 0; width: 770px; max-width: 80%; height: 40px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }*/ .intro .intro__content { position: relative; } .intro .shell { position: relative; z-index: 1; } /* Edge */ @supports (-ms-ime-align:auto) { .intro .intro__background:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(39, 63, 216, 0.5); } } @media all and (-ms-high-contrast:none) { .intro .intro__background:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(39, 63, 216, 0.5); } } @media (max-width: 1023px) { .intro { padding-top: 100px; height: 570px; } .intro h1 { line-height: 1.25; } .intro .intro__content { top: 0; } } @media (max-width: 767px) { .intro { height: 570px; } .intro h5 { font-size: 15px; } .intro .intro__content { padding-bottom: 15px; } /* .intro .intro__content:after { content: ''; background: url(/etc/designs/university-2017/images/intro-arrow-down-white@2x.png); width: 13px; height: 48px; display: inline-block; background-size: cover; margin-top: 25px; } */ .intro .intro__background { background-position: center bottom; } .intro .intro__background:before { background: url(/etc/designs/university-2017/images/intro-bg-pattern-mobile.png) no-repeat 0 0; width: 261px; height: 71px; opacity: 1; } } @media (max-width: 479px) { .intro .intro__content { padding-bottom: 60px; } } /* ------------------------------------------------------------ *\ Intro Home \* ------------------------------------------------------------ */ .intro--home { height: 769px; position: relative; display: block; text-align: left; } .intro--home:before { z-index: 1; content: ''; background: #f40606; width: 15px; height: 569px; position: absolute; top: 200px; left: 0; } .intro--home:after { z-index: 1; content: ''; background: url(/etc/designs/university-2017/images/intro-bg-pattern-white.png); width: 40px; height: 600px; position: absolute; top: 185px; right: 0; } .intro--home .intro__entry { color: #273fd8; line-height: 1; background-color: rgba(255, 255, 255, 0.75); max-width: 730px; } .intro--home .intro__entry h1 { /*border-bottom: 5px solid #f40606;*/ margin-bottom: 0; letter-spacing: -0.025em; line-height: 1; text-align: center; padding: 15px; } .intro--home .intro__entry h1 ~ h1 { margin-top: 23px; } .intro--home .intro__background { position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 100%; z-index: 0; padding-top: 77px; } .intro--home .mobile-image-text { display: none; } /*.intro--home .intro__background:before { content: ''; background: url(/etc/designs/university-2017/images/phl-overlay.png) no-repeat 0 0; width: 198px; height: 379px; position: absolute; bottom: 0; left: 197px; z-index: 1; }*/ .intro--home .intro__background:after { content: none; } .intro--home .intro__content { position: relative; z-index: 1; /*max-width: 52.65%;*/ padding-top: 104px; margin: 0 50px; } .intro--home .intro__content img ~ .intro__entry { margin: 420px auto 0 auto; } .intro--home .intro__image { display: inline-block; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 33px; } @media (max-width: 1023px) { .intro--home { height: auto; border-left: #f40606 10px solid; } .intro--home:before { left: -28px; top: 155px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .intro--home .intro__content { max-width: 100%; padding:67px 18px; } .intro--home .intro__content img ~ .intro__entry { max-width: 100%; margin-top: 50px; padding: 10px 20px; } .intro--home .intro__content > img { display: none; } .intro--home .intro__content > .mobile-image-text { display: block; } .intro--home .intro__background { width: 100%; padding-top: 0; } .intro--home .intro__background:before { left: auto; right: 0; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .intro--home .intro__image { -webkit-transform: translateY(-42px); -ms-transform: translateY(-42px); transform: translateY(-42px); position: static; text-align: center; width: 100%; margin: 0; } } @media (max-width: 767px) { .intro--home .intro__content { max-width: 250px; padding-left: 0; padding: 50px 30px 30px 0; margin-left: 0; } .intro--home .intro__background { text-align: left; } .intro--home .intro__entry h1 { text-align: left; padding: 0; } .intro--home .intro__entry h2 { color: #f40606; margin-bottom: 0; text-transform: uppercase; font-size: 20px; letter-spacing: 2px; } .intro--home .intro__image { position: relative; top: auto; display: inline-block; width: auto; margin: 0 auto; } /* .intro--home .intro__image:before { content: ''; background: url(/etc/designs/university-2017/images/intro-arrow-down@2x.png) no-repeat 0 0; width: 12px; height: 71px; position: absolute; bottom: 23px; left: 20px; background-size: cover; } */ } @media (max-width: 479px) { .intro--home { overflow: hidden; } .intro--home .intro__content:after { content: none; } /* .intro--home .intro__content:before { content: ''; background: url(/etc/designs/university-2017/images/intro-arrow-down2@2x.png) no-repeat 0 0; background-size: cover; width: 13px; height: 48px; position: absolute; left: 50%; bottom: 60px; margin-left: -6px; } */ .intro--home .intro__entry h1 { letter-spacing: -0.01em; } .intro--home .intro__entry h1 ~ h1 { margin-top: 13px; } .intro--home .intro__image { padding: 0 30px; height: 196px; overflow: hidden; width: 100%; display: block; } .intro--home .intro__image img { width: 100%; height: auto; } .intro--home .intro__image:before { left: 50px; } /* .intro--home .intro__background { height: 170px; } */ .intro--home .intro__background:before { height: 160px; right: -20px; } } /* ------------------------------------------------------------ *\ Link Skip \* ------------------------------------------------------------ */ .link-skip { overflow: hidden; padding: 10px 5px; position: absolute; left: -100%; z-index: 10; color: #273fd8; } .link-skip:focus { overflow: visible; left: 0; } /* ------------------------------------------------------------ *\ Link Brackets \* ------------------------------------------------------------ */ .link-filters { font-size: 13px; font-weight: 900; color: #f40606; text-decoration: none; text-transform: uppercase; letter-spacing: 0.15em; display: none; } .link-filters span { display: inline-block; vertical-align: middle; } .link-filters .link__icon { display: inline-block; position: relative; margin-left: 7px; } .link-filters .link__icon i { transition: opacity .3s; } .link-filters .link__icon .ico-close { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } @media (max-width: 767px) { .link-filters { display: inline-block; } } /* ------------------------------------------------------------ *\ List \* ------------------------------------------------------------ */ [class^="list-"] { list-style: none outside none; } /* ------------------------------------------------------------ *\ List Links \* ------------------------------------------------------------ */ .list-links { font-size: 0; } .list-links li { display: inline-block; vertical-align: middle; font-size: 20px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; width: 100%; max-width: 100px; } .list-links li ~ li { margin-left: 34px; } .list-links a { text-decoration: none; display: block; border-bottom: 2px solid #f40606; padding-bottom: 10px; } .list-links a:hover, .list-links a:focus, .list-links a:active { color: #f40606; } @media (max-width: 479px) { .list-links li { display: block; max-width: 130px;} .list-links li ~ li { margin-left: 0; margin-top: 35px; } .list-links a { padding-bottom: 8px; } } /* ------------------------------------------------------------ *\ List Places \* ------------------------------------------------------------ */ .list-places { font-size: 15px; line-height: 1.27; font-weight: 400; letter-spacing: 0.1em; margin-bottom: 0; } .list-places a { text-decoration: none; } .list-places li ~ li { margin-top: 19px; } .list-places a:hover, .list-places a:focus, .list-places a:active { color: #f40606; } @media (max-width: 767px) { .list-places { font-size: 14px; } } /* ------------------------------------------------------------ *\ List Researches \* ------------------------------------------------------------ */ .list-researches { text-transform: uppercase; font-size: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .list-researches li { display: inline-block; vertical-align: top; font-size: 13px; line-height: 1.38; font-weight: 900; width: 50%; max-width: 313px; text-align: left; letter-spacing: 0.15em; min-height: 55px; } .list-researches li i { float: right; margin-top: 2px; } .list-researches li:nth-child(even) { float: right; } .list-researches a { text-decoration: none; color: #737373; display: block; position: relative; } .list-researches a:before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #f40606; transition: width .3s; } .list-researches span { display: inline-block; vertical-align: middle; max-width: 283px;} .list-researches a:focus:before, .list-researches a:hover:before, .list-researches a:active:before { width: 100%; } @media (max-width: 1023px) { .list-researches li { max-width: 290px; } .list-researches span { max-width: 273px; } } @media (max-width: 767px) { .list-researches li { max-width: 100%; width: 100%; } .list-researches a { color: #273fd8; max-width: 320px; margin: 0 auto; } .list-researches span { max-width: 250px; } .list-researches a:before { content: none; } .list-researches a:focus, .list-researches a:hover, .list-researches a:active { color: #f40606; } } /* ------------------------------------------------------------ *\ List Events \* ------------------------------------------------------------ */ .list-events { line-height: 1.56; letter-spacing: 0.05em; } .list-events p { margin-bottom: 0; } .list-events p ~ p { margin-top: 14px; } .list-events li ~ li { margin-top: 35px; } .list-events h4 { color: #273fd8; margin-bottom: 7px; } /* ------------------------------------------------------------ *\ List Contact Info \* ------------------------------------------------------------ */ .list-contact-info { letter-spacing: 0.05em; line-height: 1.56; } /* ------------------------------------------------------------ *\ List Institutes \* ------------------------------------------------------------ */ .list-institutes { text-transform: uppercase; font-size: 13px; max-width: 314px; width: 50%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 0; } .list-institutes li { font-size: 13px; line-height: 1.38; font-weight: 900; width: 100%; text-align: left; letter-spacing: 0.15em; min-height: 55px; } .list-institutes a { text-decoration: none; color: #737373; display: block; position: relative; width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .list-institutes span { display: inline-block; vertical-align: middle; max-width: 295px; } .list-institutes a:focus, .list-institutes a:hover, .list-institutes a:active { color: #f40606;} @media (max-width: 1023px) { .list-institutes { max-width: 300px; } } @media (max-width: 767px) { .list-institutes { display: block; width: 100%; margin: 0 auto; } .list-institutes ~ .list-institutes { margin-top: 39px; } .list-institutes li { min-height: 0; } .list-institutes li ~ li { margin-top: 39px; } } /* ------------------------------------------------------------ *\ Logo \* ------------------------------------------------------------ */ .logo-mobile {display: none; } @media (max-width: 1023px) { .logo { display: none; } .logo-mobile { display: inline-block; } } @media (max-width: 479px) { .logo-white { width: 197px; height: 72px; } } /* ------------------------------------------------------------ *\ Map \* ------------------------------------------------------------ */ .map-container { width: 770px; height: 529px; margin: 0 auto; border: 5px solid #2a41d8; position: relative; } .map-container .map { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } @media (max-width: 1023px) { .map-container { max-width: 770px; width: 100%; } } @media (max-width: 479px) { .map-container { height: 320px; } } /* ------------------------------------------------------------ *\ Member \* ------------------------------------------------------------ */ .member { color: #273fd8; } .member h4 { letter-spacing: 0.025em; margin-bottom: 10px; } .member a { position: relative; display: block; text-decoration: none; } .member figure { position: relative; } .member figure img { width: 100%; height: auto; } .member figure:before { content: ''; border-style: solid; border-width: 0 67px 67px 0; border-color: transparent #2243dc transparent transparent; position: absolute; top: 0; right: 0; transition: border-width .3s; } .member a:hover, .member a:focus, .member a:active { color: #f40606; } .member a:hover figure:before, .member a:focus figure:before, .member a:active figure:before { border-width: 0 90px 90px 0; } .member figcaption { padding: 15px 0; letter-spacing: 0.05em; } @media (max-width: 767px) { .member { margin-bottom: 20px; } } /* ------------------------------------------------------------ *\ Nav \* ------------------------------------------------------------ */ .nav { font-size: 13px; line-height: 1; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; } .nav { list-style: none; text-align: center; } .nav ul { text-align: left; text-transform: none; color: #2243dc; } .nav li li ~ li { margin-top: 13px; } .nav > li { display: inline-block; vertical-align: middle; } .nav a { display: block; text-decoration: none; } .nav > li > a { position: relative; font-weight: 900; padding: 0 40px; color: #011e40; } .nav li > a span:not(.nav__icon) { position: relative; display: block; height: 69px; line-height: 69px; } .nav li > a span:not(.nav__icon):before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background-color: transparent; transition: background .3s; } .nav .link-search > a span:not(.nav__icon):before{ content: none; } .nav .link-search > a .icon-holder { display: inline-block; position: relative; height: auto; line-height: 1; } .nav .link-search > a i { transition: opacity .3s; } .nav .link-search > a .active-show { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .3s; } .nav .nav__dropdown { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; opacity: 0; visibility: hidden; transition: opacity .3s; z-index: -1; padding: 17px 20px 23px;} .nav .nav__dropdown:before { content: ''; background: rgba(255, 255, 255, 0.85); position: absolute; top: 0; left: 0; bottom: 0; width: calc(100% - 45px); z-index: -1; } .nav .nav__dropdown:after { content: ''; background: rgba(255, 255, 255, 0.85); position: absolute; top: 0; right: 0; width: 45px; height: calc(100% - 40px); z-index: -1; } .nav .nav__dropdown a { transition: color .3s; } .nav .nav__dropdown a:focus, .nav .nav__dropdown a:hover, .nav .nav__dropdown a:active { color: #f40606; } .nav .nav__dropdown li:last-child:after { content: ''; border-style: solid; border-width: 40px 45px 0 0; border-color: rgba(255, 255, 255, 0.85) transparent transparent transparent; position: absolute; bottom: 0; right: 0; z-index: -1; } .nav .has-dropdown { position: relative; } .nav .has-dropdown .nav__dropdown { position: absolute; top: 100%; left: 40px; width: 200px; z-index: -1; } .nav .nav__icon { position: absolute; top: 50%; right: 16px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 0; } .nav .nav__icon ~ i { display: none; } .nav .nav__icon i { opacity: 1; transition: opacity .3s; } .nav .nav__icon .hover-icon { position: absolute; top: 0px; left: 0; opacity: 0;} .nav .link-search > a:hover i { opacity: 0; } .nav .link-search > a:hover .active-show { opacity: 1; } .nav .current .nav__icon i, .nav a:hover .nav__icon i, .nav a:focus .nav__icon i, .nav a:active .nav__icon i { opacity: 0; } .nav .current .nav__icon .hover-icon, .nav a:hover + .nav__dropdown, .nav a:focus + .nav__dropdown, .nav li:hover .nav__dropdown, .nav li:focus .nav__dropdown, .nav li:hover .nav__dropdown, .nav li:focus .nav__dropdown, .nav li:active .nav__dropdown, .nav a:hover .nav__icon .hover-icon, .nav a:focus .nav__icon .hover-icon, .nav a:active .nav__icon .hover-icon, .nav li:hover .nav__icon .hover-icon, .nav li:focus .nav__icon .hover-icon, .nav li:active .nav__icon .hover-icon, .nav ul.show-menu { visibility: visible; opacity: 1; z-index: 1; } .nav .current > a, .nav li:hover > a, .nav a:hover, .nav a:focus, .nav a:active, .nav li:hover, .nav li:focus, .nav li:active { color: #273fd8; } .nav .current > a span:not(.nav__icon):before, .nav a:hover span:not(.nav__icon):before, .nav a:focus span:not(.nav__icon):before, .nav a:active span:not(.nav__icon):before, .nav li:hover span:not(.nav__icon):before, .nav li:focus span:not(.nav__icon):before, .nav li:active span:not(.nav__icon):before { background-color: #f40606; } /* Large Desktop */ @media (max-width: 1350px) { .nav > li > a { padding: 0 30px; } .nav .has-dropdown .nav__dropdown { left: 30px; } .nav .nav__icon { right: 10px; } } /* Small Desktop */ @media (max-width: 1200px) { .nav { font-size: 11px; } .nav > li > a { padding: 0 20px; } .nav .has-dropdown .nav__dropdown { left: 20px; } .nav .nav__icon { right: 0px; } } @media (max-width: 1023px) { .nav { background: #2243dc; color: #fff; font-size: 19px; letter-spacing: 0.05em; text-transform: capitalize; padding: 35px 0 45px; } .nav br { display: none; } .nav > li { display: block; padding: 0 25px 0 27px; text-align: left; } .nav > li ~ li { margin-top: 25px; } .nav > li > a { padding: 0; border-bottom: 3px solid #f40606; font-weight: 700; color: #fff; } .nav li > a span:not(.nav__icon) { display: inline-block; vertical-align: middle; height: auto; line-height: 1; padding: 10px 0; } .nav .nav__icon { position: static; display: none; } .nav li > a span:not(.nav__icon):before { content: none;} .nav .nav__icon ~ i { display: inline-block; margin-left: 21px; } .nav > .link-search { display: none; } .nav .current > a { color: #fff; } .nav a:hover, .nav a:focus, .nav a:active, .nav li:hover, .nav li:focus, .nav li:active, .nav li:hover > a, .nav .expand > a { color: #fff; border-bottom-color: #fff; } .nav .has-dropdown .nav__dropdown { position: relative; top: 0; left: 0; margin: 12px 0 6px; opacity: 1; visibility: visible; z-index: 1; width: 100%; display: none; } .nav .nav__dropdown { color: #f40606; padding: 8px 27px; font-size: 13px; letter-spacing: 0.05em; } .nav .nav__dropdown:before { width: calc(100% - 44px);} .nav .nav__dropdown a { padding: 17px 0; } .nav .nav__dropdown li ~ li { border-top: 1px solid #c7c7c7; margin-top: 0; } .nav .nav__dropdown:before, .nav .nav__dropdown:after { background: #f7f7f7; } .nav .nav__dropdown li:last-child:after { border-color: #f7f7f7 transparent transparent transparent; } .nav a:hover ~ .nav__dropdown, .nav a:focus ~ .nav__dropdown, .nav a:active ~ .nav__dropdown, .nav .has-dropdown .show-menu { display: none; } .nav .expand .nav__dropdown { display: block !important; } .nav .nav__dropdown a:hover, .nav .nav__dropdown a:focus, .nav .nav__dropdown a:active { color: #273fd8; } } /* ------------------------------------------------------------ *\ Nav Secondary \* ------------------------------------------------------------ */ .nav-secondary { text-transform: uppercase; } .nav-secondary ul { font-size: 0; } .nav-secondary ul li { display: inline-block; vertical-align: middle; width: 50%; position: relative; } .nav-secondary ul li ~ li:before { content: ''; width: 1px; background: #011e40; height: 48px; position: absolute; right: 100%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .nav-secondary a { text-decoration: none; color: #273fd8; display: block; line-height: 69px; letter-spacing: 0.15em; text-align: center; font-size: 11px; font-weight: 900; transition: color .3s; } .nav-secondary a i { display: none; } .nav-secondary a span { display: inline-block; vertical-align: middle; line-height: 1.18; } .nav-secondary a:hover, .nav-secondary a:focus, .nav-secondary a:active { color: #f40606; } @media (max-width: 1023px) { .nav-secondary { padding: 37px 29px; } .nav-secondary a { font-size: 16px; font-weight: 900; color: #273fd8; text-align: left; line-height: 1; } .nav-secondary a i { display: inline-block; vertical-align: middle; margin-left: 3px; } .nav-secondary ul li { display: block; width: 100%; } .nav-secondary ul li ~ li { margin-top: 20px; } .nav-secondary ul li ~ li:before { content: none; } } /* ------------------------------------------------------------ *\ Nav Show \* ------------------------------------------------------------ */ .nav-show { display: none; text-decoration: none; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .nav-show .nav-show-text { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: #273fd8; position: absolute; top: 100%; left: 0; margin: 3px 0 0 -1px; } .nav-show .active-text { display: none; } .nav-show .nav-show__icon { position: relative; display: inline-block; width: 32px; height: 32px; border: 2px solid #273fd8; transition: width .2s; text-align: center; } .nav-show .nav-show__icon-inner { display: inline-block; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); position: relative; width: 10px; height: 10px; position: relative; } .nav-show .nav-show__icon-inner span { position: absolute; display: block; height: 2px; background: #273fd8; transition: top .2s .25s, opacity .2s .25s, width .2s, -webkit-transform .2s 0s; transition: top .2s .25s, opacity .2s .25s, transform .2s 0s, width .2s; transition: top .2s .25s, opacity .2s .25s, transform .2s 0s, width .2s, -webkit-transform .2s 0s; } .nav-show .nav-show__icon-inner span:nth-child(1) { top: 0; width: 7px; } .nav-show .nav-show__icon-inner span:nth-child(2) { top: 4px; width: 10px; } .nav-show .nav-show__icon-inner span:nth-child(3) {top: 8px; width: 4px; } .nav-show.active .nav-show-text { display: none; } .nav-show.active .nav-show-text.active-text { display: inline-block; } .nav-show.active .nav-show__icon-inner span {transition: background .2s, top .2s, left .2s, opacity .2s, -webkit-transform .2s .25s;transition: background .2s, top .2s, left .2s, opacity .2s, transform .2s .25s;transition: background .2s, top .2s, left .2s, opacity .2s, transform .2s .25s, -webkit-transform .2s .25s; } .nav-show.active .nav-show__icon-inner { width: 18px; height: 18px; margin: 2px 0 0 -6px; } .nav-show.active .nav-show__icon-inner span:nth-child(3), .nav-show.active .nav-show__icon-inner span:nth-child(1) { top: 12px; width: 18px; } .nav-show.active .nav-show__icon-inner span:nth-child(2) {opacity: 0; } .nav-show.active .nav-show__icon-inner span:nth-child(1) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .nav-show.active .nav-show__icon-inner span:nth-child(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } @media (max-width: 1023px) { .nav-show { display: inline-block; } } /* ------------------------------------------------------------ *\ Paging \* ------------------------------------------------------------ */ .paging { text-align: right; } .paging > a { text-decoration: none; display: inline-block; vertical-align: middle; height: 24px; line-height: 24px; } .paging > a { margin-left: 16px; } .paging ul { font-size: 0; display: inline-block; vertical-align: middle; padding-right: 14px; } .paging li { display: inline-block; vertical-align: middle; width: 24px; height: 24px; border-radius: 50%; text-align: center; margin: 0 3px; position: relative; } .paging li a { display: inline-block; vertical-align: middle; width: 11px; height: 11px; border-radius: 50%; background: #cbcbcb; position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -5px; } .paging a .mobile-icon { display: none; } .paging .current { background: #cbcbcb; } .paging li a:hover, .paging li a:focus, .paging li a:active, .paging .current a { width: 14px; height: 14px; background: #2243dc; margin: -7px 0 0 -7px; } .paging > a:hover, .paging > a:focus, .paging > a:active { background: #cbcbcb; } @media (max-width: 767px) { .paging { padding-top: 60px; text-align: center;} .paging ul { padding-right: 0; width: 100%; margin-bottom: 26px; } .paging li { margin-bottom: 5px; } .paging > a { margin: 0 16px; height: auto; line-height: 1; } .paging a i { display: none; } .paging a .mobile-icon { display: inline-block; } } /* ------------------------------------------------------------ *\ Place \* ------------------------------------------------------------ */ .places .places__row { display: -webkit-flex; display: -ms-flexbox; display: flex; } .places .places__row ~ .places__row { border-top: 2px solid #e5e5e5; } .places .place { width: 33.33%; } .places .place ~ .place { border-left: 2px solid #e5e5e5; } .places__row .place { padding-bottom: 57px; } .places__row ~ .places__row .place { padding: 68px 0 0; } .place { color: #636363; letter-spacing: 0.05em; } .place a { text-decoration: none; display: block; max-width: 256px; margin: 0 auto; } .place:nth-child(1) a { margin-left: 0; } .place:nth-child(3) a { margin-right: 0; } .place h6 { font-size: 13px; text-transform: uppercase; color: #273fd8; font-weight: 900; letter-spacing: 0.15em; margin-bottom: 18px; } .place p { margin-bottom: 4px; } .place a:hover h6, .place a:focus h6, .place a:active h6 { color: #f40606; } @media (max-width: 1023px) { .place a { max-width: 200px; } } @media (max-width: 767px) { .places .places__row { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .places .places__row ~ .places__row { margin-top: 20px; } .places .places__row ~ .places__row .place { padding:20px 0 0; } .places__row .place { padding: 0; } .places .place { width: 100%; text-align: center; padding-top: 20px; } .places .place ~ .place { border-left: none; border-top: 2px solid #e5e5e5; margin-top: 20px; } .place a, .place:nth-child(1) a, .place:nth-child(3) a { margin: 0 auto; max-width: 320px;} .place h6 { margin-bottom: 10px; } } /* ------------------------------------------------------------ *\ Restult \* ------------------------------------------------------------ */ .results { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 0 -10px; } .results .result { width: calc(50% - 20px); max-width: calc(50% - 20px); margin: 0 10px 21px; } .result { background: #fff; border-radius: 2px; padding: 27px 40px 34px 37px; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .result:before { content: ''; background: url(/etc/designs/university-2017/images/result-ornament@2x.png) no-repeat 0 0; background-size: cover; width: 12px; height: 20px; position: absolute; top: 33px; left: 0; } .result h6 { font-size: 13px; text-transform: uppercase; font-weight: 900; color: #b7b6b6; letter-spacing: 0.15em; display: none; border-bottom: 2px solid #e9e9e9; padding-bottom: 12px; } .result .result__title { font-size: 22px; font-weight: 700; line-height: 1.36; letter-spacing: 0.025em; } .result a { font-size: 13px; font-weight: 900; color: #737373; text-transform: uppercase; letter-spacing: 0.15em; text-decoration: none; margin-right: 35px; } .result a .icon-holder { display: inline-block; margin: -2px 0 0 8px; position: relative; } .result a .icon-holder { transition: opacity .3s; } .result a .icon-holder .mobile-icon { position: absolute; top: 2px; left: 0; opacity: 0; } .result .result__actions { padding-top: 31px; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end;} .result a:hover, .result a:focus, .result a:active { color: #273fd8; } @media (max-width: 767px) { .results { display: block; margin: 0; } .results .result { width: 100%; max-width: 100%; margin: 0; padding: 0px 0 34px 16px; display: block; } .result ~ .result { margin-top: 30px; } .result { background: none; } .result:before { top: 56px; width: 6px; } .result h6 { display: block; margin-bottom: 20px; } .result a { color: #5b5b5b; font-size: 14px; text-transform: none; letter-spacing: 0.05em; } .result a .icon-holder i { opacity: 0; } .result a .icon-holder .mobile-icon { opacity: 1; visibility: visible; } } /* ------------------------------------------------------------ *\ Search \* ------------------------------------------------------------ */ .search { background: #f3f3f3; position: relative; padding: 10px 0; } .search > a { position: absolute; top: 0; right: 0; bottom: 0; width: 64px; background: #00193c; line-height: 64px; text-align: center; } .search form { position: relative; max-width: 930px; margin: 0 auto; padding: 0 15px; } .search .search__label { font-size: 14px; color: #011e40; font-weight: 900; letter-spacing: 0.125em; text-transform: uppercase; position: absolute; top: 50%; left: 54px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); cursor: auto; } .search .search__label span { color: #d8d8d8; } .search .search__field { border: 0; border-radius: 0; background: none; text-transform: uppercase; padding: 17px 0; margin-left: 30px; width: 50%; } .search .search__field::-webkit-input-placeholder { opacity: 0; } .search .search__field:-ms-input-placeholder { opacity: 0; } .search .search__field::placeholder { opacity: 0; } .search .search__btn { border: 0; border-radius: 0; background: url(/etc/designs/university-2017/images/search-grey@2x.png) no-repeat 0 0; width: 23px; height: 23px; background-size: cover; font-size: 0; line-height: 0; text-indent: -4004px; float: left; margin-top: 15px; } .search .search__field.has-value ~ .search__label , .search .search__field:focus ~ .search__label , .search .search__field:active ~ .search__label { opacity: 0; } @media (max-width: 1023px) { .search { font-size: 20px; letter-spacing: 0.05em; font-weight: 700; color: #c7c7c7; padding: 0 30px; margin-bottom: 27px; } .search form { margin: 0; padding: 0; width: 100%; } .search > a { display: none; } .search .search__label { display: none; } .search .search__field::-webkit-input-placeholder { opacity: 1; } .search .search__field:-ms-input-placeholder { opacity: 1; } .search .search__field::placeholder { opacity: 1; } .search .search__field { padding: 10px; font-weight: 700; max-width: 90%; color: #c7c7c7; font-size: 20px; margin-left: 0; } .search .search__btn { border: 0; border-radius: 0; background: url(/etc/designs/university-2017/images/search@2x.png) no-repeat 0 0; width: 26px; height: 26px; background-size: cover; font-size: 0; line-height: 0; text-indent: -4004px; float: left; margin-top: 11px; pointer-events: none; } } /* ------------------------------------------------------------ *\ Search--programs \* ------------------------------------------------------------ */ .search-programs { position: relative; margin-bottom: 15px; } .search-programs .search__field { border: none; border-radius: 0; font-weight: 900; letter-spacing: 0.15em; color: #f40606; text-transform: uppercase; width: 100%; display: block; border-radius: 2px; background: #fff; font-size: 13px; padding: 26px 45px 23px 28px; } .search-programs .search__btn { border: 0; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 0; line-height: 0; background: none; position: absolute; top: 50%; right: 25px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; } @media (max-width: 767px) { .search-programs { padding: 0 14px; } .search-programs .search__field { border-radius: 0; padding: 20px 45px 21px 26px; } .search-programs .search__btn { right: 40px; } } /* ------------------------------------------------------------ *\ Section Offset bottom \* ------------------------------------------------------------ */ .section--offset-bottom { margin-bottom: 50px; } @media (max-width: 767px) { .section--offset-bottom { margin-bottom: 12px; } } /* ------------------------------------------------------------ *\ Section Welcome \* ------------------------------------------------------------ */ .section--welcome { background-size: cover; min-height: 768px; padding-top: 135px; color: #273fd8; background-position: center center; } .section--welcome .section__title { color: #273fd8; line-height: 1.25; margin-bottom: 30px; } .section--welcome .section__content { position: relative; } .section--welcome .section__content > .ico-shape-diamond { position: absolute; right: 100%; top: 37px; margin-right: 78px; } .section--welcome .section__content p { line-height: 2.19; letter-spacing: 0.05em; } .section--welcome .section__actions { padding-top: 22px; } .section--welcome .section__actions a { font-size: 14px; font-weight: 900; text-decoration: none; text-transform: uppercase; display: inline-block; vertical-align: middle; letter-spacing: 0.125em; color: #011e40;} .section--welcome .section__actions a span { padding: 0 13px 0 15px; display: inline-block; vertical-align: middle; } .section--welcome .section__actions a ~ a { margin-left: 48px; } .section--welcome .section__actions a:hover, .section--welcome .section__actions a:focus, .section--welcome .section__actions a:active { color: #f40606; } /* Small Desktop */ @media (max-width: 1200px) { .section--welcome .section__actions a ~ a { margin-left: 20px; } } @media (max-width: 1023px) { .section--welcome { min-height: 0; height: auto; padding: 47px 0; background-position: center right; } .section--welcome .section__content { padding: 0 12px; } .section--welcome .section__content > .ico-shape-diamond { position: static; margin-bottom: 23px; margin-left: 4px; } .section--welcome .section__title { line-height: 1.38; margin-bottom: 18px; } } @media (max-width: 767px) { .section--welcome .section__content p { line-height: 1.58; } .section--welcome .section__actions a { display: block; } .section--welcome .section__actions a span { width: 120px; padding: 0; text-align: center; } .section--welcome .section__actions a ~ a { margin:34px 0 0; } } /* ------------------------------------------------------------ *\ Section News \* ------------------------------------------------------------ */ .section--news { padding: 139px 0 129px; text-align: center; position: relative; background: #d8d8d8; } .section--news:before { content: ''; background: url(/etc/designs/university-2017/images/news-pattern-dark-blue.png) no-repeat 0 0; width: 37px; height: 111px; position: absolute; top: 50%; left: -22px; } .section--news:after { content: ''; background: url(/etc/designs/university-2017/images/stepped-line.png) no-repeat 0 0; width: 17px; height: 280px; position: absolute; top: -103px; right: 52px; } .section--news .section__image { position: absolute; bottom: calc(100% - 63px); left: 0; } .section--news .section__title { color: #273fd8; text-transform: uppercase; font-weight: 900; letter-spacing: 0.1em; margin-bottom: 90px; } @media (max-width: 1023px) { .section--news { padding-top: 0; } .section--news:before { content: none;} .section--news .section__image { top: 0; position: static; margin-bottom: 70px; } } @media (max-width: 767px) { .section--news { padding-bottom: 60px; } .section--news .section__title { margin-bottom: 40px; } } @media (max-width: 479px) { .section--news:after { top: 40px; right: 27px; } .section--news .section__image { margin-bottom: 80px; } .section--news .section__image img { width: 100%; } } /* ------------------------------------------------------------ *\ Section Details \* ------------------------------------------------------------ */ .section--details { position: relative; padding: 100px 0 64px; } .section--details .shell { position: relative; } .section--details .ico-shape-diamond { position: absolute; top: 102px; right: 47px; } .section--details h4 { line-height: 1.52; color: #273fd8; letter-spacing: 0.025em; } .section--details h4:before { content: ''; width: 30px; height: 4px; background: #f40606; position: absolute; left: -100px; top: 20px; } .section--details .section__content { position: relative; padding-bottom: 78px; } .section--details .section__content:before { content: ''; background: url(/etc/designs/university-2017/images/dot.png) repeat 0 0; width: 35px; height: 152px; position: absolute; bottom: 0; right: 60px; } .section--details .section__content:after { content: ''; background: url(/etc/designs/university-2017/images/dot.png) repeat 0 0; width: 165px; height: 26px; position: absolute; bottom: 0; right: 60px; } .section--details .section__entry { position: relative; max-width: 595px; margin: 0 auto; text-align: center; padding: 91px 0 70px; } .section--details .section__entry .section_entry-title { color: #273fd8; letter-spacing: 0.025em; margin-bottom: 17px; font-size: 70px; } .section--details .section__entry h3 { color: #f40606; line-height: 1.56; letter-spacing: 0.025em; } .section--details .section__entry ~ .section__entry:before { content: ''; width: 16px; height: 16px; background: #bababa; position: absolute; top: 20px; left: 50%; -webkit-transform: rotate(45deg) translateX(-50%); -ms-transform: rotate(45deg) translateX(-50%); transform: rotate(45deg) translateX(-50%); } @media (max-width: 1023px) { .section--details { padding: 165px 0 70px; } .section--details h4:before { left: 0; top: -40px; } .section--details [class^="col-"] { padding: 0; } .section--details .section__content { padding: 0 27px; } .section--details .section__content:after { content: none;} .section--details .section__content:before { height: 106px; right: 0; top: 0; } } @media (max-width: 767px) { .section--details:before { content: ''; background: url(/etc/designs/university-2017/images/details-pattern.png) no-repeat 0 0; width: 263px; height: 46px; position: absolute; top: 0; left: 50%; margin-left: -132px; } .section--details h4 { font-size: 16px; line-height: 1.56; letter-spacing: 0.05em; font-weight: 400; } .section--details .ico-shape-diamond { display: none; } .section--details .section__entry { padding: 50px 0; } .section--details .section__entry h3 { font-size: 24px; } .section--details .section__entry .section_entry-title { font-size: 40px; } } @media (max-width: 479px) { .section--details .section__content:before { width: 20px; height: 206px; right: -15px; } } /* ------------------------------------------------------------ *\ Section Details Missions \* ------------------------------------------------------------ */ .section--details-missions { padding: 0 0 56px; } .section--details-missions .section__body { position: relative; z-index: 1; } .section--details-missions:before { content: ''; position: absolute; top: 193px; right: 10px; bottom: 100px; width: 190px; background: #fff url(/etc/designs/university-2017/images/dot.png) repeat 0 0; max-height: 1200px; } .section--details-missions:after { content: ''; position: absolute; bottom: 190px; right: 110px; width: 90px; height: 764px; background: #fff; } .section--details-missions .section__inner { position: relative; padding: 95px 0 80px; overflow: hidden; } .section--details-missions .section__inner:after { content: ''; width: 980px; height: 980px; border: 2px solid #efefef; position: absolute; top: 86px; left: -190px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); z-index: -1; } .section--details-missions .section__inner:before {content: ''; background: url(/etc/designs/university-2017/images/missions-pattern-dark-blue.png) no-repeat 0 0; width: 26px; height: 90px; position: absolute; top: 35%; left: 0; } .section--details-missions .section__content:before, .section--details-missions .section__content:after { content: none; } .section--details-missions .section__content { color: #273fd8; max-width: 894px; margin: 0 auto; padding: 77px 0 0 100px; } .section--details-missions .section__content h4 { position: relative; } .section--details-missions .section__content p { line-height: 2.19; letter-spacing: 0.05em; } @media (max-width: 1023px) { .section--details-missions:before { width: 35px; right: 0; background-color: transparent; } .section--details-missions:after { content: none;} .section--details-missions .section__content { padding-left: 0; } } @media (max-width: 767px) { .section--details-missions { padding-bottom: 0; } .section--details-missions h4 { font-weight: 700; } .section--details:before { content: ''; background: url(/etc/designs/university-2017/images/details-pattern.png) no-repeat 0 0; width: 263px; height: 46px; position: absolute; top: 0; left: 50%; margin-left: -132px; } .section--details-missions .section__inner { padding: 50px 0 100px; } } /* ------------------------------------------------------------ *\ Section Details Facts \* ------------------------------------------------------------ */ .section--details-facts { padding: 60px 0 0px; } /* ------------------------------------------------------------ *\ Section Details Histort \* ------------------------------------------------------------ */ .section--details-history { padding-bottom: 63px; } /* ------------------------------------------------------------ *\ Section Details Student Life \* ------------------------------------------------------------ */ .section--details-student-life { padding-bottom: 53px; } @media (max-width: 767px) { .section--details-student-life { padding-bottom: 86px; } } /* ------------------------------------------------------------ *\ Section Details Alumni \* ------------------------------------------------------------ */ .section--details-alumni { padding-bottom: 32px; } @media (max-width: 1023px) { .section--details-alumni { padding-bottom: 64px; } } /* ------------------------------------------------------------ *\ Section Details Academics \* ------------------------------------------------------------ */ .section--details-academics { padding-bottom: 78px; } .section--details-academics .section__content { padding-bottom: 98px; } @media (max-width: 767px) { .section--details-academics .section__content { padding-bottom: 0; } } /* ------------------------------------------------------------ *\ Section Leadership \* ------------------------------------------------------------ */ .section--members { padding: 120px 0; } .section--members .section__body { position: relative; } .section--members .section__background { background: url(/etc/designs/university-2017/images/stripes-pattern.png) repeat 0 0; position: absolute; top: 0; left: 0; right: 0; height: 303px; } .section--members .section__head { text-align: center; margin-bottom: 75px; } .section--members .section__title { color: #273fd8; } @media (max-width: 1200px) { .section--members { padding: 70px 0; } .section--members .section__background { height: auto; padding-top: 24.7%; } } @media (max-width: 1023px) { .section--members .section__background { padding-top: 23.7%; } } @media (max-width: 767px) { .section--members { padding: 20px 0; } .section--members .section__background { display: none; } .section--members .section__head { margin-bottom: 20px; } } /* ------------------------------------------------------------ *\ Section Features \* ------------------------------------------------------------ */ .section--features { position: relative; overflow: hidden; } .section--features-offset { padding-top: 84px; } .section--features .shell { position: relative; padding: 0; } .section--features .section__background { position: absolute; top: 43px; left: -15px; right: -15px; bottom: 85px; background-size: cover; background-position: center center; } .section--features .section__background:before { content: ''; background: url(/etc/designs/university-2017/images//features-ornament-dark-blue.png) no-repeat 0 0; position: absolute; top: 50%; right: -23px; width: 65px; height: 68px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .section--features .section__content { position: relative; z-index: 1; } @media (max-width: 767px) { .section--features { margin-bottom: 53px; } .section--features-offset { padding-top: 20px; } .section--features .section__background { top: 0; bottom: 0; } .section--features .section__background:before { content: none; } .section--features .section__content { padding: 34px 0 27px; } } /* ------------------------------------------------------------ *\ Section Research \* ------------------------------------------------------------ */ .section--research { position: relative; padding: 73px 0 59px; } .section--research .shell { position: relative; z-index: 1; } .section--research .section__background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; } .section--research .section__head { color: #fff; text-align: center; margin-bottom: 48px; } .section--research .section__body { border: 8px solid #f40606; background: #fff; padding: 62px 110px 43px; } .section--research .section__content { max-width: 970px; margin: 0 auto; } @media (max-width: 1023px) { .section--research .section__body { padding: 62px 50px 43px; } } @media (max-width: 767px) { .section--research { padding: 77px 0 45px; } .section--research .shell { padding: 0; } .section--research .section__head { padding: 0 10px; line-height: 1.38; margin-bottom: 58px; } .section--research .section__body { border-left: none; border-right: none; padding: 55px 27px 41px;} } /* ------------------------------------------------------------ *\ Section Stories \* ------------------------------------------------------------ */ .section--stories { position: relative; } .section--stories .section__background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-position: center; } .section--stories .section__content { position: relative; z-index: 1; padding: 109px 0 108px; } .section--stories .section__content:before { content: ''; background: url(/etc/designs/university-2017/images/phl-red.png) repeat 0 0; background-size: cover; width: 152px; height: 44px; position: absolute; top: -22px; left: -65px; z-index: 1; } /* Large Desktop */ @media (max-width: 1350px) { .section--stories .section__content:before { left: 0; } } @media (max-width: 767px) { .section--stories .section__content:before { content: none; } .section--stories .shell { padding: 0; } .section--stories .section__content { padding: 55px 0; } } /* ------------------------------------------------------------ *\ Section History \* ------------------------------------------------------------ */ .section--history { background: #dadada; padding-bottom: 73px; margin-bottom: 90px; } .section--history .section__content { position: relative; padding: 109px 0 68px; } .section--history .section__content:before { content: ''; background: url(/etc/designs/university-2017/images/phl-red.png) repeat 0 0; background-size: cover; width: 152px; height: 44px; position: absolute; top: -22px; left: -65px; z-index: 1; } .section--history .section__foot { max-width: 1118px; margin: 0 auto; } /* Large Desktop */ @media (max-width: 1350px) { .section--history .section__content:before { left: 0; } } @media (max-width: 767px) { .section--history .section__content:before { content: none; } .section--history { margin-bottom: 0px; padding: 0 0 30px; } .section--history .section__content { padding: 30px 0; } } /* ------------------------------------------------------------ *\ Section Places \* ------------------------------------------------------------ */ .section--places { background: #f8f8f8; position: relative; margin-top: 150px; padding-bottom: 117px; } .section--places:before { content: ''; position: absolute; top: 0; left: 0; background: url(/etc/designs/university-2017/images/missions-pattern-dark-blue.png) no-repeat 0 0; width: 26px; height: 90px; } .section--places .map-container { position: relative; top: -150px; margin-bottom: -42px; } @media (max-width: 767px) { .section--places { margin: 0; padding: 0 0 40px; } .section--places .shell { padding: 0; } .section--places .map-container { top: 0; margin: 0 0 40px; } } /* ------------------------------------------------------------ *\ Section Contact \* ------------------------------------------------------------ */ .section--contact { background: #2a41d8; text-align: center; padding: 60px 0 82px; } .section--contact .section__title { color: #fff; margin-bottom: 63px; } @media (max-width: 767px) { .section--contact { padding: 30px 0; } .section--contact .section__title { margin-bottom: 30px; } } /* ------------------------------------------------------------ *\ Section Benefits \* ------------------------------------------------------------ */ .section--benefits { position: relative; color: #273fd8; padding: 112px 0 76px; } .section--benefits:before { content: ''; background: url(/etc/designs/university-2017/images/possible-text.png); width: 18px; height: 905px; position: absolute; top: -211px; right: 0; z-index: 1; } .section--benefits:after { content: ''; background: url(/etc/designs/university-2017/images/dot-lg.png) repeat 0 0; position: absolute; bottom: 0; left: 0; height: 288px; width: 32px; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } .section--benefits .shell { position: relative; z-index: 1; } .section--benefits .section__background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-position: center; } .section--benefits .section__background:before { content: ''; background: url(/etc/designs/university-2017/images/missions-pattern-dark-blue.png); width: 26px; height: 90px; position: absolute; top: -44px; left: 22px; z-index: 1; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .section--benefits .section__content { background: #fff; padding-bottom: 69px; } @media (max-width: 1023px) { .section--benefits .shell { padding: 0; } } @media (max-width: 767px) { .section--benefits { padding: 100px 0 92px; } .section--benefits:before { top: -3px; z-index: 5; width: 14px; height: 692px; background-size: cover; } .section--benefits:after { width: 67%; height: 64px; left: auto; right: 0; bottom: 51px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); z-index: 1; } .section--benefits .section__background:before { left: 59px; } .section--benefits .section__content { padding-bottom: 45px; } } /* ------------------------------------------------------------ *\ Section Colleges \* ------------------------------------------------------------ */ .section--colleges { margin-bottom: 51px; } .section--colleges .section__head { text-align: center; color: #273fd8; margin-bottom: 63px; } .section--colleges .section__body { position: relative; } .section--colleges .section__body:before { content: ''; background: url(/etc/designs/university-2017/images/pattern-lg.png) repeat-x 0 0; position: absolute; top: 70px; left: 0; right: 0; height: 300px; } .section--colleges .section__content { max-width: 970px; margin: 0 auto; border: 8px solid #f40606; background: #fff; padding: 64px 106px 46px 112px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; position: relative; z-index: 1; } @media (max-width: 1023px) { .section--colleges .section__content { padding: 72px 36px 65px; } } @media (max-width: 767px) { .section--colleges { margin-bottom: 0; padding-top: 40px; } .section--colleges .section__body:before { top: -33px; } .section--colleges .section__content { display: block; } .section--colleges .shell { padding: 0; } } /* ------------------------------------------------------------ *\ Section Article \* ------------------------------------------------------------ */ .section--article { padding-top: 58px; overflow: hidden; } /* ------------------------------------------------------------ *\ Section Programs \* ------------------------------------------------------------ */ .section--programs { color: #273fd8; background: #f2f2f2; padding: 74px 0 83px; margin-bottom: 128px; } .section--programs h4 { margin-bottom: 30px; } .section--programs .section__head { text-align: center; margin-bottom: 73px; } .section--programs .section__head h3 { margin-bottom: 27px; } .section--programs .section__head p { letter-spacing: 0.05em; } .section--programs .shell:after { } .section--programs .section__aside { color: #f40606; width: 270px; float: left; } .section--programs .section__content { padding-left: 80px; overflow: hidden; float: right; width: calc(100% - 270px);} /* Small Desktop */ @media (max-width: 1200px) { .section--programs .section__content { padding-left: 30px; } } @media (max-width: 1023px) { .section--programs .section__aside, .section--programs .section__content { width: 100%; float: none; padding-left: 0; margin-bottom: 40px; } } @media (max-width: 767px) { .section--programs { padding: 40px 0 24px; margin-bottom: 0; } .section--programs .section__head { padding: 0 20px; line-height: 1.56; margin-bottom: 44px; } .section--programs .section__head h3 { margin-bottom: 11px; line-height: 1.38; } .section--programs .section__aside h4, .section--programs .section__content h4 { display: none; } .section--programs .section__aside:after { } .section--programs .section__aside .link-filters { display: inline-block; float: right; margin:0 17px 8px 0; } .section--programs .shell { padding: 0 12px; } .section--programs .section__aside-inner { display: none; clear: both; padding-top: 29px; } .section--programs .section__aside.expanded .link-filters i { opacity: 0; } .section--programs .section__aside.expanded .link-filters .ico-close { opacity: 1; } } /* ------------------------------------------------------------ *\ Slider \* ------------------------------------------------------------ */ .slider .slides { list-style: none outside none; } /* ------------------------------------------------------------ *\ Slider Learning \* ------------------------------------------------------------ */ .slider--learning { position: relative; letter-spacing: 0.05em; line-height: 2.19; } .slider--learning:after { content: ''; background: url(/etc/designs/university-2017/images/long-arrow@2x.png) no-repeat 0 0; background-size: cover; width: 10px; height: 458px; position: absolute; bottom: -84px; right: 42px; } .slider--learning:before { content: ''; background: url(/etc/designs/university-2017/images/dot-lg.png) repeat 0 0; width: 32px; height: 288px; position: absolute; bottom: -78px; left: 0; z-index: 1; } .slider--learning h3 { letter-spacing: 0.025em; margin-bottom: 36px; position: relative; line-height: 1; } .slider--learning h3:before { content: ''; background: url(/etc/designs/university-2017/images/bracket-left@2x.png) no-repeat center center; background-size: cover; width: 11px; height: 50px; position: absolute; left: -55px; top: -9px; } .slider--learning a { text-decoration: none; } .slider--learning .shell { position: relative; z-index: 1; } .slider--learning .slider__background { position: absolute; top: 50px; left: 0; bottom: 50px; right: 0; background-size: cover; } .slider--learning .slider__slide-image { max-width: 645px; } .slider--learning .slider__slide-content { padding: 150px 0 50px 70px; color: #fff; } .slider--learning .slider__slide-content p { margin-bottom: 31px; } .slider--learning .slider__slide-content span { display: inline-block; text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: 0.15em; } .slider--learning .slider__slide-content span i { margin-left: 15px; } .slider--learning a:hover span, .slider--learning a:focus span, .slider--learning a:active span { color: #f40606; } .slider--learning .slick-arrow { font-size: 0; line-height: 0; text-indent: -4004px; width: 70px; height: 70px; background: #011e40; border: none; border-radius: 0; text-align: center; position: absolute; bottom: 119px; z-index: 1; opacity: 1; visibility: visible; transition: background .3s; } .slider--learning .slick-arrow:hover, .slider--learning .slick-arrow:focus, .slider--learning .slick-arrow:active { background: #273fd8; } .slider--learning .slick-arrow.slick-disabled { opacity: 0; visibility: hidden; } .slider--learning .slick-prev { left: 50%; margin-left: -92px; } .slider--learning .slick-prev:before { content: ''; display: block; background: url(/etc/designs/university-2017/images/slider-prev-white@2x.png) no-repeat 0 0; background-size: cover; width: 22px; height: 18px; margin: 0 auto; } .slider--learning .slick-next { right: 50%; margin-right: -92px; } .slider--learning .slick-next:before { content: ''; display: block; background: url(/etc/designs/university-2017/images/slider-next-white@2x.png) no-repeat 0 0; background-size: cover; width: 22px; height: 18px; margin: 0 auto; } @media (max-width: 1200px) { .slider--learning:after { content: none; } .slider--learning h3:before { left: -35px; } .slider--learning .slider__slide-content { padding: 90px 0 0 30px; } } @media (max-width: 1023px) { .slider--learning { padding: 36px 0; } .slider--learning .row { margin: 0; } .slider--learning .slider__background { top: 0; bottom: 0; } .slider--learning .slider__slide-image { margin: 0 auto; } .slider--learning .slider__slide-content { padding: 50px 0 0; max-width: 645px; margin: 0 auto; } .slider--learning h3:before { content: none;} .slider--learning .slick-arrow { bottom: 230px; } .slider--learning .slick-next { margin-right: -292px; } .slider--learning .slick-prev { margin-left: -292px; } } @media (max-width: 767px) { .slider--learning .shell { padding: 0; } .slider--learning:before { bottom: auto; top: 20%; left: -5px; } .slider--learning [class^="col-"] { padding: 0; } .slider--learning .slider__slide-image { max-width: 470px; } .slider--learning .slider__slide-content { max-width: 100%; padding: 50px 27px; } .slider--learning .slider__slide-content p { line-height: 1.56; letter-spacing: 0.05em; } .slider--learning .slick-arrow { bottom: auto; top: 460px; } .slider--learning .slick-next { right: 30px; margin-right: 0; } .slider--learning .slick-prev { left: 30px; margin-left: 0; } } @media (max-width: 479px) { .slider--learning h3 { margin-bottom: 0; } .slider--learning .slider__slide-image { max-width: 320px; max-height: 336px; overflow: hidden; } .slider--learning .slick-arrow { top: 294px;} } /* ------------------------------------------------------------ *\ Slider Benefits \* ------------------------------------------------------------ */ .slider--benefits { padding-bottom: 70px; } .slider--benefits .slick-arrow { font-size: 0; line-height: 0; text-indent: -4004px; width: 50px; height: 50px; background: #011e40; border: none; border-radius: 0; text-align: center; position: absolute; top: 50%; z-index: 1; opacity: 1; visibility: visible; transition: background .3s; margin-top: 30px; } .slider--benefits .slick-arrow:hover, .slider--benefits .slick-arrow:focus, .slider--benefits .slick-arrow:active { background: #273fd8; } .slider--benefits .slick-arrow.slick-disabled { opacity: 0; visibility: hidden; } .slider--benefits .slick-prev { left: 46.78%; margin-left: -80px; } .slider--benefits .slick-prev:before { content: ''; display: block; background: url(/etc/designs/university-2017/images/slider-prev-white@2x.png) no-repeat 0 0; background-size: cover; width: 22px; height: 18px; margin: 0 auto; } .slider--benefits .slick-next { left: 46.78%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .slider--benefits .slick-next:before { content: ''; display: block; background: url(/etc/designs/university-2017/images/slider-next-white@2x.png) no-repeat 0 0; background-size: cover; width: 22px; height: 18px; margin: 0 auto; } @media (max-width: 1023px) { .slider--benefits { padding: 0 0 34px; } .slider--benefits .slick-arrow { top: 500px; margin: 0; } .slider--benefits .slick-prev { left: 55px; margin: 0; } .slider--benefits .slick-next { left: auto; right: 55px; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } } @media (max-width: 767px) { .slider--benefits .slick-arrow { width: 63px; height: 63px; top: 470px; } } @media (max-width: 479px) { .slider--benefits { padding-bottom: 0; } .slider--benefits .slick-arrow { top: 32%; } } /* ------------------------------------------------------------ *\ Slider Benefits Inverse \* ------------------------------------------------------------ */ .slider--benefits-inverse { padding-top: 60px; } .slider--benefits-inverse .slick-arrow { margin-top: 55px; } .slider--benefits-inverse .slick-next { left: auto; right: 46.78%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%);} .slider--benefits-inverse .slick-prev { left: auto; right: 46.78%; margin-left: 0; margin-right: 30px; } @media (max-width: 1023px) { .slider--benefits-inverse .slick-arrow { top: 500px; margin: 0; } .slider--benefits-inverse .slick-prev { left: 55px; margin: 0; } .slider--benefits-inverse .slick-next { left: auto; right: 55px; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } } @media (max-width: 767px) { .slider--benefits-inverse { padding-top: 75px; } .slider--benefits-inverse .slick-arrow { top: 470px; } } @media (max-width: 479px) { .slider--benefits-inverse .slick-arrow { top: 40%; } } /* ------------------------------------------------------------ *\ Table \* ------------------------------------------------------------ */ .table {} /* ------------------------------------------------------------ *\ Update \* ------------------------------------------------------------ */ .update { position: relative; padding-bottom: 110.6%; overflow: hidden; } .update:before { content: ''; border-style: solid; border-width: 44px 0 0 44px; border-color: transparent transparent transparent #273fd8; position: absolute; bottom: 5px; left: 5px; z-index: 1; } .update a:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 5px solid #273fd8; z-index: 1; } .update .update__image { position: absolute; width: 100%; top: 0; left: 0; bottom: 0; background-size: cover; } .update .update__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #2243dc; text-align: left; padding: 100px 38px 0; opacity: 0; transition: opacity ease-in .25s; z-index: 2; } .update .update__overlay h4 { color: #fff; letter-spacing: 0.01em; line-height: 1.6; margin-bottom: 20px; } .update .update__overlay h6 { color: #a2aee9; letter-spacing: 0.125em; margin-bottom: 17px; } .update .update__overlay .update__inner { opacity: 0; transition: opacity .25s ease-in .25s; } .update .update__icon { width: 67px; height: 35px; line-height: 35px; border-radius: 20px; background-color: #f40606; font-size: 0; text-align: center; transition: background .25s; } .update .update__icon span { display: inline-block; vertical-align: middle; position: relative; line-height: 1px;} .update .update__icon i { transition: opacity .25s, visibility .25s; } .update .update__icon .hover-icon { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; } .update a:hover .update__overlay .update__inner, .update a:active .update__overlay .update__inner, .update a:focus .update__overlay .update__inner, .update a:hover .update__overlay, .update a:focus .update__overlay, .update a:active .update__overlay { opacity: 1; } .update .update__icon:hover { background-color: #fff; } .update .update__icon:hover i { opacity: 0; visibility: hidden; } .update .update__icon:hover .hover-icon { opacity: 1; visibility: visible; } /* Small Desktop */ @media (max-width: 1200px) { .update .update__overlay { padding-top: 30px; } } @media (max-width: 1023px) { .update .update__overlay { padding: 10px; } } @media (max-width: 767px) { .update { padding-bottom: 0; margin-bottom: 14px; } .update:before { border-width: 34px 0 0 <34px>; } .update a { display: block; border: 5px solid #2243dc; text-decoration: none; } .update .update__image { display: none; } .update .update__overlay { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); opacity: 1; background-color: transparent; position: static; padding: 30px 42px 26px; } .update .update__overlay h6 { color: #fff; margin-bottom: 7px; transition: color .3s; } .update .update__overlay h4 { color: #273fd8; font-size: 20px; line-height: 1.5; margin-bottom: 15px; transition: color .3s} .update a:hover h6, .update a:hover h4, .update a:focus h6, .update a:focus h4, .update a:active h6, .update a:active h4 { color: #f40606; } } /* ------------------------------------------------------------ *\ Widget \* ------------------------------------------------------------ */ .widgets { list-style: none outside none; }