/*

Template Name: Progression Studios Theme Documentation
Author: Progression Studios
Author URI: https://progressionstudios.com/
Description: Theme Documentation
Version: 1.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html

*/

/*  Table of Contents

01. FONT STYLES
02. MAIN CONTAINERS
03. HEADER STYLES
04. INPUT/TEXTAREA STYLES
05. SCROLL TO TOP
06. CSS3 ANIMATIONS
07. RESPONSIVE STYLES

*/

/*
=============================================== 01. FONT STYLES ===============================================
*/
body, input, textarea, select { 
	font-family: 'Poppins', sans-serif;
	line-height: 1.8; 
	color:#444444;
	font-size:15px;
}

body {
	background:#f0f0f0;
}

strong {
	color:#333333;
	font-weight:600;
}

body hr {
	border-width:1px;
	border-color:rgba(0,0,0,  0.16);
	margin:2rem 0px;	
}

body hr.heading-hr {
	border-width:2px;
	border-color:rgba(0,0,0,  0.75);
	margin:1.4rem 0px 2rem 0px;
}

p {
	margin-bottom: 1.6rem;
}

.aligncenter {
	text-align:center;
}


p.small-paragraph-spacing {
	margin-bottom:1rem;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', sans-serif;
	font-weight:600;
	color:#222222;
	margin-bottom: 0.8rem;
}

h1, .h1 {
  font-size: 3rem;
  letter-spacing:-0.03em;
}

h2, .h2 {
  font-size: 2.25rem;
  letter-spacing:-0.03em;
}

h2 i {
	font-size:1.9rem;
	position:relative;
	top:-2px;
	margin-right:10px;
}

h3, .h3 {
  font-size: 1.75rem;
}

h4, .h4 {
  font-size: 1.4rem;
  font-weight:500;
}

h5, .h5 {
  font-size: 1.25rem;
  font-weight:500;
}

h6, .h6 {
  font-size: 1rem;
  font-weight:500;
}


a {
	color:#f0331b;
}

#content-pro a {
	display:inline-block;
	position:relative;
}

#content-pro a.no-underline:after {
	display:none;
}

#content-pro a:after {
	content:'';
	display:block;
	height:2px;
	width:100%;
	opacity:0.25;
	background:#f0331b;
	position:absolute;
	bottom:1px;
}

#content-pro a:hover:after {
	background:#f0331b;
	opacity:1;
}

a:hover {
	color:#f0331b;
	text-decoration:none;
}


/* Green Mouse Selection Color */
::-moz-selection {
	color:#ffffff;
	background:#f0331b;
}
::selection {
	color:#ffffff;
	background:#f0331b;
}

::selection h2 {
	color:#ffffff;
	background:#f0331b;
}


/*
=============================================== 02. MAIN CONTAINERS ===============================================
*/
#content-pro {
	padding:40px 0px 0px 0px;
	position:relative;
	overflow:hidden;
}


#content-container-docs {
	float:right;
	width: calc(100% - 310px);
	margin:0px;
	padding:0px;
}

.documentation-section-top,
.documentation-section {
	padding:50px 0px 220px 0px;
}

.documentation-section-top {
	padding-top:65px;
	padding-bottom:280px;
}

/* Sidebar Navigation Containers */
nav#sidebar-navigation {
	margin:0px;
	padding:30px 30px 10px 0px;
	width:260px;
	float:left;
	background:#ffffff;
	position:relative;
	z-index:25;
}

body:after  {
	display:block;
	position:fixed;
	top:0px;
	left:0;
	content:'';
	width:30%;
	height:100%;
	background:#ffffff;
}


#content-pro:after {
	display:block;
	position:absolute;
	top:0px;
	left:50%;
	margin-left:-550px;
	content:'';
	width:240px;
	height:100%;
	background:#ffffff;
	box-shadow: 0px 0px 12px rgba(0,0,0,  0.08);
}

nav#sidebar-navigation.sticky {
	position: fixed;
	top:0px;
}

nav#sidebar-navigation ul {
	list-style:none;
	margin:0px;
	padding:0px;
}

