/*   
Theme Name: Studio 8 Child Theme
Theme URI: https://wplook.com/product/themes/business/studio-8-agency-wordpress-theme/
Description: Use this theme to start your Child Theme development.
Author: WPlook Studio
Author URI: https://wplook.com/
Template: studio8-wpl
Version: 2.0.0
*/

/* COLORS: 
Blue: #0069b4; / rgb(0,105,180);
Black: #19272c;
Gray: #f9f9f9;
*/

*,
html,
body,
input,
select,
option,
button {
    font-family: sofia-pro, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
}

body {
    border: solid 20px #fff;
    border-top: none;
    display: block;
    box-sizing: border-box;
    background: #fff;
    color: #19272c;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 700;
    margin-top: 0;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

p {
    color: #19272c;
}
a:focus, a:hover, a:visited:focus, a:visited:hover {
    color: #0069b4;
}
.button {
    display: block;
    background: #0069b4;
    font-weight: 700;
    color: #fff;
    padding: 8px 20px 10px;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
}

p .button {
    display: inline-block;
    margin-left: 0;
    margin-top: -11px;
    margin-bottom: -9px;
    color:#fff;
}

p .button:hover {
    color: #fff;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}

/* parent overrides */
.wp-block-wpl-block-container {
    background: transparent;
    padding: 4.75rem 1.5rem;
}

/* color overrides */
.color--black {
    color: #19272c;
}

.color--blue {
    color: #0069b4;
}

.bg--black {
    background: #19272c;
}

.bg--blue {
    background: #0069b4;
}

.bg--gray {
    background: #f9f9f9;
}
.bg--white {
    background:#fff;
}
strong span {
    font-weight:700;
}

/* nav  */
.nav>li {
    text-transform: lowercase;
    font-weight: 700;
    margin-right: 30px;
}

.nav>li>a {
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    color: #0069b4;
    font-weight: 700;
}

.nav>li>a.active,
.nav>li>a:hover {
    color: #0069b4;
}

.header .nav a:after,
.header ul.sub-menu,
.header ul.children {
    top: auto !important;
    bottom: 10px;
}

.nav>li>a:after {
    background: #0069b4;
}

.nav>li>a[aria-current="page"] {
    color: #19272c;
}

.nav>li>a[aria-current="page"]:after,
.nav>li:focus a[aria-current="page"]:after,
.nav>li:hover a[aria-current="page"]:after {
    background: #19272c;
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
}

/* main */
body.normal .main.inner-content {
    padding-top: 60px;
}

body.normal .main.inner-content .main {
    padding-top: 80px;
    margin-top: 0 !important;
}

/* header */
header.header.normal {
    padding: 30px 0;
}

.home .top-header {
    display: flex;
    height: 615px;
    background-size: cover;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    position: relative;
}

.top-header .top-header__text {
    position: absolute;
    align-self: flex-end;
    width: 100%;
}

.top-header .top-header__text .wrapper--blue {
    background: rgba(0, 105, 180, 0.9);
    width: 100%;
    padding: 30px 30px 45px;
    margin-bottom: -80px;
    position: relative;
    z-index: 1;
}

.top-header .top-header__text .wrapper--sticker {
    margin-bottom: -20px;
}

.top-header .top-header__text .sticker {
    padding: 10px 15px;
    font-size: 1.625rem;
    font-weight: 700;
    background: #fff;
    color: #19272c;
    display: inline-block;
    z-index: 2;
    position: relative;
}

.top-header .top-header__text h1 {
    font-weight: 700;
    color: #fff;
    font-size: 3rem;
}

.wp-block-wpl-block-container .wrap>p {
    max-width: 900px;
}

.footer {
    background: #0069b4;
    color: #fff;
    padding: 0;
    margin: -1.5rem 0 0;
    position: relative;
}

.footer .wrap {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
}

.footer .wrap .widget {
    width: auto;
    flex-grow: 1;
}

.footer .widget .textwidget p {
    text-align: left;
    color: #fff;
    margin: 10px 0;
    font-size: 1.125rem;
}

.footer .widget {
    margin: 15px 0;
}

.footer .widget.widget_nav_menu {
    display: flex;
    align-items: center;
    justify-content: stretch;
}

.footer .widget.widget_nav_menu .menu-footer-menu-container {
    width: 100%;
}

.footer .widget.widget_nav_menu ul {
    display: block;
    text-align: right;
    width: 100%;
}

.footer .widget.widget_nav_menu ul li {
    display: inline-block;
    width:auto;
}

.footer .widget.widget_nav_menu ul li a {
    padding: 10px;
    margin: 0;
    color: #fff;
    font-size: 1.125rem;
}
.widget ul li {border-bottom:none;}

/* HOME ~ SERVICES */
.wp-block-columns.services-home {
    margin-bottom:0;
}

.wp-block-columns.services-home .wp-block-column {
    display:flex;
    flex-direction:column;
    justify-content:stretch;
    align-items:stretch;
}
.wp-block-columns.services-home .wp-block-column > * {
    flex-grow:0;
}
.wp-block-columns.services-home .wp-block-column > p:not(.more) {
    flex-grow:1;
}
.services-home .wp-block-image {
    width: 100%;
    margin: 0;
    position: relative;
    float: none;
    display: block;
}

.services-home .wp-block-image a,
.services-home .wp-block-image img {
    display: block;
    margin: 0;
    padding: 0;
}

.services-home h1,
.services-home h2,
.services-home h3,
.services-home h4,
.services-home h5,
.services-home h6 {
    font-size: 1.125rem;
    padding: 20px 20px 5px;
    background: #fff;
    margin: 0;
}

.services-home p {
    padding: 5px 20px 20px;
    background: #fff;
    font-size: 0.875rem;
    margin-bottom:0;
}

.services-home p.more {
    padding-top:0;
}
.services-home p.more > a {
    display: block;
    margin-top: 0;
    font-weight: 700;
    position: relative;
    transition:all 0.25s ease-in-out;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -ms-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
}
div[style*="background-image:url(null);"] {
    background-image:none !important;
}
.services-home p.more > a:hover {
    color:#0069b4;
}

.services-home p.more > a:after {
    content: '';
    background: url('images/rarr.svg') no-repeat center;
    width: 18px;
    height: 9px;
    margin-left: 5px;
    position: relative;
    display:inline-block;
    vertical-align:middle;
    margin-bottom:2px;

}

.services-home p.more > a:hover:after {
    animation: arrowExcited ease-in-out 1s infinite;
    -webkit-animation: arrowExcited ease-in-out 1s infinite;
}

@keyframes arrowExcited {
    0% {
        transform: translate(0px, 0px);
        -webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
    }

    50% {
        transform: translate(5px, 0px);
        -webkit-transform: translate(5px, 0px);
        -moz-transform: translate(5px, 0px);
        -ms-transform: translate(5px, 0px);
        -o-transform: translate(5px, 0px);
}

    100% {
        transform: translate(0px, 0px);
        -webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
    }
}

.wp-block-media-text {
    margin-bottom:2rem;
}
.wp-block-media-text .wp-block-media-text__content {
    padding:50px;
}
.top-header {
    background-repeat:no-repeat;
    background-position:center;
}

body:not(.home) .top-header {
    height:300px;
    display:flex;
    background-position:top center;
}

.cta--block, .wp-block-wpl-block-container .wrap>p.cta--block { 
    max-width:100%;
    margin:0;
    padding:40px 30px;
    text-align:center;
    font-size:1.25rem;
    letter-spacing:0.04em;
}
.cta--block.bg--blue, .cta--block.bg--black {
    color:#fff;
}
.cta--block.bg--blue .button, .cta--block.bg--black .button {
    background:#fff;
    color:#19272c;
    font-size:1rem;
    margin-left:15px;
    letter-spacing:0;
}
.wpcf7 {
    padding:30px;
    background:#fff;
    border:solid 0px transparent;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
}
.wpcf7 label {
    color:#0069b4;
    font-weight:700;
    text-transform: initial;
    font-size:1rem;
    margin-bottom:5px;
    display:block;
}
.wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 input[type="number"], .wpcf7 input[type="email"], .wpcf7 input[type="url"], .wpcf7 input[type="search"], .wpcf7 input[type="tel"], .wpcf7 input[type="color"], .wpcf7 textarea {
    background: #f9f9f9;
    border:solid 1px #e3e3e3;
    font-size:1rem;
}
.wpcf7 input[type="text"]:focus, .wpcf7 input[type="password"]:focus, .wpcf7 input[type="number"]:focus, .wpcf7 input[type="email"]:focus, .wpcf7 input[type="url"]:focus, .wpcf7 input[type="search"]:focus, .wpcf7 input[type="tel"]:focus, .wpcf7 input[type="color"]:focus, .wpcf7 textarea:focus {
background:#fff;
color:#19272c;
font-weight:400;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);

}
.wpcf7 input[type="submit"] {
    background:rgb(0, 105, 180);
    border: solid 0px transparent;
    color:#fff;
    text-transform:initial;
    font-size:1rem;
    letter-spacing:0.04em;
}
.wpcf7 input[type="submit"]:hover {
    background: #19272c;
}
.wp-block-column__contact-info .wp-block-wpl-block-container{
margin-left:30px;
padding:30px 0;
}
.wp-block-column__contact-info .wp-block-wpl-block-container h1, .wp-block-column__contact-info .wp-block-wpl-block-container h2, .wp-block-column__contact-info .wp-block-wpl-block-container h3, .wp-block-column__contact-info .wp-block-wpl-block-container h4, .wp-block-column__contact-info .wp-block-wpl-block-container h5, .wp-block-column__contact-info .wp-block-wpl-block-container h6 {
    color: rgb(0, 105, 180);
}
@media screen and (min-width:1025px){
    /* header */
    .header .wrap {
        display:flex;
        justify-content: stretch;
    }
    header.header .brand{
        float:none;
        display:block;
    }
    header.header .brand img {
        position:relative;
    }
    .header nav.primary {
        justify-self:flex-end;
        flex-grow:1;
    }
}
.socials {
    display:block;
    list-style: none;
    order:3;
}
.socials ul {
    margin:-5px 0 0 20px;
    padding:0;
}
.socials li {
    display:inline-block;
    margin-left:4px;
}
/* icons */
.icon:after {
    content:'';
    width:30px;
    height:30px;
    background-size:contain;
    display:inline-block;
    background-repeat:no-repeat;
    background-position: center center;
    vertical-align:text-top;
    
}
.header .nav .social a:after, .header .nav .phone a:after  {
    display:none;
}
.header .nav .social {
    margin-right: 15px;
}
.header .nav li.social:last-of-type {
    margin-right:30px;
}
.header .nav .phone a {
    letter-spacing:0em;
}
.header .nav .phone a:hover {
    color: #19272c;
}

.icon--text {
    display:none;
}
.icon:before {
    background-position: -99999px -9999px;
    content:'';
    width:0;
    height:0;
}
.icon.fb:after {
    background-image:url('images/icons/F4C_Icon_fb--black.svg');
    background-image:url('images/icons/F4C_Icon_fb--blue.svg');
}
.icon.fb:hover:after, .icon.fb:before{
    background-image:url('images/icons/F4C_Icon_fb--black.svg');
}
.icon.ig:after {
    background-image:url('images/icons/F4C_Icon_ig--black.svg');
    background-image:url('images/icons/F4C_Icon_ig--blue.svg');
}
.icon.ig:hover:after, .icon.ig:before {
    background-image:url('images/icons/F4C_Icon_ig--black.svg');
}
.icon.li:after {
    background-image:url('images/icons/F4C_Icon_li--black.svg');
    background-image:url('images/icons/F4C_Icon_li--blue.svg');
}
.icon.li:hover:after, .icon.li:before {
    background-image:url('images/icons/F4C_Icon_li--black.svg');
}

/* Responsive */
@media screen and (max-width:1024px){
    header.header.normal {
        padding:15px 0;
    }
    .mobile-trigger span i {
        color:#0069b4;
    }
    body.normal .main.inner-content {
        padding-top:30px;
    }
    .top-header__text .wrap {
        padding:0;
    }
    .top-header__text .wrap.wrapper--sticker {
        padding: 0 33px;
    }
    .top-header .top-header__text .wrapper--blue {
        padding-bottom:30px;
    }
    .home .top-header {
        height: 500px;
    }
    .wp-block-wpl-block-container {
        padding:30px 1.5rem;
    }
    .wp-block-wpl-block-container .wrap {
        padding: 0 10px;
    }
    .wp-block-column:not(:first-child) {
        margin-left:16px;
    }
    nav.mobile {
        top:0 !important;
        height:100vh !important;
        left:0;
        bottom:0;
        position:fixed;
        width:auto;
        padding:0;
        background:rgba(0, 105, 180, 0.98);
        overflow:auto;
        box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.25);
    }
    nav.mobile ul li {
        border-bottom-color: rgba(255,255,255,0.5);
        padding:0;
    }
    nav.mobile ul li a {
        padding:10px 30px;
        min-width:200px;
    }
    nav.mobile ul li a:hover {
        background: #19272c;
        color:#fff;
    }
    footer .wrap {
        padding: 0 32px;
    }
    .header .wrap {
        padding:0 30px 0 15px;
    }
    .header .mobile-trigger {
        order:3;
    }
    .wp-block-column__contact-info .wp-block-wpl-block-container {
        padding:10px;
    }
    .wpcf7 {
        padding: 20px;
    }
    .contact .wp-block-column[style="flex-basis:66.66%"], .contact .wp-block-column[style="flex-basis:33.33%"]
    {
        width: 100%;
        flex-basis:100% !important;
        margin: 0;
    }
    .contact .wp-block-column[style="flex-basis:66.66%"] {
        margin-bottom:30px;
    }
    .wp-block-column__contact-info .wp-block-wpl-block-container {
        margin-left:0;
    }
    .socials {
        order:1;
    }
    .socials ul {
        margin: -3px 25px 0 0;
    }
    .socials li {
        margin-left: 8px;
    } 
}
@media screen and (max-width:768px){
    body{
        border-width: 15px;
    }
    .wp-block-column {
        flex-basis: calc((100% - 16px) / 2);
        margin-bottom:16px;
    }
    .wp-block-column:nth-child(odd) {
        margin-left:0;
    }
    .wp-block-column:nth-last-child(-n+2) {
        margin-bottom:0;
    }
    .top-header .top-header__text h1 {
        font-size:2.5rem;
    }
}
@media screen and (max-width:480px){
    body{
        border-width: 10px;
    }
    .home .top-header {
        height:360px;
    }
    body:not(.home) .top-header {
        height:200px;
    }
    .top-header .top-header__text h1 {
        font-size:2rem;
    }
    .header .wrap {
        padding:0 20px 0 10px;
    }
    .cta--line .button {
        display:table;
        margin: 5px 0 0;
    }
    header.header.normal {
        padding: 10px 0;
    }
    body.normal .main.inner-content {
        padding-top:20px;
    }
    .top-header .top-header__text .wrapper--blue {
        padding:20px;
    }
    .top-header__text .wrap.wrapper--sticker, footer .wrap {
        padding: 0 23px;
    }
    .top-header .top-header__text .sticker {
        font-size: 1.325rem;
        padding: 5px 10px;
    }
    .wp-block-wpl-block-container {
        padding: 20px 10px;
    }
    .wp-block-column,  .wp-block-column:nth-child(odd), .wp-block-column:not(:first-child) {
        margin: 0 0 10px;
    }
    .wp-block-column:last-child {
        margin-bottom:0;
    }
    .footer .widget {
        margin:0;
    }
    .cta--block.bg--blue .button, .cta--block.bg--black .button {
        margin-right:15px;
        margin-top:10px;
    }
}

@media screen and (max-width:375px){
    .socials ul {
        margin: -3px 20px 0 0;
    }
    .socials li {
        margin-left: 6px;
    } 
}