/*

@media (max-width: 820px) 
@media (max-width: 500px) {  
*/	
	
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,300;0,400;0,500;0,600;0,700;1,100;1,500;1,600;1,700&display=swap');

/* ----- VARIABLES ----- */
:root {

  --font-weight-regular: 500;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-size-normal: 16px; 
  --font-size-smaller: 13px; 
  --font-sans: "Exo", sans-serif;
  --font-body: var(--font-sans); 
  --font-color: #464545;
  --font-line-height-body: 1.7em;
  --font-line-height-heading: 1.2em;
  --color-blue: #109cdc;
  --color-dark-blue: #213A82;
  --color-mid-grey: #E3E3E3;
  --color-light-grey: #F6F6F6;
  --color-light-green: #80C100;
  --color-light-orange: #FF4D02;
  --color-dark-grey: #575756;
  --color-mid-grey: #E3E3E3;




	* Colors: */
	--dark-gray-464545: #464545;
	--lighter-dark-gray-707070: #707070;
	--ct-dark-blue: #003785;
	--white: #FFFFFF;
	--qk-light-grey: #F6F6F6;
	
	--qk-dark-grey: #575756;
	--qk-black: #161615;
	--unnamed-color-585857: #585857;
	--unnamed-color-454545: #454545;
 
}

body {
		margin: 0;
		font-size: var(--font-size-normal);
  	font-family: var(--font-sans);
  	font-weight: var(--font-weight-regular);
  	line-height: var(--font-line-height-body);;
  	color:  var(--font-color);
  	box-sizing: border-box;
  	min-height:100%;
	}
	
#page-container {
  position: relative;
  min-height: 100vh;
}	
	
.warning{color:red;}	
	
div{
	 	box-sizing: border-box;
}	

h1{
	font-size:36px;
	color:  var(--color-blue);
	font-weight:normal;
	line-height: 40px;;
}

h2{
	font-size:24px;
	color:  var(--color-blue);
	font-weight:normal;
}

h5{
	font: normal normal 600 20px/26px Exo;
	color: var(--font-color);
}	




a{
	text-decoration:none;
color:  var(--color-blue);
}

a:hover{
	color:  var( --color-dark-blue);
}

.clear{
	clear:both;
	}

input[type=checkbox] {
	-webkit-box-shadow: 0px 0px 0px 1px rgba(16,156,220,1);
	-moz-box-shadow: 0px 0px 0px 1px rgba(16,156,220,1);
		box-shadow: 0px 0px 0px 1px rgba(16,156,220,1);
	  background: #fff; /* this is needed for iOS. Otherwise the background just becomes black. */
	  border: none;
	  height: 1.5em;
	  width: 1.5em;
	  display: inline-block;
	  vertical-align: text-bottom;
	  position: relative;
	  vertical-align: top;
}  

input[type=radio] {
	
}

div.nolabel label{
	display:none !important;

	}

div.nolabel input::placeholder {
  font-size:16px;
}



input[type='radio'] {
        -webkit-appearance: none;
  			height: 1.5em;
	 			 width: 1.5em;
        border-radius: 50%;
        outline: none;
        border: 1px solid   var(--color-blue);;
    }


    input[type='radio']:before {
        content: '';
        display: block;
	  	  height: 1.5em;
	  		width: 1.5em;
			 	margin:-1px 0 0 -1px;
        border-radius: 50%;
    }

	 input[type="radio"]:checked:before {
        background: var(--color-blue);
        
    }
    
    input[type="radio"]:checked {
      border-color:var(--color-blue);
    }


main {
		overflow: hidden;
		display: flex;
		width: 100%;
		justify-content: center;
		background-color: #fff;
		margin-top:-10px;
		padding-bottom: 486px;    /* Footer height */

}

#maininner{
		max-width:1400px;
		width:100%;
		background-color: #fff;
	  padding: 0px; 
	  margin: 0 60px;

}

#demodiv{
	padding:1px 6px 1px 6px;
  border: 2px solid #fff;
  border-top: none;  
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;	
  color:#fff;
	width: 60px;
	position:absolute;
	top:0;
	left:40%;
	}

 


#maininner h1{
	display:inline-block;
	margin:60px 0px 40px 0px; 
}

/*-- HEADER --*/




header {
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: center;
		background-color:  var(--color-blue);
		height:100px;
		margin:0 0 10px 0;
		padding:0;
		-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
		-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
		box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
		position: sticky;
		top: 0px;
		z-index:5000;
}







header.homepage,header.exam,header.study {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}



.headerbuttons{
	margin-top:30px;
}

.headerrow{
	display:none;
}

#nav{
		max-width:1350px;
		width:100%;
		background-color:  var(--color-blue);
	  padding:0px 56px 0px 56px;
	  margin:0;
	  height:100px;
	  background:url(../images/cytech_logo_white_out.png) no-repeat 56px 17px;
	  background-size: 213px auto;
}

#navinnerlogo {
	display:block;


}



#navinnerlogo a{
	display:inline-block;
	margin:0;
	height:62px;	
	width:170px;
	margin-top:18px;
	color:rgba(0, 0, 0, 0);
}



 .headerbuttons{
 		width: 340px;
 		float:right;
 		text-align:right;
 	}
 
.headerbuttons a{
 	display:inline-block;
 	border:solid #fff 1px;
 	height:40px;
 	margin-left:40px;
 	}
 	
 .headerbuttons a span.linkarrow{
 	 display: table-cell;
 	 width:40px;
 	 height:40px;
 	 background-color: #fff;
 	 background-image:url(../images/cytech-button-arrows-blue.png);
	 background-size: 12px 12px;
	 background-position: center center;
	 background-repeat:no-repeat;
 	}	
  .headerbuttons a span.atext{
 	  display: table-cell;
		font-size: var(--font-size-smaller);
  	font-family: var(--font-sans);
  	font-weight: var(--font-weight-medium);
  	height:40px;
  	vertical-align: middle;
  	padding: 0px 10px; 
  	color:#fff;
  	text-transform: uppercase;
 	}	
 	
 	
 	
.headerbuttons a:hover span.linkarrow{
 		background-color: transparent;
 	 	background-image:url(../images/cytech-button-arrows-white.png);
 	}	
 
    .headerbuttons a:hover span.atext{
  	color:  var(--color-blue);
		background-color: #fff;
 	}	


/*-- HEADER --*/






