/*.............................FONTS....................................*/
/*..........................DECLARATION.................................*/

@font-face {
    font-family: 'proxima_nova_rgregular';
    src: url('fonts/proximanova-regular-webfont.woff2') format('woff2'),
         url('fonts/proximanova-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'proxima_nova_altbold';
    src: url('fonts/proxima_nova_alt_bold-webfont.woff2') format('woff2'),
         url('fonts/proxima_nova_alt_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'proxima_novabold';
    src: url('fonts/proxima_nova_bold-webfont.woff2') format('woff2'),
         url('fonts/proxima_nova_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*..............................GENERAL ..................................*/
/*...............................STYLE....................................*/

* {
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
}

                                                    /*body {
                                                        background-color: lightgreen;
                                                    }  */ 

#main {
    display: flex;
    justify-content: flex-start;
}

#logomain {
    display: none;
}

/*.............................LEFT DIV ..................................*/
/*...............................STYLE....................................*/

#left {
    order: 1;
    flex-basis: 70%; /*was 64%*/
/*    min-width: 656px;
*/    height: 100vh; /*was 709px*/
}

                                                    /*#left {
                                                        background-color: purple;
                                                    }*/

.underconstruction:before{
content: url("UnderConstruction.png");
position: absolute;
zoom: 20%;
left: 30%;
}

.hidden-lg-screen {
    display: none;
}

.container-left {
    background-image: url("Pics/Image_3_Sketch_Layer_2-min.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;                         /*1542px 1060px*/ /*was 1442px 960px*/
    display: flex;                                  /*to allow the child element to be centered with margin property*/
}

                                                    /*.container-left {
                                                        border-color: black;
                                                        border-style: solid;
                                                        border-width: 2px;
                                                    }*/

.center-box {
    margin: auto;
    width: 100%;
    display: flex;                                  /*new iteration as of 26/12/2017, I decided to use flex display property*/
    flex-direction: column;
    align-items: center;
}

                                                    /*.center-box {
                                                        border-style: dotted;
                                                        border-width: 2px;
                                                        border-color: yellow;
                                                    }*/

.main_text {
    font-family: 'proxima_nova_rgregular'; 
    font-size: 44px;
    color: #363637;
    letter-spacing: 2px;
    line-height: 54px;
    text-align: center;
}
                                                    /*new iteration asof 26/12/2017, continued*/
                                                    /* prev code: .corner-box {position: relative; width: 40%; margin-left: 30%; margin-right: auto;}*/

.corner-box {
    width: auto;
    position: relative;
}

                                                    /*.corner-box {
                                                        border-style: dotted;
                                                        border-width: 2px;
                                                        border-color: tomato;   
                                                    }*/

.corner-box > span:before {
  content: url("Palm_Beach.png");
  line-height: 54px;
  zoom: 6%;
}

.corner {
    position: absolute;
    width: 29px;
    height: 21px;
    border-width: 3px;
    border-color: #ECB84C;
}

.top-left-corner {
    top: 0;
    left: 0;
    border-style: solid none none solid;
    margin-left: -14px;
}


.bottom-right-corner {
    bottom: 0;
    right: 0;
    border-style: none solid solid none;
    margin-right: -10px;
}

#cta {
    cursor: pointer;
    background-color: #EEC269; /*or*/ /*background-color: rgba(54,54,55,1);*/
    border-radius: 8px;
    border: none;
    /*no need to set a width and height for the button, as I want it to be responsive*/
    /*width: 239px; height: 41px;*/
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #FFF; /*or /*color:#476874;*/
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
    /*padding: 5px 7px;*/ /*or*/ padding: 15px 40px;
    margin-top: 35px;
}

#cta:hover, #cta:focus{
	opacity: 0.99;
    background-color: #D0A859;
    outline: none;
    color: #fff;
    transition: background-color 0.2s linear, color 0.2s linear;
}

/*or/ 
/*#cta:hover {background-color: rgba(242,242,237,0.8); color: #EEC269;}*/
/*#cta:hover {background-color: #EEC269; color: white;}*/

#cta:active {
    box-shadow: inset 3px 4px 5px rgba(0,0,0,0.125), inset -3px -4px 5px rgba(0,0,0,0.125);
}

.fa-chevron-circle-right {
    padding-left: 15px;
}

.tooltip {
    position: relative;
}

.tooltiptext {
    position: absolute;
}

/*.............................RIGHT DIV..................................*/
/*...............................STYLE....................................*/

#right {
    order: 2;
    flex-basis: 30%; /*was 36%*/ 
    max-width: 518px;
    height: 100vh;
}

                                                        /*#right {
                                                            background-color: lightgrey;
                                                            z-index: 0;
                                                        }*/

.container-right {
    position: relative;
}

                                                        /*.container-right {
                                                            border-color: blue;
                                                            border-style: solid;
                                                            border-width: 2px;
                                                        }*/

/*......................LOGO......................*/
/*.....................STYLE......................*/

.logo-container {
    display: flex;
    justify-content: space-between;
    padding: 5px 5px;
    margin-top: 119px;
    position: relative;
}
                                                        /*.logo-container {
                                                            border-color: salmon;
                                                            border-style: solid;
                                                            border-width: 2px;
                                                        }*/

