@charset "utf-8";
/**************************************************
= font setting
********************/
*{font-family:"Cambria Bold"}
@font-face{ font-family: "Cambria Bold"; src: url("../fonts/Cambria\ Bold/ Bold.eot"); src: url("../fonts/Cambria\ Bold/Cambria Bold.eot?#iefix")format("embedded-opentype"), url("../fonts/Cambria\ Bold/Cambria Bold.woff")format("woff"), url("../fonts/Cambria\ Bold/Cambria Bold.woff2")format("woff2"), url("../fonts/Cambria\ Bold/Cambria Bold.ttf")format("truetype"), url("../fonts/Cambria\ Bold/Cambria Bold.svg#Cambria Bold")format("svg"); font-weight:normal; font-style:normal; font-display:swap; }
@font-face{ font-family: "Cambria Regular"; src: url("../fonts/Cambria\ Regular/ Bold.eot"); src: url("../fonts/Cambria\ Regular/Cambria Regular.eot?#iefix")format("embedded-opentype"), url("../fonts/Cambria\ Regular/Cambria Regular.woff")format("woff"), url("../fonts/Cambria\ Regular/Cambria Regular.woff2")format("woff2"), url("../fonts/Cambria\ Regular/Cambria Regular.ttf")format("truetype"), url("../fonts/Cambria\ Regular/Cambria Regular.svg#Cambria Regular")format("svg"); font-weight:normal; font-style:normal; font-display:swap; }

