/**
Theme Name: CMA Science by OnlinePivot
Author: OnlinePivot
Author URI: https://onlinepivot.com
Description: Customisation of CMA theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cma-science_op
Template: cma-theme
*/




/* Change color of the abouve header area on home page #headerhome and other pages #header  */

#headerhome {    
    background: #8995a4;	
}
#header {
	
	 
	background-image: linear-gradient(to bottom, #8995a4, #8995a4, #5987b3, #4491ce, #129beb);
	  padding: 0 20px 20 px 30px;
}

/* Change color of the header area and fold locor and size for main menu and above the header and header  */
#mainmenu {
    background: #fff;
	border-bottom: 1px solid #8995a4;
	padding:0 8% 0 8%; /* Make all content narrow  */
}
.menu li a {
    color: #f24e24;
	font-size: 1.1em;
}
.sub li a {
    color: #fff;
}
.sub li a:hover {
    color: #f24e24;
}


/* Change color of the body text */
body{
	color:#414141;
}



p {
    margin: 20px 0 20px 0;
}

.div-1 {
	background: #ABBAEA;
	 margin: 0;
    padding: 0;
}

/* Change color of the menu area for mobile */
@media only screen and (min-width: 240px) and (max-width: 799px){
.sub li a {
    color: red !important;
   }
}
.mobile-menu {
  
   /*  background: #363636;*/
	 background:#6c7da5;
}

/* Change color of the footer area */
footer {
  background-image: linear-gradient(to right top, #676767, #6f7186, #6c7da7, #5a8bc9, #129beb);
    
}


/* Change color of the h1 - header elements text */
h1 a {
    color: #ffffff;
}

h1 a:hover{
	color: #ffffff;
}

article{
	margin-top:30px;
}

/* Make selected menu element look like a button - exampel 423 */
#menu-item-423{
border: 3px solid #f15020;
border-radius : 10px;
padding : 0px 16px;
margin-left : 10px;

}

#menu-item-423:hover{
Background-color:#fff;
border: 3px solid #8995a4;	
}

#menu-item-423:hover a {
color:8995a4;
}



/* Make selected menu element look like a button - exampel 2364 */
#menu-item-2364{
border: 3px solid #f15020;
border-radius : 10px;
padding : 0px 16px;
margin-left : 10px;

}

#menu-item-2364:hover{
Background-color:#fff;
border: 3px solid #8995a4;	
}

#menu-item-2364:hover a {
color:8995a4;
}


.logo{
	border-radius:0px !important;
}



/* Make login look like a button  */
#login_top{
	border: 1px solid #f15020;
	border-radius : 5px;
    min-width: 80px;
    position: absolute;
    left: 120px;
    padding: 0 0;
	background: #f24e24;
	text-align: center;
}

#login_top:hover{
	background: #f46c49;
}

#login_top a{
	color: #fff;
}

/* Make all content narrow  */
#content{
	padding: 0 8% 10px 8%;
	margin:0;
	background:#f9f9f9;
	font-style: normal;
}

h1{
	margin: 40px 2% 0px 8%;
	padding:10px ;
	font-style: normal;
	
}

h2{
	font-size: 1.4em;
}


footer h2{
	font-size: 1.1em;
}

footer h3{
	font-size: 1em;
}
a{
	  font-size: 1em;
}

.footer{
	padding: 1% 8% 0 8%;
}

.article{
	padding: 2%;
}
/* CUSTOM LOGIN STYLING */
/* Background image */
body.login{
    background-image: url(https://cma-science.nl/wp-content/uploads/2021/04/CMA_login_background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

/* Add Custom Image File */
	
body.login div#login h1 a {
  background-image: url(https://cma-science.nl/wp-content/themes/cma-theme/images/site-login-logo.png);
  width: 84px;
  height: 84px;
  background-size: 84px 84px;
}
	
}
 
/* Add a few changes to the color and style of form itself */
.login label {
  color: #6c747d;
  display: block;
  margin-bottom: 1em;
  font-weight: bold;
}
 
.login form .input {
  font-weight: normal;

}
.login form{
	opacity: 0.85;
}
 
.login #backtoblog a, .login #nav a {
  color: #6c747d;
}
 
.wp-core-ui .button-primary {
  background: #6c747d;
  border-color:black;
  display:block;
	width:100%;
}
#loginform {border-radius:10px;
	box-shadow: 0 0 12px #767676;}
 


/* Change color of the abouve header area on home page #headerhome and other pages #header  */

#headerhome {    
    background: #8995a4;	
}
#header {
	
	background: linear-gradient(background-image: linear-gradient(to right top, #676767, #6f7186, #6c7da7, #5a8bc9, #129beb);
	  padding: 0 20px 20 px 30px;
}

/* Change color of the header area and fold locor and size for main menu and above the header and header  */
#mainmenu {
    background: #fff;
	border-bottom: 1px solid #8995a4;
	padding:0 8% 0 8%; /* Make all content narrow  */
}
.menu li a {
    color: #f24e24;
	font-size: 1.1em;
}
.sub li a {
    color: #fff;
}



.div-1 {
	background: #ABBAEA;
	 margin: 0;
    padding: 0;
}






/* Change color of the menu area for mobile */
@media only screen and (min-width: 240px) and (max-width: 799px){
.sub li a {
    color: red !important;
   }
}
.mobile-menu {
  
   /*  background: #363636;*/
	 background:#6c7da5;
}

/* Change color of the footer area */
footer {
  
    background: #6c747d;
}



/* Make selected menu element look like a button - exampel 423 */
#menu-item-423{
border: 3px solid #f15020;
border-radius : 10px;
padding : 0px 16px;
margin-left : 10px;

}

#menu-item-423:hover{
Background-color:#fff;
border: 3px solid #8995a4;	
}

#menu-item-423:hover a {
color:8995a4;
}




#menu-item-2364{
border: 3px solid #f15020;
border-radius : 10px;
padding : 0px 16px;
margin-left : 10px;

}

#menu-item-2364:hover{
Background-color:#fff;
border: 3px solid #8995a4;	
}

#menu-item-2364:hover a {
color:8995a4;
}


/* Round all buttons   */
.button {
	border-radius: 15px;
}
/* Round whiteblock and .column3 .dgrey and searchform elements  */
.whiteblock{
	border-radius: 10px;
}
.column3{
	border-radius: 10px;
}

#searchform input{
	border-radius: 10px;
}

.dgrey{
	border-radius: 10px;
}
/* Round imges on whole page except for logo  */
img{
border-radius:25px;
} 

.logo{
	border-radius:0px !important;
}


/* Make login look like a button  */
#login{
	border: 1px solid #f15020;
	border-radius : 5px;
    min-width: 80px;
    left: 120px;
    padding: 0 0;
	text-align: center;
}

#login:hover{
	background: #f46c49;
}

#login a{
	color: #fff;
}


.footer{
	padding: 1% 8% 0 8%;
}

.article{
	padding: 2%;
}