@media only screen and (min-width: 1600px) { #innerBanner { min-height: 700px; background-position: center 70%; } #innerBanner.make-higher{ background-position: center 140%; } #innerBanner.make-lower{ background-position: center -10%; } #innerBanner::after{ background:none; } #innerBanner.large-banner { background-position: center 200%; background-size: cover; } } @media only screen and (max-width: 1400px) { #innerBanner { background-size: cover; } .infoBar h2 { padding: 40px 20px; } .infoBar aside.two * { padding-top: 137px; } .infoBar aside.three h2 { padding-top: 132px; } .textBar h1 { font-size: 50px; line-height: 45px; } } @media only screen and (max-width: 1300px) { .wrapper { max-width: 1150px; } .portfolioBar .element-item { width: 25%; } #header .logo { margin-left: 0px; } #header .social { margin-right: 0px; } #header { padding: 13px 20px; } #innerBanner span.notes { padding-right: 20px; } } @media only screen and (max-width: 1200px) { .wrapper, #content .wrapper, #innerBanner .title .wrapper { max-width: 970px; } #innerBanner h1 { font-size: 38px; line-height: 35px; padding-bottom: 8px; } #innerBanner.interior { min-height: 360px; } .reviewBar { padding: 20px 0 0; } .reviewBar h2 { font-size: 30px; line-height: 27px; } .reviewBar h2 img { max-width: 160px; } .npBar { margin-bottom: 70px; } #leftPart { width: 73%; padding-right: 25px; } #rightPart { width: 27%; } .addBar { padding: 0 0 25px 25px; } .twitterBar { padding: 25px 0 25px 25px; } .addBar.bordernone { padding-top: 25px; } #content { padding-bottom: 80px; } .detailBar h4 { font-size: 17px; line-height: 24px; } .detailBar { padding: 0 0 20px; } .detailBar figure { margin: 0px 10px 0 0px; } .detailBar aside { width: 77%; } .resultBar { padding: 50px 0 0px; } .resultBar .repeat { padding-bottom: 50px; } .resultBar h2 { font-size: 30px; line-height: 28px; } .resultBar li strong { font-size: 28px; line-height: 25px; } .portfolioBar .element-item .title span.number { font-size: 32px; line-height: 40px; } .portfolioBar .element-item h2 { font-size: 16px; line-height: 22px; } .portfolioBar .element-item .title { padding: 10px 20px 15px; } .portfolioBar { padding: 10px 0 0; } .portfolioBar .button-group { padding-bottom: 30px; } .menuBar li a { padding: 20px 15px 22px; } #innerBanner .add img { max-width: 650px; } .calenderBar .one { width: 17%; } .calenderBar .two { width: 25%; } .calenderBar .three { width: 20%; padding: 30px 40px 20px 20px; } .calenderBar .four { width: 25%; padding: 20px 0 0 20px; } .calenderBar .two h3 { padding: 0 27px 20px; } .calenderBar .one h3, .calenderBar .two h3, .calenderBar .four a { font-size: 17px; line-height: 20px; } .calenderBar .five { width: 12%; } .calenderBar h2 { font-size: 30px; line-height: 28px; padding: 0 0 22px 40px; background-size: 24px auto; } .calenderBar .one h3 { padding-left: 40px; } .calenderBar { padding: 40px 0 0; } .calenderBar .repeat { padding-bottom: 70px; } .reviewBar .repeat { padding-bottom: 45px; } .textBar .text { max-width: 970px; } .textBar h1 { font-size: 45px; line-height: 40px; } .textBar h1 small { font-size: 20px; } .textBar h1 small::after { font-size: 40px; margin-left: 10px; } .textBar p { font-size: 15px; line-height: 25px; } .infoBar aside.four h2 { width: 64%; } .infoBar aside.two { margin-left: -10%; width: 32%; } .infoBar aside.two:before { top: 91px; } .infoBar aside.three::before { top: 91px; } } @media only screen and (max-width: 1000px) { .wrapper, #content .wrapper, #innerBanner .title .wrapper { max-width: 728px; } .portfolioBar .element-item { width: 33.33333%; } .menuBar li { font-family: 'rubikbold'; font-size: 13px; } .menuBar li a { padding: 18px 10px 18px; } .menuBar li a:hover::before, .menuBar li.active a::before { height: 3px; } #innerBanner .add img { max-width: 500px; } #innerBanner h1 { padding-left: 55px; font-size: 35px; line-height: 32px; } #innerBanner a.link { margin-left: 66px; } #innerBanner { min-height: 320px; } .npBar { padding: 0px 0 23px; margin-bottom: 45px; } .detailBar aside { width: 75%; } .detailBar figure { margin: 0 0 0 15px; } .detailBar { border-bottom: 2px solid #00d2ff; padding-bottom: 0px; } .resultBar { padding: 40px 0 0; } .resultBar h2 { font-size: 23px; line-height: 23px; } .resultBar h5 { font-size: 17px; padding: 12px 0px 12px 0; line-height: 18px; } .resultBar h5::before { margin: 0 8px; } .resultBar .repeat { padding-bottom: 40px; } .addBar { padding: 0 0 15px 15px; } .twitterBar { padding: 25px 0 15px 15px; } .addBar.bordernone { padding-top: 15px; } .twitterBar h2 { font-size: 17px; line-height: 20px; } #innerBanner.interior { min-height: 320px; } #innerBanner.interior h1, #innerBanner .title p { padding-left: 0px; } .calenderBar .one h3, .calenderBar .two h3, .calenderBar .four a { font-size: 14px; line-height: 16px; } .calenderBar .three { padding: 25px 10px 8px 15px; width: 24%; } .calenderBar .five h3 { font-size: 14px; line-height: 16px; padding: 0 0 25px 15px; } .calenderBar .five h3 span { padding-bottom: 5px; } .calenderBar .two h3 span { padding-bottom: 5px; } .calenderBar .two h3 { padding: 0 15px 20px; } .calenderBar .four a { padding-right: 22px; background-size: 15px auto; } .calenderBar h2 { font-size: 25px; line-height: 23px; background-size: 22px auto; } .calenderBar .two { width: 22%; } .calenderBar .four { width: 25%; padding-right: 20px; } .calenderBar .repeat { padding-bottom: 60px; } .reviewBar h2 img { max-width: 130px; } .reviewBar h2 { font-size: 26px; line-height: 25px; padding-left: 40px; } .reviewBar h2 span { left: 10px; } .resultBar li strong { font-size: 23px; line-height: 22px; } .reviewBar li strong { font-size: 17px; line-height: 17px; padding-top: 10px; } body { font-size: 15px; } .galleryBar h2 { padding: 0 0 12px 20px; } .galleryBar .flex-control-nav { padding-right: 0px; bottom: -30px; } .resultBar li { padding-left: 10px; width: 26.7%; } .resultBar li:last-child { width: 19.5%; } .textBar .text { max-width: 728px; } .infoBar h2 { padding: 30px 20px; font-size: 18px; line-height: 20px; max-width: 81%; } .infoBar aside.two *, .infoBar aside.three * { padding-top: 123px; } .infoBar aside.two { margin-left: -16%; width: 33%; } .infoBar aside.three h2 { padding-top: 119px; } .infoBar aside.three { width: 26%; } .infoBar aside.one { width: 32%; } .infoBar aside.four { width: 34%; } .infoBar aside.four h2 { width: 52.5%; } .resultBar h5 a::after { width: 15px; margin: 2px 0 0 6px; background-size: contain; } .infoBar aside.two:before { top: 88px; } .infoBar aside.three::before { top: 88px; } .infoBar aside.three h2 { max-width: 90%; } .risingBar .repeat img { max-width: 728px; margin: auto auto 25px; } .risingBar .repeat { padding-top: 40px; } .risingBar { padding: 25px 0 0; } } @media only screen and (max-height: 870px) { .infoBar aside.two:before { top: 91px; } .infoBar aside.three::before { top: 92px; } } @media only screen and (max-height: 765px) { .infoBar aside.two:before { top: 92px; } .infoBar aside.three::before { top: 93px; } } @media only screen and (max-width: 767px) { .wrapper, #content .wrapper, #innerBanner .title .wrapper, .textBar .text { max-width: 100%; } #leftPart, #rightPart { float: none; width: 100%; padding-right: 0px; border: 0px; } .resultBar h5 a::after { width: 19px; margin: 4px 0 0 12px; background-size: contain; } #header { padding: 13px 0px 4px; } .resultBar h5::before { display: none; } .portfolioBar { padding-top: 30px; } a.menuToggle { display: block; } .menuBar { padding: 20px 20px 5px; width: 100%; position: absolute; top: 0px; left: 0px; width: 100%; background: #111111; z-index: 9990; display: none; } .menuBar li { border: 0px; border-top: 1px solid #2e2e2e; width: 100%; float: none; text-align: left; font-size: 16px; line-height: 22px; font-family: 'rubikblack'; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transform: translateY(60%); -webkit-transform: translateY(60%); -moz-transform: translateY(60%); -ms-transform: translateY(60%); -o-transform: translateY(60%); opacity: 0; } .menuBar.show li { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transition: all 0.8s ease 0s; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; opacity: 1; } .menuBar.show li:nth-of-type(1) { transition-delay: 0.8s; -webkit-transition-delay: 0.8s; -ms-transition-delay: 0.8s; -o-transition-delay: 0.8s; -moz-transition-delay: 0.8s; } .menuBar.show li:nth-of-type(2) { transition-delay: 1s; -webkit-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; -moz-transition-delay: 1s; } .menuBar.show li:nth-of-type(3) { transition-delay: 1.2s; -webkit-transition-delay: 1.2s; -ms-transition-delay: 1.2s; -o-transition-delay: 1.2s; -moz-transition-delay: 1.2s; } .menuBar.show li:nth-of-type(4) { transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; -o-transition-delay: 1.4s; -moz-transition-delay: 1.4s; } .menuBar.show li:nth-of-type(5) { transition-delay: 1.6s; -webkit-transition-delay: 1.6s; -ms-transition-delay: 1.6s; -o-transition-delay: 1.6s; -moz-transition-delay: 1.6s; } .menuBar li a { padding: 20px 0; } .menuBar li a:before { display: none; } #header .social { display: none; } #header .sl_logo .mobile { display: block; } #header .sl_logo img { display: none; } #header .sl_logo { max-width: 40px; margin-left: -10px; top: 17px; } .menuBar .social { padding-bottom: 10px; } .menuBar .social a { margin-right: 7px; display: inline-block; vertical-align: top; width: 40px; height: 40px; font-size: 0px; line-height: 0px; overflow: hidden; position: relative; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transform: translateY(60%); -webkit-transform: translateY(60%); -moz-transform: translateY(60%); -ms-transform: translateY(60%); -o-transform: translateY(60%); opacity: 0; } .menuBar.show .social a { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; opacity: 1; } .menuBar.show .social a:nth-of-type(1) { transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s; -o-transition-delay: 0.4s; -moz-transition-delay: 0.4s; } .menuBar.show .social a:nth-of-type(2) { transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; -moz-transition-delay: 0.6s; } .menuBar .social a.facebook { background: url(../images/facebook_icon.png) 0px 0px no-repeat; background-size: 40px auto; } .menuBar .social a.facebook:after { content: ""; width: 100%; height: 100%; background: url(../images/facebook_icon.png) bottom left no-repeat; background-size: 40px auto; position: absolute; top: 0px; left: 0px; display: block; opacity: 0; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; } .menuBar .social a.twitter:after { content: ""; opacity: 0; width: 100%; height: 100%; background: url(../images/twitter_icon.png) bottom left no-repeat; background-size: 40px auto; position: absolute; top: 0px; left: 0px; display: block; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; } .menuBar .social a.facebook:hover:after, .menuBar .social a.twitter:hover:after { opacity: 1; } .menuBar .social a.twitter { background: url(../images/twitter_icon.png) 0px 0px no-repeat; background-size: 40px auto; } #innerBanner { overflow: visible; } .detailBar::before { display: none; } .detailBar { margin: 0px; padding: 0px; border: 0px; } .detailBar figure { float: none; margin: 0 40px 15px; float: none; width: 80px; height: 80px; } .detailBar aside { padding: 0 40px; width: 100%; float: none; } .detailBar h4 { font-size: 16px; line-height: 26px; padding-bottom: 15px; } .detailBar p { padding-bottom: 20px; } #content::after { display: none; } .resultBar { margin: 0px; border-bottom: 1px solid #212121; } .resultBar h2::after { display: none; } .resultBar h5 { padding: 20px 0; display: block; font-size: 16px; font-family: 'rubikregular'; border-bottom: 1px solid #212121; overflow: hidden; line-height: 20px; } .resultBar h5 img { display: none; } .resultBar h5 strong { float: right; font-size: 19px; font-family: 'rubikblack'; } .resultBar h5 a { float: right; font-size: 19px; font-family: 'rubikblack'; } .resultBar .repeat { padding: 0 20px 10px; background: #111; display: none; border-top: 1px solid #2b2b2b; } .resultBar .repeat ul { border: 0px; } .resultBar li, .resultBar li:last-child { padding: 20px 0; float: none; border: 0px; font-size: 16px; width: 100%; font-family: 'rubikregular'; overflow: hidden; border-top: 1px solid #212121; line-height: 20px; } .resultBar li strong { padding: 0px; float: right; font-size: 19px; } .resultBar h2 { font-size: 19px; padding: 10px 20px; border-top: 1px solid #2b2b2b; border-bottom: 0px; position: relative; cursor: pointer; height: 83px; line-height: 60px; } .resultBar h2 span { display: inline-block; vertical-align: middle; line-height: 20px; } .resultBar h2:before { width: 88px; height: 100%; content: ""; position: absolute; top: 0px; right: 0px; background: url(../images/down-arrow.png) center center no-repeat; background-size: 20px auto; border-left: 1px solid #2b2b2b; } .resultBar h2.active:before { background: url(../images/up-arrow.png) center center no-repeat; background-size: 20px auto; } .resultBar h2.active { background: #111111; } .galleryBar { padding: 40px 20px 0; } .galleryBar .flex-control-nav { bottom: auto; position: relative; left: auto; padding: 12px 0 0; } #leftPart { border-bottom: 1px solid #616161; padding-bottom: 30px; } .npBar { padding: 25px 20px 30px; border-bottom: 1px solid #313131; margin-bottom: 35px; } #innerBanner .title { padding: 0 20px; } #innerBanner h1 { font-size: 26px; line-height: 24px; padding: 0 0 10px 44px; } #innerBanner span.notes { margin-bottom: -45px; padding: 32px 0 0; font-size: 12px; line-height: 16px; } #innerBanner { min-height: 230px; background-attachment: scroll; } .galleryBar .flex-control-nav li { padding: 0 4px; } .galleryBar .flex-control-nav li a { width: 10px; height: 10px; } #innerBanner::after { left: -120px; } #innerBanner::before { background: rgba(0, 0, 0, 0.65); } #innerBanner a.link { font-size: 15px; margin-left: 45px; } #innerBanner a.link::after { margin: 3px 0 0 3px; } #innerBanner h1 span { font-size: 17px; line-height: 20px; } .npBar li { font-size: 14px; line-height: 22px; } .galleryBar h2 { padding: 0 15px 12px 15px; font-size: 12px; } .galleryBar h2 span { padding-top: 3px; } .galleryBar .flex-direction-nav .flex-next { margin-top: -28px; right: 10px; width: 13px; background-size: contain; } .galleryBar .flex-direction-nav .flex-prev { left: 10px; margin-top: -28px; width: 13px; background-size: contain; } .galleryBar .flex-direction-nav .flex-next:hover, .galleryBar .flex-direction-nav .flex-prev:hover { background-size: contain; } .addBar { display: none; } .addBar.bordernone { display: block; padding: 35px 20px; } .twitterBar h2 { font-size: 19px; line-height: 23px; } .twitterBar { padding: 35px 20px; } .twitterBar a { margin-bottom: 25px; } #content { padding: 42px 0 25px; } .controlBar a.grid { padding: 0 5px; width: 68px; } .controlBar a { padding: 23px 15px; width: 126px; position: relative; } .controlBar a.prev { padding-left: 0px; text-align: right; } .controlBar a.prev::before { display: none; } .controlBar a.next { padding-right: 0px; text-align: left; } .controlBar a.next::after { display: none; } #footer a.sl_logo { max-width: 130px; } #footer { padding: 25px 15px; } .twitterBar img, .addBar img { width: 100%; } #footer p { max-width: 300px; margin: auto; } #innerBanner .add {height: 70px;overflow: hidden;padding: 10px 0;width: 320px;} #innerBanner.interior { min-height: inherit; } #innerBanner.interior .title { padding: 60px 20px 0; position: relative; bottom: auto; left: auto; } #innerBanner.interior h1 { padding-bottom: 10px; } #innerBanner .title p { padding-bottom: 0px; } .portfolioBar .button-group button { font-size: 12px; padding: 3px 15px; margin: 0 4px; } .portfolioBar .element-item::before { background: rgba(0, 0, 0, 0.65); } .calenderBar { padding: 15px 0 0; } .calenderBar h2 { background: none; padding: 30px 90px 30px 20px; border-top: 1px solid #2b2b2b; border-bottom: 0px; position: relative; cursor: pointer; font-size: 18px; line-height: 20px; } .calenderBar h2:after { width: 88px; height: 100%; content: ""; position: absolute; top: 0px; right: 0px; left: auto; background: url(../images/down-arrow.png) center center no-repeat; background-size: 20px auto; border-left: 1px solid #2b2b2b; } .calenderBar h2.active:after { background: url(../images/up-arrow.png) center center no-repeat; background-size: 20px auto; } .calenderBar h2.active { background: #111; } .calenderBar .repeat { padding: 0px 20px; background: #111; display: none; border-top: 1px solid #2b2b2b; } .calenderBar .one, .calenderBar .two, .calenderBar .three, .calenderBar .four, .calenderBar .five { width: 100%; float: none; padding: 0px; border: 0px; min-height: inherit; } .calenderBar .one h3, .calenderBar .two h3, .calenderBar .five h3 { padding: 0px; position: relative; top: auto; left: auto; } .calenderBar .one h3 { font-size: 28px; line-height: 30px; font-family: 'rubikblack_italic'; } .calenderBar .one span { display: inline-block; vertical-align: top; } .calenderBar .one { padding: 45px 0 5px; } .calenderBar .two h3 span { font-size: 16px; line-height: 20px; padding: 3px 0 6px; } .calenderBar .two h3 { color: #fff; font-size: 19px; line-height: 22px; font-family: 'rubikblack_italic'; } .calenderBar .two { border-bottom: 1px solid #343434; padding-bottom: 35px; } .calenderBar .three { padding: 22px 30px; border-bottom: 1px solid #343434; font-size: 16px; line-height: 24px; } .calenderBar .four, .calenderBar .five { padding: 20px 30px; border-bottom: 1px solid #343434; } .calenderBar .four span { font-size: 16px; line-height: 22px; } .calenderBar .four a, .calenderBar .four a:hover { font-size: 19px; line-height: 20px; background: none; } .calenderBar .five h3 span { font-size: 16px; line-height: 22px; } .calenderBar .five h3 { font-size: 19px; line-height: 20px; } .calenderBar .five { padding: 52px 30px; } .calenderBar li { border: 0px; } .calenderBar li:last-child .five { border: 0px; } .calenderBar .repeat:nth-last-of-type(3) + h2 { border-bottom: 1px solid #2b2b2b; } .calenderBar .repeat:nth-last-of-type(3) + h2 + .repeat { border: 0px; } .reviewBar h2 img { display: none; } .reviewBar h2 { background: none; padding: 10px 98px 10px 20px; height: 83px; border-top: 1px solid #2b2b2b; border-bottom: 0px; position: relative; cursor: pointer; font-size: 18px; line-height: 61px; } .reviewBar h2 small { padding-left: 0px; line-height: 20px; display: inline-block; vertical-align: middle; } .reviewBar h2:after { width: 88px; height: 100%; content: ""; position: absolute; top: 0px; right: 0px; background: url(../images/down-arrow.png) center center no-repeat; background-size: 20px auto; border-left: 1px solid #2b2b2b; } .reviewBar h2.active:after { background: url(../images/up-arrow.png) center center no-repeat; background-size: 20px auto; } .reviewBar h2.active { background: #111; } .reviewBar h2 span { display: inline-block; vertical-align: top; position: relative; top: auto; left: auto; font-size: inherit; line-height: inherit; font-family: 'rubikblack_italic'; } .reviewBar h2 span:after { content: "/"; color: #00d2ff; margin: 0 5px; } .reviewBar h2 span:before { content: ""; width: 7px; height: 4px; display: none; position: absolute; bottom: 4px; right: 16px; background: #1c1c1c; } .reviewBar h2 span i { display: none; } .reviewBar h2.active span:before { background: #111; } .reviewBar .repeat { padding: 0px 20px; background: #111111; border-top: 1px solid #2b2b2b; display: none; } .reviewBar li:nth-of-type(1), .reviewBar li:nth-of-type(2), .reviewBar li:nth-of-type(3), .reviewBar li:nth-of-type(4), .reviewBar li:nth-of-type(5), .reviewBar li:nth-of-type(6), .reviewBar li:nth-of-type(7) { float: none; width: 100%; padding: 23px 0; border: 0px; border-top: 1px solid #2b2b2b; font-size: 16px; line-height: 20px; overflow: hidden; } .reviewBar li strong { padding: 0px; font-size: 19px; line-height: 20px; float: right; color: #00d2ff; } .reviewBar li:nth-of-type(1) { border: 0px; } .reviewBar ul { border: 0px; } .reviewBar .repeat:nth-last-of-type(2) + h2 { border-bottom: 1px solid #2b2b2b; } .reviewBar .repeat:nth-last-of-type(2) + h2 + .repeat { border: 0px; } body.home { background: #1c1c1c; } body.home #layout { padding-bottom: 80px; height: auto !important; } .textBar { padding: 35px 20px 0px; position: static; top: auto; left: auto; bottom: auto; background: #1c1c1c; } .textBar h1 small { font-size: 15px; line-height: 17px; padding-bottom:15px; } .textBar h1 small::after { font-size: 31px; margin-left: 10px; } .textBar h1 { padding-bottom: 23px; font-size: 25px; line-height: 24px; } .textBar h1 span { padding-left: 0px; text-indent: 20px; } .textBar .logo { letter-spacing: 1px; } .textBar p { font-size: 15px; line-height: 25px; } .textBar .notes { padding: 20px 20px 30px; position: absolute; bottom: 0px; left: 50%; text-align: center; width: 100%; font-size: 12px; line-height: 16px; color: #6d6d6d; max-width: 320px; margin-left: -160px; } .textBar .notes br { display: none; } .infoBar aside.one, .infoBar aside.four { width: auto; float: none; margin: 0 -20px; } .infoBar aside { width: auto; margin: 0 -20px; float: none; transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); height: 200px !important; z-index: 99; } .infoBar aside.two { margin: 0px -20px; transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); width: auto; } .infoBar aside.three { margin: 0px -20px; transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); width: auto; } .infoBar aside.four { margin: 0px -20px; } .infoBar h2, .infoBar aside.two *, .infoBar aside.three *, .infoBar aside.three h2 { font-size: 19px; line-height: 20px; max-width: 100%; width: 100%; transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); -webkit-transform: rotate(10deg); padding: 95px 20px 0; } .infoBar aside.four h2 { float: none; width: 100%; } .infoBar aside.three { z-index: 99; } .infoBar h2 br { display: none; } .infoBar { position: relative; z-index: 99; padding: 70px 0; clear: both; } .infoBar aside.two::before, .infoBar aside.three::before { left: 0px; top: 0px; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; width: 100%; } .infoBar aside::after { background: rgba(0, 0, 0, 0.55); } .infoBar aside { background-position: 50% 30%; } .menuBar .social { display: block; } body.home .menuBar { top: 61px; } .loader { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .reviewBar li:nth-of-type(7) { display: block; } .reviewBar li:nth-of-type(7) a { color: #fff; text-decoration: none; display: block; background: url(../images/arrow.png) center right no-repeat; background-size: 22px auto; } .reviewBar li:nth-of-type(7) a:hover { color: #00d2ff; } .infoBar aside:before { top: 0px; } .infoBar aside:hover { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform:rotate(-10deg); } .infoBar aside.two:hover, .infoBar aside.three:hover { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); } .backto_top { bottom: 5px; } .reviewBar ul:after, .reviewBar ul:before, .calenderBar h2::before, .calenderBar li:after, .calenderBar li:before { display: none; } .risingBar .repeat img { max-width: 300px; } .risingBar .repeat img.for-desktop { display: none; } .risingBar .repeat img.for-mobile { display: block; } .risingBar { padding: 20px 20px 0; } } @media only screen and (max-width: 639px) { .portfolioBar .element-item { width: 50%; } .infoBar { padding: 50px 0; } .infoBar aside { height: 180px !important; } .infoBar h2, .infoBar aside.two *, .infoBar aside.three *, .infoBar aside.three h2 { padding-top: 80px; } .textBar .text .bottom { display: block; border: 0px; margin: 5px 0 0px; padding: 15px 0 0px; border-top: 1px solid rgba(255, 255, 255, 0.3); } .textBar .text .bottom a { margin-right: 30px; } .textBar p { border: 0px; padding-bottom: 15px; } .textBar .logo { margin-top: 0px; } } @media only screen and (max-width: 479px) { .portfolioBar .element-item { width: 100%; } .portfolioBar .element-item .title span.number { font-size: 34px; } .portfolioBar .element-item h2 { font-size: 20px; line-height: 26px; } .portfolioBar .element-item .title { padding: 10px 20px 30px; } .infoBar { padding: 45px 0; } .infoBar aside { height: 144px !important; } .infoBar h2, .infoBar aside.two *, .infoBar aside.three *, .infoBar aside.three h2 { padding-top: 61px; } .risingBar .repeat img { max-width: 280px; } .textBar .text .bottom a { width: 45%; margin-right: 0px; } .textBar .text .bottom a + a { width: 53%; max-width: 160px; } .textBar .text .bottom a + a br { display: none; } } @media only screen and (min-width: 768px) { .resultBar .repeat, .menuBar, .calenderBar .repeat, .reviewBar .repeat { display: block !important; } body.home .menuBar, .overlay { display: none !important; } }