/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */

/*
 * Custom Style Sheet - Use this file to style your content
 */
/*GLOBAL STATS, focused on individual pages*/
@font-face {
  font-family: 'calendas';
  src: url(../../../../assets/font/webfontkit-cuhk/calendas_plus_italic-webfont.eot),
        url(../../../../assets/font/webfontkit-cuhk/calendas_plus_italic-webfont.svg),
        url(../../../../assets/font/webfontkit-cuhk/calendas_plus_italic-webfont.ttf),
        url(../../../../assets/font/webfontkit-cuhk/calendas_plus_italic-webfont.woff);
}

p {
font-style: normal;
font-weight: 400;
font-size: 17px;
line-height: 1.5;
font-family: 'proxima-nova';
}

h3 {
font-family: "brandon-grotesque",sans-serif;
font-style: normal;
font-size: 26px;
margin-bottom: 15px;
line-height: 1.5;
color: #E30B3C;
}

.content h3 {
color: #111;
color: #E30B3C;
}

h4 {
font-family: "brandon-grotesque",sans-serif;
font-style: normal;
font-size: 18px;
font-weight: bold;
line-height: 27px;
color: #111;
margin-bottom: -10px;
margin-top: 0;
}

a {
color:#444;
}

a:hover, 
.level1:hover a span,
.container:hover .discription a,
a.active,
li.active {
color: #E30B3C;
}

li {
font-family: 'proxima-nova';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 27px;
}

.wrapper {
width: 100%;
height: 100vh;
max-width: none;
}

html {
overflow-y: hidden;
}

time {
display: none;
}

#menubar {
display: none;
}

.wp-page #maininner {
width: 65%;
height:100vh;
background: #E3E1D4;
position:relative;
}

body {
background: #aaa;
background-size: contain;
background-position-x: 200px;
overflow-y: hidden;
}

#header {
background: #E30B3C;
height: 2px;
margin: 0;
position: absolute;
width: 100%;
z-index: 100;
}

#footer {
background: #666;
margin: 0;
height: 220px;
display:none;
}

.wp-page #content {
display: inline-block;
width: 60%;
margin:20px;
}

.wp-page #system {
overflow: hidden;
border-right: 1px solid #fff;
padding-right: 30px;
}

.wp-page .content.clearfix {
border-right: 1px solid #fff;
padding-right: 47px;
height: 77vh;
overflow-y: scroll;
width: 100%;
position:relative;
}
/*end global stats*/

/*menu*/ /*CAN BE DROPPED*/
.menu-sidebar span.icon {
width: 40px;
height: 40px;
background-position-y: -50px;
}

#sidebar-b {
width: 37px;
position: absolute;
right: 0;
background: #fff;
padding: 10px;
}

a.level1 { /*cannot drop*/
display: inline-block;
overflow: hidden;
height: 52px;
}

.menu-sidebar a.level1 > span,
.menu-sidebar span.level1 > span { /*cannot*/
padding: 5px 0;
line-height: 20px;
font-family: "brandon-grotesque",sans-serif;
font-style: normal;
font-weight: 200;
font-size: 22px;
}

/*ul.menu.menu-sidebar {
background: #fff;
width: 35px;
}*/

#sidebar-b .mod-box,
#sidebar-a .mod-box {
padding: 0;
margin: 0;
border:none;
}

#sidebar-a h3 {
color: #fff;
}

#sidebar-b .module .module-title {
margin: 0;
font-size: 14px;
font-style: italic;
}

.menu-sidebar li.level1 {
border-top: none;
margin-top: 10px;
}

.menu-sidebar li.level1:hover > a > span > span {
background-position-y: 0px;
}/*end*/

/*new absolute menu*/ /*CAN BE DROPPED*/
.menu-bar {
width: 60px;
height: 100vh;
background-color: #fff;
position: absolute;
right: 0;
}

.button { /*except this*/
list-style: none;
width: 40px;
height: 40px;
margin-bottom: 20px;
background-repeat: no-repeat;
background-position-y: -50px;
}

.menu-bar ul {
padding: 10px;
margin:0;
}

