/*   
Theme Name: CoP theme 2.0
Theme URI: http://circleofprotection.us
Description: Theme for the Circle of Protection website
Author: Reed Wacker
Author URI: http://reedwacker.com
Version: 2.0
*/

/* 
COLORS
brand red orange #f05324
brown #513c40
light grey #999
light light grey #ececec
*/

::selection { background-color: #f05324 !important; color: #fff !important }

@media only screen {
body {
  background: white;
  color: #513c40;
  font-family: Verdana, Geneva, sans-serif;
}

h1, h2, h3, h4, h5, h6, .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
  color: #513c40;
  font-family: 'Gotham A', 'Gotham B';
  font-weight: 700;
  font-style: normal;
}

h3 { margin-top: 30px !important }

.cop-callout, #text-18 {
  background: #fff;
  border: 2px solid #f05324;
  border-radius: 3px;	
  padding: 10px;
  margin-bottom: 15px;
  text-align: center;
}
  
a {
  color: #f05324;
  text-decoration: none;
  line-height: inherit; 
}

a:hover, a:focus {
    color: #fd7b0d; 
}

.vid-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 60%;
    margin-bottom: 1em;
    margin-top: 2.5em;
}

.vid-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
  
::selection {
  background: #fff100;
  color: #08d;
  text-shadow: none;
}     

/*cop STYLES*/
/* NAVIGATION */
  #nav {
    font-family: 'Gotham A', 'Gotham B';
                font-weight: 700;
                font-style: normal;
                font-size: 1.125em;
    margin: 0 auto;
    padding: 10px;
    text-align: left;
    border-top: 1px solid #ddd;
                max-width: 1050px;
    }
    
    #nav ul {
      padding:0;
      }
    
    #nav li {
      display: inline;
      text-transform: uppercase;
      list-style-type: none;
      color: #513c40;
      padding-left: 25px;
      margin-right: 18px;
      }
    
      #nav li a {
        color: #513c40;
        text-decoration: none;
        }
      
      #nav li a:hover, #nav li.current_page_item a {
        color: #f05324;
        text-decoration: none;
        }
      
      #nav li+li { border-left: 1px solid #ccc; }  

.desktop-frame {
  border: 1px solid #ccc;
  padding: .6em;
  }
  
.panel {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  border-radius: 3px;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #fff;
  color: #333333;
}

.infotype {font-size: 0.938em;}
.quotetype {color: #999; font-size:0.7em; line-height: 150%; margin-left: 8px;}
.topspacefoot {margin-top: .6em;} 
.topspace {margin-top: 1.3em;}
.topspace2 {margin-top: 1.7em;}
.topspace25 {margin-top: 2.4em;}
.topspace3 {margin-top: 3em;}  
.topspace4 {margin-top: 4em;}
.topspace5 {margin-top: 5.4em;}
.bottomspace {margin-bottom: .2em;}
.orange {color: #f05324;}
.grey {color: #ccc;}

#sidr-right, #right-menu {
  display: none;
}


/* Full Sidr Menu */
.menu-icon {
       font-size: 1.5rem; 
}
  
.sidr ul li {
  border: none !important;
}
    
.sidr ul li a:hover {
  background-color: #f05324;
  border: none !important;
}

.sidr ul li:hover>a {
  box-shadow: none !important; 
}



/*CONTACT FORM*/
#fscf_name1, #fscf_email1, .wpcf7-form-control-wrap input, .wpcf7-form-control-wrap textarea {
  border: 1px solid #999;
        height: 5%;
        width: 80% !important;
        padding: 5px;
  }

.wpcf7-submit {
  color: #fff;
    padding: .5em 1em;
  background-color: #f05324;
    border: 1px solid #f05324;
  }

#searchsubmit {border: 2px solid #1681F6; padding: .4em; background: #149869; color: #fff;}

.bigtype {font-size: 1.313em;}

/* WP Slider Plugin take off the border */
  #slider_101 {
    /* border: none; */
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 3px !important;
    box-shadow:none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    } 

  .slide_image { border-radius: 3px !important }
  .slide { border-radius: 3px !important }
  .slides { border-radius: 3px !important }
  .rd1 { border-radius: 3px !important }
  .rd2 { border-radius: 4px !important }
  .rd3 { border-radius: 5px !important }

/* Wrap for sticky footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -80px;
}

.footer-push { 
  height: 80px; /* '.push' must be the same height as 'footer' */
  margin-top: 25px;  
}
.copfooter-full-width {
  border-top: 3px solid #999;
  background: #ececec;
  width: 100%;
  padding: 2em 1em 1em 1em;
  margin-top: 1em;
  }

