@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');

#pageTitle h1, 
#pageTitleNoIcon h1, 
#pageTitle .sys_schoolHeader, 
#pageTitle .sys_dummy, 
#pageTitleNoIcon .sys_dummy, 
#pageTitleNoIcon .sys_schoolHeader,
#pageTitle .sys_siteTitle a{
     color: #18194f;
     font-size: 38px;
     font-weight: normal;
}

#pageTools, #pageToolsTab{display:none;}

.sys_fullWidth #content {width: 100%; padding: 0;}

/* 
#content ol{margin-top: 1em; padding: 0;}


#content ol li{margin-left: 0; list-style: none; counter-reset: item; counter-increment: step-counter;}
#content ol > li:before{background: #007CA7; color: #fff; margin-right: 6px; content: counter(step-counter); width: 1.2em; text-align: center; display: inline-block;}

#content ol li{margin: 0 0 8px 0; list-style: none; counter-reset: item; counter-increment: step-counter;}
#content ol > li:before{font-size: 1.3em; background: #efefef; color: #18194f; margin-right: 10px; content: counter(step-counter); width: 1.4em; padding: 8px 4px; text-align: center; display: inline-block;}

*/


.LargeBannerWithTextOver {display:block; position:relative; margin-bottom: 2em;background-size: 100%; height: 300px;}
.LargeBannerWithTextOver .TextOverlay{position:absolute; left: 0; top: 0; bottom: 0; z-index: 100; padding: 2em; color: #fff; width: 40%;}
.LargeBannerWithTextOver .TextOverlay .BannerTitle{font-size: 4rem; line-height: 3.8rem; font-weight:bold; margin-bottom: .4em;}
.LargeBannerWithTextOver .TextOverlay .BannerText{font-size: 1.6rem; line-height: 1.8rem; font-weight:bold;}



#content .fancyWelcomeList ol{display:block;margin-top: 1em; padding: 0 0 1px 0; background: #efefef; color: #18194f; }
#content .fancyWelcomeList ol li{list-style-position: outside; margin: 0 0 0 68px; padding: 10px; background: #fff; margin-bottom: 2px;}

#content .fancyWelcomeList ol li:last-child{margin: 0 0 1px 68px;}

#content .fancyWelcomeList ol li:before{content:"Step"; width: 68px; position:absolute; left: 6px; }

#content .fancyWelcomeList ol li a{color: #005597; font-weight:bold;}



#WelcomeTopLinksIntro{position:relative; height: 240px; margin-bottom: 1em;}
#WelcomeTopLinksIntro .sys_studentIntro .sys_inner,
#WelcomeTopLinksIntro .sys_topPicks .sys_inner{padding: 16px; width: auto;}

#WelcomeTopLinksIntro .sys_topPicks .sys_inner{padding-left: 30%;}

#WelcomeTopLinksIntro .sys_studentIntro{#4a4949; padding: 0;position:absolute; width: 40%; bottom: 0; top: 0;}
#WelcomeTopLinksIntro .sys_image{z-index: 100; position:absolute; left:24%; bottom: -10px; top: -10px;}
#WelcomeTopLinksIntro .sys_topPicks{padding: 0; background: #007CA7; position:absolute; width: auto; left:46%;bottom: 0; top: 0;}

#WelcomeTopLinksIntro .sys_studentIntro .sys_name{width: 54%;color: #1A296B; font-size: 2.2em; line-height: 1.1em; margin-bottom: 1em; font-weight:bold;  font-family: 'Shadows Into Light', cursive; letter-spacing: 3px; }
#WelcomeTopLinksIntro .sys_studentIntro .sys_introText{font-weight: 500; width: 70%; margin-bottom: 1em; color: #18194f;}
#WelcomeTopLinksIntro .sys_studentIntro .sys_accent{width: 70%; font-size: 1.5em;}

#WelcomeTopLinksIntro .sys_image img{height: 100%; width: auto;}
#WelcomeTopLinksIntro .sys_studentIntro *{color: #18194f;}
#WelcomeTopLinksIntro .sys_topPicks *{color: #fff;}
#WelcomeTopLinksIntro .sys_topPicks *{color: #fff;}


#wrapper #content .sys_accent{color: #007CA7; font-family: 'Shadows Into Light', cursive; letter-spacing: 3px; font-size: 1.5em; line-height: 1.3em; font-weight:bold;}

#WelcomeTopLinksIntro .sys_topPicks .sys_jumplink a{
  background-image: url("/siteelements/images/base/internal/cta-icons/colour/bg-icon-blue2-right-arrow.png");
  font-weight:bold; 
  display:inline-block; 
  text-decoration:none; 
  height: auto; 
  clear:both;
  background-color: #fff;
  color: #007CA7; 
  text-align:left; 
  padding: 6px 30px 6px 6px; 
  background-size: 18px auto; 
  background-position: right 0 top 50%; 
  background-repeat:no-repeat; 
  margin-bottom: 4px;
  margin-top: 1em;
  border: 2px solid transparent;}

