/* Libraries and Frameworks */
/*@import "bourbon";*/
/*$max-width: 1200px;*/
/*@import "neat";*/

/**********************************************************************************/
/* Typography Fonts */
/* @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800); */

/**********************************************************************************/
/* Base Variables */
$spacing-unit: rem(10px);
$primary-font: "Open Sans", Arial, sans-serif;

/**********************************************************************************/
/* Media Queries and Breakpoints */
$tablet: new-breakpoint(max-width 786px);
$mobile: new-breakpoint(max-width 480px);

/**********************************************************************************/
/* Reusable Extensions and Mixins */
%button{
  display: block;
  font-family: $primary-font;
  font-size: .95em;
  font-weight: 700;
  color: white;
  text-decoration: none;
  background: var(--3DText-color-face);
  border-radius: 3px;
}

/**********************************************************************************/
/* Custom Animations */
@include keyframes(bounce) {
	0%, 20%, 50%, 80%, 100% {
    @include transform(translateY(0));
  }
	40% {
    @include transform(translateY(30px));
  }
	60% {
    @include transform(translateY(15px));
  }
}


/**********************************************************************************/
/* Header */
header#page-header{
  width: 100%;
  position: fixed;
  top: 95vh;
  z-index: 9999;
  background: rgba(255,255,255,.85);
  
  nav{
    @include outer-container;
    padding: ($spacing-unit) 0;
    
    ul{
      display: block;
      margin: 0;
      padding: 0;
      @include span-columns(12);
      text-align: center;
      
      li{
        display:inline-block;
        margin: 0;
        padding: 0;
        list-style-type:none;
      }
    }
  }
}
/**********************************************************************************/


/**********************************************************************************/
/* Page Sections */
section{
    display: block;
    position: relative;
    width: 100%;
    height: 100vh;
    border-bottom: 5px solid #444;
    /*************************************************/
    /* Zone Wrapper */
    .zone{
        @include outer-container;
        height: 100%;
        padding: (3 * $spacing-unit) 0;
        /*************************************************/
        /* Region Element */
        .region{
            @include span-columns(12);
            .region__title, .region__content {
                font-family: $primary-font;
                padding-left:2%;
                padding-right:2%;
            }
            .region__title {      
                padding-top: 0;
                margin-bottom: 0;
            }
        }
    }
/**********************************************************************************/
    /* Hero Section */
    &.section--hero{
        /*
        background: url(https://chorfa.fr/wp-content/uploads/2024/05/POSTER_HackWork_4-2.png);
        background-size: 100%;
        background-size: cover;
        */
        .region{
            position: relative;
        }
        
        h2{
            padding: 0;
            margin: 0;
            margin-bottom: .5em;
            font-family: $primary-font;
            font-size: rem(56px);
            font-weight: 700;
            line-height: 1.25;
            text-align: center;
            color: var(--body-text-color);
        }
        
        p,ul,ol{
            max-width: rem(775px);
            margin: 2em auto;
            font-family: $primary-font;
            text-align: center;
            line-height: 2;
            color: var(--body-text-color);
        }
        
        form#subscribe{
            display: block;
            position: absolute;
            bottom: rem(10px);
            left: 0;
            width: 100%;
            .form-item{
                display: block;
    			width: 24%;
    			margin-left: 1%;
    			float: left;
            }
            .form-item--actions{
                width: 23%;
                margin-right: 1%;
            }
    		input[type="text"],
    		input[type="email"],
    		input[type="submit"]{
    			width: 100%;
    			height: auto;
    			padding: 1em;
                border: none;
            }
            input[type="submit"]{
                @extend %button;
            }
        }
    }
  
