/*!
Theme Name: qortal
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: qortal
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

qortal is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*08/02/2021*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
body{ margin: 0; padding: 0; color: #000063; font-size: 16px; font-weight: 400; font-family: 'Montserrat', sans-serif;}
a{ text-decoration: none !important; color: #0090D6; }
a:hover, a:focus, a:active { color: #000063; outline: none;}
p{ line-height: 32px; margin-bottom: 30px; }
h1{ font-size: 50px; font-weight: 500;}
h2{ font-size: 42px; font-weight:500; color: #000063; }
h3{ font-size: 30px; color: #0090D6; }
h4{ font-size: 25px; }
h5{ font-size: 22px; }

.btn.btn-outline-primary{ padding: 20px 25px; font-size: 17px; font-weight: 600; border-color: #008FD5; color: #008FD5; border-width: 3px; border-radius: 6px; }
.btn.btn-outline-primary:hover {color: #fff; background-color: #008FD5; border-color: #008FD5; }
.site-header{ padding: 57px 0; position: absolute; left: 0; right: 0; z-index: 2; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
.site-header img{ width: auto; max-height: 95px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
.site-header.sticky {position: fixed !important; width: 100%; background: #ffffff; padding: 10px 0; box-shadow: 0 3px 5px rgb(0 0 0 / 10%); }
.site-header.sticky img{ max-height: 55px;}

.site-header .logo{ float: left; }
.site-header .navbar{ float: right; width: 100%; }
.site-header .navbar .navbar-collapse{-webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;}
.site-header .navbar li{ padding:0px  20px; }
.navbar-light .navbar-nav .nav-link{ font-size: 22px; font-weight: 600; text-transform: uppercase; color:#002C69 !important;  }
.navbar-light .navbar-nav .nav-link:hover{ color: #209ef0 !important; }
.navbar-light .navbar-nav li.current-menu-item .nav-link{ color: #209ef0 !important; }


.hero-section{ padding: 310px 0 168px 0; background-size: cover !important; background-position: center right !important; background-attachment: fixed !important;}
.hero-section h1{ color: #002C69; font-weight: 600;  }
.hero-section h3{ color: #17C1F3; }
.hero-section .hero-caption p{ font-size: 23px; line-height: 41px; }
.hero-section .btn{ margin-top: 20px; }

/*footer*/
.site-footer{ background-color: #050133; padding: 75px 0 60px 0; text-align: center; color: #fff;}
.site-footer .footer-logo { margin-bottom: 60px; }
.site-footer .footer-menu{ padding-bottom: 100px; }
.site-footer .footer-menu ul{ margin: 0; padding: 0; list-style: none; }
.site-footer .footer-menu ul li{ margin: 0; padding: 0; display: inline-block; padding: 0 22px; }
.site-footer .footer-menu ul li a{ font-size: 24px; font-weight: 600; text-transform: uppercase; color: #fff; text-decoration: none; }
.site-footer .footer-menu ul li a:hover{ color: #209ef0; }
.site-footer .copyright{ color: rgba(255,255,255,0.4); font-size: 20px; font-weight: 600; }

/*pop-section*/
.pop-section{ padding: 134px 0 180px 0; background-color: #F7F7F7; }
.pop-section .pop-left-content{ padding-right: 200px; }
.pop-section .pop-left-content a{ font-weight: 600; color: #0090D6; }
.pop-section .pop-left-content a:hover{ color: #000063; }
.pop-section .pop-right{ background-color: #000; border: 10px solid #fff; box-shadow:0px 0px 12px rgb(0 0 0 / 56%); position: relative; }
.pop-section .pop-right img{ opacity: 0.32; }
.pop-section .pop-right .plus-icon{ font-size: 65px; color: #fff; font-weight: 300; line-height: 60px; text-align: center; background-color: #008FD5; position: absolute; left: 0; right: 0; top: 50%; width: 69px; height: 69px; border: 4px solid #fff; margin: -34px auto  0 auto; border-radius: 50px; }

/*download CTA*/
.download-cta{ background-color: #000063; padding: 76px 0; }
.download-cta h2{ font-weight: 600; color: #fff; }
.download-cta .btn{ width: 363px; max-width: 100%; font-size: 34px; font-weight: 600; padding: 25px; border-width: 3px; }

/*Longlasting Section*/
.longlasting-section{ padding: 185px 0 135px 0;  background-position: left top, right bottom;  background-repeat: no-repeat, no-repeat; background-attachment: fixed}
.longlasting-section .text-content{ max-width: 1160px;  padding:115px 195px 100px 195px; background-color: rgb(255 255 255 / 68%); box-shadow:0px 5px 22px rgb(0 0 0 / 10%); margin-bottom: 95px; border-radius: 15px; }
.longlasting-section .text-content h2{ text-transform: uppercase; }
.longlasting-section .text-content h3{ margin-bottom: 45px; }

/*Features Section*/
.features-section{ background-color: #F7F7F7; padding: 150px 0 115px 0; }
.features-section .feature-title{ padding-bottom: 100px; max-width: 1290px; margin: 0 auto; }
.features-section .feature-title h2{ font-size: 50px; margin-bottom: 20px;}
.features-section .feature-title h3{ font-size: 25px; font-weight: 500; line-height: 45px;}
.features-section .feature-bg{ padding-top: 335px; margin-bottom: 70px; background-position: center top !important; padding-left: 30px; padding-right: 30px;}
.features-section .single-feature{ background-color: #fff; box-shadow: 0px 0px 22px rgb(0 0 0 / 10%); border-bottom-right-radius: 50px; padding: 35px 25px 25px 25px; height: 100%;}
.features-section .single-feature h5{ line-height: 40px; text-transform: uppercase; font-weight: 600; margin-bottom: 18px; }

/*Secure Section*/
.secure-section{ padding: 125px 0 195px 0; background-color: #000046; background-position: center center !important; background-size: cover !important; font-size: 20px; font-weight: 600;  color: #fff;}
.secure-section h2{ font-size: 55px; color: #fff; font-weight: 600; }
.secure-section h3{ font-size: 35px; font-weight: 600; margin-bottom: 60px; }
.secure-section p{ line-height: 50px; margin-bottom: 50px; }
.secure-section .secure-icon{ padding-bottom: 35px; }
.secure-section .secure-content{ max-width: 1114px; margin: 0 auto; }

/*Get Involved*/
.get-involved{background-color: #1F9DEF; padding: 90px 0  68px 0;}
.get-involved h2{ text-transform: uppercase; font-weight: 600; color: #fff; margin-bottom: 35px; }
.get-involved .contact-icon{ margin: 0; padding: 0; list-style: none; }
.get-involved .contact-icon li{ display: inline-block; margin: 0 25px; }

/*Phase Section*/
.phase-section{ background-color: #000063; padding: 20px 0; }
.phase-section .phase-step{padding: 100px 0 80px 0; color: #fff; margin: 25px 0; display: inline-block; width: 100%; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000045+0,000000+100&1+0,0+100 */
background: -moz-linear-gradient(left,  rgba(0,0,69,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,69,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,69,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000045', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}
.phase-section .phase-step h2{ color: #fff; font-weight: 600; margin-bottom: 5px; }
.phase-section .phase-step h5 { margin-bottom: 30px;font-weight: 600;font-size: 24px;}
.phase-section .phase-step p{ color: #fff; font-weight: 600;}

/*==============Blog Page=================*/
.hero-section.inner-pages{ padding: 210px 0 110px 0;}
.hero-section.inner-pages h1{ letter-spacing: 2px; font-weight: 500; }
.hero-section.inner-pages h3{ font-weight: 300; color: #002C69; }
.blog-section{ padding: 120px 0 120px 0; }
.blog-section .post-title h2{ font-size: 35px; line-height:48px; font-weight: 300; margin-bottom: 20px; }
.blog-section .post-title h2 a{color: #000063;}
.blog-section .post-title h2 a:hover{color: #0090D6; font-size:35px;}
.blog-section .post-link { margin-top: 20px;}
.blog-section .btn { padding: 12px 25px;}
.blog-section .post-thumbnail{ padding-right: 100px; }
.blog-section .post-thumbnail img{ width: 100%; }

/*==============Download Page=================*/
.yourOS-section{padding: 100px 0 50px 0;}
.yourOS-section .platform{ padding: 50px; box-shadow: 0 5px 35px rgb(0 0 0 / 14%); border-radius: 15px; height: 100%; }
.yourOS-section .platform .platform-image{ padding: 10px 0 40px 0; }
.downloads-section{ padding:60px 0 100px 0;}
.downloads-section .download-content{ padding-left:120px;}
.downloads-section .download-single .row{ border-bottom: 2px solid rgb(46 48 146 / 13%); }
.downloads-section .download-single .btn{ min-width:200px;}

/*==============Trade Portal Page=================*/
.trade-portal-desc{padding: 80px 0 50px 0; }
.infographic-content{ padding: 0 20px; }
.trade-portal-graph{ padding-bottom: 140px; }

/*==============Get Involved Page=================*/
.get-involved-desc{ padding: 80px 0; }
.access-platforms{ padding: 165px 0 250px 0; background-color: #000046; background-position: center center !important; background-size: cover !important; font-size: 20px; font-weight: 600;  color: #fff;}
.access-platforms h2{ color: #fff; font-weight: 600; margin-bottom: 50px; }
.access-platforms .access-content { padding: 0 50px; }

/*====  Single POST =========  */
.single-post .site-header{position: relative;  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.10);}
.article-detail { padding: 50px 0;}
.article-detail .entry-header{margin-bottom: 30px;}
.article-detail .container {max-width: 1000px;}
.article-detail .post-thumbnail img{width:100%; max-width: 100%; height:auto;}
.article-detail .post-navigation .nav-subtitle {color: #000063; font-weight: 600;}

/*========RESPONSIVE CSS==========*/

@media( min-width: 1400px){
	.yourOS-section .container{ max-width: 1320px;}
	.downloads-section .container{ max-width: 1320px;}
}

@media( min-width: 1600px){
	.container{ max-width: 1550px;}
}

@media( min-width: 1900px){
	.container{ max-width: 1650px;}
}

@media( max-width: 1599px){
	h1{ font-size: 40px; }
	h2{ font-size: 35px; }
	h3{ font-size: 30px; }
	h4{ font-size: 24px; }
	h5{ font-size: 20px; }
	.hero-section .hero-caption p { font-size: 21px; line-height: 38px;}
	.pop-section .pop-left-content {padding-right: 50px; }
	.pop-section { padding: 100px 0 100px 0;}
	.download-cta .btn{padding: 15px 25px;}
	.longlasting-section{padding: 100px 0 30px 0;}
	.longlasting-section .text-content{padding: 100px 155px 100px 155px; margin-bottom: 70px;}
	.features-section{padding: 100px 0 30px 0;}
	.features-section .feature-title{padding-bottom: 80px;}
	.features-section .feature-title h2 { font-size: 40px;}
	.features-section .single-feature h5 { line-height: 30px;}
	.secure-section{ font-size: 18px; padding: 125px 0 125px 0;}
	.secure-section p { line-height: 40px;}
	.secure-section h2{ font-size: 40px; }
	.secure-section h3 { font-size: 30px;}
	.secure-section .secure-icon img{ max-width: 50px; }

	/*Blog page*/
	.blog-section .post-thumbnail { padding-right: 50px;}
	/*Get-involved page*/
	.access-platforms {padding: 120px 0 120px 0;}
	.access-platforms h2{ margin-bottom: 20px; }

}

@media( max-width: 1399px){
	.site-header .navbar li { padding: 0px 6px;}
	.phase-section .phase-step { padding: 60px 0 40px 0;}
	.site-footer .footer-logo img{ max-width: 250px; }
	.site-footer .footer-menu ul li{ padding: 0px 10px; }
	.get-involved{padding: 60px 0 58px 0;}
	.get-involved .contact-icon img{ max-height: 60px; }
	
	/*Blog page*/
	.blog-section { padding: 80px 0 80px 0;}
	.blog-section .post-thumbnail { padding-right: 30px;}

	/*Trade Portal Page*/
	.trade-portal-graph{ padding-bottom: 100px; }

	/*Get-involved page*/
	.access-platforms .access-content { padding: 0 30px;}
}

@media( max-width: 1199px){
	.site-header .navbar .custom-logo-link img{ max-width: 150px; }
	.navbar-light .navbar-nav .nav-link { font-size: 18px;}
	.hero-section { padding: 210px 0 100px 0;}
	.pop-section .pop-right .plus-icon{width: 59px; height: 59px; font-size: 55px; line-height: 50px; margin-top: -29px}
	.longlasting-section .text-content { padding: 50px 55px 50px 55px;}
	.features-section .feature-bg{padding-left: 15px; padding-right: 15px;}
	.site-footer .footer-menu ul li a{ font-size: 20px; }
	.site-footer .footer-menu { padding-bottom: 60px;}
	.site-footer .footer-logo img { max-width: 200px;}
	/*Blog page*/
	.blog-section { padding: 80px 0 40px 0;}
	/*Download page*/
	.yourOS-section { padding: 60px 0 20px 0;}
	.downloads-section .download-content { padding-left: 60px;}
	.downloads-section { padding: 50px 0 60px 0;}
	
}

@media( max-width: 991px){
	h1{ font-size: 35px; }
	h2{ font-size: 30px; }
	h3{ font-size: 25px; }
	h4{ font-size: 21px; }
	h5{ font-size: 18px; }
	p{ margin-bottom: 20px; }
	.site-header { padding: 10px 0; background-color: #fff;}
	.site-header .navbar-brand img{ height: 50px; }
	.site-header .navbar .container-fluid{ padding: 0; }
	.navbar-nav{ margin-left: 0;  padding-top: 20px;}
	.hero-section { padding: 150px 0 60px 0; position: relative;}
	.hero-section:after{ content: ""; width: 100%; height: 100%; background-color: rgba(255,255,255,0.7); position: absolute; left: 0; top: 0; }
	.hero-section>div{ position: relative; z-index: 1; }
	.hero-section .hero-caption p {font-size: 18px; line-height: 30px;}
	.btn.btn-outline-primary { padding: 20px;}
	.site-header .navbar .navbar-collapse{ background-color: #fff; }
	.pop-section { padding: 60px 0 70px 0;}
	.pop-section .pop-left-content { padding-right: 0px;}
	.download-cta {padding: 56px 0;}
	.download-cta .btn { padding: 5px 25px; font-size: 24px; width: 200px;}
	.download-cta h2{ margin-bottom: 20px; text-align: center; }
	.longlasting-section { padding: 70px 0 0px 0;}
	.longlasting-section .text-content{padding:60px 55px 50px 55px}
	.features-section { padding: 70px 0 0px 0;}
	.features-section .feature-bg{ background-size: 100% auto !important;}
	.features-section .feature-title h2{ font-size:35px;  }
	.features-section .feature-title { padding-bottom: 60px;}
	.features-section .feature-title h3 { font-size: 20px; line-height: 35px;}
	.secure-section { font-size: 16px; padding: 80px 0 50px 0;}
	.secure-section h2 { font-size: 30px;}
	.secure-section h3 { font-size: 21px;}
	.secure-section p { line-height: 34px;}
	.phase-section .phase-step h2{margin-bottom: 30px;}

	.site-footer .footer-menu ul li{ padding:0px; }
	.site-footer .footer-menu ul li a{ font-size: 18px;  padding-right: 15px; padding-left: 15px;}
	.site-footer .footer-logo img{ height: 70px; }

	/*Blog page*/
	.hero-section.inner-pages { padding: 160px 0 60px 0;}
	.blog-section { padding: 50px 0 10px 0;}
	.blog-section .btn { padding: 12px 25px;}
	.blog-section .post-thumbnail{ margin-bottom: 20px; padding-right: 0; }
	.blog-section .post-title h2 { margin-bottom: 10px;}
	
	/*Blog page*/
	.downloads-section .download-content { padding-left: 20px;}
	
	/*Trade Portal Page*/
	.trade-portal-desc{padding: 60px 0 30px 0; }
	.infographic-content{ padding:0px; }
	.trade-portal-graph{ padding-bottom: 60px; }
	
	/*Get-involved page*/
	.get-involved-desc {padding: 60px 0 30px 0;  }
	.access-platforms { padding: 80px 0 80px 0;}
	.access-platforms h2 { margin-bottom: 0px;}
	
}

@media( max-width: 767px){
	h1{ font-size: 30px; }
	h2{ font-size: 24px; }
	h3{ font-size: 22px; }
	.site-header .navbar .custom-logo-link img { max-width: 125px;}
	.btn.btn-outline-primary { padding: 10px 20px;}
	.pop-section .pop-right .plus-icon{width: 49px; height: 49px; font-size: 45px; line-height: 42px; margin-top: -23px;}
	.longlasting-section .text-content { padding: 50px 20px 50px 20px;}
	.features-section .feature-bg { padding-top: 250px;}
	.features-section .feature-title h2 { font-size: 30px;}
	.features-section .feature-title h3 { font-size: 18px; line-height: 30px;}
	.secure-section h2 { font-size: 26px;}

	.site-footer .footer-logo { margin-bottom: 40px;}
	.site-footer .footer-logo img{ height: 50px; width: auto; }
	.site-footer .footer-menu { padding-bottom: 50px;}
	.site-footer .footer-menu ul li{ padding: 0px; display: block; }
	.site-footer .copyright{ font-size: 18px; }

	/*Get-involved page*/
	.access-platforms .access-content { padding: 15px 30px;}
	/*Download page*/
	.yourOS-section .platform{ margin-bottom:30px; padding: 30px 20px; height:auto;}
	.yourOS-section .platform .platform-image img{ max-height:70px;}
	.downloads-section { padding: 0px 0 40px 0;}
	.downloads-section .download-single .row{ padding-bottom:20px;}
	.downloads-section .download-content { padding-left: 0px;}
	.blog-section .post-title h2 {font-size: 25px; line-height: 32px; margin-bottom: 15px;}
	/*==   Single - Post === */
	.article-detail { padding: 30px 0;}
	
}

@media( max-width: 479px){
	.site-footer .copyright{ font-size: 15px; }
	.features-section .feature-bg { padding-top: 180px;}
}



/*FAQ CSS*/

.accordion-section{
	padding: 70px 0 100px 0;
}
.accordion-content{
	margin: 20px 0;
}
.accordion-section .accordion .card{
	background-color: transparent;
	border: none;
	margin: 0 0 10px 0;
}
.accordion-section .accordion .card .card-header{
	background-color: #FFF;
	border-radius: 0;
	padding: 0;
}
.accordion-section .icon-title{
	margin-top: 40px;
}
.accordion-section .accordion .card .card-header .btn-link{
	color: #fff;
	background-color: #002C69;
	font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
    padding: 14px 30px;
    display: flex;
    align-items: center;
    border-radius: 0;
}
.accordion-section .accordion .card .card-header .btn-link.collapsed{
	background-color: #17c1f3;
}
.accordion-section .accordion .card .card-header .btn-link:hover{
	background-color: #002C69;
}
.plus-minus {
    position: relative;
    margin-left: auto;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    color: #fff;
    text-align: center;
    line-height: 26px;
}
.plus-minus:before {
    font-family: "Font Awesome 5 Free";
    opacity: 1;
    content: "\f068";
    line-height: 32px;
    font-weight: bold;
    font-size: 18px;
    @include transform (rotate(-180deg));
    display: block;
}

.accordion-section .accordion .card .card-header .btn-link.collapsed .plus-minus {
}
.accordion-section .accordion .card .card-header .btn-link.collapsed .plus-minus:before {
    content: "\f067";
}
.accordion-section .card-body p:last-child{
	margin: 0;
}

@media(max-width: 767px){
	.accordion-section .accordion .card .card-header .btn-link{
		font-size: 14px;
		padding: 10px 20px;
	}
	.plus-minus:before{
		font-size: 14px;
	}
	.accordion-section{
		padding: 20px 0 40px 0;
	}
	.icon-title{
		margin-top: 30px;
	}
}