/**
 * Bootstrap firefox fix for fieldset
 */
@-moz-document url-prefix() {
    fieldset { display: table-cell; }
}

@font-face {
    /*font-family: 'Roboto';*/
    /*src: url('../fonts/Roboto-Regular.ttf') format('truetype');*/
    /*font-family: 'CormorantGaramond';*/
    /*src: url('../fonts/CormorantGaramond-Regular.ttf') format('truetype');*/
    font-family: 'Lora';
    src: url('../fonts/Lora-Regular.ttf') format('truetype');

}

*{
    font-family: Garamond, "Lora", serif;
}

body{
    /*font-size: 20px;*/
    font-size: calc(1.3vw);
    /*font-size: 17.7px;*/
    color:#4B4B4D;
}

h2{font-size:36px;}

a{
    color: #4B4B4D;
}

a:hover{
    color: #62B6CB;
}

/**
 * Global Container
 */

.global_wrapper{
    margin:0;
    padding:0;
    background-color: #62B6CB;
}

#header{
    padding-top:40px;
}
#container{
    padding-top:40px;
    padding-bottom: 40px;
}

/**
 * Top Menu *
 */
.slicknav_menu{
    background-color: #58B3CA;
    position: static;
    top: 0;
    width: 100%;
    z-index: 100;
}
.slicknav_nav{
    min-height:90vh;
}
#topmenu{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:10000;
    padding-top:10px;
    padding-bottom: 10px;
    padding-left:0 !important;
    padding-right:0 !important;
    background-color: #62B6CB;
}
#topmenu::before, #topmenu::after {
    content: " ";
    display: table;
}
#logo img{padding:5px 0;max-height:150px;}
#logo.hanging img{max-height:100px;}

#nav{
}
#nav li{
    background-color: transparent;
    padding:0;
}
#nav li a, #nav li a:hover, #nav li a.active{
    color:#FEFEFE;
    text-transform: uppercase;
    font-size:1.3em;
    font-weight:normal;
    padding:10px 16px;
    display:block;
    background-color: transparent;
    transition: background 0.2s;
}
#nav li a:hover, #nav li a.active{
    text-decoration:underline;
    color: #4B4B4D;
    /*background-color: #5694a8;*/
}
#nav ul{
    background: #62B6CB;
    /*border-left:2px solid #efefef;*/
}
.dropdown{
    background-color:transparent;
}
#nav .input_search{
    background-color: #62B6CB;
    border: 1px solid #FEFEFE;
    border-radius: 50px;
    color: #FEFEFE;
    text-align: center;
    padding:2px 20px;
    height:25px;
    margin-top:7px;
    width: 90%;
    font-size:1.1em;
    margin-left:20px;
}
#nav .input_search::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #FEFEFE !important;
    opacity: 1; /* Firefox */
}
.slicknav_nav a:hover{
    color: #fff;
}
.slicknav_nav a{
    outline: none !important;
}
ul.dropdown ul{
    min-width: 230px !important;
    width: auto;
}

.hr_title{
    border-bottom: 2px solid #62B6CB;;
    float: left;
    clear: both;
}

.hr_title_static{
    border-bottom: 2px solid #62B6CB;;
}

@-webkit-keyframes hr_title_animate {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@keyframes hr_title_animate {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

.section_title_group{
    position: relative;
    top: -40px;
    padding-bottom:70px;
    font-weight: bold;
}
.section_title span, .section_subtitle span{
    background-color: #FEFEFE;
    padding: 5px;
    font-size: 1em;
}
.section_title span{
    font-size: 0.8em;
    letter-spacing: 0.5em;
    padding-left: 18px;
}
.section_subtitle span{
    font-size: 2em;
    line-height: 0.6em;
    font-weight: normal;
}

/**
 * Panel
 */

.panel-scroll{
    max-height:300px;
    overflow:auto;
}
#panel_container, #filter_form{
    margin-bottom:10px;
    padding:0 10px;
}

#filter_form{
    background-color:#f6f6f6;
    padding:10px;
}

.page_title{
    font-style:italic;
    font-size:36px;
    text-align:right;
    padding-right:40px;
    color:#646473;
}

/**
 * Body
 */
#body_container{
    margin-bottom: 10px;
    padding:0 10px;
}

section{
    /* border-bottom:solid 1px #ccc; */
}

.carousel-inner img{
    width:100%;
}
.carousel-caption{
    left:10%;
    right:10%;
    background-color:transparent;
    opacity:0.9;
    top: 40%;
    /*transform: translateY(-50%);*/
    position: absolute;
    z-index: 10;
    color:#FEFEFE;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    font-weight:bold;
    font-size: calc(4.06061vw);
    height: calc(5.0505vw);
    box-sizing: border-box;
    padding:0;
}
.carousel-subcaption{
    font-weight:normal;
    /*font-size: 0.5em;*/
    font-size: calc(3.06061vw);
}

.carousel-indicators li{
    width: 20px;
    height:3px;
    border-radius: 5px;
    background-color: #FEFEFE;
}

.carousel-indicators .active{
    width: 20px;
    height:3px;
    margin-bottom:1px;
    background-color: #62B6CB;
    border: none;
}

.social, .social:hover{
    color:#ffffff;
    display: block;
    clear: both;
    margin-bottom: 10px;
}
.social:hover{
    /*background-color: #19253D;*/
}
.social img{
    float:left;
    margin-right: 20px;
    width:40px;
}
/**
 * Footer *
 */
#footer{
    background-color:#62B6CB;
    color:#ffffff;
    padding:10px;
    padding-bottom: 40px;
}

#main_footer {

    padding-top: 60px;
    padding-bottom: 40px;
    color:#ffffff;
}

#main_footer h3{
    font-size:1.3em;
}
#main_footer h4{
    font-size:1em;
}


a img{
    transition: all 1s ease-in-out 0s;
}
a:hover img{
    opacity: 0.7;
    /*transform: scale(1.1);*/
}

.modal-backdrop{
    z-index: 10000;
}
.modal{
    z-index: 10010;
}
.carousel-control.left,
.carousel-control.right{
    background: none;
}

.carousel-control{
    opacity:1;
}
.carousel-control:hover, .carousel-control:focus{
    opacity: 1;
}

.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right{
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
    opacity: 1;
    width: auto !important;;
}
.carousel-control .icon-prev{
    /*position: fixed;*/
    top:50%;
    /* left:10%; */
    left:35%;
}
.carousel-control .icon-next{
    /*position: fixed;*/
    top:50%;
    /* right:10%; */
    left:50%;
}
.img_slider .carousel-control .icon-prev{
    position: relative;
    left:5%;
}
.img_slider .carousel-control .icon-next{
    position: relative;
    right:5%;
}

/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb
*/
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity, transform ;
}

.carousel-fade .carousel-inner .active {
    opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-inner .next.left .carousel-caption,
.carousel-fade .carousel-inner .prev.right .carousel-caption{
    opacity: 0;
}

.carousel-fade .carousel-control {
    z-index: 2;
}

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0) scale(1);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0) scale(2);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0) scale(1);
    }
    .carousel-fade .carousel-inner > .item.active .carousel-caption{
        animation: fadeInDown 1s 1 forwards;
    }
}

a:hover{
    text-decoration: none;
}

.modal-lg, .modal-content{
    width:90%;
    margin:0 auto;
}
.modal-body{
    width: 70%;
    margin:0 auto;
}
.modal-body p{
    text-align:justify;
}

.modal-header{
    border-bottom: none;
}
.close{
    opacity: 1;
}

.modal-body{
    padding-bottom: 35px;
}