.addthis_button_pinterest_share, .addthis_button_compact, .addthis_counter, .addthis_bubble_style, .addthis_button_expanded {display:none !important;}  
a.addthis_counter.addthis_bubble_style {display:none !important;}

/* Image Thumbnails */
.th {
  line-height: 0;
  display: inline-block;
  border: solid 4px #ececec;
}
.th:hover, .th:focus {
    -webkit-box-shadow: 0 0 6px 1px rgba(0, 143, 197, 0.5);
    box-shadow: 0 0 6px 1px rgba(0, 143, 197, 0.5);
}
.th.radius {
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

a.th { display: inline-block; }

.th-right {float: left; margin: 0 10px 10px 0;}
.th-left {float: right; margin: 0 0 10px 10px;}

.photo-credit {text-align: right; line-height: 100% !important; margin-top: -5px !important; color: #ccc !important; font-size: 12px;}

#text-4 p, #text-17 p, #text-19 p, #text-20 p {
  font-family: inherit;
    font-weight: normal;
    font-size: 0.875em;
    line-height: 1.5;
    margin-bottom: 1.25em;
    text-rendering: optimizeLegibility; }

#iclw-2 {
  list-style: none; }

#iclw-2 ul li, .widget_ultimate_posts ul li {
  list-style: none;}

p.post-title {margin-bottom: 0; font-size:0.850em;}
p.post-excerpt {font-size:0.750em; line-height: 150%;} 

/* Blockquotes */
blockquote {
  margin: 0 0 1.25em;
  padding: 0.5625em 1.25em 0.05em 1.1875em;
  border-left: 4px solid #f05324;
  font-size: 0.875em;
  font-style: italic;
  border-radius: 3px !important;
  background: #ececec;}
  blockquote cite {
    display: block; }
    blockquote cite:before {
      content: "\2014 \0020"; }
    blockquote cite a,
    blockquote cite a:visited {
      color: #555555; }

blockquote,
blockquote p {
  line-height: 1.6;}

.label {
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  padding: 0.25em 0.625em 0.3em;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.875em;
  background-color: #f05324;
  color: #fff;
  border-radius: 3px !important;
}

.widget_ultimate_posts ul {
  margin-left: 0;
}

/* WordPress specific */

.widget-title {
  font-size: 1.15rem;
}

#post-title {
  font-size: 2rem;
}

} /* END screen media */

span.full-screen { display: inline-block }
span.small-screen { display: none }

@media only screen and (min-width: 786px) and (max-width: 921px) {

#nav li {
  font-size: 15px;
  padding-left: 15px;
  margin-right: 9px;
}

}

@media only screen and (min-width: 641px) and (max-width: 786px) {

#nav li {
  font-size: 13px;
  padding-left: 6px;
  margin-right: 6px;
}

}

@media only screen and (min-width: 0px) and (max-width: 641px) {

p.lead {
  font-size: 16px;
}

.mobile-space {
    display:block;
    margin-top:75px;
}

span.full-screen { display: none !important }
span.small-screen { display: inline-block !important }

}


@media print {

#comments { page-break-before: always; }
body { width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 1.4; word-spacing: 1.1pt; letter-spacing: 0.2pt; font-family: Garamond,"Times New Roman", serif; color: #000; background: none; font-size: 12pt; }
h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; }
h1 { font-size: 19pt; }
h2 { font-size:17pt; }
h3 { font-size:15pt; }
h4,h5,h6 { font-size:12pt; }
code { font: 10pt Courier, monospace; } 
blockquote { margin: 1.3em; padding: 1em; }
img { display: block; margin: 1em 0; border-radius: 3px }
a img { border: none; }
caption { background: #fff; margin-bottom: 2em; text-align: left; }
a { text-decoration: none; color: black; }
  
} /* END print media */


/* Comments form additions */

#respond { 
background: #ececec;
padding:0 5px 0 5px;
}

/* Highlight active form field */

#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
/* Misc additions */ 