/*-- STANFDARD BUTTONS --*/


 button.next{
	 		font-size: var(--font-size-smaller);
	  	font-family: var(--font-sans);
	  	font-weight: var(--font-weight-medium);
	  	padding: 0px 40px 0px 10px; 
	  	height:40px;
	  	color: var(--color-blue);
	  	text-transform: uppercase;
 	 	 	padding-right:50px;
		 	background-image:url(../images/cytech-button-arrows-blue-full.jpg);
			background-size: 40px 40px;
			background-color:#fff;
			background-position: center right;
			background-repeat:no-repeat;
			border:solid var(--color-blue) 1px;
			cursor:pointer;
			
 	}
 
 button.next:hover{
	  	color: #fff;
	  	background-color:var(--color-blue);
		 	background-image:url(../images/cytech-button-arrows-white-full.jpg);
		 	background-size: 40px 40px;
			background-position: center right;
			background-repeat:no-repeat;
 	} 
 	
 	span.next{
 			display:	inline-block;
	 		font-size: var(--font-size-smaller);
	  	font-family: var(--font-sans);
	  	font-weight: var(--font-weight-medium);
	  	padding: 0px 40px 0px 10px; 
	  	height:38px;
	  	color: var(--color-blue);
	  	text-transform: uppercase;
 	 	 	padding-right:50px;
		 	background-image:url(../images/cytech-button-arrows-blue-full.jpg);
			background-size: 40px 40px;
			background-position: center right;
			background-repeat:no-repeat;
			background-color:#fff;
			border:solid var(--color-blue) 1px;
			cursor:pointer;
			line-height: 38px;
			margin:4px 0 0 0;
 	}
 
 span.next:hover{
	  	color: #fff;
	  	background:var(--color-blue);
		 	background-image:url(../images/cytech-button-arrows-white-full.jpg);
		 	background-size: 40px 40px;
			background-position: center right;
			background-repeat:no-repeat;
 	} 
 
 
  	a.next{
 			display:	inline-block;
	 		font-size: var(--font-size-smaller);
	  	font-family: var(--font-sans);
	  	font-weight: var(--font-weight-medium);
	  	padding: 0px 40px 0px 10px; 
	  	height:40px;
	  	color: var(--color-blue);
	  	text-transform: uppercase;
 	 	 	padding-right:50px;
		 	background-image:url(../images/cytech-button-arrows-blue-full.jpg);
			background-size: 40px 40px;
			background-position: center right;
			background-repeat:no-repeat;
			background-color:#fff;
			border:solid var(--color-blue) 1px;
			cursor:pointer;
			line-height: 40px;
			margin:30px 0;
 	}
 
 a.next:hover{
	  	color: #fff;
	  	background:var(--color-blue);
		 	background-image:url(../images/cytech-button-arrows-white-full.jpg);
		 	background-size: 40px 40px;
			background-position: center right;
			background-repeat:no-repeat;
 	} 
 	
  a.next.fixedwidth{	
 margin:0px 0;
}
 
   a.back{
 			display:	inline-block;
	 		font-size: var(--font-size-smaller);
	  	font-family: var(--font-sans);
	  	font-weight: var(--font-weight-medium);
	  	padding: 0px 10px 0px 50px; 
	  	height:40px;
	  	color: var(--color-blue);
	  	text-transform: uppercase;
		 	background-image:url(../images/cytech-button-arrows-blue-full-reverse.jpg);
			background-size: 40px 40px;
			background-position: center left;
			background-repeat:no-repeat;
			background-color:#fff;
			border:solid var(--color-blue) 1px;
			cursor:pointer;
			line-height: 40px;
			margin:30px 0;
 	}
 
 a.back:hover{
	  	color: #fff;
	  	background:var(--color-blue);
		 	background-image:url(../images/cytech-button-arrows-white-full-reverse.jpg);
		 	background-size: 40px 40px;
			background-position: center left;
			background-repeat:no-repeat;
 	} 
 
 
  button.back{
 			display:	inline-block;
	 		font-size: var(--font-size-smaller);
	  	font-family: var(--font-sans);
	  	font-weight: var(--font-weight-medium);
	  	padding: 0px 10px 0px 50px; 
	  	height:40px;
	  	color: var(--color-blue);
	  	text-transform: uppercase;
		 	background-image:url(../images/cytech-button-arrows-blue-full-reverse.jpg);
			background-size: 40px 40px;
			background-position: center left;
			background-repeat:no-repeat;
			background-color:#fff;
			border:solid var(--color-blue) 1px;
			cursor:pointer;
			line-height: 40px;
			margin:30px 0;
 	}
 
 button.back:hover{
	  	color: #fff;
	  	background:var(--color-blue);
		 	background-image:url(../images/cytech-button-arrows-white-full-reverse.jpg);
		 	background-size: 40px 40px;
			background-position: center left;
			background-repeat:no-repeat;
 	} 
 
 
 
 
 
 
 
 .bluebuttons a{
 	display:inline-block;
 	border:solid #fff 1px;
 	height:40px;
 	}
 .bluebuttons a.blueborder{
 	display:inline-block;
 	border:solid var(--color-blue) 1px;
 	height:40px;
 	} 	
 	
 	
 	
  .bluebuttons a span.linkarrow {
 	 display: table-cell;
 	 width:40px;
 	 height:40px;
 	 background-color: #fff;
 	 background-image:url(../images/cytech-button-arrows-blue.png);
	 background-size: 12px 12px;
	 background-position: center center;
	 background-repeat:no-repeat;
 	}	
 
   .bluebuttons a span.atext{
 	  display: table-cell;
		font-size: var(--font-size-smaller);
  	font-family: var(--font-sans);
  	font-weight: var(--font-weight-medium);
  	height:40px;
  	vertical-align: middle;
  	padding: 0px 10px; 
  	color:#fff;
  	text-transform: uppercase;
  	background:var(--color-blue);
 	}	
 	
 	
 	
   .bluebuttons a span.atext.nobackground{
  	background:none;
 	}		
 	
 
   .bluebuttons a:hover span.linkarrow  {
 		background-color: var(--color-blue);
 	 	background-image:url(../images/cytech-button-arrows-white.png);
 	}	
 
   .bluebuttons a:hover span.atext   {
  	color:  var(--color-blue);
		background-color: #fff;
 	}	
 	

 

 	

/*-- STANDARD BUTTONS --*/





/*-- FOOTER --*/
footer {
		width: 100%;
		overflow: hidden;
		display: flex;
		width: 100%;
		justify-content: center;
		background-color: var(--color-blue);
		margin:0;
		padding:0;
		height:486px;
		background-image: linear-gradient(to bottom, var(--color-blue), var(--color-dark-blue));
		 position: absolute;
  bottom: 0;
}

#footerinner{
		max-width:580px;
		width:100%;
	  padding: 10px;
	  height:486px;
	  background:url(../images/cytech_logo_white_out.png);
	  background-size: 160px auto;
	  background-repeat:no-repeat;
		background-position: center 107px;
		
		
}


	#footeractions{
			border-top: 2px solid rgba(255, 255, 255, .5);;
			border-bottom: solid #fff 2px;
			margin-top: 199px;
			padding: 40px 0px;
	}

#footerinner ul {
	  display:inline-flex;
		list-style-type: none;
		margin: 10px 0 0 0;
		padding:0; 
 }
 
 #footerinner  ul  li{
		display:inline-block;
		color:#fff;
		margin-right: 36px;
 }
 
 #footerinner  ul li a{
	display:inline-block;
	color:#fff;
	text-decoration:none;
	width:24px;
 }
 
	#footerinner  ul li a span {
		color: transparent;
		overflow: hidden;
		display: inline-block;
		width: 24px;
	}
 
 #footerinner  ul li.facebook{
	display:inline-block;
	text-decoration:none;
	background:url(../images/facebook-icon-white.png);
	background-size: 24px 24px;
	background-repeat:no-repeat;
	background-position: center center;	
	height:24px;
	width:24px;
 }
  #footerinner  ul li.facebook:hover{
  	background:url(../images/facebook-icon-blue.png);
		background-size: 24px 24px;
		background-repeat:no-repeat;
		background-position: center center;	
	}
 
  #footerinner  ul li.twitter{
	display:inline-block;
	text-decoration:none;
	background:url(../images/twitter-icon-white.png);
	background-size: 24px 24px;
	background-repeat:no-repeat;
	background-position: center center;	
	height:24px;
	width:24px;
 }

  #footerinner  ul li.twitter:hover{
	background:url(../images/twitter-icon-blue.png);
	background-size: 24px 24px;
	background-repeat:no-repeat;
	background-position: center center;	
 }


  #footerinner  ul li.instagram{
	display:inline-block;
	text-decoration:none;
	background:url(../images/instagram-icon-white.png);
	background-size: 24px 24px;
	background-repeat:no-repeat;
	background-position: center center;	
	height:24px;
	width:24px;
 }
  #footerinner  ul li.instagram:hover{
	background:url(../images/instagram-icon-blue.png);
	background-size: 24px 24px;
	background-repeat:no-repeat;
	background-position: center center;	
	
 } 
 
 #footerinner  div.socialbuttons{
 	padding:0;
 	width: 40%;
 	}
 
 #footerlinks{
 	margin-top:40px;
 	display:flex;
 	justify-content:  space-between;
 	}
 
  #footerlinks a{
	color:#fff;
	text-decoration:none;
  font-size: var(--font-size-normal);
 	}
 	
  #footerlinks a:hover{
	color:#fff;
	text-decoration:none;
	color:  var(--color-blue);
  font-size: var(--font-size-normal);
 	} 	
 
  .footerbuttons{
 		width: 65%;
 		float:right;
 		text-align:right;
 	}
 
 .footerbuttons a{
 	display:inline-block;
 	border:solid #fff 1px;
 	height:40px;
 	margin-left:40px;
 	}
 	
  .footerbuttons a span.linkarrow{
 	 display: table-cell;
 	 width:40px;
 	 height:40px;
 	 background-color: #fff;
 	 background-image:url(../images/cytech-button-arrows-blue.png);
	 background-size: 12px 12px;
	 background-position: center center;
	 background-repeat:no-repeat;
 	}	
 

   .footerbuttons a span.atext{
 	  display: table-cell;
		font-size: var(--font-size-smaller);
  	font-family: var(--font-sans);
  	font-weight: var(--font-weight-medium);
  	height:40px;
  	vertical-align: middle;
  	padding: 0px 10px; 
  	color:#fff;
  	text-transform: uppercase;
 	}	
 
   .footerbuttons a:hover span.linkarrow  {
 		background-color: transparent;
 	 	background-image:url(../images/cytech-button-arrows-white.png);
 	}	
 
   .footerbuttons a:hover span.atext   {
  	color:  var(--color-blue);
		background-color: #fff;
 	}	

