@import url('https://use.fontawesome.com/releases/v5.0.7/css/all.css');

.iframe-container iframe {
  width: 100%;
	/*width: 100vw;*/
	min-height:75vh;
	border:0px;
}

@media (min-width: 467px) and  (max-width: 767px) {
    
.iframe-container iframe {
    min-height:100vh!important;
}    
}
@media (min-width: 767px) and  (max-width: 1024px) {
    
.iframe-container iframe {
    min-height:90vh!important;
}    
}

/* circle tabs*/
	


/* ocean */
	#nav-etape  .nav-bar-item.active > span.ocean {
		opacity:1;
		font-weight: 500 !important;
		color:#fff !important;
		
	}

	#nav-etape  .nav-bar-item > span.ocean {
		font-size:3em;
		padding:5px 20px;
		/*font-family: "Open Sans", sans-serif;*/
        font-family: "Roboto Slab", "Times New Roman", serif;
		font-weight:lighter;
		opacity:0.5;
		
	}
	
.tabs.ocean .nav-bar-item {
	padding:5px;
	/*line-height:normal !important;*/
}

.tabs.ocean .nav-bar .indicator {
  background-color: transparent !important; }

.tabs.ocean .tab-contents {
	margin-top:35px !important;
	
}
 
.tabs.ocean .nav-bar .nav-bar-item.active {
 
background-color: transparent !important;}

