/**
 * Theme Name: TIMS
 * Template:   twentyseventeen
 * Theme URI:         
 * Description:       
 * Version:           
 * Author:           
 * Author URI:        
 * Tags:             
 * Text Domain:       tims
 * Domain Path:       /assets/lang
 * Tested up to:      6.4
 * Requires at least: 6.2
 * Requires PHP:      7.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */
 
html {margin-top:0 !important;}
body {background-color: #000;}
#wpadminbar {display:none;}

#page, .site-header, .popup_content {max-width:1300px;margin:0 auto;}

.site-title a, 
.js .menu-toggle, 
.popup_next, 
.popup_prev, 
.popup_close {-webkit-transition: color 0.2s;transition: color 0.2s;}

.wrap {padding:0px;max-width:100%;}
.site-content {padding:42px 0px 0px 0px !important;}
.site-content-contain {background-color: #000;}

.custom-header {height:auto !important;}
#masthead .wrap {padding:0;max-width:100%;}
.site-header {position:fixed;width:100%;background:#000;height:42px;z-index:999;}
.site-branding {position:relative !important;padding:0;} 
.site_logo {
    background-image:url(http://tims-design.com/img/tims_logo.png);
    background-repeat:no-repeat;
    background-size:75%;
    background-position:center;
    width:160px;
    height:42px;
    position:absolute;
    top:0;
    left:0;
}
.site-title {font-size:15px;font-weight:500;padding:0 !important;}
.site-title a {color:#dfdfdf !important;display:block;padding:11px 10px 11px 20px;}
.site-title a:hover, .site-title a:focus {opacity:1;color:#fff !important;}

.cat_header {
    padding:11px 0 0 165px;
    color:#dfdfdf;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard syntax */
}

.navigation-top {top:0;bottom:auto;left:0;right:0;padding:0;border:none;background:none;position:absolute;}
.navigation-top .wrap {padding:0 20px;}
.navigation-top a {color:#ddd;}
.navigation-top a:hover, .navigation-top a:focus {color:#fff;}
.navigation-top .current-menu-item > a, .navigation-top .current_page_item > a {color:#fff;}

.js .menu-toggle {
    color:#dfdfdf;
    font-size:17px;
    font-weight:800;
    line-height:normal;
    display:block;
    position:absolute;
    top:0;
    right:0;
    margin:0;
    height:42px;
    z-index:3;
    padding:5px 20px 10px 20px;
}
.menu-toggle:hover, .menu-toggle:focus {background:none !important;color:#fff;outline:none;}
.menu-toggle .icon {margin:0;top:0;}

.js .main-navigation ul, .js .main-navigation > div > ul {display:none;padding-bottom:10px;background:none;border:none;}
.main-navigation li {display:block;text-align:right;border:none;}
.main-navigation li a {display:inline-block;padding:10px 40px;font-size:14px;}

.menu-top-container {position:absolute;top:42px;left:0;right:0;padding:0;background:#000;}

.page-header {float:none !important;width:100% !important;padding:2px 0 2px 15px;}
.page-header .page-title {margin:0;color:#fff;}

.blog .site-main > article, 
.archive .site-main > article {
    position:relative;
    float:left !important;
    width:33.333% !important;
    padding-bottom:33%;
    overflow:hidden;
    box-sizing:border-box;
    border-radius:5%;
}

.blog .site-main > article .post_image, 
.archive .site-main > article .post_image {
    position:absolute;
    top:1%;
    right:1%;
    bottom:1%;
    left:1%;
    border-radius:5%;
    background-size:100%;
    background-position:center;
    cursor:pointer;
    overflow:hidden;
    z-index:1;
}

.black {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:#000;
    opacity:.15;
    -webkit-transition:opacity .2s;
    transition:opacity .2s;
    z-index:2;
}
.blog .site-main > article .post_image:hover .black, 
.archive .site-main > article .post_image:hover .black {opacity:0;}

.blog .site-main > article video, 
.archive .site-main > article video {width:100%;margin-top:-33%;}
#post-133 video, #post-131 video, #post-129 video {margin-top:-39%;}
.blog .site-main > article video.vid_sq, 
.archive .site-main > article video.vid_sq {margin-top:0;}

.home.blog .entry-title {position:absolute;top:0px;left:0px;text-align:center;}

.single-featured-image-header {background-color:#000;border-bottom:none;padding-top:42px;}

#primary {max-width:100% !important;}

.page-content {
    float:none !important;
    width:100% !important;
    padding-bottom:0 !important;
    text-align:center;
    color: #efefef;
    font-size: 50px;
    letter-spacing: 3px;
    padding: 20% 20px 19% 20px !important;
}

article.page {
    padding:25px 35px 10px 30px;
    color:#eee;
    overflow:hidden;
    position:relative;
    letter-spacing:5px;
    font-size:16px;
    line-height:30px;
    text-align:justify;
}
article.page p {margin:0;}
.page .entry-header, .page .entry-content {}
.page .entry-content {float:none !important;width:100% !important;}


.loadmore {visibility:hidden;}
.loading {display:none;clear:both;padding:20px 0;text-align:center;}
.loading_anim {
  color: #dfdfdf;
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
  transform: translateX(-38px);
  animation: l21 .5s infinite alternate linear;
  margin:0 auto;
}
@keyframes l21 {
  50%  {box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px}
  100% {box-shadow: 19px 0 0 0  , 38px 0 0 3px, 57px 0 0 7px}
}

.img_loading {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;    
    display: inline-block;
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #efefef;
    --_m: 
        conic-gradient(#0000 10%,#000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}

.popup_img_loading {background: #ccc;}

.site-footer {border:none;}

.under_popup {overflow:hidden;}
.popup_overlay {
    visibility:hidden;
    position:fixed;
    z-index:9;
    background:rgba(0,0,0,0.85);
    top:0;
    right:0;
    bottom:0;
    left:0;
    padding-top:5%;
}
.popup_overlay.active {visibility:visible;}
.popup_content {
    visibility:hidden;
    position:absolute;
    top:42px;
    right:0;
    bottom:0;
    left:0;
}
.popup_content.active {visibility:visible;}
.popup_img_wrap {
    position:absolute;
    top:2%;
    right:0%;
    bottom:10%;
    left:0%;
    overflow:visible;
    box-sizing:border-box;
}
.popup_img {
    position:absolute;
    z-index:1;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    display:flex;
    align-items:center;
}
.popup_img video {
    display:block;
    max-height:100%;
    margin:0 auto;
}
.popup_caption {
    color:#eee;
    font-size:14px;
    font-weight:100;
    position:absolute;
    text-align:center;
    left:0;
    right:0;
    bottom:1%;
    height:9%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.popup_next, .popup_prev {
    cursor:pointer;
    position:absolute;
    z-index:2;
    top:42%;
    padding:25px;
    font-family:'Courier New', Courier, monospace;
    font-size:45px;
    font-weight:800;
    color:#565656;
    -webkit-transform:scale(1,7); /* Safari and Chrome */
    -moz-transform:scale(1,7); /* Firefox */
    -ms-transform:scale(1,7); /* IE 9 */
    -o-transform:scale(1,7); /* Opera */
    transform:scale(1,7); /* W3C */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard syntax */
}
.popup_next {right:0;}
.popup_prev {left:0;}
.popup_next:hover, .popup_prev:hover, .popup_close:hover {color:#efefef;}
.popup_close {
    cursor:pointer;
    border-bottom-left-radius:50%;
    background: rgba(0, 0, 0, 0.5);
    color:#565656;
    font-size:30px;
    line-height:32px;
    font-weight:600;
    position:absolute;
    top:-5px;
    right:0;
    padding:1.65%;
    z-index:999;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard syntax */
    -webkit-transform:scale(1,.9); /* Safari and Chrome */
    -moz-transform:scale(1,.9); /* Firefox */
    -ms-transform:scale(1,.9); /* IE 9 */
    -o-transform:scale(1,.9); /* Opera */
    transform:scale(1,.9); /* W3C */
}

.site-footer {margin-top:0;color:#dfdfdf;}
.site-footer .wrap {padding-bottom:40px;}
.site-footer .site_logo {position:relative;float:left;width:140px;margin-left:8px;}
.footer_left {float:left;}
.footer_right {float:right;width:400px}
.footer_link {color:#dfdfdf;float:left;width:20%;text-align:center;line-height:42px;}
.footer_link:hover, .site-footer .site_logo:hover {opacity:.9;-webkit-transition:opacity .2s;transition:opacity .2s;}
.copyright {
    float: left;
    height: 42px;
    line-height: 44px;
    font-size: 15px;
}
.email {
    background: url('http://tims-design.com/img/email.png') no-repeat;
    background-position:center 14px;
    background-size:20%;
    height:42px;
}

@media only screen and (max-width: 1200px) {
    .popup_img_wrap {max-width:80%;margin:0 auto;}
}

@media only screen and (max-width: 900px) {
    .blog .site-main > article, 
    .archive .site-main > article {float:none !important;width:100% !important;padding-bottom:100%;}
    article.page {letter-spacing:0px;font-size:14px;line-height:28px;}
    .popup_img_wrap {bottom:20%;left:1%;right:1%;max-width:100%;}
    .popup_img video {max-width:95%;}
    .popup_caption {bottom:48px;font-size:10px;padding:0 17%;height:9%;}
    .popup_close {font-size:20px;line-height:20px;padding:4%;}
    .popup_next, .popup_prev {font-size:30px;top:auto;bottom:4%;
    -webkit-transform:scale(1,2); /* Safari and Chrome */
    -moz-transform:scale(1,2); /* Firefox */
    -ms-transform:scale(1,2); /* IE 9 */
    -o-transform:scale(1,2); /* Opera */
    transform:scale(1,2); /* W3C */}
    .popup_next, .popup_prev, .popup_close {color:#ddd;}
    .footer_left, .footer_right {float:none;clear:both;}
    .footer_right {font-size:13px;width:100%;padding:0 10px;}
}