@charset "UTF-8";

/* CSS Document */


/****************** WEBFONTS *******************/

@font-face {
    font-family: 'graphik';
    src: url('../fonts/Graphik-BlackItalic.eot');
    src: url('../fonts/Graphik-BlackItalic-.eot#iefix') format('embedded-opentype'), url('../fonts/Graphik-BlackItalic.woff') format('woff'), url('../fonts/Graphik-BlackItalic.ttf') format('truetype'), url('../fonts/Graphik-BlackItalic.svg#Graphik-BlackItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'graphik';
    src: url('../fonts/Graphik-Light.eot');
    src: url('../fonts/Graphik-Light-.eot#iefix') format('embedded-opentype'), url('../fonts/Graphik-Light.woff') format('woff'), url('../fonts/Graphik-Light.ttf') format('truetype'), url('../fonts/Graphik-Light.svg#Graphik-Light') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'graphik';
    src: url('../fonts/Graphik-Regular.eot');
    src: url('../fonts/Graphik-Regular-.eot#iefix') format('embedded-opentype'), url('../fonts/Graphik-Regular.woff') format('woff'), url('../fonts/Graphik-Regular.ttf') format('truetype'), url('../fonts/Graphik-Regular.svg#Graphik-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

::selection {
    background: none;
}

body {
    margin: 0;
}

a img {
    border: none
}

div {
    font-family: graphik;
    font-weight: normal;
}

ul {
    padding: 0px;
    margin: 0px;
}

#banner {
    font-size: 40px;
    height;
    80px;
    margin-right: 5px;
}

#menu {
    height: 16px;
    margin-left: 5px;
    text-align: center;
    margin-top: 10px;
}

#menu li {
    display: inline-block;
    /* float: left; */
    margin-right: 5px;
    font-size: 10px;
}

#menu li a {
    color: gray;
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
}

#menu li.active a {
    color: black;
    background: black;
    color: white;
    padding: 2px;
    /*border-bottom: 4px solid rgb(152,0,39);*/
}

#menu li.active.first a {
    /*border-bottom :4px solid rgb(152,0,39);*/
}

#header {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 2;
    margin-top: 10px;
    /*border-bottom: 1px solid rgb(220,220,220);*/
}

#header.smaller {
    /*border-bottom:1px solid rgb(152,0,39);*/
    margin-top: 0px;
}

#header.smaller #logo {
    height: 35px;
    margin-top: 10px;
    margin-bottom: 20px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#logo {
    height: 60px;
    margin-top: 25px;
    margin-bottom: 25px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.container {
    max-width: 1150px;
    margin: auto;
    width: 1150;
}

.container.im2_1 {
    margin-top: 0px
}

#titol {
    font-size: 80px;
    text-align: center;
    color: white;
    margin-bottom: 30px;
    padding-top: 50px;
    font-weight: bold;
    font-style: italic;
    /*text-shadow: 3px 3px 0px black*/
}

.intro {
    margin-bottom: 30px;
    width: 100%;
    font-size: 25px;
    line-height: 1.3em;
    font-weight: bold;
    text-align: center;
    color: white
}

.intro2 {
    margin: auto;
    margin-bottom: 30px;
    width: 500px;
    margin-top: 40px;
    font-size: 30px;
    line-height: 1.3em;
    text-align: center;
    color: white;
}

.intro3 {
    font-size: 15px;
    line-height: 2em;
    text-shadow: 0px 0px 4px white;
    font-weight: bold;
    font-style: italic;
    text-align: center;
}

.intro4 {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    padding-right: 500px;
    padding-top: 5px;
    font-size: 25px;
    line-height: 1.3em;
    text-shadow: 0px 0px 4px white;
}

.button1 {
    width: 150px;
    height: 40px;
    background: white;
    cursor: pointer;
    margin: auto;
    color: black;
}

.button1 p {
    font-weight: bold;
    color: black;
    text-align: center;
    margin: 5px;
    padding: 10px;
}

#btitle {
    opacity: 1;
    float: right;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    text-align: right;
    line-height: 1.3;
    margin-top: 10px;
}

#header.smaller #btitle {
    opacity: 1;
    margin-top: 10px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}


/*---------------------------*/

.section.sc1 {
    background-image: url('https://architectureukraine.org/datawar/img/home.jpg')
}

.chapter {
    padding-top: 0px;
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
    text-align: center
}

.col3 {
    width: 33.3%;
    float: left;
    margin-top: 50px;
}

