@font-face{

	font-family:'CaviarDreams';

	src:url('../fonts/CaviarDreams.ttf')

	/* ,url('fonts/CaviarDreams_BoldItalic.ttf'), */

	/* url('fonts/CaviarDreams_Italic.ttf'), */

	/* url('fonts/CaviarDreams_Bold'); */

	/* font-weight; normal */;

}



body

{

    background-color: rgba(255, 255, 154, 0.5);

    font-family: 'CaviarDreams', Arial, sans-serif;

	font-weight: bold;

	overflow: hidden;

}



/* Curtains */



#theatre {

    height: auto;

    width: 100%;

    text-align: center;

    font-size: 15px;

    background: url(http://webdesignpop.com/wp-content/uploads/2015/02/cover-1552x2189.png);

    color: rgba(255, 255, 255, 0.3);

}



#theatre #curtain-left,

#theatre #curtain-right {

    content: '';

    position: absolute;

    z-index: 2;

    top: -30px;

    bottom: -30px;

    width: 61%;

    transition: all 4s ease-out;

    transform: rotate(0deg);

    background-color: #A90505;

    background-image: linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, .25) 50%, transparent 65%);

    background-repeat: repeat;

    background-size: 80px;

}



#curtain-left {

    left: -10%;

}



#curtain-right {

    right: -10%;

}



body:hover #theatre #curtain-right,

body:hover #theatre #curtain-left {

    width: 0;

    background-size: 1px;

    transition: all 4s ease;

    transform: rotate(15deg);

}



div #theatre:hover #curtain-right {

    transition: all 4s ease;

    transform: rotate(-15deg);

}



#theatre p {

    width: 50%;

    margin: 0.5em auto;

    position: relative;

    z-index: 3;

}



#theatre p:first-of-type:before {

    content: '';

    position: absolute;

    border-radius: 150px;

    height: 0.1px;

    width: 3px;

    top: 6.5em;

    left: 49%;

    transform: rotate(25deg) skew(15deg, 5deg);

}



/*End curtains*/



#bloc_page

{

    width: 55%;

    margin: auto;

}



.accueil{

    position: relative;

}



.accueil img{

    width: 100%;

}



/* Points */



#assos {

    top: 9.2%;

    left: 21.6%;

    width: 1%;

    height: 1%;

    background-color: #2878ad;

}



#assos::before {

    content: '';

    width: 2170%;

    height: 50%;

    display: block;

    background: #2878ad;

    position: absolute;

    right: 85%;

    top: 38%;

    border-radius: 1rem;

}



#assos::after {

    content: "L'Association";

    position: absolute;

    right: 1573%;

    top: -135%;

    width: 200px;

    color: #2878ad;

}



#bielo {

    top: 32.7%;

    left: 73.5%;

    width: 1%;

    height: 1%;

    background-color: #da3420;

}



#bielo::before {

    content: '';

    width: 1980%;

    height: 50%;

    display: block;

    background: #da3420;

    position: absolute;

    left: 45%;

    top: 32.8%;

    border-radius: 1rem;

}



#bielo::after {

    content: 'La Biélorussie';

    position: absolute;

    right: -3510%;

    top: -145%;

    color: #da3420;

}





#compThea {

    top: 21.7%;

    left: 17%;

    width: 1%;

    height: 1%;

    background-color: #2877af;

}



#compThea::before {

    content: '';

    width: 1980%;

    height: 50%;

    display: block;

    background: #2877af;

    border-radius: 1rem;

    position: absolute;

    right: 66%;

    top: 40%;

}



#compThea::after {

    content: 'La Compagnie de Théâtre';

    color: #2877af;

    position: absolute;

    right: 2075%;

    top: -140%;

    width: 200px;

}



#maisonEdition {

    top: 83.2%;

    left: 17.5%;

    width: 1%;

    height: 1%;

    background-color: #00628f;

}



#maisonEdition::before {

    content: '';

    position: absolute;

    width: 1600%;

    height: 50%;

    background: #00628f;

    right: 70%;

    top: 42%;

    border-radius: 1rem;

}



#maisonEdition::after {

    content: "Maison d'Édition";

    position: absolute;

    width: 200px;

    height: 5px;

    color: #00628f;

    right: 1220%;

    top: -130%;

}



#contact {

    top: 50.4%;

    left: 40.3%;

    width: 2%;

    height: 2%;

    background-color: #01456a;

}



#contact::before {

    content: '';

    background: #01456a;

    position: absolute;

    width: 500%;

    height: 50%;

    right: 40%;

    top: 43%;

    border-radius: 1rem;

}



#contact::after {

    content: 'Contact';

    position: absolute;

    right: 55%;

    top: -30%;

    width: 200px;

    color: #01456a;

}



#ecoles {

    top: 54.4%;

    left: 6.5%;

    width: 1.2%;

    height: 1.2%;

    background-color: #2879ae;

}