#cookie-alert{
	display:none;
	} 
 /*-- END FOOTER --*/	
 
 
  /*-- SCROLL TOP --*/	
 #scroll-top {
      position: fixed;
      bottom: 20px;
      right:50px;
    }

	#scroll-top a{
				display:block;
				height:50px;
				width:50px;
				background-image:url(./images/cytech-back-to-top-roundel-static.png) ;
				background-size: 50px 50px;
				background-position: center;
				background-repeat:no-repeat;
		    }
		 #scroll-top a:hover{
				background-image:url(/images/cytech-back-to-top-roundel-hover.png) ;
				background-size: 50px 50px;
				background-position: center;
				background-repeat:no-repeat;
		    } 
  /*-- END SCROLL TOP --*/	
 
 
 
 
 /*-- HOMEPAGE --*/	
 

 main.mainhome {
		display: block;
		width:100%
}

#maininnerwrappertop{
		display: flex;
		width: 100%;
		justify-content: center;
		background-color: #fff;
	  padding: 0px;
	  background-image:  url("/images/homepage/cytech-home-hero-mechanic-workshop-800-x-1920.jpg");
	  background-position: center;
 		background-color: #cccccc;
 		background-repeat: no-repeat;
	  height: 800px;
}


#maininnertop{
		max-width:1418px;
		width:100%;
	  padding: 0px 56px;
	  height:400px;
}
 
 #maininnerwrapperbottom{
		display: flex;
		justify-content: center;
		width:100%;
		background-color: #fff;
	  padding: 130px 0px 0px 0px;
	  background:  var(--color-mid-grey);
}








 .maininnerwrapperbottom{
		display: flex;
		justify-content: center;
		width:100%;
		background-color: #fff;
	  padding: 130px 0px 0px 0px;
	  background:  var(--color-mid-grey);
}





.maininnerbottom{
		max-width:1388px;
		width:100%;
		background-color: #fff;
	  padding: 0px 0px;
}
.maininnerbottom.greybackground{
		background: var(--color-mid-grey);
}







 .maininnerwrapperbottom.displaygrid{
	  padding: 0px 0px 100px 0px;
		background:  var(--color-light-grey);
	}
	


.maininnerbottom.displaygrid{
	display: grid;
  grid-template-columns: auto auto auto;
	padding-top:100px;
  background:  var(--color-light-grey);
  max-width:1200px;
}

.homepageintrobox3{
			padding:230px 30px 0px 30px;
		  background:  var(--color-light-grey);
		  max-width:1300px
 }

 

  .homepageintro{
  	height:800px;
  	background:transparent;
  	padding-top:190px;
  	width:100%;
  }
   .homepageintrotext{
  	width:650px;
  	color:#fff;
  }
  
  
    .homepageintro h1{
  	font-size:50px;
  	font-weight:600;
  	color:#fff;
  	text-transform: uppercase;
  	margin: 0;
  	
  }
   .homepageintro h2{
  	font-size:38px;
  	color:#fff;
  	font-weight:300;
  	text-transform: uppercase;
  	margin-top:20px;
  }  
  
  .homepageintrobox2{
  		display: flex;
  		width:100%;
  		padding-bottom:130px;
  		background:  var(--color-mid-grey);
  }

   .homepageintro p{
  	color:#fff;
  }  
   .homepagearticleleft {
  	max-width:600px;
  	margin-bottom:30px;
  }  
   .homepagearticleleft p {
  	font-size:22px;;
  	line-height:36px;
  	font-weight:300;
  	
  }  



	.homepagearticleinnerleft,
	 .homepagearticleinnerright{
	 	flex: 1; 
	 	 background:  var(--color-mid-grey);
	 	 padding-left:30px;
	 	 font:normal normal 300 22px/29px Exo;
	 	 
	 	}
		.homepagearticleinnerright strong{
	 		color: var(--color-blue);
	 	} 	
	 	
 		.homepagearticleinnerright h2{
	 	color: var(--color-blue);
		 font: normal normal 400 48px/64px Exo;
	 		
	 	} 	
 
	 .homepagearticleinnerleft{
	 		background-image:  url("/images/homepage/cytech-what-is-montage-700-x-800.jpg");
 			background-repeat: no-repeat;
  		background-size: 90%;
	  	background-position: center;
	 	}

	 .homepagearticleinnerleft img{
	 		display:none;
	 	}


.homepageintrobox3.introduction{
		 	/* background-image:  url("/images/homepage/Homepage-Typography-Stacked-Intro.png");*/
 			background-repeat: no-repeat;
  		background-size: 90%;
	  	background-position: top center
	}
.homepageintrobox3.includes{
		 	/* background-image:  url("/images/homepage/Homepage-Typography-Stacked-Include.png");*/
 			background-repeat: no-repeat;
  		background-size: 90%;
	  	background-position: top center
	}
.homepageintrobox3.cost{
		 	/* background-image:  url("/images/homepage/Homepage-Typography-Stacked-Cost.png");*/
 			background-repeat: no-repeat;
  		background-size: 90%;
	  	background-position: top center
	}
.homepageintrobox3.take  {
		 	/* background-image:  url("/images/homepage/Homepage-Typography-Stacked-Length.png");*/
 			background-repeat: no-repeat;
  		background-size: 90%;
	  	background-position: top center
	}
.homepageintrobox3.mark{
		 	/* background-image:  url("/images/homepage/Homepage-Typography-Stacked-Pass.png");*/
 			background-repeat: no-repeat;
  		background-size: 90%;
	  	background-position: top center
	}
.homepageintrobox3.pass{
		 	/* background-image:  url("/images/homepage/Homepage-Typography-Stacked-Recieve.png");*/
 			background-repeat: no-repeat;
  		background-size: 90%;
	  	background-position: top center
	}

.bluebuttonswrapper{
	width:100%;
	text-align:center;
	background:  var(--color-light-grey);
	padding: 100px 0 100px 0;
	display:none;
}




#homepagevideowrapper{
		overflow: hidden;
		display: flex;
		width: 100%;
		justify-content: center;
		background-color: #fff;
} 
		#homepagevideo{
			width:100%;	
			max-width: 1120px;
			margin:100px 0 100px 0 ;
			position:relative;
			height: 0;
    	padding-bottom: calc(56.25% * 0.75); 
		}
		

		#homepagevideo  img{
			width:100%;	
			cursor:pointer;
		}				


		#homevideieoiframe {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		 
		}


 
  /*-- END HOMEPAGE --*/ 
 
 
 /***********************************/
/* cookie */
/***********************************/



#cookie-alert {

	border-top:solid #fff 2px;
	display: none;
	position:fixed;
	left:0;
	bottom:0;
	text-align:center;
	width:100%;
 	background: rgba(0,0,0,.8);
	color:#ffffff;
	z-index:1000;
	min-height:40px;
	line-height:40px;
	font-size:12px;
	padding:0;
	/* text-align:center; */
	transition: height 1s;
	-moz-transition: height 1s; /* Firefox 4 */
	-webkit-transition: height 1s; /* Safari and Chrome */
	-o-transition: height 1s; /* Opera */
}

#cookie-alert p{
  display:inline-block;
}


#cookie-alert a {
	font-weight:bold;
	text-decoration:underline;
}

#cookie-alert a.allow {
	color:#ffffff;
	background-color:var(--color-blue);
	border:solid 1px #fff;
	padding:5px 10px;
	margin-left:10px;
	text-decoration:none;
	cursor:pointer;
}

#cookie-alert a.cookiemore {

	background-color:var(--color-blue);
	border:solid 1px #fff;
	padding:5px 10px;
	margin-left:10px;
	text-decoration:none;
	cursor:pointer;
	color:#fff;
}
#cookie-alert:hover {
	transition: height 1s;
	-moz-transition: height 1s; /* Firefox 4 */
	-webkit-transition: height 1s; /* Safari and Chrome */
	-o-transition: height 1s; /* Opera */
	/* height:60px; */
}

 /***********************************/
/* END COOKIE */
/***********************************/


 /***********************************/
/* REGISTER */
/***********************************/

.registercheckbox label {
    display: none !important;
}

.registercheckboxlabel{
	display:block;
	margin:-30px 0 0 40px;
	
	}


div#actmember{
	border: solid  var(--color-blue) 2px;
	padding:20px;
	
	}

div#actmember img{
	width:120px;
	margin-right:20px;
	
	}
