/******************************************************************

Theme Name: CMU

Theme URI: http://dropshop.io

Description: Custom theme for 3CM UnLimited

Author: James Towers

Author URI: http://dropshop.io

Version: 1.0



*******************************************************************/

body {

  font-family: Poppins, sans-serif;

  font-style: normal;

  font-variant: normal;

  background: #FFFFFF;

  text-align: left;

  line-height: 1.2;

  max-width: 100%;

}



.group:after {

  content: "";

  display: table;

  clear: both;

}



a {

  text-decoration: none;

  color: #8db9cd;

}



a:visited {

  text-decoration: none;

}



a:hover {

  text-decoration: underline;

}



/*lists - controls editor's picks*/

ul, ol, li {

  list-style: none;

}



/*site set-up*/

* {

  list-style-image: none;

  list-style-position: outside;

  list-style-type: none;

  margin: 0;

  padding: 0;

  outline-style: none;

  outline-width: 0;

}



*, *:before, *:after {

  box-sizing: border-box;

}



a img {

  border: none;

  display: inline-block;

}



table {

  max-width: 100%;

}



section {

  clear: both;

}



iframe {

  max-width: 100%;

}



.full-height {

  height: 100%;

}



.hide {

  display: none !important;

}



.hide-on-mobile {

  display: none;

}



.no-margin {

  margin: 0 !important;

}



.flex {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-flex-wrap: wrap;

      -ms-flex-wrap: wrap;

          flex-wrap: wrap;

}



.flex-center {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

  -webkit-justify-content: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.flex-column {

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -webkit-flex-direction: column;

      -ms-flex-direction: column;

          flex-direction: column;

  -webkit-box-flex: 1;

  -webkit-flex: 1;

      -ms-flex: 1;

          flex: 1;

}



.flex-row {

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -webkit-flex-direction: row;

      -ms-flex-direction: row;

          flex-direction: row;

  -webkit-box-flex: 1;

  -webkit-flex: 1;

      -ms-flex: 1;

          flex: 1;

}



.clear,

.row {

  clear: both;

}



.pull-left {

  float: left !important;

}



.pull-right {

  float: right !important;

}



.pull-center {

  margin-left: auto;

  margin-right: auto;

}



.text-left {

  text-align: left;

}



.text-right {

  text-align: right;

}



.text-center {

  text-align: center;

}



.slide-from-right #drawer-nav {

  -webkit-transform: translateX(0%);

      -ms-transform: translateX(0%);

          transform: translateX(0%);

  z-index: 2;

}



.slide-from-right .main-nav {

  z-index: 1;

  overflow: auto;

}



.slide-from-right a#menu-toggle span {

  height: 0;

  margin-top: 3px

}



.slide-from-right a#menu-toggle span:before {

  -webkit-transform: rotate(45deg);

      -ms-transform: rotate(45deg);

          transform: rotate(45deg);

  top: -2px;

}



.slide-from-right a#menu-toggle span:after {

  -webkit-transform: rotate(-45deg);

      -ms-transform: rotate(-45deg);

          transform: rotate(-45deg);

  bottom: -2px;

}



a#menu-toggle {

  display: block;

  height: 24px;

  padding: 20px 10px;

  position: absolute;

  right: 6px;

  top: 25px;

  -webkit-transform: translateY(-50%);

      -ms-transform: translateY(-50%);

          transform: translateY(-50%);

}



a#menu-toggle span,

a#menu-toggle span:before,

a#menu-toggle span:after {

  background: #FFFFFF;

  height: 4px;

  width: 30px;

  display: block;

}



a#menu-toggle span {

  position: relative;

}



a#menu-toggle span:before,

a#menu-toggle span:after {

  position: absolute;

  left: 0;

  content: '';

}



a#menu-toggle span:before {

  top: -7px;

}



a#menu-toggle span:after {

  bottom: -7px;

}



.main-nav a {

  display: block;

  border-bottom: 2px solid #FFFFFF;

  font-family: 'Poppins', sans-serif;

  float: left;

  color: #FFFFFF;

  text-transform: uppercase;

  text-align: center;

}



.main-nav a:nth-child(0) {
  background-color: #00618d;
}

.main-nav a:nth-child(1) {
  background-color: #00618d;
}

