@font-face {
	font-family: 'Rakesly Rg';
	src: url('/assets/fonts/RakeslyRg-Regular.eot');
	src: url('/assets/fonts/RakeslyRg-Regular.eot?#iefix') format('embedded-opentype'),
		url('/assets/fonts/RakeslyRg-Regular.woff') format('woff'),
		url('/assets/fonts/RakeslyRg-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Rakesly Lt';
	src: url('/assets/fonts/RakeslyLt-Regular.eot');
	src: url('/assets/fonts/RakeslyLt-Regular.eot?#iefix') format('embedded-opentype'),
		url('/assets/fonts/RakeslyLt-Regular.woff') format('woff'),
		url('/assets/fonts/RakeslyLt-Regular.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

/**************************************************************
 				  GENERAL CLASSES
/*************************************************************/
body{
background: #DEDEDE;
color: #111111;
}

h1.page-title {
	font-family: 'Rakesly Rg';
	color:#003366;
	font-size:40px;
}
h2{
	font-family: 'Rakesly Rg';
	color:#990033;
	font-size:25px;
	margin:40px 0px 7px 0px;
}
h3 {
	font-family: 'Rakesly Rg';
	color:#111111;
	font-size:20px;
}

.no-padding{
	padding:0px;
}
.w-100{
	width:100%;
}
.btn-purple{
	background:#990033;
	color:#fafafa;
	padding:15px 30px;
	border:none;
	border-radius:0px;
	font-size: 18px;
	font-family: 'Rakesly Lt';
}

.btn-purple:hover{
	background:#DEDEDE;
	color:#333333;
}

.section-blue{
	background:#003366;
	padding:50px 0px;
}
.btn-blue{
	background:#003366;
	color:#fafafa;
	padding:15px 30px;
	border:none;
	border-radius:0px;
	font-size: 18px;
	font-family: 'Rakesly Lt';
}
.btn-blue:hover{
	background:#DEDEDE;
	color:#333333;
}

.breadcrumb-path{
	padding:20px 0px 20px 0px;
	color:gray;
}
.container-white{
	background:white;
	padding:30px;
}
.container-white .page-title{
	font-family: 'Rakesly Rg';
	color:#003366;
	font-size:40px;
}
.container-white .separator-line{
    border-bottom:1px solid #DEDEDE;
}

.container-white .content-text{
	color:#111111;
	margin-bottom:20px;
	margin-top: 20px;
	text-align:justify;
}
.letter {
	max-width: 700px;
	border: solid 1px #DEDEDE;
	padding: 50px;
	font-style: italic;
}
.c-green{
	color:green;
}

.contact-div-form{
	margin-top:50px;
}
textarea{
	resize:none;
}
.p-20 {padding: 20px;}
.p-40 {padding: 40px;}

.nav-pills>li>a {
    border-radius: 0px;
    background-color: #003366;
    color: white;
}
.nav-pills>li>a:hover {
    border-radius: 0px;
    background-color: #DEDEDE;
    color: #003366;
}
/***********************************************************
            TESTIMONAL
***********************************************************/
.testimonial{
	padding:40px;
	border-bottom:solid 1px gray;
}

/***********************************************************
                MOBILE MENU PHONES
***********************************************************/
.mobile-menu-btn{
	margin-top:32px;
}

#mobile-menu{
    position: fixed;
    overflow-y: scroll;
	height:100%;
	width:320px;
	z-index: 1;
	right:0px;	
	border-left:solid 2px #990033;
	border-top:solid 1px gray;
	background-color:white;
	display:none;
	bottom:0;
}
#mobile-menu .content{
}

#mobile-menu ul li{
	border-bottom:solid 1px #e3e3e3;
	padding:15px;
	font-size:22px;
	font-family: 'Rakesly Rg';
	
}
#mobile-menu ul li i{
	font-size:12px;
	margin-top:8px;	
}

#mobile-menu .mobile-sub-menu li{
	border:none;
	font-size:17px;
	font-family:Helvetica;
}
.mobile-sub-menu{
	display:none;
}
.header-close-btn{
	padding:20px;
	background:#f5f5f5;
	font-size:22px;
	text-align:right;	
}
/*#menu-modal i{
    font-size: 30px; 
    padding-top: 10px;
}
#menu-modal .menu-list{
    list-style-type: none;
    font-size: 24px; 
    color: gray;
}
#menu-modal .menu-list a{
    color: gray;
}
#menu-modal .menu-list li{
    border-bottom: solid 1px #e5e5e5; 
    padding-bottom:10px; 
    padding-top:10px;
}
.modal-mobile-menu{
    margin:0px;
    height:100%;
}*/
.mobile-button{
    margin-top:24px;
    background:white;
}