div#actmember  a.expander img{
	width:30px;
	}	
	

#PayPalbox, #creditbox, #offerbox, #loginbox, #tocbox {
    border: solid  var(--color-blue) 2px;
    padding: 40px;
    margin: 50px 0px 10px 0px;
}



  button.delete{
  	vertical-align: middle;
  	padding: 2px 5px; 
  	color:var(--color-blue);
  	border:solid var(--color-blue) 2px;
  	border-radius:2px;
  	cursor:pointer;
 	}	

.promoticked, .promoticked{
	margin-top:20px;
	}

#regformwrapper{
	 display:table;
	 width:100%;
}
.regformcell{
	 display: table-cell;
	 width:50%;
}

#register{
	margin-bottom:60px;
	}


#formExamStart label{
	display:inline-block;
	width:133px;
	margin-left:0px;
	font-size:18px;
}

 .registercheckboxcontact {
	width:100%;
	}
#formExamStart  .registercheckboxcontacttop label{
	width:90%;
	max-width: 400px;
}

#formExamStart  .registercheckboxcontact label{
	width:auto;
	padding-right:30px;

}

#formExamStart  .registercheckboxcontactlower label{
	width:90%;
	max-width: 600px;
}



#formExamStart input[type=text],#formExamStart input[type=password],#formExamStart input[type=tel] {
	display:inline-block;
	width: calc(100% - 253px);
	max-width:400px;
	border:solid   var(--color-blue) 1px;
	height:33px;
	font-size:18px;
	padding-left:10px;
}
#formExamStart  select {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    background: #fff;
		border:solid   var(--color-blue) 1px;
    height:39px;
    margin-bottom: 5px;
    width: calc(100% - 248px);
    font-size:18px;
    padding-left:10px;
    max-width:412px;
}


#TOCwrapper{
	display:inline-block;
	
	}
.ccticked {
    display: none;
}

.promoticked{
    display: none;
}

.paypalticked {
    display: none;
}


div.isactive  .ccticked{
display:block;
}

div.isactive .ccunticked{
display:none; 
}


 .promounticked{
display:block;
}

 .promoticked{
display:none;
}


div.isactive  .promoticked{
display:block;
}

div.isactive .promounticked{
display:none;
}

 /***********************************/
/* END REGISTER */
/***********************************/


/***********************************/
/*  DASHBOARD */
/***********************************/

.dashboardsection{
	width: 100%;
	background:url(../images/cytech-dashboard-background.jpg) no-repeat right top;
	background-color:var(--color-dark-blue);
	background-color:#1a4795;
	height:100%;
	max-height:130px;
	font-size:24px;
	color:#fff;
	display: flex;
	padding-left:20px;
  align-items: center;
  

}

.dashboardsection.bike_types{
	background:url(../images/dashboard/Cytech-Theory-One-Types-Dash.jpg) no-repeat right top ;
}

.dashboardsection.workshop{
	background:url(../images/dashboard/Cytech-Theory-One-Workshop-Dash.jpg) no-repeat right top;
}

.dashboardsection.torque{
	background:url(../images/dashboard/Cytech-Theory-One-Torque-Dash.jpg) no-repeat right top;
}

.dashboardsection.lubricant{
	background:url(../images/dashboard/Cytech-Theory-One-Lubricant-Dash.jpg) no-repeat right top;
}

.dashboardsection.tyres{
	background:url(../images/dashboard/Cytech-Theory-One-Tyres-Dash.jpg) no-repeat right top;
}

.dashboardsection.bs{
	background:url(../images/dashboard/Cytech-Theory-One-British-Standards-Dash.jpg) no-repeat right top;
}

.dashboardsection.delivery{
	background:url(../images/dashboard/Cytech-Theory-One-PDI-Dash.jpg) no-repeat right top;
}

.dashboardsection.health{
	background:url(../images/dashboard/Cytech-Theory-One-Health-and-Safety-Dash.jpg) no-repeat right top;
}
.dashboardsection.legislation{
	background:url(../images/dashboard/Cytech-Theory-One-Legislation-Dash.jpg) no-repeat right top;
}






.dashboardsectionright{
	 width: auto;
	 padding-left:30px;
	}

div.examstageactions{
	padding-top:3px
	}





div.examsection{
	display: grid;
  grid-template-columns: 40%  60%;
  margin-bottom:68px;
}

div.examsection{
	display: grid;
  grid-template-columns: 40%  60%;
}

h1.dashboard{
	font-size:36px;
	color:  var(--font-color);
	font-weight:normal;
	}
	
.examstagebackground{
		width:100%;
		border: solid var(--color-blue) 2px;
		height:50px;
	}

	.examstagebackground div{
		padding-left:10px;
		height:48px;
		line-height:48px;
		font-size:24px;
	}
	

	div.examstage.mobile{display:none;}
div.examstage.desktop{display:none;}
	div.examstage.desktop{display:inline-block;;}	
	
.examstagebutton{
	padding-top:26px;
	display:inline-block;
	}
.examstagestudy {
    display: inline-block;
    height: 80px;
    margin: 0 0 0 30px;
}
.examstagestudy a{

	}	

.buttonsrightphone{
	display:none;
	}




.examstagestudy img{
	margin-bottom:-31px;;
	}	

div.examlink, div.studylink{
	display:inline;
	padding:0;
	margin:0
		}


.startbutton{
			display:inline-block;
	 		font-size: 20px;
	  	font-family: var(--font-sans);
	  	font-weight: var(--font-weight-medium);
	  	padding: 2px 60px 0px 10px; 
	  	height:44px;
	  	line-height:44px;
	  	text-transform: uppercase;
			background-size: 50px 50px;
			background-position: center right;
			background-repeat:no-repeat;
			border:solid var(--color-blue) 2px;
			cursor:pointer;
			font-weight:  var(--font-weight-regular);
 	}
 
.startbutton.exam{
			color: #fff;
	  	background:var(--color-blue);
		 	background-image:url(../images/cytech-button-arrows-white-full.jpg);
		 	background-size: 50px 50px;
			background-position: center right;
			background-repeat:no-repeat;
			margin-left:30px;
}

.startbutton.exam:hover{
			background-image:url(../images/cytech-button-arrows-blue-full.jpg);
	  	color: var(--color-blue);
	  	background-color:#fff;
		 	background-size: 50px 50px;
			background-position: center right;
			background-repeat:no-repeat;
}

.startbutton.study{
			background-image:url(../images/cytech-button-arrows-blue-full.jpg);
	  	color: var(--color-blue);
	  	background-size: 50px 50px;
			background-position: center right;
			background-repeat:no-repeat;

}

.startbutton.study:hover{
			color: #fff;
	  	background-color:var(--color-blue);
		 	background-image:url(../images/cytech-button-arrows-white-full.jpg);
		 	background-size: 50px 50px;
			background-position: center right;
			background-repeat:no-repeat;
}


.startbutton.examretake{
			background-image:url(../images/cytech-button-arrows-orange.png);
	  	background-color:var(--color-light-orange);
		  color:#fff;
	  	background-size: 50px 50px;
			background-position: center right;
			background-repeat:no-repeat;
			margin-left:30px;
			border: solid 2px var(--color-light-orange);
}

.startbutton.examretake:hover{
			color: var(--color-light-orange);
	  	background-color:#fff;
		 	background-image:url(../images/cytech-button-arrows-fill-orange.png);
		 	background-size: 50px 50px;
			background-position: center right;
			background-repeat:no-repeat;
}





.startbutton.examcontinue{
			background-image:url(../images/cytech-button-arrows-green.png);
	  	background-color: var(--color-light-green);
	  	color:#fff;
	  	background-size: 50px 50px;
			background-position: center right;
			background-repeat:no-repeat;
			margin-left:30px;
			border: solid 2px var(--color-light-green);
}

.startbutton.examcontinue:hover{
			color:  var(--color-light-green);
	  	background-color: #fff;
		 	background-image:url(../images/cytech-button-arrows-fill-green.png);
		 	background-size: 50px 50px;
			background-position: center right;
			background-repeat:no-repeat;
}




			div.popupshell{
				width:900px;
				border: solid 2px var(--color-blue);
				background:#fff;
			}
			div.popupshell.video{
				width:900px;
				border: none;
				background:#000;
			}			
			
			
div.popupheader {
    text-align: right;
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 0px;
    /* background-color: #fff; */
}
			
			div.popupheader.video{
				background-color:#000;	
			}			
			
			
			
