html {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    color: darkslateblue;
}
a {
    color: darkblue;
    text-decoration: underline;
}
body {
    margin: 0;
}
@media screen and (max-width: 991px) {
    /* стили для больших планшетов - начало */
    html {
        font-size: 13px;
    }
}

@media screen and (max-width: 767px) {
    /* стили для средних планшетов - начало */
    html {
        font-size: 12px;
    }
}

@media screen and (max-width: 479px) {
    /* стили для телефонов - начало */
    html {
        font-size: 11px;
    }
}
/*header--------------------------------------------*/
header {
    background-color: #7e587f;
    margin: 0;
    position: relative;
}
.logo {
    text-decoration: none;
    color: #ffffff; /*color: #e6ddee;*/
    font-size: 1.9em;
    font-family: Arial, Helvetica, sans-serif;
}
a.acnx { /* form de connexion */
    display: inline-block;
    position: absolute;
    top: 0.6em;
    right: 6em;
    margin: 0.3em;
    text-decoration: none;
}
    a.acnx:hover {
        text-decoration: underline;
    }

img.cnximg { /* adaptable */
    height: 1.3em;
      
}
#lgimg { /* adaptable */
    height: 1.2em;
    cursor: pointer;
}

@media screen and (max-width: 991px) {
    /* стили для больших планшетов - начало */
    img.cnximg {
        height: 1.36em;
    }

    #lgimg {
        height: 1.26em;
    }
}

@media screen and (max-width: 767px) {
    /* стили для средних планшетов - начало */
    img.cnximg {
        height: 1.42em;
    }

    #lgimg {
        height: 1.32em;
    }
}

