:root {
  --dark: #273b66;
  --dark1: #14374a;
  --med: #f96e08;
  --med1: #e45a2a;
  --light: #f1f1fa;
  --border-radius: 18px;
  --border-width: 8px;
}




/********** common setting **********/

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 700 !important;
    line-height: 1.1;
    color: inherit;
}

h2 {
    font-size: 2.8rem !important;
    color: var(--dark1) !important;
}

img {
    display: block;
    max-width: 100%;
}

a,
button {
    cursor: pointer;
}
a {
    text-decoration-color: inherit !important;
    color: inherit !important;
}

.slotor-header {
    padding-top: 2.5em !important;
}

.slotorlogo {
    max-height: 4em;
}

.rat-terrier-content {
    text-align: justify;
    text-justify: inter-word;
}

.jumbotron {
    margin-bottom: 0 !important;
    background-color: var(--dark) !important;
    color: var(--light) !important; 
}

.jumbotron li {
    font-size: 20px;
}

.rat-terrier-cta {
    border-radius: 22px !important;
    padding: 12px 30px !important;
    font-weight: 700;
    transition: .3s ease-in-out !important;
}

.rat-terrier-cta:hover {
    text-decoration: none;
    transform: translateY(-5px);
}

.rat-terrier-cta-wide {
    width: 100%;
}

.cta-rat-terrier-med {
    background: var(--med);
    color: var(--dark1)!important;
}

.cta-rat-terrier-med:hover {
    color: var(--light) !important;
    background: var(--med1);
}

.cta-rat-terrier-dark {
    background: var(--dark1);
    color: var(--light) !important;
}

.cta-rat-terrier-dark:hover {
    color: var(--light) !important;
    background: var(--dark1);
}

.cta-ghost {
    border: 2px solid var(--dark1) !important;
    color: var(--dark1)!important;
}

.cta-ghost:hover {
    color: var(--light) !important;
    background: var(--dark1);
}

#banner {
    background-size: cover;
}

/********** banner **********/
#banner header {
    overflow: hidden;
}

#banner header img {
    max-width: calc(80vw - 222px);
}

/********** feature (skew background) **********/

.feature {
    color: var(--dark) !important;
}

.feature img {
    width: 100%;
    max-width: 480px;
}

#feature-first {
    background: linear-gradient(168deg, var(--light) 55%, var(--med) 0);
}

#feature-last {
    background: var(--med) !important;
}

#feature-light {
    background: var(--light) !important;
}

/********** copyright **********/
#copyright {
    background: var(--dark);
    padding: 2rem 3rem;
}

#copyright #social-media a {
    width: 40px;
    height: 40px;
    border-radius: 99%;
    background: var(--light);
    transition: .4s ease;
}

#copyright #social-media a i {
    color: var(--dark);
    font-size: 1.2rem;
    line-height: 40px;
}

#copyright #social-media a:hover {
    background: var(--med);
}

#copyright #social-media a:hover i {
    color: var(--light);
}

/********** RWD **********/
@media (max-width: 575px) {
    #banner h1 {
        font-size: 3.6rem;
    }
}


/********** FAQ **********/
.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: var(--med);         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}




/** Tables **/
table {
    min-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.7em;
    margin-bottom: 0.5em;
}

td {
    border: 1px solid var(--dark) !important;
    padding: 5px 5px 5px 5px !important;
}

td p {
    margin: 0px !important;
}

  /*---------------------------------------
     POPUP              
  -----------------------------------------*/

.popup{
    background-color: var(--dark1);
    width: 360px;
    min-width: 40vw;
    max-width: 85vw;   
    padding: 10px 10px;
    position: fixed;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: var(--border-radius);
    border-color: var(--med);
    border-style: solid;
    border-width: var(--border-width);
    display: none; 
    text-align: center;
    z-index: 1;
}
.popup button{
    display: block;
    margin:  0 0 0 auto;
    font-size: 30px;
    color: var(--dark1);
    background: var(--med);
    border-radius: 100%;
    width: 40px;
    height: 40px;
    border: none;
    outline: none;
    cursor: pointer;
    line-height: normal;
}
.popup h2{
	margin-top: -20px;
}
.popup p{
    font-size: 2em;
    text-transform: uppercase;
    color: var(--light);
    text-align: center;
    font-weight: bold;
    margin: 20px 0;
    line-height: 25px;
}
.popup a{
    display: block;
    width: 80%;
    min-width: 80%;
    position: relative;
    text-align: center;
    background-color: var(--med);
    border-radius: var(--border-radius);
    color: var(--dark) !important;
    text-decoration: none;
    font-size: 1.7em;
    font-weight: bold;
    padding: 8px 0;
}

blockquote {
    padding: 10px 20px !important;
    margin: 0 0 20px;
    border-left: 5px solid var(--dark1) !important;
}

.btn {
    border-radius: var(--border-radius);
}

.row {
    margin-right: 15px !important;
    margin-left: 15px !important;
}

.text-right {
    vertical-align: middle;
    height: 4em;
    padding: 20px !important;
}

.lead {
    color: var(--light) !important;
}