#content #WelcomeTopLinksIntro .sys_topPicks .sys_jumplink a:hover{background-color: transparent; border-color: #fff; color: #fff; text-decoration:none; background-image: url("/siteelements/images/base/internal/cta-icons/white/bg-icon-white-right-arrow.png");}




#content .sys_CTA-ImageAndTextBlock h2.CTA-StudentStatus{font-size: 1.6rem; padding-left: ; margin-bottom: 10px;}

#content .sys_CTA-ImageAndTextBlock.daniel h2.CTA-StudentStatus{color: #18194f;}
#content .sys_CTA-ImageAndTextBlock.natalie h2.CTA-StudentStatus{color: #1a296b;}
#content .sys_CTA-ImageAndTextBlock.yulia h2.CTA-StudentStatus{color: #007ca7;}


#content .sys_CTA-ImageAndTextBlock.daniel .sys_CTA-name{color: #1A296B;}
#content .sys_CTA-ImageAndTextBlock.natalie .sys_CTA-name{color: #fff;}
#content .sys_CTA-ImageAndTextBlock.yulia .sys_CTA-name{color: #fff;}



#content .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay {min-height: 200px;}

#content .sys_CTA-ImageAndTextBlock.daniel .sys_CTA-textOverlay{background-color: #e6e6e6; color: #18194F;}
#content .sys_CTA-ImageAndTextBlock.natalie .sys_CTA-textOverlay{background-color: #1a296b; color: #fff;}
#content .sys_CTA-ImageAndTextBlock.yulia .sys_CTA-textOverlay{background-color: #007ca7; color: #fff;}


#content .sys_CTA-ImageAndTextBlock .sys_CTA-name {padding-left: 0; margin-bottom: .3em; color: #007CA7; font-family: 'Shadows Into Light', cursive; letter-spacing: 3px; font-size: 1.8em; line-height: 1em;font-weight:bold;}
#content .sys_CTA-ImageAndTextBlock .sys_image {width: 50%; }
#content .sys_CTA-ImageAndTextBlock .sys_image img{width: 100%; height: auto;}

#content .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay{}
#content .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay,
#wrapper #content .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay:hover{padding: 12px; position:relative; background-size: 48%; background-position: 115% 100%; background-repeat: no-repeat;}



#content .sys_three .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay,
#wrapper #content .sys_three .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay:hover{background-size: 70%; background-position: 140% 100%; background-repeat: no-repeat;}
#content .sys_three .sys_CTA-ImageAndTextBlock .sys_text{width: 40%;}


#content .sys_CTA-ImageAndTextBlock .sys_text{min-height: 90px; margin-bottom: 1em; width: 70%;}


#content .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay .CTA-Arrow{position:absolute; bottom: 0; left: 12px; bottom: 8px;}


