/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ body { font-size: 100%; } h1 { font-size: 4em; /* 16 x 4 = 64 */ margin: 0; } h2 { font-size: 2.5em; /* 16 x 2.5 = 40 */ margin: 0; } h3 { font-size: 1.5em; /* 16 x 1.5 = 24 */ margin: 0; } p { font-size: 1em; /* 16 x 1 = 16 */ margin: 0; } html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } i{ cursor: default; } /* 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/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 when focused and also mouse hovered in all browsers. */ a:active, a:hover, a:link, a:visited, a:focus{ color: inherit; outline: 0; text-decoration: none; } /* 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. */ /** * 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: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; pointer-events: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; image-rendering: -webkit-optimize-contrast; } /** * 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 { -moz-box-sizing: content-box; 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"], /* 1 */ 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 * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * 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: 0.35em 0.625em 0.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; } .bckgr,body{height:100vh;overflow:hidden}.bckgr,.message,body{overflow:hidden}.bckgr,.bg-noises{-webkit-box-pack:center}.bg-noises,.bg-stars{background-repeat:repeat}.anty-shake-sound,.constellation{-moz-user-select:none;-ms-user-select:none}.header,.moon-header{-webkit-box-orient:vertical;-webkit-box-direction:normal}.c-pages,.contact-name,.contact-page,.head-text,.projects-page,.scroll{text-align:center}.header,.moon-header,nav{-webkit-box-direction:normal}.button-send,.error,.mail-box,.social div{box-sizing:border-box}@font-face{font-family:Montserrat;font-style:normal;font-weight:400;src:local('Montserrat-Regular'),url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYC3USBnSvpkopQaUR-2r7iU.ttf) format('truetype')}@font-face{font-family:Montserrat;font-style:normal;font-weight:700;src:local('Montserrat-Bold'),url(https://fonts.gstatic.com/s/montserrat/v7/IQHow_FEYlDC4Gzy_m8fcvEr6Hm6RMS0v1dtXsGir4g.ttf) format('truetype')}@-webkit-keyframes spin-right{0%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin-right{0%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spin-left{0%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@keyframes spin-left{0%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@-webkit-keyframes slide{from{background-position:left 100vh}to{background-position:left -100vh}}@-webkit-keyframes scroll{0%,100%,65%,75%,85%{-webkit-transform:translateY(0);transform:translateY(0)}70%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}80%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@keyframes scroll{0%,100%,65%,75%,85%{-webkit-transform:translateY(0);transform:translateY(0)}70%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}80%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}body{background-color:#141314;font-family:Montserrat,sans-serif;color:#fff;width:100%;max-width:100%;max-height:100%}.black-back,.message,.nav-element{font-family:"Courier New",sans-serif}.contact-text,.head-text{font-size:67px;letter-spacing:.06em;color:#f4f4f4;text-transform:uppercase}.bckgr{width:100vw;position:fixed;top:0;z-index:-100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bg-noises,.constellation{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.bg-noises{background-image:url(https://doc-0k-3s-docs.googleusercontent.com/docs/securesc/f6krsfqc5tle5p864llj6n1rvlj654vm/0t6vnp0rdobueappmoqedio4vo2rg67c/1475078400000/17692255444530408406/17692255444530408406/0B1pZXHCP75vbV2dzWWNRYm1mcFk?e=view);opacity:.5;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bg-stars{background-image:url(https://doc-0c-3s-docs.googleusercontent.com/docs/securesc/f6krsfqc5tle5p864llj6n1rvlj654vm/lpbuve7p3uip71nvnnvm9ch7462ka333/1475078400000/17692255444530408406/17692255444530408406/0B1pZXHCP75vbN2NadFp5Vmdwd0U?e=view);background-position:center;background-size:cover;opacity:.2;filter:drop-shadow(0 0 100px #1c1b1c);-webkit-filter:drop-shadow(0 0 100px #1c1b1c)}.stars-paralax{-webkit-animation:spin-left 150s linear infinite;-webkit-user-select:none;opacity:.15;width:90vw;height:90vw;max-width:1500px;max-height:1500px;border-radius:50%;filter:drop-shadow(0 0 100px #1c1b1c);-webkit-filter:drop-shadow(0 0 500px #1c1b1c)}.constellation{display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;opacity:.08;width:70vw;max-width:900px;min-width:500px;height:auto;z-index:-50;-webkit-animation:spin-right 1000s linear infinite;-webkit-user-select:none;user-select:none}.constellation img{width:100%;height:auto}.container{position:relative;margin:auto;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:100vw;height:100vh}.header{margin:auto;width:100%;height:100%;max-width:1500px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:absolute;left:0;right:0;z-index:-1}.contact-page,.moon-header{-webkit-flex-direction:column}.anty-shake-sound,.sound{right:65px;position:absolute;-webkit-user-select:none;cursor:pointer;float:right}.anty-shake-sound{bottom:42px;user-select:none;opacity:.8}.moon-header,.sound{-moz-user-select:none;-ms-user-select:none}.sound{bottom:43px;user-select:none;opacity:.5}.head-text,.moon-header{-webkit-user-select:none}.anty-shake-sound div,.sound div{width:4px;height:10px;max-height:24px;background-color:#4d4d4d;display:inline-block;-webkit-transition:background .5s;transition:background .5s}.anty-shake-sound div{background-color:#1a1919}.sound:hover div{background-color:#8b8b8b;-webkit-transition:background .8s;transition:background .8s}.moon-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin:0 auto;user-select:none;position:relative}.head-text,.nav-circle{-moz-user-select:none;-ms-user-select:none}.moon-big{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;height:auto}.moooon{max-width:450px;opacity:.95;filter:drop-shadow(0 0 10px rgba(0, 0, 0, .08));-webkit-filter:drop-shadow(0 0 10px rgba(0,0,0,.08));-webkit-animation:spin-right 24000s linear infinite;position:relative;width:41vw}.transp-big-1,.transp-big-2{max-width:460px;opacity:.06;width:42vw}.transp-big-1{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation:spin-right 180s linear infinite}.transp-big-2{-webkit-transform:rotate(-150deg);transform:rotate(-150deg);-webkit-animation:spin-left 180s linear infinite}.moon-small{max-width:429px;height:auto;opacity:.2;width:40vw}.transp-1{-webkit-transform:rotate(-260deg);transform:rotate(-260deg);-webkit-animation:spin-right 110s linear infinite}.transp-2{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-animation:spin-left 110s linear infinite}.head-text{font-size:6vw;opacity:.91;font-weight:400;margin:50px 0 0;user-select:none;cursor:default}.nav-circle,.nav-element{-webkit-user-select:none;cursor:pointer}.nav-circle{position:absolute;float:right;user-select:none;right:65px;top:42px;display:none}.contact-page,nav{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.circle-icon{width:17px;height:17px;border:6px solid #f4f4f4;border-radius:50%;opacity:.7;-webkit-transition:opacity .2s;transition:opacity .2s}.circle-icon:hover{opacity:.8;-webkit-transition:opacity .3s;transition:opacity .3s}.nav-container{position:absolute;bottom:42px;left:55px;width:15px;z-index:1000}.hidden{left:-20px}nav{display:flex;-webkit-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.nav-element{-moz-user-select:none;-ms-user-select:none;user-select:none;text-transform:uppercase;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);//For IE support margin:0;margin-left:33px;font-size:16px;letter-spacing:.13em;opacity:.7;font-weight:500}h3.contact{margin-left:0}img.contact{margin-left:16px}.text-3d{opacity:0;height:12px;width:auto;margin-left:35px}.nav3d .active{opacity:.7}.nav-normal .nav-element:hover{opacity:.75}.nav-normal .active,.nav-normal .active:hover{opacity:0}.moooon.away{width:110px}.constellation.away,.moon-small.away,.transp-big-1.away,.transp-big-2.away{width:100px}.head-text.away{opacity:0;font-size:30px}.header.away{height:50%;opacity:.5}.c-pages,.contact-page{margin:auto;position:absolute;width:100%;height:100%;max-width:1500px;-webkit-box-orient:vertical;-webkit-box-direction:normal;left:0;-ms-user-select:none;right:0}.contact-page{opacity:0;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;z-index:-1;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex}.c-pages,.mail-box{-webkit-flex-direction:column}.c-pages,.project,.projects-page{-moz-user-select:none}.c-pages{-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;z-index:10;-webkit-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.project,.projects-page{-webkit-user-select:none;-ms-user-select:none}.contact-first{top:0}.contact-second{top:100%}.contact-text{opacity:.91;font-weight:400;margin:0 0 70px}.contact-name{opacity:.2;font-weight:400;letter-spacing:.33em;margin:0 0 10px;display:inline-block;font-size:2em}.mail-address{display:block;font-weight:400;letter-spacing:.1em;font-size:2.5em}.mail-underline{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin:0 auto;display:inline-block;padding:0 0 5px;border-bottom:3px solid #c4c4c4;cursor:pointer}.mail-box,.projects-page{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;-webkit-box-orient:vertical;-webkit-box-direction:normal}.mail-underline:hover{border-bottom:3px solid #fff}.scroll{font-size:35px}.contact-page.cont{opacity:1;margin-top:0}.mail-box{background-color:#101010;width:80%;max-width:700px;margin:auto;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:50px 0}.mail-box form{width:100%}.mail-input{background-color:transparent;border:none;outline:0;display:block;width:80%;margin:auto}.email-inp,.name{height:40px;padding:auto;font-weight:700;font-size:27px}.email-inp{margin:5px auto}.message{resize:none;font-size:24px;overflow-y:scroll}.mail-input::-webkit-input-placeholder{font-size:30px;font-weight:800;color:#fff;font-family:Montserrat,sans-serif}::-webkit-scrollbar{width:5px;background:0 0}::-webkit-scrollbar-thumb{background-color:#fff}.button-send{border:2px solid #fff;background:0 0;color:#fff;font-size:19px;padding:.5em 2.8em;outline:0;position:relative;z-index:1;overflow:hidden;margin-top:20px}.button--isi::before{content:'';z-index:-1;position:absolute;top:50%;left:100%;margin:-15px 0 0 1px;width:50px;height:30px;border-radius:40%;background:#fff;-webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transform:scale3d(1,2,1);transform:scale3d(1,2,1);-webkit-transition:-webkit-transform .3s,opacity .3s;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:transform .3s,opacity .3s;transition:transform .3s,opacity .3s,-webkit-transform .3s;-webkit-transition-timing-function:cubic-bezier(.7,0,.9,1);transition-timing-function:cubic-bezier(.7,0,.9,1)}.button--isi>span{vertical-align:middle;-webkit-transition:.4s color;transition:.4s color}.button--isi:hover::before{-webkit-transform:scale3d(9,9,1);transform:scale3d(9,9,1)}.button--isi:hover span{-webkit-transition:.4s color;transition:.4s color;color:#000}.error{border-left:3px solid #b51717;-webkit-transition:border-left .1s;transition:border-left .1s}.projects-page{opacity:0;margin:auto;width:100%;height:100%;max-width:1500px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:absolute;left:0;right:0;z-index:-1;cursor:default;user-select:none;display:flex}.black-date,.project-inner{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.projects-page.proj{opacity:1;margin-top:0}.project{z-index:10;user-select:none}.project-inner{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;display:flex}.black-back,.black-back img,.white-front img{display:inline-block;height:auto}.white-front{background-color:#fff;padding:40px;height:auto;width:auto;position:relative;margin:0 60px 45px 0;cursor:pointer;z-index:2;-webkit-transition:2s margin;transition:2s margin}.white-front img{width:60vw;max-width:750px}.back{left:0;right:0;position:absolute}.black-back{position:relative;background-color:#090909;padding:2% 0 0 1%;width:auto;z-index:1;margin:3% 0 0 6%;cursor:pointer}.copyright,.modal-nav,.scroll{position:absolute}.black-back img{width:53vw;max-width:635px;margin-bottom:9%;opacity:0}.black-date{width:9%;word-wrap:break-word;float:right;opacity:.7;font-weight:100;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.black-date h4{font-size:17px;margin:auto;line-height:1.2em}.black-down{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;float:right;margin-right:10%;width:100%}.black-down h3{white-space:nowrap;display:inline-block;font-weight:100;font-size:20px;line-height:2.7em}.strange-line{width:20%;margin-right:10px;height:1px;background-color:#fff;display:inline-block}.up{margin-top:-100%}.down{margin-top:100%}.white-front:hover{margin:0;-webkit-transition:2s margin;transition:2s margin}.copyright{font-weight:400;opacity:.1;font-size:11px;bottom:5px;right:50px;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:-2}.modal-nav{background-color:rgba(0,0,0,.7);z-index:10000;width:100vw;height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.modal-elem{margin:9vh 0;font-size:10vw;font-weight:400;color:#fff;font-family:Montserrat,sans-serif;opacity:.8}.modal-elem:hover{opacity:1;-webkit-transition:.5s;transition:.5s}.modal-elem.active{border-bottom:5px solid #fff} .social{ margin-top: 100px; left: 0; right: 0; } .social div{ opacity: .3; display: inline-block; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; padding: 11px; transition: opacity .2s; font-size: 14px; } .social div:hover{ opacity: .5; transition: opacity .4s; } .be{ width: 47px; height: 47px; } .icon-behance{ width: auto; height: 18px; margin: auto; } .scroll{ opacity: .1; position: absolute; width: auto; height: 21px; left: 0; right: 0; bottom: 50px; margin: auto; text-align: center; -webkit-animation: scroll 6s linear 3s infinite; cursor: pointer; } @media all and (min-width: 1200px) and (max-width: 1450px){ .black-back img{ margin-bottom: 10%; } } @media all and (min-width: 1100px){ .head-text{ font-size: 67px; } } @media all and (max-width: 1100px){ .black-down h3{ line-height: 3em; } .white-front{ padding: 35px; margin: 0 40px 45px 0; } } @media all and (max-width: 1000px){ .head-text{ font-size: 60px; } } @media all and (max-width: 780px){ .nav-container{ left: -100%; } .nav-circle{ display: block; } .white-front{ margin: 0 40px 45px 0; } .black-back{ margin: 4% 0 0 5%; } } @media all and (max-width: 700px){ .mail-box{ width: 95%; } .black-back img { margin-bottom: 11%; } } @media all and (max-width: 600px){ .contact-name{ font-size: 5vw; } .mail-address{ font-size: 6.4vw; } .contact-text { margin-bottom: 40px; } .contact-text { margin-bottom: 30px; font-size: 11vw; } } @media all and (max-width: 500px){ .white-front { margin: auto; padding: 17px 0px 15px 0; background-color: #090909; } .white-front img { width: 100%; } .white-front:hover{ margin: auto; transition: 2s margin; } .black-back { margin: 20% 0 0 0%; width: 100%; } .black-date{ font-size: 0px; opacity: 0.01 !important; } .sound-container{ display: none; } } @media all and (min-width: 1100px) and (max-height: 620px){ .head-text{ margin: 2% 0 0 0; } } @media all and (max-height: 800px){ .social{ position: relative; margin-top: 8vh; } } @media all and (max-height: 575px){ .mail-box{ padding: 25px 0; } .scroll{ bottom: 20px; } } @media all and (max-height: 600px) and (min-width: 1100px){ .transp-big-2, .transp-big-1{ width: 75vh; } .moooon{ width: 74vh; } .moon-small{ width: 71vh; } } @media all and (max-height: 500px){ .nav-container{ left: -100%; } .nav-circle{ display: block; } .head-text{ margin: 1% 0 0 0; } } @media all and (max-height: 475px){ .mail-address{ font-size: 2.3em; } .mail-underline{ padding: 0px 0 3px 0; } .contact-text{ margin: 0 0 30px 0; font-size: 55px; } }

!