
/********************************* TABS ************************************/
.tabs{
    width: 100%;
    margin: 0 auto;
    border: 0px solid black;
}

.tabs .container-fluid{
    padding: 0;
}

.tabs .row{
    padding: 0;
    margin: 0;
}

.tabs .col-sm-12{
    padding: 0;
}
/***************************************************************************/
/**************************** PRIMARY TABS ****************************************/
#tabs .nav-tabs{
    font-size: 3.8rem !important;
    font-family: 'Open Sans', Arial, sans-serif;
    color: #fff;
    font-weight: 600;
}
#tabs .nav-tabs p{
   font-size: 1.7rem !important;
   font-family: 'Open Sans', Arial, sans-serif;
   color: #fff;
   font-weight: 400;
   font-style: italic;
}
#tabs .nav-tabs li{
     width: 25%;
}
#tabs .nav-tabs > li > a {
    margin: 2px 1px;
}
/*********************** CURRENT STYLES FOR TABS TAB ******************************/
#tabs .nav a {
    position: relative;
    display: block;
    padding: 10px 15px;
    border-radius: 0;
    color: #fff;
    text-align: center;
    white-space: normal;
    background-color: #054A91;
    padding: 15px 0;
    border: 0;
}
#tabs .nav > li > a:hover {
    color: #fff;
    border: 0;
}
#tabs .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    font-family: 'Open Sans', Arial, sans-serif;
    color: #fff;
    cursor: default;
    background-color: #404547;
    border: 0;
}
#tabs .nav > li > a:hover, .nav > li > a:focus {
    color: #fff !important;
    background-color: #404547 !important;
    -webkit-transition: background-color 500ms ease-out 0.1s;
    -moz-transition: background-color 500ms ease-out 0.1s;
    -o-transition: background-color 500ms ease-out 0.1s;
    transition: background-color 500ms ease-out 0.1s;
    border: 0;

}
/***************************************************************/

/***************** YELLOW TAB ******************************
#tabs .nav .yellow a {
    position: relative;
    display: block;
    border-radius: 0;
    color: #fff;
    border: 0;
    text-align: center;
    white-space: normal;
    background-color: #CD9C12;
    padding: 25px 0;
}
#tabs .nav-tabs .yellow > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs .orange a:focus {
    font-family: 'Open Sans', Arial, sans-serif;
    color: #fff;
    cursor: default;
    background-color: #CD9C12 !important;
    border: 0px solid #ddd;
    border-bottom-color: transparent;
}
#tabs .nav .yellow a:hover, .nav .orange a:focus {
    background-color: #CD9C12 !important;
    -webkit-transition: background-color 500ms ease-out 0.1s;
    -moz-transition: background-color 500ms ease-out 0.1s;
    -o-transition: background-color 500ms ease-out 0.1s;
    transition: background-color 500ms ease-out 0.1s;
}
/***************************************************************/

/*********************** GREEN TAB ******************************
#tabs .nav .green a {
    position: relative;
    display: block;
    padding: 10px 15px;
    border-radius: 0;
    color: #fff;
    border: 0;
    text-align: center;
    white-space: normal;
    background-color: #284A14;
    padding: 25px 0;
}
#tabs .nav-tabs .green > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs .blue a:focus {
    font-family: 'Open Sans', Arial, sans-serif;
    color: #fff;
    cursor: default;
    background-color: #284A14;
    border: 0px solid #ddd;
    border-bottom-color: transparent;
}
#tabs .nav .green a:hover, .nav .blue a:focus {
    background-color: #284A14 !important;
    -webkit-transition: background-color 500ms ease-out 0.1s;
    -moz-transition: background-color 500ms ease-out 0.1s;
    -o-transition: background-color 500ms ease-out 0.1s;
    transition: background-color 500ms ease-out 0.1s;
}
/***************************************************************/

/*********************** BLUE TAB ******************************
#tabs .nav .blue a {
    position: relative;
    display: block;
    padding: 10px 15px;
    border-radius: 0;
    color: #fff;
    border: 0;
    text-align: center;
    white-space: normal;
    background-color: #153A5C;
    padding: 25px 0;
}
#tabs .nav-tabs .blue li.active  a, .nav-tabs .blue  li.active  a:hover, .nav-tabs .blue a:focus {
    font-family: 'Open Sans', Arial, sans-serif;
    color: #fff;
    cursor: default;
    background-color: #284A14 !important;
    border: 0px solid #ddd;
    border-bottom-color: transparent;
}
#tabs .nav .blue a:hover, .nav .blue a:focus {
    background-color: #284A14 !important;
    -webkit-transition: background-color 500ms ease-out 0.1s;
    -moz-transition: background-color 500ms ease-out 0.1s;
    -o-transition: background-color 500ms ease-out 0.1s;
    transition: background-color 500ms ease-out 0.1s;
}

#tabs .nav .active a {
    background-color: #284A14 !important;
}
#tabs .nav > li > a:hover, .nav > li > a:focus {
    color: #fff !important;
    background-color: #284A14 !important;
    -webkit-transition: background-color 500ms ease-out 0.1s;
    -moz-transition: background-color 500ms ease-out 0.1s;
    -o-transition: background-color 500ms ease-out 0.1s;
    transition: background-color 500ms ease-out 0.1s;

}
/***************************************************************/

