/**
 * Click & Tweet Inline Tweets
 */
.click-and-tweet-inline{
    display: inline;
    text-decoration: none;
}

.click-and-tweet-inline, .click-and-tweet-inline:hover{
    border: none !important;
}

.click-and-tweet-inline .click-and-tweet-twitter-logo{
    background-image: url('../img/twitter-logo.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    height: 1.2em;
    width: 1.2em;
    vertical-align: text-bottom;
    margin-left: 0.2em;
    position: relative;
}

.click-and-tweet-inline .click-and-tweet-twitter-logo:before{
    content: "";
    display: block;
    padding-top: 100%;
}

.click-and-tweet-inline .call-to-action-text{
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    font-weight: 300;
    white-space: nowrap;
    background: rgba(0,0,0,0.8);
    padding: 4px 10px;
    color: #FFF;
    -webkit-border-radius:6px;
    border-radius: 6px;
    visibility: hidden;
    opacity: 0;
}

.click-and-tweet-inline .call-to-action-text:after{
    top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
	border-top-color: rgba(0,0,0,0.8);
	border-width: 6px;
	margin-left: -6px;
}

.click-and-tweet-inline .click-and-tweet-twitter-logo:hover .call-to-action-text{
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    -webkit-transition: opacity 400ms ease-in-out, transform 200ms ease-in-out;
    -moz-transition: opacity 400ms ease-in-out, transform 200ms ease-in-out;
    -ms-transition: opacity 400ms ease-in-out, transform 200ms ease-in-out;
    -o-transition: opacity 400ms ease-in-out, transform 200ms ease-in-out;
    transition: opacity 400ms ease-in-out, transform 200ms ease-in-out;
}

/**
 * Click & Tweet Card Tweets
 */
.click-and-tweet-card{
    display: block;
    width:100%;
    max-width: 640px;
    padding: 4%;
    margin: 4% auto;
    background-color: #FFFFFF;
    border: solid 1px #EEE;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.025);
    box-shadow: 0 0 3px 0 rgba(0,0,0,0.025);
    position: relative;
}

.click-and-tweet-card a {
    text-decoration: none;
}

.click-and-tweet-card a,
.click-and-tweet-card a:hover{
    border: none !important;
}

.click-and-tweet-card .click-and-tweet-twitter-logo{
    background-image: url('../img/twitter-logo.png');
    background-position: center;
    background-size: 75%;
    background-repeat: no-repeat;
    display: block;
    width: 10%;
    position: relative;
}

@media (max-width: 34em) {
    .click-and-tweet-card .click-and-tweet-twitter-logo{
        width: 14%;
    }
}

.click-and-tweet-card .click-and-tweet-twitter-logo:before{
    content: "";
    display: block;
    padding-top: 100%;
}

.click-and-tweet-card .click-and-tweet-card-link{
    display:block;
    text-align: left;
    width: 100%;
    height: 100%;
}

.click-and-tweet-card.left-center .click-and-tweet-twitter-logo{
    position: absolute;
    top: 50%;
    left: 2.5%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.click-and-tweet-card.left-center .click-and-tweet-card-text{
    padding-left: 10%;
}

@media (max-width: 34em) {
    .click-and-tweet-card.left-center .click-and-tweet-card-text{
        padding-left: 14%;
    }
}

.click-and-tweet-card.left-top .click-and-tweet-twitter-logo{
    position: absolute;
    top: 12.5%;
    left: 2.5%;
}

.click-and-tweet-card.left-top .click-and-tweet-card-text{
    padding-left: 10%;
}

@media (max-width: 34em) {
    .click-and-tweet-card.left-top .click-and-tweet-card-text{
        padding-left: 14%;
    }
}

.click-and-tweet-card.left-bottom .click-and-tweet-twitter-logo{
    position: absolute;
    bottom: 12.5%;
    left: 2.5%;
}

.click-and-tweet-card.left-bottom .click-and-tweet-card-text{
    padding-left: 10%;
}

@media (max-width: 34em) {
    .click-and-tweet-card.left-bottom .click-and-tweet-card-text{
        padding-left: 14%;
    }
}

.click-and-tweet-card.right-center .click-and-tweet-twitter-logo{
    position: absolute;
    top: 50%;
    right: 2.5%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.click-and-tweet-card.right-center .click-and-tweet-card-text{
    padding-right: 10%;
}

.click-and-tweet-card.right-top .click-and-tweet-twitter-logo{
    position: absolute;
    top: 12.5%;
    right: 2.5%;
}

.click-and-tweet-card.right-top .click-and-tweet-card-text{
    padding-right: 10%;
}

@media (max-width: 34em) {
    .click-and-tweet-card.right-top .click-and-tweet-card-link{
        padding-right: 14%;
    }
}

.click-and-tweet-card.right-bottom .click-and-tweet-twitter-logo{
    position: absolute;
    bottom: 12.5%;
    right: 2.5%;
}

.click-and-tweet-card.right-bottom .click-and-tweet-card-text{
    padding-right: 10%;
}

@media (max-width: 34em) {
    .click-and-tweet-card.right-bottom .click-and-tweet-card-text{
        padding-right: 14%;
    }
}

.click-and-tweet-card.center-top .click-and-tweet-twitter-logo{
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.click-and-tweet-card.center-bottom .click-and-tweet-twitter-logo{
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.click-and-tweet-card.center-top .click-and-tweet-card-link,
.click-and-tweet-card.center-bottom .click-and-tweet-card-link{
    text-align: center;
}

.click-and-tweet-card .click-and-tweet-card-text{
    display: inline-block;
}

.click-and-tweet-card .call-to-action-text{
    color: #66757f;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    opacity: 0.75;
    font-weight: 300;
    padding: 18px 6px 6px;
}

.click-and-tweet-card.center-top .call-to-action-text,
.click-and-tweet-card.center-bottom .call-to-action-text{
    padding: 6px;
}

/*Settings page*/
.tweet-color-setting .iris-palette{
    display: none;
}
.tweet-color-setting .iris-palette:first-child{
    display: block;
}
