@charset "utf-8";

html {
    width: 100%; height: 100%;
    -webkit-font-smoothing: antialiased;
    font-size: 62.5%;
}

body {
    overflow-x: hidden;
    color: #333; background-color: #fff;
    webkit-tap-highlight-color: rgba(255,255,255,.2);
    font-family: RobotoRegular, sans-serif;
    font-weight: normal;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.4em;
}

header {
    color: #fff;
    background-color: #000;
    border-bottom: 5px solid #28A745;
    font-family: RobotoBold;
    font-weight: bold;
    font-size: 16pt;
}
header a {
    color: #fff;
    text-decoration: none;
}
header a:hover {
    color: #FFE473;
    text-decoration: underline;
}
header #contact {
    color: #FDDD00;
    font-family: RobotoBold;
    font-weight: bold;
    text-transform: uppercase;
}
header #contact a {
    color: #FDDD00;
    text-decoration: none;
}
header #contact a:hover {
    color: #FDDD00;
    text-decoration: underline;
}

#mainNav {
    width: 100%;
    color: #fff; background: #198754; /* #058466; */
    -webkit-transition: height .5s, line-height .5s; /* Safari */
    transition: height .5s, line-height .5s;

    box-shadow: 0px 2px 3px 0px rgba(51, 51, 51, 0.1);
    -webkit-box-shadow: 0px 2px 3px 0px rgba(51, 51, 51, 0.1);
    -moz-box-shadow: 0px 2px 3px 0px rgba(51, 51, 51, 0.1);
    -o-box-shadow: 0px 2px 3px 0px rgba(51, 51, 51, 0.1);
}
#mainNav .navbar-nav .nav-item .nav-link {
    color: #fff;
    font-family: RobotoBold;
    font-weight: normal;
    font-size: 14pt;
    text-align: left;
    text-shadow: 2px 2px 3px rgba(00,00,00,0.75);
}
#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: #fff;
    background: #198754;
    text-decoration: none;
    -ms-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#mainNav .navbar-toggler {
    color: #fff;
    border-color: transparent; /* #0B175F; */
}

#mainNav .navbar-brand {
    color: #FDDD00;
    margin: 0; padding: 4px 0;
    display: inline-block;
    font-family: RobotoBold;
    font-weight: 600;
    font-size: 14pt;
    text-transform: uppercase;
    -webkit-transition: all .5s;
    transition: all .5s;
    text-shadow: 2px 2px 3px rgba(00,00,00,0.75);
}
#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
    color: #FDDD00;
    background: #198754;
    text-decoration: none;
    padding: 0 15px;
}
#mainNav .navbar-brand.active {
    color: #fff;
    background: #198754;
    text-decoration: none;
    padding: 0 15px;
}

