/*------------------------------------------------------------------------------------*/
/*------------------------------  CUSTOM CWB TEACH CSS STYLE  -----------------------------*/

.clearRight {
clear: right;


}
.clearLeft {
clear: left;


}
.darkGreyAlert {

margin: 20px 20px 20px 20px;
padding: 30px 30px 30px 30px; 

border: 1px solid #414a3f;
}

.lightGreyAlert {


padding: 30px 30px 30px 30px; 

border: 1px solid #eeeeee;
}

.lightGreyBGBox {

min-height: 10px;
max-height: 100%;

padding: 0px 30px 0px 30px;

background-color: #eeeeee;
}

.greyBorderLight {

background-color: transparent;
border: 1px solid #dddedf;
}


.black {

	text-decoration:none;
	color:#000000;
	font-weight: 700;
	font-size:18px;
	}
	
.red {

	text-decoration:none;
	color:#a14933;
	font-size:17px;
	}
	
	/* 285e84 - blue */
	
.blue {color: #1b537e;}
	
	.blue:hover , a .blue:active {color: #bed9e9;}
	
h4.service-title {font-size: 20px; color: #3e3c3c;}	
	
.largeWhite {font-size:20px;color:#fff;}


.borderTop {
border: 5px none none none;
border-style: solid none none none;
border-top-color: #bed9e9;
inherit: none;
}


.section-title h4 a .blue:hover , a .blue:active {color: #bed9e9;}


.darkMenu {
color: #777777;
}

.btn-mail {
    background-color: transparent;
   color: #cacac9;
    border: 1px solid #71706e
}

.btn-mail:hover,
.btn-mail:active,
.btn-mail:visited,
.btn-mail:focus {
border: 1px solid #cacac9;
color: #cacac9;
}

.btn-mail-dark {
    background-color: transparent;
   color: #9fa1a2;
    border: 1px solid #999999;
}

.btn-mail-dark:hover,
.btn-mail-dark:active,
/* .btn-mail-dark:visited, */
.btn-mail-dark:focus {
border: 1px solid #777777;
color: #285e84;
}

.Opac:hover {
	opacity: 0.7;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;

}

.OpacSyl {
	opacity: 0.7;}
	
.OpacSyl:hover {
	opacity: 1.0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;

}	
	

/* magnific stuff */

.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}

.white-popup {
  position: relative;
  background: #000;
  padding: 20px;
  width: auto;
  max-width: 700px;
  margin: 20px auto;
}


     /*  =============carosel=================== */
/* carousel */
#quote-carousel 
{
  padding: 0 10px 30px 10px;
  margin-top: 30px 0px 0px;
  background: none;
}

/* Control buttons  */
#quote-carousel .carousel-control
{
  background: none;
  color: #222;
  font-size: 2.3em;
  text-shadow: none;
  margin-top: 30px;
}
/* Previous button  */
#quote-carousel .carousel-control.left 
{
  left: -12px;
}
/* Next button  */
#quote-carousel .carousel-control.right 
{
  right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active 
{
  background: #333333;
}
#quote-carousel img
{
  width: 250px;
  height: 100px
}
/* End carousel */

.item blockquote {
    border-left: none; 
    margin: 0;
}

.item blockquote img {
    margin-bottom: 10px;
}

.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}



/**
  MEDIA QUERIES
*/

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    #quote-carousel 
    {
      margin-bottom: 0;
      padding: 0 40px 30px 40px;
      margin-top: 30px;
    }
    
}

/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) { 
    
    /* Make the indicators larger for easier clicking with fingers/thumb on mobile */
    
    #quote-carousel .carousel-indicators {
        bottom: -20px !important;  
    }
    #quote-carousel .carousel-indicators li {
        display: inline-block;
        margin: 0px 5px;
        width: 15px;
        height: 15px;
    }
    #quote-carousel .carousel-indicators li.active {
        margin: 0px 5px;
        width: 20px;
        height: 20px;
    }
}

/*    end carosel========================= */