@charset "UTF-8";
.select2-container,
img {
    max-width: 100%
}

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');


/* latin */
@font-face {
font-family: 'Volvo';
font-style: normal;
font-weight: 100;
src: local('Volvo Thin'), local('VolvoSansLight'), url(./fonts/VolvoSansLight.ttf) format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* latin */
@font-face {
font-family: 'Volvo';
font-style: normal;
font-weight: 400;
src: local('Volvo Sans'), local('VolvoSans'), url(./fonts/VolvoSans.ttf) format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* latin */
@font-face {
font-family: 'Volvo';
font-style: normal;
font-weight: 700;
src: local('Volvo Sans'), local('VolvoSans_Bold'), url(./fonts/VolvoSans_Bold.ttf) format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Volvo Broad';
  font-style: normal;
  font-weight: 800;
  src: local('VolvoBroad'), local('Volvo Broad'), url(./fonts/VolvoBroad.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}  
 

body {
  overflow-x: hidden;
  font-family: 'Volvo', 'Volvo Broad' ;
  font-weight:400;
  font-size: 16px;
}


*,
blockquote,
body,
dd,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
legend,
ol,
p,
pre,
ul {
    margin: 0;
    padding: 0
}

.au-btn,
.swal-button,
a {
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease
}

.rev-text-1,
.rev-text-2,
.rev-text-3,
.rev-text-4,
body,
h1,
h2,
h3,
h4,
h5,
h6,
html {
    font-family: Montserrat, Poppins, Arial, "Helvetica Neue", sans-serif
}

.iconify { width: 24px; height: 24px; }

.au-rating,
.box--beside .box__head {
    float: left
}

.au-checkbox,
.loader,
.table-cart td {
    vertical-align: middle
}

.menu li,
.slick-dots,
.slick-dots li,
ul {
    list-style: none
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

*,
:after,
:before {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit
}

img {
    height: auto
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    text-transform: none;
    line-height: 1.2
}

h1>a,
h2>a,
h3>a,
h4>a,
h5>a,
h6>a {
    display: inline-block;
    line-height: 1.2
}

h1 {
    font-size: 36px
}

h2 {
    font-size: 30px
}

h3 {
    font-size: 24px
}

h4 {
    font-size: 18px
}

h5 {
    font-size: 15px
}

h6 {
    font-size: 13px
}

li>ol,
li>ul {
    margin-bottom: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset {
    min-width: 0;
    border: 0
}

button {
    background: 0 0
}

.bg-pattern-01 {
    background: url(../images/bg-pattern-01.jpg) center center/cover no-repeat fixed
}

.block-revealer {
    position: absolute;
    top: 0;
    width: 0;
    bottom: 0;
    background: #222;
    z-index: 99
}

@-webkit-keyframes revealIn {
    0% {
        width: 0
    }
    100% {
        width: 100%
    }
}

@-moz-keyframes revealIn {
    0% {
        width: 0
    }
    100% {
        width: 100%
    }
}

@-o-keyframes revealIn {
    0% {
        width: 0
    }
    100% {
        width: 100%
    }
}

@keyframes revealIn {
    0% {
        width: 0
    }
    100% {
        width: 100%
    }
}

@-webkit-keyframes revealOut {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@-moz-keyframes revealOut {
    0% {
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        -moz-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@-o-keyframes revealOut {
    0% {
        -o-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        -o-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@keyframes revealOut {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@-webkit-keyframes revealOutContent {
    0% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translate3d(60px, 0, 0);
        transform: translate3d(60px, 0, 0)
    }
    100% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-moz-keyframes revealOutContent {
    0% {
        opacity: 0;
        visibility: hidden;
        -moz-transform: translate3d(60px, 0, 0);
        transform: translate3d(60px, 0, 0)
    }
    100% {
        opacity: 1;
        visibility: visible;
        -moz-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-o-keyframes revealOutContent {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translate3d(60px, 0, 0)
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes revealOutContent {
    0% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translate3d(60px, 0, 0);
        -moz-transform: translate3d(60px, 0, 0);
        transform: translate3d(60px, 0, 0)
    }
    100% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}


@media (max-width:575px), (max-width:650px) and (orientation: landscape)   {
    .media-testi {
        padding: 60px 35px
    }

    .title-2{
        font-size: 36px !important;
    }

    .category {
        /* padding-left: 20px !important; */
    }

    .current-sec {
        /* background-color: cornsilk;  */
        /* padding-left: 40px !important; */
        font-weight: 700 !important;
    }

    .breadcumb{
        padding-left: 0 !important;
    }


    .icon-copyright{
        margin: 35px 0 !important;
    }

}


.bg-pattern-1 {
    background: url(../images/icon/bg-pattern-02.jpg) center center/cover no-repeat
}

.bg-pattern-2 {
    background: url(../images/icon/bg-pattern-03.jpg) center center/cover no-repeat
}

.bg-image-1 {
    background: url(../images/bg-page-01.jpg) center center/cover no-repeat
}



.bg-image-2 {
    background: url(../images/bg-page-02.jpg) center center/cover no-repeat
}

.bg-image-3 {
    background: url(../images/bg-coming.jpg) center center/cover no-repeat
}

.bg-image-clients {
    background: linear-gradient( rgba(0, 0, 0, .60), rgba(0, 0, 0, .60) ),url(../images/Umbra3D/Portafolio/03_darker.png) center center/cover no-repeat
}

.line_title {
    vertical-align: top;
}

.bg-c2 {
    background: #222
}

.show {
    display: block
}

.hidden {
    display: none
}

.img--rounded {
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}

/*umbra*/
.rev-slidebg-home  .tp-bgimg .slotholder {
    background: transparent linear-gradient(90deg, #0000007D 0%, #131313 100%, #FFFFFF00 100%) 0% 0% no-repeat padding-box !important;
    filter: brightness(0.5);
}


.img-client {
    display: block;
    text-align: center;
    margin-bottom: 70px
}

.clients-font {
    
    color: #fff
}

.img-client:hover {
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -ms-transform: scale(1.08);
    -o-transform: scale(1.08);
    transform: scale(1.08);
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease
}

.cont-clients {
    display: flex;
    flex-direction: column;
}

.our-clients {
    margin-bottom: 50px;
    margin-left: 30px;
}

.clients-logos {
    justify-content: center;

}


/* @font-face {
    font-family: 'MontserratLight';
    font-weight: normal;
    src: url('montserrat_light.eot'); 
    src: url('montserrat_light.eot?#iefix') format('embedded-opentype'),
            url('montserrat_light.woff2') format('woff2'),
            url('montserrat_light.woff') format('woff'), 
            url('montserrat_light.ttf')  format('truetype'), 
    }
    
    @font-face {
    font-family: 'MontserratRegular';
    font-weight: normal;
    src: url('montserrat_regular.eot'); 
    src: url('montserrat_regular.eot?#iefix') format('embedded-opentype'),
            url('montserrat_regular.woff2') format('woff2'),
            url('montserrat_regular.woff') format('woff'), 
            url('montserrat_regular.ttf')  format('truetype'), 
    } */


a {
    transition: all .3s ease;
    outline: 0
}

.cover-img{
    width: 100%;
}


#car-selection
{
  display: flex;
  justify-content: center;
}

.car-but {
  background-color: black;
  width:25vw;
  height:100vh;
  text-align: center;
  background-size:cover;
 
}

.car-but:hover {
        opacity:0.5;
}




#viewport {
  /*the width of sidebar or more*/
  padding-left: 25vw;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#content {
  width: 100%;
  height: 100vh;
  position: relative;
  margin-right: 0;
  background-size:cover;
  /* background-image: url(./files/Cars/XC40/front.webp); ToParam Done */
  background-position: center;


}

/* Sidebar Styles */

#sidebar {
  z-index: 1000;
  position: fixed;
  left: 25vw;
  width: 25vw;
  height: 100%;
  margin-left: -25vw;
  overflow-y: auto;
  background: white;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#sidebar header {
  background-color: white;
  font-size: 20px;
  line-height: 52px;
  text-align: center;
}

#sidebar header a {
  color: #213467;
  display: block;
  text-decoration: none;
}

#sidebar header a:hover {
  color: #fff;
}

#sidebar .nav{
  
}

#title-car
{
  font-family: 'Volvo Broad';
  font-weigth: 800;
  font-size: 33pt;
   color: #213467;
  display: block;
  text-decoration: none;
  padding: 4vh 0 ;

}

/* #sidebar .nav a{
  background: none;
  border-bottom: 1px solid #455A64;
  color: #CFD8DC;
  font-size: 14px;
  padding: 16px 24px;
} */

/* #sidebar .nav a:hover{
  background: none;
  color: #ECEFF1;
}

#sidebar .nav a i{
  margin-right: 16px;
} */



hr.sep-car-home {
    border-top: 2px solid #213467;
    width: 20%;
    margin: 1vh auto;
}

#car-buttons {
  text-align: center;
}

.but-home-car {
  width: 57% ;
	box-shadow: 0px 0px 11px 4px #e6e6e6;
	background-color:#ffffff;
	border-radius:11px;
	border:2px solid #ebebeb;
	display:inline-block !important;
	cursor:pointer;
	color:#666666;
/* 	font-family:Verdana; */
	font-size:17px;
	padding: 7px 0 ;
	text-decoration:none;
  margin: 2vh auto;
  
}
.but-home-car:hover {
	background-color:#f6f6f6;
}
.but-home-car:active {
	position:relative;
	top:1px;
}

.but-open
{
    background-color:rgb(25,39,78) !important;
    color: white !important;
}


.but-see-3d {
    width: 58%;
    box-shadow: 0px 0px 11px 4px #e6e6e6;
    background-color: #ffffff;
    border-radius: 20px;
    border: 7px solid #2b7ccd;
    display: inline-block;
    cursor: pointer;
    color: #666666;
    font-size: 18px;
    padding: 2vh 2vw !important;
    text-decoration: none;
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 2vh auto;
    text-align: center;


}
.but-see-3d:hover {
	background-color:#f6f6f6;
}
.but-see-3d:active {
	position:relative;
	top:1px;
}

.but-see-3d img{
   padding-right: 1vw;
}

#back-btn{
  position: absolute;
  left: 4vw;
  top: 2vh;
}

/*window onload. css display:none*/
#loading {
   background-image: url(./files/UI/03CarInfo/LoadingText16-9.jpg);
   z-index: 5000;
   width: 100vw;
   height: 100vh;
   display:none;
 }
 

 /* sections */
 
  
  ::-webkit-scrollbar,
  ::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar-track { 
      width: 10px;
      border: none;
  }
  
  ::-webkit-scrollbar-button,
  ::-webkit-scrollbar-track-piece,
  ::-webkit-scrollbar-corner,
  ::-webkit-resizer {
      display: none;
  }
  
  ::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background-color: white;
  }
  
  ::-webkit-scrollbar-track {
      background-image: url('files/UI/03CarInfo/ScrollBg.png');
      background-repeat: repeat-y;
      background-size: contain;
    background-color: black;
  }

  #content-videos, #content-tecnologia {
    width: 100%;
    /* height: 100%; */
    background-image: url(./files/UI/03CarInfo/ThumbnailBg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: black; /*para no tener el riesgo que el fondo cargará despues*/
    

  }


  .footer-text{
    color: white;
    font-size: 7pt;
    bottom: 0vh;
    position: fixed;
    padding: 10px 2%;
    text-align: center;
    background-color: black;
}

#portrait-message { 
    display: none;
   /* display: flex;*/
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: white;
    top: 40vh;
    background-image: url(./files/UI/03CarInfo/ThumbnailBg.jpg);
    background-size: cover;
    background-position: center;
    flex-direction: column;
    /* padding: 0 5vh; */
}

.anim-portrait{
    margin: 5vh 0;
    width: 100%;
}

.anim-enable, .anim-rotate{

    position: absolute;
    height: 10vh;
    top: 47vh;
}

.anim-enable{
    left: 17vw;
    -webkit-animation: rot-180 5s infinite ease-in;
    -moz-animation: rot-180 5s infinite ease-in;
    -o-animation: rot-180 5s infinite ease-in;
    animation: rot-180 5s infinite ease-in
}

.anim-rotate{
    right: 22vw;
    -webkit-animation: rot-90 5s infinite ease-in;
    -moz-animation: rot-90 5s infinite ease-in;
    -o-animation: rot-90 5s infinite ease-in;
    animation: rot-90 5s infinite ease-in
}


@-webkit-keyframes rot-90{
    0%,
    10%,
    50%,
    100% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    20%,
    40% {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
}
  
@-moz-keyframes rot-90{
    0%,
    10%,
    50%,
    100% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    20%,
    40% {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
}
  
@-o-keyframes rot-90{
    0%,
    10%,
    50%,
    100% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    20%,
    40% {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
}
  
@keyframes rot-90 {
    0%,
    10%,
    50%,
    100% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    20%,
    40% {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
}


@-webkit-keyframes rot-180 {
    0%,
    65%,
    100% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    10%,
    55% {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}

@-moz-keyframes rot-180 {
    0%,
    65%,
    100% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    10%,
    55% {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}

@-o-keyframes rot-180 {
    0%,
    65%,
    100% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    10%,
    55% {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}

@keyframes rot-180 {
    0%,
    65%,
    100% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    10%,
    55% {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}







@media only screen and (orientation:portrait){
    #main { display:none; }
    #portrait-message { display:flex; }
}
@media only screen and (orientation:landscape){
    #portrait-message { display:none; }
}


/*Responsive Mobile design*/
@media (max-height:412px) and (orientation: landscape)   {

    #content {
        
        /* height: calc(100vh - 56px) !important; */
    }

    #viewport {
        padding-left: 30vw;
    }
    #sidebar {
        
        left: 30vw;
        width: 30vw;
        margin-left: -30vw;
    }

    #title-car
    {
        font-family: 'Volvo Broad';
        font-weigth: 800;
        font-size: 33pt;
        color: #213467;
        display: block;
        text-decoration: none;
        padding: 1vh 0 ;

    }
            
    
    #back-btn{
        left: 2vw !important;
        top: 0vh !important;
    }

    .but-home-car {
        width: 68% ;
        box-shadow: 0px 0px 11px 4px #e6e6e6;
        font-size:10px ;
        margin: 1vh 0 !important;
        padding: 5px 15px !important; 
    }

    hr.sep-car-home {
        margin: 1vh auto !important;
    }

        
    .but-see-3d {
        width: 75% ;
        font-size:10px;
        margin: 1vh auto;
        border: 5px solid #2b7ccd !important;
        padding: 1vh 20px !important;    
        border-radius: 13px;

    }

    .but-see-3d img {
        padding-right: 1vw;
        max-width: 5vw !important;
        /*ya hay un height auto somewhere*/
    }

    .footer-text {
        
        font-size: 3pt;
    }

    /*Fica Tecnica*/

    .select_arrow {
        /*     position: absolute; */
        top: 14px;
        right: 15px;
        width: 11px;
        height: 11px;
        border: solid #fff;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        text-align:right;
        margin-right: 4px;
    
    }

    #content-ficha-tenica 
    {
        width: 66vw !important;
    }
    
    #tablas-fichas
    {
        overflow-y: scroll;
        height: 80vh;
    
    }
    
    table.aspecto-ficha {
    
        width: 100%;
        height: 200px;
        padding:2vh 2vw
    }
    
    #content-ficha-tenica .aspecto-ficha:nth-child(1)
    {
        padding-top: 5vh;
    }
    
    table.aspecto-ficha td, table.aspecto-ficha th {
        padding: 2vh 6px !important;
    }
    table.aspecto-ficha tbody td {
        font-size: 15px;
    }
    
    table.aspecto-ficha thead th {
        font-size: 17px;
    }
    
    /*Flicha para abajo*/
    table.aspecto-ficha > thead > tr > th:nth-child(2)
    {
        text-align: right;
        padding-right: 2vw;
        font-size: 13pt;
    }
    
    table.aspecto-ficha .fichaVal {
    }
    
    /*si no quiere ponerle FichaVal a todos*/
    #content-ficha-tenica  tbody tr td:nth-child(2){
        height: fit-content;
        width: 45%
    }
    
    /*inicia cerrado*/
    .aspecto-content
    {
        display:none
    }
    
    .sel-model {
        padding: 2px 0 !important;
        width: 20vw !important;
        margin: 5px 1vw !important;
        font-size: 10pt;
    }
                
    #selector-models, #selector-gal-models{
        margin-bottom: 0vh !important;
        padding-top: 2vh !important;
    }      
    
    
    #content-imagenes, #content-accesorios{
        background-image: url(./files/UI/03CarInfo/ThumbnailBg.jpg);
        
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }
    
    .sel-thumb img, .player-thumb img{
        width: 19vw;
    }
    
    .sel-thumb, .player-thumb{
        margin: 1.5vw;
        max-width: 19vw; /*same as img*/
    }
    
    .grid-thum
    {
        padding: 5vh 1vw 3vh 1vw !important;
    }
    
    .thum-tit {
        margin: 1vh 0 !important;
        font-size: 8pt !important;
        height: 13vh !important; /*ya serán 3 renglones*/
    }
    
    .thum-price {
        padding: 0 !important;
        /* border-radius: 34pt; */
        /* width: 67%; */
        font-size: 16pt !important;

    }
    
    #slide{
        width: 100%;
      /*por si acaso*/
        position: absolute;
        top: 0;
        left: 0;
        display:none;
    
    }
    
    #slide #slide-image {
      /* height: 100vh;
      width: inherit;
      background-color: black;
      object-fit: contain; */
    }
    
    #slide.full-screen{
      
        left: -30vw !important; /*sidebar width*/
    }
    
    #slide-ui{
        /* position: absolute;
        top: 0; */
    }
    
    #slide-ui img {
       
    }
    
    #slide-back, #player-back{
        top: 3vh !important;
        right: 16vh !important;
    }
    
    #slide-expand, #slide-shrink{
        top: 3vh;
        right: 3vh !important;
    }
  
    #slide-next, #video-next {
        top: 48vh;
        right: 1vw;
    }
    
    #slide-prev, #video-prev{
        top: 48vh;
        left: 31vw !important; /*sliderW + 1*/
    }
    
    .full-screen #slide-prev, .full-screen #video-prev{
        /*totest*/
        left: 1vw !important; 
    }

    
    #selector-gal-models
    {
        padding: 3px 5px !important;
        width: 70vw !important;
    }

    .sel-gal-model{       
        margin: 5px;
        padding: 2px 0 !important;
        width: 12vw !important;
        font-size: 7pt !important;
      }
        
}


