/*
--------------------------------------------------------------------------------------

	Quotes
	components.quotes.css

--------------------------------------------------------------------------------------
*/

.ou-quote {
  /*font-family: 'Montserrat Light';*/
  padding: 80px 30px 20px 30px;
  margin-bottom: 20px;
  background: url(icons/icon-quote-white.svg) 30px 20px no-repeat #0e56a7;
  background-size: 64px 64px;
  color: #fff;
  position: relative;
  font-size: 1em;
  margin: 0 0 15px 0;
  line-height: 160%;

}


#ou-region2 .ou-quote {
  padding: 75px 15px 20px 15px;
  margin: 0 0 20px 0;
  background: url(icons/icon-quote-white.svg) 15px 15px no-repeat #0e56a7;
  background-size: 64px 64px;
}


.ou-quote cite {
  margin: 15px 0 15px 0;
  color: #fff;
  background-color: transparent;
  font-style: normal;
  font-size: 1em;
  line-height: 140%;
  display: block;
}

.quote-img div{
	  overflow: auto;
}

.ou-quote a.ou-quote--button {
  color: #0e56a7;
  background-color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: 10px 15px;
  display: inline-block;
  margin: 0 5px 0 0;
  cursor: pointer;
  border: 0;
  text-align: center;
  line-height: 120%;
}

/*
.ou-quote.ou-bg-black a.ou-quote--button {
  color: #000000 ;
}
.ou-quote.ou-bg-dark-grey a.ou-quote--button {
  color: #262626 ;
}
.ou-quote.ou-bg-grey a.ou-quote--button {
  color: #4d4d4d ;
}
.ou-quote.ou-bg-dark-blue a.ou-quote--button {
  color: #072b54 ;
}
*/

.ou-quote a.ou-quote--button:hover {
  background-color: #000 ;
  color: #fff ;
  text-decoration: none;
}


/* to be depricated - just an ice4-5 fix */
.ou-quote a.ou-quote__more {
  color: #0e56a7;
  background-color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: 10px 15px;
  display: inline-block;
  margin: 0 5px 0px 0;
  cursor: pointer;
  border: 0;
  text-align: center;
  line-height: 120%;
}
/* to be depricated - just an ice4-5 fix */
.ou-quote a.ou-quote__more:hover,
.ou-quote a.ou-quote--button:hover{
  background-color: #000 ;
  color: #fff ;
  text-decoration: none;
}





/*
-------------------------------------------
    Pull quotes
-------------------------------------------
*/



.ou-quote.ou-pull-right img,
.ou-quote.ou-pull-right img {
  max-width: 100px;
}

.ou-quote.ou-pull-left,
.ou-quote.ou-pull-right {
  width: 40%;
  float: right;
  margin: 0 0 20px 20px;
  padding: 75px 15px 20px 15px;
  background: url(icons/icon-quote-white.svg) 15px 15px no-repeat #0e56a7;
  background-size: 64px 64px;
  
}

.ou-quote.ou-pull-left {
  width: 40%;
  float: left;
  margin: 0 20px 20px 0;
}

/* default colour is blue - or otherwise change to the theme colour */

.ou-theme--violet .ou-quote {
  background: url(icons/icon-quote-white.svg) 30px 20px no-repeat #7D55C7 ;
  background-size: 64px 64px;
}
.ou-theme--turquoise .ou-quote {
  background: url(icons/icon-quote-white.svg) 30px 20px no-repeat #068293 ;
  background-size: 64px 64px;
}
.ou-theme--orange .ou-quote {
  background: url(icons/icon-quote-white.svg) 30px 20px no-repeat #d34616 ;
  background-size: 64px 64px;
}
.ou-theme--pink .ou-quote {
  background: url(icons/icon-quote-white.svg) 30px 20px no-repeat #e21481 ;
  background-size: 64px 64px;
}


/* button link colours */
.ou-theme--violet .ou-quote a.ou-quote--button {
  color: #7D55C7;
}
.ou-theme--turquoise .ou-quote a.ou-quote--button {
  color:  #068293 ;
}
.ou-theme--orange .ou-quote a.ou-quote--button {
  color:  #d34616 ;
}
.ou-theme--pink .ou-quote a.ou-quote--button{
  color:  #e21481 ;
}
.ou-theme--violet .ou-quote a.ou-quote--button:hover,
.ou-theme--violet .ou-quote a.ou-quote__more:hover,
.ou-theme--pink .ou-quote a.ou-quote--button:hover,
.ou-theme--pink .ou-quote a.ou-quote__more:hover,
.ou-theme--blue .ou-quote a.ou-quote--button:hover,
.ou-theme--blue .ou-quote a.ou-quote__more:hover,
.ou-theme--orange .ou-quote a.ou-quote--button:hover,
.ou-theme--orange .ou-quote a.ou-quote__more:hover,
.ou-theme--turquoise .ou-quote a.ou-quote--button:hover,
.ou-theme--turquoise .ou-quote a.ou-quote__more:hover{
  background-color: #000 ;
  color: #fff ;
  text-decoration: none;
}