/**********************************************************************************/
  /* Practice Areas */
    &.section--practice-area{
        background-color: #ccc;
        
        /* Stylized Background Treatment */
        .bg-color-panel {
            display: block;
            position: absolute;
            top: 0;
            background-size: 100%;
            background-size: cover;
            -webkit-clip-path: polygon(100% 0, 95% 10%, 100% 20%, 95% 30%, 100% 40%, 95% 50%, 100% 60%, 95% 70%, 100% 80%, 95% 90%, 100% 100%, 0 100%, 0 0);
            clip-path: polygon(100% 0, 95% 10%, 100% 20%, 95% 30%, 100% 40%, 95% 50%, 100% 60%, 95% 70%, 100% 80%, 95% 90%, 100% 100%, 0 100%, 0 0);
            opacity: .75;
            
            &.second {
                -webkit-clip-path: polygon(95% 0%, 99% 10%, 95% 20%, 99% 30%, 95% 40%, 99% 50%, 95% 60%, 99% 70%, 95% 80%, 99% 90%, 95% 100%, 0 100%, 0 0);
                clip-path: polygon(95% 0%, 99% 10%, 95% 20%, 99% 30%, 95% 40%, 99% 50%, 95% 60%, 99% 70%, 95% 80%, 99% 90%, 95% 100%, 0 100%, 0 0);
            }
            &.third {
                -webkit-clip-path: polygon(95% 0, 90% 10%, 95% 20%, 90% 30%, 95% 40%, 90% 50%, 95% 60%, 90% 70%, 95% 80%, 90% 90%, 95% 100%, 0 100%, 0 0);
                clip-path: polygon(95% 0, 90% 10%, 95% 20%, 90% 30%, 95% 40%, 90% 50%, 95% 60%, 90% 70%, 95% 80%, 90% 90%, 95% 100%, 0 100%, 0 0);
                opacity: 1;
            }
        }
        .zone{
            position: relative;
            z-index: 1;
          
            .region{
                padding: calc(2 * $spacing-unit);
                color: var(--body-text-color);
                text-align: center;
            
                .region__title{  
                    font-size: rem(21px);
                    font-weight: 300;
                    i{
                        display: block; 
                        overflow: hidden;       
                        width: rem(64px);
                        height: rem(64px);
                        margin: 0 auto;
                        margin-bottom: $spacing-unit;
                        border-radius: rem(64px);
                        background: #ccc;
                    }
                }
                .region__content{
                    text-align: left;
                    h3{
                        margin-bottom: 0.5em;
                        font-size: rem(52px);
                        font-weight: 800;
                        line-height: 1;
                    }
                    p,ul,ol{
                    }
                    a.call-to-action{
                        position:absolute;
                        bottom:10v;
                        padding: 1em;
                        margin-left:1%;
                        margin-right:1%;
                        
                        @extend %button;
                        
                        display: block;
                        font-family: "Open Sans", Arial, sans-serif;
                        font-size: 0.95em;
                        font-weight: 700;
                        color: white;
                        text-decoration: none;
                        border-radius: 3px;
                    }
                    a.call-to-action-first{
                        background: var(--callToAction-bg-1);
                        color:var(--callToAction-color-1);
                    }
                    a.call-to-action-second{
                        background: var(--callToAction-bg-2);
                        color:var(--callToAction-color-2);
                    }
                    a.call-to-action-third{
                        background: var(--callToAction-bg-3);
                        color:var(--callToAction-color-3);
                    }
                    a.call-to-action-fourth{
                        background: var(--callToAction-bg-4);
                        color:var(--callToAction-color-4);
                    }
                    a.call-to-action-wide{
                        background: var(--callToAction-bg-4);
                        color:var(--callToAction-color-4);
                        width:88vw;
                    }
                }
            }
        }
    }
  
/**********************************************************************************/
  /* Practice Area - First Section */
  /* PORTFOLIO */
    &.section--practice-area-first{
        background: linear-gradient(180deg, var(--3DText-color-side-1) 80%, var(--3DText-color-side-1) 100%);
        /* Stylized Background Treatment */
        .bg-color-panel{
            right: 0; 
            /*background-image: url(https://static.pexels.com/photos/1712/sunglasses-apple-iphone-desk.jpg);*/
            background-image: url(/media/img/bg/abstract_city_6.png);
            transform: rotateY(180deg);
        }
        
        .zone{
            .region{
                @include span-columns(6);
                @include omega();
                /* Mobile Variants */
                @include media($tablet, $phone, $small) {
                    @include span-columns(12);
                    width:80%;
                }
            }
        }
    }
  
