/* ==========================================================================
BASE
========================================================================== */
@import url('https://fonts.googleapis.com/css?family=Lato:300');

html { width: 100%; height: 100%; }
body { font-size: 14px; margin: 0; padding: 0; font-family: 'Helvetica', sans-serif; font-weight: 100; letter-spacing: 0.3px; color: #666666; background-color: #f1f1f1; }
a { text-decoration: none; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
a:hover, a:focus { color: #2ca6e0; text-decoration: none; }
.container { width: 90%; max-width: 1200px; }
section { margin-bottom: 0; padding-bottom: 0;}

/* ==========================================================================
HEADER
========================================================================== */

header{ font-size: 0.9em; line-height: 108px; padding-top: 30px; margin: 0; height: 180px; background: #fff; color: #000;
        // set animation
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
      }
        
header.sticky {	z-index: 999999; position: fixed; height: 108px; width: 100%; top: 0; padding-top: 0; margin-top: 0; }



/* ==========================================================================
MAIN MENU
========================================================================== */
.nav { margin: 0 auto; padding: 0; list-style: none; width: 100%; }
.nav>ul{ margin-bottom: 0; padding-left: 0; list-style: none; }
.nav>li { position: relative; display: inline-block; width: 14%; margin: auto; }
.nav>li>a{ position: relative ; display: inline-block ; }
.nav>li>a:hover,.nav>li>a:focus{text-decoration:none;}
.nav>li.disabled>a{color:#b4bcc2}
.nav>li.disabled>a:hover,.nav>li.disabled>a:focus{text-decoration:none;cursor:not-allowed}

.navbar-nav>li{ display: inline-block; margin: auto; padding: 0; }
.navbar-nav>li>a{ display: block; color: #202020; text-align: center; line-height: 16px; }
.navbar-nav>li>a:hover{ background: rgba(100%, 100%, 100%, 0); color: #5280a8; }
.navbar-nav>li>a>p{ display: block; padding-top: 50px; }

.navbar-nav>li>a>i { display: block; width: 48px; height: 48px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: #fff; margin: auto; margin-bottom: -38px; line-height: 46px; text-align: center; color: #5280a8; border: solid 2px #5280a8; }
.navbar-nav>li>a:hover>i { background: #5280a8; color: #fff; }

.dropdown-menu>li>a{ padding: 6px 20px; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus{ color: #ffffff; background-color: #5280a8; }


/* ==========================================================================
MAINPIC
========================================================================== */
.mainpic { margin: 0; }
ul.slides li { margin-bottom: 0; }
ul.slides li div a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#preload-01 { background: url('img/mainpic01.jpg') no-repeat -9999px -9999px; }
#preload-02 { background: url('img/mainpic02.jpg') no-repeat -9999px -9999px; }
#preload-03 { background: url('img/mainpic03.jpg') no-repeat -9999px -9999px; }
#preload-04 { background: url('img/mainpic04.jpg') no-repeat -9999px -9999px; }

.mpg-content1{ position: relative; display: block; vertical-align: bottom; padding-top: 90px; width: 100%; height: 500px; margin: auto; background: url('img/mainpic01.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.mpg-content2{ position: relative; display: block; vertical-align: bottom; padding-top: 90px; width: 100%; height: 500px; margin: auto; background: url('img/mainpic02.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.mpg-content3{ position: relative; display: block; vertical-align: bottom; padding-top: 90px; width: 100%; height: 500px; margin: auto; background: url('img/mainpic03.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.mpg-content4{ position: relative; display: block; vertical-align: bottom; padding-top: 90px; width: 100%; height: 500px; margin: auto; background: url('img/mainpic04.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.flexslider p {
	color: #fff;
	text-align: left;
	font-size: 1.6em;
	line-height: 1.2em;
	white-space: pre-line;
	letter-spacing: -0.5px;
	margin: 0 0 0 125px;
}

.mainpiclogo { max-width: 409px; height: 74px; margin: 0 0 0 50px; padding: 0; }


/* ==========================================================================
Advantage
========================================================================== */
.advantage { background: url('img/indexpic01.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; height: 320px; padding: 0; margin: 0; }
.advantage h1 { font-family: 'Lato', sans-serif; color: #fff; font-size: 2em; padding-top: 50px; }
.advantage p { font-family: 'Lato', sans-serif; color: #fff; font-size: 1.5em; margin-top: 20px; }
.advantage span { font-size: 1.1em; color: #abcfea; display: inline-block;}



/* ==========================================================================
Portfolio
========================================================================== */
.portfolio { background-color: #5280a8; }
#portfolioSlider { padding: 60px auto; margin: auto; width: 90%; max-width: 1200px; }
.effects { padding-left: 15px; }
.effects .img { position: relative; margin-bottom: 50px; position: relative; z-index: 1; overflow: hidden; }
.effects .img:nth-child(n) { margin-right: 5px; }
.effects .img:first-child { margin-left: -15px; }
.effects .img:last-child { margin-right: 0; }
.effects .img img { display: block; margin: 0; padding: 0; height: auto; }
.overlay { display: block; position: absolute; z-index: 20; background: rgba(48, 79, 108, 0.8); overflow: hidden; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; }
a.close-overlay { display: block; position: absolute; top: 0; right: 0; z-index: 100; width: 45px; height: 45px; font-size: 20px; font-weight: 700; color: #fff; line-height: 45px; text-align: center; background-color: #000; cursor: pointer; }
a.close-overlay.hidden { display: none; }
a.expand { display: block; position: absolute; z-index: 100; text-align: center; color: #fff; font-weight: 600; font-size: 14px; text-transform: uppercase; line-height: 30px; }
.overlay-effect .img i { font-size: 30px; }
.overlay-effect .overlay { bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 0; }
.overlay-effect .overlay a.expand { left: 0; right: 0; bottom: 47%; margin: 0 auto -30px auto; }
.overlay-effect .img.hover .overlay { height: 100%; opacity: 1; }
.img { max-width: 360px; width: 100%; margin: auto; margin-top: 60px; }
#portfolioSlider ul li h2 { font-family: 'Lato', sans-serif; font-weight: bold; max-width: 360px; width: 100%; color: #fff; font-size: 1.25em; margin-top: -30px; }
#portfolioSlider ul li p { max-width: 360px; width: 100%; color: #93bce6; font-size: 1em; line-height: 1.2em; margin-left: 0; margin-right: 0; margin-top: 0; padding-bottom: 60px; }
.img img { width: -webkit-calc(100% + 40px) !important; width: calc(100% + 40px) !important; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -moz-transition: opacity 0.35s, -moz-transform 0.35s; -o-transition: opacity 0.35s, -o-transform 0.35s; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); -ms-transform: translate3d(-40px, 0, 0); }
.img:hover img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -ms-transform: translate3d(-40px, 0, 0); }

.content_img { width: 100%; padding: 60px 0; }


/* ==========================================================================
Applications
========================================================================== */
.applications { 
	background: url('img/indexpic02.jpg') no-repeat ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; 
	background-size: cover; 
	background-attachment: fixed; 
	height: 480px; 
	padding-top: 130px; margin: 0; 
	}
.applications h1 { font-family: 'Lato', sans-serif; color: #23568c; font-size: 2em; }
.applications span { font-size: 1.1em; color: #3d4351; }



/* ==========================================================================
Applications Content
========================================================================== */
.triangle {
	z-index: 9999999;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 60px 35px 0 35px;
	border-color: #23568c transparent transparent transparent;
	margin: auto;
	top: 40px;
	}
.apcontent { background: url('img/indexpic03.jpg') no-repeat top center; background-size: 100%; background-color: #f6f6f6; }

.apcontentopic { display: block; width: 100%; background-color: #fff; padding: 60px;  }
.apcontenhalf { display: inline-block; width: 46%; padding: 0 2%; vertical-align: top;}

.apcontent img { margin-bottom: 0; width: 100%; max-width: 360px; padding-top: 60px; margin: auto; }
.apcontent h1 { font-family: 'Lato', sans-serif; color: #23568c; font-size: 2em; padding-top: 30px; }
.apcontent h2 { font-family: 'Lato', sans-serif; width: 100%; max-width: 360px; color: #23568c; font-size: 1.5em; font-weight: bold; margin: auto; padding: 20px 0; }
.apcontent h3 { font-size: 1.1em; line-height: 1.2em; color: #3d4351; text-align: left; padding-top: 30px; padding-bottom: 30px; }
.apcontent p { width: 100%; max-width: 360px; font-size: 1em; line-height: 1.2em; color: #666666; text-align: left; margin: 0 auto; padding-bottom: 30px; }

.team-wrapper { width: 100%; padding: 30px 0; }
#teamSlider img { max-width: 80%; margin: 10px auto; }
#teamSlider h2 { max-width: 360px; color: #23568c; font-size: 1.5em; font-weight: bold; margin: auto; padding: 20px 0; }
#teamSlider p { max-width: 360px; font-size: 1em; line-height: 1.2em; color: #666666; text-align: left; margin: 0 auto; padding-bottom: 60px; padding-left: 5px; }


/* ==========================================================================
CSP
========================================================================== */
.csp { background: url('img/indexpic04.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; height: 520px; padding-top: 60px; margin: 0; }
.csp h1 { font-family: 'Lato', sans-serif; color: #23568c; font-size: 2em; }
.csp h4 { font-family: 'Lato', sans-serif; color: #fff; font-size: 1.5em; padding-bottom: 30px; }
.csp p { font-size: 1.1em; color: #202020; text-align: left; }

.csp-btn { width: 400px; display: block; padding: 25px 40px; margin: 40px auto; color: #fff; background-color: #0d4372; font-size: 1.5em; letter-spacing: 1px; border-radius: 4px }
.csp-btn:hover, .ignite-btn:focus { color: #36a1ff; background-color: #002647; }
.csp-btn i { font-size: 1.5em; padding-right: 10px; }


/* ==========================================================================
CSP CONTENT
========================================================================== */
.cspcontent { background: #fff; margin: 20px; max-width: 600px; border-radius: 10px; }
.cspcontent h1 { font-family: 'Lato', sans-serif; color: #23568c; font-size: 2em; padding: 60px 0 30px 0; }
.cspcontent h4 { font-family: 'Lato', sans-serif; color: #202020; text-align: center; font-size: 1.5em; padding-bottom: 30px; }
.cspcontent p { font-size: 1.1em; color: #202020; text-align: center; }

.cspcontent2 input[type="radio"] { display: none; }
.cspcontent2 input[type="radio"] + label {
	display: inline-block;
	font-family: 'Lato', sans-serif;
	text-align: center;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	cursor: pointer;
	width: 47%;
	padding: 30px 0;
	margin: 8px 1%;
	color: #fff;
	background-color: #4889c1;
	border: 2px solid #4889c1;
}
.cspcontent2 input[type="radio"]:checked + label {
	color: #4889c1;
	background: #fff;
	border: 2px solid #4889c1;
}


.cspcontent3 input[type="radio"] { display: none; }
.cspcontent3 input[type="radio"] + label {
	display: inline-block;
	font-family: 'Lato', sans-serif;
	text-align: center;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	cursor: pointer;
	width: 30.5%;
	padding: 30px 0;
	margin: 8px 1%;
	color: #fff;
	background-color: #4889c1;
	border: 2px solid #4889c1;
}
.cspcontent3 input[type="radio"]:checked + label {
	color: #4889c1;
	background: #fff;
	border: 2px solid #4889c1;
}

.cspcontent1 input[type="text"] {
	display: inline-block;
	font-family: 'Lato', sans-serif;
	text-align: center;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	cursor: pointer;
	width: 98%;
	padding: 20px 0;
	margin: 8px auto;
	color: #202020;
	background-color: #cfe4f6;
	border: 2px solid #cfe4f6;
}

.cspcontent1 input[placeholder] {
  color: #4889c1;
  font-size: 1.2em;
}

.cspcontent hr{ width: 100%; height: 1px; border: none; border-top:2px dotted #CCCCCC; }

.cspcontent-btn { width: 98%; display: block; padding: 25px 40px; margin: 40px auto; color: #fff; background-color: #0d4372; font-size: 1.5em; letter-spacing: 1px; border-radius: 4px }
.cspcontent-btn:hover, .ignite-btn:focus { color: #36a1ff; background-color: #002647; }
.cspcontent-btn i { font-size: 1.5em; padding-right: 10px; }


/* ==========================================================================
Footer
========================================================================== */
.footer { background-color: #f6f6f6; padding-top: 40px; padding-bottom: 40px; }
.footerleft { display: inline-block; float: left; width: 60%;  font-size: 0.9em; text-align: left; color: #1c1c1c; font-weight: bold; }
.footerleft span { font-size: 0.8em; font-weight: normal; }
.footerleft img { float: left; padding-right: 20px; padding-top: 5px; }
.footerright { display: inline-block; float: right; width: 30%; font-size: 0.9em; padding-top: 30px; text-align: right; color: #0d4372; font-weight: bold; }
.footerright a{ color: #0d4372; }
.footerright a:hover{ color: #1e96ff; }




/* ==========================================================================
CONTENT
========================================================================== */

.contentlogo {	z-index: 999999; width: 409px; height: 74px; position: absolute; top: 10px; left: 50px; }

.content-header{ position: relative; display: block; vertical-align: center; padding: 0; width: 100%; height: 160px; background: url('img/content_header.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.submpg-content p { color: #fff; font-size: 1.5em; padding-top: 30px; font-weight: bold; }
.submpg-content h1 { color: #fff; font-size: 2em; margin-top: -10px; }
.submpg-content h5 { color: #fff; font-size: 1em; margin-top: -10px; }

.submpg-content1-1{ position: relative; display: block; vertical-align: center; padding: 0; width: 100%; height: 240px; margin: auto; padding-top: 96px; background: url('img/content_mainpic1_01.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.submpg-content1-2{ position: relative; display: block; vertical-align: center; padding: 0; width: 100%; height: 240px; margin: auto; padding-top: 96px; background: url('img/content_mainpic1_02.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.submpg-content1-3{ position: relative; display: block; vertical-align: center; padding: 0; width: 100%; height: 240px; margin: auto; padding-top: 96px; background: url('img/content_mainpic1_03.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.submpg-content1-4{ position: relative; display: block; vertical-align: center; padding: 0; width: 100%; height: 240px; margin: auto; padding-top: 96px; background: url('img/content_mainpic1_04.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.submpg-content1-5{ position: relative; display: block; vertical-align: center; padding: 0; width: 100%; height: 240px; margin: auto; padding-top: 96px; background: url('img/content_mainpic1_05.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.submpg-content2-1{ position: relative; display: block; vertical-align: center; padding: 0; width: 100%; height: 280px; margin: auto; padding-top: 116px; background: url('img/content_mainpic2_01.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.submpg-content2-2{ position: relative; display: block; vertical-align: center; padding: 0; width: 100%; height: 280px; margin: auto; padding-top: 116px; background: url('img/content_mainpic2_02.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.submpg-content3{ position: relative; display: block; vertical-align: center; padding: 0; width: 100%; height: 240px; margin: auto; padding-top: 96px; background: url('img/content_mainpic03.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.submpg-content4{ position: relative; display: block; vertical-align: center; padding: 0; width: 100%; height: 240px; margin: auto; padding-top: 96px; background: url('img/content_mainpic04.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.submpg-content5{ position: relative; display: block; vertical-align: center; padding: 0; width: 100%; height: 240px; margin: auto; padding-top: 96px; background: url('img/content_mainpic05.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.submpg-content6{ position: relative; display: block; vertical-align: center; padding: 0; width: 100%; height: 240px; margin: auto; padding-top: 96px; background: url('img/content_mainpic06.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }



/* ==========================================================================
COMMERCIAL SOLUTION
========================================================================== */

#solutionCNT{ background-color: #fff; padding-top: 60px; }
#solutionCNT div.row{ background-color: #ececec; margin-bottom: 60px; }
#solutionCNT div.top_txt{ background-color: #fff; }

.solution{ position: relative; display: block; text-align: left; padding: 40px; height: 100%; color: #454545; font-size: 1em; line-height: 1.3em; letter-spacing: -0.5px; }
.solution h1{ width: 100%; text-align: center; font-size: 1.1em; line-height: 1.6em; font-weight: bold; color: #23568c; }
.solution h3{ position: relative; display: block; text-align: center; font-size: 1em; line-height: 1.6em; color: #454545; text-transform: uppercase; }
.solution span{ border-bottom: #454545 1px solid; }
.solution p{ color: #50a0e5; padding-left: 10px; font-size: 0.9em; }

.bgQuestion { background: url('img/bg_01_01.png') no-repeat top left; }
.bgAnswer { background: url('img/bg_01_02.png') no-repeat top left; }
.bgCrown { background: url('img/bg_01_05.png') no-repeat top left; }
.bgFlag { background: url('img/bg_01_06.png') no-repeat top left; }
.bgLock { background: url('img/bg_01_07.png') no-repeat top left; }
.bgClock { background: url('img/bg_01_08.png') no-repeat top left; }
.bgFix { background: url('img/bg_01_09.png') no-repeat top left; }
.bgWhite { background-color: #fff; }
.bgBlue { background-color: #cde9f4; }
.bgGrey { background-color: #ececec; }
.bgYellow { background-color: #f6f2d2; }
.bgGreen { background-color: #cdf4e5; }

.solutionpic img{ width: 90%; margin: 5%; }


#utilityCNT{ background-color: #fff; padding-top: 60px; }
#utilityCNT div.row{ background-color: #f4f1e6; margin-bottom: 60px; }
#utilityCNT div.top_txt{ background-color: #fff; }

.utilitypic img{ width: 90%; margin: 5%; }


#applianceCNT{ background-color: #fff; padding-top: 60px; }
#applianceCNT div.row{ background-color: #deedf4; margin-bottom: 60px; }
#applianceCNT div.top_txt{ background-color: #fff; }

.appliancepic img{ width: 90%; margin: 5%; }


/* ==========================================================================
APPLIANCE DEVELOPMENT
========================================================================== */
.subtitle_h2{ font-weight: 600; padding: 15px 0px; position: relative; margin-bottom: 20px; display: inline-block;}
.subtitle_h2::after{ content: ""; position: absolute; margin: auto; width: 50%; height: 2px; background-color: #3c7e9a; bottom: 0; left: 0; right: 0; }



/* ==========================================================================
FAQ
========================================================================== */
#solutionCNT div.top_txt{ background-color: #fff; }
.subtitle_h2{ font-weight: 600; font-size: 25px; padding: 15px 0px; position: relative; margin-bottom: 20px; text-align: center;}
.subtitle_h2::after{ content: ""; position: absolute; margin: auto; width: 50%; height: 2px; background-color: #3c7e9a; bottom: 0; left: 0; right: 0; }

.submpg-content div p{ padding-top: 50px; }

.card h2{ padding:15px 0; font-size: 20px; margin: 0px; border-bottom: 1px solid #ccc; cursor: pointer;}
.card p{ padding:20px; margin:0px; }
.card .question{ background: url(img/bg_01_03.png) no-repeat top right #fff; background-size: 5%; }
.card .question i{ width: 30px; height: 30px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: #5280a8; margin-bottom: -24px; margin-right: 5px; font-size: 1em; line-height: 30px; text-align: center; color: #fff; border: solid 0 #5280a8; }

.card .answer{ display: none; background: url(img/bg_01_04.png) no-repeat top left #fffbea; background-size: 5%; border-bottom: 1px solid #ccc;}
.other_q ul li a{ display: inline-block; font-size: 14px;} 

.add_question{ box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); margin-top: 50px; background: #fbfbfb; padding: 20px 50px; }



/* ==========================================================================
Waypoints
========================================================================== */
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6 { visibility: hidden; }
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-1s  { animation-delay:   1s; -webkit-animation-delay:   1s; }
.delay-15s { animation-delay: 1.5s; -webkit-animation-delay: 1.5s; }
.delay-2s  { animation-delay:   2s; -webkit-animation-delay:   2s; }
.delay-25s { animation-delay: 2.5s; -webkit-animation-delay: 2.5s; }
.delay-3s  { animation-delay:   3s; -webkit-animation-delay:   3s; }


/*Youtube 自動縮放*/
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


@media screen and (max-width: 64em) {
.container { width: 96%; }
.flexslider p { margin-left: 50px; }

.apcontentopic { width: 96%; margin: auto; padding: 15px; }
.apcontenhalf { display: inline-block; width: 50%; padding: 0;  }
.apcontent img { margin: auto; width: 100%; padding: 0; }
.apcontent h1 { padding-top: 0; }
.apcontent h2 { width: 100%; color: #23568c; font-size: 1.25em; }
.apcontent p { max-width: 100%; width: 100%; }

}

@media screen and (max-width: 48em) {

header{ padding-top: 0; height: 100px; }
header.sticky {	z-index: 999999; position: fixed; height: 100px; width: 100%; top: 0; padding-top: 0; margin-top: 0; }


.nav>li { width: 16%; }
.navbar-nav>li>a>p{ display: none; }

.flexslider p { width: 100%; text-align: center; margin-left: 0; font-size: 1.4em; }

#portfolioSlider { padding: 0; margin: 0; width: 100%; padding-left: 15px; }
.img { max-width: 100%; }
#portfolioSlider ul { padding-bottom: 100px; }
#portfolioSlider ul li h2 { max-width: 100%; }
#portfolioSlider ul li p { max-width: 100%; text-align: left; padding-bottom: 0; margin-bottom: 0; }

.applications { height: 240px; padding-top: 30px; }

.apcontenhalf { display: block; width: 100%; padding: 0; }
.apcontent img { margin: auto; width: 100%; padding: 0; }
.apcontent h1 { padding-top: 0; padding-top: 30px; }
.apcontent h2 { width: 100%; color: #23568c; font-size: 1.25em; }
.apcontent p { max-width: 100%; width: 100%; padding: 0 0 30px 0; }


.csp { height: 650px; }

.footerleft { display: block; width: 100%; }
.footerright { display: block; width: 100%; text-align: center; }


#solutionCNT{ padding-top: 10px; }
#solutionCNT div.row{ margin-bottom: 10px; }

}


@media screen and (max-width: 36em) {
.logo {	width: 70%; max-width: 400px; height: auto; top: 120px; left: 5%; }
.contentlogo {	width: 70%; max-width: 400px; height: auto; top: 20px; left: 5%; }

#teamSlider img { max-width: 100%; margin: 0 auto; }
#teamSlider h2 { max-width: 100%; }
#teamSlider p { max-width: 100%; }


}

@media (min-width: 1023px){
	.share_div a{ font-size: 20px;  margin-right: 7px; }
}

@media (max-width: 1024px){
  .cbp-af-header{ top: 0; }
  .mainpic{ margin-top: 90px; }

  .csp-btn{ width: 100%; }

  .mainpic .slides li div{ height: 390px; margin-bottom: 10px;}
.mainpic .slides div p{ color: #fff; font-size: 18px; padding: 0px 30px; text-shadow: 1px 1px 10px #000; font-weight: 500;}
.mpg-content1{ position: relative; display: block; vertical-align: bottom; padding-top: 90px; width: 100%; margin: auto; background: url('img/mainpic01.jpg') no-repeat center center; background-size: cover; }
.mpg-content2{ position: relative; display: block; vertical-align: bottom; padding-top: 90px; width: 100%; margin: auto; background: url('img/mainpic02.jpg') no-repeat center center; background-size: cover; }
.mpg-content3{ position: relative; display: block; vertical-align: bottom; padding-top: 90px; width: 100%; margin: auto; background: url('img/mainpic03.jpg') no-repeat center center; background-size: cover; }
.mpg-content4{ position: relative; display: block; vertical-align: bottom; padding-top: 90px; width: 100%; margin: auto; background: url('img/mainpic04.jpg') no-repeat center center; background-size: cover; }

.footerright .share_div{ display: none; }
}



@media (max-width: 420px){
  .other_q ul li a{ font-size: 12px; } 
  .add_question{  padding: 20px 20px; }
  .card .question{ background-size: 20%; }
  .card .answer{ background-size: 20%;}


  .mainpic{ margin-top: 90px; }

  .csp-btn{ width: 100%; }
.mainpic .slides li div{ height: 390px; margin-bottom: 10px;}
.mainpic .slides li div p{ color: #fff; font-size: 18px; padding: 0px 30px; text-shadow: 1px 1px 10px #000; font-weight: 500;}
.mpg-content1{ position: relative; display: block; vertical-align: bottom; padding-top: 90px; width: 100%; margin: auto; background: url('img/mainpic01.jpg') no-repeat center center; background-size: cover; }
.mpg-content2{ position: relative; display: block; vertical-align: bottom; padding-top: 90px; width: 100%; margin: auto; background: url('img/mainpic02.jpg') no-repeat center center; background-size: cover; }
.mpg-content3{ position: relative; display: block; vertical-align: bottom; padding-top: 90px; width: 100%; margin: auto; background: url('img/mainpic03.jpg') no-repeat center center; background-size: cover; }
.mpg-content4{ position: relative; display: block; vertical-align: bottom; padding-top: 90px; width: 100%; margin: auto; background: url('img/mainpic04.jpg') no-repeat center center; background-size: cover; }


.cspcontent2 input[type="radio"] + label { width: 100%;	padding: 20px 0; }
.cspcontent3 input[type="radio"] + label { width: 100%;	padding: 20px 0; }

}