/* Transformer's Magazine - v1.1
 * Igor Bujas
 * www.north-northwest.com

---------------------------------- */


/* ===================================
    01. Reset
====================================== */

 
 *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a, button {
    cursor: revert;
}

ol, ul, menu {
    list-style: none;
}

img {
    max-width: 100%;
}

table {
    border-collapse: collapse;
}

textarea {
    white-space: revert;
}


::placeholder {
    color: unset;
}

:where([hidden]) {
    display: none;
}

:where([contenteditable]) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
}

:where([draggable="true"]) {
    -webkit-user-drag: element;
}

strong { font-weight: 500; }

/* ===================================
    02. General
====================================== */

:root {
    --color-main:#000000;
    --color-brand: #d2232b;
    --color-dark-blue: #006ec9;
    --color-secondary: #427db4;
    --color-white:#ffffff;
    --color-grey: #333333;
    --color-light-grey: #d2d3d5;
    --color-opacity-grey: #e5e5e5;
    --color-green: #82bd52;
}


body { font-size: 14px; font-weight: 100; line-height: 30px; font-weight: 400; color: var(--color-main);  font-family: 'Poppins', sans-serif; }

.page-width { max-width: 1400px; margin: 0 auto; }

.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
.mt80 { margin-top: 80px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px!important; }
.mb50 { margin-bottom: 50px; }

a { color: var(--color-main); transition: all 0.2s linear; text-decoration: none; }
a:hover { color: var(--color-brand); }

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

/* ===================================
    03. Header
====================================== */

header { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-gap: 30px; }
    .logo { padding-top: 10px; }
    .header-icons { justify-self: right; margin-top: 24px; }
    .sign-in { font-weight: 500; margin-right: 20px; }
    .sign-in:hover { color: var(--color-grey); text-decoration: underline; }
    .btn { color: var(--color-secondary); padding: 10px 30px; font-weight: 500; display: inline-block; }
        .btn:hover { background: var(--color-grey); color: var(--color-white); }
        .btn-variation { color: var(--color-secondary); padding: 5px 30px; font-weight: 500; }
        .btn-variation:hover { background: var(--color-grey); color: var(--color-white); }
        .btn-short { color: var(--color-secondary); padding: 2px; display: block; font-weight: 500; text-align: center; }
        .btn-short:hover { background: var(--color-grey); color: var(--color-white); }        
        .red { background: var(--color-brand); color: var(--color-white); }
        .blue { background: var(--color-dark-blue); color: var(--color-white); }
        .green { background: var(--color-green); color: var(--color-white); }       
        .black { background: var(--color-main); color: var(--color-white); }
        .white { background: var(--color-white); color: var(--color-brand); }
        .transparent { background: transparent; color: var(--color-main); border: 1px solid var(--color-main); padding: 5px 30px; cursor: pointer;  }
        .transparent-light { background: transparent; color: var(--color-white); padding: 5px 30px; width: 100%; text-align: center; cursor: pointer; font-weight: 500; }
        .black-transparent { background: var(--color-main); color: var(--color-white); width: 100%; text-align: center; font-weight: 500; }

        .red:hover { background: var(--color-main); color: var(--color-white); }
        .blue:hover { background: var(--color-main); color: var(--color-white); }



/* Header search */

.overlay-search { height: 100%; width: 100%; display: none; position: fixed; z-index: 1; top: 0; left: 0; background-color: var(--color-secondary); }
    .overlay-logo { display: block; margin: 0 auto 70px; }
    .overlay-content { position: relative; top: 25%; width: 50%; text-align: center; margin-top: 30px; margin: auto; }
            .overlay-search .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; cursor: pointer; color: var(--color-white); } 
            .overlay-search .closebtn:hover { color: var(--color-light-grey); }
            .overlay-search input[type=text] { padding: 0px;  border: none; float: left; width: 90%; background: var(--color-white); text-align: left; -webkit-appearance: none; background: none; border: none; color: var(--color-white); font-size: 44px; font-weight: 400; opacity: .7; outline: none; padding-bottom: 15px; }

 #search { border-bottom: #9ecdf3 1px solid; }
 .overlay-search button { width: 10%; padding: 15px; font-size: 30px; border: none; cursor: pointer; color: var(--color-white); }
 .overlay-search button:hover { opacity: 0.7; }
 .openBtn { margin-right: 15px; font-size: 20px; position: relative; top: 3px; cursor: pointer; }
 .fa-search:hover { opacity: 0.5; transition: all 0.2s linear; }

/* News ticker */

