@charset "utf-8";

/* Table of Content
==================================================
	
    #Reset & Basics
	#Basic Styles	
	#Typography
	#Fonts
	#Links & Buttons
	#Lists
	#Images
	#Site Sections
     -Color
     -Top Nav
     -Footer Nav
	#Forms
	#Misc */

/* #Reset & Basics
================================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-family: Zirkel-Regular, verdana, sans-serif, Arial;
    vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; }
body {line-height: 1; }
ol, ul {list-style: none; }
blockquote, q {quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none; }
table {
    border-collapse: collapse;
    border-spacing: 0; }


/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {font-weight: normal; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: inherit;}
header h1, section h1 {font-size: 45px; line-height: 54px; margin: 0 0 10px 0;font-family: Zirkel-ExtraLight, verdana, sans-serif, Arial;}
section h2 {font-size: 40px; line-height: 40px; margin: 0 0 10px 0;font-family: Zirkel-ExtraLight, verdana, sans-serif, Arial;}
section h3 {font-size: 30px; line-height: 30px; margin: 0 0 10px 0;}
section h4 {font-size: 20px; line-height: 20px; margin: 0px;}
section h5 {font-size: 20px; line-height: 20px; margin: 0px;}
section h6 {font-size: 20px; line-height: 20px; margin: 0px;}

.container p {
    font-size: 18px;
    margin: 0 0 20px 0;
    line-height: normal;
}

.container p img { margin: 0; }

em { font-style: italic; }
strong { font-weight: bold; }
small { font-size: 80%; }

header h1.subhead {
    font-size: 30px;
    line-height: 30px;
    color: #3cc9f3;
    margin-bottom: 10px;
}

/* #Spacers
================================================== */

.head-space20 {margin-bottom:20px;}
.head-space30 {margin-bottom:30px;}
.head-space40 {margin-bottom:40px;}
.head-space50 {margin-bottom:50px;}
.head-space60 {margin-bottom:60px;}

.container .body-space20 {margin-bottom:20px;}
.container .body-space30 {margin-bottom:30px;}
.container .body-space40 {margin-bottom:40px;}
.container .body-space50 {margin-bottom:50px;}
.container .body-space60 {margin-bottom:60px;}

