/*----------------------------------------------------*/

/* BASIC SETUP */

/*----------------------------------------------------*/

*{

    margin: 0;

    padding: 0;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}



html{

    background-color: #fff;

    color: #555;

    font-family: 'Lato', 'Arial', sans-serif;

    font-weight: 300;

    font-size: 26px;

    text-rendering: optimizeLegibility;

    overflow-x: hidden;

    

        

}



.clearfix{zoom: 1}

.clearfix:after{

    content: '.';

    clear:both;

    display: block;

    height: 0;

    visibility:hidden;

}



p{

    text-align: center;

}



/************/

/* scroling */

/************/



/* width */

::-webkit-scrollbar {

    width: 10px;

}



/* Track */

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 5px grey;

    box-shadow: inset 0 0 5px grey;

    border-radius: 10px;

}



/* Handle */

::-webkit-scrollbar-thumb {

    background: #8b8b8b;

    border-radius: 10px;

}



/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

    opacity: 0.6;

}



/*----------------------------------------------------*/

/* REUSABLE COMPONENTS */

/*----------------------------------------------------*/



.row {

    max-width: 1140px;

    margin: 0 auto;   

}



#moto > .row{

    margin: 0;

}

#moto > .row >iframe{

    width: 100vw;

    height: 100vh;

}



section {

    padding: 80px 0 0 0;

}



.box {

    padding: 1%;   

}

#kontakt,

#terminy_oprav,

#vyznamni_zakaznici{

    padding-bottom: 80px;

}

/* ----- HEADING ----- */

h1,

h2,

h3 {

    font-weight: 300;

    text-transform: uppercase;  

}



h1 {

    margin-top: 0;

    margin-bottom: 20px;

    color: #fff;

    font-size: 240%;

    word-spacing: 3px;

    letter-spacing: 1px;

   

}



h2 {

    font-size: 180%;

    word-spacing: 2px;

    text-align: center;

    margin-bottom: 30px;

    letter-spacing: 1px;

}



h3 {

    font-size: 110%;

    margin-bottom: 15px;

    text-align: center;

    letter-spacing: 2px;

}



h2:after {

    display: block;

    height: 2px;

    background-color: #a5a5ab;

    content: " ";

    width: 100px;

    margin: 0 auto;

    margin-top: 30px;

        

}







/* ----- PARAGRAPHS ----- */

.long-copy {

    line-height: 145%;

    width: 70%;

    margin-left: 15%;  

}



.box p{

    font-size: 90%;

    line-height: 145%;

    

}





/* ----- ICONS ----- */

.icon-big {

    font-size: 350%;

    display: block;

    color: #a5a5ab;

    margin-bottom: 10px;

}

.icon-smal {

    display: inline-block;

    width: 30px;

    text-align: center;

    color: #a5a5ab;

    font-size: 120%;

    margin-right: 10px;

    

    /*secret to align text and icons*/

    line-height: 120%;

    vertical-align: middle;

    margin-top: -5px;

    

}



/* ----- LINKS ----- */

a:link,

a:visited {

    color: #a5a5ab;

    text-decoration: none;

    padding-bottom: 1px;

    border-bottom: 1px solid #a5a5ab;

    -webkit-transition: border-botom 0.2s, color 0.2s;

    transition: border-botom 0.2s, color 0.2s;

    

}



a:hover,

a:active {

    color: #555;

    border-bottom: 1px solid transparent;

    

    

}



/* ----- BUTTONS ----- */

.btn:link,

.btn:visited {

    display: inline-block;

    padding: 10px 30px;

    font-weight: 300;

    text-decoration: none;

    border-radius: 200px;   

    -webkit-transition: background-color 0.2s, border 0.2s, color 0.2s;   

    transition: background-color 0.2s, border 0.2s, color 0.2s;

}





.btn-full:link,

.btn-full:visited {

    background-color: #a5a5ab;

    border: 1px solid #a5a5ab;

    color: #fff;

    margin-right: 15px;

    

}





.btn-ghost:link,

.btn-ghost:visited {

    border: 1px solid #c2c3c4;

    color: #c2c3c4;

}



.btn:hover,

.btn:active {

    background-color: #bebfbf;

}



.btn-full:hover,

.btn-full:active {

    border: 1px solid #bebfbf;

}





.btn-ghost:hover,

.btn-ghost:active {

    border: 1px solid #bebfbf;

    color: #fff;

}



/*----------------------------------------------------*/

/* HEADER */

/*----------------------------------------------------*/

/* header {

    

    background-image:  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(img/motor_heroe_new.jpg);

    background-size: cover;

    background-position: center;

    height: 100vh;

    background-attachment: fixed;



} */



.hero {

    position: relative;

    height: 100vh;

    overflow: hidden;

}



.hero iframe {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 100vw;

    height: 100vh;

    transform: translate(-50%, -50%);

    object-fit: cover;

    z-index: 1;

}



.hero .moto{

        position: absolute;

    bottom: 70px;

    width: 100%;

    text-align: center;

   

    color: #ffffff4a;

}



.hero .overlay {

    position: absolute;

    inset: 0;



    z-index: 2;

}



.hero .content {

    position: relative;

    z-index: 3;

    color: white;

}

.hero-text-box {

    position: absolute;

    width: 1100px;

    top: 50%;

    left: 50%;

    

    -webkit-transform: translate(-50%, -50%);

    

    transform: translate(-50%, -50%)

}





.logo,