.main-nav a:nth-child(2) {
  background-color: #51b575;
}

.main-nav a:nth-child(3) {
  background-color: #41a1da;
}

.main-nav a:nth-child(4) {
  background-color: #e96f28;
}

.main-nav a:nth-child(5) {
  background-color: #743594;
}

.main-nav a:nth-child(6) {
  background-color: #db4024;
}

.main-nav a:nth-child(7) {
  background-color: #5CAFB4;
}

.main-nav a:nth-child(8) {
  background-color: #00618d;
}

.main-nav a:nth-child(9) {
  background-color: #00618d;
}

.main-nav a:nth-child(10) {
  background-color: #333333;
}



#drawer-nav {

  background: #FFFFFF;

  position: fixed;

  -webkit-transform: translateX(100%);

      -ms-transform: translateX(100%);

          transform: translateX(100%);

  right: 0;

  top: 52px;

  width: 100%;

  height: 100%;

  z-index: 0;

  overflow: hidden;

  -webkit-transition: -webkit-transform 0.2s ease-out;

          transition: transform 0.2s ease-out;

  z-index: 2;

}



#drawer-nav a {

    font-family: 'Poppins', sans-serif;

    font-size: 18px;

	text-align: center;

	color: #FFFFFF;

	text-decoration:none;

  width: 100%;

  padding: 15px;

}



#drawer-nav a br {

  display: none;

}



#drawer-nav #search-form {

  margin-bottom: 2px;

}



#drawer-nav #search-form input[type="text"] {

  border-radius: 0;

  float: left;

  margin-right: -60px;

  padding: 11px;

  width: 100%;

  -webkit-appearance: none;

}



#drawer-nav #search-form input[type="submit"] {

  border-radius: 0;

  background: #106091;

  border: none;

  float: right;

  font-weight: bold;

  padding: 12px;

  color: #FFFFFF;

  height: 100%;

  width: 60px;

  -webkit-appearance: none;

}



html {

  font-size: 62.5%;

}



body {

  font-size: 12px;

  font-size: 1.2rem;

  line-height: 15.96px;

  line-height: 1.596rem;

}



#wrapper {

  background: #FFFFFF;

  margin: 0 auto;

  text-align: left;

  max-width: 940px;

  padding: 0;

  width: 100%;

  position: relative;

  z-index: 1;

  overflow-x: hidden;

  -webkit-transition: -webkit-transform 0.2s ease-out;

          transition: transform 0.2s ease-out;

}



#header {

  border-bottom: 0px solid #000000;

  overflow: hidden;

  padding: 6px 2px 8px 2px;

}



#header-top {

  border-bottom: 2px solid #005B92;

  padding: 2px 0px 3px;

  margin-bottom: 8px;

}



#header-top .search {

  position: absolute;

  min-width: 220px;

  top: 8px;

  right: 0;

}



#header-top-left {

  float: left;

  padding: 2px 0;

}



#header-top-left #circles {

  float: left;

}



#header-top-left #circles a {

  border-radius: 100%;

  display: block;

  height: 16px;

  width: 16px;

  margin-right: 3px;

  float: left;

}



#header-top-left #circles a:nth-child(1) {

  background-color: #333;

}



#header-top-left #circles a:nth-child(2) {

  background-color: #106091;

}



#header-top-left #circles a:nth-child(3) {

  background-color: #37b581;

}



#header-top-left #circles a:nth-child(4) {

  background-color: #49A0DF;

}



#header-top-left #title {

  clear: left;

  float: left;

  margin-top: 4px;

  margin-left: 4px;

  font-size: 14px;

  font-size: 1.4rem;

  line-height: 18.62px;

  line-height: 1.862rem;

  font-family: 'Poppins', serif;

  color: #333;

}



#header-bottom {

  background: #333;

  height: 44px;

}



#header-bottom a#logo {

  background: #106091;

  border-right: 2px solid #FFFFFF;

  display: block;

  padding: 0;

  float: left;

  height: 100%;

  width: 108px;

}



#header-bottom a#logo img {

  display: block;

  max-width: 100%;

  max-height: 100%;

  width: auto;

  height: auto;

}



#header-nav {

  display: none;

}



#mainBody {

  width: 100%;

  margin-top: 3px;

  padding: 0 2px 8px;

  overflow: hidden;

}