/**********************************************************************************/
  /* Practice Area - Second Section */
  /* ARTICLES */
    &.section--practice-area-second{
        background: linear-gradient(180deg, var(--3DText-color-side-2) 80%,  var(--3DText-color-side-2) 100%);
        
        /* Stylized Background Treament */
        .bg-color-panel{
             left: 0; 
             /* background-image: url(https://static.pexels.com/photos/15798/night-computer-hdd-hard-drive.jpg); */
             /* background-image: url(/media/img/night-computer-hdd-hard-drive-large.jpg);*/
            background-image: url(/media/img/bg/abstract_city_7.png);
        }
        
        .zone{
            .region{
        		float: right;
        		right: 0;
                @include span-columns(6);
                @include shift(6);
                @include omega();
                
                /* Mobile Variants */
                @include media($tablet){
                    @include span-columns(12);
                    @include shift(0);
                }
            }
        }
    }
  
/**********************************************************************************/
   /* Practice Area - Third Section */
   /* BONUS */
    &.section--practice-area-third{
        background: linear-gradient(180deg, var(--3DText-color-side-3) 80%,  var(--3DText-color-side-3) 100%);
        /* Stylized Background Treatment */
        .bg-color-panel{
            right: 0; 
            /* background-image: url(https://static.pexels.com/photos/154/people-apple-iphone-writing.jpg); */
            background-image: url(/media/img/bg/abstract_city_5.png);
            transform: rotateY(180deg);
        }
        
        .zone{
            .region{
                @include span-columns(6);
                @include omega();
                
                /* Mobile Variants */
                @include media($tablet){
                    @include span-columns(12);
                }
            }
        }
    }
  
/**********************************************************************************/
   /* Lab */
    &.section--clients{
        /* @include background(radial-gradient(#ffffff,#ebebeb, #cccccc));
        background: linear-gradient(90deg, rgba(232,242,0,1) 20%, rgba(255,0,125,1) 50%, rgba(214,0,255,1) 80%); */
        background: linear-gradient(180deg, var(--3DText-color-side-4) 80%,  var(--3DText-color-side-2) 100%);
        .zone{
            .region{
                @include span-columns(12);
                .region__title{
                    margin:0;
                    padding: 0;
                    line-height: 1.25;
                    font-family: $primary-font;
                    font-size: rem(42px);
                    font-weight: 700;
                    color: var(--body-text-color);
                    text-align: center;
                    margin-top:20px;
                }
                .clients-list{
                    display: inline-block;
                    text-align: center;
                    margin: (3 * $spacing-unit) 0;
                    padding: 0;
                    .client{
                        display: inline-block;
                        margin: $spacing-unit;
                        padding: 0;
                        width: rem(200px);
                        height: rem(200px);
                        list-style-type: none;
                        border-radius: (rem(200px) / 2);
                    }
                }
                a.call-to-action{
                    @extend %button;
                    padding: 1em;
                    margin: 0;
                    margin-left:3%;
                    
                    display: block;
                    font-family: "Open Sans", Arial, sans-serif;
                    font-size: 0.95em;
                    font-weight: 700;
                    color: white;
                    text-decoration: none;
                    border-radius: 3px;
                }
                a.call-to-action-first{
                    background: var(--callToAction-bg-1);
                    color:var(--callToAction-color-1);
                }
                a.call-to-action-second{
                    background: var(--callToAction-bg-2);
                    color:var(--callToAction-color-2);
                }
                a.call-to-action-third{
                    background: var(--callToAction-bg-3);
                    color:var(--callToAction-color-3);
                }
                a.call-to-action-fourth{
                    background: var(--callToAction-bg-4);
                    color:var(--callToAction-color-4);
                }
                a.call-to-action-wide{
                    background: var(--callToAction-bg-4);
                    color:var(--callToAction-color-4);
                    width:88vw;
                }
            }
        }
    }
  