.ticker-wrapper-v { display: flex; position: relative; overflow: hidden; background: var(--color-secondary); height: 36px; }
        .ticker-wrapper-v .heading{ color: #fff; padding: 4px 10px 4px 8px; flex: 0 0 auto; font-size: 0.9rem; font-weight: 500; text-transform: uppercase; }
        .ticker-divider { margin: 10px 0 10px 10px; border-right: #6897c3 1px solid; }
        .news-ticker-v { display: flex; flex-wrap: wrap; margin:0; padding: 0; animation: tic-v 10s cubic-bezier(1, 0, .5, 0) infinite; }
        .news-ticker-v:hover { animation-play-state: paused; }
        .news-ticker-v li { display: flex; width: 100%; align-items: center; white-space: nowrap; padding-left: 20px; }
        .news-ticker-v li a { color: var(--color-white); font-size: 0.8rem; font-weight: 300; }

        @keyframes tic-v {
                0%   {margin-top: 4px;}
                20%  {margin-top: -25px;}
                40%  {margin-top: -55px;}
                60%  {margin-top: -85px;}
                80%  {margin-top: -115px;}
                100% {margin-top: 0;}
        }

/* ===================================
    04. Navigations
====================================== */

nav { background: var(--color-main); color: var(--color-white); margin-top: 25px; }
    nav li { display: inline; }

.navbar { overflow: hidden; }
    .navbar a { float: left; font-size: 16px; color: var(--color-white); text-align: center; padding: 10px 30px; text-decoration: none; border-right: #333 1px solid; }
        .dropdown { float: left; overflow: hidden; }
            .arrow-down { background: url(../images/arrow-down.png) no-repeat; width: 10px; height: 5px; display: block; float: right; position: relative; top: 12px; left: 5px; } 
            .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: var(--color-white); padding: 10px 30px; background-color: inherit; font: inherit;  margin: 0; } 
    
    .navbar a:hover, .dropdown:hover .dropbtn { background-color: var(--color-brand); }
         .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; width: 100%; left: 0; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
            .dropdown-content .header { background: var(--color-brand); padding: 16px; color: var(--color-white); }
         .dropdown:hover .dropdown-content { display: block; }
         .column { float: left; width: 33.33%; padding: 10px; background-color: #17222B; height: auto; }
             .column a { float: none; color: var(--color-light-grey); padding: 16px 16px 10px 16px; text-decoration: none; display: block; text-align: left; width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
             .column a:hover { color: var(--color-brand); background: none; }
             .column h3 { padding-left: 25px; padding-top: 10px; font-size: 1.2rem; color: var(--color-white); }
   
    .row:after { content: ""; display: table; clear: both; }
    .navbar .active { background-color: var(--color-brand); }
    .navbar .active-academy { background-color: var(--color-secondary); }

    .switch-language { float: right!important; border-left: #333 1px solid; border-right: none!important; }

    .column .active { color: var(--color-brand); background: none; }  
    .column .active:hover { text-decoration: underline; }  


/* Mobile header & nav */  

.header-mobile { display: none; }

.breaking-news { background-color: var(--color-secondary); }
    .rss-icon { float: left; display: block; position: relative; top: 5px; color: var(--color-white); }
    .mobile-btn { display: none; } 

#burger-menu { cursor: pointer; height: 27px; width: 27px; overflow: visible; position: relative; z-index:2; top: 10px; left: 10px; }
      #burger-menu span,
      #burger-menu span:before,
      #burger-menu span:after { background: #111111; display: block; height: 2px; opacity: 1; position: absolute; transition: 0.3s ease-in-out; }
      #burger-menu span:before,
      #burger-menu span:after { content: ""; }
            #burger-menu span { right: 0px; top: 13px; width: 27px; }
            #burger-menu span:before { left: 0px; top: -10px; width: 16px; }
            #burger-menu span:after { left: 0px; top: 10px; width: 20px; }  
                    #burger-menu.close span { transform: rotate(-45deg);top: 13px; width: 27px; background: var(--color-white); }
                    #burger-menu.close span:before { top: 0px; transform: rotate(90deg); width: 27px; background: var(--color-white); }
                    #burger-menu.close span:after { top: 0px; left:0; transform: rotate(90deg); opacity:0; width:0; }

#menu { z-index:1; min-width:100%; min-height:100%; position: fixed; top:0; height:0; visibility: hidden; opacity: 0; text-align:center; padding-top:20px; transition: all 0.3s ease-in-out; }
#menu.overlay { visibility: visible; opacity: 1; padding-top: 2px; background:#4a8cb4; }
        #menu ul { text-align: left; padding-left: 20px; }
        #menu li { list-style:none; }
                #menu a { color:#fff; display:block; font-size: 32px; margin-bottom:15px; text-decoration:none; font-family: 'Roboto', sans-serif; }
                #menuSearch { margin-top: 30px; }
                .search-input { background: transparent; border: none; border-bottom: 1px solid hsla(0,0%,100%,.2); text-align: left; padding: 4px 44px 4px 0; width: 85%; line-height: 1; color: var(--color-white); -webkit-appearance: none; border-radius: 0; }
                .search-submit { width: 24px; height: 24px; position: relative; top: 3px; color: var(--color-white); }

                .accordion { cursor: pointer; text-align: left; border: none; outline: none; transition: 0.4s; }
                    .active, .accordion:hover { color: var(--color-grey); }
                    .panel { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
                    .panel ul { padding-left: 0!important; }


/* ===================================
    05. Main content
====================================== */

.super-leaderboard { max-width: 976px; margin: 30px auto; display: block; }

.main { display: grid; grid-template-columns: 1fr 280px; grid-gap: 55px; }
.news-category { display: block; color: var(--color-brand); text-transform: uppercase; }
    .main-article { position: relative; }
    mark { background-color: var(--color-main); color: var(--color-white); font-size: 2rem; font-weight: 600; line-height: 48px; }
    mark:hover { background-color: var(--color-brand);  transition: all 0.2s linear; }
    .emphasized-content { padding: 0 30% 45px 20px; position: absolute; top: 350px; }

.main-news { display: grid; grid-template-columns: 3fr 230px; grid-gap: 50px; border-right: var(--color-light-grey) 1px solid; padding-right: 60px; } 
    .main-news a:hover { color: var(--color-main); }
 
h2 { font-size: 1.5rem; font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 500; line-height: 30px; }
h4 { font-size: 1rem; font-weight: 600; }

.from-the-news article { margin-bottom: 30px; }
.from-the-news p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }

    .category-variation { color: var(--color-white); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; padding: 2px 10px; font-size: 0.8rem; }

.main h2 { margin-bottom: 20px; }

.two-banners { display: grid; grid-template-columns: 1fr 1fr; margin: 50px auto; grid-gap: 20px; }

#backToTop { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: 18px; border: none; outline: none; background-color: var(--color-brand); color: var(--color-white); cursor: pointer; padding: 6px 12px; border-radius: 4px; width: 40px;  height: 40px; }
#backToTop:hover { background-color: var(--color-grey); }
 

.slideshow-container { max-width: 1000px; position: relative; margin: auto; }
  
.mySlides { display: none; }
  
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; }
  
  .next { right: 0; border-radius: 3px 0 0 3px; }
  
  .prev:hover, .next:hover { background-color: rgba(0,0,0,0.5); color: var(--color-white)!important; }

  .dot { cursor: pointer; height: 12px; width: 12px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
  
  .active, .dot:hover { background-color: var(--color-grey); color: var(--color-white); }
  
  .fade { animation-name: fade; animation-duration: 1.5s; }
  
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }


/* More news */

.more-news-wrap { background-color: #fafafa; padding: 50px 0; }
.more-news { display: grid; grid-template-columns: 1fr 280px; grid-gap: 55px; }
.secondary-news { display: grid; grid-template-columns: 1.5fr 1fr; grid-gap: 50px; }
    .split-news { display: grid; grid-template-columns: 1.5fr 170px; grid-gap: 25px; margin-bottom: 10px; }
        .split-news h3 { font-size: 0.9rem; font-weight: 400; line-height: 24px; }
        .post-meta { color: #acadb1; font-size: 0.8rem; margin-top: 10px; }

        .secondary-news .main-article img, .split-news img { border-radius: var(--rounded, 3px); }
        .secondary-news .news-category { font-size: 0.8rem; }
        
.five-news { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-gap: 50px; margin: 50px auto; }

.transformers-magazine { display: grid; grid-template-columns: 1fr 1fr; } 
    .tm-mag-description { background-color: #fafafa; padding: 150px 100px 0; }
    .tm-mag-description h2 { font-size: 3rem; text-transform: uppercase; font-weight: 700; margin-bottom: 30px; line-height: 45px; }
    .tm-mag-description h3 { font-size: 3rem; text-transform: uppercase; font-weight: 500; margin-bottom: 30px; max-width: 100%; overflow: unset; }
    .tm-mag-description p { margin-bottom: 30px; }

.banner-regular { margin: 30px auto; display: block; }

.transformers-academy { position: relative; text-align: left; }
.transformers-academy img { width: 100%; }
.transformers-academy p { max-width: 600px; color: var(--color-white); margin-bottom: 20px; }
        .bottom-left { position: absolute; bottom: 20%; left: 5%; background: rgba(0, 0, 0, 0.4); padding: 30px; }
        .top-left { position: absolute; top: 25px; left: 15px; padding: 30px; }
    
        .transformers-academy h2 { font-size: 3rem; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; color: var(--color-white); line-height: 50px; }
        .transformers-academy h3 { font-size: 1.5rem; text-transform: uppercase; font-weight: 500; margin-bottom: 20px; color: var(--color-white); max-width: 100%; }  

.academy-news { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
    .academy-news a { color: var(--color-main); }
    .academy-news a:hover { color: var(--color-brand); }

    
.latest-in-the-academy { margin: 50px auto; }
    .latest-in-the-academy h4, .events h4, .books h4 { font-size: 1.6rem; margin-bottom: 20px; }

.events { background-color: #4a8cb4; padding: 30px 0; color: var(--color-white); }
    .events .post-meta { color: var(--color-white); }
    .border { border: 8px solid var(--color-white); }
    .border:hover { border: 8px solid var(--color-light-grey); transition: all 0.2s linear; }
    .events-news { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
    .events-news a { color: var(--color-white); }
    .events-news a:hover { color: var(--color-brand); }

.books { margin: 50px auto; }
    .list-books { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); text-align: center; font-size: 1.2rem; font-weight: 500; grid-gap: 50px; }
    .list-books .post-meta { font-size: 1rem; font-weight: 300; }

    .list-books .shadow {  box-shadow: 15px 15px#ebebeb; }


/* Inner pages */

.content { display: grid; grid-template-columns: 3fr 1fr; grid-gap: 30px; }
    .content h1 { font-size: 2.5rem; font-weight: bold; line-height: 40px; margin-bottom: 10px; }
    .content h2 { font-size: 1.2rem; font-weight: 300; }

    .full-width h1 { font-size: 2.5rem; font-weight: bold; line-height: 40px; margin-bottom: 10px; }
    .full-width h2 { font-size: 1.2rem; font-weight: 300; }

.trending { text-align: center; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 50px; }    
    .employers { text-align: center; max-width: 250px; justify-self: end; }
    .jobs h2 { font-size: 1.6rem; font-weight: 500; margin-bottom: 10px; }
    .jobs h3 { font-size: 1rem; font-weight: 300; }
    .job { background-color: #f7f7f7; display: grid; grid-template-columns: 2fr 1fr; padding: 10px 40px; margin: 20px 0; }
      .job:hover { background-color: var(--color-opacity-grey); }
    .job h4 { font-size: 1.4rem; margin-bottom: 5px; }
            .employer { font-size: 1.2rem; }
        .job-item-1 { align-self: center; }
            .job-item-2 { justify-self: right; text-align: right; }

.inner-content { padding: 50px 0; }
    .inner-content h2 { margin-bottom: 20px; }

hr { border: none; height: 1px; background-color: var(--color-opacity-grey); color: var(--color-opacity-grey); margin: 10px 0; }

.list-of-authors { margin: 20px 0 50px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 50px; }
        .author { border: 1px solid var(--color-opacity-grey); }
        .author:hover { border: 1px solid var(--color-brand); }
        .author-content { padding: 20px; }

.sidebar-banners { justify-self: right; text-align: left; }
    .sidebar-banners a { margin-bottom: 20px; display: block; text-align: center; }

    .split-screen { display: grid; grid-template-columns: 1fr 1fr; } 
    .split-screen-description { background-color: #fafafa; padding: 150px 100px 150px; }
    .split-screen-description h2 { font-size: 3rem; text-transform: uppercase; font-weight: 700; margin-bottom: 30px; line-height: 50px; }
    .split-screen-description h3 { font-size: 3rem; text-transform: uppercase; font-weight: 500; margin-bottom: 30px; }
    .split-screen-description p { margin-bottom: 30px; }   

.split-text { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; }
.share-tools { display: flex; justify-self: start; }

.programmes-and-courses { display: grid; grid-template-columns: 1fr 3.5fr; margin: 30px 0; grid-gap: 50px; }
    .side-menu { border-right: 1px solid var(--color-light-grey); font-weight: 500; }
        .side-menu ul { margin: 20px 0; }
            .side-menu li { line-height: 36px; }  
            .side-menu .active { color: var(--color-secondary); list-style-type: square; } 
    .list-courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); grid-gap: 40px; margin-bottom: 50px; }
    .list-courses h3 { margin: 10px 0; font-size: 1.2rem!important; }
    .list-courses p { color: var(--color-grey); }

    .grid-banner { justify-self: end; }

    .img-description { font-style: italic; color: #acadb1; font-size: 0.8rem; }

#companies { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .companies { text-align: center; border: var(--light-grey) 1px solid; transition: 0.3s; cursor: pointer; 
       -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
               border-radius: 5px; }

    .companies:hover { border: var(--color-brand) 1px solid; }
    .tabcontent { padding: 50px 0; }
    .tabcontent h4 { color: var(--brand-color); }
    .tabcontent hr { margin: 30px 0; }
    .tablinks { background: none; border: none; }

    .companies-list-icons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 30px; text-align: center; }
    .companies-list { margin-top: 50px; background: var(--color-light-grey); padding: 5px; display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); text-align: center; }
        .companies-list .active {  background-color: var(--color-brand)!important; color: var(--color-white); font-weight: bold; padding: 1px 7px; 
            -webkit-border-radius: 2px;
               -moz-border-radius: 2px;
                    border-radius: 2px; }

    .company-info { display: grid; grid-template-columns: 1fr 3fr; grid-gap: 50px; }
    .company-info p { margin-bottom: 10px; }
    .company-info a { align-self: center; }

.event { border: 1px solid var(--color-opacity-grey); background-color: #ebebeb; }
    .event:hover { border: 1px solid var(--color-brand); background-color: var(--color-white); }
    .event img { width: auto!important; }
    .author-content a { color: var(--color-brand); }
    .author-content a:hover { color: var(--color-main); }
            .event-img { background-color: var(--color-white); display: block; text-align: center; padding: 20px 0; margin: 10px; display: flex; justify-content: center; align-items: center; min-height: 150px; }
    
.library { margin: 50px 0; }
        .library .company-info { margin: 30px 0; }

        .pagination { display: inline-block; }
          
        .pagination a { color: var(--color-main); float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s;
            -webkit-border-radius: 5px;
               -moz-border-radius: 5px;
                    border-radius: 5px;  }
          
        .pagination a.active { background-color: var(--color-brand); color: var(--color-white); }         
        .pagination a:hover:not(.active) {background-color: var(--color-light-grey); }
        .center { text-align: center; }

        .tag { background-color: var(--color-light-grey); padding: 3px 5px; margin: 0 3px;
                -webkit-border-radius: 5px;
                   -moz-border-radius: 5px;
                        border-radius: 5px; }
        .tag:hover { background-color: var(--color-brand); color: var(--color-white); }
    
.job-posting { background: #fafafa; padding: 40px; }
    .job-posting h3, .job-posting h4 { margin: 20px 0; }
    .job-posting .btn { margin-top: 10px; display: inline-block; }
    .job-posting ul { margin-left: 16px; }
        .job-posting li { list-style-type: disc; }

.subscribe { background-color: var(--color-secondary); color: var(--color-white); padding: 20px; max-width: 250px; margin-bottom: 20px; }

.module-info { margin: 20px 0; }
.main-content h3, .programmes-and-courses h3 { font-size: 1.6rem; margin-bottom: 10px; max-width: 100%; }
.main-content p { margin-bottom: 20px; }
.course { border: 1px solid var(--color-opacity-grey); }
    .course h1 { font-size: 2.5rem; font-weight: bold; line-height: 40px; margin-bottom: 10px; }
    .about-course { padding: 40px 0; }

.checked { color: orange; }

.written-by { background-color: #fafafa; padding: 40px; font-size: 0.9em; margin: 20px 0 50px;}
    .written-by a { color: var(--color-brand); }
    .written-by a:hover { color: var(--color-main); }
    .circled { height: 150px; width: 150px; border-radius: 50%; display: inline-block; }
    .align-left { float: left; margin: 0 20px 20px 0; }

.module { display: grid; grid-template-columns: 2fr 1fr; margin: 10px 0; }
    .preview-course { -webkit-border-radius: 5px;
                         -moz-border-radius: 5px;
                              border-radius: 5px; }

.container { position: relative; }
.centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.featured-img { color: var(--color-white); text-align: center; margin-bottom: 50px; background-color: var(--color-main); }
.featured-img h1 { font-size: 2.5rem; font-weight: bold; line-height: 40px; margin-bottom: 10px; }
    .featured-img img { width:100%; opacity: 0.7;  }
    .article-page h2 { font-size: 2.5rem; font-weight: bold; line-height: 40px; margin-bottom: 10px; }
    .article-page h3 { font-size: 1.2rem; font-weight: 300; }
    .container .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); font-size: 16px; padding: 12px 24px; border: none; cursor: pointer; border-radius: 5px; }
        .container .btn:hover { background-color: var(--color-main); }

.modal { display: none;  position: fixed;  z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%;  height: 100%;  overflow: auto; background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.7); }
.modal-content { position: relative; margin: auto; padding: 0; 
                           -webkit-animation-name: animatetop;
                             -webkit-animation-duration: 0.4s; 
                                   animation-name: animatetop;
                                     animation-duration: 0.4s;
                                             max-width: 580px; }

.inner-modal { background-color: var(--color-secondary); padding: 50px; color: var(--color-white); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
    .modal-list { list-style-type: upper-roman; margin: 20px 0 20px 18px; } 
        .modal-list a { color: var(--color-white); }   
        .modal-list a:hover { color: var(--color-main); }   

  @-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
  }
  
  @keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
  }
  
  .modal .close { float: right; font-size: 38px; color: var(--color-white); } 

  .close:hover,
  .close:focus { color: var(--color-grey); text-decoration: none; cursor: pointer; }

  .modal-body h2 { font-size: 2.5rem;font-weight: bold; line-height: 40px; margin-bottom: 10px; }
  .modal-body ol { text-align: left; }


.news-big { display: grid; grid-template-columns: 3fr 1fr; grid-gap: 50px; } 
.news-page .emphasized-content { top: 470px; padding: 0 3% 45px 20px }

.news-page-list { display: grid; grid-template-columns: 3fr 250px; grid-gap: 50px; }
.list-news { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 40px; margin: 0px auto; }
        .news-business { color: var(--color-brand); }
        .news-people { color: var(--color-secondary); }
        .news-products { color: var(--color-green); }
        .btn-small { padding: 0 7px; font-size: 0.8rem;}
        .btn-small:hover { background: var(--color-grey); color: var(--color-white); }      

.popular-news .w3-container { margin: 30px 0; }
.popular-news .link { text-transform: uppercase; color: var(--color-brand); }
.popular-news .link:hover { text-decoration: underline; }

    .popular-news article { margin-bottom: 20px; }
       
        .w3-bar { width: 100%; overflow: hidden; }
        .w3-bar .w3-bar-item { margin: 0 20px 0 0; float: left; width: auto; display: block; outline: 0; font-size: 1.2rem; }
        .w3-red, .w3-hover-red:hover { border-bottom: var(--color-brand) 5px solid; }
        .w3-btn, .w3-button { display: inline-block; vertical-align: middle; overflow: hidden; text-decoration: none; color: inherit; background-color: inherit; text-align: center; cursor: pointer; white-space: nowrap; }

.news-sidebar { max-width: 250px; justify-self: right; }
.news-sidebar h2 { font-size: 1.5rem; font-weight: bold; margin: 20px 0; }

.box { background-color: var(--color-secondary); padding: 10px 20px; color: var(--color-white); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; margin-bottom: 20px; }
    .box p { margin-bottom: 0; }
    .box a { text-decoration: underline; color: var(--color-white); }
    .box a:hover { text-decoration: none; }

.related-content { background-color: #fbfbfb; padding: 30px; margin: 20px; }
    .list-related-content { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 50px; margin: 20px 0; }
    .related-wrap { padding: 20px; background-color: var(--color-white); }

.table-of-contents { display: block; margin-top: 20px; }
.table-of-contents-icon { background: url(../images/table-of-contents-icon.png) no-repeat; width: 25px; height: 18px; display: inline-block; position: relative; top: 6px; margin-right: 5px; }

.list-related-books { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; font-size: 1.2rem; font-weight: 500; }

.book-info { display: grid; grid-template-columns: 1fr 3fr; grid-gap: 50px; }
.book { text-align: center; }
    .book-info h2 { font-size: 1.6rem; font-weight: bold; margin-bottom: 10px; color: var(--color-main); }
.book-info table { width: 100%; margin: 20px 0; }
        .book-info tr { border-bottom: var(--color-light-grey) 1px solid; }
        .book-info td { padding: 3px 0; }
        .accented { font-weight: 600; }
        .book-author { background-color: #ebebeb; }
            .book-author .tabcontent { padding: 30px; }

         /* Swatches */   
        .option-selector__btns { display: flex; flex-wrap: wrap; margin: -10px -10px 0 0; }
        .opt-btn { position: absolute; z-index: -1; opacity: 0; }

        .opt-label { display: flex; align-items: center; justify-content: center; position: relative; min-width: 110px; margin: 10px 10px 0 0; padding: 5px 15px; border: 1.5px solid #dbdcdc; border-radius: 3px; background-color: #fff; color: var(--color-main); cursor: pointer; }

        .opt-btn:checked+.opt-label { border-color: var(--color-brand); cursor: default; }
        .quantity { padding: 5px 10px; width: 55px; border: 1.5px solid #dbdcdc; }

        .book-info label { margin-bottom: 10px; }


.magazine-info { display: grid; grid-template-columns: 1fr 3fr; grid-gap: 50px; }
    .magazine { text-align: center; }
    .magazine ol { text-align: left; }

.list-issues { display: grid;  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 50px; }

.magazine-display { background-color: #fbfbfb; text-align: center; padding: 50px 0; margin: 50px 0; }
    .magazine-display-content { margin: 0 auto; max-width: 1100px; display: grid; grid-template-columns: 1fr 3fr; grid-gap: 50px; }
    .magazine-display-content h3 { font-weight: bold; font-size: 1.6rem; margin: 20px 0; }
    .rotate { transform: rotate(-5deg); }
        .editorial-message { text-align: left; }
        .magazine-article { display: grid; grid-template-columns: 1fr 2fr; grid-gap: 30px; margin-bottom: 30px; }
            .magazine-article h3 { font-weight: bold; }


/* Academy Page */    
.counting-value { display: grid; grid-template-columns: 1fr 1fr; text-align: center; color: var(--color-light-grey); text-transform: uppercase; max-width: 300px; margin-top: 45px; grid-gap: 30px; }
    .counting-value div { max-width: 85px; }
        .value { font-size: 20px; display: block; font-weight: bold; color: var(--color-white); text-align: center; }

.count-first { border: 4px solid var(--color-brand); }
.count-second { border: 4px solid var(--color-secondary); }
.count-third { border: 4px solid #24851f; }
.count-fourth { border: 4px solid #a18a0c; }

.academy-programs { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px; margin-bottom: 30px; margin-top: 40px; }

.programs-container { position: relative; } 
.programs-container img { filter: grayscale(0%); transition: all 0.2s linear; }  
.programs-container img:hover { filter: grayscale(100%); }  

    .programs-container .bottom-left { position: absolute; bottom: 14%; left: 4%; background: rgba(0, 0, 0, 0.6); padding: 0 10px; } 
    .programs-container h4 { color: var(--color-white); font-weight: bold; font-size: 1.5rem; text-transform: uppercase; padding: 6px; }

    .find-your-program { margin: 50px auto; }
    .find-your-program h2 { font-size: 2rem; font-weight: bold; line-height: 40px; margin-bottom: 10px; text-transform: uppercase; }

    .select-steps { display: flex; font-weight: 500; font-size: 1.1rem; gap: 30px; margin: 50px 0 40px; }

    div.list {  counter-reset: list-number; }
    div.list div:before { counter-increment: list-number; content: counter(list-number); }
    div.list div:before {
            counter-increment: list-number;
            content: counter(list-number);
            margin-right: 10px;
            margin-bottom:10px;
            width:35px;
            height:35px;
            display:inline-flex;
            align-items:center;
            justify-content: center;
            font-size:16px;
            background-color: var(--color-secondary);
            border-radius:50%;
            color: var(--color-white);
          }

          div.list div::after { margin-left: 20px; content: "→"} 
        
  .presenters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); grid-gap: 40px; text-align: center; margin: 30px 0; }  
      .presenter img { -webkit-border-radius: 10px;
                          -moz-border-radius: 10px;
                               border-radius: 10px;
                               filter: grayscale(0%);
                               transition: all 0.2s linear;
                              }      

      .presenter img:hover { filter: grayscale(100%); } 
      .presenters h5 { font-weight: 600; }
 .program-finder { padding: 20px; background-color: var(--color-secondary); color: var(--color-white); max-width: 275px; justify-self: end; } 
 .program-finder h3 { font-size: 1.6rem; text-transform: uppercase; }


 /* Custom checkbox */
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; }
    .container:hover input ~ .checkmark { background-color: #ccc; }
    .container input:checked ~ .checkmark { background-color: #2196F3; }
    .checkmark:after { content: ""; position: absolute; display: none; }
    .container input:checked ~ .checkmark:after { display: block; }
    .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

#program-finder-form { margin: 10px 0; }
#program-finder-form label { display: flex; flex-direction: column; margin: 10px 0; }

.check-text { padding-left: 40px; }

.upcoming h2 { font-size: 2rem; font-weight: bold; line-height: 40px; margin-bottom: 10px; text-transform: uppercase; }

.upcoming-news { margin: 28px 0 0 30px; }

.upcoming-news .time { position: absolute; top: 0px; left: -30px; width: 152px; padding: 8px 10px; text-transform: uppercase; text-align: center; font-size: 12px; line-height: 24px; font-weight: 500; letter-spacing: 2px;  background: var(--color-brand); color: var(--color-white); -webkit-transform: rotate(-90deg) translateX(-100%); transform: rotate(-90deg) translateX(-100%); -webkit-transform-origin: top left; transform-origin: top left; }

.upcoming-news.location { display: block; margin: 0 0 10px; font-size: 12px; line-height: 14px; color: #9e9e9e; }

.upcoming-news { font-weight: 400; position: relative; margin: 18px 0px 0 15px; }

.upcoming-news .link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.upcoming-news-wrap { -ms-flex-negative: 0; flex-shrink: 0; }

.upcoming-news-wrap { width: 100%; height: 100%; position: relative;  -webkit-transition-property: -webkit-transform; transition-property: transform; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 50px 80px; }

.upcoming-news-holder { padding: 30px 40px;  background-color: #f7f7f7; }

.didnt-find { background-color: var(--color-secondary); color: var(--color-white); max-width: 1400px; margin: 60px auto; padding: 40px; display: flex; gap: 30px; align-items: center; }
    .didnt-find h3 { font-size: 1.8rem; font-weight: bold; line-height: 40px; margin-bottom: 10px; text-transform: uppercase; max-width: 100%; }
    .didnt-find .btn { min-width: 200px; text-align: center; height: 50px; }


.testimonials-wrap { max-width: 1400px; margin: 80px auto; }
.testimonials-wrap h3 { font-size: 1.8rem; font-weight: bold; line-height: 40px; margin-bottom: 30px; text-transform: uppercase; max-width: 100%; }
    .testimonials { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 50px; position: relative; }    
        .testimonial { background-color: #f6f6f6; padding: 40px 50px 10px; position: relative; }
        .testimonial blockquote, .testimonial h5, .testimonial p { text-align: center; }
        .testimonial h5 { font-weight: 600; }
        .testimonial p { margin-bottom: 15px; }

        .testimonial::before { content: '"'; font-size: 7rem; position: absolute; top: 65px; left: 25px;  bottom: -20px; color: #898989; }

.calendar-icon { display: flex; justify-content: flex-end; }

        
/* ===================================
    05. Footer
====================================== */

#subscribe-to-magazine { background: var(--color-brand); text-align: center; display: flex; flex-wrap: wrap; justify-content: center; padding: 20px; }
    #subscribe-to-magazine h5 { font-size: 1.6rem; color: var(--color-white); font-weight: 600; padding-top: 4px; padding-right: 20px; }

#subscribe-to-academy { background: var(--color-secondary); text-align: center; display: flex; flex-wrap: wrap; justify-content: center; padding: 20px; }
    #subscribe-to-academy h5 { font-size: 1.6rem; color: var(--color-white); font-weight: 600; padding-top: 4px; padding-right: 20px; }

footer { background: #17222b; font-size: 0.8rem; }
    .footer { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; color: var(--color-white); padding: 60px 0; color: var(--color-light-grey); grid-gap: 100px; }
    .footer-column { border-right: 1px solid #333; }
    footer h5 { color: var(--color-white); font-size: 1rem; margin-bottom: 10px; font-weight: 500; }
    footer a { color: var(--color-light-grey); }
    footer a:hover { color: var(--color-white); }

    .copyright { border-top: 1px solid #333; color: var(--color-light-grey); text-align: center; padding: 30px 0; }
    .footer-logo { margin: 20px 0 0; display: block; }

#newsletter { margin-top: 20px; display: flex; }
#newsletter input { width: 90%; background: var(--color-white); color: var(--color-grey); padding: 5px 10px; } 
#newsletter .submit { background: var(--color-white); width: 40px; height: 40px; background: url(../images/arrow-submit.gif) no-repeat; cursor: pointer; padding-right: 10px; }

.academy-banners img { background-color: var(--color-opacity-grey); padding: 12px; }

/* New homepage */

.menu-search { background: var(--color-white); float: right; color: var(--color-main); margin-top: 6px; padding: 3px 6px; }

.menu-search input { width: 150px; }


.navbar a { padding: 10px 25px; }

.header-icons { margin-top: -10px; }
    .social-icons { display: flex; justify-content: end; margin-bottom: 15px; }
    .social-icons li { display: inline; margin: 0 5px; }
    .social-icons .fa { font-size: 17px; }

    .two-banners { grid-template-columns: 728px 1fr; }   
    .tm-banner { display: grid; justify-content: end; }

.footer-social-icons .social-icons { justify-content: start; margin-top: 15px; }

.language { color: var(--color-white); min-width: 50px; }


#wp-calendar { background-color: #eee; width: 100%; margin-top: -30px; color: var(--color-main); }
    #wp-calendar table { border-spacing: 0; border-collapse: collapse; width: 100%; }
        #wp-calendar td,  #wp-calendar th { font-size: 0.9em; text-align: center; border: 2px solid #fff; }
        #wp-calendar th { background: #d2232b; font-weight: bold; color: var(--color-white); }
        #wp-calendar a { color: var(--color-brand); }
        #wp-calendar caption { color: var(--color-white); }

 .subscribe-action { display: grid; grid-template-columns: 320px 1fr; grid-gap: 10px; }
 
 .or {
            text-align: center;
            display: block;
            margin-top: 15px;
            font-size: 15px;
            max-width: 320px;
        }

        .or:before {
            display: inline-block;
            content: "";
            border-top: 0.1rem solid var(--color-light-grey);
            width: 30%;
            margin: 0 1rem;
            transform: translateY(-0.4rem);
        }

        .or:after {
            display: inline-block;
            content: "";
            border-top: 0.1rem solid var(--color-light-grey);
            width: 30%;
            margin: 0 1rem;
            transform: translateY(-0.4rem);
        }

.publish-with-us { display: block; max-width: 320px; margin-top: 10px; }

.headline-view-all { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 20px; }
.books h4, .events h4 { margin-bottom: 0; }
h6 a { background-color: var(--color-brand); color: var(--color-white); margin-bottom: 10px; padding: 2px 5px; }
h6 a:hover { background-color: var(--color-main); color: var(--color-white); }
.individual-item { justify-self: end; }

.previous-issues { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-gap: 50px; }

#subscribe-to-newsletter { background: #ebebeb; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; padding: 20px; position: relative; bottom: 10px; }
    #subscribe-to-newsletter h5 { font-size: 1.6rem; color: var(--color-brand); font-weight: 600; padding-top: 4px; padding-right: 20px; }
    #subscribe-to-newsletter #newsletter { margin-top: 0px; display: flex; }


.article-with-banner { display: grid; grid-template-columns: 336px 1fr; grid-gap: 30px; }    


h3 {
    max-width: 300px;
    -webkit-line-clamp: 2;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.popular-news p {
    max-width: 300px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.wrap-news { margin-top: 50px; }

/* ===================================
    06. mQueries
====================================== */


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

    header { padding: 0 20px; }
    .navbar a { padding: 10px; }
    .page-width { padding: 0 20px; }

    .footer { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; color: var(--color-white); padding: 60px 20px; color: var(--color-light-grey); grid-gap: 20px; }
    .footer-column { border-right: none; }

    .emphasized-content { padding: 0; position: relative; top: 0px; }
    .content { grid-template-columns: 3fr 1fr; }

    .list-of-authors img { width: 100%; }

    .news-page .emphasized-content { padding: 0; position: relative; top: 0px; }

    .column a { float: none; color: var(--color-light-grey); padding: 16px 16px 10px 16px; text-decoration: none; display: block; text-align: left; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .column h3 { padding-left: 15px; padding-top: 10px; font-size: 1.2rem; color: var(--color-white); }

}

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

    .tm-mag-description .btn { display: block; text-align: center; margin: 10px 0; }
    .tm-mag-description h2 { line-height: 48px; }
    .tm-mag-description { background-color: #fafafa; padding: 50px; }
    .split-screen-description { padding: 50px; }

    .news-sidebar { max-width: 100%; justify-self: left; }

    .two-banners { grid-template-columns: 1fr 1fr; }  
    
    #wp-calendar { margin-top: 0px; }

}

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

    .navbar a { font-size: 14px; }

    .top-left {
        position: relative;
        top: 0;
        left: 0;
        padding: 10px 30px;
      }

      .counting-value {
        margin-top: 25px;
        grid-gap: 10px;
        color: var(--color-main);
      }

      .value { color: var(--color-main); }

}

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

    mark { background-color: var(--color-main); color: var(--color-white); font-size: 1.5rem; font-weight: 600; line-height: 40px; }
    .main-news { grid-template-columns: 1fr; grid-gap: 10px; border-right: 0; padding-right: 0; }
    .two-banners { grid-template-columns: 1fr; margin: 20px auto; grid-gap: 10px; }   
    
    .more-news { grid-template-columns: 1fr; grid-gap: 10px; }
    .split-news { grid-template-columns: 1fr; }

    .transformers-magazine {  grid-template-columns: 1fr; }
    .split-screen {  grid-template-columns: 1fr; }

    .tm-mag-description { padding: 50px; }
        
    .header-icons { margin-top: 0; }
    .ticker-wrapper-v .heading { padding: 4px 10px 4px 20px; }
    .rss-icon { width: 34px; float: left; left: 10px; }
    .two-additional-news { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; }
    .hide-tablet { display: none!important; }   
    .secondary-news { grid-template-columns: 1fr; }

    .four-additional-news { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 50px; } 

    .bottom-left { position: relative; bottom: 0; left: 0; padding: 20px; background: none; }
   
    .transformers-academy h2 { font-size: 3rem; margin-bottom: 10px; color: var(--color-main); }
    .transformers-academy h3 { font-size: 1rem; margin-bottom: 20px; color: var(--color-main); }

    .transformers-academy p { color: var(--color-main); }

    .order-1 { order: 1; }
    .order-2 { order: 2; }

    .programmes-and-courses { grid-template-columns: 1fr; }
    .side-menu { border-right: none; }

    .library img { width: 100%; }

    .trending { grid-template-columns: 1fr 1fr; }

    .module { display: grid; grid-template-columns: 1fr; margin: 10px 0; }

    .preview-course { width: 100%; }

    .news-big { grid-template-columns: 2fr 1fr; }

    .news-page .emphasized-content { position: relative; top: 0;  padding: 0; }

    .news-page-list { grid-template-columns: 1fr; grid-gap: 20px; }

    .related-content { padding: 10px; margin: 20px; }
        .list-related-content { grid-template-columns: 1fr 1fr; }

    .magazine-display-content { padding: 0 20px; }

    .social-icons { display: flex; justify-content: center; margin-bottom: 15px; }

    .previous-issues { grid-template-columns: 1fr 1fr 1fr; grid-gap: 50px; }

    .article-with-banner { display: grid; grid-template-columns: 1fr; grid-gap: 30px; }    

    .select-steps { display: inline-block; gap: 30px; margin: 20px 0 30px; }
    div.list div::after { margin-left: 0px; content: none; } 
    .find-your-program { margin: 0px; }

    .program-finder { max-width: 100%; margin-bottom: 30px; justify-self: center; }

    .content h2 { font-size: 1.4rem; }

    .upcoming-news { margin: 10px 0px 0 15px; }

    .didnt-find { margin: 30px auto; }

}

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

    #desktop-menu { display: none; }
    .desktop { display: none; }
        .rss-icon { position: absolute; }
            .ticker-divider { display: none; }
            .news-ticker-v li { padding-left: 10px; }
   
    .super-leaderboard { margin: 0px auto; }

    .header-mobile { display: block; padding: 0; }
            .header-mobile-content { display: grid; grid-template-columns: 1fr 217px 1fr; }
            .icons-mobile { justify-self: right; margin: 15px 10px 0 0; display: flex; flex-wrap: wrap; }
                .icons-mobile li { list-style-type: none; padding: 0 5px; }  
                .user { background: url(../images/user.png) no-repeat; width: 22px; height: 25px; display: block; margin-top: 3px; }
                header .btn { padding: 5px; font-size: 0.76rem; text-transform: uppercase; }
                  .mobile-btn { display: block; text-align: center; padding: 3px; font-size: 0.8rem; }
                  .sidebar-banners { width: 100%; display: none; }
                  .subscribe { max-width: 100%; }

    .featured-img { margin-bottom: 10px; }
    .featured-img .centered { display: none; }
    .article-page h3 { font-size: 1rem; }

    .book-info, .magazine-info { grid-template-columns: 1fr; }

    .book-info .btn, .magazine-info .btn, .editorial-message .btn { display: block; text-align: center; margin: 10px 0; }

    .content { grid-template-columns: 1fr; }

    .popular-news p { max-width: 100%; }
   
    .upcoming-news-wrap { grid-template-columns: 1fr; }

    .testimonials-wrap { margin: 0 30px 50px; }
        .testimonials { grid-template-columns: 1fr; }    

}

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

    .hide { display: none!important; }   
    .ticker-wrapper-v .heading { display: none; }
    .main { display: grid; grid-template-columns: 1fr; grid-gap: 55px; }

    h3 { font-size: 1rem; font-weight: 500; line-height: 22px; }

    .from-the-news article { margin-bottom: 20px; }

    .footer { grid-template-columns: 1fr; padding: 30px 20px; grid-gap: 30px; }

    .academy-news article, .events article { margin-bottom: 20px; }

    .latest-in-the-academy { margin: 30px 0 0; }

    .content h1 { font-size: 2rem; }

    .content h2 { line-height: 26px; }

    .split-screen-description { padding: 30px; }
    .split-screen-description h2 { font-size: 2rem; margin-bottom: 20px; }
    .split-screen-description h3 { font-size: 1rem; margin-bottom: 20px; }

    .company-info { grid-template-columns: 1fr; grid-gap: 20px; }

    .companies-list { margin-top: 30px; grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)); }

    .news-big { grid-template-columns: 1fr; }

    .list-news { grid-template-columns: 1fr 1fr; }

    .news-additional { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; }

    .magazine-display-content { grid-template-columns: 1fr; }

    .magazine-article { grid-template-columns: 1fr; }
    .subscribe-action { grid-template-columns: 1fr; grid-gap: 10px; }
    .or, .publish-with-us  { max-width: 100%; }

    #subscribe-to-newsletter { background: #ebebeb; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; padding: 20px; position: relative; bottom: 0px; }

    #subscribe-to-newsletter h5 { margin: 0 0 20px; }

    .academy-programs { grid-template-columns: 1fr; }

    .didnt-find { flex-direction: column; }

    .didnt-find .btn { min-width: 100%; }

    .testimonials-wrap { margin: 40px 30px 50px; }

    .calendar-icon { justify-content: center; }

    .wrap-news { margin-top: 10px; }

    .wrap-news h2 {font-size: 2rem; }


}

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

    img { max-width: 100%; }
    footer img, header img { width: auto; }

    .header-mobile-content { display: grid; grid-template-columns: 1fr 2fr 1fr; }
    .icons-mobile { justify-self: right; margin: 10px 8px 0 0; display: flex; flex-wrap: wrap; }
    #subscribe-to-magazine { padding: 10px; }
    #subscribe-to-magazine h5 { font-size: 1rem; margin-bottom: 10px; }
    #subscribe-to-academy { padding: 10px; }
    #subscribe-to-academy h5 { font-size: 1rem; margin-bottom: 10px; }
    .four-additional-news { grid-template-columns: 1fr; grid-gap: 20px; } 

    .tm-mag-description { padding: 20px; }
    .tm-mag-description h2 { font-size: 2rem; margin-bottom: 20px; line-height: 35px; }
    .tm-mag-description h3 { font-size: 1rem; margin-bottom: 20px; }

    .five-news, .four-additional-news { grid-gap: 20px; }

    .btn { padding: 10px 20px; }

    .transformers-academy h2 { font-size: 2rem; line-height: 35px; }
    .transformers-academy h3 { font-size: 1rem; margin-bottom: 20px; }

    .split-text { grid-template-columns: 1fr; grid-gap: 0; }

    .job { grid-template-columns: 1fr; padding: 20px; text-align: center; grid-gap: 30px; }
        .job-item-2 { justify-self: center; text-align: center; }
        .jobs h2 { font-weight: bold; }
        .jobs h3 { font-size: 0.9rem; }
        .job h4 { font-size: 1.2rem; }
        .employer { font-size: 1rem; }
        .employers { justify-self: center; max-width: 100%; width: 100%; margin: 20px 0 10px; }
    
    .job-posting { padding: 20px; }

    .align-left { float: none; margin: 0 auto 30px; text-align: center; }
    
    .circled { display: block; }

    .programmes-and-courses { grid-gap: 20px; }

    .list-related-content { grid-template-columns: 1fr; }

    .book-author .tablinks { font-size: 11px; line-height: 20px; }
    .book-author .companies-list { padding: 0px; }
    .article-page h2 { font-size: 2rem; line-height: 36px; }

    .language { color: var(--color-main); }

    .previous-issues { grid-template-columns: 1fr 1fr; grid-gap: 20px; }

    .latest-in-the-academy h4, .events h4, .books h4 { font-size: 1.3rem; }

    .more-news-wrap { padding: 20px 0; }

    .academy-programs { grid-gap: 10px; }

    .programs-container h4 { font-size: 1.2rem; }
      
}