/******************* Minamata responsive Skin developped by Caroline Wood*/

@import url("w3.css");
@import url('telerik.css');
@import url('minaMenuRad.css');
@import url('TableLayoutCss.css');
@import url("https://fonts.googleapis.com/css?family=Oswald");
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,700");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

#wrapper {margin-top: 9px;}
#footer {margin-top: 16px;}
#HomeBoxes {margin-top: 50px;}

/************************ Video banner on Home page ********************/
#banner {height: 264px; position: relative; top: 16px; background-color: black;}
    
#banner #project-still {
        display: block;
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 1;
        background-size: cover;
 }

#project-links {
    margin-top: 16px;
    position: relative;
    z-index: 1;
}

button.play-button, button.play-button-backdrop {
    background: url("gfx/play-close-button.png") 0 0 no-repeat;
    width: 62px;
    height: 62px;
    border: none;
}
.clickvid-play-position, button.play-button, button.play-button-backdrop, svg.play-button {
    position: absolute;
    z-index: 4;
    bottom: -31px;
    left: 50%;
    margin: 0 0 0 -31px;
}

button.play-button:hover, button.play-button-backdrop:hover {background-position: 0 -62px;}

/****************** end video banner ***************/

/***************** Mina Counter ***********************/
.MinaCounter {
    position: relative;
    left: 400px;
    top: -90px;
}

@media (max-width: 365px) {
    .MinaCounter {
        position: relative;
        left: 200px;
        top: -40px;
    }
}

@media (min-width: 366px) and (max-width: 442px) {
    .MinaCounter {
        position: relative;
        left: 220px;
        top: -50px;
    }
}

@media (min-width: 443px) and (max-width: 556px) {
    .MinaCounter {
        position: relative;
        left: 280px;
        top: -60px;
    }
}

@media (min-width: 557px) and (max-width: 600px) {
    .MinaCounter {
        position: relative;
        left: 350px;
        top: -80px;
    }
}

@media (min-width: 601px) and (max-width:999px) {
    .MinaCounter {
        position: relative;
        left: 400px;
        top: -90px;
    }
}

/************ End of MinaCounter *****************/

#deco {
    margin-top:71px;
    background-color: #f2f2f2;
    height: 2px;
}

#logo-container {
    margin-top: -5px;
    position: absolute;
    z-index: 903;
}

#bannerLogoEn {
    width: 150%;
    max-width: 300px;
    height: 98px;
    background: url(gfx/Minamata-logo-EN-2020.png) no-repeat;
    float: right;
    display: block;
}

#bannerLogoEs {
    width: 150%;
    max-width: 300px;
    height: 98px;
    background: url(gfx/Minamata-logo-SP-2020.png) no-repeat;
    float: right;
    display: none;
}

#bannerLogoFr {
    width: 150%;
    max-width: 300px;
    height: 98px;
    background: url(gfx/Minamata-logo-FR-2020.png) no-repeat;
    float: right;
    display: none;
}

#languages {
    text-align: right;
    padding-right: 3em;
    padding-bottom: 0.6em;
}

p {text-align: justify;}

html, body {font-family: Arial,sans-serif; font-size: 13px;}

.normal {font-family: Arial,sans-serif; font-size: 13px; line-height: 1.5;}

