/* Table of Contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- General
- Avoid IOS zooming
- Buttons
	- Turqoise
- Text Area
	- Black
- Tool Tips
- Beta Feedback button
*/

/* Breakpoints
––––––––––––––––––––––––––––––––––––––––––––––––––
0-374		2 columns
375-639		6 columns
640-1023	12 columns
1024-1439	12 columns
1440+		12 columns

*/

@media (min-width: 375px) {}
@media (min-width: 640px) {}
@media (min-width: 800px) {}
@media (min-width: 1024px) {}
@media (min-width: 1440px) {}

@media (max-width: 374px) {}
@media (max-width: 639px) {}
@media (max-width: 799px) {}
@media (max-width: 1023px) {}
@media (max-width: 1439px) {}

/* Wordpress Admin Bar Height-Change Breakpoints
––––––––––––––––––––––––––––––––––––––––––––––––––
0-782		46px tall
783-...		32px tall

*/

/* General
–––––––––––––––––––––––––––––––––––––––––––––––––– */
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

/* Avoid IOS zooming
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 639px) {
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px !important;
  }
  select,
  textarea,
  input {
    font-size: 16px !important;
  }
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
	font-family: "Gotham A", "Gotham B";
	font-style: normal;
	font-weight: 300;

	border-radius: 0px;
	border: none;
	max-width: 200px;
	font-weight: 500;
	margin: 0px;
}
.button--bold {
	font-size: 1.33333rem;
	font-weight: 500;
}
.button--icon {

}
.button--full-width {
	width: 20rem;
}

/* Turqoise -- DEPRECATED */
.button.button__turquoise {
	background-color: #38a0b2;
	color: #FFF;
}
.button.button__turquoise:hover {
	color: #CCC;
}

/* Teal */
.button.button--teal {
	background-color: #38a0b2;
	color: #FFF;
}
.button.button--teal:hover {
	color: #CCC;
}

/* BYU Blue */
.button.button--navy {
	background-color: rgba(0,46,93,1);
	color: #FFF;
}
.button.button--navy:hover {
	color: #CCC;
}

/* Grey */
.button.button--grey {
	background-color: #767676;
	color: #FFF;
}
.button.button--grey:hover {
	color: #CCC;
}

/* Black */
.button.button--black {
	background-color: #000;
	color: #FFF;
}
.button.button--black:hover {
	color: #CCC;
}

/* facebook */
.button.button--facebook {
	background-color: #3b5998;
	color: #FFF;
}
.button.button--facebook:hover {
	color: #CCC;
}

/* twitter */
.button.button--twitter {
	background-color: #4099FF;
	color: #FFF;
}
.button.button--twitter:hover {
	color: #CCC;
}
.button.button--email {
	background-color: #1f1f1f;
	color: #FFF;
}
.button.button--email:hover {
	color: #CCC;
}
/* Text Area
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.text-area {
	font-family: "Gotham A", "Gotham B";
	font-style: normal;
	font-weight: 400;
	font-size: 1.36rem;
	color: #000;
	letter-spacing: 0px;
	margin: 0;
}
/* Black */
.text-area.text-area__black {
	border-radius: 0px;
}
input:-webkit-autofill.text-area.text-area__black {
    -webkit-box-shadow: 0 0 0px 1000px #0D0D0D inset;
    -webkit-text-fill-color: white !important;
}
input{
  border: none;
  padding: 1px 1px 1px 3px;
}


