/**
 * --------------------------------------------------------------------------------
 * Main Stylesheet
 * --------------------------------------------------------------------------------
*/
.transition(@property) {
    -webkit-transition: @property;
    -ms-transition: @property;
    transition: @property;
}

.transform( @property ) {
    -webkit-transform: @property;
    -ms-transform: @property;
    transform: @property;
}

@primary-color: #f6727f;
@secondary-color: #f8ffae;
@white-color: #fff;
@dark-color: #1e1e1e;
@border-color: #f1f1f1;
@footer-bg-color: #282f35;

@font-size: 1.6rem;
@line-height: @font-size*1.5;
@base-margin: 1.6rem*1.5;
@theme-margin: @line-height*3;

/**
 *
 * #.# General
 *
 */

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.8em;
  line-height: 1.6;
  font-weight: 400;
  font-family: "Open Sans","Lato", "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  background: @white-color;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0 0 1.2rem 0;
}

h1,
h2,
h3 {
	font-family: 'Mulish', sans-serif;
}

h1 {
	font-weight: 900;
	font-size: 4.3rem;
	line-height: 1.2;
	display: inherit;
}

h2 {
	font-weight: 800;
	font-size: 2.8rem;
	line-height: 1.25;
	display: inherit;
}

h3 {
	font-weight: 700;
	font-size: 1.85rem;
	line-height: 1.4;
	display: inherit;
}

h4 {
	font-weight: 700;
	font-size: 1.55rem;
	line-height: 1.7;
	display: inherit;
}

h5 {
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 1.6;
	display: inherit;
}

h6 {
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.6;
	margin: 1.6em 0;
	display: inherit;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style-position: inside;
}

a {
	text-decoration: none;
	color: @dark-color;
	transition: all .3s ease;
}

a, a:hover, a:focus {
	outline: 0;
    @include transition( all 300ms ease );
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Site Branding */

.header-left {
    display: flex;
    align-items: center;
}

.site-branding {
    float: left;
    display: inline-block;
    margin-right: @font-size*1.2;

    .site-title {
        margin-bottom: 0;
        a{
            &:hover {
                color: unset;
            }
        }
    }
}

/* Header Icons */

.prr-iconset {
  display: inline-block;
  float: right;

  > * {
    float: left;
    font-size: @font-size*1.4;
    cursor: pointer;
  }

  .prr-useful {
    margin-left: 20px;
  }
}

// == //

img {
	max-width: 100%;
  display: block;
}

.shadow {
    box-shadow: 0 6px 15px -4px rgba(14, 17, 20, 0.1);
    -ms-box-shadow: 0 6px 15px -4px rgba(14, 17, 20, 0.1);
    -moz-box-shadow: 0 6px 15px -4px rgba(14, 17, 20, 0.1);
    -webkit-box-shadow: 0 6px 15px -4px rgba(14, 17, 20, 0.1);
}

.shadow-spread {
    box-shadow: 0 14px 28px -4px rgba(14, 17, 20, 0.4);
}

.shadow-small {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.text-shadow {
  text-shadow: 2px 4px 3px rgba(0,0,0,0.2);
}

.parallax {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.center-align {
    text-align: center;
}

.vertical-align {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex !important; /** Overrides other display properties to make the contents align vertically **/

	align-items: center;
}

input[type="text"],
input[type="email"],
input[type="submit"] {
    outline: none;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    height: @font-size*2.4;
}

/**
 *
 * #.# Header
 *
 */

/* Header Container */

.site-header {
	background-color: @white-color;
	padding: 1rem 0;
	width: 100%;
	z-index: 9;
	transition: .3s all ease;
  box-shadow: 0 6px 15px -4px rgba(14, 17, 20, 0.1);
  top: 0;

	.row {
		padding: 0;
	}
}

.stuck {
	z-index: 1;
	padding: 0;
	box-shadow: 0 14px 28px -4px rgba( 14,17,20,0.1 );
}

a:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.drm-spacing {
    padding: 7.200000000000001rem 0;
}

.hidden {
  visibility: hidden;
}

/**  Dark Mode Settings **/

.ct-dark-mode {
  background-color: #0b0b0c !important;

  .site-header, .post-content, .block-content {
    background-color: #18191b !important;
  }
  .post-meta .ct-read-time {
    color: #1e1e1e !important;
  }

  *,
  .icon,
  .prr-social a:before,
  span,
  figcaption,
  a,
  p,
  h1,
  h2
  h3,
  h4,
  h5,
  h6, {
    color: #eaedf1 !important;
  }

  .featured-section .featured-title {
    background-color: #18191b;
  }

  .custom-logo {
    display: block;
  }

  .custom-logo-dark {
    display: block;
  }

  .custom-logo-link {
    display: none;
  }

  textarea,
  input[type="text"],
  input[type="email"],
  input[type="submit"] {
    color: #18191b !important;
  }

  .prr-share-icons{
    span{
      color: #18191b !important;
    }
  }

  .site-navigation .main-nav .sub-menu a{
   color: #18191b !important;
  }
  .prr-share-icons a span:before {
    color: #fff !important;
  }

  .comment-body, blockquote{
    background-color:#18191b !important;
  }

  .ct-intro-heading,
  .ct-intro-desc {
    background-color:  #18191b !important;
  }
  .block-content .post-content{
        background-color: unset !important;
  }
}

@media screen and (max-width: 782px) {
    .site-branding {
        h1.site-title{
          font-size:34px;
        }
    }
  .ct-dark-mode{
    .mobile-navigation-open ul > li > a {
      color: #1e1e1e !important;
    }
  }
}


