/* Global Rules - start */
:root {
    --main-logo-width: 56px; /* the total width = bar width * 7 * 2  */
    --main-logo-bar: 4px; /*the bar width*/

    --main-foot-width: 42px; /* the total width = bar width * 7 * 2  */
    --main-foot-bar: 3px;  /*the bar width*/ 

    --main-trans-duration: 0.1s;
    --main-trans-menu: 0.6s;
}
body {
    font-family: "Montserrat", sans-serif;
    margin: 0;
}
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 30px;
    position: relative;
}
/* Media Queries - start */

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

/* Media Queries - end */
/* Global Rules - end */

/* start navbar & sidebar*/
.navbar , .sidebar {
    display: flex; 
    justify-content: space-between;
    font-size: 10px;
    padding: 0 20px 0;
}
aside.sidebar {
    background-color: rgb(256, 256, 256, 0.6);
}
.navbar {
    border-bottom: 1px solid rgb(212, 212, 212); 
}
.sidebar {
    position: sticky;
    top: 0;
    z-index: 100;
}
ul.left-list , ul.right-list , ul.sb-list , ul.left-footer { 
    height: 56px;
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

div.container-logo {
    width: calc((var(--main-logo-width)) + (var(--main-logo-bar)));
    height: calc((var(--main-logo-width) / 2));
    display: flex;
    gap: var(--main-logo-bar);
}
div.vertical {
    width: 50%;
    display: flex;
    justify-content: space-between;
}
div.vertical div {
    width: var(--main-logo-bar);
    background-color: black;
    transition-property: all;
    transition-duration: var(--main-trans-duration);
}
div.horizontal {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
div.horizontal div {
    width: 100%;
    height: var(--main-logo-bar);
    background-color: black;
    transition-property: all;
    transition-duration: var(--main-trans-duration);
}
div.container-logo:hover > div > div {
    background-color: #ff764d;
}
ul.links {
    display: flex;
}
li.navbar-link, li.side-link {
	padding: 5px 12px 12px 12px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
	text-transform: capitalize;
	line-height: 40px;
}
ul.links li a:hover, ul.right-list a:hover, li.side-link a:hover, div.social > div:not(:last-child) a:hover, div.education a:hover, div.community a:hover, ul.left-footer a:hover {
    color: #FF764D;
}
li.navbar-link a, .side-link a, div.fix-margin a, div.education a, div.community a, div.social div a{
    text-decoration: none;
    color: black;
    transition-property: all;
    transition-duration: var(--main-trans-duration);
}
ul.links {
    list-style: none;
    padding: 0;
}
ul.links > li:last-child > a {
    color: #FF764D;
    position: relative;
}
ul.links > li:last-child > a:first-child::after {
	content: "+";
	font-size: 20px;
	color: #FF764D;
	position: absolute;
	right: -21px;
	top: -14px;
}
section.more-menu {
    background-color: rgb(238, 238, 238, 0.8);
    text-transform: capitalize;
    padding: 20px;
    visibility: hidden;
    position: absolute;
    top: 56px;
    left: 0%;
    z-index: 152;
    opacity: 0;
    transition-duration: var(--main-trans-menu);
}
section.more-menu > div > ul > li > ul > li{
    transition-duration: var(--main-trans-menu);
}
section.more-menu h3 {
    margin: 0;
}
ul.links > li:last-child > a:hover + section.more-menu {
    visibility: visible;
    opacity: 0.9;
}

div.links li:last-child {
    position: relative;
}
section.more-menu div > ul {
    list-style: none;
    padding: 0;
    display: flex;
    font-size: 12px;
    font-weight: 500;
}
section.more-menu div > h3 {
    cursor: default;
}
section.more-menu div.second-row > ul > li > ul {
    list-style: none;
    padding: 0;
}

section.more-menu div.second-row > ul > li > ul > li {
    line-height: 1.6;
}
section.more-menu ul li {
    padding-right: 15px;
}
section.more-menu ul li a {
    text-decoration: none;
    color: initial;
}
a.active {
    color: blue;
}
ul li.logo {
    padding-top: 12px;
    padding-right: 10px;
}
a.active-side-link {
    color: #ff764d;
}
ul.links > li:nth-last-child(2) {
    display: none;
}
ul.links ul.media-768, div.right-nav  ul.media-768 {
    list-style: none;
    width: fit-content;
    background-color: rgb(242, 242, 242, 0.8);
    z-index: 250;
    padding: 10px;
    position: absolute;
    top: 57px;
    left: 109px;
    visibility: hidden;
    opacity: 0;
    transition: var(--main-trans-menu);
}
div.right-nav  ul.media-768 {
    top: 11vh;
    left: calc(78vw - 70px);
}
ul.links > li:nth-last-child(2) > a:hover + ul, ul.right-list > li:last-child > a:hover + ul {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 767px) {
    .navbar, .sidebar {
        font-size: 10px; 
    }
    ul.links > li {
        display: none;
    }
    ul.links > li:nth-last-child(2) {
        display: flex;
    }
    div.right-nav > ul > li {
        display: none;
    }
    div.right-nav > ul > li:last-child {
        display: block;
    }
}

@media (min-width: 768px) {
    .navbar, .sidebar {
        font-size: 12px;
    }
    ul.links > li {
        display: none;
    }
    ul.links > li:nth-last-child(2) {
        display: flex;
    }
    div.right-nav > ul > li {
        display: none;
    }
    div.right-nav > ul > li:last-child {
        display: block;
    }
}
@media (min-width: 992px) {
    ul.links > li {
        display: block;
    }
    div.right-nav > ul > li {
        display: block;
    }
}
/* end navbar & sidebar */

/* start content */
/* start landing container */
div.landing-photo-container {
    display: flex;
    justify-content: center;
}
div.landing-photo {
    position: relative;
    background-image: url(../Ableton/assets/landing\ page.jpg);
    background-size: cover;
    background-position: 50% 50%;
    width: 90%;
    height: 75vh;
}
div.landing-photo::after {
    content: "ableton";
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);   
    text-transform: capitalize;
    font-size: 80px;
    font-weight: 600;
    color: #fd5948;
    width: 300px;
    height: 70px;
    z-index: 10;
}
div.landing-intro , div.media-description , div.services , div.instruments , div.motivation , section.employee , div.content-jobs {
    width: 70%;
    margin: 80px auto;
    font-size: 20px;
}
div.landing-intro > p:first-child, div.media-description > p:first-child , div.services > p:first-child , div.instruments > p:first-child , div.motivation > p:first-child , section.employee > p:first-child , div.content-jobs > p:first-child {
    font-weight: bold;
}
p.sm-size {
    font-size: 12px;
}
@media (max-width: 767px) {
    div.landing-intro, div.media-description, div.services, div.instruments, div.motivation, section.employee, div.content-jobs {
        width: 70%;
        margin: 80px auto;
        font-size: 12px;
        text-align: justify;
    }
    p.sm-size {
        font-size: 12px;
    }
}

p a {
    text-decoration: none;
}
@media (max-width: 767px) {
    div.landing-photo::after {
        font-size: 50px;
    }
}
/* end landing container */
/* start gallery container */

div.container-image {
    width: 100%;
    height: 550px;
    position: relative;
}
div.image-right-gallery {
    width: 40%;
    padding: 150px 80px 150px 150px;
    background-color: #fbffa7;
    float: right;
}
div.image-left-gallery {
	width: 43%;
	position: absolute;
	top: 85px;
	right: 533px;
}
div.image-left-gallery img {
    width: 100%;
}

@media (max-width: 767px) {
    div.gallery {
        margin-right: auto;
        margin-left: auto;
    }
    div.container-image {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        margin-right: auto;
        margin-left: auto;
        background-color: #fbffa7;
        position: static;
        width: 80%;
        padding: 50px 0 50px;
    }
    div.image-right-gallery {
        width: 61%;
        float: none;
        padding: 0;
        margin-bottom: 50px;
        background-color: transparent;
    }
    
    div.image-right-gallery img {
        width: 100%;
    }
    div.image-left-gallery {
        width: 61%;
        position: static;
        top: 109px;
        right: 387px;
    }
}
@media (min-width: 768px) and (max-width: 992px) {

    div.image-left-gallery {
        width: 40%;
        position: absolute;
        top: 117px;
        right: 441px;
    }
    div.image-right-gallery {
        width: 43%;
        padding: 150px 50px 150px 150px;
    }
    div.image-right-gallery img {
        width: 100%;
    }
}
/* end gallery container */

/* start media container */
div.media {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.media-iframe {
    width: 70%;
}
div.media-text  {
    font-size: 8px;
    font-weight: bold;
    text-transform: capitalize;
    width: 70%;
}
div.media-text p {
    margin-top: 4px;
}
/* end media container */

/* start outstanding instruments */
    /* NO CSS PROPERTIES BECAUSE IT HAS GROUPED WITH ANOTHER ELEMENTS */
/* end outstanding instruments */

/* start work gallery container */
div.work-gallery-container {
    width: 100%;
    height: 700px;
    display: flex;
    position: relative;
}
div.left-work-gallery {
    background-color: #b6ffc0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding-right: 5%;
    width: 60%;
    position: relative;
}
div.float-image {
    position: absolute;
    width: 64%;
    top: 19%;
    left: 86%;
}
@media (max-width: 767px) {
    div.left-work-gallery {
        background-color: #b6ffc0;
        padding-right: 5%;
        width: 80%;
    }
    div.work-gallery-container {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    div.float-image {
        width: 55%;
        position: static;
    }
    div.work-gallery-container img {
        margin: 20px 0 20px;
    }
    div.left-work-gallery {
        padding: 10px 0 10px;
    }
}
/* end work gallery container */

/* start outstanding instruments */
div.instrument-image {
    display: flex;
    justify-content: center;
}
/* end outstanding instruments */

/* start motivation section */
    /* NO CSS PROPERTIES, IT HAS GROUPED WITH ANOTHER ELEMENTS */
/* end motivation section */

/* start training container */
div.training-container {
    display: flex;
    justify-content: center;
}
div.inner-training-container {
    width: 70%;
    height: 600px;
    background-color: #d5b3ff;
    position: relative;
}
div.left-training-image {
    width: 50%;
    position: absolute;
    left: -15%;
    top: 32%;
}
div.right-training-image {
	width: 53%;
	position: absolute;
	top: 26%;
	left: 70%;
}
@media (max-width: 767px) {
    div.inner-training-container {
        width: 70%;
        background-color: #d5b3ff;
    }
    div.left-training-image {
        width: 70%;
        position: static;
    }
    div.right-training-image {
        width: 70%;
        position: static;
    }
    div.inner-training-container {
        height: auto;
        padding: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    div.left-training-image > img{
        padding-bottom: 40px;
    }
}
/* end training container */

/* start employee container */
    /* NO CSS PROPERTIES BECAUSE IT HAS GROUPED WITH ANOTHER ELEMENTS */
/* end employee container */

/* start jobs section */
section.jobs {
    background-color: #b1c5ff;
    padding-bottom: 20px;

}

div.content-jobs {
    box-sizing: border-box;
    font-weight: bold;
    text-decoration: none;
}
@media (max-width: 767px) {
    section.jobs {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    div.content-jobs {
        font-size: 12px;
        width: 70%;
        margin: 0;
        font-size: 15px;
        padding: 15px;
    }
    div.header-jobs {
        width: 100%;
    }
}
/* end jobs section */

/* start contact us section */
section.contact-us {
    margin-top: 100px ;
    font-size: 13px;
}
    /* start title container */
div.title h1 {
    font-size: 55px;
    text-transform: capitalize;
    padding-bottom: 50px;
    margin: 0;
    cursor: default;
}
    /* end title container */

    /* start first row */
div.grid-contents {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,auto));
    gap: 3%;
}
div.grid-contents h3, div.made-in {
    cursor: default;
    margin: 8px 0;
}
div.icons i.fa-brands {
    font-size: 30px;
    margin-right: 10px;
}
i.fa-facebook {
    color: #0866ff;
}
i.fa-youtube {
    color: #ff0302;
}
i.fa-instagram {
    color: #FD1D1D;
}
div.grid > div, div.grid > ul > li{
    margin: 8px 0;
}
div.sign-up {
    margin-top: 4px;
}
label.fix-margin span {
    font-weight: bold;
    display: block
}
label.fix-margin {
    line-height: 1.7;
}
label.fix-margin span {
    font-size: 15.21px;
}
div.mail-container {
    display: flex;
    margin: 15px 0;
}
div.mail-container input.mail-input {
    width: 100%;
    height: 20px;
    border: none; 
    background-color: #eee;
    padding: 0.4em 0.75em;
}
div.mail-container input.sign-up-button {
    background-color: blue;
    color: white;
    border: none;
    cursor: pointer;
    padding: 0 10px;
}
@media (max-width: 767px) {
    div.grid-contents {
        display: block;
    }
    div.grid-contents div.grid {
        margin-bottom: 40px;
        margin-bottom: 40px;
        width: 75%;
    }
    div.mail-container input.mail-input {
        /* width: 60%; */
        height: 20px;
        border: none;
        background-color: #eee;
        padding: 0.4em 0.75em;
    }
    
}
    /* end first row */

    /* start second row */
ul.community-list {
    list-style: none;
    padding: 0; 
    margin: 0;
}
h3.community-title , h3.language-title {
    margin: 8px 0;
}
div.language {
    margin-top: 15px;
    display: flex;
}
select.language , select.location {
    background-color: #eee;
    appearance: none;
    width: 100px;
    border: none;
    padding: 0.5em 2em 0.5em 1em;
    margin: 1px;
    box-sizing: content-box;
    cursor: pointer;
}
select.location {
    width: 170px;
}
form {
    position: relative;
}
form::after {
    content: "";
    position: absolute; 
    top: calc(50% - 3.5px);
    right: 7px; 
    width: 0;
    height: 0;
    border: 7px solid;
    border-color: black transparent transparent transparent;
    z-index: 1;
    pointer-events: none;
}
select , option {
    text-transform: capitalize;
}
    /* end second row */

    /* start footer nav */
div.footer-nav {
    display: flex;
    justify-content: space-between;
    margin: 50px auto;
    margin-bottom: 50px;
}
ul.left-footer {
    display: flex;
    gap: 15px;
    align-items: center;
}
ul.left-footer li a {
    text-decoration: none;
    color: black;
    transition-property: all;
    transition-duration: var(--main-trans-duration);
}
ul.left-footer li:first-child {
    padding-left: 0;
}
div.right-footer {
    display: flex;
}
div.made-in {
    margin-right: 8px;
}
li.footer-link , div.made-in {
    padding: 5px;
    text-transform: capitalize;
}
.footer-link , .made-in {
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

div.container-footer-logo {
    width: calc((var(--main-foot-width)) + (var(--main-foot-bar)));
    height: calc((var(--main-foot-width) / 2));
    display: flex;
    gap: var(--main-foot-bar);
}
div.container-footer-logo .vertical {
    width: 50%;
    display: flex;
    justify-content: space-between;
}
div.container-footer-logo .vertical div {
    width: var(--main-foot-bar);
    background-color: black;
    transition-property: all;
    transition-duration: var(--main-trans-duration);
}
div.container-footer-logo .horizontal {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
div.container-footer-logo div.horizontal div {
    width: 100%;
    height: var(--main-foot-bar);
    background-color: black;
    transition-property: all;
    transition-duration: var(--main-trans-duration);
}
div.container-footer-logo:hover > div > div {
    background-color: #ff764d;
}
@media (max-width: 767px) {
    div.footer-nav {
        display: flex;
    }
    ul.left-footer {
        display: block;
        height: auto;
    }
    ul.left-footer li:not(:last-child) {
        padding-bottom: 10px;
    }
    div.right-footer {
        display: flex;
        align-items: end;
    }
    div.made-in {
        padding: 0;
        text-transform: capitalize;
        margin-bottom: 3px;
    }

}



/* end footer nav */
/* end contact us section */

/* end content */