div.popupheader a {
			color: #fff;
			font-size: 20px;
			cursor: pointer;
			background: var(--color-blue);
			font-weight: bold;
			display: inline-block;
			width: 40px;
			height: 40px;
			line-height: 42px;
			text-align: center;
			vertical-align: middle;
}


			div.popupcontent{
				background:  #fff;
				margin:0px 0px 0px 0px;
				padding:0px 30px 30px 30px;

			}
			
			div.popupcontent.video{
				background:  #000;
				padding:0px 60px 60px 60px;
			}			
			
			
			div.popupcontent h1 ,div.popupcontent h2,div.popupcontent h3{
			  color:#1490cf;
				font-style:italic;
			   text-transform:lowercase;
			   margin:0;
			}
			
			
			div.popupfooter{
				height:100px;
				padding:0px 30px 0px 30px;
				background-color:#fff;
			}


	.examstage,
	.examstageten{
		background-color:var(--color-blue);
		color:#fff;
		}

.sectionpassed {
    float: right;;
    width: 130px;
    height: 50px;
    background-image: url("/images/cytech-pass-rosette.png");
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 50px 50px;
    padding: 0px 0px 0px 60px;
    line-height: 50px;
    font-weight: var( --font-weight-bold);
    margin: 26px  0 0 0px;
}

  
  
  
  

/***********************************/
/* END DASHBOARD */
/***********************************/

/***********************************/
/*  STUDY */
/***********************************/


#studybannertop {
    overflow: hidden;
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: #fff;
    margin-top: -10px;
    background:var( --color-dark-grey);
    padding-bottom:10px;
    background-image: url("/images/studypage/bike_types/cytech bike types anatomy fitting hero.jpg");
    height:560px;
   
}



#studybannertop.bike_types{
	 background-image: url("/images/banners/Cytech-Theory-One-Types-Header.jpg");
}
#studybannertop.workshop{
	 background-image: url("/images/banners/Cytech-Theory-One-Workshop-Header.jpg");
}
#studybannertop.torque{
	 background-image: url("/images/banners/Cytech-Theory-One-Torque-Header.jpg");
}
#studybannertop.lubricant{
	 background-image: url("/images/banners/Cytech-Theory-One-Lubricant-Header.jpg");
}
#studybannertop.tyres{
	 background-image: url("/images/banners/Cytech-Theory-One-Tyres-Header.jpg");
}
#studybannertop.bs{
	 background-image: url("/images/banners/Cytech-Theory-One-British-Standards-Header.jpg");
}
#studybannertop.delivery{
	 background-image: url("/images/banners/Cytech-Theory-One-PDI-Header.jpg");
}
#studybannertop.health{
	 background-image: url("/images/banners/Cytech-Theory-One-Health-and-Safety-Header.jpg");
}
#studybannertop.legislation{
	 background-image: url("/images/banners/Cytech-Theory-One-Legislation-Header.jpg");
}






#studybannerinnertop{
		max-width:1400px;
		width:100%;
	  padding: 0px;
	  color:#fff; 
	  height:40px;
	  line-height:40px; 
	  font-size:15px;
	  padding: 210px 0 0 0;
}

#headersection{
	display:block;
	font-size:48px;
	line-height:60px;
	}
	#headertitle{
		display:block;
		font-size:30px;
	} 


#studybanner {
	 z-index:3;
    overflow: hidden;
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: #fff;
    margin-top: -10px;
    background:var( --color-dark-grey);
    position: -webkit-sticky;
		position: sticky;
		top: 100px;
}

#studybannerinner{
		max-width:1400px;
		width:100%;
		background-color: #fff;
	  padding: 0px;
	  color:#fff; 
	  background:var( --color-dark-grey);
	  height:40px;
	  line-height:40px; 
	  font-size:15px;
  
}
#studybannerinner span{
		font-weight:var( --font-weight-bold);
	
}


h1.studytitle{
		font-size:30px;
		line-height:40px;
}

#studymenu h2 {
    color:  var(--color-blue);
    font-size: 24px;
    font-weight: bold;
    display: inline-block;
    padding: 0px 35px 0px 35px;
}

#studymenu {
    width: 330px !important;
    background: #EBEBEB;
    padding: 40px 0 35px 0;
    display: table-cell;
    vertical-align: top; 
}

#studymenuinner.toolong {

  overflow-y: scroll;
   background: #EBEBEB;
   z-index:0;
}



#studymenuinner{
	width:330px !important;
}

#studymenuinner.fixed{
	position:fixed;
	top:45px;
	background: #EBEBEB;
  z-index:0;
   bottom: initial;
}




#studymenuinner.fixed.atthebottom {
    /* position: relative; */
    bottom: 520px;
    top: initial;
}






/* width */
#studymenuinner::-webkit-scrollbar {
  width: 10px;
}

/* Track */
#studymenuinner::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #d2d2d2; 
  border-radius: 10px;
}
 
/* Handle */
#studymenuinner::-webkit-scrollbar-thumb {
  background: var(--color-blue); 
  border-radius: 10px;
}

/* Handle on hover */
#studymenuinner::-webkit-scrollbar-thumb:hover {
   background: var(color-dark-blue); 
}



#studyleft {
    display: table-cell;
}

#studywrapper {
    display: table;
    width:100%;
}

#studyleftinner {
    width: 100%;
    max-width: 920px;
    padding-right:50px;
}


#studymenu span.current {
    background:#d2d2d2;
}

#studymenu span.phonestudy {
    display: block;
    margin-bottom: 0px;
    font-size: 14px;
    line-height: 22px;
    padding: 15px 15px 15px 30px;
}

#studymenu span a {
color:var(--font-color);
}

.buttonsouter{
	display:table;
	width:100%;
	margin-bottom: 60px;

}

.buttonsleft{
	display:table-cell;
	width:50%;
	}
.buttonsright{
	display:table-cell;
	text-align:right;
	width:50%;
	}

#bikeglossarywrappper{
 display: flex;	
 width:100%;
}

.bikeglossary{
 flex: 50%;
 max-width:446px;
}


#bikeglossarywrappper .bikeglossary:first-of-type {
	padding-right:20px;
}

#bikeglossarywrappper .bikeglossary:last-of-type {
	padding-left:20px;
}


.bikeglossary img{
 width:100%;
 display:block;
}


.glossary_link {
 width:100%;
 display:block;
}

.glossary_link a {
 width:100%;
 display:block;
 border:solid  var(--color-blue) 1px; 
 color:  var(--color-dark-grey); 
 border-radius:5px;
 padding: 10px 20px 10px 20px; 
 box-sizing: border-box;
 background-color:var(--color-light-grey);
 margin:30px 0 30px 0 ;
 text-align:center;
}

.glossary_link a span{
 	 background-image:url(../images/cytech-button-arrows-blue.png);
	 background-size: 10px 10px;
	 background-position: right center;
	 background-repeat:no-repeat;
	 background-color:var(--color-light-grey);
	 padding-right:20px;
}


.glossary_download a {
		width:100%;
		display:block;
		background-image:url(../images/cytech-pdf-icon-blue.png);
		background-size: 18px 24px;
		background-position: left center;
		background-repeat:no-repeat;	
		padding-left:28px;
		color:  var(--color-dark-grey); 
}

.popupcontent.glossary img{
	width:100%;
	}
															
		   
div.popupshell.glossary{
	width:80% !important;;
	border: solid 2px var(--color-blue);
	background:#fff;
	min-width:900px;
}

#biketypeswrappper{
	 display: flex;	
	 border-top: solid #70707099 1px;
}

.biketypesright{
 flex: 60%;
 margin-bottom:60px;
}

.biketypesleft{
 flex: 40%;
 margin-bottom:60px;
 padding-top:13px;
}

.biketypesright img{
 width:100%;
 display:block;
}

#bikefittingwrapppertop{
	 display: flex;	
}

.bikefittingtopleft,.bikefittingtopright{
 	flex: 50%;
 	margin-bottom:60px;
 	border: solid 2px var(--color-blue);
 	border-radius:15px;
 	background-color:var(--color-light-grey);
 	padding:30px;
}

.bikefittingtopleft{
	margin: 30px 30px 30px 0px;
	}
.bikefittingtopright{
margin: 30px 0px 30px 30px;
	}



			
.bikefittingtopright img,.bikefittingtopleft img{
 width:100%;
 display:block;
}

#bikefittingswrapppermiddle{
	 display: flex;	
	 margin-bottom:60px;
}