#respond input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); margin: 5px 1px 3px 0px; border: 1px solid rgba(81, 203, 238, 1); }
p.comment-form-url, p.form-allowed-tags, #reply-title { display: none; }
.comment-respond { padding: 10px 20px !important; font-size: 12px; background: none !important; }
p.form-submit input { padding: 5px 10px !important; }
.signatures-container { display: flex; flex-flow: row wrap; justify-content: space-around; }
.signatures-item { width: 280px; margin-top: 15px; }
.pr1 { margin-bottom: 1.25em !important }
.tweet-tn { margin-bottom: 16px; filter: grayscale(1) !important }
.tweet-tn:hover { filter: grayscale(0.1) !important }
.videos-subhead { margin-top: 32px; }
.tweet-tn span { padding-left: 8px }
.tweet-full-width { width: 99%; margin: 2px; filter: grayscale(1) !important; border: solid 4px #ececec }
.tweet-full-width:hover { box-shadow: 0 0 6px 1px rgba(0, 143, 197, 0.5); filter: grayscale(0.1) !important; border: solid 4px #ececec;}
.row.video-tn { font-size: 80%; font-style: italic }
.row.video-tn img { margin-bottom: 8px }
.spacious-below { margin-bottom: 24px }
.spacious-above { margin-top: 24px }
.slider-mod { margin-bottom: 24px }
.slider-mod > * { border-radius: 3px }
.article-callout { color: #000; padding: 24px 32px 24px 24px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; min-height: 120px; margin: 16px 0; line-height: 28px }
.article-callout img { float: left; margin-right: 24px; margin-bottom: 16px; width: 104px; height: auto; border-radius: 3px; filter: saturate(50%); transition-property: filter; transition-duration: 300ms; }
.article-callout img:hover { filter: saturate(100%) }
.article-callout a { font-weight: 600 }
.article-callout span { padding-right: 8px }

/* new styles for quotes carousel */

.sm-content-slider {
  width: 100%;
  height: 360px;
}

.sm-slider {
  height: 305px;
  width: 100%;
  margin: 20px auto 0;
  padding: 10px 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  overflow: visible;
  position: relative;
}

.sm-mask {
  overflow: hidden;
  height: 285px;
}

.sm-slider ul {
  margin: 0;
  padding: 0;
  position: relative;
}

.sm-slider li {
  width: 100%;
  height: 285px;
  position: absolute;
  top: -285px;
  list-style: none;
}

.sm-slider .quote {
  font-size: 16px;
  font-style: italic;
}

.sm-slider .source {
  font-size: 16px;
  font-weight: 700;	
  margin-top: 8px;
  text-align: right;
}

.sm-slider li.anim1 {
  animation: cycle1 50s linear infinite;
}

.sm-slider li.anim2 {
  animation: cycle2 50s linear infinite;
}

.sm-slider li.anim3 {
  animation: cycle3 50s linear infinite;
}

.sm-slider li.anim4 {
  animation: cycle4 50s linear infinite;
}

.sm-slider li.anim5 {
  animation: cycle5 50s linear infinite;
}

.sm-slider li.anim6 {
  animation: cycle6 50s linear infinite;
}

.sm-slider li.anim7 {
  animation: cycle7 50s linear infinite;
}

.sm-slider li.anim8 {
  animation: cycle8 50s linear infinite;
}

.sm-slider li.anim9 {
  animation: cycle9 50s linear infinite;
}

.sm-slider li.anim10 {
  animation: cycle10 50s linear infinite;
}

.sm-slider:hover li {
  animation-play-state: paused;
}

@keyframes cycle1 {

    0% {   top: 0; opacity: 1; }
    2% {   top: 0; opacity: 1; }
    8% {   top: 0; opacity: 1; z-index: 0 } /* visible for 3s from 2% to 8% */
    10% {  top: 285px; opacity: 0; z-index: 0 } /* exiting for 1s from 8% to 10% */
    11% {  top: -285px; opacity: 0; z-index: -1; } /* return to first position */
    96% {  top: -285px; opacity: 0; z-index: 0; }
    98% {  top: -285px; opacity: 0; } 
    100% {  top: 0; opacity: 1; }
    
}

@keyframes cycle2 {

    0% {   top: -285px; opacity: 0; } /* original position */
    8% {  top: -285px; opacity: 0; } /* starts moving after 8% to this position */
    10% {  top: 0px; opacity: 1; } 
    12% {  top: 0px; opacity: 1; } /* from 10% to 12% for 1s to enter view */
    18% {  top: 0px; opacity: 1; } /* visible for 3s from 12% to 18% */
    20% {  top: 285px; opacity: 0; z-index: 0;  } /* 1s to exit */
    21% {  top: -285px; opacity: 0; z-index: -1;  } /* return to first position */
    100% { top: -285px; opacity: 0; z-index: -1; }

}

@keyframes cycle3 {

    0% {   top: -285px; opacity: 0; } /* original position */
    18% {  top: -285px; opacity: 0; } /* starts moving after 18% to this position */
    20% {  top: 0px; opacity: 1; } 
    22% {  top: 0px; opacity: 1; } /* from 20% to 22% for 1s to enter view */
    28% {  top: 0px; opacity: 1; } /* visible for 3s from 22% to 28% */
    30% {  top: 285px; opacity: 0; z-index: 0;  } /* 1s to exit */
    31% {  top: -285px; opacity: 0; z-index: -1;  } /* return to first position */
    100% { top: -285px; opacity: 0; z-index: -1; }

}

@keyframes cycle4 {

    0% {   top: -285px; opacity: 0; } /* original position */
    28% {  top: -285px; opacity: 0; } /* starts moving after 28% to this position */
    30% {  top: 0px; opacity: 1; } 
    32% {  top: 0px; opacity: 1; } /* from 30% to 32% for 1s to enter view */
    38% {  top: 0px; opacity: 1; } /* visible for 3s from 32% to 38% */
    40% {  top: 285px; opacity: 0; z-index: 0;  } /* 1s to exit */
    41% {  top: -285px; opacity: 0; z-index: -1;  } /* return to first position */
    100% { top: -285px; opacity: 0; z-index: -1; }

}

@keyframes cycle5 {

    0% {   top: -285px; opacity: 0; } /* original position */
    38% {  top: -285px; opacity: 0; } /* starts moving after 38% to this position */
    40% {  top: 0px; opacity: 1; } 
    42% {  top: 0px; opacity: 1; } /* from 40% to 42% for 1s to enter view */
    48% {  top: 0px; opacity: 1; } /* visible for 3s from 42% to 48% */
    50% {  top: 285px; opacity: 0; z-index: 0;  } /* 1s to exit */
    51% {  top: -285px; opacity: 0; z-index: -1;  } /* return to first position */
    100% { top: -285px; opacity: 0; z-index: -1; }

}

@keyframes cycle6 {

    0% {   top: -285px; opacity: 0; } /* original position */
    48% {  top: -285px; opacity: 0; } /* starts moving after 48% to this position */
    50% {  top: 0px; opacity: 1; } 
    52% {  top: 0px; opacity: 1; } /* from 50% to 52% for 1s to enter view */
    58% {  top: 0px; opacity: 1; } /* visible for 3s from 52% to 58% */
    60% {  top: 285px; opacity: 0; z-index: 0;  } /* 1s to exit */
    61% {  top: -285px; opacity: 0; z-index: -1;  } /* return to first position */
    100% { top: -285px; opacity: 0; z-index: -1; }

}

@keyframes cycle7 {

    0% {   top: -285px; opacity: 0; } /* original position */
    58% {  top: -285px; opacity: 0; } /* starts moving after 58% to this position */
    60% {  top: 0px; opacity: 1; } 
    62% {  top: 0px; opacity: 1; } /* from 60% to 62% for 1s to enter view */
    68% {  top: 0px; opacity: 1; } /* visible for 3s from 62% to 68% */
    70% {  top: 285px; opacity: 0; z-index: 0;  } /* 1s to exit */
    71% {  top: -285px; opacity: 0; z-index: -1;  } /* return to first position */
    100% { top: -285px; opacity: 0; z-index: -1; }

}

@keyframes cycle8 {

    0% {   top: -285px; opacity: 0; } /* original position */
    68% {  top: -285px; opacity: 0; } /* starts moving after 68% to this position */
    70% {  top: 0px; opacity: 1; } 
    72% {  top: 0px; opacity: 1; } /* from 70% to 72% for 1s to enter view */
    78% {  top: 0px; opacity: 1; } /* visible for 3s from 72% to 78% */
    80% {  top: 285px; opacity: 0; z-index: 0;  } /* 1s to exit */
    81% {  top: -285px; opacity: 0; z-index: -1;  } /* return to first position */
    100% { top: -285px; opacity: 0; z-index: -1; }

}

@keyframes cycle9 {

    0% {   top: -285px; opacity: 0; } /* original position */
    78% {  top: -285px; opacity: 0; } /* starts moving after 78% to this position */
    80% {  top: 0px; opacity: 1; } 
    82% {  top: 0px; opacity: 1; } /* from 80% to 82% for 1s to enter view */
    88% {  top: 0px; opacity: 1; } /* visible for 3s from 72% to 78% */
    90% {  top: 285px; opacity: 0; z-index: 0;  } /* 1s to exit */
    91% {  top: -285px; opacity: 0; z-index: -1;  } /* return to first position */
    100% { top: -285px; opacity: 0; z-index: -1; }

}

@keyframes cycle10 {

    0% {   top: -285px; opacity: 0; } /* original position */
    88% {  top: -285px; opacity: 0; } /* starts moving after 88% to this position */
    90% {  top: 0px; opacity: 1; } 
    92% {  top: 0px; opacity: 1; } /* from 90% to 92% for 1s to enter view */
    98% {  top: 0px; opacity: 1; } /* visible for 3s from 92% to 98% */
    100% {  top: 285px; opacity: 0; z-index: 0;  } /* 1s to exit */

}