/* add your css rules here */

@charset "utf-8";

/**


#################################

==== CSS FOR DESKTOP/TABLETS ====

#################################

**/

/////////form start ///////////////////

$white: rgba(254,255,250,1)
$grey: rgba(220,231,235,1)
$red: rgba(255,104,115,1)
$black: rgba(48,69,92,0.8)
$sans: 'Titillium Web', sans-serif
  
.transition
  transition: all 0.25s ease-in-out

.flipIn
  animation: flipdown 0.5s ease both
    
.no-select
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

html
  width: 100%
  height: 100%
  perspective: 900
  overflow-y: scroll
  background-color: $grey
  font-family: $sans
  color: $black
  
body
  min-height: 0
  display: inline-block
  position: relative
  left: 50%
  margin: 90px 0
  transform: translate( -50% , 0 )
  box-shadow: 0 10px 0 0 $red inset
  background-color: $white
  max-width: 450px
  padding: 30px
  
  @media ( max-width:550px )
    box-sizing: border-box
    transform: translate( 0 , 0 )
    max-width: 100%
    min-height: 100%
    margin: 0
    left: 0

h1 , h2
  color: $red

h1
  text-transform: uppercase
  font-size: 36px
  line-height: 42px
  letter-spacing: 3px
  font-weight: 100
  @extend .flipIn
  
h2
  font-size: 26px
  line-height: 34px
  font-weight: 300
  letter-spacing: 1px
  display: block
  background-color: $white
  margin: 0
  cursor: pointer
  @extend .no-select

p
  color: $black
  font-size: 17px
  line-height: 26px
  letter-spacing: 1px
  position: relative
  overflow: hidden
  max-height: 800px
  @extend .transition
  opacity: 1
  transform: translate( 0 , 0 )  
  margin-top: 14px
  z-index: 2
  
ul
  list-style: none
  perspective: 900
  padding: 0
  margin: 0
  
  li
    position: relative
    padding: 0
    margin: 0
    padding-bottom: 4px
    padding-top: 18px
    border-top: 1px dotted $grey
    @extend .flipIn
      
    &:nth-of-type(1)
      animation-delay: 0.5s
    
    &:nth-of-type(2)
      animation-delay: 0.75s
        
    &:nth-of-type(3)
      animation-delay: 1.0s
    
    &:last-of-type
      padding-bottom: 0
      
    i
      position: absolute
      transform: translate( -6px , 0 )
      margin-top: 16px
      right: 0
      
      &:before , &:after
        content: ""
        @extend .transition
        position: absolute
        background-color: $red
        width: 3px
        height: 9px
        
      &:before
        transform: translate( -2px , 0 ) rotate( 45deg )
          
      &:after
        transform: translate( 2px , 0 ) rotate( -45deg )
    
    input[type=checkbox]
      position: absolute
      cursor: pointer
      width: 100%
      height: 100%
      z-index: 1
      opacity: 0
      
      &:checked
        &~p
          margin-top: 0
          max-height: 0
          opacity: 0
          transform: translate( 0 , 50% )
            
        &~i
          &:before
            transform: translate( 2px , 0 ) rotate( 45deg )
          
          &:after
            transform: translate( -2px , 0 ) rotate( -45deg )