#content .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay .CTA-Arrow{  
  background-image: url("/siteelements/images/base/internal/cta-icons/white/bg-icon-white-right-arrow.png");
  font-weight:bold; 
  display:inline-block; 
  text-decoration:none; 
  height: auto; 
  clear:both;
  background-color: #DE1B5C;
  color: #fff; 
  text-align:left; 
  padding: 10px 36px 10px 8px; 
  background-size: 18px auto; 
  background-position: right 4px top 50%; 
  background-repeat:no-repeat; 
  margin-bottom: 4px;
  border: 2px solid transparent;

}

#content .sys_CTA-ImageAndTextBlock:hover .sys_CTA-textOverlay{background-size: 48%; background-position: 115% 100%;}
#content .sys_CTA-ImageAndTextBlock:hover .sys_CTA-textOverlay .CTA-Arrow{border-color: #fff; color: #fff; background-color: #18194f;}






#wrapper #content .UoNFreshers-Twitter{text-decoration:none; padding: 12px; border: 2px solid transparent; display:block;background: #4a4949 url("/siteelements/images/icons/icon-twitter-white.png") no-repeat right 10px top 50%; color: #fff;}
#wrapper #content .UoNFreshers-Twitter span{display:block; font-size: 2.5em;}
#wrapper #content .UoNFreshers-Twitter:hover{text-decoration:none;background-color: transparent; border-color: #4a4949; background-image: url("/siteelements/images/icons/icon-twitter-blue.png");}

#wrapper #content .UoNFreshers-Instagram{text-decoration:none; padding: 12px; border: 2px solid transparent; display:block;background: #4a4949 url("/siteelements/images/icons/icon-instagram-white.png") no-repeat right 10px top 50%; color: #fff;}
#wrapper #content .UoNFreshers-Instagram span{display:block; font-size: 2.5em;}
#wrapper #content .UoNFreshers-Instagram:hover{text-decoration:none;background-color: transparent; border-color: #4a4949; background-image: url("/siteelements/images/icons/icon-instagram.png");}






#content #thevideo {width: 100%; height: 300px; position: absolute; top: 0; left: 0; z-index:1; }
#content .sys_video-thumbnail {display:block; width: 466px; height: 300px; z-index:2; position: absolute; top: 0; left: 0; background-size: cover; background-position: 50%;}
#content .sys_video {width: 466px; height: 300px; position: relative; margin-bottom: 1em;}
#content .sys_video .sys_inner {padding: 12px; width: auto;bottom: 0; position:absolute; top: 0; left: 0; right: 0;}
#content .sys_video-play {z-index: 100;position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
#content .sys_video-play:hover {cursor: pointer;}
#content .sys_video-text{position:absolute; top: 0; bottom: auto; left: 0;}
#content .sys_video-text .sys_video-title{color: #fff; font-size: 1.4em; line-height: 1.2em;}
#content .sys_video:hover .sys_video-button{background-size: 100%; border-color: #18194f; background-color: transparent; background-image: url("/ugstudy/clearing/2017/images/decorative/bg-playbutton.png"); }
#content .sys_video-button {border: 2px solid transparent; background: #18194f url("/ugstudy/clearing/2017/images/decorative/bg-playbutton-white.png") no-repeat; position: absolute; right: 0; bottom: 0; top: 0; left: 0; margin: auto auto; width: 70px; height: 70px; background-size: 100%;}







#welcomeSearchBox{float:left; width: 100%; margin-bottom: 2em; display:block; background: #007ca7;}
#welcomeSearchBox .sys_inner{padding: 12px;}
#welcomeSearchBox .welcome-search-row{}
#welcomeSearchBox .welcome-search-row label{display:none;}
#welcomeSearchBox .welcome-options-row{display:block;}
#welcomeSearchBox .welcome-options-row label{display:inline-block; color: #fff; font-weight:bold;}


#welcomeSearchBox .welcome-search-row input{display:inline-block; width: 70%; padding: 20px 1.25%; margin: 0 0 1% 0;border-color: #fff; color: #18194f;font-weight:bold; }
#welcomeSearchBox .welcome-options-row label{display:block; color: #fff; font-weight:bold; margin: 0 0 1% 0;}
#welcomeSearchBox .welcome-options-row select{display:block; border-color: #fff; font-weight:bold; width:; padding: 4px 1.25%; margin: 0 0 3% 0; width: 97%;}