.menu-cont span { /*and this*/
display: block;
text-align: center;
font-family: 'calendas';
font-size: 16px;
}

.container:hover .link1 { /*and all of this*/
background-position-y: 6px !important;
}

.link1 {
background-image:url(../../../uploads/2014/04/sprite2.png);
background-position-y: -44px !important; 
}

.link2 {
background-image:url(../../../uploads/2014/04/sprite3.png);
}

.link3 {
background-image:url(../../../uploads/2014/04/sprite4.png);
}

.link4 {
background-image:url(../../../uploads/2014/04/sprite1.png);
}

.link5 {
background-image:url(../../../uploads/2014/04/sprite5.png);
}

.container:hover .button { /*and this*/
background-position-y: 0px;
}

/*menu slide-out*/
.parent {
  width:300px;
  height:auto;
  background-color:#ddd;
  position:absolute;
  top:0;
  right:50px;
  display:none;
}

.option {
width: 90%;
height: 40px;
background-color: #999;
margin: 20px 15px;
list-style: none;
}

li.option:nth-child(1) {
margin-top: 40px;
}

.sub {
width: 90%;
height: 25px;
background-color: #777;
margin: 5px 15px;
position: relative;
top: 45px;
visibility:hidden;
}

.option:nth-child(1):hover {
height:135px;
}

.option:nth-child(1):hover .sub {
visibility:visible;
}/*end*/

/*LATEST MENU*/
.menu-cont {
  width:60px;
  min-height: 100vh;
  height:100%;
  background-color:#fff;
  position:absolute;
  right:0;
}

.button {
  width:40px;
  height:40px;
  margin:5px;
  float:right;
}

.container {
  width:50px;
  height:50px;
  background-color:#fff;
  position: relative;
  right: 0px;
  transition:all 0.5s;
  overflow:hidden;
  padding-bottom: 20px;
  margin-left: 5px;
}

.container:hover {
  width:300px;
  right: 250px;
}

/*.container:nth-child(1):hover {
  width:175px;
}*/

.container:nth-child(2):hover {
  height:215px;
}

.container:nth-child(3):hover {
  height:160px;
}

.container:nth-child(4):hover {
  height:200px;
}

.container:nth-child(5):hover {
  height:215px;
}

.container:last-child {
height: 120px;
border-radius: 0 8px;
}

.cuhk-logo {
width: 142px;
height: 80px;
background-image: url(../../../../assets/images/cuhk-logo.png);
margin-left: 75px;
margin-top: 25px;
}

.menu-cont:hover .container{
  width:320px;
  right:270px;
}

.menu-cont:hover .discription {
  opacity:1;
}

.discription {
  width: 230px;
  height: 40px;
  margin: 5px 5px 5px 20px;
  opacity:0;
  text-align:right;
  line-height: 25px;
}

.discription a {
font-family: 'calendas';
color: #444;
font-size: 18px;
}

.container:hover .discription {
  opacity:1;
}

.container ul {
width: 215px;
list-style: none;
color: #444;
text-align: right;
padding-left: 0;
margin-left: 15px;
margin-top: 35px;
background-color: #E3E1D4;
border-radius: 8px;
padding: 0 20px 20px 20px;
}

.container ul:before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #E3E1D4 transparent;
position: relative;
top: -28px;
right: 35px;
}

.container ul li {
font-family: "brandon-grotesque",sans-serif;
font-style: italic;
font-weight: 400;
font-size: 15px;
line-height: 1.5;
}

.container:nth-child(1) {
height: 20px;
padding-top: 5px;
padding-bottom: 10px;
font-style: italic;
}

.container:nth-child(3) .discription a, 
.container:nth-child(5) .discription a  {
padding-top: 9px;
display: block;
}

.container:nth-child(4) .discription a {
display: block;
margin-top: -5px;
}

.container:nth-child(4) ul {
margin-top: 40px;
}

/*.container:nth-child(2):before {
content: '';
width: 20px;
height: 20px;
background: red;
position: absolute;
top: 0px;
}*/

/*end*/

/*sidebar-a*/

