/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* Colors */





/* Typography */






/* ==========================================================================
   Section 1 - Video
   ========================================================================== */

#headDiv {
    height:auto;
    margin-bottom:-7px;
    background: #EFF0F2;
}

#headVideo {
    display:inline-block;
}

#headImg, #btn-play {
    display:none;
}

#headText {
    position:absolute;
    top:15%;
    width:100%;
    height: auto;
    text-align:center;
    color:#fff;
    z-index:20;
}

#headText h1 {
    font-family:'Roboto',serif;
    font-weight:300;
    font-size:3rem;
    word-spacing:10px;
}

#trait, #chevron {
    display:block;
    margin:0 auto;
    padding-top:30px;
}

#headText h4 {
    padding-top:10px;
}

#finalWrapper, #finalWrapper1, #finalWrapper2, #finalWrapper3, #finalWrapper4 {
    text-align:center;
}

.wrapperVideo {
    display: none;
    z-index: 3000; /* 99 */
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8) none repeat scroll 0% 0%;
}

.wrapperVideo.active {
    display: block;
}

.videoWrapper {
    position: relative;
    z-index: 3000;
    /*width: 80%;
    height:45%;*/
    top: 50%;
    left: 50%;
    margin-top: -22%;
    margin-left: -40%;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.45);
    /*padding-bottom: 56.25%; /* 16:9 */
    /*padding-top: 25px;
    height: auto !important;*/
}

.videoWrapper iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100% !important;
    height: 100% !important;
}

#closeVideo {
    height: 31px;
    width: 31px;
    z-index: 3000; /* 99 */
    position: absolute;
    top: -15px;
    right: -15px;
    background: #7B796A url("//cdn2.hubspot.net/hub/53/file-394905785-png/assets/hubspot.com/jobs/fancybox_sprite.png") no-repeat scroll 0px 0px;
    border-radius: 50%;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
}

#PlayVideoHeader {
    margin-top: 20px;
    display:inline-block;
    color: #fff;
    font-family:'Roboto',serif;
    font-weight:300;
    font-size:17px;
    text-decoration:none;
    text-transform:uppercase;
    border: 1px #fff solid;
    background:rgba(255,255,255,0.2);
    padding: 14px 30px 14px 30px;
    opacity:1;
    transition: 0.5s ease;
    cursor:pointer;
}

#PlayVideoHeader:hover {
    background:#071D49;
    border:1px solid #071D49;
}


/* ==========================================================================
   Section 2 - App
   ========================================================================== */
   
.app {
    background:#071D49;
}

.app .container {
    max-width:700px !important;
    padding:20px 0px;
}

.app a {
    text-decoration:none;
}

.app a:hover .apple, a:hover .android, a:hover .windows {
    background:rgba(255,255,255,0.3);
    transition:0.3s ease;
}

/* Work around > Fix div */

div.apple, div.android, div.windows {
    font-size:16px;
}

.app .apple, .app .android, .app .windows {
    border:1px solid #fff;
    max-width:100% !important;
    padding:10px;
}

.app .apple .logo-app, .app .android .logo-app, .app .windows .logo-app {
    display:inline-block !important;
    text-align:center;
    vertical-align:top;
    width:38%;
    padding-top:9px;
}

.app .apple .logo-app img, .app .android .logo-app img, .app .windows .logo-app img {
    max-width:32px !important;
}

.app .apple .dl, .app .android .dl, .app .windows .dl {
    display:inline-block !important;  
    width:60%;
}

.app .apple .dl p, .app .android .dl p, .app .windows .dl p {
    padding:0px;
    margin:0px;
    color:#fff;
    font-size:14px;
    font-weight:200;
}

.app .apple .dl span, .app .android .dl span, .app .windows .dl span {
    font-weight:500;
}

/* ==========================================================================
   Section 2B - Feature Announcement
   ========================================================================== */