@keyframes flipdown
  0%
    opacity: 0
    transform-origin: top center
    transform: rotateX(-90deg)
  5%
    opacity: 1
  80%
    transform: rotateX(8deg)
  83%
    transform: rotateX(6deg)
  92%
    transform: rotateX(-3deg)
  100%
    transform-origin: top center
    transform: rotateX(0deg) 


  .elq-form .elq-required{
    color:red!important;
    display:inline;
    float:none;
    font-weight:700;
    margin:0;
    padding:0}
  .elq-form .elq-label{
    display:inline-block;
    max-width:100%;
    font-weight:400;
    box-sizing:border-box;
    margin-bottom:19px;}
  .elq-form .elq-label-top{
    padding-bottom:3px}
  .elq-form .elq-item-label{
    max-width:100%;
    font-weight:400;
    box-sizing:border-box}
  .elq-form .elq-item-textarea{
    resize:vertical;
    min-height:48px;
    max-height:360px;
    box-sizing:border-box}
  .elq-form .elq-item-input,.elq-form .elq-item-select,.elq-form .elq-item-textarea{
    font-family:inherit;
    font-size:inherit;
    line-height:inherit;
    color:inherit;
    font:inherit;
    margin:0}
  .elq-form .elq-item-select{
    text-transform:none}
  .elq-form .row.single-checkbox-row{
    margin-left:0}
  .elq-form .elq-field-style{
    padding-bottom:10px}
  .elq-form .elq-field-style input[type=submit]{
    -webkit-appearance:square-button}
  @-webkit-keyframes spin{
    0%{
      -webkit-transform:rotate(0deg)}
    to{
      -webkit-transform:rotate(1turn)}
  }
  @keyframes spin{
    0%{
      transform:rotate(0deg)}
    to{
      transform:rotate(1turn)}
  }
  .elq-form .loader{
    vertical-align:middle;
    display:inline-block;
    margin-left:10px;
    border:3px solid #f3f3f3;
    border-radius:50%;
    border-top:3px solid #3498db;
    width:20px;
    height:20px;
    -webkit-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite}
  .elq-form input[type=checkbox],.elq-form input[type=radio]{
    margin:0}
  .elq-form *,.elq-form :after,.elq-form :before{
    box-sizing:border-box}
  .elq-form html{
    font-size:10px;
    -webkit-tap-highlight-color:transparent}
  .elq-form body{
    font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size:14px;
    line-height:1.42857;
    color:#333;
    background-color:#fff}
  .elq-form button,.elq-form input,.elq-form select,.elq-form textarea{
    font-family:inherit;
    font-size:inherit;
    line-height:inherit;
	margin-left:16px;
	margin-top:17px}
  .elq-form a{
    color:#337ab7;
    text-decoration:none}
  .elq-form a:focus,.elq-form a:hover{
    color:#23527c;
    text-decoration:underline}
  .elq-form a:focus{
    outline:5px auto -webkit-focus-ring-color;
    outline-offset:-2px}
  .elq-form figure{
    margin:0}
  .elq-form img{
    vertical-align:middle}
  .elq-form .img-responsive{
    display:block;
    max-width:100%;
    height:auto}
  .elq-form .img-rounded{
    border-radius:6px}
  .elq-form .img-thumbnail{
    padding:4px;
    line-height:1.42857;
    background-color:#fff;
    border:1px solid #ddd;
    border-radius:4px;
    transition:all .2s ease-in-out;
    display:inline-block;
    max-width:100%;
    height:auto}
  .elq-form .img-circle{
    border-radius:50%}
  .elq-form hr{
    margin-top:20px;
    margin-bottom:20px;
    border:0;
    border-top:1px solid #eee}
  .elq-form .sr-only{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0}
  .elq-form .sr-only-focusable:active,.elq-form .sr-only-focusable:focus{
    position:static;
    width:auto;
    height:auto;
    margin:0;
    overflow:visible;
    clip:auto}
  .elq-form [role=button]{
    cursor:pointer}
  .elq-form .container{
    margin-right:auto;
    margin-left:auto;
    padding-left:15px;
    padding-right:15px}
  .elq-form .container:after,.elq-form .container:before{
    content:" ";
    display:table}
  .elq-form .container:after{
    clear:both}
  @media (min-width:768px){
  .elq-form .container{
    width:750px}
}
  @media (min-width:992px){
  .elq-form .container{
    width:970px}
}
  @media (min-width:1200px){
  .elq-form .container{
    width:1170px}
}
  .elq-form .container-fluid{
    margin-right:auto;
    margin-left:auto;
    padding-left:15px;
    padding-right:15px}
  .elq-form .container-fluid:after,.elq-form .container-fluid:before{
    content:" ";
    display:table}
  .elq-form .container-fluid:after{
    clear:both}
  .elq-form .row{
    margin-left:-15px;
	margin-bottom:0px;  
    margin-right:-15px}
  .elq-form .row:after,.elq-form .row:before{
    content:" ";
    display:table}
  .elq-form .row:after{
    clear:both}
  .elq-form .col-lg-1,.elq-form .col-lg-2,.elq-form .col-lg-3,.elq-form .col-lg-4,.elq-form .col-lg-5,.elq-form .col-lg-6,.elq-form .col-lg-7,.elq-form .col-lg-8,.elq-form .col-lg-9,.elq-form .col-lg-10,.elq-form .col-lg-11,.elq-form .col-lg-12,.elq-form .col-md-1,.elq-form .col-md-2,.elq-form .col-md-3,.elq-form .col-md-4,.elq-form .col-md-5,.elq-form .col-md-6,.elq-form .col-md-7,.elq-form .col-md-8,.elq-form .col-md-9,.elq-form .col-md-10,.elq-form .col-md-11,.elq-form .col-md-12,.elq-form .col-sm-1,.elq-form .col-sm-2,.elq-form .col-sm-3,.elq-form .col-sm-4,.elq-form .col-sm-5,.elq-form .col-sm-6,.elq-form .col-sm-7,.elq-form .col-sm-8,.elq-form .col-sm-9,.elq-form .col-sm-10,.elq-form .col-sm-11,.elq-form .col-sm-12,.elq-form .col-xs-1,.elq-form .col-xs-2,.elq-form .col-xs-3,.elq-form .col-xs-4,.elq-form .col-xs-5,.elq-form .col-xs-6,.elq-form .col-xs-7,.elq-form .col-xs-8,.elq-form .col-xs-9,.elq-form .col-xs-10,.elq-form .col-xs-11,.elq-form .col-xs-12{
    position:relative;
    min-height:1px;
    padding-left:15px;
    padding-right:15px}
  .elq-form .col-xs-1,.elq-form .col-xs-2,.elq-form .col-xs-3,.elq-form .col-xs-4,.elq-form .col-xs-5,.elq-form .col-xs-6,.elq-form .col-xs-7,.elq-form .col-xs-8,.elq-form .col-xs-9,.elq-form .col-xs-10,.elq-form .col-xs-11,.elq-form .col-xs-12{
    float:left}
  .elq-form .col-xs-1{
    width:8.33333%}
  .elq-form .col-xs-2{
    width:16.66667%}
  .elq-form .col-xs-3{
    width:25%}
  .elq-form .col-xs-4{
    width:33.33333%}
  .elq-form .col-xs-5{
    width:41.66667%}
  .elq-form .col-xs-6{
    width:50%}
  .elq-form .col-xs-7{
    width:58.33333%}
  .elq-form .col-xs-8{
    width:66.66667%}
  .elq-form .col-xs-9{
    width:75%}
  .elq-form .col-xs-10{
    width:83.33333%}
  .elq-form .col-xs-11{
    width:91.66667%}
  .elq-form .col-xs-12{
    width:100%;
	margin-bottom:10px;}
  .elq-form .col-xs-pull-0{
    right:auto}
  .elq-form .col-xs-pull-1{
    right:8.33333%}
  .elq-form .col-xs-pull-2{
    right:16.66667%}
  .elq-form .col-xs-pull-3{
    right:25%}
  .elq-form .col-xs-pull-4{
    right:33.33333%}
  .elq-form .col-xs-pull-5{
    right:41.66667%}
  .elq-form .col-xs-pull-6{
    right:50%}
  .elq-form .col-xs-pull-7{
    right:58.33333%}
  .elq-form .col-xs-pull-8{
    right:66.66667%}
  .elq-form .col-xs-pull-9{
    right:75%}
  .elq-form .col-xs-pull-10{
    right:83.33333%}
  .elq-form .col-xs-pull-11{
    right:91.66667%}
  .elq-form .col-xs-pull-12{
    right:100%}
  .elq-form .col-xs-push-0{
    left:auto}
  .elq-form .col-xs-push-1{
    left:8.33333%}
  .elq-form .col-xs-push-2{
    left:16.66667%}
  .elq-form .col-xs-push-3{
    left:25%}
  .elq-form .col-xs-push-4{
    left:33.33333%}
  .elq-form .col-xs-push-5{
    left:41.66667%}
  .elq-form .col-xs-push-6{
    left:50%}
  .elq-form .col-xs-push-7{
    left:58.33333%}
  .elq-form .col-xs-push-8{
    left:66.66667%}
  .elq-form .col-xs-push-9{
    left:75%}
  .elq-form .col-xs-push-10{
    left:83.33333%}
  .elq-form .col-xs-push-11{
    left:91.66667%}
  .elq-form .col-xs-push-12{
    left:100%}
  .elq-form .col-xs-offset-0{
    margin-left:0}
  .elq-form .col-xs-offset-1{
    margin-left:8.33333%}
  .elq-form .col-xs-offset-2{
    margin-left:16.66667%}
  .elq-form .col-xs-offset-3{
    margin-left:25%}
  .elq-form .col-xs-offset-4{
    margin-left:33.33333%}
  .elq-form .col-xs-offset-5{
    margin-left:41.66667%}
  .elq-form .col-xs-offset-6{
    margin-left:50%}
  .elq-form .col-xs-offset-7{
    margin-left:58.33333%}
  .elq-form .col-xs-offset-8{
    margin-left:66.66667%}
  .elq-form .col-xs-offset-9{
    margin-left:75%}
  .elq-form .col-xs-offset-10{
    margin-left:83.33333%}
  .elq-form .col-xs-offset-11{
    margin-left:91.66667%}
  .elq-form .col-xs-offset-12{
    margin-left:100%}
  @media (min-width:768px){
  .elq-form .col-sm-1,.elq-form .col-sm-2,.elq-form .col-sm-3,.elq-form .col-sm-4,.elq-form .col-sm-5,.elq-form .col-sm-6,.elq-form .col-sm-7,.elq-form .col-sm-8,.elq-form .col-sm-9,.elq-form .col-sm-10,.elq-form .col-sm-11,.elq-form .col-sm-12{
    float:left}
  .elq-form .col-sm-1{
    width:8.33333%}
  .elq-form .col-sm-2{
    width:16.66667%}
  .elq-form .col-sm-3{
    width:25%}
  .elq-form .col-sm-4{
    width:33.33333%}
  .elq-form .col-sm-5{
    width:41.66667%}
  .elq-form .col-sm-6{
    width:50%}
  .elq-form .col-sm-7{
    width:58.33333%}
  .elq-form .col-sm-8{
    width:66.66667%}
  .elq-form .col-sm-9{
    width:75%}
  .elq-form .col-sm-10{
    width:83.33333%}
  .elq-form .col-sm-11{
    width:91.66667%}
  .elq-form .col-sm-12{
    width:100%}
  .elq-form .col-sm-pull-0{
    right:auto}
  .elq-form .col-sm-pull-1{
    right:8.33333%}
  .elq-form .col-sm-pull-2{
    right:16.66667%}
  .elq-form .col-sm-pull-3{
    right:25%}
  .elq-form .col-sm-pull-4{
    right:33.33333%}
  .elq-form .col-sm-pull-5{
    right:41.66667%}
  .elq-form .col-sm-pull-6{
    right:50%}
  .elq-form .col-sm-pull-7{
    right:58.33333%}
  .elq-form .col-sm-pull-8{
    right:66.66667%}
  .elq-form .col-sm-pull-9{
    right:75%}
  .elq-form .col-sm-pull-10{
    right:83.33333%}
  .elq-form .col-sm-pull-11{
    right:91.66667%}
  .elq-form .col-sm-pull-12{
    right:100%}
  .elq-form .col-sm-push-0{
    left:auto}
  .elq-form .col-sm-push-1{
    left:8.33333%}
  .elq-form .col-sm-push-2{
    left:16.66667%}
  .elq-form .col-sm-push-3{
    left:25%}
  .elq-form .col-sm-push-4{
    left:33.33333%}
  .elq-form .col-sm-push-5{
    left:41.66667%}
  .elq-form .col-sm-push-6{
    left:50%}
  .elq-form .col-sm-push-7{
    left:58.33333%}
  .elq-form .col-sm-push-8{
    left:66.66667%}
  .elq-form .col-sm-push-9{
    left:75%}
  .elq-form .col-sm-push-10{
    left:83.33333%}
  .elq-form .col-sm-push-11{
    left:91.66667%}
  .elq-form .col-sm-push-12{
    left:100%}
  .elq-form .col-sm-offset-0{
    margin-left:0}
  .elq-form .col-sm-offset-1{
    margin-left:8.33333%}
  .elq-form .col-sm-offset-2{
    margin-left:16.66667%}
  .elq-form .col-sm-offset-3{
    margin-left:25%}
  .elq-form .col-sm-offset-4{
    margin-left:33.33333%}
  .elq-form .col-sm-offset-5{
    margin-left:41.66667%}
  .elq-form .col-sm-offset-6{
    margin-left:50%}
  .elq-form .col-sm-offset-7{
    margin-left:58.33333%}
  .elq-form .col-sm-offset-8{
    margin-left:66.66667%}
  .elq-form .col-sm-offset-9{
    margin-left:75%}
  .elq-form .col-sm-offset-10{
    margin-left:83.33333%}
  .elq-form .col-sm-offset-11{
    margin-left:91.66667%}
  .elq-form .col-sm-offset-12{
    margin-left:100%}
}
  @media (min-width:992px){
  .elq-form .col-md-1,.elq-form .col-md-2,.elq-form .col-md-3,.elq-form .col-md-4,.elq-form .col-md-5,.elq-form .col-md-6,.elq-form .col-md-7,.elq-form .col-md-8,.elq-form .col-md-9,.elq-form .col-md-10,.elq-form .col-md-11,.elq-form .col-md-12{
    float:left}
  .elq-form .col-md-1{
    width:8.33333%}
  .elq-form .col-md-2{
    width:16.66667%}
  .elq-form .col-md-3{
    width:25%}
  .elq-form .col-md-4{
    width:33.33333%}
  .elq-form .col-md-5{
    width:41.66667%}
  .elq-form .col-md-6{
    width:50%}
  .elq-form .col-md-7{
    width:58.33333%}
  .elq-form .col-md-8{
    width:66.66667%}
  .elq-form .col-md-9{
    width:75%}
  .elq-form .col-md-10{
    width:83.33333%}
  .elq-form .col-md-11{
    width:91.66667%}
  .elq-form .col-md-12{
    width:100%}
  .elq-form .col-md-pull-0{
    right:auto}
  .elq-form .col-md-pull-1{
    right:8.33333%}
  .elq-form .col-md-pull-2{
    right:16.66667%}
  .elq-form .col-md-pull-3{
    right:25%}
  .elq-form .col-md-pull-4{
    right:33.33333%}
  .elq-form .col-md-pull-5{
    right:41.66667%}
  .elq-form .col-md-pull-6{
    right:50%}
  .elq-form .col-md-pull-7{
    right:58.33333%}
  .elq-form .col-md-pull-8{
    right:66.66667%}
  .elq-form .col-md-pull-9{
    right:75%}
  .elq-form .col-md-pull-10{
    right:83.33333%}
  .elq-form .col-md-pull-11{
    right:91.66667%}
  .elq-form .col-md-pull-12{
    right:100%}
  .elq-form .col-md-push-0{
    left:auto}
  .elq-form .col-md-push-1{
    left:8.33333%}
  .elq-form .col-md-push-2{
    left:16.66667%}
  .elq-form .col-md-push-3{
    left:25%}
  .elq-form .col-md-push-4{
    left:33.33333%}
  .elq-form .col-md-push-5{
    left:41.66667%}
  .elq-form .col-md-push-6{
    left:50%}
  .elq-form .col-md-push-7{
    left:58.33333%}
  .elq-form .col-md-push-8{
    left:66.66667%}
  .elq-form .col-md-push-9{
    left:75%}
  .elq-form .col-md-push-10{
    left:83.33333%}
  .elq-form .col-md-push-11{
    left:91.66667%}
  .elq-form .col-md-push-12{
    left:100%}
  .elq-form .col-md-offset-0{
    margin-left:0}
  .elq-form .col-md-offset-1{
    margin-left:8.33333%}
  .elq-form .col-md-offset-2{
    margin-left:16.66667%}
  .elq-form .col-md-offset-3{
    margin-left:25%}
  .elq-form .col-md-offset-4{
    margin-left:33.33333%}
  .elq-form .col-md-offset-5{
    margin-left:41.66667%}
  .elq-form .col-md-offset-6{
    margin-left:50%}
  .elq-form .col-md-offset-7{
    margin-left:58.33333%}
  .elq-form .col-md-offset-8{
    margin-left:66.66667%}
  .elq-form .col-md-offset-9{
    margin-left:75%}
  .elq-form .col-md-offset-10{
    margin-left:83.33333%}
  .elq-form .col-md-offset-11{
    margin-left:91.66667%}
  .elq-form .col-md-offset-12{
    margin-left:100%}
}
  @media (min-width:1200px){
  .elq-form .col-lg-1,.elq-form .col-lg-2,.elq-form .col-lg-3,.elq-form .col-lg-4,.elq-form .col-lg-5,.elq-form .col-lg-6,.elq-form .col-lg-7,.elq-form .col-lg-8,.elq-form .col-lg-9,.elq-form .col-lg-10,.elq-form .col-lg-11,.elq-form .col-lg-12{
    float:left}
  .elq-form .col-lg-1{
    width:8.33333%}
  .elq-form .col-lg-2{
    width:16.66667%}
  .elq-form .col-lg-3{
    width:25%}
  .elq-form .col-lg-4{
    width:33.33333%}
  .elq-form .col-lg-5{
    width:41.66667%}
  .elq-form .col-lg-6{
    width:50%}
  .elq-form .col-lg-7{
    width:58.33333%}
  .elq-form .col-lg-8{
    width:66.66667%}
  .elq-form .col-lg-9{
    width:75%}
  .elq-form .col-lg-10{
    width:83.33333%}
  .elq-form .col-lg-11{
    width:91.66667%}
  .elq-form .col-lg-12{
    width:100%}
  .elq-form .col-lg-pull-0{
    right:auto}
  .elq-form .col-lg-pull-1{
    right:8.33333%}
  .elq-form .col-lg-pull-2{
    right:16.66667%}
  .elq-form .col-lg-pull-3{
    right:25%}
  .elq-form .col-lg-pull-4{
    right:33.33333%}
  .elq-form .col-lg-pull-5{
    right:41.66667%}
  .elq-form .col-lg-pull-6{
    right:50%}
  .elq-form .col-lg-pull-7{
    right:58.33333%}
  .elq-form .col-lg-pull-8{
    right:66.66667%}
  .elq-form .col-lg-pull-9{
    right:75%}
  .elq-form .col-lg-pull-10{
    right:83.33333%}
  .elq-form .col-lg-pull-11{
    right:91.66667%}
  .elq-form .col-lg-pull-12{
    right:100%}
  .elq-form .col-lg-push-0{
    left:auto}
  .elq-form .col-lg-push-1{
    left:8.33333%}
  .elq-form .col-lg-push-2{
    left:16.66667%}
  .elq-form .col-lg-push-3{
    left:25%}
  .elq-form .col-lg-push-4{
    left:33.33333%}
  .elq-form .col-lg-push-5{
    left:41.66667%}
  .elq-form .col-lg-push-6{
    left:50%}
  .elq-form .col-lg-push-7{
    left:58.33333%}
  .elq-form .col-lg-push-8{
    left:66.66667%}
  .elq-form .col-lg-push-9{
    left:75%}
  .elq-form .col-lg-push-10{
    left:83.33333%}
  .elq-form .col-lg-push-11{
    left:91.66667%}
  .elq-form .col-lg-push-12{
    left:100%}
  .elq-form .col-lg-offset-0{
    margin-left:0}
  .elq-form .col-lg-offset-1{
    margin-left:8.33333%}
  .elq-form .col-lg-offset-2{
    margin-left:16.66667%}
  .elq-form .col-lg-offset-3{
    margin-left:25%}
  .elq-form .col-lg-offset-4{
    margin-left:33.33333%}
  .elq-form .col-lg-offset-5{
    margin-left:41.66667%}
  .elq-form .col-lg-offset-6{
    margin-left:50%}
  .elq-form .col-lg-offset-7{
    margin-left:58.33333%}
  .elq-form .col-lg-offset-8{
    margin-left:66.66667%}
  .elq-form .col-lg-offset-9{
    margin-left:75%}
  .elq-form .col-lg-offset-10{
    margin-left:83.33333%}
  .elq-form .col-lg-offset-11{
    margin-left:91.66667%}
  .elq-form .col-lg-offset-12{
    margin-left:100%}
}
  .elq-form .row{
    display:inherit}
  .LV_invalid_field,input.LV_invalid_field:active,input.LV_invalid_field:hover,textarea.LV_invalid_field:active,textarea.LV_invalid_field:hover{
    outline:1px solid #c00}
  .LV_validation_message{
    font-weight:700;
    margin:0 0 0 5px}
  .LV_valid{
    display:none}
  .LV_invalid{
    color:#c00;
    font-size:10px}
  .submit-button-style{
    padding:7px 20px;
    border:1px solid #979797;
    border-radius:3px;
    background-color:#fff;
    color:#4a4a4a;
    cursor:pointer}
  .checkbox-aligned{
    margin-left:5px}
  .form-element-layout{
    padding:0px 10px}
  .form-element-instruction{
    font-size:10px}
  .form-element-form-text{
    margin:0}
  .form-field-visible-xs-block{
    display:none}
  @media (max-width:767px){
  .form-field-visible-xs-block{
    display:block}
}
  .form-field-hidden-xs{
    display:block}
  @media (max-width:767px){
  .form-field-hidden-xs{
    display:none}
}

 //////// form finish ///////

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
#breadcrumb, .column h1, #wrapper h1, img.content-panel, .hide-on-desktop {
display: none;
}
#breadcrumb, #column h1, #wrapper h1, img.content-panel, #hide-on-mobile {
display: none;
}
	  
	  
	  
	  
.showtime {
display: block!important;
}
div.content-panel {
border: none;
	    padding: 21px 0px;
    margin-bottom: 20px;
}

/**** BUTTONS ****/

.purple-btn, .purple-background {
background-color: #5514b4;
}
.purple-btn:hover {
background-color: #400f87;
}
.magenta-btn, .magenta-background {
background-color: rgb(230, 0, 80);
}
.magenta-btn:hover {
background-color: rgb(170, 0, 60);
}
.blue-btn, .blue-background {
background-color: rgb(0, 170, 220);
}
.blue-btn:hover {
background-color: rgb(0, 120, 160);
}
.green-btn, .green-background {
background-color: rgb(80, 175, 80);
}
.green-btn:hover {
background-color: rgb(55, 147, 55);
}
.yellow-btn, .yellow-background {
background-color: rgb(255, 220, 0);
}
.yellow-btn:hover {
background-color: rgb(224, 192, 0);
}
.dark-grey-btn, .dark-grey-background {
background-color: rgb(51, 51, 51);
}
.dark-grey-btn:hover {
background-color: rgb(35, 35, 35);
}
.medium-grey-btn, .medium-grey-background {
background-color: rgb(102, 102, 102);
}
.medium-grey-btn:hover {
background-color: rgb(70, 70, 70);
}
.light-grey-btn, .light-grey-background {
background-color: rgb(221, 221, 221);
}
.light-grey-btn, .light-grey-background-b {
background-color: #eee;
	    padding: 60px;
}
.light-grey-btn:hover {
background-color: rgb(178, 178, 178);
}
.red-btn, .red-background {
background-color: rgb(230, 0, 20);
}
.red-btn:hover {
background-color: rgb(186, 0, 16);
}
.purple_secondary_btn {
    background: transparent;
border: thin solid rgb(100, 0, 170)!important;
color: rgb(100, 0, 170)!important;
}
.white_secondary_btn {
    background: transparent;
border: thin solid rgb(255, 255, 255)!important;
color: rgb(255, 255, 255)!important;
}
.white_secondary_btn:hover {
background-color: rgb(255, 255, 255);
color: black!important;
}
.button.white-secondary {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
}

.purple_secondary_btn:hover {
background-color: rgb(100, 0, 170);
color: white!important;
}
.magenta_secondary_btn {
background-color: white;
border: thin solid rgb(230, 0, 80)!important;
color: rgb(230, 0, 80)!important;
}
.magenta_secondary_btn:hover {
background-color: rgb(230, 0, 80);
color: white!important;
}

.magenta_secondary_btn_2 {
    background: transparent;
    border: thin solid rgb(230, 0, 80)!important;
    color: rgb(230, 0, 80)!important;
}

.more-info-btn {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
font-size: 16px;
font-weight: 100!important;
border-radius: 5px;
transition: all, 0.5s;
-moz-transition: all, 0.5s;
-wekbkit-transition: all, 0.5s;
-o-transition: all, 0.5s;
-ms-transition: all, 0.5s;
}
.more-info-btn:hover {
text-decoration: none!important;
}
.more-info-btn span {
display: inline-block;
margin-left: 10px;
transform: translateY(0.5px)!important;
}

.purple_background {
background-color: rgb(100, 0, 170);
	padding 20px;

}

/**** TEXT LINKS ****/


.cta_email, .text_link, .cta_email:hover, .text_link:hover, .phone_number {
color: rgb(100, 0, 170)!important;
font-weight: normal!important;
}
.cta_email, .text_link {
text-decoration: none;
}
.cta_email:hover, .text_link:hover {
text-decoration: underline;
}
.purple_secondary_btn span, .magenta_secondary_btn span, .text_link span {
display: inline-block;
margin-left: 10px;
transform: translateY(0.5px)!important;
}
.text_link span, .text_link span:hover {
text-decoration: none!important;
}


.btn{
	display:block;
	    color: #5514b4;
	padding:0 20px;
	height:40px;
	line-height:
	40px;border-radius:
	5px;border:1px solid transparent;
	margin:0 10px 0 0;font-size:1rem;
	text-decoration:none;
	cursor:pointer;
	min-width:120px;
	text-align:center;
}

.btn:hover {
    transition: all .25s;
}

.btn:after {
    content: url('/Images/images/svg/arrow-right-purple.svg');
   
    width: 6px;
    height: auto;
    display: block;
	margin-bottom: -3px;
	text-align:center;
}



.btn.basic {
    border: 0;
    background: transparent;
    color: #5514b4;
    display: flex;
    align-items: center;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0;
	min-width: auto;
	font-family: bt-font-reg;
}

.btn.basic:hover {
    color: #540e85;
    text-decoration: underline;
}

.btn:hover {
    transition: all .25s;
}



.btn:hover {
    transition: all .25s;
}

.btn.basic:after {
    content: url('/Images/images/svg/arrow-right-purple.svg');
    margin-left: 10px;
    width: 6px;
    height: auto;
    display: block;
	margin-bottom: -3px;
}

#btn-center {
	display:block;
	    color: #5514b4;
	padding:0 20px;
	height:40px;
	line-height:40px;
	border-radius:5px;
	border:1px solid transparent;
	margin:0 10px 0 0;font-size:1rem;
	text-decoration:none;
	cursor:pointer;
	min-width:120px;
	text-align:center;
}

