@charset "UTF-8";
/*
Theme Name:  OT Hightail
Theme URI: https://www.opentext.com
Author: David Duggins <davidduggins@me.com>
Author URI: https://duggins.tech
Description: Custom theme for Hightail
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


@font-face {
    font-family: 'verbregular';
    src: url('fonts/verb-regular-webfont.woff2') format('woff2'),
    url('fonts/verb-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'verbbold';
    src: url('fonts/verb-regular-bold-webfont.woff2') format('woff2'),
    url('fonts/verb-regular-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'verbextrabold';
    src: url('fonts/verb-extrabold-webfont.woff2') format('woff2'),
    url('fonts/verb-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'verbsemibold';
    src: url('fonts/verb-semibold-webfont.woff2') format('woff2'),
    url('fonts/verb-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'verbbold_italic';
    src: url('fonts/verb-regular-bold-italic-webfont.woff2') format('woff2'),
    url('fonts/verb-regular-bold-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'verbregular_italic';
    src: url('fonts/verb-regular-italic-webfont.woff2') format('woff2'),
    url('fonts/verb-regular-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'verblight';
    src: url('fonts/verb-light-webfont.woff2') format('woff2'),
    url('fonts/verb-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/**
  This font family is what provides the social icons.
  Checkout the site for more information
  https://fonts2u.com/socialico.font
 */