.nested-logo-box-1 {
    flex-basis: 44%;
}
.nested-logo-box-2 {
    flex-basis: 52%;
}

                                                        /*.nested-logo-box-1, .nested-logo-box-2 {
                                                            background-color: lightblue;
                                                        }*/

#logo_design {
    order: 1;
    text-align: right;
}

#logo_design img {
    width: 127px;
    height: 70px;
    padding-top: 3px;
}

                                                        /*#logo_design {
                                                            border-color: red;
                                                            border-style: dotted;
                                                            border-width: 2px;
                                                        } */                                                   

#logo_company_name {
    order: 2;
    font-family: 'proxima_novabold';
    text-transform : uppercase;
    font-size: 34px;
    color: #000000;
    letter-spacing:2.4px;
    line-height: 36px;
    text-align: left;
    padding-top: 2px;
}

                                                        /*#logo_company_name {
                                                            border-color: red;
                                                            border-style: dotted;
                                                            border-width: 2px;
                                                        }*/

#logo_company_name span {
    color: #EEC269;
    font-family: 'proxima_nova_rgregular';
}

.line-separator {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 45%;   
    border-bottom: 8px solid #000;
} 

/*..................INFO MENU......................*/
/*....................STYLE........................*/

/*............ICON..............*/
/*............STYLE.............*/

.icon {
  position: relative;
  width: 14px;
  height: 14px;
  left: -20px; 
  z-index: -1;
  display: inline-block;
}

.icon:before, 
.icon:after {
  content: "";
  position: absolute;
  background-color: #eec269; /* of the global icon*/
  transition: transform 0.3s ease-out;
}

.icon:before /* vertical line */ {
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  margin-left: -2px;
}

.icon:after /* horizontal line*/ {
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  margin-top: -2px;
}

[type=checkbox]:checked ~.icon:before {
    transform: rotate(90deg);
}

[type=checkbox]:checked ~.icon:after {
    transform: rotate(180deg);
}

/*..........DRAWERS.............*/
/*...........STYLE..............*/

/* .info-menu { position: absolute; top: 297px; left: 150px;}                                        
*/ /*OR*/
/*.info-menu {position: absolute;top: 307px;left: 50px;}*/
/*OR*/
.info-menu { position: relative; top: 70px; margin-left: 20%;}                                        

                                                        /*.info-menu {
                                                            border-style: solid;
                                                            border-color: red; 
                                                            border-width: 1px;
                                                        }*/

.clickable:hover {
  text-decoration: underline;
  cursor: pointer;
}


.collapsible-group {
  padding: 10px 5px;
}

                                                        /*.collapsible-group {
                                                          border-style: dotted ;
                                                          border-color: green;
                                                          border-width: 1px;
                                                        }*/

[type=checkbox] {
  opacity: 0;
}

[type=checkbox]:hover {
  cursor: pointer;
}
                                                        /*shortcut for #drawer-1, #drawer-2, #drawer-3*/
div[id^="drawer-"] {
  display: none;
}

[type=checkbox]:checked ~ #drawer-1,
[type=checkbox]:checked ~ #drawer-2,
[type=checkbox]:checked ~ #drawer-3 {
  display: block;
  width: 80%;
  height: auto;
  font-family: 'proxima_nova_rgregular';
  font-size: 16px;
  margin-top: 8px;
  animation: fade-in 3s linear;
  -webkit-animation: fade-in 3s linear;
}

div > a:link {
    color: black;
}

div > a:active {
    color: #eec269;
}

@keyframes fade-in {
    0%   {opacity: 0.1;}
    50%   {opacity: 0.5;}
    100% {opacity: 1;}
}

@-webkit-keyframes fade-in {
    0%   {opacity: 0.1;}
    50%   {opacity: 0.5;}
    100% {opacity: 1;}
}

[class=icon] ~ label {
    color: #000000;
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0px;
    text-transform : uppercase;
    margin-left: -10px;
    cursor: pointer;
}

[class=icon] ~ label:hover {
    text-decoration: underline;
}

 /* Increasing Size of Checkbox */

  input[type=checkbox] {
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
}


/*..............................FOOTER....................................*/
/*...............................STYLE....................................*/

                                                            /*footer {
                                                                border-color: olive;
                                                                border-style: dotted;
                                                                border-width: 1px;
                                                            }*/

footer {
    margin: 0px 0px;
    position: absolute;
    bottom: 5px;
    width: 100%;
}

footer p {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    letter-spacing: 0.5px;
    font-size:12px;
    font-weight: 300;
    color: #505050;
    margin: 0;
    padding-bottom: 15px;
}

/*..............................MEDIA.....................................*/
/*.............................QUERIES....................................*/

/*..................EXTRA LARGE..................*/
/*...............................................*/
    @media only screen and (min-width: 1200px) {}

