/*--------------------------
  BODY STYLES
--------------------------*/

html {
  position: relative;
  min-height: calc(100% + 220px);
}

body {
  font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  color: #111;
  margin: 0 0 151px;
  padding: 0;
}



/*--------------------------
  HEADERS
--------------------------*/

h1,
h1 a:link,
h1 a:visited,
h1 a:active,
.jumbotron .h1,
.jumbotron h1 {
  margin: 0 0 25px 0;
  font-size: 44px;
  font-size: 4.4rem;
  text-align: center;
  color: #111;
  letter-spacing: -1px;
}

h2,
h2 a:link,
h2 a:visited,
h2 a:active,
h2 a:hover {
  color: #000;
  font-size: 30px;
  font-size: 3rem;
}

h3,
h3 a:link,
h3 a:visited,
h3 a:active,
h3 a:hover {
  color: #fff;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
}

h4 {
  font-weight: bold;
}

.title {
  text-align: center;
  font-size: 45px;
  font-size: 4.5rem;
  color: #000;
  margin-bottom: 40px;
}

.navbar-toggle{
  float:left;
}

#updateSection ul{
  margin: 2rem 0 0 30px;
}

#updateSection h4{
  margin:2rem 0 2rem 30px;
}

#updateSection li{
  font-size: 16px;
}

#search{
  display:flex;
  flex-direction:row-reverse;
  position: fixed;
  left: calc(100% - 33rem);
  z-index: 9;
  width:33rem;
}

#search button{
  margin-top: 1rem;
  background: #d18416;
  font-weight: 600;
  font-size: 16px;
  padding: 6px 30px 10px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 3px 0 #ba5b09;
  margin-bottom: 15px;
  display:flex;
  justify-content:center;
  margin:0;
  position: absolute;
  left: 91px;
  top: 35px;
  height: 3.1rem;
  width: 15rem;
}

#headerBannerText{
  text-align:center;
  color:white;
  max-width: calc(100% - 270px);
}
/*--------------------------
  LINKS & ACCENTS
--------------------------*/

a:link,
a:visited,
a:active {
  color: #777;
  text-decoration: none;
}

a:hover {
  color: #999;
}


/*--------------------------
  HappyFox Chat
--------------------------*/
.badge-image-container {
  background-image: url('https://azfamilyresources.org/images/TawkToImg.jpg'); background-size: cover;
  background-repeat: no-repeat;
 }
 .badge-image {
  display: none;
 }

 .badge-image-container {
  top: 0; 
  display: none; 
 }
 .badge {
   display: none !important; 
 }
 #___root {
  height: 100%;
  display: none;
}
 #hfc-frame.hfc-badge__bottom-right {
  visibility: hidden;
}
#hfc-frame{
  visibility: hidden; 
}
/*--------------------------
  Happyfox
--------------------------*/

#hf-chat {
  position: fixed;
  top: 0.5rem;
  right: 2rem;
  z-index: 1000;
}

.chat-img {
  width: 27rem;
  position: fixed !important;
  top: 0.5rem !important;
  right: 2rem !important;
  z-index: 1000 !important;
}
/*--------------------------
  HEADER
--------------------------*/

.azfr-logo {
	margin: 0 auto;
  padding: 0;
}

.mItems {
  display: none;
  font-size: 18px;
  font-size: 1.8rem;
}

/*--------------------------
  NAVIGATION
--------------------------*/

.navbar {
  padding: 7px 75px 7px 25px;
  background: #111;
  margin: 0;
}

.navbar-nav a:link,
.navbar-nav a:visited,
.navbar-nav a:active {
  color: #fff;
  font-size: 24px;
  font-size: 2.4em;
}

.navbar-nav a:hover,
.nav > li > a:hover,
.nav > li > a:focus  {
  color: #111;
}

.navbar-toggle .icon-bar {
  background: #fff;
  height: 3px;
}

/*--------------------------
  Banner
--------------------------*/


