/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

/*
Theme Name: Kuraray Custom Theme
Theme URI: https://www.marion.com
Description: A custom designed WordPress theme for Kuraray America
Author: Michael Olufemi
Author URI: https://www.marion.com
Version: 1.2
*/

/*---------------------------------------------------------------------------*/

/* GENERAL STYLES
-------------------------------------------------------------------------------*/


@charset "UTF-8";

@font-face{
	font-family: 'RationalText Book';
	src: url('../webfonts/RationalText-Book.eot');
	src: url('../webfonts/RationalText-Book.eot?#iefix') format('embedded-opentype'),
		 url('../webfonts/RationalText-Book.ttc') format("ttc"),
		 url('../webfonts/RationalText-Book.woff2') format('woff2'),
		 url('../webfonts/RationalText-Book.woff') format('woff'),
		 url('../webfonts/RationalText-Book.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}	

	@font-face{
		font-family: 'RationalText SemiBold';
		src: url('../webfonts/RationalText-SemiBold.eot');
		src: url('../webfonts/RationalText-SemiBold.eot?#iefix') format('embedded-opentype'),
			 url('../webfonts/RationalText-SemiBold.ttc') format("ttc"),
			 url('../webfonts/RationalText-SemiBold.woff2') format('woff2'),
			 url('../webfonts/RationalText-SemiBold.woff') format('woff'),
			 url('../webfonts/RationalText-SemiBold.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}	

@font-face{
			font-family: 'RationalText Medium';
			src: url('../webfonts/RationalText-Medium.eot');
			src: url('../webfonts/RationalText-Medium.eot?#iefix') format('embedded-opentype'),
				 url('../webfonts/RationalText-Medium.ttc') format("ttc"),
				 url('../webfonts/RationalText-Medium.woff2') format('woff2'),
				 url('../webfonts/RationalText-Medium.woff') format('woff'),
				 url('../webfonts/RationalText-Medium.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
		}	
		

@font-face{
font-family: 'RationalText MediumItalic';
src: url('../webfonts/RationalText-MediumItalic.eot');
src: url('../webfonts/RationalText-MediumItalic.eot?#iefix') format('embedded-opentype'),
	 url('../webfonts/RationalText-MediumItalic.ttc') format("ttc"),
	 url('../webfonts/RationalText-MediumItalic.woff2') format('woff2'),
	 url('../webfonts/RationalText-MediumItalic.woff') format('woff'),
	 url('../webfonts/RationalText-MediumItalic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}


    #mainMenu nav > ul > li > a {
        position: relative;
        font-family: 'RationalText Medium', sans-serif;
        padding: 10px 12px;
        text-transform: inherit;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0.6px;
        color: #000f3c;
        border-radius: 0;
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        line-height: normal;
    }

    #mainMenu nav > ul > li:hover a {
      
        color: #00b0e9;
      
    }

.mainbanner:after{
                content : url(../images/dotrectangular.png);
              
                }
    .mainbanner {
background: url(../images/bannerreduced-v2.png) no-repeat right center;
padding: 200px 0px;
max-height: 617px;

    }
 .flickity-viewport {
        overflow: hidden;
        position: relative;
        height: 100%;
        background: url(../images/dotrectangular.png) no-repeat left bottom;
}
    body { color: #010c45; font-size: 18px;}
    p {
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        text-transform: none;
        line-height: 1.3;
        letter-spacing: 0;
        color: #010c45;
        font-family: 'RationalText Book', sans-serif;
        margin-bottom: 26px;
    }
    .inspiro-slider .slide .slide-captions h2 {
        font-family: 'RationalText SemiBold', sans-serif;
        font-size: 60px;
        font-weight: 700;
        line-height: 68px;
        margin-bottom: 30px;
        color: #fff;
    }
    .blu-bgr {background: #000f3c url(../images/multi-circle.png) right center no-repeat; background-size: contain;}
    #footer {
        display: block;
        position: relative;
        background-color: #000f3c;
        font-size: 14px;
        line-height: 32px;
        font-weight: 400;
        font-family: inherit;
        color: #fff;
    }
    #footer a {color: #fff}
    #footer a:not(.btn):not(:hover) {
        color: #fff;
    }

    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        font-family: 'RationalText SemiBold', sans-serif;
        color: #010f3b;
        margin: 0;
        letter-spacing: 0.5px;
    }

    #footer {
        background: #000f3c url(../images/purple.png) no-repeat top left;
        background-position: -26px -53px;
    }

.social-icons.social-icons-border li a {
    border: 1px solid #d7d7d7;
    color: #000f3c !important;
    background: #fff;
}
.widget {
    margin-bottom: 30px;
    position: relative;
    line-height: 22px !important;
    font-family: 'RationalText Book', sans-serif;
    font-size: 16px;
}
.social-icons li {
    margin-right: 10px;
}
.social-icons.social-icons-medium li a {
    height: 38px;
    width: 38px;
    line-height: 38px;
    font-size: 17px;
}
.widget .widget-title, .widget > h4 {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    font-family: 'RationalText Book', sans-serif;
    line-height: 24px;
    letter-spacing: 1px;
    margin-bottom: 0px;
}

#footer .widget .widget-title, #footer .widget h4 {
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 700;
}
button.btn, .btn:not(.close):not(.mfp-close), a.btn:not([href]):not([tabindex]) {
    display: block;
    font-family: inherit;
    border-radius: 0.42rem 0.42rem 0.42rem 0.42rem;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .5px;
    text-decoration: none;
    outline: none;
    padding: 12px 17px !important;
    position: relative;
    text-transform: inherit;
    background-color: #ffc845;
    border-color: #ffc845;
    border-width: 1px;
    border-style: solid;
    color: #010c45;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    margin-bottom: 14px;
    outline: none;
    line-height: 18px;
    cursor: pointer;
    font-family: 'RationalText Medium', sans-serif;
    width: 238px;
    text-align: left;
}
button.btn + .btn, .btn:not(.close):not(.mfp-close) + .btn, a.btn:not([href]):not([tabindex]) + .btn {
    margin-left: 0px;
}
button.btn:hover, button.btn:focus, button.btn:not(:disabled):not(.disabled):active, button.btn:not(:disabled):not(.disabled).active, .btn:not(.close):not(.mfp-close):hover, .btn:not(.close):not(.mfp-close):focus, .btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled):active, .btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled).active, a.btn:not([href]):not([tabindex]):hover, a.btn:not([href]):not([tabindex]):focus, a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled):active, a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled).active { background-color: #010c45;; border-color: #010c45; color: #fff; text-decoration: none; }
#footer .widget .widget-title, #footer .widget h4 {
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 600;
}

