@import url("content.css");

/*----------Colours----------*/
/*Blue - #006699
/*Dark Blue - #003D5C
/*
/*Gold - #C5A75F
/*Gold hover - #b4964e
/*Silver - #DAD6D2
/*Silver hover - #c8c4bf
/*
/*Grey (Text) - #666666
/*Grey (Icons) - #999999
/*
/*Light Grey - #F7F7F7
/*Dark Grey - #333333
/*------------------------------*/




/*------------------------------*/
/*----------HTML5 elements----------*/
/*------------------------------*/
section,
article,
aside,
footer,
header,
nav,
hgroup                                                  {display:block;}

#ScriptWarning                                          {padding: 5px; background: #FF4136; color: white; margin: 5px;}




/*------------------------------*/
/*----------General----------*/
/*------------------------------*/
/*--Adds margin below main content--*/
main,
aside                                                   {/*margin-bottom: 50px;*/}

/*--Equal height bootstrap cols - add class to row--*/
.EqualHeightRow .row                                    {display: table;}
.EqualHeightRow [class*="col-"]                         {float: none; display: table-cell; vertical-align: top;}

/*--pulls content up over featured area--*/
.PullUp                                                 {margin-top: -160px; z-index: 10; position: relative;}

.Hidden                                                 {display: none;}

/*--Use for SVG fallback--
background-image: url(../images/quote-tail-blue.png);
background-image: linear-gradient(transparent, transparent), url(../images/quote-tail-blue.svg);
*/
/*_-_-_-_-_-_-_-_-Media Queries-_-_-_-_-_-_-_-*/
@media(max-width:767px){
    /*--pulls content up over featured area--*/
    .PullUp                                                 {margin-top: -70px;}
}
@media(min-width:768px){

}
@media(min-width:992px){

}
@media(min-width:1200px){

}




/*------------------------------*/
/*----------Animation----------*/
/*------------------------------*/
/*--Animation stuff--
.ThingToAnimate                                         {animation: highlight 5s ease forwards; width: 100px; height: 100px;}
@keyframes highlight {
  0% { background: blue;}
  100% { background: pink;}
}
*/




/*------------------------------*/
/*----------Panels----------*/
/*------------------------------*/
/*----------General----------*/
.panel                                                  {border: none; border-radius: 0px; margin-bottom: 20px;
                                                        -webkit-box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.05) !important;
                                                           -moz-box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.05) !important;
                                                                box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.05) !important;
}
.panel-body                                             {padding: 40px;}

.panel-body ul                                          {list-style: none; padding-left: 15px; margin: 20px 0;}
.panel-body ul li                                       {background-position: left 12px; background-repeat: no-repeat; margin: 10px 0; padding: 0 0 0 20px;
                                                        /*--Use for SVG fallback--*/
                                                        background-image: url(../images/arrow-bullet.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/arrow-bullet.svg);
}

/*----------Default----------*/
.panel-default                                          {}

/*----------Tapered shadow----------*/
.panel-taperedShadow                                    {position: relative; background: white; min-height: 390px; box-shadow: none !important;}
.panel-taperedShadow:after                              {display: block; content: "\0020"; position: absolute; z-index: -1 !important; top: 0; left: 0px; width: 100%; height: 370px; opacity: 1; border-bottom-right-radius: 10px 150px; border-bottom-left-radius:  10px 150px;
                                                        -webkit-box-shadow: 1px 1px 10px 2px rgba(0,0,0,0.1) !important;
                                                           -moz-box-shadow: 1px 1px 10px 2px rgba(0,0,0,0.1) !important;
                                                                box-shadow: 1px 1px 10px 2px rgba(0,0,0,0.1) !important;
}
.panel-taperedShadow .panel-body                        {padding-bottom: 0;}

/*_-_-_-_-_-_-_-_-Media Queries-_-_-_-_-_-_-_-*/
@media(max-width:767px){
    /*----------General----------*/
    .panel                                                  {}
    .panel-body                                             {padding: 20px;}
}
@media(min-width:768px){

}
@media(min-width:992px){

}
@media(min-width:1200px){

}




/*------------------------------*/
/*----------Modals----------*/
/*------------------------------*/
.modal													{}
.modal-dialog											{}
.modal-content											{border-radius: 0px;}
.modal-content .modal-header                            {text-align: center;}
.modal-content .modal-body                              {}
.modal-body												{}

.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}





/*------------------------------*/
/*----------Buttons----------*/
/*------------------------------*/
.btn                                                    {border: none; border-radius: 0px; margin-bottom: 10px; font-size: 16px; font-weight: 300; padding: 13px 10px; font-family: 'Ubuntu', sans-serif;
                                                        -webkit-transition: all .3s ease;
                                                           -moz-transition: all .3s ease;
                                                             -o-transition: all .3s ease;
                                                                transition: all .3s ease;
}

