/* FONTS */ @import url("../fonts/bodoni/stylesheet.css"); @import url("../fonts/dosis/stylesheet.css"); html,button,input,select,textarea {color: #141414;} html { font-size: 12px; line-height: 13px; font-family:dosis-med; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;} audio, canvas,img,video { vertical-align: middle;} fieldset {border: 0;margin: 0; padding: 0;} textarea { resize: vertical;} .browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;} /* COLOURS ================================================================= purple: #ff3a90 black: #141414 grey: #313638 ============================================================================= */ /* MAIN ELEMENTS */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { background:#313638; font-family:dosis-med; font-size:14px; line-height:16px; color:#141414; -webkit-font-smoothing: antialiased;} body { width:100%; height:100%;} a { cursor:pointer; overflow:hidden; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; text-decoration:none; color:#313131;} p { font-family:dosis-med; font-size:18px; line-height:22px; margin:10px 0; color:#141414; text-align:justify;} p.small { font-size:12px; line-height:14px;} p.big { font-family:dosis-med; font-size:20px; line-height:24px; margin:20px 0; text-transform:uppercase;} p.big strong { color:#ff3a90; font-weight: normal;} p.big.error { font-family:dosis-med; font-size:18px; line-height:22px; color:#FF3333; margin:20px 0;} p.big.thanks { font-family:dosis-med; font-size:18px; line-height:22px; color:#3FC; margin:20px 0;} p.quote { font-family:dosis-med; font-size:18px; line-height:22px; color:#141414; font-style:italic; margin:20px 0;} h1 { font-family:bodoni; font-size:50px; line-height:50px; margin:10px 0 30px 0; text-transform:uppercase; color:#ff3a90;} h1 span { display:block; font-family: courier-std,monospace; font-weight: 400; font-style: normal; font-size:20px; line-height:20px; text-transform:none; color:#141414;} h2 { font-family:bodoni; font-size:50px; line-height:50px; margin:10px 0; text-transform:uppercase; color:#ff3a90;} h2 span { display:block; font-family: courier-std,monospace; font-weight: 400; font-style: normal; font-size:18px; line-height:18px; text-transform:none; color:#141414;} h3 { font-family: courier-std,monospace; font-weight: 400; font-style: normal; font-size:20px; line-height:20px; text-transform:none; color:#141414;} h4 { font-family:bodoni; font-size:28px; line-height:20px; margin:10px 0 30px 0; text-transform:uppercase; color:#141414;} ul { margin:0; padding:0px; list-style:none; list-style-type:none;} ul li { margin:0; padding:0px; display:inline-block;} ul li a { display:block; font-size:14px; line-height:16px; } /* SECTIONS & STRUCTURES */ section, header, nav, footer { position:relative; width:100%;} section header { position:relative; width:100%;} section.margin { margin:50px 0;} .container { position:relative; margin:0 auto; z-index:101;} .col10 { width:10%;} .col15 { width:15%;} .col20 { width:20%;} .col25 { width:25%;} .col30 { width:30%;} .col33 { width:33%;} .col34 { width:34%;} .col40 { width:40%;} .col48 { width:48%;} .col50 { width:50%;} .col60 { width:60%;} .col67 { width:67%;} .col70 { width:70%;} .col75 { width:75%;} .col80 { width:80%;} .left { float:left;} .right { float:right;} .center { text-align:center;} .button { padding:10px 25px; display:inline-block; font-size:15px; text-transform:uppercase; font-family: courier-std,monospace; font-weight: 400; border-radius:20px;} .button.purple { background:#ff3a90; color:#FFF;} .button.purple:hover { opacity:0.7;} .button.black { background:#313638; color:#FFF;} .button.black:hover { opacity:0.7;} .button.white { background:#FFF; color:#141414;} .button.white:hover { opacity:0.7;} .button.white-trans { background:transparent; color:#FFF; border:1px solid #FFF;} .button.white:hover { opacity:0.7;} .button.white.get-involved { background:url(../img/icon_plus.png) 20px 9px no-repeat #FFF; background-size: 18px 18px; padding:10px 25px 10px 50px; border-bottom:none;} .button.white.get-involved:hover { border-bottom:none;} .button.white-trans.get-involved { background:url(../img/icon_plus_white.png) 20px 9px no-repeat transparent; background-size: 18px 18px; padding:10px 25px 10px 50px;} .button.black.get-involved { background:url(../img/icon_plus_white.png) 20px 9px no-repeat #141414; background-size: 18px 18px; padding:10px 25px 10px 50px; border-bottom:none;} .button.black.get-involved:hover { border-bottom:none;} section.white { background:#FFF !important;} section.grey { background:#313638 !important;} section.grey.bordered { border-top:3px solid #ff3a90; border-bottom:3px solid #ff3a90;} section.grey p { color:#FFF;} /* SECTION TITLES */ .section-title { margin:30px 0 40px 0;} .section-title .line { width:120px; height:3px; display:block;} .section-title h1 { font-family:bodoni; font-size:50px; line-height:50px; margin:10px 0 30px 0; text-transform:uppercase;} .section-title h1 span { display:block; font-family: courier-std,monospace; font-weight: 400; font-style: normal; font-size:20px; line-height:20px; text-transform:none; margin-bottom:10px;} .section-title h2 { font-family:bodoni; font-size:50px; line-height:50px; margin:10px 0; text-transform:uppercase;} .section-title h2 span { display:block; font-family: courier-std,monospace; font-weight: 400; font-style: normal; font-size:18px; line-height:18px; text-transform:none; } .section-title h4 { font-family:bodoni; font-size:28px; line-height:20px; margin:10px 0 30px 0; text-transform:uppercase;} .section-title h3 { font-family: courier-std,monospace; font-weight: 400; font-style: normal; font-size:20px; line-height:20px; text-transform:none;} .section-title { margin:30px 0 40px 0;} .section-title.centered h1, .section-title.centered h2, .section-title.centered h3, .section-title.centered h4 { text-align:center;} .section-title.centered .line { margin:0 auto;} .section-title.on-white h1 { color:#ff3a90;} .section-title.on-white h2 { color:#ff3a90;} .section-title.on-white h3 { color:#141414;} .section-title.on-white h4 { color:#ff3a90;} .section-title.on-white h1 span, .section-title.on-white h2 span {color:#141414;} .section-title.on-white .line { background:#141414;} .section-title.on-dark h1 { color:#FFF;} .section-title.on-dark h2 { color:#FFF;} .section-title.on-dark h3 { color:#FFF;} .section-title.on-dark h4 { color:#FFF;} .section-title.on-dark h1 span, .section-title.on-dark h2 span {color:#ff3a90;} .section-title.on-dark .line { background:#FFF;} .courier-bold { font-family: courier-std,monospace; font-weight: 700; font-style: normal;} .courier-med { font-family: courier-std,monospace; font-weight: 400; font-style: normal;} /* HEADER*/ header { background:rgba(20,20,20,0.90); border-bottom:1px solid rgba(100,100,100,0.5); width:100%; height:120px; padding:10px 0; position:fixed; top:0; z-index:999; } header .header-logo { display:block; width:87px; height:100px; background:url(../img/bazart_logo_white_header.png)0 0 no-repeat transparent; background-size:87px 100px;} header .header-logo:hover { opacity:0.7;} header .social { width: calc(100% - 100px); text-align:right!important;} header .social a { display:inline-block; width:40px; height:40px; margin:0 10px;} header .social a.fb { background:url(../img/icon_fb_white.png)0 0 no-repeat; background-size:40px 40px;} header .social a.in { background:url(../img/icon_in_white.png)0 0 no-repeat; background-size:40px 40px;} header .social a.ins { background:url(../img/icon_ins_white.png)0 0 no-repeat; background-size:40px 40px;} header .social a.yt { background:url(../img/icon_yt_white.png)0 0 no-repeat; background-size:40px 40px;} header .social a:hover { opacity:0.7;} header nav { width: calc(100% - 100px);} header nav ul { float:right;} header nav ul li { position:relative; padding-bottom:5px; margin:20px 15px; border-bottom:2px solid transparent;} header nav ul li:last-child { margin-right:0;} header nav ul li:hover { opacity:1; border-bottom:2px solid #ff3a90;} header nav ul li.active { border-bottom:2px solid #ff3a90;} header nav ul li a { font-family: courier-std,monospace; font-weight: 400; font-size:16px; color:#FFF; line-height:16px; } header nav ul li a span.arrow-down { width:10px; height:10px; display:inline-block; background:url(../img/ico_arrow_down.png)0 -2px no-repeat; background-size:10px 10px; margin-left:5px; vertical-align:middle;} header nav ul li ul.child { position:absolute; width: max-content; min-width: 100%; top:150px; left:0; background:rgba(240,240,240,0.95); padding:15px; z-index:999; opacity:0; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.6); -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.6); box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.6); visibility:hidden; border-top:2px solid #ff3a90;} header nav ul li ul.child li { display:block; padding:0; margin:10px 0; border-bottom: none;} header nav ul li ul.child li a { color:#141414; font-size:16px; line-height:18px;} header nav ul li ul.child li:hover { border-bottom: none;} header nav ul li ul.child li:hover a { color:#ff3a90;} header nav ul li:hover ul.child { opacity:1; top:23px; visibility:visible; z-index: 999;} header.scroll { background:rgba(20,20,20,0.90); height:70px; border-bottom:1px solid rgba(100,100,100,0.5);} header.scroll .header-logo { width:43.5px; height:50px; background:url(../img/bazart_logo_white_header.png)0 0 no-repeat transparent; background-size:43.5px 50px;} header.scroll .social { display: none;} header.scroll .mobile-menu { top:20px;} header.scroll nav.active { top:5px;} header.white.scroll .mobile-menu { top:20px;} header.white.scroll nav.active { top:5px;} header.white.scroll { background:#FFF; height:70px; border-bottom:1px solid rgba(100,100,100,0.25);} header.white.scroll .header-logo { width:43.5px; height:50px; background:url(../img/bazart_logo_black_header.png)0 0 no-repeat transparent;; background-size:43.5px 50px;} header.white { background:#FFF; border-bottom:1px solid rgba(100,100,100,0.25);} header.white nav ul li a span.arrow-down { background:url(../img/ico_arrow_down_black.png)0 -2px no-repeat; background-size:10px 10px;} header.white .header-logo { background:url(../img/bazart_logo_black_header.png)0 0 no-repeat transparent; background-size:87px 100px;} header.white nav ul li a { color:#141414;} .mobile-menu { position: absolute; right: 20px; top: 30px; z-index: 999; display: none; width: 57px; height: 36px; background: url(../img/mobile_menu_white.png)0 0 transparent no-repeat; background-size: 57px 36px;} header.white .mobile-menu { background: url(../img/mobile_menu_black.png)0 0 transparent no-repeat; background-size: 57px 36px;} /* FOOTER */ footer { width:100%; background:#141414; padding:50px 0;} footer .col25 { padding:0 30px;} footer .col25:first-child, footer .col25:last-child { padding:0;} footer .logo { width:120px; height:135px; margin:0 auto; background:url(../img/bazart_logo_white.png)0 0 no-repeat transparent; background-size:120px 135px;} footer h2 { font-family: courier-std,monospace; font-weight: 400; font-style: normal; font-size:20px; line-height:20px; color:#FFF; text-align:center; text-transform:none; margin:20px 0;} footer h2 span { display:inline-block; width:10px; height:10px; background:url(../img/icon_dot.png)0 0 no-repeat transparent; background-size:10px 10px; margin:0px 7px;} footer .button { margin:0 auto; display:block;} footer p { color:#FFF;} footer p.blurp { font-size:16px; line-height:24px; text-align:center;} footer p.blurp span { font-family:bodoni; font-size:22px; color:#ff3a90; text-transform:uppercase;} footer ul li { display:block; margin:10px 0;} footer ul li a { text-align:center; color:#FFF; font-size:16px; line-height:18px;} footer ul li a:hover { opacity:0.7;} footer .social { text-align:center !important;} footer .social a { display:inline-block; width:40px; height:40px; margin:0 10px;} footer .social a.fb { background:url(../img/icon_fb_white.png)0 0 no-repeat; background-size:40px 40px;} footer .social a.in { background:url(../img/icon_in_white.png)0 0 no-repeat; background-size:40px 40px;} footer .social a.ins { background:url(../img/icon_ins_white.png)0 0 no-repeat; background-size:40px 40px;} footer .social a.yt { background:url(../img/icon_yt_white.png)0 0 no-repeat; background-size:40px 40px;} footer .social a:hover { opacity:0.7;} footer .contact a, footer .contact span { font-family:dosis-med; font-size:18px; line-height:22px; margin:25px 0; display:block; font-weight:normal; color:#FFF; text-align:center;} footer .contact a:hover { opacity:0.7;} footer .contact span.pbo { font-size:14px; line-height: 16px;} footer p.copyright { font-size:14px; text-align:center;} footer p.copyright span { color:#ff3a90;} /* HOME SLIDER */ section.home { } section.home .bkg-loader { height: 960px; width: 100%; background: url("../img/bazart_bkg_logo_white.png") center center no-repeat rgba(30,30,30,0.6); background-size: 439px 500px; z-index: -999999; position: absolute; left: 0; top: 0;} .intro-container { position:absolute; width:630px; height:auto; opacity: 0; -webkit-transition: opacity 0.5s ease 1.5s; -moz-transition: opacity 0.5s ease 1.5s; -o-transition: opacity 0.5s ease 1.5s; transition: opacity 0.5s ease 1.5s;} .intro-container h1.home { font-family: courier-std,monospace; font-weight: 400; font-style: normal; font-size:40px; line-height:40px; color:#FFF; text-align:center; text-transform:none; margin: 20px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.8);} .intro-container h1.home strong { font-family: courier-std,monospace; font-weight: 400; font-style: normal; font-size:24px; line-height:24px; color:#FFF; text-align:center; text-transform:none; margin:0 0 20px 0; display:inline-block;} .intro-container h1.home span { display:inline-block; width:10px; height:10px; background:url(../img/icon_dot.png)center 0 no-repeat transparent; background-size:10px 10px; padding:5px 20px;} .intro-container p { font-family:dosis-med; font-size:24px; color:#FFF; text-align:center; line-height:28px; font-weight:normal; text-shadow: 2px 2px 4px rgba(0,0,0,0.8);} .intro-container p.small { font-size: 16px;} .home .arrow-container { position:absolute; bottom:7%; width:100%; height:55px; z-index:900; } .home .read-more-arrow { width:75px; height:55px; margin:0 auto; background:url(../img/double_arrow_down_white.png)0 0 no-repeat transparent; background-size:75px 55px; display: block; opacity:0.4;} .home .read-more-arrow:hover { opacity:0.7;} /* INTRO */ section.intro { padding:80px 0;} section.intro .button { margin:20px 0 0 0;} .side-quote { width:400px; height:500px; background:#ff3a90; padding:30px; margin:0 auto;} .side-quote .logo-white { display:block; width:120px; height:135px; background:url(../img/logo-white.png)0 0 no-repeat; margin:0 auto; background-size:120px 135px; margin-bottom:20px;} .side-quote p { font-family: courier-std,monospace; font-weight: 400; font-size:18px; color:#FFF; line-height:26px; text-align:center;} .intro-pic-right { width: 100%; height: 300px; margin: 20px auto; box-shadow: 1px 1px 4px rgba(0,0,0,0.25);} .intro-pic-left { width: 100%; height: 300px; margin: 20px auto; box-shadow: 1px 1px 4px rgba(0,0,0,0.25);} /* HOME GALLERY */ section.home-gallery { padding:80px 0;} section.home-gallery .section-title { margin-top:0;} section.home-gallery img { width:100%; height:auto;} section.home-gallery .button { margin: 20px 0 0 0;} .gallery-pic-right { width: 100%; height: 400px; margin: 20px auto; box-shadow: 1px 1px 4px rgba(0,0,0,0.25);} /* HOME BLOG */ .home-blog { padding:40px 0; border-bottom: 3px solid #ff3a90;} .home-blog .read-more { margin: 10px auto 0 auto; display: block; width: 180px; text-align: center; background:#141414; } .home-blog .grid-sizer { opacity:0;} .home-blog .grid-sizer, .home-blog .piece { width: calc(20% - 40px); margin-bottom: 40px; padding: 2px; background: #FFF; box-shadow: 2px 2px 4px rgba(0,0,0,0.20);} .home-blog .piece .piece-desc h3 { font-size:14px; line-height:14px; margin:0 0 0 0; color:#313638; font-weight: 400; text-transform: uppercase;} .home-blog .piece .piece-desc p { font-size:14px; line-height:16px; color:#787878; margin:0;} .home-blog .piece .date { position:absolute; display:block; bottom:-25px; left:0; font-size:12px; line-height:12px; color:#313638; width: 100%;} .home-blog .piece .button { position: absolute; display: none; bottom: -30px; right: 10px; padding: 6px 12px;} .home-blog .piece img { display:block; width:100%; border-bottom:0px solid #141414;} .home-blog .piece .piece-desc { position:relative; padding:10px; margin-bottom:40px;} .home-blog .piece .piece-desc *{ text-align: center;} .home-blog .piece .piece-desc h2 { font-family: dosis-med; font-weight: 400; font-size:24px; line-height:24px; margin:5px 0 5px 0; text-transform:uppercase;} .home-blog .piece .piece-desc h2 span { display:inline-block; color:#ff3a90;} /* IPAF */ section.ipaf { padding:50px 0; min-height:500px; background:transparent; border-bottom:3px solid #ff3a90; overflow: hidden;} .parallax-mirror { z-index:auto !important;} .ipaf-logo { width:174px; height:150px; margin:0 auto 50px; background:url(../img/ipaf_2020_logo_white.png)0 0 no-repeat transparent; background-size:174px 150px;} section.ipaf h2 { font-family:bodoni; font-size:32px; color:#FFF; line-height:32px; text-transform:uppercase; text-align:center; font-weight:normal;} section.ipaf h2 span { display:inline-block; color:#ff3a90; margin:0 5px;} section.ipaf h3 { font-family:dosis-med; font-size:18px; color:#FFF; line-height:22px; text-transform:uppercase; text-align:center; margin:10px 0;} section.ipaf .button { display: block; margin: 20px auto; text-align: center; width: 260px;} /* MEDIA */ section.media { margin-top: 120px; padding: 50px 0; background:#f9f9f9; border-bottom: 3px solid #ff3a90;} .article-item { margin:0 0 50px 0;} .article-item .article-pic { width:50%; margin:0 auto;} .article-item .article-desc { width:80%; height: 60px; margin:0 auto; text-align:center !important;} .article-item .article-pic img { width:100%; height:auto; display:block; border:1px solid #d1d1d1;} .article-item a:hover { opacity:0.7;} .article-item h2 { font-family:dosis-med; font-size:16px; line-height:18px; font-weight:normal; text-transform:uppercase; margin:10px 0 0 0; color:#141414;} .article-item h3 { font-family:dosis-med; font-size:14px; font-weight:normal; text-transform:uppercase; margin:5px 0; color:#313131;} .article-item .date { font-family:dosis-med; font-size:12px; color:#535353; text-align:center; margin:5px 0;} .article-item .date span{ font-size:12px; color:#ff3a90;} /* ONLINE GALLERY */ section.header { height:350px; border-bottom:3px solid #ff3a90;} section.header.small { height:300px !important; border-bottom:3px solid #ff3a90;} section.header.small .intro-container { margin-top:20px;} .section-title .search { padding:20px 0; width:300px; margin:0 auto;} .section-title .search select { padding:5px 10px; font-family:dosis-med; font-size:14px; line-height:18px; color:#313638; display:block; width:200px; margin:5px auto;} section.gallery { margin-top: 120px; padding: 50px 0; padding:30px 0; background:#f0f0f0;} section.gallery .section-title h2 { text-align: center; font-family: courier-std,monospace; font-weight: 400; font-style: normal; font-size: 24px; line-height: 24px; } .pieces-list { padding-left:40px;} .grid-sizer { opacity:0;} .grid-sizer, .piece { width: calc(33% - 40px); margin-bottom: 40px; padding: 10px; background: #FFF; box-shadow: 2px 2px 4px rgba(0,0,0,0.20);} .piece:hover { opacity:0.7;} .pieces-list:after { content: ''; display: block; clear: both; } .piece img { display:block; width:100%;} .piece .piece-desc { position:relative;} .piece .piece-desc h2 { font-size:24px; line-height:30px; margin:10px 0 0 0; text-transform:uppercase;} .piece .piece-desc h3 { font-size:14px; line-height:18px; margin:10px 0 0 0; font-family: dosis; font-weight: bold;} .piece .piece-desc p { font-size:12px; color:#787878; margin:0;} .piece .price { position:absolute; display:block; bottom:10px; right:10px; font-family: courier-std,monospace; font-weight: 400; font-size:18px; line-height:18px; color:#313638; font-style:italic;} .piece .line { position:absolute; display:block; bottom:-10px; right:-10px; width:5px; height:50px; background:#ff3a90;} .piece .sold { background:#ff3a90; padding:17px 10px; color:#FFF; font-size:16px; text-align:center; text-transform:uppercase; position:absolute; border-radius:26px; top:-60px; right:10px; box-shadow: 1px 1px 3px rgba(0,0,0,0.75);} #artists-slider { width:100%; height:220px;} .view-all-artists { display:block; margin:0 auto; width:160px; text-align:center;} .owl-carousel .owl-stage {height:220px;} .owl-carousel .owl-stage-outer {height:220px;} #artists-slider .owl-prev { left:-50px; background-position:0 0; top:30%; display: block !important;} #artists-slider .owl-next { right:-50px; background-position:-26px 0; top:30%; display: block !important;} #artists-slider .item { width:300px; margin: 0 auto;} #artists-slider .item .pic { width: 160px; border-radius: 80px; overflow: hidden;} #artists-slider .item .desc { margin-left:20px; padding-top: 40px; text-align:left;} #artists-slider .item .desc h3 { color:#FFF; font-size:16px; line-height:20px; font-family: dosis; font-weight: bold; margin:0;} #artists-slider .item .desc p { font-size:12px; margin:5px 0;} #artists-slider .item .desc .button { margin:15px 0 0 0; padding:3px 12px; font-size:12px;} #artists-slider .item .desc .button:hover { opacity:0.7;} .list-controls { margin:50px auto 0 auto !important; background:#f7f7f7; border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7;;} .list-controls .controls-container { width:260px; position:relative; margin:0 auto;} .list-controls .counter {width:100px; display:inline-block; text-align:center; font-size:12px; line-height:12px; margin: 5px 0;} .list-controls .counter .pages {display:inline-block; color:#141414; margin:2px 0 3px 0; } .list-controls .counter .total-count {display:block; color:#f3172f; font-family:roboto_bold; font-size:11px; line-height:11px;} .list-controls .controls-container .button { display:block; padding:5px 15px; margin:5px;} /* THE ARTISTS */ .artists-list {} .artists-list h3.soon { text-align: center;} .artists-list a { margin:20px 0; position:relative; display:block;} .artists-list a:hover { opacity:0.7;} .artists-list a .image { width:300px; height:300px; border-radius:150px; margin:0 auto; overflow:hidden;} .artists-list a .image img { width:block; width:100%; height:auto;} .artists-list a h3 { text-align:center; text-transform:uppercase; color:#ff3a90; font-size:20px; margin:20px 0 0 0;} .artists-list a h3 span { font-family: courier-std,monospace; font-weight: 400; font-size:14px; color:#686868; display:block;} .artists-list a:nth-child(3n+2) { margin:20px 5%;} #years-actions { text-align:center; margin-bottom:20px;} #years-actions .button { display:inline-block; text-align:center; margin:0 10px;} #years-actions .button.active, #years-actions .button:hover { background:#ff3a90;} /* THE ARTIST */ section.the-artist { background:#f0f0f0; margin-top:120px; padding:50px 0;} section.the-artist .section-title { margin-bottom:20px !important;} section.the-artist .section-title h1 { margin:10px 0;} section.the-artist .section-title h3.country{ margin:10px 0 20px 0; font-size:16px;} section.the-artist .desc { width:60%; margin:20px auto 50px auto;} section.the-artist .desc p { text-align:center;} section.the-artist .pic { margin:20px auto 0 auto; width:300px; height:300px; border-radius:150px; overflow:hidden;} section.artist-gallery { background:#FFF;} .artist-pieces a.piece { width:30%; margin:10px 0;} .artist-pieces a.piece h2 { font-size:16px;} .artist-pieces a.piece:nth-child(3n+2){ margin:10px 5%;} .murals { padding-bottom: 50px;} .murals .mural-item { width:30%; margin:10px 0;} .murals .mural-item:hover { opacity:0.7;} .murals .mural-item h2 { text-align: center; text-transform: uppercase; color: #ff3a90; font-size: 20px; margin: 20px 0 0 0;} .murals .mural-item h2 span { font-family: "Courier New", Courier, monospace; font-size: 14px; color: #686868; display: block;} .murals .mural-item img { display:block; width: 100%; height: auto;} .murals .mural-item:nth-child(3n+2){ margin:10px 5%;} .full-screen { width: 176px; margin: 0 auto; display: block; padding: 10px 10px 30px 42px;; background: url(../img/icon_full_screen.png)11px 7px no-repeat transparent; background-size: 25px 21px; font-size: 12px; color: #313638; z-index: 999;} /* PROJECTS */ .projects-list { border-bottom:3px solid #ff3a90; background: #141414;} .projects-list a { display: block; width: 33%; height: 300px; border-right: 1px solid #FFF; border-bottom: 1px solid #FFF; vertical-align: middle; color: #FFF; padding: 130px 0 0 0; font-size: 18px; line-height: 18px; text-align: center;} .projects-list a:nth-child(3n+2) { width: 34%; } .projects-list a:nth-child(3n+3) { border-right: none; } .projects-list a:nth-last-child(-n+3) { border-bottom: none;} .projects-list a .backstretch { opacity: 0.5; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;} .projects-list a:hover .backstretch { opacity: 1;} section.projects-contact { background: #FFF; border-bottom:3px solid #ff3a90;} section.projects-contact .contact-button { display: block; margin: 80px auto; width: 190px; text-align: center;} /* PROJECT */ section.project { background: #FFF; border-bottom:3px solid #ff3a90;} section.project .small-desc { padding: 10px;} section.project .small-desc p { font-family:dosis-med; font-size:18px; line-height:22px; } section.project a.project-video { display: block; width: 100%; position: relative; background: #141414;} section.project a.project-video .pic { opacity: 0.5; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;} section.project a:hover .pic { opacity: 1;} section.project a.project-video .pic img { display: block; width: 100%;} section.project a.project-video h3 { position: absolute; z-index: 999; top: 30%; left: 0; width: 100%; text-align: center; color: #FFF;} section.project .pic img { display: block; width: 100%;} /* MAP */ section.street-art-map { padding:25px 0 0 0; background:#F0F0F0; border-top:3px solid #ff3a90;} section.street-art-map .container {} .section-title .ipaf-book-tour { position:absolute; right:0; top:-20px;} .section-title .ipaf-book-tour .logo { width:96px; height:83px; background-size:96px 83px !important; background:url(../img/ipaf_2019_logo_black.png)0 0 no-repeat; margin: 0 auto;} .section-title .ipaf-book-tour .button { font-size:14px; padding:5px 10px; margin-top:10px;} section.street-art-map #the-map { width:100%; height:650px; background:#f0f0f0; border-top:3px solid #ff3a90;} .gm-style { } .gm-style-iw { width: 350px !important; height:190px !important; top: 15px !important; left: 0 !important; background-color: #fff; box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6); border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 2px 2px 0 0; } .info-window { width:350px; height:190px; overflow:hidden; position:relative;} .info-window img { width:100%; height:100%;} .info-window h3 { position:absolute; top:0; left:0; padding:3px 5px; background:rgba(0,0,0,0.9); font-size:18px; font-family:bodoni; color:#FFF; text-transform:uppercase; margin:0px;} .info-window a.tag { position:absolute; bottom:0; right:0; padding:3px 5px; background:rgba(0,0,0,0.9); font-size:14px; font-family:dosis-med; color:#FFF; margin:0px;} .info-window a.tag:hover { color:#ff3a90;} .info-window .map-info { width:280px; position:relative;} /* THE PIECE */ section.the-piece { background:#f0f0f0; margin-top:120px; padding:50px 0;} section.the-piece .pic { margin:0; width:100%; padding:20px; background:#FFF; box-shadow: 2px 2px 4px rgba(0,0,0,0.20);} section.the-piece .pic a { display:block; position:relative;} /*section.the-piece .pic a span.full-screen { display:block; background:url(../img/icon_full_screen.png)center 0 no-repeat; padding:60px 0 0 0; font-size:32px; font-family: courier-std,monospace; font-weight: 400; color:#141414; background-size:50px 42px; position:absolute; z-index:999; top:0px; width:100%; text-align:center; opacity:0;-webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;} section.the-piece .pic a:hover img { opacity:0.5;} section.the-piece .pic a:hover span.full-screen { opacity:1; top:30%;}*/ section.the-piece .pic img { display:block; width:100%; height:auto; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;} section.the-piece .desc { padding-left:40px;} section.the-piece .desc .section-title { margin-bottom:20px !important;} section.the-piece .desc .section-title a { color:#818181;} section.the-piece .desc p.piece-desc { margin:20px 0; color:#818181; font-style:italic; font-size:18px; line-height:26px;} section.the-piece .desc .purple { display:inline-block; color:#ff3a90; margin:0 10px; font-weight:bold;} section.the-piece .desc .line { width:120px; height:3px; display:block; background:#141414;} section.the-piece .desc .price { margin:20px 0; padding:10px 20px; color:#FFF; background:#ff3a90; display:inline-block; font-size:24px; line-height:24px;} section.the-piece .desc .button { font-family:dosis-med; margin:20px; padding:10px 20px; color:#FFF; background:#141414; display:inline-block; font-size:24px; line-height:24px; border-radius:0 !important;} section.the-piece .desc .sold { background:#ff3a90; padding:18px 10px; color:#FFF; font-size:16px; text-align:center; text-transform:uppercase; border-radius:26px;display:inline-block; margin:16px 20px;} section.the-piece .the-artist { width:300px; margin: 30px 0;} section.the-piece .the-artist .pic { width: 100px; border-radius: 50px; overflow: hidden; padding:0;} section.the-piece .the-artist .pic img { width:100%;} section.the-piece .the-artist .desc { margin-left:20px; padding-top: 0; text-align:left; padding-left:0 !important;} section.the-piece .the-artist .desc h3 { color:#313131;; font-size:16px; line-height:20px; margin:10px 0 0 0; font-family: dosis; font-weight: bold;} section.the-piece .the-artist .desc p { font-size:12px; margin:5px 0;} section.the-piece .the-artist .desc .button { margin:5px 0 0 0; padding:3px 12px !important; font-size:12px; line-height:15px; background: #ff3a90 !important; border-radius: 20px !important; font-family: courier-std,monospace; font-weight: 400;} section.the-piece .the-artist .desc .button:hover { opacity:0.7;} a.go-back { display:block; background:url(../img/icon_back_arrows.png)0 5px no-repeat transparent; background-size:16px 15px; padding:5px 0 5px 25px; font-family: courier-std,monospace; font-weight: 400; color:#313638; margin:10px 0 20px 0;} a.go-back.margin { margin:20px 0;} a.go-back:hover { color:#818181;} section.the-piece .related-pieces { margin:50px auto;} /* ENQUIRE */ section.enquire .section-title { margin-bottom:20px !important;} section.enquire .section-title h1 { margin:10px 0;} section.enquire .section-title h3.artist{ margin:10px 0 20px 0; font-size:16px;} /* FORM */ .enquire form { } .enquire form form-row { margin-bottom:15px; width:100%;} .enquire form .col48 { width:48%;} .enquire form form-row.no-margin { margin:0 !important;} .enquire form .error-msg { font-family:dosis-med; color:#FFF; font-size:16px; margin:30px 0 10px 0; padding:15px 10px 15px 50px; background:#ff3a90; } .enquire form .error-msg .account { margin:10px 0; font-family:dosis-semibold; font-size:12px;} .enquire form .error-msg a { display:inline-block; font-family:dosis-semibold; margin:5px 5px 5px 0; background:#FFF; font-size:12px; padding:4px 8px; text-transform:uppercase;} .enquire form .error-msg a:hover { opacity:0.7;} .enquire form h3 { font-family:dosis-semibold; color:#ff3a90; font-size:20px; margin:20px 0 20px 0; text-transform:uppercase;} .enquire form p { color:#313638;} .enquire form p.legend { color:#818181; font-style:italic; text-align:right;} .enquire form label { font-size:12px; font-family:dosis-semibold; color:#313638; text-transform:uppercase;} .enquire form label.error { background:#ff3a90; color:#FFF; padding:2px 5px;} .enquire form label.margin-top { display:block; margin-top:15px;} .enquire form select { display:inline-block; width:280px; padding:10px; border:1px solid #bfbfbf; margin-top:5px; font-family:dosis-med;} .enquire form input { display:inline-block; width:100%; padding:10px; border:1px solid #bfbfbf; margin-top:5px; font-family:dosis-med; margin-bottom:15px;} .enquire form input.error { border:1px solid #ff3a90;} .enquire form select.error { border:1px solid #ff3a90;} .enquire form textarea { display:inline-block; width:100%; height:150px; padding:10px; border:1px solid #bfbfbf; margin-top:5px; font-family:dosis-med; margin-bottom:15px;} .enquire form textarea.error { border:1px solid #ff3a90;} .enquire form .submit { font-size:14px; color:#FFF; background:#ff3a90; padding:8px 15px; text-align:center; display:block; border:none; width:150px;} .enquire form .submit:hover { opacity:0.7;} .button.back { font-size:16px !important; margin:20px 0 !important;} /* CONTACT */ section.contact { margin-top:120px; padding:50px 0; background:#f0f0f0;} section.about.grey { background:#f0f0f0 !important;} section.about .logo { width: 180px; height: 205px; margin: 20px auto; background:url(../img/bazart_logo.png)0 0 no-repeat transparent; background-size: 180px 205px;} section.about .legal-info { margin: 30px 0 0 0;} section.about .legal-info p { color: #141414;} section.about .legal-info ul li { color: #141414; text-align: left; margin: 10px 0;} section.about .legal-info ul li span { display:inline-block;} /* INSTAGRAM */ section.insta { padding:50px 0;} .insta-title { display:block; background:url(../img/insta_icon_white.png)0 0 no-repeat transparent; background-size:40px 40px; color:#FFF; font-size:26px; line-height:26px; margin:0 auto 20px auto; padding:0 0 0 50px; width:210px; text-transform:uppercase;} .insta-title:hover { opacity:0.7; color:#FFF;} .insta-title span { display:block; color:#ff3a90; font-size:12px; line-height:14px; margin-top:0px; text-transform:none;} .inst-item { width:23%; float:left; margin:20px 1%; height:360px; overflow:hidden; display:block;} .inst-item:hover { opacity:0.7;} .insta-pic img { width:100%; display:block;} .insta-desc {margin:10px 0;} .insta-desc p { color:#FFF; font-size:14px; line-height:14px;} .insta-desc p.date { font-size:14px; color:#ff3a90; margin-bottom:10px; font-weight: bold;} .insta-desc span { display:inline-block; margin:0 5px 0 0; font-size:12px; line-height:10px; color:#f0f0f0;} section.insta .button { margin:20px auto; display:block; width:132px;} /* ABOUT*/ section.about { margin-top: 120px; padding: 50px 0;} h2.separator { text-align:center; font-family: courier-std,monospace; font-weight: 400; font-style: normal; font-size:30px; line-height:30px; color:#ff3a90 !important; margin:50px 0 !important; text-transform:uppercase;} section.about h2 { font-size: 36px; line-height: 36px; margin: 0 0 10px 0;} .header-links { margin:40px 0 0 0; text-align:center;} .header-links a { padding:5px 10px; margin:0 10px 10px 10px; display:inline-block; font-size:14px; font-family: courier-std,monospace; font-weight: 400; border-radius:20px; background:#313638; color:#FFF; text-transform:uppercase;} .header-links a:hover, .header-links a.active{ background:#ff3a90; color:#FFF;} .about-links { margin:50px 0; text-align:center; font-size: 0;} .about-links a { display:inline-block; text-align:center; padding:10px; text-transform:uppercase; width:18%; height:150px; margin: 0 1% 20px 1%;} .about-links a.active { border:2px solid #ff3a90;} .about-links a h3 { font-family:bodoni; color:#FFF !important; font-size:24px; margin:15px 0 10px 0; text-transform:uppercase; } .about-links a.active h3 { font-family:bodoni; color:#ff3a90 !important; font-size:24px; margin:15px 0 10px 0; text-transform:uppercase; } .about-links a span { display:inline-block; margin:0px 3px; font-size:14px; line-height:14px; color:#FFF;} .about-links a:hover { opacity:0.8;} section.about .pillar { margin:50px 0;} section.about h3 { text-transform:uppercase; color:#313638; font-size:20px;} p.highlight, span.highlight { color:#ff3a90; font-style:italic;} section.about a.blog-read { display:block; padding:2px 0 8px 30px; margin: 10px 0; color:#ff3a90; text-decoration:underline; font-size:16px; line-height:16px; background:url(../img/icon_read.png)0 0 no-repeat transparent; background-size:20px 20px;} section.about a.blog-read:hover { text-decoration:none;} section.about .pillar-image { width:100%; height:390px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);} .activities { margin:40px 0;} .activities .act-desc { padding:20px 0;} .activities .act-desc.left * { text-align:right;} .activities .act-pic { height: 250px; position: relative; display: block;} .activities a:hover { opacity: 0.7;} .activities .act-pic span { position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.75); line-height: 18px; font-family: dosis-med; color: #FFF; font-size: 14px; padding: 5px 15px; text-align: center; width: 100%;} .activities h2 { text-align:left;} section.about ul { text-align:left;} section.about ul li { text-align: left; margin: 5px 0; display: block; font-size: 18px; line-height: 22px;} section.about ul li span { display:block; color:#646464; font-size:14px;} section.about .activities .image { width:100%; height:200px; margin:0 auto; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);} section.about .activities .image.art-production { background:url(../img/about_art_production.jpg)0 0;} section.about .activities .image.events { background:url(../img/about_events.jpg)0 0;} section.about .activities .image.brand-activation { background:url(../img/about_brand_activation.jpg)0 0;} section.about .activities .image.courses { background:url(../img/about_courses.jpg)0 0;} section.about .button { display:block; margin:50px auto; width: 190px; text-align:center;} section.about .team { margin-bottom:50px;} section.about .team .image { widows: 100%; height:280px; margin:30px 0 15px 0; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);} section.about .team .col30 { } section.about .team .col30:nth-child(3n+2) { margin:0 5%;} section.about .team .image.sebastien { background:url(../img/about_team_sebastien.jpg)0 0; background-size:250px 250px;} section.about .team .image.alex { background:url(../img/about_team_alex.jpg)0 0; background-size:250px 250px;} section.about .team .image.melissa { background:url(../img/melissa.jpg)0 0; background-size:250px 250px;} section.about .team .image.zayaan { background:url(../img/about_courses.jpg)0 0; background-size:250px 250px;} section.about .team h2 { font-family: courier-std,monospace; font-weight: 400; font-size: 24px; line-height: 24px; text-align:center; color:#ff3a90;} section.about .team h2 span { font-family: courier-std,monospace; font-weight: 400; font-size:14px; line-height:16px; margin-top:5px; color:#686868; display:block;} section.about .partners { text-align:center; font-size:0;} section.about .partners .partner { width:200px; height:150px; display:inline-block; margin:0;} section.about .partners .partner:hover { opacity:0.7;} section.about .partners .partner img { width:100%; height:auto;} .team-contact { width: 100%; text-align: center; background:#f0f0f0 !important; padding: 25px 0; } .team-contact a { font-size: 20px; line-height: 20px; color:#ff3a90;} /* BOOK TOUR */ section.book-tour { margin-top: 120px; padding: 50px 0; background:#FFF; text-align:center;} /*section.book-tour h2 { font-family:dosis-med; font-size:28px; line-height:32px; font-weight:normal; color:#ff3a90; text-transform:uppercase; margin-bottom: 25px;}*/ section.book-tour a { font-family:dosis-med; font-size:22px; line-height:30px; margin:20px 0; display:block; font-weight:normal; color:#ff3a90;} section.book-tour img { display:block; width:100%; height:auto; margin:0 auto; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);} section.book-tour form { width:75%; margin:10px auto; color:#141414;} section.book-tour form .row { margin:10px 0;} section.book-tour form .quote { margin:10px 0; font-size:16px;} section.book-tour form label { font-family:dosis-med; font-size:10px; color:#000; font-style:italic; display:block;} section.book-tour form input, section.book-tour form select { font-family:dosis-med; color:#313131;font-size:16px; line-height:20px; width:100%; float:right;} section.book-tour form textarea { font-family:dosis-med; color:#313131; font-size:12px; line-height:20px; width:100%; height:150px; max-height:200px; float:right; padding:11px 20px;} section.book-tour form input[type=email], section.book-tour form input[type=text], section.book-tour form input[type=number]{ padding:11px 20px;} section.book-tour form input[type=submit]{ border:none; width:100px; display:block; float:right; border-radius:0 !important;} section.book-tour select, section.book-tour #tourDate { display:inline-block; padding:10px;} section.book-tour a.different-image { display:block; font-size:12px; line-height:12px; margin:5px 0 !important;} section.book-tour p { color:#141414 !important;} section.book-tour .section-title h1 { margin-bottom: 10px;} section.book-tour .section-title p { text-align: center; margin: 10px 0 30px 0;} section.book-tour p.big { font-size:16px; line-height:18px; margin:10px 0; text-transform:none; color:#141414;} section.book-tour p.error { font-size:16px; line-height:18px; margin:10px 0; text-transform:uppercase !important; font-weight:bold; color:#ff3a90 !important;} section.book-tour .error-msg p { font-family: dosis-semibold; font-size:14px; line-height:14px; margin:10px auto; text-transform:uppercase !important; background:#ff3a90 !important; color:#FFF !important; text-align: center; padding: 5px; width: 80%;} section.book-tour p.quote { font-family: dosis-semibold; color:#ff3a90 !important;} section.book-tour p.thanks { font-size:16px; line-height:18px; margin:10px 0; text-transform:uppercase !important; font-weight:bold; color:#141414 !important;} section.book-tour .total { font-size:18px; line-height:20px; color:#FFF; background: #141414; padding: 10px 15px;} section.book-tour .pic { margin-top:10px;} section.book-tour .col60 { padding-left:15px} section.book-tour ul { margin:0;} section.book-tour ul li { font-size:16px; line-height:18px; margin:5px 0; display:block; color:#141414; text-align:left;} section.book-tour strong { color:#000; font-weight:700;} .tour-desc {} .tour-desc h2 { font-size:32px; line-height: 40px;} .tour-desc h3 { font-size:22px; line-height: 22px; margin: 15px 0; text-align: center;} .tour-desc p { font-size:18px; line-height: 20px; margin: 15px 0; text-align: center;} .tour-desc p span { font-family: dosis-med; color: #ff3a90;}yt /* OWL CONTROLS */ .owl-controls .owl-dots { position:absolute; width:100%; bottom:10px; z-index:888; text-align:center;} .owl-dots .owl-dot { display: inline-block; zoom: 1;} .owl-dots .owl-dot span {display: block; width: 12px; height: 12px; margin: 5px 7px; filter: Alpha(Opacity=60); opacity: 0.6; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #DEDEDE; cursor:pointer; -webkit-box-shadow: inset 0 0 1px 0 rgba(0,0,0,.9); -moz-box-shadow: inset 0 0 1px 0 rgba(0,0,0,.9); box-shadow: inset 0 0 1px 0 rgba(0,0,0,.9);} .owl-dots .owl-dot.active span { opacity: 1; background:#ff3a90;} .owl-dots .owl-dot:hover span { opacity: 0.7; background:#ff3a90;} .owl-controls .owl-nav { } .owl-controls .owl-nav .owl-prev { position:absolute; width:24px; height:51px; overflow:hidden; background:url(../img/arrows.png)0 0 transparent no-repeat; background-position:0 0; text-indent:-2000px; opacity:1;} .owl-controls .owl-nav .owl-next { position:absolute; width:24px; height:51px; overflow:hidden; background:url(../img/arrows.png)0 0 transparent no-repeat; background-position:-26px 0; right:5%; top:45%; text-indent:-2000px; opacity:1;} .owl-controls .owl-nav .owl-prev:hover, .owl-controls .owl-nav .owl-next:hover { opacity:0.7; cursor:pointer;} /* VR */ /* VR-LOGIN */ .vr-login{ position:relative; margin:100px auto 20px auto; width:308px;} .vr-login-logo{ position:relative; width:87px; height:100px; background:url("../img/bazart_logo_black_header.png")0 0 transparent; margin: 0 auto 40px auto; background-size:87px 100px;} .vr-login input { display: block; font-size: 14px; width: 250px; padding: 10px; margin: 5px 0; color: #666; border: none; border-radius: 5px; box-shadow: 0 0 3px rgba(30, 30, 30, 0.5);} .vr-login .error{ width:100%; margin:15px auto; text-align:center;} .login .error .message { position:relative; top:0; left:0; background:#FF3A90; padding:5px; display:inline-block; color:#FFF; font-size:12px; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px rgba(30, 30, 30, 0.5); } input.username{ background:url(../img/username_ico.png)8px 8px no-repeat #FFF; text-indent:25px; width:100%;} input.password{ background:url(../img/password_ico.png)10px 8px no-repeat #FFF; text-indent:25px; width:100%;} input.login_btn{ background:#FF3A90; color:#FFF; width:50%; cursor:pointer; transition:all 0.3s ease; margin:10px auto;} input.login_btn:hover { opacity:0.8;} .vr-login-footer{ position:relative; margin:20px auto 0 auto; width:308px; text-align:center; color:#999; font-size:12px;} /* VR PAGE */ .view-video { display: block; margin: 20px auto; background: url(../img/icon_cam_white.png)15px 7px no-repeat #313638 !important; background-size: 40px 30px !important; padding: 15px 20px 15px 70px; font-size: 20px; width: 280px !important;} @media only screen and (min-width: 1301px) { .container { position:relative; width:1200px; height:100%; margin:0 auto;} #artists-slider .owl-prev { left:-20px; top:50px;} #artists-slider .owl-next { right:-20px; top:50px;} } @media only screen and (min-width: 1200px) and (max-width: 1300px) { .container { position:relative; width:1200px; height:100%; margin:0 auto;} #artists-slider .owl-prev { left:300px; top:-130px;} #artists-slider .owl-next { right:300px; top:-130px;} } @media only screen and (min-width: 1024px) and (max-width: 1199px){ .container { position:relative; width:1000px; height:100%; margin:0 auto;} header .logo {} #artists-slider .owl-prev { left:200px; top:-130px;} #artists-slider .owl-next { right:200px; top:-130px;} } @media only screen and (min-width: 769px) and (max-width: 1023px){ .container { position:relative; width:95%; height:100%; margin:0 auto;} section.intro .col50 { width:48%;} section.intro .col50 .side-quote { width:320px; height:550px; margin:35px auto 0 auto;} section.home-gallery .col40 { width:50%; float:none !important; margin:0 auto 50px auto;} section.home-gallery .col50 { width:70%; float:none !important; margin:0 auto;} .home-blog .pieces-list { padding-left:40px;} .home-blog .grid-sizer, .home-blog .piece { width: calc(33% - 40px); margin-bottom: 40px; padding: 2px; background: #FFF; box-shadow: 2px 2px 4px rgba(0,0,0,0.20);} footer .col25{ width:50% !important; float:none !important; text-align:center; margin:40px auto !important;} footer .social a, footer .social a:first-child { margin:20px;} #artists-slider .owl-prev { left:50px; top:-130px;} #artists-slider .owl-next { right:50px; top:-130px;} .piece .piece-desc h2 { font-size: 18px; line-height: 20px;} .piece .price { font-size: 14px; line-height: 14px;} section.the-piece .col60 { width:90%; float:none; margin:0 auto; padding:0;} section.the-piece .col40 { width:100%; float:none; margin:0 auto; padding:0;} .artists-list a .image { width:200px; height:200px;} } @media only screen and (max-width: 900px){ /* MOBILE NAV */ header { padding:0;} header .social { display: none;} header .header-logo { margin:15px 0 0 15px; } .mobile-menu { display: block;} header nav.active { top:-120px;} header nav { width: 100% !important; background:rgba(30,30,30,0.95); padding:20px; top:-1000px; left:0; border-bottom: 3px solid #313638; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; text-decoration:none; float:none;} header nav ul { float:none;} header nav ul li { margin:20px; width:300px; display:block;} header nav ul .li-involved { width:250px;} header.white nav ul li a { color:#FFF;} header nav ul li ul.child { position:relative; width: 100%; min-width: 100%; top:auto; left:auto; background:none; padding:15px; z-index:999; opacity:1; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; visibility:visible; border-top:none;} header nav ul li ul.child li { display:block; padding:0; margin:10px 0; border-bottom: none;} header nav ul li ul.child li a { color:#FFF; font-size:16px; line-height:18px;} header nav ul li ul.child li:hover { border-bottom: none;} header nav ul li ul.child li:hover a { color:#ff3a90;} header nav ul li:hover ul.child { opacity:1; top:auto; visibility:visible; z-index: 999;} .pieces-list { padding-left: 20px;} .grid-sizer, .piece { width: calc(50% - 40px); margin-bottom: 40px; padding: 10px;} /* MEDIA */ .article-item { margin:0 0 50px 0; width:50% !important;} .article-item .article-pic { width:50%; margin:0 auto;} .article-item .article-desc { width:75%; height: 60px;} .article-item .article-pic img { } /* ABOUT */ section.about { padding:30px 15px;} section.about .container { width:100%;} section.about .team .image { margin:30px 0 15px 0; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);} section.about .team .col33 { width:250px !important; float:none !important; margin:20px auto;} section.about .team .col33:nth-child(2) { float:none !important; margin:20px auto;} .about-links a { width: 200px; margin: 10px 20px;} .activities .col50, .team .col50 { width:100%; float:none;} section.book-tour form { width:80%;} section.book-tour .pic, section.book-tour .col60 .col60 { width:100%; float:none; padding-left:0;} section.book-tour form p.quote { text-align:left;} } @media only screen and (max-width: 768px){ .container { position:relative; width:100%; height:100%; margin:0 auto;} .button.black.get-involved:hover { border-bottom:none;} .intro-container {width:100%;} .intro-container h1 { font-size: 20px; line-height: 20px;} .intro-container h1 span { background: url(../img/icon_dot.png)0 4px no-repeat transparent; background-size: 10px 10px; margin: 0 10px; padding: 7px 0;} .section-title { padding: 0 10px;} section.intro { padding:30px 0;} section.intro .button { margin: 20px auto 0 auto; display: block; width: 140px; text-align: center; } section.intro .col50 { width:100%; float:none; padding:15px;} section.intro .col50 .side-quote { width:90%; height:550px; margin:30px auto 0 auto; float:none;} .side-quote p { font-size:16px; line-height:22px;} section.home-gallery { padding:50px 0;} section.home-gallery .col40 { width:80%; float:none !important; margin:0 auto 50px auto;} section.home-gallery .col50 { width:100%; float:none !important; margin:0 auto;} .home-blog .pieces-list { padding-left:40px;} .home-blog .grid-sizer, .home-blog .piece { width: calc(50% - 40px); margin-bottom: 40px;} section.ipaf h2, section.ipaf h3 { padding:0 20px;} footer .col25{ width:90% !important; float:none !important; text-align:center; margin:40px auto !important;} footer .social a, footer .social a:first-child { margin:20px !important;} .header-links a { margin: 0 5px 10px 5px;} .piece .piece-desc h2 { font-size: 18px; line-height: 20px;} .piece .price { font-size: 14px; line-height: 14px;} section.the-piece .col60 { width:100%; float:none; margin:0 auto; padding:0 5%;} section.the-piece .col40 { width:100%; float:none; margin:0 auto; padding:0 5%;} section.the-piece .related-pieces .section-title { width:100%; float:none; margin:0 auto; padding:0 5%;} .pieces-list { padding-left: 20px;} .grid-sizer, .piece { width: calc(50% - 40px); margin-bottom: 40px; padding: 10px;} .section-title h2.the-artists { padding:0 15px;} #artists-slider .owl-prev { left:10px; top:-130px;} #artists-slider .owl-next { right:10px; top:-130px;} section.the-artist .desc { width:100%; padding:0 15px;} .artist-pieces a.piece { width:46%; float:left; margin:15px 2%;} .artist-pieces a.piece:nth-child(3n+2) { width:46%; float:left; margin:15px 2%;} .artists-list a.col30 { width:50% !important;} .artists-list a:nth-child(3n+2) { margin:20px 0;} .artists-list a .image { width:300px; height:300px;} section.book-tour { padding:100px 20px 50px 20px;} section.book-tour .col60, section.book-tour .col40 { float:none; width:100%; text-align:center;} section.book-tour .col60 { padding-left:0;} section.book-tour h2 { font-size:22px;} section.book-tour form { width:100% !important;} section.book-tour form .row .col40, section.book-tour form .row .col60 { width:300px; margin:0 auto; float:none;} section.book-tour form input, section.book-tour form select { width:100%;} section.book-tour form p.quote { text-align:left;} section.book-tour form input[type="submit"], section.book-tour .total { margin:20px auto 0 auto; float:none;} section.book-tour .total { float:none; width:300px; margin:10px auto;} section.book-tour .legend.left { float:none !important; text-align:center !important;} section.project .col48 { width: 100%; float: none;} } @media only screen and (max-width: 639px){ .intro-container {width:100%; padding:0 15px; top:200px; left:0px; opacity: 1;} .artists-list a .image { width:200px; height:200px;} section.about .team .col30 { width: 280px; margin: 0 auto; float: none;} section.about .team .col30:nth-child(2) { margin: 0 auto;} } @media only screen and (max-width: 520px){ header .logo {margin-left: 10px;} header h1 { font-size: 14px; margin-top: 20px;} header h1 span { font-size: 12px;} .intro-container h1.home strong { font-size: 14px; line-height: 14px;} .intro-container h1.home span { padding: 5px 5px; } .home-blog .pieces-list { padding-left:20px !important;} .home-blog .grid-sizer, .home-blog .piece { width: calc(100% - 40px); margin-bottom: 40px;} section.intro { padding:30px 0;} section.intro .button { margin: 20px auto 0 auto; display: block; width: 140px; text-align: center; } section.intro .col48 { width:100%; float:none; padding:15px;} section.intro .intro-pic-right { margin: 0} section.intro .button { width: 200px;} section.home-gallery .col48 { width:100%; float:none; padding:15px;} section.about .col48 { width:100%; float:none; padding:15px;} .activities .act-desc.left * { text-align: left;} section.about .pillar { margin: 25px 0;} section.about .pillar-image { margin: 0; height: 200px;} section.about .col50 { width:100%; float:none; padding:15px;} #years-actions .button { margin: 10px;} .pieces-list { padding: 0 !important;} .grid-sizer { display:none;} .piece { display:block; width: 300px; float:none; margin: 20px auto; padding: 10px;} #artists-slider .owl-prev { left:10px; top:-150px;} #artists-slider .owl-next { right:10px; top:-150px;} .section-title h2.the-artists { padding: 0px; width: 300px; margin: 10px auto 30px auto;} .ipaf-logo { width:300px; height:101px; margin:0 auto 30px; background:url(../img/ipaf_logo.png)0 0 no-repeat transparent; background-size:300px 101px;} .artists-list a.col30 { width:100% !important;} .artists-list a:nth-child(3n+2) { margin:20px 0;} .artists-list a .image { width:300px; height:300px;} section.about .pillar .col48 { width:100%; float:none;} section.about .pillar-image { margin:20px 0;} .inst-item { width: 48%; height: 180px;} .insta-desc { display:none;} .murals .mural-item { width:80%; margin:10px 10%;} .section-title .ipaf-book-tour { position: relative; top: auto; right: auto; text-align: center; margin: 20px auto 0 auto;} /* MEDIA */ .article-item { margin:0 0 50px 0; width:100% !important;} .article-item .article-pic { width:50%; margin:0 auto;} .article-item .article-desc { width:75%; height: 60px;} .article-item .article-pic img { } } /* ========================================================================== Helper classes ========================================================================== */ .ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%;} .hidden { display: none !important; visibility: hidden;} .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden;} .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both;} .clearfix { *zoom: 1;} @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }