/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* =========================================================
    COMPONENTS BS
    =========================================================*/

/*MODAL*/
.modal   {
    width: 100%;
    height: 100%;
}


.modal-lg {}

.modal-lg .modal-content {
    min-height: 600px;
    border-radius: 0;
    background: url(../img/360-bg.png) no-repeat bottom right;
}

.modal .modal-content .modal-header,
.modal .modal-content .modal-footer {
    border:none;
}

.modal-fullscreen .modal-dialog,
.modal-fullscreen .modal-content {
    width: 100%;
    margin: 64px 0 0;
    border-radius: 0;
}

.modal-fullscreen .modal-dialog {    height: calc(100% - 64px); }

.modal-fullscreen .modal-content  {    height: 100%;   overflow: hidden; }

.modal .modal-content .modal-header .modal-title {
    line-height: 60px;
    font-size: 60px;
    font-weight:700 ;
    margin-top: 0;
}
.modal .modal-content .modal-header {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 16px;
}

.modal .modal-content .modal-header small {
    padding-left: 75px;
}

.modal .modal-content .modal-header .close {
    color:  #fff;
    opacity: .8;
    font-size: 70px;
    font-weight: 300;
    text-shadow:none;
    transition:opacity .2s;
}

.modal .modal-content .modal-header .close:hover {
    opacity: 1;
}

.modal .modal-content .modal-body {
    font-size: 18px;
}

.modal .modal-content .modal-body  .info-content {
    margin-bottom: 40px;
}

.modal .modal-content .modal-body h3 {
    font-size: 24px;
    font-weight:700;
    padding-bottom: 6px;
    border-bottom: 2px solid #fff;
}



/*cores e tipos dos modais*/
/* SALVADOR 360  */
.modal-ssa360 .modal-content {
    background-color: #004A96;
    color: #fff;
}

/* simplifica  */
.modal-simplifica .modal-content{
    background-color: #63b456;
    color: #fff;
}

/* negócios*/
.modal-negocios .modal-content{
    background-color: #6DBE97;
    color: #fff;
}

/* investe */
.modal-investe .modal-content {
    background-color: #F2E73A;
    color: #0066b3;
}

.modal-investe .modal-content .modal-header .close {
    color:  #0066b3;
}

.modal-investe .modal-content .modal-body h3  {
    border-bottom: 2px solid #0066b3;
}


/* centro */
.modal-centro .modal-content {
    background-color: #34B7B8;
    color: #fff;
}

/* inteligente */
.modal-inteligente .modal-content {
    background-color: #004A96;
    color: #fff;
}

/* criativa */
.modal-criativa .modal-content {
    background-color: #63B457;
    color: #fff;
}


/* sustentavel */
.modal-sustentavel .modal-content {
    background-color: #F2E73A;
    color: #0066b3;
}

.modal-sustentavel .modal-content .modal-header .close {
    color:  #0066b3;
}

.modal-sustentavel .modal-content .modal-body h3  {
    border-bottom: 2px solid #0066b3;
}

/* inclusao economica */
.modal-inclusao-economica .modal-content {
    background-color: #34b7b8;
    color: #fff;
}





.page-header {
    border-bottom: none;
} 

.page-header small {
    padding-left: 75px;
    color: #004A96;
}
.page-header .page-title{
    line-height: 60px;
    font-size: 60px;
    font-weight:700 ;
    margin-top: 0;
    color: #004A96;
    text-transform: uppercase;
}

.info-content {
    font-size: 16px;
}

.info-content h3 {
    color: #004A96;
    font-size: 24px;
    font-weight:700;
    padding-bottom: 6px;
    border-bottom: 2px solid #004A96;
}

.pdf-download {
    margin-top: 40px;
    float:left;
    width:100%;
    font-size: 16px;
    background-color: #E2E2E2;
    padding: 15px;
}

.pdf-download a {
    font-weight: 700;
    float:left;
    font-family: 'Khand', sans-serif;
    font-size: 18px;
    color: #004A96;
}
.pdf-download img {
    margin-right: 6px;
}
.pdf-download a:hover,
.pdf-download a:focus {
    text-decoration: none;
}

.link2{
    margin: 0 0 0 22px;
    float:left;
}

.content-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;/* 
    overflow-y: hidden; 
    pointer-events: none;*/
    height: 0;
    z-index: 1000;
     
}

.circle-nav {
    width: 430px;
    height: 430px;
    position: relative;
    left: -180px;
    bottom: 260px;
    border-radius: 50%;
    color: #fff;
    background-color: #63b457;
    z-index: 100;

    box-shadow:2px -2px 12px rgba(0,0,0,.2);
}

