

//Foundation override
$primary-color: rgb(255,0,0);
$secondary-color-alpha: rgba(233,233,233,0.8);
//Personnal variables
$header-height: 300;
$menu-height: 50;   
$menu-font-size: 20;

$body-font-family: 'Open Sans', Cambria, 'Times New Roman', Times, sans-serif !default;
$header-font-family: 'Open Sans', Cambria, 'Times New Roman', Times, sans-serif !default;
    

// Global Foundation Settings
@import "settings";

// Comment out this import if you don't want to use normalize
@import "normalize";

// Comment out this import if you are customizing you imports below
@import "foundation";
@import "compass/css3";

// Local import of css3 mixins to avoid buggy gem dependancy (animation)
@import "mixincss3";

// Import specific parts of Foundation by commenting the import "foundation"
// and uncommenting what you want below. You must uncomment the following if customizing

// @import "foundation/components/global"; // *always required
// @import "foundation/components/grid";

//
// Use this grid if you want to start using the new Foundation 5 grid early.
// It will change breakpoints to min-width: 640px and 1024px.
//
// @import "foundation/components/grid-5";
//

// @import "foundation/components/visibility";
// @import "foundation/components/block-grid";
// @import "foundation/components/type";
// @import "foundation/components/buttons";
// @import "foundation/components/forms"; // *requires components/buttons
// @import "foundation/components/custom-forms"; // *requires components/buttons, components/forms
// @import "foundation/components/button-groups"; // *requires components/buttons
// @import "foundation/components/dropdown-buttons"; // *requires components/buttons
// @import "foundation/components/split-buttons"; // *requires components/buttons
// @import "foundation/components/flex-video";
// @import "foundation/components/section";
// @import "foundation/components/top-bar";  // *requires components/grid
// @import "foundation/components/orbit";
// @import "foundation/components/reveal";
// @import "foundation/components/joyride";
// @import "foundation/components/clearing";
// @import "foundation/components/alert-boxes";
// @import "foundation/components/breadcrumbs";
// @import "foundation/components/keystrokes";
// @import "foundation/components/labels";
// @import "foundation/components/inline-lists";
// @import "foundation/components/pagination";
// @import "foundation/components/panels";
// @import "foundation/components/pricing-tables";
// @import "foundation/components/progress-bars";
// @import "foundation/components/side-nav";
// @import "foundation/components/sub-nav";
// @import "foundation/components/switch";
// @import "foundation/components/magellan";
// @import "foundation/components/tables";
// @import "foundation/components/thumbs";
// @import "foundation/components/tooltips";
// @import "foundation/components/dropdown";

//---------------------------------------------------------------------------------
//                          Bugfixes
//---------------------------------------------------------------------------------

body, html { width: 100%; }

.wrapProjects {
	overflow: hidden;
}

form.custom .custom.dropdown.open.medium ul {
    min-width: 100%;
}

.head-anchor {
    position:absolute;
    margin-top: -$menu-height+px;
}

.old {
    display: none;
    
    .punchline {
        margin: 100px auto 0; width: 600px;
    }

    .links {
        margin: 30px auto 0;    
        width: 600px;
    
        .item {
            display: block;
            margin: 0 20px;
            float: left;
        
            &, img, p {
                float: left;
            }

            p {
                width: 80px;
                margin: 40px 10px 0;
            }
            
            img {
                width: 160px;
            }
        }
    }
}

//---------------------------------------------------------------------------------
//                          Stats
//---------------------------------------------------------------------------------

.intro {
    margin-top: $menu-height+px;
    padding: 20px 0;
    
    blockquote {
        margin-top: 30px;
        font-size: 1.3em;
    }

    ul {
        list-style-type: none;
    }

    strong {
        color: red;
    }

    .dc-chart {
        margin-top: 15px;
    
        svg {
            width: 300px !important;
        
            .row {
                rect {
                    @include transform(translate(90px, 0));
                }

                text {
                    @include transform(translate(70px, 0));
                    text-anchor: end;
                }
            }

            .axis {
                display: none;
            }

            .domain {
                fill: white;
            }

            text {
                font-size: 0.75em;
                fill: #333;
            }
        }
    }
}

//---------------------------------------------------------------------------------
//                          Headers
//---------------------------------------------------------------------------------

.header-inline {
    
    &.mobile {
        .logo.first {
            top: 10px;
        }
        
        .logo.second {
           top: 10px;
        }
    }

	.logo.first {
		top: -180px;
	}
    
    .logo.second {
	   top: 10px;
    }
}
    