h1, h2, h3, h4, h5, h6 {font-family: 'Roboto Condensed', sans-serif; color: #242424; font-weight: 100; margin: 10px 0;}

h1 {    font-size: 30px; 
        font-weight: 300;
        border-bottom: 3px solid #f2f2f2;
        padding-bottom: 9px;
        margin: 8px 0 20px 0;}

h2 {font-size: 28px;}

h3 {font-size: 18px; color: #3aaedd; font-style: italic; line-height: 20px;}

.sidebar h3 {
        color: #242424;
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 300;
        font-size: 18px;
        text-transform: uppercase;
        border-bottom: 3px solid #f2f2f2;
        padding-bottom: 3px;
        margin: 20px 0 7px 0;
    }

h4 {font-size: 20px;}

h5 {font-size: 18px;}

h6 {font-size: 16px;}

p a:link, a:visited, a:hover, a:active {color: #3AAEDD;}

a:link, a:visited, a:hover, a:active {color: #3AAEDD;}

p a:hover, a:active {text-decoration: underline;}

a:hover, a:active {text-decoration: underline;}

th {font-size: 12px;}

td {font-size: 13px;}

ul {padding-left: 10px; padding-right: 0px;}

ul li {list-style: none; background: url(gfx/bullet.png) 0 10px no-repeat; padding: 3px 0 3px 15px;}

.clear {clear: both;}

.Normal img {max-width: 100%; height: auto;}

hr {border: 0; border-top: 3px solid #f2f2f2; margin: 20px 0;}

/* useless hr {box-sizing: content-box; height: 0; overflow: visible;}*/

#copy, #copy a {font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 10px; color: #000; text-decoration: none;}
#copy {margin-top: 10px;}

.BookletResp  { 
	border: 1px solid grey; 
	width: 100%;
	max-width: 200px !important; 
	height: auto !important;
	margin: 3px;
	}

/***************Home page boxes**********************/
.cols .col {
        width: 310px;
        height: 400px;
        background: url(gfx/col-bg.png) repeat-x bottom #f2f2f2;
        margin-right: 10px;
        margin-left: 10px;
        padding: 13px;
        /*position: relative;*/
    }

.cols .col h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    color: #242424;
    font-weight: 100;
    margin: 4px 0 6px 0;
    letter-spacing: 1px;
}

.cols .col .img {text-align: center; background: #ffffff; padding: 8px;}

.cols .col .img img {height: 127px;}

.button {
        display: inline-block;
        height: 17px;
        padding: 3px 9px;
        background: url('gfx/btn-bg.png');
        text-decoration: none;
        font-family: 'Oswald', sans-serif;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: absolute;
        left: 13px;
        bottom: 27px;
    }

a.button, a.button:active, a.button:visited, a.button:hover {
        text-decoration: none;
        color: #fff;
        margin-top: 20px;
        display: block;
        width: 70px;
        text-align: center;
        position: static;
    }
    
    
/***************** Counter *************************/

.position {
        display: inline-block;
        height: 1.6em;
        overflow: hidden;
        position: relative;
        width: 1.05em;
    }

.digit {
        position: absolute;
        display: block;
        width: 1em;
        background-color: #444;
        border-radius: 0.2em;
        text-align: center;
        color: #fff;
        letter-spacing: -1px;
    }

.digit.static {box-shadow: 9px 1px 1px rgba(4, 4, 4, 0.35);}


#note {
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        font-size: 11px;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0;
    }

#counter {
        width: 301px;
        height: 65px;
        background: #575757;
        padding: 10px 0px 10px 9px;
        margin: auto;
    }

#video {
        max-width: 317px;
        margin: auto;
    }

#signatures {
        width: 130px;
        font-family: 'Oswald', sans-serif;
        font-size: 26px;
        height: 46px;
        float: left;
        margin-top: 2px;
    }

#ratifications {
        width: 130px;
        font-family: 'Oswald', sans-serif;
        font-size: 26px;
        height: 46px;
        float: right;
        margin-top: 2px;
    }

#signatures .txt,
#ratifications .txt {
            font-family: 'Roboto Condensed', sans-serif;
            font-size: 14px;
            font-weight: 300;
            color: #fff;
            text-align: center;
            letter-spacing: 0;
            text-transform: uppercase;
            display: block;
        }