/* to be depricated - just an ice4-5 fix */
.ou-theme--violet .ou-quote a.ou-quote__more {
  color: #7D55C7;
}
.ou-theme--turquoise .ou-quote a.ou-quote__more {
  color:  #068293 ;
}
.ou-theme--orange .ou-quote a.ou-quote__more {
  color:  #d34616 ;
}
.ou-theme--pink .ou-quote a.ou-quote__more{
  color:  #e21481 ;
}

/*******************************/
/* LIGHT BG colour variants */
/*******************************/

.ou-quote.ou-quote--light {
  background: url(icons/icon-quote-blue.svg) 0px 0px  no-repeat #fff;
  background-size: 64px 64px;
  padding: 60px 0px 0px 0px ;
  background-color: #fff !important;
  color: #000;
}
.ou-quote.ou-quote--light  a.ou-quote--button {
  color: #fff;
  background-color: #0e56a7;
}



/* to be depricated - just an ice4-5 fix */
.ou-quote.ou-quote--light  a.ou-quote__more {
  color: #fff;
  background-color: #0e56a7;
}
.ou-quote.ou-quote--light  a.ou-quote__more:hover {
  background-color: #000;
}




/* Change colour of quotes to theme default */
.ou-theme--violet .ou-quote.ou-quote--light {
  background: url(icons/icon-quote-violet.svg) 0px 0px  no-repeat #fff;
  background-size: 64px 64px;
}
.ou-theme--pink .ou-quote.ou-quote--light {
  background: url(icons/icon-quote-pink.svg) 0px 0px  no-repeat #fff;
    background-size: 64px 64px;
}
.ou-theme--orange .ou-quote.ou-quote--light {
  background: url(icons/icon-quote-orange.svg) 0px 0px  no-repeat #fff;
    background-size: 64px 64px;
}
.ou-theme--turquoise .ou-quote.ou-quote--light {
  background: url(icons/icon-quote-turquoise.svg) 0px 0px  no-repeat #fff;
    background-size: 64px 64px;
}
.ou-theme--violet .ou-quote--light a.ou-quote--button {
  background-color: #7D55C7;
}
.ou-theme--turquoise .ou-quote--light a.ou-quote--button {
  background-color:  #068293 ;
}
.ou-theme--orange .ou-quote--light a.ou-quote--button {
  background-color:  #d34616 ;
}
.ou-theme--pink .ou-quote--light a.ou-quote--button{
  background-color:  #e21481 ;
}


/* button colour overrides*/
/* all block quote bg-colour override options */
.ou-quote.ou-bg-orange a.ou-quote--button {
  color: #d34616 ;
}
.ou-quote.ou-bg-blue a.ou-quote--button {
  color: #0e56a7 ;
 }
.ou-quote.ou-bg-pink a.ou-quote--button {
  color: #e21481 ;
}
.ou-quote.ou-bg-turquoise a.ou-quote--button {
  color: #068293 ;
}
.ou-quote.ou-bg-violet a.ou-quote--button {
  color: #7D55C7 ;
}

/*.ou-quote--turquoise, {
  background: url(icons/icon-quote-turquoise.svg) 0px 0px  no-repeat #fff;
    background-size: 64px 64px;
    padding: 65px 0px 0px 0px;
}*/



/*Region2 LIGHT variants*/
#ou-region2 .ou-quote.ou-quote--light {
  background: url(icons/icon-quote-blue.svg) 0px 0px  no-repeat  #fff ;
    background-size: 64px 64px;
  padding: 60px 0px 0px 0px;
}

.ou-theme--violet #ou-region2 .ou-quote.ou-quote--light {
  background: url(icons/icon-quote-violet.svg) 0px 0px  no-repeat #fff;
    background-size: 64px 64px;
}
.ou-theme--pink #ou-region2 .ou-quote.ou-quote--light {
  background: url(icons/icon-quote-pink.svg) 0px 0px  no-repeat #fff;
    background-size: 64px 64px;
}
.ou-theme--orange  #ou-region2 .ou-quote.ou-quote--light {
  background: url(icons/icon-quote-orange.svg) 0px 0px  no-repeat #fff;
    background-size: 64px 64px;
}
.ou-theme--turquoise #ou-region2 .ou-quote.ou-quote--light {
  background: url(icons/icon-quote-turquoise.svg) 0px 0px  no-repeat #fff;
    background-size: 64px 64px;
}


