/**
 * Theme Name: Courselog
 * Theme URI: https://themeforest.net/user/tripples/portfolio
 * Description: This is a skull theme which we use to develope new themes. 
 * textdomain: Courselog,
 * class: Courselog,
 * var: $Courselog_,
 * constants: COURSELOG_, function: courselog
 *
 */


/* Table of Content
********************************

1.	Typography
2.  Global Styles (body, link color, gap, ul, section-title, overlay etc)
3.  Header area
4.	Banner area


# Reset & Basics
# Basic
# Typography
# Links
# Buttons
# Menu
# Main Content
# Core WordPress
# Search
# Blog
# Widget
# Footer
# Resonsive
*/

@import 'variable';
@import 'mixin';

/* Typography
================================================== */



body {
   font-family: $manrope;
   line-height: 28px;
   font-size: 16px;
   color: #58566B;
   font-weight: 400;
   border: 0;
   margin: 0;
   padding: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6{
   color: $title-color;
   font-family: $manrope;
   font-weight: 700;
}


h1 {
   font-size: 48px;
   line-height: 52px;
}

h2 {
   font-size: 36px;
   line-height: 42px;
}

h3 {
   font-size: 30px;
   margin-bottom: 20px;
}

h4 {
   font-size: 24px;
   line-height: 28px;
}

h5 {
   font-size: 20px;
   line-height: 24px;
}

h6 {
   font-size: 18px;
   line-height: 24px;
}

.entry-content,
.comment-content {
  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 30px;
  }

  h3 {
    font-size: 24px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 16px;
  }

  h6 {
    font-size: 14px;
  }
  h1,h2,h3,h4,h5,h6{
    margin: 32px 0;
  }
}
/* Global styles
================================================== */


iframe {
   border: none;
}
a:focus,
a:active,
input,
input:hover,
input:focus,
input:active,
textarea,
textarea:hover,
textarea:focus,
textarea:active {
	-moz-outline: none;
	outline: none;
}
a:active,
a:focus,
a:hover,
a:visited {
	text-decoration: none;
	outline: 0;
}


a {
   color: $title-color;
   @include transition();
}

a:hover {
   text-decoration: none;
   color: $primary-color;
}

a.read-more {
   color: $primary-color;
   font-weight: 700;
}

a.read-more:hover {
   color: #222;
}

.media>.pull-left {
   margin-right: 20px;
}

a:focus {
   outline: 0;
}

img.pull-left {
   margin-right: 20px;
   margin-bottom: 20px;
}

img.pull-right {
   margin-left: 20px;
   margin-bottom: 20px;
}
.pull-left{
   float: left !important;
}
.pull-right{
   float: right !important;
}

.unstyled {
   list-style: none;
   margin: 0;
   padding: 0;
}
.mb-60{
   margin-bottom: 60px;
}
.mb-80{
   margin-bottom: 80px;
}
/* Dropcap */
.dropcap {
   font-size: 48px;
   line-height: 60px;
   padding: 0 7px;
   float: left;
   font-weight: 700;
   margin: 5px 15px 5px 0;
   position: relative;
   text-transform: uppercase;
}

.btn,
.place-order-action .lp-button,
.learnpress-page .lp-button,
.learn-press-form-login form button,
#learn-press-pmpro-notice.purchase-course a{
	display: inline-block;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   font-size: 14px;
	line-height: 1.5;
	text-transform: uppercase;
   padding: 12px 40px;
   font-weight: 600;
   @include border-radius(5px);
   @include transition();
   i{
      margin-left: 10px;
   }
}

.btn-primary,
.learn-press-form-login form button,
.learnpress-page .lp-button,
.place-order-action .lp-button,
#learn-press-pmpro-notice.purchase-course a{
	background: $primary-color;
	color: #fff;
	border: 1px solid $primary-color;
   margin-right: 5px;
   text-transform: capitalize;
	&:hover,&:active{
		background: $secondary-color;
		color: #fff;
		border-color: $secondary-color;
		box-shadow: none;
	}
}