/* #Zirkel Fonts
================================================== */
@import url("//hello.myfonts.net/count/2bb87b");
@font-face {font-family: 'Zirkel-Thin';src: url('webfonts/2BB87B_0_0.eot');src: url('webfonts/2BB87B_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_0_0.woff') format('woff'),url('webfonts/2BB87B_0_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-Bold';src: url('webfonts/2BB87B_1_0.eot');src: url('webfonts/2BB87B_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_1_0.woff') format('woff'),url('webfonts/2BB87B_1_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-BlackItalic';src: url('webfonts/2BB87B_2_0.eot');src: url('webfonts/2BB87B_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_2_0.woff') format('woff'),url('webfonts/2BB87B_2_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-Black';src: url('webfonts/2BB87B_3_0.eot');src: url('webfonts/2BB87B_3_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_3_0.woff') format('woff'),url('webfonts/2BB87B_3_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-BoldItalic';src: url('webfonts/2BB87B_4_0.eot');src: url('webfonts/2BB87B_4_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_4_0.woff') format('woff'),url('webfonts/2BB87B_4_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-ExtraLightItalic';src: url('webfonts/2BB87B_5_0.eot');src: url('webfonts/2BB87B_5_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_5_0.woff') format('woff'),url('webfonts/2BB87B_5_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-ExtraLight';src: url('webfonts/2BB87B_6_0.eot');src: url('webfonts/2BB87B_6_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_6_0.woff') format('woff'),url('webfonts/2BB87B_6_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-RegularItalic';src: url('webfonts/2BB87B_7_0.eot');src: url('webfonts/2BB87B_7_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_7_0.woff') format('woff'),url('webfonts/2BB87B_7_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-Light';src: url('webfonts/2BB87B_8_0.eot');src: url('webfonts/2BB87B_8_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_8_0.woff') format('woff'),url('webfonts/2BB87B_8_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-LightItalic';src: url('webfonts/2BB87B_9_0.eot');src: url('webfonts/2BB87B_9_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_9_0.woff') format('woff'),url('webfonts/2BB87B_9_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-MediumItalic';src: url('webfonts/2BB87B_A_0.eot');src: url('webfonts/2BB87B_A_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_A_0.woff') format('woff'),url('webfonts/2BB87B_A_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-Medium';src: url('webfonts/2BB87B_B_0.eot');src: url('webfonts/2BB87B_B_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_B_0.woff') format('woff'),url('webfonts/2BB87B_B_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-Regular';src: url('webfonts/2BB87B_C_0.eot');src: url('webfonts/2BB87B_C_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_C_0.woff') format('woff'),url('webfonts/2BB87B_C_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-SemiboldItalic';src: url('webfonts/2BB87B_D_0.eot');src: url('webfonts/2BB87B_D_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_D_0.woff') format('woff'),url('webfonts/2BB87B_D_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-Semibold';src: url('webfonts/2BB87B_E_0.eot');src: url('webfonts/2BB87B_E_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_E_0.woff') format('woff'),url('webfonts/2BB87B_E_0.ttf') format('truetype');}
@font-face {font-family: 'Zirkel-ThinItalic';src: url('webfonts/2BB87B_F_0.eot');src: url('webfonts/2BB87B_F_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2BB87B_F_0.woff') format('woff'),url('webfonts/2BB87B_F_0.ttf') format('truetype');}
 

/* #Links 
================================================== */
a, a:visited {color: #232323;}
a:hover, a:focus {color: #F4F4F4;}
p a, p a:visited {line-height: inherit;}

a {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
a:hover {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

section.white a, section.grey-light a {color:#007dda;}
section.white a:hover, section.white a:focus, section.grey-light a:hover, section.grey-light a:focus {color: #3cc9f3;text-decoration:none;}

section.grey-rich a {color:#3cc9f3;}
section.grey-rich a:hover, section.grey-rich a:focus {color:#007dda;}

/* Sub Menu
================================================== */

.col-md-3 #myMenu1 {
    padding-left: 0;
    margin-bottom: 20px;
}

.col-md-3 #myMenu1 a {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;}

.col-md-3 #myMenu1 a:hover {
    background-color: #f5f5f5;
}

.col-md-3 #myMenu1 a.selected, .col-md-3 #myMenu1 a.selected:focus, .col-md-3 #myMenu1 li a.selected:hover {
    z-index: 2;
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

.col-md-3 #myMenu1 li:last-child a{
    margin-bottom: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.col-md-3 #myMenu1 li:first-child a {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

.col-md-3 #myMenu1 li {
    line-height:20px;
    margin-bottom:0px;
}


/* #Buttons 
================================================== */

section.white a.btn,
section.grey-rich a.btn,
section.grey-light a.btn,
section.blue-light a.btn,
header.header a.btn {
    min-height: 40px;
    padding: 9px 25px;
    min-width: 175px;
    display: inline-block;
    margin-top: 10px;
    background-color: #007dda;
    color: #ffffff;
    font-size: 18px;
    border-radius: 0px;
}

section.white a.btn:hover,
section.grey-rich a.btn:hover,
section.grey-light a.btn:hover,
section.blue-light a.btn,
header.header a.btn:hover,
header.header a.btn.login:hover {
    background-color: #852cca;
    color: #ffffff;
}

.assessor form .mktoButton,
.partner form .mktoButton,
.demo form .mktoButton,
.contact form .mktoButton {
    display: inline-block;
    margin-top: 10px;
    background-color: #007dda;
    color: #ffffff;
    font-size: 18px;
    line-height: 30px;
    border-radius: 2px;
    padding: 6px 24px;
    font-family: Zirkel-SemiBold;
}

.assessor form .mktoButton:hover,
.partner form .mktoButton:hover,
.demo form .mktoButton:hover,
.contact form .mktoButton:hover{
    background-color: #3cc9f3;
    color: #ffffff;
}

section.blue-dark a.btn{
    min-height: 40px;
    padding: 9px 25px;
    min-width: 175px;
    display: inline-block;
    margin-top: 10px;
    background-color: #ffffff;
    color: #232323;
    font-size: 18px;
    border-radius: 0px;  
}

section.blue-dark a.btn:hover{
    background-color: #852cca;
    color: #232323;   
}

section.no-head {margin-top:75px;}

a.btn span {margin-left:10px;}

header.header a.btn.login {background-color: #878389;}

.round-button {
    display: table;
    width:180px;
    height:180px;
    line-height:30px;
    border-radius: 50%;
    color:#232323;
    text-align:center;
    text-decoration:none;
    background: #ffffff;
    font-size:24px;
    margin: 0 auto;
}
.round-button:hover {
    background: #852cca;
}
.round-button a {
    display: table-cell;
    vertical-align: middle;
}
.round-button a:hover {
    color:#fff;
    text-decoration:none;
}


/* #Lists
================================================== */
ul, ol { margin-bottom: 20px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
li { line-height: 21px; margin-bottom: 10px; }
li p { line-height: 21px; }

.bluedots > li {
    list-style-type: none;
    padding: 10px 10px 10px 45px;
    margin: 0;
    position: relative;
    line-height: normal;
    font-size: 18px;
}
    
.bluedots > li:before {
    content: "•";
    color: #16c0eb;
    font-size: 120px;
    padding: 0;
    margin: 0 0 0 0;
    position: absolute;
    left: 0px;
    top: -47px;
}

ul.jobs {
    list-style: disc;
    margin-left: 20px;
}


/* #Nav Sub
================================================== */

.list-group-item.active, 
.list-group-item.active:focus, 
.list-group-item.active:hover {background-color: #007dda;border-color: #007dda;}

a.list-group-item:focus, 
a.list-group-item:hover, 
button.list-group-item:focus, 
button.list-group-item:hover {background-color: #e5e5e5;}

/* #Blue Block
================================================== */

section.white ul.blueblock.left {
    float: left;
    margin: 0 30px 20px 0;
}

section.white ul.blueblock {
    display: inline-block;
    float: right;
    margin: 0 0 30px 30px;
    padding: 20px;
    width: 33%;
    background-color: #3CC9F3;
    color: white;
}

section.white ul.blueblock li {
    line-height: 125%;
    font-size: 28px;
    list-style-type: none;
    font-family: Zirkel-light;
    padding: 4px 0;
}

/* #Partner, Partner Form, Demo Form, SfB Assessor
================================================== */


.assessor form .mktoButton,
.partner form .mktoButton, 
.demo form .mktoButton,
.contact form .mktoButton{border:0;}

.partner .white form input[type=text],
.partner .white form input[type=email],
.partner .white form input[type=tel],
.partner .white form select#Country {background-color: #e5e5e5;}

.assessor form .mktoOffset,
.partner form .mktoOffset,
.demo form .mktoOffset,
.contact form .mktoOffset {display:none;}

.assessor form label,
.partner form label,
.demo form label,
.contact form label {
    position: relative;
    font-size: 18px;
    font-weight: initial;
    margin: 10px 0 0 0;
    width: 100%!important;
}

.assessor form .mktoAsterix,
.partner form .mktoAsterix,
.demo form .mktoAsterix,
.contact form .mktoAsterix {position: absolute;top: 0px;left: -10px;color:#e73750;}
            
.assessor form .mktoTextField,
.assessor form .mktoEmailField,
.assessor form .mktoTelField,
.assessor form select,
.partner form .mktoTextField,
.partner form .mktoEmailField,
.partner form .mktoTelField,
.partner form select,
.demo form .mktoTextField,
.demo form .mktoEmailField,
.demo form .mktoTelField,
.demo form select,
.demo form textarea,
.contact form .mktoTextField,
.contact form .mktoEmailField,
.contact form .mktoTelField,
.contact form select,
.contact form textarea{
    display: block;
    width: 100%!important;
    padding: 5px 10px;
    font-size: 16px;
    line-height: 1.5;
    color: #232323;
    background-color: #e5e5e5;
    background-image: none;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;                
}

.assessor form .mktoTextField,
.assessor form .mktoEmailField,
.assessor form .mktoTelField,
.assessor form select,
.demo .grey-light form .mktoTextField,
.demo .grey-light form .mktoEmailField,
.demo .grey-light form .mktoTelField,
.demo .grey-light form select,
.demo .grey-light form textarea,
.contact .grey-light form .mktoTextField,
.contact .grey-light form .mktoEmailField,
.contact .grey-light form .mktoTelField,
.contact .grey-light form select,
.contact .grey-light form textarea{
    background-color: #ffffff;               
}

.contact form input.mktoTextField:focus,
.contact form input.mktoField:focus,
.contact form select.mktoField:focus,
.contact form textarea.mktoField:focus {
    border-color: #3cc9f3;
}

.contact form select {padding:7px 5px 6px 5px;}

.demo #mktoForm_1466, .demo form .mktoTextField {width:100%!important;}

.assessor form textarea,
.demo form textarea,
.contact form textarea {height: 120px;}

.form-check-input:only-child {position: static;}

.assessor form input[type=checkbox],
.partner form input[type=checkbox],
.demo form input[type=checkbox],
.contact form input[type=checkbox]{
    width: 15px;
    height: 15px;
    margin:0 10px;
}

.assessor form .mktoCheckboxList,
.partner form .mktoCheckboxList,
.demo form .mktoCheckboxList,
.contact form .mktoCheckboxList {width: 100%!important;}

.assessor form .mktoCheckboxList label,
.partner form .mktoCheckboxList label,
.demo form .mktoCheckboxList label,
.contact form .mktoCheckboxList label{width: calc(100% - 35px)!important;}
.demo form select#State {width: 100%!important;}

.partner .trialtable {width:100%;}
.partner .trialtable .bluehead{min-width:initial !important;background-color: #00c0ff;}
.partner .trialtable p {font-size:14px;}
.partner .trialtable td {background-color:#ffffff;vertical-align:top;text-align:center;}
.partner .trialtable td:nth-of-type(1){text-align:left;}

.assessor .form-col {
    padding:20px;
    background-color:#e5e5e5;}

/* #Carousel
================================================== */

.carousel-control.left, 
.carousel-control.right {background-image:none;}
.carousel-control {opacity:1;}
.carousel-caption  {position: relative;}
.carousel-indicators {
    position: relative;
    margin: 30px auto 0;
    padding:0;
    bottom:initial;
    left:initial;
    width:100%;
}


/* #Images
================================================== */


.container img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}


/* #Site Sections - Section & Container
================================================== */

section.white {
    background-color:#ffffff;
    color:#232323;
}
section.blue-dark {
    background-color:#007dda;
    color:#ffffff;
}
section.blue-light {
    background-color:#3cc9f3;
    color:#ffffff;
}
section.grey-rich {
    background-color:#24221f;
    color:#ffffff;
}
section.grey-dark {
    background-color:#878389;
    color:#ffffff;
}
section.grey-light {
    background-color:#e5e5e5;
    color:#232323;
}
section.red {
    background-color:#e73750;
    color:#ffffff;
}

section .container {
    padding:50px 0;
}

section.desktopmenu .container,
section.mobilemenu .container {
    padding:0;
    position: relative;
}

section.desktopmenu .container {
    height:75px;
}

section .container {width:1200px;}

section .container.full {width:100%;}

section.no-head {margin-top: 75px;}

/* #Site Sections - Top Nav
================================================== */

.topmenuholder {
    position: relative;
    width: auto;
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
    background-color: #24221f;
    height: 75px;
    min-height: 75px;
    z-index: 1000;
    -webkit-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
}

.toplogo {
    width: 30px;
    max-width: 30px;
    margin: 23px auto 0 auto;
    float: left;
}

section.desktopmenu {
    position: fixed;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    background-color: #24221f;
    z-index: 5000;
}

.topmenuholder .top {
    margin-top: 10px;
    height: 20px;
}

nav.topmenunav .hang-left,
nav.topmenunav .hang-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    z-index: 1000;       
}

nav.topmenunav .hang-left {left: -10px;}
nav.topmenunav .hang-right {right: -10px;}

nav.topmenunav {
    margin: 8px 0px 0px;
    float: right;
    position: relative;
}

nav.topmenunav ul {
    margin: 0;
    padding: 0;
}

nav.topmenunav div > ul:first-child > li {
    margin-right: 18px;
    margin-bottom: 0;
    padding-bottom: 15px;
}

nav.topmenunav div > ul:first-child li:last-child {
    margin-right: 0;
}

nav.topmenunav div > ul > li {
    display: inline-block;
}

nav.topmenunav div > ul > li > a {
    font-size: 12px;
    font-family: 'Zirkel-Regular';
    position: relative;
}

nav.topmenunav div > ul > li:hover > a {
    /*color:#3cc9f3;*/
}

nav.topmenunav div > ul > li:hover {
    /*background: url(/img/menu-tab.png) bottom center no-repeat;*/
}

nav.topmenunav div > ul > li > ul {
    position: absolute;
    left: 0;
    top: 57px;
    margin: 0;
    padding: 0;
    z-index: 7000;
    background: #24221f;
    -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.75);
}

nav.topmenunav div > ul > li > ul > li {
    margin: 0 0 1px 0;
    padding: 0;
    display: block;
    border-bottom: 1px solid #F4F4F4;
    float: left;
    width: 100%;
}

nav.topmenunav div > ul > li > ul > li > a {
    padding: 10px 10px 10px 10px;
    display: block;
}

nav.topmenunav div > ul > li > ul > li > ul {
    position: absolute;
    right: auto;
    left: 100%;
    top: 0;
    margin: 0;
    padding: 0;
    z-index: 7001;
    background: #24221f;
    -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.75);
}

nav.topmenunav div > ul > li > ul > li > ul > li {
    margin: 0 0 1px 0;
    padding: 0;
    display: block;
    border-bottom: 1px solid #F4F4F4;
    float: left;
    width: 100%;
}

nav.topmenunav div > ul > li > ul > li > ul > li > a {
    padding: 10px;
    display: block;
}

nav.topmenunav ul li ul {
    display: none;
}

nav.topmenunav ul li a {
    font-weight: normal;
    position: relative;
    color: white;
    text-decoration: none;
    font-size: 12px;
}

nav.topmenunav div > ul > li > ul > li > a {
    padding: 10px 10px 10px 10px;
    display: block;
}

.submenubg {
    position: relative;
    top: 0px;
    width: 100%;
    background: #fff;
    color: #232323;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    padding-bottom: 20px;
    overflow: auto;
    max-width: 1200px;
}

.submenuinner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px 0 30px;
}

.submenusubs {
    width: 71%;
    position: relative;
    float: left;
    margin: 30px 0 0 0;
    text-align: left;
}

.submenusubs > ul {
    padding: 0;
    margin: 0;
    position: relative;
    list-style: none;
    list-style-type: none;
    display: inline-block;
    width: 100%;
}

.submenusubs > ul > li {
    list-style: none;
    list-style-type: none;
    display: inline-block;
    margin: 0 1% 0 0;
    max-width: 300px;
    vertical-align: top;
    float: left;
    width: 32%;
}

.submenusubs > ul > li > a {
    text-decoration: none;
    text-transform: uppercase;
    padding-bottom: 10px;
    display: block;
    margin-bottom: 10px;
    min-height: 0;
    background: #F4F4F4;
    padding: 10px;
    color: #232323;
    font-family: Zirkel-Bold;
    font-size: 18px;
}
.submenusubs > ul > li > a:hover {
    /*background:#3cc9f3;
    color:#ffffff;*/
    text-decoration: underline;
}
.submenubg.desktop .submenusubs > ul > li > ul {
    display: block;
}

.submenusubs > ul > li > ul > li {
    list-style: none;
    list-style-type: none;
    line-height: normal;
    margin-bottom: 6px;
}

.submenusubs > ul > li > ul > li > a {
    text-decoration: none;
    font-size: 14px;
    padding: 2px 10px 2px 10px;
    margin: 0 0 0 0;
    color: #232323;
    display: inline-block;
}

.submenusubs > ul > li > ul > li > a:hover {
    color:#B9B9B9;
    text-decoration:underline;
}

.submenusubs li.pay-row1 {
    min-height: 240px;
}
.submenusubs li.in-row1 {
    min-height: 190px;
}
.submenunews {
    width: 28%;
    min-width: 300px;
    margin: 30px 0 0 10px;
    position: relative;
    width: 20%;
    float: left;
    text-align: left;
    color: white;
}

.submenunews > div {
    padding: 0 0 20px 0;
}

.submenusubs li.uc-row1 {height:295px;}



/* #Site Sections - Flags Nav
================================================== */

#cat_1682915_divs {
    position: absolute;
    right: 0;
    top: 0;
}

ul#nav_1682915 {
    max-height: 30px;
    float: right;
    overflow: hidden;
    margin: 2px 0px 0px 15px;
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
}

#cat_1682915_divs::after {
    color: transparent;
    Content: '.';
    position: relative;
    right: 0;
    background: url('../images/darr.png') no-repeat;
    width: 10px;
    display: block;
    background-size: contain;
    top: 19px;
}

ul#nav_1682915 li {
    padding: 10px;
    margin-bottom: 0px;
    opacity: 0;
}

ul#nav_1682915 li.selected, .de ul#nav_1682915 li.de, .es ul#nav_1682915 li.es, .cn ul#nav_1682915 li.cn, .ru ul#nav_1682915 li.ru, .fr ul#nav_1682915 li.fr, .pt ul#nav_1682915 li.pt, .ko ul#nav_1682915 li.ko, .ja ul#nav_1682915 li.ja, .en ul#nav_1682915 li.en {
    position: absolute;
    top: 0;
    opacity: 1;
}

ul#nav_1682915 li a {
    padding: 2px 0px 0px 27px;
    color: #aaaaaa;
    background-size: contain!important; /*overwrite inline */
    font-size: 10px;
    font-family: Zirkel-Regular;
    text-decoration: none;
}

ul#nav_1682915:hover li.selected,
.de ul#nav_1682915:hover li.de,
.es ul#nav_1682915:hover li.es,
.cn ul#nav_1682915:hover li.cn,
.ru ul#nav_1682915:hover li.ru,
.fr ul#nav_1682915:hover li.fr,
.pt ul#nav_1682915:hover li.pt,
.ko ul#nav_1682915:hover li.ko,
.ja ul#nav_1682915:hover li.ja,
.en ul#nav_1682915:hover li.en {
    position: relative;
}
ul#nav_1682915:hover li.selected,
ul#nav_1682915:hover li {
    position: relative;
    opacity: 1;
}
ul#nav_1682915:hover {
    max-height: 99999px;
    background: #F4F4F4;
    z-index: 999;
}
ul#nav_1682915 li:hover {
    background: #3cc9f3;
}
ul#nav_1682915 li:hover a {
    color: #fff !important;
    text-decoration: none;
}
ul#nav_1682915:hover li a {
    color: #232323;
}

/* #Site Sections - Search Form
================================================== */

#searchformtop {
    width: auto;
    margin: 4px 0 0 0;
    float: right;
    position: relative;
}

.topsearch {
    position: absolute;
    right: -8px;
    top: -1px;
    border: 0;
    margin: 0;
    min-width: 200px;
    margin-right: 120px;
    z-index: 101;
}

.topsearch #searchbutton {
    background: url('/img/search.png') no-repeat center;
    margin: 0;
    float: right;
    display: inline-block;
    width: 30px;
    height: 20px;
    min-width: 0;
    color: transparent;
    font-size: 18px;
    text-align: center;
    padding: 7.5px 20px 7.5px 20px;
    text-decoration: none;
    font-weight: normal;
    border:0;
}

.topsearch #CAT_Search {
    width: 50px;
    border: none;
    text-indent: 0;
    margin: 0;
    text-align: center;
    font-size: 12px;
    padding: 2px 5px 2px 5px;
    display: inline-block;
    float: right;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background: none;
    border: 1px solid F4F4F4;
    text-indent: 0;
}

.topsearch input#CAT_Search:focus {
	width: 150px;
	border:none;
	text-indent: 0;
    margin:0;
	text-align: center;
	font-size: 12px;
    padding: 2px 5px 2px 5px;
    display: inline-block;
    float: right;    
    background:gray;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    color:white;
}

/* #Site Sections - Footer Nav
================================================== */

footer {
    box-sizing: border-box;
    margin: 0;
    padding: 40px 0 75px 0;
    min-height: 150px;
    background-color: #24221f;
    position: relative;
    width: 100%;
    float: left;
    font-size: 18px;
}

footer .container {
    width: auto;
    max-width: 1200px;
}

footer .left {
    font-size: 18px;
    float: left; 
    color: white; 
    line-height: normal;
}

footer .left a, footer .right a {
    color: #3cc9f3;
    text-decoration: none;
    font-weight: bold;
}

footer .right a {
    color: #ffffff;
    font-size: 14px;
}

footer .right a:hover {
    color: #3cc9f3;
}

.bottomlogo {
    margin: 0 auto 10px auto;
    float: left;
    width: 225px;
}

footer .right {
    text-align: right;
    float: right;
}

footer nav {
    max-width: 650px;
    text-align: right;
}

footer nav ul li {
    display: inline-block;
}

footer nav ul li:after {
    margin: 0px 10px;
    content: " ";
    font-size: 14px;
}

.footersocial {
    padding-top: 20px;
    text-align: right;
}

.footersocial a {
    display: inline-block;
    margin-left: 5px;
}

.footersocial a img {
    max-width: 35px;
    width: auto;
    height: auto;
}

/* #Site Sections - Mobile Nav
================================================== */

nav.small.top {
    display: none;
}
nav.small.top ul {
    display: none;
    margin: 0px;
}
nav.small.top ul li {
    padding: 0px;
    border-bottom: 1px solid #ddd;
    position: relative;
}
nav.small.top ul li a {
    display: block;
    padding: 10px 20px;
}
nav.small.top ul li:first-child {
    border-top: 1px solid #ddd;
}
nav.small.top ul li.selected {
    border: none;
    background: #333;
}
nav.small.top ul li.selected a {
    color: #fff;
}

nav.small ul li:last-child a {
    padding: 10px 20px;
}

nav.small.top form {
    display: inline-block;
    margin-bottom: 0px;
    padding: 18px 0px 0px 20px;
}

nav.small.top {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    right: 0;
    background-color: #232222;
    float: left;
    min-height: 75px;
    z-index: 1000;
    -webkit-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
    text-align: center;
}

nav.small.top ul {
    display: none;
    margin: 15px 0 0 0;
}

nav.small.top ul li a {
    display: inline-block !important;
    padding: 10px 0px !important;
    margin-left: 35px;
    width: calc(100% - 35px);
    text-align: left;
    line-height: 20px;
    color:#fff;
    font-size:16px;
}

.expand-menu {
    background: url(/images/lanuageVersion/hamburger.jpg) center center no-repeat;
    background-size: 22px;
    float: right;
    margin: 25px 35px 0px 0px;
    width: 22px;
    height: 22px;
}

nav.small.top ul li:first-child {
    border-top: none !important;
}

nav.small.top ul li {
    margin: 0;
    display: inline-block;
    width: 100%;
    display: block;
    padding: 5px 0 0 0;
    border-bottom: 1px solid #333;
    text-align: left;
    position: relative;
}

nav.small div ul li > ul,
nav.small div ul li > ul > li > ul {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    right: auto;
}

nav.small ul {
    background: #111 !important;
}
nav.small ul li ul {
    background: #333 !important;
    padding: 0 0 0 0 !important;
}
nav.small ul li ul li ul {
    background: #555 !important;
    padding: 0 0 0 0 !important;
}

.toplogocenter {
    float: left;
    padding: 14px 0px 0px 16px;
}

#cat_1574143_divs {
    position: relative;
}

@media only screen and (max-width: 767px) {
	nav.small.top {
    	display: block;
    	position: fixed;
	}

	.topmenuholder {
    	display: none;
	}
}

/* #Site Sections - Header
================================================== */

header {
    background-color: #24221f;
    color:#ffffff;
    margin-top: 75px;
}

header .container img{
    margin:0 auto;
    display:block;
    max-height:180px;
}

header h1 {
    color:#ffffff;
    margin-top:0;
}

header .container {
    padding: 75px 0 50px;
    width: 1200px;
}

header .container p {font-size:20px;}

.Home header .container {
    padding-top: 95px;
}

/* #Site Sections - Resources
================================================== */

.container.resources div {text-align:center;}

.container.resources strong {
    text-transform: uppercase;
    padding-top: 10px;
    display: block;
    font-size: 18px;
    -webkit-transition: all linear 0.2s;
    -moz-transition: all linear 0.2s;
    -o-transition: all linear 0.2s;
    transition: all linear 0.2s;
}

.container.resources .col-xs-6.col-sm-3.col-md-2 {
    padding:10px 0;
}

.container.resources .col-xs-6.col-sm-3.col-md-2:hover {
    background-color: #852caa;
}

/*
.container.resources .col-xs-6.col-sm-3  {
    display: inline-block;
    padding: 10px 0px;
    float: none;
    background-color: #ffffff;
    -webkit-transition: all linear 0.2s;
    -moz-transition: all linear 0.2s;
    -o-transition: all linear 0.2s;
    transition: all linear 0.2s;
}



.container.resources .col-xs-6.col-sm-3 img {
    width: 61%;
}
*/


/* #Site Sections - UC Journey
================================================== */

.container.journey img {
    width: 150px;
    padding:30px 0;
}

.container.journey ul.bluedots {
    min-height:200px;
}

.container.journey div:nth-of-type(2),.container.journey div:nth-of-type(3) {
    margin-bottom:50px;
}

/* #Site Sections - Why Prognosis
================================================== */

.container.why h4 {
    font-family: Zirkel-SemiBold;
}

.container.why ul.grid {
    margin:50px 0;
}

.container.why ul.grid > li {
    float:left;
    width:32%;
    min-height:100px;
    margin:0 2% 2% 0;
    background-color: #3cc9f3;
    padding:20px;
    font-size:22px;
    line-height:28px;
    text-align:center;
    color:#fff;
}


.container.why ul.grid > li:nth-of-type(3n+2) {
    background-color: #24221f;
}

.container.why ul.grid > li:nth-of-type(3n+0) {
    margin-right:0;
    background-color: #852cca;
}

.partner ul.stack > li {
    float:left;
    width:100%;
    margin:0 2% 2% 0;
    background-color: #24221f;
    padding:20px;
    font-size:22px;
    line-height:28px;
    text-align:center;
    color:#fff;
}


/* #Site Sections - Platforms & Certified
================================================== */

.container.platforms {padding:30px 0;}
.container.platforms img {max-height:125px;max-width:80%;}
.container.platforms h2 > a {color:#ffffff;font-family:Zirkel-ExtraLight;}
.container.platforms h2 > a:hover {color:#ffffff;text-decoration:none;}
.certified table h3 a {color: #3cc9f3;text-decoration:none;}
.certified table h3 a:hover {color: #007dda;text-decoration:none;}
section.grey-rich .platforms a, section.grey-rich .platforms a:hover {color:#ffffff;text-decoration:none;}

/* #Site Sections - Announcement
================================================== */

.announcement {
    max-height: 0;
    transition: .5s max-height ease;
    overflow: hidden;
}

.hovers .h1, .announcement .h3 {
    font-family: Zirkel-ExtraLight;
    font-size: 45px;
}

.announcement p {
    font-size: 20px;
}

.announcement a.btn.right {
    float: right;
}

.announcement a.btn {
    min-height: 40px;
    padding: 9px 25px;
    min-width: 175px;
}

.announcement .container {padding:0;}


/* #Site Sections - Counters
================================================== */

#home-new .bannerlight {
    position: relative;
    float: left;
    width: 100%;
    min-height: 400px;
    background-color: #FFFFFF;
    margin-bottom: 0px;
    color: black;
}

#home-new .bannerlight .wrap {
    float: none;
    display: inline-block;
    padding: 3.75%;
    color: #232323;
}

#home-new .bannerlight .ani-counter-circle .fraction-new p {
    color: #232323;
}

/* #Site Sections - Customer success
================================================== */

.customerLogos.new {
    margin: 50px 0;
}

.customerLogos .col-md-2 {
    padding-left: 0px;
    margin-bottom: 15px;
}

.customerLogos.new .col-md-2 div {
    position: relative;
    border: none;
    background: #fff;
    height: 130px;
    width: 100%;
    padding-left: 10%;
}

.customerLogos .col-md-2 img {
    position: absolute;
    top: 50%;
    width: 60%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.fraction {
    font-size: 36px;
    max-width: 65px;
}
.fraction span {
    width: 100%;
    display: block;
    text-align: center;
    font-family: Zirkel-ExtraLight;
}
.fraction .numerator {
    border-bottom: #000 1px solid;
    line-height: 33px;
}

.customers .col-md-8 {
    padding-top: 7%;
}

.customers strong {
    display: block;
}


/* #Site Sections - Certified
================================================== */

.certified img {margin-bottom:20px;}

.certified table {width:100%;margin:0;}

.certified table thead tr {border-bottom: 2px solid #3cc9f3;}

.certified table tbody tr {border-bottom: 1px solid #3cc9f3;}

.certified table td {font-size:16px;padding:5px 0 15px;}

.certified table td:nth-of-type(1) {width:60%;}

.certified table td:nth-of-type(2) {width:15%;}

.certified table td:nth-of-type(3) {width:25%;text-align:right;}


.certified table.col-2 td:nth-of-type(1) {width:40%;}

.certified table.col-2 td:nth-of-type(2) {width:60%;text-align:right;}

section.white .certified table a.btn {margin:50px 0 0;}

.container.certifications img {
    max-height: 125px;
}
.container.awards img {
    max-height: 150px;
}
.certified table td:nth-of-type(1) {
    width: 50%;
}
.certified table td:nth-of-type(2),  .certified table td:nth-of-type(2) {
    width: 25%;
    text-align:right;
}
.certified table th:nth-of-type(2), .certified table th:nth-of-type(3) {text-align:right;font-size:18px;}
.certified table td {padding: 10px 0 10px;}
#menu4 .certified table td:nth-of-type(1) {
    width: 75%;
}
.nav-tabs > li > a {font-size:18px;}

@media only screen and (max-width: 420px) {
    .certified table th:nth-of-type(2), .certified table th:nth-of-type(3) {font-size:16px;}
}

/* #Site Sections - Partner
================================================== */

.partner .box {padding:10px;min-height:150px;text-align:center;}
.partner .box:hover {background-color: #852cca;}

.partner .box h3 a:hover {color:#ffffff;text-decoration:none;}

.pageHolder .breadcrumb {
    padding: 0 15px 10px 0;
    margin: 0;
    list-style: none;
    background-color: #ffffff;
}

.partner .container.why ul.grid {padding:0;margin:0;}

.partner #accordion p {color:initial;}

.partner #accordion .panel-title {font-size: 26px;}

.partner .text-center {padding-top:30px;}

.partner .trialtable p {text-align:left;}

/*
	TRIAL TABLE
*/
.trialtable{
    margin:0 auto;
}
.trialtable tr td{
	padding:10px 10px 10px 10px;
    text-align:center;
}
.trialtable tr td img{
	max-width:35px;
    margin:0 auto;
    vertical-align:middle;
}
.grayhead{
    background:#f4f4f4;
    padding:20px 20px 20px 20px;
}
.bluehead{
    background:#00c0ff;
    color:white !important;
    text-align:center !important;
    padding:20px 20px 20px 20px !important;
    min-width:200px !important;
}
.graytd{
    background:#f4f4f4;
    text-align:left !important;
    padding:10px 10px 10px 30px !important;
}

.dots li {float:left;}

/* Compare Table */

.table-striped th {
    background-color: #24221f;
    color: #ffffff;
}

/* Tab Content */

.tab-content > .tab-pane {
    background-color:#ffffff;
    padding:30px 30px 20px;
    border: 1px solid #ddd;
    border-top:0;
}

.demo .tab-content > .tab-pane {
    border:0;
    padding:0;
}

/* #Pages - Demo 
================================================== */

.nav-pills>li.active>a, 
.nav-pills>li.active>a:focus, 
.nav-pills>li.active>a:hover {
    background-color: #007dda;color:#ffffff;
}
            
.nav-pills>li>a {
    background-color: #3cc9f3;color:#ffffff;
}
            
.nav-pills>li>a:focus, 
.nav-pills>li>a:hover {
    background-color: #007dda;color:#ffffff;
}
            
.nav-pills.nav-stacked>li.active>a, 
.nav-pills.nav-stacked>li.active>a:focus, 
.nav-pills.nav-stacked>li.active>a:hover {
    background-color: #3cc9f3;color:#ffffff;
}
            
.nav-pills.nav-stacked>li>a {
    background-color: #878389;
}
            
.nav-pills.nav-stacked>li>a:focus, 
.nav-pills.nav-stacked>li>a:hover {
    background-color: #3cc9f3;color:#ffffff;
}
            
.nav-pills.nav-justified>li {
    padding-right:10px;
}
            
.nav-pills.nav-justified>li:last-of-type {
    padding-right:0px;
}
            
.demo-col-left, 
.demo-col-right {
    float:left;
    padding:0;
    margin:0;
}
            
.demo-col-left {
    width:25%;
}
            
.demo-col-right {
    width:75%;
    padding-left:30px;
}

/* #Pages - Home
================================================== */

.white.mobCenter {
    border-bottom: solid 8px #eee;
}

#home-new section.white .hovers strong {
    font-weight: 700;
}

#home-new section.white .hovers h1 {
    font-weight: 500;
}

#home-new section.white .hovers h3 {
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 10px;
}

#home-new #ProductLines .col-7:hover {
    background-color: #852caa;
}
#home-new .lBG,
#home-new .dynamic,
#home-new .hovers {
    border-top: solid 8px #eee;
    border-left: solid 8px #eee;
    border-right: solid 8px #eee;
}
#home-new .rBG {
    border-top: solid 8px #eee;
    border-right: solid 8px #eee;
}
#home-new .dynamic {
    border-bottom: solid 8px #eee;
}
#home-new .blurbs .lBG {
    border-top: solid 8px #232222;
    border-left: solid 8px #232222;
    border-right: solid 8px #232222;
}
#home-new .blurbs .rBG {
    border-top: solid 8px #232222;
    border-right: solid 8px #232222;
}
#home-new .hovers {
    font-size: 20px;
    box-shadow: 0px -8px 0 #232222;
}
#home-new .outline {
    border-right: solid 8px #eee;
}
#home-new .hovers .row {
    margin-bottom: 0;
}
#home-new .lBG,
#home-new .rBG,
#home-new .dynamic,
#home-new .hovers {
    float: left;
}
#home-new .blurbs a {
    color: #ffffff;
    font-size: 20px;
}
#home-new .dynamic.col-xs-12,
#home-new .hovers.col-xs-12,
#home-new .blurbs.col-xs-12 {
    padding: 0;
}
#home-new .lBG {
    background: url("/images/vision1.jpg") no-repeat;
}
#home-new .rBG {
    background: url("/images/mission1.jpg") no-repeat;
}
#home-new .lBG,
#home-new .rBG {
    background-size: cover;
    padding: 40px;
    padding-bottom: 160px;
    margin-bottom: -120px;
}
#home-new .lBG p,
#home-new .rBG p,
#home-new .lBG h3,
#home-new .rBG h3 {
    color: #fff;
}
#home-new .lBG p,
#home-new .rBG p,
#home-new .announcement p,
#home-new .container p {
    font-size: 20px;
}
#home-new .container p a {
    font-size: 20px;
    color: #232222;
}
#home-new .lBG h3,
#home-new .rBG h3 {
    font-size: 60px;
}
#home-new .bline {
    border-bottom: solid 8px #eee;
}
#home-new .hovers .row .col-xs-12 {
    text-align: center;
    padding: 50px 0;
}
#home-new .hovers .col1,
#home .hovers .col2 {
    padding-bottom: 9000px;
    margin-bottom: -9000px;
}
#home-new .hovers {
    overflow: hidden;
}
#home-new .hovers .col1 {
    border-right: solid 8px #eee;
    padding-top: 10px;
}
#home-new .hovers .col1 > div {
    padding-bottom: 100px;
    float: left;
    width: 100%
}
#home-new .hovers .col1 h2 {
    margin-top: 0;
}
#home-new .hovers .col1 .cc-heads h2 {
    margin: 0 0 30px 0;
}
#home-new .hovers .col1 img {
    max-width: 100%;
}

