/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
@import url('https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css');
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Roboto');

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    font-family: 'Roboto', sans-serif;
    background:#fff!important;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight:100!important;
    line-height: 1.1;
    color: inherit;
}



.active{color:#ffc722;}

.custom_scrollbar::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.custom_scrollbar::-webkit-scrollbar-track {
	background-color: rgba(113,112,107,0.1);
	-webkit-border-radius: 5px;
}
.custom_scrollbar::-webkit-scrollbar-thumb:vertical {
	background-color: rgba(0,0,0,.2);
	-webkit-border-radius: 6px;
}
.custom_scrollbar::-webkit-scrollbar-thumb:vertical:hover,
.custom_scrollbar::-webkit-scrollbar-thumb:horizontal:hover {
	background: rgba(113,112,107,0.2);;
}
.custom_scrollbar::-webkit-scrollbar-thumb:horizontal {
	background-color: rgba(0,0,0,.2);
	-webkit-border-radius: 6px;
}







/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their container-fluid-fluid-fluid-fluids:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body{font-family: 'Roboto', sans-serif!important; font-size:16px!important;background:#fff!important;}
 .horizontal-collapse {
    height: 70px;
  }

p {
   font-size: 16px!important;; 
    font-weight:normal!important;;
    letter-spacing: 0.010em;
    line-height: 24px!important;;
    margin: 0!important;;
}

h3{font-family: 'Roboto', sans-serif!important;}

  .navbar-collapse.in {
    overflow-y: hidden;
  }


section {
    padding: 0px 0px!important;
}



.news-row{padding-top:40px; padding-bottom:50px;}
/*.coach-area{padding-top:60px; padding-bottom:90px; }*/
.coach-area{padding-bottom:30px; }
.list-match{padding-top:50px; padding-bottom:50px; }





.jumbotron{padding-top:0px; padding-bottom:0px;background-image: url("../img/1.jpg");background-position: 50% 50%;
    background-size: cover;background-repeat: no-repeat;height:550px;margin-bottom:0px;}
.main-content {padding-top:10px; padding-bottom:48px;background-image: url("../img/content-bg.png");background-position: 50% 50%;
    background-size: cover;background-repeat: no-repeat;}

.navbar-default .navbar-nav>.active>a{
    color: #4a7ebb!important;
    background-color:none!important;
    border-bottom:1px solid #4a7ebb!important;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #4a7ebb!important;
    background-color:none!important;
}

.md-tabs.md-default-theme .md-tab, md-tabs .md-tab {
    color: rgba(0,0,0,1);
    text-transform: inherit!important;
    font-family: 'Roboto', sans-serif!important;
    font-size:16px;
    font-weight:400;
}
.md-display-2 {
    font-size: 20px;
    font-weight: 200;
    line-height: 40px;
    font-family: 'Roboto Slab', serif;
    margin-top:0;
   
   
}


.navbar {
    position: relative;
    min-height: 80px;
    margin-bottom:0px!important;
    border: 1px solid transparent;
}


.navbar-default {
    background-color: rgba(0,0,0,0.7);
    border-color:transparent!important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.4);
}

.navbar-brand{
    position: relative;
    min-height: 80px!important;
    padding-left:0px;
    padding-top:0px!important;
    padding-bottom:0px!important;
    background:#ffc722!important; 
    margin-top:-1px!important;
    margin-bottom:0px!important;
    z-index:3;
    width:240px;
   
    
    
}




.navbar-brand:hover{
    
    background:#ffc722!important; 

    
}

.navbar-brand:before {
    text-indent:-3000px;
    width:67px;
   content: '.';
    transform: skewX(-33deg);
    -webkit-transform: skewX(-33deg);
    background: #ffc722;
    position: absolute;
    left:-25px;
    top: 0;
    bottom: 0;
    z-index:-1;

    
    
}
.navbar-brand:after {
    text-indent:-3000px;
    width:67px;
   content: '.';
    transform: skewX(-33deg);
    -webkit-transform: skewX(-33deg);
    background: #ffc722;
    position: absolute;
    left:200px;
    top: 0;
    bottom: 0;
    z-index:-1;
    
    
}

  

.navbar-brand img{margin-top:0px!important; margin-bottom:0;}
.logo-sport{position: relative!important; left:0px!important;top:10px;}

.navbar-nav>li>a {
    padding: 0px 12px!important;
    font-family: 'Oswald', sans-serif;
    color:#fff!important; 
    font-size:16px; 
    margin-top:32px; 
    text-transform:uppercase;
      -moz-transition: all 0.1s ease-in;
    /* WebKit */
    -webkit-transition: all 0.1s ease-in;
    /* Opera */
    -o-transition: all 0.1s ease-in;
    /* Standard */
    transition: all 0.1s ease-in;
    
}

.navbar-nav>li>a:hover{color:#ffc722!important;}



#participate-btn{margin-top:-12px;margin-left:20px;  }

.navbar-nav>li>a.active{color:#ffc722!important; }
.tabsdemoDynamicHeight{margin-bottom:30px;}
.tabsdemoDynamicHeight md-content {
  background-color: transparent !important; }
  .tabsdemoDynamicHeight md-content md-tabs {
    background: #f6f6f6;
    border: 1px solid #e1e1e1; }
    .tabsdemoDynamicHeight md-content md-tabs md-tabs-wrapper {
      background: white; }
  .tabsdemoDynamicHeight md-content h1:first-child {
    margin-top: 0; }

md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar {
    color: #00ba88;
    background: #00ba88;
}
.tabsdemoDynamicHeight{margin-top:30px; }
.tabsdemoDynamicHeight md-content md-tabs {
    background: #fff;
    border: 0px solid #e1e1e1; 
   
}

.content-box h3{font-size:30px;font-family: 'Roboto Slab', serif!important;margin-bottom:30px;color:#25272a!important;}

.content-box h3:after {
    background: #7d7d7d;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    top: 22%;
    width: 8%;
    background:#25272a!important; 
   
}
.content-box p{font-size:16px!important;line-height:30px!important;color:#6f7a88!important; font-family: 'Roboto', sans-serif!important;font-weight:200!important;margin-bottom:20px!important; }
#main-btn{display: inline-block;
    padding: 0px 25px!important;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height:40px!important;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #fff;
    border-radius: 00px;
    background:transparent; 
    color:#fff;
    text-transform: uppercase;
    font-size:16px;
   -moz-transition: all 0.3s ease-in;
    /* WebKit */
    -webkit-transition: all 0.3s ease-in;
    /* Opera */
    -o-transition: all 0.3s ease-in;
    /* Standard */
    transition: all 0.3s ease-in;

   
}
#main-btn:hover{background:#ffc722;color:#444!important; }
.banner{color:#fff;padding:40px 0px 0px 0px;}
.banner h1{font-family: 'Oswald', sans-serif;text-transform: uppercase;}
.hero-para{margin:30px auto;font-family: 'Roboto', sans-serif!important;font-weight:200!important;line-height:26px!important;}
.btn-hero{background-color:#ffc722;border-radius:0;color:#101010!important;padding:10px 30px; font-family: 'Oswald', sans-serif;text-transform:uppercase;
    margin-top:30px;font-size:16px;border:1px solid #444;}
.icon-arrow-right-circle{margin-left:5px;}
.btn-hero:hover{background-color:#ffc722;color:#101010!important;transform:uppercase;border:1px solid #444;}
.holder-text{background:  rgba(0,0,0,0.6);padding:20px 30px 30px 30px;}

.box-item{border-bottom:1px solid #ccc;padding-bottom:50px; margin-bottom:50px;}
.no-border{border-bottom:0px solid #ccc;}

.background-bg {
    position: absolute;
    top: 2340px;
    width: 100%;
    height: 800px;
    background: url(../img/bg.png) no-repeat center top;
    background-size: 100% auto;
    opacity: 1;
}

.card-box{background:#ffc722; padding:20px; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.4);margin-top:40px;border:10px solid #fff;color:#000;border-width: 15px 15px 30px 15px;}

.card-box h2{font-family: 'Oswald', sans-serif;text-transform:uppercase;font-size:24px;}

.btn-hero-two{background-color:#fff;border-radius:0;color:#101010!important;padding:8px 20px; font-family: 'Oswald', sans-serif;text-transform:uppercase;
    margin-top:20px;font-size:16px;border:1px solid #fff;}

   

.bottom-margin-none{margin-bottom:0px;}

.about-club {padding-top:30px; padding-bottom:60px;background:#fff;color:#444;
    background-size: cover;background-repeat: no-repeat;position: relative;}

/*
.about-club:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
   background: #4b6cb7;  
background: -webkit-linear-gradient(to right, #182848, #4b6cb7);  
background: linear-gradient(to right, #182848, #4b6cb7); 




opacity:0.8;
}
*/

.box-text{margin-top:30px; }
.box-text:before {
    content: '';
    width: 27%;
    position: absolute;
    top: 23%;;
    bottom: 70px;
    left: 18%;
    border: solid #444;
    border-width: 1px 0px 1px 1px;
    min-height: 252px;
}
.box-text:after {
    content: '';
    width: 27%;
    position: absolute;
    top: 23%;
    bottom: 70px;
    right: 18%;
    border: solid #444;
    border-width: 1px 1px 1px 0;
    min-height: 252px;
}



.hero-para-two{margin:30px auto;font-family: 'Roboto', sans-serif!important;font-weight:200!important;line-height:30px!important;font-size:16px; }
.about-club h2{font-family: 'Oswald', sans-serif;text-transform:uppercase;font-size:36px;}
.btn-hero-three{background-color:#ffc722;border-radius:0;color:#101010!important;padding:8px 20px; font-family: 'Oswald', sans-serif;text-transform:uppercase; margin-top:20px;font-size:16px;border:1px solid #ffc722;}
.btn-hero-three:hover{background-color:#ffc722;border-radius:0;color:#101010!important;padding:8px 20px; font-family: 'Oswald', sans-serif;text-transform:uppercase; margin-top:20px;font-size:16px;border:1px solid #ffc722;}

.schedule-club {padding-top:10px; padding-bottom:60px;background-image: url("../img/schedule-bg.png");background-position: 50% 0%;position: relative;color:#fff;
    background-size: cover;background-repeat: no-repeat;}
.match-news{font-family: 'Oswald', sans-serif;text-transform:uppercase;font-size:36px;margin-bottom:20px;color:#fff; position: relative;margin-top:30px;}

.match-news:before {
    content: "";
    display: block;
    position: absolute;
    top: 41%;
    border: solid #fff;
    border-width: 1px 0px 1px 0px;
    width: 5%;
    left: 37%;
    height: 10px;
}

.match-news:after{
    content: "";
    display: block;
    position: absolute;
    top: 41%;
    border: solid #fff;
    border-width: 1px 0px 1px 0px;
    width: 5%;
    right: 37%;
    height: 10px;
}

.match-schedule{font-family: 'Oswald', sans-serif;text-transform:uppercase;font-size:36px;margin-bottom:0px;color:#fff; position: relative;}

.match-schedule:before {
    content: "";
    display: block;
    position: absolute;
    top: 41%;
    border: solid #fff;
    border-width: 1px 0px 1px 0px;
    width: 5%;
    left: 38%;
    height: 10px;
}

.match-schedule:after{
    content: "";
    display: block;
    position: absolute;
    top: 41%;
    border: solid #fff;
    border-width: 1px 0px 1px 0px;
    width: 5%;
    right: 38%;
    height: 10px;
}
.heading-about{font-family: 'Oswald', sans-serif;text-transform:uppercase;font-size:36px;margin-bottom:50px;color:#444; position: relative;}

.heading-about:before {
    content: "";
    display: block;
    position: absolute;
    top: 41%;
    border: solid #444;
    border-width: 1px 0px 1px 0px;
    width: 5%;
    left: 38%;
    height: 10px;
}

.heading-about:after{
    content: "";
    display: block;
    position: absolute;
    top: 41%;
    border: solid #444;
    border-width: 1px 0px 1px 0px;
    width: 5%;
    right: 38%;
    height: 10px;
}

.match-coach{font-family: 'Oswald', sans-serif;text-transform:uppercase;font-size:36px;margin-bottom:50px;color:#444; position: relative;}

.match-coach:before {
    content: "";
    display: block;
    position: absolute;
    top: 41%;
    border: solid #444;
    border-width: 1px 0px 1px 0px;
    width: 5%;
    left: 34%;
    height: 10px;
}

.match-coach:after{
    content: "";
    display: block;
    position: absolute;
    top: 41%;
    border: solid #444;
    border-width: 1px 0px 1px 0px;
    width: 5%;
    right: 34%;
    height: 10px;
}

.match-gallery{font-family: 'Oswald', sans-serif;text-transform:uppercase;font-size:36px;margin-bottom:30px;color:#444; position: relative;}

.match-gallery:before {
    content: "";
    display: block;
    position: absolute;
    top: 41%;
    border: solid #444;
    border-width: 1px 0px 1px 0px;
    width: 5%;
    left: 39%;
    height: 10px;
}

.match-gallery:after{
    content: "";
    display: block;
    position: absolute;
    top: 41%;
    border: solid #444;
    border-width: 1px 0px 1px 0px;
    width: 5%;
    right: 39%;
    height: 10px;
}
.match-participant:before {
    left: 37%;
}

.match-participant:after{
    right: 37%;
}

.photo-box .thumbnail .caption{display:none;}

.thumbnail h3{background:#212121;padding:10px;font-size:16px; text-transform:uppercase;font-family: 'Oswald', sans-serif!important;margin:0;height:40px; font-weight:bold!important;letter-spacing:1px; display: inline-block;color:#fff;    }
.thumbnail .caption{padding:0; margin:0;border-bottom:1px solid #ccc;border-right:1px solid #ccc; }
.btn-hero-four{background-color:#fff;border-radius:0;color:#101010!important;padding:8px; font-family: 'Oswald', sans-serif;text-transform:uppercase;
    font-size:16px;border:1px solid #fff;}

.btn-hero-two:hover{background:#fff;border-color:#fff;  }
.btn-hero-four:hover{background:#fff;border-color:#fff;  }
.competition{background:transparent!important;color:#444;padding:20px 0; }
.competition h2 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    margin:0 0 0px 0;
    font-weight:bold!important;
    margin-bottom:40px; 
}
 .divider{padding:0 5px;display: inline-block; }

.news-box,.admission-box,.game-news{background:#fff; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);padding:30px;overflow-y:scroll;}


.game-news{margin-bottom:20px; }
.event-list{border-bottom:1px dotted #ccc;margin-top:20px;padding-bottom:10px;  }
.event-list h4{font-family: 'Oswald', sans-serif;text-transform: uppercase;font-size: 18px;font-weight:bold; }
.competition h2:before {
    background: #7d7d7d;
   /* content: "";*/
    display: block;
    height: 1px;
    position: absolute;
    top: 10%;
    width: 22%;
    background: #25272a!important;
}

.competition h2:after {
    background: #7d7d7d;
    /*content: "";*/
    display: block;
    height: 1px;
    position: absolute;
    top: 11%;
    width: 12%;
    background: #25272a!important;
}


.news-box h2:before {
    background: #7d7d7d;
    /*content: "";*/
    display: block;
    height: 1px;
    position: absolute;
    top: 10%;
    width: 22%;
    background: #25272a!important;
}

.news-box h2:after {
    background: #7d7d7d;
    /*content: "";*/
    display: block;
    height: 1px;
    position: absolute;
    top: 11%;
    width: 12%;
    background: #25272a!important;
}
.news-list{padding:10px 0; }
.news-list h4{font-family: 'Oswald', sans-serif;text-transform: uppercase;font-size: 18px;font-weight:bold!important;color:#444;letter-spacing:1px; }
.read-more{color:#1155a9;font-size:14px;}
.fa-calendar{margin-right:5px;}
.news-date{font-size:14px;color:#666666;margin-right:10px; font-weight:300; }

section#contact {
    background-color: #222222;
    background-image: url('http://artdnaswitchbd.com/componants/images/map-image.png');
    background-position: center;
    background-repeat: no-repeat;
}
section {
    padding: 30px 0PX;
}
section#contact .section-heading {
    color: white;
}
section#contact .form-group {
    margin-bottom: 25px;
}
section#contact .form-group input,
section#contact .form-group textarea {
    padding: 15px;
}
section#contact .form-group input.form-control {
    height: auto;
}
section#contact .form-group textarea.form-control {
    height: 207px;
}
section#contact .form-control:focus {
    border-color: #fed136;
    box-shadow: none;
}
section#contact ::-webkit-input-placeholder {
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: #a2a2a2;
    font-size:14px; 
}
.gellary_bg_none img{
	width: 100%;
	height: 250px;
}
section#contact :-moz-placeholder {
    /* Firefox 18- */
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    color: #eeeeee;
}
section#contact ::-moz-placeholder {
    /* Firefox 19+ */
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    color: #eeeeee;
}
section#contact :-ms-input-placeholder {
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    color: #eeeeee;
}
section#contact .text-danger {
    color: #e74c3c;
}

.about_our_company{
    text-align: center;
}
.about_our_company h1{
    font-size: 25px;
}
.titleline-icon {
    position: relative;
    max-width: 100px;
    border-top: 4px double #F99700;
    margin: 20px auto 20px;
}
.titleline-icon:after {
    position: absolute;
    top: -11px;
    left: 0;
    right: 0;
    margin: auto;
    font-family: 'FontAwesome';
    content: "\f141";
    font-size: 20px;
    line-height: 1;
    color: #F99700;
    text-align: center;
    vertical-align: middle;
    width: 40px;
    height: 20px;
    background: #ffffff;
}

.send-btn{width:100%;background:#ffc722;color:#101010!important;text-transform:uppercase;border:1px solid #ffc722;padding:14px 12px; font-weight:bold; }


    .sticky{
      bottom:0;
      left:0;
      padding:0;
      position:fixed;
      top:0;
      width:100%;
      height:50px!important;
      color:#fff;   
      background:#000;
      z-index:1000;
      border-radius:0px; 
    }


{padding-top:20px; }

.box-text:before {
    content: '';
   display:none;
}
.box-text:after {
    content: '';
    display:none;
    
}
    
    
    
}
@media only screen and (max-width: 767px) {
    .navbar-nav{background:#254061;}
   .navbar-nav>li>a {
    padding-top: 0px!important;
    padding-bottom:  0px!important;
    font-family: 'Roboto Slab', serif;
    color:#fff!important; 
    font-size:16px; 
    line-height:40px!important;
    border-bottom:1px solid #1d334d;
}
  .navbar-collapse {
     
   
}
  
    .navbar {
    position: relative;
    min-height: 60px!important;
    margin-bottom:0px!important;
    border: 1px solid transparent;
}




.navbar-brand{
    min-height: 60px!important;
    padding-top:0px!important;
    padding-bottom:0px!important;
    
    
}
.navbar-brand img {
 margin-top: 0px;
    margin-bottom: 0;
    width: 70%;
}
  .navbar-default .navbar-toggle {
    border-color: #fff;
}  
 
 .box-text{margin-top:30px; }
    
}
.navbar-default .navbar-toggle {
    border:0px;}
.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 19px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 0px solid transparent;
    border-radius: 4px;
}

 .navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}
.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px;
}
.navbar-toggle .icon-bar {
    display: block;
    width: 30px;
    height: 4px;
    border-radius: 1px;
}   
    
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}



* {
  box-sizing: border-box;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.main .row {
  margin: 8px -16px;
}

/* Add padding BETWEEN each column (if you want) */
.main .row,
.main .row > .column {
  padding: 0px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide columns by default */
}

/* Clear floats after rows */
.main .row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
      background-color: var(--global--color-green) !important;
    color: var(--global--color-primary)!important;
}

/* Add a grey background color on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background color to the active button */
.btn.active {
  background-color: #666;
   color: white;
   background-color: var(--global--color-primary) !important;
    color: var(--global--color-background) !important;
}