/***********************************************************
            IMAGE GALERIES
***********************************************************/
.gallery-display{
	padding: 50px 0px;
}

.gallery-display .image-thumb{
	cursor:pointer;
	margin-bottom:10px;
}

.gallery-display img.thumbnail{
	width:100%;
	height:150px;
}



/***********************************************************
            MODAL FADES IN THE MIDLE
***********************************************************/
.modal.fade:not(.in) .modal-dialog {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/***********************************************************
            MODAL IMAGE
***********************************************************/
#image-modal{
	margin-top:50px;
}
#image-modal .modal-body img{
	height:350px;
}
#image-modal .prev-image,
#image-modal .next-image
{
	cursor:pointer;
}


#image-modal .text-left i{
	font-size:20px;
	margin-right:10px;
}
#image-modal .text-right i{
	font-size:20px;
	margin-left:10px;
}

#image-modal .modal-footer div{
	margin-top:-5px;
}
/**************************************************************
 				 	ACCORDION
/*************************************************************/
.panel-default>.panel-heading {
    color:#003366;
    background-color: #dedede;
    border-color: none; 
    padding:10px 0px;
    font-family: 'Rakesly Rg';
    border-radius: 0px;
}
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: none;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.panel-group .panel-heading+.panel-collapse>.list-group, 
.panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top:none;
}

.panel-title {
	padding-left: 10px;
}

.accordion{
	padding: 0px;
}
.panel-body{
	border: solid #dedede 1px;
}
/**************************************************************
 				 	THUMBNAIL
/*************************************************************/

.thumbnail img {
	max-height: 100%;
    width: 100%;
}

.thumbnail {
	border-radius: 0px;
	border-color: #dedede;
}
/**************************************************************
 				  TOP NAVBAR
/*************************************************************/
.navbar-top{
	background:#003366;
	padding:5px 0px;
	color:#fafafa;
	border-color:#003366;
}
.navbar-top a{
	color: #00CCCC;	
}

.top-nav-right{
	text-align:right;
}
.navbar-top span{
	color: white;
	font-style: italic;
}

.logo-main{
	height:50px;
	margin-top: 6px;
}
.navbar-default{
	background:white;
	height:100px;
	border:none;
	margin-bottom:0px;
	font-family: 'Rakesly Rg';
	font-size: 22px;
}

.navbar-collapse ul li{
	padding-top:25px;
	padding-bottom:25px;
	color: black;
	
}
.navbar-default .navbar-nav>li>a {
    color:#111111;
}
.navbar-default .navbar-nav>li>a:hover {
    color:#990033;
}


/**************************************************************
 				SUB MENU TOP NAVBAR
/*************************************************************/
.sub-menu{
	margin-top:25px;
	padding-bottom:30px;
	position:absolute;
	background:white;
	height:auto;
	padding:15px 20px;
	border-bottom: solid 2px #990033;
	visibility: hidden;
  	opacity: 0;
  	transition: visibility 0s, opacity 0.2s linear;
  	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.sub-menu ul li{
	padding-top:8px;
	padding-bottom:8px;
	font-size:16px;
	font-family:Helvetica;
}
.sub-menu ul li a{
	color:#111111;
}
.sub-menu ul li a:hover{
	color:#990033;
	text-decoration: none;
}

/*ABOUT LNK*/
.about-menu{
	width: 200px;
	margin-right:300px;
	
}
.menu-about-nav:hover .sub-menu{
	visibility: visible;
  	opacity: 1;
	
}
.menu-about-nav:hover .link{
	color:#990033;
}
/*REFRESHING LNK*/
.refinishing-menu{
	width: 400px;
	margin-left:-50px;
}
.menu-refinishing-nav:hover .sub-menu{
	visibility: visible;
  	opacity: 1;
}
.menu-refinishing-nav:hover .link{
	color:#990033;
}
/*PRODUCTS LNK*/
.products-menu{
	width: 850px;
	margin-left:-370px;
}
.menu-products-nav:hover .sub-menu{
	visibility: visible;
  	opacity: 1;
}
.menu-products-nav:hover .link{
	color:#990033;
}


/**************************************************************
 				  MAIN SLIDER
/*************************************************************/
.main-slider{
	background: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ), url('../img/spray-paint-top.jpg') no-repeat center center;
    background-size: cover;
	height:500px;
	margin-top:-20px;
}
.main-slider .section-title h1{
	color:white;
	font-size:60px;
	padding-top:140px;
	font-family: 'Rakesly Rg';
}