#btn:hover-center {
    transition: all .25s;
}

#btn:after-center {
    content: url('/Images/images/svg/arrow-right-purple.svg');
   
    width: 6px;
    height: auto;
    display: block;
	margin-bottom: -3px;
	text-align:center;
}
	
	/* === back to the top button === */
		 
#button {
  display: inline-block;
  background-color: #5514b4;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
  content: url('/Images/images/svg/arrow-up-1.svg');
  
}
#button:hover {
  cursor: pointer;
  background-color: #6315a7;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}
	



/**** FORCE THE TEXT COLOURS, IF REQUIRED ****/

.white-text {
color: white!important;
}
.blue-text {
color: rgb(0, 170, 220)!important;
}
.purple-text {
color: rgb(100, 0, 170)!important;
}
.grey-text {
color: rgb(51, 51, 51)!important;
}
.magenta-text {
color: rgb(230, 0, 80)!important;
}
.green-text 
{
color: rgb(80, 175, 80)!important;
}

/**** STAT BOXES, SHOULD BE REMOVED -THAT COMPONENT IS OLD AND NOT VERY ATTRACTIVE ****/

.stat-padding 
{
padding: 10px;
}


/**** VIDEO CONTAINER ****/

.video-container 
{
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}

.video 
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/**** VIDEO CONTAINER HEADER ****/

.video-container-header 
{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 53.25%;
    padding: 132px;
    padding-top: 219px;
}

.video-header 
{
position: absolute;
top: 0;
left: -143px;
width: 100%;
height: 100%;
}


/**** USE WITH HTML5 VIDEO, THE ABOVE IS FOR IFRAMES AND SRC ****/

.video_container 
{
position: relative;
width: 100%;
}


#video-img {
width: 100%;
}


/**** QUOTE BOX ****/

.quote-box {}
.quote-border-right {
border-right: 5px solid;
}
.quote-border-left {
border-left: 5px solid;
}
.quote-border-top {
border-top: 5px solid;
}
.quote-border-bottom {
border-bottom: 5px solid;
}
.quote-border-full {
border: 5px solid;
}
.quote-border-purple {
border-color: rgb(100, 0, 170);
}
.quote-border-magenta {
border-color: rgb(230, 0, 80);
}
.quote-border-blue {
border-color: rgb(0, 170, 220);
}
.quote {font-family: 'bt-font-reg', sans-serif;font-size: 16px;padding: 55px;color: #3b3c3a;}
blockquote {background: #f1f1f1;height: 188px;margin: 1.5em 0;quotes: "\201C""\201D""\2018""\2019";}
blockquote i::before {
color: #3b3c3a;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.3em;
vertical-align: -0.4em;
}
blockquote i::after {
color: #3b3c3a;
content: close-quote;
font-size: 4em;
line-height: 0.1em;
margin-left: 0em;
vertical-align: -0.6em;
}


			.quote-2 {font-family: 'bt-font-reg', sans-serif;font-size: 16px; line-height: 20px; padding: 0px;color: #3b3c3a;}
blockquote-2 {background:  188px;margin: 4.5em 0;quotes: "\201C""\201D""\2018""\2019";}
blockquote-2 i::before {
color: #ffffff;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.3em;
vertical-align: -0.4em;
}
blockquote-2 i::after {
color:  #ffffff;
content: close-quote;
font-size: 4em;
line-height: 0.1em;
margin-left: 0em;
vertical-align: -0.6em;
}

/*** REMAINING DESKTOP STYLES ***/

/*** FULL WIDTH HEADER ***/

.full-width-header-500
	{
		overflow: hidden;
		position: relative;
		height:500px;
		background-repeat:no-repeat;
		background-size:cover;
		background-position:0 0; 
	}
					  
					  
		  
					  .full-width-header-transparent-box-white
	{
		overflow: hidden;
		position: relative;
		height:500px;
		background-repeat:no-repeat;
		background-size:cover;
		background-position:0 0; 
	}
					  
					  
					  	  .full-width-header-transparent-box-black
	{
		overflow: hidden;
		position: relative;
		height:500px;
		background-repeat:no-repeat;
		background-size:cover;
		background-position:0 0; 
	}
		
					  
					  					  .full-width-header-video
	{
		overflow: hidden;
		position: relative;
		height:500px;
		background-image:url('/Images/vendors/PROJECTS/BTBD/fragments/video-background.jpg');
		background-repeat:no-repeat;
		background-size:cover;
		background-position:0 0; 
	}
			
		
.full-width-header-400
	{
		overflow: hidden;
		position: relative;
		height:400px;
		background-image:url('http://www.placehold.it/1920x400?text=Full-width-header');
		background-repeat:no-repeat;
		background-size:cover;
		background-position:0 0; 
	}
		

.header-content-container
	{
		width: 100%;
		display: flex;
		 /*justify-content: center;*/
		/*position: absolute;*/
		top:0;
		height:100%;
	}


.header-content
	{
		/*box-sizing: border-box;*/
		/*padding: 2rem; */
		 /*transform: translateX(-50%);*/
		width: 27%;
		margin-left: 24%;
		align-self: center;
	}
	
					  
					  .header-content-video
	{
		/*box-sizing: border-box;*/
		/*padding: 2rem; */
		 /*transform: translateX(-50%);*/
		width: 40%;
		margin-left: 24%;
		align-self: center;
	}
	
					  .header-content-video p
	{
		font-size:16px;
		line-height:20px;
		margin-bottom:30px;
		
	}	
					  
					  .header-content-white
	{
		/*box-sizing: border-box;*/
		/*padding: 2rem; */
		 /*transform: translateX(-50%);*/
		width: 27%;
		margin-left: 24%;
		align-self: center;
	}
	


.header-content h2
	{
		
	}

.header-content p
	{
		font-size:16px;
		line-height:20px;
		margin-bottom:30px;
		font-family:bt-font-reg;
		
	}	
		
					  
 .hide-on-desktop{
	display:none !important;
	}
					  
	
	#header_section{
		 display: inline-block;
		
		}

/*** FULL WIDTH HEADER END ***/  


.cms-components .cms-component-content-panel {
	overflow: hidden;
	margin-bottom: 20px;
}

/*** header tags ***/

.h1-bg {
	font-size:48px !important;
	line-height:51px !important;
	font-weight:lighter;
	text-align:left !important;
    color: #ffffff !important;
	font-family:bt-Font-Light;
}

			.h1-bg-grey {
	font-size:48px !important;
	line-height:51px !important;
	font-weight:lighter;
	text-align:left !important;
    color: #333333 !important;
	font-family:bt-Font-Light;
		   
}

.h2-bg {
	font-size:36px !important;
	line-height:40px !important;
		
text-align:left !important;
    color:#333333 !important;	
	font-family:bt-Font-Light !important;
		   
}

.h3-bg {
	font-size:28px !important;
	line-height:32px !important;
	font-weight:lighter;
    color:#333333 !important;	
	font-family:bt-Font-Light !important;
		    
}
			
.h3-bg-white {
	font-size:28px !important;
	line-height:32px !important;
	font-weight:lighter;
    color:#ffffff !important;	
	font-family:bt-Font-Light !important;
		    
}

			
	.h3-bg-purple {
	font-size:28px !important;
	line-height:32px !important;
	font-weight:lighter;
    color:#5514b4 !important;	
	font-family:bt-Font-Light !important;
		  
}	
			

.h4-bg {
	font-size:20px !important;
	line-height:25px !important;
	font-weight:lighter;
	text-align:left !important;
    color:#333333 !important;	
	font-family:bt-font-reg !important;
		  
}
		
.h4-bg-purple {
	font-size:20px !important;
	line-height:25px !important;
	font-weight:lighter;
	text-align:center !important;
    color:#5514b4 !important;	
	font-family:bt-font-reg !important;
		  
}


.h5-bg {
	font-size:16px !important;
	line-height:21px !important;
	font-weight:lighter;
	text-align:left !important;
    color:#333333 !important;	
	font-family:bt-font-reg !important;
		   
}
		
.h5-bg-purple {
	font-size:16px !important;
	line-height:21px !important;
	font-weight:lighter;
	text-align:left !important;
    color:#5514b4 !important;	
	font-family:bt-font-reg !important;
		   
}


#center {
    font-size: 36px!important;
    line-height: 40px!important;
	font-family: bt-font-reg;
	color: #333333;
	text-align: center !important;
			   
}
	
	#center-h3 {
    font-family: bt-Font-Light !important;
    font-size: 20px;
    line-height: 24px;
	color: #333333;
	text-align: center;
		
	}	   

#center-p {
    font-family: bt-font-reg !important;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	text-align: center;
	padding:10px;
		
  
}

	.center-h3 {
    font-family: bt-Font-Light !important;
    font-size: 20px!important;
    line-height: 24px!important;
    color: #333333;
	text-align: center;
	
	
}


	#center-h4 {
    font-family: bt-font-reg !important;
    font-size: 20px!important;
    line-height: 24px!important;
    color: #333333;
	text-align: center;


}

	#button {
    border: 0;
    background: transparent;
    color: #5514b4;
    align-items: center;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 65px;
    min-width: auto;
}

.header-panel {}
.header-panel-with-logo {
	overflow: hidden;
	margin-bottom: 20px;
	margin-top: 20px;
}
.header-panel-with-logo>.title-container {}
.header-panel-with-logo>.page-logo {
	text-align: right;
}
.value {
	font-size: 6em;
	position: relative;
	top: 22px;
	font-weight: bold;
}
.float-right {
	float: right;
	margin-right: 0px;
	margin-left: 20px;
}
.float-left {
	float: left;
	margin-right: 20px;
	width: 45%;
}
.title-container {
	
}
.nav-fix {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	margin-top: 0px;
	box-shadow: 0px 1px 20px rgba(0,0,0,0.3);
}
.page-navigation {
	overflow: hidden;
	text-align: center;
	margin-bottom: 20px;
}
.page-navigation ul {
	list-style: none;
	margin: 10px 0 0 0!important;
	padding: 0;
	font-size: 0;
}
.page-navigation ul li {
	display: inline-block;
	vertical-align: top;
	margin: 0;
}
.page-navigation ul li:first-child {
	border-left: none;
}
.page-navigation ul li a {
	padding: 0px 15px;
	transition: all ease-in-out 0.5s;
	display: block;
	text-decoration: none;
	width: auto;
	font-size: 16px;
}
.page-navigation ul li a:hover, .page-navigation ul li a:focus {
	text-decoration: none;
}

/*** STYLE FOR PURPLE NAV ***/

.nav-style-1 {
	background-color: #5514b4;
}
.nav-style-1 ul li {
	border-left: thin solid white;
}
.nav-style-1 ul li a {
	color: white!important;
}
.nav-style-1 ul li a:hover, .nav-style-1 ul li a:focus {
	background-color: #cccccc;
	text-decoration: none;
}

/*** STYLE FOR WHITE NAV ***/

.nav-style-2 {
	background-color: #ffffff;
	opacity: 1;
}
.nav-style-2 ul li {
	border-left: thin solid #cccccc;
	border-bottom: 5px solid white;
	padding-top: 5px;
}
.nav-style-2 ul li:hover {
	border-bottom-color: #5514b4;
}
.nav-style-2 ul li a {
	color: #333333!important;
}
.nav-style-2 ul li a:hover, .nav-style-2 ul li a:focus {
	color: #5514b4;
	text-decoration: none;
}


/*** INTRO PANELS ***/

.intro-panel, .video-panel {
	position: relative;
	overflow: hidden;
	margin-bottom: -106px;
	height: 400px;
	width: 100%;
}

/*** IF YOU NEED TO CHANGE THE BACKGROUND IMAGE, EITHER CHANGE IT IN THE MINI-SITE SUB PAGE CSS OR CREATE A NEW CLASS AND SWAP THE BG IMAGE THAT WAY TO OVERWRITE THE BELOW ***/

.intro-panel
	{
	}

/*** YOU CAN REPLACE THE BELOW IMAGE WITH AN ANOTHER CLASS ***/

.the-image
	{
		background:url('/Images/vendors/PROJECTS/BTBD/DSGN-680337-eProcurement-Punchout/case-study.jpg') no-repeat;
	}

.intro-panel-img
	{
		width:209px;
		background-position:50% 0;
		background-size:cover;
		margin:0;
		height:250px;
		float:left;
	}


.intro-panel>.copy-container, .video-panel>.copy-container {
	float:left;
	position: relative;
	background-color: #5514b4;
	padding: 24px;
	height: 62.4%;
	bottom: 0;
	width: 78%;
	z-index: 1;
	box-sizing: border-box;
}
.copy-container
	{
		margin:0;
		float:left;
	}
.copy-container p {
	font-size: 16px;
	line-height: 22px;
	position: absolute;
	bottom: -59px;
	box-sizing: border-box;
	padding: 5% 5% 10% 1%;
	margin: 0!important;
}