.bikefittingmiddle{
	flex: 25%;
	margin-right:50px;
	border: solid 2px var(--color-blue);
 	border-radius:15px;
 	background-color:var(--color-blue);
	color:#fff;
	text-align:center; 
	overflow: hidden;
}
.bikefittingmiddle:last-child {
  margin-right:0px;
}



.bikefittingmiddle img{
	 width:100%;
 		display:block;
}

#bikefittingwrappperlower{
		 display: flex;	
		 border-top:solid 2px var(--color-mid-grey);
		 padding-top:30px;
}

#bikematerialswrapppertwo{
		 border-top:solid 2px var(--color-mid-grey);
		 padding-top:0px;
		 margin-top:30px;
}




.bikefittingright img{
	 width:100%;
 	display:block;
}
.bikefittingright{
		margin-left:15px;
		flex: 60%;
		margin-bottom:60px;
		padding-top:65px;
	}
.bikefittingleft{
	margin-right:15px;
	flex: 40%;
	margin-bottom:60px;
	
	}
 												
.text ul{  display: flex;
 	display: grid;
  grid-template-columns: auto auto;
  list-style-type: none;
  max-width: 680px;
  
}
.text ul li{
	 border: solid 2px var(--color-blue);
	 color:  var(--color-blue);
	 border-radius:10px;
	 display:inline-block;
	 text-align:center;
	 text-transform: uppercase;
	 font-size:18px;
	 line-height:46px;
	 max-width:325px;
	 margin:0 30px 30px  0; 
	 font-weight: var(--font-weight-medium);
	 

}



.twocolumnmcheck{
	column-count: 2;
	}
.twocolumnmcheck p{
	padding:0;
	margin:0 0 20px 0;
	column-width: 430px;
	break-inside: avoid-column;
	}	



.twocolumn{
	column-count: 2;
	}
.twocolumn p{
	padding:0;
	margin:0 0 20px 0;
	column-width: 430px;
	padding-left:10px;
	}	
	
	.twocolumn p::before {
  content: "\2022";
  color: var(--color-blue);;
  font-weight: bold;
  display: inline-block; 
  width: 10px;
  margin-left: -10px;
  font-size:20px;
  
}



		
	.materialdiv h2{
		
		margin: 40px 0px 0px 0px;
		}

.twocol{
 display: flex;	
 width:100%;
}

.colone,.coltwo{
 flex: 50%;
 max-width:446px;
}

.materialsimagewrapper {

 width:100%;
}
.materialsimagewrapper .materialsimagecolone,.materialsimagewrapper .materialsimagecoltwo{
 float:left;
}

.materialsimagewrapper .materialsimagecoltwo{
 margin-left:30px;
}



.materialsimagewrapper img{
  height:120px;
}

.blueringedbox{
		clear:both;
		border: solid 2px var(--color-blue);
		margin: 0 30px 30px  0;
		color: var(--color-dark-grey);
		border-radius: 10px;
		display: inline-block;
		text-align: center;  
		padding:6px 20px; 
}



.blueringedbox.fullwidth{
	width:100%;
	text-align:center;
	max-width:450px;
}

.blueringedbox.alignleft{
	text-align:left;

}


.materialdivtwocolumn{
	column-count: 2;
	column-gap: 30px;
	}

.materialdivtwocolumn img{
	max-width:95%;
	height:auto;
	}
.materialdivtwocolumn span.imagedescription{
	display:inline-block;
	width:100%;
	font-weight:700;
	}


.materialdivtwocolumn p:first-of-type {
  margin-top:0px;
}




.studyimagetext{
 display: flex;	
 width:100%;
}

.studyimagetext .texttop{
 flex: 65%;
 padding:0px 30px 0px 0px;
}

.studyimagetext .texttop.left{
  padding:0px 0px 0px 30px;
}

.studyimagetext .texttop.right{
 padding:0px 30px 0px 0px;
}

.studyimagetext p:first-of-type {
 margin-top:0px ;
}


.studyimagetext .image{
 flex: 45%;
}
.studyimagetext .image img{
 width:100%;
}

#materialpropertieslist{
	display: grid;
  gap: 10px 10px;
  grid-template-columns: auto auto auto;
	}
	
#materialpropertieslist div{
		padding-left:40px;
    background-image: url("/images/blue_tick.png");
    height:30px;
	 	background-position: left center;
	 	background-repeat:no-repeat;
		color: var(--font-color);
	  font-size: 18px;
	    background-size: 30px 30px;
	}	
	
#materialpropertieslisttext{
	padding-bottom:30px;
	border-bottom: solid 2px var(--color-mid-grey);
	margin-bottom:30px;
	}	

#steelmaterialheader,
#alloymaterialheader,
#carbonmaterialheader,
#titaniummaterialheader,
#generaltoolsheader,
#verniercalliperheader,
#tapemeasureheader,
#tuneupheader,
#replacementheader,
#minorserviceheader,
#majorserviceheader

{
	
	border: solid var(--color-blue) 1px;
	padding:10px 10px 10px 10px;
  background-image: url("/images/study_plus.png");
  height:38px;
	background-position: right 10px center;
	background-repeat:no-repeat;	
  background-color: #EBEBEB;
  background-size: 38px 38px;
	color: var(--color-blue);
	cursor:pointer;
	line-height:38px;
	font:normal normal 400 24px/38px Exo;
}

#steelmaterialheader.selected,
#alloymaterialheader.selected,
#titaniummaterialheader.selected,
#carbonmaterialheader.selected,
#generaltoolsheader.selected,
#verniercalliperheader.selected,
#tapemeasureheader.selected,
#tuneupheader.selected,
#replacementheader.selected,
#minorserviceheader.selected,
#majorserviceheader.selected

{
  background-image: url("/images/study_minus.png");
  height:38px;
	background-position: right 10px center;
	background-repeat:no-repeat;
	background-size: 38px 38px;	
  background-color: #fff;
}

#steelmaterialbody,
#alloymaterialbody,
#titaniummaterialbody,
#carbonmaterialbody,
#generaltoolsbody,
#verniercalliperbody,
#tapemeasurebody,
#tuneupbody,
#replacementbody,
#minorservicebody,
#majorservicebody

{
	display:none;
}

.studyrow {
  display: flex;
  position-relative;
  z-index:0;
}
.studyrow img {
  max-width:100%;;
}

.studyrow img.fullheight {
  height:calc(100% - 35px);
}

.studyrow img.lowerimage {
  margin-top:30px;;
}

.studyrow.fullpaddingtop{
	margin-top:80px;
	}

.studyrow.fullpaddingtop h2{
	 font-size: 30px;
    line-height: 40px;
}

.studyrow p{
  margin-bottom:20px;
  margin-top:20px;
}


.studyrow.hasbottommargin {
  margin-bottom:30px;
}

.studyrow.hasbottomborder {
  border-bottom:solid  var(--color-mid-grey) 2px;
  padding-bottom:15px;
  margin-bottom:30px;
}

.fullwidthstudytext h5{
	margin:0;
	}


.studyrow.hasmargintop {
  margin-top:30px;
}