/* Ficha Tecnica*/


.select_arrow {
/*     position: absolute; */
    top: 14px;
    right: 15px;
    width: 11px;
    height: 11px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    text-align:right;
    margin-right: 4px;

}


#content-ficha-tenica
{
  background-color: rgba(0,0,0,0.5);
  width:50vw;
}

#tablas-fichas
{
    overflow-y: scroll;
    height: 80vh;

}

table.aspecto-ficha {
  font-family: 'Volvo';
  font-weight: 100;
  width: 100%;
  height: 200px;
  text-align: left;
  border-collapse: inherit;
  padding:2vh 2vw


}

#content-ficha-tenica > .aspecto-ficha:nth-child(1)
{
    padding-top: 10vh;
}

table.aspecto-ficha td, table.aspecto-ficha th {
  padding: 10px 10px;
}
table.aspecto-ficha tbody td {
  font-size: 15px;
  color: #FFFFFF;
}
table.aspecto-ficha tr:nth-child(even) {
  
  background: rgba(255,255,255, 0.15);
}
table.aspecto-ficha thead {
  background: #000000;
  cursor: pointer;
}
table.aspecto-ficha thead th {
  font-size: 17px;
  
  font-weight: 100 !important;
  color: #FFFFFF;
  text-align: left;
}