#carousel {
  position: relative;
  width:100vw;
  margin:0 auto;
  background: radial-gradient(circle, #f7b733, #fc4a1a);
  position:absolute;
  left:-50vw;
}

#slides {
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: 10rem;
  margin-left:100vw;
  cursor:pointer;
}

#slides ul {
  list-style: none;
  width:100%;
  height:250px;
  margin: 0;
  padding: 0;
  position: relative;
}

 #slides li {
  width:100vw;
  max-height:100%;
  float:left;
  text-align: center;
  position: relative;
  height:10rem;
  /*background: radial-gradient(circle, #f7b733, #fc4a1a);*/
}

.quoteContainer{
  width:80%;
  margin:0 auto;
}



#buttons {
  width: 100vw;
  positon:relative;
  top:40px;
  display:none;
}

#buttons a {
  font-size:50px;
  margin:0 60px;
  color:#b14943;
  padding:9px;
  width:35px;
  top: 9px;
  position: relative;
  float:left;
}
#next{
  float:right !important;
}

#playPause{
  display: flex;
  margin: auto;
  background: #d18416;
  font-weight: 600;
  font-size: 16px;
  padding: 6px 30px 10px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 3px 0 #ba5b09;
}

/*--------------------------
  JUMBOTRON
--------------------------*/

.jumbotron {
  margin-top: 25px;
  background: #fff;
}

.bUpdates,
.bUpdates strong {
  margin: 0 0 0 30px;
  padding: 25px 0;
  font-size: 20px;
  font-size: 2rem;
}

/*--------------------------
  LAYOUT STRUCTURE
--------------------------*/

#wrap {
  padding-left: 10px;

  /*footer{position:absolute} fix*/
  margin-bottom: 13rem;
}

header {
  padding-top: 30px;
  text-align: center;
}

.section {
  padding-bottom: 100px;
}

footer {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #111;
  color: #fff;
}

.footer-info {
  margin-top: 27px;
  text-align: center;
}

.footer-info a:link,
.footer-info a:visited,
.footer-info a:active {
  color: #999;
  text-decoration: none;
}

.footer-info a:hover {
  color: #bbb;
}

#disclaimersLabel{
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 4px solid #6a6a6a;
}

#disclaimers{
  display:flex;
  width:60%;
  margin:0 auto;
  justify-content:space-around;
}

#disclaimers a{
  color:#fff;
}

/*--------------------------
  CATEGORY ICONS
--------------------------*/

.featDesc {
  color: #000;
  font-size: 14px;
  font-size: 1.4rem;
}

.featIcons,
.featIcons a:link,
.featIcons a:visited,
.featIcons a:active,
.featIcons a:hover {
  color: #fff;
  font-size: 70px;
  font-size: 7rem;
  padding: 50px 55px;
  border-radius: 100px;
  -moz-border-radius: 100px;
  text-align: center;
}

.search {
  background: #00CED1;
}

  /*searh submit icon*/
input.gsc-search-button-v2 {
    width: initial !important;
    height: initial !important;
  }

.basics {
  background: #800080;
}

.medical {
  background: #DC143C;
}

.education {
  background: #0000CD;
  padding: 50px 40px;
}

.legal {
  background: #FFD700;
  padding: 50px 50px;
}

.resources {
  background: #A52A2A;
}

.local {
  background: #32CD32;
  padding: 50px 65px;
}

.emergency {
  background: #FF8C00;
  padding: 50px 50px;
}

.youthageout {
  background: #2F3674;
  padding: 50px 60px;
}

#feedbackContact i.fa,
#feedbackContact i.fa a:link,
#feedbackContact i.fa a:visited,
#feedbackContact i.fa a:active,
#feedbackContact i.fa a:hover {
  font-size: 36px;
  color: #d18416;
  text-decoration: none;
  margin-right: 7px;
}

.primary-btn,
.btn.primary-btn:active,
.btn.primary-btn:focus {
  background: #d18416 !important;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 5px 30px;
  border: 0;
  border-radius: 10px;
  color: #fff !important;
  text-shadow: none;
  box-shadow: 0 3px 0 #ba5b09;
  margin-bottom: 15px;
}