.header-inline {
	background: $secondary-color;
    height: $header-height+px; width: 100%;
    overflow: hidden; position: relative;
	z-index: 20;
	
    .wrapper {
        position: absolute; z-index: 99;
        left:100%;
		overflow: hidden;
        @include transition(left 0.5s);
        background: $secondary-color;
        width: 100%; height: $header-height+px;
        
        &.actual { left: 0; }

		&>.row {
			position: relative;
			height: $header-height+px;
		}
        
        .text-header  {
            position: absolute;
			bottom: 0px;
			z-index: 50;
			padding-bottom: 20px;
            background: $secondary-color-alpha;
        }
    
        h3 { 
            margin: 0;
        }
        
        .details {
            color: #888;
            
            a {
                font-size: 13px;
            }
        }
        
        .logo {
            position: absolute; 
			margin-left: 10%;
            width: 80%;
        }
    }
    
    .dots {
        position: absolute; z-index: 500;
        bottom: 15px;
        left: 50%;
        
        .dot {
            width: 10px; height: 10px;
            border-radius: 5px;
            margin: 0 5px;
            background: darken($secondary-color, 20);
            float: left;
            
            &.actual, &:hover {
                background: $primary-color;
            }
        }
    }
    
    $arrow-size: 12;    
    .prev, .next {
        
        width: 30px; height: 50px;
        background: $primary-color;
        position:absolute; z-index: 999;
        overflow: hidden;
        cursor: pointer;
        top: (($header-height - 110)/2)+px;
        
        &:before, &:after {
            content: "";
            width: 0; height: 0;
            position: absolute; top: 14px;
            border-top: $arrow-size+px solid transparent;
            border-bottom: $arrow-size+px solid transparent;
        }
    }
    
    .prev {
        left: 0;
        
        &:before {
            left: 6px;
            border-right: $arrow-size+px solid white;
        }
        
        &:after {
            left: 12px;
            border-right: $arrow-size+px solid $primary-color;
        }
    
    }
    .next {
        right: 0;
        
        &:before {
            right: 6px;
            border-left: $arrow-size+px solid white;
        }
        
        &:after {
            right: 12px;
            border-left: $arrow-size+px solid $primary-color;
        }
    }
}


//---------------------------------------------------------------------------------
//                          Footer
//---------------------------------------------------------------------------------

.footer {
    background: $secondary-color;
    height: ($header-height - $menu-height)+px; 
    overflow: hidden; position: relative;
    
    .text-header {
		position: relative;
		padding-top: 2em;
	}
    
    h3 { 
        margin: 0;
        
        .next { font-size: 0.85em; }
        .title { margin: 0; }
    }
    
    .details {
        color: #888;
        font-weight: normal;
    
        a {
            color: #333;
        
            &:hover {
                color: darken($primary-color, 0);
            }
        }
    }
    
    .logo {
        position: relative; 
		width: ($header-height - $menu-height)+px; height: ($header-height - $menu-height)+px;
		bottom: 0px;
	
		img {
			width: 100%;
			height: 100%;
		}
    }
}

//---------------------------------------------------------------------------------
//                          Menu
//---------------------------------------------------------------------------------

.menu {
    height: $menu-height+px; width: 100%;
    background: white;
    position: fixed; top: 0;
    z-index: 999;
    
    .sub-nav {
        font-size: $menu-font-size+px; color: black;
        background: white;
		
		&.mobile {
			.menuLinks {
				height: 0px;
				@include transition(height 0.2s);
				overflow: hidden;
				clear: both;
				
				&.more {
					height: 100px;
			
					dd {
						clear: both;
					}
				}
			}
		}

		&:not(.mobile) .menu-icon{
			display: none;
		}
        
        dd:not(.title) {
            padding: 0px 10px;
            cursor: pointer;
        
            a {
                color: black;
                font-size: 15px;
//                @include transition(all 0.1s);
            }
            
            &.active a, &:hover a {
                @include border-radius(0px);
                font-weight: normal; color: red;
                background: none; border-bottom: red 3px solid;
                padding: 0.1875em 0;
                cursor: default;
            }
        }
    }
    
    .wrapLogoTop {
        position: absolute; top: -10px; right: 20px;
        overflow: hidden; height: 100px;
        @include transition(height 0.2s);
    }
    
    .logoTop {
        width: 45px;
    }
}

.menu-icon {
	display: block;
	float: left;
	width: 16px;
	height: 30px;
	margin-right: 10px;
	
	span { 
		display: block;
		width: 100%;
		height: 0;
		@include box-shadow(0 10px 0 1px $primary-color, 0 16px 0 1px $primary-color, 0 22px 0 1px $primary-color);
	}
}

.title {
    font-family: "source-sans-pro", 'Open Sans', sans-serif;
	font-weight: 600 !important;
    margin: 3px 30px 3px 20px;
    
    
    strong {
	   font-weight: 600 !important;
        color: $primary-color;
    }
}

//---------------------------------------------------------------------------------
//                          Main
//---------------------------------------------------------------------------------