#welcomeSearchBox .welcome-search-row input#itemSearchSubmit{background-image:none; width: 26%; padding: 19px 0; margin: 0 0 1% -4px;  background-color: #18194f; background-image: none; border: 2px solid transparent; color: #ffffff; cursor: pointer; font-weight: bold; text-align: center;}
#welcomeSearchBox .welcome-search-row input#itemSearchSubmit:hover{background-color: #000; border-color: #000; background-image:none;}


#welcomeSearchResults .sys_subitem{margin-bottom: 1em; }

#welcomeSearchResults .sys_subitem,
#welcomeSearchResults .sys_subitem.compulsory{position:relative; }
#welcomeSearchResults .sys_subitem.compulsory{border-color: #37a158;}

#wrapper #welcomeSearchResults .sys_subitem:hover,
#wrapper #welcomeSearchResults .sys_subitem.compulsory:hover{}


#welcomeSearchResults .sys_subitem-heading {font-weight:bold; padding-right: 50px;}

#welcomeSearchResults .compulsory .sys_subitem-heading {border-color: #37a158;}


#welcomeSearchResults .sys_subitem .searchDetails{padding: 6px;}
#wrapper #content #welcomeSearchResults .sys_subitem .entryDescription a{display:inline;text-decoration:underline; padding: 0!important; margin: 0;}
#wrapper #content #welcomeSearchResults .sys_subitem .entryDescription a:hover{color: #000; text-decoration:none; background: none; padding: 0;}






  
/* 2020 styles - ulzgw 30/06/2020 */
#content .tabs {background: #efefef; display:block; border-bottom: 1px solid #ccc;}  
#content .tabs li {list-style-type:none; display:inline-block; margin: 0;}
#content .tabs li a{display:block; padding: 16px;}




#content .inductionListing ul{ -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;padding: 0; width: 100%;}
#content .inductionListing li{width: 100%; display:inline-block; margin: 0 6px 6px 0;list-style-type:none;}
#content .inductionListing li a{background: url("/siteelements/images/base/internal/cta-icons/Colour/bg-icon-blue5-right-arrow.png") no-repeat right 10px top 50%; background-size: 18px; display:block; padding: 12px 8px; border-bottom: 1px solid #ccc; text-decoration:none; margin: 0; list-style-type:none;}
#content .inductionListing li a:hover,
#content .inductionListing li a:active,
#content .inductionListing li a:focus{text-decoration:none!important; background-color: #f6f6f6; border-color: #18194f;}

#content .welcomeStep{border: 1px solid #efefef; padding-left: 60px; position:relative; margin-bottom: 2em;}
#content .welcomeStepNumber{position:absolute; background: #007CA7; color: #fff; top: 0; left: 0; width: 18px; padding: 18px; text-align:center; font-family:arvo;}
#content .welcomeStepTitle{padding: 12px 12px 0 12px; font-size: 1.2em;}
#content .welcomeStepInfo{padding: 6px 12px 12px 12px;}
#content .welcomeStepInfo .CTA-Arrow{margin-top: 1.5em;}

#content .studentShowcase{min-height: 300px; position:relative;}  
#content .studentTitle{width: 47%; font-size: 1.2em;}  
#content .studentInfo{width: 47%; font-size: 1.2em; line-height: 1.2em;}  
#content .studentImage{position:absolute; right: 0; top: 0; bottom: 0; width: 50%;}  
#content .studentImage img{width: 400px; height: 300px; object-fit: cover;}


#content .welcomeVideo #thevideo {width: 100%; height: 330px;}
#content .welcomeVideo .sys_video-thumbnail {width: 100%; height: 330px;}
#content .welcomeVideo .sys_video {width: 100%; height: 330px;}
#content .welcomeVideo .sys_video-text{background: #18194f; bottom: 0; top: auto; left: 0; right: 0;} 
#content .welcomeVideo .sys_video-text .sys_inner{position:relative;}

#content .sys_socialNetworkingIcons img{padding: 0 4px 4px 0;}

