/****************************************
      GENERAL
*****************************************/

/* Nice google font*/
body {
    /*font-family: 'sans serif';*/
    /*font-size: 22px;*/
    font-family: Roboto;
    /*font-family: Heebo;*/
    /*font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; */
}

/*
h1 { font-family: "Century Gothic"; font-size: 23px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 23px; } 
h3 { font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 23px; } 
p { font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 23px; } 
blockquote { font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 23px; } 
pre { font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 23px; }
*/

/* Center all animations*/
video {        
    justify-content: center;
}

/* Middle big title div style*/      
.big-title-middle-div {
    text-align: left;
    position: absolute;
    top: 40%;
    left: 50px; /* David */
    animation-name: middlemove;
    animation-duration:  1s;
    animation-iteration-count: 1;
    animation-delay: 2;
}
@keyframes middlemove {
    from {top: 60%;}
    to {top:40%;}
  }

/* Top big title div style*/      
.big-title-top-div {
    text-align: left;
    position: relative;
    top: 0px;
    left: 50px;
    padding-bottom: 0px;
    animation-name: topmove;
    animation-duration:  1s;
    animation-iteration-count: 1;
    animation-delay: 2;
}
@keyframes topmove {
    from {top: 40%;}
    to {top:0px;}
}

/* Top big title div style used for project first sections like SALTA*/      
.big-title-top-first-section-div {
    text-align: left;
    position: relative;
    top: 0px;
    left: 50px;
    animation-name: topmove-first-section;
    animation-duration:  1s;
    animation-iteration-count: 1;
    animation-delay: 2;
}
@keyframes topmove-first-section {
    from {top: 40%;}
    to {top: 0px;}
}

/* Big title first line and body*/
.uandlab-big-title-font-first-line {
    color: #c6c4bd; /* Andre */
    font-size: 57px;    /* Andre */
    line-height: 60px;  /* Andre */
    font-weight: 800;   /* Andre */
}
.salta-big-title-font-first-line {
    color: #c6c4bd; /* Andre */
    font-size: 57px;    /* Andre */
    line-height: 60px;  /* Andre */
    font-weight: 800;   /* Andre */
}
.uandlab-big-title-font-body {
    color: #6e6e6e; /* Andre */
    font-weight: 800;  /* Andre */
    font-size: 57px;    /* Andre */
    line-height: 60px;  /* Andre */
}
.salta-big-title-font-body {
    color: #888888; /* Andre */
    font-weight: 800;  /* Andre */
    font-size: 57px;    /* Andre */
    line-height: 60px;  /* Andre */
}

/* Learn more buttons */
.learn-more, .learn-more-uandlab, .contact-us {
    font-size: 16px;    /* Andre */
    /*width: 200px;    Andre */
    min-width: 200px;    /* Andre */
    height: 57px;   /* Andre */
    font-weight: bolder;
    margin-top: 4px;
    margin-bottom: 3px;
    margin-left: 2px;
    margin-right: 2px;
}
.learn-more, .contact-us {
    color: #b8b6af; /* Andre */
}
.learn-more-uandlab {
    color: #6e6e6e; /* Andre */
}

/* Nav bar customization */
/* change font of the links */
#uberbar.navbar-custom .navbar-nav .nav-link {
    font-size: smaller;
    padding-right: 50px;
    padding-top: 50px;
    padding-bottom: 0px;
}
#uberbar.navbar-custom .navbar-brand {
    padding-left: 50px;
    padding-right: 50px;
}
#uberbar.navbar-custom .navbar-nav .dropdown-item {
    font-size: smaller;
}
/* Navbar footer customization */
#bottombar.navbar-custom .navbar-nav .nav-link {
    font-size: smaller;
    padding-right: 50px;
}
#bottombar.navbar-custom .navbar-brand {
    font-size: smaller;
    font-weight: 500;
    color: lightslategray;
}
    
/****************************************
      HOME PAGE MENU
*****************************************/
/* Home content*/
#home-content-page-uandlab {
    background-image: url("../resources/home/HOME_U_text_2000x1300.jpg");
    background-color: #cccccc;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    /* On poor resolutions 1024x728...: 700px */
    /* For 1600x900 and 1440x900: 800px */
    /* For 1920x... : 1000px */
    height: 1000px;
   }

.acronym {
    /*color: #c6c4bd;*/
}

#home-salta-anim {
    padding-left: 240px;
    padding-right: 50px;
    width: initial;
    height: initial;  
}

/****************************************
      UCONCEPT PAGE MENU
*****************************************/

.uandlab-content-page {
    background-color: #ebebeb;
    position: absolute;     
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 60px;
    padding-bottom: 200px;}

/* U&Lab text content */
.uandlab-text {
    color: #6d6d6d;    
    align-content: center;
    justify-content: center;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5px;
    padding-bottom: 25px;
}

#goal-div-carousel {
    background-color: #ebebeb;
    position: relative;
    justify-content: center;
    margin-top: 50px;
    margin-left: 25px;
    margin-right: 25px;

}

.goal-carousel-img {
    width: 100%;
    height: 100%;
    padding-left: 10%;
    padding-right: 10%;
}


.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 25px;
  width: 25px;
  outline: black;
  background-size: 100%, 100%;
  /*border-radius: 50%;*/
  /*border: 1px solid black;*/
  background-image: none;
}


.carousel-control-next-icon:after
{
  content: '>';
  font-size: 25px;
  color: black;
  font-weight: 900;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 25px;
  color: black;
  font-weight: 900;
}


/****************************************
    SALTA PROJECT PAGE MENU
****************************************/
.salta-content-page {
    background-color:#4D4D4D;
    position: relative;     
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 60px;
    padding-bottom: 200px;
    margin-bottom: -50px;
}