.btn-default                                            {background: #006699; color: white; border: 2px solid #006699;}
.btn-default:hover,
.btn-default:active,
.btn-default:focus                                      {background: #003D5C; color: white; border: 2px solid #003D5C;}

.btn-primary                                            {background: #006699; color: white; border: 2px solid #006699;}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus                                      {background: #003D5C; color: white; border: 2px solid #003D5C;}

.btn-secondary                                          {border: 2px solid #006699; color: #006699; background-color: transparent;}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus                                    {border: 2px solid #006699; color: white; background: #006699;}

.btn-gold                                               {border: 2px solid #C5A75F; color: #C5A75F;}
.btn-gold:hover,
.btn-gold:active,
.btn-gold:focus                                         {border: 2px solid #C5A75F; color: white; background: #C5A75F;}

.btn-silver                                             {border: 2px solid #DAD6D2; color: #DAD6D2;}
.btn-silver:hover,
.btn-silver:active,
.btn-silver:focus                                       {border: 2px solid #DAD6D2; color: white; background: #DAD6D2;}

.btn-white                                              {border: 2px solid white; color: white; background: none;}
.btn-white:hover,
.btn-white:active,
.btn-white:focus                                        {border: 2px solid white; color: #006699; background: white;}

.btn-orange                                             {border: 2px solid #FF6600; color: white; background: #FF6600;}
.btn-orange:hover,
.btn-orange:active,
.btn-orange:focus                                       {border: 2px solid #E25D04; color: white; background: #E25D04;}

/*_-_-_-_-_-_-_-_-Media Queries-_-_-_-_-_-_-_-*/
@media(max-width:767px){
    .btn                                                    {display: block; width: 100%;}
}
@media(min-width:768px){

}
@media(min-width:992px){

}
@media(min-width:1200px){

}





/*------------------------------*/
/*----------Header----------*/
/*------------------------------*/
/*----------General----------*/
header                                                  {border-bottom: 1px solid rgba(255, 255, 255, 0.15); position: absolute; z-index: 1001; width: 100%; padding: 20px 0 0 0;}

header.faded                                            {opacity: .25; top: -75px;
                                                        -webkit-transition: all .3s ease;
                                                           -moz-transition: all .3s ease;
                                                             -o-transition: all .3s ease;
                                                                transition: all .3s ease;
}
header.faded:hover                                      {opacity: 1; top: 0px;}

/*----------Lists----------*/
/*-----General-----*/
.HeaderList                                             {list-style: none; padding: 0px; float: right; margin: 0 0 0 20px;}
.HeaderList li                                          {color: white; font-size: 16px; float: left; margin: 0 10px; font-family: 'Ubuntu', sans-serif;}
.HeaderList li a                                        {color: white;}
.HeaderList li span                                     {opacity: .5;}

@media(min-width:768px){
    .HeaderList li.highlighted a                            {border-color: #FF6600; background: #FF6600; border-radius: 20px; padding: 10px 15px; cursor: pointer;}
    .HeaderList li.highlighted a:hover,
    .HeaderList li.highlighted a:focus                      {border-color: #cf5a0c; background: #cf5a0c;}
}

/*-----Logged out-----*/
.HeaderList.Loggedout                                   {}

/*-----Logged in-----*/
.HeaderList.Loggedin                                    {}


/*_-_-_-_-_-_-_-_-Media Queries-_-_-_-_-_-_-_-*/
@media(max-width:767px){
    /*----------General----------*/
    header                                                  {position: relative; border-bottom: 4px solid #006699;}
    header .Logo                                            {margin: 20px auto;}
    /*----------Lists----------*/
    /*-----General-----*/
    .HeaderList                                             {float: none; margin: 0px;}
    .HeaderList li                                          {color: #006699; float: none; padding: 10px 0; font-size: 14px; text-align: center;}
    .HeaderList li a                                        {color: #006699;}

    .HeaderList li.HalfList                                 {width: 50%; float: left; text-align: center; margin: 0px;}
    .HeaderList li.HalfList a                               {display: block;}
}
@media(min-width:768px){
    header .Logo                                            {margin: 20px 0;}
    .HeaderList                                             {margin: 20px 0 0 20px;}
}
@media(min-width:992px){
    header .Logo                                            {margin: 30px 0;}
    .HeaderList                                             {margin: 0 0 0 20px;}
}
@media(min-width:1200px){

}





/*------------------------------*/
/*----------Nav----------*/
/*------------------------------*/
.MainNav                                                {}
.MainNav .navbar-collapse ul                            {float: right; list-style: none; margin: 0px; padding: 0px;}
.MainNav .navbar-collapse ul li                         {float: left; font-size: 17px; font-family: 'Ubuntu', sans-serif; padding:  15px 2px; border-bottom: 2px solid transparent;}
.MainNav .navbar-collapse ul li a                       {border: 2px solid transparent; color: white; display: block; padding: 5px 10px; text-decoration: none; font-weight: 300; }

.MainNav .navbar-collapse ul li:hover,
.MainNav .navbar-collapse ul li:focus                   {border-color: white;}

/*--Highlighted signup--*/
.MainNav .navbar-collapse ul li.Outline a               {border-color: #FF6600; background: #FF6600; border-radius: 20px;}
.MainNav .navbar-collapse ul li.Outline:hover           {border-color: transparent;}

/*_-_-_-_-_-_-_-_-Media Queries-_-_-_-_-_-_-_-*/
@media(max-width:767px){
    .navbar-collapse                                        {max-height: none; padding: 0px;}
    .navbar-header                                          {background: #006699;}
    .MainNav                                                {margin: 0 -15px;}
    .MainNav .navbar-collapse                               {}
    .MainNav .navbar-collapse ul                            {float: none; padding: 0px;}
    .MainNav .navbar-collapse ul li                         {display: block; width: 100%; float: none; text-align: center; padding: 0px; border: none;}
    .MainNav .navbar-collapse ul li a                       {border-bottom: 1px solid #f1f1f1; padding: 15px 0; color: #006699;}

    /*--Highlighted signup--*/
    .MainNav .navbar-collapse ul li.Outline a               {border: none; background: white;}

    /*-----------mobile nav cross-----------*/
    .navbar-header .navbar-toggle                           {margin: 0px; width: 52px; height: 52px; }
    .navbar-toggle .icon-bar                                {height: 2px; background: white; margin-left: auto; margin-right: auto;}
    .navbar-toggle .icon-bar+.icon-bar                      {margin-top: 6px;}

    .navbar-toggle .icon-bar                                {-webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}
    .navbar-toggle .icon-bar:nth-child(2)                   {margin-bottom: -5px; margin-top: 10px; -webkit-transform: rotate(136deg); -moz-transform: rotate(136deg); transform: rotate(136deg);}
    .navbar-toggle .icon-bar:nth-child(3)                   {opacity: 0;}
    .navbar-toggle .icon-bar:nth-child(4)                   {margin-top: -5px; margin-bottom: 10px; -webkit-transform: rotate(-136deg); -moz-transform: rotate(-136deg); transform: rotate(-136deg);}
    .navbar-toggle.collapsed .icon-bar                      {margin: 4px; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg);}
}
@media(min-width:768px){
    .MainNav                                                {border-top: 1px solid rgba(255, 255, 255, 0.15);}
    .MainNav .navbar-collapse                               {padding: 0px;}
    .MainNav .navbar-collapse ul li                         {display: table-cell; width: 1%; float: none; text-align: center; padding: 10px 2px;}
    .MainNav .navbar-collapse ul li a                       {padding: 5px;}
}
@media(min-width:992px){

    .MainNav                                                {border-top: none;}
    .MainNav .navbar-collapse                               {}
    .MainNav .navbar-collapse ul li                         {display: block; width: auto; float: left; padding: 15px 2px;}
    .MainNav .navbar-collapse ul li a                       {padding: 5px 13px;}

}
@media(min-width:1200px){

}






/*------------------------------*/
/*----------Featured Area----------*/
/*------------------------------*/
/*----------General----------*/
.FeaturedArea                                           {position: relative; background: #333333; overflow: hidden; /*padding-top: 140px;*/ padding-bottom: 120px;}
.FeaturedArea:before                                    {content: ''; height: 213px; position: absolute; top: 0px; width: 100%; background: url(../images/gradient-top.png) top center repeat-x; z-index: 1;}

/*-----Image-----*/
.FeaturedArea .BackgroundImage                          {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center;}

/*-----border-----*/
.FeaturedArea .FeaturedAreaBorder                       {position: absolute; bottom: -1px; left: -1%; right: -1%; width: 102%; z-index: 2;}

/*----------Home----------*/
.FeaturedArea.Home                                      {min-height: 650px; max-height: 650px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;
}

/*----------Inner----------*/
.FeaturedArea.Inner                                     {padding-top: 140px; min-height: 400px; margin-bottom: 20px;}


/*_-_-_-_-Media Queries-_-_-_-*/
@media(max-width:767px){
    /*----------Home----------*/
    .FeaturedArea.Home                                      {min-height: 0px; padding-bottom: 0px;}

    /*----------Inner----------*/
    .FeaturedArea.Inner                                     {padding-top: 50px; padding-bottom: 50px; min-height: 250px;}
}
@media(min-width:768px){

}
@media(min-width:992px){

}
@media(min-width:1200px){

}


/*--newsletter signup--*/
.newsletter-modal-button .btn                           {border-radius: 50px; padding-right: 20px; padding-left: 20px;}
@media(min-width:768px){
    .newsletter-modal-button                            {position: relative; top: 170px; z-index: 1001; text-align: right;}
}
@media(min-width:992px){
    .newsletter-modal-button                            {top: 140px;}
}


/*--newsletter signup modal--*/
#newsletterModal                                        {padding: 10px;}
#newsletterModal .modal-dialog                          {width: 550px; max-width: 100%; margin: 0;}
#newsletterModal .modal-dialog .modal-header            {border: none;}
#newsletterModal .modal-dialog .modal-content           {}
#newsletterModal form                                   { margin-top: 20px;}
#newsletterModal form label                             {color: #006699;}
#newsletterModal form input                             {display: block; width: 100%;}
#newsletterModal form p                                 {padding: 10px 0;}
#newsletterModal h2                                     {margin: 0 0 10px 0;}
#newsletterModal p                                      {margin: 0; font-size: 18px; color: #242424;}
#newsletterModal .btn-orange                            {border-radius: 50px; padding-left: 20px; padding-right: 20px; margin-top: 10px;}
#newsletterModal a                                      {text-decoration: underline;}
#newsletterModal label input[type=checkbox]             {float: left; width: auto;}

@media(min-width:768px){
    #newsletterModal .modal-body                            {text-align: center;}
    #newsletterModal h2                                     {font-size: 36px;}
}




/*------------------------------*/
/*----------Title / Breads----------*/
/*------------------------------*/
.TitleBreads                                            {z-index: 1; position: relative; margin: 50px 0 40px 0;}

/*----------Breads----------*/
.TitleBreads .Breads                                    {list-style: none; padding: 0px; display: block; font-family: 'Ubuntu', sans-serif;}
.TitleBreads .Breads:after                              {content: ''; display: block; clear: both;}
.TitleBreads .Breads li                                 {float: left; font-size: 16px; background: rgba(255, 255, 255, 0.8);}
.TitleBreads .Breads li img                             {margin: 0 10px;}
.TitleBreads .Breads li a                               {display: inline-block; margin: 0 0 0 10px;}
.TitleBreads .Breads li:last-child a                    {margin: 0 10px 0 0;}
.TitleBreads .Breads li:last-child img                  {display: none;}

/*----------Title----------*/
.TitleBreads .Title                                     {display: block; margin-bottom: 10px;}
.TitleBreads .Title h1                                  {color: white; background: rgba(0,102,153,.8); display: inline-block; padding: 5px 10px; margin: 0px;}






/*------------------------------*/
/*----------Featured Video----------*/
/*------------------------------*/
.FeaturedVideo                                          {top: 0px; left: 0px; width: 100%; bottom: 0px;}

/*-----Text-----*/
.FeaturedVideo .Text                                    {position: absolute; bottom: 100px; bottom: 5vw; text-align: center; width: 100%; z-index: 10;}
.FeaturedVideo .Text h1                                 {color: white;}
.FeaturedVideo .Text h3                                 {color: white; opacity: .5; font-weight: 300;}
.FeaturedVideo .Text a                                  {color: white;}

.FeaturedVideo video                                    {z-index: 0; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);}

/*-----Play/pause Button-----*/
.PlayPauseButton                                        {width: 80px; height: 80px; z-index: 1001; position: absolute; top: 40%; left: 50%; margin: -20px 0 0 -40px; display: block; text-indent: -1000px; overflow: hidden; cursor: pointer;
                                                        -webkit-transition: all .3s ease;
                                                           -moz-transition: all .3s ease;
                                                             -o-transition: all .3s ease;
                                                                transition: all .3s ease;
}
.PlayPauseButton:hover                                  {opacity: .5;}

#playVideo                                              {
                                                        /*--Use for SVG fallback--*/
                                                        background-image: url(../images/video-play-white.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/video-play-white.svg);}
#pauseVideo                                             {opacity: 0;
                                                        /*--Use for SVG fallback--*/
                                                        background-image: url(../images/video-pause-white.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/video-pause-white.svg);}

.FeaturedVideo:hover #pauseVideo                        {opacity: 1;}

/*--expanded video area--*/
.FeaturedArea.videoExpand                               {max-height: 1000px; min-height: 400px; padding-bottom: 0px;}
.FeaturedArea.videoExpand .FeaturedVideo video          {position: relative; top: auto; left: auto; transform: none; translate: none; width: 100%;}


.FeaturedVideo .BackgroundImage                         {position: absolute; width: 100%; height: 100%; background-position: center !important;}
@media(max-width:767px){
    .FeaturedVideo .BackgroundImage                         {padding-bottom: 50%; position: relative; margin-bottom: 10px;}
}

/*_-_-_-_-Media Queries-_-_-_-*/
@media(max-width:767px){
    .FeaturedVideo                                          {top: auto; left: auto; width: auto; bottom: auto;}
    .FeaturedVideo video                                    {position: relative; top: auto; left: auto; width: 100%; min-height: 0px;
                                                            -webkit-transform: none;
                                                            transform: none;
    }

    /*-----Text-----*/
    .FeaturedVideo .Text                                    {position: relative; bottom: auto; background: #F7F7F7; color: #006699;}
    .FeaturedVideo .Text h1,
    .FeaturedVideo .Text h3,
    .FeaturedVideo .Text a                                 {color: #006699;}


}
@media(min-width:768px){

}
@media(min-width:992px){

}
@media(min-width:1200px){

}





/*------------------------------*/
/*----------Product Box----------*/
/*------------------------------*/
/*----------General (Icon next to header)----------*/
.ProductBox                                              {margin: 40px 0; border: 4px solid transparent;}
.ProductBox .panel-body                                  {padding: 20px;}
.ProductBox .panel-body .Icon                            {float: left; margin: 0 20px 0 0;}
.ProductBox .panel-body h3                               {margin: 0 0 15px 0;}
.ProductBox .panel-body ul                               {clear: both; margin: 40px 0;}
.ProductBox .panel-body ul li                            {}
.ProductBox .panel-body .btn                             {margin: 20px -10px -10px -10px; display: block; padding: 17px 0;}

.ProductBox .panel-body span.Price                       {margin: 20px -10px -10px -10px; display: block; padding: 17px 0; text-align: center; color: white; font-size: 20px;}

/*--price--*/
.ProductBox .pricing span                                {display: block; font-size: 16px; text-align: center; font-weight: 400;}
.ProductBox .pricing span.price                          {font-size: 36px; margin: 10px 0 0 0;}
.ProductBox .pricing span.price.total                    {font-size: 16px; color: #666666; margin: 0 0 5px 0;}

/*----------Thin (icon above header)----------*/
.ProductBox.Thin .panel-body                             {}
.ProductBox.Thin .panel-body .Icon                       {display: block; float: none; margin: 20px auto;}
.ProductBox.Thin .panel-body h3                          {text-align: center;}
.ProductBox.Thin .panel-body ul                          {margin-top: 20px;}

/*----------Colours----------*/
/*-----Gold-----*/
.ProductBox.Gold                                            {border-color: #C5A75F;}
.ProductBox.Gold .panel-body                             {}
.ProductBox.Gold .panel-body h3                          {color: #C5A75F;}
.ProductBox.Gold .panel-body .btn                        {background: #C5A75F; border-color: #C5A75F; color: white;}
.ProductBox.Gold .panel-body .btn:hover,
.ProductBox.Gold .panel-body .btn:focus,
.ProductBox.Gold .panel-body .btn:active                 {background: #b4964e; border-color: #b4964e; color: white;}
.ProductBox.Gold .panel-body span.Price                  {background: #C5A75F;}

.ProductBox.Gold .panel-body a                           {color: #C5A75F;}
.ProductBox.Gold .panel-body a:hover,
.ProductBox.Gold .panel-body a:focus                     {color: #b4964e;}
.ProductBox.Gold .pricing span                           {color: #b4964e;}

/*-----Blue-----*/
.ProductBox.Blue                                        {border-color: #006699;}
.ProductBox.Blue .panel-body                             {}
.ProductBox.Blue .panel-body h3                          {}
.ProductBox.Blue .panel-body .btn                        {}
.ProductBox.Blue .panel-body span.Price                  {background: #006699;}

.ProductBox.Blue .panel-body .btn,
.ProductBox.Blue .panel-body .btn:hover,
.ProductBox.Blue .panel-body .btn:focus                        {color: white;}
.ProductBox.Blue .pricing span                           {color: #006699;}


/*----- hack to hide the monthly key box on certain pages-----*/
/*--Monthly key--*/
.pg-1197 .ProductBox.Blue,
.pg-1266 .ProductBox.Blue,
.pg-1483 .ProductBox.Blue,
.pg-1482 .ProductBox.Blue,
.pg-1267 .ProductBox.Blue,
.pg-1268 .ProductBox.Blue {
    display: none;
}




/*_-_-_-_-_-_-_-_-Media Queries-_-_-_-_-_-_-_-*/
@media(max-width:767px) {
    .ProductBox .panel-body .btn                            {margin: 0px;}
    .ProductBox .pricing                                    {margin-bottom: 10px;}
    .ProductBox .panel-body ul                              {margin: 40px 0 10px 0;}
}



/*------------------------------*/
/*----------Cred Box----------*/
/*------------------------------*/
/*----------General----------*/
.CredBox .panel-body                                    {padding: 20px;}

.CredBox .panel-body h4                                 {margin: 0px;}
.CredBox .panel-body h3                                 {margin: 0 0 15px 0;}
.CredBox .panel-body h1                                 {margin: 5px 0;}

.CredBox .panel-body img                                {display: block; margin: 20px auto; max-width: 100%; height: auto;}





/*------------------------------*/
/*----------Promo Product----------*/
/*------------------------------*/
.ProductBuy                                             {border-top: 1px solid #f1f1f1; padding-top: 30px; margin-top: 20px;}
.ProductBuy h1                                          {margin-top: 0px;}
.ProductBuy a                                           {}




/*------------------------------*/
/*----------Payment Icons----------*/
/*------------------------------*/
.PaymentMethods                                         {list-style: none; padding: 0px; text-align: center;}
.PaymentMethods li                                      {display: inline-block; padding: 10px;}
.PaymentMethods li img                                  {max-width: 100%; height: auto;}
.PaymentMethods li:last-child                           {display: block;}




/*------------------------------*/
/*----------Homepage Bars----------*/
/*------------------------------*/
/*----------General----------*/
.Bar                                                    {overflow: hidden; margin-bottom: -10vw;}
.Bar .Inner                                             {/*padding-bottom: 50px;*/ position: relative; padding-top: 30px; padding-bottom: 13vw;}
.Bar .BorderTop                                         {width: 108%; left: -4%; right: -4%; display: block; z-index: 10; position: relative;}

/*----------Grey----------*/
.Bar.Grey .Inner                                        {background: #F7F7F7;}

/*----------Blue----------*/
.Bar.Blue .Inner                                        {background: #006699;}
.Bar.Blue .Inner h1,
.Bar.Blue .Inner h2,
.Bar.Blue .Inner h3,
.Bar.Blue .Inner h4,
.Bar.Blue .Inner h5,
.Bar.Blue .Inner p,
.Bar.Blue .Inner a,
.Bar.Blue .Inner label                                  {color: white;}





/*------------------------------*/
/*----------Feature Icon----------*/
/*------------------------------*/
.FeatureIcon                                            {}

.FeatureIcon .Icon                                      {}
.FeatureIcon .Icon img                                  {display: block; margin: 0 auto 20px auto;}

.FeatureIcon .Text                                      {}
.FeatureIcon .Text h2                                   {margin: 0 0 10px 0;}
.FeatureIcon .Text p                                    {}
.FeatureIcon .Text a                                    {text-decoration: none;}


/*_-_-_-_-_-_-_-_-Media Queries-_-_-_-_-_-_-_-*/
@media(max-width:767px){

}
@media(min-width:768px){

}
@media(min-width:992px){

}
@media(min-width:1200px){

}





/*------------------------------*/
/*----------List Month blocks----------*/
/*------------------------------*/
.ListMonthOverview                                      {}
.ListMonthOverview h2                                   {margin: 0px;}
.ListMonthOverview h4                                   {margin: 0 0 40px 0;}
.ListMonthOverview a                                    {text-decoration: none;}

.ListMonthOverview .MonthOverviewVideo a                {display: block; padding: 10px 10px 10px 70px; margin-bottom: 20px; color: #666666; text-decoration: none; background-position: left 4px; background-repeat: no-repeat;
                                                        /*--Use for SVG fallback--*/
                                                        background-image: url(../images/icon-video-grey.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/icon-video-grey.svg);
}
.ListMonthOverview .MonthOverviewVideo a:hover          {color: #006699;
                                                        /*--Use for SVG fallback--*/
                                                        background-image: url(../images/icon-video-blue.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/icon-video-blue.svg);
}
.ListMonthOverview .MonthOverviewVideo a.FreePreview:before   {content: 'Free Preview'; display: inline-block; background: #C5A75F; padding: 2px 8px; margin-right: 5px; border-radius: 10px; font-size: 10px; line-height: 1.5; color: white; text-transform: uppercase; vertical-align: middle;}
/*-----clear-----*/
.ListMonthOverview .row .MonthOverviewVideo:nth-child(3n+4)             {clear: both;}

/*--Two col--*/
.ListMonthOverview .row .MonthOverviewVideo.TwoCol:nth-child(3n+4)             {clear: none;}
.ListMonthOverview .row .MonthOverviewVideo.TwoCol:nth-child(2n+3)             {clear: both;}


/*_-_-_-_-_-_-_-_-Media Queries-_-_-_-_-_-_-_-*/
@media(max-width:767px){

}
@media(min-width:768px){
    /*-----clear-----*/
    .ListMonthOverview .row .MonthOverviewVideo:nth-child(3n+4)             {clear: none;}
    .ListMonthOverview .row .MonthOverviewVideo:nth-child(2n+3)             {clear: both;}
}
@media(min-width:992px){
    /*-----clear-----*/
    .ListMonthOverview .row .MonthOverviewVideo:nth-child(3n+4)             {clear: both;}
    .ListMonthOverview .row .MonthOverviewVideo:nth-child(2n+3)             {clear: none;}
}
@media(min-width:1200px){

}





/*------------------------------*/
/*----------List Video Detail----------*/
/*------------------------------*/
.ListVideoDetail                                        {}
.ListVideoDetail .row                                   {position: relative;}
.ListVideoDetail h2                                     {margin: 0px;}
.ListVideoDetail h4                                     {margin: 0 0 20px 0;}
.ListVideoDetail a                                      {text-decoration: none;}

.ListVideoDetail .IconLink                              {display: block; background-color: #006699; position: absolute; right: -25px; top: -40px; bottom: -40px; text-align: center; vertical-align: middle; color: white; background-position: center; background-repeat: no-repeat;
                                                        /*--Use for SVG fallback--*/
                                                        background-image: url(../images/icon-video-white.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/icon-video-white.svg);
                                                        -webkit-transition: all .3s ease;
                                                           -moz-transition: all .3s ease;
                                                             -o-transition: all .3s ease;
                                                                transition: all .3s ease;
}
.ListVideoDetail .IconLink:hover                        {background-color: #003D5C;}

.ListVideoDetail .IconLink:after                        {content: 'Play video'; position: absolute; bottom: 50%; left: 50%; margin: 0 0 -15px -37px; text-align: center; display: block; width: auto; opacity: 0;
                                                        -webkit-transition: all .3s ease;
                                                           -moz-transition: all .3s ease;
                                                             -o-transition: all .3s ease;
                                                                transition: all .3s ease;
}
.ListVideoDetail .IconLink:hover:after                  {bottom: 20%; opacity: 1;}

/*_-_-_-_-_-_-_-_-Media Queries-_-_-_-_-_-_-_-*/
@media(max-width:767px){
    .ListVideoDetail a                                  {display: block; position: relative; right: auto; top: auto; left: auto; bottom: auto; padding: 15px; margin: 20px -5px -20px -5px; background-image: none;}

    .ListVideoDetail a:after                            {position: relative; opacity: 1; left: auto; right: auto; width: 100%; top: auto; bottom: auto; margin: 0px;}
    .ListVideoDetail a:hover:after                      {}
}
@media(min-width:768px){

}
@media(min-width:992px){

}
@media(min-width:1200px){

}





/*------------------------------*/
/*----------Forms----------*/
/*------------------------------*/
label                                                   {font-size: 16px; color: #666666; font-weight: 400; font-family: 'Ubuntu', sans-serif;}
input,
textarea,
select,
.form-control                                           {border: 0px; height: auto; box-shadow: none; background-color: #F8F8F8; font-size: 16px; padding: 14px; border-radius: 0px; font-weight: 400;}

textarea                                                {min-height: 90px;}

select                                                  {-webkit-appearance: none; -moz-appearance: none; appearance: none; background-position: right center; background-repeat: no-repeat;
                                                        background-image: url(../images/arrow-dropdown.png) !important;
                                                        background-image: linear-gradient(transparent, transparent), url(../images/arrow-dropdown.svg) !important;
}

.Bar.Blue .Inner input,
.Bar.Blue .Inner textarea                               {background: white !important;}

#paymentSection                                         { min-height: 361px;}
#paymentSection iframe                                  {max-width: 100%;}


::-webkit-input-placeholder {
   font-weight: 200; color: #9E9D9D;
}

:-moz-placeholder { /* Firefox 18- */
   font-weight: 200; color: #9E9D9D;
}

::-moz-placeholder {  /* Firefox 19+ */
   font-weight: 200; color: #9E9D9D;
}

:-ms-input-placeholder {
   font-weight: 200; color: #9E9D9D;
}


/*-----Checkboxes-----*/
input[type="checkbox"]                                  {display: none;}
input[type="checkbox"] + label                          {cursor: pointer; font-size: 14px; font-weight: 400; color: #666666; margin: 10px 0;}
input[type="checkbox"] + label:hover                    {color: #006699;}
input[type="checkbox"] + label:hover span.Checkbox      {
                                                        background-image: url(../images/check-hover.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/check-hover.svg);
}
input[type="checkbox"] + label span.Checkbox            {display: inline-block; width: 30px; height: 30px; margin: -1px 10px 0 0; vertical-align: middle; cursor: pointer;
                                                        background-image: url(../images/check-unchecked.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/check-unchecked.svg);
}
input[type="checkbox"]:checked + label                  {color: #006699;}
input[type="checkbox"]:checked + label span.Checkbox    {
                                                        background-image: url(../images/check-checked.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/check-checked.svg);
}

/*-----Radio-----*/
input[type="radio"]                                     {display: none;}
input[type="radio"] + label                             {cursor: pointer; font-size: 14px; font-weight: 400; color: #666666; margin: 10px 0; position: relative;}
input[type="radio"] + label:hover                       {color: #006699;}
input[type="radio"] + label:hover span.Radio            {
                                                        background-image: url(../images/radio-hover.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/radio-hover.svg);
}
input[type="radio"] + label span.Radio                  {display: inline-block; width: 30px; height: 30px; margin: -1px 10px 0 0; vertical-align: middle; cursor: pointer;
                                                        background-image: url(../images/radio-unchecked.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/radio-unchecked.svg);
}
input[type="radio"]:checked + label                     {color: #006699;}
input[type="radio"]:checked + label span.Radio          {
                                                        background-image: url(../images/radio-checked.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/radio-checked.svg);
}









/*------------------------------*/
/*----------Subnav----------*/
/*------------------------------*/
/*----------General----------*/
.Subnav                                                 {list-style: none; padding: 0px; font-family: 'Ubuntu', sans-serif;}
.Subnav li                                              {font-size: 18px; margin: 30px 0;}
.Subnav li a                                            {color: #999999; text-decoration: none; display: block; position: relative;
                                                        -webkit-transition: all .3s ease;
                                                           -moz-transition: all .3s ease;
                                                             -o-transition: all .3s ease;
                                                                transition: all .3s ease;
}
/*----------Hover----------*/
/*-----Link-----*/
.Subnav li a:hover,
.Subnav li a:focus,
.Subnav li a.active                                      {color: #006699; padding-left: 15px;}

/*-----Arrow-----*/
.Subnav li a:after                                      {content: ''; display: block; position: absolute; width: 12px; height: 20px; top: 4px; left: 10px; opacity: 0; background-repeat: no-repeat;
                                                        background-image: url(../images/arrow-left-blue.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/arrow-left-blue.svg);
                                                        -webkit-transition: all .3s ease;
                                                           -moz-transition: all .3s ease;
                                                             -o-transition: all .3s ease;
                                                                transition: all .3s ease;
}
.Subnav li a:hover:after,
.Subnav li a:focus:after,
.Subnav li a.active:after                                {left: -5px; opacity: 1;}






/*------------------------------*/
/*----------Login----------*/
/*------------------------------*/
.Login                                                  {border: 4px solid #f1f1f1; padding: 20px;}
.Login h1,
.Login h2,
.Login h3,
.Login h4,
.Login h5                                               {text-align: center;}

.Login .btn                                             {min-width: 250px; max-width: 100%; font-weight: 500;}
.Login .form-control                                    {font-size: 24px;}






/*------------------------------*/
/*----------Video Page----------*/
/*------------------------------*/
/*----------Video and details----------*/
.VideoContainer                                         {margin: -20px;}
.VideoContainer h1                                      {text-align: center;}
/*-----Video-----*/
.VideoContainer .VideoPlayer                            {}
.VideoContainer .VideoPlayer video                      {width: 100%;}
.VideoContainer .btn                                    {}

/*-----Disabled-----*/
.VideoContainer .VideoPlayer.VideoDisabled              {background-position: center; background-size: cover; padding: 40px; position: relative; aspect-ratio: 16 / 9; display: flex; justify-content: center; align-items: center;}
.VideoContainer .VideoPlayer.VideoDisabled:after        {content: ''; display: block; background: black; opacity: .5; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
.VideoContainer .VideoPlayer.VideoDisabled h3           {color: white; text-align: center; z-index: 10; position: relative; margin-top: 0;}
.VideoContainer .VideoPlayer.VideoDisabled .panel       {padding: 0; border: none; margin: 10px auto; z-index: 10; position: relative;}
.VideoContainer .VideoPlayer.VideoDisabled .panel img   {margin: 0 auto 10px auto;}
.VideoContainer .VideoPlayer.VideoDisabled .panel h3    {font-size: 18px; line-height: 1;}

.VideoContainer .FreePreview                            {display: inline-block; background: #C5A75F; padding: 0 15px; text-align: center; border-radius: 50px; color: white; text-transform: uppercase; font-family: 'Ubuntu', sans-serif; font-weight: 400;}

/*----------Nav----------*/
.VideoNav                                               {margin-top: 150px; text-align: center;}
.VideoNav a                                             {display: block; padding: 20px 10px; text-decoration: none; background-position: top center; background-repeat: no-repeat;}
.VideoNav a .Icon                                       {width: 80px; height: 80px; margin: 0 auto;}
.VideoNav a h3                                          {margin: 10px 0;}
.VideoNav a p                                           {color: #666666;}

/*--Icons--*/
.VideoNav.Prev .Icon                                    {
                                                        background-image: url(../images/video-previous.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/video-previous.svg);
}
.VideoNav.Next .Icon                                    {
                                                        background-image: url(../images/video-next.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/video-next.svg);
}
.VideoNav.Prev:hover .Icon                              {
                                                        background-image: url(../images/video-previous-fill.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/video-previous-fill.svg);
}
.VideoNav.Next:hover .Icon                              {
                                                        background-image: url(../images/video-next-fill.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/video-next-fill.svg);
}


/*_-_-_-_-_-_-_-_-Media Queries-_-_-_-_-_-_-_-*/
@media(max-width:767px){
    /*----------Video and details----------*/
    .VideoContainer                                         {margin: 0px;}
    /*-----Disabled-----*/
    .VideoContainer .VideoPlayer.VideoDisabled              {padding: 10px;}
    /*----------Nav----------*/
    .VideoNav                                               {margin-top: 0px;}
}
@media(min-width:768px){
    /*----------Video and details----------*/
    .VideoContainer                                         {margin: -20px;}
    /*----------Nav----------*/
    .VideoNav                                               {margin-top: 0px;}
}
@media(min-width:992px){
    /*----------Nav----------*/
    .VideoNav                                               {margin-top: 0px;}
}
@media(min-width:1200px){
    /*----------Nav----------*/
    .VideoNav                                               {margin-top: 150px;}
}





/*------------------------------*/
/*----------Share link----------*/
/*------------------------------*/
.input-group                                            {}
.input-group input[type="text"]                         {padding: 15px;}
.input-group .btn                                       {margin: 0;}

.share-link                                             {}
.share-link .btn                                        {}
.share-link .btn:active                                 {}







/*------------------------------*/
/*----------Carousel----------*/
/*------------------------------*/
/*----------General----------*/
.carousel                                               {}
.carousel .carousel-indicators                          {bottom: -40px !important;}
.carousel .carousel-indicators li                       {width: 10px; height: 10px; border: 2px solid #006699; margin: 5px;}
.carousel .carousel-indicators li.active                {background: #006699;}

.carousel .carousel-inner .item                         {}

.carousel .carousel-control                             {width: 40px; height: 40px; opacity: 1; top: 50%; margin-top: -20px;}
.carousel .carousel-control span                        {display: none;}
.carousel .carousel-control.left                        {left: -60px;
                                                        background-image: url(../images/slideshow-previous-blue.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/slideshow-previous-blue.svg);
}
.carousel .carousel-control.right                       {right: -60px;
                                                        background-image: url(../images/slideshow-next-blue.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/slideshow-next-blue.svg);
}

/*----------Home----------*/
#HomepageCarousel                                       {}

/*----------Testimonials----------*/
.TestimonialsCarousel                                   {}
.TestimonialsCarousel .carousel-inner                   {}
.TestimonialsCarousel .carousel-inner .item             {}




/*------------------------------*/
/*----------Testimonials----------*/
/*------------------------------*/
.TestimonialBlock                                       {}
.TestimonialBlock .Quote                                {background: white; font-style: italic; color: #006699; font-family: 'Ubuntu', sans-serif; font-size: 18px; padding: 20px; position: relative;
                                                        /*-webkit-transition: all .3s ease;
                                                           -moz-transition: all .3s ease;
                                                             -o-transition: all .3s ease;
                                                                transition: all .3s ease;*/
}
.TestimonialBlock .Tail                                 {display: block; width: 24px; height: 24px; position: absolute; margin-left: 20px;
                                                        background-image: url(../images/quote-tail-white.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/quote-tail-white.svg);
                                                        /*-webkit-transition: all .3s ease;
                                                           -moz-transition: all .3s ease;
                                                             -o-transition: all .3s ease;
                                                                transition: all .3s ease;*/
}
.TestimonialBlock .Source                               {color: #999999; margin-left: 50px;}

/*-----Active-----
.item.active .TestimonialBlock .Quote                   {background: #006699; color: white;}
.item.active .TestimonialBlock:after                    {}
.item.active .TestimonialBlock .Tail                    {
                                                        background-image: url(../images/quote-tail-blue.png);
                                                        background-image: linear-gradient(transparent, transparent), url(../images/quote-tail-blue.svg);
}
*/




/*------------------------------*/
/*----------Footer----------*/
/*------------------------------*/
/*----------General----------*/
footer                                                  {overflow: hidden; position: relative; z-index: 10;}
footer .BorderTop                                       {width: 108%; left: -4%; right: -4%; display: block; position: relative; z-index: 10;}
footer .Inner                                           {background: #333333;}

footer .Logo                                            {margin: 30px auto 70px auto;}

/*----------Footer list----------*/
footer .FooterList                                      {float: right; list-style: none; padding: 0px; margin: 30px 0 70px 0;}
footer .FooterList li                                   {float: left; margin: 0 10px; font-size: 18px; font-family: 'Ubuntu', sans-serif;}
footer .FooterList li a                                 {color: #7F7F7F; text-decoration: none; }
footer .FooterList li a:hover                           {color: white;}

footer .FooterLeft,
footer .FooterCenter,
footer .FooterRight                                     {font-size: 14px;}

footer .FooterLeft a,
footer .FooterCenter a,
footer .FooterRight a                                   {color: white;}

footer .FooterLeft                                      {text-align: left;}
footer .FooterCenter                                    {text-align: center;}
footer .FooterRight                                     {text-align: right;}

/*_-_-_-_-Media Queries-_-_-_-*/
@media(max-width:767px){
    /*----------Footer list----------*/
    footer .FooterList                                      {float: none;}
    footer .FooterList li                                   {float: none; text-align: center;}

    footer .FooterLeft,
    footer .FooterCenter,
    footer .FooterRight                                     {text-align: center;}
}
@media(min-width:768px){

}
@media(min-width:992px){

}
@media(min-width:1200px){

}











/*------------------------------*/
/*----------TEMPLATE----------*/
/*------------------------------*/
/*----------Main----------*/
.Thing                                                  {}

/*-----Sub-----*/
.Thing.Two                                              {}

/*--Note--*/

/*_-_-_-_-_-_-_-_-Media Queries-_-_-_-_-_-_-_-*/
@media(max-width:767px){

}
@media(min-width:768px){

}
@media(min-width:992px){

}
@media(min-width:1200px){

}








.ComponentDivider{border: 2px dashed #f1f1f1; padding: 10px; margin: 0 0 60px 0;}



/*_-_-_-_-_-_-_-_-Media Queries-_-_-_-_-_-_-_-*/

@media(max-width:767px){

}

@media(min-width:768px){

}

@media(min-width:992px){

}

@media(min-width:1200px){

}

.validation-summary-errors ul {
    list-style-type: none;
    padding-left: 0;
}