.dropdown-menu {
  margin: 0;
  padding: 5px 0;
  color: #fff;
  font-family: Prompt ExtraLight;
  font-weight: normal;
  font-size: 18pt;
  line-height: 1.2em;
  text-align: left;
  list-style: none;
  background-color: #2C4993;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  /* border: 1px solid #ccc; */
  border-top: 0px solid #ccc;
  border-left: 0px solid #ccc;
  border-right: 0px solid #ccc;
  border-bottom: 0px solid #ccc;
  border-radius: 0px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdown-item {
  color: #fff;
  padding-left: 14px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.dropdown-item:hover {
  color: #fff;
  background: #77357D;
  /* text-shadow: 2px 2px 3px rgba(00,00,00,0.5); */
}

.navbreadcrumb {
  background-color: #F5F5F5;
  border-bottom: 1px solid #C9C9C9;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.5em;
}

.breadcrumb {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0.75rem 0rem 0.55rem 0rem;
  margin-bottom: 0.25rem;
  list-style: none;
  border-radius: 0.25rem;
  background-color: transparent;
  line-height: 2.0rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  color: #868e96;
  content: ">";
}

.PromptRegular { font-family:'Prompt Regular'; }
.PromptItalic { font-family:'Prompt Italic'; }
.PromptThin { font-family:'Prompt Thin'; }
.PromptThinItalic { font-family:'Prompt Thin Italic'; }
.PromptExtraLight { font-family:'Prompt ExtraLight'; }
.PromptExtraLightItalic { font-family:'Prompt ExtraLight Italic'; }
.PromptLight { font-family:'Prompt Light'; }
.PromptLightItalic { font-family:'Prompt Light Italic'; }
.PromptMedium { font-family:'Prompt Medium'; }
.PromptMediumItalic { font-family:'Prompt Medium Italic'; }
.PromptSemiBold { font-family:'Prompt SemiBold'; }
.PromptSemiBoldItalic { font-family:'Prompt SemiBold Italic'; }
.PromptBold { font-family:'Prompt Bold'; }
.PromptBoldItalic { font-family:'Prompt Bold Italic'; }
.PromptExtraBold { font-family:'Prompt ExtraBold'; }
.PromptExtraBoldItalic { font-family:'Prompt ExtraBold Italic'; }
.PromptBlack { font-family:'Prompt Black'; }
.PromptBlackItalic { font-family:'Prompt Black Italic'; }

h1 {
    font-family: RobotoBold;
    font-weight: 700;
}
h2,
h3,
h4,
h5,
h6 {
    font-family: RobotoBold;
    font-weight: 700;
}

h1 { font-size: 24pt; }
h2 { font-size: 24pt; }
h3 { font-size: 22pt; }
h4 { font-size: 20pt; }
h5 { font-size: 18pt; }
h6 { font-size: 16pt; }

p {
  font-family: RobotoRegular, sans-serif;
  font-weight: normal;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.4em;
}

.fontSize10pt { font-size: 10pt }
.fontSize12pt { font-size: 12pt }
.fontSize14pt { font-size: 14pt }
.fontSize16pt { font-size: 16pt }
.fontSize18pt { font-size: 18pt }
.fontSize20pt { font-size: 20pt }
.fontSize22pt { font-size: 22pt }
.fontSize24pt { font-size: 24pt }
.fontSize28pt { font-size: 28pt }
.text-blue { color: #1D76BC; }
.text-navy { color: #00008B; }
.text-white { color: #fff; }
.text-red { color: #E60000; }
.text-orange { color: #F15A29; }
.text-grey { color: #4d4d4d; }
.text-gold { color: #E1C17E; }
.bg-blue { background-color: #1D76BC; }
.bg-navy { background-color: #00008B; }
.bg-grey { background-color: #E9ECEF; }
.bg-sky { background-color: #BFE8F9; }
.bg-light-brown { background-color: #FFF5E0; }
.bg-light-choco { background-color: #EDD6AF; }
.bg-light-yellow { background-color: #F9EDA3; }
.bg-light-green { background-color: #D1E7DD; }

.head-underline {
    margin: 0 auto;
    width: 125px; height: 5px;
    background-color: #333;
    border-radius: 2px;
}
.head-underline-navy {
    margin: 0 auto;
    width: 125px; height: 5px;
    background-color: #00008B;
    border-radius: 2px;
}
.head-underline-yellow {
    margin: 0;
    width: 125px; height: 5px;
    background-color: #FFCC00;
    border-radius: 2px;
}
.head-underline-yellow-center {
    margin: 0 auto;
    width: 145px; height: 5px;
    background-color: #FFCC00;
    border-radius: 2px;
}
.head-underline-green-center {
    margin: 0 auto;
    width: 145px; height: 5px;
    background-color: #28A745;
    border-radius: 2px;
}

.card-columns {
    column-count: 2;
}

@media (min-width: 576px) {
  h2.topic {
    color: #A40001;
    font-family: RobotoBold;
    font-weight: bold;
    font-size: 24pt;
    line-height: 1.0em;
  }
  .card-columns {
      column-count: 2;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.6em;
  }
  .card-columns {
      column-count: 3;
  }
}

@media (min-width: 992px) {
    #mainNav {
      width: 100%;
      height: 48px;
      z-index: 999;
      line-height: 48px;
      background: #198754;
      -webkit-transition: height .5s, line-height .5s; /* Safari */
      transition: height .5s, line-height .5s;
    }
    #mainNav .navbar-nav .nav-item .nav-link {
      color: #fff;
      padding: 0 12px 0 12px;
      font-family: RobotoBold;
      font-weight: normal;
      font-size: 12pt;
      border-top-left-radius: 9px; border-top-right-radius: 9px;
    }
    .nav-link.active, .nav-link:hover {
      color: #fff;
      border-top-left-radius: 9px; border-top-right-radius: 9px;
      /* background-color: #BC9417; */
    }
    #mainNav .navbar-brand {
      color: #fff;
      margin: 0; padding: 0;
      display: inline-block;
      font-family: RobotoBold;
      font-weight: normal;
      font-size: 12pt;
      -webkit-transition: all .5s;
      transition: all .5s;
      border-top-left-radius: 9px; border-top-right-radius: 9px;
    }

    .dropdown:hover>.dropdown-menu {
      display: block;
    }
    .dropdown-item {
      padding: 0 9px 0 9px;
      color: #fff;
      font-family: RobotoBold;
      font-weight: normal;
      font-size: 14pt;
      line-height: 1.6em;
    }
    .card-columns {
        column-count: 4;
    }

    h1 { font-size: 32pt; }
    h2 { font-size: 32pt; }
    h3 { font-size: 28pt; }
    h4 { font-size: 24pt; }
    h5 { font-size: 20pt; }
    h6 { font-size: 18pt; }
}

@media (min-width: 1200px) {
    .container-fluid {
      /* width: 1250px; */
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }
    #mainNav {
      width: 100%;
      height: 48px;
      z-index: 999;
      line-height: 48px;
      background: #198754;
      -webkit-transition: height .5s, line-height .5s; /* Safari */
      transition: height .5s, line-height .5s;
    }
    #mainNav .navbar-nav .nav-item .nav-link {
      color: #fff;
      padding: 0 20px 0 20px;
      font-family: RobotoBold;
      font-weight: normal;
      font-size: 14pt;
      border-top-left-radius: 9px; border-top-right-radius: 9px;
    }
    .nav-link.active, .nav-link:hover {
      color: #fff;
      border-top-left-radius: 9px; border-top-right-radius: 9px;
      /* background-color: #BC9417; */
    }
    #mainNav .navbar-brand {
      color: #fff;
      margin: 0; padding: 0;
      display: inline-block;
      font-family: RobotoBold;
      font-weight: normal;
      font-size: 14pt;
      -webkit-transition: all .5s;
      transition: all .5s;
      border-top-left-radius: 9px; border-top-right-radius: 9px;
    }

    .dropdown:hover>.dropdown-menu {
      display: block;
    }
    .dropdown-item {
      padding: 0 15px 0 15px;
      color: #fff;
      font-family: RobotoBold;
      font-weight: normal;
      font-size: 16pt;
      line-height: 1.6em;
    }
    .card-columns {
        column-count: 5;
    }
}

#herosection {
  background-image: url(../images/hero-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
  text-align: center;
}
#herosection h2 {
  color: #fff;
  /* text-shadow: 0 3px 0 black, 0 -3px 0 black, 3px 0 0 black, -3px 0 0 black; */
  text-shadow: 2px 2px 3px black, 0 0 25px grey, 0 0 5px darkblue;
}

#huahinstation {
  background-image: url(../images/huahin-station.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
  text-align: center;
}
#huahinstation h2 {
  color: #fff;
  /* text-shadow: 0 3px 0 black, 0 -3px 0 black, 3px 0 0 black, -3px 0 0 black; */
  text-shadow: 2px 2px 3px black, 0 0 25px grey, 0 0 5px darkblue;
}

.sticker {
  position: absolute;
  top: 60;
  left: 0;
  width: 100%;
}
.make-me-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-width: 0;
  /* height: 100%; */
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 0px solid rgba(0, 0, 0, 0.95);
  border-radius: 0.25rem;
}
.card:hover {
  -webkit-box-shadow: 0px 0px 8px 0px rgba(23, 162, 184, 0.45);
  -moz-box-shadow:    0px 0px 8px 0px rgba(23, 162, 184, 0.45);
  box-shadow:         0px 0px 8px 0px rgba(23, 162, 184, 0.45);
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.card-header {
  padding: 0.15rem 0.5rem 0 0.75rem;
}
.card-title {
  padding-top: 15px;
  font-size: 16pt;
  margin-bottom: 0.45rem;
}
.card-body {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.5em;
  border-top: 1px dotted #222;
}
.card-deck .card-none {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    -ms-flex-direction: column;
        flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
}
.card-footer {
  padding: 0;
  background-color: transparent;
  border-top: 0px solid rgba(0, 0, 0, 0.125);
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.5em;
  background-color: #67B998; /* #FFE473; */
}

a {
    color: #000; /* #4285F4; */
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a:hover,
a:focus {
    color: #000;
    -ms-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    text-decoration: underline;
}

input[type='text'], 
input[type='email'], 
textarea {
    font: normal 18px NotoSansThaiRegular, sans-serif;
    resize: none;
}

#slider {
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    /* background-color: #BACAD3; */
}
#slider .carousel-caption {
  color: #fff;
  /* text-shadow: 0 3px 0 black, 0 -3px 0 black, 3px 0 0 black, -3px 0 0 black; */
  text-shadow: 2px 2px 3px black, 0 0 25px grey, 0 0 5px darkblue;
}
.carousel.carousel-fade .carousel-item {
    display: block;
    opacity: 0;
    transition: opacity ease-out .7s;
}
.carousel.carousel-fade .carousel-item.active {
    opacity: 1 !important;
}

.page-item.active .page-link {
  z-index: 2;
  color: #fff;
  background-color: #0476B0;
  border-color: #0476B0;
}

.fadein { opacity: 0; padding-top:10px; }

#roadtosuccess {
  background-image: url(../images/raod-to-success-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}

#applyinsurance {
  background-image: url(../images/thailife-insurance-bangna-branch.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}
#applyagent {
  background-image: url(../images/apply-agent-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}

footer {
    color: #ABABAB;
    /* background-color: #172646; */
    font-family: RobotoRegular, sans-serif;
    font-weight: normal;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.4em;

  background-image: url(../images/footer-bg1.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #198754;
}
footer a {
    color: #ABABAB;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
footer a:hover,
footer a:focus {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dotted #fff;
    /* text-shadow: 2px 2px 3px rgba(00,00,00,0.75); */
}
.footer-section {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    /* z-index: 1; */
}
.footer-section::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #172646;
    opacity: 0.85;
    /* z-index: -1; */
}
.footer-bottom {
    padding: 15px 0 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 1);
}

.no-margin { margin: 0; }
.no-margin-left { margin-left: 0; }
.no-margin-right { margin-right: 0; }
.no-padding { padding: 0; }
.no-padding-left { padding-left: 0; }
.no-padding-right { padding-right: 0; }

.form-group { margin-bottom:0px !important; }  
.form-control-feedback { top:0px !important; } 

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.opacity img
{
    opacity:0.9;
}
.opacity img:hover
{
    opacity:1;
}

.zoom img
{
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.zoom img:hover
{
    transform: scale(1.09);
}

.vehicle-bg {
  background-image: url(../images/vehicle-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #282A37;
}

.grey-geo {
  background-image: url(../images/grey-geo.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}
.highlights-bg {
  background-image: url(../images/hua-hin-view.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #171940;
  text-shadow: 2px 2px 3px black, 0 0 25px grey, 0 0 5px darkblue;
}
.highlight-bg {
  background-image: url(../images/highlight-bg.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #171940;
  text-shadow: 2px 2px 3px black, 0 0 25px grey, 0 0 5px darkblue;
}
.price-bg {
  background-image: url(../images/price-bg.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #171940;
  text-shadow: 2px 2px 3px black, 0 0 25px grey, 0 0 5px darkblue;
}
.contact-bg {
  background-image: url(../images/contact-bg.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #171940;
  text-shadow: 2px 2px 3px black, 0 0 25px grey, 0 0 5px darkblue;
}
.qanda-bg {
  background-image: url(../images/qanda-bg.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #171940;
  text-shadow: 2px 2px 3px black, 0 0 25px grey, 0 0 5px darkblue;
}
.booking-bg {
  background-image: url(../images/booking-bg.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #171940;
  text-shadow: 2px 2px 3px black, 0 0 25px grey, 0 0 5px darkblue;
}
.gallery-bg {
  background-image: url(../images/gallery-bg.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #171940;
  text-shadow: 2px 2px 3px black, 0 0 25px grey, 0 0 5px darkblue;
}
.grey-diamond {
  background-image: url(../images/grey-diamond.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #171940;
}

.page-bg {
  padding: 55px 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
}
.page-bg::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
/*
  background-color: #21526F;
  opacity: 0.35;
*/
}
.page-title-xs {
  color: #fff; /* #F0DB83; */
  font-family: RobotoBold;
  font-weight: normal;
  font-size: 24pt;
  line-height: 1.4em;
  text-shadow: 0 2px 0 black, 0 -2px 0 black, 2px 0 0 black, -2px 0 0 black;
}
.page-title-lg {
  color: #fff;
  font-family: RobotoBold;
  font-weight: normal;
  font-size: 32pt;
  line-height: 1.4em;
  text-shadow: 0 2px 0 black, 0 -2px 0 black, 2px 0 0 black, -2px 0 0 black;
}

.xbanner {
    margin: 0 auto;
    min-height: 19.25rem;
    width: 100%; 
    position: relative;
    background-color: #BED4DF;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
  /* background-image: linear-gradient(180deg, rgba(58, 58, 58, 0.4), rgba(58, 58, 58, 0.4)), url(../images/blog-bg1.jpg); */
}

.xbanner::before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(52,56,81,0.45);
}

.banner_all {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    color: rgba(255,255,255,0.8);
    width: 100%;
    max-width: 90%;
    z-index: 1;
    text-shadow: 2px 2px 3px rgba(00,00,00,0.9);
}
.banner_wrap {
    position: absolute;
    margin: auto;
    top: 37%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    color: rgba(255,255,255,0.8);
    width: 100%;
    max-width: 90%;
    z-index: 1;
}
.banner_wrap .banner_title {
    font-family: RobotoBold;
    font-size: 1.6em;
    color: #F0DB83;
    text-shadow: 1px 2px 3px rgba(255,255,255,0.9);
}
.banner_wrap .banner_meta {
    font-family: RobotoBold;
    font-size: 1.2em;
    color: #F0DB83;
    text-shadow: 2px 2px 3px rgba(00,00,00,0.5);
}

.light-orange-row {
  margin:0px;
  color: #333;
  background-color: #E9ECEF;
  line-height: 1.4em;
}
.light-orange-row:hover {
  color: #000;
  background-color: #CCC;
    -ms-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.light-orange-row a {
    color: #4285F4;
    text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
}
.light-orange-row a:hover {
    color: #0d47a1
    text-decoration: none;
    text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
}

.content {
  position: relative;
  margin: auto;
  overflow: hidden;
}

.content .content-overlay {
  background-color: rgba(48, 152, 157, 0.4);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
  opacity: 1;
}

.content-image{
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h6{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-bottom{
  top: 80%;
}

.fadeIn-top{
  top: 20%;
}

.fadeIn-left{
  left: 20%;
}

.fadeIn-right{
  left: 80%;
}

.embed-responsive-27by9::before {
  padding-top: 33.33%;
}

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

.btn-circle {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  padding: 0;
  border-radius: 50%;
}

.btn-circle i {
  position: relative;
  top: -1px;
}

.btn-circle-sm {
  width: 65px;
  height: 65px;
  line-height: 35px;
  font-size: 0.9rem;
}

.btn-circle-lg {
  width: 95px;
  height: 95px;
  line-height: 95px;
  font-size: 1.1rem;
}

.btn-circle-xl {
  width: 125px;
  height: 125px;
  line-height: 125px;
  font-size: 2.8rem;
}

.btn-facebook {
  color: #fff;
  background-color: #3B5998;
  border-color: #3B5998;
}
.btn-facebook:hover {
  color: #fff;
  background-color: #2F477A;
  border-color: #2F477A;
}

.btn-twitter {
  color: #fff;
  background-color: #00ACEE;
  border-color: #00ACEE;
}
.btn-twitter:hover {
  color: #fff;
  background-color: #008ABE;
  border-color: #008ABE;
}

.btn-line {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}
.btn-line:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-reddit {
  color: #fff;
  background-color: #FF4500;
  border-color: #FF4500;
}
.btn-reddit:hover {
  color: #fff;
  background-color: #E24207;
  border-color: #E24207;
}

.btn-linkedin {
  color: #fff;
  background-color: #0072B1;
  border-color: #0072B1;
}
.btn-linkedin:hover {
  color: #fff;
  background-color: #0B5E86;
  border-color: #0B5E86;
}

btn-link {
  text-decoration: none;
}