.banner-announcement {
    max-height: 21rem;
    background: url(https://www.finalcad.com/hubfs/images/background-ferraillage.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.announcement-main-container {
    display: inline-block;
}
.announcement-video {
    padding-bottom: 1.7rem;
}
.banner-tablet_img {
    width: 67%;
    float: right;
    padding-right: 2rem;
}
.announcement-text-container {
    color:#FFFFFF;
}
.announcement-title {
    font-weight: 500;
}
.announcement-desc {
    font-size: 1.1rem;
    font-weight: 400;
}
.corner-ribbon{
    position: absolute;
    line-height: 45px;
    text-align: center;
    width: 220px;
    height: 45px;
    color: #f0f0f0;
    background-color: #FFC72C;
    top: 0%;
    right: 0%;
    transform: rotate(45deg) translate(28%,-50%);
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .2rem;
}
.corner-ribbon-fr {
    font-size: 1rem;
}

.fancybox-error,.mobile {
    display: none !important;
}

/* ==========================================================================
   Section 3 - Presentation
   ========================================================================== */
   
.pres-first-text {
    max-width:750px;
}

.pres-first-text h1, .pres-second-text h1, .pres-third-text h1 {
    font-size:36px;
    text-transform:uppercase;
    margin-bottom: 20px;
    line-height: 45px;
}

.pres-first-text span, .pres-second-text span, .pres-third-text span {
    font-size:18px;   
    font-weight:300;
    word-spacing:3px;
    line-height:30px !important;
}

.pres-second-text {
    max-width:750px;
    float:right !important;   
}

.pres-img-responsive {
    display:none;
}

.pres-second-text-responsive {
    display:none !important;
}

.pres-img-right {
    float:right !important;
    text-align:right;
}

.span6.widget-span.widget-type-linked_image.pres-img-right {
    margin-left:0px;
}

.pres-third-text {
    max-width:750px;
}

.pres-left, .pres-right {
    padding-left:3%;
    padding-right:3%;
    margin-left:0px !important;
    margin-right:0px !important;
}

a.savoirplus {
    text-decoration: none;
    color: #071d49;
}

/* ==========================================================================
   Section 5 - SECOND PRES
   ========================================================================== */

.second-pres .container {
    max-width:900px !important;
    padding:40px 20px 60px 20px;
}

.second-pres h1 {
    text-transform:uppercase;
    font-weight:100;
    font-size:40px;
    text-align:center;
    margin:0;
    padding-bottom:10px;
}

.second-pres h4 {
    color:#FFC72C;
    text-align:center;
    font-weight:600;
    font-size:20px;
    text-align:center;
    width:75%;
    margin:0 auto;
}

.second-pres p {
    text-align:justify;
    padding-bottom:40px;
    font-weight:300;
}

.second-pres .ensavoirplus {
    text-align:center;
}

.second-pres .ensavoirplus a {
    border:1px solid #071D49;
    padding:15px 20px 15px 20px;
    color:#071D49;
    text-decoration:none;
    text-transform:uppercase;
    font-size:18px;
    transition:0.3s ease;
}

.second-pres .ensavoirplus a:hover {
    background:#071D49;
    color:#fff;
}

.contract {
    padding-bottom: 0 !important;
}

/* ==========================================================================
   Section 5 - App
   ========================================================================== */
   
.tester {
    background:#fff;
}

.tester .container {
    max-width:100% !important;
}

.tester .test-block {
    padding-top:20px;
    padding-bottom:50px;
    width:100% !important;
    margin:0 auto;
    text-align:center;
}

.tester .cta-test {
    margin:0 auto;
    text-align:center;
}


/* ==========================================================================
   Section 6 - Image
   ========================================================================== */

.section-img .container {
    max-width:96% !important;    
    margin:0 auto;
}

.new-gallery {
    text-align:center;
    margin-bottom: 50px;
}

/* FIRST BLOCK */

.new-gallery .first-block {
    width:21%;
    display:inline-block;
    vertical-align:top;
}

.new-gallery .first-block .petite-img  {
    margin:5px;
    height:209px;
}

.new-gallery .first-block .petite-img.eiffage-caen {
    background:url('//www.finalcad.com/hubfs/images/FinalCad_Jan2016_Theme/Eiffage_Caen.png');
    background-size:cover;
}

.new-gallery .first-block .petite-img.second-img {
    background:url('//www.finalcad.com/hubfs/images/FinalCad_Jan2016_Theme/Fayolle.png');
    background-size:cover;
}


.new-gallery .first-block .petite-img a {
   text-decoration:none;
}

.new-gallery .first-block .petite-img .play1, .new-gallery .first-block .petite-img .play2 {
    opacity:0;
    height:209px;
    padding-top:50px;
    background:rgba(7, 29, 73, 0.5);
    transition:0.3s ease;
}

.new-gallery .first-block .petite-img .play1 p, .new-gallery .first-block .petite-img .play2 p {
    text-decoration:none;
    color:#fff;
    font-size:17px;
    font-weight:600;
}

.new-gallery .first-block .petite-img:hover .play1, .new-gallery .first-block .petite-img:hover .play2 {
    opacity:1;
}

.new-gallery .first-block .petite-img .play1 img, .new-gallery .first-block .petite-img .play2 img {
    width:75px;
}

/* SECOND BLOCK */

.new-gallery .second-block {
    width:35.25%;
    display:inline-block;
    vertical-align:top;
}

.new-gallery .second-block .grande-img  {
    margin:5px;
    height:423px;
}

.new-gallery .second-block .grande-img.cbc {
    background:url('//www.finalcad.com/hubfs/images/FinalCad_Jan2016_Theme/CBC-010610-edited.png');
    background-size:cover;
}

.new-gallery .second-block .grande-img.changi {
    background:url('//www.finalcad.com/hubfs/images/FINALCAD-changi-general-hospital-singapore.png');
    background-size:cover;
}

.new-gallery .second-block .grande-img.brickell {
    background:url('//www.finalcad.com/hubfs/images/FinalCad_Jan2016_Theme/brickell-city-centre-americaribe.jpg');
    background-size:cover;
}

.new-gallery .second-block .grande-img a {
   text-decoration:none;
}

.new-gallery .second-block .grande-img .play {
    opacity:0;
    height:423px;
    padding-top:150px;
    background:rgba(7, 29, 73, 0.5);
    transition:0.3s ease;
}

.new-gallery .second-block .grande-img .play p {
    text-decoration:none;
    color:#fff;
    font-size:17px;
    font-weight:600;
}

.new-gallery .second-block .grande-img:hover .play {
    opacity:1;
}

.new-gallery .second-block .grande-img .play img {
    width:75px;
}

/* SECOND BLOCK MOBILE */

.new-gallery .second-block-mobile {
    width:100%;
    display:inline-block;
    vertical-align:top;
}

.new-gallery .second-block-mobile .grande-img  {
    margin:5px;
    height:180px;
}

.new-gallery .second-block-mobile .grande-img.third-img {
    background:url('//www.finalcad.com/hubfs/images/FinalCad_Jan2016_Theme/Eiffage_Caen.png');
    background-size:cover;
}

.new-gallery .second-block-mobile .grande-img.changi {
    background:url('//www.finalcad.com/hubfs/images/FinalCad_Jan2016_Theme/FINALCAD-changi-general-hospital-singapore-mobile.png');
    background-size:cover;
}

.new-gallery .second-block-mobile .grande-img.brickell {
    background:url('//www.finalcad.com/hubfs/images/FinalCad_Jan2016_Theme/brickell-city-centre-americaribe-mobile.jpg');
    background-size:cover;
}

.new-gallery .second-block-mobile .grande-img a {
   text-decoration:none;
}

.new-gallery .second-block-mobile .grande-img .play {
    opacity:0;
    height:423px;
    padding-top:150px;
    background:rgba(7, 29, 73, 0.5);
    transition:0.3s ease;
}

.new-gallery .second-block-mobile .grande-img .play p {
    text-decoration:none;
    color:#fff;
    font-size:17px;
    font-weight:600;
}

.new-gallery .second-block-mobile .grande-img:hover .play {
    opacity:0;
}

.new-gallery .second-block-mobile .grande-img .play img {
    width:75px;
}

/* THIRD BLOCK */

.new-gallery .third-block {
    width:21%;
    display:inline-block;
    vertical-align:top;
}

.new-gallery .third-block .petite-img  {
    margin:5px;
    height:209px;
}

.new-gallery .third-block .petite-img.fourth-img {
    background:url('//www.finalcad.com/hubfs/images/FinalCad_Jan2016_Theme/Havre.png');
    background-size:cover;
}

.new-gallery .third-block .petite-img.fifth-img {
    background:url('//www.finalcad.com/hubfs/images/FinalCad_Jan2016_Theme/Leon_Grosse_Reha.png');
    background-size:cover;
}

.new-gallery .third-block .petite-img a {
   text-decoration:none;
}

.new-gallery .third-block .petite-img .play, .new-gallery .third-block .petite-img .play3 {
    opacity:0;
    height:209px;
    padding-top:50px;
    background:rgba(7, 29, 73, 0.5);
    transition:0.3s ease;
}

.new-gallery .third-block .petite-img .play p, .new-gallery .third-block .petite-img .play3 p {
    text-decoration:none;
    color:#fff;
    font-size:17px;
    font-weight:600;
}

.new-gallery .third-block .petite-img:hover .play, .new-gallery .third-block .petite-img:hover .play3 {
    opacity:1;
}

.new-gallery .third-block .petite-img .play img, .new-gallery .third-block .petite-img .play3 img {
    width:75px;
}

/* FOURTH BLOCK */

.new-gallery .fourth-block {
    width:21%;
    display:inline-block;
    vertical-align:top;
}

.new-gallery .fourth-block .petite-img  {
    margin:5px;
    height:209px;
}

.new-gallery .fourth-block .petite-img.sixth-img {
    background:url('//www.finalcad.com/hubfs/images/FinalCad_Jan2016_Theme/Leon_Grosse_GO.png');
    background-size:cover;
}

.new-gallery .fourth-block .petite-img.seventh-img {
    background:url('//www.finalcad.com/hubfs/images/FinalCad_Jan2016_Theme/Rouen.png');
    background-size:cover;
}

.new-gallery .fourth-block .petite-img a {
   text-decoration:none;
}

.new-gallery .fourth-block .petite-img .play, .new-gallery .fourth-block .petite-img .play4 {
    opacity:0;
    height:209px;
    padding-top:50px;
    background:rgba(7, 29, 73, 0.5);
    transition:0.3s ease;
}

.new-gallery .fourth-block .petite-img .play p, .new-gallery .fourth-block .petite-img .play4 p {
    text-decoration:none;
    color:#fff;
    font-size:17px;
    font-weight:600;
}

.new-gallery .fourth-block .petite-img:hover .play, .new-gallery .fourth-block .petite-img:hover .play4 {
    opacity:1;
}

.new-gallery .fourth-block .petite-img .play img, .new-gallery .fourth-block .petite-img .play4 img {
    width:75px;
}

/* ==========================================================================
   Section 7 - Blog
   ========================================================================== */
   
.articles {
    padding:40px 0px 20px 0px;
    background:url('//cdn2.hubspot.net/hubfs/322787/FinalCad/Image/icones/graduation2.jpg');
    background-repeat:no-repeat;
    background-position: 50% 83px;
}
   
.articles .container {
    max-width:1100px !important;
}

.articles .post-block {
    display:inline-block;
    max-width:270px !important;
    padding:20px 20px;
    vertical-align:top;
}

.articles .post-date {
    width:160px;
    padding:10px 0px;
    font-weight:500;
    font-size:14px;
}

.articles .post-date .post-date-background {
    background:#FFC72C;
    padding:10px;
}

.articles .post-title {
    padding:20px 0px 0px 0px;
    /*height:110px;*/
    font-size:18px;
    font-weight:300;
    text-transform:uppercase;
}

.articles .post-content p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font-size:14px;
}