h2, .h2 {
    font-size: 46px;
    line-height: 50px;
    font-weight: 500;
    font-family: 'RationalText SemiBold', sans-serif;
}

.heading-text.heading-section h2:before {
    content: "";
    position: absolute;
    height: 4px;
    width: 100px;
    background-color: #00b0e9;
    bottom: -13px;
    left: 0;
    right: 0;
}
#header .header-inner #logo, #header #header-wrap #logo {
    float: left;
    font-size: 28px;
    background: url(../images/kuraray.svg) no-repeat center left;
    position: relative;
    z-index: 1;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    height: 84px;
    background-size: 51%;
    width: 246px;
}
h1, .h1 {
    font-size: 56px;
    line-height: 62px;
    font-weight: 800;
}
.lead {
    font-weight: 400;
    font-size: 20px;
    font-family: 'RationalText Book', sans-serif;
}
.text-dark, .text-dark h1, .text-dark h2, .text-dark h3, .text-dark h4, .text-dark h5, .text-dark h6, .text-dark p, .text-dark .lead, .text-dark a:not(.btn), .text-dark a:not(.btn-danger), .text-dark a:not(.btn):hover:not(.btn-light), .text-dark i, .text-dark li, .text-dark label, .text-dark div:not(.alert), .text-dark span:not(.btn-label) {
    color: #000f3c !important;
}
.aboutk {background: url('../images/circle.png') right center no-repeat; background-size: contain;     background-size: 30%; padding: 100px 0px}
.bford {border-right:1px solid #4d5777 ;}

.showmobile {display: none !important;}
.showmobile2 {display: none}

@media (max-width:991px){

.mainbanner:after{
       display: none;   
        }
.bford {border-bottom:1px solid #4d5777 ; border-right: 0px !important;}
.aboutk {background-image: none; padding: 60px 0px}
#footer {
    background-color: #000f3c !important;
    background-image: none;
}

.blu-bgr {
    background-size: 70% !important;
    background-position: 101% -5% !important;
    padding-top: 50px !important;
}
.vision {/*background: #fff !important;*/ padding-top: 60px !important;} */

.contactbtn {display: none !important;}
h1, .h1 {
    font-size: 37px !important;
    line-height: 46px !important;
    font-weight: 800;
}
.visionimage {padding-top: 0px !important; padding-bottom: 40px !important;}
.hidemobile {display: none;}
.showmobile {display: inherit !important;}
.showmobile2 {display: inherit !important;}
.contactbtn {
    font-size: 27px !important;
    top: 91% !important;
    display: inline-block !important;
    border-radius: 5px !important;
    text-transform: uppercase;
    text-align: center;
    bottom: 6px;
    width: 88%;
    margin-right: 20px;
    padding-top: 16px !important;
 
}


}

.vision {background: #f2f3f5; padding-top: 100px;}
.contactbtn {
    font-size: 24px;
    background: #00b0e9;
    color: #fff;
    position: fixed;
    top: 90%;
    right: 0px;
    display: inline-block;
    padding: 9px 20px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    text-transform: uppercase;
    line-height: 24px;
    font-family: 'RationalText Book', sans-serif;
    z-index: 999;
}
.visionimage {padding-top: 90px;}





@media (min-width:500px) and (max-width:1000px) {
    .mainbanner {
        background: url(../images/bannerreduced-v2.png) no-repeat top center !important;
        padding: 345px 0px 50px 0px !important;
        max-height: inherit !important;
        background-size: 50%!important;
    }

}
@media (max-width:499px) {
    .mainbanner {
        background: url(../images/bannerreduced-v2.png) no-repeat top center !important;
        padding: 343px 0px 50px 0px !important;
        max-height: inherit !important;
        background-size: contain !important;
    }

}


@media (max-width:1000px){
    #mainMenu nav > ul > li > a > i {
        margin-left: 2px !important;
        margin-right: 6px !important;
        min-width: 14px !important;
        display: inline-block !important;
        float: right !important;
        font-size: 31px !important;
        top: -6px !important;
        position: relative !important;
        color: #000f3b !important;
        right: -12px !important;
    }
}


@media (min-width:2500px){
    .aboutk {background: url('../images/circle.png') right center no-repeat; background-size: contain;     background-size: 20%; padding: 100px 0px}
}