.copy-block-container {
	padding: 5px;
	margin-bottom: 10px;
}


/*** CALL OUTS START ***/	
.the-image-call-out
	{
		background:url('/Images/vendors/PROJECTS/BTBD/DSGN-670611-About-us/edu-2.jpg') no-repeat;
	}


.the-image-computing
	{
		background:url('/Images/vendors/PROJECTS/BTBD/DSGN-670611-About-us/computing.jpg') no-repeat;
	}


.the-image-techknow-2

	{
		background:url('/Images/vendors/PROJECTS/BTBD/DSGN-670611-About-us/techknow-2.jpg') no-repeat;
	}




.intro-panel-img-call-out
	{
		width:55%;
		background-position:50% 0;
		background-size:cover;
		margin:0;
		height:282px;
		float:right;
	}


.intro-panel-call-out>.copy-container-call-out, .video-panel>.copy-container-call-out {
	float:left;
	position: relative;
	background-color: #ededed;
	padding: 50px;
	height: 70%;
	bottom: 0;
	width: 45%;
	z-index: 1;
	box-sizing: border-box;
}
.copy-container-call-out
	{
		margin:0;
		float:left;
	}
.copy-container p {
	font-size: 16px;
	line-height: 22px;
	position: absolute;
	bottom: 0;
	box-sizing: border-box;
	padding: 5% 5% 43% 1%;
	margin: 0!important;
}

.copy-block-container {
	padding: 5px;
	margin-bottom: 10px;
}

/*** CALL OUTS END ***/

/*** SOLUTIONS ***/

.intro-panel-solutions-box,  {
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
	height: 400px;
	width: 275%;
}

.the-image-solutions-box
	{
		background:url('/Images/vendors/PROJECTS/BTBD/DSGN-680337-eProcurement-Punchout/case-study.jpg') no-repeat;
	}

.intro-panel-img
	{
		width:209px;
		background-position:50% 0;
		background-size:cover;
		margin:0;
		height:250px;
		float:left;
	}


.intro-panel>.copy-container, .video-panel>.copy-container {
	float:left;
	position: relative;
	background-color: #5514b4;
	padding: 24px;
	height: 62.4%;
	bottom: 0;
	width: 78%;
	z-index: 1;
	box-sizing: border-box;
}
.copy-container-solutions-box
	{
		margin:0;
		float:left;
	}
.copy-container-solutions-box {
	font-size: 16px;
	line-height: 22px;
	position: absolute;
	bottom: -59px;
	box-sizing: border-box;
	padding: 5% 5% 10% 1%;
	margin: 0!important;
}

.copy-block-container {
	padding: 5px;
	margin-bottom: 10px;
}











/*** TEXT COLUMNS ***/

.two-text-col {
	column-count: 2;
	column-gap: 60px;
	column-rule: thin solid #eaeaea;
	column-width: 45%;
	/**/
	-moz-column-count: 2;
	-moz-column-gap: 60px;
	-moz-column-rule: thin solid #eaeaea;
	-moz-column-width: 45%;
	/**/
	-webkit-column-count: 2;
	-webkit-column-gap: 60px;
	-webkit-column-rule: thin solid #eaeaea;
	-webkit-column-width: 45%;
}
.two-text-col:first-child, .three-text-col:first-child {
	margin-top: 0;
}
.three-text-col {
	column-count: 3;
	column-gap: 60px;
	column-rule: thin solid #eaeaea;
	column-width: 33.3%;
	/**/
	-moz-column-count: 3;
	-moz-column-gap: 60px;
	-moz-column-rule: thin solid #eaeaea;
	-moz-column-width: 33.3%;
	/**/
	-webkit-column-count: 3;
	-webkit-column-gap: 60px;
	-webkit-column-rule: thin solid #eaeaea;
	-webkit-column-width: 33.3%;
}
.two-text-col p:first-child, .three-text-col p:first-child, .two-text-col h2:first-child, .three-text-col h2:first-child, .two-text-col ul:first-child, .three-text-col ul:first-child {
	margin-top: 0!important;
}

/*** ROWS AND GRID ***/


[class*="row-"] {
	overflow:hidden;
/***	display:flex;
	justify-content:flex-start;	 ***/
}

[class*="row-testimonial"] {
	overflow:hidden;
	height:250px;
/***	display:flex;
	justify-content:flex-start;	 ***/
}
.reverse{
	flex-flow:row-reverse;
}

[class*="col-"] {
	box-sizing: border-box;
	margin-right:42px;
	font-size:14px;
	float:left;
	position:relative;
	}
[class*="col-form"] {
	font-size: 14px;
	position: relative;
	margin-bottom: 0px;
	width:100%;
}

[class*="col-fss"] {
	box-sizing: border-box;
	margin-right:34px;
	font-size:14px;
	float:left;
	position:relative;
	padding-left: 21px;
	padding-right: 21px;
	color: white !important;
	}
	
[class^="col-"]:last-child {
	margin-right: 0;
}
[class^="col-"] img {
	width: 100%;
		padding-bottom: 10px;
}
[class^="col-"] p {
	margin-top: 20px!important;
}

[class^="col-fss"] p {
	margin-top: 20px!important;
}


.col-2 {
	width: 47.8%;
}
.col-3 {
	width: 30.4%;
	margin-bottom:20px;
}

.col-3-panel {
	width: 29.9%;
	margin-bottom:20px;
}

.col-4 {
	width: 21.3%;
}

.col-4-a {
	width: 22.3%;
}



.col-5 {
	width: 21.3%;
}

.col-logo {
	width: 10.3%;
}

.col-logo-2 {
    width: 12.3%;
    padding-left: 17px;
}

.col-2-testimonial {
	width: 62.8%;
		padding: 48px;
}
.col-no-margin {
	
width: 16.5%;
    box-sizing: border-box;
    margin-left: 0px;
    font-size: 14px;
    float: left;
    position: relative;
}
	.col-no-margin2 {
	
width: 21.3%;
    box-sizing: border-box;
    margin-left: 0px;
    font-size: 14px;
    float: left;
    position: relative;
}  

.col-2-testimial-image {
	width: 27.8%;
}


	
.col-4-solutions {
	width: 21.3%;
}


element.style {
    box-sizing: border-box;
    padding: 2%;
    border: 2px solid #5514b4;
    background-color: #ffffff;
}

/*** ARTICLE STYLE ***/


	
#solutions  {
    border: 1px solid transparent;
    padding: 11px;
    margin-bottom: 20px;
    margin-top: 0px;
    border-color: #d8d8d8;
    border-image-slice: 1;
margin-left: -42px;
width: 250px;
padding-bottom: 19px;
font-family:bt-font-reg;

}
	  #solutions2  {
    border: 1px solid transparent;
    padding: 11px;
    margin-bottom: 20px;
    margin-top: 0px;
    border-color: #d8d8d8;
    border-image-slice: 1;
margin-left: -42px;
width: 250px;
padding-bottom: 25px;
font-family:bt-font-reg;

}

/*** ARTICLE STYLE ***/
	
.article-link
	{
		box-sizing:border-box;
		border-bottom:thin solid #CCCCCC;
		margin: 20px 0;
	}	

.article-link-white
	{
		box-sizing:border-box;
		border-bottom:thin solid #FFFFFF;
		margin: 32px 0;
	}	
	
.article-img
	{
		margin-bottom:20px;
	}
	