nav#sidebar-navigation ul li {
	line-height:1;
	margin:0px 0px 0px 0px;
	padding:0px;
}

nav#sidebar-navigation ul li a {
	display:block;
	color:rgba(0,0,0,  0.5);
	border-left:3px solid rgba(0,0,0,  0);
	padding:11px 0px 11px 12px;
	font-size:14px;
	font-weight:500;
	letter-spacing:-0.01em;
	
	border-top-right-radius: 33px;
	border-bottom-right-radius: 33px;
}

nav#sidebar-navigation ul li i {
	padding-right:5px;
}

nav#sidebar-navigation ul li a:after {
	display:none;
}


nav#sidebar-navigation ul li a:hover {
	border-color:#f1f3f4;
	color:rgba(0,0,0,  0.8);
	background:#f1f3f4;
}

nav#sidebar-navigation ul li a.current {
	color:#f0331b;
	border-color:#f0331b;
	background:#fce8e6;
}

img {
	max-width:100%;
	height:auto;
}

.noselect {
	-webkit-touch-callout: none; 
	-webkit-user-select: none;  
	-khtml-user-select: none;  
	-moz-user-select: none;  
	-ms-user-select: none; 
	user-select: none;
}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}



/*
=============================================== 03. HEADER STYLES ===============================================
*/
header#masthead-pro h1 img {
	width:226px;
	margin:18px 0px 18px 0px;
}

header#masthead-pro {
	position:relative;
	z-index:50;
	background:#000000;
	padding:0px;
	/* box-shadow: 0px 0px 10px rgba(0,0,0,  0.06); */
}


header#masthead-pro h1 {
	line-height:1;
	font-size:5px;
	margin:0px 0px 0px 0px;
	padding:0px;
	float:left;
}


ul#navigation {
	list-style:none;
	margin:0px;
	float:right;
	padding:0px 0px 0px 0px;
}

ul#navigation li {
	margin:0px;
	padding:19px 0px 0px 0px;
	float:left;
}

ul#navigation li a {
	line-height:1;
	padding:12px 23px 11px 23px;
	border-radius:30px;
	display:inline-block;
	font-weight:600;
	font-size:12px;
	margin-left:18px;
	text-transform:uppercase;
	color:#ffffff;
	border:2px solid #555555;
}

ul#navigation li:last-child a:hover,
ul#navigation li a:hover {
	background:#555555;
	border-color:#555555;
}

ul#navigation li:last-child a {
	background:#f0331b;
	border-color:#f0331b;
}

ul#navigation li i {
	margin-right:4px;
	font-size:14px;
}



/*
=============================================== 04. INPUT/TEXTAREA STYLES ===============================================
*/
#search-mobile-nav-pro input:focus,
select.custom-select:focus,
.form-group input:focus, 
.form-group textarea:focus {
	outline:none;
	box-shadow:none;
}

.form-group input, .form-group textarea {
	border-color:#dddddd;
	padding-top:10px;
	padding-bottom:10px;
	font-size:14px;
}

.form-group {
	margin:18px;
}

.form-group ::-webkit-input-placeholder {
  color:#aaaaaa;
}
.form-group ::-moz-placeholder {
  color: #aaaaaa;
}
.form-group :-ms-input-placeholder {
  color:#aaaaaa;
}
.form-group :-moz-placeholder {
  color: #aaaaaa;
}

/*
=============================================== 05. SCROLL TO TOP ===============================================
*/
/* Scroll to top */
#pro-scroll-top {
	display: block; 
	position: fixed; 
	overflow: hidden; 
	white-space: nowrap; 
	visibility: hidden; 
	opacity: 0;
	text-align:center;
	
	z-index:100;
	padding:0px;
	margin:0px;
  	bottom: 0px; 
	right: 30px;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	color:#ffffff;
	background:rgba(0,0,0,  0.3);
	
	height: 31px;
	width: 42px;
	font-size:12px;
}

#pro-scroll-top:hover {
	height:35px;
}

