WARNING !!
YOUR LAYOUT IS INCOMPLETE!
ADD THE FOLLOWING CSS CODE TO YOUR PAGE / SITE TO COMPLETE IT NOW! ↓
Custom CSS > ADD THIS FIRST!
/* HERO SECTION */
#hero .header-content img {
max-width: 400px;
margin-bottom: 30px;
}
@media screen and (max-width: 980px) {
#hero .et_pb_fullwidth_header_subhead {
max-width: 300px;
margin: -10px auto 10px;
}
body #page-container .et_pb_button {
letter-spacing: 2px !important;
}
#hero .header-content img {
max-width: 300px;
}
}
@media screen and (max-width: 767px) {
#hero h1 {
letter-spacing: 4px;
}
body #page-container .et_pb_button, body #page-container .et_pb_fullwidth_header_0 .et_pb_button_one.et_pb_button {
border-width: 7px !important;
}
#hero .header-content img {
max-width: 240px;
}
}
@media screen and (max-width : 980px) {
#hero .header-content img {
max-width: 180px;
}
}
/*MENU*/
#anchorMenuHolder {
text-align: right;
}
#anchorMenu {
padding-top: 60px;
}
#anchorMenu ul {
padding-left: 0;
list-style-type: none;
}
#anchorMenu li {
display: inline-block;
padding: 0 15px;
}
#anchorMenu li a {
color: #fff;
font-family: Raleway;
font-weight: 700;
letter-spacing: 8px;
text-transform: uppercase;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#anchorMenu li a:hover {
color: rgba(255,255,255,.5);
}
#anchorMenu .widget_nav_menu {
width: 96% !important;
}
@media screen and (max-width : 980px) {
#anchorMenuHolder .et_pb_row {
/*margin: 0 3% 15px 3%;*/
padding: 2% 0 0;
}
#anchorMenuHolder .et_pb_column_1_3 {
width: 25% !important;
}
#anchorMenuHolder .et_pb_column_2_3 {
width: 75% !important;
}
#anchorMenu .widget_nav_menu {
width: 96% !important;
}
}
@media screen and (max-width : 767px) {
#anchorLogo {
text-align: center;
margin: 15px auto 0 !important;
}
#anchorMenu {
text-align: center;
padding-top: 20px;
}
#anchorMenuHolder .et_pb_row {
margin: 0 !important;
padding: 2% 0 !important;
}
#anchorMenuHolder .et_pb_column_1_3 {
width: 100% !important;
float: none;
}
#anchorMenuHolder .et_pb_column_2_3 {
width: 100% !important;
float: none;
}
#anchorMenu .widget_nav_menu {
width: auto !important;
float: none;
text-align: center;
}
}
@media screen and (max-width : 600px) {
#anchorMenu li {
display: block;
}
}
/* SPLIT SECTION */
@media screen and (max-width: 980px) {
.splitSection .splitImage {
height: 500px;
}
}
@media screen and (max-width: 767px) {
.splitSection .splitImage {
height: 300px;
}
}
/* SERVICES SECTION */
#services .et-pb-icon-circle {
padding: 40px;
}
/* WORK */
#anchorWork .et_pb_blurb_content {
max-width: none;
}
/* NEWSLETTER SIGNUP */
.newsletterSignup .et_pb_contact_form {
margin: 0 auto;
max-width: 500px;
position: relative;
left: 5%;
}
.newsletterSignup input[type=”text”] {
border: 1px solid rgba(255, 255, 255, .6);
color: #fff;
border-radius: 3px;
font-weight: 500 !important;
}
.newsletterSignup .et_contact_bottom_container {
float: left;
margin-top: 0;
}
.newsletterSignup button[type=”submit”] {
border-radius: 3px !important;
background-color: #fff !important;
color: #1C2228 !important;
font-family: ‘Raleway’, Helvetica, Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 2px !important;
text-transform: uppercase;
font-weight: 500 !important;
border: none !important;
line-height: 30px !important;
padding: 11px 24px 12px 24px !important;
left: -8px !important;
}
.newsletterSignup button[type=”submit”]:hover {
background-color: rgba(255,255,255,.7) !important;
padding: 11px 24px 12px 24px !important;
}
@media screen and (max-width: 1140px) {
.newsletterSignup .et_pb_contact_form {
left: 6%;
}
}
@media screen and (max-width: 1040px) {
.newsletterSignup .et_pb_contact_form {
left: 7%;
}
}
@media screen and (max-width: 870px) {
.newsletterSignup .et_pb_contact_form {
left: 8%;
}
}
@media screen and (max-width: 767px) {
.newsletterSignup .et_pb_contact_form {
left: 0;
}
.newsletterSignup .et_pb_contact_field_0 {
max-width: 100%;
padding-left: 0 !important;
}
.newsletterSignup .et_contact_bottom_container, .newsletterSignup button[type=”submit”] {
width: 100%;
}
.newsletterSignup button[type=”submit”] {
left: 0 !important;
margin-left: 0 !important;
}
}
/*GREY OVERLAY*/
.greyOverlay .et_parallax_bg:before, .greyOverlay:before {
content:””;
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(58, 60, 69, .25);
}
/*IMAGE ZOOM FEATURE*/
.imageWrap {
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.imageWrap img {
vertical-align: bottom;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-o-transition: -o-transform 0.5s ease;
transition: transform 0.5s ease;
}
.imageWrap img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
/*ANIMATION – WAYPOINTS*/
/*——–FROM LEFT———-*/
.left-animated.et-animated {
opacity: 1;
-webkit-animation: fadeLeft 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
-moz-animation: fadeLeft 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
-o-animation: fadeLeft 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
animation: fadeLeft 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
}
/*——–FROM RIGHT———*/
.right-animated.et-animated {
opacity: 1;
-webkit-animation: fadeRight 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
-moz-animation: fadeRight 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
-o-animation: fadeRight 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
animation: fadeRight 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
}
/*———FROM TOP———-*/
.top-animated.et-animated {
opacity: 1;
-webkit-animation: fadeTop 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
-moz-animation: fadeTop 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
-o-animation: fadeTop 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
animation: fadeTop 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
}
/*——–FROM BOTTOM——–*/
.bottom-animated.et-animated {
opacity: 1;
-webkit-animation: fadeBottom 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
-moz-animation: fadeBottom 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
-o-animation: fadeBottom 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
animation: fadeBottom 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
}
/*———FADE IN———–*/
.fadein-animated.et-animated {
opacity: 1;
-webkit-animation: fadeIn 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
-moz-animation: fadeIn 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
-o-animation: fadeIn 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
animation: fadeIn 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
}
HOW TO ADD IT
DELETE THIS SECTION AFTER YOU DO THAT 🙂
“The sea, once it casts its spell, holds one in its net of wonder forever.”
“The sea, once it casts its spell, holds one in its net of wonder forever.”
“The sea, once it casts its spell, holds one in its net of wonder forever.”