.mainArea {

  margin-bottom: 15px;

}



.sidebar .adverts {

  border-bottom: 2px solid #333;

  padding-bottom: 10px;

  margin-bottom: 10px;

}



.sidebar .ad {

  clear: both;

  margin-top: 10px;

}



.sidebar .ad img {

  width: 100%;

  height: auto;

  display: block;

}



#footer {

  background: #333;

  color: #999999;

  clear: both;

  border-top: 0px;

  margin-top: 0px;

  padding: 0;

  float: left;

  font-size: 11px;

  font-size: 1.1rem;

  line-height: 14.63px;

  line-height: 1.463rem;

  width: 100%;

}



#footer .header {

  background: #B8B8B8;

  padding: 4px;

  margin-bottom: 8px;

  width: 100%;

  display: block;

}



#footer a {

  color: #999999;

  padding: 0;

  display: inline-block;

}



#footer .column {

  padding: 10px;

}



#footer ul {

  margin-bottom: 10px;

}



/*search box*/

.search {

  font-family: 'Poppins', sans-serif;

}



.search b {

  float: left;

  font-size: 10px;

  color: #333;

  padding: 0px 0 0 0px;

}



.search input {

  width: 149px;

  height: 20px;

  padding-left: 2px;

  padding-top: 4px;

  background: #CCCCCC;

  border: 0px;

  float: right;

  color: #333333;

  font-family: 'Poppins', sans-serif;

  font-size: 12px;

  line-height: 23px;

}



.search .submit {

  background: #106091;

  border-radius: 20px 0 0 20px;

  color: #FFFFFF;

  width: 75px;

  height: 20px;

  padding: 0;

  float: right;

  border: none;

  margin: 0px 0px 0 0px;

  cursor: pointer;

  -webkit-appearance: none;

}



/*post content*/

.contentArea p {

  font-family: 'Lora', sans-serif;

  color: #333333;

  font-size: 17px;

  line-height: 24px;

  margin-bottom: 17px;

}



.contentArea p a {

  color: #e52e38;

  font-size: 17px;

  line-height: 24px;

  text-decoration: none;

}



.contentArea p img {

  padding: 0;

  max-width: 100%;

  height: auto;

  float: right;

  margin-left: 15px;

  margin-bottom: 15px;

  border: 1px #000 solid;

}



.contentArea p img[width="210"] {

  max-width: 210px;

  min-width: 180px;

  width: 30%;

}



.entry-content {

  font-family: 'Poppins', sans-serif;

  color: #333333;

  font-size: 12px;

  line-height: 18px;

  margin-bottom: 15px;

}



/*headline*/

.contentArea h1 {

  font: normal 30px 'Lora', serif;

  color: #333333;

  line-height: 35px;

  margin: -5px 0 9px;

  border-top: 10px solid #FFFFFF;

  margin-bottom: 6px;

}



.contentArea h1 a {

  color: #333333;

}



.contentArea h1 a:hover {

  color: #e52e38;

  text-decoration: none;

}



/*tags*/

.contentArea h2 {

  color: #005b92;

  font-size: 13px;

  line-height: 17px;

  font-weight: normal;

  padding-bottom: 8px;

}



/*date and by line*/

.contentArea h3 {

  font-family: 'Poppins', sans-serif;  

  font-size: 12px;

  line-height: 15px;

  padding-bottom: 5px;

  color: #005b92;

  font-weight: normal;

  display: block;

  border-bottom: 1px solid #005b92;

}



/*section buttons*/

.contentArea h4 {

  font-family: 'Poppins', sans-serif;

  font-size: 12px;

  line-height: 15px;

}



.contentArea h4 a {

  font-size: 12px;

  line-height: 18px;

  color: #FFFFFF;

  font-weight: normal;

  padding-top: 2px;

  padding-bottom: 0px;

  padding-left: 3px;

  padding-right: 3px;

  text-transform: uppercase;

  background-color: #005b92;

  text-decoration: none;

  display: inline-block;

  border-bottom: 2px solid #FFFFFF;

}



.contentArea h4 a:hover {

  color: #a3dde0;

}



/*related posts*/

/*section header*/

