@font-face {
    font-family                 : ArialNarrowBold;
    src                         : url("../src/ArialNarrowBold.ttf");
    font-weight                 : 400;
}

body{
    position                    : relative;
    height                      : 100%;
}
*{
    font-family                 : 'Open Sans', sans-serif;
}
    

/* Page Header */
#logo {
    position                    : relative;
    text-align                  : center;
    overflow                    : hidden;
}
#logo.home{
    background-color            : #0075c2;
}
#logo img.udc, #logo img.rockside, #logo.ceylon img.logo{
    width                       : 40%;
    position                    : absolute;
    top                         : 10%;
    left                        : 30%;
    margin                      : 0 auto;
    display                     : block;
    vertical-align              : middle;
}
#logo img.rockside{
    top                         : 20%;
    left                        : 25%;
    width                       : 50%;
}

#logo.ceylon img.logo{
    width                       : 50%;
    left                        : 25%;
}

#logo.diving img.cover{
    width                       : 120%;
    margin                      : -5%;
}

#logo.ceylon img.cover{
    width                       : 100%;
    margin-top                  : 0px;
    margin-bottom               : 0px;
}

#logo.hotel img.cover{
    width                       : 120%;
    margin                      : -5%;
}

#logo.home img.cover {
    width                       : 110%;    
    max-width                   : 1000px;
    margin                      : 0 -5%;
}

#coverImg{
    position                    : relative;
}

/* Content Panel */
#content{
    margin-top                  : 90px;
}
#content #pageContent p{
    font-size                   : 18px;
    line-height                 : 1.5em;
}
#content #pageContent .section>p,#content #pageContent .section>h2,#content #pageContent .section>h3,#content #pageContent .section>h4{
    padding-left                : 10px;
    padding-right               : 10px;
}

/* Big Picture */
#content #pageContent .section{
    position                    : relative;
    overflow                    : hidden;
    background                  : #124982;
    color                       : #fff;
    margin-bottom               : 20px;
}
#content #pageContent .section .title a{
    color                       : white;
}
#content #pageContent .section.white .title a{
    color                       : black;
}
#content #pageContent .section.white{
    background                  : none;
    background                  : initial;
    color                       : #000;
}
#content #pageContent .section.frame{
    margin-top                  : 15px;
    margin-bottom               : 15px;
}
#content #pageContent .section .content{
    padding                     : 50px;
}
#content #pageContent .section .menu{
    background                  : rgba(0, 0, 0, 0.7);
    border-top                  : #fff solid 1px;
}
#content #pageContent .section .menu ul,#content #pageContent .section .menu li{
    display                     : inline-block;
}
#content #pageContent .section .menu.right{
    text-align                  : right;
}
#content #pageContent .section .menu ul li a {
    padding                     : 10px;
    color                       : white;

    -moz-transition             : all .3s;
    -o-transition               : all .3s;
    -webkit-transition          : all .3s;
    transition                  : all .3s;
}
#content #pageContent .section .menu ul li a:hover{
    background                  : rgba(255,255,255,.5);
    color                       : #fff;
}
#content #pageContent .section .background{
    position                    : absolute;
    top                         : 0;
    left                        : 0;
    right                       : 0;
    bottom                      : 0;
    background-size             : cover;
    background-repeat           : no-repeat;
    background-position         : center; 
}
/*#content #pageContent .section .background{
    position                    : relative;
    min-height                  : 200px;
}*/
#content #pageContent .section .background img{
    width                       : 100%;
    min-width                   : 700px;
}
#content #pageContent .section .cover{
    padding-left                : 15px;
    padding-right               : 15px;
    padding-top                 : 15px;
}
#content #pageContent .section .transparent{
    background                  : rgba(0,0,0,.7);
}
#content #pageContent .section .transparent.light,#content #pageContent .section.white .transparent{
    background                  : rgba(255,255,255,.7);
}
#content #pageContent .section a{
}

#content #pageContent .section .cover img{
    width                       : 100%;
}
#content #pageContent .section .full{
    text-align                  : center;
    padding-top                 : 20px;
    padding-bottom              : 20px;
    min-height                  : 250px;
}

#content #pageContent .section .features{
    list-style                  : none;
    text-align                  : left;
    font-size                   : 150%;
    padding-left                : 0;
    padding-bottom              : 50px;
}
#content #pageContent .section .features.small{
    font-size                   : 100%;
}
#content #pageContent .section .features .glyphicon.glyphicon-ok-circle{
    color                       : rgb(0, 180, 0);
}

