/* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { box-sizing: border-box; } html { font-size: 62.5%; } body { font-size: 1.6rem; font-family: "Lato", sans-serif; color: #1A1A1A; background-color: #FFFFFF; } a { /* color: #777; */ text-decoration: none; } /* -------------------------------- Header -------------------------------- */ .cd-morph-dropdown { position: relative; height: 60px; background-color: #FFFFFF; } .cd-morph-dropdown::before { /* never visible - used in JS to check mq */ content: 'mobile'; display: none; } .cd-morph-dropdown .nav-trigger { /* menu icon - visible on small screens only */ position: absolute; top: 0; right: 0; height: 60px; width: 60px; /* replace text with icon */ overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; } .cd-morph-dropdown .nav-trigger span, .cd-morph-dropdown .nav-trigger span::after, .cd-morph-dropdown .nav-trigger span::before { /* these are the 3 lines of the menu icon */ position: absolute; background-color: #1A1A1A; height: 3px; width: 26px; } .cd-morph-dropdown .nav-trigger span { left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: background-color .3s; transition: background-color .3s; } .cd-morph-dropdown .nav-trigger span::after, .cd-morph-dropdown .nav-trigger span::before { content: ''; left: 0; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .cd-morph-dropdown .nav-trigger span::before { -webkit-transform: translateY(-9px); -ms-transform: translateY(-9px); transform: translateY(-9px); } .cd-morph-dropdown .nav-trigger span::after { -webkit-transform: translateY(9px); -ms-transform: translateY(9px); transform: translateY(9px); } .cd-morph-dropdown.nav-open .nav-trigger span { background-color: transparent; } .cd-morph-dropdown.nav-open .nav-trigger span::before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .cd-morph-dropdown.nav-open .nav-trigger span::after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .cd-morph-dropdown .main-nav { display: none; } .cd-morph-dropdown .morph-dropdown-wrapper { display: none; position: absolute; top: 60px; left: 0; width: 100%; padding: 1.2em 5%; box-shadow: inset 0 1px 0 #e6e6e6; background-color: #FFFFFF; } .cd-morph-dropdown.nav-open .morph-dropdown-wrapper { display: block; } .cd-morph-dropdown .dropdown-list > ul > li { margin-bottom: 3.3em; } .cd-morph-dropdown .labe { text-align: center; display: block; font-size: 16px; color: #000; margin-bottom: .8em; } .cd-morph-dropdown .labe :hover{ display: block; font-size: 16px; color: #349BE1; margin-bottom: .8em; } .cd-morph-dropdown .content li::after { clear: both; content: ""; display: block; } .cd-morph-dropdown .gallery .content li { margin-bottom: 1.4em; } .cd-morph-dropdown .gallery .content a { display: block; } .cd-morph-dropdown .gallery .content a::before { /* icon on the left */ content: ''; display: inline-block; float: left; height: 54px; width: 54px; margin-right: .6em; background: red; border-radius: 50%; -webkit-transition: background .2s; transition: background .2s; } .cd-morph-dropdown .gallery .content a span, .cd-morph-dropdown .gallery .content a em { display: block; line-height: 1.2; } .cd-morph-dropdown .gallery .content a em { font-size: 1.8rem; padding: .4em 0 .2em; color: #1A1A1A; } .cd-morph-dropdown .gallery .content a span { font-size: 1.4rem; color: #a6a6a6; } .cd-morph-dropdown .gallery .content a:hover::before { background-color: #1A1A1A; } .cd-morph-dropdown .gallery li:nth-of-type(1) a::before { background: #f4e58a url(../img/cd-gallery-icons.svg) no-repeat 0 0; } .cd-morph-dropdown .gallery li:nth-of-type(2) a::before { background: #F4AF6D url(../img/cd-gallery-icons.svg) no-repeat -54px 0; } .cd-morph-dropdown .gallery li:nth-of-type(3) a::before { background: #DB6356 url(../img/cd-gallery-icons.svg) no-repeat -108px 0; } .cd-morph-dropdown .gallery li:nth-of-type(4) a::before { background: #8D4645 url(../img/cd-gallery-icons.svg) no-repeat -162px 0; } .cd-morph-dropdown .links .content > ul > li { margin-top: 1em; } .cd-morph-dropdown .links-list a, .cd-morph-dropdown .btn { text-align: center; display: block; /* margin-left: 14px; */ font-size: 2.2rem; line-height: 1.6; } .cd-morph-dropdown .links-list a:hover{ color: #349BE1; } .cd-morph-dropdown .btn:hover { color: #349BE1; } .cd-morph-dropdown .content h2 { color: #a6a6a6; text-transform: uppercase; font-weight: bold; font-size: 1.3rem; margin: 20px 0 10px 14px; } .login_btn{ display: none } .register_btn{ display: none } .logout_btn{ display: none } #urname{ display: none } @media only screen and (min-width: 1000px) { .logout_btn{ float:right !important; margin-top: -5px;list-style: none; display: inline-block; } #urname{ float:right; margin-top: 27px;list-style: none; display: inline-block; } .login_btn{ float:right; margin-top: -5px;list-style: none;display: inline-block; } .register_btn{ float:right; margin-top: -5px;margin-right:10px;list-style: none;display: inline-block; } .cd-morph-dropdown { position: fixed; /* min-width: 1490px; */ top:0; height: 60px; left: 0; width: 100%; padding: 0; text-align: center; background-color: transparent; } .cd-morph-dropdown::before { content: 'desktop'; } .cd-morph-dropdown .nav-trigger { display: none; } .cd-morph-dropdown .main-nav { display: inline-block; } .cd-morph-dropdown .main-nav > ul > li { display: inline-block; /* float: left; */ } .cd-morph-dropdown .main-nav > ul > li > a { display: block; padding: 0 1.8em; height: 70px; line-height: 70px; color: #FFFFFF; font-size: 1.8rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: opacity .2s; transition: opacity .2s; } .cd-morph-dropdown.is-dropdown-visible .main-nav > ul > li > a { /* main navigation hover effect - on hover, reduce opacity of elements not hovered over */ opacity: .6; } .cd-morph-dropdown.is-dropdown-visible .main-nav > ul > li.active > a { opacity: 1; } .cd-morph-dropdown .morph-dropdown-wrapper { /* dropdown wrapper - used to create the slide up/slide down effect when dropdown is revealed/hidden */ display: block; top: 58px; /* overwrite mobile style */ width: auto; padding: 0; box-shadow: none; background-color: transparent; /* Force Hardware acceleration */ -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .cd-morph-dropdown.is-dropdown-visible .morph-dropdown-wrapper { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .cd-morph-dropdown .dropdown-list { position: absolute; top: 0; left: 0; visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform, width, height; -webkit-transition: visibility .3s; transition: visibility .3s; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); } .no-csstransitions .cd-morph-dropdown .dropdown-list { display: none; } .cd-morph-dropdown .dropdown-list::before { /* dropdown top triangle */ content: ''; position: absolute; bottom: 100%; left: 50%; right: auto; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 0; width: 0; border: 8px solid transparent; border-bottom-color: #FFFFFF; opacity: 0; -webkit-transition: opacity .3s; transition: opacity .3s; } .cd-morph-dropdown .dropdown-list > ul { position: relative; z-index: 1; height: 100%; width: 100%; overflow: hidden; } .cd-morph-dropdown.is-dropdown-visible .dropdown-list { visibility: visible; -webkit-transition: width .3s, height .3s, -webkit-transform .3s; transition: width .3s, height .3s, -webkit-transform .3s; transition: transform .3s, width .3s, height .3s; transition: transform .3s, width .3s, height .3s, -webkit-transform .3s; } .cd-morph-dropdown.is-dropdown-visible .dropdown-list::before { opacity: 1; } .cd-morph-dropdown .dropdown { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; width: 100%; -webkit-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; } .cd-morph-dropdown .dropdown.active { opacity: 1; visibility: visible; } .cd-morph-dropdown .dropdown.move-left .content { -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } .cd-morph-dropdown .dropdown.move-right .content { -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); } .cd-morph-dropdown .labe { /* hide the labe on bigger devices */ display: none; } .cd-morph-dropdown .content { /* border: 1px solid #eee; */ padding: 15px 0; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; text-align: left; box-shadow: 30px 30px 30px 30px rgba(50, 50, 50, 0.25) } .cd-morph-dropdown .content > ul::after { clear: both; content: ""; display: block; } .cd-morph-dropdown .content > ul > li { width: 16.66%; float: left; margin-top: 0; } .cd-morph-dropdown .content > ul > .links-list_help { text-align: center; width: 100%; float: left; margin-top: 0; } .cd-morph-dropdown .content .links-list_help >ul>li{ width: 100%; float: left; margin-top: 0; } .cd-morph-dropdown .content .links-list li a { text-align: center; } .cd-morph-dropdown .content .links-list{ border-right: 1px solid #ddd; } .cd-morph-dropdown .content .links-list li{ margin-top: 10px; } .cd-morph-dropdown .content > ul > li:nth-of-type(2n) { margin-right: 0; } .cd-morph-dropdown .gallery .content { /* you need to set a width for the .content elements because they have a position absolute */ width: 510px; padding-bottom: .8em; } .cd-morph-dropdown .gallery .content li { margin-bottom: 1.8em; } .cd-morph-dropdown .links .content > ul > li { margin-top: 0; } .cd-morph-dropdown .links .content, .cd-morph-dropdown .button .content { width: 500px; } .cd-morph-dropdown .links-list a { font-size: 1.6rem; margin-left: 0; } .cd-morph-dropdown .btn { display: block; width: 100%; height: 60px; margin: 1.5em 0 0; font-size: 1.8rem; text-align: center; color: #FFFFFF; line-height: 60px; background: #349BE1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border:1px solid #349BE1; } .cd-morph-dropdown .btn:hover { background: #ffffff; color: #349BE1; } .cd-morph-dropdown .content h2 { font-size: 1.8rem; text-transform: none; font-weight: normal; color: #1A1A1A; margin: 0 0 .6em; } .cd-morph-dropdown .bg-layer { /* morph dropdown background */ position: absolute; top: 0; left: 0; height: 1px; width: 1px; background: #FFFFFF; opacity: 0; -webkit-transition: opacity .3s; transition: opacity .3s; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-morph-dropdown.is-dropdown-visible .bg-layer { opacity: 1; -webkit-transition: opacity .3s, -webkit-transform .3s; transition: opacity .3s, -webkit-transform .3s; transition: transform .3s, opacity .3s; transition: transform .3s, opacity .3s, -webkit-transform .3s; } } /* -------------------------------- Main site content -------------------------------- */ .cd-main-content { min-height: 100vh; background-color: #548c7e; } @media only screen and (min-width: 768px) { .cd-main-content { padding-top: 80px; } } @media only screen and (min-width: 1000px) and (max-width: 1024px) { .tpf { color: #fff; } } @media only screen and (max-width: 1420px) { .width_1200 { width: 1200px !important; } } @media only screen and (min-width: 1000px) and (max-width: 1024px) { .width_1200 { width: 1000px !important; } /* .anlist{ margin-top: 60px; }*/ .visible-lg { display: block!important; } } @media (min-width: 1000px){ .detail { display: block!important; } } @media (max-width: 768px){ .pagination>li>a, .pagination>li>span{ float: none!important; line-height: 2.428571; } } @media only screen and (max-width: 767px) { .margintop_60px { margin-top: 60px !important; } /*.cd-morph-dropdown .morph-dropdown-wrapper { display: none; position: absolute; top: 60px; left: 0; width: 70%; margin-left: 30%; padding: 1.2em 5%; background-color: #FFFFFF; border: 1px solid #dcdcdc; box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.25) }*/ } @media only screen and (max-width: 1024px) { .cd-morph-dropdown .morph-dropdown-wrapper { display: none; position: absolute; top: 60px; left: 0; width: 70%; margin-left: 30%; padding: 1.2em 5%; /* box-shadow: inset 0 1px 0 #e6e6e6; */ background-color: #FFFFFF; border: 1px solid #dcdcdc; box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.25) } }