/*
Theme Name: ColorMag Child
Theme URI: https://themegrill.com/themes/colormag/
Template: colormag
Author: ThemeGrill
Author URI: https://themegrill.com
Description: ColorMag is always the best choice when it comes to magazine, news, and blog WordPress themes. You can create elegant and modern websites for news portals, online magazines, and publishing sites. With ColorMag’s 8 and counting free starter demos for health, food, entertainment, sports, and fashion industries, building a magazine style website is super easy. Best of all, the ColorMag WordPress theme offers multiple ad spaces in its layout. So, you can monetize your website by displaying ads in these slots without any fuss. And if you plan to sell products and services online, you can rely on the theme’s compatibility with WooCommerce. Some of its key features are: >> SEO Optimized >> Translation & RTL Ready >> Cross-browser Compatible >> Custom Widgets >> Responsive Design >> Sticky Menu. So, download the free ColorMag theme and create professional magazine websites quickly. You can get free support for ColorMag at https://themegrill.com/contact/ and check our demos at https://themegrilldemos.com/colormag/
Tags: one-column,two-columns,right-sidebar,left-sidebar,flexible-header,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,featured-images,theme-options,post-formats,footer-widgets,blog,e-commerce,news,rtl-language-support
Version: 3.0.1.1688635419
Updated: 2023-07-06 10:23:39

*/
@import url('../colormag/style.css');
.cm-primary-nav ul {
	display: none;
}
#cm-header-1 {
	background-color: #E74400;
}
body{
	font-family: "Open Sans", serif;
}
.cm-site-title {
	width: 277px;
	clear: both;
	position: relative;
	top: -35px;
}
}
#cm-site-info {
	1height: 35px !important;
}
.cm-header-1 .cm-row {
	padding: 6px 0;
}
#cm-primary-nav {
	position: relative;
	z-index: 999;
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1) inset;
	background-color: unset;
	border-top: none !important;
}
#cm-header-2 {
  display: none;
}
.cm-content1 {
  padding-top: 0px !important;
}
.cm-site-title1 a{
	color: black;
	font-size: 26px;
}
.cm-content1 {
  padding-top: 60px;
  1padding-bottom: 60px;
  background-color: #fff;
}
.cm-site-description1 {
	color: black;
	word-break: break-word;
}
.cm-row1 {
	height: 35px;
}
body{
	background-color: #005CD7;
}
.cm-site-title a {
  color: black;
	font-size:26px;
}
#cm-header-1 {
  background-color: #E74400;
  height: 60px;
}
.cm-site-description1 {
	color: black;
	word-break: break-word;
}
.cm-container1 {
  width: 100%;
	1height:50px;
}
#cm-site-branding1 {
  display: none;
}
#cm-site-info1 {
	height: 35px !important;
}
.cm-site-description {
	font-size: 17px;
  color: black;	
	position: relative;
	top: -55px;
}
.header-image {
  margin-bottom: 0;
  border-bottom: 1px solid #eaeaea;
  width: 100%;
}
.cm-content {
	padding-top: 9px;fbody
	padding-bottom: 9PX;
	background-color: #005CD7;
	position: relative;
	border-top: 4px solid #289dcc;
}
.cm-secondary {
  width: 19%;
}
li a {
	color:white;
}
#menu-hoofdmenu-1 ul {
  background-color: #00005A;
  1left: -999em;
  1position: absolute;
  1top: 0;
  1width: 182px;
  1left: 90px;
  z-index: 99999;
  display: none;
  position: absolute;
  min-width: 182px;
  1box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menu-hoofdmenu-container .menu-item-has-children > a::after {
    content: ">";
    display: inline-block;
    font: 18px/1 Genericons;
    position: relative;
    right: -46px;
    top: 0px;
    vertical-align: text-bottom;
}
#menu-hoofdmenu-1 li:hover ul{
    display: inline-block;
	overflow:hidden;
}
#menu-hoofdmenu-1 li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	TOP:0;
    background-color:#00005A; /*donker blauw*/
    1text-decoration: underline;
}

#menu-hoofdmenu-1 li:hover ul a:hover { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration: none;
}
#menu-hoofdmenu-1 li:hover ul li a:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background-color:#e74400;
	color:#fff;
}
#menu-hoofdmenu-1 .current_page_item > a{
    1color: #bc360a;
	1color: #fff;
	background-color:#00005A;
    1font-style: italic;
	1text-decoration: underline;
}
#menu-hoofdmenu-1 .current-menu-parent > a{
    1color: #bc360a;
	1color: #fff;
	background-color:#00005A;
    1font-style: italic;
	1text-decoration: underline;
}

#menu-hoofdmenu-1 .sub-menu .current_page_item > a{
    color: #bc360a;
	1color: #fff;
    1font-style: italic;
}
.menu-hoofdmenu-container .menu-item-has-children > a::after {
    content: ">";
    display: inline-block;
    font: 18px/1 Genericons;
    position: relative;
    right: -46px;
    top: 0px;
    vertical-align: text-bottom;
}
input[type="text"], input[type="email"], input[type="password"], textarea {
  border: 1px solid #000;
}
.copyright a{
	color:white;
}
.cm-primary{
	background-color: white;
}
@media screen and (min-width: 800px){
	.cm-primary {
		width: calc(100% - 17%);
	padding-right: 1.875em;
}
}

@media screen and (max-width: 800px){
	.cm-secondary {
	  display:NONE;
	}
	#cm-primary {
	  width: calc(100% - 0%); !important;
		background-color: white !important;
	}
}
@media screen and (min-width: 48em){
.cm-posts.cm-layout-2-style-2.col-2, .cm-posts.cm-layout-2-style-1.col-2 {
	--grid-column: 0;
	margin-right:30px;	
}
}
@media1 screen and (min-width: 62em){
	.cm-secondary {
	  width: 19%;
	}
	#cm-primary {
		width: 81%;
	}
}