/*#content #pageContent #accordion .collapsible:first-child {
    -moz-border-radius          : 10px 10px 0 0;
    -webkit-border-radius       : 10px 10px 0 0;
    border-radius               : 10px 10px 0 0;
}
#content #pageContent #accordion .collapsible:last-child {
    -moz-border-radius          : 0 0 10px 10px;
    -webkit-border-radius       : 0 0 10px 10px;
    border-radius               : 0 0 10px 10px;
}*/
#content #pageContent .section.collapsible {
    padding                     : 0;
    margin-bottom               : 0;
    -moz-border-radius          : 0;
    -webkit-border-radius       : 0;
    border-radius               : 0;
}
#content #pageContent .section.collapsible .head{
    padding                     : 5px 10px 10px 10px;
    border-bottom               : 3px solid rgba(255,255,255,.5);
    cursor                      : pointer;
}
#content #pageContent .section.collapsible .body{
    padding-top                 : 20px;
    border-bottom               : 3px solid rgba(255,255,255,.5);
}
#content #pageContent .section.collapsible .body .background{
    position                    : relative;
    min-height                  : 200px;
    margin-top                  : -20px;
    margin-bottom               : 20px;
}

#content #pageContent .section.collapsible .body table tr:first-child td{
    border-top                  : none;
}

#map {
    width                       : 100%;
    height                      : 400px;
}
#map iframe{
    width                       : 100%;
    min-height                  : 100%;
}


#pageContent .infocard {
    padding                     : 10px;
    margin-bottom               : 30px;
    overflow                    : hidden;
}
#pageContent .infocard.more{
    cursor                      : pointer;
}
#pageContent .infocard .cover{
    margin                      : -10px;
    position                    : relative;
}
#pageContent .infocard .cover img{
    width                       : 100%;
}

#pageContent .infocard .cover .caption {
    position                    : absolute;
    bottom                      : 0;
    right                       : 0;
    left                        : 0;
    top                         : auto;
    padding                     : 20px 5px;
    font-weight                 : 300;
    font-size                   : 30px;
    text-align                  : center;
    background                  : rgba(0,0,0,.5);
    color                       : white;
    -moz-transition             : padding .3s;
    -o-transition               : padding .3s;
    -webkit-transition          : padding .3s;
    transition                  : padding .3s;
}
#pageContent .infocard .cover .caption .more {
    position                    : absolute;
    left                        : 0;
    right                       : 0;
    padding-top                 : 15px;
    font-size                   : 60%;
    text-align                  : center;
    -moz-transition             : padding .5s;
    -o-transition               : padding .5s;
    -webkit-transition          : padding .5s;
    transition                  : padding .5s;
}

#pageContent .infocard.more:hover .cover .caption {
    padding-bottom              : 30px;
}
#pageContent .infocard.more:hover .cover .caption .more{
    padding-top                 : 0;
}

/* Anchor jump fixing */
#content #pageContent h1:before { 
  display: block; 
  content: " "; 
  margin-top: -50px; 
  height: 50px; 
  visibility: hidden; 
}
#content #pageContent h2:before { 
  display: block; 
  content: " "; 
  margin-top: -50px; 
  height: 50px; 
  visibility: hidden; 
}

/* social plugins */
.likeBox {
    position                    : relative;
    z-index                     : 100;
    background-color            : white;
    border                      : solid 1px #cecece;
    border-right                : none;
    right                       : 0;
    box-shadow                  : 0 2px 5px 1px #cecece;
    padding                     : 10px;
    overflow                    : hidden;
    height                      : 170px;
    
    -moz-transition             : all .5s;
    -o-transition               : all .5s;
    -webkit-transition          : all .5s;
    transition                  : all .5s;
    opacity                     : 1;
}
.likeBox .title {
    text-align                  : left;
    margin                      : 5px 0 5px 10px;
    -moz-transition             : all .5s;
    -o-transition               : all .5s;
    -webkit-transition          : all .5s;
    transition                  : all .5s;
    overflow                    : hidden;
}
.likeBox .title::after{
    content                     : " ";
    display                     : block;
    height                      : 1px;
    background-color            : #cecece;
    margin-top                  : 10px;
}

.likeBox #gpPlugin{
    text-align                  : center;
}

.likeBox.facebook .title.GP{
    display                     : none;
}
.likeBox.googlePlus .title.FB{
    display                     : none;
}

.likeBox #fbPlugin, .likeBox #gpPlugin {
    -moz-transition             : all .5s;
    -o-transition               : all .5s;
    -webkit-transition          : all .5s;
    transition                  : all .5s;
}

.likeBox.googlePlus #gpPlugin{
    height                      : 106px;
    margin                      : 0 auto;
}
.likeBox.googlePlus #fbPlugin{
    height                      : 0;
    overflow                    : hidden;
}