/**********************************************************************************/
/* Contact */
    &.section--contact-form{
        background: linear-gradient(180deg, var(--3DText-color-side-2) 80%,  var(--3DText-color-side-1) 100%);
        /* Stylized Background Treatment */
        .bg-color-panel {
            display: block;
            position: absolute;
            top: 0;
            background-size: 100%;
            background-size: cover;
            -webkit-clip-path: polygon(100% 0, 95% 10%, 100% 20%, 95% 30%, 100% 40%, 95% 50%, 100% 60%, 95% 70%, 100% 80%, 95% 90%, 100% 100%, 0 100%, 0 0);
            clip-path: polygon(100% 0, 95% 10%, 100% 20%, 95% 30%, 100% 40%, 95% 50%, 100% 60%, 95% 70%, 100% 80%, 95% 90%, 100% 100%, 0 100%, 0 0);
            opacity: .75;
            
            &.second {
                -webkit-clip-path: polygon(95% 0%, 99% 10%, 95% 20%, 99% 30%, 95% 40%, 99% 50%, 95% 60%, 99% 70%, 95% 80%, 99% 90%, 95% 100%, 0 100%, 0 0);
                clip-path: polygon(95% 0%, 99% 10%, 95% 20%, 99% 30%, 95% 40%, 99% 50%, 95% 60%, 99% 70%, 95% 80%, 99% 90%, 95% 100%, 0 100%, 0 0);
            }
            &.third {
                -webkit-clip-path: polygon(95% 0, 90% 10%, 95% 20%, 90% 30%, 95% 40%, 90% 50%, 95% 60%, 90% 70%, 95% 80%, 90% 90%, 95% 100%, 0 100%, 0 0);
                clip-path: polygon(95% 0, 90% 10%, 95% 20%, 90% 30%, 95% 40%, 90% 50%, 95% 60%, 90% 70%, 95% 80%, 90% 90%, 95% 100%, 0 100%, 0 0);
                opacity: 1;
            }
        }
        .zone{
            .region, .region--second, .region--first {
                display: inline-block;
                padding: 0;
                vertical-align:top;
                @include span-columns(6); 
                
                    
                a.call-to-action{
                    @extend %button;
                    padding: 1em;
                    margin: 0;
                    margin-left:3%;
                    
                    display: block;
                    font-family: "Open Sans", Arial, sans-serif;
                    font-size: 0.95em;
                    font-weight: 700;
                    color: white;
                    text-decoration: none;
                    border-radius: 3px;
                }
                
                a.call-to-action-first{
                    background: var(--callToAction-bg-1);
                    color:var(--callToAction-color-1);
                }
                a.call-to-action-second{
                    background: var(--callToAction-bg-2);
                    color:var(--callToAction-color-2);
                }
                a.call-to-action-third{
                    background: var(--callToAction-bg-3);
                    color:var(--callToAction-color-3);
                }
                a.call-to-action-fourth{
                    background: var(--callToAction-bg-4);
                    color:var(--callToAction-color-4);
                }
                a.call-to-action-wide{
                    background: var(--callToAction-bg-4);
                    color:var(--callToAction-color-4);
                    width:88vw;
                }
                
                /* Mobile Variants */
                @include media($tablet){
                    @include span-columns(12);
                }
            }
            .region--first{
                position: sticky;
                left:0;
                width:40%;
            }
            .region--second{
                position: sticky;
                right:0;
                width:40%;
                }
            }
        }
    }

/**********************************************************************************/
/* FullPage Scroll Navigation */
#fp-nav{
    background: rgba(0,0,0,.25);
    border-radius: 3px;
}