.articles .post-content p strong {
    font-weight:300;
}

.articles .articles-cta {
    padding:10px 0px 30px 0px;
}

.articles .articles-button {
    margin:0 auto;
    max-width:300px;
    padding:10px 20px;
}

.articles .articles-button a {
    border:1px solid #071D49;
    color:#071D49;
    text-transform:uppercase;
    font-size:18px;
    font-weight:300;
    text-decoration:none;
    padding:10px 20px;
    transition:0.5s ease;
}

.articles .articles-button a:hover {
    color:#fff;
    background:#071D49;
}

.post-content a {
    text-decoration: none;
    color: #071D49;
    font-weight: 500;
}


/* ==========================================================================
   Section 8 - Stats
   ========================================================================== */

.stats {
    padding-bottom:40px;
}

.stats .container {
    max-width:1000px !important;
    margin:0 auto;
   
}

.stats .stats-list ul {
    list-decoration:none;
    padding:0;
}

.stats .stats-list ul li {
    display:inline-block;
    width:33%;
}

.stats .stats-list ul li div {
    margin:0 auto;
}

/* ==========================================================================
   Section 9 - Testimonial
   ========================================================================== */
   
.testimonials {
    background:url('https://www.finalcad.com/hubfs/images/FinalCad_Jan2016_Theme/chantier-testi.jpg');
    background-position:30% 50%;
    background-size:cover;
    overflow-x: hidden;
}