.wp-page #sidebar-a,
.page-id-142 #sidebar-a,
.page-id-144 #sidebar-a {
width: 35%;
position: absolute;
right: 0;
background-image: url(../../../../assets/images/resizedHK.jpg);
background-size: cover;
background-position-x: -130px;
color:#fff;
overflow-x: hidden;
overflow-y: scroll;
}

.sidebar-wrapper {
width: 450px;
/*margin: 0 auto;*/
}

.temp-text {
width: 450px;
margin: 235px auto 70px;
padding-right: 20px;
overflow: hidden;
position: relative;
/*height: 70vh;*/
}
.wp-page .logo {
width: 180px;
height: 200px;
background: #fff;
position: absolute;
top: 0;
left: 0;
background-image: url(../../../uploads/2014/04/cuhk-school-jc-logo1.png);
background-repeat: no-repeat;
background-position-x: 35px;
background-position-y: 50px;
z-index: 5;
}

.wp-page .two-things {
position: absolute;
top: 0;
left: 0;
}

/*HOME PAGE*/
.section-wrapper {
margin: 0 auto;
}

.section {
position:relative;
left:0;
min-height: 200px;
height:100%;
/*background: #fff;*/
border-top: 1px solid #fff;
padding: 20px 10px;
z-index: 1;
transition:all 0.5s;
margin-right: -5px;
z-index: 5;
}

.section:first-child {
border: none;
}

.test-class {
background-color:#fff;
left: 15px;
}

.test-class2 {
background-color: #E30B3C !important;
color: #fff !important;
background-position-y: 7px !important;
}

.section:hover {
background: #fff;
left: 15px;
}

.two:hover + .section, .one:hover + .section {
border-top:1px solid transparent;
}

.section:hover a.button {
border:1px solid #E30B3C;
}

.section:hover:after {
display: block;
}

.fake-triangle {
position: absolute;
top:0;
left: 100%;
width: 0px;
height: 0px;
border-style: solid;
border-width: 120px 0 120px 60px;
border-color: transparent transparent transparent #fff;
display:none;
}

.triangle-active {
  display:block;
}

.section:after {
content: '';
position: absolute;
top:0;
left: 100%;
width: 0px;
height: 0px;
border-style: solid;
border-width: 120px 0 120px 60px;
border-color: transparent transparent transparent #fff;
display:none;
-webkit-animation:grow 0.5s;
}

@-webkit-keyframes grow {
    from { border-width: 120px 0 120px 0px; }
    to   { border-width: 120px 0 120px 60px;}
}

.section p {
width: 50%;
display: inline-block;
margin:0;
font-family: "brandon-grotesque",sans-serif;
font-style: italic;
font-weight: 400;
font-size: 19px;
line-height: 27px;
}

.section h1 {
width: 40%;
float: right !important;
display: inline-block;
color: #E30B3C;
margin: 0;
text-align: right;
font-family: "brandon-grotesque",sans-serif;
font-style: normal;
font-weight: 200;
font-size: 42px;
line-height: 44px;
}

.two h1 {
display: inline-block;
float: none !important;
text-align: left;
}

.two p {
display: inline-block;
text-align: right;
float: right;
}
.two a.button {
float:right;
}

.section a.button,
.content a.button {
width: 150px;
height: 30px;
background-color: #fff;
display: block;
position: absolute;
margin: 15px 0 0 0;
text-align: left;
line-height: 28px;
padding-left: 10px;
color: #111;
font-family: "brandon-grotesque",sans-serif;
font-style: normal;
font-weight: 200;
font-size: 19px;
border:1px solid transparent;
background-image: url(../../../../assets/images/arrow-sprite.png);
background-position-y: -27px;
background-position-x: 135px;
background-repeat: no-repeat;
transition:background-color 0.5s, color 0.5s;
cursor:pointer;
}

.two .button-wrap a.button {
right: 10px;
position: absolute;
}

.three a.button {
margin-top: 60px;
}

.section a.button:hover,
.content a.button:hover {
background-color: #E30B3C;
color:#fff;
background-position-y: 7px;
text-decoration: none;
}

h1.title {
margin: 20px;
color: #E30B3C;
font-family: 'calendas';
width: 60%;
}

h1.title a:hover{
color: #E30B3C;
}