.main {
    background: #fff;
    position: relative;
    margin-top: 0;
    padding: 30px 0;
    
    h2 {
        font-weight: normal;
    }
    
    .topProject {
        position: relative;
        z-index: 50;
    
        &>div { position: relative; }

        .popup {
            position: absolute;
            right: 30px;
            top: -70px;
            background: $primary-color;
            border: solid 1px darken($primary-color, 10);
            color: white;
            padding: 20px 30px;
            width: 200px;
            text-align: center;
            font-size: 0.875em;
    
            .close {
                display: block;
                position: absolute;
                top: 0px;
                right: 0px;
                padding: 6px;
                color: #eee;
                font-weight: bold;
                font-size: 13px;
                
                &:hover {
                    color: #fff;
                }
            }
    
            &:after {
                content: ' ';
                position: absolute;
                right: 9px;
                bottom: -12px;
                width: 0;
                height: 0;
                border-top: 12px solid $primary-color;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
            }
        }
    
        h2, form {
            margin-bottom: 0;
        }
    }

	//---------------------------------------------------------------------------------
	//                          Filters
	//---------------------------------------------------------------------------------
    
    .mainFilters {
        margin-top: 15px;
        
        .button {
            padding: 6px 3px 4px;
            svg {
                width: 19px; height: 19px;
                
                path { fill: #fff; }
            }
        }
    }
    
    .filters {
        &.flat {
            height: 0px;
            margin-bottom: 0px;
        }
        
        margin-bottom: 10px;
        background: #e9e9e9;
        width: 100%; // height: 65px;
        overflow: hidden;
        
        .star {
			.cancel {
				float: right;
				position: relative;
				top: 5px;
			}

            .fitlerStar {
                width: 21px; height: 21px;
                margin-top: 5px;
                background: url("../img/star_off.svg") top left no-repeat;
                background-size: 21px 21px;
                float: left;
                
                &:hover, &.on { background-image: url("../img/star_on.svg"); }
            }
        }
        
        .activeFilter {
            margin: -10px 0.9375em 15px;
            
            .filterLang {
                margin-right: 10px;
                display: inline-block;
                
                .button {
                    margin-bottom: 0px;
                }
            }
        }
    }
    
    .autocomplete {
        width: 100%;
        position: absolute;
        top: 146px;
        z-index: 999;
        
        .wrapperLang {
        
            .items {
                &:first-child { padding-left: 6px; }
                padding-left: 17px;
                
                .item {
                    padding: 10px 20px;
                    display: block;
                    border: {
                        bottom: $secondary-color 1px solid;
                        left: $secondary-color 1px solid;
                        right: $secondary-color 1px solid;
                    }
                    color: #333;
                    
                    background: white;
                    
                    &:hover {
                        color: $primary-color;
                    }
                }
            }
        }
    }

	//---------------------------------------------------------------------------------
	//                          Projects / Org
	//---------------------------------------------------------------------------------

	.wrapProjects {
		padding-bottom: 50px;
		position: relative;
        z-index: 30;
	}

    .listItem { float: left !important; }
        
    .project, .org {
        font-size: 14px;
        border-left: 3px $secondary-color solid;
        @include transition(border-left 0.2s);
        padding-left: 20px;
        color: black;
        
        margin: 10px 0; 
        
        &:hover {
            border-left: 3px $primary-color solid;
        }
        
        h1 {
            font-size: 17px;
            margin-bottom: 3px;
        }
        
        p { margin-bottom: 5px; }
        
        .details {
//            height: 45px;
            padding-left: 10px;
            color: #666;
        }
    
        .star img { width: 20px; }
        
        .watchCount {
            padding: 5px 10px;
            float: right;
            color: #666;
        }
        
        .more {
            margin-bottom: 25px;
    
            .link {
                text-align:right;
                color: $primary-color;
                
                &:hover { color: darken($primary-color, 5%); }
            }
        }
    }
    
//    .project { height: 140px; }
//    .org { height: 100px; }

	.buttonMore, .buttonLess {
		width: 100%;
		height: 100px;
		overflow: hidden;
	}
    
    .buttonLess {
		position: fixed;
		bottom: 0px;
		left: 0;
    }
	
	.buttonMore {
		bottom: -50px;
		position: absolute;
	}

    .ng-hide {
        display: none;
    }
    
    .clear {
        clear: both;
    }
}

/* For reseting magellan on top :) */
.featured {
    position: absolute; top: 0;
    margin-top: - ($header-height -$menu-height)+px; display: block;
}


//---------------------------------------------------------------------------------
//                          Loading
//---------------------------------------------------------------------------------

.loading{
    width:100px;
    height:50px;
    margin:20px auto;
    
	.bars {
        div {
            height:40px;
            width:3px;
            background: $primary-color;
            display:inline-block;
            @include animation(loader, 1.3s, infinite);
            
            @for $i from 1 through 10 {
                &:nth-child(#{$i}) {
                    @include animation-delay(($i*0.1)+s);
                }
            }
        }
    }

    .text {
        color: $primary-color;
        text-transform: uppercase;
        font-weight:bold;
        margin-top: 5px;
        position: relative;
        right: 5px;
    }
}
    
@include keyframes(loader) {
    50% { height:3px; margin-top:37px; opacity:.1; }
}