/* Global CSS */



body { font-family: 'Titillium Web', sans-serif; color: #666666 }





/* Placeholder CSS */



header { width: 100%; height: 100%; position: fixed; top: 0; left: 0; }



header .bt       { width: 50%; height: 100%; position: absolute; top: 0; ; z-index: 1; 

                   -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; 

                   -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s }

header .bt:after { content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.75;

                   -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; 

                   -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s }



header .bt:hover:after,

header .bt:focus:after,

header .bt:active:after { opacity: 0.90; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; 

                          -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s }





header .bt.premiumauto       { left: 0; background: url("../img/bg-premiumauto.jpg") no-repeat center center; background-size: cover }

header .bt.premiumauto:after { background-color: #354a94 }



header .bt.technologies       { right: 0; background: url("../img/bg-technologies.jpg") no-repeat center center; background-size: cover }

header .bt.technologies:after { background-color: #c96923 }



header .bt.premiumauto:hover,

header .bt.premiumauto:focus,

header .bt.premiumauto:active,

header .bt.technologies:hover,

header .bt.technologies:focus,

header .bt.technologies:active { cursor: pointer }


header .bt.premiumauto.active:hover,

header .bt.premiumauto.active:focus,

header .bt.premiumauto.active:active,

header .bt.technologies.active:hover,

header .bt.technologies.active:focus,

header .bt.technologies.active:active { cursor: default }


header .bt.active             { width: 100%; z-index: 3 }

header .bt.active .logo .show { opacity: 1; z-index: 1 }





header .bt.premiumauto.active:after,

header .bt.technologies.active:after { opacity: 0.75 }

 

header .bt .logo     { position: absolute; top: 50%; left: 50%; margin-top: -50px; z-index: 3; }

header .bt .logo img { height: 100px; width: auto; position: relative }

header .bt.premiumauto .logo  { margin-left: -133px }

header .bt.technologies .logo { margin-left: -139px }



header .bt .logo .show { opacity: 0; z-index: -1; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; 

                         -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s }



header .bt .logo a     { display: block; color: #ffffff; margin-left: 88px; font-size: 15px; font-weight: 500; width: 140px; text-decoration: none }

header .bt .logo a .fa { padding-right: 6px; opacity: 0.75; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; 

                         -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s }



header .bt .logo a:hover .fa,

header .bt .logo a:focus .fa,

header .bt .logo a:active .fa { padding-right: 12px; opacity: 1 }



@media(max-width:767px){

    

    header .bt { width: 100%; height: 50% }

    header .bt.premiumauto   { top: 0; bottom: auto }

    header .bt.technologies  { top: auto; bottom: 0 }

    

    header .bt.active        { height: 100%; z-index: 3 }



}





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

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

@media(min-width:992px){}

@media(min-width:1200px){}