/**************************************************************
 				 SECTION OPTIONS
/*************************************************************/
.section-options{
	background: #00476D; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#00476D, #003366); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#00476D, #003366); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#00476D, #003366); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#00476D, #003366); /* Standard syntax */
	color:white;
	text-align:center;
}
.top-lightblue{
	background:#00A2B3;
	height:5px;
}
.option-title{
	color:#00CCCC;
	padding:25px 15px;
	font-size:35px;
	font-family: 'Rakesly Rg';
}
.option-title i{
	color:white;
}
.option-text{
	padding:15px;
}
.option-learn-more {
	padding:30px;
}
.option-learn-more a{
	text-decoration:underline;
	padding:50px;
	color: #fafafa;
	font-size: 20px;
	font-family: 'Rakesly Lt';
}


/**************************************************************
 				 SECTION MULTI STONE
/*************************************************************/
.section-multi-stone{
	height:400px;
	background: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ), url('../img/midwest_chemicals_multiStoneCase.jpg') no-repeat center center;
    background-size: cover;
}
.section-multi-stone .section-title{
	color:white;
	font-size:50px;
	padding-top:120px;
	font-family: 'Rakesly Rg';
}

/**************************************************************
 				COUNTER TOP
/*************************************************************/
.counter-top{
	height:250px;
	background: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ), url('../img/counter-top.jpg') no-repeat bottom center;
    background-size: cover;
    margin-top: 20px;
}
.counter-top .section-title{
	color:white;
	font-size:40px;
	padding-top:85px;
	font-family: 'Rakesly Rg';
}


/**************************************************************
 			SECTION MULTI STONE OPTION
/*************************************************************/
.section-multi-stone-options{
	background: linear-gradient( rgba(150, 2, 48, 0.9), rgba(150, 2, 48, 0.9) ), url('../img/paint-samples.jpg') no-repeat center center;
	color:white;
	background-size: cover;
	padding:20px 0px;
}

.section-multi-stone-options .option1{
	border-right:solid white 1px;
}
.section-multi-stone-options .option1, .section-multi-stone-options .option2{
	padding:70px;
}

.section-multi-stone-options .section-title{
	font-size:50px;
	font-family: 'Rakesly Rg';
}
.section-multi-stone-options .section-title span{
	color:#00CCCC;
}
.section-multi-stone-options .section-text{
	padding:30px 0px;
}


/**************************************************************
 			SECTION TRAINING
/*************************************************************/
.section-training{
	padding:50px 0px;
	background:white;
}
.section-training .training-img{
	background: url('../img/spray-paint-training.jpg') no-repeat center center;
    background-size: cover;
    height:300px;
}

.section-training .section-title{
	font-size:50px;
	color:#990033;
	font-family: 'Rakesly Rg';
	line-height: 60px;
	text-align: center;
	margin-bottom: 20px;
}

/*.section-training .section-text{
	padding:70px;
	text-align: center;
}
*/
.section-training .section-box {
	display: block;
	border: solid 1px #003366;
	margin: 20px;
	width: 400px;
	text-align: center;

}

.section-training .section-box-title {
	display: block;
	background: #003366;
	padding: 0px

}
.section-training .section-box-title h3{
	font-size: 20px;
	padding: 10px;
	color: white;

}

.section-training .section-info{

}

.m-t-35 {
	margin-top: 35px;
}

.training-index .panel-heading {
    color: #FFF;
    background-color: #003366 !important;
    border-color: #003366 !important;
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px;
}

.training-index .panel-heading h3 {
    font-size: 25px;
}

.training-index .panel-body {
    border: solid #003366 1px;
}

/**************************************************************
 			CONTACT PAGE
/*************************************************************/
.form-control {
	border: 1px solid #dedede;
    border-radius: 0px;
    box-shadow: none;
}

