@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/AvenirLTPro-Heavy.woff2') format('woff2'),
        url('../fonts/AvenirLTPro-Heavy.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/AvenirLTPro-Black.woff2') format('woff2'),
        url('../fonts/AvenirLTPro-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/AvenirLTPro-Book.woff2') format('woff2'),
        url('../fonts/AvenirLTPro-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/AvenirLTPro-Roman.woff2') format('woff2'),
        url('../fonts/AvenirLTPro-Roman.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/AvenirLTPro-Light.woff2') format('woff2'),
        url('../fonts/AvenirLTPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/AvenirLTPro-Medium.woff2') format('woff2'),
        url('../fonts/AvenirLTPro-Medium.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}



html, body{height:100%;}
html{scroll-behavior: smooth;}
*{padding:0px; margin:0px; box-sizing: border-box; outline:none; list-style:none;}
ul, li{margin:0px; padding:0px;}
img{border:0px; max-width:100%;}
a{transition:all 0.3s ease-out 0s;text-decoration:none; color:#30BCED;} a:hover{text-decoration:none; color:#83dfff; text-decoration:underline;}
a:hover img{opacity:.9;transition:all 0.3s ease-out 0s;}
.clr{clear:both;}
.f-right{float:right!important;} .f-left{float:left!important;}
h1, h2{margin:0; font-family:'Avenir',sans-serif; font-weight:400;}
p{font-family:"Open Sans"; text-transform:lowercase;}
.marT1{margin-top:5px;} .marT2{margin-top:10px;} .marT3{margin-top:15px;} .marT4{margin-top:20px;} .marT5{margin-top:25px;} .marT6{margin-top:30px;} .marT7{margin-top:40px;}
.padT1{padding-top:5px;} .padT2{padding-top:10px;} .padT3{padding-top:15px;} .padT4{padding-top:20px;} .padT5{padding-top:25px;} .padT6{padding-top:30px;} .padT7{padding-top:40px;}
.padB1{padding-bottom:5px;} .padB2{padding-bottom:10px;} .padB3{padding-bottom:15px;} .padB4{padding-bottom:20px;} .padB5{padding-bottom:25px;} .padB6{padding-bottom:30px;} .padB7{padding-bottom:40px;}
.width30, .width40, .width50, .width60, .width65, .width70, .width80, .width85, .width90{margin-left:auto; margin-right:auto;}
.width30{width:30%;} .width40{width:40%;} .width50{width:50%;} .width60{width:60%;} .width65{width:65%;} .width70{width:70%;} .width80{width:80%;} .width85{width:85%;} .width90{width:90%;}
.blue{color:#38bee4!important;} .darkblue{color:#172a55!important;} .green{color:#33766f!important;} .white{color:#fff!important;} .orange{color:#ff4900!important;} .gray{color:#424242!important;} .yellow{color:#ffcc00!important;}
body{background:#121619; font:400 14px/22px "Avenir",Arial,sans-serif; color:#fff;}
header{display: flex; width:100%; flex-wrap:wrap; background:url(../images/hero.jpg) no-repeat right top; background-size:cover; text-align:center; min-height:1050px;text-align:left; padding:115px 0 0 0;}
.container{max-width:1170px;}
header h1{font-size:48px; font-weight:500; letter-spacing:4px;}
header h1::after{content:""; display:block; width:80px; height:7px; background:#fff; margin:50px 0;}
header nav{padding-bottom:30px;}
header nav li{font-size:18px; font-weight:400; padding-bottom:35px; letter-spacing:3px;}
header nav li a{color:#fff;} header nav li a:hover{color:#30BCED;}
header h3{font-size:16px; font-weight:400; letter-spacing:6px; text-transform:uppercase; width:100%;padding-bottom:120px;}
.common h2{font-size:24px; font-weight:600; letter-spacing:2px; text-transform:uppercase;}
.common h2::after{content:""; display:block; width:50px; height:4px; background:#fff; margin:30px 0 15px;}
.transparentSec{background:rgba(0,0,0,.7); padding:50px 0 20px; width:100%; position:relative;}
.transparentSec::after{content:""; height:80px; background:#070809; display:block; width:100%; position:absolute; bottom:0; z-index:0;}
.darkBox{background:#121619; border-radius:5px; border:1px solid #979797; padding:35px 35px; position:relative; z-index:1; width:100%;}
.ui-col{flex:0 0 26%; max-width:26%; padding:55px 0 0 15px;}
.ux-col{flex:0 0 74%; max-width:74%; text-align:right; padding-left:10px;}
.common p{font-size:12px; font-weight:400; color:#fff; line-height:20px; letter-spacing:1px;} 
.ux-col img{margin-top:-105px;}
.photography{padding:40px 0; text-align:right;}
.photography .darkBox{padding:40px 85px 0;}
.flex-end{justify-content: flex-end;}
.col-01{order:2; padding-left:40px;} 
.col-02{flex:0 0 26%; max-width:26%;}
.photography h2::after{margin:20px 0 10px auto;}
.photos span{position:absolute; display:block; text-align:left; font-size:21px; font-weight:500; color:#fff; bottom:140px; right:-90px; text-transform:uppercase; letter-spacing:2px; transform: rotate(-90deg); width:100%;}
.photos img{width:100%;}
.photos{padding-left:5px; padding-right:5px;}
.photos a{display:block;  margin-bottom:-5px; position:relative; transition:all 0.3s ease-out 0s;}
.photos a:hover{top:-5px; transition:all 0.3s ease-out 0s;}
.photography h3{padding:80px 0 0px; max-width:480px; margin:0 auto; text-align:center; font-size:14px; line-height:28px; font-weight:500; letter-spacing:5px; text-transform:uppercase; }
.photography h3 span{display:block; font-size:11px;}
.film h2::after{margin:20px 0 10px 0;}
.film .col-01{order:0; padding-right:40px; padding-left:0;} 
.film .darkBox{padding:80px 155px 0;}
.film .col-02{flex:0 0 40%; max-width:40%;}
.film .video{padding-top:30px; margin-bottom:-10px;}
.writing{padding:70px 0;}
.writing h2::after{margin:30px auto 10px;}
.writing .darkBox{padding:60px 155px;}
.writing h4{font:300 31px/76px "Open Sans"; color:#fff; padding:50px 0 20px; text-align:left; letter-spacing:3px;}
.writing h6, .art h6{font:300 12px/16px "Open Sans"; color:#fff; padding:0; letter-spacing:2px;}
.art .darkBox{padding:0px 0px 0 0; max-height:450px;}
.art img{margin-top:-32px; margin-left:-1px;}
.art-det{padding-top:50px;}
.art h2::after{margin:50px 0 60px;}
.art p{font-size:12px; line-height:30px; color:#999; padding-bottom:20px;}
footer{padding:150px 0 20px 0;}
footer h1{font-size:72px; text-transform:uppercase; color:#fff; letter-spacing:8px; font-weight:400;}
footer h1::after{content:""; display:block; width:50px; height:5px; background:#fff; margin:50px auto 50px;}
.social{padding:50px 0 70px;}
.social a{font-size:52px; color:#D8D8D8; display:inline-block; padding:0 60px;} .social a:hover{color:#fff;}
footer h5{font:300 12px "Open Sans"; color:#fff; letter-spacing:2px;}
footer h5 a{color:#D8D8D8;} footer h5 a:hover{color:#fff;} 
.showM{display:none;}

.inner-header{background:#121619; padding:70px 0; min-height:inherit;}
.inner-header h1::after{display:none;}
.inner-header h2{font-size:24px; font-weight:500; color:#fff; text-transform:uppercase; letter-spacing:2px; padding:30px 0 0;}
.inner-header h4{font-size:18px; font-weight:300; color:#fff; text-transform:uppercase; letter-spacing:2px; padding:0 0 0; float:right; color:#30BCED; margin-top:-100px;}
.gallery{background:#121619;}
.gallery .row{margin:0;}
.gallery .col-lg-12{padding:0;}
.owl-carousel, .owl-stage-outer{max-width:900px; margin:0 auto;}
.owl-carousel .owl-item{text-align:center;}
.owl-carousel .owl-item img{max-height:550px; width:auto; display:inline-block; min-height:70px;}
#thumbs{margin-top:100px;}
#thumbs .owl-stage-outer{overflow:visible;}
#thumbs .owl-stage-outer .owl-stage{margin: 0 auto; border:1px solid #979797; border-radius:5px; padding:10px 10px 0; width:inherit!important; min-width:500px; max-width:900px!important; display:inline-block; transform: translate3d(0px, 0px, 0px)!important; }
#thumbs .owl-stage .owl-item{float:none; display:inline-block; margin-top:-40px; margin-bottom:45px;max-height:70px; overflow:hidden;background:#000; margin-left:5px; margin-right:5px; position:relative;}
#thumbs .owl-stage .owl-item .item{cursor:pointer;}
#thumbs .owl-stage .item:hover img, #thumbs .owl-stage .owl-item.current .item img{opacity:.7;}
.script{background:#121619; border-radius:5px; border:1px solid #979797; padding:45px 35px;}
.script h2{font-size:24px; font-weight:600; text-transform:uppercase; color:#fff; letter-spacing:3px; padding-bottom:20px;}
.script h6{font-size:16px; font-weight:600; font-style:italic; color:#ddd; letter-spacing:1px; padding-bottom:40px; text-align:right;}
.script p{font-size:15px; line-height:24px; color:#fff; letter-spacing:3px; padding-bottom:15px; text-align:left;text-transform:inherit;}
.script p strong{display:block; text-transform:uppercase;}
.script p em{font-size:13px; line-height:20px; font-style:italic; color:#eee;}
.script h5{font-size:12px; letter-spacing:2px; color:#fff; font-weight:500; text-align:center; padding-top:30px;}
.script a{color:#30BCED; font-size:12px; letter-spacing:2px;}
.scripts#thumbs .owl-stage .owl-item .item span{position: absolute; z-index: 999; top:0px; left: 0; display: block; text-align: center; width: 100%; font-weight: 700; font-family:sans-serif ; background:rgba(0,0,0,.3); padding:2px; font-size:12px; height:100%; padding-top:30%; text-transform:uppercase;}

.ux .owl-carousel, .owl-stage-outer{max-width:100%; margin:0 auto;}
.ux-design{text-align:left;}
.listing{float:left; width:15%; padding-top:10%;}
.ux-img{float:left; width:68%; text-align:center; padding:0 20px 0 20px;}
.ux-detail{float:left; width:17%;}
.listing li{padding:0 0 30px; font-size:18px; letter-spacing:2px; font-weight:500;}
.listing li a{color:#fff;}
.listing li.active a, .listing li a:hover{color:#30BCED;}
.ux-detail h3{font-size:24px; font-weight:500; text-transform:uppercase; letter-spacing:4px;}
.ux-detail h3::after{content:""; display:block; width:50px; height:4px; background:#fff; margin:10px 0 25px;}
.ux-detail p{font-size:13px; font-weight:400; line-height:24px; font-family:"Open Sans"; }
.category{display:inline-block; position:relative;}
.category::after{content:"\f107"; font-family:"FontAwesome"; position:absolute; right:2px; top:1px; color:#30BCED; font-size:15px; pointer-events:none;}
.category select{background:none; border:0; color: #30BCED; font-size: 18px; font-weight:400; letter-spacing: 2px; text-transform:uppercase; font-family: 'Open Sans'!important; -webkit-appearance: none; -moz-appearance: none; appearance:none; padding:0px 15px 0px 5px; text-align:right; direction: rtl;}
.category select option{font-family: 'Open Sans'; font-weight:400; background:#111; font-size:16px; direction:ltr; text-align:right;}

.photo #thumbs .owl-stage .owl-item{min-width:70px;}
.owl-height{min-height:300px;}
@media only screen and (max-width: 1024px) {
header{background-position:90% 0%; background-size:120%;}
.row{margin-left:15px; margin-right:15px;}
.ui-col, .ux-col{flex:0 0 100%; max-width:100%; text-align:center; padding-top:30px;}
.ux-col img{margin-top:0;}
.common h2:after{margin:25px auto;}
header nav{display:none;}
.transparentSec{background:none;}
header h3{background: rgba(0,0,0,.7); padding:35px 0; margin-bottom:50px;}
header .row{margin-left:-15px; margin-right:-15px;}
header .darkBox{margin:0 30px;}
header h1{max-width:250px; padding-left:20px;}
.transparentSec::after{display:none;}
.photography .darkBox{padding:40px 0 0; text-align:center;}
.col-01, .col-02, .film .col-02, .film .col-01{flex:0 0 100%; max-width:100%; padding-left:0; padding-right:0;}
.col-01{order:0;}
.film, .writing, .art{text-align:center;}
.film .darkBox{padding:40px 5px 0;}
.writing .darkBox, .art .darkBox{padding:40px 10%; max-height:inherit;}
.writing h4{font-size:25px; line-height:40px; padding:10px 0 20px;}
.art .col-lg-5{flex:0 0 100%; max-width:100%;}
.showM{display:block;} .showD{display:none;}
.art img{margin:20px 0;}
footer{padding-top:80px;}
footer h1{font-size:52px;}
.social a{padding:0 30px;}
.social{padding-top:10px;}
.inner-header {text-align:center;}
.inner-header h2{padding-left:0}
.inner-header h1{max-width:inherit; padding-left:0;}
#thumbs .owl-stage-outer .owl-stage{padding-bottom:0;}
#thumbs .owl-stage .owl-item{margin-bottom:35px;}
/*.owl-carousel .owl-stage-outer{max-height:350px!important; overflow:hidden;}*/
.inner-header h4{float:none; margin-top:20px;}
.listing, .ux-img, .ux-detail{float:none; width:100%; padding:0 0; text-align:center;}
.ux-img{padding:40px 0;}
.ux-detail h3::after{margin:10px auto 25px;}
.listing li{display:none;}
.listing li.active{display:block;}
.category select{text-align:center;}
}
@media only screen and (max-width: 800px) {
header{padding-top:50px;}
.transparentSec{padding:20px 0;}
.photos span{display:none;}
.photorow{margin-left:-30px; margin-right:-30px;}
#thumbs .owl-stage .owl-item{max-height:60px; margin-top:-30px; min-width:60px;}
}
@media only screen and (max-width: 767px) {
.photos{max-width:25%; flex:0 0 25%;}
.video iframe{height:350px;}
}

@media only screen and (max-width: 600px) {
.social a{padding:0 10px; font-size:32px;}
.photos{padding-left:2px; padding-right:2px;}
#thumbs .owl-stage-outer .owl-stage{min-width:100%;}
#thumbs{margin-top:50px;}
.inner-header h2{font-size:20px;}
.inner-header{padding:50px 0;}
.photo #thumbs .owl-stage .owl-item{min-width:50px; max-height:50px;}
.owl-height{min-height:150px;}
}
@media only screen and (max-width: 500px) {
body.home{background:#000;}
header{padding-top:80px;}
header h1{font-size:32px; padding-left:10px;}
header h1::after{display:none;}
header{min-height:inherit;}
header h3{font-size:15px; letter-spacing:4px;}
footer h1{font-size:36px;}
.video iframe{height:230px;}
.writing h4{font-size:20px; line-height:30px;}
.art .darkBox{padding:40px 0px;}
.art h6{display:block;}
}
@media only screen and (max-width: 400px) {
.video iframe{height:180px;}
}