.testimonials .container {
    max-width:1000px !important;
    margin:0 auto;
    padding-top:80px;
    padding-bottom:80px;
}

.testimonials .guillemet {
    text-align:center;
}

.testimonials .slick-prev {
    left:-63px;
}

.testimonials .slick-prev:before, .testimonials .slick-next:before {
    border:1px solid #fff;
    padding-left:22px;
    padding-right:20px;
    padding-bottom:15px;
}

.testimonials .slick-slide p {
    color:#fff;
    padding-top:40px;
    padding-right:100px;
    padding-left:100px;
    text-align:center;
    font-size:30px;
    font-weight:100;
    line-height:35px;
}

.testimonials .nom {
    display:block;
    color:#fff;
    font-weight:600;
    font-size:17px;
    text-align:center;
}

.testimonials .metier {
    display:block;
    color:#fff;
    text-align:center;
    font-weight:300;
    font-size:17px;
    font-style:italic;
}

.testimonials .slick-prev:before, .testimonials .slick-next:before { 
    font-family: "slick"; 
    font-size: 40px; 
    line-height: 1; 
    color: #FFC72C; 
    opacity: 0.75; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}   

.testimonials .slick-prev:before { 
    content: "‹"; 
}

[dir="rtl"] .testimonials .slick-prev:before { 
    content: "›"; 
}