/**************************************************************
 			SECTION FOOTER
/*************************************************************/
footer{
	background:#003366;
	padding:50px 0px;
	color:white;
	font-size: 12px;
}

footer .section-title{
	border-left:solid 2px #00CED0;
	font-size:20px;
	padding:0px 8px;
	font-family: 'Rakesly Rg';

}

.m-b-80 {
	margin-bottom: 80px;
}
.m-b-40 {
	margin-bottom: 40px;
}

footer ul{
	margin-top:25px;
}

footer ul li .contact-icon{
	font-size:40px;
	margin-bottom:15px;
}
footer ul li.address,
footer ul li.phone,
footer ul li.email{
	font-size:20px;
	font-family: 'Rakesly Rg';
	
}
footer ul li a,
footer ul li a,
footer ul li a{
	color:white;
	padding-top:7px;	
}
footer ul li a:hover{
	color:#00CCCC;
	text-decoration: none;	
}

footer .footer-rights{
	font-size:12px;
	margin-bottom: 20px;
}
footer .footer-co{
	text-align: right;
	color: #00CCCC;
}
footer .footer-co a{
	color: #00CCCC;
}
footer .separator-line{
    border-bottom:1px solid #00CCCC;
}
footer .social-icon{
	font-size:30px;
	padding:0px 20px 0px 20px;
}

footer .contact-div i{
	color:#00CCCC;
}

/*******************************************************************************************
 				  IPAD CSS (SM DEVICES)
/*******************************************************************************************/
@media (max-width: 991px) {

/**************************************************************
 			TOP NAVBAR
/*************************************************************/
.navbar-default{
	font-size:18px;
}
.logo-main {
    height: 45px;
    margin-top: 10px;
}
/*REFRESHING LNK*/
.refinishing-menu{
	margin-left:-250px;
}
/*PRODUCTS LNK*/
.products-menu{
	width: 720px;
	margin-left:-475px;
}

/**************************************************************
 			MODAL IMAGES
/*************************************************************/
.gallery-display img.thumbnail{
	height:130px;
}

/**************************************************************
 			SECTION TRAINING
/*************************************************************/
.section-training .section-title{
	font-size:35px;
}	


/**************************************************************
 			SECTION MULTI STONE OPTION
/*************************************************************/
.section-multi-stone-options .section-title{
	font-size:30px;
}
.section-multi-stone-options .option1, .section-multi-stone-options .option2{
	padding:70px 30px;
}


/**************************************************************
 			SECTION MULTI STONE OPTION
/*************************************************************/
.section-training .training-img{
	height:340px;
}

/**************************************************************
 			FOOTER
*************************************************************/
footer .contact-div{
	margin-top:60px;
}
footer .footer-rights{
	margin-top:60px;
	margin-bottom:20px;
}

}


/*******************************************************************************************
 				  IPHONE CSS (XS DEVICES)
*******************************************************************************************/
@media (max-width: 767px) {
/**************************************************************
 				 NAVBAR TOP
/*************************************************************/
.navbar-top{
	text-align:center !important;
}
.top-nav-right{
	text-align:center !important;
}
/**************************************************************
 				 SECTION OPTIONS
/*************************************************************/
.section-options{
	margin-bottom:50px;
}
/**************************************************************
 				 SECTION MULTI STONE
/*************************************************************/
.section-multi-stone{
	height:600px;
}

/**************************************************************
 			MODAL IMAGES
/*************************************************************/
img.thumbnail{
	height:110px;
}

#image-modal .modal-body img{
	width:100%;
	height:auto;
}
/**************************************************************
 				 SECTION TRAINING
/*************************************************************/
.section-training .section-info{
	margin-top:40px;
}
.section-training .section-title{
	font-size:40px;
}	
/**************************************************************
 				 TESTIMONIALS
/*************************************************************/
.testimonial{
	padding:40px 0px;
	border-bottom:solid 1px gray;
}

/**************************************************************
 			SECTION MULTI STONE OPTION
/*************************************************************/

.section-multi-stone-options .option1{
	border-right:none;
	border-bottom:solid white 3px;
}
/**************************************************************
 			FOOTER
/*************************************************************/
footer ul li.address,
footer ul li.phone,
footer ul li.email{
	font-size:14px;
	
}

}