/***************** RED TAB *****************************
#tabs .nav .red a {
    position: relative;
    display: block;
    border-radius: 0;
    color: #fff;
    border: 0;
    text-align: center;
    white-space: normal;
    background-color: #800000;
    padding: 25px 0;
}
#tabs .nav-tabs .red > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs .black a:focus {
    font-family: 'Open Sans', Arial, sans-serif;
    color: #fff;
    cursor: default;
    background-color: #800000 !important;
    border: 0px solid #ddd;
    border-bottom-color: transparent;
}
#tabs .nav .red a:hover, .nav .black a:focus {
    background-color: #800000 !important;
    -webkit-transition: background-color 500ms ease-out 0.1s;
    -moz-transition: background-color 500ms ease-out 0.1s;
    -o-transition: background-color 500ms ease-out 0.1s;
    transition: background-color 500ms ease-out 0.1s;
}
/***************************************************************/

#tabs .tab-pane{
    border: 0px solid #18102f;
    padding: 0;
    margin: 15px 10px;
}

#tabs .tab-content{
    background: #fff;
    padding: 20px 10px;
    border-top: 0px solid #18102f;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 125%;
}

/* Remove Comment to Enable Centered Tabs
.tabs .nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; 
     zoom:1; 
}
.tabs .nav-tabs, .nav-pills {
    text-align:center;
}
*/

.opacity {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.opacity:hover {
   opacity: 0.8;
}

/** Tooltips **/
#tabs .tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
}
#tabs .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #fff;
}
#tabs .tooltip-inner {
  color: #000;
  background: #fff;
  font-size: 1.1em;
}
#tabs .white-tooltip + .tooltip.top > .tooltip-arrow {background-color: #fff;}
/********************************/

/**************** TABS QUERIES ************************/
@media only screen and (max-width: 1440px) {
	
    #tabs .nav-tabs{
        font-size: 3.4rem !important;
     }
 
    #tabs .nav-tabs p{
       font-size: 1.4rem !important;
    }
	
}
@media only screen and (max-width: 1280px) {
	
    #tabs .nav-tabs{
        font-size: 3.00rem !important;
     }
	
}
@media only screen and (max-width: 1200px) {
	
    #tabs .nav-tabs{
        font-size: 2.8rem !important;
     }
     
    /***************** ORANGE TAB ********************/
    #tabs .nav .orange a {
        padding: 18px 0;
    }
    /***************** BLUE TAB **********************/
    #tabs .nav .blue a {
        padding: 18px 0;
    }
    /***************** PURPLE TAB ********************/
    #tabs .nav .purple a {
        padding: 18px 0;
    }
    /***************** BLACK TAB *********************/
    #tabs .nav .black a {
        padding: 18px 0;
    }
	
}
@media only screen and (max-width: 1128px) {

    #tabs .nav-tabs{
        font-size: 2.5rem !important;
     }
     
    #tabs .nav-tabs p{
       font-size: 1.1rem !important;
       padding: 0 5px;
    }
        
}
@media only screen and (max-width: 991px) {

    #tabs .nav-tabs{
        font-size: 1.8rem !important;
     }
     
    /***************** ORANGE TAB ********************/
    #tabs .nav .orange a {
        padding: 12px 0;
    }
    /***************** BLUE TAB **********************/
    #tabs .nav .blue a {
        padding: 12px 0;
    }
    /***************** PURPLE TAB ********************/
    #tabs .nav .purple a {
        padding: 12px 0;
    }
    /***************** BLACK TAB *********************/
    #tabs .nav .black a {
        padding: 12px 0;
    }
        
}
@media only screen and (max-width: 950px) {
    
    #tabs .nav-tabs p{
       display: none;
    }
        
}
@media only screen and (max-width: 850px) {

    #tabs .nav-tabs{
        font-size: 1.4rem !important;
     }
     
    /***************** ORANGE TAB ********************/
    #tabs .nav .orange a {
        padding: 16px 0;
    }
    /***************** BLUE TAB **********************/
    #tabs .nav .blue a {
        padding: 16px 0;
    }
    /***************** PURPLE TAB ********************/
    #tabs .nav .purple a {
        padding: 16px 0;
    }
    /***************** BLACK TAB *********************/
    #tabs .nav .black a {
        padding: 16px 0;
    }
        
}
@media only screen and (max-width: 667px) {

    #tabs .nav-tabs{
        font-size: 1.2rem !important;
    }
    
    #tabs .nav-tabs > li > a {
        margin: 1px 0px;
    }
     
    /***************** ORANGE TAB ********************/
    #tabs .nav .orange a {
        padding: 16px 0;
    }
    /***************** BLUE TAB **********************/
    #tabs .nav .blue a {
        padding: 16px 0;
    }
    /***************** PURPLE TAB ********************/
    #tabs .nav .purple a {
        padding: 16px 0;
    }
    /***************** BLACK TAB *********************/
    #tabs .nav .black a {
        padding: 16px 0;
    }
        
}
@media only screen and (max-width: 667px) {
    
    #tabs .nav-tabs li{
        width: 100%;
    }
    
    #tabs .nav-tabs{
        font-size: 1.8rem !important;
    }
    #tabs .nav a {
        padding: 5px 0;
    }
    #tabs .nav-tabs p{
       display: block;
       font-size: 1.5rem !important;
    margin: 0 0 0 10px;
    }
     
}
@media only screen and (max-width: 414px) {
    
    #tabs .nav-tabs{
        font-size: 1.5rem !important;
    }
    #tabs .nav-tabs p{
       display: block;
       font-size: 1.2rem !important;
    }
    
    /***************** ORANGE TAB ********************/
    #tabs .nav .orange a {
        padding: 11px 0;
    }
    /***************** BLUE TAB **********************/
    #tabs .nav .blue a {
        padding: 11px 0;
    }
    /***************** PURPLE TAB ********************/
    #tabs .nav .purple a {
        padding: 11px 0;
    }
    /***************** BLACK TAB *********************/
    #tabs .nav .black a {
        padding: 11px 0;
    }
     
}
/*************************************************************************/