h1.title a:hover + span {
color: #444;
}

/*h1.title:before {
content:"Master of Arts \A in Global Communication / ";
white-space: pre;
color:#444;
}*/

/*.title span {
color: #E30B3C;
content:'asdasdasdas';
}*/

.wp-page .logo-wrapper {
width: 0;
margin: 0 auto;
}

.module .module-title {
margin: 0;
}

/*toggle appear slide*/
.first, .second, .third {
display: none;
opacity:0;
position: absolute;
/*left: 100%;*/
background: rgba(50,50,50,0.9);
width: 100%;
min-height: 100vh;
z-index: 2;
}

.third {
  opacity:0.5;
}

.more-overlay {
display: none;
position: absolute;
background: rgba(50,50,50,0.9);
width: 100%;
min-height: 100vh;
z-index: 2; 
}
/*end toggle code*/

/*HOME PAGE EXCEPTION*/ /*'cause there's only one home page hmm'kay?*/
.home #maininner {
width: 50%;
}

.home #sidebar-a {
width: 50%;
background-image: url(../../../../assets/images/resizedHK.jpg);
background-size: cover;
background-position-x: -100px;
}

.home .logo-wrapper {
width: 450px;
margin: 0 auto;
}

.home .logo {
left:inherit;
}

.home #content {
display: inherit;
width: initial;
}

.home .content.clearfix {
border-right: none;
padding-right:0;
overflow-y: inherit;
}

.home #system {
overflow: inherit;
border-right: none;
padding-right: 0;
}

.home h1.title {
width: 100%;
}

.home .content a:hover {
text-decoration: none;
}

.return-button {
  display:none;
  }
/*INDIVIDUAL PAGE ADVANCEMENTS*/

#innerbottom .grid-box.width50.grid-h {
position: absolute;
width: 100%;
}

#innerbottom .menu.menu-sidebar {
margin-top: 245px;
}

#innerbottom .mod-box {
margin: 0;
}

#innerbottom {
display: inline-block;
width: 34%;
position: absolute;
top: 0;
margin-left: 20px;
font-family: 'proxima-nova';
}

#innerbottom .mod-box {
padding: 0;
border: none;
}

#innertop {
position: relative;
bottom: 65px;
width: 100%;
background: #E3E1D4;
}

#innertop .mod-box {
padding: 0px;
border:none;
}

div.scroll {
width: 26px;
height: 25px;
background-image: url(../../../../assets/images/arrow-down.png);
margin: 0 auto;
background-position-y: -31px;
background-repeat:no-repeat;
}

div.new-scroll {
width: 26px;
height: 25px;
background-image: url(../../../../assets/images/arrow-up.png);
margin: 0 auto;
background-position-y: 0px;
background-repeat:no-repeat;
}

#innertop span {
margin: 0 auto;
display: block;
text-align: center;
width: 50px;
font-family: "brandon-grotesque",sans-serif;
font-style: italic;
font-size: 25px;
padding-bottom: 10px;
}

div.scroll-container {
position: fixed;
bottom: 0;
padding: 8px 0;
width: 50%;
background-color: rgba(0,0,0,0.8);
display:none;
}

#content:hover div.scroll, .temp-text:hover div.scroll  {
background-position-y: 0px;
transition: background-position-y 0.5s;
-webkit-transition: background-position-y 0.5s;
}

#content:hover div.new-scroll, .temp-text:hover div.new-scroll {
background-position-y: -31px;
transition: background-position-y 0.5s;
-webkit-transition: background-position-y 0.5s;
}

#content:hover #innertop span, div.scroll-container span {
color:#E30B3C;
transition: color 0.5s;
-webkit-transition: color 0.5s;
display: block;
text-align: center;
font-family: "brandon-grotesque",sans-serif;
font-style: italic;
font-size: 25px;
padding-bottom: 10px;
}

#sidebar-a div.scroll {
background-position-y: 1px;
}

#sidebar-a div.new-scroll {
background-position-y: -31px;
}

.pure-u-1-2.semester {
background-color: #fafafa;
margin-right: 10px;
padding: 10px;
width: 43%;
}

.semester h3, .semester p {
text-align: center;
}