/*Flicha para abajo*/
table.aspecto-ficha > thead > tr > th:nth-child(2)
{
  text-align: right;
}

table.aspecto-ficha .fichaVal {
}

/*si no quiere ponerle FichaVal a todos*/
#content-ficha-tenica  tbody tr td:nth-child(2){
   text-align: right;
   height: fit-content;
   width: 45%
}

/*inicia cerrado*/
.aspecto-content
{
    display:none
}

.sel-model, .sel-gal-model{
    color: #888888;
    padding: 2px 22px;
    width: 13vw;
    text-align: center;
    border-width: thin;
    border-bottom-style: solid;
    border-color: #888888;
    margin: 5px;
    display: inline-block;
    cursor: pointer;
  }

.model-open{
    color: white;
    border-color: white;
}
  
#selector-models{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 3vh;
    padding-top: 3vh;
    text-transform: uppercase;
}


  /* Galeria de thumbnails*/

#content-imagenes, #content-accesorios{
    background-image: url(./files/UI/03CarInfo/ThumbnailBg.jpg);
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.sel-thumb img, .player-thumb img{
    width: 19vw;
}

.sel-thumb, .player-thumb{
    margin: 1.5vw;
    max-width: 19vw; /*same as img*/
    justify-content: center;
    text-align: center;
    cursor:pointer;
}