[dir="rtl"] .testimonials .slick-next { 
    left: -10px; 
    top: 70px; 
    right: auto; 
}

.testimonials .slick-next:before { 
    content: "›"; 
}

[dir="rtl"] .testimonials .slick-next:before { 
    content: "‹"; 
}

/* ===========================================================================
    Coordonnees
   ========================================================================== */
   
.coordonnees {
    background: url('//cdn2.hubspot.net/hubfs/322787/FinalCad/Image/pricing-contact.jpg?t=1457104097052');
    background-position: 50% 50%;
    background-size: cover;
}

/* ==========================================================================
   MEDIA
   ========================================================================== */

@media(max-width:1641px){
        
    #trait {
        display:none;
    }
    
}


@media(max-width:1280px){
    
    .line-conduc {
        padding-top:1px;
    }
    
}

@media (max-width: 1400px) and (min-width: 1200px) {
    
    #headText {
        margin-top: 0%;
    }

}

@media (max-width: 1200px) and (min-width: 1015px) {
    
    #headText {
        margin-top: 0%;
    }

}

@media (max-width: 1280px) and (min-width: 1016px) {
    
    #headText h1 {
        font-size: 35px;
    }
    
    #headText {
        top: 11%;
        margin-top: 0%;
    }
    
    .pres-first-text h1, .pres-second-text h1, .pres-third-text h1 {
        font-size: 20px; /*35*/
        margin-bottom: 10px;
        margin-top: 0px;
    }
    
    .pres-first-text span, .pres-second-text span, .pres-third-text span {
        font-size: 14px; /*16*/
        line-height: 20px !important;
    }
    
}

@media (max-width: 1015px) and (min-width: 768px) {
    
    h3#playVideoHeader {
        margin-top: 0px;
    }
    
    #headText h4 {
        padding-top: 0px;
    }
    
    #headText {
        margin-top: 0%;
    }

}