/**************************************************
= header 上方登入選單
********************/
/*theme-bg 背景色*/
.theme-bg{ background:#ffffff;/*background-image: url(../img/bg.jpg);*/ background-repeat: repeat; position: relative;}

/*模組背景色*/
/*div#main_top,.breadcrumb,div#left,div#middle,div#main_right,div#main_bottom,.module{ background: #fff;}*/
.center-module-bg{background: #fff; min-height: 500px;}
@media (min-width:768px) {
    .center-module-bg{ min-height: 610px;}
}

div#main_top .module,div#left .module,div#middle .module,div#main_right .module,div#main_bottom .module,.module{ background:#ffffff; /*box-shadow: 0px 0px 5px 0px #e0dadc;*/ }
:not(.module-content).module-padding.module-bg { background:#ffffff; /*box-shadow: 0px 0px 5px 0px #e0dadc;*/ }

#ct-content {overflow-x: hidden;}

/**************************************************
= header 上方登入選單
********************/
.login .top-space header{ margin-top: 45px;}
header{ background: unset ;border: none; top: 5px; z-index: 2; right: 10px;}
header>a,header>div{color:#000;}
header>a {border-right: 1px solid #00A19B; padding: 0px 20px;}
header .fontsize button {color: #00A19B; background-color:unset/*rgba(251, 244, 233, 0.9)*/; border:1px solid #00A19B; border-radius: 2px; box-shadow: none; padding:0; }
header .fontsize button:hover {background-color: #00A19B; color: #ffffff; }
header .dropdown svg { fill: #000;}
header a:hover,
header>div:hover{ color:#000; }
header .dropdown:hover svg{ fill: #51595d;}
header .dropdown-content a:hover{ color: #ffffff; background-color: #000; }
.logo,.logo a { font-size: 2rem;  color: #545454;}
.focusable{ opacity: 0;}
.focusable:focus{ opacity: 1;}

@media screen and (max-width: 1199px) {
header{ padding-right: 0;}
}

@media screen and (max-width: 767px) {
.logo a { margin: 0 10px;}
.login .top-space header{ margin-top: 0px;}
header {display: none; }
.theme-bg { background-position: -550px 30px;}
}

@media screen and (max-width:520px){
.theme-bg { background-position: -880px 0px;}
}

/**************************************************
= theme 上方主圖
********************/
.theme {
    position: relative;
    background: #fff;
    height: 100px;
    border-top: #FF8300 solid 5px;
}
.logo a::before {
    content: '';
    display: block;
    background: url(../img/logo.svg) no-repeat;
    background-size: contain;    
    width: 345px;
    height: 65px;
}
.logo h1 {
    margin: 0;
}
h1 strong { position: relative;}
h1 strong.picshow { position: absolute; top: -600px;}

/*20200702 hamburger收合模式*/
@media screen and (max-width: 767px) {
.theme { height: 100px; background: #fff; box-shadow: 0 0 10px #6d6d6d; z-index: 99; position: fixed; top: 0;}
.logo { height: 100px; padding: 0; top: 0;}
.logo img, .logo strong {max-height: 90px; max-width: 90%; padding: 5px 10px;}
.logo strong { top: -5px;}
.theme+div {position: fixed; top: 0; right: 0; /*width: 100%; height: 80%;*/ z-index: 99;}

/*登入狀態*/
.top-space .theme { top: 45px; } 
.top-space .theme+div { top: 45px; height: 70%}
}

/**************************************************
= navbar 橫式選單模組
********************/
.navbar { background-color: #00A19B; }
.navbar ul{ max-width: 1500px; }
.navbar li a{ color:#d1fffd; }
.navbar li:hover a {color:#fff;}
.navrwd-svg svg { fill: #ffffff;}
.navbar li:hover ul a,.navbar ul li a:focus + .navrwd + .menuhidden{ background-color:#ffffff; color:#000; line-height: 30px;}
.navbar li:hover ul a:hover { background-color:#000; color:#fffcfc;}
.navbar li .menuhidden.navbar-menu a { background-color:#ffffff; color:#444;}
.navbar li .menuhidden.navbar-menu a:hover { background-color:#000; color:#fffcfc;}
.navbar li ul li a{ border-bottom:1px solid #b6b6b6; min-width:max-content;}

@media (min-width:768px) {
    .navbar ul li ul {        
        box-shadow: #858585 0px 0px 5px;
    }
}
@media screen and (max-width: 767px) {
.navbar li { width: 100%; background: #20ada8;}
.navbar ul { /*background: #ffffff; color: #ffffff;*/}
.navbar li a { /*background: #20ada8; */color: #d1fffd; width: 100%;}
.navbar ul li{border-bottom: 1px solid #ebf7fd; border-left: 2px solid #ddd;}
.navbar li:hover a{ color: #fff;}
.navbar li:hover ul a {  background-color:#ffffff; color:#20ada8;}	
.navbar li:hover ul a:hover {  background-color:#000; color:#fffcfc;}
.navbar li .menuhidden.navbar-menu a{ background-color:#ffffff; color:#20ada8;}
.navbar li .menuhidden.navbar-menu a:hover { background-color:#000; color:#fffcfc;}
.navbar .show-menu{ color: #fff; background: unset; text-align: right; height: 100px; padding-top: 26px; padding-right: 15px;}
.navbar .show-menu .ct-hamburger svg { fill: #00A19B; width: 50px; height: 50px; background: #fff; padding: 10px; border: #00A19B solid 1px;}
.navbar ul li { border-bottom: 1px solid #fff; position: relative;}
.navrwd { position: absolute; top: 30px; right: 5px;}
.navrwd-svg{ background: rgba(255,255,255,0.8); border: none;}
.navrwd-svg svg{ fill: #00A19B;}

.navbar li ul li { border: 0;}

/*20200702 hamburger收合模式*/
.navbar input[type=checkbox]:checked~#menu { background: unset; position: absolute; overflow-y: auto; display: block; height: 100%; min-width: 300px; width: auto; right: 0;}
/* #menu {width: 70%;float: right;} */
#menu .menu-web a {display: none;}
#main_top { margin-top: 100px; position: inherit;}
.navbar { background-color: unset; }
.ct-sitemap {margin-top: 100px;}
.navbar ul li a:hover+.navrwd+.menuhidden, .navbar .menuhidden:hover {display: inline;}
}

@media screen and (min-width: 1680px){
.navbar>ul>li { padding: 0 18px;}
}

@media screen and (min-width: 992px) and (max-width: 1679px){
.navbar>ul>li {padding: 0 8px;}
}

@media screen and (min-width: 768px) and (max-width: 991px){
.navbar>ul>li {padding: 0 5px;}
}

/**************************************************
= breadcrumb 麵包屑
********************/
.breadcrumb-item + .breadcrumb-item::before {border-left: 8px solid #f3a712;}
.breadcrumb-item.active {color:#000;}
.breadcrumb a{color:#000;}
.breadcrumb a:hover{color:#b16312;}

/**************************************************
= footer 最下方聯絡資訊
********************/
.footerbg{ position: relative; background: #00A19B; /*box-shadow: 0px 0px 5px #002840;*/ color: #fff9f6; background-image: url(../img/footer.png); background-repeat: no-repeat;min-height: auto; padding-top: 0px; margin-top: 20px;}
.footerbg::after {
    content: 'Copyright © 2018 樟樹國際實創高級中等學校 All Rights Reserved';
    display: block;
    background-color: #fff;
    color: #006360;
    padding: 5px;
    text-align: center;
    width: 100%;
}
.footerbg a {color: #fff9f6;}
.connect-links,.connect .text.connect-explorer{ color: #fff9f6;}
.connect-links:hover{text-decoration: none;color: #fff9f6;}
.copyright { color: #ffffff; background-color: #23557d;}

.rwd-show {padding-top: 10px; display: none;}
.rwd-show a {text-decoration: underline;}

@media screen and (max-width: 767px){
.rwd-show {display: block;}
}

/**************************************************
= module title 模組標題
********************/
.module-title { color: #105084;}

/**************************************************
= color
********************/

/* tab頁簽 ********************/
.nav-tabs {border-bottom-color:#ffffff;}
.nav-tabs .nav-item,.nav-pills .nav-item{margin-right: 2px;}
.nav-tabs .nav-item>a,
.nav-pills .nav-item a{ color: #707070; background: #ffffff; border: 1px solid #cccccc ;border-radius: 3px;}
.nav-pills .nav-item a{ border-bottom: 1px solid #f4ffd4;}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {  color: #464646; background: #f5f7f9; border-color: #1f6aa7 #1f6aa7 #1f6aa7;}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {color: #ffffff; background: #1f6aa7; border-color: #1f6aa7 #1f6aa7 #1f6aa7;}
.nav-pills .nav-link:focus,
.nav-pills .nav-link:hover { color: #ffffff; background-color: #ed96af;}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {color: #fff;background-color:#20ada8;}
.nav-tabs .nav-link.disabled,
.nav-pills .nav-link.disabled {color: #868e96;}
.ct-dropdown-menu { background-color: #fff;  border: 1px solid #20ada8;}
.ct-dropdown-item { color: #3a92e9;}
.nav-tabs .nav-item .ct-dropdown-item, .nav-tabs .nav-item .ct-dropdown-item{ border: 0; background: #ffffff; border-top: 1px solid #ededed; color: #9a654a;}
.nav-tabs .nav-item .ct-dropdown-item:focus,
.nav-tabs .nav-item .ct-dropdown-item:hover { color: #ed96af; background-color: #fdf1f4;}



/* table表格 ********************/
.ct-table th,.ct-table td {border-top-color:#ccc;}
.ct-table tbody + tbody {border-top-color:#ccc;}
.table-striped tbody tr:nth-of-type(odd) { background-color:#fff;}
.ct-table .thead-light th { color: #ffffff; background-color: #1f6aa7; border-color: #ffffff; border-bottom: 1px solid #ffffff;}
.ct-table .thead-dark th { color: #ffffff; background-color: #07245e; border-color: #07245e;}
.table-bordered {border-color: #e9ecef;}
.table-bordered th,.table-bordered td {border-color:#ccc;}
.table-hover tbody tr:hover { background-color:#f5f7f9;}

@media only screen and (max-width: 575px){
.table-scroll .ct-table  td:before,
.table-scroll .ct-table th:before{color:#2d67a0;}
}

/* nav-Vertical 直式選單 ********************/
.nav-Vertical ul li .sub-menu-item{ background: #f9f9f9; color: #00A19B; border-bottom-color: #bac0c3;}
.nav-Vertical ul li .sub-menu-item:hover { background:#1f6aa7; color: #ffffff;}


.nav-Vertical ul li .sub-menu-item a{color:#00A19B;}
.nav-Vertical ul li .sub-menu-item a:hover,
.nav-Vertical ul li .sub-menu-item a:focus,
.nav-Vertical ul li .sub-menu-item a:active,
.nav-Vertical ul li .sub-menu-item .active{color:#545454;}
.nav-Vertical ul li .sub-menu-item:hover a{color:#ffffff;}

.nav-Vertical ul li .menu-arrow svg{ fill:#1f6aa7;}
.nav-Vertical ul li .menu-arrow:hover svg{ fill: #ffffff;}
.nav-Vertical ul li ul li .sub-menu-item:hover a{color:#134480;}
.nav-Vertical ul li ul li .sub-menu-item{ background:#fdfeff;border-bottom-color: #dcd7bc;}
.nav-Vertical ul li ul li ul li .sub-menu-item{ background:#eefefd;}
.nav-Vertical ul li ul li .sub-menu-item:hover,
.nav-Vertical ul li ul li ul li .sub-menu-item:hover { background: #ffffff; color: #284f89; border-left-color: #f2a612;}
.vertical-hamburger { background:#1f6aa7;}
.vertical-hamburger svg { fill:#ffffff;}

.ct-sitemap{background:#ffffff;}
.sitemap-title { background: #fe8123; color: #ffffff;}
.sitemap-block { background: #ffffff;}
.sitemap-item a { color: #505050; border-left-color: #f3a712; background: #f5f5f5;}
.sitemap-item a:hover,
.sitemap-item a:focus{background: #fdfaf0; color: #3c2117; border-left-color: #f2c685;}
.sitemap-icon svg {fill: #ffffff;}

/*span-color-ga003*/
.span-color-ga003,a.span-color-ga003{color: #00A19B;}
a.span-color-ga003:hover,a.span-color-ga003:focus {color:#10ad7d;}

/*span-color-ga007*/
.span-color-ga007,a.span-color-ga007{color: #00A19B;}
a.span-color-ga007:hover,a.span-color-ga007:focus {color:#10ad7d;}

/*線上報修button-ga009********************/
.repair-basicset .btn-primary { color: #ffffff;  background-color:#1e67a2;  border-color:#1e67a2;  fill: #ffffff;}
.repair-basicset .btn-primary:hover,.repair-basicset .btn-primary:focus,.repair-basicset .btn-primary:active,.repair-basicset .btn-primary.active,.repair-basicset .open .ct-dropdown-toggle.btn-primary,.repair-basicset .btn-primary:active:focus,.repair-basicset .btn-primary:active:hover,.repair-basicset .btn-primary.active:hover,.repair-basicset .btn-primary.active:focus{background:#0e4f7a;}
.repair-basicset .btn-primary.active.focus,.repair-basicset .btn-primary.active:focus,.repair-basicset .btn-primary.active:hover,.repair-basicset .btn-primary:active.focus,.repair-basicset .btn-primary:active:focus,.repair-basicset .btn-primary:active:hover,.repair-basicset .open>.ct-dropdown-toggle.btn-primary.focus,.repair-basicset .open>.ct-dropdown-toggle.btn-primary:focus,.repair-basicset .open>.ct-dropdown-toggle.btn-primary:hover{ background:#0e4f7a;}

/* CGA001 圖文公告換色 ********************/
.ct-focusslider .focus-content .textblock{ background:#fefdfa; color: #545454; border-bottom: 4px solid #f3a712;}
.ct-focusslider .focus-content .textblock.notice-color{background:#fffaf1; color: #545454;  border-bottom: 4px solid #f3a712;}
/*CGA001 圖文公告箭頭顏色*/
.ct-focusslider .focus-controls .focus-arrow{ fill:#f3a712; }
.ct-focusslider .focus-controls .focus-arrow:hover { fill: #ebb700;}
.ct-focusslider .focus-controls .focus-arrow.focus-end{ fill: rgba(175, 175, 175, 1);}
/*CGA004、CGA008、CGA009電子報系列*/
.ct-epaper .btn-primary{color: #ffffff; background-color:#4b77a7; border-color:#4b77a7; fill: #ffffff;}
.ct-epaper .btn-primary:hover{color: #ffffff; background-color:#0d62c0;  border-color:#0d62c0; fill: #ffffff;}
.module .ct-epaper .epaper-list.ct-row { background: #ffffff; padding: 0;}
.ct-epaper .yearnav ul li{ background: #d4efff; color: #00A19B; border-bottom: 1px solid #94bcd4;}
.ct-epaper .yearnav ul li a { color: #1f6aa7;}
.ct-epaper .yearnav ul li:hover { background: #00A19B; color: #ffffff;}
.ct-epaper .yearnav ul li:hover a {color: #fff;}
.ct-epaper button.btn-primary { background-color: #1b6390; border-color: #1b6390;}
.ct-epaper button.btn-primary:hover { background-color: #1f6aa7; border-color: #1f6aa7;}

/* GA017 全文檢索*******************/
.cmgch-google .btn-all{ color: #ffffff; background-color:#1e67a2; border-color:#1e67a2; fill: #ffffff; border-radius: 2px;}
.cmgch-google .btn-all:hover,.cmgch-google .btn-all:focus,.cmgch-google .btn-all:active,.cmgch-google .btn-all.active,.cmgch-google .btn-all:active:focus,.cmgch-google .btn-all:active:hover,.cmgch-google .btn-all.active:hover,.cmgch-google .btn-all.active:focus { color: #ffffff; background-color:#0e4f7a;  border-color:#0e4f7a; fill: #ffffff;}
.cmgch-google .btn-advanced{ color: #ffffff; background-color: #797979; border-color: #797979; fill: #ffffff;}
.cmgch-google .btn-advanced:hover,.cmgch-google .btn-advanced:focus,.cmgch-google .btn-advanced:active,.cmgch-google .btn-advanced.active,.cmgch-google .btn-advanced:active:focus,.cmgch-google .btn-advanced:active:hover,.cmgch-google .btn-advanced.active:hover,.cmgch-google .btn-advanced.active:focus { color: #ffffff; background-color: #676767;  border-color: #676767; fill: #ffffff;}
.cmgch-google .form-group-m input { caret-color:#1e67a2;} 
.cmgch-google .form-group-m .bar::before {background:#1e67a2;}

/*ALT+C 導盲磚 *******************/
.text-secondary {color: #656769;}

/*freeze btn overflow *******************/
#noticeview_to_print .ct-btn {white-space: normal;}

/*權限scrollbar *******************/
.select-menu-container.select-visible .select-menu {overflow-y: scroll; height: 150px;}

/* thin */
@media screen and (min-width: 1200px) { .ctSize {width: 90%; margin-left: 5%;}}

.navbar li .menuhidden.navbar-menu a {line-height: 30px;}
.navbar li:hover ul a, .navbar ul li a:focus+.navrwd+.menuhidden {line-height: 30px}
.nav-link { padding: 0.4rem 1rem;}
.module-padding table.ct-table th, .module-padding table.ct-table td { padding: 0.4rem; border-top: 1px dotted #ccc}

.module table .download_rect, .module table .link_rect {height: auto;}



/**************************************************
= cont setting
********************/
.htmldisplay h2 {
    font-size: 3rem;
}
.htmldisplay h3 {
    font-size: 2.2rem;
    position: relative;
    text-align: center;
}
.htmldisplay h3::before, 
.htmldisplay h3::after {
    position: absolute;
    content: '';
    display: block;
    height: 1px;
    width: calc(38% - 20px);
    background: #FF8300;
    margin: auto;
}
.htmldisplay h3 span {
    background: #fff;
    position: relative;
    z-index: 1;
    padding: 0 20px;
}
.htmldisplay h3::before {
    left: 0;
    top:0;
    bottom: 0;
}
.htmldisplay h3::after {
    right: 0;
    top:0;
    bottom: 0;
}
.htmldisplay h4 {
    font-size: 2rem;
}
.htmldisplay p {
    font-family: "Cambria Regular";
    font-size: 1.6rem;
    line-height: 2rem;
    margin: 2rem 0;
}

@media (max-width: 768px) {
    .htmldisplay h2 {
        font-size: 2rem;
    }
    .htmldisplay p {
        font-size: 1.2rem;
        line-height: 1.4rem;
        margin: 1rem 0;
        text-align: left !important;
    }
    .htmldisplay h4 {
        font-size: 1.8rem;
    }
    .htmldisplay h4 {
        font-size: 1.6rem;
    }
}


/* grid-view */
.grid-view {
    margin: 2rem 0;
}
.grid-view .caption {
    background: #eee;
    padding: 20px 40px;
    width: calc(100% - 40px);
    margin: -2rem auto 3rem;
}
.grid-view a {
    color: #333;
    display: inline-block;
    border: #333 solid 2px;
    padding: 2px 10px;
}
.grid-view a:hover {
    color: #fff;
    background: #333;
}
.grid-view .img-wrap.shadow {
    box-shadow: #000 0px 0px 10px;
}
.grid-view iframe {
    max-width: 100%;
}
@media (min-width: 767px) {
    .grid-view .caption {
        height: 100%;
        padding: 60px 100px;
        width: 100%;
        margin: auto;
    }
    .grid-view.row div[class*="col-"] {
        display: flex;
        align-items: center;
    }
    .grid-view .img-wrap {
        max-height: calc(100% - 60px);
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    .grid-view.row div[class*="col-"]:first-child .img-wrap {
        margin-right: -40px;
    }
    .grid-view.row div[class*="col-"]:last-child .img-wrap {
        margin-left: -40px;
    }
    
    .grid-view.row.even div[class*="col-"]:first-child .img-wrap {
        margin-left: -40px;
        margin-right: auto;
    }
    .grid-view.row.even div[class*="col-"]:last-child .img-wrap {
        margin-left: auto;
        margin-right: -40px;
    }

    .grid-view.even div[class*="col-"]:first-child {
        -ms-flex-order: 2;
        order: 2;
    }
    .grid-view.even div[class*="col-"]:last-child {
        -ms-flex-order: 1;
        order: 1;
    }

}

/* gallery-view */
.gallery-view {
    margin: 2rem 0;
}
@media (min-width: 767px) {
    .gallery-view div[class*="col-"] {
        margin-bottom: 15px;
    }
    .gallery-view div[class*="col-"]:nth-child(odd) .img-wrap {
        padding-right: 10px;
    }

    .gallery-view div[class*="col-"]:nth-child(even) .img-wrap {
        padding-left: 10px;
    }
}

/* yt-wrap */
.yt-wrap {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.yt-wrap::before {
    display: block;
    content: "";
    padding-top: 56.25%;
}
.yt-wrap iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
div[class*="col-"] .yt-wrap {
    width: calc(100% - 10px);
    margin: 0 auto 15px;
}
/**************************************************
= cont table
********************/
.table-scroll {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll table {
    width: 100% !important;
    margin-bottom: 1rem;
    color: #212529;
}
.table-scroll table caption {
    display: none;
}
.table-scroll table td, 
.table-scroll table th {
    font-size: 1.2rem;
    text-align: center;
    line-height: 2rem;
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}
.table-scroll table thead th {
    font-size: 1.2rem;
    background: #00a19b;
    color: #fff;
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

.table-scroll table tr {
    background: #f4f7f8;
    border-bottom: 1px solid #FFF;
    margin-bottom: 5px;
}
.table-scroll table tr:nth-child(even) {
    background: #e8eeef;
}
.table-scroll table td {
    text-align: center;
}
.table-scroll td, 
.table-scroll th {
    border: 1px solid #dee2e6;
}

/**************************************************
= cont grid
********************/
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.row div[class*="col-"]{
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-md-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-md-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
}