body { font-family: $body-font; color: $body-copy-color; background: $tertiary; } //--------------------------- START OF CUSTOM STYLES ------------------------------------// .row{ max-width: 1152px; } body { font-family: $body-font; color: $body-copy-color; background: #ffffff; } p, span, li, a{ -webkit-font-smoothing:antialiased } ul{ padding: 0; margin: 0; } a{ color: $btn-blue; -webkit-transition:background 0.5s ease; -moz-transition:background 0.5s ease; -o-transition:background 0.5s ease; transition:background 0.5s ease; &:hover{ color: darken($btn-blue, 10%); } } ul li{ list-style: none; } header{ background: $primary; border-bottom: 2px solid $header-border; margin-bottom: 70px; position: fixed; width: 100%; left: 0; top: 0; z-index: 100; border-top: 0; @media #{$landscape}{ position: inherit; margin-bottom: 0; } @media #{$portrait}{ position: inherit; margin-bottom: 20px; } @media #{$mobile}{ position: inherit; } } #logo{ display: block; padding: 30px 0; // @media #{$landscape}{ // padding: 16px 0 15px; // } @media #{$mobile}{ text-align: center; } } .sticky { position: fixed; width: 100%; left: 0; top: 0; z-index: 100; border-top: 0; @media #{$mobile}{ position: inherit; } } nav ul{ padding: 0; margin: 0; float: right; li{ list-style: none; float: left; @media #{$mobile}{ width: 100%; } a{ font-family: $urbano-bold; color: $nav-text; text-transform: uppercase; font-size: 14px; padding: 35px 20px; display: block; -webkit-transition:background 0.5s ease; -moz-transition:background 0.5s ease; -o-transition:background 0.5s ease; transition:background 0.5s ease; &:hover{ color: $nav-text; } &:visited{ color: #fff; } // @media #{$landscape}{ // padding: 20px 20px; // } @media #{$mobile}{ width: 100%; } } } } nav ul{ li:nth-child(1) a{ background: $nav-1; &:hover{ background: darken($nav-1, 15%); color: $nav-text; } } li:nth-child(2) a{ background: $nav-2; &:hover{ background: darken($nav-2, 15%); color: $nav-text; } } li:nth-child(3) a{ background: $nav-3; &:hover{ background: darken($nav-3, 15%); color: $nav-text; } } li:nth-child(4) a{ background: $nav-4; &:hover{ background: darken($nav-4, 15%); color: $nav-text; } } li:nth-child(5) a{ background: $nav-5; &:hover{ background: darken($nav-5, 15%); color: $nav-text; } } } nav ul{ li.active #nav-link-1{ background: darken($nav-1, 15%); color: $nav-text; } li.active #nav-link-2{ background: darken($nav-2, 15%); color: $nav-text; } li.active #nav-link-3{ background: darken($nav-3, 15%); color: $nav-text; } li.active #nav-link-4{ background: darken($nav-4, 15%); color: $nav-text; } } .card{ position: relative; height: 235px; width: 184px; float: left; margin: 2px; } .group{ height: 239px; width: 564px; float: left; } .back, .front{ position: absolute; top: 0; left: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } .card .front{ cursor: pointer; } .card-wrapper{ padding-left: 10px; padding-right: 10px; padding-bottom: 0; padding-top: 50px; } .card .back{ background: $tertiary url(../images/bg-mag-back.jpg) no-repeat 0 0; width: 184px; height: 235px; border: 1px solid #dddddd; .close{ float: right; padding: 7px 7px 0 0; color: #dbdbdb; font-family: $urbano-bold; cursor: pointer; -webkit-transition:color 0.5s ease; -moz-transition:color 0.5s ease; -o-transition:color 0.5s ease; transition:color 0.5s ease; &:hover{ color: darken(#dbdbdb, 25%); } } ul{ padding: 15px 20px 14px; @media #{$ipad}{ padding: 18px 20px 8px; } li:first-child{ border-bottom: 2px solid #dbdbdb; } li:first-child a{ color: #78b2bf; font-size: 17px; &:hover{ color: darken(#78b2bf, 20%); } } li:first-child a span{ background: transparent url(../images/arrow-read-mag.png) no-repeat right 6px; width: 8px; height: 12px; float: right; padding: 10px 0; } li{ border-bottom: 2px dotted #c7c7c7; } li a{ color: $body-copy-color; padding: 3px 0; display: block; -webkit-transition:color 0.5s ease; -moz-transition:color 0.5s ease; -o-transition:color 0.5s ease; transition:color 0.5s ease; &:hover{ color: darken($body-copy-color, 50%); } } } } #section0{ position: relative; .card.columns{ padding: 2px; } .mag{ border: 1px solid #dddddd; width: 16.3%; float: left; margin-right: 5px; margin-bottom: 5px; background: $tertiary; padding: 10px; display: block; img{ -moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.7); box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.7); } } .last{ margin-right: 0; } } .content{ position: absolute; background: #fff; left: 50%; top: 50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); width: 772px; height: 530px; padding: 60px; box-shadow: 0 0 18px rgba(0, 0, 0, 0.9); -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9); -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9); @media #{$landscape}{ width: 80%; top: 50%; left: 50%; position: fixed; z-index: 1000; } @media #{$portrait}{ width: 80%; top: 50%; left: 50%; position: fixed; z-index: 1000; } } .card-popup-container{ position: relative; @media #{$mag}{ width: 564px; margin: 0 auto; } @media #{$landscape}{ position: inherit; } @media #{$portrait}{ position: inherit; } } #card-info{ margin: auto; position: fixed; z-index: 1000; top: 0; left:0; right:0; bottom: 0; width: 772px; height: 530px; background: #fff url(../images/spinner.gif) no-repeat center center; object { width: 100% !important; } } #close-card-info{ position: absolute; z-index: 1005; right: 1.5%; top: 10px; padding: 4px; background: #fff; font-size: 28px; color: $popup-close; font-family: $urbano-bold; -webkit-transition:color 0.5s ease; -moz-transition:color 0.5s ease; -o-transition:color 0.5s ease; transition:color 0.5s ease; &:hover{ color: darken($popup-close, 10%) } @media #{$landscape}{ right: -10px; z-index: 9000; } @media #{$portrait}{ right: 12.5%; z-index: 9000; } } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #ipad-scroll-wrapper { position: relative; //z-index: 1; top: 0; left: 0; width: 328px; height: 352px; overflow: hidden; @media #{$landscape}{ width: 349px; } @media #{$portrait}{ width: 246px; } } #scroller { position: absolute; z-index: 1; -webkit-tap-highlight-color: rgba(0,0,0,0); width: 100%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none; } .inner-popup{ .popup-left, .popup-right{ width: 50%; float: left; } h4{ font-size: 17px; font-family: $display-font; color: #78b2bf; text-transform: uppercase; margin: 25px 0 0 0; } h3{ font-size: 28px; font-family: $display-font; color: #78b2bf; text-transform: uppercase; border-bottom: 2px solid #dbdbdb; padding-bottom: 6px; } p{ text-transform: uppercase; font-family: $urbano-bold; font-size: 13px; display: block; margin: 0; } .issue{ color: #7b9094; } .cat{ color: #787679; } ul{ padding: 5px 0 0 0; margin: 0; // width: 343px; // height: 352px; // overflow: hidden; li{ border-bottom: 2px dotted #c7c7c7; } li a{ color: $body-copy-color; padding: 8px 0; font-family: $display-font; display: block; font-size: 15px; text-transform: uppercase; width: 100%; -webkit-transition:color 0.5s ease; -moz-transition:color 0.5s ease; -o-transition:color 0.5s ease; transition:color 0.5s ease; &:hover{ color: darken($body-copy-color, 20%); } } } } .section-footer{ padding: 45px 0; .logos{ float: right; } } .scroll-cta{ color: $scroll-cta; font-family: $body-font; font-weight: normal; font-size: 19px; text-transform: uppercase; padding: 17px 0; margin: 0; display: block; } #topics-footer.section-footer, #overview-footer.section-footer{ span{ float: left; } .btn-arrow{ float: left; margin-left: 30px; display: block; } } #section1{ background: $tertiary; @media #{$landscape}{ padding: 100px 0 50px; } @media #{$portrait}{ padding: 100px 0 50px; } h3, h2, p{ margin: 0; } h3{ font-size: 25px; color: $overview-body; margin-top: 65px; font-family: $body-font; @media #{$ipad}{ font-size: 20px; } } h2{ font-size: 78px; color: $nav-1; font-family: $urbano-condensed; @media #{$ipad}{ font-size: 72px; line-height: 79px; padding: 10px 0; } } p{ font-size: 20px; color: $overview-body; @media #{$ipad}{ font-size: 18px; } } .video{ margin-top:38px; } } // #video{ // position:relative; // // @media #{$landscape}{ // // margin-right: 20px; // // } // // @media #{$portrait}{ // // margin-right: 20px; // // } // } // #video iframe { // position:absolute; // top:0; // left:0; // width:100%; // height:100%; // } //#kaltura_player_1406786223{ OLD #kaltura_player_1410135862{ width: 480px; height: 300px; @media #{$landscape}{ max-width: 380px; height: 238px; } @media #{$portrait}{ max-width: 300px; height: 188px; } } //Faces of PreVET #kaltura_player_1424058700{ width: 1024px; height: 626px; @media #{$landscape}{ max-width: 1024px; height: 626px; } @media #{$portrait}{ max-width: 768px; height: 188px; } } .big-prevet{ height: 146px; background-size: 576px 146px; } #overview .big-prevet{ background: url(../images/prevet-blue.png) no-repeat 0 0; background-size: 576px 146px; @media #{$ipad}{ background-size: 439px 111px; } } #section2{ background: $bg-teacher-guide url(../images/bg-teacher.jpg) no-repeat center 75px; @media #{$landscape}{ background: $bg-teacher-guide url(../images/bg-teacher-landscape.jpg) no-repeat 0 -125px; padding: 81px 0 70px; } @media #{$portrait}{ background: $bg-teacher-guide url(../images/bg-teacher-portrait.jpg) no-repeat right -35px; padding: 100px 0 58px; } p{ font-size: 20px; color: #fff; } strong{ color: $strong; font-weight: normal; } .boy img{ position: absolute; top: -5px; } .teacher-text{ padding: 0; margin-top: 70px; } .big-button{ width: 78%; } } #section3{ background: $tertiary; @media #{$portrait}{ padding: 100px 0; } @media #{$ipad}{ padding: 100px 0; } p{ margin-bottom: 40px; } } .big-button{ display: block; font-family: $display-font; text-transform: uppercase; color: $tertiary; font-size: 21px; padding: 18px 20px; margin-bottom: 17px; &:hover{ color: $tertiary; } @media #{$ipad}{ font-size: 17px; padding: 18px 20px 15px; } } .btn-green{ background: $nav-1 url(../images/arrow-right-2.png) no-repeat 97% center; -webkit-transition:background 0.5s ease; -moz-transition:background 0.5s ease; -o-transition:background 0.5s ease; transition:background 0.5s ease; @media #{$ipad}{ background-size: 38px; } &:hover{ background: darken($nav-1, 10%) url(../images/arrow-right-2.png) no-repeat 97% center; @media #{$ipad}{ background-size: 38px; } } &:visited{ color: #fff; } } .btn-blue{ background: $btn-blue url(../images/arrow-right-2.png) no-repeat 97% center; -webkit-transition:background 0.5s ease; -moz-transition:background 0.5s ease; -o-transition:background 0.5s ease; transition:background 0.5s ease; @media #{$ipad}{ background-size: 38px; } &:hover{ background: darken($btn-blue, 10%) url(../images/arrow-right-2.png) no-repeat 97% center; @media #{$ipad}{ background-size: 38px; } } &:visited{ color: #fff; } } .baby-footer{ text-transform: uppercase; color: $terms; font-size: 14px; display: block; font-family: $urbano-bold; &:hover{ color: darken($terms, 10%); } } .contact-us{ text-align: left; a{ text-transform: none; } } .terms{ text-align: right; } #acknowledgements{ margin-top: 100px; padding: 50px 0; @media #{$landscape}{ margin-top: 0; } @media #{$portrait}{ margin-top: 0; } h1{ color: $nav-1; font-size: 60px; font-family: $urbano-condensed; } ul{ margin-bottom: 15px; } } #copyright{ margin-top: 100px; padding: 50px 0; @media #{$landscape}{ margin-top: 0; } @media #{$portrait}{ margin-top: 0; } h1{ color: $nav-1; font-size: 60px; font-family: $urbano-condensed; } h3{ font-size: 30px; color: $nav-2; font-family: $urbano-condensed; margin-bottom: 20px; } img{ margin-bottom: 20px; } ul{ margin-bottom: 15px; padding-left: 20px; ul p{ margin-bottom: 5px; } } } .home body { overflow:hidden; } #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: $tertiary; z-index: 100000; } #spinner_container { width:50px; margin:250px auto; } #spinner { display:block; margin:20px auto; } .welcome-video-top { margin-top: -41px; h3.how-to-title { margin: 0 0 15px; text-transform: uppercase; font-weight: bold; color: #0c8d9c; font-size: 26px; line-height: 26px; float: left; } label { display: block; float: right; padding-top: 4px; @media #{$portrait}{ float: left; padding-top: 0; padding-bottom: 4px; } } }