/**************  end of counter   ************************************/


    .sidebar-button {
        display: block;
        border-top: medium none;
        border-left: medium none;
        max-width: 220px;
        font-family: "Oswald",sans-serif;
        font-size: 14px;
        margin: auto;
        letter-spacing: 1px;
        color: white;
        text-transform: uppercase;
        text-align: center;
        background-color: #3aaedd;
        padding: 3px;
        border-bottom: solid 2px #c6c6c6
    }

    .w3-bar-mina .w3-bar-item {
        padding: 8px 16px;
        float: left;
        width: auto;
        border: none;
        display: block;
        outline: 0;
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        color: #fff;
        font-size: 10px;
        text-transform: uppercase;
        text-decoration: none;
        line-height: 10px;
    }

    /**************** Downloads ***************************************/
    /******************************************************************/

    .downloads .item {width: 95px; float: left; margin-bottom: 15px;}
        
     .downloads .item .title {
            font-family: 'Roboto Condensed', sans-serif;
            font-size: 15px;
            color: #242424;
            text-transform: uppercase;
            font-weight: 300;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }
        
    .downloads .item .pdf {
            display: block;
            float: left;
            width: 25px;
            height: 24px;
            background: url('gfx/pdf.png') no-repeat;
            margin-right: 2px;
        }

    .downloads .item .doc {
            display: block;
            float: left;
            width: 22px;
            height: 24px;
            background: url('gfx/doc.png') no-repeat;
        }

        .downloads .item .xls {
            display: block;
            float: left;
            width: 22px;
            height: 24px;
            background: url('gfx/xls.png') no-repeat;
        }


 /**************************** Video in pages **********************************************/

.videoWrapper {
        position: relative;
        padding-bottom: 56.25%;
    }

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



/************ overlay styles for full articles in pop-up (using jquery tools) *************/
.apple_overlay {
	/* initially overlay is hidden */
	display:none;
	/* growing background image */
	background-image:url('/Portals/_default/skins/3c/gfx/jquerytools-overlay-white.png');
	background-repeat:no-repeat;
	/* width after the growing animation finishes height is automatically calculated */
	width:640px;
	height:510px;
	padding:35px;
}
div.apple_overlay_small {width:340px; height:269px;}

/* wrapper for news article */
.apple_overlay div.news_item_wrap {height:490px; overflow-y:auto;}
.apple_overlay_small div.news_item_wrap {height:256px; overflow-y:auto;}
/* default close button positioned on upper right corner */
.apple_overlay .close {background-image:url('/Portals/_default/skins/3c/gfx/jquerytools-overlay-close.png'); position:absolute; right:5px; top:5px; cursor:pointer; height:35px; width:35px;}
div.apple_overlay.black {background-image:url('/Portals/_default/skins/3c/gfx/jquerytools-overlay-transparent2.png'); color:#ffffff;}
div.apple_overlay.small {background-image:url('/Portals/_default/skins/3c/gfx/jquerytools-overlay-transparent2-small.png'); color:#ffffff;}

.SkinObject {
    font-weight: 300;
    font-size: 10px;
    text-decoration: none;

}

/******************** media changes ********************/
/*****************************************************************/

@(min-width: 601px) and (max-width:999px) {
    #HomeBoxes {max-width: 700px; margin-left: auto; margin-right: auto;}
    }


@media (max-width: 601px) {
    #wrapper {margin-top: 6px;}
    #HomeBoxes {margin-top: 16px;}
    table.newsList td.newsList_image {display: none;}
    #logo-container {position: relative;}
}

@media (max-width: 601px) {
    h1 {font-size: 20px;}
    h2 {font-size: 18px;}
    h3 h4 h5 h6 {font-size: 14px;}
}

@media (max-width:601px) {
    .cols .col {
        width: 100%;
        height: auto;
        background: url(gfx/col-bg.png) repeat-x bottom #f2f2f2;
        margin-right: 0px;
        margin-left: 0px;
        padding: 13px;}
}

@media (min-width: 601px) and (max-width:900px) {
	#SRcounter {
	margin-top: 20px;
	}
}