.grid-thum
{
    display: flex;
    flex-wrap: wrap;
    padding: 8vh 4vw 8vh 4vw;
}

.thum-tit {
    color: white;
    font-family: 'Volvo';
    margin: 1vh 0;
    font-size: 15pt;
    font-weight: 300;
    height: 6vh;
}

.thum-price {
    color: white;
    background-color: #2b7ccd;
    padding: 0px 22px;
    border-radius: 34pt;
    width: 67%;
    font-size: 34pt;
    margin: 0 auto;
    font-family: "Volvo Broad";
}

#slide{
    width: 100%;
  /*por si acaso*/
    position: absolute;
    top: 0;
    left: 0;
     display:none; 

}

#slide #slide-image {
  /* height: 100vh;
  width: inherit; */
  height: auto;
  width: auto;
  background-color: black;
  object-fit: contain;
}

#slide.full-screen{
    width: 100vw;
    z-index: 2000;
    left: -25vw; /*sidebar width*/
}

#slide-ui{
    position: absolute;
    top: 0;
}

#slide-ui img {
    position: fixed;
    width: fit-content;
    background-color: transparent;
    height: auto;
    cursor: pointer;
}

#slide-back, #player-back{
    top: 3vh;
    right: 11vh;
}

#slide-expand, #slide-shrink{
    top: 3vh;
    right: 5vh;
}