/* Tags - positioning
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.tag__bottom-right__outside {
	position: absolute;
	bottom: 1.333333rem;
	right: -0.5rem;
}
.tag__top-right__outside {
	position: absolute;
	top: 1.333333rem;
	right: -0.5rem;
}
.tag__bottom-left__outside {
	position: absolute;
	bottom: 1.333333rem;
	left: -0.5rem;
}
.tag__top-left__outside {
	position: absolute;
	top: 1.333333rem;
	left: -0.5rem;
}
.tag__bottom-right__aligned {
	position: absolute;
	bottom: 1.333333rem;
	right: 0;
}
.tag__top-right__aligned {
	position: absolute;
	top: 1.333333rem;
	right: 0;
}
.tag__bottom-left__aligned {
	position: absolute;
	bottom: 1.333333rem;
	left: 0;
}
.tag__top-left__aligned {
	position: absolute;
	top: 1.333333rem;
	left: 0;
}

/* Tags - styling presets
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.tag__simple {
	font-family: "Gotham A", "Gotham B";
	font-style: normal;
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: -.0433333rem;
	padding: 0.33333rem 1rem;
}
.tag__title {
	font-family: "Gotham A", "Gotham B";
	font-style: normal;
	font-weight: 500;
	font-size: 1.279166666rem;
	letter-spacing: -.03rem;
	line-height: 1.25rem;
	padding: 0.75rem 1rem;
	text-transform: uppercase;

	text-align: center;
	width: 100%;
}


@media (min-width: 375px) {}
@media (min-width: 640px) {}
@media (min-width: 800px) {}
@media (min-width: 1024px) {
	.tag__title {
		font-family: "Gotham A", "Gotham B";
		font-style: normal;
		font-weight: 500;
		font-size: 2.08333333rem;
		letter-spacing: -.03rem;
		line-height: 2.25rem;
		padding: 1rem 1rem;
	}
}
@media (min-width: 1440px) {}


/* Icons - Video
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.video-icon__parent:hover .generic-block__play-video-icon__teal {
	display: block;
}
.video-icon__parent:hover .generic-block__play-video-icon__white {
	display: none;
}

/* Select Boxes
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.standard-select-box {
	cursor: pointer;
	appearance: none;
	-moz-appearance: none; /* Firefox */
	-webkit-appearance: none; /* Safari and Chrome */
	width: 100%;
	border-radius: 0px;
	background-color: transparent;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
.standard-select-box:hover {
 	border: 1px solid #38A0B2;
}
.speech-date-archive__options__selects-wrapper .speech-date-archive__event-type-selection__wrapper--large-width {
	width: 200px;
}
.standard-select-box__wrapper {
	width: 150px;
	font-size: 1.33333rem;
}

.standard-select-box__wrapper:before {
   	font-family: FontAwesome;
	content: "\f107";
	position: absolute;
	right: 10px;
	font-size: 24px;
	color: #38A0B2;
	z-index: -50;
}
/*.standard-select-box__wrapper:after {
   	content: "";
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
    width: 40%;
    height: calc(100% - 2px);
    box-sizing: border-box;
    margin: 1px;
}*/


/* Tool Tips

Sample usage:
<a class="my-link-class">
	<div class="tool-tip tool-tip--white">
		<span class="tool-tip__text">My tool Tip text</span>
	</div>
</a>

Notes:
1) the "my-link-class" class should define a height and width
2) the "my-link-class" class can be whatever name you would like

Available Classes:
.tool-tip
.tool-tip--light-grey (DEFAULT, black text with light-grey background)
.tool-tip--white (black text with white background)
.tool-tip--circle-link (make the hoverable area of the tool-tip be a circle, for matching the parent link)
.tool-tip__text (should be assigned to the span containing the tool-tip text)
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.tool-tip {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.tool-tip--circle-link {
	border-radius: 50%;
}
.tool-tip__text {
    visibility: hidden;
    background-color: #E5E5E5;
    color: #000;
    text-align: center;
    padding: 5px 15px;
    line-height: initial;
	font-family: "Gotham A", "Gotham B";
	font-style: normal;
	font-weight: 300;
	font-size: 1.25rem;
	text-transform: uppercase;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.33);

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    right: 0;

    /* Fade in tooltip */
    opacity: 0;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
	-webkit-transition-delay: 0s; /* Safari */
    transition-delay: 0s;
}
.tool-tip--white .tool-tip__text {
    background-color: #FFF;
}
.tool-tip__text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #E5E5E5 transparent transparent transparent;
}
.tool-tip--white .tool-tip__text::after {
    border-color: #FFF transparent transparent transparent;
}
.tool-tip:hover .tool-tip__text {
    visibility: visible;
    opacity: 1;

	-webkit-transition-delay: .5s; /* Safari */
    transition-delay: .5s;
}

/* Beta Feedback button
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#beta-feedback-button {
    font-family: "Gotham A", "Gotham B";
    font-style: normal;
    font-weight: 500;
    position: absolute;
    color: white;
    background-color: #66B200;
    right: -52px;
    top: 180px;
    padding: 10px 10px 10px;
    display: block;
    z-index: 100;
    font-size: 1.1666666rem;
    height: 40px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    line-height: 1.5rem;
    box-sizing: border-box;
    -webkit-transition: color .2s;
    transition: color .2s;
}
#beta-feedback-button:hover {
    color: #CCC;
    -webkit-transition: color .2s 2s;
    transition: color .2s;
}

/* Temp
–––––––––––––––––––––––––––––––––––––––––––––––––– */




































