/* Custom Styles. Bootstrap Styles are default' */ :root { --main-color: #EA3736; --main-border: 1px solid #EA3736; } * { } a, input, button { -webkit-transition: all ease .2s; -moz-transition: all ease .2s; -o-transition: all ease .2s; transition: all ease .2s; } body { color: black; font-size: 16px; font-family: Calibri, sans-serif; background-color: black; ; } tbody{ color:black; } @media only screen and (max-width: 768px) { /* For mobile phones: */ #orderCheckout { display: inline-block; } } /*Typography*/ a { color: var(--main-color); } a:hover { color: var(--main-color); text-decoration: underline; } hr { border-color: #e5e5e5; margin: 10px 0 10px 0; } h1, h2, h3, h4, h5, .btn, p.big-paragraph, .carousel-caption, .recent-posts .col-md-9 .text p small, .navbar-default .navbar-brand, .orange { font-family: 'Arial', sans-serif; font-weight: normal; } h1 { font-size: 36px; text-transform: none; color: #262626; } h1 span { color: var(--main-color); } h2 { font-size: 32px; color: #222222; text-transform: lowercase; line-height: 50px; } h2 small { color: #c7c7c7; font-size: 12px; text-transform: uppercase; } h2.block__title { border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; line-height: 3px; margin-bottom: 60px; } h2.block__title span { border: none; background-color: #eff2f2; padding: 0 30px; text-transform: uppercase; line-height: 3px; } h3 { font-size: 27px; color: #262626; } h3 small { font-size: 18px; } h3 a { color: #262626; } h3 a:hover { text-decoration: none; color: var(--main-color); } .typo { margin-top: 80px; } h4 { font-size: 19px; color: #222222; margin: 0; } h4 a { color: #222222; } h4 a:hover { text-decoration: none; color: var(--main-color); } h5 { font-size: 17px; text-transform: uppercase; color: #33313a; } h2.with__margin { margin-top: 70px; margin-bottom: 0px; } h2.with__margin2 { margin: 50px 0; } p.small-paragraph { font-size: 14px; color: #939393; font-family: 'Open Sans', sans-serif; } .relative_btn { position: absolute; left: 50%; margin-left: -90px; bottom: -35px; } .headings p.small-paragraph { margin: 15px 0 35px 0; } /* Forms */ .form-control, .form-control:focus { -webkit-box-shadow: none; box-shadow: none; } .form-control:focus { border-color: #ffdd3c; } /*Buttons*/ .readmore:focus, .expand_buttonBlog:focus, .readmore:active, .readmore:hover { outline: 0; border: none; -moz-outline-style: none; } .btn-primary { font-size: 18px; text-transform: uppercase; border-width: 2px; color: #fff; font-weight: 800; border-color: #e7e7e7; background: none; } .btn-primary:hover, .btn-primary:focus { background: none; border-color: #57292b; color: #57292b; } .btn-info { font-size: 12px; color: #aaaaaa; border-color: #e7e7e7; background: #fff; width: 140px; height: 40px; line-height: 40px; border-width: 2px; padding: 0; } .btn-info:hover, .btn-info:focus, .btn-info:active { background-color: #fff; border-color: var(--main-color); color: var(--main-color); } .btn-default { font-size: 14px; color: #1b1931; border-color: #fff; font-family: 'Capriola', sans-serif; background: #fff; } .btn-default:hover, .btn-default:focus, .btn-default:active { background-color: var(--main-color); border-color: var(--main-color); color: #fff; } button.btn-primary:focus, .btn-default:focus, .btn-info:focus { outline: none; } .btn-lg { width: 180px; height: 47px; text-transform: uppercase; line-height: 47px; padding: 0; } .btn-dita { width: 180px; height: 180px; font-size:25pt; line-height: 47px; padding: 0; } .btn-md { font-size: 14px; width: 140px; height: 45px; line-height: 42px; padding: 0; margin-top: 20px; } footer .btn-md, .recent-posts .btn-md { margin-top: 0px; } /*Header*/ header { background: #fff; width: 100%; } .navbar-header { position: absolute; left: 30%; margin-top: 5px; text-align: center; background-size: contain; } .main__header { height: 22vh; } .kklogo { position: absolute; left: 10vw; /*margin-left: 20vw; margin-top: 5px;*/ width: 80%; height: 40%; text-align: center; background-size: contain; clear:both; color: white; border-width: 2vw; background-image: url('../images/KK_logo.png'); background-repeat: no-repeat; background-position: center top; ; } @media only screen and (max-width: 480px) { .main__header{ height: auto; } } @media only screen and (min-width: 768px) { .main__header { /*height: 15vh;*/ } } @media(max-width:1310px) { .kklogo { position: absolute; left: 10vw; /*margin-top: 5px; width: 80vw;*/ height: 40vh; text-align: center; background-size: contain; clear:both; color: white; border-width: 2vw; background-image: url('../images/KK_logo.png'); background-repeat: no-repeat; background-position: center top; ; } } .navbar-toggle { margin-right: 0; position: absolute; } .navbar-default .navbar-brand, .navbar-default .navbar-brand:hover { font-size: 18px; color: #fff; width: 100%; text-transform: lowercase; text-align: center; padding: 0; } .navbar-default .navbar-brand a { color: #FFF; text-decoration: none; outline: none; } .navbar-default .navbar-brand span.sep { border-top: 1px solid #fff; width: 65px; position: relative; margin: 0 auto; display: block; top: 10px; } /*Main Navigaion Menu*/ .dropdown:hover .dropdown-menu { display: block; } .kkdropdown:hover .kkdropdown-menu { display: block; } .navbar-default { background: none; border: none; margin-bottom: 0px; text-align: center;/*added 23 Nov 2017*/ position: relative; z-index: 999; } .navbar-default .navbar-nav { padding: 0px; } .navbar-default .navbar-nav>li { padding: 30px 0; margin-left: 40px; } .navbar-default .navbar-nav>li:hover { } .navbar-default .navbar-nav>li>a { /*color: #45484c;*/ font-size: 11px; padding: 0px 10px; font-weight: normal; font-family: 'Open Sans', sans-serif; box-sizing: border-box; -moz-box-sizing: border-box; text-transform: uppercase; } .navbar-default .navbar-nav>li.dropdown>a { background: none; } .navbar-default .navbar-nav>li.active>a, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li:hover>a, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>li.open>a, .navbar-default .navbar-nav>li.active>a:hover { background: none; color: var(--main-color); } .navbar-default .navbar-nav>li:first-child { margin-left: 0px; } ul.dropdown-menu { left: 0px !important; border-radius: 0px; padding: 0; -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; -ms-border-radius: 0px; border: none; background: #f8f8f7; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; } ul.dropdown-menu li { border-bottom: 1px solid #ededed; } ul.dropdown-menu li:last-child { border-bottom: none; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; } ul.dropdown-menu li:first-child { border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; } ul.dropdown-menu>li>a { color: #4a4a4a; border-top: none; font-size: 11px; line-height: 11px; padding: 15px 20px; text-transform: uppercase; } ul.dropdown-menu>li>a:hover { color: var(--main-color); border-top: none; background: none; } ul.kkdropdown-menu { left: 0px !important; border-radius: 0px; padding: 0; -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; -ms-border-radius: 0px; border: none; background: #f8f8f7; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; } ul.kkdropdown-menu li { border-bottom: 1px solid #ededed; } ul.kkdropdown-menu li:last-child { border-bottom: none; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; } ul.kkdropdown-menu li:first-child { border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; } ul.kkdropdown-menu>li>a { color: white; border-top: none; font-size: 22px; line-height: 11px; padding: 15px 20px; text-transform: uppercase; } ul.kkdropdown-menu>li>a:hover { color: var(--main-color); border-top: none; background: none; } /*Carousel*/ .slider { position: relative; z-index: 9; } .absolute__img { position: absolute; bottom: -10px; left: 50%; margin-left: -49px; z-index: 99; } .slider .btn { margin: 40px 10px 0; } .carousel-caption { top: 50%; margin-top: -120px; font-size: 14px; color: #fff; text-transform: none; text-shadow: 1px 1px 3px #666666; } .carousel-caption h1 { font-size: 1.5vw; line-height: 30px; margin-top: 70px; color: #fff; } .carousel-caption p { font-weight: 300; margin: 0; } .carousel-caption h1 span { color: #ffdd3c; border: 2px solid #fff; padding: 0 4px 4px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; } .carousel-control { background: none; opacity: 1; position: absolute; top: 50%; margin-top: -35px; -moz-opacity: 1; } .carousel-control .carousel-control-left { background: url('../images/slider/prev.png') no-repeat; background-size: contain; width: 50px; height: 50px; left: 20px; } .carousel-control .carousel-control-right { background: url('../images/slider/next.png') no-repeat; background-size: contain; width: 50px; height: 50px; right: 20px; } .carousel-control .carousel-control-left:hover { background: url('../images/slider/prev_a.png') no-repeat; background-size: contain; } .carousel-control .carousel-control-right:hover { background: url('../images/slider/next_a.png') no-repeat; background-size: contain; } .boxed .carousel-control .carousel-control-left { left: -150px; top: 270px; } .boxed .carousel-control .carousel-control-right { right: -150px; top: 270px; } .boxed .carousel-caption { top: 90px; } .boxess { background-color: #fff; } .boxess .carousel-caption h1 { font-size: 40px; line-height: 40px; } /*Container*/ .container_header{ color: black; font-size: 20px; font-family: Calibri, sans-serif; ; } .main__middle__container .row ul, .main__middle__container .row ol { padding-left: 20px; } .main__middle__container { width: 100%; display:block; } .row { padding: 75px 0; } .row.with__sep { background: url('../images/lines.png') repeat-x left bottom; } .container .row:first-child { padding: 75px 10% 75px 10%; width:100%; } p.big-paragraph { font-size: 14px; text-transform: uppercase; padding-top: 15px; color: var(--main-color); } .orange { color: var(--main-color); font-size: 14px; text-transform: none; padding: 0 0 10px 0; } .black-text { color: #1e1e1e; } .to_top { margin-top: -80px !important; } .blue__line { width: 100%; /*padding: 15px 0% 15px;*/ margin: 0; background: #262626 no-repeat; background-size: 100% 100%; } .blue__line h1 { color: #fff; } .blue__line h2 { color: #fff; line-height: 36px; } .blue__line p { color: var(--main-color); } img.full-width { width: 100%; } img { vertical-align: middle; /*height: 9vw;*/ } .img-rounded { border-radius: 6px; } /*Icons Blocks*/ .icons__blocks { background: url('../images/bg_pattern.png') repeat left center; width: 100%; margin: 0; padding: 80px 0 80px; } .icons__blocks h2 { color: #fff; background: url('../images/lines.png') repeat-x left center; } .icons__blocks h3 a { color: #fff; } .icons__blocks h3 a:hover { color: #77beec; } .icons__blocks h2 span { background: url('../images/bg_pattern.png') repeat left center; padding: 0 40px; } .icons__blocks p.small-paragraph { position: relative; margin-top: 5px; text-transform: uppercase; font-size: 14px; margin-bottom: 40px; color: #5c5c5c; font-weight: 800; } .icons__blocks p { margin-top: 20px; } .icons__blocks img.img-rounded { width: 100%; } .separator { background: url('../images/lines.png') repeat-x left 30px; } .separator.sub { position: relative; top: 80px; margin-bottom: 20px; } /* grey-info-block */ .grey-info-block { background: #eef1f4 url('../images/big_line_bg.jpg') no-repeat; background-size: 100% 100%; width: 100%; position: relative; padding: 0px 0 75px 0; margin: 0; color: #8f8f8f; } .grey-info-block>.container { position: relative; } .grey-info-block .separator { position: absolute; top: -30px; left: 0; width: 100%; } .grey-info-block h2 { padding-top: 80px; } .grey-info-block h2 span { padding: 0 40px; color: #fff; } .grey-info-block p.small-paragraph { position: relative; padding-bottom: 20px; margin-bottom: 40px; margin-top: -5px; } .grey-info-block p.small-paragraph.light { font-weight: normal; margin-bottom: 10px; margin-top: 0px; } .grey-info-block img { margin-bottom: 20px; } .grey-info-block h3 small { color: #fff; } .grey-info-block .btn { margin-top: 30px; } .row.grey-line-row { background-color: #f5f7f8; padding: 0; } .row.grey-line-row h1 { padding-bottom: 10px; } .row.grey-line-row.small_padding { padding: 10px 0; background-color: #90938A; width:100%; } .row.grey-line-row.small_padding--footer { padding: 0; color: #7a7a7a; width:100%; } /*Three Blocks*/ .three__blocks { } .three__blocks .col-md-4 h3 a { background: url('../images/icons/Icon1.png') no-repeat center top; padding-top: 80px; display: inline-block; } .three__blocks .col-md-4b h3 a { background: url('../images/icons/Careers.png') no-repeat center top; padding-top: 80px; display: inline-block; } .three__blocks .col-md-4c h3 a { background: url('../images/icons/Icon3.png') no-repeat center top; padding-top: 80px; display: inline-block; } .three__blocks .col-md-4.middle h3 a { background: url('../images/icons/Icon2.png') no-repeat center top; } .three__blocks .col-md-4.last h3 a { background: url('../images/icons/ico2.png') no-repeat center top; } /*.three__blocks .col-md-4:last-child h3 a { background: url('../images/icons/ico3.png') no-repeat center top; }*/ .three__blocks .col-md-4 h3 a:hover { background: url('../images/icons/Icon1_a.png') no-repeat center top; } .three__blocks .col-md-4b h3 a:hover { background: url('../images/icons/Careers_a.png') no-repeat center top; } .three__blocks .col-md-4c h3 a:hover { background: url('../images/icons/Icon3_a.png') no-repeat center top; } .three__blocks .col-md-4.middle h3 a:hover { background: url('../images/icons/Icon2_a.png') no-repeat center top; } .three__blocks .col-md-4.last h3 a:hover { background: url('../images/icons/ico2_a.png') no-repeat center top; } /*.three__blocks .col-md-4:last-child h3 a:hover { background: url('../images/icons/ico3_a.png') no-repeat center top; }*/ .three-blocks { background: url('../images/image_1920x225.jpg') no-repeat center top; background-size: 100% 100%; } .three-blocks .container .row:first-child { padding: 55px 10%; } .three-blocks h2 { color: #fff; text-transform: none; padding: 0; } .three-blocks p { padding: 15px 0 0 0; color: rgba(255,255,255,0.7); text-transform: uppercase; font-weight: 800; font-size: 14px; } .three__blocks p.smaller { margin-top: -10px; margin-bottom: 20px; } .three__blocks p.smaller small { font-size: 14px; color: #a5a5a5; } .three__blocks img { margin: 0 auto 20px auto; } .three__blocks p:last-child { margin-top: 30px; } /* Recent Posts */ .recent-posts { background: url('../images/bg_pattern.jpg') repeat; } .recent-posts>.container { position: relative; } .recent-posts .separator { position: absolute; top: -30px; left: 0; width: 100%; } .recent-posts h2 { padding-top: 80px; } .recent-posts h2 span { background: #fff; padding: 0px 40px 0 40px; } .recent-posts p.small-paragraph { position: relative; padding-bottom: 20px; margin-bottom: 40px; margin-top: -5px; } .recent-posts .sep img { background: url('../images/bg_pattern.jpg') repeat; } .recent-posts .col-md-9, .recent-posts .col-md-3 { margin-top: 40px; } .recent-posts .col-md-9 .text { float: left; width: 55%; margin-left: 2%; } .recent-posts .col-md-9 .text h3 { margin-top: -1px; margin-bottom: 10px; line-height: 24px; } .recent-posts .col-md-9 .text p { padding: 5px 0; } .recent-posts .col-md-9 .text p.small-paragraph { margin-bottom: 30px; background: url('../images/lines_small.png') repeat-x left bottom; padding-bottom: 35px; } .recent-posts .col-md-9 img { width: 43%; } .recent-posts .col-md-9 article { margin-bottom: 50px; } .recent-posts .col-md-3 .icon-item h4 { padding: 10px 0 20px; background: url('../images/lines_small.png') repeat-x left bottom; margin-bottom: 25px; } .recent-posts .col-md-3 img { width: 100%; } .recent-posts .col-md-3 .btn { width: 100%; margin-top: 20px; } /*Social Icons*/ .socialicon { position: relative; display: inline-block; width: 32px; margin-right: 5px; height: 32px; } .socialicon-twitter { background: url('../images/social/twitter.png') no-repeat; } .socialicon-facebook { background: url('../images/social/facebook.png') no-repeat; } .socialicon-google { background: url('../images/social/google.png') no-repeat; } .socialicon-mail { background: url('../images/social/mail.png') no-repeat; } .socialicon-twitter:hover { background: url('../images/social/twitter_a.png') no-repeat; } .socialicon-facebook:hover { background: url('../images/social/facebook_a.png') no-repeat; } .socialicon-google:hover { background: url('../images/social/google_a.png') no-repeat; } .socialicon-mail:hover { background: url('../images/social/mail_a.png') no-repeat; } /* Contact Form */ .contact-form { } .contact-form .col-md-6 { padding: 0 20px 0 0; } .contact-form .col-md-6:nth-child(2) { padding: 0 0px 0 0; } /* Aside */ aside h3 { line-height: 11px; margin-bottom: 40px; } aside img { width: 100%; margin-bottom: 10px; } aside ul li { border-bottom: 1px solid #e5e5e5; padding: 10px 0; } aside ul li:last-child { border-bottom: none; } aside a.btn { margin: 20px 0 40px; } /* Main Content*/ .main-content h2 { line-height: 11px; margin-bottom: 40px; } /* Footer */ footer { background: #e83d46; color: #f5f7f8; color: #f5f7f8; background-color: #e83d46; ; } footer h3 { padding-bottom: 20px; color: #fff; } footer hr { border-top: 1px solid #4e4e4e; margin: 70px 0 0 0; } footer p { color: #f5f7f8; background-color: #e83d46; font-family: Calibri, sans-serif; ; } footer p span { color: #fff; } footer>.container>.row:first-child { padding: 45px 0; } footer .text-center { padding: 40px 0; margin: 0; } footer .form-group { width: 90%; } footer button.btn-primary { position: relative; top: 10px; } footer button.btn-primary:focus { outline: none; } /*Responsive - debugging default problems*/ .img-responsive { margin: 0 auto; } .no-margin { position: relative; margin: 0; } .no_padding { padding: 0px 0 80px 0; } .row.nothing { padding-left: 0px !important; padding-right: 0px !important; } @media(max-width:1600px) { .carousel-caption h1 { font-size: 1.7vw; line-height: 30px; margin-top: 60px; } } @media(max-width:1310px) { .carousel-caption { font-size: 14px; top: 55%; } .carousel-caption h1 { font-size: 2.2vw; line-height: 30px; margin-top: 60px; } .slider .btn { margin: 0 10px; } .carousel-caption p { margin: 30px 0; } } @media(max-width:990px) { .main__middle__container h3.heading.white { background: none; } .carousel-caption { font-size: 13px; top: 50%; margin-top: -110px; left: 15%; right: 15%; } .carousel-caption h1 { font-size: 2.5vw; line-height: 30px; margin-top: 50px; padding-bottom: 5px; } .carousel-caption p { margin: 10px 0; } .boxess .carousel-caption h1 { font-size: 20px; line-height: 20px; } .carousel-control .carousel-control-left { left: 5px; } .carousel-control .carousel-control-right { right: 5px; } .carousel-control { width: auto; } .boxess .carousel-control { width: auto; top: 50%; margin-top: -27px; } .boxess .carousel-caption { top: 50%; margin-top: -80px; } .navbar-default .navbar-nav>li { margin-left: 10px; } .navbar-default .navbar-nav>li>a { font-size: 10px; } } @media(max-width:768px) { h1.page_title { padding: 20px 30px; } .recent-posts .col-md-9 .text { margin-left: 0px; } .navbar-toggle { top: 25px; } .recent-posts .col-md-9 .text h3 { margin-top: 15px; margin-bottom: 5px; } .three-blocks p { padding: 20px 0 10px 0; margin-bottom: 0px; } .recent-posts .col-md-9 .text, .recent-posts .col-md-9 img { float: left; width: 99%; } header.with-boxed { height: auto; } } @media(max-width:767px) { .navbar-collapse { height: 0px; overflow: hidden; border-top: none; } .navbar-collapse.navbar-left { margin-top: 110px; margin-bottom: -20px; } .navbar-collapse.in { display: block !important; } .navbar-default .navbar-nav { padding: 0; } .navbar-default .navbar-nav .open .dropdown-menu>li { display: block; width: 100%; } .navbar-default .navbar-nav .open .dropdown-menu>li>a { color: #222; display: block; width: 100%; } .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover { color: #fff; background-color: #222; } .navbar-default .navbar-nav .open .kkdropdown-menu>li { display: block; width: 100%; } .navbar-default .navbar-nav .open .kkdropdown-menu>li>a { color: #222; display: block; width: 100%; } .navbar-default .navbar-nav .open .kkdropdown-menu>li>a:hover { color: #fff; background-color: #222; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { color: #222; background-color: transparent; } .navbar-nav .open .dropdown-menu>li>a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 15px; } .navbar-default .navbar-nav>li { display: block; padding: 10px 0; text-align: center; margin-left: 0px; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:active { background-color: #222; } .navbar-default .navbar-toggle { border-color: #222; top: -20px; right: 55px; } .navbar-default .navbar-toggle .icon-bar { background-color: #222; } .navbar-default .navbar-toggle:hover .icon-bar { background-color: #fff; } .navbar-default .navbar-nav>li a { padding: 5px 0; } .three-blocks { background-size: 100% 100%; } } @media(max-width:600px) { .slider .btn { display: none; } } @media(max-width:640px) { .carousel-caption { /*display: none;*/ } .carousel-caption h1 { font-size: 3.5vw; line-height: 25px; margin-top: 50px; padding-bottom: 5px; padding-left:10%; width:90%; } } @media(max-width:440px) { .carousel-caption { /*display: none;*/ } .carousel-caption h1 { font-size: 4.1vw; line-height: 25px; margin-top: 50px; padding-bottom: 5px; padding-left:10%; width:90%; } } .carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; } .active { opacity: 1; } .active.left, .active.right { left: 0; opacity: 0; z-index: 1; } .next.left, .prev.right { opacity: 1; } .carousel-control { z-index: 2; } /*}*/ .carousel-fade .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } /* Portfolio */ #portfolio { padding: 30px 0px 40px 0px; overflow: hidden; } #portfolio controls { padding: 0px 0 20px 2px; overflow: hidden; margin: 20px 0; border-bottom: var(--main-color) solid 2px; } #portfolio controls{ float: left; color: #000; font-weight: 400; font-size: 15px; padding: 5px 15px; cursor: pointer; color: black; font-size: 15px; font-weight: 400; ; } #portfolio controls:hover, #portfolio controls active { padding: 4px 15px; color: var(--main-color); margin: 0 -1px; border: var(--main-border); } #test{ color: grey; ; } #test1{ color: grey; ; } #portfolio ul { margin: 0 0 0 0; padding: 0; position: relative; } #portfolio ul li { padding: 5px; margin: 5px; display: none; position: relative; width: 20%; min-width: 9vw; min-height: 12vw; color: white; border-radius: 8px; background-color: black; ; } .nowbutton { font-size: 24px; display: block; margin-left:auto; margin-right:auto; color: black; font-size: 3vw; border-color: black; border-width: 1px; border-style: solid; border-radius: 5px; background-color: #e0e2e2; ; } .nowbutton:hover { font-size: 24px; color: white; font-size: 3vw; border-color: white; border-width: 1px; border-style: solid; border-radius: 5px; background-color: black; ; } @media(max-width:1310px) { #portfolio ul li { padding: 5px; margin: 5px; display: none; position: relative; width: 42%; min-width: 9vw; min-height: 12vw; color: white; border-radius: 8px; background-color: black; ; } } #Col5{ column-count: 5; column-gap: 10px; display: inline-block; display: -moz-inline-box; } #portfolio ul li a { display: block; position: relative; color: white; ; } #portfolio ul li span.overlay { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); visibility: hidden; text-indent: -9999px; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; color: white; font-size: 22px; font-weight: 400; line-height: 30px; background-color: black; ; } #portfolio ul li:hover span.overlay { visibility: visible; opacity: 0.2; filter: alpha(opacity=20); } #portfolio ul a.link { padding: 0px 10px; height: 0; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: 10; overflow: hidden; width: 100%; position: absolute; left: 0; bottom: 0; background: var(--main-color); color: white; font-size: 22px; font-weight: 400; line-height: 30px; ; } #portfolio ul li:hover a.link { background: var(--main-color); opacity: 0.9; } #portfolio ul a.link span { display: block; text-transform: none; color: #f9f9f9; font-size: 14px; font-weight: 400; line-height: 22px; ; } #portfolio ul a.link:after { border-bottom-color: var(--main-color); margin-left: -10px; color: #8f8f8f; font-size: 11px; font-weight: bold; border-color: #ebebeb; border-width: 1px; border-style: solid; background-color: #f7f7f7; font-size: 11px; line-height: 15px; font-size: 18px; font-size: 12px; font-size: 24px; font-size: 1.5vw; line-height: 30px; border-color: rgba(63, 141, 191, 0); border-width: 16px; border-color: rgba(63, 141, 191, 0); border-width: 10px; ; } #portfolio ul a.link:before { border-bottom-color: var(--main-color); margin-left: -16px; color: #8f8f8f; font-size: 11px; font-weight: bold; border-color: #ebebeb; border-width: 1px; border-style: solid; background-color: #f7f7f7; font-size: 11px; line-height: 15px; font-size: 18px; font-size: 12px; font-size: 24px; font-size: 1.5vw; line-height: 30px; border-color: rgba(63, 141, 191, 0); border-width: 16px; ; } #portfolio ul li:hover a.link { padding: 10px 10px; height: auto; overflow: visible; text-decoration: none; } /* ## REST CSS */ ul.dropdown-menu { display: block; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; top: 85% !important; opacity: 0; visibility: hidden; } .dropdown:hover .dropdown-menu { top: 100% !important; opacity: 1; visibility: visible; } ul.kkdropdown-menu { display: block; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; top: 85% !important; opacity: 0; visibility: hidden; } .kkdropdown:hover .kkdropdown-menu { top: 100% !important; opacity: 1; visibility: visible; } .grey-info-block img { max-width: 100%; } @media(max-width:767px) { .navbar-default .navbar-nav > li > a { padding: 10px 10px; } .dropdown:hover .dropdown-menu { display: none; } .kkdropdown:hover .kkdropdown-menu { display: block; } ul.dropdown-menu { visibility: visible; opacity: 1; display: none; position: relative; left: 0px; top: 0px !important; } .dropdown:hover .dropdown-menu { top: 0 !important; } ul.kkdropdown-menu { visibility: visible; opacity: 1; display: none; position: relative; left: 0px; top: 0px !important; } .kkdropdown:hover .kkdropdown-menu { top: 0 !important; } .open .dropdown-menu, .open:hover .dropdown-menu { display: block; visibility: visible; opacity: 1; } .open .kkdropdown-menu, .open:hover .kkdropdown-menu { display: block; visibility: visible; opacity: 1; } .menumob { max-height: 365px; overflow: auto; } .navbar-collapse { max-height: none; } .navbar-default ul.navbar-collapse { display: block !important; height: 0px; } .navbar-default .navbar-nav > li { padding: 0px; } .dropdown-menu li { border: 0px !important; } .kkdropdown-menu li { border: 0px !important; } .navbar-default .navbar-nav > li.open { border-bottom: 1px solid #999; } .nowbutton { font-size: 24px; display: block; margin-left:auto; margin-right:auto; color: black; font-size: 3vw; border-color: black; border-width: 1px; border-style: solid; border-radius: 5px; background-color: #e0e2e2; ; } .nowbutton:hover { font-size: 24px; color: white; font-size: 3vw; border-color: white; border-width: 1px; border-style: solid; border-radius: 5px; background-color: black; ; } h1 { font-size: 24px; color: black; font-size: 36px; ; } h2 { color: black; border-radius: 8px; font-size: 22px; ; } h3 { font-size: 20px; color: black; font-size: 27px; ; } .pull-left { float: none !important; } .pull-right { float: none !important; } .recent-posts .col-md-9 article img.pull-left { max-width: 100%; } .recent-posts .col-md-9 .text { text-align: center; width: auto; padding-top: 10px; } .slider { overflow: hidden; max-width: 100%; } .main__middle__container { overflow: hidden; max-width: 100%; } footer { overflow: hidden; max-width: 100%; } footer { padding-top: 0px; } .carousel-control .carousel-control-right, .carousel-control .carousel-control-left { margin-top: 0px; } .navbar-default .nav-justified>li.dropdown:hover, .navbar-default .nav-justified>li.dropdown.active { border-top: 0px solid #adc648; } .row { padding: 15px 0; } .navbar { min-height: 85px; } h1.navbar-brand { margin-top: 25px; } .navbar-header { z-index: 10; } .recent-posts p.small-paragraph { margin-bottom: 0px; } p.big-paragraph { padding-bottom: 10px; } .recent-posts .col-md-9, .recent-posts .col-md-3 { margin-top: 10px; } #portfolio ul#Grid a.link span { font-size: 11px; line-height: 15px; } #portfolio ul.controls li { padding: 5px 10px; } } @media(min-width:768px) and (max-width: 991px) { h1 { margin-top: 50px; color: #8f8f8f; font-size: 11px; font-weight: bold; border-color: #ebebeb; border-width: 1px; border-style: solid; background-color: #f7f7f7; font-size: 11px; line-height: 15px; font-size: 18px; font-size: 12px; font-size: 24px; font-size: 1.5vw; line-height: 30px; ; } .nowbutton { font-size: 24px; display: block; margin-left:auto; margin-right:auto; color: black; font-size: 3vw; border-color: black; border-width: 1px; border-style: solid; border-radius: 5px; background-color: #e0e2e2; ; } .nowbutton:hover { font-size: 24px; color: white; font-size: 3vw; border-color: white; border-width: 1px; border-style: solid; border-radius: 5px; background-color: black; ; } h2 { color: #8f8f8f; font-size: 11px; font-weight: bold; border-color: #ebebeb; border-width: 1px; border-style: solid; background-color: #f7f7f7; font-size: 11px; line-height: 15px; font-size: 18px; font-size: 12px; font-size: 24px; ; } h4 { color: #8f8f8f; font-size: 11px; font-weight: bold; border-color: #ebebeb; border-width: 1px; border-style: solid; background-color: #f7f7f7; font-size: 11px; line-height: 15px; font-size: 18px; font-size: 12px; ; } .recent-posts .col-md-9 .text h3 { margin-top: 0px; } .recent-posts .col-md-3 .icon-item img { max-width: 100%; } .nav-justified > li { padding: 0 12px; display: block; float: left; width: auto; } .main__middle__container { overflow: hidden; max-width: 100%; } .recent-posts .col-md-9 .text p.small-paragraph { padding-bottom: 20px; margin-bottom: 5px; } .recent-posts .col-md-9 article { margin-bottom: 20px; } .recent-posts p.small-paragraph { padding-bottom: 20px; } .no_padding { padding: 0 0 20px; } .row { padding: 15px 0; } #portfolio ul#Grid a.link { color: #8f8f8f; font-size: 11px; font-weight: bold; border-color: #ebebeb; border-width: 1px; border-style: solid; background-color: #f7f7f7; font-size: 11px; line-height: 15px; font-size: 18px; ; } #portfolio ul#Grid a.link span { color: #8f8f8f; font-size: 11px; font-weight: bold; border-color: #ebebeb; border-width: 1px; border-style: solid; background-color: #f7f7f7; font-size: 11px; line-height: 15px; ; } } .carousel-inner > .item > img, .carousel-inner > .item > a > img { min-width: 100%; height: auto; } /* Columns */ .one_half_pad { width: 44% } .one_third_pad { width: 27% } .one_fourth_pad { width: 19% } .one_fifth_pad { width: 14% } .one_sixth_pad { width: 10.5% } .two_fifth_pad { width: 37% } .two_third_pad { width: 60% } .two_fourth_pad { width: 43% } .two_fifth_pad { width: 33% } .three_fifth_pad { width: 58.4% } .three_fourth_pad { width: 74% } .four_fifth_pad { width: 67.2% } .five_sixth_pad { width: 82.67% } .one_half_pad, .one_third_pad, .two_third_pad, .three_fourth_pad, .one_fourth_pad, .one_fifth_pad, .two_fifth_pad, .two_fourth_pad, .two_fifth_pad, .three_fifth_pad, .four_fifth_pad, .one_sixth_pad, .five_sixth_pad { float: left; margin-bottom: 20px; margin-left: 3%; margin-right: 3%; position: relative } .one_half { width: 48% } .one_third { width: 30.5% } .one_fourth { width: 22% } .one_fifth { width: 16.8% } .one_sixth { width: 13.33% } .two_fifth { width: 37.6% } .two_third { width: 65.33% } .two_fourth { width: 48% } .three_fifth { width: 58.4% } .three_fourth { width: 74% } .four_fifth { width: 67.2% } .five_sixth { width: 82.67% } .one_half, .one_third, .two_third, .two_fourth, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { float: left; margin-bottom: 10px; margin-right: 4%; position: relative } .column-last { clear: right; margin-right: 0!important } .kk_tabs_type_2 .one_third { width: 29% } .clr { clear: both; margin: 0; padding: 0; width: 100% } .kk_clear { clear: both; font-size: 0px; line-height: 0px; margin: 0; padding: 0; width: 100% } /*btn*/ .btn { margin:12px 0 0; padding:0px 0px 0; text-align:center; } .btn a { color: #8f8f8f; font-size: 11px; font-weight: bold; border-color: #ebebeb; border-width: 1px; border-style: solid; background-color: #f7f7f7; ; text-transform:uppercase; height:33px; padding:8px 12px; } .btn a:hover { color: white; border-color: #9cac50; background-color: #ebad00; ; } .btn a span { color: #ebad00; font-size: 12px/1em; font-style: normal; ; } /* Gradient Buttons */ .kk_gradient_button{ margin:3px; background:-moz-linear-gradient(top,#f9f9f9,#f0f0f0); background:-webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#f0f0f0)); box-shadow:0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; cursor:pointer; display:inline-block; moz-border-radius:4px; moz-box-shadow:0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; outline:none; padding:8px 11px; text-decoration:none; text-shadow:0 1px 0 #fff; webkit-border-radius:4px; webkit-box-shadow:0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; color: #555; font-size: 12px/1em; font-family: HelveticaNeue,Arial,sans-serif; font-weight: bold; border-color: #dfdede #d7d7d7 #d3d3d3; border-width: 1px; border-style: solid; border-radius: 4px; background-color: #f5f5f5; ; } .kk_gradient_button:hover,.kk_gradient_button:focus{ text-decoration:none; background:-moz-linear-gradient(top,#f9f9f9,#e9e9e9); background:-webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#e9e9e9)); box-shadow:0 1px 2px #e0e0e0,inset 0 1px 0 #fbfbfb; moz-box-shadow:0 2px 1px #e0e0e0,inset 0 1px 0 #fbfbfb; webkit-box-shadow:0 2px 1px #e0e0e0,inset 0 1px 0 #fbfbfb; color: #555; border-color: #ccc; background-color: #efefef; ; } .kk_gradient_button.large{border-radius:5px;font-size:20px;font-weight:normal;moz-border-radius:5px;padding:12px 15px;webkit-border-radius:5px} .kk_gradient_button.large.rounded{border-radius:23px;moz-border-radius:23px;padding:12px 22px;webkit-border-radius:23px} .kk_gradient_button.blue{ color: white; font-size: 22px; font-weight: 400; line-height: 30px; border-color: #F8674B; background-color: #EA3736; border-color: #EA3736; background-color: #F8674B; border-color: #EA3736; background-color: #EA3736; border-color: #154c8c #154c8c #0e408e; background-color: #3282d3; border-color: #2a73a6 #165899 #07428f; background-color: #206bcb; border-color: #4081af #2e69a3 #20559a; background-color: #377ad0; ; background:-moz-linear-gradient(top,#52a8e8,#377ad0);background:-webkit-gradient(linear,left top,left bottom,from(#52a8e8),to(#377ad0));box-shadow:0 1px 2px #d6d6d6,inset 0 1px 1px #72b9eb;color:#fff !important;moz-box-shadow:0 1px 2px #d6d6d6,inset 0 1px 1px #72b9eb;text-shadow:0 1px 1px #4081af;webkit-box-shadow:0 1px 2px #d6d6d6,inset 0 1px 1px #72b9eb} .kk_gradient_button.blue:hover,.kk_gradient_button.blue:focus{ color: white; font-size: 22px; font-weight: 400; line-height: 30px; border-color: #F8674B; background-color: #EA3736; border-color: #EA3736; background-color: #F8674B; border-color: #EA3736; background-color: #EA3736; border-color: #154c8c #154c8c #0e408e; background-color: #3282d3; border-color: #2a73a6 #165899 #07428f; background-color: #206bcb; ; background:-moz-linear-gradient(top,#3e9ee5,#206bcb);background:-webkit-gradient(linear,left top,left bottom,from(#3e9ee5),to(#206bcb));box-shadow:0 1px 0 0 #fff,inset 0 1px 0 0 #62b1e9;moz-box-shadow:0 1px 0 0 #fff,inset 0 1px 0 0 #62b1e9;webkit-box-shadow:0 1px 0 0 #fff,inset 0 1px 0 0 #62b1e9} .kk_gradient_button.blue:active{ color: white; font-size: 22px; font-weight: 400; line-height: 30px; border-color: #F8674B; background-color: #EA3736; border-color: #EA3736; background-color: #F8674B; border-color: #EA3736; background-color: #EA3736; border-color: #154c8c #154c8c #0e408e; background-color: #3282d3; ; box-shadow:0 1px 0 0 #fff,inset 0 0 6px 3px #1657b5;moz-box-shadow:0 1px 0 0 #fff,inset 0 0 6px 3px #1657b5;text-shadow:0 -1px 1px #1d62ab;webkit-box-shadow:0 1px 0 0 #fff,inset 0 0 6px 3px #1657b5} .kk_gradient_button.red{ color: white; font-size: 22px; font-weight: 400; line-height: 30px; border-color: #F8674B; background-color: #EA3736; border-color: #EA3736; background-color: #F8674B; border-color: #EA3736; background-color: #EA3736; ; background:-moz-linear-gradient(top,#F8674B,#EA3736);background:-webkit-gradient(linear,left top,left bottom,from(#F8674B),to(#EA3736)); box-shadow:0 1px 2px #d6d6d6,inset 0 1px 1px #EA3736;color:#fff !important;moz-box-shadow:0 1px 2px #EA3736,inset 0 1px 1px #EA3736;text-shadow:0 1px 1px #EA3736;webkit-box-shadow:0 1px 2px #EA3736,inset 0 1px 1px #EA3736} .kk_gradient_button.red:hover,.kk_gradient_button.red:focus{ color: white; font-size: 22px; font-weight: 400; line-height: 30px; border-color: #F8674B; background-color: #EA3736; border-color: #EA3736; background-color: #F8674B; ; background:-moz-linear-gradient(top,#EA3736, #F8674B);background:-webkit-gradient(linear,left top,left bottom,from(#EA3736),to(#F8674B));box-shadow:0 1px 0 0 #fff,inset 0 1px 0 0 #EA3736;moz-box-shadow:0 1px 0 0 #fff,inset 0 1px 0 0 #EA3736;webkit-box-shadow:0 1px 0 0 #fff,inset 0 1px 0 0 #EA3736} .kk_gradient_button.red:active{ color: white; font-size: 22px; font-weight: 400; line-height: 30px; border-color: #F8674B; background-color: #EA3736; ; box-shadow:0 1px 0 0 #fff,inset 0 0 6px 3px #EA3736;moz-box-shadow:0 1px 0 0 #fff,inset 0 0 6px 3px #EA3736;text-shadow:0 -1px 1px #253F8C;webkit-box-shadow:0 1px 0 0 #fff,inset 0 0 6px 3px #EA3736} .filterChoices[data-filter='19']{ display: block; position: relative; color: #fff; width: 140px; } .filterChoices[data-filter='20']{ display: block; position: relative; color: #fff; width: 140px; } .filterChoices[data-filter='22']{ display: block; position: relative; color: #fff; width: 140px; } .filterChoices[data-filter='23']{ display: block; position: relative; color: #fff; width: 140px; } .filterChoices[data-filter='24']{ display: block; position: relative; color: #fff; width: 140px; } .filterChoices[data-filter='25']{ display: block; position: relative; color: #fff; width: 140px; } .filterChoices[data-filter='26']{ display: block; position: relative; color: #fff; width: 140px; } li:focus[data-filter]{ opacity:.8; outline:none; } li[data-filter='19']:focus ~ li.a.filterChoices:not([data-filter='19']){ height:0px; width:0px; border:none; margin:0; } li[data-filter='20']:focus ~ li.a.filterChoices:not([data-filter='20']){ height:0px; width:0px; border:none; margin:0; } li[data-filter='22']:focus ~ li.a.filterChoices:not([data-filter='22']){ height:0px; width:0px; border:none; margin:0; } li[data-filter='23']:focus ~ li.a.filterChoices:not([data-filter='23']){ height:0px; width:0px; border:none; margin:0; } li[data-filter='24']:focus ~ li.a.filterChoices:not([data-filter='24']){ height:0px; width:0px; border:none; margin:0; } li[data-filter='25']:focus ~ li.a.filterChoices:not([data-filter='25']){ height:0px; width:0px; border:none; margin:0; } li[data-filter='26']:focus ~ li.a.filterChoices:not([data-filter='26']){ height:0px; width:0px; border:none; margin:0; } li:focus[data-filter]{ opacity:.8; outline:none; } a[data-filter='19']:focus ~ .filterChoices:not([data-filter='19']){ height:0px; width:0px; border:none; margin:0; display:none ; } a[data-filter='20']:focus ~ .filterChoices:not([data-filter='20']){ height:0px; width:0px; border:none; margin:0; display:none ; } a[data-filter='22']:focus ~ .filterChoices:not([data-filter='22']){ height:0px; width:0px; border:none; margin:0; display:none ; } a[data-filter='23']:focus ~ .filterChoices:not([data-filter='23']){ height:0px; width:0px; border:none; margin:0; display:none ; } a[data-filter='24']:focus ~ .filterChoices:not([data-filter='24']){ height:0px; width:0px; border:none; margin:0; display:none ; } a[data-filter='25']:focus ~ .filterChoices:not([data-filter='25']){ height:0px; width:0px; border:none; margin:0; display:none ; } a[data-filter='26']:focus ~ .filterChoices:not([data-filter='26']){ height:0px; width:0px; border:none; margin:0; display:none ; } #portfolio ul#Grid { margin: 0 0 30px 0; padding: 0; position: relative; } #portfolio ul#Grid li { padding: 5px; margin: 5px; display: none; position: relative; width: 20%; color: black; border-radius: 8px; ; } #portfolio ul#Grid li a { display: block; position: relative; color: white; ; } #portfolio ul#Grid li span.overlay { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); visibility: hidden; text-indent: -9999px; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; background: #000; } #portfolio ul#Grid li:hover span.overlay { visibility: visible; opacity: 0.2; filter: alpha(opacity=20); } #portfolio ul#Grid a.link { padding: 0px 10px; height: 0; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: 10; overflow: hidden; width: 100%; position: absolute; left: 0; bottom: 0; background: var(--main-color); color: white; font-size: 22px; font-weight: 400; line-height: 30px; ; } #portfolio ul#Grid li:hover a.link { background: var(--main-color); opacity: 0.9; } #portfolio ul#Grid a.link span { display: block; text-transform: none; color: #f9f9f9; font-size: 14px; font-weight: 400; line-height: 22px; ; } #portfolio ul#Grid a.link:after { border-bottom-color: var(--main-color); margin-left: -10px; color: red; font-size: 25px; border-color: red; border-color: rgba(63, 141, 191, 0); border-width: 16px; border-color: rgba(63, 141, 191, 0); border-width: 10px; ; } #portfolio ul#Grid a.link:before { border-bottom-color: var(--main-color); margin-left: -16px; color: red; font-size: 25px; border-color: red; border-color: rgba(63, 141, 191, 0); border-width: 16px; ; } #portfolio ul#Grid li:hover a.link { padding: 10px 10px; height: auto; overflow: visible; text-decoration: none; } .navbar-nav li a { float:right; } #chooseBranch{ text-align: center; font-size:20px; display: inline; } #pickup_branch{ font-size:20px; width: auto; display: inline; } .disabled{ pointer-events: none; cursor: default; opacity: 0.2; } .disabledsub{ pointer-events: none; cursor: default; opacity: 0.2; } .disabled::after{ content: ' OUT OF STOCK'; } .unsubscribeform { margin: 20vw; width: 60vw; } .unsubscribeform .email p input{ width: 60vw; } .unsubscribeform .btn { margin:0vw 20vw; color: red; font-size: 25px; border-color: red; ; } .toggleFAQ { text-align: left; padding: 0; border: none; background: none; color: red; font-size: 11px; background-color: white; ; } .toggleFAQ:before{ content: '+ '; color: red; font-size: 11px; font-style: normal; ; } .toggleBlog { text-align: left; padding: 0; border: none; background: none; } .toggleBlog:before{ } .opened:before{ content: '- '; color: red; font-size: 11px; font-weight: normal; ; } .readtext:before{ content: '\2796 '; } .openedblog:before{ } .readtextblog:before{ } .expand_button { cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; color: white; font-size: 20px; background-color: black; ; } .style1 button{ background-position: left center; background-repeat: no-repeat; display: block; padding: 8px 3vw 8px 6vw;/*16px 8px 32px;*/ text-decoration: none; color: black; font-size: 1.3em; ; } .big-paragraph{ color: #EA3736; ; } .faq_box { padding: 0 18px; max-height: 0; overflow: hidden; display: none; transition: max-height 0.2s ease-out; color: white; font-size: 3vw; background-color: black; ; } @media screen and (min-width: 600px) { .faq_box_open { color: white; font-size: 20px; background-color: black; ; } } .faq_box_open { padding: 0vw 8vw; overflow: hidden; display: block; color: white; font-size: 0.4em; background-color: black; ; } .expand_button:before{ content: '\02795'; color: red; font-size: 1.5vw; font-weight: normal; background-color: black; ; } .expand_buttonBlog:before{ }