#pro-scroll-top .fa-chevron-up {
	position:absolute;
	top:10px;
	left:16px;
}

#pro-scroll-top:hover {
	color:#ffffff;
	border-color:#f0331b;
	background:#f0331b;	
}


#pro-scroll-top.cd-is-visible {
	visibility: visible;
	opacity: 1;
}




/*
=============================================== 06. CSS3 ANIMATIONS ===============================================
*/
.btn, a, .form-group input, .form-group textarea {
	transition-duration: 300ms; 
	transition-property: color, background-color, border; 
	transition-timing-function: ease-in-out;
}

.btn {
	transition-duration: 300ms; 
}


#content-pro a:after,
#pro-scroll-top {
	transition-duration: 250ms; 
	transition-property: all; 
	transition-timing-function: ease-in-out;
}

.example-no-css3 {
	-webkit-transition-duration: 0ms !important;
	-moz-transition-duration: 0ms !important;
	-o-transition-duration: 0ms !important;
	transition-duration: 0ms !important;
}


/*
=============================================== 07. RESPONSIVE STYLES ===============================================
*/


/* Changing Default Bootstrap Container To Be Fluid Instead of Jumping */

@media (max-width: 1600px) {
	body:after {
		width:20%;
	}
}

@media (min-width: 1200px) {
  .width-container-pro,
  #content-pro {
    max-width: 1140px;/* Default Setting */
	margin:0 auto;
  }
}



/* ======== #DESKTOP (959px-1100px) ======== */
@media only screen and (min-width: 959px) and (max-width: 1200px) {

	
    .width-container-pro,
    #content-pro {
    	width:calc(100% - 40px);
		margin:0 auto;
    }

	nav#sidebar-navigation {
		padding:30px 20px 0px 0px;
		width:240px;
	}
	
	#content-pro:after {
		left:0;
		margin-left:0px;
		width:240px;
	}
	
	#content-container-docs {
		float:right;
		width: calc(100% - 280px);
		margin:0px;
		padding:0px;
	}
	
	body:after  {
		width:10%;
	}
	
}

/* ======== #Tablet (768px-959px) ======== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
    .width-container-pro {
    	width:calc(100% - 40px);
		margin:0 auto;
    }
	
	#content-pro:after, body:after  {
		display:none ;
	}
	
	#content-pro {
		padding-top:0px;
	}
	
	nav#sidebar-navigation {
		margin:0px;
		padding:30px 30px 20px 30px;
		width:auto;
		float:none;
		background:#ffffff;
		position:relative !important;
		z-index:25;
		box-shadow: 0px 0px 12px rgba(0,0,0,  0.08);
	}
	
	#content-container-docs {
		float:none;
    	width:calc(100% - 40px);
		margin:0 auto;
	}
	
	
}

/* ======== #Mobile (0px-767px) ======== */
@media only screen and (max-width: 767px) {
	
    .width-container-pro {
    	width:calc(100% - 20px);
		margin:0 auto;
    }
	
	#content-pro:after, body:after  {
		display:none ;
	}
	
	#content-pro {
		padding-top:0px;
	}
	
	nav#sidebar-navigation {
		margin:0px;
		padding:30px 30px 20px 30px;
		width:auto;
		float:none;
		background:#ffffff;
		position:relative !important;
		z-index:25;
		box-shadow: 0px 0px 12px rgba(0,0,0,  0.08);
	}
	
	#content-container-docs {
		float:none;
    	width:calc(100% - 40px);
		margin:0 auto;
	}
	
	ul#navigation {
		display:none;
	}
	
	body, input, textarea, select { 
		font-size:14px;
	}
	
	h1, .h1 {
	  font-size: 1.8rem;
	}

	h2, .h2 {
	  font-size: 1.4rem;
	}

	h2 i {
		font-size:1.2rem;
	}

	h3, .h3 {
	  font-size: 1.1rem;
	}

	h4, .h4 {
	  font-size: 1rem;
	}

	h5, .h5 {
	  font-size: 0.9rem;
	}

	h6, .h6 {
	  font-size: 0.8rem;
	}
	
	
	
}