.back-circle,
.next-circle {
    position: absolute;
    z-index: 15;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.back-circle:hover,
.next-circle:hover,
.back-circle:focus,
.next-circle:focus  {
    text-decoration: none;
    color: #fff;
}

.back-circle {
    top: 42px;
    left: 195px;
}
.next-circle {
    right: 42px;
    bottom: 195px;
}

.next-circle {
    transform: rotate(80deg);
}

.inner-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -105px;
    margin-left: -105px;
    z-index: 10;
    background-color: #004A96;
    width: 210px;
    height: 210px;    
    border-radius: 50%;
}
.inner-circle a {
    position: absolute;
    top: 43px;
    left: 78px;
}

.nav-text,
.nav-text .nav-item {
    position: absolute;   
    z-index: 5;
    color: #fff;
}
.nav-text {
    width: 100%;
    height: 100%;
}
.nav-text .nav-item {
    width: 80%;
    height: 80%;
    top: 45px;
    left: 35px;
    text-align: center;
    font-size: 26px;
    transform: rotate(-50deg);/* 
     transition:all .4s ease-in;  */ 
}

.nav-text .nav-item.active,
.nav-text .nav-item.in {    
    transform: rotate(50deg);
}

/*  .nav-text .nav-item.out {    
   transform: rotate(150deg);
} 
*/