#content .welcomeImageBanner{position:relative;}
#content .welcomeImageBanner img{width: 100%; height: auto;}

#content .welcomeImageCaption{padding: 12px; font-size: 1.4em; line-height: 1.2em; position:absolute; left: 0; right: 0; background: #18194f; bottom: 0; top: auto; color: #fff;}





@media only screen and (max-width: 967px) {
#wrapper .sys_fullWidth #content {width: 100%!important; padding: 0;}

#welcomeSearchBox .welcome-search-row input#itemSearchSubmit{width: 22.5%;}
  
#welcomeSearchBox .welcome-options-row select{width: 90%;}

  
  #content .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay{min-height: 260px;}
#content .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay,
#wrapper #content .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay:hover{padding: 12px; background-size: 60%; background-position: 105% 100%; }
#wrapper #content .sys_CTA-ImageAndTextBlock:hover .sys_CTA-textOverlay{background-size: 60%; background-position: 105% 100%;}
#wrapper #content .sys_CTA-ImageAndTextBlock .sys_text{min-height: 90px; width: 100%;}
#content .sys_CTA-ImageAndTextBlock.yulia .sys_CTA-name{width: 100%;}

#content .sys_three .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay, 
#wrapper #content .sys_three .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay:hover{background-size: 90%; background-position: 200% 100%;}



  
.LargeBannerWithTextOver {height: 228px;}
.LargeBannerWithTextOver .TextOverlay{padding: 1.5em; width: 40%;}
.LargeBannerWithTextOver .TextOverlay .BannerTitle{font-size: 2.8rem; line-height: 2.8rem; margin-bottom: .3em;}
.LargeBannerWithTextOver .TextOverlay .BannerText{font-size: 1.2rem; line-height: 1.4rem;}
  
  
  
#content .welcomeVideo #thevideo {height: 452px;}
#content .welcomeVideo .sys_video-thumbnail {height: 452px;}
#content .welcomeVideo .sys_video {height: 452px;}

 
  
  
  
  
  
  
}

@media screen and (max-width: 767px) {

.LargeBannerWithTextOver {height: 280px; position:relative;background-size: cover; background-position: 100% 50%;}
.LargeBannerWithTextOver .TextOverlay{background: transparent url("/siteelements/images/base/internal/bg-textoverlay-blue5.png") repeat; position:absolute; left: 0; top: auto; right: auto;bottom: 0; width: auto; padding: 12px;}
.LargeBannerWithTextOver .TextOverlay .BannerTitle{font-size: 2rem; line-height: 2rem;}
.LargeBannerWithTextOver .TextOverlay .BannerText{font-size: 1.2rem; line-height: 1.4rem;}

  
  
#welcomeSearchResults .sys_subitem:before{position:relative; display:block; width: auto; padding: 4px;}  
  
  
#welcomeSearchBox .welcome-search-row input#itemSearchSubmit{width: 27%;}
 
#welcomeSearchBox .welcome-options-row select{width: 100%;}

#wrapper #content .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay{min-height: 200px;}
#wrapper #content .sys_CTA-ImageAndTextBlock .sys_image{display:none;}
#wrapper #content .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay{position:relative; display:block; padding: 12px;}
#wrapper #content .sys_CTA-ImageAndTextBlock .sys_text{min-height: 90px; width: 60%;}

#content .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay, 
#wrapper #content .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay:hover{background-size: 45%; background-position: 110% 100%;}

  
#wrapper #content .sys_three .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay{min-height: 210px;}
#content .sys_three .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay, 
#wrapper #content .sys_three .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay:hover{background-size: 60%; background-position: 130% 100%;}

  #wrapper #content .sys_three .sys_CTA-ImageAndTextBlock .sys_text{min-height: 90px; width: 40%;}

  
  
  
#wrapper #content #WelcomeTopLinksIntro{height: auto;}
#wrapper #content #WelcomeTopLinksIntro .sys_studentIntro .sys_name{font-size: 2.5em; line-height: 1.1em;}

#wrapper #content #WelcomeTopLinksIntro .sys_studentIntro{display:inline-block;position:relative; width: 60%!important; margin: 0!important;}
#wrapper #content #WelcomeTopLinksIntro .sys_image{display:inline-block; position:relative; left: 0; bottom: -14px; top: auto; }
#wrapper #content #WelcomeTopLinksIntro .sys_image img{height: 180px;width: auto; position:absolute; right: -20px; bottom: 0;}

#wrapper #content #WelcomeTopLinksIntro .sys_topPicks{z-index: 200;position:relative; padding: 12px!important; width: auto; left: auto; margin: 0!important;}
  
#WelcomeTopLinksIntro .sys_studentIntro .sys_introText,
#WelcomeTopLinksIntro .sys_studentIntro .sys_accent{width: 100%;}
  
#wrapper #content #WelcomeTopLinksIntro .sys_studentIntro .sys_inner ,
#wrapper #content #WelcomeTopLinksIntro .sys_topPicks .sys_inner{padding: 12px!important;}

#wrapper #content #WelcomeTopLinksIntro .sys_topPicks .sys_list{width: 100%;}
  
  
  

#content  #thevideo {width: 100%; height: 264px;}
#content .sys_video {width: 404px; height: 264px;}
#content .sys_video-thumbnail{width: 404px; height: 264px;}
  
  
  
  
  
  
  
  
#content .inductionListing ul{height: auto; -webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}
#content .inductionListing li{display:block; margin: 0 0 6px 0;}
#content .studentShowcase{height: auto;}  
#content .studentTitle{width: 100%;}  
#content .studentInfo{width: 100%;}  
#content .studentImage{position:relative; width: 100%; }  
#content .studentImage img{width: auto; height: auto; object-fit: unset;}

  
#content .welcomeVideo #thevideo {height: 266px;}
#content .welcomeVideo .sys_video-thumbnail {height: 266px;}
#content .welcomeVideo .sys_video {height: 266px;}
 

#content ul#navLinks {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: auto;
}