.contentArea h5 {

  font: normal 13px;

  color: #FFFFFF;

  font-weight: normal;

  text-transform: uppercase;

  padding-top: 2px;

  padding-bottom: 2px;

  padding-left: 4px;

  padding-right: 3px;

  text-transform: uppercase;

  background-color: #005b92;

  width: 623px;

}



/*post intro*/

.contentArea h6 {

  font-family: 'Lora', sans-serif;

  color: #333333;

  font-size: 17px;

  line-height: 24px;

  font-weight: normal;

  padding-bottom: 17px;

}



/*tags*/

.contentArea h12 {

  font: normal 13px 'Poppins', sans-serif;

  color: #4c748c;

  line-height: 17px;

  font-weight: normal;

}



.contentArea h12 a {

  font: normal 13px 'Poppins', sans-serif;

  color: #4c748c;

  line-height: 17px;

  font-weight: normal;

}



/*extract*/

.contentArea h7 {

  font-size: 11px;

  line-height: 16px;

  margin-top: 3px;

  color: #666666;

  font-weight: normal;

  display: block;

}



/*tag author category pages*/

.contentArea h8 {

  font: normal 16px 'Lora', serif;

  color: #333333;

  line-height: 21px;

}



.contentArea h8 a {

  color: #333333;

}



.contentArea h8 a:hover {

  color: #e52e38;

  text-decoration: none;

}



/*special recent posts header*/

.contentArea h9 a {

  font: normal 17px 'Lora', sans-serif;

  color: #FFFFFF;

  line-height: 22px;

  padding-bottom: 6px;

  font-weight: normal;

}

.contentArea h14 {

  font-family: 'Poppins', sans-serif;

  font-size: 12px;

  line-height: 20px;

  padding-top: 3px;

  color: #cccccc;

  font-weight: normal;

  display: block;

}



/*tag author category pages date line*/

.contentArea h10 {

  font-size: 11px;

  padding-top: 3px;

  padding-top: 5px;

  color: #666666;

  font-weight: normal;

  display: block;

}



/*section titles*/

.contentArea h13 {

  font: normal 14px 'Poppins';

  color: #4c748c;

  line-height: 14px;

  font-weight: normal;

}



.contentArea h13 a {

  font: normal 14px 'Poppins';

  color: #4c748c;

  line-height: 14px;

  font-weight: normal;

}



/*get posts lists*/

.contentArea h15 {

  font: normal 17px 'Lora', sans-serif;

  line-height: 24px;

  display: block;

  padding-bottom: 10px;

}



.contentArea h15 a {

  color: #1a5f8c;

}



.contentArea h15 a:hover {

  color: #c1d2df;

  text-decoration: none;

}



.contentArea h16 {

  font-family: 'Times New Roman', sans-serif;

  color: #333333;

  font-size: 17px;

  line-height: 24px;

  margin-bottom: 17px;

}



/*rss styles*/

.rss {

  padding-left: 21px;

  background: url(images/rss.gif) no-repeat left top;

  margin: 9px 0 0;

  float: left;

  font: bold 11px Arial, Helvetica, sans-serif;

  color: #cc6600;

}



.rss a {

  color: #cc6600;

}



.rss-items {

  margin-top: 7px;

  padding: 0px;

  margin-left: 14px;

  margin-right: 5px;

  margin-bottom: 6px;

  color: #003366;

}



.rss-item {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 12px;

  font-weight: normal;

  list-style-type: square;

  margin-left: 0px;

}



@media only screen and (min-width: 400px) {

  .sidebar .adverts .ad {

    width: 50%;

    clear: none;

    float: left;

  }

  .sidebar .adverts .ad:nth-child(odd) {

    border-right: 2px solid #FFFFFF;

  }

}



/*

TABLET & SMALLER LAPTOPS

This is the average viewing window. So Desktops, Laptops, and

in general anyone not viewing on a mobile device. Here's where

you can add resource intensive styles.

*/