#slide-shrink{
    display: none;
}

#slide-next, #video-next {
    top: 48vh;
    right: 1vw;
}

#slide-prev, #video-prev{
    top: 48vh;
    left: 26vw; /*sliderW + 1*/
    transform: rotate(180deg);
}

.full-screen #slide-prev ,  .full-screen #video-prev{
    /*totest*/
    left: 1vw; 
}

/*Hide scrollbar on mobile*/
#sidebar::-webkit-scrollbar { width: 0 !important }
#sidebar { overflow: -moz-scrollbars-none; }
#sidebar { -ms-overflow-style: none; }


#selector-gal-models
{
    color: white; 
    bottom: 0vh;
    position: fixed;
    padding: 10px 2%;
    background-color: black;
    width: 75vw; /*diff of sidebar*/
    text-align: center
}

#player
{
    height: 94vh;
    display: none;
}

#player-back
{
    height: 94vh;
}

.extreme-thumb
{
    opacity: 0.3;
    cursor: auto !important;
}

/*La barra de recomendados al pausar*/
.ytp-pause-overlay{
    display: none !important;
}

#slide {
    height: 100vh;
    background-color: black;
    /* display: flex; */
    align-items: center;
    justify-content: center
}

.fade-in {
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s;
    -moz-animation: fadeIn ease 1s;
    -o-animation: fadeIn ease 1s;
    -ms-animation: fadeIn ease 1s;
  }
  @keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-moz-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-webkit-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-o-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-ms-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }

  