.article-line {
   
	
    width: 290px;
    height: 1px;
    margin: 0 auto;
    background: #d8d8d8;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}	

.article-text-border:before {
    content: "";
    width: 290px;
    height: 1px;
    margin: 0 auto;
    background: #d8d8d8;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.director-cta
	{
		padding-top:15px;
	}


/*** ARTICLE STYLE 2 ***/



#artical-style-2 {
    border: 1px solid transparent;
    padding: -2px;
    margin-bottom: 20px;
    margin-top: 0px;
    border-color: #d8d8d8;
    border-image-slice: 1;
     margin-left: 2px;
    width: 296px;
    padding-bottom: 18px;
}

	.column h6-artical-style {
    font-family: bt-font-reg;
    font-size: 14px;
    line-height: 22px;
    color: #333333;
    padding: 10px;
}

.column p-artical {
    font-family: bt-font-reg;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
    padding-left: 10px;
}
	

/*** ARTICLE STYLE 2 END ***/
	
/*** COLUMN CONTAINER ***/

.column-container {
    overflow: hidden;
    padding: 0px;
    border: thin solid #eaeaea;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin-bottom: 20px;
}

.column-container-text {
    overflow: hidden;
       padding: 10px !important;
   text-align: left;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin-bottom: 20px;
}
.three-col {
       width: 31.8%;
    margin-right: 1%;
    height: 445px;
}

.four-col {
       width: 23.486%;
       margin-right: 1%;
       height: 420px;
}

/*** COLUMN CONTAINER END ***/

@import "bourbon";
/*---- NUMBER OF SLIDE CONFIGURATION ----*/
$num-of-slide: 5;

.wrapper {
    max-width: 60em;
    margin: 1em auto;
    position: relative;
}



.inner {
    width: percentage($num-of-slide);
    line-height: 0;
}

article {
    width: percentage(1/$num-of-slide);
    float: left;
    position: relative;

    img {
        width: 100%;
    }
}

/*---- featuredblocks ----*/


.featuredblocks {

border-top: thin solid #5514b4; 
	   align: center;
	width:  40px;
    margin: 20px 0;
}


/*---- transbox ----*/

div.background {
  background: url('/Images/vendors/PROJECTS/BTBD/DSGN-695043-CSP-page-on-Software-Licensing/myth-1.jpg') no-repeat;
   padding-top: 10px;
  padding-bottom: 10px;
}

div.transbox {
  margin: 60px;
  background-color: rgba(255, 255, 255, 0.8);
  padding-top: 10px;
  padding-bottom: 10px;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
	      font-family: bt-font-reg;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	font-weight: bold;	
}


/*---- end transbox ----*/

/*---- transbox-header-white----*/


div.transbox-header-white {
margin: 454px;
	background-color: rgba(255, 255, 255, 0.7);
    padding-top: 10px;
    padding-bottom: 10px;
    padding: 20px;
    padding-left: 37px;
}	

div.transbox p {
  margin: 5%;
	      font-family: bt-font-reg;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	font-weight: bold;	
}

div.transbox h1 {
  margin: 5%;
	      font-family: bt-Font-Light;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	font-weight: bold;	
}


/*---- end transbox ----*/


/*---- transbox-header-black----*/


div.transbox-header-black {
  margin: 454px;
  background-color: rgba(0, 0, 0, 0.8);
  padding-top: 10px;
  padding-bottom: 10px;
	padding: 20px;
	padding-left: 37px;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
	      font-family: bt-font-reg;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	font-weight: bold;	
}

div.transbox h1 {
  margin: 5%;
	      font-family: bt-font-reg;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	font-weight: bold;	
}


/*---- end transbox ----*/
	
	
	/*---- transbox-col-3 ----*/
	
div.three {
  background: url('/Images/vendors/PROJECTS/BTBD/DSGN-695043-CSP-page-on-Software-Licensing/myth-col-3.jpg') no-repeat;
   padding-top: 10px;
  padding-bottom: 10px;
}





/*---- end transbox ----*/



// Steps
// --------------------------------------------------

.step {
  position: relative;
  .step-number {
    padding-bottom: .625rem;
    color: $white;
    font: {
      family: $headings-font-family;
      size: ($font-size-base * 8.625);
      weight: 900;
    }
    line-height: 1;
    text-shadow: 0 .625rem 1.5rem rgba($gray-700, .14);
  }
  .step-title {
    position: relative;
    margin: 0;
    padding-bottom: 1.25rem;
    font: {
      size: $font-size-xl;
      weight: 700;
    }
    &::after { @extend %divider; }
  }
  .step-text {
    margin: 0;
    padding-top: 1.625rem;
    color: $gray-500;
    font-size: $font-size-md;
  }
  .step-link {
    display: inline-block;
    margin-top: ($spacer / 2);
    padding: ($spacer * .625) 0;
    transform: translateY(-5px);
    transition: all .3s;
    color: $primary;
    font: {
      size: $font-size-sm;
      weight: bold;
    }
    letter-spacing: .1em;
    text-decoration: none;
    opacity: 0;
    > i {
      display: inline-block;
      margin-left: ($spacer / 8);
      transition: all .25s;
      font-size: 1.2em;
      vertical-align: middle;
    }
    &:hover > i { transform: translateX(3px); }
  }
  &:hover {
    .step-link {
      transform: translateY(0);
      opacity: 1;
    }
  }
  &.text-center {
    .step-title::after {
      left: 50%;
      margin-left: -18px;
    }
  }

  // With Icon
  &.step-with-icon {
    padding-top: 4.375rem;
    text-align: center;
    .step-number {
      position: absolute;
      top: 0;
      right: -.3125rem;
      font-size: ($font-size-base * 11);
    }
    .step-icon {
      position: relative;
      width: 140px;
      height: 140px;
      margin: {
        right: auto;
        bottom: ($spacer * 1.75);
        left: auto;
      }
      border-radius: 50%;
      color: $primary;
      font-size: ($font-size-base * 2.3);
      line-height: 140px;
      text-align: center;
      z-index: 5;
      > img {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        max-width: 48px;
        margin-left: -24px;
        transform: translateY(-50%);
      }
      &::before, &::after {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: all .4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
        border-radius: 50%;
        content: '';
      }
      &::before {
        transform: scale(0);
        background-color: rgba($primary, .1);
        opacity: 0;
      }
      &::after { border: 1px dashed rgba($primary, .3); }
    }
    .step-title::after {
      left: 50%;
      margin-left: -18px;
    }
    &:hover .step-icon {
      &::before {
        transform: scale(1);
        opacity: 1;
      }
      &::after {
        top: -40%;
        left: -40%;
        width: 180%;
        height: 180%;
      }
    }
  }
  &.step-light-skin {
    .step-number {
      color: rgba($white, .1);
      text-shadow: none;
    }
    .step-title { color: $white; }
    .step-text { color: rgba($white, .5); }
  }
}

	
/*---- Carousel Slider ----*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);	

html {
  border-top: 5px solid #fff;
  
  color: #2a2a2a;
}


h1 {
  color: #fff;
  text-align: center;
  font-weight: 300;
}

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
  width: 100%;
  height: 300px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
//maxmax-width: 100%;
  height: 300px;
  text-align: center;
  line-height: 300px;
}

#slider ul li img{
	width: 100%;
	height: auto;
}

#slider .carousel-indicators{
	position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}

#slider .control_next, #slider .control_prev{
	color: white;
	text-decoration: none;
}

#slider .carousel-indicators li{
	box-sizing: content-box;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    background-color: #fff;
    background-clip: padding-box;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
}

#slider .carousel-indicators .active{
	opacity: 1;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 32%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

			

/*    Faster, Safer, Smarter Boxes     */

.rounded-box-b {
  width: 31%;
  height: 180px;
  background-color: #008dbf;

 	border-top-left-radius: 0px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 30px;
} *
	
	.rounded-box-y {
  width: 31%;
  height: 180px;
  background-color: #ffab4e;

 	border-top-left-radius: 0px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 30px;
} *
	
	.rounded-box-r {
  width: 31%;
  height: 180px;
  background-color: #e52c54;

 	border-top-left-radius: 0px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 30px;
} *
	
/*    Faster, Safer, Smarter Boxes     */	
	
	/*   Icon boxes     */			
			
			
			.solutions {
    transition: all, 500ms;
        background: white;

}
			
		
/*** IMAGE PANEL LINKS ***/
	
.nav_tile
	{
		height:300px;
		overflow:hidden;
		position:relative;
		text-align:center;
		border:thin solid white;
		transition:all, 0.5s;
	}

.nav_tile:hover
	{
		cursor:pointer;
	}


.nav_tile p
	{
		align-self:center;
		font-size:14px;
		line-height:21px;
		width:100%;
		height:100%;
		margin:0!important;
	}
	
.computing
	{
	/*background-image:url('/Images/vendors/PROJECTS/BTBD/DSGN-626332-BTLB-landing-page/computing.jpg');*/
		background-size:cover;
		background-repeat:no-repeat;	
	}
		 
.computing:hover
	{
		/*border-color:rgb(100,0,170);*/
		opacity: 0.5;
	}
	
.nav_tile a
	{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
		
.grey
	{
		position: absolute;
		bottom: 0;
		/**/
		width: 100%;
		height:60px;
		padding-top: 10px;
		background-color:rgb(0,0,0);
		    opacity: 0.8;
		border-color:#5514b4;
	}
		
		
.centre-copy {
    
    bottom: 0;
    width: 100%;
    height: 60px;
    padding-top: 140px;       
	}
		
.homepage-copy {
	
	color:rgb(255,255,255);
	font-size: 20px;
    }

.homepage-copy:hover {
	
	color:white !important; 
	font-size: 20px;
	text-decoration:underline !important;
    }




/***** Scrolling Logo *****/
/* Slider */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/***** Scrolling Logo *****/

@keyframes slide {
  from { left: 0 }
  to { left: -980px }
}

.slider2 {
  width: 1200px;
  overflow: hidden;
}

.container2 {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  position: relative;
  animation-name: slide;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.container2 div {
  padding: 20px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 100px;
  width: 100px;
}

.logos {
  height: auto !important;
  width: 122% !important;
}

/***** gallery *****/

#Gallery {
  margin-top: 30px;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
.gallery-item { 
  float: left;
  position: relative;
  width: 20%;
  padding-bottom: 14%;
}
.gallery-item a {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  overflow: hidden;
}
.gallery-item a img {
  width: 100%;
}

@media only screen and (max-width:480px) { 
    /* Smartphone view: 1 tile */
    .gallery-item {
        width: 100%;
        padding-bottom: 100%;
    }
}
@media only screen and (max-width:650px) and (min-width:481px) { 
    /* Tablet view: 2 tiles */
    .gallery-item {
        width: 50%;
        padding-bottom: 33.3%;
    }
}
@media only screen and (max-width:1050px) and (min-width:651px) { 
    /* Small desktop / ipad view: 3 tiles */
    .gallery-item {
        width: 33.3%;
        padding-bottom: 23%;
    }
}
@media only screen and (max-width:1290px) and (min-width:1051px) { 
    /* Medium desktop: 4 tiles */
    .gallery-item {
        width: 25%;
        padding-bottom: 17%;
    }
}



/* Directly from:
http://photoswipe.com/latest/photoswipe.css
*/
body.ps-active 
{
	-webkit-text-size-adjust: none;
}
body.ps-active * 
{ 
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
}
body.ps-active *:focus 
{ 
	outline: 0; 
}


/* Document overlay */
div.ps-document-overlay 
{
	background: #000;
}


/* Viewport */
div.ps-viewport 
{
	background: #000;
	cursor: pointer;
}


/* Zoom/pan/rotate layer */
div.ps-zoom-pan-rotate{
	background: #000;
}


/* Slider */
div.ps-slider-item-loading 
{ 
	background: url(http://abvichico.com/images/photoswipe/photoswipe-loader.gif) no-repeat center center; 
}


/* Caption */
div.ps-caption
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-bottom: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: bt font reg;
	text-align: center;
}

div.ps-caption-bottom
{ 
	border-top: 1px solid #42403f;
	border-bottom: none;
}

div.ps-caption-content
{
	padding: 13px;
}


/* Toolbar */
div.ps-toolbar
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-top: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: bt font reg;
	text-align: center;
	height: 44px;
	display: table;
	table-layout: fixed;
}

div.ps-toolbar-top 
{
	border-bottom: 1px solid #42403f;
	border-top: none;
}

div.ps-toolbar-close, div.ps-toolbar-previous, div.ps-toolbar-next, div.ps-toolbar-play
{
	cursor: pointer;
	display: table-cell;
}

div.ps-toolbar div div.ps-toolbar-content
{
	width: 44px;
	height: 44px;
	margin: 0 auto 0;
	background-image: url(http://abvichico.com/images/photoswipe/photoswipe-icons.png);
	background-repeat: no-repeat;
}

div.ps-toolbar-close div.ps-toolbar-content
{
	background-position: 0 0;
}

div.ps-toolbar-previous div.ps-toolbar-content
{
	background-position: -44px 0;
}

div.ps-toolbar-previous-disabled div.ps-toolbar-content
{
	background-position: -44px -44px;
}

div.ps-toolbar-next div.ps-toolbar-content
{
	background-position: -132px 0;
}

div.ps-toolbar-next-disabled div.ps-toolbar-content
{
	background-position: -132px -44px;
}

div.ps-toolbar-play div.ps-toolbar-content
{
	background-position: -88px 0;
}

/* Hi-res retina display */
@media only screen and (-webkit-min-device-pixel-ratio: 2)
{
	div.ps-toolbar div div.ps-toolbar-content
	{
		-webkit-background-size: 176px 88px;
		background-image: url(http://abvichico.com/images/photoswipe/photoswipe-icons@2x.png);
	}
}							  
	
							  
	/***** intro panel *****/						  
							  
							  .intro-panel-text-right, .intro-panel-text-left {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    height: auto;
    width: 100%;
}
							  
	.intro-panel-text-right > .copy-container, .intro-panel-text-left > .copy-container {
    position: absolute;
    background-color: #123e8b;
    padding: 20px;
    height: 100%;
    bottom: 0;
    width: 40%;
    z-index: 1;
}						  
							  
/***** Scrolling Logo *****/
							  
	
/*** THIS WILL LOOK FOR EVERY NTH INSTANCE OF THE COLUMN - E.G FOR 3 COLUMNS IT WILL LOKO FOR EVERY THIRD ONE, ETC, AND REMOVE THE RIGHT MARGIN - USE WHEN MULTIPLE COLUMNS ARE IN A SINGLE ROW ***/
/*** OTHERWISE, LEAVE IT COMMENTED OUT ***/	
	
/*.col-2:nth-child(2n),
.col-3:nth-child(3n),
.col-4:nth-child(4n) 	
{
	margin-right:0;
}*/

/*** THIS WILL LOOK FOR EVERY NTH INSTANCE OF THE COLUMN - AND REMOVE ANY FLOAT THAT COMES BEFORE IT SO THAT THE COLUMNS LINE UP - USE WHEN MULTIPLE COLUMNS ARE IN A SINGLE ROW ***/	
/*** OTHERWISE, LEAVE IT COMMENTED OUT ***/	
	
/*.col-2:nth-child(2n) + div,	
.col-3:nth-child(3n) + div,
.col-4:nth-child(4n) + div
	{
		clear:both;
	}
*/
	
/* [ TO VERTICALLY CENTRALISE TEXT CONTENT IN A COLUMN ] */
		
.col-align
	{
		align-self:center;
	}
		
.column-content
	{
		box-sizing:border-box;
		padding:20px;
	}
		
.reverse .column-content
	{
		box-sizing:border-box;
		padding-left:0;
	}

/*** QUICK BORDERS ***/

.border {
	border: thin solid #dddddd;
}
.border-left {
	border-left: thin solid #dddddd;
}
.border-right {
	border-right: thin solid #dddddd;
}
.border-top {
	border-top: thin solid #dddddd;
}
.border-bottom {
	border-bottom: thin solid #dddddd;
}

/*** SETS HEIGHTS FOR H2 AND P TAGS WHEN USED WITH 'COL-' CLASSES - USE SPARINGLY, THEY'RE NOT AN IDEAL APPROACH ***/

.h2-two-lines {
	height: 50px;
}
.h2-three-lines {
	height: 75px;
}
.h2-four-lines {
	height: 100px;
}
.p-three-lines {
	height: 72px;
}
.p-four-lines {
	height: 96px;
}
.p-five-lines {
	height: 120px;
}
.p-six-lines {
	height: 144px;
}
.p-seven-lines {
	height: 168px;
}
.p-eight-lines {
	height: 192px;
}
.p-ten-lines {
	height: 240px;
}
.p-eleven-lines {
	height: 264px;
}
.p-twelve-lines {
	height: 288px;
}


/*** CLEANS UP DEFAULT UL/LI LIST STYLING FOR DESKTOP ***/


.list_col {
	display: inline-block;
	width: 46%;
	vertical-align: top;
	margin-right: 20px;
}
.list_col:last-child {
	margin-right: 0;
}
.list_ {}
.list_ ul {}
.list_ ul li {
	list-style: disc;
}


/*** THE BELOW IS USED WITH LINE LISTING AND OTHER PRODUCT CONTAINERS ***/


.cms-component-product-line-listing {}
.product-merchant {
	background-color: white!important;
}
.product-merchant .lower-section {
	background-color: white!important;
	box-shadow: none!important;
}
table.product-listing {
	background-color: transparent!important;
}
table.product-listing td.compare-col {
	display: none;
}
.cms-components .cms-component-featured-product-large {
	margin: 0px !important;
	border: medium none !important;
	width: 100%;
	padding: 20px !important;
}
.featuredWrapInner {
	background-color: white;
	width: 94%;
	padding: 10px;
}
.cms-components .cms-component-featured-product-large .image {
	width: 39%!important;
	display: inline-block;
	float: none!important;
	vertical-align: middle;
	text-align: left;
	background-color: white;
}
.cms-components .cms-component-featured-product-large .description {
	width: 55%;
	position: relative;
	display: inline-block;
	float: none!important;
	vertical-align: middle;
	background-color: white;
	margin: 0px;
	padding: 10px;
}


/*** CTA STYLES ***/


.cta_email, .text_link, .phone_number {
	text-decoration: none;
	color: rgb(100, 0, 170)!important;
}
.cta_email:hover, .text_link:hover {
	text-decoration: underline;
	color: rgb(100, 0, 170)!important;
}
.phone_number {
	font-size: 26px;
}
.text_link span {
	display: inline-block;
	margin-left: 10px;
	transform: scale(1.2);
	margin-top: -1px;
}
.text_link span, .text_link span:hover {
	text-decoration: none!important;
}

/*** FOR HTML BANNERS ***/

	
.banner-style {
	position: relative;
	overflow: hidden;
	margin: 10px 0;
}
.banner-style .col-2:last-child {
	max-width: 50%;
}
	
.banner-content
	{
		box-sizing:border-box;
		padding:20px 0 0 0;
	}
	
.banner-content h2 {
	margin: 0 0 0 0!important;
}
.banner-content p {
	margin: 5px 0 0 0!important;
}
	
.banner-content a
	{
		margin-top:20px;
	}	


/*** SCALEABLE TABLES, ADJUST TO SUIT IN THE MINI-SITE SUB PAGE CSS IF REQUIRED ***/

.table_container {
	overflow: hidden;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-top: 10px;
}
.table_col {
	float: left;
	width: 19.55%;
	border-right: thin solid white;
}
.table_col:last-child {
	border-right: none;
}
.table_cell {
	background-color: #ebebeb;
	padding: 10px;
	margin-bottom: 10px;
	text-align: center;
}
.table_cell:nth-child(even) {
	background-color: #fff;
}
.table_cell:nth-child(1) {
	font-weight: bold;
	background-color: #343434;
	color: #fff;
	text-transform: uppercase;
}


/*** MODAL POP UP, MAINLY USED ON THE EVENT CALENDAR ***/


.modal {
	position: fixed;
	top: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	background-color: rgba(100, 0, 170, 0.8);
	overflow-y: auto;
}
.modalWrapper {
	height: 100%;
	width: 100%;
	display: table;
}
.modalContent {
	display: table-cell;
	vertical-align: middle;
	position: relative;
	width: 100%;
	height: 100%;
}
.modalBox {
	margin: 0 auto;
	max-width: 100%;
	box-sizing: border-box;
	padding: 50px;
	background-color: white;
	width: 700px;
	border-radius: 5px;
}
.noBackground {
	background-color: transparent!important;
}
.modalInfo {
	width: 100%;
}
.modalInfo img {
	max-width: 100%;
	height: auto;
}
.modalInfoCopy {
	margin: 10px 0;
}
.closeModal {
	position: fixed;
	height: 50px;
	width: 50px;
/* IF THE PAGE YOU ARE WORKING ON DOESN'T HAVE A FIXED HEADER, THEN REDUCE THE TOP VALUE TO 2%*/	
	top: 8%;
	right: 2%;
	transform: rotate(45deg);
}
.closeModal:before {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -1px;
	height: 0;
	width: 2px;
	background: rgba(255, 255, 255, 0.7);
}
.closeModal:after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -1px;
	width: 0;
	height: 2px;
	background: rgba(255, 255, 255, 0.7);
}
.modal.active .modalWrapper .modalContent .closeModal:hover {
	cursor: pointer;
}
.modal.active .modalWrapper .modalContent .closeModal::before, .modal.active .modalWrapper .modalContent .closeModal::after {
	background: rgba(255, 255, 255, 1);
}
.modal.active .modalWrapper .modalContent .closeModal::before {
	transition: .25s .5s ease-in-out;
	height: 100%;
}
.modal.active .modalWrapper .modalContent .closeModal::after {
	transition: .25s .25s ease-in-out;
	width: 100%;
}
.modal.active {
	z-index: 1;
	left: 0%;
	animation: fadeIn .25s ease-in-out;
}


/*** FLIP CONTAINERS ***/


.flip-container {
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-ms-perspective: 1000px;
	-o-perspective: 1000px;
	perspective: 1000px;
	/**/
	float: left;
	margin: 20px 20px 20px 0;
}
.flip-container:last-child {
	margin-right: 0!important;
}
.front {
	z-index: 2;
	/**/
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
.back {
	z-index: 1;
	/**/
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	/**/
	background-color: #5514b4;
	color: white;
}
.back a {
	text-align: center;
	color: white;
	padding: 120px 10px 10px 10px;
	display: block;
	position: relative;
	font-size: 1.5em;
	text-decoration: none;
}
.back a span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 140%;
}
/* For Internet Explorer */
.flip-container:hover .front, .flip-container.hover .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
/* For Internet Explorer */
.flip-container:hover .back, .flip-container.hover .back {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
.flip-container, .front, .back {
	width: 230px;
	height: 230px;
}
.flipper {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	/**/
	position: relative;
}
.front, .back {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	/**/
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	/**/
	-webkit-transition: 1.0s;
	-moz-transition: 1.0s;
	-ms-transition: 1.0s;
	-o-transition: 1.0s;
	transition: 1.0s;
	/**/
	-webkit-transition-delay: 250ms;
	-moz-transition-delay: 250ms;
	-ms-transition-delay: 250ms;
	-o-transition-delay: 250ms;
	transition-delay: 250ms;
	/**/
	position: absolute;
	top: 0;
	left: 0;
}


/*** THINGS YOU NEED TO KNOW NEW BRAND ***/


.things-new-brand p {
	font-size: 16px;
	font-weight: bold;
}
.things-new-brand p:hover {
	cursor: pointer;
}
.things-new-brand p::after {
	 content:  url("/Images/vendors/PROJECTS/BTBD/DSGN-670611-About-us/BT_Iconography_Arrow_Down_white-72-small-3.png");
	display: inline-block;
	margin-left: 772px;	
	padding-bottom: 10px
		
}
.things-new-brand p.close::after {
content: url("/Images/vendors/PROJECTS/BTBD/DSGN-670611-About-us/BT_Iconography_Arrow_Down_purple_close-2.png");
	display: inline-block;
	margin-left: 772px;	
}
.things-new-brand ol, .things>div {
	display: none;
}
.things-new-brand ol.showOl, .things>div.showOl {
	display: block;
	margin-top: 20px;
}
.things-new-brand ol li {
	list-style: decimal!important;
	margin-left: 24px;
}
	
	

	
	/*** THINGS YOU NEED TO KNOW ***/


.things p {
	font-size: 16px;
	font-weight: bold;
}
.things p:hover {
	cursor: pointer;
}
.things p:after {
	content: " +";
	display: inline-block;
	margin-left: 20px;
}
.things p.close:after {
	content: " -";
	display: inline-block;
	margin-left: 20px;
}
.things ol, .things>div {
	display: none;
}
.things ol.showOl, .things>div.showOl {
	display: block;
	margin-top: 20px;
}
.things ol li {
	list-style: decimal!important;
	margin-left: 24px;
}

/*** SITE MAP FOOTER LINKS, NORMALLY USED IN A HUB ***/

#footer_links {
	padding: 10px;
	overflow: hidden;
}
#footer_links ul {
	float: left;
	margin-right: 34px !important;
	padding: 0px;
	margin-left: 0px;
	list-style: outside none none;
	width: 13.1%;
}
#footer_links ul li:first-child {
	margin-bottom: 10px;
}
#footer_links ul li:first-child a {
	color: #55379b !important;
	text-decoration: none;
	background: #f1f1f1;
	padding: 5px;
	width: 100%;
	display: block;
	text-align: center;
	border: thin solid #ccc;
	transition: all, 500ms;
}
#footer_links ul li:first-child a:hover {
	background: rgb(100, 0, 170);
	border: thin solid rgb(100, 0, 170);
	color: white!important;
	text-decoration: none;
}
#footer_links ul:last-child {
	margin-right: 0!important;
}
#footer_links ul li a {
	text-decoration: none;
	color: #333333;
}
#footer_links ul li a:hover {
	text-decoration: underline;
	color: #333333;
}

	


