* { box-sizing:border-box !important }

html, body { height:100%; }
body { background:#21272b; color:#f5f5f5; font-family:Open Sans; font-size:1em; line-height:1.2em; font-weight:300; overflow-x:hidden; font-display:auto; -webkit-font-smoothing:subpixel-antialiased; -moz-osx-font-smoothing:grayscale; }

hr { border:none }
h1 { font-size:2.5em; margin:20px 0; font-weight:300; line-height:1em; }
h2 { font-size:1.8em; line-height:1.2em; margin:20px 0; font-weight:300 }
.subrub h2 { font-size:1.2em; margin:20px 0; font-weight:300; clear:both; }

a { cursor:pointer; color:#2993ad; text-decoration:none }
a.button, label.button { height:36px; line-height:36px; background:#2993ad; text-decoration:none; color:#fff; padding:0 10px; border-radius:3px; outline:none; transition:background ease 0.25s; display:flex; align-items:center; font-weight:400; cursor:pointer }
a.button i, label.button i { margin-right:10px }
a.button:hover, a.button:focus, label.button:hover, label.button:focus { background:#3d4a53; }
a.button i.fa-spin { display:none }
a.button .done { display:none }
a.button.loading { background:#3d4a53 }
a.button.loading .go { display:none }
a.button.loading .done { display:none }
a.button.loading i.fa-check { display:none }
a.button.loading i.fa-spin { display:inline }
a.button.inlineblock { display:inline-block }

a.button.success { background:#0cb394 }
a.button.success .go { display:none }
a.button.success .done { display:inline }
a.button.success i.fa-check { display:inline }
a.button.success i.fa-spin { display:none }

.upstock-logo { font-size:1.5rem; color:#fff; font-weight:700; letter-spacing:-0.08rem; font-family:Ubuntu }
.upstock-logo span { display:inline-block; width:45px; height:45px; line-height:45px; text-align:center; background:#fff; border-radius:45px; color:#3d4a53; font-weight:700; letter-spacing:-0.18rem; margin-right:2px }

.wrapper { width:100%; padding:0 100px }

.title p { max-width:800px; margin:0 0 20px; padding-right:20px; color:#999; clear:both; text-align:justify; float:left }

#main-wrapper { position:relative; z-index:1; }

#main-header { height:100px; line-height:100px; background:#3d4a53 }
#main-header .logos { height:100px; margin:0; padding:0; display:flex; flex:1 0 auto }
#main-header .logos li { display:inline-block; line-height:80px; display:flex; flex:0 1 auto; flex-wrap:nowrap; align-items:center; margin-right:10px }

#main-content .wrapper { padding:20px 100px }
#main-content .nav-btns { display:block; margin:0 0 20px; padding:0; }
#main-content .nav-btns li { display:inline-block; margin-right:5px }
#main-content .nav-btns li i { font-size:0.8em; margin-right:5px }
#main-content .nav-btns li a { background:#3d4a53; display:block; padding:10px; color:#fff; text-decoration:none; transition:background ease 0.2s; font-weight:300 }
#main-content .nav-btns li a:hover { background:#2993ad; }

#dynamic, #menu { opacity:1; transition:opacity ease 0.2s }
#dynamic.hidden, #menu.hidden { opacity:0 }

#menu { width:500px; position:fixed; top:0; left:-500px; height:100vh; z-index:9; background:#21272b; border-right:1px solid #fff; transition:left ease 0.2s }
#menu.opened{ left:0; }
#menu .title { width:100%; height:80px; line-height:80px; padding:0 50px; border-bottom:1px solid rgba(255,255,255,0.25); margin:0; overflow:hidden }
#menu .title p { width:100%; margin:0; padding:0; line-height:80px; font-size:1.4em; font-weight:300; color:#fff }
#menu .title a { background:#3d4a53; color:#fff; width:30px; height:30px; line-height:30px; margin-top:25px; text-align:center; transition:background ease 0.2s; float:right; font-size:0.6em; text-decoration:none }
#menu .title a:hover { background:#2993ad }

#menu .menu-niv { position:relative }
#menu .menu-niv .parent { width:100%; height:50px; position:absolute; left:0; top:0; border-bottom:1px solid rgba(255,255,255,0.25); padding:0 50px; display:flex; align-items: center; }
#menu .menu-niv .parent a { font-weight:300; font-size:1em; color:#fff; text-decoration:none }
#menu .menu-niv .parent .rub-title { display:inline-block; margin-left:20px }
#menu .menu-niv .parent .gotoparent { background:#3d4a53; color:#fff; width:30px; height:30px; font-size:1em; line-height:30px; text-align:center; transition:background ease 0.2s; float:left }
#menu .menu-niv .parent .gotoparent:hover { background:#2993ad; }
#menu .menu-niv .parent-niv-2 { top:50px; }
#menu .menu-niv .parent-niv-3 { top:100px; }
#menu .menu-niv .parent-niv-4 { top:150px; }
#menu #menu-niv-2 ul { margin-top:50px }
#menu #menu-niv-3 ul { margin-top:100px }
#menu #menu-niv-4 ul { margin-top:150px }
#menu #menu-niv-5 ul { margin-top:200px }

#menu-nivs-wrapper { width:100%; overflow:hidden; }
#menu-nivs-wrapper { width:100%; overflow:hidden; }
#menu-nivs-wrapper #menu-nivs { width:calc(100% * 5); position:relative; left:0px; transition:left ease 0.2s; }
#menu-nivs-wrapper #menu-nivs > div { width:calc(100% / 5); float:left; padding:20px 50px; }
#menu-nivs-wrapper #menu-nivs > div > ul li { display:flex; flex:0 0 100%; justify-content:space-between; align-items:center; margin-bottom:10px }
#menu-nivs-wrapper #menu-nivs > div > ul li a { font-weight:300; font-size:1.2em; line-height:1.2em; color:rgba(255,255,255,0.8); transition:color ease 0.2s; text-decoration:none }
#menu-nivs-wrapper #menu-nivs > div > ul li a:hover { color:rgba(255,255,255,1) }
#menu-nivs-wrapper #menu-nivs > div > ul li a i { background:#3d4a53; color:#fff; width:30px; height:30px; line-height:30px; font-size:0.8em; text-align:center; transition:background ease 0.2s }
#menu-nivs-wrapper #menu-nivs > div > ul li a:hover i { background:#2993ad; }

#search { width:500px; position:fixed; top:0; left:-500px; height:100vh; z-index:9; background:#21272b; border-right:1px solid #fff; transition:left ease 0.2s }
#search.opened{ left:0; }
#search .title { width:100%; height:80px; line-height:80px; padding:0 50px; border-bottom:1px solid #fff; margin:0; overflow:hidden }
#search .title p { width:100%; margin:0; padding:0; line-height:80px; font-size:1.4em; font-weight:300; color:#fff }
#search .title a { background:#3d4a53; color:#fff; width:30px; height:30px; line-height:30px; margin-top:25px; text-align:center; transition:background ease 0.2s; float:right; font-size:0.6em }
#search .title a:hover { background:#2993ad }

#search #search-wrapper { padding:20px 50px; }
#search #search-wrapper h3 { margin-bottom:20px; font-size:0.85em; font-weight:300 }
#search #search-results { height:calc(100vh - 250px); overflow:auto; }
#search #search-results li { width:100%; float:left; margin-bottom:20px }
#search #search-results li a { width:100%; float:left; color:#fff; }
#search #search-results li a:hover { color:#2993ad; }
#search #search-results li .thumb { width:150px; height:calc(150px / 1.7777); float:left; margin-right:20px }
#search #search-results li .thumb img { width:150px; height:calc(150px / 1.7777); float:left }
#search #search-results li header { float:left }

form .field { margin-bottom:10px; width:100%; }
form .field label { margin-bottom:2px; display:inline-block }
form .field input, form .field select, form .field textarea { background:rgba(255,255,255,0.1); border:1px solid transparent; color:#fff; padding:5px; height:36px; width:100%; font-size:0.9em; font-family:Open Sans; }
form .field input:hover, form .field select:hover, form .field textarea:hover { border:1px solid rgba(255,255,255,0.3); }
form .field input:focus, form .field select:focus, form .field textarea:focus { border:1px solid rgba(255,255,255,0.5); outline:none }
form .field textarea { height:115px }
form .field textarea::placeholder { color:rgba(255,255,255,0.3) }
form .field input[type=submit] { background:rgba(255,255,255,0.1); color:#fff; text-align:center; transition:background ease 0.2s; cursor:pointer }
form .field input[type=submit]:hover { background:rgba(255,255,255,0.2); }
form .field select option { color:#3e5665; }

.channels-list { margin-top:50px }

.videos-wrapper { min-width: 100%; }
.videos-wrapper .title, .video-wrapper .title { width:100%; min-height:60px; float:left; position:relative; z-index:1; display:flex; align-items:center; }
.videos-wrapper .title p, .video-wrapper .title p { font-size:0.8em; margin-bottom:10px }
body.video .videos-wrapper .title, body.video .video-wrapper .title { margin:50px 0 0 }
.videos-wrapper .title h2, .video-wrapper .title h2 { float:left; }
.videos-wrapper .title h2 .little, .video-wrapper .title h2 .little { font-size:0.6em; color:rgba(255,255,255,0.5) }
.videos-wrapper .title > a, .video-wrapper .title > a { margin-top:5px; margin-left:10px; float:left; font-size:0.8em; color:#2993ad; transition:color ease 0.25s; font-weight:300; position:relative; z-index:1 }
.videos-wrapper .title a:hover, .video-wrapper .title a:hover { color:rgba(255,255,255,1); }
.videos-wrapper .title a.back, .video-wrapper .title a.back { margin-left:0; margin-right:10px }
.videos-wrapper .title i, .video-wrapper .title i { font-size:0.8em }
.videos-wrapper header .pages { position:absolute; display:none; top:20px; width:calc(100vw - 150px); text-align: right; }
.videos-wrapper header .pages li { display:inline; margin-left:2px; font-size:0.6em; opacity:0.5; line-height:1.5em }
.videos-wrapper header .pages li.active { opacity:1 }
.videos-wrapper:hover header .pages { display:block }
.video-wrapper, .photo-wrapper { width:100%; margin-bottom:50px; float:left }
.video-wrapper .video-player-wrapper { width:800px; float:left }
.video-wrapper .video-player-wrapper p.infos { color:rgba(255,255,255,0.5); font-weight:300; margin-bottom:10px }
.video-wrapper iframe { width:800px; height:450px; margin-bottom:30px; float:left }
.video-wrapper #video-infos-wrapper { width:calc(100% - 800px); max-width:600px; float:left; padding-left:20px }
.videos-wrapper .pages-wrapper { width: 100%; overflow:auto; }
.videos-wrapper .pages-wrapper .pages { width: 100%; height:auto; overflow:auto; position:relative; top:0; transition:top ease 0.2s }
.videos-wrapper .slide { width:75px; height:160px; background:rgba(0,0,0,0.75); position:absolute; margin-top:60px; font-size:3em; text-align:center; line-height:160px; display:none; z-index:9 }
.videos-wrapper .slide a { width:75px; height:160px; float:left; outline:none }
.videos-wrapper:hover .slide.active { display:block; }
.videos-wrapper:hover .slide.active a:hover { background:rgba(255,255,255,0.33); }
.videos-wrapper .slide-prev { left:0; }
.videos-wrapper .slide-next { right:0; }

.videos-list-wrapper { width:100%; overflow-x:initial; }

.photos-wrapper { min-width: 100%; }
.photos-wrapper .title, .photo-wrapper .title { width:100%; min-height:60px; float:left; position:relative; z-index:1; display:flex; align-items:center; }
.photos-wrapper .title p, .photo-wrapper .title p { font-size:0.8em; margin-bottom:10px }
body.photo .photos-wrapper .title, body.photo .photo-wrapper .title { margin:50px 0 0 }
.photos-wrapper .title h2, .photo-wrapper .title h2 { float:left; }
.photos-wrapper .title h2 .little, .photo-wrapper .title h2 .little { font-size:0.6em; color:rgba(255,255,255,0.5) }
.photos-wrapper .title > a, .photo-wrapper .title > a { margin-top:5px; margin-left:10px; float:left; font-size:0.8em; color:#2993ad; transition:color ease 0.25s; font-weight:300; position:relative; z-index:1 }
.photos-wrapper .title a:hover, .photo-wrapper .title a:hover { color:rgba(255,255,255,1); }
.photos-wrapper .title a.back, .photo-wrapper .title a.back { margin-left:0; margin-right:10px }
.photos-wrapper .title i, .photo-wrapper .title i { font-size:0.8em }
.photos-wrapper header .pages { position:absolute; display:none; top:20px; width:calc(100vw - 150px); text-align: right; }
.photos-wrapper header .pages li { display:inline; margin-left:2px; font-size:0.6em; opacity:0.5; line-height:1.5em }
.photos-wrapper header .pages li.active { opacity:1 }
.photos-wrapper:hover header .pages { display:block }
.photo-wrapper { width:100%; margin-bottom:50px; float:left }
.photo-wrapper .photo-display-wrapper { width:800px; float:left }
.photo-wrapper .photo-display-wrapper p.infos { color:rgba(255,255,255,0.5); font-weight:300; margin-bottom:20px }
.photo-wrapper .photo-display-wrapper p.tags a { background-color:#3d4a53; color:#fff; padding:5px 10px; border-radius:5px; }
.photo-wrapper .photo-display-wrapper p.tags a:hover, .photo-wrapper .photo-display-wrapper p.tags a:focus { background-color:#2993ad; }
.photo-wrapper .photo { width:800px; height:450px; margin-bottom:30px; float:left; background-size:contain; background-position:center; background-repeat:no-repeat; background-color:#000; }
.photo-wrapper .photo a { width:100%; height:100%; display:block; }
.photo-wrapper #photo-infos-wrapper { width:calc(100% - 800px); max-width:600px; float:left; padding-left:20px }
.photo-wrapper #photo-infos-wrapper a.cart { display:inline-block }
.photo-wrapper #photo-infos-wrapper a.cart .add { display:inline-block }
.photo-wrapper #photo-infos-wrapper a.cart .added { display:none }
.photo-wrapper #photo-infos-wrapper a.cart.added { background:#1b9e61 }
.photo-wrapper #photo-infos-wrapper a.cart.added .add { display:none }
.photo-wrapper #photo-infos-wrapper a.cart.added .added { display:inline-block }
.photos-wrapper .pages-wrapper { width: 100%; overflow:auto; }
.photos-wrapper .pages-wrapper .pages { width: 100%; height:auto; overflow:auto; position:relative; top:0; transition:top ease 0.2s }
.photos-wrapper .slide { width:75px; height:160px; background:rgba(0,0,0,0.75); position:absolute; margin-top:60px; font-size:3em; text-align:center; line-height:160px; display:none; z-index:9 }
.photos-wrapper .slide a { width:75px; height:160px; float:left; outline:none }
.photos-wrapper:hover .slide.active { display:block; }
.photos-wrapper:hover .slide.active a:hover { background:rgba(255,255,255,0.33); }
.photos-wrapper .slide-prev { left:0; }
.photos-wrapper .slide-next { right:0; }

.photos-list-wrapper { width:100%; overflow-x:initial; }

#cart-wrapper { display:flex; }
#cart-wrapper .cart { width:50%; padding-right:50px; display:flex; flex-direction:column; }
#cart-wrapper .cart .results { width:100%; float:left; }
#cart-wrapper .cart .results li { display:flex; border-bottom:1px solid #3d4a53; padding:10px 0 }
#cart-wrapper .cart .results li .item-wrapper { width:210px; height:140px; margin-right:10px }
#cart-wrapper .cart .results li .item-wrapper .item-bg { width:100%; height:100%; background-color:#000; background-size:contain; background-position:center; background-repeat:no-repeat }
#cart-wrapper .cart .results li h3 { margin-bottom:10px; }
#cart-wrapper .cart .results li a.cart { display:inline-block; }

#cart-wrapper .checkout { width:50%; padding-left:50px; }
#cart-wrapper .checkout form label { margin-bottom:10px }
#cart-wrapper .checkout form label .label-detail { font-size:0.8em; }
#cart-wrapper .checkout form input[type=checkbox] { float:left; margin-right:10px; }
#cart-wrapper .checkout form input[type=submit] { background-color:#2993ad; margin-top:10px; border-radius:5px }

.tabs ul { height:52px; border-bottom:1px dotted rgba(255,255,255,0.2); margin-bottom:10px; }
.tabs ul li { display:inline }
.tabs ul li a { width:50px; height:50px; overflow:hidden; line-height:50px; font-size:0.9em; display:inline-block; box-sizing:border-box; padding:0 10px; margin-right:1px; font-weight:300; cursor:pointer; background:#3d4a53; color:#fff; text-align:center; transition:width ease 0.2s; }
.tabs ul li a:hover, .tabs ul li a.active  { width:150px; background:#2993ad }
.tabs ul li a i { font-size:1em; width:30px; line-height:50px; float:left }
.tabs ul li a span { float:left; transition:all ease 0.25s }

.tab h2 { margin:20px 0; font-weight:700; font-size:1.2em; clear:both }
.tab h3 { margin:20px 0; font-weight:300; clear:both }
.tab ul { width:50%; box-sizing:border-box; float:left; }
.tab ul li { border-bottom:1px dotted rgba(255,255,255,0.2); padding:10px 0; }
.tab ul li a { display:block; color:#fff; }
.tab ul li a:hover, .tab ul li a:focus { display:block; color:#2993ad; }
.tab ul li a.fab { width:40px; height:40px; line-height:40px; display:inline-block; text-align:center; margin-right:5px; color:#fff; transition:all ease 0.2s; }
.tab ul li a.fab:hover { background:#3e5665 !important }
.tab ul li a.fab.fa-facebook { background:#3b5998 }
.tab ul li a.fab.fa-twitter { background:#55acee }
.tab ul li a.fab.fa-linkedin { background:#0077b5 }
.tab textarea { width:100%; }
.tab form .field label { font-size:0.9em }
.tab form .field input, .tab form .field select, .tab form .field textarea { max-width:500px }
.tab #files-list { width:100% }
.tab#infos-tab p { margin-bottom:10px }
.tab .cc-logo { display:flex; flex-direction:column; width:auto; max-width:170px; color:#222; border-radius:10px; align-items:center; justify-content:flex-start; overflow:hidden; margin-bottom:20px }
.tab .cc-logo i:not(:first-child) { font-size:26px; margin-left:10px; }
.tab .cc-logo .fa-creative-commons { font-size:40px }
.tab .cc-logo .cc-logo-icons { display:flex; flex:1 0 100%; width:100%; align-items:center; justify-content:center; padding:5px 0; background:#fff; }
.tab .cc-logo .cc-logo-texts { width:100%; height:30px; background:#3d4a53; color:#fff; display:flex; align-items:center; justify-content:center; }
#share-tab ul { margin-bottom:20px }
#share-tab ul li { border:none }
#share-tab ul li a { text-decoration:none; border-radius:40px; }
#share-tab textarea { height:150px; font-size:0.8em }
#downloads-tab p { margin:0 0 20px 0; }
#downloads-tab ul { margin-top:-10px; margin-bottom:30px; font-size:0.85em }
#credits-tab p { font-size:0.85em }

.videos { position:relative; left:0; transition:left ease-in-out 0.50s } 
.videos li { width:290px; max-height:250px; color:rgba(255,255,255,0.75); display:inline-block; transition:all ease 0.2s; position:relative; z-index:0; margin-right:5px; overflow:hidden; }
.videos li:last-child { margin-right:0px }
.videos li a { color:rgba(255,255,255,0.75); outline:unset }
.videos li a:focus { color:#2cadb6 }
.videos li .thumb { width:100%; height:160px } 
.videos li .thumb img { width:100%; height:160px; transition:all ease 0.2s; }
.videos li .infos { height:90px; padding:10px 0; float:left; }
.videos li .infos h3 { font-size:0.85em; font-weight:300; word-break:break-word }
.videos li .infos p { font-size:0.9em; color:rgba(255,255,255,0.5); }
.videos li:hover { color:#fff; z-index:1; cursor:pointer }
.videos li:hover .thumb img { transform:scale(1.03); box-shadow:0 0 50px rgba(0,0,0,0.5) }
.videos li:hover a { color:#fff; }

.photos { width:100% }
.photos ul.items { display:flex; flex-wrap:wrap; }
.photos ul.items li > a { display:block; width:100% }
.photos ul.items li { width:320px; height:180px; display:flex; flex:0 0 320px; background-color:#000; background-repeat:no-repeat; background-position:center; background-size:contain; position:relative; overflow:hidden; margin:0 5px 5px 0 }
.photos ul.items li .item-wrapper { width:320px; height:180px; position:absolute; transform:translate3d(0,320px,0); background:rgba(0,0,0,0.15); padding:20px; color:#fff; transition:all ease 0.25s }
.photos ul.items li .item-wrapper .item-infos { height:40px; line-height:1.4em; margin-bottom:12px; }
.photos ul.items li .item-wrapper .item-infos h3 { font-size:0.8em }
.photos ul.items li:hover .item-wrapper { transform:translate3d(0,110px,0); background:rgba(0,0,0,0.5); }

.photos li a .item-wrapper { width:100%; height:160px; background-color:#000; background-size:contain; background-repeat:no-repeat; background-position:center; position:relative; overflow:hidden }
.photos li a .item-wrapper .item-blured-bg { width:calc(100% + 20px); height:180px; margin-left:-10px; margin-top:-10px; background-size:100%; background-repeat:no-repeat; background-position:center; background-color:#000; overflow:hidden; position:absolute; top:0; z-index:1; filter:blur(3px); transition:all ease 0.25s }
.photos li a .item-wrapper .item-black { width:100%; height:160px; background-color:#000; opacity:0.4; z-index:2; position:absolute; top:0; }
.photos li a .item-wrapper .item-bg { width:100%; height:160px; background-size:contain; position:absolute; top:0; z-index:2; background-repeat:no-repeat; background-position:center; }
.photos li a .item-wrapper .item-wrapper { z-index:5 }
.photos li a:hover .item-wrapper .item-blured-bg { background-size:105%; }

#more-videos a#more { background:#3d4a53; color:#fff; padding:10px; font-size:0.9em; margin-right:10px; transition:all ease 0.2s }
#more-videos a#more .fas-spin { font-size:0.7em }
#more-videos a#more:hover { background:#2993ad }
#more-videos input { border:1px rgba(255,255,255,0.1) solid; text-align:center; width:50px; height:40px; color:#fff; background:transparent; padding:0 }

.login h2 { margin:20px 0; line-height:1.4em; width:100%; float:left; }
.login ul { list-style:circle; margin:20px }
.login p { margin-bottom:20px; clear:both }
.login a.button { width:400px; font-size:0.9em }
.login .error { background:#f00; display:inline-block; padding:20px 20px;  border-radius:3px; font-weight:bold; }
.login form { margin:20px 0; }
.login .field input { margin:10px 0; width:300px; }
.login .field input[type=submit] { width:auto; margin:0; }

#chat-box { width:100%; height:448px; background:#3d4a53; box-shadow:0 0 20px rgba(0,0,0,0.1); padding:0 5px 5px;  }
#chat-box .title { width:100%; min-height:30px; height:30px; max-height:30px; padding:5px 0; margin:0; background:#3d4a53; float:left; color:#fff; font-size:0.85em; text-align:center; box-sizing:border-box; justify-content:center; }
#chat-box .title i { margin-right:10px; }
#chat-box .title a { position:absolute; right:10px; color:#fff }
#chat-box #messages { width:100%; height:328px; padding:5px; float:left; color:#fff; font-size:1em; overflow-x:hidden; overflow-y:scroll;  box-sizing:border-box; box-shadow:inset 0 0 5px rgba(0,0,0,0.3); background:#1f2123 }
#chat-box #messages li { width:100%; height:auto; float:left; color:#fff; border-bottom:1px dotted #eee; padding:5px; font-size:1em; box-sizing:border-box; font-size:0.90em }
#chat-box #messages li strong { color:#999; font-weight:normal; font-size:0.9em }
#chat-box form { width:100%; height:84px; position:relative; bottom:0; float:left; background:#000; }
#chat-box form input { border-top:none; width:100%; padding:2px 5px; height:30px; border-left:none; border-right:none; border-bottom:none; font-weight:bold; margin-bottom:0px; font-family:Open Sans; background:#3d4a53; color:#fff;}
#chat-box form input::placeholder, #chat-box form textarea::placeholder { color:#fff; }
#chat-box form textarea { border-top:1px solid rgba(255,255,255,0.1); width:100%; padding:2px 5px; height:54px; border-left:none; border-right:none; border-bottom:none; resize: none; margin-bottom:0px; font-family:Open Sans; background:#3d4a53; color:#fff;}
#chat-box.closed { height:30px !important; overflow:hidden; padding-bottom:0 }
#chat-box.closed #messages, #chat-box.closed form { display:none !important }
#chat-box.new, #chat-box.new .title { background:#2cadb6; animation: newMessage 2s steps(2, end) infinite; }
.tabs #chat.new i { animation: tabNewMessage 2s steps(2, end) infinite; }


@keyframes newMessage {
     0% { background:#3e5665; }
     100%   { background:#2cadb6; }
}
@keyframes tabNewMessage {
     0% { color:#fff; }
     100%   { color:#2cadb6; }
}

.app-popin { width:100%; height:100%; padding:50px 75px; position:fixed; top:0; left:0; background:rgba(0,0,0,0.5); z-index:999; font-size:0.85em; display:none }
.app-popin .app-popin-wrapper { width:100%; height:100%; background:#e8e8e8; }
.app-popin-header { width:100%; height:50px; background:#3d4a53; display:flex; justify-content:space-between }
.app-popin-header .app-popin-title { width:calc(100% - 50px); height:50px; line-height:50px; padding:0 20px; color:#fff; text-transform:uppercase; font-weight:700 }
.app-popin-header .app-popin-nav { height:50px; line-height:50px; }
.app-popin-header .app-popin-nav a { display:block; line-height:50px; width:50px; text-align:center; color:#fff; border-left:1px solid rgba(255,255,255,0.1); background:transparent; transition:background ease 0.25s; outline:none }
.app-popin-header .app-popin-nav a:hover, .app-popin-header .app-popin-nav a:focus { background:#2993ad; }
.app-popin-header .app-popin-nav ul { display:flex; align-items:center }
.app-popin-header .app-popin-nav ul li { display:inline; }
.app-popin-header .app-popin-nav ul li a.button { margin:0 5px 0 0; background:#2993ad }
.app-popin-header .app-popin-nav ul li a.button.saving, .app-popin-header .app-popin-nav ul li a.button.saving:hover { background:#b39e0c }
.app-popin-header .app-popin-nav ul li a.button.saved, .app-popin-header .app-popin-nav ul li a.button.saved:hover { background:#0cb394 }
.app-popin-header .app-popin-nav ul li a.button:hover { background:#32424c }
.app-popin-content { display:flex; height:calc(100% - 50px); padding:20px; overflow-y:scroll }
.app-popin-content h2 { font-size:2.4em; font-weight:300; margin-bottom:20px; }.app-popin-content .app-popin-menu { width:200px; height:100%; border-right:1px solid rgba(61,74,83,0.15); position:sticky; top:0;}
.app-popin-content .app-popin-menu ul { width:200px; height:100%; }
.app-popin-content .app-popin-menu li a { width:200px; color:rgba(61,74,83,0.5); border-bottom:1px solid rgba(61,74,83,0.15); padding:20px 0; display:block; text-decoration:none; transition:all ease 0.25s; outline:none }
.app-popin-content .app-popin-menu li a:before { content:'/'; margin:0 10px 0 0 }
.app-popin-content .app-popin-menu li a.active, .app-popin-content .app-popin-menu li a:hover, .app-popin-content .app-popin-menu li a:focus { color:rgba(61,74,83,1); }
.app-popin-content .app-popin-photo { padding:0 50px; }
.app-popin-content .app-popin-photo img { max-height:100%; max-width:100%; }
.app-popin-content .infos thead { font-weight:bold }
.app-popin-content .infos tr td { padding:10px; border:1px solid #ccc; border-collapse:collapse }

@media( max-width:1460px ) {
	
	#main-content .wrapper { padding:50px }
	.video-wrapper iframe { width:640px; height:450px }
	.video-wrapper .video-player-wrapper { width:640px; }
	.video-wrapper #video-infos-wrapper { width:100%; max-width:calc(640px - 100px); }
	
}
@media( max-width:1300px ) {
	
	.video-wrapper iframe { width:100%; height:calc((100vw - 200px) / 1.7777) }
	.video-wrapper #video-infos-wrapper { width:100%; max-width:100%; padding-left:0; margin-top:20px; }
	
}
@media( max-width:980px ) {
	
	#search, #menu { box-shadow:0 0 0 rgba(0,0,0,0); }

	.video-wrapper iframe { height:calc((100vw - 100px) / 1.7777) }
	.video-wrapper .video-player-wrapper { width:100%; }
	#main-content .wrapper { padding:20px 50px }
	
}
@media( max-width:660px ) {
	.wrapper { padding:0 10px }
	h1 { margin-top:0; font-size:1.5em; line-height:1em; }
	#main-content .wrapper { padding:20px 10px }
	#menu, #search { width:100vw; border-right:none; left: -100vw; }
	#menu .title, #search .title { padding:0 20px }
	#menu .menu-niv .parent { padding:0 20px }
	#menu-nivs-wrapper #menu-nivs > div, #search #search-wrapper { padding:20px }
	#main-content .nav-btns { margin:0; }
	#main-content .nav-btns li a { width:50px; text-align:center }
	#main-content .nav-btns li i { margin:0; }
	#main-content .nav-btns li span { display:none; }
	.no-slider .videos { display:flex; flex-wrap: wrap; align-items: center; justify-content: center; }
	.no-slider .videos li .infos { height:auto; padding-bottom:30px }
	.videos-list-wrapper { width:100vw; overflow-x:auto; clear:both; margin-bottom:20px; margin-left:-20px; padding-left:20px; }
	#more-videos { text-align:center; }
	#more-videos a#more { width:100%; display:block; text-align:center; margin-bottom:10px }
	.videos-wrapper .title, .video-wrapper .title, header.title { width:calc(100vw - 40px); height:auto; margin-bottom:20px; overflow: auto; }
	body.video .videos-wrapper .title, body.video .video-wrapper .title { margin-top:0 }
	.videos-wrapper .title a, .video-wrapper .title a { display:block; width:100%; margin:0 }
	.videos-wrapper .title h2, .video-wrapper .title h2 { margin:10px 0; line-height:1em; }
	.video-wrapper iframe { width:100vw; height:calc(100vw / 1.7777); margin-left:-10px; }
	.videos li .infos { height:auto }
	.title p { width:100%; margin-top:20px; text-align:left }
	.videos-wrapper:hover .slide.active {display:none}
	.videos-wrapper .title h2 .little, .video-wrapper .title h2 .little { width:100%; float:left }
	#video-infos #share-tab ul { width:100%; padding:0 }
	.tabs ul li a:hover, .tabs ul li a.active  { width:50px; }
}