#home-new .resource {
    padding: 40px 45px;
    margin-bottom: -800px;
    padding-bottom: 840px;
}

#home-new .resource h3 {
    margin-top: 5px;
}

#home-new .icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

#home-new .line1 {
    color: #bbb;
    font-family: Zirkel-Medium, verdana, sans-serif, Arial;
    text-transform: uppercase;
    display: block;
    font-size: 16px;
    display: block;
    margin-top: 25px;
}
#home-new .blurbs {
    overflow: hidden;
}
#home-new .pageHolder section {
    padding: 0;
}
#home-new a.btn {
    min-height: 40px;
    padding: 9px 25px;
    min-width: 175px;
}
#home-new a.btn.right {
    float: right;
}
#home-new a.btn:hover {
    background: #852caa;
    color: #fff;
}
#home-new .pageHolder section {
    float: left;
    width: 100%;
    overflow: hidden;
}
#home-new .hovers .hover {
    padding-top: 70px !important;
    display: block !important;
    transition: opacity linear 0.2s;
    opacity: 1 !important;
    text-align: left;
}
#home-new .hovers a.btn {
    color: #fff;
}
#home-new .pbj {
    padding-bottom: 9999px !important;
    margin-bottom: -9999px;
}
#home-new .hovers .h1,
#home-new .h3 {
    font-family: Zirkel-ExtraLight;
    font-size: 45px;
}
#home-new .white.mobCenter {
    border-bottom: solid 8px #eee;
}
#home-new .blue-sec {
    background: #007dda;
    padding: 100px 0 !important;
    color: #fff;
    text-align: center;
}
#home-new .blue-sec h2 {
    font-family: "Zirkel-Bold" !important;
    font-size: 38px;
}
#home-new .blue-sec p {
    color: #fff;
}
#home-new .blue-sec img {
    width: initial;
    max-width: initial;
}
#home-new .grey,
#home-new .customers {
    padding: 100px 0 !important;
}
#home-new #ProductLines {
    text-align: center;
}
#home-new #ProductLines .col-7,
#home-new #ProductLines .col-7.col-sm-3 {
    width: 173px;
    min-width: 173px;
}
#home-new #ProductLines .col-sm-3 {
    float: none;
    display: inline-table;
}
.home-new footer {
    margin-top: 0;
}
.home-new nav.top ul {
    margin-top: 0 !important;
}
.home-new .submenubg a,
.home-new .submenubg a:visited {
    color: #232222;
}
.home-new section.topmenu {
    max-width: 1200px
}