.logo-mobile {

    height: 70px;

    width: auto;

    float: left;

    margin-top: 30px;

    

}

      .logo{

        display: block;

    }

.logo-mobile{

    display: none;

}



.logo-black{ 

    display: none;

    height: 30px;

    width: auto;

    float: left;

    /* Margin 5px top and 5px botom and 0px on the boath side */

    margin: 5px 0;

    margin-left: 20px

    

}

.logo-back{ 

    display:none;

    height: 30px;

    width: auto;

    float:right;

    /* Margin 5px top and 5px botom and 0px on the boath side */

    margin: 5px 0;

    

}



/* Main navi */



.main-nav {

    float:right;

    list-style: none;

    margin-top: 60px;

    margin-right: 20px;

    

    

}



.main-nav li {

    display: inline-block;

    margin-left: 30px;

    

       

}

.main-nav li a:link,

.main-nav li a:visited{

    padding: 0px 0;

    color: #fff;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 90%;

    border-bottom: 2px solid transparent;

    -webkit-transition: border-bottom 0.2s;

    transition: border-bottom 0.2s;

    

}

.main-nav li a:hover,

.main-nav li a:active{

    border-bottom: 2px solid #a5a5ab;

}



/* Mobile navi*/

.mobile-nav-icon {

    float: right;

    margin-top: 30px;

    cursor: pointer;

    display: none;

}



.mobile-nav-icon i {

    font-size: 200%;

    color: #fff;

}

/* Sticky navi*/



.sticky {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background-color: rgba(255, 255, 255, 0.98);

    box-shadow: 0 2px 2px #efefef;

    /* This element is be on the top becouse its have highest z index */

    z-index: 9999;

    

}



.sticky .main-nav { margin-top: 10px;

    

}



.sticky .main-nav li a:link,

.sticky .main-nav li a:visited{

    padding: 2px 0;

    color: #555;



}



.sticky .logo { display: none; }



.sticky .logo-black {display: block; }

.sticky .logo-back {display: block; }







/*----------------------------------------------------*/

/* JAK TO FUNGUJE*/

/*----------------------------------------------------*/

.mapApp-3D img {

    opacity: 0.7;

    width: 100%;

    height: auto;

    box-shadow: 0 10px 8px 10px #888888;



    

}

    





/*----------------------------------------------------*/

/* 3D model */

/*----------------------------------------------------*/

.section-3Dmodels {

    padding: 0;

    

}

.model3D-showcase {

    list-style: none;

    width: 100%;

    

}

.model3D-showcase li {

    display: block;

    float: left;

    width: 25%;

    

}



.model-photo {

    width: 100%;

    margin: 0;

    overflow: hidden;

    background-color: rgb(203, 203, 203);



    

}



.model3D-showcase h3{

    text-align: center;

    margin-top: 20px

        

}



.model-photo img,

 .model-photo iframe{

    opacity: 0.7;

    width: 100%;

    padding: 10px 10px;

    height: auto;

    -webkit-transform: scale(1.15);

    transform: scale(1.15);

    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;

    transition: opacity 0.5s, -webkit-transform 0.5s;

    transition: transform 0.5s, opacity 0.5s;

    transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;

    

}



.model-photo img:hover,

.model-photo iframe:hover {

    opacity: 1;

    -webkit-transform: scale(1.03);

    transform: scale(1.03);

}



/*----------------------------------------------------*/

/* FOOTER */

/*----------------------------------------------------*/



footer {

    background-color: #333;

    padding-bottom: 20px;

}



.footer-nav {

    list-style: none;

    float: left;

    

}



.social-links {

    list-style: none;

    float: right;

}



.footer-nav li,

.social-links li {

    display: inline-block;

    margin-right: 20px;

}



.footer-nav li:last-child,

.social-links li:last-child {

    margin-right: 0;

}



.footer-nav li a:link,

.footer-nav li a:visited,

.social-links li a:link,

.social-links li a:visited {

    text-decoration: none;

    border: 0;

    color: #888;

    -webkit-transition: color 0.2s;

    transition: color 0.2s;

}



.footer-nav li a:hover,

.footer-nav li a:active {

    color: #999;

}

.social-links li a:link,

.social.links li a:visited {

    font-size: 180%;

}



.ion-social-facebook:hover{

    color: #3b5998  

}



.ion-social-youtube:hover{

    color: #cd201f  

}





.ion-social-instagram:hover{

    color: #517fa4 

}



footer p {

    color: #999;

    text-align: center;

    font-size: 90%;

    margin-top: 30px;

}



#picture_motors{

    width: 100%;

    border-radius: 150px;

    box-shadow: 0 10px 8px 10px #888888;

    opacity: 0.7;

}

#picture_motors1{

    width: 100%;



    opacity: 0.7;

}





#time_logo_10days,

#time_logo_36hour{

    width: 100px;

    margin: 25px 42%;

    opacity: 0.7;

}

#time_logo_10days{

    width: 130px

}

#vyznamni_zakaznici{

    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/motors_5.jpg);

    background-size: cover;

    color: #fff;

    background-attachment: fixed;

}





#tatra_logo {

    height: 150px;

    margin-left: 50%;

}





.loga_firem{

  opacity: 0.8;  

}



#listOfMotors{

    padding-left: 20%;



}



/* #motto{

    font-family: cursive;



} */

#motto::after{

    background-color: #fff;

    

}

#o_mne--text{

    text-align: justify;

}

#moto{

    padding-bottom: 0;

}



#picture_motors4{

    height: 300px;

    margin-left: 42%;

    margin-top: 100px;

}