@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,800');
@media (min-width:500px){.col-sm-6{width:50%;}
}
a{color: inherit;}
html, body{height:100%;min-height:18em;}
.frontend-side{background:url(../images/pattern.svg) repeat center center/70px 70px;background-opacity:0.3;}
.abc { height: inherit;}
.uiux-side{background-image:url("../images/cb2.png");}
.split-pane{padding-top:1em;background-size:cover;background-repeat:no-repeat;background-position:top center;height:50%;min-height:9em;font-size:2em;color:white;font-family:'Open Sans', sans-serif;font-weight:300;}
@media(min-width:500px){.split-pane{padding-top:2em;height:100%;}
}
.split-pane > div.overlay_patch{background:rgba(0,0,0,0.8);left:0;right:0;bottom:0;top:0;position:absolute;height:100%;}
.split-pane div.content_patch{
     z-index: 1;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);text-align:center;}
.split-pane div.content_patch .text-content{line-height:1.6em;margin-bottom:1em;}
.split-pane div.content_patch .text-content .big{font-size:2em;}
.split-pane div.content_patch img{height:1.3em;}
@media (max-width:500px){.split-pane div.content_patch img{display:none;}
}
.split-pane button, .split-pane a.button{font-family:'Open Sans', sans-serif;font-weight:800;background:none;border:1px solid #e7e7e7;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;width:15em;padding:0.7em;font-size:0.5em;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;text-decoration:none;color:#000000;display:inline-block;cursor:pointer;background:#e7e7e7;}
.split-pane button:hover, .split-pane a.button:hover{text-decoration:none;background-color:white;border-color:white;cursor:pointer;}
.uiux-side.split-pane button:hover, .split-pane a.button:hover{color:violet;}
.frontend-side.split-pane button:hover, .split-pane a.button:hover{color:#242424;}
#split-pane-or{font-size:2em;color:white;font-family:'Open Sans', sans-serif;text-align:center;width:100%;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
@media (max-width:925px){#split-pane-or{top:15%;}
}
#split-pane-or > div.logo{height:80px;background:#FFF;border-radius:2px;width:260px;margin:auto;box-shadow: rgba(0, 0, 0, 0.67) 13px 13px 37px -22px;/*-webkit-box-shadow:13px 13px 37px -22px rgba(0,0,0,0.67);-moz-box-shadow:13px 13px 37px -22px rgba(0,0,0,0.67);box-shadow:13px 13px 37px -22px rgba(0,0,0,0.67)*/;}
#split-pane-or > div.logo img{height:50px;position:relative;top:40%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);text-align:center;}
@media only screen and (max-width:40em){#split-pane-or > div.logo img{-webkit-transform:translateY(-38%);-ms-transform:translateY(-38%);transform:translateY(-38%);}
.bold_header{width:70% !important;font:normal 16px/30px 'Open Sans', sans-serif !important;}
.bold_header:after, .bold_header:before{width:53px !important;}
}
@media (max-width:500px){#split-pane-or{position:absolute;top:85px;}
#split-pane-or > div.logo{height:56px; border-bottom: 1px solid #ededed; width: 100%;box-shadow: rgba(0, 0, 0, 0) 13px 13px 37px -22px;}
#split-pane-or > div.logo img{height:2em;}
}
@media(min-width:500px){#split-pane-or{font-size:3em;}
}
.big{font-size:2em;}
#slogan{position:absolute;width:100%;z-index:100;text-align:center;vertical-align:baseline;top:0.5em;color:white;font-family:'Open Sans', sans-serif;font-size:1.4em;}
@media(min-width:500px){#slogan{top:5%;font-size:1.8em;}
}
#slogan img{height:0.7em;}
.bold{text-transform:uppercase;}
.black.bold_header{color:#242424}
.black.bold_header:after,
.black.bold_header:before{top:16px;background-color:#242424;}
.bold_header.speakerr_header {width: 300px;}
.bold_header a {
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
    color: #FFFFFF;
    background: transparent;
    border: 0;
    letter-spacing: 4px;
    font: normal 26px/1.2 'Open Sans', sans-serif;
}
.black.bold_header a {
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
    color: #242424;
    background: transparent;
    border: 0;
    letter-spacing: 4px;
    font: normal 26px/1.2 'Open Sans', sans-serif;
}
.bold_header a:hover,
.black.bold_header a:hover{text-decoration: none;}
.bold_header{width:370px;text-transform:uppercase;text-align:center;color:#FFFFFF;margin:0 auto 30px auto;letter-spacing:4px;font:normal 26px/1.2 'Open Sans', sans-serif;position:relative;}
.bold_header:after,
.bold_header:before{background-color:#FFFFFF;content:"";height:2px;position:absolute;top:46px;width:90px;}
.bold_header:after{right:0;}
.bold_header:before{background-image:linear-gradient(right, #777, #fff);left:0;}
.big{font-weight:800;}
.home_footer{background:rgba(78,78,78,0.95);padding:5px;text-align:center;color:#f6f6f6;position:fixed;top:0;left:0;right:0;font-size:1.2em;}
.home_footer a{color:#f6f6f6; font-weight: 700;}


/**/

/* DEMO-SPECIFIC STYLES */
.typo_marquee{background: #333}
.typo_marquee span {
  color: #fff;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */

}

.typewrite{text-transform: none;}


/*Mobile Device*/
@media only screen and (max-width: 767px){

  .bold_header{width: 82% !important;color: #242424;}
  .split-pane{height: 44%;min-height:4em;}
    .uiux-side {
    background: none;}
    .typewrite {
    text-transform: none;
    font-size: 12px;
    letter-spacing: 0;
    display: block;
    padding: 5px 0;
    }
    .typewrite .wrap{letter-spacing: 0;}
    .black.bold_header{margin-top: 0px;}

    .abc {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    height: auto;
   }
   .split-pane.col-xs-12.col-sm-6.uiux-side {
       position: relative;
       height: 356px;
       border-top: 1px solid #242424;
  }
  .split-pane.col-xs-12.col-sm-6.frontends-side {
        position: relative;
    /* width: 576px; */
    height: 230px;
    top: 0px;
  }
  .split-pane > div.overlay_patch{
    background: none;
  }
  .bold_header:after, .bold_header:before{
    background-color: #242424;
  }
  .home_footer,
  .home_footer a {
    /*font-size: 0.71875em;*/
    font-size: 0.745em;
  }
  .home_footer {
    padding: 5px 0;
    /*height: 18vh;*/
  }
  .split-pane.col-xs-12.col-sm-6.frontends-side,
  .split-pane.col-xs-12.col-sm-6.uiux-side {height: 46vh;}
}

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .split-pane.col-xs-12.col-sm-6.frontends-side {
        position: relative;
        top: 0px;
    }
    .split-pane.col-xs-12.col-sm-6.frontends-side,
    .split-pane.col-xs-12.col-sm-6.uiux-side {height: 46vh;}
}