@media screen and (max-width: 479px) {
    /* стили для телефонов - начало */
    img.cnximg {
        height: 1.5em;     
    }

    #lgimg {
        height: 1.4em;
    }
}
/*nav-----------------------------------------------*/
.nav_h {
    background-color: #e6ddee;
    padding:0 4vw;
    color: white;
    /*border: 1px solid red;*/
    position: relative;
}
/*main----------------------------------------------*/
main {
    border-bottom: 1px solid #cccccc;
    padding: 0;/* не менять иначе первая страница поплывет */
    text-align: center;
    position: relative;
    min-height: 80vh;  
}
.blkanns {
    display: flex;
    flex-wrap: nowrap;
}
.blkanns_l {
    height: 30em;
    text-align: left;
    /*border: 1px solid green;*/
    margin-left: 4%;
    margin-top: 2em;
    width: 42%;
}
.blkanns_r {
    background-image: url("sup/cartes.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 58%;
    height: 30em;
    text-align: left;
    margin-right: 4%;
    margin-top: 2em;
}
h1.indx {
    color: crimson;
    display: inline-block;
    margin-top: 0.8em;
    margin-left: 2em;
    margin-bottom: 0.3em;
    line-height: 1.5em;
    font-size: 3em;
    letter-spacing: 0.03em;
}
h1.titre_h1 {
    color: crimson;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
    font-size: 2.2em;
    letter-spacing: 0.03em;
}
ul.indx_2 {
    color: darkblue;
    display: inline-block;
    margin-top: 0.2em;
    margin-left: 3em;
    line-height: 1.8em;
    font-size: 1.6em;
    letter-spacing: 0.03em;
}
ul.indx_2 a {
    color: darkblue;
    text-decoration:underline;  
}
ul.indx_2 a:hover {
    color: slateblue;
    text-decoration: none ;
}
@media screen and (max-width: 991px) {
    /* стили для больших планшетов - начало */
    h1.indx {
        margin-top: 4em;
        margin-left: 2em;
        margin-right: 2em;
        padding: 0.45em 1.3em;
        line-height: 1.5em;
        border-radius: 6px;
        font-size: 2.2em;
    }
}

@media screen and (max-width: 767px) {
    /* стили для средних планшетов - начало */
    h1.indx {
        margin-top: 3em;
        margin-left: 1.5em;
        margin-right: 1.5em;
        padding: 0.4em 1.2em;
        line-height: 1.5em;
        border-radius: 6px;
        font-size: 2.3em;
    }
}

@media screen and (max-width: 479px) {
    /* стили для телефонов - начало */
    h1.indx {
        margin-top: 2em;
        margin-left: 1em;
        margin-right: 1em;
        padding: 0.35em 1.1em;
        line-height: 1.5em;
        border-radius: 6px;
        font-size: 2.4em;
    }
    
}
/* params lesson----------------------------------------------*/
.menuG {
    background-color: #e6ddee;
    position: absolute;
    padding: 20px;
    left: 0;
    right: 0;
    top: 40px;
    z-index: 100;
}
.th3 {
    color: #434e74;
    font-size: 1.2rem;
    padding: 0;
    margin-bottom: 10px;
}
.lgnInfrm {
    display: inline-block;
    margin-right: 10px;

}
select {
    width: 200px;
    
    font-size: 0.8rem;
    color: #434e74;
    background-color: #ffffff;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 15px;
}
option {
    line-height: 30px;
}
/* lesson ----------------------------------------------*/
.imgEx1 { /* adaptable */
    width: 12vw;
    height: 12vw;
    margin: auto;
    border: 1px solid #cccccc;
    border-radius: 8px;
}
.imgEx2 { /* adaptable */
    width: 9vw;
    height: 9vw;
    margin: 0.6vw;
    border: 1px solid #cccccc;
    border-radius: 8px;
}
.contbk6 { /* adaptable */
    margin: auto;
    vertical-align: top;
    width: 32vw;
}
.contbk1 { /* adaptable */
    margin: auto;
    vertical-align: top;
    width: 29.4vw;
}
.dvelem { /* adaptable */
    width: 29.4vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
}
.flch {
    text-decoration: none;
    display: inline-block;
    border: 1px solid #434e74;
    background-color: white;
    color: #434e74;
    margin-top: 0.8em;
    margin-bottom: 0.5em;
    border-radius: 8px;
    font-size: 2em;
    box-sizing: border-box;
    padding: 0.2em;
}
.flch_disabled {
    display: inline-block;
    border: 1px solid #e6ddee;
    background-color: white;
    color: #e6ddee;
    margin-top: 0.8 em;
    margin-bottom: 0.5em;
    border-radius: 8px;
    font-size: 2em;
    box-sizing: border-box;
    padding: 0.2em;
}
.imgHp { /* adaptable */
    width: 3vw;
    margin: 0.8vw;
}
.imgHp_myElems { /* adaptable */
    width: 2.5vw;
    margin: 0;
}
.lngApr {
    display: inline-block;
    font-size: 2.5em;
    color: #434e74;
    margin: 0.2em;
}
.lngApr1ltr {
    display: inline-block;
    font-size: 2.5em;
    margin: 0.2em 0 0.2em 0.2em;
    padding: 0 0.4em;
    border-bottom: 2px solid #cccccc;
    color: #cccccc;
}
.lngInfc {
    display: inline-block;
    color: #ae8fb1;
    margin: 0.2em;
    font-style: italic;
    font-size: 1.3em;
}
.lngAprChoix {
    display: inline-block;
    font-size: 1.8em;
    color: #434e74;
    margin: 0.3em;
    background-color: #e6ddee;
    padding: 0.3em 0.8em;
    cursor: pointer;
    border-radius: 8px; 
}
.dvelemChoix { /* adaptable */
    width: 29.4vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    border: 1px solid #ae8fb1;
    padding: 0.5em;
    box-sizing: border-box;
    border-radius: 8px;
}

@media screen and (max-width: 991px) {
    /* стили для больших планшетов - начало */
    .imgEx2 {
        width: 14.4vw;
        height: 14.4vw;
        margin: 0.8vw;
    }
    .contbk6 {
        width: 50.5vw;
    }
    .audioflash {
        width: 46.4vw;
    }
    
    .contbk1 { 
        width: 46.4vw;
    }
    .imgEx1 {
        width: 18.6vw;
        height: 18.6vw;
    }
    .dvelem {
        width: 46.4vw;
    }
    .dvelemChoix {
        width: 46.4vw;
    }
    .imgHp {
        width: 5vw;
        margin: 0.9vw;
    }

}

@media screen and (max-width: 767px) {
    /* стили для средних планшетов - начало */
    .imgEx2 {
        width: 19.7vw;
        height: 19.7vw;
        margin: 1vw;
    }
    .contbk6 {
        width: 67.5vw;
    }
    .audioflash {
        width: 63.1vw;
    }
    .contbk1 {
        width: 63.1vw;
    }
    .imgEx1 {
        width: 25.2vw;
        height: 25.2vw;
    }
    .dvelem {
        width: 63.1vw;
    }
    .dvelemChoix {
        width: 63.1vw;
    }
    .imgHp {
        width: 7vw;
        margin: 1vw;
    }
}

@media screen and (max-width: 479px) {
    /* стили для телефонов - начало */
    .imgEx2 {
        width: 25vw;
        height: 25vw;
        margin: 1.2vw;
    }

    .contbk6 {
        width: 84.5vw;
    }

    .audioflash {
        width: 79.8vw;
    }

    .contbk1 {
        width: 79.8vw;
    }

    .imgEx1 {
        width: 32vw;
        height: 32vw;
    }
    .dvelem {
        width: 79.8vw;
    }
    .dvelemChoix {
        width: 79.8vw;
    }
    .imgHp {
        width: 9vw;
        margin: 1.2vw;
    }
}
/* ----------------------------------------------*/
.mnuT1 {
    min-width: 16em;
    max-width: 50%;
    width: 60%;
    margin: auto;
}
/* ---------------------------------------------- menu */
.container {
    display: inline-block;
    cursor: pointer;
    /*border: 1px solid red;*/
    vertical-align: middle;
}

.bar1, .bar2, .bar3 {
    width: 30px;
    height: 5px;
    background-color: #ae8fb1;
    margin: 6px 0;
    transition: 0.2s;
}
/* Rotate first bar */
.change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
}
/*---------------------------------------------------------------------*/
.dvpg { /* adaptable */
    max-width: 81vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    border: 1px solid green;
    text-align: center;

}
.dvlsn { /* adaptable */
    width: 20vw;
    height: 15vw;
    display: inline-block;
    border: 1px solid white;
    /*margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;*/
    background-color: green;
}
@media screen and (max-width: 991px) {
    /* стили для больших планшетов - начало */
    .dvpg {
        max-width: 70vw;
    }
    .dvlsn {
        width: 24.53vw;
    }
}