.colcenter {
    display: block;
    width: 300px;
    margin: auto;
    margin-top: 10%;
    border: 1px solid gray;
    padding: 20px;
    border-radius: 10px;
}

.col3_2 {
    width: 66.6%;
    float: left;
}

.full {
    height: 700px;
}

.full2 {}

.im2_1 {
    background-image: url('https://architectureukraine.org/datawar/img/section2_1.png');
}

.im2_2 {
    background-image: url('https://architectureukraine.org/datawar/img/section2_2.png');
}

.im2_2 {
    background-image: url('https://architectureukraine.org/datawar/img/section2_3.png');
}

.im3_0 {
    background-image: url('https://architectureukraine.org/datawar/img/section3_00.png');
}

.im3_1 {
    background-image: url('https://architectureukraine.org/datawar/img/section3_01.png');
}

.im3_2 {
    background-image: url('https://architectureukraine.org/datawar/img/section3_02.png');
}

.im3_3 {
    background-image: url('https://architectureukraine.org/datawar/img/section3_03.png');
}

.im3_4 {
    background-image: url('https://architectureukraine.org/datawar/img/section3_04.png');
}

.im3_5 {
    background-image: url('https://architectureukraine.org/datawar/img/section3_05.png');
}

.im3_6 {
    background-image: url('https://architectureukraine.org/datawar/img/section3_06.png');
}

.im3_7 {
    background-image: url('https://architectureukraine.org/datawar/img/section3_07.png');
}

.im3_8 {
    background-image: url('https://architectureukraine.org/datawar/img/section3_08.png');
}

.im3_9 {
    background-image: url('https://architectureukraine.org/datawar/img/section3_09.png');
}

.im5_1 {
    background-image: url('https://architectureukraine.org/datawar/img/section5_01.png');
}

.shdw {
    height: 400px;
    width: 100%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+21,0+99 */
    /*
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 21%, rgba(255,255,255,0) 99%, rgba(255,255,255,0) 100%); 
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(255,255,255,0) 99%,rgba(255,255,255,0) 100%); 
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(255,255,255,0) 99%,rgba(255,255,255,0) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); 
    */
}

.fullimage {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.boiler {
    font-size: 20px;
    line-height: 1.3em;
}

.field {
    border: 1px solid rgb(125, 0, 39);
    border-radius: 5px;
    height: 30px;
    margin-top: 10px;
    color: gray;
}

.field p {
    padding: 0;
    margin: 5px;
    font-size: 16px;
}

.logo_adeu {
    float: right;
    margin-top: -60px
}


/*-------------------------------------------------------*/

#mapa {
    width: 100%;
    border-bottom: 1px solid rgb(152, 0, 39);
    cursor: crosshair;
    ;
}

#utfgrid {
    width: 200px;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    top: 90px;
    z-index: 9999;
    height: 200px;
    left: 50%;
    margin-left: 375px;
}

.item1 {
    text-align: right;
    font-size: 12px;
    margin-right: 10px;
}

.item2 {
    text-align: right;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-right: 10px;
}

.item3 {
    text-align: right;
    font-size: 12px;
    margin-right: 10px;
}

.item4 {
    text-align: right;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-right: 10px;
}

.ol-scale-line-inner {
    z-index: 200000;
    border: none;
    border-bottom: 5px solid black;
    background: transparent;
    color: black;
    text-align: left;
}

.ol-scale-line {
    bottom: 10px;
    left: 50%;
    margin-left: -600px;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 0;
    ;
}

.ol-zoom,
.ol-zoom:hover {
    top: 10px;
    left: 50%;
    margin-left: -600px;
    background-color: rgba(255, 255, 255, 0.9);
    opacity: 1;
    border-radius: 0;
}

.ol-zoom button,
.ol-zoom button:hover,
.ol-zoom button:active,
.ol-zoom button:focus {
    background: none;
    color: black;
    font-size: 20px;
    margin: 3px;
    padding: 0px;
    font-family: 'graphic';
    border: 1px solid black;
    opacity: 0.9;
}


/*---------------*/

h2 {
    font-size: 30px;
}

.list {
    margin-top: 160px;
}

.lista2 {
    line-height: 30px;
    border-top: 1px solid rgb(152, 0, 39);
}

.lista2 a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

.container2 {
    position: relative;
    max-width: 1150px;
    width: 100%;
    margin: auto;
    width: 1150;
    float: none;
    clear: both;
}

#sl1 {
    background-image: url(../img/sl1.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 50px;
}

#sl3 {
    background-image: url("../img/pat3.png");
    background-repeat: repeat;
}

