@charset 'UTF-8';
/* you can add your own custom css here if you don't want to worry about SASS/SCSS */


/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    
}

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;300;500;700&family=Roboto:wght@100;300;400;700&display=swap');

.navbar-toggler-icon svg {
    fill: white;
}
.navbar-toggler-icon svg:hover {
    fill: #FFB607;
}




body {
font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7em;
}
h1,h2,h3,h4,h5 {
    font-family: 'Roboto Slab', sans-serif; 
}


h3 {
        padding-left: 25px;
        border-left: 4px solid #FFB607;
        margin-bottom: 25px; 
}

a {
    color: #337ab7; 
}

.headerscroll {
    background: #1C1E21;
    color: #fff;
    transition: background-color 0.2s ease-in-out; 
}

.topHeader {
    position: relative;
    z-index: -1; 
}

.topHeader video {
    width: 100vw;
    height: 100vh;
    object-fit: cover; 
}

.topHeader .imagefloater img {
    width: 35vw;
    left: 14vw;
    position: relative;
}

.navbar {
     position: fixed;
     width: 100%; 
     transition: background-color 0.3s ease-in-out;
     background: #1C1E21;
     z-index:100; 
}


.twoBoxes {
    width: 100%; 
}
.twoBoxes > div {
    float: left;
    width: 48%; 
}

.twoBoxes > div:nth-of-type(1) {
    margin-right: 2%;    
}
.twoBoxes > div:nth-of-type(2) {
    margin-left: 2%;
}

.social_link i {
    font-family: Font Awesome\ 5 Brands;
    font-weight: 900;
    color: #1C1E21;
}

.social_link {
    list-style: none;
    width: 100%;
    margin: 30px 0 0 0;
    float: left;
    clear: both;
    padding: 0;
}
.social_link li {
    float: left; 
    border: 1px solid #1C1E21;
    padding: 1px 5px 1px 6px;
    border-radius: 100%;
    margin-right: 10px; 
}
.social_link li:hover {
    background: #FFB607;
    border-color: #FFB607; 
}


/*** Footer CSS ****/


.footerBottom .social_link i {
    color: #999;
  
}
.footerBottom .social_link li {
      border: 0px solid #999 !important; 
      padding: 0 !important;
      
}
.footerBottom .social_link li:hover {
    padding: 0 !Important; 
    background: transparent;
}

.footerBottom .social_link li a {
    padding: 10px;
    border: 1px solid #999;
    border-radius: 100%;        
    
}
.footerBottom .social_link li a:hover {
    background: #ffb606; 
    
}
.footerBottom .social_link li a:hover i {
    color: #111;
}


footer {
    margin-top: 75px; 
    background: #111 !important;
    padding: 90px 0 100px 0;
    color: #fff; 
     
}


footer a, .footer1, footer p {
    color: #999;
    text-decoration: none; 
    margin-bottom: 5px;
    line-height: 30px;
    font-size: 13px; 
}
footer p {
    text-align: right; 
}

footer .flex-container > div {
    flex: 4; 
}
footer .flex-container {
    margin-top: 20px; 
}

footer .flex-container:nth-of-type(2) {
    margin-top: 30px; 
    border-top: 1px solid #222;
    padding-top: 30px;
    padding-bottom: 30px;
}

/*******/


/****** Nav bar specific ********/

header .nav-link a {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    color: #fff; 
    text-decoration: none;
    text-align: right; 
}



/*Menu*/
header ul.navbar-nav {
  list-style: none;
  border-bottom: 2px solid #transparent;
  position: relative;
  font-size: 1.061em;
  padding: 0;
}
header ul.navbar-nav li {
  float: left;
}
header ul.navbar-nav li a, header .navbar-nav li span {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 14px; 
  min-width: 85px;
  font-weight: normal;
  transition: color 0.3s;
  text-transform: uppercase;
  padding: 11px 20px 9px;
}
header ul.navbar-nav li.active a {
  color: #fff;
}

header #magic-line {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 125px;
  height: 4px;
  background: #FFB607;
  transition: all 0.3s;
}
/*Clear Fix*/
header .navbar-nav:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

header .navbar-expand-lg .navbar-collapse {
    place-content: flex-end; 
}
*:first-child + html header  .navbar-nav {
  zoom: 1;
}

