/* -----------------------
Font styles
------------------------*/
@font-face {
    font-family: 'SalesforceSans-Regular';
    src: url('/fonts/SalesforceSans-Regular.woff2') format('woff2'),
    url('/fonts/SalesforceSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'TrailheadBold';
    src: url('/fonts/Trailhead-Bold.woff2') format('woff2'),
    url('/fonts/Trailhead-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: ITC Avant Garde;
    font-weight: 500;
    src: url('/fonts/AvantGardeForSalesforceW05-Dm.woff2') format("woff2"),url('/fonts/AvantGardeForSalesforceW05-Dm.woff') format("woff");
}
/* -----------------------
Base styles
------------------------*/
body {
    background-color: #ffffff;
    font: 1.1em 'SalesforceSans-Regular', Helvetica Neue, Arial, Geneva, sans-serif;
}
h1 {
    margin: 24px 0;
    font-size: 2.25em;
    font-family: ITC Avant Garde;
    font-weight: 200;
    line-height: 1.1;
    color: #032D60;
}
p {
    font-size: 18px;
    margin: 0 0 1.5em;
    line-height: 28px;
    color: #747474;
    word-wrap: break-word;
}
a {
    color: #255881;
    text-decoration: none;
}
a:hover, a:focus {
    text-decoration: underline;
}
select {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: .5rem;
    padding-left: .5rem;
    width: 50%;
    max-width: 300px;
    height: 3rem;
}
select:hover {
    border-color: #189cd7;
}
.text-center {
    text-align: center;
}
/* -----------------------
Layout styles
------------------------*/
.container {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    border-radius: 10px;
    background-color: #fff;
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}
@media (max-width: 767px) {
    .container {
        width: auto;
    }
}
header {
    text-align: center;
    margin: 64px 0 0 0;
}
.content {
    padding: 1em 1.25em;
}
@media (min-width: 42em) {
    .content {
        padding: 2em 3em;
    }
}
footer {
    padding: 3rem;
    color: #747474;
    font-size: 12px;
    text-align: center;
}
/* -----------------------
Button styles
------------------------*/
.btn {
    border: 2px solid #0176D3;
    color: #0176D3;
    border-radius: 4px;
    padding: 10px 12px;
}
.btn:hover {
    background: #0176D3;
    color: white;
    text-decoration: none;
    transition: background-color ease-in-out;
}

a.button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #fff;
    border-radius: 4px;
    background-color: #189cd7;
    background-image: linear-gradient(to top,#073f6d 10%,#189cd7);
    font-family: 'SalesforceSans-Light';
    font-weight: 700;
    padding: 9px 40px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
}
a.button:hover, a.button:focus {
    text-decoration: none;
    background-image: none;
}
a.button-twitter {
    padding-left: 0;
}
a.button-twitter i {
    width: 25px;
    height: 25px;
    margin: 0 .5em 0 1em;
    background: transparent 0 0 no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 72 72'%3E%3Cpath fill='white' d='M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z'%3E%3C/path%3E%3C/svg%3E");
}


/* -----------------------
Form styles
------------------------*/
form.horizontal {
    display: flex;
    align-items: center;
}
@media (max-width: 767px) {
    form.horizontal  {
        flex-direction: column;
    }
    form .label {
        margin-bottom: .5em;
    }
}
form.horizontal .help {
    margin-left: .5em;
}
form.horizontal .help a {
    font-weight: bold;
    padding-left: .5em;
    padding-right: .5em;
}
form.horizontal select {
    margin-left: 1em;
}
form .rankIcon {
    margin-left: .5em;
}

/* -----------------------
Equations
------------------------*/
.equation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.equation img {
    width: 12rem;
}
.operators {
    color: #649b15;
    font: 900 32px sans-serif;
}

/* -----------------------
Social Profile Pic Tool styles
------------------------*/
.overlay-dropzone {
    background: #EAF5FE;
    padding: 4em;
    text-align: center;
    font-size: 1.4em;
    border-radius: 8px;
    border: 1px dashed #90D0FE;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.overlay-dropzone p {
    margin-bottom: 0;
}
.overlay-dropzone > * {
    pointer-events: none;
}
.overlay-dropzone.is-uploaded {
    border: none;
    background: none;
}
.overlay-dropzone.is-hovered {
    border-color: #189cd7;
}
.overlay-control-container {
    position: absolute;
    width: 100%;
    top: 320px;
}
.overlay-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: fit-content;
    margin: auto;
}
.overlay-buttons .button:first-child {
    margin-top: 0;
}
.overlay-buttons .button {
    margin-top: .5rem;
    margin-bottom: .5rem;
}
.overlay-buttons .button:last-child {
    margin-bottom: 0;
}

/* -----------------------
Image croping tool
Credit: http://tympanus.net/codrops/2014/10/30/resizing-cropping-images-canvas/
------------------------*/
.resize-image {
	max-height: 500px;
	max-width: 500px;
	border-radius: 50%;
}

.hidden {
	display: none;
}

.component {
	position: relative;
	height: 320px;
	text-align: center;
	margin: 0 auto 8rem;
}

.resize-container {
    position: relative;
    display: inline-block;
    cursor: move;
    margin: 0 auto;

}

.resize-container img {
    display: block;
}

.resize-container:hover img,
.resize-container:active img {
    outline: 2px dashed rgba(100,155,21,.9);
}

.resize-handle-ne,
.resize-handle-se,
.resize-handle-nw,
.resize-handle-sw {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: rgba(100,155,21,.9);
    z-index: 999;
}

.resize-handle-nw {
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}

.resize-handle-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}

.resize-handle-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}

.resize-handle-se {
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}

.overlay {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -150px;
	margin-top: -150px;
	z-index: 999;
	width: 300px;
	height: 300px;
	box-sizing: content-box;
	pointer-events: none;
}

.overlay:before {
	top: 0;
	margin-left: -2px;
	margin-top: -40px;
}

.overlay:after {
	bottom: 0;
	margin-left: -2px;
	margin-bottom: -40px;
}

.overlay-inner:before {
	left: 0;
	margin-left: -40px;
	margin-top: -2px;
}

.overlay-inner:after{
	right: 0;
	margin-right: -40px;
	margin-top: -2px;
}

.overlay .rankIcon {
    width: 100px;
    position: relative;
    top: -130px;
    right: -65px;
}