/*.....................LARGE.....................*/
/*...............................................*/
    @media only screen and (min-width: 992px) and (max-width : 1200px) {
        .logo-container {
            flex-direction: column;
            margin-top: 89px;
        }
        #logo_design {
            text-align: center;
        }
        #logo_company_name {
            text-align: center;
            font-size: 30px;
            line-height: 33px;
            margin-top: 35px;
        }
        .info-menu {
            top: 130px; 
            margin-left: 15%;
        }           
        [type=checkbox]:checked ~ #drawer-1 {
            width: 90%;
        }    
        .line-separator {
            margin-top: -95px;
        }                      
    }

/*....................MEDIUM.....................*/
/*.....................HIGH......................*/
    @media only screen and (max-width : 992px) {
       body {
            overflow-x: hidden;
       }
        #right {
            display: none;
        }

        #left {
            flex-basis: 100%;
        }
        .container-left {
            background-image: url("Pics/Image_3_Sketch_Layer_3-min.png");
        }
        .underconstruction:before {
        left: 45%;
        }

#logomain {
    display: block;
    position: absolute;
    top: 20px;
    left: 25px;    
    font-family: 'proxima_novabold';
    text-transform : uppercase;
    font-size: 30px;
    color: #000000;
    letter-spacing:2.4px;
    line-height: 33px;
    text-align: center;
    z-index: 400;
}

#logomain span {
    color: #EEC269;
    font-family: 'proxima_nova_rgregular';
}

        .hidden-lg-screen {
            display: block;
        }
/*.......MENU HAMBURGER........*/
/*............STYLE............*/

        label .menu {
            position: absolute;
            right: -100px;
            top: -100px;
            z-index: 100;
            width: 200px;
            height: 200px;
            background-color: #FFF;
            border-radius: 50% 50% 50% 50%;
            transition: 0.3s ease-in-out;
            box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
            cursor: pointer;
        }
        label .hamburger {
            position: absolute;
            top: 135px;
            left: 50px;
            width: 30px;
            height: 3px;
            background-color: #EEC269;
            display: block;
            transform-origin: center;
            transition: 0.3s ease-in-out;
        }
        label .hamburger:after, 
        label .hamburger:before {
            transition: 0.3s ease-in-out;
            content: "";
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            background-color: #EEC269;
        }
        label .hamburger:before {
            top: -10px;
        }
        label .hamburger:after {
            bottom: -10px;
        }
        label input {
            display: none;
        }
        label input:checked + .menu {
            box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;
            border-radius: 0;
/*            background: red;
*/        }
        label input:checked + .menu .hamburger {
            transform: rotate(45deg);
        }
        label input:checked + .menu .hamburger:after {
            transform: rotate(90deg);
            bottom: 0;
        }
        label input:checked + .menu .hamburger:before {
            transform: rotate(90deg);
            top: 0;
        }
        label input:checked + .menu + ul {
            /*opacity: 1;*/
            display: block;
            animation: pop-up 2s linear;
            -webkit-animation: pop-up 2s linear;
/*            background-color: orange;
*/        }
        @keyframes pop-up {
            0%      {opacity: 0;}
            20%     {opacity: 0.1;}
            50%     {opacity: 0.5;}
            100%    {opacity: 1;}
        }
        @-webkit-keyframes pop-up {
            0%      {opacity: 0;}
            20%     {opacity: 0.1;}
            50%     {opacity: 0.5;}
            100%    {opacity: 1;}
        }
        label ul {
            z-index: 200;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /*opacity: 0;*/
            display: none;
            list-style-type: none;
            font-size: 50px;
            font-family: 'Roboto', sans-serif;
            text-transform: uppercase;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        label a {
            margin-bottom: 1em; /*Relative to the font-size of the element (2em means 2 times the size of the current font)*/
            display: block;
            color: #000;
            text-decoration: none;
        }
        label a:hover {
            cursor: pointer;
            color: #ECB84C;
            opacity: 0.6;         
        }


/*....................MEDIUM.....................*/
/*.....................LOW.......................*/
    @media only screen and (max-width : 768px) {
        .container-left {
            background-image: url("Pics/Image_3_Sketch_Layer_4-min.png");
        }
   }

/*....................SMALL.....................*/
/*..............................................*/
    @media only screen and (min-width: 320px) and (max-width : 480px) {
        .main_text {
            font-family: 'proxima_nova_rgregular'; 
            font-size: 30px;
            letter-spacing: 1px;
            line-height: 34px;
        }
        .corner-box > span:before {
            content: url("Palm_Beach.png");
            line-height: 34px;
            zoom: 4%;
        }
        #cta {
            font-size: 14px;
            letter-spacing: 2.5px;
            padding: 15px 20px;
            margin-top: 40px;
        }
        .top-left-corner {
            margin-left: -14px;
            margin-top: -5px;
        }
        .bottom-right-corner {
            margin-right: -10px;
            margin-bottom: -4px;
        }
        label ul {
           width: 300px;
           font-size: 40px; 
        }


    }




/* ----------------------------------------------- Comments -------------------------------------------------

Rajouter un “tooltip” quand clique sur “submit project” pour évoquer NDA + Bot 
https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346
https://www.w3schools.com/css/css_tooltip.asp

Keep in mind : I designed the website to be optimal for a width between 1200 px and 1400 px by default
> therefore the media queries here under will targer screens that are either larger or smaller than this range

*/