header .navbar-nav li ul {
    position:absolute;
    opacity: 0; 
    padding-top: 40px;
    top: 30px;
    z-index:10; 
    text-align: left;
    transition: opacity 0.4s ease-in-out;
    visibility: hidden;

}
header .navbar-nav li ul li {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    background: #fff;                    
}
header .navbar-nav li ul li a {
    opacity: 0; 
    color: #666;
    transition: opacity 0.4s ease-in-out; 
}
header .navbar-nav li:hover ul {
    opacity: 1;        
    transition: opacity 0.4s ease-in-out; 
    visibility: visible; 
    max-width: 250px; 
}
header .navbar-nav li:hover ul li {
    opacity: 1; 
    width: 100%; 
    
}
header .navbar-nav li:hover ul li a {
    color: #666; 
    opacity: 1;
    transition: opacity 0.4s ease-in-out; 
}
header .navbar-expand-lg .navbar-nav .nav-link {
    padding: 0; 
}


/**********/

.flex-container {
    display: flex
}
.flex-container > ul {
    flex: 4; 
}



.pageTitle {
    background: #1C1E21; 
    color: #fff; 
    padding-top: 140px;
    padding-bottom: 90px;
    text-align: left;
}
.pageTitle h1 {
    line-height: 54px;
    text-transform: uppercase;
    font-size: 48px;
    font-weight: 700;
    padding-left: 25px;
    border-left: 4px solid #FFB607;
}



.breadcrumbs, .breadcrumbs a {
    line-height: 25px;
    color: #666;
    text-decoration: none;
    font-size: 12px; 
    margin-top: 10px; 
}


/*** Home Page Specific ***/

.home .pageTitle {
    display: none; 
}
.home .siteBody > div.container {
    padding-top: 40px; 
}

.hideme { display: none; }

.home .threeBoxes {
    width: 100%; 
    display: flex; 

}
.home .threeBoxes > div {
    flex: 3; 
}

.home .threeBoxes > div:nth-of-type(2), .threeBoxes.margins > div:nth-of-type(2) {
    margin: 0 20px; 
    
}

.home .threeBoxes > div > img {
    margin-right: 15px;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    float: left; 
    padding: 20px; 
    width: 100px; 
    height: auto; 
    margin-left: 6vw;
}
.home .threeBoxes > div > h3 {
    margin-top: 12px; 
    color: #fff; 
    padding-left: 0;
    border-left: none; 
    margin-bottom: 0px; 
}
.home .threeBoxes > div > a {
    color: #ffb606;
    border: 0;
    border-radius: 0;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    padding: 0;
    margin-top: 0;
    Text-decoration: none; 
}
.home .headerVideoBox {
    margin-bottom: -9px; 
    overflow: hidden
}
.home .topHeader3 {
    background: url(../../../../../../../../images/bg_lastest_new.jpg);
    padding: 80px 0 70px 0;
    overflow: hidden; 
}

.ut-twittembed {
    padding: 0 !Important; 
}

/*****************************/



.threeBoxes {
    width: 100%; 
    display: flex; ; 
}
.threeBoxes > div {
    flex: 3; 
}
.threeBoxes > div > img {
    margin-right: 15px;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    float: left; 
    padding: 20px; 
    width: 100px; 
    height: auto; 
    margin-left: 6vw;
}
.threeBoxes > div > h3 {

}


#password-form {
    text-align: center; 
    margin-top: 10vw;
    margin-bottom: 10vw;
}

/******** News section **********/
.newsTeaser {
    min-height: 200px; 
    padding-bottom: 25px;
    border-bottom: 1px solid #ccc; 
    display: inline-block;
    width: 100%; 
    margin-bottom: 25px; 
}
.newsTeaser h3 {
    margin-top: 10px; 
    margin-bottom: 0px !important; 
}
.newsTeaser h3 a, .vacancy h3 a {
    font-size: 22px;
    line-height: 26px;
    color: #555;
    text-decoration: none;
    border-left: 2px solid #fff;
    padding-left: 0px; 
    transition: all 0.4s ease-in-out;

}
.newsTeaser h3 a:hover, .vacancy h3 a:hover {
    padding-left: 10px;
    border-left: 2px solid #FFB607; 
    transition: all 0.4s ease-in-out;
}

.newsTeaser .teaserImage {
    width: 25%;
    height: auto;
    float: left;
    min-height: 200px;
    overflow: hidden;
    margin-right: 20px; 
}
.newsTeaser .teaserImage img {
    width: 100%;
    height: auto; 
}
.newsTeaser .teaserContent {
    margin-top: 10px; 
}
.teaserButtons  {
    margin-top: 10px; 
}
.teaserButtons a, .btn-primary, .btn-secondary, .learningButton {
    background: #555;
    color: #fff;
    clear: both;
    display: inline-block;
    padding: 5px 15px;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.4s ease-in-out; 
}
.teaserButtons a:hover, .btn-primary:hover, .btn-secondary:hover, .learningButton:hover {
    background: #FFB607;
    transition: all 0.4s ease-in-out;   
    color: #555;
}

