@font-face { font-family: Helvetica Neue; src: local("HelveticaNeue"), url('../fonts/HelveticaNeueLTStd-Lt.otf'); } body, html{ margin: 0; padding: 0; width: 100%; height: 100%; } body { /*-webkit-overflow-scrolling: touch;*/ /*overflow-y:scroll;*/ } .wrapper{ font-family: Helvetica Neue; height: 100%; letter-spacing: 3pt; width: 100%; font-size: 14pt; position: absolute; overflow-x: hidden; overflow-y: auto; /*-ms-overflow-x: hidden;*/ } body .wrapper iframe{ /*display: block;*/ position: absolute; -webkit-overflow-scrolling:touch; z-index: 99; overflow: auto; } .wrapper .left{ position: absolute; width: 100%; height: 100%; background-color: #f9f9f9; border-right: 1px solid black; margin-left: -50%; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); -webkit-transition: all 1000ms; -moz-transition: all 1000ms; transition: all 1000ms; text-align: right; z-index: 99; } .wrapper .left:hover{ background-color: #ffffff; -webkit-transition: all 1000ms; -moz-transition: all 1000ms; transition: all 1000ms; } .wrapper .right{ position: absolute; z-index: 99; width: 100%; height: 100%; margin-left: 49.9%; background-color: #f9f9f9; border-left: 1px solid black; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); -webkit-transition: all 1000ms; -moz-transition: all 1000ms; transition: all 1000ms; } .wrapper .contact_page{ position: absolute; z-index: 99; width: 100%; height: 100%; margin-left: 160%; background-color: #ffffff; border-left: 1px solid black; /*border-right: 1px solid black;*/ -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); -webkit-transition: all 1000ms; -moz-transition: all 1000ms; transition: all 1000ms; } .wrapper .right:hover{ background-color: #ffffff; -webkit-transition: all 1000ms; -moz-transition: all 1000ms; transition: all 1000ms; } .wrapper.open .left { margin-left: -120%; -webkit-transition: all 1000ms; -moz-transition: all 1000ms; transition: all 1000ms; } .wrapper.open .right { margin-left: 120%; -webkit-transition: all 1000ms; -moz-transition: all 1000ms; transition: all 1000ms; } /*.wrapper.open .contact_page { margin-left: -1050%; transition: all 1000ms; }*/ .wrapper.slide_left .left { margin-left: -180%; -webkit-transition: all 1000ms; -moz-transition: all 1000ms; transition: all 1000ms; } .wrapper.slide_left .right { margin-left: -80%; -webkit-transition: all 1000ms; -moz-transition: all 1000ms; transition: all 1000ms; } .wrapper.slide_left .contact_page { margin-left: 20%; -webkit-transition: all 1000ms; -moz-transition: all 1000ms; transition: all 1000ms; font-size: 14pt; } .wrapper .left .text_left{ -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); transform: skew(20deg); } .wrapper .left .text_left .artwork{ cursor: pointer; float: right; letter-spacing: 2pt; margin-right: 18%; margin-top: 12%; } .wrapper .right .text_right{ -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); transform: skew(20deg); } .wrapper .contact_page .text_contact{ -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); transform: skew(20deg); } .wrapper .right .text_right .courses{ cursor: pointer; float: left; letter-spacing: 2pt; margin-left: -2%; margin-top: 33%; } .wrapper .left .text_left .judy{ float: right; font-size: 24pt; margin-right: -13.6%; margin-top: 23% } .wrapper .right .text_right .radul{ float: left; font-size: 24pt; margin-left: -8%; margin-top: 23%; } #artwork, #courses{ position: relative; z-index: 2; /*overflow: hidden*/ } .wrapper .right .text_right .contact{ cursor: pointer; float: left; font-size: 12pt; margin-left: -70px; margin-top: 38%; letter-spacing: 2pt; } .wrapper .right .text_right .contact{ cursor: pointer; float: left; font-size: 12pt; margin-left: -70px; margin-top: 38%; letter-spacing: 2pt; } .wrapper .contact_page .text_contact .home_page{ cursor: pointer; float: left; font-size: 12pt; margin-left: 40px; margin-top: 60px; letter-spacing: 1pt; } .wrapper .contact_page .text_contact .home_page img{ vertical-align: middle; padding-bottom: 3px; } .wrapper .right .text_right .press{ cursor: pointer; float: left; font-size: 12pt; margin-left: -143px; margin-top: 40%; letter-spacing: 2pt; } .wrapper .contact_page .text_contact .contact_block{ float: left; font-size: 14pt; letter-spacing: 0; line-height: 2; margin-left: 150px; margin-top: 13%; } .wrapper .contact_page .text_contact .contact_block .title{ margin-bottom: 0px; letter-spacing: 2pt; } .wrapper .contact_page .text_contact .contact_block a{ color: #000000; text-decoration: none; } .wrapper .contact_page .text_contact.press_page .contact_block{ float: left; font-size: 14pt; letter-spacing: 0; line-height: 1; margin-left: 150px; margin-top: 13%; } .wrapper .contact_page .text_contact.press_page .contact_block .title{ margin-bottom: 25px; letter-spacing: 2pt; } .wrapper .contact_page .text_contact.press_page .contact_block .visible_mobile{ display: none; } .wrapper .contact_page .text_contact.press_page .contact_block .visible{ display: block; }