/*
 Theme Name:   CEO Minded
 Theme URI:    https//rahatlook.info
 Description:  Theme for CEO Minded
 Author:       Amila
 Author URI:   https://rahatlook.info
 Template:     twentytwentyone
 Version:      1.0.0.11
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentytwentyonechild
*/

/*Padding and margins to 0 */

.mt-0 {margin-top:0 !important;}
.mb-0 {margin-bottom:0 !important;}
.ml-0 {margin-left:0 !important;}
.mr-0 {margin-right:0 !important;}
.pt-0 {padding-top:0 !important;}
.pb-0 {padding-bottom:0 !important;}
.pl-0 {padding-left:0 !important;}
.pr-0 {padding-right:0 !important;}
.w-100{width:100% !important;}
.mr-2{margin-right: 2% !important;}

.page-id-363 #main{padding-top: 0;}

.home #main {padding-top:0; padding-bottom:0;}
.post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), [class*="inner-container"] > :not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width {max-width: 60% !important;}

/*
 *
 * BLOG
 *
*/
.blog .entry-footer {border-bottom:0 !important;}
.blog .post {margin-top:0;}
.blog .post .post-thumbnail-inner img{margin-top:0;}
.blog .entry-title {
    margin-left: 5%;
    max-width: 90% !important;
}
.blog .entry-title a{text-decoration: none;}
.blog figure {
    width: 40% !important;
    margin-left: 5% !important;
    float: left;
    margin-right: 1% !important;
    margin-top: 0;
}
.blog .entry-footer {
    width: 80%;
    margin-left: 5%;
    max-width: 80% !important;
    display: flex;
}
.blog .entry-footer .post-taxonomies{margin-left: 3%;}
.blog .entry-content .more-link {
    color: #36aadb;
    font-size: 20px;
}

/*
 *
 * SINGLE
 *
*/
.single .post-thumbnail{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}
.single .post-thumbnail img {
    margin-top: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 81%);
    margin-left: 0;
    margin-right: 0;
}
.single #main {padding-top:0;}
.single .entry-header {
    width: 100%;
    max-width: 100%;
	padding-bottom:0 !important;
}
.singular h1 {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
	text-align: center;
}
.entry-section-meta {
    display: flex;
    font-size: 15px;
    max-width: 50% !important;
    width: 50%;
	color: #364a62;
}
.entry-section-meta a{color: #364a62;}
.single .entry-section-meta .posted-on, .single .entry-section-meta .byline, .single .entry-section-meta .edit-link {margin-right: 5%;}
.single .entry-section-meta .posted-by, .single .entry-section-meta .post-taxonomies {width: 50%;}

.entry-title h2:hover{background: transparent;}
/*fonts*/


@font-face {
    font-family: 'Inria Sans Light';
    src: url('assets/fonts/InriaSans-Light.woff2') format('woff2'),
        url('assets/fonts/InriaSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inria Sans Regular';
    src: url('assets/fonts/InriaSans-Regular.woff2') format('woff2'),
        url('assets/fonts/InriaSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inria Sans Bold';
    src: url('assets/fonts/InriaSans-Bold.woff2') format('woff2'),
        url('assets/fonts/InriaSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

h1, h2, h3, h4, h5, h6 {font-family: 'Inria Sans Bold' !important;}
.wp-block-image figcaption {font-family: 'Inria Sans Light';}
html, body, p, ol, ul, li, textarea, pre, iframe, hr {font-family:'Inria Sans Regular';}

#masthead {
    padding: 0;
    max-width: 100%;
    position: fixed;
    width: 100%;
	z-index: 5;
	background-color: #364a62 !important;
}
.home #main {padding-top:0; padding-bottom:0;}
#main {padding-top:7%;}
#head-inner {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
}
#head-inner .site-logo .custom-logo {width: 60%;}
#primary-menu-list li a {color: #fff;}

/*
 *
 * FOOTER
 *
*/
#colophon{
    margin: 0;
    width: 100%;
    max-width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    background: #364a62;
}
.site-footer .site-info {
    border-top: 0 !important;
}
.powered-by, .powered-by a {color: #ffffff !important;}
/*#content{
    padding-top: 13%;
}*/

/* Homepage*/

.home-header{background-position: top;}
.home-column {
    padding: 1%;
    border: 2px dashed #364a62;
	height:100vh;
}
.home-column-services .wp-block-cover__inner-container {
    margin-top: 0 !important;
    width: 100% !important;
	margin-bottom:0 !important;
}

/* CF 7*/
.contact-frontpage .contact-frontpage-data {
    width: 45%;
    float: left;
}

.contact-frontpage .contact-frontpage-details {
    width: 50%;
    float: left;
}

.contact-frontpage .contact-frontpage-data p {
    margin-bottom: 2.5%;
}

.contact-frontpage .contact-frontpage-data input {width: 95%;}

.contact-frontpage .wpcf7-form-control.wpcf7-submit {
    width: 95%;
	background-color: #364a62;
}
#contact .contact-data p {
    margin-bottom: 2.5%;
}

#contact .contact-data input {width: 100%;}

#contact .wpcf7-submit {background-color: #364a62;}
/* About us - text color*/
.aboutus-col .content p {color:#ffffff !important;}
 /*
 * COLLAPSIBLE
 *
*/
 /* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: transparent !important;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  margin-bottom: 0 !important;
  box-shadow: 1px 1px 1px #364a62;
}
.collapsible p{color: #000000;}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #36aadb !important;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #36aadb;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #364a62;
  float: center;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}
.collapsible img {
    width: 30%;
    border-radius: 100px;
}
.wp-block-column .content p {font-family: 'Inria Sans Light' !important; color: #364a62;}


/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

	  .contact-frontpage .contact-frontpage-data {
    width: 100%;
}

	.contact-frontpage .contact-frontpage-details {
		width: 100%;
	}

	.contact-frontpage .contact-frontpage-data p {
		margin-bottom: 2.5%;
	}

	.contact-frontpage .contact-frontpage-data input {width: 100%;}

	  .primary-navigation-open .menu-button-container, .primary-menu-container {background:#36aadb;}
	  #masthead{top:0;}
	  #head-inner .site-logo .custom-logo { width: 100%;}
	  .mobile-h1-header{font-size:50px;}
	  /*singular*/
	  .singular h1{
    font-size: 35px !important;
    width: 100% !important;
    padding-top: 15%;
}
	.blog #main {    padding-top: 20%;}
	.blog figure {
    width: 90% !important;
    margin-left: 5% !important;
    float: inherit;
    margin-right: 1% !important;
    margin-top: 0;
    max-width: 90% !important;
}
	.blog #blog-content p{
    width: 90%;
    max-width: 90% !important;
}
	  .blog .entry-footer {
    width: 90%;
    margin-left: auto;
    max-width: 90% !important;
    display: flex;
    font-size: 14px;
}

}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .blog #main {    padding-top: 15%;}
	.blog figure {
    width: 90% !important;
    margin-left: 5% !important;
    float: inherit;
    margin-right: 1% !important;
    margin-top: 0;
    max-width: 90% !important;
}
	.blog #blog-content p{
    width: 90%;
    max-width: 90% !important;
}
}