/* #Pages - Home ctd, Blog
================================================== */

.contentright .cf_sign_on {
    width: 230px;
}
.newRL {
    margin-top: 75px !important;
}
.newRL .left {
    float: left;
    width: 275px;
}
.newRL .left form {
    float: none;
    margin: 0;
    width: 100%;
}
.newRL .left form input {
    width: 100%;
}
.newRL .left .container {
    width: 100%;
}
.newRL .left .PLine,
.newRL.blog .left .RType {
    margin-bottom: 25px;
}
.newRL .left span,
.newRL .left a {
    text-transform: uppercase;
    display: block;
    padding: 5px 10px;
    font-family: Zirkel-SemiBold, verdana, sans-serif, Arial;
}
.newRL .left .inliner span,
.newRL .left .inliner a {
    text-transform: uppercase;
    display: inline-block;
    padding: 5px 10px;
    font-family: Zirkel-SemiBold, verdana, sans-serif, Arial;
}
.newRL .left span {
    background: #000;
    color: #fff;
}
.newRL .left span:before {
    transition: all 0.5s ease;
    position: absolute;
    background: url("/images/polygon.png") 97% 50% no-repeat;
    background-size: 15px;
    width: 255px;
    height: 26px;
    z-index: 1000;
}
.newRL .left span.close:before {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}
.newRL.blog .left span.close:before {
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.newRL.blog .left span,
.newRL.blog .left a {
    text-transform: none;
    font-family: Zirkel-Regular, verdana, sans-serif, Arial;
}
.newRL.blog .left span.head,
.newRL.blog .left a.head {
    text-transform: uppercase;
    font-family: Zirkel-SemiBold, verdana, sans-serif, Arial;
}
.newRL .left a {
    background: #f4f4f4;
    outline: 1px solid #fff;
    color: #aaa;
    transition: none;
}
.newRL .left a.selected {
    background: url("/images/tick.png") 97% 50% no-repeat #f4f4f4;
    color: #000;
    background-size: 20px;
}
.newRL .left a:hover {
    background: #16c0eb;
    cursor: pointer;
    color: #fff;
}
.newRL .right {
    float: left;
    margin-left: 40px;
    width: 885px;
}
.newRL .right .itemInfo {
    width: 785px;
    float: left;
}
.newRL .icon {
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 20px;
}
.newRL .icon1,
#home-new .icon1 {
    background: url("/images/icon-blog.png") no-repeat;
    background-size: contain;
}
.newRL .icon2,
#home-new .icon2 {
    background: url("/images/icon-case-study.png") no-repeat;
    background-size: contain;
}
.newRL .icon3,
#home-new .icon3 {
    background: url("/images/icon-event.png") no-repeat;
    background-size: contain;
}
.newRL .icon4,
#home-new .icon4 {
    background: url("/images/icon-news.png") no-repeat;
    background-size: contain;
}
.newRL .icon5,
#home-new .icon5 {
    background: url("/images/icon-video.png") no-repeat;
    background-size: contain;
}
.newRL .icon6,
#home-new .icon6 {
    background: url("/images/icon-webinar.png") no-repeat;
    background-size: contain;
}
.newRL .icon7,
#home-new .icon7 {
    background: url("/images/icon-white-paper.png") no-repeat;
    background-size: contain;
}
.newRL .icon8,
#home-new .icon8 {
    background: url("/images/icon-eBook.png") no-repeat;
    background-size: contain;
}
.newRL .icon9,
#home-new .icon9 {
    background: url("/images/icon-product-brochure.png") no-repeat;
    background-size: contain;
}
.newRL .icon10,
#home-new .icon10 {
    background: url("/images/icon-survey.png") no-repeat;
    background-size: contain;
}
#home-new .dynamic {
    overflow: hidden;
}
#home-new .icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}
#home-new .resource {
    padding: 40px 45px;
    margin-bottom: -800px;
    padding-bottom: 840px;
}
#home-new .resource:nth-child(2) {
    outline: 8px solid #eee;
}
#home-new #board_3 {
    z-index: 30;
    opacity: 0.3;
}
#home-new #board_3 .contentfp {
    left: -174px;
    bottom: -110px;
}
#home-new .board {
    overflow: visible;
}
.newRL .right .itemInfo .line1 {
    color: #bbb;
    font-family: Zirkel-Medium, verdana, sans-serif, Arial;
    text-transform: uppercase;
    display: block;
    font-size: 16px;
}
.newRL .right .itemInfo .line2 {
    text-decoration: none;
    display: block;
}
.newRL .right .itemInfo .line2 span {
    font-size: 26px;
    color: #232222;
    font-family: Zirkel-SemiBold, verdana, sans-serif, Arial;
    display: block;
}
.newRL .right .itemInfo .line2 span:hover {
    color: #16c0eb;
}
.newRL .right .itemInfo .more {
    text-decoration: none;
    font-family: Zirkel-Bold, verdana, sans-serif, Arial;
    color: #16c0eb;
}
.newRL .right .itemContent {
    padding-bottom: 20px;
}
.newRL .right .resource {
    float: left;
    width: 100%;
}
.newRL .right .resource .item {
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
    float: left;
    width: 100%;
}
.newRL .inputSearch {
    width: 240px;
    background: #f4f4f4 url("/images/search.png") 5% 50% no-repeat;
    background-size: 16px;
    border: none;
    height: 36px;
    margin-bottom: 30px;
    padding-left: 35px;
    font-size: 18px;
}
.newRL .caret {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    display: inline-block;
}
.newRL .right select {
    float: right;
    height: 36px;
    background: #f4f4f4;
    border: none;
    margin-left: 20px;
    font-size: 18px;
}
.newRL .right .fRight {
    float: right;
    line-height: 36px;
}
.newRL .right .fLeft {
    float: left;
    line-height: 36px;
}
.newRL .right .fLeft h1 {
    font-family: Zirkel-Regular;
    margin: 0;
    font-size: 30px;
    line-height: 38px;
    text-transform: uppercase;
}
.resources2 .contentright2.Papers,
.resources2 .contentright2.eBook {
    display: none;
}
.resources2 .contentleft.Papers,
.resources2 .contentleft.eBook {
    width: 70%;
}
.newRL.blog h1 {
    text-align: center;
    font-size: 48px;
    font-family: Zirkel-ExtraLight, verdana, sans-serif, Arial;
    margin-bottom: 40px;
}
.newRL .resource.list .authPhoto {
    width: 50px;
    border-radius: 50%;
}
.newRL .resource.list .tags,
.blogpost .tag .tags a {
    background: #eee;
    padding: 2px 8px;
    margin-right: 10px;
    margin-bottom: 15px;
    display: inline-block;
    text-decoration: none;
}
.newRL .resource.list .tags:hover,
.newRL .resource.list .authName:hover {
    cursor: pointer;
}
.newRL .resource.list .authName {
    text-transform: uppercase;
    font-size: 16px;
    position: relative;
    bottom: 20px;
    margin-left: 15px;
    color: #999;
    font-family: Zirkel-Bold, verdana, sans-serif, Arial;
}
.newRL .resource.list .itemInfo span {
    display: inline-block;
}
.newRL .resource.list .featured .icon {
    width: 45%;
    height: auto;
    margin-right: 4%;
}
.newRL .resource.list .featured .itemInfo {
    width: 51%;
    height: auto;
}
.newRL .slide-down {
    max-height: 0;
    transition: linear 0.5s max-height;
    overflow: hidden;
}
.newRL .slide-down.open {
    max-height: inherit;
}
.newRL .list .itemInfo .sub,
.newRL .list .itemInfo .sub span {
    text-transform: uppercase;
    font-size: 16px;
    color: #bbb;
    font-family: Zirkel-Bold, verdana, sans-serif, Arial;
}
.newRL .list .itemInfo .sub .line1 {
    text-transform: none;
    font-family: Zirkel-Regular, verdana, sans-serif, Arial;
    margin-left: 10px;
}
.newRL .right .resource .item.featured {
    border-bottom: none;
    border: solid 1px #ddd;
    padding: 45px;
    width: auto;
}
.newRL .list .itemInfo .tags {
    font-size: 12px;
}
.newRL .list .itemInfo .itemContent {
    font-size: 16px;
}
.maincontent.overflow {
    overflow: hidden;
}
.blogComments .blog,
.blogComments .comment-form {
    float: left;
    width: 100%;
}
.blogComments .name {
    font-weight: bold;
    color: #333;
}
.blogComments .header {
    font-family: Zirkel-Regular, verdana, sans-serif, Arial !important;
}
.blogComments .content {
    margin-top: 5px;
}
.blogComments .rating {
    display: none;
}
.blogComments .captchaimg {
    margin-bottom: 0;
}
.contentleft.Blog {
    width: 100%;
}
.contentleft.Blog h1 {
    display: block !important;
}
.blogComments .comment-container {
    margin-bottom: 15px;
}
.blogComments .comment-container .content {
    float: none;
}
.contentright2 .casestudiefullinner {
    position: relative;
    float: left;
    width: auto;
    margin: 0!important;
    padding: 0;
}
.contentright2 img {
    display: block;
    margin: 0 auto;
}
.contentright2 {
    float: right;
    width: 25%;
}
.contentright2 .fullright,
.contentright2 .fullright .casestudiefull {
    width: 100%;
}
.blogpost .author-mod .header {
    background: #000;
    text-align: center;
    color: #fff;
    padding: 5px;
    font-family: Zirkel-Bold, verdana, sans-serif, Arial !important;
}
.blogpost .author-mod .body {
    background: #eee;
    padding: 30px;
}
.blogpost .author-mod .body .photo img {
    width: 80px;
    border-radius: 50%;
}
.blogpost .author-mod .content {
    float: none;
    margin-top: 0;
}
.blogpost .author-mod .btn {
    margin-top: 20px;
    padding: 15px;
    background: #16c0eb;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    font-family: Zirkel-Bold, verdana, sans-serif, Arial;
}
.blogpost .author-mod .details {
    display: inline-block;
    position: relative;
    bottom: 30px;
    left: 20px;
    font-size: 18px;
    text-transform: uppercase;
}
.blogpost .author-mod .photo {
    display: inline-block;
}
.blogpost .autho_head .body {
    background: transparent !important;
    padding: 0 !important;
}
.blogpost .autho_head .header,
.blogpost .autho_head .details,
.blogpost .autho_head .content {
    display: none;
}
.blogpost .autho_head .photo img {
    border-radius: 50%;
    width: 50px;
}
.blogpost .autho_head .authPhoto {
    display: inline-block;
}
.blogpost .autho_head .authDetails {
    display: inline-block;
    position: relative;
    bottom: 40px;
    margin-left: 15px;
    color: #bbb;
}
.blogpost .autho_head .authDetails strong {
    text-transform: uppercase;
}
.blogpost .autho_head .authDetails #date {
    margin-left: 10px;
}
.blogpost .social-media-list li {
    float: left;
}
.blogpost .autho_head .authDetails .photo {
    display: none;
}
.blogpost .autho_head .authDetails .details {
    display: block;
    position: static;
}
.blogpost .autho_head .authDetails .author-mod {
    display: inline-block;
}
.blogpost .autho_head .authDetails .author-mod strong {
    color: #bbb;
}
.blogpost.new {
    width: 65%;
    margin: 0 auto;
}
.blogpost.new .controls {
    padding-top: 15px;
}
.blogpost.new .controls a {
    color: #16c0eb;
    font-weight: bold;
    text-decoration: none;
}
.blogpost.new .controls .next {
    float: right;
    max-width: 45%;
}
.blogpost.new .controls .prev {
    float: left;
    max-width: 45%;
}
.blogpost.new .controls span {
    position: relative;
    bottom: 2px;
}
.newRL.blog .left span:before {
    transition: all 0.5s ease;
    position: absolute;
    content: "";
    background: url("/images/polygon.png") 97% 50% no-repeat;
    background-size: 15px;
    width: 16px;
    height: 22px;
    z-index: 1000;
    left: 246px
}
.newRL.blog .left .mobNav span:before {
    background: none;
}
.blog-head {
    background: url('/images/header-2.jpg') no-repeat;
    background-size: cover;
    min-height: 100%;
    height: 100%;
}
.blog-head h1 {
    color: #fff;
    text-align: center;
    padding-top: 60px;
}
.blog-head .right {
    width: 260px;
    margin: 30px auto 60px;
}
.blog-head .right .downloadblue {
    font-family: Zirkel-bold;
    font-size: 18px;
    background: #24221f;
    padding: 10px 30px;
}
.blog.contentinner {
    margin-top: 30px !important;
}
.blog-head .contentinner {
    height: 297px;
}
.blog-grey {
    background: #3cc9f3;
}
.blog-grey a {
    color: #ffffff;
    font-size: 20px;
    padding: 0 20px;
    line-height: 60px;
    display: inline-block;
    font-family: Zirkel-Regular;
}
.blog-grey a:hover {
    cursor: pointer;
}
.blog-grey a.selected {
    background: #ffffff;
    color: #232323;
    font-family: Zirkel-Bold;
}
.blogpost-right {
    width: 30%;
    float: right;
}
.blogpost-right h4 {
    font-size: 15px;
    font-family: Zirkel-Bold, verdana, sans-serif, Arial;
    margin-bottom: 0;
}
.blogpost-right .authPhoto {
    border-radius: 50%;
    width: 50px;
}
.blogpost-right .thumb {
    width: 20%;
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
}
.blogpost-right .thumb img {
    width: 100%;
}
.blogpost-right .itemWrap {
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
}
.blogpost-right .itemInfo {
    display: inline-block;
    width: 75%
}
.blogpost-right .itemInfo.full {
    width: 100%;
}
.blogpost-right .itemInfo .sub,
.blogpost-right .itemInfo .sub span {
    font-size: 10px !important;
    color: #bbb;
    font-family: Zirkel-Bold, verdana, sans-serif, Arial;
    text-transform: uppercase;
}
.blogpost-right .itemInfo .sub .line1 {
    font-family: Zirkel-Regular, verdana, sans-serif, Arial;
    text-transform: normal;
}
.blogpost-right .itemInfo .line2,
.blogpost-right .itemInfo .line2 span {
    text-decoration: none;
    font-family: Zirkel-Bold, verdana, sans-serif, Arial;
    font-size: 15px;
    color: #232222;
}
.blogpost-right .itemInfo .itemContent {
    font-size: 15px;
    color: #232222;
}
.blogpost-right .itemInfo .tags div {
    background: #eee;
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 15px;
    display: inline-block;
    text-decoration: none;
}
.blogpost-right .tags {
    display: inline-block;
}
.blogpost .blog-banner img {
    max-width: 100%;
    display: block;
    margin: 25px auto 15px;
}
.blogpost-right img {
    max-width: 40%;
}
.blogpost-right .contain {
    margin-top: 25px;
}
.blogpost-right a {
    text-decoration: none;
}
.content.new-blog {
    margin-top: 75px;
}
.blog-grey a {
    text-decoration: none;
}
.new-blog .blog-grey {
    margin-bottom: 50px;
}
.blog-grey .mob-menu {
    display: none;
    background: url("../images/caret.png") 95% 50% no-repeat;
    height: 60px;
}
.contentleft #crumbs {
    margin: 20px 0;
}
.contentright2 .fullright .downloadblue {
    float: left;
    display: inline;
    margin: 0px 30px 30px 30px;
}
.blog .item.featured {
    background: url(/img/blog/featured-blog-sml.png) bottom right no-repeat;
}