/*cores dos eixos*/
.circle-nav {  transition:background-color .4s; }
.circle-nav.eixo-simplifica,
.circle-nav.eixo-criativa     {    background-color: #63b457; }
.circle-nav.eixo-negocios       {    background-color: #6dbe97; }

.circle-nav.eixo-pelourinho     {    background-color: #34b7b8; }
.circle-nav.eixo-inteligente    {    background-color: #004a96; }
.circle-nav.eixo-economica      {    background-color: #2497bc; }

.circle-nav.eixo-sustentavel, 
.circle-nav.eixo-investe        {    background-color: #f2e73a; }
.circle-nav.eixo-sustentavel .nav-item,
.circle-nav.eixo-investe .nav-item, 
.circle-nav.eixo-sustentavel a,
.circle-nav.eixo-investe  a     {    color: #004a96; } 


.image-nav-item {
    overflow: hidden;
    height: 300px;
    width: calc(100% - 100px);
    margin-left: 100px;
    position: absolute;
    z-index: 10;
    bottom: -100px;
    transform: skew(0deg, -6deg);

}

.image-nav-item .image-nav-item-bg {
    width: 100%;
    height: 600px;
    margin-top: -100px;
    background: no-repeat right top;
    transform: skew(0deg, 6deg);
}


.image-nav-item.eixo-simplifica .image-nav-item-bg {
    background-image: url("../img/fundo/fundo-1.jpg");
}
.image-nav-item.eixo-negocios .image-nav-item-bg {
    background-image: url("../img/fundo/fundo-2.jpg");
}

.image-nav-item.eixo-investe .image-nav-item-bg {
    background-image: url("../fundo/fundo-3.jpg");
}

.image-nav-item.eixo-pelourinho .image-nav-item-bg {
    background-image: url("../img/fundo/fundo-4.jpg");
}

.image-nav-item.eixo-inteligente .image-nav-item-bg {
    background-image: url("../img/fundo/fundo-5.jpg");
}

.image-nav-item.eixo-criativa .image-nav-item-bg {
    background-image: url("../img/fundo/fundo-6.jpg");
}
.image-nav-item.eixo-sustentavel .image-nav-item-bg {
    background-image: url("../img/fundo/fundo-7.jpg");
}
.image-nav-item.eixo-economica .image-nav-item-bg {
    background-image: url("../img/fundo/fundo-8.jpg");
}


@media (max-width: 1920px) {
    .image-nav-item .image-nav-item-bg {
        background-size: contain;
    }
}

@media (max-width: 1200px) {
    .image-nav-item {
        bottom: -110px;
        transform: skew(0deg, -10deg);
    }

    .image-nav-item .image-nav-item-bg {
        margin-top: -110px;
        transform: skew(0deg, 10deg);
        background-size: inherit;
    }
}


.tablet, .mobile{
    display:none;
}

@media (max-width: 991px) {
    .image-nav-item {
        bottom: -140px;
        transform: skew(0deg, -15deg);
    }

    .image-nav-item .image-nav-item-bg {
        height: 500px;
        margin-top: -80px;
        transform: skew(0deg, 15deg);
    }

    .tablet{
        display:block;
    }
    .default, .mobile{
        display:none;
    }
}

@media (max-width: 767px)  {
    .image-nav-item {
        height: 200px;
        bottom: -100px;
        transform: skew(0deg, -20deg);
    }

    .image-nav-item .image-nav-item-bg {
        height: 200px;
        margin-top: -50px;
        transform: skew(0deg, 20deg);
    }

}

@media (max-width: 767px) and (max-height: 420px){
    .image-nav-item {
        height: 150px;
        bottom: -60px;
        transform: skew(0deg, -10deg);
    }

    .image-nav-item .image-nav-item-bg {  
        height: 300px;
        margin-top: -60px;
        transform: skew(0deg, 10deg);
    }  
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/*REMOVER O EVENTO DE OVER DO MOUSE NO ATRIBUTO IMAGE*/
image {    pointer-events:none;}


body,
html  {
    height: 100%;
    width: 100%;
    font-family: 'Khand', sans-serif;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Khand', sans-serif;
}
body {
    background-color: #fff;
}

a:focus {    outline: none; }

/* ############################
        MENU CIRCULAR 
###############################*/
.menu-effects {
   width: 100%;
    height: calc(100% - 64px); 
    position: relative;
}

.menu-container,
.menu-carousel {
    width: 100%;
    height:100%;
}
.menu-container {
     position: absolute;
     z-index: 100; 
     display: flex ;
      align-items: center;
      justify-content:center;
/* 
    width: 100%;
    height: calc(100% - 80px);
   
    background: url(../img/fundo/fundo-7.jpg) no-repeat center center;
    background-size: cover; */
}
.menu-area {   
   position: relative;
    width: 700px;
    height: 700px;

   // margin: 0 auto;
}

.menu-carousel {
    position: relative;
}
.menu-carousel .menu-carousel-item {
    position: absolute;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.js .menu-carousel .menu-carousel-item {
    display: none;  
}


.menu-carousel .item-1 {    background-image: url(../img/fundo/fundo-1.jpg); z-index: 10;  }
.menu-carousel .item-2 {    background-image: url(../img/fundo/fundo-2.jpg);  }
.menu-carousel .item-3 {    background-image: url(../img/fundo/fundo-3.jpg);  }
.menu-carousel .item-4 {    background-image: url(../img/fundo/fundo-4.jpg);  }
.menu-carousel .item-5 {    background-image: url(../img/fundo/fundo-5.jpg);  }
.menu-carousel .item-6 {    background-image: url(../img/fundo/fundo-6.jpg);  }
.menu-carousel .item-7 {    background-image: url(../img/fundo/fundo-7.jpg);  }
.menu-carousel .item-8 {    background-image: url(../img/fundo/fundo-8.jpg);  }

.logo-salvador {  
     position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -160px;    
    margin-top: -160px; 
    width: 320px;
    height: 320px;
    z-index: 10;


    border-radius: 50%;
    overflow: hidden;
}

.logo-salvador  a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background-color: #044897;
}

.logo-salvador  a .arrow {
    position: absolute;
    
    -webkit-transition: .8s ease-in-out;
    -moz-transition: .8s ease-in-out;
    -o-transition: .8s ease-in-out;
    transition: .8s ease-in-out;
}
.logo-salvador  a .texto {
    position: absolute;
    top: 94px;
    left: 55px;


    -webkit-transition: .4s ease-out;
    -moz-transition: .4s ease-out;
    -o-transition: .4s ease-out;
    transition: .4s ease-out;
}

.logo-salvador  a:hover .arrow {
    transform: rotate(360deg);
}

.logo-salvador  a:hover .texto {
    transform: scale(1.1,1.1);
}

#piemenu {
   filter: drop-shadow( 0 0 10px rgba(0,0,0,.6) );
}
#piemenu > svg { 
    width: 100%; 
    height: 100%; 
}


.menu-area {   
    position: relative;
    width: 700px;
    height: 700px;
   // margin: 0 auto;
}
#piemenu { height: 700px; width: 700px; margin:auto; }


[class|=wheelnav-piemenu-slice-basic] {  stroke: none; }
[class|=wheelnav-piemenu-slice-selected] {  stroke: none; cursor: pointer; }
[class|=wheelnav-piemenu-slice-hover] {   stroke: none; fill-opacity: 1; cursor: pointer; }

[class|=wheelnav-piemenu-title-basic] { fill: #333; stroke: none; }
[class|=wheelnav-piemenu-title-selected] { fill: #fff; stroke: none; cursor: pointer; }
[class|=wheelnav-piemenu-title-hover] { fill: #222; stroke: none; cursor: pointer; }
[class|=wheelnav-piemenu-title] > tspan { font-family: Impact, Charcoal, sans-serif; font-size: 24px; }


[class|=wheelnav-piemenu-title] > tspan {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 29px;
    cursor: pointer;
}


/*PEDAÇO 1*/
.wheelnav-piemenu-slice-basic-0     {   fill: #63B457; }
.wheelnav-piemenu-slice-selected-0  {   fill: #63B457; }
.wheelnav-piemenu-slice-hover-0     {   fill: #559f4a; }

.wheelnav-piemenu-title-basic-0     {    fill: #094C93; }
.wheelnav-piemenu-title-selected-0  {    fill: #094C93; }
.wheelnav-piemenu-title-hover-0     {}

/*PEDAÇO 2*/
.wheelnav-piemenu-title-basic-1     {    fill: #fff; }
.wheelnav-piemenu-title-selected-1  {    fill: #fff; }
.wheelnav-piemenu-title-hover-1     {}


.wheelnav-piemenu-slice-basic-1     {   fill: #6DBE97;  }
.wheelnav-piemenu-slice-selected-1  {   fill: #6DBE97;  }
.wheelnav-piemenu-slice-hover-1     {   fill: #59ac85;  }


/*PEDAÇO 3*/
.wheelnav-piemenu-title-basic-2     {    fill: #fff; }
.wheelnav-piemenu-title-selected-2  {    fill: #fff; }
.wheelnav-piemenu-title-hover-2     {}

.wheelnav-piemenu-slice-basic-2     {   fill: #F2E73A;  }
.wheelnav-piemenu-slice-selected-2  {   fill: #F2E73A;  }
.wheelnav-piemenu-slice-hover-2     {   fill: #e4da38;  }


/*PEDAÇO 4*/
.wheelnav-piemenu-title-basic-3     {    fill: #fff; }
.wheelnav-piemenu-title-selected-3  {    fill: #fff; }
.wheelnav-piemenu-title-hover-3     {}

.wheelnav-piemenu-slice-basic-3     {   fill: #34B7B8; }
.wheelnav-piemenu-slice-selected-3  {   fill: #34B7B8;}
.wheelnav-piemenu-slice-hover-3     {   fill: #2a9d9e;  }


/*PEDAÇO 5*/

.wheelnav-piemenu-title-basic-4     {    fill: #fff; }
.wheelnav-piemenu-title-selected-4  {    fill: #fff; }
.wheelnav-piemenu-title-hover-4     {}

.wheelnav-piemenu-slice-basic-4     {   fill: #004A96; }
.wheelnav-piemenu-slice-selected-4  {   fill: #004A96;}
.wheelnav-piemenu-slice-hover-4     {   fill: #044180; }

/*PEDAÇO 6*/
.wheelnav-piemenu-title-basic-5     {    fill: #fff; }
.wheelnav-piemenu-title-selected-5  {    fill: #fff; }
.wheelnav-piemenu-title-hover-5     {}

.wheelnav-piemenu-slice-basic-5     {    fill: #63B457; }
.wheelnav-piemenu-slice-selected-5  {    fill: #63B457; }
.wheelnav-piemenu-slice-hover-5     {   fill: #559f4a;  }

/*PEDAÇO 7*/
.wheelnav-piemenu-title-basic-6     {    fill: #fff; }
.wheelnav-piemenu-title-selected-6  {    fill: #fff; }
.wheelnav-piemenu-title-hover-6     {}

.wheelnav-piemenu-slice-basic-6     {    fill: #F2E73A; }
.wheelnav-piemenu-slice-selected-6  {    fill: #F2E73A; }
.wheelnav-piemenu-slice-hover-6     {   fill: #e4da38;  }


/*PEDAÇO 8*/
.wheelnav-piemenu-title-basic-7     {    fill: #fff; }
.wheelnav-piemenu-title-selected-7  {    fill: #fff; }
.wheelnav-piemenu-title-hover-7     {   }

.wheelnav-piemenu-slice-basic-7     {    fill: #2497BC; }
.wheelnav-piemenu-slice-selected-7  {    fill: #2497BC; }
.wheelnav-piemenu-slice-hover-7     {    fill: #1e8cb0; }





/*------------------------
        HEADER
----------------------------*/
.main-header {    
    background-color: #0066b3;    
    height: 64px;
    text-align: center;
    padding: 10px 20px 0;
}

/*------------------------
        footer
----------------------------*/

.page-footer {
    position: fixed;
    bottom: 0;
    z-index: 110;
    color: #fff;
    text-align: center;
    width: 100%;
    height: 50px;
}

.social-icons {
    margin-top: 5px;
}
.social-icons a {
    display: inline-block;
    margin: 0 5px;
}


/*videos*/

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

.video-wrapper {
    margin: 0 auto 20px;
    width: 640px;
}

.video-wrapper  video {
    width: 100%;
    height: auto;
}

/*------------------------
        MEDIAS
----------------------------*/

@media (max-height: 768px) {
    .menu-area {   
       transform: scale(0.8,0.8); 
    }

    .menu-container {
        background-size:    cover;
    }
}

@media (max-height: 414px) {
    body,
    html,
    .menu-container  {
        height:inherit;
        width: inherit;
    }
} 

@media (max-width: 1023px) {
 .menu-container {        
       /*  background: url(../img/fundo/sustentavel.jpg) no-repeat center center; */
    }

}
@media (max-width: 768px) {

    .page-header .page-title {
        line-height: 40px;
        font-size: 40px;
        margin-top: -10px;
    }
    .page-header {
        font-size: 16px;
    }

}

@media (max-width: 480px) {

    .image-nav-item {
        height: 150px;
        bottom: -60px;
        transform: skew(0deg, -20deg);
    }

    .image-nav-item .image-nav-item-bg {
        height: 150px;
        margin-top: -50px;
        transform: skew(0deg, 20deg);
        background-size: cover;
    }

    .mobile{
        display:block!important;
    }
    .default, .tablet{
        display:none;
    }

    /*MODAIS*/
    .modal-lg .modal-content {
        min-height: auto;
        background-image: url(../../../img/360-bg-mob.png);
    }

   /*  .modal .modal-content .modal-header .modal-title img{
       max-height: 30px;
       width: auto;
   } */

    .page-header small {
        padding-left: 35px;
    }
    .page-header .page-title {
        line-height: 30px;
        font-size: 30px;
        margin-top: 0;  
    }

    .page-header .page-title img{
        max-height: 30px;
        width: auto;
    }

    /* .modal .modal-content .modal-header {
        font-size: 16px;
    } */

    .modal .modal-content .modal-header .close {
        font-size: 50px;
    }



    .menu-area {   
       transform: scale(0.53,0.53); 
    }
    /* #piemenu { overflow:hidden; }
    #piemenu svg,
    .menu-area .logo-salvador {     transform: scale(1.05,1.05);  } */

    .menu-container {        
        /* background: url(../img/fundo-mandala-mob.jpg) no-repeat center center;
        background-size: cover; */
        height: calc(100% - 60px);
    }
    .logo-ssa {
        width: 120px;
        height: auto;
    }
    .page-footer {
        padding-top: 10px;  
        height: 60px;
    }
    .social-icons {
        margin-top: 0;  
    }
    
    .video-wrapper {
        margin: 0 auto 20px;
        width: 100%;
    }
    
    .video-wrapper  video {  
       width:100%; 
       height:auto; 
    }
 }

@media (max-width: 400px) {
    .menu-area {   
       transform: scale(0.5,0.5); 
    }
 }

@media (max-width: 320px) {
    
    .menu-area {   
       transform: scale(0.458,0.458); 
    }
    #piemenu { overflow:hidden; }
    #piemenu svg {transform: scale(1.1,1.1);  }
    .menu-area .logo-salvador {transform: scale(1.1,1.1);  }

     .modal .modal-content .modal-header .modal-title {
        line-height: 30px;
        font-size: 26px;
    }
 }



/*OWL GALLERY */


/*GALERIA COM CAPTION*/
.owl-theme {   position: relative;  }

.owl-theme {    
    width: 100%; 
    padding: 0 10px;
}

.owl-theme .owl-dots .owl-dot span {
    background: #fdb714;
    opacity: .4;
}

.owl-theme  .owl-dots .owl-dot.active span,
.owl-theme  .owl-dots .owl-dot:hover span {
    background: #fdb714;
    opacity: 1;
}

.owl-stage-outer { padding-bottom: 280px; }


@media (max-width: 767px) {
    .circle-nav {
        left: -190px;
        bottom: 240px;
        transform:scale(.6,.6);
    }
    .owl-stage-outer { padding-bottom: 180px; }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

.page{
    opacity:0;
    visibility: hidden;
    transition:opacity .6s;
    -webkit-transition:opacity .6s;
    -moz-transition:opacity .6s;
    -o-transition:opacity .6s;
}

.loaded{
    opacity:1;
    visibility: visible;
    transition:opacity .6s;
    -webkit-transition:opacity .6s;
    -moz-transition:opacity .6s;
    -o-transition:opacity .6s;
}

.fa-youtube-play{
    color:#ce1917;
    font-size:42px;

}

.span-tit{
    margin: 10px 0 0 10px;
    float: right;
}