.primary-btn:hover {
  background-color:#dfa95f !important;
}
/*--------------------------
  SCROLL TO TOP
--------------------------*/

.scroll-top {
  position: fixed;
  bottom: 0;
  right: 15px;
  z-index: 100;
}

.scroll-top a:link,
.scroll-top a:visited,
.scroll-top a:active {
  color: #fff;
  background: #000;
  font-size: 28px;
  font-size: 2.8rem;
}

/*--------------------------
  FORMS
--------------------------*/

.loading {
  display: none;
}

/*--------------------------
  TOOL TIP
--------------------------*/

.tooltip .bottom {
  margin-top: 30px;
}

/*--------------------------
  HELPER CLASSES
--------------------------*/

.pushDown {
  margin-top: 50px;
}

.pSides {
  margin: 0 25px 0 0;
}

.textBox {
  margin: 0 auto 0 10px;
  max-width: 45em;
  padding: 10 20px;
  font-size: 18px;
  font-size: 1.8rem;
}

.hidden{
  position: absolute;
  top: -99999rem;
}

.noNegetiveMargin {
  margin:0;
}

/*--------------------------
  Updates Page
--------------------------*/
#updatesContainer{
  min-height:50vh;
}

#updatesContainer li{
  font-size:1.6rem;
  margin-bottom:2rem;
}

/*--------------------------
  Misc Helpers
--------------------------*/

.underlined{
  text-decoration: underline;
}

.italicContainer{
  font-style: italic;
}

.centered{
  text-align: center;
}

.indented{
  margin-left:2rem;
}
/*--------------------------
  Images
--------------------------*/


#KinshipVideoImg:hover {
   content: url('/images/KinshipVideoRed.jpg');
}

/* Fix flash on hover from content not being loaded*/
body:after{
 display:none;
 content: url(/images/KinshipVideoRed.jpg);
}
/*--------------------------
  /Feedback
--------------------------*/

#feedbackForm h2{
	color:#d18416;
}

.formInputContainer{
	display:flex;
	flex-direction:column;
}

#FeedbackForm input{
	margin-bottom: 2rem;
}

#FeedbackSub{
	display: flex;
  align-items: center;
	background-color: #d18416;
	color: #111;
	justify-content: center;
	height: 4rem;
	width: 50%;
	margin: auto;
}

#feedbackForm{
	margin-bottom:5rem;
}

#feedbackForm input,
#feedbackForm textarea{
  border: none;
  border-bottom: 1px solid orange;
  z-index:55;
}

#feedbackForm h2{
  text-align: center;
}

#feedbackForm textarea{
  margin-bottom:2rem;
}

#feedbackContact #FollowUs{
  width: 100%;
  text-align: center;
}

#feedbackContact div div{
  margin: auto;
  width: 16rem;
}

#contactInfo p{
      margin: 0 -1.2rem 10px 1.2rem;
}


/*--------------------------
  Videos
--------------------------*/


  .videoFlexColumn{
    display:flex;
  }

  .videoWrapper{
    width:calc(100% + 2rem);
    margin:auto;
    text-align:center;
    margin-right:-1.5rem;
  }

  .videoMulti iframe{
    margin-bottom:2rem !important;
  }

  .videoBottom{
      display:flex;
      flex-direction: column;
      justify-content: flex-end;
      margin:0 auto
  }
/*--------------------------
  MEDIA QUERIES
--------------------------*/


/* WideScreen Phones && < Ipads */
@media (max-height: 60rem) and (max-width: 100rem) {
  #tawkToEmbHolder {
    bottom: 5rem;
  }
}


@media screen and (max-width:400px) {
  body{
    margin-bottom: 200px;
  }
}

