/**
 * Main Css File Of The Theme.
 * @package Dop
 */

/**
 =====================================
 >>>>>      TABLE OF CONTENT     <<<<<
 =====================================
 #1. Header.php
    ##. Site - Title
    ##. Site - Descriptions
    ##. Navbar
 #2. Content.php   
    ##. Post Navigation
 #3. Sidebar.php
 #4. Back-to-Top Button
 #5. Single.php
 #6. Search.php
 #7. Footer.php
 #8. Media Queries
 **/

/**
            #1. Header.php
 ---------------------------------------**/
 .site-title{ 
    text-decoration: none;
    font-size: 2.75rem;
    transition: all 200ms ease;
    font-weight: bold;
    line-height: 1.2;
 	color:#FF4F4F;  }

 	.site-title:hover{ color:#000000; }

 .site-description{ 
 	color:#404040;
 	font-size:17px;
 	margin: 0 0 10px;
 	font-weight: 550;
 	line-height: 0.5; }

 .navbar{ background-color: #040404;padding:15px 0; }
 .menu-item a{ 
 	font-weight: 650;
    font-size:16px;
    padding:0 8px;
    transition: all 150ms ease;
 	text-transform: uppercase;
 	color:#fff; }

 	.menu-item a:hover{ color:#ff4f4f; }
  .nav-toggler{display: none;}
 .navbar .dropdown-menu{ 
 	border-radius: 0;
 	background-color: #000;
 	position: absolute !important;
 	width:25%;
    margin-top: 15px; }

 .dropdown-menu .menu-item a{ 
 	color:#fff;
 	display:block;
    width:100%;
    font-weight: 500;
 	padding:7px 0;
 	margin:5px 15px; }

 .dropdown-menu .menu-item:hover{ ;background-color: #ff4f4f }

 .search-btn{ background-color: inherit;border:none; }
 .fa-search{ color:#fff;font-size:18px; }
 .fa-search:hover{ color:#ff4f4f; }

 .search-form{ 
    margin: 0;
    z-index: 99;
    margin-left:42%;
    margin-top: 7px;
    padding: 0;  
    min-width: 350px;
    display: none;
    overflow: hidden; }
 .dropdown-menus{
    border:5px solid #757575;
    background-color: #ccc; }   
 .search-form .screen-reader-text{display: none;}
 .search-form [type="search"]{ 
	background: #f1f1f1;
	border       : none;
	height       : 40px;
	margin       : 0;
	padding      : 0 11px;
	width        : 245px;
	border-radius: 0; }
.search-form .search-submit{ 
	color:#fff;
	margin-left: 0;
	border-radius: 0;
	background-color:#000;
	transition: all 250ms ease;
	border:none;
	padding:9px 15px;}

	.search-form .search-submit:hover{ background-color: #ff4f47; }
    .search-form .dropdown-menu{ border: 2px solid #757575;background-color: #ccc; }

/**
           #2. Content.php   
 ---------------------------------------**/
 .card-columns { columns: 2 }
 .img-fluid{ transition: all 350ms ease-in-out; }
 .img-fluid:hover{ opacity: 0.9 !important; }

 .post-meta{ margin:10px 0 5px 0; }
 .post-meta a{ 
    color:#ff4f4f;
    transition: all 150ms ease;
    text-transform: uppercase;
    font-size:15px;
    padding:0 5px;
    font-weight: 500; }
    .post-meta a:hover{ color:#040404; }
 .card-title a{ 
    color:#060606;
    font-family: 'Roboto Condensed';
    margin: 0 10px;
    font-size: 1.5625rem;
    line-height: 1.2;
    font-weight: 500; }   
  .card-title a:hover{ color:#ff4f4f; }
 
 .post-footer{ margin:7px 0; }

 .fa-user,
 .fa-clock,
 .fa-comment{
    color:#060606;
    font-size:12px;
    padding:0 5px;
    font-weight: 500; }
 .post-footer a{ 
    color:#666666;
    font-size:16px;
    font-weight: 500; }
 .post-footer a:hover{ color:#ff4f4f; }
 .post-excerpt{ 
    font-size: 1.125rem;
    line-height: 1.5;
    padding:0px 10px;
    color:#040404; }

/** Posts Navigation **/
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    color: #fff;
    text-decoration:none;
}
 
.navigation li {
    display: inline;
}
 
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    background-color: #e65100;
    border-radius: 3px;
    cursor: pointer;
    padding: 12px;
    padding: 0.75rem;
}
 
.navigation li a:hover,
.navigation li.active a {
    background-color: #040404; }


/*
         #3. Sidebar.php
--------------------------------------
*/
h1.widget-title{ 
  padding:10px;
  font-weight: 600;
  border-bottom: 2px solid #ddd;
  color:#000;
  margin-bottom:8px;
  font-size:1.8rem;
  font-weight: 400; }

.widget li{ list-style:none;text-align:left; }
.widget a{ 
  max-width: auto;
  display: block;
  margin:3px 0;
  padding:3px 0;
  color:#555; 
  text-align:left;
  font-size:18px;
  transition: all 150ms ease;
  font-weight:600; }  

.widget a:hover{ color: #ff4f4f; }

.widget{ margin:30px 0; }

.widget label{ display: block;font-size:400; text-align:center;font-size:19px; }

#archives-3{padding:0px 0 25px 0;}

.widget img{ padding: 5px;text-align:center;width: 100%;height:auto; }

.widget select{ 
  display: block;
  color:#757575;
  margin:0 auto;
  font-size: 16px;
  text-align:center;
  width: 80%;
  padding:10px 20px; }

.widget button{ 
  padding:10px 20px;
  cursor: pointer;
  font-size:19px;
  margin: 10px auto;
  display: block;
  background-color:#2196f3;
  transition: all 250ms ease;
  border:none;
  color:#fff;
  text-align:center; }  

  .widget button:hover{opacity: 0.7;}

#wp-calendar{ width:100%;padding:10px;text-align:center; }

    #wp-calendar caption{text-align:center;font-size:1.1rem;}
    #wp-calendar thead{ font-weight: 500; }
    #wp-calendar tr td{ border:1px solid #ccc; }
   
/**
         #4. Back-to-Top Button
 ---------------------------------------**/
 #myBtn {
     display: none;  
     position: fixed; 
     bottom: 20px; 
     right: 30px; 
     z-index: 99; 
     border: none; 
     outline: none; 
     background-color: #ff4f4f;
     transition:all 150ms ease; 
     color: white; 
     cursor: pointer;
     padding: 15px; 
     border-radius: 10px; 
     font-size: 18px; 
     transition:all 250ms ease-in;
   }
   
   #myBtn:hover {
     background-color: #040404; /* Add a dark-grey background on hover */
   }

/**
           #5. Single.php
 ---------------------------------------**/
 .single .post-footer a{ 
  background-color:#040404;
  padding: 5px 10px;
  color:#fff;
  border-radius: 5px }
      .single .post-footer a:hover{ background-color:#ff4f4f; }

 .single .post-content{ 
    font-size: 1.5rem;
    line-height: 1.5;
    padding:20px 10px;
    color:#040404 }

 .nav-posts-link a{ 
  font-size:18px;
  font-weight:500;
  padding:0px 50px;
  color:#000;
  padding:0 5px; }

.nav-posts-link a:hover{ color:#ff4f4f; }

#id-post-nav{ padding:15px; }
.single-post .post-top{ 
  text-align: center;
  padding:10px;
  background-color: #ccc; }

.single-post blockquote{ 
  background-color: #e9e9e9;
  border-left:5px solid green;
  width:auto;
  font-size:16px;
  font-style: italic;
  display: inline-block;
  height:auto;
  padding:14px 7px 1px 10px;
  position: relative;
  font-weight: 300; }
   

 /**
           #6. Search.php
 ---------------------------------------**/
 .search-no-results .page-title{ 
  font-weight: 600;
  margin:10px;
  color:#000; }

.search-no-results .page-description{ margin:20px 10px; }


/**
            #7. Footer.php
 ---------------------------------------**/
 .footer { 
  color:#fff;
  font-weight: 600;
  padding:10px;
  font-size:16px;
  background-color: #000;
  text-align: center; }

.footer .a{ color:#fff; }
     .footer .a:hover{ color:#ff4f4f; }
.footer .site-title{ font-size:22px; }     


/**
           #8. Media Queries
 ---------------------------------------**/
@media only screen and (max-width: 600px) {
   .card-columns{ columns:1 !important; }
   .post-footer-container .col-xs-4{ display: inline-block !important;width:32%; }
   .navbar .navbar-dop{display: none;}
   .search-btn{ display: none; }
   .nav-toggler{
    display: block; 
    background-color: inherit;
    color:#fff;
    font-size:20px;
    text-align: center;
    margin:0 auto;
    display: block;
    border: none;}
    .search-btn{display: none;}
    .search-form{ 
    margin: 0;
    z-index: 99;
    margin-top: 7px;
    padding: 0;  
    text-align: center;
    min-width: 350px;
    display: none;
    overflow: hidden; }
    .dropdown-menus{
    border:5px solid #000;
    background-color: #aaa; }  
    .search-form [type="search"]{ 
    background: #f1f1f1;
    border       : none;
    height       : 40px;
    margin       : 0;
    padding      : 0 11px;
    width        : 300px;
    border-radius: 0; }
} 

@media only screen and (max-width: 900px) {
   .card-columns{ columns:1 !important; }
   .post-footer-container .col-xs-4{ display: inline-block !important;width:32%; }
   .navbar .navbar-dop{display: none;}
   .search-btn{ display: none; }
   .nav-toggler{
    display: block; 
    background-color: inherit;
    color:#fff;
    font-size:20px;
    text-align: center;
    margin:0 auto;
    display: block;
    border: none;}
    .search-btn{display: none;}
    .search-form{ 
    margin: 0;
    z-index: 99;
    margin-top: 7px;
    padding: 0;  
    text-align: center;
    min-width: 350px;
    display: none;
    overflow: hidden; }
    .dropdown-menus{
    border:5px solid #000;
    background-color: #aaa; }  
    .search-form [type="search"]{ 
    background: #f1f1f1;
    border       : none;
    height       : 40px;
    margin       : 0;
    padding      : 0 11px;
    width        : 300px;
    border-radius: 0; }
}