@font-face {
    font-family: 'socialico';
    src: url('fonts/Socialico-Regular.woff2') format('woff2'),
    url('fonts/Socialico-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

body {

    font-family: 'verbregular'!important;
}

a:hover {
    color: #f15b41!important;

}
.jumbotron {

	background-image: url('hero-image.png');
	width: 100%;
	height: 500px;
}

.overlay {
    position:absolute;
  left:0;
  width:100%;
  height:419px;
  background-color:rgba(52, 58, 64, 0.63);
  top: 83px;

}

.jb-text {

	position: relative;
	top: 170px;
	left:80px;
    /*text-align: center;*/
	color: white;
    font-family: verbbold;
    font-size: 36px;
    max-width: 1000px!important;

}

.jb-text-com {

    position: relative;
    top: 170px;
    /*left:150px;*/
    text-align: center;
    color: white!important;

}

.jb-text p {

    color: white;
    /**margin-left: 30px; */
    text-align: center;
}

.jb-text-com p {

    color: white;
    /**margin-left: 30px; */
    text-align: center;
}

.cta-block {
    margin-left: 88px;
    margin-right: 58px;
}

.bg-trans {
background-color: rgba(52, 58, 64, 0.63)!important;
}

.bg-trans.scrolled {
    background-color: rgba(58, 56, 58, 0.99)!important;
}


@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css";
@import "http://fonts.googleapis.com/css?family=Roboto:400,500";
#bg3{background-color:#353535;}
#bg3 .foot{padding-top: 15px;}

/* Dropdown menu background color*/

.navbar-nav > li > .dropdown-item {     background-color: #e7e7e7;  }

/* Dropdown menu font color*/

.navbar-nav > li > .dropdown-item a{   color: #555555;  }


.entry-content h2 {

    font-family: verbbold;
    color: #f15b41;

}

/* Bottom Pagination Nav Menu */

.navigation h2 {

  display: none;
}

.entry-content h3 {

    font-family: verbbold;
    color: #f15b41;

}

.entry-content strong {

    font-family: verbbold;
    color: #f15b41;

}

#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 100px 0px 20px 0px;
width: 960px; // Sesuaikan dengan lebar blog Anda
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 15px auto;
padding-bottom: 20px;
width: 15%; // Sesuaikan
text-align: justify;
color:#ddd;
font: bold 12px verbregular, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px verbregular, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

.lowerbar p a {
    color: #626262;
}

p {
    color: #626262;


}
p a {
	color: #f15b41;
}
p a:hover {
	color: #626262;
}

.wp-post-image {
	width: 221px;  /*221x168 px*/
	height: 168px;
}

.details {
    text-decoration: #ffffff;
    color: #ffffff;
    padding: 10px;
    font-family: verblight;
    font-size: 18px;
}

.details a {

    color: #ffffff;
}

.details a:hover {

    color: #ffffff;
}
.bs-calltoaction{
    position: relative;
    width:auto;
    padding: 15px 25px;
    margin-top: 10px;
    margin-bottom: 10px;

}

    .bs-calltoaction > .row{
        display:table;
        width: calc(100% + 30px);
    }

        .bs-calltoaction > .row > [class^="col-"],
        .bs-calltoaction > .row > [class*=" col-"]{
            float:none;
            display:table-cell;
            vertical-align:middle;
        }

            .cta-contents{
                padding-top: 10px;
                padding-bottom: 10px;
            }

                .cta-title{
                    margin: 0 auto 15px;
                    padding: 0;
                    font-size: 1.2rem;
                    font-family: verbbold!important;

                }

                .cta-desc{
                    padding: 0;
                }

                .cta-desc p:last-child{
                    margin-bottom: 0;
                }

            .cta-button{
                padding-top: 10px;
                padding-bottom: 10px;
            }

@media (max-width: 991px){
    .bs-calltoaction > .row{
        display:block;
        width: auto;
    }

        .bs-calltoaction > .row > [class^="col-"],
        .bs-calltoaction > .row > [class*=" col-"]{
            float:none;
            display:block;
            vertical-align:middle;
            position: relative;
        }

        .cta-contents{
            text-align: center;
        }
}



.bs-calltoaction.bs-calltoaction-default{
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.bs-calltoaction.bs-calltoaction-primary{
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.bs-calltoaction.bs-calltoaction-info{
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

.bs-calltoaction.bs-calltoaction-success{
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.bs-calltoaction.bs-calltoaction-warning{
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}

.bs-calltoaction.bs-calltoaction-danger{
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.bs-calltoaction.bs-calltoaction-primary .cta-button .btn,
.bs-calltoaction.bs-calltoaction-info .cta-button .btn,
.bs-calltoaction.bs-calltoaction-success .cta-button .btn,
.bs-calltoaction.bs-calltoaction-warning .cta-button .btn,
.bs-calltoaction.bs-calltoaction-danger .cta-button .btn{
    border-color:#fff;
}


.btn-hitail {

    color: white;
   background-color: #f15b41;
   border-color: #f15b41;

}

#orange-block {

    background-image: url('OT_HT-Orange_Bg.png');
    width: 100%;
    height: 200px;
    text-align: center;
    color: white;
    padding: 80px;

}

.jumbotron-orange {

    background-image: url('OT_HT-Orange_Bg.png');
    width: 100%;
    height: 500px;
}

orange-block h2 {
    position: relative;
    top: 80px;
    text-align: center;
    color: white;
    font-family: verbbold;

}

.size-full {width: 100%; height: auto;}

.header-image {
    width:100%;
    height: auto;
 /**   -webkit-clip-path: inset(0% 0% 61% 0%);
    clip-path: inset(0% 0% 61% 0%);**/
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
#content.site-content {
    padding-bottom: 3.75rem;
    padding-top: 4.125rem;
}

.sticky .entry-title::before {
    content: '\f08d';
    font-family: "verbregular";
    font-size: 1.563rem;
    left: -2.5rem;
    position: absolute;
    top: 0.375rem;
    font-weight: 900;
}

.sticky .entry-title {
    position: relative;
}

.single .byline,
.group-blog .byline {
    display: inline;
}

.page-content,
.entry-content,
.entry-summary {
    margin: 5em 19em 0;
}

.post-hero-txt{

    margin: 11em 17em 0;
    color: white;
    font-size: 18px;
}

.page-links {
    clear: both;
    margin: 0 0 1.5em;
}

.page-template-blank-page .entry-content,
.blank-page-with-container .entry-content {
    margin-top: 0;
}

.post.entry {
    margin-bottom: 4rem;
}

.posted-on, .byline, .comments-link {
    color: #9a9a9a;
}

.entry-title > a {
    color: inherit;
}

.featured {

    width: 821px!important;
    height: 630px!important;

}


.aligncenter { width: 100%; height: auto;}

.left-arrow {
    width: 15px;
    height: 15px;
    background-image: url('FWD.svg');

}

.right-arrow {

    width: 15px;
    height: 15px;
    background-image: url('BACK.svg');

}
.community-footer {

    background-image: url('OT_HT-Orange_Bg.png');
    width: 100%;
    height: 200px;

}

.community-footer a {

    text-decoration: none;
    color: white;

}

.community-footer a:hover {


    color: white;

}


.community-footer-txt {

    position: relative;
    top: 80px;
    text-align: center;
    color: white;
    font-family: verbsemibold;
    font-size: 24px;

}
.center-label {

    text-align: center;

}

/**
Check out docs on social icons
https://fonts2u.com/socialico.font

 */
.social-icons
{
    font-family: "socialico";
    //filter: invert(100%);
    text-align: center;

}

.social-icons a {
   color: #9a9a9a;
}

.social-icons a:hover {
   text-decoration: none;
   color: #f15b41;
}

.ot-post-title{

    font-size: 36px;
    font-weight: 300;
    line-height: 1.2;
}

.single-image { width: 100%;}


ol.wpp-list  {
    list-style: none;
    counter-reset: my-awesome-counter;
    margin: 0;
    padding: 0px 0px 50px 0px;
}
ol.wpp-list li {
    counter-increment: my-awesome-counter;
    display: flex;
    width: 100%;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}
ol.wpp-list li::before {
    content: "";
    border-left: solid 5px #f15b41;
    padding-left: 5px
    font-size: 3rem;
    margin-right: 2.5rem;
    font-family: 'verbregular', serif;
    color: #dbd1d1;
    line-height: 1;
    height: 20px;
    position: relative;
    margin-top: 5px;
}

.cat-item ul {

    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/

    margin: 0;
    margin-left: 3em;
    padding: 0;

    counter-reset: li-counter;
}

.cat-item li {

    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
    border-left: 2px solid #CCCCCC;
}
.cat-item li::before {

    position: absolute;
    top: 0;
    left: -1em;
    width: 0.8em;
    font-size: 3em;
    line-height: 1;
    font-weight: bold;
    text-align: right;
    color: #464646;

}



.avatar {

    border-radius: 50%;
    float: left;
    margin: 10px;
}

.show {

    display: block;
    background-color: rgba(52, 58, 64, 0.63) !important;

}

.community {

    font-family: verbsemibold;
    font-size: 24pt;
}

.home-headlines {

    font-family: verbextrabold;
    font-size: 36px;
}

.wpp-post-title {

    font-family: verblight;
    font-size: 16px;
    color: #535253;
    order: 0;
}

.wpp-post-title a {
    text-decoration: none;
}
.wpp-post-title a:hover {
    color: #f15b41!important;
    text-decoration: #f15b41!important;
}

.wpp-stats {
    order: 1;
}


.acatw-term-list {

    position: relative;
    right: 40px;
    list-style: none;
}
.acatw-term-list li {
    border-bottom: solid 1px #9e9e9e;
}

.acatw-term-list a {

    font-family: verbbold;
    font-size: 18px;
    color: #9e9e9e;
    text-decoration: none;
    padding-left: 5px;
}

.acatw-term-list a:hover {

    color: #f15b41;
    text-decoration: none;
    border-left: solid 5px #f15b41;
    padding-left: 5px
}

.col {

    padding-right: 30px!important;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #9e9e9e!important;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #ffffff!important;
    text-decoration: none;
    background-color: transparent!important;

}

.hamberger-login{

    display: none;
}
/**
*
*  Now we deal with responsiveness of the custom stuff
*/

/*
* Smart Phones
*/
@media only screen and (max-width: 600px){

    .jb-text {width: 57% !important; }
    .header-image {
        position: relative;
        bottom: 128px;
    }


    .overlay{

        top: 83px;
    }

    .show {
        display: block;
        background-color: rgba(52, 58, 64, 0) !important;
    }
    .dropdown-menu { border: 1px solid rgba(0,0,0,0) !important; }
    .login {

        display: none!important;
    }

    .details { float: right;}

    .featured {

       display: none;

    }


    .ot-post-title {
        font-size: 20px;
        width: 75%;
        position: relative;
        right: 18px;
    }

    .entry-content {
        margin: 0 4em 0 !important;
    }

    .entry-content img {

        //display: none;
    }

    .alignleft, .aligncenter {

        width: 300px;
        height: auto;
    }

    .size-large {

        width: 300px;
        height: auto;
    }

    .cta-space {

        display:none;
    }

    .loop-img {


        display: none;
    }



    #lower-wrapper {
        display: none;
    }

    .cta-contents {
        text-align: left;
    }

    .cta-block {
        margin-left: 0;
        margin-right: 0;
    }

    .cta-desc {

        padding: 0;
        display: none;

    }
    .social-footer {

        display: none;
    }

    #lower-wrapper{ width: 100%;}

    .copyright { background-color: #000000;}

    .hamberger-login{

        display: block;
        float: right;
    }
}

/*
* Tablets
*/
@media only screen and (max-width: 812px){

    .entry-content { margin: 5em 4em 0;}
    .social-footer { display: none; }
    .post-hero-txt { margin: 10em 11em 0; }
    .jb-text { width: 75% !important;}
 }
@media only screen and (max-width: 767px){


    .login {

        display: none!important;
    }

    .featured {

        width: 421px!important;
        height: 330px!important;

    }

    .cta-contents {
        text-align: left;
    }


    .alignleft, .aligncenter {

        width: 300px;
        height: auto;
    }
    .size-large {

        width: 300px;
        height: auto;
    }

    .entry-content {

        margin: 5em 4em 0;
    }

    .cta-space {

        display:none;

    }

    .post-hero-txt {

        margin: 11em 5em 0;
    }


    .loop-img {

        display: none;
    }

    img .aligncenter { display: none;}

    #lower-wrapper{ width: 100%;}

    .social-footer {

        display: none;
    }

    .show {
        display: block;
        background-color: rgba(52, 58, 64, 0) !important;
    }
    .dropdown-menu { border: 1px solid rgba(0,0,0,0) !important; }

    .hamberger-login{

        display: block;
        float: right;
    }
}