// form-control
.form-control{
   height: 50px;
   font-size: 14px;
   line-height: 28px;
   padding: 0 25px;
   border-radius: 0;
   &:focus{
      border-color: $primary-color;
      outline: none;
      box-shadow: none;
   }
}

.widget-title{
   font-size: 20px;
   line-height: 26px;
}
/* Title*/
.ts-title{
   font-size: 24px;
   line-height: 28px;
}


.sub-title{
   display: block;
   font-size: 17px;
   color: #555;
}

// overlay
.overlay {
   position: relative;
   z-index: 1;
   &:before {
      @include absolute();
      width: 100%;
      height: 100%;
      content: '';
      background: rgba(0, 0, 0, 0.68);
      z-index: -1;
   }
}


.main-container {
   padding: 100px 0;
   &.blog-single {
      padding-bottom: 50px;
   }
}

// owl-carousel
.owl-carousel {
   .owl-dots{
      text-align: center;
      .owl-dot {
         width: 8px;
         height: 8px;
         border-radius: 50%;
         background: rgba(#120F2D, 0.15);
         display: inline-block;
         opacity: 1;
         margin: 0 5px;
         opacity: 1;
         &.active {
           background: $primary-color;
         }
      }
   }
   .owl-nav{
      .owl-prev,
      .owl-next{
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         font-size: 48px;
         color: #666666;
      }
      .owl-prev,
      .owl-next{
         height: 50px;
         width: 50px;
         @include border-radius(50%);
         border: 1px solid #dedfe2;
         color: $title-color;
         display: inline-block;
         text-align: center;
         font-size: 16px;
         line-height: 50px;
         @include transition();
         &:hover{
            color: #fff;
            background: $primary-color;
            border-color: $primary-color;
         }
      }
      .owl-prev{
         left: 30px;
      }
      .owl-next{
         right: 30px
      }
   }
}

.img-link{
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: 1;
}

.meta-list{
   margin-bottom: 15px;
   a{
      background: #1DC295;
      display: inline-block;
      border-radius: 3px;
      font-size: 12px;
      font-weight: 600;
      padding: 0px 10px;
      color: $white-color !important;
      text-transform: capitalize;
      &:hover{
         color: $white-color;
      }
      &:nth-child(odd){
         background-color: #FFA100;
      }
      &:nth-child(3){
         background: #14C6EB;
      }
   }
}

// gutter setting 
@for $g from 2 through 3 {
	.ts-gutter-#{$g}0px{
		margin-top: - ($g*10px)/2 !important;
		margin-bottom: - ($g*10px)/2 !important;
		> div{
			padding-top: ($g*10px)/2 !important;
			padding-bottom: ($g*10px)/2 !important;
		}
	}
}

.ts-social {
   padding: 0;
   margin-bottom: 22px;

   li {
      list-style: none;
      display: inline-block;

      a {
         width: 36px;
         height: 36px;
         @include border-radius(50%);
         border: 1px solid #eaeaea;
         display: inline-block;
         line-height: 34px;
         font-size: 14px;
         color: $title-color;
         margin-right: 10px;
         text-align: center;

         &:hover {
            background: $primary-color;
            color: #fff;
         }
      }

      &:last-child {
         a {
            margin-right: 0;
         }
      }

      &.ts-facebook {
         a {
            &:hover {
               background: #3b5998;
            }
         }
      }

      &.ts-twitter {
         a {
            &:hover {
               background: #55acee;
            }
         }
      }

      &.ts-pinterest {
         a {
            &:hover {
               background: #bd081c;
            }
         }
      }

      &.ts-linkedin {
         a {
            &:hover {
               background: #0077b5;
            }
         }
      }

      &.ts-whatsApp {
         a {
            &:hover {
               background: #43d854;
            }
         }
      }

      &.ts-instagram {
         a {
            &:hover {
               background: #3f729b;
            }
         }
      }

      &.ts-youtube {
         a {
            &:hover {
               background: #cd201f;
            }
         }
      }
   }
}