.teaserImage img  {
    -webkit-filter: sepia(0);
    filter: sepia(0);
    transition: .3s ease-in-out;
}
.teaserImage img:hover {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.newsItem h1 {
    font-size: 30px;
    font-weight: 700;
    line-height: 34px;
    margin: 0 0 7px;
    padding-left: 25px;
    border-left: 4px solid #FFB607;
}
.teaserDetails a {
    color: #666; 
}
.teaserDetails a:hover {
    text-decoration: underline;   
} 


/********************************/


/***** Vacancy CSS ****/
.vacancy {
    clear:both; 
    display:inline-block;
    width: 100%; 
    min-height: 200px;
    border-bottom: 1px solid #ccc;  
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.vacancyCatergorytitle {
    font-size: 18px;
    font-weight: 700;
    line-height: 36px;
    padding-left: 25px;
    border-left: 4px solid #FFB607;
    margin-bottom: 30px;
    margin-top: 75px;
    text-transform: uppercase;
    clear:both; 
}
.vacancyCategories ul.sub-items {
        padding-bottom: 10px; 
    border-bottom: 1px solid #ccc; 
}

.vacancyItems > .vacancyCategories:nth-of-type(1) > h3 {
    margin-top: 10px; 
}


.vacancyTeaserImage {
    float: left;
    margin: 0 10px 0 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}
.vacancyTeaserImage img {
    background: #fff; 
}
.vacancyContact {
    margin-top: 40px; 
}

.vacancyFull {
    
}
.vacancyFull .vacancyImage {
    margin-bottom:  25px; 
}
.vacancyFull h5 {
    margin-top: 25px; 
    font-size: 16px; 
}
.vacancyFull .briefdesc {
    margin-top: 20px; 
}
.vacancyFull .bottom {
    margin-top: 25px; 
}
.vacancyCategories .vacancy h3 {
    margin-bottom: 0; 
}
.vacancyCategories .vacancy .briefdesc {
    margin-top: 10px; 
}




/****** Our Team CSS *******/
.teamMember {
    width: 20%;
    float: left;
    padding: 0 2%;
    text-align: center;
    min-height: 300px; 
}
.teamMember img {
    border-radius: 50%;    
    transition: 0.2s ease-in-out; 
    margin-bottom: 10px; 
}
.teamMember a {
    font-size: 15px;
    font-weight: 700;
    margin: 24px 0 0;
    line-height: 25px;
    color: #333; 
    text-decoration: none;
    transition: 0.2s ease-in-out; 
    
}
.teamMember:hover img {
    transform: scale(105%);
    transition: 0.2s ease-in-out; 
}
.teamMember:hover a {
    color: #FFB607;
    transition: 0.2s ease-in-out; 
}

.ourteamTeam {
    display: inline-block;
    width: 100%;
    margin-bottom: 50px;
}

.amt-team .item .emailaddress {
    opacity: 0; 
}
.teamMemberImage {
float: left;
margin-right: 25px;
}
.teamMemberBottom {
    clear: both; 
    margin-top: 20px; 
}
.teamMemberContainer {
    clear: both;
    display: inline-block;
    width: 100%; 
}


/********* Slick CSS changes ********/

.home .topHeader3 .slick-slider li.slick-slide .layout-default {
    max-width: 200px;
    background: #ffb606;
    text-align: center;
    padding-bottom: 10px; 
}
.home .topHeader3 .slick-slider li.slick-slide .layout-default p {
    line-height: 20px;
    margin-top: 14px;
}
.home .topHeader3 .slick-slider li.slick-slide .layout-default p a {
    color: #333; 
    text-decoration: none;
    padding:2px; 
    line-height: 15px; 
}


/* Slider */
.slick-loading .slick-list
{
    background: #fff url('../images/ajax-loader.gif') center center no-repeat;
}


/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}

.slick-prev:before
{
    content: '←';
}


.slick-next
{
    right: -25px;
}

.slick-next:before
{
    content: '→';
}


/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: 'â€¢';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

      
      
      
/******** Events CSS **********/


#eb-coupon-container {
    opacity: 0;
    height: 0; 
}



/***** Landing PAges ********/
.landingHeader {
    width: 100%;
    display: inline-block;
    padding-bottom: 35px;
    border-bottom: 1px solid #eee;
    margin-bottom: 35px;
}
.landingHeader p {
    color: #fff; 
}
.landingHeader .ui.form .field>label {
    color: #fff;
}
.short-courses .pageTitle {
    padding-top: 110px;
    padding-bottom: 45px;
}
::placeholder {
    color: #333 !important; 
}