.tabs.ocean .tab-contents .tab-content.active {
 
background-color:transparent !important;}

	.nav-bar .nav-bar-item.active > span.ocean.ocean-o{background-color:#0077A0;}
	
.tab-box-o{
		width: 100% !important;
		border: 1px solid #0077A0;
		padding: 5px;
	}
	
	.tab-box-o.arrow-top:after{
	    /* z-index: -1; */
		position: absolute;
		top: -15px;
		left: 35px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #0077A0;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}
	
	.nav-bar .nav-bar-item.active > span.ocean.ocean-c{background-color:#E0541A;}
	.tab-box-c{
		width: 100% !important;
		border: 1px solid #E0541A;
		padding: 10px;
	}
	
	.tab-box-c.arrow-top:after{
	    /* z-index: -1; */
		position: absolute;
		top: -15px;
		left: 110px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #E0541A;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}
	
	.nav-bar .nav-bar-item.active > span.ocean.ocean-e{background-color:#423F8C;}
	.tab-box-e{
		width: 100% !important;
		border: 1px solid #423F8C;
		padding: 10px;
	}
	
	.tab-box-e.arrow-top:after{
	    /* z-index: -1; */
		position: absolute;
		top: -15px;
		left: 190px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #423F8C;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}
	
	.nav-bar .nav-bar-item.active > span.ocean.ocean-a{background-color:#009AA7;}
	.tab-box-a{
		width: 100% !important;
		border: 1px solid #009AA7;
		padding: 10px;
	}
	
	.tab-box-a.arrow-top:after{
	    /* z-index: -1; */
		position: absolute;
		top: -15px;
		left: 270px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #009AA7;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}
	
	.nav-bar .nav-bar-item.active > span.ocean.ocean-n{background-color:#BF215B;}
	.tab-box-u2{
		width: 100% !important;
		border: 1px solid #BF215B;
		padding: 10px;
	}
	
	.tab-box-u2.arrow-top:after{
	    z-index: -1;
		position: absolute;
		top: -15px;
		left: 350px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #BF215B;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}
	
	
	.lp-25{padding-left:25px}
	.tp-10{padding-top:10px}
	
	.oceanword-o, .letter-o{ color: #0077A0; font-size:2em; font-weight:500;}
	.oceanword-c, .letter-c{ color: #E0541A; font-size:2em; font-weight:500; } 
	.oceanword-e, .letter-e{ color: #423F8C; font-size:2em; font-weight:500; } 
	.oceanword-a, .letter-a{ color: #009AA7; font-size:2em; font-weight:500; } 
	.oceanword-n, .letter-n{ color: #BF215B; font-size:2em; font-weight:500; }
	
	.oceanword-a, .oceanword-o, .oceanword-c, .oceanword-e, .oceanword-n{font-size:1.5em;}

/* ---------- /ocean-------------- */

/* tabTXT */
	#nav-etape1  .nav-bar-item.active > span.tabTXT {
		opacity:1;
		font-weight: 500 !important;
		color:#fff !important;
		
	}

	#nav-etape1  .nav-bar-item > span.tabTXT {
		font-size:1.5rem;
		padding:5px;
		font-family: "Open Sans", sans-serif;
		font-weight:lighter;
		opacity:0.5;
		text-align: center !important;
	float:left;
	line-height:1.5em !important;
		
	
	}
	
.tabs.tabTXT .nav-bar-item {
	padding:5px;
	/*width:20%;
   line-height:normal !important;*/
}


.tabs.tabTXT .nav-bar-item strong {
	font-size: inherit !important;
		
	/*line-height:normal !important;*/
}


.tabs.tabTXT .nav-bar .indicator {
  background-color: transparent !important; }

.tabs.tabTXT .tab-contents {
	margin-top:15px !important;
	
	
}
 
.tabs.tabTXT .nav-bar .nav-bar-item.active {
 
background-color: transparent !important;}

.tabs.tabTXT .tab-contents .tab-content.active {
 
background-color:transparent !important;}

	.nav-bar .nav-bar-item.active > span.tabTXT.tabTXT-u1{background-color:#0077A0;}
	
.tabTXT-box-u1{
		width: 100% !important;
		border: 1px solid #0077A0;
		padding: 5px;
	}
	
	.tabTXT-box-u1.arrow-top:after{
	    /* z-index: -1; */
		position: absolute;
		top: -15px;
		/*left: 130px;*/
		left:70px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #0077A0;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}
	

	.nav-bar .nav-bar-item.active > span.tabTXT.tabTXT-u2{background-color:#423F8C;}
	.tabTXT-box-u2{
		width: 100% !important;
		border: 1px solid #423F8C;
		padding: 10px;
	}
	
	.tabTXT-box-u2.arrow-top:after{
	    /* z-index: -1; */
		position: absolute;
		top: -15px;
		/*left: 400px;*/
		left:19%;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #423F8C;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}

	.nav-bar .nav-bar-item.active > span.tabTXT.tabTXT-u3{background-color:#03538E;}
	.tabTXT-box-u3{
		width: 100% !important;
		border: 1px solid #03538E;
		padding: 10px;
	}
	
	.tabTXT-box-u3.arrow-top:after{
	    /* z-index: -1; */
		position: absolute;
		top: -15px;
		/*left: 680px;*/
		left:360px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #03538E;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}

	.nav-bar .nav-bar-item.active > span.tabTXT.tabTXT-u4{background-color:#E0541A;}
	.tabTXT-box-u4{
		width: 100% !important;
		border: 1px solid #E0541A;
		padding: 10px;
	}
	
	.tabTXT-box-u4.arrow-top:after{
	    /* z-index: -1; */
		position: absolute;
		top: -15px;
		left: 500px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #E0541A;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}
	
	.nav-bar .nav-bar-item.active > span.tabTXT.tabTXT-u5{background-color:#BF215B;}
	.tabTXT-box-u5{
		width: 100% !important;
		border: 1px solid #BF215B;
		padding: 10px;
	}
	
	.tabTXT-box-u5.arrow-top:after{
	    /* z-index: -1;*/
		position: absolute;
		top: -15px;
		left: 650px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #BF215B;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}

.nav-bar .nav-bar-item.active > span.tabTXT.tabTXT-u6{background-color:#666666;}
	.tabTXT-box-u6{
		width: 100% !important;
		border: 1px solid #666666;
		padding: 10px;
	}
	
	.tabTXT-box-u6.arrow-top:after{
	    /* z-index: -1;*/
		position: absolute;
		top: -15px;
		left: 800px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #666666;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}

	
	.tabTXTword-u1, .letter-u1{ color: #0077A0; }
	.tabTXTword-u2, .letter-u2{ color: #423F8C; } 
	.tabTXTword-u3, .letter-u3{ color: #03538E; } 
	.tabTXTword-u4, .letter-u4{ color: #E0541A; } 
	.tabTXTword-u5, .letter-u5{ color: #BF215B; }
	.tabTXTword-u6, .letter-u6{ color: #666666; }
	
	.tabTXTword-u1, .tabTXTword-u2, .tabTXTword-u3, .tabTXTword-u4, .tabTXTword-u5, .tabTXTword-u6{font-size:2em; font-weight:500; padding-bottom:15px;}

/* ---------- /tabTXT-------------- */

/*------------savoir tabs--*/
	.nav-bar .nav-bar-item.active > span.tabTXT.tabTXT-s{background-color:#BF215B;}
	
.tabTXT-box-s{
		width: 100% !important;
		border: 1px solid #BF215B;
		padding: 5px;
	}
	
	.tabTXT-box-s.arrow-top:after{
	    /* z-index: -1; */
		position: absolute;
		top: -15px;
		/*left: 130px;*/
		left:60px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #BF215B;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}
	

	.nav-bar .nav-bar-item.active > span.tabTXT.tabTXT-a{background-color:#E0541A;}
	.tabTXT-box-a{
		width: 100% !important;
		border: 1px solid #E0541A;
		padding: 10px;
	}
	
	.tabTXT-box-a.arrow-top:after{
	    /* z-index: -1; */
		position: absolute;
		top: -15px;
		left: 220px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #E0541A;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}

	.nav-bar .nav-bar-item.active > span.tabTXT.tabTXT-v{background-color:#423F8C;}
	.tabTXT-box-v{
		width: 100% !important;
		border: 1px solid #423F8C;
		padding: 10px;
	}
	
	.tabTXT-box-v.arrow-top:after{
	    /* z-index: -1; */
		position: absolute;
		top: -15px;
		left:410px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #423F8C;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}

    .tabTXTword-s, .letter-s{ color: #BF215B; }
	.tabTXTword-a, .letter-a{ color: #E0541A; } 
	.tabTXTword-v, .letter-v{ color: #423F8C; } 
	
	
	.tabTXTword-s, .tabTXTword-a, .tabTXTword-v{font-size:2em; font-weight:500; padding-bottom:15px;}

/*------------savoir tabs--*/
/*-----------Qustion tabs new---------------*/

.tabs.questionTab_new .nav-bar .nav-bar-item.active {
  font-size: 1rem;
  background-color: transparent;

		}

.tabs.questionTab_new .tab-contents .tab-content.active {
  padding: 5px;
  background-color: transparent;
border: 1px solid #0077A0;
		}

.tabs.questionTab_new .tab-contents {
  margin-top:20px; }

.tabs.questionTab+new .nav-bar .indicator {
  background-color: transparent; }


.tab-box-questionTab_pos, .tab-box-questionTab_int, .tab-box-questionTab_new3, .tab-box-questionTab_new4{
		width: 100% !important;
		border: 1px solid #0077A0;
		padding: 5px;
	}
	
	.tab-box-questionTab_pos.arrow-top:after, .tab-box-questionTab_int.arrow-top:after, .tab-box-questionTab_new3.arrow-top:after, .tab-box-questionTab_new4.arrow-top:after{
	    /* z-index: -1; */
		position: absolute;
		 top: -15px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-bottom: solid 15px #0077A0;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
	}

.tab-box-questionTab_pos.arrow-top:after{
	   	left: 85px;
		
	}

.tab-box-questionTab_int.arrow-top:after{
	   left: 300px;
		
	}

.tab-box-questionTab_new3.arrow-top:after{
	   left: 510px;
		
	}

.tab-box-questionTab_new4.arrow-top:after{
	   left: 720px;
		
	}


/*-----------/Qustion tabs new---------------*/

/*-----------BD tabs---------------*/

.tabs.bdTab_new .nav-bar .nav-bar-item.active {
  font-size: 1rem;
  background-color: transparent;

		}

.tabs.bdTab_new .tab-contents .tab-content.active {
  padding: 5px;
  background-color: transparent;
/*border: 1px solid #423F8C;*/
		}

.tabs.bdTab_pos .tab-contents .tab-content.active {
 
border: 1px solid #E0541A ;
		}


.tabs.bdTab_int .tab-contents .tab-content.active {
border: 1px solid #009AA7;
		}
.tabs.bdTab_new .tab-contents {
  margin-top:8px; }

.tabs.bdTab_new .nav-bar .indicator {
  background-color: transparent; }


.tab-box-bdTab_tab1, .tab-box-bdTab_tab2, .tab-box-bdTab_tab3, .tab-box-bdTab_tab4{
		width: 100% !important;
		padding: 5px;
	}

.tab-box-bdTab_tab1 {
		
		border: 1px solid #03538E ;
		
	}

.tab-box-bdTab_tab2{
		
		border: 1px solid #E0541A;
		
	}

.tab-box-bdTab_tab3{
		
		border: 1px solid #6757A5 !important;
		
	}

.tab-box-bdTab_tab4{
		
		border: 1px solid #BF215B !important;
		
	}
	
	.tab-box-bdTab_tab1.arrow-top:after, .tab-box-bdTab_tab2.arrow-top:after, .tab-box-bdTab_tab3.arrow-top:after, .tab-box-bdTab_tab4.arrow-top:after{
	    /* z-index: -1; */
		position: absolute;
		 top: -15px;
		margin-left: -10px;
		content: '';
		width: 0;
		height: 0;
		border-left: solid 15px transparent;
		border-right: solid 15px transparent;
		
		
	}

.tab-box-bdTab_tab1.arrow-top:after{
	   	left: 15%;
		border-bottom: solid 15px #03538E;
		
		
	}

.tab-box-bdTab_tab2.arrow-top:after{
	   left: 50%;
	border-bottom: solid 15px #E0541A;
		
		
	}

.tab-box-bdTab_tab3.arrow-top:after{
	   left: 82%;
	border-bottom: solid 15px #423F8C;
	
		
	}

.tab-box-bdTab_tab4.arrow-top:after{
	   left: 620px;
		border-bottom: solid 15px #BF215B;
	}


/*-----------/bdTab---------------*/

/*----------- container-----------*/

.padding-0-20 {padding: 0px 20px;}


.border-teal {border:1px solid #0092b3;
	
}


.container-center {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center;
background-color: rgba(214,214,214,.1);

}
.container-center h4 {
  margin:0;
text-align: center;
	cursor: pointer;
font-size:1.6em;
	font-weight: 600;
	
}

/*-------------down arrow------------*/

.down-arrow:after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: calc( 50% - 20px );
    bottom: -20px;
    border-top: 20px solid #0092b3;
    border-right: 20px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 20px solid transparent;
    z-index: 10;
    transition: border-top-color 0.3s;
}
	

/*-----------imgHotspot------*/

.rond-Know_1, .rond-Know_2, .rond-Know_3, .rond-Know_4, .rond-Know_5, .rond-Know_6 {
  position: absolute;
  width: 20%;
  height: 12%;
  z-index: 9;
  background-color: #000;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s; 
	
}

.rond-Know_1 {
  top:5%;
  left: 10%;
}
	
.rond-Know_2 {
  top: 12.5%;
  left: 44%;
 }

.rond-Know_3 {
   top: 31.5%;
  left: 64%;
 }

.rond-Know_4 {
  top: 54%;
  left: 64%;
   }

.rond-Know_5 {
  top: 73%;
  left: 44%;
 }

.rond-Know_6 {
   top:80%;
  left: 10%;
  }

.rond-Know_1:hover,
.rond-Know_2:hover,
.rond-Know_3:hover,
.rond-Know_4:hover,
.rond-Know_5:hover,
.rond-Know_6:hover{
  opacity: 0.2; }


#imgKnow_2,
#imgKnow_3,
#imgKnow_4,
#imgKnow_5,
#imgKnow_6,
#imgKnow_2-section,
#imgKnow_3-section,
#imgKnow_4-section,
#imgKnow_5-section,
#imgKnow_6-section{
  display: none; }

/************ horizontal accordeom**************/
.content-hor {
    width:960px;
    height:0px;
    margin-right: auto;
    margin-left: auto;
}
.panel-group-hor {
    width:230px;
    z-index: 100;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(-100%) rotate(-90deg);
    -webkit-transform-origin: right top;
    -moz-transform: translateX(-100%) rotate(-90deg);
    -moz-transform-origin: right top;
    -o-transform: translateX(-100%) rotate(-90deg);
    -o-transform-origin: right top;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top;
}
.panel-heading-hor {
    width: 230px;
}
.panel-title-hor {
    height:18px
}
.panel-title-hor a {
    float:right;
    text-decoration:none;
    padding: 10px 100px;
    margin: -10px -100px;
}
.panel-body-hor {
    height:430px;
}
.panel-group-hor img {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0%) rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: translateX(0%) rotate(90deg);
    -moz-transform-origin: left top;
    -o-transform: translateX(0%) rotate(90deg);
    -o-transform-origin: left top;
    transform: translateX(0%) rotate(90deg);
    transform-origin: left top;
}
.textRotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: 80px !important;
    padding-top: 70px !important;
    width: 350px !important;
    
}
.panel-group-hor .panel-hor img {
    margin-left:300px;
    position: absolute;
}

/**************** 3 Etapes ************/
ul.timeline-circle {
    list-style-type: none;
    position: relative;
}
ul.timeline-circle:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 5px;
    height: 100%;
    z-index: 400;
}
ul.timeline-circle > li {
    margin: 20px 0;
    padding-left: 20px;
}
ul.timeline-circle > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #0077A0;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}

/**************** 3 Etapes ************/
.step-heading {
    /*height: 3em;*/
    padding-bottom: 30px;
    cursor: pointer;
}
.step:last-child .step-heading {
    padding-bottom: 0;
}
.step-heading > a:hover {
    text-decoration: none;
}
.step-heading .num {
    width: 60px;
    height: 60px;
    font-size:3rem;
}
.steps .step .bg-line {
    border-left: 5px solid rgba(223,225,223,.3);
    left: 28px;
    bottom: -20px;
    top: 60px;
   
}

/*-----------------rotating cards -----------*/
.rotating-card-container {
  -webkit-perspective: 800px;
  -o-perspective: 800px;
  -ms-perspective: 800px;
  perspective: 800px; }
  .rotating-card-container .card-rotate {
    background: transparent;
    -webkit-box-shadow: none;
            box-shadow: none; }
    .rotating-card-container .card-rotate:after {
      display: none; }
  .rotating-card-container .card {
    -webkit-transition: transform 0.8s cubic-bezier(0.34, 1.45, 0.7, 1);
    -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.34, 1.45, 0.7, 1);
    transition: -webkit-transform 0.8s cubic-bezier(0.34, 1.45, 0.7, 1);
    transition: transform 0.8s cubic-bezier(0.34, 1.45, 0.7, 1);
    transition: transform 0.8s cubic-bezier(0.34, 1.45, 0.7, 1), -webkit-transform 0.8s cubic-bezier(0.34, 1.45, 0.7, 1);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative; }
    .rotating-card-container .card .back, .rotating-card-container .card .front {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
              box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      position: absolute;
      background-color: #FFFFFF;
      border-radius: 6px;
      top: 0;
      left: 0; }
      .rotating-card-container .card .back .card-content, .rotating-card-container .card .front .card-content {
        height: 100%;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
        display: -moz-flex;
        display: -ms-flexbox;
        display: -o-flex;
        display: -webkit-box;
        display: flex;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column; }
    .rotating-card-container .card .front {
      z-index: 2;
      position: relative; }
    .rotating-card-container .card .back {
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      z-index: 5;
      width: 100%;
      height: 100%; }
      .rotating-card-container .card .back.back-background:after {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: block;
        left: 0;
        top: 0;
        content: "";
        background-color: rgba(0, 0, 0, 0.56);
        border-radius: 6px; }
      .rotating-card-container .card .back.back-background .card-content {
        position: relative;
        z-index: 2; }
      .rotating-card-container .card .back .footer .btn {
        margin: 0; }
      .rotating-card-container .card .back .card-content {
          
        padding-left: 15px;
        padding-right: 15px; }
  .rotating-card-container:not(.manual-flip):hover .card {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  .rotating-card-container.hover.manual-flip .card {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  .card-profile .rotating-card-container .front {
    text-align: left; }

/*       Fix bug for IE      */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .rotating-card-container .card .front,
  .rotating-card-container .card .back {
    -webkit-backface-visibility: visible;
            backface-visibility: visible; }

  .rotating-card-container .card .back {
    visibility: hidden;
    -webkit-transition: visibility 0.3s cubic-bezier(0.34, 1.45, 0.7, 1);
    transition: visibility 0.3s cubic-bezier(0.34, 1.45, 0.7, 1); }

  .rotating-card-container .card .front {
    z-index: 4; }

  .rotating-card-container:not(.manual-flip):hover .card .back,
  .rotating-card-container.manual-flip.hover .card .back {
    z-index: 5;
    visibility: visible; } }


/********* flip*******/
/* from: https://davidwalsh.name/css-flip  */
table.custom, section.custom {
  /* flip the pane when hovered */
  /* front pane, placed above back */
  /* back, initially hidden pane */
}
table.custom .up, section.custom .up {
  /*color: transparent;*/
    color:red;
}
table.custom .card, section.custom .card {
  text-align: center;
  color: #FFFFFF;
  width: 100%;
  /*height: 300px;*/
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: relative;
  /*background-color: transparent;*/
}
section.custom .card {
 /*height: 450px;
  background-color:rgba(0,154,167,.1);*/
}
table.custom .flipper, section.custom .flipper {
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 10px;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
table.custom .flipper.flip .card, section.custom .flipper.flip .card {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
table.custom .front,
table.custom .back,
section.custom .front,
section.custom .back
{
  width: 100%;
  padding: 5px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;

}

section.custom .front img, section.custom .back img {
    position:absolute;
    top:0%;    
    left:0;
    padding:0;
   
}

section.custom .front footer, section.custom .back footer {
    position:absolute;
    top:80%;   
    left:25%;
    right:25%;
            
}

@media (min-width: 467px) and  (max-width: 767px) {
    
section.custom .front footer, section.custom .back footer {
left:25%;
 top:80%;    
 right:25%;
}
}    

@media (min-width: 767px) and  (max-width: 1024px) {
    
section.custom .front footer, section.custom .back footer {
left:25%;
 top:70%;   
right:25%;   
}
}    

table.custom .front, section.custom .front{
  z-index: 2;
  /* for firefox 31 */
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  height: 100%;
}
table.custom .back, section.custom .back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  height: 100%;
    /*align-content: center !important;*/
}
table.custom .goback, section.custom .goback {
  position: absolute;
  bottom: 0px;
  padding-left: 20px;
  left: 0px;
  text-decoration: underline;
  cursor: pointer;
}

/* Common styles for all type boxes */
.bs-callout {
  padding: 20px !important;
 background-color:rgba(234,234,234,.2);
 border: 1px solid transparent;
  border-left-width: 5px;
 
}

.bs-callout p {
 font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  /*font-size: 20px !important;*/
  line-height: 1.5 !important;

}

.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code {
  border-radius: 3px;
}

/* Tighten up space between multiple callouts */
.bs-callout + .bs-callout {
  margin-top: -5px;
}

/* Variations */
.bs-callout-danger {
  border-left-color: #c9302c;
}
.bs-callout-danger h4 {
  color: #c9302c;
}
.bs-callout-warning {
  border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
  color: #f0ad4e;
}
.bs-callout-primary {
  border-left-color: #0077A0;
}
.bs-callout-primary h4 {
  color: #0077A0;
}

.bs-callout-info {
  border-left-color: #5bc0de;
}
.bs-callout-info h4 {
  color: #5bc0de;
}

.bs-callout-success {
  border-left-color: #4caf50;
}
.bs-callout-success h4 {
  color: #4caf50;
}
.bs-callout-blue {border-left-color:#03538E !important;}
.bs-callout-orange {border-left-color:#E0541A !important;}
.bs-callout-dark-blue {border-left-color:#1C2B39 !important;}
.bs-callout-green {border-left-color: #8cc63f !important;}
.bs-callout-red {border-left-color:#A50C0C !important;}
.bs-callout-purple {border-left-color: #423F8C  !important;}
.bs-callout-dark-red {border-left-color:#a72118 !important;}
.bs-callout-turquoise {border-left-color: #00A9B7 !important;}
.bs-callout-teal {border-left-color: #009AA7!important;}
.bs-callout-coral {border-left-color: #BF215B!important;}

.bs-callout-dark-red h4 {color:#a72118}
/*----------- quotes -----------------*/

.quote-card {
 /* color: #222222;
  padding: 20px;*/
  padding-left: 50px;
  /*box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(34, 34, 34, 0.12);*/
  position: relative;
  /*overflow: hidden;*/
  min-height: 120px;
}
.quote-card p {
  font-family: "Roboto Slab", "Times New Roman", serif;
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  width:90%;
	padding-top:40px;
  padding-left:30px;
	padding-bottom:10px
	
}
.quote-card cite {
  font-size: 16px;
  margin-top: 10px;
  display: block;
  font-weight: 200;
  opacity: 0.8;
}
.quote-card:before {
 font-family: "Roboto Slab", "Times New Roman", serif; 
	/*font-family: Georgia, serif;
  content: "“";*/
content: "«";
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 5em;
  /*color: rgba(238, 238, 238, 0.8);*/
	 color: #fff;
  font-weight: normal;
	padding-top:3px;
}
.quote-card:after {
   font-family: "Roboto Slab", "Times New Roman", serif; 
	/*font-family: Georgia, serif;
  content: "”";*/
  content: "»";
  position: absolute;
  bottom:10px;
	/*bottom: -110px;*/
  line-height: 20px;
  right: 10px;
/*top:40px;*/
  font-size: 6em;
  color: #fff;
  font-weight: normal;

}

.quote-card-black:before, .quote-card-black:after  {
	color: #999;
}


@media (max-width: 640px) {
  .quote-card:after {
    font-size: 5em;
    right: -25px;
  }
}
.quote-card.blue-card {
  background: #0078FF;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24);
}
.quote-card.blue-card:before, .quote-card.blue-card:after {
  color: #5FAAFF;
}
.quote-card.green-card {
  background: #00970B;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24);
}
.quote-card.green-card:before, .quote-card.green-card:after {
  color:#59E063 ;
}

.quote-card.red-card {
  background: #F61E32;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24);
}
.quote-card.red-card:before, .quote-card.red-card:after {
  color:#F65665 ;
}

.quote-card.yellow-card {
  background: #ff9f1e;
  color: #222222;
  box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24);
}
.quote-card.yellow-card:before, .quote-card.yellow-card:after {
  color: #FF9F1E;
}
.cart-notification-count {

background-color: #a72118;
font-size: .85rem;
position: absolute;
padding: 0px;
top: 1%;
right:13%;
border-radius: 0px;
/*height: 1.5rem;*/
width: 1rem;
text-align: center;
font-weight: bold;
    color:#fff;
}

.pulse-container {
  display: flex;
}
.pulse-button {
  /*position: relative;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;*/
  margin-left:5%;
  display: block;
  width: 130px;
  height: 110px;
  font-size: 1.25rem;
  font-weight: bold;
  font-family: "Roboto Slab", "Times New Roman", serif;
  /*text-transform: uppercase;*/
  text-align: center;
  line-height: 20px;
  letter-spacing: 1.15px;
  color: #333333;
  border: none;
  border-radius: 50%;
  background: rgba(127,191,54,1.00);
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(#7fbf36, .5);
  -webkit-animation: pulse 1.5s infinite;
    -moz-animation: pulse 1.5s infinite;

}

.pulse-button:hover {
  -webkit-animation: none;
}

/* Animation */
@keyframes pulse {
	0% {
		transform: scale(0.9);
		box-shadow: 0 0 0 0 rgba(127,191,54,.7);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 50px rgba(127,191,54, 0);
	}
	
	100% {
		transform: scale(0.9);
		box-shadow: 0 0 0 0 rgba(127,191,54, 0);
	}
}