/* #Site Sections - Teeth  */

.container.teeth img, .container img.hero {margin-top:50px;max-width:70%;}


/* #Site Sections - Responsive
================================================== */

@media only screen and (max-width: 1130px) {
    
    #home-new .announcement .container, #home-new .header .container {
        width: auto;}
    
}

@media only screen and (max-width: 1024px) {
	section .container, .pageHolder header .container {width: initial;}
    section.desktopmenu .container {padding:0 15px;}
    .container.journey .col-md-6 {width:100%;}
    .container.journey div:nth-of-type(2), .container.journey div:nth-of-type(3), .container.journey div:nth-of-type(4) {margin-bottom:50px;}
    #cat_1682915_divs {right: 15px;}
}

@media only screen and (max-width: 960px) {
    .container.resources {width: auto;} 
}
    
@media only screen and (max-width: 768px) {
    .col-sm-0 {display:none;}
    .container img.hero {margin-bottom:30px;}
    .container.why ul.grid > li {width:49%;}
    .container.why ul.grid > li:nth-of-type(odd){background-color: #3cc9f3;margin-right:2%;}
    .container.why ul.grid > li:nth-of-type(even){background-color: #852cca;margin-right:0;}

}

@media only screen and (max-width: 414px) {
    .container.why ul.grid > li {width:100%;}
    .container.why ul.grid > li:nth-of-type(odd){background-color: #3cc9f3;margin-right:0;}
    .container.why ul.grid > li:nth-of-type(even){background-color: #852cca;margin-right:0;}
    
    .tab-content table .bluehead {padding:10px!important;}
}

/* #Site Sections - Annimation
================================================== */

#ani-wrap {
    width: 660px;
    height: 345px;
    background: #232222;
    position: relative;
    margin-left: 50%;
}
#ani-wrap .circle {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    position: absolute;
    z-index: 2;
    transition: transform .2s ease;
}
#ani-wrap .circle-outline {
    width: 42px;
    height: 42px;
    border-radius: 36px;
    position: absolute;
    z-index: 3;
    transition: transform .2s ease;
}
#ani-wrap .blue {
    background-color: #16c0eb;
}
#ani-wrap .red {
    background-color: #ee2750;
}
#ani-wrap .red.circle-outline {
    background-color: transparent;
}
#ani-wrap .line {
    height: 2px;
    background: #fff;
    width: 2px;
    position: absolute;
}
.animate #c1 {
    -webkit-animation: c1;
    animation: c1;
    transform: translate3d(352px, 150px, 0px);
}
.animate #c2 {
    -webkit-animation: c2;
    animation: c2;
    transform: translate3d(290px, 75px, 0px);
}
.animate #c3 {
    -webkit-animation: c3;
    animation: c3;
    transform: translate3d(168px, 70px, 0px);
}
.animate #c4 {
    -webkit-animation: c4;
    animation: c4;
    transform: translate3d(90px, 35px, 0px);
}
.animate #c5 {
    -webkit-animation: c5;
    animation: c5;
    transform: translate3d(300px, 275px, 0px);
}
.animate #c6 {
    -webkit-animation: c6;
    animation: c6;
    transform: translate3d(492px, 290px, 0px);
}
.animate #c7 {
    -webkit-animation: c7;
    animation: c7;
    transform: translate3d(573px, 192px, 0px);
}
.animate #c8 {
    -webkit-animation: c8;
    animation: c8;
    transform: translate3d(580px, 86px, 0px);
}
.animate #c9 {
    -webkit-animation: c9;
    animation: c9;
    transform: translate3d(468px, 54px, 0px);
}
.animate #c10 {
    -webkit-animation: c10;
    animation: c10;
    transform: translate3d(463px, 143px, 0px);
}
.animate #c11 {
    -webkit-animation: c11;
    animation: c11;
    transform: translate3d(418px, 200px, 0px);
}
.animate #c12 {
    -webkit-animation: c12;
    animation: c12;
    transform: translate3d(412px, 194px, 0px);
}
.animate #l1 {
    -webkit-animation: l1;
    animation: l1;
    transform: translate3d(301px, 126px, 0px) rotateZ(49deg);
    width: 74px !important;
}
.animate #l2 {
    -webkit-animation: l2;
    animation: l2;
    transform: translate3d(190px, 87px, 0px) rotateZ(182deg);
    width: 100px !important;
}
.animate #l3 {
    -webkit-animation: l3;
    animation: l3;
    transform: translate3d(100px, 65px, 0px) rotateZ(26deg);
    width: 75px !important;
}
.animate #l4 {
    -webkit-animation: l4;
    animation: l4;
    transform: translate3d(365px, 190px, 0px) rotateZ(40deg);
    width: 74px !important;
}
.animate #l5 {
    -webkit-animation: l5;
    animation: l5;
    transform: translate3d(306px, 255px, 0px) rotateZ(146deg);
    width: 130px !important;
}
.animate #l6 {
    -webkit-animation: l6;
    animation: l6;
    transform: translate3d(406px, 261px, 0px) rotateZ(51deg);
    width: 130px !important;
}
.animate #l7 {
    -webkit-animation: l7;
    animation: l7;
    transform: translate3d(370px, 162px, 0px) rotateZ(177deg);
    width: 100px !important;
}
.animate #l8 {
    -webkit-animation: l8;
    animation: l8;
    transform: translate3d(440px, 102px, 0px) rotateZ(93deg);
    width: 85px !important;
}
.animate #l9 {
    -webkit-animation: l9;
    animation: l9;
    transform: translate3d(480px, 131px, 0px) rotateZ(153deg);
    width: 110px !important;
}
.animate #l10 {
    -webkit-animation: l10;
    animation: l10;
    transform: translate3d(473px, 182px, 0px) rotateZ(22deg);
    width: 110px !important;
}
.animate #c1,
.animate #c2,
.animate #c3,
.animate #c4,
.animate #c5,
.animate #c6,
.animate #c7,
.animate #c8,
.animate #c9,
.animate #c10,
.animate #c11,
.animate #c12,
.animate #l1,
.animate #l2,
.animate #l3,
.animate #l4,
.animate #l5,
.animate #l6,
.animate #l7,
.animate #l8,
.animate #l9,
.animate #l10 {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}
@keyframes c1 {
    0% {
        transform: translate3d(352px, 150px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(352px, 150px, 0px);
        opacity: 1;
    }
}
@keyframes c2 {
    0% {
        transform: translate3d(352px, 150px, 0px);
        opacity: 1;
    }
    3% {
        transform: translate3d(290px, 75px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(290px, 75px, 0px);
        opacity: 1;
    }
}
@keyframes c3 {
    0% {
        transform: translate3d(330px, 115px, 0px);
        opacity: 0;
    }
    2% {
        opacity: 0;
    }
    3% {
        transform: translate3d(290px, 75px, 0px);
        opacity: 1
    }
    6% {
        transform: translate3d(168px, 70px, 0px);
        opacity: 1
    }
    100% {
        transform: translate3d(168px, 70px, 0px);
        opacity: 1;
    }
}
@keyframes c4 {
    0% {
        transform: translate3d(168px, 70px, 0px);
        opacity: 0;
    }
    5% {
        transform: translate3d(168px, 70px, 0px);
        opacity: 0;
    }
    6% {
        transform: translate3d(168px, 70px, 0px);
        opacity: 1;
    }
    9% {
        transform: translate3d(90px, 35px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(90px, 35px, 0px);
        opacity: 1;
    }
}
@keyframes c5 {
    0% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 0;
    }
    3% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 0;
    }
    4% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 1;
    }
    7% {
        transform: translate3d(300px, 275px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(300px, 275px, 0px);
        opacity: 1;
    }
}
@keyframes c6 {
    0% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 0;
    }
    3% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 0;
    }
    4% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 1;
    }
    9% {
        transform: translate3d(492px, 290px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(492px, 290px, 0px);
        opacity: 1;
    }
}
@keyframes c7 {
    0% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 0;
    }
    7% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 0;
    }
    8% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 1;
    }
    11% {
        transform: translate3d(573px, 192px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(573px, 192px, 0px);
        opacity: 1;
    }
}
@keyframes c8 {
    0% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 0;
    }
    7% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 0;
    }
    8% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 1;
    }
    12% {
        transform: translate3d(580px, 86px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(580px, 86px, 0px);
        opacity: 1;
    }
}
@keyframes c9 {
    0% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 0;
    }
    7% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 0;
    }
    8% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 1;
    }
    11% {
        transform: translate3d(468px, 54px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(468px, 54px, 0px);
        opacity: 1;
    }
}
@keyframes c10 {
    0% {
        transform: translate3d(352px, 150px, 0px);
        opacity: 0;
    }
    3% {
        transform: translate3d(352px, 150px, 0px);
        opacity: 1;
    }
    4% {
        transform: translate3d(352px, 150px, 0px);
        opacity: 1;
    }
    8% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 1;
    }
}
@keyframes c11 {
    0% {
        transform: translate3d(352px, 150px, 0px);
        opacity: 1;
        background-color: #16c0eb;
    }
    4% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 1;
        background-color: #16c0eb;
    }
    11% {
        background-color: #16c0eb;
    }
    12% {
        background-color: #ee2750;
    }
    100% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 1;
    }
}
@keyframes c12 {
    0% {
        transform: translate3d(412px, 194px, 0px);
        opacity: 0;
    }
    11% {
        transform: translate3d(412px, 194px, 0px);
        opacity: 0;
    }
    12% {
        transform: translate3d(412px, 194px, 0px);
        opacity: 1;
    }
    16% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
    }
    17% {
        width: 48px;
        height: 48px;
        border-radius: 35px;
        transform: translate3d(409px, 191px, 0px);
    }
    22% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
    }
    27% {
        width: 48px;
        height: 48px;
        border-radius: 35px;
        transform: translate3d(409px, 191px, 0px);
    }
    32% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
    }
    37% {
        width: 48px;
        height: 48px;
        border-radius: 35px;
        transform: translate3d(409px, 191px, 0px);
    }
    42% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
    }
    47% {
        width: 48px;
        height: 48px;
        border-radius: 35px;
        transform: translate3d(409px, 191px, 0px);
    }
    52% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
    }
    57% {
        width: 48px;
        height: 48px;
        border-radius: 35px;
        transform: translate3d(409px, 191px, 0px);
    }
    62% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
    }
    67% {
        width: 48px;
        height: 48px;
        border-radius: 35px;
        transform: translate3d(409px, 191px, 0px);
    }
    72% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
    }
    77% {
        width: 48px;
        height: 48px;
        border-radius: 35px;
        transform: translate3d(409px, 191px, 0px);
    }
    82% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
    }
    87% {
        width: 48px;
        height: 48px;
        border-radius: 35px;
        transform: translate3d(409px, 191px, 0px);
    }
    92% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
    }
    100% {
        transform: translate3d(412px, 194px, 0px);
        opacity: 1;
    }
}
@keyframes l1 {
    0% {
        transform: translate3d(368px, 150px, 0px) rotateZ(49deg);
        width: 0px;
        opacity: 1;
    }
    3% {
        transform: translate3d(301px, 126px, 0px) rotateZ(49deg);
        width: 74px;
        opacity: 1;
    }
    100% {
        transform: translate3d(301px, 126px, 0px) rotateZ(49deg);
        width: 74px;
        opacity: 1;
    }
}
@keyframes l2 {
    0% {
        transform: translate3d(300px, 100px, 0px) rotateZ(182deg);
        width: 0px;
        opacity: 1;
    }
    3% {
        transform: translate3d(300px, 75px, 0px) rotateZ(182deg);
        width: 0px;
        opacity: 1;
    }
    6% {
        transform: translate3d(195px, 87px, 0px) rotateZ(182deg);
        width: 100px;
        opacity: 1;
    }
    100% {
        transform: translate3d(190px, 87px, 0px) rotateZ(182deg);
        width: 100px;
        opacity: 1;
    }
}
@keyframes l3 {
    0% {
        transform: translate3d(190px, 87px, 0px) rotateZ(26deg);
        width: 0px;
        opacity: 1;
    }
    5% {
        transform: translate3d(190px, 87px, 0px) rotateZ(26deg);
        width: 0px;
        opacity: 1;
    }
    6% {
        transform: translate3d(190px, 87px, 0px) rotateZ(26deg);
        width: 0px;
        opacity: 1;
    }
    9% {
        transform: translate3d(100px, 65px, 0px) rotateZ(26deg);
        width: 75px;
        opacity: 1;
    }
    100% {
        transform: translate3d(100px, 65px, 0px) rotateZ(26deg);
        width: 75px;
        opacity: 1;
    }
}
@keyframes l4 {
    0% {
        transform: translate3d(368px, 150px, 0px) rotateZ(40deg);
        width: 0px;
        opacity: 1;
    }
    3% {
        transform: translate3d(365px, 190px, 0px) rotateZ(40deg);
        width: 74px;
        opacity: 1;
    }
    100% {
        transform: translate3d(365px, 190px, 0px) rotateZ(40deg);
        width: 74px;
        opacity: 1;
    }
}
@keyframes l5 {
    0% {
        transform: translate3d(430px, 210px, 0px) rotateZ(146deg);
        width: 0px;
        opacity: 0;
    }
    3% {
        transform: translate3d(430px, 210px, 0px) rotateZ(146deg);
        width: 0px;
        opacity: 0;
    }
    4% {
        transform: translate3d(430px, 210px, 0px) rotateZ(146deg);
        width: 0px;
        opacity: 1;
    }
    7% {
        transform: translate3d(306px, 255px, 0px) rotateZ(146deg);
        width: 130px;
        opacity: 1;
    }
    100% {
        transform: translate3d(306px, 255px, 0px) rotateZ(146deg);
        width: 130px;
        opacity: 1;
    }
}
@keyframes l6 {
    0% {
        transform: translate3d(430px, 210px, 0px) rotateZ(51deg);
        width: 0px;
        opacity: 0;
    }
    3% {
        transform: translate3d(430px, 210px, 0px) rotateZ(51deg);
        width: 0px;
        opacity: 0;
    }
    4% {
        transform: translate3d(430px, 210px, 0px) rotateZ(51deg);
        width: 0px;
        opacity: 1;
    }
    9% {
        transform: translate3d(406px, 261px, 0px) rotateZ(51deg);
        width: 130px;
        opacity: 1;
    }
    100% {
        transform: translate3d(406px, 261px, 0px) rotateZ(51deg);
        width: 130px;
        opacity: 1;
    }
}
@keyframes l7 {
    0% {
        transform: translate3d(368px, 150px, 0px) rotateZ(177deg);
        width: 0px;
        opacity: 0;
    }
    3% {
        transform: translate3d(368px, 150px, 0px) rotateZ(177deg);
        width: 0px;
        opacity: 0;
    }
    4% {
        transform: translate3d(370px, 162px, 0px) rotateZ(177deg);
        width: 0px;
        opacity: 1;
    }
    8% {
        transform: translate3d(370px, 162px, 0px) rotateZ(177deg);
        width: 100px;
        opacity: 1;
    }
    100% {
        transform: translate3d(370px, 162px, 0px) rotateZ(177deg);
        width: 100px;
        opacity: 1;
    }
}
@keyframes l8 {
    0% {
        transform: translate3d(480px, 152px, 0px) rotateZ(93deg);
        width: 0px;
        opacity: 0;
    }
    7% {
        transform: translate3d(480px, 152px, 0px) rotateZ(93deg);
        width: 0px;
        opacity: 0;
    }
    8% {
        transform: translate3d(480px, 152px, 0px) rotateZ(93deg);
        width: 0px;
        opacity: 1;
    }
    11% {
        transform: translate3d(440px, 102px, 0px) rotateZ(93deg);
        width: 85px;
        opacity: 1;
    }
    100% {
        transform: translate3d(440px, 102px, 0px) rotateZ(93deg);
        width: 85px;
        opacity: 1;
    }
}
@keyframes l9 {
    0% {
        transform: translate3d(480px, 152px, 0px) rotateZ(153deg);
        width: 0px;
        opacity: 0;
    }
    7% {
        transform: translate3d(480px, 152px, 0px) rotateZ(153deg);
        width: 0px;
        opacity: 0;
    }
    8% {
        transform: translate3d(480px, 152px, 0px) rotateZ(153deg);
        width: 0px;
        opacity: 1;
    }
    12% {
        transform: translate3d(480px, 131px, 0px) rotateZ(153deg);
        width: 110px;
        opacity: 1;
    }
    100% {
        transform: translate3d(480px, 131px, 0px) rotateZ(153deg);
        width: 110px;
        opacity: 1;
    }
}
@keyframes l10 {
    0% {
        transform: translate3d(463px, 143px, 0px) rotateZ(22deg);
        width: 0px;
        opacity: 0;
    }
    7% {
        transform: translate3d(463px, 143px, 0px) rotateZ(22deg);
        width: 0px;
        opacity: 0;
    }
    8% {
        transform: translate3d(463px, 143px, 0px) rotateZ(22deg);
        width: 0px;
        opacity: 1;
    }
    11% {
        transform: translate3d(473px, 182px, 0px) rotateZ(22deg);
        width: 110px;
        opacity: 1;
    }
    100% {
        transform: translate3d(473px, 182px, 0px) rotateZ(22deg);
        width: 110px;
        opacity: 1;
    }
}
#halfclip {
    width: 50%;
    height: 100%;
    right: 0px;
    position: absolute;
    overflow: hidden;
    transform-origin: left center;
    animation: cliprotate 2s steps(2) infinite;
    -webkit-animation: cliprotate 2s steps(2) infinite;
}
.halfcircle {
    box-sizing: border-box;
    height: 100%;
    right: 0px;
    position: absolute;
    border: solid 3px transparent;
    border-top-color: #ee2750;
    border-left-color: #ee2750;
    border-radius: 50%;
}
#clipped {
    width: 200%;
    animation: rotate 1s linear infinite;
    -webkit-animation: rotate 1s linear infinite;
}
#fixed {
    width: 100%;
    transform: rotate(135deg);
    animation: showfixed 2s steps(2) infinite;
    -webkit-animation: showfixed 2s linear infinite;
}
@-webkit-keyframes cliprotate {
    12% {
        transform: rotate(0deg);
    }
    16% {
        transform: rotate(360deg);
    }
}
@keyframes cliprotate {
    12% {
        transform: rotate(0deg);
    }
    16% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes rotate {
    12% {
        transform: rotate(-45deg);
    }
    16% {
        transform: rotate(135deg);
    }
}
@keyframes rotate {
    12% {
        transform: rotate(-45deg);
    }
    16% {
        transform: rotate(135deg);
    }
}
@-webkit-keyframes showfixed {
    12% {
        opacity: 0;
    }
    13.9% {
        opacity: 0;
    }
    14% {
        opacity: 1;
    }
    16% {
        opacity: 1;
    }
}
#home-new .announcement .container,
#home-new .header .container {
    width: 1200px;
    max-width: 1200px;
    padding-left: 0;
    padding-right: 0;
}
@media only screen and (max-width: 1130px) {
    #home-new .announcement .container,
    #home-new .header .container {
        width: auto;
        max-width: auto;
    }
    #ani-wrap {
        margin-left: 30%;
    }
}
@media only screen and (max-width: 880px) {
    .bannerbox {
        margin-top: 0px;
    }
}
.bannerimg {
    float: right;
    width: 32%;
}
.bannerimg img {
    width: 100%;
}
@media (max-width: 1100px) {
    nav.topmenunav div > ul > li > a {
        font-size: 12px;
    }
    nav.topmenunav div > ul:first-child > li {
        margin-right: 10px;
    }
    nav.topmenunav div > ul:first-child > li:first-child {
        /*width: 60px !important;*/
    }
}
@media only screen and (max-width: 960px) {
    .Home .mobCenter .mobileShow {
        display: block;
    }
}
@media only screen and (max-width: 1024px) {
    .topsearch #searchbutton {
        background-size: inherit;
    }
}
@media (max-width: 880px) {
    header .container h2 {
        font-size: 36px;
        line-height: 1;
    }
    header .container {
        /*padding: 30px 30px;*/
        
        margin: 0px;
        width: 100%;
        background-size: cover !important;
    }
    .pageHolder.Unified.Communications header .container {
        background: url(http://www.ir.com/images/lanuageVersion/bg_product.jpg) 96% 4% no-repeat;
        background-size: 94px !important;
    }
    .container {
        width: 100%;
        padding: 0 15px;
    }
    h2 {
        font-size: 32px;
    }
    .Home .white .col-md-3 img {
        margin-top: 20px;
    }
    .mobCenter {
        text-align: center;
    }

    .grey .pageHolder section {
        padding: 30px 0px;
    }
    .About.Us header .container,
    .Contact.Us header .container {
        /* background: url(http://www.ir.com/images/lanuageVersion/bg_contactus.jpg) center right no-repeat; */
        
        background-size: cover;
        background: rgba(0, 0, 0, .7);
        min-height: 225px;
        padding-top: 0px;
    }
    .About.Us header,
    .Contact.Us header {
        background: url(http://www.ir.com/images/lanuageVersion/bg_contactus.jpg) center right no-repeat;
        background-size: cover;
        min-height: 225px;
        padding-top: 0px;
    }
    .pageHolder.Partner.Certification header .container {
        background: url(http://www.ir.com/images/lanuageVersion/bg_partner.jpg) bottom center no-repeat;
        background-size: 200px !important;
    }
    .Payments section.white .col-md-4 img,
    .Unified.Communications section.white .col-md-4 img,
    .Contact.Center section.white .col-md-4 img,
    .Service.Providers section.white .col-md-4 img {
        display: block;
        margin: 0 auto;
        width: 33% !important;
        margin-bottom: 18px;
        height: auto !important;
    }
    .customerLogos .col-md-2 div {
        margin-bottom: 15px;
    }
    .font22 {
        font-size: 18px;
    }
    .fraction {
        font-size: 20px;
    }
    section.mobWhite {
        background: #fff;
    }
    .col-7 {
        width: 23%;
        float: none;
    }
    .customers .col-md-7 {
        padding-top: 0;
    }
    #bottomfooter .right {
        text-align: center;
    }
}
@media (max-width: 768px) {
    .tabletclear {
        clear: both;
    }
    .mobileHide {
        display: none;
    }
    .mobileShow {
        display: block;
    }
}

@media (min-width: 885px) {
    .customerLogos .col-md-2 div {
        height: 200px;
    }
}

@media (max-width: 880px) {
    .customerLogos .col-md-2 div {
        height: 100%;
        padding-bottom: 100%;
    }
}

#ani-wrap {
    width: 660px;
    height: 345px;
    background: #232222;
    position: relative;
    margin-left: 50%;
}
#ani-wrap .circle {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    position: absolute;
    z-index: 2;
    transition: transform .2s ease;
}
#ani-wrap .blue {
    background-color: #16c0eb;
}
#ani-wrap .red {
    background-color: #ee2750;
}
#ani-wrap .red.circle-outline {
    background-color: transparent;
}
#ani-wrap .line {
    height: 2px;
    background: #fff;
    width: 2px;
    position: absolute;
}
.animate #c1 {
    -webkit-animation: c1;
    animation: c1;
}
.animate #c2 {
    -webkit-animation: c2;
    animation: c2;
}
.animate #c3 {
    -webkit-animation: c3;
    animation: c3;
}
.animate #c4 {
    -webkit-animation: c4;
    animation: c4;
}
.animate #c5 {
    -webkit-animation: c5;
    animation: c5;
}
.animate #c6 {
    -webkit-animation: c6;
    animation: c6;
}
.animate #c7 {
    -webkit-animation: c7;
    animation: c7;
}
.animate #c8 {
    -webkit-animation: c8;
    animation: c8;
}
.animate #c9 {
    -webkit-animation: c9;
    animation: c9;
}
.animate #c10 {
    -webkit-animation: c10;
    animation: c10;
}
.animate #c11 {
    -webkit-animation: c11;
    animation: c11;
}
.animate #c12 {
    -webkit-animation: c12;
    animation: c12;
}
.animate #l1 {
    -webkit-animation: l1;
    animation: l1;
}
.animate #l2 {
    -webkit-animation: l2;
    animation: l2;
}
.animate #l3 {
    -webkit-animation: l3;
    animation: l3;
}
.animate #l4 {
    -webkit-animation: l4;
    animation: l4;
}
.animate #l5 {
    -webkit-animation: l5;
    animation: l5;
}
.animate #l6 {
    -webkit-animation: l6;
    animation: l6;
}
.animate #l7 {
    -webkit-animation: l7;
    animation: l7;
}
.animate #l8 {
    -webkit-animation: l8;
    animation: l8;
}
.animate #l9 {
    -webkit-animation: l9;
    animation: l9;
}
.animate #l10 {
    -webkit-animation: l10;
    animation: l10;
}
.animate #c1,
.animate #c2,
.animate #c3,
.animate #c4,
.animate #c5,
.animate #c6,
.animate #c7,
.animate #c8,
.animate #c9,
.animate #c10,
.animate #c11,
.animate #c12,
.animate #l1,
.animate #l2,
.animate #l3,
.animate #l4,
.animate #l5,
.animate #l6,
.animate #l7,
.animate #l8,
.animate #l9,
.animate #l10 {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    animation-direction: normal;
    animation-timing-function: linear;
}
.animate #c12,
.fullcir {
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    animation-direction: normal;
    animation-timing-function: linear;
}
@keyframes c1 {
    0% {
        transform: translate3d(352px, 150px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(352px, 150px, 0px);
        opacity: 1;
    }
}
@keyframes c2 {
    0% {
        transform: translate3d(352px, 150px, 0px);
        opacity: 1;
    }
    3% {
        transform: translate3d(290px, 75px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(290px, 75px, 0px);
        opacity: 1;
    }
}
@keyframes c3 {
    0% {
        transform: translate3d(330px, 115px, 0px);
        opacity: 0;
    }
    2% {
        opacity: 0;
    }
    3% {
        transform: translate3d(290px, 75px, 0px);
        opacity: 1
    }
    6% {
        transform: translate3d(168px, 70px, 0px);
        opacity: 1
    }
    100% {
        transform: translate3d(168px, 70px, 0px);
        opacity: 1;
    }
}
@keyframes c4 {
    0% {
        transform: translate3d(168px, 70px, 0px);
        opacity: 0;
    }
    5% {
        transform: translate3d(168px, 70px, 0px);
        opacity: 0;
    }
    6% {
        transform: translate3d(168px, 70px, 0px);
        opacity: 1;
    }
    9% {
        transform: translate3d(90px, 35px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(90px, 35px, 0px);
        opacity: 1;
    }
}
@keyframes c5 {
    0% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 0;
    }
    3% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 0;
    }
    4% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 1;
    }
    7% {
        transform: translate3d(300px, 275px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(300px, 275px, 0px);
        opacity: 1;
    }
}
@keyframes c6 {
    0% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 0;
    }
    3% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 0;
    }
    4% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 1;
    }
    9% {
        transform: translate3d(492px, 290px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(492px, 290px, 0px);
        opacity: 1;
    }
}
@keyframes c7 {
    0% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 0;
    }
    7% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 0;
    }
    8% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 1;
    }
    11% {
        transform: translate3d(573px, 192px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(573px, 192px, 0px);
        opacity: 1;
    }
}
@keyframes c8 {
    0% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 0;
    }
    7% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 0;
    }
    8% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 1;
    }
    12% {
        transform: translate3d(580px, 86px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(580px, 86px, 0px);
        opacity: 1;
    }
}
@keyframes c9 {
    0% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 0;
    }
    7% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 0;
    }
    8% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 1;
    }
    11% {
        transform: translate3d(468px, 54px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(468px, 54px, 0px);
        opacity: 1;
    }
}
@keyframes c10 {
    0% {
        transform: translate3d(352px, 150px, 0px);
        opacity: 0;
    }
    3% {
        transform: translate3d(352px, 150px, 0px);
        opacity: 1;
    }
    4% {
        transform: translate3d(352px, 150px, 0px);
        opacity: 1;
    }
    8% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate3d(463px, 143px, 0px);
        opacity: 1;
    }
}
@keyframes c11 {
    0% {
        transform: translate3d(352px, 150px, 0px);
        opacity: 1;
        background-color: #16c0eb;
    }
    4% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 1;
        background-color: #16c0eb;
    }
    11% {
        background-color: #16c0eb;
    }
    12% {
        background-color: #ee2750;
    }
    100% {
        transform: translate3d(418px, 200px, 0px);
        opacity: 1;
    }
}
@keyframes c12 {
    0% {
        transform: translate3d(412px, 194px, 0px);
        opacity: 0;
    }
    5.5% {
        transform: translate3d(412px, 194px, 0px);
        opacity: 0;
    }
    6% {
        transform: translate3d(412px, 194px, 0px);
        opacity: 1;
    }
    10% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
        border-color: #ee2750;
    }
    12.5% {
        width: 48px;
        height: 48px;
        border-radius: 35px;
        transform: translate3d(409px, 191px, 0px);
    }
    15% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
    }
    17.5% {
        width: 48px;
        height: 48px;
        border-radius: 35px;
        transform: translate3d(409px, 191px, 0px);
    }
    20% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
    }
    22.5% {
        width: 48px;
        height: 48px;
        border-radius: 35px;
        transform: translate3d(409px, 191px, 0px);
    }
    25% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
    }
    27.5% {
        width: 48px;
        height: 48px;
        border-radius: 35px;
        transform: translate3d(409px, 191px, 0px);
    }
    30% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
    }
    100% {
        width: 42px;
        height: 42px;
        border-radius: 35px;
        transform: translate3d(412px, 194px, 0px);
        opacity: 1;
    }
}
@keyframes l1 {
    0% {
        transform: translate3d(368px, 150px, 0px) rotateZ(49deg);
        width: 0px;
        opacity: 1;
    }
    3% {
        transform: translate3d(301px, 126px, 0px) rotateZ(49deg);
        width: 74px;
        opacity: 1;
    }
    100% {
        transform: translate3d(301px, 126px, 0px) rotateZ(49deg);
        width: 74px;
        opacity: 1;
    }
}
@keyframes l2 {
    0% {
        transform: translate3d(300px, 100px, 0px) rotateZ(182deg);
        width: 0px;
        opacity: 1;
    }
    3% {
        transform: translate3d(300px, 75px, 0px) rotateZ(182deg);
        width: 0px;
        opacity: 1;
    }
    6% {
        transform: translate3d(195px, 87px, 0px) rotateZ(182deg);
        width: 100px;
        opacity: 1;
    }
    100% {
        transform: translate3d(190px, 87px, 0px) rotateZ(182deg);
        width: 100px;
        opacity: 1;
    }
}
@keyframes l3 {
    0% {
        transform: translate3d(190px, 87px, 0px) rotateZ(26deg);
        width: 0px;
        opacity: 1;
    }
    5% {
        transform: translate3d(190px, 87px, 0px) rotateZ(26deg);
        width: 0px;
        opacity: 1;
    }
    6% {
        transform: translate3d(190px, 87px, 0px) rotateZ(26deg);
        width: 0px;
        opacity: 1;
    }
    9% {
        transform: translate3d(100px, 65px, 0px) rotateZ(26deg);
        width: 75px;
        opacity: 1;
    }
    100% {
        transform: translate3d(100px, 65px, 0px) rotateZ(26deg);
        width: 75px;
        opacity: 1;
    }
}
@keyframes l4 {
    0% {
        transform: translate3d(368px, 150px, 0px) rotateZ(40deg);
        width: 0px;
        opacity: 1;
    }
    3% {
        transform: translate3d(365px, 190px, 0px) rotateZ(40deg);
        width: 74px;
        opacity: 1;
    }
    100% {
        transform: translate3d(365px, 190px, 0px) rotateZ(40deg);
        width: 74px;
        opacity: 1;
    }
}
@keyframes l5 {
    0% {
        transform: translate3d(430px, 210px, 0px) rotateZ(146deg);
        width: 0px;
        opacity: 0;
    }
    3% {
        transform: translate3d(430px, 210px, 0px) rotateZ(146deg);
        width: 0px;
        opacity: 0;
    }
    4% {
        transform: translate3d(430px, 210px, 0px) rotateZ(146deg);
        width: 0px;
        opacity: 1;
    }
    7% {
        transform: translate3d(306px, 255px, 0px) rotateZ(146deg);
        width: 130px;
        opacity: 1;
    }
    100% {
        transform: translate3d(306px, 255px, 0px) rotateZ(146deg);
        width: 130px;
        opacity: 1;
    }
}
@keyframes l6 {
    0% {
        transform: translate3d(430px, 210px, 0px) rotateZ(51deg);
        width: 0px;
        opacity: 0;
    }
    3% {
        transform: translate3d(430px, 210px, 0px) rotateZ(51deg);
        width: 0px;
        opacity: 0;
    }
    4% {
        transform: translate3d(430px, 210px, 0px) rotateZ(51deg);
        width: 0px;
        opacity: 1;
    }
    9% {
        transform: translate3d(406px, 261px, 0px) rotateZ(51deg);
        width: 130px;
        opacity: 1;
    }
    100% {
        transform: translate3d(406px, 261px, 0px) rotateZ(51deg);
        width: 130px;
        opacity: 1;
    }
}
@keyframes l7 {
    0% {
        transform: translate3d(368px, 150px, 0px) rotateZ(177deg);
        width: 0px;
        opacity: 0;
    }
    3% {
        transform: translate3d(368px, 150px, 0px) rotateZ(177deg);
        width: 0px;
        opacity: 0;
    }
    4% {
        transform: translate3d(370px, 162px, 0px) rotateZ(177deg);
        width: 0px;
        opacity: 1;
    }
    8% {
        transform: translate3d(370px, 162px, 0px) rotateZ(177deg);
        width: 100px;
        opacity: 1;
    }
    100% {
        transform: translate3d(370px, 162px, 0px) rotateZ(177deg);
        width: 100px;
        opacity: 1;
    }
}
@keyframes l8 {
    0% {
        transform: translate3d(480px, 152px, 0px) rotateZ(93deg);
        width: 0px;
        opacity: 0;
    }
    7% {
        transform: translate3d(480px, 152px, 0px) rotateZ(93deg);
        width: 0px;
        opacity: 0;
    }
    8% {
        transform: translate3d(480px, 152px, 0px) rotateZ(93deg);
        width: 0px;
        opacity: 1;
    }
    11% {
        transform: translate3d(440px, 102px, 0px) rotateZ(93deg);
        width: 85px;
        opacity: 1;
    }
    100% {
        transform: translate3d(440px, 102px, 0px) rotateZ(93deg);
        width: 85px;
        opacity: 1;
    }
}
@keyframes l9 {
    0% {
        transform: translate3d(480px, 152px, 0px) rotateZ(153deg);
        width: 0px;
        opacity: 0;
    }
    7% {
        transform: translate3d(480px, 152px, 0px) rotateZ(153deg);
        width: 0px;
        opacity: 0;
    }
    8% {
        transform: translate3d(480px, 152px, 0px) rotateZ(153deg);
        width: 0px;
        opacity: 1;
    }
    12% {
        transform: translate3d(480px, 131px, 0px) rotateZ(153deg);
        width: 110px;
        opacity: 1;
    }
    100% {
        transform: translate3d(480px, 131px, 0px) rotateZ(153deg);
        width: 110px;
        opacity: 1;
    }
}
@keyframes l10 {
    0% {
        transform: translate3d(463px, 143px, 0px) rotateZ(22deg);
        width: 0px;
        opacity: 0;
    }
    7% {
        transform: translate3d(463px, 143px, 0px) rotateZ(22deg);
        width: 0px;
        opacity: 0;
    }
    8% {
        transform: translate3d(463px, 143px, 0px) rotateZ(22deg);
        width: 0px;
        opacity: 1;
    }
    11% {
        transform: translate3d(473px, 182px, 0px) rotateZ(22deg);
        width: 110px;
        opacity: 1;
    }
    100% {
        transform: translate3d(473px, 182px, 0px) rotateZ(22deg);
        width: 110px;
        opacity: 1;
    }
}
#c12 {
    position: absolute;
    width: 42px;
    height: 42px;
}
#c12 #halfclip {
    width: 49%;
    height: 100%;
    right: 0px;
    position: absolute;
    overflow: hidden;
    transform-origin: left center;
    animation: cliprotate 2s 1;
    transform: rotate(180deg);
}
.halfcircle {
    box-sizing: border-box;
    height: 100%;
    right: 0px;
    position: absolute;
    border: solid 4px transparent;
    border-top-color: #ee2750;
    border-left-color: #ee2750;
    border-radius: 50%;
    border-bottom-color: #ee2750;
    border-right-color: #ee2750;
}
#c12 #clipped {
    width: 200%;
    transform: rotate(135deg);
    animation: rotate 1s linear 2;
}
#c12 #fixed {
    width: 100%;
    transform: rotate(135deg);
    opacity: 1;
    animation: showfixed 2s 1;
}
@keyframes cliprotate {
    0% {
        transform: rotate(0deg);
    }
    12% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(0deg);
    }
    50.01% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(180deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(-45deg);
        border-bottom-color: transparent;
        border-right-color: transparent;
    }
    12% {
        transform: rotate(-45deg);
        border-bottom-color: transparent;
        border-right-color: transparent;
    }
    99% {
        transform: rotate(135deg);
        border-bottom-color: transparent;
        border-right-color: transparent;
    }
    100% {
        transform: rotate(135deg);
        border-bottom-color: #ee2750;
        border-right-color: #ee2750;
    }
}
@keyframes showfixed {
    0% {
        opacity: 0;
        border-bottom-color: transparent;
        border-right-color: transparent;
    }
    12% {
        opacity: 0;
    }
    49.99% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        border-bottom-color: transparent;
        border-right-color: transparent;
    }
    99% {
        opacity: 1;
        border-bottom-color: transparent;
        border-right-color: transparent;
    }
    100% {
        opacity: 1;
        border-bottom-color: #ee2750;
        border-right-color: #ee2750;
    }
}