*,
:before, ::before,
:after, ::after{
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.no-transitions,
.no-transitions *{
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}


/* -----------------------
   SABLONA GLOBALS - ADJUST AS YOU NEED
------------------------ */
footer{
    background: #f2f2f2;
}
footer {
    padding: 40px 0;
}
footer a + a {
    margin-left: 20px;
}

footer a.active {
    color: #444;
    pointer-events: none;
}
@media screen and (max-width: 63.9375em){
    footer .columns + .columns{
        margin-top: 20px;
    }
}
@media screen and (min-width: 40em){
    .menu-button{
        display: none;
    }
}
@media screen and (max-width: 39.9375em){

    .headbar-menu {
        display: none;
    }
    footer {
        padding: 30px 0;
    }
    
    footer .large-text-left a {
            width: calc(100% / 3);
            display: table-cell;
            padding: 5px;
            margin-left: 0;
    }
}


/* -----------------------
---------------------------
   PROJECT CSS BELOW
---------------------------
------------------------ */
header{
    border-bottom: 5px solid #2279bc;
}
.headbar-left .headbar-btn:hover {
    background: none;
}
/* -----------------------
   Making headbar contrast with white BG - icomoon ready
------------------------ */
.headbar-menu li.active a,
.headbar-menu li.active .icon .icom,
.social-toggle.toggled .icom{
	color: #fff;
}
.social .icom,
.social #share-options a i.icom,
.headbar-menu a,
.menu-button .menu-text{
	color: #2279bc;
}
.social-toggle.toggled svg path,
.headbar-menu li.active .icon svg{
	fill: #fff;
}
.social svg path,
.headbar-menu .icon svg{
	fill: #2279bc;
}
#share-options{
	background: #fff;
}
.menu-button .menu-icon .bar,
.headbar-menu li.active,
.social-toggle.toggled{
	background-color: #2279bc;
}
.social #share-options a:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

/* -----------------------
   Globals
------------------------ */
section{
    padding: 60px 0;
}
a{
    color: #2279BC;
}
a:hover,
a:focus{
    color: #54a4e2;
}

.button.x2, button.x2 {
    padding: 18px 36px;
    font-size: 22px;
}

/* -----------------------
   Hero
------------------------ */
section.hero{
    background: url('/promo/smartphone-market-share/RESOURCES/IMAGES/hero.jpg') #54A4E2 no-repeat center center;
}
section.hero h3{
    color: #01010f;
}


/* -----------------------
   Main Content
------------------------ */
.main-content button.x2{
    margin: 50px 0;
}
.chart {
    position: relative;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 40px 0 20px 0;
}

.button.embed {
    position: absolute;
    top: 0;
    right: 0;
}
    .button.embed:after {
        position: absolute;
        top: 0;
        right: 0;
        content: 'Close';
        width: 100%;
        padding: 9px 18px;
        height: 100%;
        background: #8c8c8c;
        opacity: 0;
        pointer-events: none;
    }

.embed-code {
    position: absolute;
    top: 36px;
    right: 0;
    color: #fff;
    background: #8c8c8c;
    padding: 10px 10px 5px 10px;
    opacity: 0;
    pointer-events: none;
}
    .button.embed.open:after,
    .button.embed.open + .embed-code{
        opacity: 1;
        pointer-events: auto;
    }
    .embed-code input {
        font-size: 14px;
    }
    .embed-code span {
        font-style: italic;
        font-size: 12px;
    }

.chart-table table{
    border-collapse: separate;
    border-spacing: 2px;
    margin-bottom: 0;
    background: #f2f2f2;
}
    .chart-table table th {
        background: #e0e0e0;
        text-align: center;
    }
    .chart-table table th:first-child {
        border-top: 2px solid #a8a8a8;
    }
    .chart-table table th.data-color-1 {
        border-top: 2px solid #80a048;
        background: #e1f2c3;
    }
    .chart-table table th.data-color-2 {
        border-top: 2px solid #4068a0;
        background: #c6d8f1;
    }
    .chart-table table th.data-color-3 {
        border-top: 2px solid #685088;
        background: #dfd5ed;
    }
    .chart-table table th.data-color-4 {
        border-top: 2px solid #3890a8;
        background: #d2e6eb;
    }
    .chart-table table th.data-color-5 {
        border-top: 2px solid #d88030;
        background: #f1dcc9;
    }
    .chart-table table th.data-color-6 {
        border-top: 2px solid #b55b8e;
        background: #f8d1e7;
    }
    .chart-table table th.data-color-7 {
        border-top: 2px solid #298f5e;
        background: #d4f1e3;
    }
    .chart-table table tr td:first-child {
        font-weight: bold;
    }
    .chart-table table td {
        background: #f0f0f0;
        width: 160px;
        text-align: center;
    }
    .chart-table table td:first-child {
        width: 70px;
    }


.tablesaw-notice {
    background: #2279bc;
    color: #fff;
    padding: 10px 30px;
    font-size: 14px;
    display: none;
}
.tablesaw-notice .button{
    color: #fff;
    margin-top: 5px;
}


p.table-source {
    font-size: 12px;
    font-weight: 700;
    padding-left: 12px;
    color: #777;
    margin-bottom: 40px;
}

/* -----------------------
   Contact
------------------------ */
section.contact {
    background: #2279bc;
}
section.contact h3 {
    color: #f2f2f2;
    margin-bottom: 30px;
}
section.contact .form-wrap {
    background: #f2f2f2;
    padding: 70px;
}


/* -----------------------
   Right Column
------------------------ */
.panel h4:not(:first-of-type) {
    margin-top: 40px;
}

.panel h4 {
    margin-bottom: 10px;
    color: #01010f;
}
.panel .more-btn{
    margin-top: 10px;
}

.analysts {
    width: 100%;
    overflow-y: scroll;
    height: 255px;
    padding-right: 10px;
}
    .analyst-photo {
        width: 60px;
        float: left;
        margin-bottom: 10px;
    }
    .analyst-text {
        width: calc(100% - 60px);
        float: left;
        padding-top: 3px;
        font-size: 14px;
        padding-left: 10px;
        border-top: 1px solid #ddd;
        margin-bottom: 10px;
    }

@media screen and (min-width: 64em){
    #needMsg{
        height: 314px;
    }
}


@media screen and (max-width: 63.9375em){
    section{
        padding: 50px 0;
    }
    section.hero button{
        margin-top: 20px;
    }
    #needMsg{
        height: 200px;
    }
}

@media screen and (max-width: 39.9375em){
    .button.x2, button.x2 {
        padding: 14px 25px;
        font-size: 20px;
    }
    .tablesaw-notice-vendor{
        display: block;
    }
    h2 {
        font-size: 1.8rem;
    }
    section.contact .form-wrap{
        padding: 30px;
    }
    .button.embed {
        top: -37px;
    }
    .embed-code {
        top: -1px;
    }
}

@media screen and (max-width: 33.75em){
    /* when table cant fit anymore */
    table tbody th, table tbody td {
        font-size: 13px;
    }
}

@media screen and (max-width: 29.9375em){
    .tablesaw-notice-os{
        display: block;
    }
}

@media screen and (max-width: 25em){
    #frm1 input[type="submit"]{
        margin-top: 10px;
    }
}



@media print{
    .tablesaw-columntoggle th.tablesaw-cell-hidden,
    .tablesaw-columntoggle td.tablesaw-cell-hidden{
        display: table-cell;
    }
    .tablesaw-bar{
        display: none;
    }
}