/* Extra Classes from Framework
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media (min-width: 375px) and (max-width: 639px)  {

}
@media (min-width: 640px) and (max-width: 799px) {
.med-col-4-gutter-2 > .med-col-2 { width: calc(((100% + 0rem) / 4) * 2 + 0rem); }	.med-no-padding.med-col-4-gutter-2 > .med-col-2 { width: calc(((100% + 0rem - 3.33333333333rem) / 4) * 2 + 0rem); }
.med-col-4-gutter-2 > .med-reverse-offset-right-col-0-gutter-1-inner-1 { margin-right: calc(-1 * (((100% + 0rem) / 4) * 1 - 1.66666666667rem)); }	.med-no-padding.med-col-4-gutter-2 > .med-reverse-offset-right-col-0-gutter-1-inner-1 { margin-right: calc(-1 * (((100% + 0rem - 3.33333333333rem) / 4) * 1 - 1.66666666667rem)); }

}
@media (min-width: 800px) and (max-width: 1023px) {
.mlg-col-4-gutter-2 > .mlg-col-2 { width: calc(((100% + 0rem) / 4) * 2 + 0rem); }	.mlg-no-padding.mlg-col-4-gutter-2 > .mlg-col-2 { width: calc(((100% + 0rem - 3.33333333333rem) / 4) * 2 + 0rem); }
.mlg-col-4-gutter-2 > .mlg-reverse-offset-right-col-0-gutter-1-inner-1 { margin-right: calc(-1 * (((100% + 0rem) / 4) * 1 - 1.66666666667rem)); }	.mlg-no-padding.mlg-col-4-gutter-2 > .mlg-reverse-offset-right-col-0-gutter-1-inner-1 { margin-right: calc(-1 * (((100% + 0rem - 3.33333333333rem) / 4) * 1 - 1.66666666667rem)); }

}
@media (min-width: 1024px) and (max-width: 1439px) {
.lg-col-10 > .lg-col-3-gutter-0-inner-1 { width: calc(((100% + 3rem) / 10) * 4 - 3rem); }	.lg-no-padding.lg-col-10 > .lg-col-3-gutter-0-inner-1 { width: calc(((100% + 3rem - 3rem) / 10) * 4 - 3rem); }
.lg-col-10 > .lg-offset-left-col-0-gutter-2 { margin-left: calc(((100% + 3rem) / 10) * 0 + 3rem); }	.lg-no-padding.lg-col-10 > .lg-offset-left-col-0-gutter-2 { margin-left: calc(((100% + 3rem - 3rem) / 10) * 0 + 3rem); }
.lg-col-10 > .lg-reverse-offset-right-col-1 { margin-right: calc(-1 * (((100% + 3rem) / 10) * 1 + 0rem)); }	.lg-no-padding.lg-col-10 > .lg-reverse-offset-right-col-1 { margin-right: calc(-1 * (((100% + 3rem - 3rem) / 10) * 1 + 0rem)); }

}
@media (min-width: 1440px) {
.xlg-col-10 > .xlg-col-3-gutter-0-inner-1 { width: calc(((100% + 3rem) / 10) * 4 - 3rem); }	.xlg-no-padding.xlg-col-10 > .xlg-col-3-gutter-0-inner-1 { width: calc(((100% + 3rem - 3rem) / 10) * 4 - 3rem); }
.xlg-col-10 > .xlg-offset-left-col-0-gutter-2 { margin-left: calc(((100% + 3rem) / 10) * 0 + 3rem); }	.xlg-no-padding.xlg-col-10 > .xlg-offset-left-col-0-gutter-2 { margin-left: calc(((100% + 3rem - 3rem) / 10) * 0 + 3rem); }
.xlg-col-10 > .xlg-reverse-offset-right-col-1 { margin-right: calc(-1 * (((100% + 3rem) / 10) * 1 + 0rem)); }	.xlg-no-padding.xlg-col-10 > .xlg-reverse-offset-right-col-1 { margin-right: calc(-1 * (((100% + 3rem - 3rem) / 10) * 1 + 0rem)); }

}