.ou-quote.ou-quote--light cite {
  color: #0e56a7;
  background-color: transparent;
}
.ou-theme--violet .ou-quote.ou-quote--light cite {
  color: #7D55C7;
}
.ou-theme--pink .ou-quote.ou-quote--light cite {
  color: #e21481;
}
.ou-theme--orange .ou-quote.ou-quote--light cite {
  color: #d34616;
}
.ou-theme--turquoise .ou-quote.ou-quote--light cite {
  color: #068293 ;
}

/* Change colour of quotes from default - even from theme colour*/
.ou-quote--turquoise,
.ou-quote--turquoise  #ou-region2{
 background: url(icons/icon-quote-turquoise.svg) 0px 0px  no-repeat #fff !important;
   background-size: 64px 64px !important;
}
.ou-quote--turquoise cite,
.ou-quote--turquoise #ou-region2 cite{
   color: #068293 !important;
}
.ou-quote--light.ou-quote--turquoise a.ou-quote--button {
  background-color: #068293;
}
.ou-quote--blue ,
.ou-quote--blue #ou-region2 {
 background: url(icons/icon-quote-blue.svg) 0px 0px  no-repeat #fff !important;
   background-size: 64px 64px !important;
}
.ou-quote--blue cite,
.ou-quote--blue #ou-region2 cite {
   color: #0e56a7 !important;
}
.ou-quote--light.ou-quote--blue a.ou-quote--button {
  background-color: #0e56a7;
}
.ou-quote--violet  ,
.ou-quote--violet #ou-region2 {
 background: url(icons/icon-quote-violet.svg) 0px 0px  no-repeat #fff !important;
   background-size: 64px 64px !important;
}
.ou-quote--violet cite,
.ou-quote--violet #ou-region2 cite {
   color:  #7D55C7 !important;
}
.ou-quote--light.ou-quote--violet a.ou-quote--button {
  background-color: #7D55C7;
}
.ou-quote--orange,
.ou-quote--orange #ou-region2 {
 background: url(icons/icon-quote-orange.svg) 0px 0px  no-repeat #fff !important;
   background-size: 64px 64px !important;
}
.ou-quote--orange cite,
.ou-quote--orange #ou-region2 cite{
   color:  #d34616 !important;
}
.ou-quote--light.ou-quote--orange a.ou-quote--button {
  background-color: #d34616;
}
.ou-quote--pink ,
.ou-quote--pink #ou-region2 {
 background: url(icons/icon-quote-pink.svg) 0px 0px  no-repeat #fff !important;
   background-size: 64px 64px !important;
}
.ou-quote--pink cite,
.ou-quote--pink #ou-region2 cite{
   color:  #e21481 !important;
}
.ou-quote--pink.ou-quote--light a.ou-quote--button {
  background-color: #e21481;
}

.ou-quote.ou-quote--light  a.ou-quote--button:hover {
  background-color: #000;
  color: #fff;
}



.ou-quote .ou-pull-right .ou-quote--light, 
.ou-quote .ou-pull-left .ou-quote--light, {
  background: url(icons/icon-quote-blue.svg) 0px 0px  no-repeat #fff;
    background-size: 64px 64px;
  padding: 65px 0px 0px 0px;
}




/*
-------------------------------------------
	Retina
-------------------------------------------
*/

/* tablet, desktop */

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px),
  only screen and (-o-min-device-pixel-ratio: 13/10) and (min-width: 768px),
  only screen and (min-resolution: 192dpi) and (min-width: 768px) {
 /* .ou-quote {
    background-image: url(icons/icon-quotemarks@2x.png);
    background-size: 50px 42px;
  }

  .ou-quote--light {
    background: url(icons/icon-quotemark-dark-blue.png) 15px 15px no-repeat #f33;
  }

*/
} /* end media query */

/* mobile */

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 767px),
  only screen and (-o-min-device-pixel-ratio: 13/10) and (max-width: 767px),
  only screen and (min-resolution: 192dpi) and (max-width: 767px) {
 
 /*.ou-quote {
    background-size: 25px 21px;
  }*/
} /* end media query */


  @media only screen and (max-width: 400px),
  only screen and (max-device-width: 400px) {
	
	
	.ou-quote.ou-pull-left,
	.ou-quote.ou-pull-right {
		width: 100%;
		float: none;
		margin: 0 0 20px 0;
		/*padding: 75px 15px 20px 15px;*/
	  }

  
  .ou-quote.ou-quote--light.ou-pull-right, 
  .ou-quote.ou-quote--light.ou-pull-left, {
	/*padding: 60px 0px 20px 0px ;*/
	width: 100%;
    float: none;
    margin: 0 0 20px 0;
  }  

  .ou-quote img {
    max-width: 120px;
  }
 
  
} /* end media query */