.content a {
color: #E30B3C;
}

.content a:hover {
text-decoration: underline;
}

.flex {
width: 287px;
height: 224px;
/*background:#fafafa;
margin: 2px;*/
display: inline-flex;
position:relative;
}

.pure-g-r [class *="pure-u"] { /*TEMP*/
font-family: 'proxima-nova';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 27px;
}

.advisory {
border-bottom: 1px solid #fff;
padding: 25px 25px 25px 0;
height: auto;
}

.pure-u-2-3.advisory {
width: 55%;
}

.nobrdr {
border-bottom:none;
}

.pure-u-1-2.alumni {
width: 46%;
margin-right: 20px;
}

.alumni p.details {
height: auto; /*175*/
/*border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding-bottom: 10px;
padding-top: 10px;*/
}

.alumni p.about {
}

.page-id-148 #innertop,
.page-id-177 #innertop,
.page-id-186 #innertop,
.page-id-188 #innertop {
  display:none;
}

iframe {
width: 100%;
}

#sidebar-a iframe {
width: 100%;
height: 100vh;
}

.discription span {
display:none;
}

.rectangle {
width: 350px;
height: 155px;
background-color: #fff;
position: fixed;
bottom: 0;
margin-bottom: 50px;
border-top: 2px solid #E30B3C;
}

.photo {
width: 100px;
height: 100px;
background-image: url(../../../../assets/images/kasia-small.jpg);
background-position-x: -12px;
background-position-y: -6px;
border-radius: 50%;
display: inline-block;
margin: 20px;
margin-bottom: 0;
}

.testimonial {
width:200px;
display: inline-block;
position: absolute;
}

.testimonial p {
color: #444;
font-size: 14px;
line-height: 1.5;
text-align: right;
margin-right: 4px;
margin-bottom: 0;
}

.student-name p {
color: #444;
text-align: right;
margin-right: 14px;
font-size: 13px;
font-weight: bold;
margin-top: 0;
}

#gallery-2 .gallery-item, #gallery-1 .gallery-item {
width: 40% !important;
}

.page-id-174 h4 {
margin-bottom: 10px;
/*margin-top: 30px;*/
}

h4.questions {
margin-top: 30px;
}

.semester h4 {
text-align: center;
}

.gform_wrapper {
margin: 245px 0 0 !important;
max-width: 85% !important;
}

.gform_wrapper .top_label input.medium {
padding-right: 2px;
height: 25px;
width: 97% !important;
margin-bottom: 10px;
border: none;
font-size: 16px;
padding-left: 10px;
}

.gform_wrapper .top_label textarea.textarea {
width: 97% !important;
border: none;
font-size: 16px;
padding-left: 10px;
}

input#gform_submit_button_1 {
width: 100px;
float: left;
margin: 0;
border: none;
background-color: #444;
color: #fff;
font-family: 'proxima-nova';
font-size: 16px;
}

input#gform_submit_button_1:hover {
background-color: #E30B3C;
}

p.details i {
font-size: 15px;
line-height: 1.5;
}

/*some enquiries adjustments*/

.emails {
position: absolute;
top: 210px;
}

.emails a {
color: #E30B3C;
}

.emails a:hover {
text-decoration: underline;
}

.emails a i.fa {
font-size: 28px;
margin-right: 10px;
color: #333;
}

.emails a i.fa:hover {
color: #E30B3C;
}

.page-id-192 #sidebar-a,
.page-id-344 #sidebar-a {
background: none;
}

/*NEW 'Our Teachers' layout*/
.append {
  display:none;
}

.temp-text a {
color: #E30B3C;
}

.temp-text a:hover {;
border-bottom: 1px solid;
}

.more-overlay .temp-text p {
font-size: 16px;
}

.more-overlay .temp-text {
width: 70%;
margin: 25px auto 70px;
padding-right: 30px;
padding-bottom: 50px;
position: relative;
height: 85vh;
overflow: hidden;
}

.teachers {
margin-bottom: 20px
}

.teachers .pure-u-1-2.imgs,
.part-time .pure-u-1-2 {
width: 100%;
max-width: 287px;
margin-right:20px;
position:relative;
}