/*** ACCORDION ***/


.accordion-wrapNK {
	margin-bottom: 20px;
}
.accordion-contentNK {
	display: none;
	padding: 20px;
	border: thin solid #5514b4;
	margin-top: -14px;
}
.accordion-contentNK p {
	margin: 0!important;
}
.accordion-toggleNK {
	box-sizing: border-box;
	padding: 20px;
	color: white!important;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.4);
	background-color: #5514b4;
}
.accordion-toggleNK:hover {
	cursor: pointer;
}
.accordion-toggleNK img {
	width: 40px;
	float: right;
}

/*** CAN'T RECALL WHAT THE BELOW STYLING IS FOR - IF WE CAN'T TRACE IT THEN GET RID OF IT ***/


.key_facts {
	text-align: center!important;
}
.fact_icon {
	/* [BOX] */
	border-radius: 50%;
	width: 160px;
	height: 160px;
	margin: 0 auto;
	/* [COLOURS] */
	/* [ CHANGE COLOURS TO SUIT] */
	background-color: #8ec0e7;
	border: thin solid white;
	/* [FX] */
	transition: all 1s;
	/* [BACKGROUND IMAGE PROPERTIES] */
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 50%;
}
.fact_icon:hover {
	/* [ CHANGE COLOURS TO SUIT] */
	background-color: white;
	border-color: #8ec0e7;
}
.fact_icon img {
	width: 150px;
	height: 150px;
}

#date {
	background-image: url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/calendar_white.png');
}
#date:hover {
	background-image: url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/calendar_blue.png');
}
	
/************Parrallax*************/

@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);

/* Override UGG site */
#main {width: 100%; padding:0;}
.content-asset p {margin:0 auto;}
.breadcrumb {display:none;}

/* Helpers */
/**************************/
.margin-top-10 {padding-top:10px;}
.margin-bot-10 {padding-bottom:10px;}

/* Typography */
/**************************/
#parallax-world-of-ugg h1 {font-family:'bt-Font-Light' !important; font-size:24px; font-weight:400; text-transform: uppercase; color:black; padding:0; margin:0;}
#parallax-world-of-ugg h2 {font-family:'bt-Font-Light' !important; font-size:40px !important; text-align:center; color:white; font-weight:400;  z-index:10; opacity:.9;}
#parallax-world-of-ugg h3 {font-family:'bt-Font-Light'!important; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;}
			#parallax-world-of-ugg p {font-family:'bt-font-reg'!important; font-weight:400; color:white; font-size:15px; line-height:24px; padding-left: 70px; padding-right: 70px; text-align: center;}
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: bt-font-reg;}

.sc {color: #6400aa;}
.ny {color: #6400aa;}
.atw {color: #6400aa;}

/* Section - Title */
/**************************/
#parallax-world-of-ugg .title {background: white; margin:0 auto; text-align:center;}
#parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}

/* Section - Block */
/**************************/
#parallax-world-of-ugg .block {background: white; width:820px; margin:0 auto; text-align:justify;}
#parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;}
#parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}

/* Section - Parallax */
/**************************/
#parallax-world-of-ugg .parallax-one {padding-top: 100px; padding-bottom: 100px; overflow: hidden; position: relative; width: 100%; background-image: url(/Images/vendors/PROJECTS/BTBD/DSGN-348477-PHASE%202-Services-home/plan2.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;}
#parallax-world-of-ugg .parallax-two {padding-top: 100px; padding-bottom: 100px; overflow: hidden; position: relative; width: 100%; background-image: url(/Images/vendors/PROJECTS/BTBD/DSGN-348477-PHASE%202-Services-home/finance2.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: bottom;}
#parallax-world-of-ugg .parallax-three {padding-top: 100px; padding-bottom: 100px; overflow: hidden; position: relative; width: 100%; background-image: url(/Images/vendors/PROJECTS/BTBD/DSGN-348477-PHASE%202-Services-home/prepare2.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: bottom;}
#parallax-world-of-ugg .parallax-four {padding-top: 100px; padding-bottom: 100px; overflow: hidden; position: relative; width: 100%; background-image: url(/Images/vendors/PROJECTS/BTBD/DSGN-348477-PHASE%202-Services-home/deploy2.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center;}
#parallax-world-of-ugg .parallax-five {padding-top: 100px; padding-bottom: 100px; overflow: hidden; position: relative; width: 100%; background-image: url(/Images/vendors/PROJECTS/BTBD/DSGN-348477-PHASE%202-Services-home/enable2.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center;}
#parallax-world-of-ugg .parallax-six {padding-top: 100px; padding-bottom: 100px; overflow: hidden; position: relative; width: 100%; background-image: url(/Images/vendors/PROJECTS/BTBD/DSGN-348477-PHASE%202-Services-home/protect2.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center;}

/* Extras */
/**************************/
#parallax-world-of-ugg .line-break {border-bottom:2px solid white; width: 363px; margin-left: 235px; margin-right: 235px;}

/* Media Queries */
/**************************/
@media screen and (max-width: 959px) and (min-width: 768px) {
#parallax-world-of-ugg .block {padding: 40px; width:620px;}
#parallax-world-of-ugg .line-break {border-bottom:2px solid white; width: 194px; margin-left: 30px; margin-right: 235px;}
	#parallax-world-of-ugg p {font-family:'bt font reg'!important; font-weight:400; color:white; font-size:18px; line-height:24px; padding-left: 50px; padding-right: 50px; text-align: center;}
#parallax-world-of-ugg h2 {font-size:36px !important;}
}
@media screen and (max-width: 767px) {
#parallax-world-of-ugg .block {padding: 30px; width:420px;}
#parallax-world-of-ugg h2 {font-size:36px !important;}
#parallax-world-of-ugg .block {padding: 30px;}
#parallax-world-of-ugg .parallax-one, #parallax-world-of-ugg .parallax-two, #parallax-world-of-ugg .parallax-three, #parallax-world-of-ugg .parallax-four,#parallax-world-of-ugg .parallax-five,#parallax-world-of-ugg .parallax-six {padding-top:100px; padding-bottom:100px;}
#parallax-world-of-ugg .line-break {border-bottom:2px solid white; width: 194px; margin-left: 30px; margin-right: 235px;}
	#parallax-world-of-ugg p {font-family:'bt font reg'!important; font-weight:400; color:white; font-size:18px; line-height:24px; padding-left: 50px; padding-right: 50px; text-align: center;}
}
@media screen and (max-width: 479px) {
#parallax-world-of-ugg .block {padding: 4px 49px; width:261px;}
#parallax-world-of-ugg .line-break {border-bottom:2px solid white; width: 194px; margin-left: 30px; margin-right: 235px;}
	#parallax-world-of-ugg p {font-family: 'bt-font-reg', sans-serif !important; font-weight:400; color:white; font-size:18px; line-height:24px; padding-left: 50px; padding-right: 50px; text-align: center;}
#parallax-world-of-ugg h2 {font-size:36px !important;}
}

/**********Parrallax**********/

	     @media only screen and (min-width:760px){
	      .not-on-desktop{
		  display:none;
	  }	
	       }

/**
#####################

=== MOBILE STYLES ===

#####################

**/

@media screen and (max-width: 560px) {
	
	#slider{
		width: 100% !important;
	}
	
	#slider ul li{
		width: 100%;
	}
	
	#slider .carousel-indicators, #slider .control_next, #slider .control_prev{
		display: none;
	}

footer, div.telno, .printhide, #pageLogo, .hide-on-mobile, .minisitehomepage h1:first-of-type, .minisitehomepage h1:nth-child(1) {
	display: none;
}
	  

	  .not-on-mobile{
		  display:none;
	  }	  
	  
.cms-component {
	overflow: hidden;
	margin-bottom: 20px;
}
#pageLogo {
	width: 40%;
}
img {
	width: 100%;
}
a {
	font-weight: normal!important;
}
html {
	position: relative;
	min-height: 100%;
}
.header-panel-with-logo {
	overflow: hidden;
}
.header-panel-with-logo>.page-logo {
	float: right;
	margin-top: 10px;
	margin-right: -90px;
}
.header-panel-with-logo>.title-container {
	float: left;
}
.title-container {
	background-color: #ffffff;
	padding: 5px;
}
.title-container h1 {
	margin-bottom: 0;
}
.header-title {
	font-family: "bttv-regular", sans-serif;
	font-size: 28px;
	line-height: 36px;
	color: rgb(100, 0, 170);
}
.header-sub-title {
	font-family: "bttv-regular", sans-serif;
	font-size: 16px;
	line-height: 22px;
	color: #3b3c3a;
}
	  
	  


/*** FULL WIDTH HEADER MOBILE ***/
	
	.full-width-header-600
	{
		overflow: hidden;
		position: relative;
		background-image:url('/Images/vendors/PROJECTS/BTBD/DSGN-348404-About-Us/front-page/about-us-001.jpg');
		background-repeat:no-repeat;
		background-size:250%;
		background-position:28% 0; 		
	}
	  .full-width-header-500
	{
		overflow: hidden;
		position: relative;
		height:687px;
		background-repeat:no-repeat;
		background-size:cover;
		background-position:0 0; 
	}


	.full-width-header-transparent-box-white
	{
		overflow: hidden;
		position: relative;
		background-image:url('/Images/vendors/PROJECTS/BTBD/DSGN-670611-About-us/about-us-003.jpg');
		background-repeat:no-repeat;
		background-size: 267%;
		background-position: 78% 7px;	
		    height: 624px !important;
		margin-top:-8px;
	}

	.full-width-header-transparent-box-black
	{
		overflow: hidden;
		position: relative;
		background-image:url('/Images/vendors/PROJECTS/BTBD/DSGN-689011-Updating-Services-section-in-new-brand/it-1920x600-2.jpg');
		background-repeat:no-repeat;
		background-size:400%;
		background-position:66% 0; 
		height:650px !important;		
	}


.full-width-header-video
	{
		overflow: hidden;
		position: relative;
		background-image:url('/Images/vendors/PROJECTS/BTBD/fragments/video-background.jpg');
		background-repeat:no-repeat;
		background-size:153%;
		background-position:28% 0; 		
	}


.header-content-container
	{
    background-color: #5514b4;
	display: block !important;
    box-sizing: border-box;
    padding: 20px;
    margin-top: 314px;
	}




.header-content-container-white
	{
    background-color: #ffffff;
	display: block !important;
    box-sizing: border-box;
    padding: 20px;
    margin-top: 304px;
	}


.header-content
	{
		box-sizing: border-box; 
		padding: 2rem;
		transform: translateX(-50%);
		width: 100%;
		margin-left: 50%;
		align-self: center;
	}



	
			/*---- transbox-header-white----*/


