/*========== Non-Mobile First Method ==========*/ @media only screen and (min-width : 1250px) { #main-menu{ display: block; } #mobile-menu{ display: none; } /*============================ Milestone Section ===============================*/ .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in { -webkit-animation: cd-bounce-2-inverse 0.6s; -moz-animation: cd-bounce-2-inverse 0.6s; animation: cd-bounce-2-inverse 0.6s; } .cd-timeline-content { margin-left: 0; padding: 1.6em; width: 45%; } .cd-timeline-content::before { top: 24px; left: 100%; border-color: transparent; border-left-color: white; } .cd-timeline-content .cd-read-more { float: left; } .cd-timeline-content .cd-date { position: absolute; width: 100%; left: 122%; top: 6px; font-size: 16px; font-size: 1rem; } .cd-timeline-block:nth-child(even) .cd-timeline-content { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: white; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { left: auto; right: 122%; text-align: right; } .cssanimations .cd-timeline-content.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-content.bounce-in { visibility: visible; -webkit-animation: cd-bounce-2 0.6s; -moz-animation: cd-bounce-2 0.6s; animation: cd-bounce-2 0.6s; } .cd-timeline-img { width: 60px; height: 60px; left: 50%; margin-left: -30px; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .cssanimations .cd-timeline-img.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-img.bounce-in { visibility: visible; -webkit-animation: cd-bounce-1 0.6s; -moz-animation: cd-bounce-1 0.6s; animation: cd-bounce-1 0.6s; } .cd-timeline-block { margin: 4em 0; } .cd-timeline-block:first-child { margin-top: 0; } .cd-timeline-block:last-child { margin-bottom: 0; } #cd-timeline { margin-top: 3em; margin-bottom: 3em; } #cd-timeline::before { left: 50%; margin-left: -2px; } /*============================EOF Milestone Section ===============================*/ } /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) {} @media only screen and (min-width : 768px) and (max-width : 1024px){ .center-container{ width: 100%; } #header-wrapper .center-container{ padding: 0 10px ; } #weather-sec{ width: 105px; padding-top: 25px; margin-right: 82px; } .hide-menu #weather-sec{ margin-right: 0 } .cdl-search-container { right: 200px; width: 264px; top: 23px; } .cdl-search-container .cdl-find{ left: 213px; } .weather-widget{ float: right; margin-right: 35px; } /*============================ About ===============================*/ #reparing-center{ width: 100%; } #reparing-center h1{ padding: 50px; text-align: center; } #about-cdl .center-container> div{ width: 100%; } .about-top-txt p{ width: 100%; } .abt-two-col-wrapper{ padding: 0 50px; } #about-txt .abt-two-col-wrapper{ padding: 0 40px; } #about-txt .our-people{ height: 462px; } .about-top-txt{ padding-top: 40px; } #about-txt{ width: 100%; } /*========================= EOF About ==============================*/ /*=========================== TABS =================================*/ #tabs-container{ width: 100%; } #tabs-container .tab-content-wrapper{ padding: 0 20px; } .repairs-txt .circle-inner { height: 95px; margin-right: 20px; width: 95px } .repairs-txt .circle { font-size: 1.3em; padding: 32px 28px 31px; } .repairs-txt .circle-3 { padding-left: 15px; } /*========================= EOF TABS ===============================*/ .map-txt-wrapper { padding: 26px 49px 1px; } /*========================== FOOTER ================================*/ .footer-logos{ width: 40%; } .footer-menu{ width: 25%; padding-left: 20px; } .menu-footer-menu-2-container #menu-footer-menu-2{ margin-left: 0px; } #news-letter{ width: 30%; } .form-newsltter{ width: 250px; } /*======================= EOF FOOTER ===============================*/ .cdl-caption-slot{ width: 100%; } /*======================= Dock-yard(map) PAGE ===============================*/ .page-template-dock-yard .content{ width: 80%; } #map-wrapper-section{ display: none; } #dock-accordion { margin-top:10px; border:thin solid #cecece; border-top:none; border-bottom:none; display: block; } #dock-accordion h3{ padding-bottom: 10px; } #dock-accordion .dock-acco { background:white; height:100px; display:none; border-bottom:thin solid #cecece; padding:25px; height: auto; } #dock-accordion p{ text-align: justify; } a.acco-wrapper { display:block; background:#f4f4f4; background-image: -webkit-linear-gradient(white,#ededed); background-image: -moz-linear-gradient(white,#ededed); background-image: -o-linear-gradient(white,#ededed); background-image: -ms-linear-gradient(white,#ededed); background-image:linear-gradient(white,#ededed); color:#959696; padding-left:15px; height:40px; line-height:40px; text-decoration:none; border-bottom:thin solid #cecece; font-family:Arial; font-size:13px; font-weight:bold; text-shadow:0px 1px 1px white; text-transform: uppercase; } .first { border-top:thin solid #cecece; } .tab-map-image{ width: 100%; height:auto; overflow: hidden; margin-top: 20px; margin-bottom: 20px; } /*======================= EOF Dock-yard(map) PAGE ===============================*/ .cd-feature-vid { background-position: -62px 0; } li.menu-item-has-children:after { background-image: url(../images/down_arrow1.png) !important; content: ''; background-size: contain; height: 20px; background-repeat: no-repeat !important; position: absolute; right: 15px; top: 19px; width: 20px; cursor: pointer; } .sub-menu { display: none; } #shiftnav-toggle-main .shiftnav-main-toggle-content { display: none; } .ome-box h2{ font-size: 20px } .ome-box .vc_column-inner { min-height: 278px; } .ome-box .slick-slide img{ width: 100%; height: auto; } .map-image, .video-para{ margin: 0 auto; float: none !important; } .cdl-search-btn{ display: none; } .onomichi-dockyard { padding: 36px 37px 2px 48px; } .odyssey-banner, .home-banner{ font-size: 21px !important; padding: 9px !important; } .repairs-undertaken ul li{ width: 50%; } } @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { /*.cdl-search-container { left: 41%; top: 2%; }*/ /*============================ About ===============================*/ .about-cdl{ } #reparing-center{ width: 100%; } #reparing-center h1{ padding: 50px; text-align: center; } .abt-two-col-wrapper{ padding: 0; } #about-txt{ width: 100%; } /*========================= EOF About ==============================*/ #map-text { min-height: 440px; } .summery .recent-posts h3 a{ font-size: 0.6em; font-weight: 700; text-align: justify; } .cd-blog-details .summery{ padding-top: 35px; } } @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) { #main-menu{ display: none; } #mobile-menu{ display: block; } #newssidebar{ display: none; } #wrapper #main-content-wrapper{ width: 100%; } #main-content-wrapper #main-content { padding-right: 0; } #wrapper .banner-header{ min-height: 450px } #wrapper h1.archive-header{ font-size: 1.9em; } /*============================ GRID ===============================*/ .cd-l-col{ width: 50%; } .cd-m-col{ width: 50%; } .cd-r-col{ width: 100%; } /*========================== EOF GRID =============================*/ /*=========================== TABS =================================*/ #tabs-container ul.tabs li { width: 50%; border-bottom:1px solid #3f5da7; } #tabs-container .tabs{ border-bottom: none; } /*========================= EOF TABS ===============================*/ .map-txt-wrapper h2{ font-size: 1.5em; } #map-text{ min-height: 332px; } #page-sidebar{ display: none; } .contentwrapper .content{ width: 95% } .onomichi-dockyard h3{ margin-bottom: 23px; } .cdl-pdf { width: 33.5%; } } /*720P and + display hack*/ @media only screen and (max-width : 767px){ .tparrows{ display: none !important; } .contentwrapper .content h1 { font-size: 35px; margin-bottom: 18px; margin-top: 34px; } .center-container{ width: 100%; } #header-wrapper .center-container{ padding: 0 10px ; } #weather-sec{ display: none; } /*============================ About ===============================*/ #reparing-center{ width: 100%; } #reparing-center h1{ padding: 20px 10px; text-align: center; font-size: 1.5em; } .about-top-txt p{ width: 100%; } #reparing-center .abt-two-col-wrapper{ padding: 0 10px; } .abt-two-col-wrapper{ padding: 0 50px; } #about-txt .abt-two-col-wrapper{ padding: 12px 10px; } .abt-two-col-wrapper> div{ width: 100%; } /*.about-top-txt{ padding-top: 27px; padding-bottom: 40px; }*/ .onomichi-dockyard, .about-top-txt { padding: 16px 12px 2px; } #about-txt{ width: 100%; } /*========================= EOF About ==============================*/ /*=========================== TABS =================================*/ #tabs-container{ width: 100%; } #tabs-container .tab-content-wrapper{ padding: 0 20px; } #tabs-container ul.tabs li { width: 100%; border-bottom:1px solid #3f5da7; } #tabs-container .tabs{ border-bottom: none; } .repairs-txt{ width: 100%; text-align-last: center; margin-bottom: 20px; } .repairs-img{ width: 100%; } .text-wrapper{ padding-right: 0; text-align: justify; } .repairs-txt h2 { font-size: 1.7em; } .tab-content-wrapper img{ width: 100%; height: auto; overflow: hidden; } .repairs-txt .circle-inner { height: 84px; margin-right: 8px; width: 84px; } .repairs-txt .circle{ font-size: 1em; padding: 30px 25px 30px 27px; } .repairs-txt .circle-3{ padding-left: 17px; } .repairs-txt .circle-txt{ font-size: 0.8em !important; } /*========================= EOF TABS ===============================*/ #map-image, #map-text{ width: 100%; } .map-txt-wrapper { padding: 18px 22px 1px; } #map-text{ text-align: center; } #map-text { min-height: 300px; } .map-txt-wrapper h2 { font-size: 1.5em; margin-bottom: 9px; } /*========================== FOOTER ================================*/ #footer-wrapper{ height: auto; padding: 20px; } #footer-logos{ width: 100%; } #footer-logos .foot-main-logo, #footer-logos .partners{ margin: 10px auto; text-align: center; } .footer-menu{ width: 100%; padding-top: 30px; margin-left: 0%; } .menu-footer-menu-2-container #menu-footer-menu-2{ margin-left: 0px; } #news-letter{ width: 100%; padding-top: 30px; } .form-newsltter{ width: 100%; } /*======================= EOF FOOTER ===============================*/ .cd-timeline-items li.active-slide{ font-size: 4em; } .cd-timeline-items li{ font-size: 2.5em; } .cd-timeline .cdl-tl-line{ /*top: 50px;*/ display: none; } .cd-timeline .bx-controls-direction{ top: 165px; } .cdl-caption-slot{ width: 100%; padding: 0 20px 20px; } .cd-timeline .bx-viewport{ left: -85px !important; } #time-line{ padding-top: 20px; padding-bottom: 44px; min-height: 420px; } .cd-blog-details{ background-position: -1px 0; } /*======================= Dock-yard(map) PAGE ===============================*/ .page-template-dock-yard .content{ width: 80%; } #map-wrapper-section{ display: none; } #dock-accordion { margin-top:10px; border:thin solid #cecece; border-top:none; border-bottom:none; display: block; } #dock-accordion .dock-acco { background:white; height:100px; display:none; border-bottom:thin solid #cecece; padding:15px; height: auto; } #dock-accordion p{ text-align: justify; } a.acco-wrapper { display:block; background:#f4f4f4; background-image: -webkit-linear-gradient(white,#ededed); background-image: -moz-linear-gradient(white,#ededed); background-image: -o-linear-gradient(white,#ededed); background-image: -ms-linear-gradient(white,#ededed); background-image:linear-gradient(white,#ededed); color:#959696; padding-left:15px; height:40px; line-height:40px; text-decoration:none; border-bottom:thin solid #cecece; font-family:Arial; font-size:13px; font-weight:bold; text-shadow:0px 1px 1px white; text-transform: uppercase; } .first { border-top:thin solid #cecece; } .tab-map-image{ width: 100%; height:auto; overflow: hidden; margin-top: 20px; margin-bottom: 20px; } /*======================= EOF Dock-yard(map) PAGE ===============================*/ /*.testimonial1{ background-size: 39px auto; padding: 0 0 0 35px !important; } .testimonial2{ background-size: 39px auto; padding: 0 35px 0 0 !important; }*/ #page-sidebar{ display: none; } /*============================ Milestone Section ===============================*/ .cd-timeline-content h2 { font-size: 20px; font-size: 1.25rem; } .cd-timeline-content p { font-size: 16px; font-size: 1rem; } .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { font-size: 14px; font-size: 0.875rem; } /*============================ EOF Milestone Section ===============================*/ li.menu-item-has-children:after { background-image: url(../images/down_arrow1.png) !important; content: ''; background-size: contain; height: 20px; background-repeat: no-repeat !important; position: absolute; right: 15px; top: 19px; width: 20px; cursor: pointer; } .sub-menu { display: none; } #shiftnav-toggle-main .shiftnav-main-toggle-content { display: none; } .ome-box .vc_column-inner { /*min-height: 245px;*/ } .ome-box h2{ font-size: 18px; } .map-image, .video-para{ height: 257px; } #about-txt .abt-two-col-wrapper> div { min-height: 257px; } .vc_row.ome-box:nth-child(4n-1) { background: #DEDEDE !important; } .vc_row.ome-box:nth-child(4n-1) .vc_custom_1459921287005, .vc_row.ome-box:nth-child(4n-1) .vc_custom_1459921258468, .vc_row.ome-box:nth-child(4n-1) .vc_custom_1460109894970, .vc_row.ome-box:nth-child(4n-1) .vc_custom_1460107072659, .vc_row.ome-box:nth-child(4n-1) .vc_custom_1460111099855, .vc_row.ome-box:nth-child(4n-1) .vc_custom_1460107118447, .vc_row.ome-box:nth-child(4n-1) .vc_custom_1460111441937, .vc_row.ome-box:nth-child(4n-1) .vc_custom_1460107163807, .vc_row.ome-box:nth-child(4n-1) .vc_custom_1460112182601, .vc_row.ome-box:nth-child(4n-1) .vc_custom_1460107240051, .vc_row.ome-box:nth-child(4n-1) .vc_custom_1461755645606{ background: transparent !important; } .vc_row.ome-box:nth-child(4n-1) h2, .vc_row.ome-box:nth-child(4n-1) p, .vc_row.ome-box:nth-child(4n-1) ul li { color: #000 !important; } .vc_row.ome-box:nth-child(4n-3) { background: white !important; } .vc_row.ome-box:nth-child(4n-3) .vc_custom_1459921287005, .vc_row.ome-box:nth-child(4n-3) .vc_custom_1459921258468, .vc_row.ome-box:nth-child(4n-3) .vc_custom_1459921041738, .vc_row.ome-box:nth-child(4n-3) .vc_custom_1460110078744, .vc_row.ome-box:nth-child(4n-3) .vc_custom_1460112611231, .vc_row.ome-box:nth-child(4n-3) .vc_custom_1460107174618, .vc_row.ome-box:nth-child(4n-3) .vc_custom_1460111836166{ background: white !important; color: #000 !important; } .vc_row.ome-box:nth-child(4n-3) h2, .vc_row.ome-box:nth-child(4n-3) h3, .vc_row.ome-box:nth-child(4n-1) h3, .vc_row.ome-box:nth-child(4n-3) p , .vc_row.ome-box:nth-child(4n-3) ul li { color: #000 !important; } .vc_row.ome-box:nth-child(4n-1) .vc_column-inner, .vc_row.ome-box:nth-child(4n-1) .wpb_content_element, .vc_row.ome-box:nth-child(4n-3) .vc_column-inner, .vc_row.ome-box:nth-child(4n-3) .wpb_content_element { margin-bottom:0 !important; margin-top:0 !important; padding:1em !important; } .page-id-596 .vc_row.ome-box:nth-child(4n-1) .vc_column-inner, .page-id-596 .vc_row.ome-box:nth-child(4n-1) .wpb_content_element, .page-id-596 .vc_row.ome-box:nth-child(4n-3) .vc_column-inner, .page-id-596 .vc_row.ome-box:nth-child(4n-3) .wpb_content_element { padding:9px !important; } .ome-box a { color: #173c95; } #statistics-chart .vc_line-chart .vc_chart-legend, #statistics-chart .vc_line-chart .vc_chart-with-legend{ width: 100% !important; } #main-logo { height: 59px; max-width: 225px; } .home .map-txt-wrapper .learn-more { float: none !important; margin: 0 auto; width: 60%; } .banner-header { min-height: 187px; } .contentwrapper .content h1{ margin-top: 0; } #main-banner .tp-mask-wrap, #main-banner .tp-bullet{ display: none; display: none; } .repairs-txt .circle-wrapper { margin-bottom: 70px; } .about-top-txt .learn-more { padding: 15px 28px; } ul.tabs { margin: 0 0 10px } .onomichi-text { margin-right: 22px; width: 64%; } .onomichi-logo { width: 28%; } .cdl-pdf{ width: 100%; } .mobile-dirctior-content{ margin-top: 0; } .mobile-offshore-content.vc_custom_1468469665132, .mobile-offshore-content.vc_custom_1468469695732{ margin-top: 0 !important; } .odyssey-banner, .home-banner{ display: none; } .repairs-undertaken ul li{ width: 100%; } } /*iPhone 5 hack*/ @media only screen and (max-width : 568px){ } /* Custom, iPhone Retina */ @media only screen and (min-width : 320px) and (max-width : 480px) { p{ /*text-align: justify;*/ font-size: 16px !important; } #newssidebar{ display: none; } #wrapper #main-content-wrapper{ width: 100%; } #main-content-wrapper #main-content { padding-right: 0; } #wrapper .banner-header{ min-height: 192px } #wrapper .single-title{ padding: 0; } #wrapper h1.archive-header{ font-size: 1.5em; } .table-wrapper{ border: 1px solid #e5e5e5; overflow: scroll; padding: 14px 0; width: 100%; } .contact-form .fieldBlock .textarea-msg textarea{ width: 96% } #about-cdl .center-container> div{ width: 100%; } #about-txt .abt-two-col-wrapper> div{ width: 100%; } /*============================ GRID ===============================*/ .cd-td .summery{ padding: 19px; } .cd-col{ width: 100%; } .cd-l-col{ width: 100%; height: 285px; } .cd-m-col{ width: 100%; } .cd-r-col{ width: 100%; } .cd-h1 { min-height: 260px; height: 241px; } .cd-h1.cd-feature { /*height: 310px;*/ } .cd-td .recent-posts h3{ margin-bottom: 5px } .recent-posts p { text-align: left; } .cd-feature-vid { } /*========================== EOF GRID =============================*/ } @media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : landscape) { } @media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) { } /*======================= EOF Bootstrap 3 Media Queries ======================*/

AltStyle によって変換されたページ (->オリジナル) /