.loading-backg {
    background-image: url(./files/Cars/XC60/load.jpg); 
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: black;
    position: absolute;
    opacity: 0.2;
}
  
  
  .load-logo{
    margin-top: 30vh;
    opacity: 0.6;
    width: 200px;
    height: 200px;
  
    /* -webkit-animation: loader-logo 2s infinite ease-in-out;
    -moz-animation: loader-logo 2s infinite ease-in-out;
    -o-animation: loader-logo 2s infinite ease-in-out;
    animation: loader-logo 2s infinite ease-in-out */
  }


  #loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
  }
  
  #loading-image {
    position: absolute;
    top: 100px;
    left: 240px;
    z-index: 100;
    background-image: url(./files/UI/03CarInfo/LoadingText16-9.jpg);

  }

  .loader {
    position: fixed;
    transform: translate(-50%, -50%)
}

/* .loader-viewport{
    width: 80vw;
    height: 100vh;
    position: fixed;
    /* z-index: 5000; 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* background-color: black; 
    background-image: url(./files/UI/03CarInfo/ThumbnailBg.jpg);
    display: flex;
    justify-content: center;
    align-items: center;
} */

.loader-viewport{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    background-color: black;
    text-align: center;

    z-index: 1000;


    /* background-image: url(./files/Cars/XC60/load.jpg);  */

}