.likeBox.facebook #fbPlugin{
    height                      : 70px;
}
.likeBox.facebook #gpPlugin{
    height                      : 0;
    overflow                    : hidden;
}
.likeBox.dismissed{
    height                      : 0;
    visibility                  : hidden;
    opacity                     : 0;
    margin                      : 0;
    padding                     : 0;
}


.likeBox .btn-close{
    position                    : absolute;
    top                         : 15px;
    right                       : 15px;
    background                  : none;
    border                      : none;

    -moz-transition             : all .5s;
    -o-transition               : all .5s;
    -webkit-transition          : all .5s;
    transition                  : all .5s;
}

/* Footer */
#foot{
    border-top                  : solid 2px #1e1896;
    margin-top                  : 50px;
    padding-top                 : 20px;

    padding-bottom              : 30px;
    /*background-color            : #f6f9fa;*/
    background-color            : #fff;
    position                    : relative;
    z-index                     : 999;
}
#foot .section{
    padding-right               : 0;
    margin-top                  : 10px;
}



/* Bootstrap additions */
.btn-burger{
    background-color    : transparent;
    padding             : 5px!important;
    border              : none;
    border              : 1px solid #cecece;
    margin              : -1px;
}

.btn-burger .burger-slice{
    width               : 20px;
    height              : 2px;
    background-color    : #fff;
    display             : block;
    margin              : 4px 5px;
}

.label.label-round {
    -moz-border-radius  : 100%;
    -webkit-border-radius: 100%;
    border-radius       : 100%;
    border              : 2px solid #fff;
}
.label.label-custom{
    background-color    : #051627;
}
h3 .label.label-round.square{
    padding             : 5px 12px;
}

.btn.btn-link.btn-white{
    color               : #fff;
}
.btn.btn-link.btn-white:hover{
    color               : #fff;
    text-decoration     : underline;
}

/* helper classes */
.margin-10{
    margin              : 10px
}

.margin-top-30{
    margin-top          : 30px;
}
.margin-bottom-30{
    margin-bottom       : 30px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /* Big Picture */

    #content #pageContent .section .cover{
        padding-left                : 0;
        padding-right               : 15px;
        padding-top                 : 0;
    }
    #content #pageContent .section .cover.right{
        padding-left                : 15px;
        padding-right               : 0
    }
    #content #pageContent .section .cover img{
        width                       : 100%;
    }
    /* logo */
    #coverImg{
        position                    : relative;
    }
    /* side panel nav*/

    #sidePanel{
        border-top                  : none;
        margin-top                  : 62px;
        border-left                 : solid 1px #cecece;
    }
    /* foot */
    #foot .section.copyright{
        border-bottom               : solid 1px #cecece;
    }
    /* social media */
    .likeBox{
        background-color            : rgba(255,255,255,.7);
        position                    : absolute;
        width                       : 325px;
        top                         : 60px;
        box-shadow                  : 0 2px 8px .5px #353535;
        padding                     : 0;
    }
    .likeBox .title{
        display                     : none;
    }
    .likeBox.facebook{
        height                      : 72px;
    }
    .likeBox.facebook #fbPlugin{
        height                      : 70px;
    }
    .likeBox.facebook #gpPlugin{
        overflow                    : hidden;
        height                      : 0;
        background-color            : white;
    }
    .likeBox.facebook .btn-close{
        top                         : 25px;
        right                       : 15px;
    }
    .likeBox.googlePlus{
        height                      : 106px;
        width                       : 300px;
    }
    .likeBox.googlePlus #gpPlugin{
        height                      : 106px;
    }
    .likeBox.googlePlus #fbPlugin{
        overflow                    : hidden;
        height                      : 0;
    }
    .likeBox.googlePlus .btn-close{
        top                         : 45px;
        right                       : 5px;
    }
    .likeBox.dismissed{
        height                      : 72px;
        visibility                  : hidden;
        opacity                     : 0;
        width                       : 0;
    }
    .likeBox:hover{
        background-color            : white;
    }
}


#coverImg {
    position: relative;
    max-width: 100%;
    width: 100%;
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    
    /* big Picture */
    #content #pageContent .section{
        margin-bottom               : 0;
    }
    #content #pageContent .section .background{
        position                    : absolute;
        min-height                  : unset;
    }
    #content #pageContent .section .background img{
        width                       : 100%;
        min-width                   : unset;
    }
    #content #pageContent .section .background.right{
        width                       : 50%;
        left                        : 50%;
    }
    #content #pageContent .section .background.left{
        width                       : 50%;
        left                        : 0;
    }

    #content #pageContent .section.collapsible .body .background{
        position                    : absolute;
        min-height                  : unset;
        margin-top                  : 0;
        margin-bottom               : 0;
    }
}