﻿.ContentLayout a { color: #357FD3; }
    .ContentLayout a:hover { color: #4286f5; }
.ContentLayout .ContentLayoutRight * { font-family: 'Sarabun', sans-serif; }
    .ContentLayout .ContentLayoutRight * b, .ContentLayout .ContentLayoutRight * strong { font-family: Prompt; font-weight: 600; }
.vertical-middle { vertical-align: top; height: 100%; }
.vertical-middle { vertical-align: middle; height: 100%; }
.horizontal-center, .float-center { position: relative; left: 50%; transform: translateX(-50%); }

.button.icon-arrow-right { background: url(../TakraOnlineWebsite/Images/web2017/bullet/arrow-right.png) no-repeat; background-position: calc(100% - 6px) calc(50% + 1px); }
    .button.icon-arrow-right:hover, .button.icon-arrow-right:focus { background: url(../TakraOnlineWebsite/Images/web2017/bullet/arrow-right-white.png) no-repeat; background-position: calc(100% - 6px) calc(50% + 1px); }
.button.icon-arrow-right-white { background: url(../TakraOnlineWebsite/Images/web2017/bullet/arrow-right-white.png) no-repeat; background-position: calc(100% - 6px) calc(50% + 1px); }
.button.hover-blue { color: #0a0a0a; }
    .button.hover-blue:hover, .button.hover-blue:focus { border-color: #0681ee !important; background-color: #0681ee !important; color: #fff !important; }

.ContactSocialFooter { padding: 60px 0; background: #171717; color: #fff; }
    .ContactSocialFooter .contact-title { margin-bottom: 60px; }

.button.auto { width: auto; }
.button.button-phone-footer { background-color: #379ffe !important; border-radius: 60px; max-width: 190px; padding: 0.8rem 0.95rem; }
    .button.button-phone-footer:hover { background-color: #0076e2 !important; }
.button.hollow.white { border: 1px solid #fff; color: #fff; }
    .button.hollow.white:hover, .button.hollow.white:focus { border-color: #fff; color: #fff; }
        .button.hollow.white:hover.disabled, .button.hollow.white:hover[disabled], .button.hollow.white:focus.disabled, .button.hollow.white:focus[disabled] { border: 1px solid #c0c0c0; color: #c0c0c0; }
.button.salepage { width: 100%; max-width: 320px; border-width: 2px !important; padding: 15px 30px; }

.prompt-regular { font-family: Prompt-Regular !important; }
.prompt-medium { font-family: Prompt-Medium !important; }
.prompt-bold { font-family: Prompt-Bold !important; }

.free-space { height: 58px; }

input[type="text"] { font-family: Prompt-Regular; }
a[disabled] { background-color: #d1d2d5 !important; cursor: not-allowed; pointer-events: none; }

select { font-family: Prompt-Regular; }
.group-title * { margin-bottom: 0; line-height: 1.2; }

.question-and-answer-panel { border: solid 1px #cbd3e3; border-radius: 30px; padding: 30px; margin: 5px; width: auto; height: auto; }

.asset-double-quote { font-size: 60px; font-family: Prompt-Bold; position: absolute; }
    .asset-double-quote.top { top: 0; line-height: 1; }
    .asset-double-quote.left { left: 0; }
    .asset-double-quote.bottom { bottom: 0; line-height: 0; }
    .asset-double-quote.right { right: 0; }

.section-contact { min-height: 162px; padding: 60px 0 45px; background: #357FD3; }


.double-quote-panel { position: relative; width: 100%; height: auto; padding-bottom: 30px; margin-top: 40px; }
.double-quote-open { position: absolute; font-size: 70px; top: 0; left: 0; }
    .double-quote-open b { line-height: 0 !important; }
.double-quote-close { position: absolute; font-size: 70px; bottom: 0; right: 5%; }
    .double-quote-close b { line-height: 0 !important; }

.block-question-2col-panel > .columns { padding: 5px; }
    .block-question-2col-panel > .columns > .columns { border: solid 1px #cbd3e3; border-radius: 30px; padding: 35px 30px; height: 100%; background-color: #fff; }
.block-question-3col-panel > .columns { padding: 5px; }
    .block-question-3col-panel > .columns > .columns { border: solid 1px #cbd3e3; border-radius: 30px; padding: 35px 30px; height: 100%; background-color: #fff; }

.list-panel { display: inline-block; }
.SeminarFormButton a { font-size: 36px; }

.btn-content { display: flex; min-width: 275px; width: 100%; height: 52px; line-height: 52px; float: left; }
    .btn-content.btn-line { background: #41c31a; color: #fff; justify-content: center; }
    .btn-content .icon-line { align-self: center; background: url(../TakraOnlineWebsite/Images/web2017/icon/header-icon-line.png) no-repeat top center; background-size: 30px; width: 30px; height: 30px; margin-right: 10px; }
    .btn-content.border-white { border: solid 1px #fff; }
    .btn-content:hover { transform: scale(1.05); transition: opacity .3s,transform .3s; }

.content-btn-back { width: 72px; height: 40px; display: flex; border-radius: 20px; background-color: #2d75eb; justify-content: center; }
    .content-btn-back:hover { transform: scale(1.03); transition: opacity .3s,transform .3s; content: ""; }
    .content-btn-back a { align-self: center; font-size: 16px; color: #fff; font-family: Prompt-Regular; }
        .content-btn-back a:hover, .content-btn-back a:focus { color: #fff; }

        .PagingPrev { background: url(../TakraOnlineWebsite/Images/Icon/icon-prev.gif) no-repeat left center; padding-left: 14px; font-family: Prompt-Regular; font-size: 15px; }
.PagingNext { background: url(../TakraOnlineWebsite/Images/Icon/icon-next.gif) no-repeat right center; padding-right: 14px; font-family: Prompt-Regular; font-size: 15px; }
.PagingCurrent { color: #fff; background-color: #246bb7; display: inline-block; height: 22px; line-height: 20px; min-width: 22px; padding: 2px; text-align: center; font-family: Prompt-Regular; font-size: 15px; }

.master-contentdoc i { border: solid #fff; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; width: 10px; height: 10px; align-self: center; margin-right: 3px; }
    .master-contentdoc i.left { transform: rotate(135deg); -webkit-transform: rotate(135deg); }

@media screen and (max-width: 63.9375em) {
    .block-question-3col-panel > .columns.medium-12 { padding: 5px 0; }
}

/* Small only | 640px down*/
@media screen and (max-width: 39.9375em) {
    .question-and-answer-panel { margin: 5px 0; }
    .asset-double-quote { font-size: 80px; }
    .small-float-center { float: left; position: relative; left: 50%; transform: translateX(-50%); }
    .SeminarFormButton a { font-size: 28px; }
    .double-quote-open { left: 0; }
    .double-quote-close { right: 0; }
    .section-contact { padding: 50px 0 55px; }
    .block-question-2col-panel > .columns.small-12 { padding: 5px 0; }
    .block-question-3col-panel > .columns.small-12 { padding: 5px 0; }
    .double-quote-panel h5, .double-quote-panel .h5, .author * { font-size: 19px !important; }
    .author { margin-bottom: 60px; }
    ul.h5 { font-size: 18px; line-height: 1.5; }
}

/* Medium and up | 640px up*/
@media screen and (min-width: 40em) {
    .SideMenuResponsive .common-button > a.button { padding: 0.8em 1.1em; }
}

/* Medium only | 640px - 1023px */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .asset-double-quote { font-size: 72px; }

    .section-contact { min-height: 100%; padding: 50px 0 40px; }
    .SeminarFormButton a { font-size: 28px; }
    .double-quote-open, .double-quote-close { font-size: 52px; }
    .double-quote-panel h5, .double-quote-panel .h5, .author * { font-size: 16px !important; }
}

/* Large and up | 1024px up */
@media screen and (min-width: 64em) {
    .asset-double-quote { font-size: 80px; }
}

/* Large only | 1024px - 1199px */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
}