.documentation-courses h3 {
    text-transform: uppercase;
}

.landingHeader .ui.button {
    background: #FFB607;
    color: #555;
    clear: both;
    display: inline-block;
    padding: 9px 25px;
    border-radius: 0;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.4s ease-in-out; 
}
.landingHeader .ui.button:hover {
    background: #555;
    transition: all 0.4s ease-in-out;   
    color: #FFB607;
    
}





/********** Courses ************/
.documentation-courses .course {
    padding-bottom: 20px; 
    border-bottom: 1px solid #ccc;
    margin-bottom: 50px; 
}

 .documentation-courses .twoBoxes {
     display: inline-block; 
     clear:both; 
 }
 .documentation-courses .twoBoxes > div:nth-of-type(2) {
     text-align: right;
    margin-top: -12px;
    text-align: right;
 }

.fourBoxes {
    width: 100%; 
    clear: both; 
    display: inline-block; 
}
.fourBoxes > div {
    float: left;
    width: 24%; 
}

.fourBoxes > div:nth-of-type(1) {
    margin-right: 2%;    
}
.fourBoxes > div:nth-of-type(2) {
    margin-right: 1%; 
    width: 38%
}
.fourBoxes > div:nth-of-type(3) {
width: 210px;
height: 210px;
    margin-right: 2%;
    text-align: center;
    display: table-column;
    padding: 5% 3% !important;
    min-height: 210px;   
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #0285B9;
}

.fourBoxes > div:nth-of-type(4) {
width: 210px;
height: 210px;
    text-align: center;
    border: 1px solid #ddd;
    padding: 5% 1%;
    border-radius: 5px;
    background: #0285B9;
}

.fourBoxes > div:nth-of-type(4) .coursecost{
    text-decoration: line-through;
}
.course .fourBoxes > div h5 {
    color: #fff; 
}

.coursecost {
    font-size: 30px; 
    margin-top: 20px; 
    display: block;
    color: #F9A75F;
}
.welshprice .free {
    display: block; 
    font-size: 30px; 
    margin-top: 10px;
    color: #F9A75F;  
}

.course i {
    font-family: Font Awesome\ 5 Free;
    font-style: normal;
}
 

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 300ms ease-in;
    -moz-transition: opacity 300ms ease-in;
    transition: opacity 300ms ease-in;
    pointer-events: none;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 70vw;
    position: relative;
    margin: 5% auto;
    padding: 5px 20px 13px 20px;
    background: #fff;
    
}

.close {
  padding: 0;
    color:black;
    line-height: 25px;
    position: absolute;
    right: 10px;
    text-align: center;
    top: 10px;
    width: 24px;
    text-decoration: none;
  background:none;
    font-weight: bold;
}

.close:hover { 
color: #EA4436;
}

.topBanner {
    padding-top: 66px; 
    background: #0285B9;
}






/**
 * Tabs
 */
 .courseDetails .shortdesc {
     margin-top: 20px; 
     display: inline-block;
    width: 75%;
    margin-left: 1%;
 }
 .courseDetails .shortdesc h4 {
     text-transform: uppercase;
     font-size: 42px; 
 }
 .courseDetails .courseimage {
    width: 100%; 
 }
 .courseDetails .courseimage img {
     margin: 0 auto; 
     display: block;
 }
 
.courseDetails .tabs {
    clear:both;
    margin-top: 40px; 
    display: flex;
    flex-wrap: wrap; // make sure it wraps
}
.courseDetails .tabs label {
    order: 1; // Put the labels first
    display: block;
    padding: 1rem 2rem;
    margin-right: 0.2rem;
    cursor: pointer;
    width: 33%; 
  background: #1C1E21;
  color: #fff; 
  font-weight: bold;
  transition: background ease 0.2s;
}
.courseDetails .tabs label:hover {
    cursor: pointer;
}
.courseDetails .tabs .tab {
  order: 99; // Put the tabs last
  flex-grow: 1;
    width: 100%;
    display: none;
  padding: 1rem;
  background: #fff;
}
.courseDetails .tabs input[type="radio"] {
    display: none;
}
.courseDetails .tabs input[type="radio"]:checked + label {
    background: #FFB607;
    color: #000; 
}
.courseDetails .tabs input[type="radio"]:checked + label + .tab {
    display: block;
}

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }
  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}



#twitter-widget-0 {
    width: 100% !important;
}
#mod-custom161 iframe {
    width: 100% !important;
}