.teachers .pure-u-1-2 {
width: 45%;
}

.wp-page .content a.button {
position:relative;
float: none;
}

.home .content a.button {
  position:absolute;
  }
}

.teachers .pure-u-1-2 p {
font-size: 14px;
}

.pure-g-r.part-time a.button {
position: absolute;
bottom: 50px;
left: 60px;
opacity:0;
}

.pure-g-r.part-time .pure-u-1-2:hover a.button {
opacity:1;}

.pure-g-r.part-time .pure-u-1-2 .flex:after {
content:"";
position:absolute;
top:0;
right: 0;
width:100%;
height: 100%;
background:rgba(50,50,50,0.9);
opacity:0;
transition:all 0.3s;
}

.pure-g-r.part-time .pure-u-1-2:hover .flex:after {
opacity:1;
}

.pure-u-1-2 i {
font-size:14px;
}

.pure-g-r.voices {
padding: 9px 0 0px;
border-bottom: 1px solid #fff;
}

/*dedicated images for pages*/
.wp-page.page-id-184 #sidebar-a,
.wp-page.page-id-186 #sidebar-a,
.wp-page.page-id-188 #sidebar-a,
.wp-page.page-id-190 #sidebar-a {
background-image: url(../../../../assets/images/admission.jpg);
background-position-x: -438px;
background-size: cover;
}

.wp-page.page-id-148 #sidebar-a {
background-image: url(../../../../assets/images/internships.jpg);
background-position-x: -195px;
background-size: cover;
}

.wp-page.page-id-150 #sidebar-a {
background-image: url(../../../../assets/images/seminar.jpg);
background-position-x: -462px;
background-size: cover;
}


.wp-page.page-id-174 #sidebar-a,
.wp-page.page-id-177 #sidebar-a {
background-image: url(../../../../assets/images/teachers.jpg);
background-position-x: 620px;
background-size: cover;
}

.wp-page.page-id-1223 #sidebar-a,
.wp-page.page-id-179 #sidebar-a,
.wp-page.page-id-181 #sidebar-a {
background-image: url(../../../../assets/images/alumnii.png);
background-position-x: -290px;
background-size: cover;
}

.third ul {
padding-left: 60px;
}

.motto {
font-family: "brandon-grotesque",sans-serif;
font-weight: 100;
font-size: 28px;
color: #333;
position: absolute;
margin-top: 30px;
margin-left: 200px;
width: 150px;
line-height: 1.1;
}

.larger a {
color: #E30B3C;
font-family: 'calendas';
font-size: 26px;
}

.larger a:hover {
border-bottom:1px solid;
}

.home .two-things {
position: absolute;
left: 15%;
}

img {
width:100%;
height:auto;
}

/*end*/

/*START MEDIA QUERIES*/
@media (max-height: 870px) {
  div.scroll-container {
  display:block;
  }
}

@media (max-height: 800px) {

  .section {
  min-height: 130px;
  height: 100%;
  }

  .section h1 {
  font-size: 34px;
  line-height: 40px;
  }

  .section p {
  font-size: 16px;
  line-height: 24px;
  }

  .section:after {
  border-width: 85px 0 85px 45px;
  -webkit-animation:grow-m 0.5s;
  }

  @-webkit-keyframes grow-m {
    from { border-width: 85px 0 85px 0px; }
    to   { border-width: 85px 0 85px 45px;}
  }

  @-webkit-keyframes grow-m-s {
    from { border-width: 70px 0 70px 0px; }
    to   { border-width: 70px 0 70px 35px;}
  }

  .fake-triangle {
  border-width: 85px 0 85px 45px;
  }

  .wp-page .content.clearfix {
  height: 75vh;
  }

  #innertop {
  bottom: 75px;
  }

  .wp-page #content {
  margin-top: 0;
  }

.page-id-148 #innertop,
.page-id-177 #innertop,
.page-id-186 #innertop,
.page-id-188 #innertop {
  display:block;
}
}

@media (max-height: 600px) {
  #innertop {
  bottom: 130px;
  }
}

@media (max-height: 479px) {
  div.scroll-container {
  display:none;
  }
}