.loader {
    display: inline-block;
    width: 50px;
    height: 50px;
    color: inherit;
    pointer-events: none
}

.loader:after,
.loader:before {
    content: '';
    width: inherit;
    height: inherit;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #888;
    opacity: .6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: loader-08 2s infinite ease-in-out;
    -moz-animation: loader-08 2s infinite ease-in-out;
    -o-animation: loader-08 2s infinite ease-in-out;
    animation: loader-08 2s infinite ease-in-out
}

.loader:after {
    -webkit-animation-delay: -1s;
    -moz-animation-delay: -1s;
    -o-animation-delay: -1s;
    animation-delay: -1s
}

@-webkit-keyframes loader-08 {
    0%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-moz-keyframes loader-08 {
    0%,
    100% {
        -moz-transform: scale(0);
        transform: scale(0)
    }
    50% {
        -moz-transform: scale(1);
        transform: scale(1)
    }
}

@-o-keyframes loader-08 {
    0%,
    100% {
        -o-transform: scale(0);
        transform: scale(0)
    }
    50% {
        -o-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes loader-08 {
    0%,
    100% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0)
    }
    50% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
}

#pp-nav.pp-bullet li a,
.loader {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    /* top: 50%;
    left: 50% */
}

/*El tamanio de las de accesorios me agrandaron estas*/
#content-imagenes #slide-image{
    height: 100vh !important;
    width: inherit !important;
    background-color: black;
    object-fit: cover !important;
}

#logo-umb{
    position: fixed;
    opacity: 0.5;
    bottom: 1vh;
    right: 1vw;
    width: 6vw;
}


/*portatil*/
/* @media (min-height:760px) and (max-height:900px)    { 
}*/

/*preload*/
main{
    opacity:0;
}

#div-preload{
    position: fixed;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    /* color: white; */
}

.loading-label
{
  padding-top: 41vh;
  font-family: 'Volvo Broad';
  font-size: 36pt;
  /* position: absolute; */
  /* top: -6vh; */
  /* padding: 20vh; */
  color: #182871;
  bottom: 8vh;
}


/*Tablet*/
@media (min-width:950px) and (max-width:1300px)    { 

    .thum-tit {

        font-size: 11pt !important;
    }

    .sel-model, .sel-gal-model {

        width: 14vw !important;
    }

    .but-see-3d {
        width: 66% !important;
    }

}

/*portatil*/
@media (min-width:1300px) and (max-width:1550px)    { 

    .thum-tit {

        font-size: 11pt !important;
    }

    .sel-model, .sel-gal-model {

        width: 14vw !important;
    }

    /*en ninguna pantalla tendra que hacer scrol en el sidebar!!*/
    .but-see-3d {
        width: 66% !important;
    }

}

video{
    height: 100vh;
    width: 75vw;
    cursor: pointer;
    position: absolute;
}


/*instagram*/

 @media (min-width:490px) and (min-height:485px) and 
      (max-width:788px) and (max-height:700px) { 

        .but-home-car {
            width: 66%;
            font-size: 11px;
        }

        .but-see-3d {
            width: 63%;
         
            font-size: 10px;
          
        }

        #but-ver-3d img{
            width: 50%;
        }

        #back-btn {
            
            top: 4vh;
        }

}