.salta-section hr {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 50px;
    margin-right: 50px;
    border-top: 1px solid #b8b6af;
}

/* Used onyl at first section */
.salta-text-first-section {
    color: #b8b6af;    
    align-content: center;
    justify-content: center;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5px;
}

/* SALTA text content for all sections except the first one*/
.salta-text {
    color: #b8b6af;    
    text-align: left;
    padding-top: 30px;
    padding-bottom: 30px;
    min-width: 500px;
    margin-left: 20%;
    margin-right: 20%;
} 

/* SALTA UC model container */
iframe {
    margin-top: 25px;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 50px;
    border:none;
    width: 90%;    
}
#e-learning {
    background-color: #ebebeb;
    color: #4D4D4D;   
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 25px;
    margin-bottom: 25px;
    min-width: 400px;
    height: 100px;
    padding-top: 15px;
    padding-bottom: 15px;
}
.e-learning-icon {
    margin-right: 25px;
}

/****************************************
      RESPONSIVE STUFF
*****************************************/

@media screen and (max-width: 1600px) {
    #home-content-page-uandlab {
        height: 800px;
    }
}

@media screen and (max-width: 1200px) {
    #home-content-page-uandlab {
        background-image: url("../resources/home/HOME_U_2000x1300.jpg");  
    }   

    /* SALTA text content for all sections except the first one*/
    .salta-text {
        margin-left: 25%;
        margin-right: 25%;
    }    
}

@media screen and (max-width: 728px) {
    #home-content-page-uandlab {
        height: 700px;
    }
    #home-salta-anim {
        padding: 1%;
    }

    uandlab-text {
        padding: 5%;
    }

    salta-text-first-section, .uandlab-text {
        padding-top: 50px;
    }

    /* SALTA text content for all sections except the first one*/
    .salta-text {
        margin-left: 15%;
        margin-right: 15%;
    }    


}

@media screen and (max-width: 600px) {

    body {
        font-family: 'Heebo';
    }

    #home-salta-anim {
        padding: 1%;
    }

    .saltanim-row {
        padding-top: 0px;
        padding-bottom: 25px;
    }

    .uandlab-text {
        padding-left: 30px;
        padding-right: 30px; 
        text-align: justify;   
        font-size: smaller;
        padding-top: 25px;
    }

    .salta-text {
        padding-top: 15px;
        padding-bottom: 15px;    
        padding-left: 0px;
        padding-right: 0px;    
        text-align: justify;
        font-size: smaller;
        min-width: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .salta-text-first-section {
        padding-left: 15px;
        padding-right: 15px;    
        text-align: justify;
        font-size: smaller;
        padding-top: 25px;
    }    

    /* Nav bar customization */
    /* change font of the links */
    #uberbar.navbar-custom .navbar-nav .nav-link {        
        padding-right: initial;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    #uberbar.navbar-custom .navbar-brand {
        padding-left: initial;
        padding-right: initial;
        padding-bottom: 10px;
    }    

    /* Reducing font size and line height for all big titles */
    .uandlab-big-title-font-first-line, .uandlab-big-title-font-body, .salta-big-title-font-first-line, .salta-big-title-font-body {
        font-size: 40px; 
        line-height: 40px;
    }

    /* Changing big title place for the beautyfull child image in the home page */
    #home-content-page-uandlab .big-title-middle-div {
        top: 60%;
        left: 15px; /* David */
        animation-name: middlemove;
        animation-duration:  1s;
        animation-iteration-count: 1;
        animation-delay: 2;
    }
    @keyframes middlemove {
        from {top: 80%;}
        to {top:60%;}
    }
    #home-content-page-uandlab {
        background-position: -600px;    
    }

    /* Changing all big title which are on top of sections but not at first */    
    .big-title-top-div {
        text-align: left;
        position: relative;
        top: 25px;
        left: 15px;
        padding-bottom: 50px;
        animation-name: topmove;
        animation-duration:  1s;
        animation-iteration-count: 1;
        animation-delay: 2;
    }
    @keyframes topmove {
        from {top: 40%;}
        to {top:25px;}
    }

    /* Treating salta page content in home page */
    #home-content-page-salta .big-title-top-first-section-div {
        left: 15px;
    }
    #home-content-page-salta.salta-content-page {
        padding-top: 15px;
    }

    /* Treating any other big title which is after a pixar first title */
    .big-title-top-first-section-div { 
        left: 15px;
    }
       
    /* Reduce picto size to 50% */
    .salta-picto {    
        width: 227px;
        height: 167px;
    }    

    /* Reducing salta one, hub and max picto */

    /* reducing margin */
    .salta-section hr {
        max-width: 100%;
        margin-top: 100px;
        margin-bottom: 0px;
        margin-left: 15px;
        margin-right: 15px;
    }

    /* Reducing margins for model exploration */
    iframe {
        margin-top: 0px;
        margin-left: 2%;
        margin-right: 2%;
        margin-bottom: 25px;
        border:none;
        width: 96%; 
    }
    #e-learning {
        display: none;
    }

    /* UCONCEPT PAGE */
    #goal-div-carousel {
        justify-content: space-evenly;
        margin-top: 25px;    
        margin-left: 0px;
        margin-right: 0px;    
    }    
    .goal-carousel-img {
        width: 100%;
        height: 100%;
        padding-left: 5%;
        padding-right: 5%;
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      height: 15px;
      width: 15px;
    }
    .carousel-control-next-icon:after
    {
      font-size: 15px;
    }
    .carousel-control-prev-icon:after {
      font-size: 15px;
      margin-right: 10px;
    }

    .uandlab-content-page .img-fluid {
        padding-right: 25px;
    }

    .contact-us {
        display: none;
    }
    
}