@media screen and (max-width: 550px) {
	.azfr-logo {
		height: 100px;
	}

  .bUpdates,
  .bUpdates strong {
    margin: 0 0 0 10px;
    padding: 25px 0;
    font-size: 20px;
    font-size: 2rem;
  }

  h3,
  h3 a:link,
  h3 a:visited,
  h3 a:active,
  h3 a:hover {
    font-size: 20px;
    font-size: 2rem;
  }

  .title {
    font-size: 36px;
    font-size: 3.6rem;
  }

  #wrap {
    padding-left: 0;
  }

  .footer-info {
    margin-top: 15px;
  }

  .featIcons,
  .featIcons a:link,
  .featIcons a:visited,
  .featIcons a:active,
  .featIcons a:hover {
    color: #fff;
    font-size: 40px;
    font-size: 4rem;
    padding: 50px 55px;
    border-radius: 100px;
    -moz-border-radius: 100px;
    text-align: center;
  }

  .education {
    background: #0000CD;
    padding: 50px 45px;
  }

  .legal {
    background: #FFD700;
    padding: 50px 50px;
  }

  .local {
    background: #32CD32;
    padding: 50px 65px;
  }

  .emergency {
    background: #FF8C00;
    padding: 50px 50px;
  }
}

@media screen and (max-width: 599px){


  #feedbackContact{
    flex-direction: column;
  }
}

@media screen and (min-width:600px){
  #feedbackContact{
    flex-direction: row;
  }

}

@media screen and (min-width:768px){

	.formSectionContainer{
		display: flex;
		justify-content: space-around;
	}
}

@media screen and (max-width: 767px) {
  .mItems {
    display: inline;
  }

  .iItems {
    display: none;
  }

  .navbar {
    padding: 10px;
  }
/*
  .videoFlexColumn{
    flex-direction:column;
  }
*/

}

@media screen and (max-width: 900px) {

  .videoFlexColumn{
    flex-direction:column;
  }


  #feedbackForm{
		display:flex;
		flex-direction: column-reverse;
	}

  #feedbackContact div div{
    display: flex;
    flex-direction: column;
    margin: auto;
  }

  #feedbackForm div{
    padding:0;
  }

  #feedbackForm .col-sm-8{
    padding-left:2rem;
  }

  #feedbackContact, #feedbackForm .col-sm-8{
    width:100%;
  }

  #feedbackContact{
    display: flex;
    justify-content: space-around;
  }
}

@media screen and (max-width:991px){

  .sectionIcons{
    height:36rem;
  }

  #carousel{
        left: 0;
  }

  .container{
    width:100vw;
  }

  #slides{
    height:12rem;
  }

  .quote-phrase{
    font-size:1.5rem !important;
  }

  #search{
    right: 0;
    left: initial;
  }

}


@media screen and (min-width:992px){
  .azfr-logo{
    margin-top: -3rem;
  }
}


@media screen and (min-width: 1000px) {

  #feedbackForm{
    display: flex;
    justify-content: space-between;
  }

  #FeedbackFormFirstChild{
    width: 90%;
    margin: auto;
  }

  #FeedbackForm h2{
    text-align:left;
  }

  #FeedbackForm p {
        margin-bottom: 3rem;
  }

  #FeedbackSub{
    margin-top:3rem !important;
  }

  #feedbackForm .col-sm-8{
    border-right:1px solid black;
  }

  .formInputContainer{
    text-align:center;
    width:100%;
  }

  .formInputContainer input,
  .formInputContainer textarea{
    width:80%;
    margin: auto auto 2rem;
  }
}

@media screen and (max-width:1024px) {

  #tawkToEmbHolder {
    bottom: 5rem;
    right: 2rem
  }

  #headerBannerText{
    text-align:center;
    color:white;
    max-width: 100%;
  }

  .noNegetiveMargin iframe {
    max-width: 100%;
  }

  #tawkImg {
    width: 14rem;
  }
}
@media screen and (min-width: 901px) and (max-width:1250px) {
  #videoWrapper{
    width:100%;
    margin-right:auto;
  }
  .videoWrapper iframe {
    height:100%;
  }
}


@media screen and (min-width: 1425px) {
  #tawkImg{
    width: 23rem;
  }
}