@media only screen and (min-width: 725px) {

  .hide-on-mobile {

    display: block;

  }

  .mobile-only {

    display: none;

  }

  #header-top .search {

    position: relative;

    top: auto;

    right: auto;

  }

  #header-top-left #title {

    clear: none;

    margin-top: 0;

  }

  #header-bottom {

    width: 100%;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

  }

  #header-bottom a#logo {

    margin-right: auto;

  }

  #drawer-nav {

    display: none;

  }

  a#menu-toggle {

    display: none;

  }

  #header-nav {

    display: block;

    height: 100%;

    margin-right: -1px;

  }

  #header-nav a {

    font-size: 13px;

    font-size: 1.3rem;

    line-height: 17.29px;

    line-height: 1.729rem;

    border: 2px solid #FFFFFF;

    border-width: 0 0 2px 2px;

    font-family: 'Poppins', sans-serif;

    height: 100%;

    width: 85px;

    max-width: 90px;

    border-bottom: none;

    padding: 13px 2px;

    white-space: pre-wrap;

  }

  #header-nav a:hover {

    text-decoration: none;

  }

  #header-nav a > br {

    margin-left: -1px;

  }

  .main {

    width: 100%;

    margin-right: -320px;

    float: left;

  }

  .main > .contentArea,

  .main > .nav {

    margin-right: 320px;

  }

  .sidebar {

    width: 300px;

    float: right;

  }

  .sidebar #social-links a {

    display: block;

    float: left;

  }

  .sidebar .adverts {

    border-bottom: 2px solid #333;

  }

  .sidebar .adverts .ad {

    width: 100%;

  }

  .sidebar .adverts .ad:nth-child(odd) {

    border-right: none;

  }

  .sidebar .asides {

    border-bottom: 1px solid #999999;

    padding-bottom: 10px;

    margin-bottom: 10px;

  }

  .sidebar aside {

    width: 50%;

    float: left;

  }

  .sidebar aside header {

    background: #333;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    border-top: 2px solid #333;

    border-bottom: 2px solid #FFFFFF;

    padding-left: 6px;

    padding-top: 5px;

    padding-bottom: 5px;

    text-transform: uppercase;

    color: #FFFFFF;

  }

  .sidebar aside #approved-photo img {

    max-width: 130px;

  }

  .sidebar aside:first-child() {

    padding-right: 10px;

  }

  .sidebar aside#featured-posts {

    background: #CCCCCC;

    margin-right: 15px;

    border-bottom: 2px solid #333;

    -webkit-box-flex: 1;

    -webkit-flex: 1;

        -ms-flex: 1;

            flex: 1;

  }

  .sidebar aside#featured-posts li:not(:last-of-type) {

    border-bottom: 1px solid #999999;

  }

  .sidebar aside#featured-posts li br {

    display: none;

  }

  .sidebar aside#featured-posts li a {

    display: block;

    padding: 8px 6px;

    color: #333;

  }

  .sidebar aside#featured-posts li a:hover {

    background: #ababab;

    text-decoration: none;

  }

  .sidebar aside#sidebar-nav {

    background: #106091;

    width: 130px;

    -webkit-box-flex: 0;

    -webkit-flex: 0 0 130px;

        -ms-flex: 0 0 130px;

            flex: 0 0 130px;

    padding-bottom: 36px;

    position: relative;

  }

  .sidebar aside#sidebar-nav a {

    font-family: 'Poppins', sans-serif;

    text-transform: uppercase;

    color: #FFFFFF;

  }

  .sidebar aside#sidebar-nav header {

    background: #333;

  }

  .sidebar aside#sidebar-nav #social-links {

    position: absolute;

    bottom: 0;

  }

  .sidebar aside#sidebar-nav li {

    background: #333333;

    display: block;

    padding: 0;

  }

  .sidebar aside#sidebar-nav li a {

    background: #106091;

    display: block;

    border-top: 2px solid #106091;

    border-bottom: 2px solid #FFFFFF;

    padding-left: 6px;

    padding-top: 3px;

    padding-bottom: 3px;

  }

  .sidebar aside#sidebar-nav li a:hover {

    border-top: 2px solid #1475b1;    

    background: #1475b1;

    text-decoration: none;

  }

  .rightArea {

    width: 300px;

    float: right;

  }

  #footer .column {

    width: 33%;

    float: left;

  }

}



/*

DESKTOP

This is the average viewing window. So Desktops, Laptops, and

in general anyone not viewing on a mobile device. Here's where

you can add resource intensive styles.

*/

/*

LARGE VIEWING SIZE

This is for the large monitors

*/

/*

SUPERLARGE VIEWING SIZE

This is for the larger monitors and possibly full screen viewers.

*/