#fp-nav ul li, .fp-slidesNav ul li{
    width: 16px;
    height: 16px;
    margin: 9px;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span{  
    margin: -6px 0 0 -6px;
    height: 12px;
    width: 12px;
    background: transparent;
    border: 2px solid white;
}

#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span{
    background: white;
}

#fp-nav ul li .fp-tooltip{
    top: 0;
}

/* Next Slide Navigator */
a#nextSlide{
    position: fixed;
    z-index: 999;
    bottom: $spacing-unit;
    right: 47.5%;
    display: block;
    overflow: hidden;
    font-size: .85em;
    color: white;
    font-family: $primary-font;
    text-decoration: none;
    text-align: center;
    background: rgba(0,0,0,.25);
    border-radius: 32px;
    @include transition(opacity .25s linear);
    i{
        font-size: rem(64px);
        height: rem(64px);
        width: rem(64px);
        line-height: rem(64px);
        cursor: pointer;
    }
    &:hover, &:focus{  
        @include animation(bounce 2s infinite);
    }
    img{
        width:32px;
        height:32px;
    }
}
/**********************************************************************************/
body.fp-viewing-5 a#nextSlide{
    opacity: 0;
}

/**********************************************************************************/
/* Colorbox Modal Display */
#cboxOverlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: .85;
}

#colorbox, #cboxContent {
    border-radius: 24px;
}

#colorbox{
    background: linear-gradient(90deg, var(--3DText-color-side-3) 23%, var(--3DText-color-side-1) 48%, var(--3DText-color-side-2) 77%);
}

#cboxContent {
    background:#00000099;
    /*
    background: linear-gradient(90deg, rgba(0,242,142,1) 23%, rgba(0,255,222,1) 48%, rgba(214,0,255,1) 77%); 
    background: linear-gradient(135deg, rgba(0,242,142,1) 23%, rgba(0,255,222,1) 27%, rgba(0,255,222,1) 48%, rgba(0,91,255,1) 52%, rgba(0,91,255,1) 73%, rgba(214,0,255,1) 77%);
    */
}

#cboxWrapper{
}
/*
*/
.client__thumbnail{
    width:10vw;
    height:10vh;
}

/**********************************************************************************/

/* here the rules for small windows */
@media (max-width: 681px) { 
    section{
        .zone{
            .region{
        		height: 80vh;
        		width: 100vw;
        		padding-top: 20vh;
        		.region__title{
                    margin-bottom:0;
                    padding-bottom:0;
                }
        		.region__content{
                    margin-bottom:0;
                    padding-bottom:0;
                    margin-top:0;
                    padding-top:0;
                    
            		a.call-to-action{
                        width: 88vw;
                    }
                }
            }
        }
        
        .bg-color-panel-wrapper {
            transform: rotateY (90deg);
        }
        .bg-color-panel {
            width: 100vw;
            height: 20vh;
        }
    }
    .section--clients{
        .zone{
            .region{
                width:98vw;
                padding-top:0vh;
            }
        }
    }
    .section--contact-form{
        .zone{
            .region{
        		.region__content{
            		a.call-to-action{
                        width: 88%;
                    }
                }
            }
        }
    }
}
/* here the rules for windows between 500px and 900px */
@media (min-width: 680px) {
    /* Page Sections */
    section{
        .zone{
            .region{
        		height: 100%;
        		width: 50%;
        		.region__content{
            		a.call-to-action {
                        width: 43%;
                    }
            		a.call-to-action-wide{
                        width: 88vw;
                    }
                }
            }
        }
        .bg-color-panel {
            width: 50%;
            height: 100%;
        }
    }
    .section--clients{
        .zone{
            .region{
                width:98vw;
                padding-top:0vh;
            }
        }
    }
    .section--contact-form{
        .zone{
            .region{
        		.region__content{
            		a.call-to-action{
                        width: 88%;
                    }
                }
            }
        }
    }
}
/**********************************************************************************/