#ecoles::before {

    content: '';

    background: #2879ae;

    position: absolute;

    width: 1455%;

    height: 50%;

    right: 84%;

    top: 39%;

    border-radius: 1rem;

}



#ecoles::after {

    content: 'Les Écoles';

    position: absolute;

    right: 1050%;

    top: -110%;

    width: 200px;

    color: #2879ae;

}



#etc {

    top: 37.3%;

    left: 57.8%;

    height: 4%;

    width: 3%;

    background-color: #d4856b;

}



#etc::before {

    content: '';

    position: absolute;

    width: 800%;

    height: 24%;

    background: #d4856b;

    left: 65%;

    top: 30%;

    border-radius: 1rem;

}



#etc::after {

    content: 'La Chine';

    position: absolute;

    color: #d4856b;

    height: 20%;

    width: 200px;

    left: 590%;

    top: -10%;

}



#etm {

    right: 36.3%;

    bottom: 20%;

    width: 1%;

    height: 1%;

    background-color: #ccada3;

}



#etm::before {

    content: '';

    position: absolute;

    width: 1220%;

    height: 50%;

    background: #ccada3;

    left: 50%;

    top: -10%;

    border-radius: 1rem;

}



#etm::after {

    content: 'Le Maghreb';

    position: absolute;

    width: 200px;

    color: #ccada3;

    left: 600%;

    top: -180%;

    height: 5px;

}



#ets {

    top: 7.3%;

    left: 55.8%;

    height: 0.8%;

    width: 0.8%;

    background-color: #d86c4f;

}

    



#ets::before {

    content: '';

    width: 2170%;

    height: 50%;

    display: block;

    background: #d86c4f;

    position: absolute;

    left: 10%;

    top: 5%;

    border-radius: 1rem;

}



#ets::after {

    content: 'École théâtrale Soviétique';

    position: absolute;

    left: 2170%;

    top: -206.1%;

    width: 200px;

    color: #d86c4f;

}



/* End of points */



.link {

    position: absolute;

    border-radius: 100%;

    background-color: whitesmoke;

}



/* Header */



#indication	/* 1st menu avec la phrase*/

{

    display: flex;

	justify-content: space-between;

	align-items:baseline;



}

#loi		/* premier phrase d'en haut */

{

    display: flex;

	justify-content: flex-start;

	font-size: 80%;

}

#premierNav		/* menu du en haut avec les different choix*/

{

    display: flex;

	flex-direction: row;

	 /* margin:-4% 0 0 5px;  */

	justify-content: flex-end;

}



#indication nav ul{

  display: flex;

  flex-direction: row;

  list-style:none;

  overflow: hidden;

}



#indication li {

    /*padding:;*/

    margin:2px;

    font-size: 80%;

    border:1px solid #d6d6d6;

    letter-spacing: 2px; /* pas très !*/ 

    box-shadow:0 2px 3px 0px rgba(0,0,0,0.25);

    border-radius:3px;

    transition:.2s all;

}

#indication li a {

  display: block;

  color: black;

  text-align: center;

  text-decoration: none;

  

}



/* Responsive code */



/* For 1920px resolutions : */

@media (max-width: 1920px){

    #assos::after{

        right: 1805%;

        top: -80%;

    }

    #compThea::after{

        right: 2070%;

        top: -70%;

    }

    #ecoles::after{

        right: 1120%;

        top: -60%;

    }

    #maisonEdition::after {

        right: 1320%;

        top: -85%;

    }

    #contact::after {

        right: 230%;

        top: -5%;

    }

    #ets::after {

        left: 2150%;

        top: -125%;

    }

    #bielo::after {

        right: -2910%;

        top: -76%;

    }

    #etc::after {

        left: 680%;

        top: 6%;

    }

    #etm::after {

        left: 800%;

        top: -125%;

    }

}



/* For 1880px resolutions : */

@media (max-width: 1880px){

    #assos::after{

        right: 1573%;

        top: -135%;

    }

    #compThea::after{

        right: 2075%;

        top: -140%;

    }

    #ecoles::after{

        right: 1050%;

        top: -110%;

    }

    #maisonEdition::after {

        right: 1220%;

        top: -130%;

    }

    #contact::after {

        right: 55%;

        top: -30%;

    }

    #ets::after {

        left: 2170%;

        top: -206.1%;

    }

    #bielo::after {

        right: -3510%;

        top: -145%;

    }

    #etc::after {

        left: 590%;

        top: -10%;

    }

    #etm::after {

        left: 600%;

        top: -185%;

    }

}



/* For 1680px resolutions : */

@media (max-width: 1680px){

    

}



/* For 1280px resolutions : */

@media (max-width: 1280px){

    

}



/* For mobiles (720px) */

@media (max-width: 720px){

    

}