@media screen and (max-width: 767px) {
    /* стили для средних планшетов - начало */
    .dvpg {
        max-width: 80vw;
    }
    .dvlsn {
        width: 34.26vw;
    }
}

@media screen and (max-width: 479px) {
    /* стили для телефонов - начало */
    .dvpg {
        max-width: 90vw;
    }
    .dvlsn { 
        width: 44vw;
    }
}
/* --------------------------------------------------------------------*/
@media screen and (max-width: 991px) {
    /* стили для больших планшетов - начало */
}

@media screen and (max-width: 767px) {
    /* стили для средних планшетов - начало */

}

@media screen and (max-width: 479px) {
    /* стили для телефонов - начало */

}
@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
    /*body {line-height: 1.4;}         @media (400px <= width <= 700px)          */
}
/* --------------------------------------------------------------------*/
h3 {
    color: rgb(33, 91, 153);
}
.button{
	background-color: #ae8fb1;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
	padding: 0.5em 1.2em;
}	
/* -------------------------------------------------------------------- elements and settings */
.drAcceptor{
	display: inline-block;
	border : 0px solid #eeeeee;
	color : #eeeeee;
	height : 8vh;
	vertical-align: top;
	width : 2vw;
	margin-top : 2vh;
}
.drPlace{
	display: inline-block;
	border : 0px solid pink;
	color : pink;
	height : 7vh;
	vertical-align: top;
	margin-top : 2vh;
	padding-top : 1vh;
}
.drDrag{
	color : black;
	border : 1px solid black;
	text-align : center;
	border-radius : 5px;
	padding : 1vh 1vw;
	margin : 2px;
}
.drPlace1000{
	display: inline-block;
	margin : 4px;
	height : 8vh;
	color : pink;
}



/* -------------------------------------------------------------------- elements and settings fin */