.studycolumn.alignmiddle div {
height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.studycolumn.alignmiddle div img {

}


.studycolumn.alignmiddle  {


}

.studyrow.second {
  margin-top:30px;
}

.studyrow.paddingbottom {
  margin-bottom:30px;
}


.studyrow.generaltools{
	padding-bottom:30px;
	border-bottom:solid  var(--color-mid-grey) 2px;
	margin-bottom:30px;
	}

.studyrow.generaltools.noborder{
border:none;
	}



.studycolumn {
  flex: 50%;
}

.studycolumn.left.narrow {
  flex: 33%;
}

.studycolumn.right.wide {
  flex: 66%;
}



.studycolumn.left {
  padding-right:15px;
}

.studycolumn.right {
  padding-left:15px;
}


.studycolumn.hastopmargin {
  margin-top:30px;
}


.studycolumn.spokewrench  {
  text-align:right;
}

.studycolumn.spokewrench  img{
  max-width:300px !important;
}




.studyblock {
  display:block;
}

p.topborder,.numberlist td p.topborder{
	display:inline-block;
	margin-top:30px;
}

p.notopborder{
	display:inline-block;
	margin-top:0;
	margin-bottom:10px;
}
p.notopmargin{
	display:inline-block;
	margin-top:0;
	margin-bottom:10px;
}

.studycolumn ul.hastoppadding{
		margin-top:16px;
	}
.studycolumn ul.hastopmargin{
		margin-top:30px;
	}

.studycolumn ul.hastopspacing{
		margin-top:15px;
	}

.studycolumn ul.hastopmargin20{
		margin-top:20px;
	}




h2.notoppadding{
	display:inline-block;
	margin:0;
}



div.studycolumn.noborder img{
	border: solid var(--color-blue) 1px;
	border-radius: 15px;
	max-width:100%;
}

div.studycolumn.noborder img{
	border: none;
}

div.studycolumn.manuals img{
	border: none;
	max-width:100%;
	max-height:300px;
}

div.studycolumn.left.manuals {
text-align:right;
}
div.studycolumn.right.manuals {
text-align:left;
}

div.studycolumn.right.valign {
margin-top:3%;
margin-bottom:3%;
}



p.top-tip-block{
	display:block;
	margin-left:45px;
	border: solid var(--color-blue) 1px;
	padding: 30px 30px 30px 70px;
	border-radius: 15px;
 background:  var(--color-light-grey);
}

p.top-tip-image{
margin-bottom:-100px;

}

p.top-tip-image img{
	width:90px;
	border: none;
		border-radius: 0;
}

p.noiseor{

	margin:0;
	display:inline-block;
	
	}



.top-tip-div {
	margin-top:60px;
}

.reducedmargintop {
	margin-top:38px;
}

.top-tip-div.notopmargin {
	margin-top:0px;
}


div.studyblockbottom {
	border-top: 1px solid #70707099;
	margin-top:10px;
	padding-top:20px;
}

div.studyblockbottom.morepadding {
	margin-top:40px;

}


p.ptick {
    padding-left: 40px;
    background-image: url("/images/blue_tick.png");
    background-position: left top 5px;
    background-repeat: no-repeat;
    color: var(--font-color);
    background-size: 30px 30px;
    display:inline-block;
    min-height:35px;
}

p.ptick.short {
    width:90%;
    margin:5px 0;
   background-position: left top 0px;
}

p.ptick.top {
    background-position: left top 0px;

}

.fullwidthstudyimage{
	margin-top:30px;
	margin-bottom:30px;	
	border: 1px solid #707070;
	padding: 30px;
	}


.partwidthstudyimage img{
	margin-top:30px;
	margin-bottom:30px;	
	border: none
	padding: 30px;
	width:70%;
	margin-left:15%;
	}

.fullwidthstudyimage.noborder{
	border: none;
	}


.threequarterwidthstudyimage{
	margin-top:30px;
	margin-bottom:30px;	
	border: 1px solid #707070;
	padding: 30px;
	text-align:center;
	}

.threequarterwidthstudyimage.noborder{
	border: none;
	}
.threequarterwidthstudyimage img{
	width:75%;
	} 



.fullwidthstudyimage.video{
	padding: 30px 0;
	cursor:pointer;
	}

.fullwidthstudyimage img{
	width:100%;
	}


.studycolumn ul,table.extinguishers ul {
  padding:0;
  margin:0;
  list-style:none;;
}

.studycolumn li,table.extinguishers li{
			margin-left:0px;
			margin-bottom:20px;
			background: url('/images/bullet.jpg') no-repeat left 8px;
			padding: 0px 10px 0px 25px;
			list-style: none;
			vertical-align: top; 
 
}

.studycolumn li.lessspaddingbottom{;
	margin-bottom:0px;
	}




div.fullwidthtext{margin-bottom:50px;}




h3.study{
	font: normal normal 500 24px/34px Exo;
		color: var(--color-blue);
}
.bikeservice{
border-collapse: collapse;
width:100%;
}
.bikeservice th{
	color:#fff;
	background: var(--color-blue);
	text-align:center;
	padding: 10px;
	border: solid 1px var(--color-blue);
}

.bikeservice th.left{
	text-align:left;
}

.bikeservice td{
	text-align:left;
	padding: 10px;
	border: solid 1px var(--color-blue);
}

.bikeservice td.top{
vertical-align: top;
width:20%;
}

span.numberinner {
    display: inline-block;
  	text-align:center;
  	width:15px;
}

span.number {
    display: inline-block;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    padding: 2px 7px 12px 7px;
    background: #fff;
    border: 1px solid var(--color-blue);
    color: var(--color-blue);
    text-align: center;
    margin-right:10px;
}
span.bluem {
	 color: var(--color-blue);
	 font-weight:bold;
}

div.torqueimage {
	text-align:center;
	margin-top:30px;
}

div.torqueimage img {
	width:80%;
}

p.torquebox{
	display:block;
	width:80%;
	padding: 10px 30px;
	border: 2px solid var(--color-blue);
	border-radius:15px;
	box-sizing: border-box;
	margin-left:10%;
}

.blueborder img{	
	border: solid 1px var(--color-blue);
	border-radius:15px;
}

.lube {
	color: var(--color-blue);
	font-weight: (--font-weight-medium);
	font-size:24px;
}

.studyrow .lubelist img {
	max-width:66%;
	margin-left:16%;
}




.lube.colone {
		margin-top:30px;
	  background-image: url("/images/studypage/lubrication/cytech-icon-oil-grease-difference.png");
	 	background-position: top left;
	 	background-repeat:no-repeat;
	  background-size:  70px 70px;
	  padding:10px 0px 0px 90px;
	  height:80px;
}
.lube.coltwo {
		margin-top:30px;
	  background-image: url("/images/studypage/lubrication/cytech-icon-correct-grease.png");
	 	background-position: top left;
	 	background-repeat:no-repeat;
	  background-size:  70px 70px;
	  padding:10px 0px 0px 90px;
	  height:80px;
}

.lube.colonecalander {
		margin-top:30px;
	  background-image: url("/images/studypage/lubrication/cytech-icon-calendar.png");
	 	background-position: top left;
	 	background-repeat:no-repeat;
	  background-size:  70px 70px;
	  padding:10px 0px 0px 90px;
	  height:80px;
}

 p.lubeheader{
	font: normal normal 500 20px/26px Exo;
	}

p.blueheader{
	color:var(--color-blue);
	font: normal normal 500 24px/34px Exo;
	margin-bottom:0px;
	}
	
	
p.blueheader.notopborder{
	margin-bottom:30px;
	}	
	
p.blueheader.titled{
	margin-bottom:30px;
		margin-top:20px;
	}		
	
	
	
	
	
	
ul.topmargin{
	margin-top:30px;
	}


p.darktext{
    color:#000;
	font: normal normal 600 16px/24px Exo;
	}

.nobox,
.bluebox,
.greybox,
.greycircle,
.linedbox,
.emptybluebox,
.emptygreybox,
.whitebox{
	display:inline-block;
	width:28px;
	height:40px;
	background-position: top left;
	background-repeat:no-repeat;
	background-size: 28px 28px;
	margin-right:10px;
}
.lubactions{
		margin-top:30px;
 }
.lubactions td{
		vertical-align:top;;
 }

.whitebox{
	  background-image: none;
}
.bluebox{
	  background-image: url("/images/studypage/lubrication/lube-diagram-key-blue-square.png");
}
.greybox{
	  background-image: url("/images/studypage/lubrication/lube-diagram-key-grey-square.png");
}
.greycircle{
	  background-image: url("/images/studypage/lubrication/lube-diagram-key-grey-circle.png");
}
.linedbox{
	  background-image: url("/images/studypage/lubrication/lube-diagram-key-blue-stripe.png");
}
.emptygreybox{
	  background-image: url("/images/studypage/lubrication/lube-diagram-key-grey-square-keyline.png");
}
.emptybluebox{
	  background-image: url("/images/studypage/lubrication/lube-diagram-key-blue-square-keyline.png");
}



.valvewrapper{
		border: solid 1px var(--color-blue);
		border-radius:15px;
		background:var(--color-blue);
		text-align:center;
		color:#fff;
		padding:0;
		margin:0;
 }
 
 .valvewrapper img{
		border: solid 1px #fff;
		border-radius:15px;
		width:calc(100% - 2px);
 }

 .valvewrapper p{
		display:inline-block;
		width:100%;
		padding:0px 0;
		margin:0;
	
 }
img.ertoslogo{
	max-width:220px;
	}

.bluestudybox{
 	border: solid 1px var(--color-blue);
 	border-radius:15px;
 	background-color:var(--color-light-grey);
 	padding:30px;
 	margin-bottom:50px;
}
.bluestudybox img{
 	max-width:100%;
}




.rims img{
	 border: solid 1px var(--color-blue);
 	border-radius:15px;
	}
.rims p{
 	font-weight:var( --font-weight-bold);
 	display:inline-block;
 	margin-bottom:30px;
}	
	
table.numberlist.margintop30{
	margin-top:30px;
	}
	
	
.numberlist td{
	vertical-align: top;
	padding:0 0 30px 0;
	
	}

.numberlist td p{
		padding:0;
		margin:0;
}

img.blueborderrim{
	 border: solid 1px var(--color-blue);
 		border-radius:15px;
 		margin-bottom:30px;
	}

img.kitelogosmedium{
	max-width:350px;
	}


.tablecelldiv{
	height:100%;
	padding:0;
	display:table-cell;
	vertical-align: middle;
	}
.tablediv{
	height:100%;
	padding:0;
	display:table;
	vertical-align: middle;
	}

.tablecelldiv.narrow{
width:33%;
vertical-align: top;
padding-top:30px;
	}
.tablecelldiv.wide{
 	width:66%;
 	vertical-align: top;
 	padding-left:30px;
 	padding-right:20px;
}

.tablecelldiv.medium img{
 	width:66%;
}
.tablecelldiv.medium {
 	text-align:center;
 	 	vertical-align: top;
}

.dot {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
}

.dot.pink{
	 background-color: #D87575;
	 color: #D87575;
	 margin-right:10px;
}
.dot.lightblue{
	 background-color: #87CDED;
	 color: #87CDED;
	 margin-right:10px;
}
.dot.darkblue{
	 background-color: #123785;
	 color: #123785;
	 margin-right:10px;
}

table.hazards td{
	width:50%;
	}

table.hazards td.left{
	padding: 0 10px 0 0;
	}

table.hazards td.right{
	padding: 0 0px 0 10px;
	}


table.extinguishers {
	width:100%;
	border-collapse: separate;
 border-spacing: 0 30px;
	}



table.extinguishers td{
	vertical-align:top;
	}
	
table.extinguishers td p.blueheader{
	display:inline-block;
	margin:0;
	}	

table.extinguishers td.left{
	  padding: 0 0 0 20px;
	}

table.extinguishers td.image{
	padding: 0 10px 0 10px;
	}
table.extinguishers td.image{
	padding: 0 10px 0 10px;
}	

table.extinguishers td.image img{
	width:auto;
	height:360px;
  max-width:unset; 

}	

table.extinguishers td.image.fireblanket img{
	width:auto;
	height:220px;;
  max-width:unset; 
}	

 
table.extinguishers td{
	vertical-align:top;
}

table.accidentlist td{
	vertical-align:top;
}

table.accidentlist td p.ptick.short{
	margin-top:20px;
}

div.actlogo {
	text-align:center;
		width:100%;
}


div.actlogo img{
	max-height:135px;
}



/***********************************/
/* END STUDY */
/***********************************/


/***********************************/
/*  EXAM */
/***********************************/

#exambannertop {
    overflow: hidden;
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: #fff;
    margin-top: -10px;
    background:var( --color-dark-grey);
    padding-bottom:10px;
    background-image: url("/images/studypage/bike_types/cytech bike types anatomy fitting hero.jpg");
    height:170px;
	 	background-position: bottom right;
	 	background-repeat:no-repeat;
}