@media(max-width:1015px){
    
    #headText h1 {
        font-size:1rem;
        padding-top: 32px;
    }
    
    #headDiv {
        margin-top:-25px;
    }
    
    #headVideo, #PlayVideoHeader, #trait, .pres-left, .span6.widget-span.widget-type-cell.pres-left  {
        display:none;
    }
    
    #headImg {
        display:block;
        height:90vh;
        background:url('https://www.finalcad.com/hubfs/videos/OuvrierBleu.jpg');
        background-size:cover;
        background-position:50%;
    }
    
    #btn-play {
        display:block;
        margin:0 auto;
        width:90px;
        padding-top:30px;
    }
    
    #chevron {
        padding-top:0px;
    }
    
    #application {
        margin-top:0px;
    }
    
    #headText {
        top:2rem !important;
    }
    
    #headText h1 {
        word-spacing:0px;
    }
    
    .app .apple, .app .android, .app .windows  {
        max-width:230px !important;
        margin:0 auto;
        margin-bottom:10px;
    }
    
    .pres-first-text h1 {
        font-size:25px;
        line-height:45px !important;
    }
    
    .pres-first-text span, .pres-second-text-responsive span, .pres-third-text span {
        font-size:14px;
        line-height:20px !important;
    }
    
    .pres-img-responsive {
        display:block;
    }
    
    .pres-second-text-responsive {
        display:block !important;
        padding: 0 20px 20px 20px;
        max-width:750px;
        padding-left:3%;
        float:left !important;
    }
    
    .pres-second-text-responsive h1 {
        font-size:25px;
        line-height:45px !important;
        text-transform:uppercase;
    }
    
    .pres-third-text h1 {
        font-size:25px;
        line-height:45px !important;
    }
    
    .pres-first-text {
        padding-bottom: 20px;
    }
    
    .tester .cta-test {
        width:279px;
    }
    
    .tester .cta-test a {
        font-size:14px;
    }
    
    .section-img .container {
        max-width:100% !important;
    }
    
    .new-gallery .first-block .petite-img, .new-gallery .second-block .grande-img  {
        margin:0px 0px 10px 0px;
    }
    
    .new-gallery .first-block, .new-gallery .second-block  {
        width:100%;    
    }
    
    .new-gallery .second-block .grande-img.third-img {
        height:209px;
    }
    
    .new-gallery .third-block, .new-gallery .fourth-block {
        display:none;
    }
    
    .new-gallery .first-block .petite-img .play {
        opacity:1;
    }
    
    .new-gallery .second-block .grande-img .play {
        opacity:1;
        height:423px;
        padding-top:120px;
    }
    
    .new-gallery .first-block .petite-img .play1, .new-gallery .first-block .petite-img .play2 {
        opacity: 1;
    }
    
    .stats .stats-list ul li {
        display:block;
        width:auto;
    }
    
    .testimonials .slick-slide p {
        padding:0 20px;
        font-size:18px;
    }
    
    .testimonials .slick-prev, .testimonials .slick-next {
        display:none !important;
    }
    
    .testimonials .slick-prev {
        left:0;
    }
    
    .testimonials .slick-next {
        right:0;
    }
    
    .pres-second-text h1 {
        font-size: 25px;
    }
    
    .articles .articles-button a {
        font-size: 16px;
    }
    
    ul.active-branch li {
        width: 33%;
    }
    
/* Banner Home Announcement */
    
    .mobile {
        display: block !important;
    }
    .desktop {
        display: none !important;
    }
    .banner-tablet_img {
        float: none;
        margin-right: 0;
        margin-left:15%;
        padding-right: 0 !important;
    }
    .banner-announcement {
        max-height: 60em;
    }
    .announcement-title {
        padding: 4rem;
    }
    .announcement-desc {
        padding-left: 2rem;
    }
    .corner-ribbon {
        transform: rotate(-45deg) translate(-36%,-50%);
        left: 0 !important;
    }
    .corner-ribbon-fr {
        padding-left: 1.7rem;
    }
    .announcement-desc {
        font-size: 1.1rem;
        font-weight: 400;
    }
    
}

/* 
    fix iOS bug not displaying 100vh correctly 
*/

/* Ipad Pro - Landscape-breakpoint */
@media only screen and (min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1366px) and (max-width: 1366px) {
    .fullheight {
		height: 1024px;
	}
}

/* Ipad Pro - Portrait-breakpoint */
@media only screen and (min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1024px) and (max-width: 1024px) {
	.fullheight {
		height: 1366px;
	}
}

/* iPad - Landscape-breakpoint */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.fullheight {
		height: 768px;
	}
}
/* iPad - Portrait-breakpoint */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.fullheight {
		height: 1024px;
	}
}

/* iPhone 6/7 plus - Landscape-breakpoint  */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
	.fullheight {
		height: 414px;
	}
}
/* iPhone 6/7 plus - Portrait-breakpoint  */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
	.fullheight {
		height: 736px;
	}
}

/* iPhone 6/7 - Landscape-breakpoint  */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
	.fullheight {
		height: 375px;
	}
}
/* iPhone 6/7 - Portrait-breakpoint  */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
	.fullheight {
		height: 667px;
	}
}

/* iPhone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
	.fullheight {
		height: 320px;
	}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
	.fullheight {
		height: 568px;
	}
}

/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
	.fullheight {
		height: 320px;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
	.fullheight {
		height: 480px;
	}
}