@media (max-width: 1400px) {
    .fourBoxes > div:nth-of-type(3) {
        width: 150px;
        height: 185px;
        padding: 3.5% 1% 2% 1%;
        min-height: auto; 
    }
    .fourBoxes > div:nth-of-type(4) {
        width: 150px;
        height: 185px;
        padding: 3.5% 1% 2% 1%;
    }
    .fourBoxes > div:nth-of-type(2) {
        margin-right: 1%;
        width: 44%;
    }
    
}

@media (max-width: 1200px) {
    .navbar .container {
        max-width: 1150px !important;
    }
    .container {
        max-width: 98%; 
    }
}
@media (max-width: 1144px) {
    .home .threeBoxes > div > h3 {
        font-size: 2vw; 
    }
    .course > div.twoBoxes > div:nth-of-type(1) {
        width:70%;
        margin-right: 0; 
    }
    .course > div.twoBoxes > div:nth-of-type(2) {
        width:30%;
        margin-left: 0; 
    }
    .fourBoxes > div:nth-of-type(3) {
        margin-right: 10px; 
    }
    .fourBoxes > div:nth-of-type(2) {
        width: calc(73% - 310px);
    }
}

@media (max-width: 1000px) {
     .flex-container > ul {
         flex: 2;
     }
     nav.navbar {
         background: #1C1E21;
     }
}

@media (max-width: 990px) {
    header .navbar-nav li ul {
        opacity: 1;
        visibility: visible;
        position:relative; 
        top: 0;
        padding-top: 0; 
    }
    header .navbar-nav li ul li {
        float: none; 
        opacity: 1; 
        background: transparent;
    }
    header .navbar-nav li ul li a {
        opacity: 1; 
        color: #fff; 
    }
    .home .threeBoxes, .threeBoxes {
        display: block; 
    }
    .home .threeBoxes > div, .threeBoxes > div {
        width: 100%; 
        margin: 10px 0; 
        float: none;
    }
    .home .threeBoxes > div:nth-of-type(2), .threeBoxes.margins > div:nth-of-type(2) {
        margin: 10px 0;
    }
    .topHeader video {
        height: 50vh;
    }
    .footer .container {
        max-width: 99%; 
    }
    
}


@media (max-width: 882px) {
    .home .threeBoxes > div > img {
         margin-left: 0; 
    }
    .teamMember {
        width: 33%
    }
    .fourBoxes > div:nth-of-type(2) {
        width: 73%;
    }

    .fourBoxes > div:nth-of-type(3), .fourBoxes > div:nth-of-type(4) {
        width: 46%;
        margin: 2%; 
        height: 120px; 
        padding: 3% !important;
    }
    .coursecost { margin: 0; }
    .contact .twoBoxes > div {
        width: 100%; margin-bottom: 20px; 
    }
    .contact .twoBoxes > div:nth-of-type(2) {
        margin: 0; 
    }
    .contact .item-page > div > div.twoBoxes > div:nth-of-type(2) {
        margin-top: 20px !important; 
    }
}

@media (max-width: 770px) {
    .course .twoBoxes > div {
        width: 100% !important; 
    }
    .documentation-courses .twoBoxes > div:nth-of-type(2) {
        text-align: left; 
    }
    .course .fourBoxes > div:nth-of-type(1), .course .fourBoxes > div:nth-of-type(2) {
        width: 48%; 
    }
    .newsTeaser .teaserImage {
        width: 50%; 
    }
}



@media (max-width: 662px) {
    .home .threeBoxes > div > img {
    margin-right: 1%;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    float: left;
    padding: 20px;
    width: 14vw;
    height: auto;
    margin-left: 0; 
    }
    .home .threeBoxes > div {
        flex: 1;
    }
}

@media (max-width: 562px) {
    .teamMember {
        width: 46%
    }
    .vacancyTeaserImage {
        float: none; 
        margin-bottom: 20px; 
    }
    .course .fourBoxes > div {
        width: 100% !important; 
    }
    .modalDialog > div {
        width: 90vw; 
    }
}

@media (max-width: 472px) {
    .slick-slide .layout-default {
        max-width: 92% !important   ; 
    }
    .slick-slide .layout-default .media {
        width: 100%; 
    }
    .slick-slide .layout-default .media img {
        width: 100%; 
    }
    .newsTeaser .teaserImage, .newsItem img {
        width: 100%; 
        margin-bottom: 20px; 
    }
    
}

@media (max-width: 358px) {
    .teamMember {
        width: 100%%
    }
}



@media (max-width: 1144px) {

}

@media (max-width: 1144px) {

}

@media (max-width: 1144px) {

}

@media (max-width: 1144px) {

}