div.transbox-header-white {

    margin-top: -140px;
    background-color: #ffffff !important;
    padding-top: 53px;
    padding-bottom: 10px;
    opacity: 1.8;
    padding: 169px;
    padding-left: 469px;
    display: initial;
}

div.transbox p {
  margin: 5%;
	      font-family: bt-font-reg;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	font-weight: bold;	
}

div.transbox h1 {
  margin: 5%;
	      font-family: bt-font-reg;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	font-weight: bold;	
}


/*---- end transbox ----*/


/*---- transbox-header-black----*/


div.transbox-header-black {
     margin-top: -17px;
    background-color: #000000;
    padding-top: 10px;
    padding-bottom: 10px;
   
    opacity: 1.8;
    padding: 56px;
    padding-left: 31px;
    display: initial;
}

div.transbox p {
  margin: 5%;
	      font-family: bt-font-reg;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	font-weight: bold;	
}

div.transbox h1 {
  margin: 5%;
	      font-family: bt-font-reg;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	font-weight: bold;	
}


/*---- end transbox ----*/
	

.header-content h2
	{
		
	}

.header-content p
	{
		font-size:16px !important;
		line-height:20px;
	}	
	
/*** header tags ***/

.h1-bg {
	font-size:32px !important;
	line-height:36px !important;
	font-weight:lighter;
	text-align:left !important;
    color: #ffffff !important;
	display:block !important;
	font-family:bt-Font-Light !important;
}

.h2-bg {
	font-size:26px !important;
	line-height:30px !important;
	font-weight:lighter;
	text-align:left !important;
    color:#333333 !important;	
	display:block !important;
font-family:bt-Font-Light !important;	
}

.h3-bg {
	font-size:22px !important;
	line-height:26px !important;
	font-weight:lighter;
    color:#333333 !important;	
	display:block !important;
font-family:bt-Font-Light !important;	
}


.h4-bg {
	font-size:18px !important;
	line-height:23px !important;
	font-weight:lighter;
	text-align:left !important;
    color:#333333 !important;	
	display:block !important;
font-family:bt-font-reg !important;
}


.h5-bg {
	font-size:16px !important;
	line-height:21px !important;
	font-weight:lighter;
	text-align:left !important;
    color:#333333 !important;	
	display:block !important;
	font-family:bt-font-reg !important;
}
	  
	  .h3-bg-white {
	font-size:28px !important;
	line-height:32px !important;
	font-weight:lighter;
    color:#ffffff !important;	
	font-family:bt-Font-Light !important;
		    
}

.h1-bg-grey {
	font-size:32px !important;
	line-height:36px !important;
	font-weight:lighter;
	text-align:left !important;
    color: #333333 !important;
	display:block !important;
	font-family:bt-Font-Light !important;
}


/*** INTRO PANELS ***/

.intro-panel {
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
	height: auto;
	width: 100%;
}


/**** QUOTE BOX ****/

.quote-box {}
.quote-border-right {
border-right: 5px solid;
}
.quote-border-left {
border-left: 5px solid;
}
.quote-border-top {
border-top: 5px solid;
}
.quote-border-bottom {
border-bottom: 5px solid;
}
.quote-border-full {
border: 5px solid;
}
.quote-border-purple {
border-color: rgb(85, 20, 180);
}
.quote-border-magenta {
border-color: rgb(230, 0, 80);
}
.quote-border-blue {
border-color: rgb(0, 170, 220);
}
.quote {font-family: 'bt-font-reg', sans-serif;font-size: 16px;padding: 55px;color: #3b3c3a;}
blockquote {background: #f1f1f1;height: 718px; margin: 1.5em 0;quotes: "\201C""\201D""\2018""\2019";}
blockquote i::before {
color: #3b3c3a;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.3em;
vertical-align: -0.4em;
}
blockquote i::after {
color: #3b3c3a;
content: close-quote;
font-size: 4em;
line-height: 0.1em;
margin-left: 0em;
vertical-align: -0.6em;
}


			.quote-2 {font-family: 'bt-font-reg', sans-serif;font-size: 16px; line-height: 20px; padding: 0px;color: #3b3c3a;}
blockquote-2 {background:  188px;margin: 4.5em 0;quotes: "\201C""\201D""\2018""\2019";}
blockquote-2 i::before {
color: #ffffff;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.3em;
vertical-align: -0.4em;
}
blockquote-2 i::after {
color:  #ffffff;
content: close-quote;
font-size: 4em;
line-height: 0.1em;
margin-left: 0em;
vertical-align: -0.6em;
}


/*** IF YOU NEED TO CHANGE THE BACKGROUND IMAGE, EITHER CHANGE IT IN THE MINI-SITE SUB PAGE CSS OR CREATE A NEW CLASS AND SWAP THE BG IMAGE THAT WAY TO OVERWRITE THE BELOW ***/

.intro-panel
	{
		background-position:0 0;
		background-size:cover;
	}

.intro-panel-img
	{
		background:url('/Images/vendors/PROJECTS/BTBD/DSGN-680337-eProcurement-Punchout/case-study.jpg') no-repeat;
	}

.intro-panel-img
	{
		float:none;
		background-position:50% 0;
		background-size:cover;
		height:300px;
		width:100%;
	}


.copy-container {
	margin-top: -5px;
	position:relative!important;
	width:100%!important;
	padding:75px 26px!important;
}

.copy-container p
{
	position:relative;
	width:100%;
	margin:0!important;
	padding:20px
}
	
/**** BUTTONS ****/

.purple-btn, .purple-background {
background-color: rgb(85, 20, 180);
}
.purple-btn:hover {
background-color: rgb(70, 0, 120);
}
.magenta-btn, .magenta-background {
background-color: rgb(225, 110, 225);
}
.magenta-btn:hover {
background-color: rgb(170, 0, 60);
}
.blue-btn, .blue-background {
background-color: rgb(0, 170, 220);
}
.blue-btn:hover {
background-color: rgb(0, 120, 160);
}
.green-btn, .green-background {
background-color: rgb(80, 175, 80);
}
.green-btn:hover {
background-color: rgb(55, 147, 55);
}
.yellow-btn, .yellow-background {
background-color: rgb(255, 220, 0);
}
.yellow-btn:hover {
background-color: rgb(224, 192, 0);
}
.dark-grey-btn, .dark-grey-background {
background-color: rgb(51, 51, 51);
}
.dark-grey-btn:hover {
background-color: rgb(35, 35, 35);
}
.medium-grey-btn, .medium-grey-background {
background-color: rgb(102, 102, 102);
}
.medium-grey-btn:hover {
background-color: rgb(70, 70, 70);
}
.light-grey-btn, .light-grey-background {
background-color: rgb(221, 221, 221);
}
.light-grey-btn:hover {
background-color: rgb(178, 178, 178);
}
.red-btn, .red-background {
background-color: rgb(230, 0, 20);
}
.red-btn:hover {
background-color: rgb(186, 0, 16);
}
.purple_secondary_btn {
    background: transparent;
border: thin solid rgb(85, 20, 180)!important;
color: rgb(85, 20, 180)!important;
}
.white_secondary_btn {
    background: transparent;
border: thin solid rgb(255, 255, 255)!important;
color: rgb(255, 255, 255)!important;
}
.white_secondary_btn:hover {
background-color: rgb(255, 255, 255);
color: black!important;
}
.button.white-secondary {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
}

.purple_secondary_btn:hover {
background-color: rgb(85, 20, 180);
color: white!important;
}
.magenta_secondary_btn {
background-color: white;
border: thin solid rgb(225, 110, 225)!important;
color: rgb(225, 110, 225)!important;
}
.magenta_secondary_btn:hover {
background-color: rgb(230, 0, 80);
color: white!important;
}
.more-info-btn {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
font-size: 16px;
font-weight: 100!important;
border-radius: 5px;
transition: all, 0.5s;
-moz-transition: all, 0.5s;
-wekbkit-transition: all, 0.5s;
-o-transition: all, 0.5s;
-ms-transition: all, 0.5s;
}
.more-info-btn:hover {
text-decoration: none!important;
}
.more-info-btn span {
display: inline-block;
margin-left: 10px;
transform: translateY(0.5px)!important;
}



/*** solutions ***/	


#solutions 
    
	{
     border: -1px solid transparent;
    padding: 17px;
    margin-bottom: 18px;
    margin-top: -34px;
    border-color: #d8d8d8;
    border-image-slice: 8;
    margin-left: 0px;
    width: 359px;
    padding-bottom: 8px;
}



/*** ROWS AND GRID ***/	
	
	
[class*="row-"] {
	overflow: hidden;
}
[class*="col-"] {
	font-size: 14px;
	position: relative;
	margin-bottom: 20px;
	width:100%;
}
[class*="col-form"] {
	font-size: 14px;
	position: relative;
	margin-bottom: -88px;
	padding-bottom:35px;
	width:100%;
}
[class*="col-"] img {
	width: 100%;
}

/*** IMAGE PANEL LINKS ***/

.col-3-panel {
	width: 47.8%;
	margin-right:2%;
	margin-bottom:2%;
}


.col-logo-2 {
  width: 35.8%;
	margin-right:14%;
	margin-bottom:2%;
		}


	#button {
    border: 0;
    background: transparent;
    color: #6400aa;
    align-items: center;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 119px;
    min-width: auto;
}

/*** ARTICLE STYLE ***/
	
	
.article-copy
	{
		width:100%
	}
	

.director-cta
	{
		padding:0px 20px;
	}	

/*    Faster, Safer, Smarter Boxes     */

.rounded-box-b {
  width: 100%;
  height: 180px;
  background-color: #008dbf;

 	border-top-left-radius: 0px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 30px;
} *
	
	.rounded-box-y {
  width: 100%;
  height: 180px;
  background-color: #ffab4e;

 	border-top-left-radius: 0px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 30px;
} *
	
	.rounded-box-r {
  width: 100%;
  height: 180px;
  background-color: #e52c54;

 	border-top-left-radius: 0px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 30px;
} *
	
/*    Faster, Safer, Smarter Boxes     */	
	
	
	/*** COLUMN CONTAINER ***/

.column-container {
    overflow: hidden;
    padding: 0px;
    border: thin solid #eaeaea;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin-bottom: 10px;
}

.column-container-text {
    overflow: hidden;
    padding: 11px;
   text-align: left;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin-bottom: 10px;
}
.three-col {
       width: 98.8%;
    margin-right: 1%;
    height: 420px;
}
		
.four-col {
    width: 98.8%;
    margin-right: 1%;
    height: 363px;
}

/*** COLUMN CONTAINER END ***/

/***********************************************************************************
************************************************************************************

THE 'COL-SM' CLASS IS NEW TO CONTROL THE WIDTH AND DISTRIBUTION OF COLUMNS ON MOBILE

************************************************************************************
***********************************************************************************/

.col-sm
	{
		width:48.5%;
		margin-right:3%;
	}
	
	.col-sm:nth-child(2n)
	{
		margin-right:0;
	}

.hidden_content {
	background-color: #5514b4;
	margin-top: -20px;
	padding: 10px;
	box-sizing: border-box;
}
.body-copy {
	margin: 10px 0;
}
	
		
		
		/*** CALL OUTS START ***/	
.the-image-call-out
	{
		background:url('/Images/vendors/PROJECTS/BTBD/DSGN-670611-About-us/edu-2.jpg') no-repeat;
	}


.the-image-computing
	{
		background:url('/Images/vendors/PROJECTS/BTBD/DSGN-670611-About-us/computing.jpg') no-repeat;
	}


.the-image-techknow-2

	{
		background:url('/Images/vendors/PROJECTS/BTBD/DSGN-670611-About-us/techknow-2.jpg') no-repeat;
	}




.intro-panel-img-call-out
	{
		width:100%;
		background-position:50% 0;
		background-size:cover;
		margin:0;
		height:282px;
		float:right;
	}


.intro-panel-call-out>.copy-container-call-out, .video-panel>.copy-container-call-out {
	float:left;
	position: relative;
	background-color: #ededed;
	padding: 50px;
	height: 70%;
	bottom: 0;
	width: 100%;
	z-index: 1;
	box-sizing: border-box;
}
.copy-container-call-out
	{
		margin:0;
		float:left;
	}
.copy-container p {
	font-size: 16px;
	line-height: 22px;
	position: absolute;
	bottom: 0;
	box-sizing: border-box;
	padding: 5% 5% 43% 1%;
	margin: 0!important;
}

.copy-block-container {
	padding: 5px;
	margin-bottom: 10px;
}

/*** CALL OUTS END ***/
	
	
		
		
		/*** GREY PARAGRAPH TEXT ***/
		
		
		.p-grey  {
    font-family: bt-font-reg;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
}
			
			
/*** NAVIGATION ***/
	

.page-navigation {
	margin-bottom:0;
}
.page-navigation ul {
	height:0;
}

.open
	{
		height:auto!important;
	}

.page-navigation ul li {
	display:block;
	border-left:none;
	
}
.page-navigation ul li:last-child {
	border-bottom: none;
}
.page-navigation ul li a {
	padding: 10px;
	display: block;
	text-decoration: none;
	font-weight: normal!important;
}

		
		/*---- transbox ----*/

div.background {
  background: url('/Images/vendors/PROJECTS/BTBD/DSGN-695043-CSP-page-on-Software-Licensing/myth-1.jpg') no-repeat;
   padding-top: 10px;
  padding-bottom: 10px;
}

div.transbox {
  margin: 60px;
  background-color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
  opacity: 0.8;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
	      font-family: bt-font-reg;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	font-weight: bold;	
}


/*---- end transbox ----*/

/*---- transbox-header-white----*/


div.transbox-header-white {
margin: 454px;
    background-color: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    opacity: 0.8;
    padding: 20px;
    padding-left: 37px;
}	

div.transbox p {
  margin: 5%;
	      font-family: bt-font-reg;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	font-weight: bold;	
}

div.transbox h1 {
  margin: 5%;
	      font-family: bt-font-reg;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	font-weight: bold;	
}


/*---- end transbox ----*/


/*---- transbox-header-black----*/


div.transbox-header-black {
  margin: 454px;
  background-color:  #000000;
  padding-top: 10px;
  padding-bottom: 10px;
  opacity: -1.2;
	padding: 20px;
	padding-left: 37px;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
	      font-family: bt-font-reg;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	font-weight: bold;	
}

div.transbox h1 {
  margin: 5%;
	      font-family: bt-font-reg;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
	font-weight: bold;	
}


/*---- end transbox ----*/
	
	
	/*---- transbox-col-3 ----*/
	
div.three {
  background: url('/Images/vendors/PROJECTS/BTBD/new-fragments-logos/500x300.jpg') no-repeat;
   padding-top: 10px;
  padding-bottom: 10px;
	    width: 359px;
}





/*---- end transbox ----*/




/*** THIS SETS UP THE MENU ICON FOR MOBILE ***/
	
.nav-bar-menu
	{
		display:block;
		background-image:url('/Images/vendors/PROJECTS/BTBD/DSGN-Homepage/images/menu-icon.gif');
		background-position:0 0;
		background-size:cover;
		width:45px;
		height:45px;
		margin:0 auto;	
	}

/* === nav style 1 for purple nav === */
	
.nav-style-1 {
	background-color: #5514b4;
}
.nav-style-1 ul li {
	border-bottom: thin solid white;
}
.nav-style-1 ul li:last-child {
	border-bottom: none;
}
.nav-style-1 ul li a {
	color: white!important;
}
.nav-style-1 ul li a:hover, .nav-style-1 ul li a:focus {
	background-color: #cccccc;
	text-decoration: none;
}
	
/* === nav style 2 for white nav === */
	
.nav-style-2 {
}
.nav-style-2 ul li {
	border-bottom: thin solid #5514b4;
}
.nav-style-2 ul li:last-child {
	border-bottom: none;
}
.nav-style-2 ul li a {
	color: black;
}
.nav-style-2 ul li a:hover, .nav-style-2 ul li a:focus {
	color: #5514b4;
	text-decoration: none;
}
	
/*** UL/LI LISTS ***/
	
.list_ {}
.list_ ul {}
.list_ ul li {
	list-style: disc;
}
.list_col:last-child {
	margin-top: -17px !important;
}
	
/*** LINE LISTINGS AND PRODUCT PLACEHOLDERS ***/		
	
.cms-component-product-line-listing {
	padding: 11px 20px 20px 20px;
}
.product-merchant {
	background-color: white!important;
}
.product-merchant .lower-section {
	background-color: white!important;
	box-shadow: none!important;
}
	
table.product-listing {
	background-color: transparent!important;
}
table.product-listing td.compare-col {
	display: none;
}
.cms-components .cms-component-featured-product-large {
	margin: 0px !important;
	border: medium none !important;
	width: 100%;
	padding: 20px !important;
}
.featuredWrapInner {
	background-color: white;
	width: 94%;
	padding: 10px;
}
.cms-components .cms-component-featured-product-large .image {
	width: 39%!important;
	display: inline-block;
	float: none!important;
	vertical-align: middle;
	text-align: left;
	background-color: white;
}
.cms-components .cms-component-featured-product-large .description {
	width: 55%;
	position: relative;
	display: inline-block;
	float: none!important;
	vertical-align: middle;
	background-color: white;
	margin: 0px;
	padding: 10px;
}

/*** SCALEABLE TABLES, ADJUST TO SUIT IN THE MINI-SITE SUB PAGE CSS IF REQUIRED ***/

.table_container {
	overflow: hidden;
	box-sizing:border-box;
	padding:0;
	margin-bottom:20px;
}
.table_col {
	float: none;
	width: 100%;
	border-right: thin solid white;
}
.table_col:last-child {
	border-right: none;
}
.table_cell {
	background-color: #ebebeb;
	padding: 10px;
	margin-bottom: 10px;
	text-align: center;
}
.table_cell:nth-child(even) {
	background-color: #fff;
}
.table_cell:nth-child(1) {
	font-weight: bold;
	background-color: #343434;
	color: #fff;
	text-transform: uppercase;
}
	
/*** BANNERS ***/	
	
.banner{
	}

.banner-content {
	overflow:hidden;
	box-sizing:border-box;
	padding:0 20px;
}


	
.value {
	font-size: 6em;
	position: relative;
	top: 22px;
	font-weight: bold;
}
.stat-padding {
	box-sizing: border-box;
	padding: 10px;
}
.table_cell {
	background-color: #ebebeb;
	padding: 10px;
	margin-bottom: 10px;
	text-align: center;
}
.table_cell:nth-child(even) {
	background-color: #fff;
}
.table_cell:nth-child(1) {
	font-weight: bold;
	background-color: #343434;
	color: #fff;
	text-transform: uppercase;
}
#info_block {
	background: #ffffff;
	border: thin solid rgba(85, 20, 180);
	padding: 10px;
	position: fixed;
	z-index: 1000;
	top: 0;
	opacity: 0;
	left: -1000px;
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
}
.show-info {
	opacity: 1!important;
	left: 0px!important;
}
.overlay {
	background-color: #514f4f;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0.5;
	display: none;
	z-index: 999;
}

		
	
/*** FLIP CONTAINERS - BREAKS THEM APART AND STACKS ***/		
	
.flip-container {
	width: 48%;
	float: left;
	margin-right: 10px;
}
.flip-container:nth-child(even) {
	margin-right: 0!important;
	margin-bottom: 10px;
}
.back {
	display: none;
}
	
/*** THINGS YOU NEED TO KNOW ***/	

.things p {
	font-size: 16px;
	font-weight: bold;
}
.things p:hover {
	cursor: pointer;
}
.things p:after {
	content: " +";
	display: inline-block;
	margin-left: 20px;
}
.things p.close:after {
	content: " -";
	display: inline-block;
	margin-left: 20px;
}
.things ol, .things>div {
	display: none;
	margin-top: 20px;
}
.things ol.showOl, .things>div.showOl {
	display: block;
}
.things ol li {
	list-style: decimal!important;
	margin-left: 24px;
}
			
			/*** THINGS YOU NEED TO KNOW NEW BRAND ***/


.things-new-brand p {
	font-size: 16px;
	font-weight: bold;
}
.things-new-brand p:hover {
	cursor: pointer;
}
.things-new-brand p::after {
	 content:  url("/Images/vendors/PROJECTS/BTBD/DSGN-670611-About-us/BT_Iconography_Arrow_Down_white-72-small-3.png");
	display: inline-block;
	margin-left: 416px;	
	padding-bottom: 10px
		
}
.things-new-brand p.close::after {
content: url("/Images/vendors/PROJECTS/BTBD/DSGN-670611-About-us/BT_Iconography_Arrow_Down_purple_close-2.png");
	display: inline-block;
	margin-left: 416px;	
}
.things-new-brand ol, .things>div {
	display: none;
}
.things-new-brand ol.showOl, .things>div.showOl {
	display: block;
	margin-top: 20px;
}
.things-new-brand ol li {
	list-style: decimal!important;
	margin-left: 24px;
}
	

/*** SITE MAP FOOTER LINKS ***/		
	
#footer_links {
	overflow: hidden;
}
#footer_links ul {
	text-align: center;
	padding: 0px;
	margin-left: 0px;
	list-style: outside none none;
	margin-bottom: 10px;
	width:96%;
}
#footer_links ul li {
	line-height: 30px;
}
#footer_links ul li:first-child {
	margin-bottom: 10px;
}
#footer_links ul li:first-child a {
	color: #55379b !important;
	text-decoration: none;
	background: #f1f1f1;
	padding: 5px;
	display: block;
	text-align: center;
	border: thin solid #ccc;
	transition: all, 500ms;
}
#footer_links ul li:first-child a:hover {
	color: #55379b !important;
	text-decoration: none;
}
#footer_links ul:last-child {
	margin-right: 0;
}
#footer_links ul li a {
	text-decoration: none;
	color: #3b3c3a;
}
#footer_links ul li a:hover {
	text-decoration: underline;
	color: #3b3c3a;
}
	
