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

*,
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
}

/* 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;
    }  
     

.rev-text-1,
.rev-text-2,
.rev-text-3,
.rev-text-4,
body,
h1,
h2,
h3,
h4,
h5,
h6,
html {
    font-family: 'Volvo', 'Volvo Broad' ;
}

.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
}

html {
    height: 100%
}

*,
: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;
}

.select-car-tit {
    top: 10vh;
    text-decoration: none;
    position: absolute;
    color: #fff;
    font-family: 'Volvo Broad';
    font-size: 38pt;

  }
  
.more-info{
    bottom: 3vh;
    text-decoration: none;
    position: absolute;
    color: #fff;
    font-weight: 300;
    font-size: 11pt;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

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

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

#but-xc40{
    background-image: url(./files/UI/02CarSelection/XC40.jpg);
    
}

#but-xc60{
    background-image: url(./files/UI/02CarSelection/XC60.jpg);
    
}

#but-xc90{
    background-image: url(./files/UI/02CarSelection/XC90.jpg);
    
}

#but-s60{
    background-image: url(./files/UI/02CarSelection/S60.jpg); 
}

#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)   {

    .select-car-tit
    {
        font-size: 30pt !important;
    }

    .load-logo{
        /* margin-top: 20vh !important; */
        opacity: 0.8;
        width: 100px !important;
        height: 100px !important;
    }

    .more-info {
        top: calc(96% - 56px) !important;
    }


}

/* @media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
    html {
      transform: rotate(-90deg);
      transform-origin: left top;
      width: 100vh;
      height: 100vw;
      overflow-x: hidden;
      position: absolute;
      top: 100%;
      left: 0;
    }
  } */


  .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%
}

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

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

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

}




.loading-betw-car-view{
    text-align: center;
  }
  
  
  
.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 */
  }
  
  @-webkit-keyframes loader-logo {
    0%,
    100% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
  }
  
  @-moz-keyframes loader-logo {
    0%,
    100% {
        -moz-transform: scale(0.8);
        transform: scale(0.8)
    }
    50% {
        -moz-transform: scale(1);
        transform: scale(1)
    }
  }
  
  @-o-keyframes loader-logo {
    0%,
    100% {
        -o-transform: scale(0.8);
        transform: scale(0.8)
    }
    50% {
        -o-transform: scale(1);
        transform: scale(1)
    }
  }
  
  @keyframes loader-logo {
    0%,
    100% {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8)
    }
    50% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
  }