/* Navbar links */
#content #navLinks li {
    float: left;
}

#content #navbar a {
    margin: 36px 0;
}

#content #navbar a:not(.button--outline--blue-four) {
    display: inline-block;
    text-align: center;
    padding: 14px;
    border-bottom: 2px solid transparent;
}

#content #navbar a:not(.button--outline--blue-four):hover,
#content #navbar a:not(.button--outline--blue-four):active,
#content #navbar a:not(.button--outline--blue-four):focus{border-color: rgb(26, 41, 107);}
  
  
  
  
  

}



@media only screen and (min-width: 768px) and (max-width: 967px) {
  

  
}



@media only screen and (max-width: 479px) {
#welcomeSearchBox .welcome-search-row input#itemSearchSubmit{width: 26%;}

  
  
  #content .sys_three .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay, 
#wrapper #content .sys_three .sys_CTA-ImageAndTextBlock .sys_CTA-textOverlay:hover{background-size: 65%; background-position: 130% 100%;}

  
  
  
  
  
#wrapper #content .sys_video,
#wrapper #content #thevideo,
#wrapper #content .sys_video-thumbnail{width: 100%; height: 264px;}

#wrapper #content .extraordinaryHero .sys_video,
#wrapper #content .extraordinaryHero #thevideo,
#wrapper #content .extraordinaryHero .sys_video-thumbnail{height: 100%;}
  
  
  
  
  
}

/* hide the description in standard contensis search results on temporary search page */
dd.sys_search-description {display: none;}

/* WS Jul 20 - added override for extraordinary hero vid */
#content .extraordinaryHero .welcomeVideo .sys_video-text {
    display:none;
}

#content .extraordinaryHero .welcomeVideo .sys_video-thumbnail {
    width: 100%;
    height: 100%;
}

#content .extraordinaryHero .welcomeVideo .sys_video {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

#content .extraordinaryHero .welcomeVideo .sys_video-thumbnail {
    height: 100%;
}
#content .extraordinaryHero .welcomeVideo #thevideo {
    height:100%;
}