/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability of focused elements when they are also in an * active/hover state. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: .67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* https://icomoon.io/app/ */ @font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot'); src: url('../fonts/icomoon.eot') format('embedded-opentype'), url('../fonts/icomoon.ttf') format('truetype'); url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'icomoon-plus'; src: url('../fonts/icomoon.eot'); src: url('../fonts/icomoon.eot') format('embedded-opentype'), url('../fonts/IcoMoon-Free.ttf') format('truetype'); url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.svg') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="icons-"], [class*=" icons-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon-plus' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-slack:before { content: "\e901"; } .icon-email:before { content: "\e900"; } .icon-bookmark:before { content: "\1f328"; } .icon-facebook:before { content: "\ea90"; } .icon-twitter:before { content: "\ea96"; } .icons-vk:before { content: "\ea98"; } .icon-yt:before { content: "\ea9d"; } .icons-youtube:before { content: "\ea9e"; } .icons-telegram:before { content: "\ea95"; } .icons-g-plus:before { content: "\ea8b"; } .icons-linkd:before { content: "\eac9"; } .social-networks, .primary-menu, .events-list, .project-list, .info-section ul { margin: 0; padding: 0; list-style: none; } .clearfix:after, .container:after, .js-masonry:after, .events-list li:after, .project-list li:after, .contact-form .form-row:after { content: ""; display: block; clear: both; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } * { max-height: 1000000px; } body { color: #333; background: #edf2f4; font: 400 15px/1.47 "Open Sans", "Arial", "Helvetica Neue", "Helvetica", sans-serif; min-width: 320px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; } .gm-style img { max-width: none; } h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", "Arial", "Helvetica Neue", "Helvetica", sans-serif; font-weight: 400; margin: 0 0 20px; color: #333; letter-spacing: .03em; } h1 { font-size: 36px; line-height: 38px; } h2 { font-size: 30px; line-height: 32px; } h3 { font-size: 27px; line-height: 29px; } h4 { font-size: 21px; line-height: 23px; } h5 { font-size: 17px; line-height: 19px; } h6 { font-size: 15px; line-height: 17px; } p { margin: 0 0 15px; } a { color: #333; text-decoration: none; -webkit-transition: color .2s linear; transition: color .2s linear; } a:hover, a:focus { color: #3776ab; } form, fieldset { margin: 0; padding: 0; border-style: none; } input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input[type="password"], input[type="url"], input[type="date"], textarea { -webkit-appearance: none; -webkit-border-radius: 0; box-sizing: border-box; border: 2px solid #fff; padding: 5px 15px; height: 45px; width: 100%; font-size: 15px; line-height: 17px; color: #333; outline: none; box-shadow: none; -webkit-border-radius: 0; -webkit-transition: border-color .2s linear; transition: border-color .2s linear; } input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="url"]:focus, input[type="date"]:focus, textarea:focus { border-color: #ffd343; } input[type="text"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="url"]::-webkit-input-placeholder, input[type="date"]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #333; } input[type="text"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="url"]::-moz-placeholder, input[type="date"]::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: #333; } input[type="text"]:-moz-placeholder, input[type="tel"]:-moz-placeholder, input[type="email"]:-moz-placeholder, input[type="search"]:-moz-placeholder, input[type="password"]:-moz-placeholder, input[type="url"]:-moz-placeholder, input[type="date"]:-moz-placeholder, textarea:-moz-placeholder { color: #333; } input[type="text"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="search"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="url"]:-ms-input-placeholder, input[type="date"]:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #333; } input[type="text"].placeholder, input[type="tel"].placeholder, input[type="email"].placeholder, input[type="search"].placeholder, input[type="password"].placeholder, input[type="url"].placeholder, input[type="date"].placeholder, textarea.placeholder { color: #333; } select { -webkit-border-radius: 0; } textarea { resize: vertical; vertical-align: top; height: 115px; padding: 12px 15px; } button, input[type="button"], input[type="reset"], input[type="file"], input[type="submit"] { -webkit-appearance: none; -webkit-border-radius: 0; cursor: pointer; text-transform: uppercase; text-align: center; text-transform: uppercase; color: #333; width: 100%; font-size: 13px; line-height: 15px; letter-spacing: .04em; padding: 15px 5px 13px; background: transparent; border: none; position: relative; z-index: 2; outline: none; -webkit-transition: color .2s linear, border-color .2s linear; transition: color .2s linear, border-color .2s linear; } .submit-holder { border: 1px solid #ffd343; min-width: 166px; max-width: 166px; position: relative; } .submit-holder:before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background: #ffd343; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition: -webkit-transform .2s linear; transition: transform .2s linear; } .submit-holder:hover, .submit-holder:focus { border-color: #fff; } .submit-holder:hover input[type="submit"], .submit-holder:focus input[type="submit"] { color: #fff; } .submit-holder:hover:before, .submit-holder:focus:before { -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); } /* wrapper */ #wrapper { overflow: hidden; position: relative; } /* w1 */ .w1 { position: relative; -webkit-transition: margin .2s linear; transition: margin .2s linear; } .w1:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(51, 51, 51, .8); opacity: 0; visibility: hidden; -webkit-transition: opacity .2s linear, visibility .2s linear; transition: opacity .2s linear, visibility .2s linear; z-index: 100; } /* container */ .container { max-width: 1240px; margin: 0 auto; padding: 0 20px; } /* container inner */ .container-inner { max-width: 790px; margin: 0 auto; } /* main */ .main { position: relative; z-index: 1; } /* btn holder */ .btn-holder { text-align: center; padding: 18px 0 0; } /* heading */ .heading { text-align: center; color: #fff; font-size: 15px; padding: 0 0 15px; } /* title holder */ .title-holder { position: relative; margin: 0 0 25px; padding: 0 0 31px; text-align: center; } .title-holder:before { content: ""; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 88px; height: 3px; background: #ffd343; } /* social networks */ .social-networks { font-size: 0; line-height: 0; float: right; text-align: left; margin: 2px 0 0; } .social-networks li { float: left; margin: 0 0 0 28px; } .social-networks li:first-child { margin-left: 0; } .social-networks a { display: block; color: rgba(101, 120, 136, .6); } .social-networks a:before { font-size: 19px; line-height: 1; } .social-networks a:hover, .social-networks a:focus { color: #3776ab; } /* btn default */ .btn-default { display: inline-block; vertical-align: top; font-size: 13px; line-height: 15px; font-weight: 400; min-width: 244px; border: 1px solid #3776ab; text-align: center; text-transform: uppercase; color: #3776ab; padding: 16px 10px 14px; background: transparent; position: relative; letter-spacing: .03em; } .btn-default:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #3776ab; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition: -webkit-transform .2s linear; transition: transform .2s linear; } .btn-default:hover { color: #fff; } .btn-default:hover:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } /* header */ .header { background: #fff; padding: 28px 0; position: relative; z-index: 2; text-align: center; min-height: 83px; } /* logo */ .logo { float: left; text-align: left; } .logo a { display: block; } .logo img { vertical-align: top; } /* main navigation */ .main-nav { display: inline-block; vertical-align: top; margin: 3px 0 0; } /* primary menu */ .primary-menu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; font-size: 17px; line-height: 19px; font-weight: 600; } .primary-menu li { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 0 19px; position: relative; } .primary-menu li:before { content: ""; height: 5px; background: #ffd54a; position: absolute; top: -31px; left: 0; right: 0; opacity: 0; visibility: hidden; -webkit-transition: opacity .2s linear, visibility .2s linear; transition: opacity .2s linear, visibility .2s linear; } .primary-menu li:hover:before, .primary-menu li.active:before { opacity: 1; visibility: visible; } .primary-menu a { display: block; } .primary-menu a:hover, .primary-menu a:focus { color: #333; } /* opener navigation */ .nav-opener { overflow: hidden; text-indent: 101%; white-space: nowrap; display: none; width: 35px; height: 30px; position: relative; z-index: 150; } .nav-opener:before, .nav-opener:after, .nav-opener span { height: 3px; position: absolute; left: 0; right: 0; top: 14px; background: #3776ab; -webkit-transition: all .2s ease; transition: all .2s ease; } .nav-opener:before, .nav-opener:after { content: ""; top: 0; } .nav-opener:after { top: 27px; } .close-btn span, .nav-active .nav-opener span { opacity: 0; } .close-btn:after, .close-btn:before, .nav-active .nav-opener:after, .nav-active .nav-opener:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 14px; left: 0; right: 0; z-index: 5; background: #fff; } .close-btn:after, .nav-active .nav-opener:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .resize-active .nav-drop { -webkit-transition: none !important; transition: none !important; } /* news section */ .news-section { padding: 54px 0 80px; } .news-section .description { position: absolute; bottom: 17px; right: 16px; max-width: 465px; padding: 33px 39px 17px; background: #fff; } .news-section time { font-size: 14px; line-height: 16px; display: block; color: #657888; margin: 0 0 19px; } .news-section h1 { font-size: 22px; line-height: 28px; letter-spacing: .01em; font-weight: 600; margin: 0 0 19px; } .news-section .image-holder { margin: 0 0 38px; overflow: hidden; } .news-section img { vertical-align: top; width: 100%; -webkit-transition: -webkit-transform .2s linear; transition: transform .2s linear; } .news-section .text-holder { padding: 0 44px 49px; } .news-section .text-holder:only-child { padding: 20px; } .news-section p { margin: 0; } .js-masonry { margin: 0 -12px; overflow: hidden; } .js-masonry .grid-item { float: left; width: 33%; padding: 0 12px 24px; overflow: hidden; } .js-masonry .grid-item.large { width: 66%; } .js-masonry .item-holder { background: #fff; position: relative; } /* article list */ .articles-list .item-holder { padding: 36px 44px 31px; } .articles-list .title { margin: 0 0 33px; display: block; font-size: 17px; line-height: 19px; letter-spacing: .05em; font-weight: 600; text-transform: uppercase; position: relative; } .articles-list .title:before { content: "\1f328"; position: absolute; top: -2px; left: -44px; font-size: 23px; font-family: "icomoon" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #3776ab; } .articles-list .article { padding: 20px 0; border-top: 1px solid #e9e9e9; } .articles-list .article:first-child { border-top: 0; padding-top: 0; } .articles-list time { margin: 0 0 11px; } .articles-list h1 { font-size: 15px; line-height: 20px; letter-spacing: -.02em; margin: 0; } .articles-list h1 a:hover { text-decoration: underline; } /* subscribe section */ .subscribe-section { background: #3776ab; padding: 58px 0 43px; color: #fff; } .subscribe-section .text-holder { float: left; width: 51.7%; padding: 0 25px 0 0; } .subscribe-section h1 { color: #fff; margin: 0 0 27px; } .subscribe-section .form-holder { overflow: hidden; padding: 6px 0 0; } /* subscribe form */ .subscribe-form .form-row { margin: 0 0 13px; } /* events section */ .events-section { padding: 89px 0 85px; background: #fff; } .events-section .title-holder { margin: 0 0 44px; } .events-section .title-holder:before { background: #3776ab; } .events-section h1 { margin: 0; font-weight: 600; letter-spacing: normal; } .events-section .image-holder { float: left; width: 42.3%; padding: 0 25px 0 0; } .events-section img { vertical-align: top; } .events-section .events-holder { overflow: hidden; padding: 5px 0 0; } /* events list */ .events-list li { border-top: 1px solid #e9e9e9; padding: 15px 0; font-size: 0; line-height: 0; letter-spacing: -4px; } .events-list li:first-child { border-top: 0; padding-top: 0; } .events-list time, .events-list .event-holder { display: inline-block; vertical-align: middle; letter-spacing: normal; width: 29%; } .events-list .event-holder { width: 71%; font-size: 22px; line-height: 24px; font-weight: 600; } .events-list .number-holder, .events-list .text-holder { display: inline-block; vertical-align: middle; font-size: 36px; line-height: 38px; font-weight: 600; color: #3776ab; width: 26%; } .events-list .number-holder { text-align: right; padding: 0 12px 0 0; } .events-list .text-holder { font-size: 15px; line-height: 16px; width: 40%; } /* about us section */ .about-us-section { padding: 118px 0 102px; } .about-us-section .about-us { float: left; width: 42.5%; padding: 46px 70px 0 0; line-height: 23px; } .about-us-section .about-us p { margin: 0 0 23px; } .about-us-section h1 { font-weight: 600; margin: 0 0 38px; letter-spacing: -.01em; } .about-us-section .btn-holder { padding: 19px 0 0; text-align: left; } .about-us-section .btn-default { min-width: 212px; } /* project holder */ .project { overflow: hidden; padding: 15px 0 0; } .project .project-holder { background: #fff; padding: 0 46px 35px; } .project .title { display: inline-block; vertical-align: top; background: #3776ab; position: relative; margin: -15px 0 25px -1px; padding: 12px 21px 10px 25px; } .project .title:before { content: ""; position: absolute; right: 100%; top: 0; width: 0; height: 0; border-left: 12px solid transparent; border-right: 0 solid transparent; border-bottom: 15px solid #204b6f; } .project h1 { margin: 0; font-size: 13px; line-height: 15px; text-transform: uppercase; font-weight: 400; color: #fff; letter-spacing: .06em; } /* project list */ .project-list li { padding: 21px 0; border-top: 1px solid #e9e9e9; font-size: 0; line-height: 0; letter-spacing: -4px; } .project-list li:first-child { border-top: 0; padding-top: 0; } .project-list .image-holder, .project-list .text-holder { display: inline-block; vertical-align: middle; letter-spacing: normal; font-size: 15px; line-height: 22px; } .project-list .image-holder { width: 26.5%; padding: 0 25px 0 0; } .project-list .image-holder > a { display: block; -webkit-transition: opacity .2s linear; transition: opacity .2s linear; } .project-list .image-holder > a:hover { opacity: .8; } .project-list img { vertical-align: top; } .project-list .text-holder { width: 73%; } .project-list .text-holder > p { margin: 0; } /* info section */ .info-section { padding: 0 0 77px; background: #fff; } .info-section .title { margin: -15px 0 47px; padding: 12px 24px 10px; background: #ffd54a; display: inline-block; vertical-align: top; position: relative; } .info-section .title:before { content: ""; position: absolute; right: 100%; top: 0; width: 0; height: 0; border-left: 12px solid transparent; border-right: 0 solid transparent; border-bottom: 15px solid #d2b145; } .info-section h1 { font-size: 13px; line-height: 15px; margin: 0; text-transform: uppercase; letter-spacing: .05em; } .info-section .columns-holder { overflow: hidden; margin: 0 -15px; font-size: 0; line-height: 0; letter-spacing: -4px; } .info-section .column { display: inline-block; vertical-align: top; width: 33.33%; padding: 0 15px; letter-spacing: normal; } .info-section h2 { font-size: 22px; line-height: 24px; font-weight: 600; margin: 0 0 30px; letter-spacing: .01em; } .info-section ul { font-size: 14px; line-height: 16px; letter-spacing: .02em; } .info-section ul li { margin: 0 0 16px; } .info-section ul a { text-decoration: underline; padding: 0 0 0 9px; display: inline-block; vertical-align: top; position: relative; } .info-section ul a:before { content: ""; position: absolute; top: 7px; left: 0; width: 2px; height: 2px; background: #333; -webkit-transition: background .2s linear; transition: background .2s linear; } .info-section ul a:hover:before { background: #3176ab; } /* form section */ .form-section { padding: 68px 0 76px; background: #3776ab; } .form-section h1 { color: #fff; font-weight: 600; margin: 0; letter-spacing: normal; } /* contact form */ .contact-form .form-row { margin: 0 0 25px; } .contact-form .form-row.textarea-row { margin: 0 0 33px; } .contact-form .form-column { width: 50%; padding: 0 14px 0 0; float: left; } .contact-form .form-column + .form-column { padding: 0 0 0 14px; } .contact-form .submit-holder { margin: 0 auto; } /* footer */ .footer { padding: 42px 0; background: #333; color: #fff; font-size: 14px; line-height: 16px; text-align: center; } .footer a { color: currentColor; position: relative; } .footer a:hover { color: #3776ab; } .footer a[href^="mailto"] { float: left; text-align: left; padding: 0 0 0 27px; } .footer a[href^="mailto"]:before { content: "\e900"; font-family: "icomoon" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 0; left: 1px; font-size: 17px; } .footer .social-networks { float: none; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; margin: -2px 0 0; } .footer .social-networks li { float: none; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 0 14px; } .footer .social-networks a { color: rgba(255, 255, 255, .6); } .footer .social-networks a:hover { color: #3176ab; } /* copyright */ .copyright { float: right; margin: 0; text-align: left; } @media (max-width: 1023px) { h1 { font-size: 34px; line-height: 36px; } .nav-active .w1 { margin: 0 300px 0 -300px; } .nav-active .w1:before { opacity: 1; visibility: visible; } .btn-holder { padding: 10px 0 0; } .title-holder { margin: 0 0 20px; padding: 0 0 20px; } .social-networks { margin: 6px 0 0; } .social-networks li { margin: 0 0 0 20px; } .header { padding: 20px 0; min-height: 70px; } .nav-active .header { z-index: auto; } .logo { margin: 2px 0 0; } .main-nav { float: right; margin: 0 0 0 20px; } .main-nav .nav-drop { position: fixed; top: 0; right: -300px; bottom: 0; width: 300px; -webkit-transition: right .2s linear; transition: right .2s linear; z-index: 150; padding: 70px 25px; background: #fff; } .nav-active .main-nav .nav-drop { right: 0; } .primary-menu { display: block; font-size: 22px; line-height: 24px; } .primary-menu li { margin: 0 0 15px; } .primary-menu li:before { display: none; } .primary-menu a:hover, .primary-menu a:focus { color: #3776ab; } .nav-opener { display: block; } .news-section { padding: 35px 0; } .news-section .description { max-width: 450px; bottom: 15px; right: 15px; padding: 20px 25px 5px; } .news-section time { margin: 0 0 15px; } .news-section h1 { margin: 0 0 15px; font-size: 20px; line-height: 26px; } .news-section .image-holder { margin: 0 0 25px; } .news-section .text-holder { padding: 0 20px 25px; } .js-masonry { margin: 0 -10px; } .js-masonry .grid-item { padding: 0 10px 20px; } .articles-list .item-holder { padding: 25px 20px; } .articles-list .title { margin: 0 0 25px; } .articles-list .title:before { top: 3px; left: -21px; font-size: 14px; } .articles-list .article { padding: 15px 0; } .articles-list time { margin: 0 0 10px; } .subscribe-section { padding: 35px 0; } .subscribe-section .text-holder { width: 50%; padding: 0 20px 0 0; } .subscribe-section h1 { margin: 0 0 25px; } .subscribe-form .form-row { margin: 0 0 20px; } .events-section { padding: 35px 0; } .events-section .title-holder { margin: 0 0 20px; } .events-section .image-holder { width: 40%; padding: 0 15px 0 0; } .events-section img { display: block; margin: 0 auto; } .events-section .events-holder { padding: 0; } .events-list li { padding: 10px 0; } .events-list .event-holder { font-size: 18px; line-height: 20px; } .events-list .number-holder, .events-list .text-holder { font-size: 30px; line-height: 32px; width: 40%; } .events-list .number-holder { padding: 0 10px 0 0; } .events-list .text-holder { font-size: 12px; line-height: 13px; width: 45%; } .about-us-section { padding: 35px 0 50px; } .about-us-section .about-us { width: 45%; padding: 20px 20px 0 0; } .about-us-section .about-us p { margin: 0 0 15px; } .project .project-holder { padding: 0 20px 25px; } .project-list li { padding: 15px 0; } .project-list .image-holder, .project-list .text-holder { font-size: 14px; line-height: 18px; } .project-list .image-holder { width: 26%; padding: 0 15px 0 0; } .info-section { padding: 0 0 20px; } .info-section .title { margin: -15px 0 30px; } .info-section ul li { margin: 0 0 15px; } .form-section { padding: 35px 0; } .contact-form .form-row { margin: 0 0 20px; } .contact-form .form-row.textarea-row { margin: 0 0 25px; } .contact-form .form-column { padding: 0 10px 0 0; } .contact-form .form-column + .form-column { padding: 0 0 0 10px; } .footer { padding: 30px 0; } .footer .social-networks li { margin: 0 12px; } .footer .social-networks a:before { font-size: 18px; } } @media (max-width: 767px) { body { font-size: 13px; line-height: 16px; } .submit-holder { margin: 0 auto; } .nav-active .w1 { margin: 0 200px 0 -200px; } .btn-holder { padding: 0; } .btn-default { min-width: 200px; } .main-nav .nav-drop { right: -200px; width: 200px; } .news-section { padding: 25px 0; } .news-section .description { max-width: none; position: static; padding: 15px 20px 5px; } .news-section time { margin: 0 0 10px; } .news-section h1 { font-size: 14px; line-height: 18px; margin: 0 0 10px; } .news-section .image-holder { margin: 0 0 15px; } .news-section .text-holder { padding: 0 20px 15px; } .js-masonry { margin: 0 -5px; } .js-masonry .grid-item { width: 49%; padding: 0 5px 10px; } .js-masonry .grid-item.large { width: 49%; } .articles-list .item-holder { padding: 15px 20px 5px; } .articles-list .title { margin: 0 0 15px; } .articles-list .article { padding: 10px 0; } .articles-list h1 { font-size: 14px; line-height: 18px; } .subscribe-section { padding: 25px 0; } .subscribe-section .text-holder { width: 100%; float: none; padding: 0 0 10px; } .subscribe-section .form-holder { padding: 0; overflow: visible; } .events-section { padding: 25px 0; } .events-section .image-holder { width: 100%; float: none; padding: 0 0 20px; } .events-section .events-holder { overflow: visible; max-width: 480px; margin: 0 auto; } .about-us-section { padding: 25px 0 35px; } .about-us-section .about-us { width: 100%; float: none; padding: 0 0 20px; } .about-us-section .btn-default { min-width: 200px; } .project { overflow: visible; } .info-section { padding: 0 0 5px; } .info-section .columns-holder { margin: 0; overflow: visible; } .info-section .column { padding: 0 0 15px; width: 100%; display: block; } .info-section h2 { margin: 0 0 20px; } .form-section { padding: 25px 0; } .contact-form .form-column { float: none; width: 100%; padding: 0 0 20px; } .contact-form .form-column + .form-column { padding: 0; } .footer { padding: 25px 0; } .footer a[href^="mailto"] { float: none; display: inline-block; vertical-align: top; margin: 0 0 15px; } .footer .social-networks { display: block; margin: 0 0 15px; font-size: 0; line-height: 0; letter-spacing: -4px; text-align: center; } .footer .social-networks li { display: inline-block; vertical-align: top; letter-spacing: normal; margin: 0; padding: 0 8px; } .copyright { float: none; text-align: center; } } @media (max-width: 479px) { h1 { font-size: 25px; line-height: 27px; } p { margin: 0 0 10px; } .social-networks { display: none; } .js-masonry { margin: 0; overflow: visible; } .js-masonry .grid-item { width: 100%; padding: 0 0 15px; } .js-masonry .grid-item.large { width: 100%; } .subscribe-section .text-holder { padding: 0 0 5px; } .subscribe-section h1 { margin: 0 0 15px; } .events-list { text-align: center; } .events-list time, .events-list .event-holder { width: 100%; display: block; } .events-list time { margin: 0 0 10px; } .events-list .event-holder { width: 100%; font-size: 15px; line-height: 17px; } .events-list .number-holder, .events-list .text-holder { width: 20%; } .events-list .text-holder { text-align: left; } .project-list .image-holder, .project-list .text-holder { display: block; } .project-list .image-holder { width: 100%; padding: 0 0 10px; } .project-list img { display: block; margin: 0 auto; } .project-list .text-holder { width: 100%; } .info-section .title { margin: -15px 0 20px; } .info-section .column { padding: 0 0 10px; } .info-section h2 { margin: 0 0 15px; } .info-section ul li { margin: 0 0 10px; } .contact-form .form-row { margin: 0 0 15px; } .contact-form .form-row.textarea-row { margin: 0 0 20px; } } .junior h1 { margin-top: 30px; font-weight: bold; text-align:center; } .junior-about h2 { margin-bottom: 5px; margin-top: 30px; } .junior-about { display: table-cell; width: 49%; } .junior-program { margin-top: 30px; } .junior-program .talk { display: block; margin-top: 25px; } .junior-program .author { line-height: 1.2; font-size: 12px; } .junior-program .work { line-height: 1.2; font-size: 12px; text-decoration: underline; } .junior-program .speaker-image { display: table-cell; vertical-align: top; width: 90px; padding-right: 10px; } .junior-program .speaker-image img { width: 80px; height: 80px; } .junior-program .details { display: table-cell; vertical-align: top; } .junior-program .details h4 { margin-bottom: 5px; } .junior .junior-register-wrapper .submit-holder { margin: 60px 60px 0 40px; max-width: inherit; } .junior .junior-register-wrapper .submit-holder button { font-size: 20px; } .junior .submit-holder:hover { border: 1px solid #ffd343; } .junior .submit-holder:hover button { color: #ffd343; } .talk:last-child { margin-bottom: 50px; } .talk_info { margin-top: 10px; height: 400px; } .slides_wrapper { width: 60%; display: inline-block; } .video_wrapper { width: 39%; display: inline-block; } .talk_info .slides_wrapper { height: 100%; } .talk_info .video_wrapper { height: 60%; } .slides_wrapper iframe, .video_wrapper iframe { width: 100%; height: 100%; } @media (max-width: 780px) { .junior-about { display: block; width: 100%; } .junior-program { display: block; width: 100%; } .junior .junior-register-wrapper .submit-holder { margin: 40px 60px 60px 40px; } .slides_wrapper { display: block; width: 100%; } .video_wrapper { display: block; width: 100%; } .talk_info { height: inherit; } } #top-banner { background-position: center center; background-repeat: no-repeat; background-size: contain; width: 100%; height: 10vw; } #top-banner a { display: block; width: 100%; height: 100% } #top-banner.conf { background-image: url("../images/conf.banner.2017.jpg") }