/* -------------------------------- Primary style -------------------------------- */ @font-face { font-family:'Alice-Regular'; src: url('../fonts/Alice-Regular.ttf') format('truetype'); font-weight: bold; } @font-face { font-family:'lato-italic'; src: url('../fonts/Lato-Italic.ttf') format('truetype'); font-weight: bold; } @font-face { font-family:'Lato-Regular'; src: url('../fonts/Lato-Regular.ttf') format('truetype'); font-weight: bold; } @font-face { font-family:'KaushanScript'; src: url('../fonts/KaushanScript-Regular.ttf') format('truetype'); font-weight: bold; } *, *::after, *::before { box-sizing: border-box; } ul, ol { margin-top: 0; margin-bottom: 0px !important; } html { font-size: 62.5%; } body { font-size: 1.6rem; font-family: Lato-Regular; color: #ffffff; } h1,h2,h3,h4,h5,h6{font-family: Alice-Regular;} a { color: #a8ae7e; text-decoration: none; } /* -------------------------------- Patterns - reusable parts of our design -------------------------------- */ .cd-text-replace { /* replace text with image */ color: #fff; /*text-indent: 100%; overflow: hidden; white-space: nowrap;*/ } .cd-text-replace:hover { /* replace text with image */ color: #fff; /*text-indent: 100%; overflow: hidden; white-space: nowrap;*/ } .cd-text-replace:hover, .cd-text-replace:focus { color: #fff; text-decoration: underline; } /* -------------------------------- Menu trigger -------------------------------- */ .cd-nav-trigger { position: relative; z-index: 4; border-radius: 25px; background-color: rgba(0, 0, 0, 0.46); -webkit-transition: background 0.2s; -moz-transition: background 0.2s; transition: background 0.2s; width: 90px; height: 39px; display: block; padding: 8px 40px; text-align: right; border: 1px solid #fff; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; -o-transition: background-color 0.2s; transition: background-color 0.2s; color: #fff; text-decoration: none; } .cd-nav-trigger .cd-icon, .cd-nav-trigger .cd-icon::before, .cd-nav-trigger .cd-icon::after { /* menu icon created in CSS */ position: absolute; background-color: #ffffff; border-radius: 2px; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .no-touch .cd-nav-trigger:hover { background-color: rgba(0, 0, 0, 0.46); } .cd-nav-trigger .cd-icon { /* middle line of the menu icon */ display: inline-block; width: 18px; height: 2px; left: 28%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; -moz-transition: -moz-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s; } .cd-nav-trigger .cd-icon::before, .cd-nav-trigger .cd-icon::after { /* upper and lower lines of the menu icon */ content: ''; top: 0; right: 0; width: 100%; height: 100%; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .cd-nav-trigger .cd-icon::before { -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); -o-transform: translateY(-6px); transform: translateY(-6px); } .cd-nav-trigger .cd-icon::after { -webkit-transform: translateY(6px); -moz-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px); } .cd-nav-trigger.project-open .cd-icon { /* user selects a projects - transform the icon into a 'X' */ background-color: rgba(255, 255, 255, 0); } .cd-nav-trigger.project-open .cd-icon::before, .cd-nav-trigger.project-open .cd-icon::after { background-color: white; } .cd-nav-trigger.project-open .cd-icon::before { -webkit-transform: translateY(0) rotate(45deg); -moz-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); -o-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); } .cd-nav-trigger.project-open .cd-icon::after { -webkit-transform: translateY(0) rotate(-45deg); -moz-transform: translateY(0) rotate(-45deg); -ms-transform: translateY(0) rotate(-45deg); -o-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); } .cd-nav-trigger.nav-visible .cd-icon { /* user opens the navigation - transform the icon into an arrow */ -webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .cd-nav-trigger.nav-visible .cd-icon::after { -webkit-transform: translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5); -moz-transform: translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5); -ms-transform: translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5); -o-transform: translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5); transform: translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5); } .cd-nav-trigger.nav-visible .cd-icon::before { -webkit-transform: translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5); -moz-transform: translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5); -ms-transform: translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5); -o-transform: translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5); transform: translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5); } @media only screen and (min-width: 1024px) { .cd-nav-trigger.nav-visible .cd-icon { -webkit-transform: translateY(-50%) translateX(-50%) rotate(0deg); -moz-transform: translateY(-50%) translateX(-50%) rotate(0deg); -ms-transform: translateY(-50%) translateX(-50%) rotate(0deg); -o-transform: translateY(-50%) translateX(-50%) rotate(0deg); transform: translateY(-50%) translateX(-50%) rotate(0deg); } .cd-nav-trigger.nav-visible .cd-icon::after { -webkit-transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5); -moz-transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5); -ms-transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5); -o-transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5); transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5); } .cd-nav-trigger.nav-visible .cd-icon::before { -webkit-transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5); -moz-transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5); -ms-transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5); -o-transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5); transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5); } } /* -------------------------------- Projects -------------------------------- */ .pd-projects-container { position: relative; z-index: 2; overflow-x: hidden; } .pd-projects-container.project-open { /* smooth scroll on iOS devices */ -webkit-overflow-scrolling: touch; } .pd-projects-previews { position: relative; z-index: 2; height: 100vh; width: 100vw; } .pd-projects-previews::after { clear: both; content: ""; display: table; } .project-open .pd-projects-previews { pointer-events: none; } .pd-project-title h2 { font-size: 50px; -webkit-font-smoothing: antialiased; text-shadow: 2px 2px #000; } .pd-projects-previews li { height: 13%; width: 100%; overflow: hidden; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; /* Force Hardware Acceleration */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateY(200%); -moz-transform: translateY(200%); -ms-transform: translateY(200%); -o-transform: translateY(200%); transform: translateY(200%); } .pd-projects-previews li.selected { opacity: 0; /* move selected project preview out of the viewport with no transition */ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0s; -moz-transition: -moz-transform 0s; transition: transform 0s; } .pd-projects-previews li.slide-out { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-20%); -o-transform: translateX(-200%); transform: translateX(-200%); } .pd-projects-previews a { display: block; /* height: 100vh; width: 100%; */ /* fixes a bug on projects caption width */ -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; transition: opacity 0.5s; } .pd-projects-previews li:nth-of-type(2) a { -webkit-transform: translateY(-25%); -moz-transform: translateY(-25%); -ms-transform: translateY(-25%); -o-transform: translateY(-25%); transform: translateY(-25%); } .pd-projects-previews li:nth-of-type(3) a { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .pd-projects-previews li:nth-of-type(4) a { -webkit-transform: translateY(-75%); -moz-transform: translateY(-75%); -ms-transform: translateY(-75%); -o-transform: translateY(-75%); transform: translateY(-75%); } .pd-projects-previews .bg-loaded a { opacity: 1; } @media only screen and (min-width: 1024px) { .pd-projects-previews li { display: inline-block; /* height: 100%; width: 33.1%; */ float: left; } .pd-projects-previews li.selected { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .pd-projects-previews li.slide-out { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); } .pd-projects-previews a { /* width equal to window width */ width: 150%; } .pd-projects-previews li:nth-of-type(2) a { -webkit-transform: translateX(-25%); -moz-transform: translateX(-25%); -ms-transform: translateX(-25%); -o-transform: translateX(-25%); transform: translateX(-25%); } .pd-projects-previews li:nth-of-type(3) a { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .pd-projects-previews li:nth-of-type(4) a { -webkit-transform: translateX(-75%); -moz-transform: translateX(-75%); -ms-transform: translateX(-75%); -o-transform: translateX(-75%); transform: translateX(-75%); } } .pd-projects { position: absolute; z-index: 1; top: 0; left: 0; height: 100vh; width: 100vw; overflow: hidden; } .pd-projects > li { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; } .pd-projects > li.selected { z-index: 1; opacity: 1; -webkit-transition: opacity 0s; -moz-transition: opacity 0s; transition: opacity 0s; } .pd-projects .preview-image { display: block; height: 100vh; } .pd-projects-previews a, .pd-projects .preview-image { opacity:1; /* set a background image for each project */ background: url(../images/sunfloewr_1.jpg) no-repeat center center; background-size: cover; } .pd-projects-previews li:nth-of-type(2) a, .pd-projects > li:nth-of-type(2) .preview-image { opacity:1; background: url(../images/RICEBRADN_1.jpg) no-repeat center center; background-size: cover; } .pd-projects-previews li:nth-of-type(3) a, .pd-projects > li:nth-of-type(3) .preview-image { opacity:1; background: url(../images/mustard_1.jpg) no-repeat center center; background-size: cover; } .pd-projects-previews li:nth-of-type(4) a, .pd-projects > li:nth-of-type(4) .preview-image { background: #835531 url(../img/img-4.jpg) no-repeat center center; background-size: cover; } .pd-project-title { position: absolute; width: 100%; top: calc(50% - 20px); left: 6%; color: #ffffff; -webkit-transform: translateY(-37.5vh); -moz-transform: translateY(-37.5vh); -ms-transform: translateY(-37.5vh); -o-transform: translateY(-37.5vh); transform: translateY(-37.5vh); -webkit-transition: -webkit-transform 0.6s 0.2s; -moz-transition: -moz-transform 0.6s 0.2s; transition: transform 0.6s 0.2s; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .pd-project-title::after { /* line below project title */ content: ''; position: absolute; left: 5%; bottom: 0px; width: 40px; height: 2px; background: #c79401; -webkit-transform: translateX(-50%) scale(0); -moz-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); -o-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .no-touch .pd-projects-previews a:hover .pd-project-title::after { -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } .pd-projects .pd-project-title::after { -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-transition: -webkit-transform 0.3s 0.3s; -moz-transition: -moz-transform 0.3s 0.3s; transition: transform 0.3s 0.3s; } */ .pd-project-title h2 { font-size: 4rem; line-height: 1.5; font-weight: 700; } .pd-project-title p { font-size: 1.4rem; font-family: "Merriweather", serif; font-style: italic; line-height: 1.2; padding: .4em 2em; opacity: .8; -webkit-transition: all 1.4s ease-in-out; -moz-transition: all 1.4s ease-in-out; -o-transition: all 1.4s ease-in-out; transition: all 1.4s ease-in-out; display:none; } @media only screen and (min-width: 1024px) { .pd-project-title { width: 25%; top: 0vh; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } .pd-projects-previews li:nth-of-type(2) .pd-project-title, .pd-projects > li:nth-of-type(2) .pd-project-title { -webkit-transform: translateY(-12.5vh); -moz-transform: translateY(-12.5vh); -ms-transform: translateY(-12.5vh); -o-transform: translateY(-12.5vh); transform: translateY(-12.5vh); } @media only screen and (min-width: 1024px) { .pd-projects-previews li:nth-of-type(2) .pd-project-title, .pd-projects > li:nth-of-type(2) .pd-project-title { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } } .pd-projects-previews li:nth-of-type(3) .pd-project-title, .pd-projects > li:nth-of-type(3) .pd-project-title { -webkit-transform: translateY(12.5vh); -moz-transform: translateY(12.5vh); -ms-transform: translateY(12.5vh); -o-transform: translateY(12.5vh); transform: translateY(12.5vh); } @media only screen and (min-width: 1024px) { .pd-projects-previews li:nth-of-type(3) .pd-project-title, .pd-projects > li:nth-of-type(3) .pd-project-title { -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%); } } .pd-projects-previews li:nth-of-type(4) a .pd-project-title, .pd-projects > li:nth-of-type(4) .pd-project-title { -webkit-transform: translateY(37.5vh); -moz-transform: translateY(37.5vh); -ms-transform: translateY(37.5vh); -o-transform: translateY(37.5vh); transform: translateY(37.5vh); } @media only screen and (min-width: 1024px) { .pd-projects-previews li:nth-of-type(4) a .pd-project-title, .pd-projects > li:nth-of-type(4) .pd-project-title { -webkit-transform: translateX(300%); -moz-transform: translateX(300%); -ms-transform: translateX(300%); -o-transform: translateX(300%); transform: translateX(300%); } } li.selected .pd-project-title, .pd-projects > li:nth-of-type(2).selected .pd-project-title, .pd-projects > li:nth-of-type(3).selected .pd-project-title, .pd-projects > li:nth-of-type(4).selected .pd-project-title { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } @media only screen and (min-width: 1024px) { li.selected .pd-project-title, .pd-projects > li:nth-of-type(2).selected .pd-project-title, .pd-projects > li:nth-of-type(3).selected .pd-project-title, .pd-projects > li:nth-of-type(4).selected .pd-project-title { -webkit-transform: translateX(150%); -moz-transform: translateX(150%); -ms-transform: translateX(150%); -o-transform: translateX(150%); transform: translateX(150%); } } .pd-projects li.selected .pd-project-title::after { -webkit-transition: -webkit-transform 0.3s 0s; -moz-transition: -moz-transform 0.3s 0s; transition: transform 0.3s 0s; -webkit-transform: translateX(-50%) scale(0); -moz-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); -o-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); } .touch .pd-projects li.selected .pd-project-title::after { -webkit-transition: -webkit-transform 0s; -moz-transition: -moz-transform 0s; transition: transform 0s; } .pd-project-info { display: none; padding: 0; background-color: #ffffff; color: #fff; } .content-visible .pd-project-info { display: block; } .pd-project-info p { /* width: 90%; max-width: 800px; */ margin: 0 auto; line-height: 2; } .pd-projects-container .scroll { display: block; position: absolute; z-index: 2; bottom: 30px; left: 50%; width: 44px; height: 44px; /* rest button default style */ cursor: pointer; border: none; background: url("../img/cd-icon-arrow.svg") no-repeat center center; visibility: hidden; -webkit-transform: translateX(-50%) scale(0); -moz-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); -o-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s; -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s; transition: transform 0.3s 0s, visibility 0s 0.3s; } .pd-projects-container .scroll:focus { outline: none; } .pd-projects-container.project-open .scroll { visibility: visible; -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0s; -moz-transition: -moz-transform 0.4s 0s, visibility 0s 0s; transition: transform 0.4s 0s, visibility 0s 0s; -webkit-animation: cd-translate 1.2s 0.8s; -moz-animation: cd-translate 1.2s 0.8s; animation: cd-translate 1.2s 0.8s; -webkit-animation-iteration-count: 2; -moz-animation-iteration-count: 2; animation-iteration-count: 2; } .no-touch .pd-projects-container.project-open .scroll:hover { -webkit-transform: translateX(-50%) scale(1.2); -moz-transform: translateX(-50%) scale(1.2); -ms-transform: translateX(-50%) scale(1.2); -o-transform: translateX(-50%) scale(1.2); transform: translateX(-50%) scale(1.2); } @-webkit-keyframes cd-translate { 0% { -webkit-transform: translateX(-50%) scale(1); } 50% { -webkit-transform: translateY(10px) translateX(-50%) scale(1); } 100% { -webkit-transform: translateX(-50%) scale(1); } } @-moz-keyframes cd-translate { 0% { -moz-transform: translateX(-50%) scale(1); } 50% { -moz-transform: translateY(10px) translateX(-50%) scale(1); } 100% { -moz-transform: translateX(-50%) scale(1); } } @keyframes cd-translate { 0% { -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } 50% { -webkit-transform: translateY(10px) translateX(-50%) scale(1); -moz-transform: translateY(10px) translateX(-50%) scale(1); -ms-transform: translateY(10px) translateX(-50%) scale(1); -o-transform: translateY(10px) translateX(-50%) scale(1); transform: translateY(10px) translateX(-50%) scale(1); } 100% { -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } } /* -------------------------------- Navigation -------------------------------- */ .cd-primary-nav { position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; overflow: auto; text-align: center; opacity: 0; -webkit-transition: opacity 0.6s; -moz-transition: opacity 0.6s; transition: opacity 0.6s; /* vertically align its content */ display: table; background: url(../images/HOME.png) no-repeat; background-size: cover; } .cd-primary-nav ul { /* vertically align inside nav */ display: table-cell; vertical-align: middle; } .cd-primary-nav a { display: inline-block; padding: .4em 1em; border-radius: 4px; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; transition: background 0.2s; color: #ffffff; font-family: inherit; font-size: 5.4rem; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float:left; width:33%; } .no-touch .cd-primary-nav a:hover { background-color: transparent; } .cd-primary-nav .cd-label { position: relative; margin: 2.4em 0 2em; color: #a8ae7e; text-transform: uppercase; font-weight: 700; font-size: 1.2rem; letter-spacing: 1px; } .cd-primary-nav .cd-label::after { /* line below .cd-label*/ content: ''; position: absolute; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: -16px; height: 1px; width: 40px; background-color: currentColor; } .cd-primary-nav.nav-visible { opacity: 1; } .cd-primary-nav.nav-clickable { z-index: 3; } .no-csstransitions .cd-primary-nav.nav-visible { z-index: 3; } @media only screen and (min-width: 1170px) { .cd-primary-nav a { font-size: 4rem; font-family: Alice-Regular; padding: .4em 0.8em; } } /* -------------------------------- JavaScript Disabled -------------------------------- */ .no-js .cd-primary-nav { display: block; position: static; opacity: 1; margin-bottom: 1.5em; } .no-js .cd-primary-nav ul { display: block; padding: 0 5%; } .no-js .cd-primary-nav ul::after { clear: both; content: ""; display: table; } .no-js .cd-primary-nav li:not(.cd-label) { display: inline-block; } @media only screen and (max-width: 970px) { .cd-primary-nav a { display: inline-block; padding: .4em 1em; border-radius: 4px; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; transition: background 0.2s; color: #ffffff; font-family: inherit; font-size: 4.4rem; font-weight: bold; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: left; width: 100%; } } /*logo*/ .freedomholder { position: fixed; z-index: 100 } @media (max-width:1029px) { .freedomholder { padding: .6rem 5.5555556% 1.5rem; width: 100%; background-color: #282423 } } @media (min-width:1030px) { .freedomholder { margin: 0rem 0 0 2.8rem; text-align: left } .menuBtnWrapper { margin-left: 15%; } } .freedomholder.inactive { opacity: 0 } .freedomholder .showAfterAnim { position: absolute; bottom: 9.5rem; left: 0; top: 0; display: none; opacity: 0 } .freedomholder.active .showAfterAnim { height: 0!important; overflow: hidden; border: none } .freedomholder.mobileCategoryActive .mobileProdNav { top: 100%; left: 0; display: block; height: 4rem } .freedomholder .menuBtnWrapper-alter { display: none; margin: 2rem 0 1rem } .freedomholder .menuBtnWrapper-alter .menuIcon, .freedomholder .menuBtnWrapper-alter .menuIcon::after, .freedomholder .menuBtnWrapper-alter .menuIcon::before { background-color: #4c8018 } .freedomholder .menuBtnWrapper-alter .siteBtn.outlinedBtn .v4 { background-color: #fff; border-color: #4c8018; color: #4c8018 } .freedomholder .menuBtnWrapper-alter .siteBtn.outlinedBtn:active .v4, .freedomholder .menuBtnWrapper-alter .siteBtn.outlinedBtn:focus .v4, .freedomholder .menuBtnWrapper-alter .siteBtn.outlinedBtn:hover .v4 { color: #fff; border-color: transparent; background-color: #4c8018 } .menuIcon, .freedomholder .menuBtnWrapper-alter .siteBtn.outlinedBtn:active .menuIcon, .freedomholder .menuBtnWrapper-alter .siteBtn.outlinedBtn:active .menuIcon::after, .freedomholder .menuBtnWrapper-alter .siteBtn.outlinedBtn:active .menuIcon::before, .freedomholder .menuBtnWrapper-alter .siteBtn.outlinedBtn:focus .menuIcon, .freedomholder .menuBtnWrapper-alter .siteBtn.outlinedBtn:focus .menuIcon::after, .freedomholder .menuBtnWrapper-alter .siteBtn.outlinedBtn:focus .menuIcon::before, .freedomholder .menuBtnWrapper-alter .siteBtn.outlinedBtn:hover .menuIcon, .freedomholder .menuBtnWrapper-alter .siteBtn.outlinedBtn:hover .menuIcon::after, .freedomholder .menuBtnWrapper-alter .siteBtn.outlinedBtn:hover .menuIcon::before { background-color: #fff } @media (min-width:1030px) { .freedomholder.alter:not(.active) .menuBtnWrapper { display: none } .freedomholder.alter:not(.active) .menuBtnWrapper-alter { display: block } .freedomholder.alter:not(.active) .siteLogo { left: -143px } } .freedomholder>a { position: relative; overflow: hidden } @media (max-width:1029px) { .freedomholder>a { display: inline-block; height: 52px; width: 186px } } .siteLogo { display: block; position: static; left: 0 } @media (min-width:1030px) { .freedomholder>a { display: block; height: 125px; width: 260px } .ie .freedomholder>a { height: 115px } } @media (max-width:1029px) { } section { padding: 13% 0; height: 100%; } section#home { background:url(../images/sunfloewr_2.jpg) no-repeat center center; background-size:cover; height:100vh; } section#about { background:url(../images/sunfloewr_3.jpg) no-repeat center center; background-size:cover; height:100vh; } section#projects { background:url(../images/sunfloewr_4.jpg) no-repeat ; background-size:cover; height:100vh; } section#contact { background:url(../images/sunfloewr_5.jpg) no-repeat ; background-size:cover; height:100vh; } section#slide1 { background:url(../images/sunfloewr_6.jpg) no-repeat ; background-size:cover; height:100vh; } section#slide2 { background:url(../images/sunfloewr_7.jpg) no-repeat ; background-size:cover; height:100vh; } section#slide3 { background:url(../images/sunfloewr_8.jpg) no-repeat ; background-size:cover; height:100vh; } section#rb1 { background:url(../images/ricebran_2.jpg) no-repeat ; background-size:cover; height:100vh; } section#rb2 { background:url(../images/ricebran_3.jpg) no-repeat ; background-size:cover; height:100vh; } section#rb3 { background:url(../images/ricebran_4.jpg) no-repeat ; background-size:cover; height:100vh; } section#rb4 { background:url(../images/ricebran_5.jpg) no-repeat ; background-size:cover; height:100vh; } section#rb5 { background:url(../images/ricebran_6.jpg) no-repeat ; background-size:cover; height:100vh; } section#rb6 { background:url(../images/ricebran_7.jpg) no-repeat; background-size:cover; height:100vh; } section#ms { background:url(../images/mustard_1.jpg) no-repeat ; background-size:cover; height:100vh; }section#ms1 { background:url(../images/mustard_2.jpg) no-repeat ; background-size:cover; height:100vh; } section#ms2 { background:url(../images/mustard_3.jpg) no-repeat ; background-size:cover; height:100vh; } section#ms3 { background:url(../images/mustard_4.jpg) no-repeat ; background-size:cover; height:100vh; } section#ms4 { background:url(../images/mustard_5.jpg) no-repeat; background-size:cover; height:100vh; } section#ms5 { background:url(../images/mustard_6.jpg) no-repeat ; background-size:cover; height:100vh; } section#ms6 { background:url(../images/mustard_7.jpg) no-repeat ; background-size:cover; height:100vh; } .pd-project-title h1 { top: 40vh; position: absolute; font-weight: bold; } #freedomslider{ display: block; width: 22%; height: 100%; position: fixed; top: 0; right: 0; overflow: auto; overflow-x: hidden; z-index: 40; background:#fff; -webkit-transition: right 2.3s ease-in-out; -o-transition: right 2.3s ease-in-out; transition: right 2.3s ease-in-out; color:#000; padding: 9% 0; } /**test**/ #sf { background:url(../images/sunfloewr_1.jpg) no-repeat ; background-size:cover; } #sf1 { background:url(../images/sunfloewr_2.jpg) no-repeat; background-size:cover; } #sf2 { background:url(../images/sunfloewr_3.jpg) no-repeat ; background-size:cover; } #sf3 { background:url(../images/sunfloewr_4.jpg) no-repeat ; background-size:cover; } #sf4 { background:url(../images/sunfloewr_5.jpg) no-repeat ; background-size:cover; } #sf5 { background:url(../images/sunfloewr_6.jpg) no-repeat ; background-size:cover; } #sf6 { background:url(../images/sunfloewr_7.jpg) no-repeat ; background-size:cover; } #rb{ background:url(../images/RICEBRADN_1.jpg) no-repeat ; background-size:cover; } #rb1 { background:url(../images/ricebran_2.jpg) no-repeat ; background-size:cover; } #rb2 { background:url(../images/ricebran_3.jpg) no-repeat ; background-size:cover; } #rb3 { background:url(../images/ricebran_4.jpg) no-repeat ; background-size:cover; } #rb4 { background:url(../images/ricebran_5.jpg) no-repeat ; background-size:cover; } #rb5 { background:url(../images/ricebran_6.jpg) no-repeat ; background-size:cover; } #rb6 { background:url(../images/ricebran_7.jpg) no-repeat ; background-size:cover; } .pd-project-info h1 { font-size: 8rem; padding: 0 15rem; } .pd-project-info p { font-size: 2.5rem; padding: 0 15rem; } /*test css*/ .content-wrapper { height: 100vh; width:92vw; margin:-2% auto; display: block;/* display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; */ color: #000; /* font-family: Montserrat; text-transform: uppercase; */ -webkit-transform: translateY(40vh); -ms-transform: translateY(40vh); transform: translateY(40vh); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1); transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1); } .content-title { font-size: 12vh; line-height: 1.4; }.content-wrapper1 { height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; color: #fff; font-family: Montserrat; text-transform: uppercase; -webkit-transform: translateY(40vh); -ms-transform: translateY(40vh); transform: translateY(40vh); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1); transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1); } .content-title1 { font-size: 12vh; line-height: 1.4; } html, body { overflow: hidden; } .background { background-size: cover; background-repeat: no-repeat; background-position: center center; overflow: hidden; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 100vh; position: fixed; width: 100vw; -webkit-transform: translateY(20vh); -ms-transform: translateY(20vh); transform: translateY(20vh); -webkit-transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1); transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1); } .background:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0); } .background:first-child { -webkit-transform: translateY(0vh); -ms-transform: translateY(0vh); transform: translateY(0vh); } .background:first-child .content-wrapper { -webkit-transform: translateY(5vh); -ms-transform: translateY(5vh); transform: translateY(5vh); } .background:nth-child(1) { z-index: 20; } .background:nth-child(2) { z-index: 19; } .background:nth-child(3) { z-index: 15; } .background:nth-child(4) { z-index: 13; } .background:nth-child(5) { z-index: 11; } .background:nth-child(6) { z-index: 1; } .background:nth-child(6) { } .background1{ background-size: cover; background-repeat: no-repeat; background-position: center center; overflow: hidden; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 100vh; position: fixed; width: 100vw; -webkit-transform: translateY(5vh); -ms-transform: translateY(5vh); transform: translateY(5vh); -webkit-transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1); transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1); } .background1:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0); } .background1:first-child { -webkit-transform: translateY(0vh); -ms-transform: translateY(0vh); transform: translateY(0vh); } .background1:first-child .content-wrapper { -webkit-transform: translateY(5vh); -ms-transform: translateY(5vh); transform: translateY(5vh); } .background1:nth-child(1) { z-index: 19; } .background1:nth-child(2) { z-index: 18; } .background1:nth-child(3) { z-index: 15; } .background1:nth-child(4) { z-index: 12; } .background1:nth-child(5) { z-index: 11; } .background1:nth-child(6) { z-index: 10; } .background1:nth-child(7) { z-index: 9; } .background2{ background-size: cover; background-repeat: no-repeat; background-position: center center; overflow: hidden; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 100vh; position: fixed; width: 100vw; -webkit-transform: translateY(5vh); -ms-transform: translateY(5vh); transform: translateY(5vh); -webkit-transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1); transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1); } .background2:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0); } .background2:first-child { -webkit-transform: translateY(0vh); -ms-transform: translateY(0vh); transform: translateY(0vh); } .background2:first-child .content-wrapper { -webkit-transform: translateY(5vh); -ms-transform: translateY(5vh); transform: translateY(5vh); } .background2:nth-child(1) { z-index: 19; } .background2:nth-child(2) { z-index: 18; } .background2:nth-child(3) { z-index: 15; } .background2:nth-child(4) { z-index: 12; } .background2:nth-child(5) { z-index: 11; } .background2:nth-child(6) { z-index: 10; } .background2:nth-child(7) { z-index: 9; } p.content-title { font-size: 7vh; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; text-shadow: 4px 2px 2px #000; position: absolute; bottom: 41%; width: 100vw; } .scroll-down { position: fixed; z-index: 500; -webkit-transition: opacity 0.3s 1.7s, z-index 0.5s 1.5s, -webkit-transform 0.5s 1.5s; transition: opacity 0.3s 1.7s, z-index 0.5s 1.5s, -webkit-transform 0.5s 1.5s; transition: transform 0.5s 1.5s, opacity 0.3s 1.7s, z-index 0.5s 1.5s; transition: transform 0.5s 1.5s, opacity 0.3s 1.7s, z-index 0.5s 1.5s, -webkit-transform 0.5s 1.5s; font-size: 1.5rem; font-family: gotham-regular; text-transform: uppercase; bottom: 8rem; left: calc(50% - 15rem); color: #005700; width: 30rem; text-align: center; } .scroll-down.removed { -webkit-transform: translateY(-20rem); transform: translateY(-20rem); opacity: 0; z-index: -10; -webkit-transition: opacity 0.3s 0.2s, z-index 0.5s, -webkit-transform 0.5s; transition: opacity 0.3s 0.2s, z-index 0.5s, -webkit-transform 0.5s; transition: transform 0.5s, opacity 0.3s 0.2s, z-index 0.5s; transition: transform 0.5s, opacity 0.3s 0.2s, z-index 0.5s, -webkit-transform 0.5s; } .scroll-down:after { content: ""; position: absolute; display: block; bottom: -0.6rem; left: calc(50% - 0.5rem); width: 1.5rem; height: 1.5rem; border: 0.2rem solid #005700; border-left: none; border-top: none; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: arrowMove 2.2s infinite; animation: arrowMove 2.2s infinite; } @-webkit-keyframes arrowMove { to { -webkit-transform: rotate(45deg) translateY(2rem) translateX(2rem); transform: rotate(45deg) translateY(2rem) translateX(2rem); opacity: 0; } } @keyframes arrowMove { to { -webkit-transform: rotate(45deg) translateY(2rem) translateX(2rem); transform: rotate(45deg) translateY(2rem) translateX(2rem); opacity: 0; } } @-webkit-keyframes navArrowMove { to { -webkit-transform: translateX(2rem); transform: translateX(2rem); opacity: 0; } } @keyframes navArrowMove { to { -webkit-transform: translateX(2rem); transform: translateX(2rem); opacity: 0; } } #film{ float: right; padding: 15px; transform: translateY(-60vh); } .film{ float: right; padding: 15px; transform: translateY(-60vh);} @media (max-width:929px) { p.content-title { font-size: 6vh; line-height: 1.4; -webkit-font-smoothing: antialiased; text-shadow: 2px 2px #000; } .pd-project-info p { font-size: 2.5rem; padding: 0 2rem; } } section#freedomslider h1 { text-align: center; } section#freedomslider p { padding:15px; } p.content-subtitle { font-size: 2rem; line-height: 1; } @media (min-width: 766px){ #srpgs-thumbs-gallery,#srpgs-thumbs-gallery1,#srpgs-thumbs-gallery2 { height: 77%; margin-bottom: 10px; text-align: center; overflow: hidden; padding: 0; min-width:220px; } p.content-subtitle, .content-subtitle { text-transform: capitalize; padding: 0 43% 0 10%; text-align: center; } } #srpgs-thumbs-gallery img { cursor: pointer; border: 1px solid transparent; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.9; margin: 15px auto; display: block; } #srpgs-thumbs-gallery1 img { cursor: pointer; border: 1px solid transparent; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.9; margin: 15px auto; display: block; } #srpgs-thumbs-gallery2 img { cursor: pointer; border: 1px solid transparent; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.9; margin: 15px auto; display: block; } #srpgs-control div.srpgs-thumbs-nav { background: no-repeat top center; width: 82px; height: 40px; left: 7px; margin: 3px auto; cursor: pointer; } #srpgs-control div { position: relative; color:#ff0000; } #srpgs-control div.up { background-image: url(../images/up-arrow.png); background-position: center; } #srpgs-control div.down { background-image: url(../images/down-arrow.png); background-position: center; } #srpgs-control { position: fixed; height: 60%; margin: 0 auto; right: 3.2%; } #srpgs-thumbs-gallery img:hover { border: 1px solid orange; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } #srpgs-control1 div.srpgs-thumbs-nav1 { background: no-repeat top center; width: 82px; height: 40px; left: 7px; margin: 3px auto; cursor: pointer; } #srpgs-control1 div { position: relative; color: #ff0000; font-weight: bold; } #srpgs-control1 div.up { background-image: url(../images/up-arrow.png); } #srpgs-control1 div.down { background-image: url(../images/down-arrow.png); } #srpgs-control1 { position: fixed; height: 60%; margin: 0 auto; right: 3.2%; } #srpgs-thumbs-gallery1 img:hover { border: 1px solid orange; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } #srpgs-control2 div.srpgs-thumbs-nav2 { background: no-repeat top center; width: 82px; height: 40px; left: 7px; margin: 3px auto; cursor: pointer; } #srpgs-control2 div { position: relative; color:#FF0000; } #srpgs-control2 div.up { background-image: url(../images/up-arrow.png); background-position: center center; } #srpgs-control2 div.down { background-image: url(../images/down-arrow.png); background-position: center center; } #srpgs-control2 { position: fixed; height: 60%; margin: 0 auto; right: 3.2%; } #srpgs-thumbs-gallery2 img:hover { border: 1px solid orange; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .menu,.menu1,.menu2{ position: fixed; left: 47%; bottom: 44%; height: 100px; width: 100px; margin: 0 auto; padding: 2.5% 1%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; display: block; text-align: center; line-height: 1; background-color: #35865a; -webkit-transform: translateZ(0); text-decoration:none; color:#fff; border:1px solid #fff; } .menu:after,.menu1:after,.menu2:after { position: absolute; top: 0px; left: 0px; content: ''; height: 100%; width: 100%; padding: 10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 5px 15px rgba(53, 134, 90, 0.5); -moz-box-shadow: 0 0 5px 15px rgba(53, 134, 90, 0.5); box-shadow: 0 0 5px 15px rgba(53, 134, 90, 0.5); -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; transition: transform 0.2s; z-index: -1; } .menu:hover,.menu1:hover,.menu2:hover { background-color: rgba(53, 134, 90, 0.8); -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; -o-transition: background-color 0.2s; transition: background-color 0.2s; color:#fff; text-decoration:none; } .menu:hover:after,.menu1:hover:after,.menu2:hover:after { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; transition: transform 0.2s; } @media (max-width: 766px) { body { font-size: 1.2rem; font-family: Alice-Regular; color: #ffffff; background: url(../images/products.jpg) no-repeat; background-size: cover; background-position: 84% 68%; } .menuBtnWrapper { float: right; padding: 15px 0; } .pd-projects-previews li { height: 15%; width: 100%; overflow: hidden; } .pd-project-title { position: absolute; width: 100%; top: calc(50% - 20px); left: 7%; color: #ffffff; -webkit-transform: translateY(5.5vh); -moz-transform: translateY(5.5vh); -ms-transform: translateY(5.5vh); -o-transform: translateY(5.5vh); transform: translateY(5.5vh); } .pd-projects-previews li:nth-of-type(2) .pd-project-title, .pd-projects > li:nth-of-type(2) .pd-project-title { -webkit-transform: translateY(-12.5vh); -moz-transform: translateY(5.5vh); -ms-transform: translateY(5.5vh); -o-transform: translateY(5.5vh); transform: translateY(5.5vh); } .pd-projects-previews li:nth-of-type(3) .pd-project-title, .pd-projects > li:nth-of-type(3) .pd-project-title { -webkit-transform: translateY(12.5vh); -moz-transform: translateY(12.5vh); -ms-transform: translateY(12.5vh); -o-transform: translateY(12.5vh); transform: translateY(4.5vh); } .pd-project-title h2 { font-size: 40px; } #sf { background: url(../images/sunfloewr_1.jpg) no-repeat 68% 68%; background-size: cover; margin-top: 18%; } #sf1 { background: url(../images/sunfloewr_2.jpg) no-repeat 68% 68%; background-size: cover; margin-top: 18%; } #sf2 { background: url(../images/sunfloewr_3.jpg) no-repeat 68% 68%; background-size: cover; margin-top: 18%; } #sf3 { background: url(../images/sunfloewr_4.jpg) no-repeat 68% 68%; background-size: cover; margin-top: 18%; } #sf4 { background: url(../images/sunfloewr_5.jpg) no-repeat 68% 68%; background-size: cover; margin-top: 8%; } #sf5 { background: url(../images/sunfloewr_6.jpg) no-repeat 75% 68%; background-size: cover; margin-top: 14%; } #sf6 { background: url(../images/sunfloewr_1.jpg) no-repeat 68% 68%; background-size: cover; margin-top: 18%; } section#rb{ background: url(../images/RICEBRADN_1.jpg) no-repeat 50% 68%; background-size: cover; margin-top: 16%; } section#rb1 { background: url(../images/ricebran_2.jpg) no-repeat 68% 68%; background-size: cover; margin-top: 4%; } section#rb2 { background: url(../images/ricebran_3.jpg) no-repeat 68% 68%; background-size: cover; margin-top: 4%; } section#rb3 { background: url(../images/ricebran_4.jpg) no-repeat 68% 68%; background-size: cover; margin-top: 16%; } section#rb4 { background: url(../images/ricebran_5.jpg) no-repeat 68% 68%; background-size: cover; margin-top: 4%; } section#rb5 { background: url(../images/ricebran_6.jpg) no-repeat 68% 68%; background-size: cover; margin-top: 4%; } section#rb6 { background: url(../images/ricebran_7.jpg) no-repeat 68% 68%; background-size: cover; margin-top: 4%; } section#ms { background: url(../images/mustard_1.jpg) no-repeat 60% 68%; background-size: cover; margin-top: 20%; } section#ms1 { background: url(../images/mustard_2.jpg) no-repeat 60% 68%; background-size: cover; margin-top: 20%; } section#ms2 { background: url(../images/mustard_3.jpg) no-repeat 60% 68%; background-size: cover; margin-top: 20%; } section#ms3 { background: url(../images/mustard_4.jpg) no-repeat 66% 68%; background-size: cover; margin-top: 20%; } section#ms4 { background: url(../images/mustard_5.jpg) no-repeat 67% 68%; background-size: cover; margin-top: 20%; } section#ms5 { background: url(../images/mustard_6.jpg) no-repeat 68% 68%; background-size: cover; margin-top: 4%; } section#ms6 { background: url(../images/mustard_7.jpg) no-repeat 60% 68%; background-size: cover; margin-top: 20%; } p.content-title { font-size: 5.2rem; line-height: 1.4; -webkit-font-smoothing: antialiased; text-shadow: 2px 2px #000; } .menu, .menu1, .menu2 { position: fixed; left: 34%; bottom: 49%; height: 100px; width: 100px; margin: 0 auto; padding: 10.5% 3%; } #srpgs-control,#srpgs-control1,#srpgs-control2 { position: fixed; height: 70%; margin: 0 auto; right: 0%; bottom: 2%; padding: 10px 0px; } #film { float: right; padding: 15px; transform: translateY(-38vh); } a#film img { width: 100px; } #srpgs-thumbs-gallery, #srpgs-thumbs-gallery1, #srpgs-thumbs-gallery2 { width: 23vw; padding: 10px; margin-bottom: 10px; overflow: hidden; } section#freedomslider h1 { text-align: center; font-size: 17px; font-weight: bold; margin-top: 120%; } .cd-nav-trigger{ font-size: 1.8rem; padding: 7px 8px; } .freedomholder>a { display: inline-block; height: 62px; width: 186px; padding: 10px; } } p.content-subtitle,.content-subtitle { font-family: KaushanScript; font-size: 2.6rem; line-height: 1.4; text-transform: capitalize; } .prodslice{font-size:26px;} .prodslice:before{ content:url(../images/product-below.png); vertical-align: middle; position: absolute; bottom: 10px; left: 40%; } .col-black{color:#000;} .pad-left{padding-left:21% !important;} @media (min-width: 1400px) { #srpgs-control,#srpgs-control1,#srpgs-control2 { position: fixed; height: 60%; margin: 0 auto; right: 5%; } .pd-project-info p { padding: 0 25rem; } .menu, .menu1, .menu2 { position: fixed; left: 49%; bottom: 59%; height: 100px; width: 100px; margin: 0 auto; padding: 1.5% 1%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; display: block; text-align: center; line-height: 1; background-color: #35865a; -webkit-transform: translateZ(0); text-decoration: none; color: #fff; border: 1px solid #fff; } p.content-subtitle { padding: 0 45% 0 05%; } p.content-subtitle, .content-subtitle { font-family: KaushanScript; font-size: 3.6rem; line-height: 1.4; text-transform: capitalize; } } #st1 { background: url(../images/contact.jpg) no-repeat ; background-size: cover; } div.content1 { margin: 10px 10px; border: 1px solid rgba(100, 100, 100, 0.39); padding: 10px; display: inline-block; } form#contact-form { width: 250px; } .form-control { display: block; width: 100%; height: 30px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: transparent !important; background-image: none; border: 1px solid rgba(100, 100, 100, 0.43) !important; border-radius: 0px !important; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .form-group{margin-bottom: 10px !important;} b{font-weight:bold; font-family: Lato-Regular; } ul.socialicons-side{ width: 100%; height: auto; display: inline-block; margin: 0; padding: 0; } ul.socialicons-side li { width: 45px; height: 45px; margin: 3px 10px 0 0; float: left; } ul.socialicons-side li a { width: 45px; height: 45px; display: block; background: url(../images/sm.gif) no-repeat; border-bottom: none !important; } ul.socialicons-side li a.facebook { background-position:1px 0px; } ul.socialicons-side li a.facebook:hover { background-position: 1px -60px; } ul.socialicons-side li a.twitter { background-position:-68px 0px; } ul.socialicons-side li a.twitter:hover { background-position: -68px -60px; } ul.socialicons-side li a.linkedin { background-position: -137px 1px; } ul.socialicons-side li a.linkedin:hover { background-position: -137px -60px; } ul.socialicons-side li a.youtube { background-position: -205px 1px; } ul.socialicons-side li a.youtube:hover { background-position: -205px -60px; } @media all and (max-width:767px){ iframe { width: 100%; height: 260px; } }