#sl2 {
    background-image: url("../img/spazzioridotto.png");
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: 50px;
    background-position: center;
}

.container p {
    text-align: center;
    line-height: 1.5em;
    max-width: 800px;
    margin: auto;
    font-size: 16px;
}


/**********************************************************/

#gar1 {
    background-image: url("../img/01_GAR_a_key.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#gar2 {
    background-image: url("../img/01_GAR_b_key.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#osm1 {
    background-image: url("../img/02_OSM_natural.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#osm2 {
    background-image: url("../img/03_OSM_built.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#i04 {
    background-image: url("../img/04_redonbass_damaged.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#i04b {
    background-image: url("../img/04_b_redonbass_destroyed.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#i05 {
    background-image: url("../img/05_Dead.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#i06 {
    background-image: url("../img/06_Flickr.jpg");
    bbackground-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#i07 {
    background-image: url("../img/07_Borders.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#i08a {
    background-image: url("../img/08_gdelt_a.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#i08b {
    background-image: url("../img/08_gdelt_b.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#i09 {
    background-image: url("../img/09_Liveuamap_attack.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#i10 {
    background-image: url("../img/10_Liveuamap_events.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#i11 {
    background-image: url("../img/11_Humanitarian.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#i12 {
    background-image: url("../img/12_Checkpoint.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#i13 {
    background-image: url("../img/13_Speech.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#i14 {
    background-image: url("../img/14_Displaced.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#i15 {
    background-image: url("../img/view.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.subchapter {
    padding-top: 30px;
    font-size: 15px;
    font-weight: bold;
    text-align: center
}

.link {
    text-align: center;
    margin: 20px;
}

.link a {
    background: black;
    padding: 10px;
    line-height: 1.5em;
    color: white;
    text-decoration: none;
}

#map {
    margin-top: 60px;
    width: 100%;
    background: white;
}

.leaflet-control-attribution {
    display: none
}

a.leaflet-control-zoom-in,
a.leaflet-control-zoom-out,
.leaflet-bar a.leaflet-disabled {
    background-color: transparent;
    color: black;
    border: none;
    font-size: 100px;
    padding: 30px;
    margin: 5px;
}

a.leaflet-control-zoom-in:hover,
a.leaflet-control-zoom-out:hover {
    background-color: transparent;
    color: black;
    border: none;
    margin: 5px;
}

.leaflet-control {
    box-shadow: none;
}

.mi2 a {
    color: gray;
    font-weight: 400 !important;
    font-style: normal !important;
    color: red;
}

.container4 {
    width: 100%;
    height: 100%
}

.ph {
    margin-top: 20px;
    height: 200px;
    background-position: center;
    background-size: cover;
}

.pid1 {
    background-image: url("../photos/CkHa2vaVAAAiWG1.jpg");
}

.pid2 {
    background-image: url("../photos/CmgLHfpWIAA8BYW.jpg");
}

.pid2 {
    background-image: url("../photos/CkHa2yzUUAIl1a5.jpg");
}

.pid3 {
    background-image: url("../photos/CmgNPseXYAA6Xjm.jpg");
}

.pid4 {
    background-image: url("../photos/CmgNUivXgAAghkT.jpg");
}

.pid5 {
    background-image: url("../photos/CmgzyHaXgAAVtlm.jpg");
}

.pid6 {
    background-image: url("../photos/3.jpg");
}

.pid7 {
    background-image: url("../photos/CmiKXlGXgAA-rIr.jpg");
}

.pid8 {
    background-image: url("../photos/Cmgz0eVWYAA6DTE.jpg");
}

.mi2 {}

.col3 img {
    height: 100px;
    display: block;
    margin: auto;
}

.p2 {
    font-weight: bold;
    margin-top: 50px;
    font-style: italic;
}

.col3 a {
    float: none;
    display: block;
    text-align: center;
    color: black;
    padding: 10px;
}

img.link {
    height: 20px;
}

img.foto {
    display: block;
    margin: auto;
    margin-top: 20px;
}

.bck {
    background: black;
}


/*
#header.smaller #btitle {
    opacity: 1;
    margin-top: 10px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    display: none;
    transition: all 0.3s;
}*/

.leaflet-touch .leaflet-bar a {
    background-color: transparent;
    color: black;
    border: none;
    font-size: 100px;
    padding: 30px;
    margin: 5px;
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
    border: none;
    background-clip: padding-box;
}

@media (max-width: 900px) {
    #btitle {
        display: none;
    }
}