/*** ACCORDION - USE DIFFERENT BACKGROUND COLOUR CLASSES WHERE REQUIRED ***/	
	
.accordion-wrapNK {
	margin-bottom: 20px;
}
.accordion-contentNK {
	display: none;
	padding: 20px;
	border: thin solid #5514b4;
	margin-top: -14px;
}
.accordion-toggleNK {
	box-sizing: border-box;
	padding: 10px;
	color: white!important;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.4);
	font-weight: normal;
	background-color: #5514b4;
}
.accordion-toggleNK:hover {
	cursor: pointer;
}
.accordion-toggleNK img {
	width: 28px;
	float: right;
}
	

/* [ HOVER STAT BOXES] */
.key_facts {
	text-align: center!important;
	display: inline-block;
	width: 48%;
	vertical-align: top;
}
.fact_icon {
	/* [BOX] */
	border-radius: 50%;
	width: 80px;
	height: 80px;
	margin: 0 auto;
	/* [COLOURS] */
	background-color: #8ec0e7;
	border: thin solid white;
	/* [FX] */
	transition: all 1s;
	/* [BACKGROUND IMAGE PROPERTIES] */
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 50%;
}
.fact_icon:hover {
	background-color: white;
	border-color: #8ec0e7;
}
.fact_icon img {
	width: 150px;
	height: 150px;
}
	
#date {
	background-image: url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/calendar_white.png');
}
#date:hover {
	background-image: url('https://www.businessdirect.bt.com/Images/vendors/PROJECTS/BTBD/DSGN-463563-GDPR-Edu/calendar_blue.png');
}
	
/* [ CONTENT DIVIDER STYLE 01 ] */
.content-title-wrap {
	box-sizing: border-box;
	padding: 20px;
	background-color: #00aadc;
}
.content-title-holder {
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
	border: thin dashed white;
}
.content-title-holder h2 {
	padding: 0;
	margin: 0!important;
	color: white!important;
}

/*** MODAL POP UP, MAINLY USED ON THE EVENT CALENDAR ***/


.modal {
	position: fixed;
	top: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	background-color: rgba(85, 20, 180, 0.8);
	overflow-y: auto;
}
.modalWrapper {
	height: 100%;
	width: 96%;
	display: table;
	margin:0 auto;
}
.modalContent {
	display: table-cell;
	vertical-align: middle;
	position: relative;
	width: 100%;
	height: 100%;
}
.modalBox {
	margin: 0 auto;
	max-width: 100%;
	box-sizing: border-box;
	padding: 50px;
	background-color: white;
	width: auto;
	border-radius: 5px;
}
.noBackground {
	background-color: transparent!important;
}
.modalInfo {
	width: 100%;
}
.modalInfo img {
	max-width: 100%;
	height: auto;
}
.modalInfoCopy {
	margin: 10px 0;
}
.closeModal {
	position: fixed;
	height: 50px;
	width: 50px;
	top: 2%;
	right: 2%;
	transform: rotate(45deg);
}
.closeModal:before {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -1px;
	height: 0;
	width: 2px;
	background: rgba(255, 255, 255, 0.7);
}
.closeModal:after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -1px;
	width: 0;
	height: 2px;
	background: rgba(255, 255, 255, 0.7);
}
.modal.active .modalWrapper .modalContent .closeModal:hover {
	cursor: pointer;
}
.modal.active .modalWrapper .modalContent .closeModal::before, .modal.active .modalWrapper .modalContent .closeModal::after {
	background: rgba(255, 255, 255, 1);
}
.modal.active .modalWrapper .modalContent .closeModal::before {
	transition: .25s .5s ease-in-out;
	height: 100%;
}
.modal.active .modalWrapper .modalContent .closeModal::after {
	transition: .25s .25s ease-in-out;
	width: 100%;
}
.modal.active {
	z-index: 1;
	left: 0%;
	animation: fadeIn .25s ease-in-out;
}



/**

#################################
	
END OF MOBILE STYLES MEDIA QUERY

################################
	
**/
	
}

/**

#########################################
	
MOBILE PORTRAIT AND LANDSCAPE IF REQUIRED

#########################################
	
**/

@media all and (min-width:320px) and (orientation: portrait) {

}

@media all and (max-width:568px) and (orientation: landscape) {
}
/**

################################################
	
END OF MOBILE PORTRAIT AND LANDSCAPE IF REQUIRED

################################################
	
**/	
}

/**

##################

RETINA AND HI RES 

#################

**/

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/**/
}
/* 1.25 dpr */

@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
/**/
}
/* 1.3 dpr */

@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi) {
/**/
}
/* 1.5 dpr */

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
/**/
}
/**

#########################

END OF RETINA AND HI RES 

########################

**/

/* smaller screens portrait */

@media only screen and (max-device-width:800px) and (-webkit-min-device-pixel-ratio:1) and (orientation:portrait) {
/**/
}
/* smaller screens portrait */

@media only screen and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1) and (orientation:landscape) {
/**/
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
/**/
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
/**/
}

/**

#########

IPAD PRO 

########

**/

/* Portrait and Landscape */

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
/**/
}
/* Portrait */

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
/**/
}
/* Landscape */

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
/**/
}

/**

#################################################

BROWSER HACKS - ONLY USE IF ABSOLUTELY NECESSARY 

################################################

**/

/*** CHROME HACK ***/

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
	.hide-on-chrome {
		display: none;
	}
	.show-on-chrome {
		display: block;
	}
}

/*** FIREFOX HACK ***/

@-moz-document url-prefix() {
	.hide-on-ff {
		display: none;
	}
	.show-on-ff {
		display: block;
	}
}

/*** INTERNET EXPLORER HACK ***/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.hide-on-ie {
		display: none;
	}
	.show-on-ie {
		display: block;
	}
}

 /* Individual Values */

.rounded-box {
  width: 600px;
  height: 300px;
  background-color: #568E9D;

 	border-top-left-radius: 30px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 10px;
}

/* Adding a Second Value --------------- */

/* [ CONTENT DIVIDER STYLE 01 ] */

.content-title-wrap{
		box-sizing:border-box;
		padding: 20px;
		background-color: #00aadc;
	}	
	
	.content-title-holder{
		padding: 20px;
		box-sizing: border-box;
		text-align: center;
		border:thin dashed white;
	}
	
	.content-title-holder h2{
		padding: 0;
		margin: 0!important;
		color: white!important;
	}

/* [ CONTENT DIVIDER STYLE 02 ] */

.content-title-fancy-wrap{
		box-sizing:border-box;
		padding: 6px;
		background-color: #333333;
	}	
	
	.content-title-fancy-holder{
		padding: 20px;
		box-sizing: border-box;
		text-align: center;
	}
	
	.content-title-fancy-holder h2{
		padding: 0;
		margin: 0!important;
		color: #ffffff!important;
	}
	
		
	.fancy {
	  line-height: 50%;
	  text-align: center;
	}
	.fancy span {
	  display: inline-block;
	  position: relative; 
		font-size: 22px;
	}

	.fancy span:before,
	.fancy span:after {
	  content: "";
	  position: absolute;
	  height: 5px;
	  border-bottom: 1px solid #ffffff;
	  border-top: 1px solid #ffffff;
	  top: 40%;
	  width: 200px;
	}

	.fancy span:before {
	  right: 100%;
	  margin-right: 15px;
	}

	.fancy span:after {
	  left: 100%;
	  margin-left: 15px;
	}

/* [ CONTENT DIVIDER STYLE END ] */