@charset "UTF-8";

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300,500&subset=latin,latin-ext);

@font-face {
  font-family: "anvis-avt";
  src:url("fonts/anvis-avt.eot");
  src:url("fonts/anvis-avt.eot?#iefix") format("embedded-opentype"),
    url("fonts/anvis-avt.woff") format("woff"),
    url("fonts/anvis-avt.ttf") format("truetype"),
    url("fonts/anvis-avt.svg#anvis-avt") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "anvis-avt" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#content .text ul li:before,
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "anvis-avt" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#content .text ul li:before,
.icon-check:before { content: "\61"; }
.icon-money:before { content: "\62"; }
.icon-wheels:before { content: "\63"; }
.icon-sumitomo:before { content: "\64"; }
.icon-phone:before { content: "\65"; }
.icon-clock:before { content: "\66"; }
.icon-add:before { content: "\67"; }

html {}
body { color:#393939; background: #ffffff; font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 1.4em; }

h1 { font-size: 32px; color: #FFFFFF; font-weight: 300; }
.front h1 { text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); }
h1.page-title { position:absolute; bottom: -.32em; left:0; line-height: 1.3em; font-size: 80px; text-transform: uppercase; width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

h2, .h2 { font-size: 26px; font-weight: 300; margin-bottom: 1.65em; }
h3, .h3 { font-size: 17px; font-weight: 400; margin-bottom: 1em; }

.title-extra { color: #fff; padding: 1.1em 1.25em; margin: 0; position: relative; z-index: 100; }
.title-extra-bg { background: rgba(184,0,7,.80); position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-filter: contrast(500%) brightness(30%); filter: contrast(500%) brightness(30%); }

.text-gallery { margin: 1.65em 0; }

a { color: #004686; text-decoration: none; }
a:hover { color: #7da9d0; text-decoration: underline; }
p, dl, dd, dt, blockquote, td, th { line-height: 1.4em; }

form { font-weight: 300; }
    label, input { color:#757575; }
    label, .error, .success { font-size: 16px; }
    .error { color: #004686; }
    .error input, .error textarea { border-color: #004686; }

#content .text ul { margin: 0 0 1.65em; }
ul ul, ul ol, ol ul { margin:0 0 1.65em 3.3em; }
#content .text ul, #content .text ol { line-height: 2.2em; }
    #content .text ul li:before { margin-right: .8em; color: #004686; }
    #content li { list-style: none; list-style-type: none; }

strong { font-weight: 700; }
.centered li { text-align: center; }

#header-menu.wrapper,
#header-menu.wrapper.container-fixed > .group,
.wrapper { position:relative; margin:auto; max-width:1170px; width:94%; }
.padd { padding: 3.3em 0 1.65em; }

.btn-blue, input[type="submit"].btn-blue { background-color:#0084AA;}
.btn-gray, inpit[type="submit"].btn-grey { color: #717171; }
.btn-gray.btn-outline, inpit[type="submit"].btn-grey.btn-outline { border-color: #ddd; }
.btn-white, inpit[type="submit"].btn-white { color: #b0b0b0; }
.btn-white.btn-outline, inpit[type="submit"].btn-white.btn-outline { color: #b0b0b0; border-color: #5c5c5c; }
.btn-red, input[type="submit"].btn-red { background-color:#004686; color:rgba(255, 255, 255, 0.901961); }

.btn, input[type="submit"].btn { border-radius:1; text-transform: uppercase; font-size: 16px; padding:0.55em 1em; }
.btn:hover { text-decoration: none; }

.bg-cover { -webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover!important; background-size: cover!important; }

time { color: #cdd1d4; font-size: 14px; }

header { color: #FFFFFF; position:absolute; top: 0; left: 0; right:0; }
    
    #header-menu { position: relative; z-index: 1000; height: 105px; overflow: hidden; background: #fff; top: 45px; border-bottom: 2px solid #FFFFFF; }
    #header-menu.container-fixed { position:fixed; left: 0; right: 0; top: 0; border-color: #e1e1e1; }
        #header-menu.wrapper.container-fixed { max-width: 100%; width: 100%; }

    header .logo { margin-left: 1.65em; width: 230px; height: 109px; display: block; text-indent: -9999px; color: #FFFFFF; background: url('../img/logo_sumiriko_avs.png'); background-image: url('../img/logo_sumiriko_avs.svg'), none; background-size: 230px 109px; }
    header nav.navbar { background: #fff;}
       header nav.navbar ul { margin-right: 2em; }
           header nav.navbar.navbar-right ul li { margin-left:1.65em; }
               header nav.navbar ul li a { color: #000; font-size: 16px; line-height: 48px; padding: 28px 8px 0 8px; position: relative; font-weight: 300; text-transform: uppercase; border-top: 4px solid #FFFFFF;}
               header nav.navbar ul li a:hover { color: #7da9d0; text-decoration: none; }
               header nav.navbar ul li.active a { color: #000; border-color: #004686;} 
               header nav.navbar ul li.active a:before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; }
               
               header nav.navbar ul.language { position: relative; margin-right: 2em; }
               header nav.navbar ul.language:before { content:''; border-left: 1px solid #e1e1e1; position: absolute; top: 15px; left:0; width: 1px; height: 90%; }
                    header nav.navbar ul.language li { margin-left: 2em; }
                        header nav.navbar ul.language li a { color: #858585; }
                        header nav.navbar ul.language li a:hover { color: #454545; }
    
                
#maincontent { background: #fff; }

    #content-header { position: relative; height: 365px; padding-top: 220px; background: url('../img/bg18.jpg') no-repeat 50% 50%; }
        .not-front #content-header { height: 248px; padding-top: 175px; }
        .motive-vyroba #content-header { background-image: url('../img/bg_vyroba.jpg'); }
        .motive-kariera #content-header { background-image: url('../img/bg_kariera.jpg'); }
        .motive-kontakty #content-header { background-image: url('../img/bg_kontakty.jpg'); }

        #content-site { height: 100%; }
            #content-site .site-slogan { position: absolute; right: 0; bottom: -25px; border-bottom: 25px solid #b80007; }
                #content-site .site-slogan .h3 { font-size: 22px; font-weight: 300; }
    
    #articles { background-color: #f2f3f4; }
        #articles h2 { color: #004686; }
        .block-news {}
            .block-news article { background: #FFFFFF; }
            #article-page article { background-color: #f2f3f4; }
                .block-news figure {}
                    .block-news figure { overflow: hidden; height: 260px; display: flex; align-items: center; justify-content: center; }
                    .block-news article:hover figure img { transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1);-webkit-transform:scale(1.1);-o-transform:scale(1.1); }
                
                .block-news .text { padding: .65em 0 .65em 1.65em; }
                    .block-news h3.title { height: 45px; margin: 1em 0 .5em; overflow:hidden; text-transform: uppercase; font-size: 17px; font-weight: 500; }
                    
                    .block-news .readmore { border-left: 1px #f2f3f4 solid; }
                    .block-news .readmore a { font-size: 26px; color: #d1d1d1; font-weight: 300; line-height: 90px; display: block; width: 100%; height: 100%; }
                    .block-news article:hover a,
                    .block-news h3.title a:hover,
                    .block-news .readmore a:hover { color: #000; }
                    .block-news .readmore a:hover { text-decoration: none; }
                    
    
    .block-events { background: url('../img/bg_events.jpg') 50% 50% no-repeat; }
        #events article { background: rgba(0,0,0,0.6); text-align: justify; }
        #events article:hover { background: rgba(0,0,0,1); }
            #events article:hover a { color:rgba(255,255,255,1); }
            #events .text,
            #events time { color: rgba(255,255,255,.5); }
        
            .block-events .wrapper { padding-top: 10em; }
            .block-events .events-title { border-top: 25px solid #b80007; position: absolute; top: -25px; left: 0; }
                .block-events .events-title .title-extra { padding: 1.25em 3.3em; }
                
            #events h3 { font-size: 15px; text-transform: uppercase; display: block; height: 38px; overflow: hidden; }
            #events .text { padding: 1.65em; font-size: 14px; }
                #events .perex { height: 105px; }
            #events a { color: rgba(255,255,255,.8); }
                #events a:hover { color:rgba(255,255,255,1); }
                #events a.btn:hover { color:#000000; }
    
    #content { }
    .front #content { background: url('../img/bg_content_front.jpg') 50% 0% no-repeat; }
        .front #content h2 { color: #004686; }
        .front #content .padd { padding: 6em 0; }
        .front #content .text { color: #707070; font-size: 16px;}
            .front #content .text ul li { line-height: 3em; }
            .front #content .text ul li:before { font-size: 1.5em; }
    
    #references {}
        #references .wrapper { padding: 5em 0 3.3em; }
        
    #products {}
        #products article { background-color: #f2f3f4; margin-bottom: 3.3em; }
            #products .title { font-size: 26px; }
                #products .title a { color: #000; }
            #products .text { padding-top: 1.65em; }
    
    .front #maincontent .block-content {}
        .front #maincontent .block-content ul {}
            .front #maincontent .block-content ul li {}
                .front #maincontent .block-content ul li img { -webkit-filter: grayscale(100%) opacity(50%); filter: grayscale(100%) opacity(50%); }
                .front #maincontent .block-content ul li img:hover { -webkit-filter: grayscale(0%) opacity(100%); filter: grayscale(0%) opacity(100%); }

    .gallery { background-color: #f2f3f4; }
        .gallery .wrapper,
        .webform .wrapper { padding: 3.3em 0; }
            .gallery .title { color: #004686; }

    .pictogram { font-size: 4.5em; color: #004686; }
    
    .webform {}
        
        .webform .icon-phone { position: relative; }
        .webform .icon-phone:before { color: #004686; font-size: 1.2em; position: absolute; left: -40px; top: 3px; }
        .webform textarea { min-height: 200px; }

footer { color: #696d71; background: #000000; padding: 3.3em 0 0; }
    footer .unit-10 { font-size: 4em; color: rgba(255,255,255,.25)!important; }
    footer .title { color: #FFFFFF; }
    footer .text { font-weight: 300; }
        footer .text strong { font-weight: 500; }
    
    
/* Message error, success */
.message { background: #EFEFEF; text-align: center; width: 100%; padding: 25px; font-size: 1.2em; }
    .message-success { background-color:#F0F5E5; color:#546628; }
    .message-error { background-color:#FDEFEF; color:#004686; }
/* end Message */

/* Forms */
input:focus:-moz-placeholder { color: transparent!important; }
input:focus::-moz-placeholder { color: transparent!important; }
input:focus::-webkit-input-placeholder { color: transparent!important; }
input:focus:-ms-input-placeholder { color: transparent!important; }
textarea:focus:-moz-placeholder { color: transparent!important; }
textarea:focus::-moz-placeholder { color: transparent!important; }
textarea:focus::-webkit-input-placeholder { color: transparent!important; }
textarea:focus:-ms-input-placeholder { color: transparent!important; }

/* Forms */

/* PJAX */
#tools-progress { height: 6px; }
#tools-progress span { background-color: #004686; }
/* End PJAX */

/* Images effect */
figure img,
ul li img {
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    position: relative;
}
/* End Images */

@media screen and (max-width : 1100px) {
   header nav.navbar.navbar-right ul li { margin-left:1em; }
       header nav.navbar ul li a { font-size: 14px; }


/* tablets */
@media screen and (max-width : 980px) {
    #header-menu { height: 90px;}
        header .logo { width: 145px; height: 90px; background-size: 145px 80px; margin-top: 10px; }
           header nav.navbar.navbar-right ul li { }
               header nav.navbar ul li a { font-size: 14px; padding: 18px 0 0 5px; }

}
/* mobile */
@media screen and (max-width : 767px) {
    
    h1.page-title { position:absolute; font-size: 50px; width: 100%; }
    
    #header-menu,
    #header-menu.container-fixed { height: auto; position:fixed; left: 0; right: 0; top: 0; border-color: #e1e1e1; }
    #header-menu .units-row .unit-70,
    #header-menu .units-row .unit-30 { margin-bottom: 0; }
        #header-menu.wrapper,
        #header-menu.wrapper.container-fixed > .group { max-width: 100%; width: 100%; }

        header .logo { }
            header nav.navbar ul.language:before { border: 0; }
    #language,
    .navigation-toggle { position: absolute; top: 30px; right: 0;}
    
    #language { right: 30px; top: 22px; }
    
    #primary-menu { height: auto; display: none; }
        header nav.navbar ul li a { padding: 0 1.65em; line-height: 3.3em; border-top: 0; border-left: 4px solid #FFFFFF; }
}
