/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1440px){
    /*.hoc{max-width:1420px;}*/
    .hoc{margin: 0 5%;}
    .desktop-hidden{display: none;}
    /* ------------------------------------------------------------------------------------------------------------ */
    .delighter.right { transform:translate(-100%); opacity:0; transition: all .75s ease-out; }
    .delighter.right.started { transform:none; opacity:1; }

    .delighter.left { transform:translate(100%); opacity:0; transition: all .75s ease-out; }
    .delighter.left.started { transform:none; opacity:1; }

    .delighter.bottom { transform:translatey(50%); opacity:0; transition: all .75s ease-out; }
    .delighter.bottom.started { transform:none; opacity:1; }

    .delighter.easy.started{ opacity: 1; transition: all .7s ease-out .1s; }
    .delighter.easy{ opacity: 0; transform: none; }

    .grid-container .delighter.easy{ opacity: 0; transform: none; }
    .grid-container .delighter.easy.started{opacity: 1; transform: none;transition: all .7s ease-out .55s; }

    /* ------------------------------------------------------------------------------------------------------------ */
}
@media screen and (min-width:1140px) and (max-width: 1440px){
    /*.hoc{max-width:1140px;}*/
    .hoc{margin: 0 5%;}
    .desktop-hidden{display: none;}
    /* ------------------------------------------------------------------------------------------------------------ */
    .delighter.right { transform:translate(-100%); opacity:0; transition: all .75s ease-out; }
    .delighter.right.started { transform:none; opacity:1; }

    .delighter.left { transform:translate(100%); opacity:0; transition: all .75s ease-out; }
    .delighter.left.started { transform:none; opacity:1; }

    .delighter.bottom { transform:translatey(50%); opacity:0; transition: all .75s ease-out; }
    .delighter.bottom.started { transform:none; opacity:1; }

    .delighter.easy.started{ opacity: 1; transition: all .7s ease-out .1s; }
    .delighter.easy{ opacity: 0; transform: none; }

    .grid-container .delighter.easy{ opacity: 0; transform: none; }
    .grid-container .delighter.easy.started{opacity: 1; transform: none;transition: all .7s ease-out .55s; }

    /* ------------------------------------------------------------------------------------------------------------ */
}

@media screen and (min-width:978px) and (max-width:1140px){
    /*.hoc{max-width:95%;}*/
    .hoc{margin:0 5%;}
    .desktop-hidden{display: none;}
    /* ------------------------------------------------------------------------------------------------------------ */
    .delighter.right { transform:translate(-100%); opacity:0; transition: all .75s ease-out; }
    .delighter.right.started { transform:none; opacity:1; }

    .delighter.left { transform:translate(100%); opacity:0; transition: all .75s ease-out; }
    .delighter.left.started { transform:none; opacity:1; }

    .delighter.bottom { transform:translatey(50%); opacity:0; transition: all .75s ease-out; }
    .delighter.bottom.started { transform:none; opacity:1; }

    .delighter.easy.started{ opacity: 1; transition: all .7s ease-out .1s; }
    .delighter.easy{ opacity: 0; transform: none; }

    .grid-container .delighter.easy{ opacity: 0; transform: none; }
    .grid-container .delighter.easy.started{opacity: 1; transform: none;transition: all .7s ease-out .55s; }

    /* ------------------------------------------------------------------------------------------------------------ */
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:978px){
    .container-grid-4 {
        grid-template-columns: 1fr 1fr;
    }
    .grid-container{grid-template-columns: 1fr;}
    .hoc{max-width:90%;}
    .mobil-hidden{display: none;}
    .desktop-hidden{display: block;}
    .topbar {
        position: relative;
    }

    #topbar ul li {
        margin-right: 5px;
    }

    #topbar{}

    #header{padding:30px 15px;}
    #header #logo{margin-top:3px;}

    #mainav{}
    #mainav ul{display:none;}
    #mainav form{display:block; border: 1px solid #1b3390;}

    #breadcrumb{}

    .container{}
    #comments input[type="reset"]{margin-top:10px;}
    .pagination li{display:inline-block; margin:0 5px 5px 0;}

    #footer{}

    #copyright{}
    #copyright p:first-of-type{margin-bottom:10px;}
}

@media screen and (max-width:750px){
    .figures.latest > li > figure figcaption a {
        font-size: 13px;
    }
    .btn{font-size: 14px;}
    .container-grid-4 {
        grid-template-columns: 1fr;
    }
    .container-grid-3 {
        grid-template-columns: 1fr;
    }

    .quatre {
        justify-self: center;
    }
    #topbar {
        grid-template-columns: 1fr;
    }
    .imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
    .fl_left, .fl_right{display:block; float:none;}
    .group .group > *:last-child, .clear .clear > *:last-child, .clear .group > *:last-child, .group .clear > *:last-child{margin-bottom:0;}/* Experimental - Needs more testing in different situations, stops double margin when stacking */
    .one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter, #segment > .two_third{display:block; float:none; width:auto; margin:0 0 30px 0;}

    #topbar{padding-top:15px; text-align:center;}
    #topbar > div:first-of-type ul{margin:0 0 15px 0;}

    #header{padding:30px 0; text-align:center;}
    #header #logo{margin:0 0 20px 0;}

    #pageintro article, #pageintro p{max-width:none; margin:auto;}
    #pageintro .heading{font-size:2rem;}

    .sectiontitle{max-width:none; margin-bottom:50px; text-align:left;}
    .overview > li:nth-last-child(-n+4){margin-bottom:50px;}

    #segment > .two_third{margin:0; padding:40px 20px;}
    #segment article{padding:0;}
    #segment article i{position:inherit; top:auto; left:auto; margin-bottom:15px;}

    #footer > div{text-align:left;}
    #footer .latestimg > li, #footer .latestimg > li:nth-last-child(-n+3){display:inline-block; float:none; width:auto; margin:0 5% 5% 0;}
    #footer .latestimg > li:last-child{margin-bottom:0;}
    #footer .latestimg > li img{width:auto;}
	
	#pageintro.limit{width:90%;}
	#pageintro article{max-width:none; text-align:left;}
    #pageintro .heading{font-size:2rem;}
    #pageintro p:first-of-type{font-size:1rem; padding: 0 15px;}
	#pageintro p.easy:first-of-type{padding: 0 15px; font-size:1rem;}
    #header ul li div span.mobil-hidden{display:none;}
	#pageintro img{background: #ffffff6b;border-radius: 105px;margin-bottom:20px;height:150px;}
	
	
	.one .box-2 img{width:31px;text-align:center;padding:20px 0;}
	#pageintro {
    padding: 50px 0;}
}

@media screen and (max-width:450px){
    #topbar > div:first-of-type ul li{display:block; margin:0 0 2px 0;}
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
    .scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
    .scrollable table{margin:0; padding:0; white-space:nowrap;}

    .inline li{display:block; margin-bottom:10px;}
    .pushright li{margin-right:0;}

    .font-x2{font-size:1.6rem;}
    .font-x3{font-size:1.8rem;}
}