#exambannertop.bike_types{
	 background-image: url("/images/banners/Cytech-Theory-One-Types-Header.jpg");
}
#exambannertop.workshop{
	 background-image: url("/images/banners/Cytech-Theory-One-Workshop-Header.jpg");
}
#exambannertop.torque{
	 background-image: url("/images/banners/Cytech-Theory-One-Torque-Header.jpg");
}
#exambannertop.lubricant{
	 background-image: url("/images/banners/Cytech-Theory-One-Lubricant-Header.jpg");
}
#exambannertop.tyres{
	 background-image: url("/images/banners/Cytech-Theory-One-Tyres-Header.jpg");
}
#exambannertop.bs{
	 background-image: url("/images/banners/Cytech-Theory-One-British-Standards-Header.jpg");
}
#exambannertop.delivery{
	 background-image: url("/images/banners/Cytech-Theory-One-PDI-Header.jpg");
}
#exambannertop.health{
	 background-image: url("/images/banners/Cytech-Theory-One-Health-and-Safety-Header.jpg");
}
#exambannertop.legislation{
	 background-image: url("/images/banners/Cytech-Theory-One-Legislation-Header.jpg");
}






#exambannerinnertop{
		max-width:1400px;
		width:100%;
	  padding: 0px;
	  color:#fff; 
	  height:40px;
	  line-height:40px; 
	  font-size:15px;
	  padding: 50px 0 0 0;
}

#examheadersection{
	display:block;
	font-size:48px;
	line-height:60px;
	}
	#headertitle{
		display:block;
		font-size:30px;
	} 


#exambanner {
    overflow: hidden;
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: #fff;
    margin-top: -10px;
    background:var( --color-dark-grey);
    padding-bottom:10px;
}

#exambannerinner{
		max-width:1400px;
		width:100%;
		background-color: #fff;
	  padding: 0px;
	  color:#fff; 
	  background:var( --color-dark-grey);
	  height:40px;
	  line-height:40px; 
	  font-size:15px;
}
#exambannerinner span{
		font-weight:var( --font-weight-bold);
	
}

.phonepagination{
	display:none;
}



#questionlist{
	margin-top:20px;
}

#questionlist .unselected {
    background: var(--color-mid-grey);
}

#questionlist .current {
    background: #fff;
    color:var(--color-blue);
}

#questionlist .selected {
   background: var(--color-blue);
}


#questionlist .unselected a{
    color:var(--color-blue);
}


#questionlist .selected a{
    color: #fff;  
}

#questionlist .unselected:hover  {
    background:var(--color-blue);
}

#questionlist .unselected:hover  a{
    color:#fff;
}

#questionimage img{
	max-width:90%;
	}



#questionlist span {
    width: 28px;
    height: 26px;
    margin: 0px 3px 0px 0px;
    display: inline-block;
    text-align: center;
    line-height: 26px;
}


#examcopyright{
	font-size:10px;
	line-height: 12px;
	margin-bottom:10px;
	}

#examquestion{
	max-width:680px;
	margin-top:100px;
	
	}
.question{
	 color:var(--color-blue);
	 font-size:24px;
	 margin-bottom:30px;
	}
	
span.answerletter{
	display:inline-block;
	padding-right:10px;
	}

/* CHECK BOX Switch Styles */
.toggle {
    background:url("../images/checkbox.png") top left;
    display:inline-block;
    width:43px;
    height:39px;
}
.toggle.checked {
    background-position: left bottom;
}

.answerradio {
    float: right;
    padding: 0px;
    margin-top: -10px;
    margin-right:-13px;
    margin-left: 10px;
}

div.answer {
    display: block;
    margin: 0px 0px 45px 0px;
    font-size: 18px;
    cursor: pointer;
    font-weight: bold;
}

.failinner{
		max-width:512px;
		width:100%;
	  background-image: url("/images/cytech-fail-face.png");
	 	background-position: top right;
	 	background-repeat:no-repeat;
	  background-size: 80px 80px;
	  padding:0px 120px 0px 0px;
	}

.correct ,.wrong {
	margin-bottom:30px ;
}






.rightquestiontop{
		width:100%;
		margin:0px 0px 20px 0px;
 	font-weight: var(--font-weight-medium);
	}

 .wrongtquestiontop{
		width:100%;
		margin:0px 0px 20px 0px;
		font-weight: var(--font-weight-medium);
	}


.correct .rightquestion,.wrong .wrongquestion{
	display:block;
	width:100px;
	float:left;
}

.buttonsouterwrapper{
		max-width:512px;
		width:100%;
		margin-bottom:40px;
	}




.plainbuttons .next{
float:right;
}
.plainbuttons:after {
    content: '';
    clear: both;
    display: block;
}

.popupcontent .rightanswer ,.popupcontent .rightanswer span{
	font-weight: var(--font-weight-bold);
	color: #80C100;
	}
	
	
	.popupcontent .wronganswer , .popupcontent .wronganswer span{
	 	font-weight: var(--font-weight-bold);
	 		color: red;
	}
		
.passinner{
		max-width:512px;
		width:100%;
	  background-image: url("/images/cytech-pass-rosette.png");
	 	background-position: top right;
	 	background-repeat:no-repeat;
	  background-size: 80px 80px;
	  padding:0px 120px 0px 0px;
	  min-height:120px;
	}

.completeinner{
		width:100%;
	  background-image: url("/images/cytech-pass-rosette.png");
	 	background-position: top right;
	 	background-repeat:no-repeat;
	  background-size: 150px 150px;
	  padding:0px 180px 0px 0px;
	  margin-bottom:60px;
	}




/***********************************/
/* END EXAM */
/***********************************/