/*typeface.html*/

h1 {
    color: white;
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}


h2 {
    color: white;
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}


h3 {
    color: #FF0000;
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}


.links {
    font-family: Futura;
    color: #FF0000;
}



/*typefacecode.html*/

.wrapper2 {
    width: 820px;
    height: 780px;
    margin: 0 auto;
    position: relative;
}

.boxA {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1a {
    position: absolute;
    top: 55px;
    left: 20px;
    width: 3px;
    height: 65px;
    transform: rotate(13deg);
    background-color: black;
}

.line2a {
    position: absolute;
    top: 47;
    left: 34;
    width: 3px;
    height: 15px;
    transform: rotate(75deg);
    background-color: black;
    border-radius: 100px;
}

.line3a {
    position: absolute;
    top: 28;
    left: 52px;
    width: 3px;
    height: 30px;
    transform: rotate(50deg);
    background-color: black;
    border-radius: 100px;
}

.line4a {
    position: absolute;
    top: 13;
    left: 72px;
    width: 3px;
    height: 30px;
    transform: rotate(57deg);
    background-color: black;
    border-radius: 100px;
}

.line5a {
    position: absolute;
    top: 13;
    left: 90px;
    width: 3px;
    height: 15px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line6a {
    position: absolute;
    top: 19;
    left: 101px;
    width: 3px;
    height: 50px;
    transform: rotate(170deg);
    background-color: black;
    border-radius: 100px;
}

.line7a {
    position: absolute;
    top: 68;
    left: 103px;
    width: 3px;
    height: 53px;
    transform: rotate(185deg);
    background-color: black;
    border-radius: 100px;
}

.line8a {
    position: absolute;
    top: 93;
    left: 85px;
    width: 3px;
    height: 35px;
    transform: rotate(300deg);
    background-color: black;
    border-radius: 100px;
}

.line9a {
    position: absolute;
    top: 71;
    left: 60px;
    width: 3px;
    height: 35px;
    transform: rotate(320deg);
    background-color: black;
    border-radius: 100px;
}

.line10a {
    position: absolute;
    top: 43;
    left: 30px;
    width: 3px;
    height: 30px;
    transform: rotate(310deg);
    background-color: black;
    border-radius: 100px;
}

.line11a {
    position: absolute;
    top: 65;
    left: 45px;
    width: 3px;
    height: 13px;
    transform: rotate(315deg);
    background-color: black;
    border-radius: 100px;
}



.boxB {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1b {
    position: absolute;
    top: 70px;
    left: 20px;
    width: 3px;
    height: 50px;
    background-color: black;
    border-radius: 100px;
}

.line2b {
    position: absolute;
    top: 22px;
    left: 23px;
    width: 3px;
    height: 50px;
    transform: rotate(8deg);
    background-color: black;
    border-radius: 100px;
}

.line3b {
    position: absolute;
    top: 102px;
    left: 34px;
    width: 3px;
    height: 30px;
    transform: rotate(87deg);
    background-color: black;
    border-radius: 100px;
}

.line4b {
    position: absolute;
    top: 102px;
    left: 64px;
    width: 3px;
    height: 30px;
    transform: rotate(93deg);
    background-color: black;
    border-radius: 100px;
}

.line5b {
    position: absolute;
    top: 102px;
    left: 78px;
    width: 3px;
    height: 17px;
    transform: rotate(-7deg);
    background-color: black;
    border-radius: 100px;
}

.line6b {
    position: absolute;
    top: 89px;
    left: 78px;
    width: 3px;
    height: 17px;
    transform: rotate(7deg);
    background-color: black;
    border-radius: 100px;
}

.line7b {
    position: absolute;
    top: 65px;
    left: 55px;
    width: 3px;
    height: 50px;
    transform: rotate(92deg);
    background-color: black;
    border-radius: 100px;
}

.line8b {
    position: absolute;
    top: 82px;
    left: 25px;
    width: 3px;
    height: 12px;
    transform: rotate(100deg);
    background-color: black;
    border-radius: 100px;
}

.line9b {
    position: absolute;
    top: 20px;
    left: 50px;
    width: 3px;
    height: 70px;
    transform: rotate(60deg);
    background-color: black;
    border-radius: 100px;
}

.line10b {
    position: absolute;
    top: -7px;
    left: 56px;
    width: 3px;
    height: 58px;
    transform: rotate(125deg);
    background-color: black;
    border-radius: 100px;
}

.line11b {
    position: absolute;
    top: 16px;
    left: 30px;
    width: 3px;
    height: 10px;
    transform: rotate(65deg);
    background-color: black;
    border-radius: 100px;
}

.line12b {
    position: absolute;
    top: 4px;
    left: 33px;
    width: 3px;
    height: 16px;
    transform: rotate(-9deg);
    background-color: black;
    border-radius: 100px;
}



.boxC {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1c {
    position: absolute;
    top: 64px;
    left: 20px;
    width:3px;
    height: 52px;
    transform: rotate(4deg);
    background-color: black;
}

.line2c {
    position: absolute;
    top:25px;
    left: 21px;
    width:3px;
    height: 40px;
    transform: rotate(-2deg);
    background-color: black;
    border-radius: 100px;
}

.line3c {
    position: absolute;
    top:16px;
    left: 27px;
    width:3px;
    height: 17px;
    transform: rotate(85deg);
    background-color: black;
}

.line4c {
    position: absolute;
    top:15px;
    left: 41px;
    width:3px;
    height: 13px;
    transform: rotate(67deg);
    background-color: black;
    border-radius: 100px;
}

.line5c {
    position: absolute;
    top:12px;
    left: 51px;
    width:3px;
    height: 11px;
    transform: rotate(71deg);
    background-color: black;
    border-radius: 100px;
}

.line6c {
    position: absolute;
    top:6px;
    left: 65px;
    width:3px;
    height: 20px;
    transform: rotate(91deg);
    background-color: black;
    border-radius: 100px;
}

.line7c {
    position: absolute;
    top: 110px;
    left: 23px;
    width: 3px;
    height: 8px;
    transform: rotate(78deg);
    background-color: black;
    border-radius: 100px;
}

.line8c {
    position: absolute;
    top: 110px;
    left: 29px;
    width: 3px;
    height: 7px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line9c {
    position: absolute;
    top: 108px;
    left: 38px;
    width: 3px;
    height: 15px;
    transform: rotate(105deg);
    background-color: black;
    border-radius: 100px;
}

.line10c {
    position: absolute;
    top: 113px;
    left: 48px;
    width: 3px;
    height: 9px;
    transform: rotate(94deg);
    background-color: black;
    border-radius: 100px;
}

.line11c {
    position: absolute;
    top: 100px;
    left: 67px;
    width: 3px;
    height: 33px;
    transform: rotate(85deg);
    background-color: black;
    border-radius: 100px;
}

.line12c {
    position: absolute;
    top: 109px;
    left: 86px;
    width: 3px;
    height: 9px;
    transform: rotate(65deg);
    background-color: black;
    border-radius: 100px;
}

.line13c {
    position: absolute;
    top: 106px;
    left: 91px;
    width: 3px;
    height:7px;
    transform: rotate(30deg);
    background-color: black;
    border-radius: 100px;
}



.boxD {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1d {
    position: absolute;
    top: 90px;
    left: 35px;
    width:3px;
    height: 40px;
    transform: rotate(89deg);
    background-color: black;
    border-radius: 100px;
}

.line2d {
    position: absolute;
    top: 92px;
    left: 72px;
    width:3px;
    height: 37px;
    transform: rotate(93deg);
    background-color: black;
    border-radius: 100px;
}

.line3d {
    position: absolute;
    top: 86px;
    left: 15px;
    width:3px;
    height: 25px;
    transform: rotate(-5deg);
    background-color: black;
    border-radius: 100px;
}

.line4d {
    position: absolute;
    top: 79px;
    left: 14px;
    width: 3px;
    height: 8px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line5d {
    position: absolute;
    top: 47px;
    left: 16px;
    width: 3px;
    height: 33px;
    transform: rotate(6deg);
    background-color: black;
    border-radius: 100px;
}

.line6d {
    position: absolute;
    top: 24px;
    left: 20px;
    width: 3px;
    height: 25px;
    transform: rotate(11deg);
    background-color: black;
    border-radius: 100px;
}

.line7d {
    position: absolute;
    top: 12px;
    left: 27px;
    width: 3px;
    height: 15px;
    transform: rotate(40deg);
    background-color: black;
    border-radius: 100px;
}

.line8d {
    position: absolute;
    top: 7px;
    left: 35px;
    width: 3px;
    height: 9px;
    transform: rotate(55deg);
    background-color: black;
    border-radius: 100px;
}

.line9d {
    position: absolute;
    top: 4px;
    left: 42px;
    width: 3px;
    height: 8px;
    transform: rotate(73deg);
    background-color: black;
    border-radius: 100px;
}

.line10d {
    position: absolute;
    top: 2px;
    left: 49px;
    width: 3px;
    height: 8px;
    transform: rotate(80deg);
    background-color: black;
    border-radius: 100px;
}

.line11d {
    position: absolute;
    top: 1px;
    left: 56px;
    width: 3px;
    height: 8px;
    transform: rotate(85deg);
    background-color: black;
    border-radius: 100px;
}

.line12d {
    position: absolute;
    top: 2px;
    left: 62px;
    width: 3px;
    height: 8px;
    transform: rotate(115deg);
    background-color: black;
    border-radius: 100px;
}

.line13d {
    position: absolute;
    top: 2px;
    left: 62px;
    width: 3px;
    height: 8px;
    transform: rotate(115deg);
    background-color: black;
    border-radius: 100px;
}

.line13d {
    position: absolute;
    top: 2px;
    left: 62px;
    width: 3px;
    height: 8px;
    transform: rotate(115deg);
    background-color: black;
    border-radius: 100px;
}

.line14d {
    position: absolute;
    top: 6px;
    left: 65px;
    width: 3px;
    height: 15px;
    transform: rotate(175deg);
    background-color: black;
    border-radius: 100px;
}

.line15d {
    position: absolute;
    top: 19px;
    left: 70px;
    width: 3px;
    height: 15px;
    transform: rotate(145deg);
    background-color: black;
    border-radius: 100px;
}

.line16d {
    position: absolute;
    top: 87px;
    left: 90px;
    width: 3px;
    height: 25px;
    transform: rotate(3deg);
    background-color: black;
    border-radius: 100px;
}

.line17d {
    position: absolute;
    top: 63px;
    left: 90px;
    width: 3px;
    height: 25px;
    transform: rotate(-4deg);
    background-color: black;
    border-radius: 100px;
}

.line18d {
    position: absolute;
    top: 45px;
    left: 87px;
    width: 3px;
    height: 20px;
    transform: rotate(-12deg);
    background-color: black;
    border-radius: 100px;
}

.line19d {
    position: absolute;
    top: 26px;
    left: 76px;
    width: 3px;
    height: 17px;
    transform: rotate(-40deg);
    background-color: black;
    border-radius: 100px;
}

.line20d {
    position: absolute;
    top: 40px;
    left: 83px;
    width: 3px;
    height: 7px;
    transform: rotate(-35deg);
    background-color: black;
    border-radius: 100px;
}



.boxE {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1e {
    position: absolute;
    top: 95px;
    left: 65px;
    width:3px;
    height: 45px;
    transform: rotate(89deg);
    background-color: black;
    border-radius: 100px;
}

.line2e {
    position: absolute;
    top: 74px;
    left: 42px;
    width:3px;
    height: 45px;
    transform: rotate(-3deg);
    background-color: black;
    border-radius: 100px;
}

.line3e {
    position: absolute;
    top: 45px;
    left: 42px;
    width:3px;
    height: 30px;
    transform: rotate(4deg);
    background-color: black;
    border-radius: 100px;
}

.line4e {
    position: absolute;
    top: 38px;
    left: 42px;
    width:3px;
    height: 17px;
    transform: rotate(80deg);
    background-color: black;
    border-radius: 100px;
}

.line5e {
    position: absolute;
    top: 25px;
    left: 35px;
    width:3px;
    height: 24px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line6e {
    position: absolute;
    top: 20px;
    left: 39px;
    width:3px;
    height: 10px;
    transform: rotate(85deg);
    background-color: black;
    border-radius: 100px;
}

.line7e {
    position: absolute;
    top: 11px;
    left: 58px;
    width:3px;
    height: 30px;
    transform: rotate(95deg);
    background-color: black;
    border-radius: 100px;
}

.line8e {
    position: absolute;
    top:43px;
    left: 52px;
    width:3px;
    height: 5px;
    transform: rotate(96deg);
    background-color: black;
    border-radius: 100px;
}

.line9e {
    position: absolute;
    top:42px;
    left: 58px;
    width:3px;
    height: 10px;
    transform: rotate(104deg);
    background-color: black;
    border-radius: 100px;
}

.line10e {
    position: absolute;
    top:41px;
    left: 68px;
    width:3px;
    height: 15px;
    transform: rotate(95deg);
    background-color: black;
    border-radius: 100px;
}



.boxF {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1f {
    position: absolute;
    top: 43px;
    left: 82px;
    width: 3px;
    height: 45px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line2f {
    position: absolute;
    top: 61px;
    left: 58px;
    width: 3px;
    height: 6px;
    transform: rotate(117deg);
    background-color: black;
    border-radius: 100px;
}

.line3f {
    position: absolute;
    top: 61px;
    left: 55px;
    width: 3px;
    height: 50px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line4f {
    position: absolute;
    top: 110px;
    left: 54px;
    width: 3px;
    height: 7px;
    transform: rotate(20deg);
    background-color: black;
    border-radius: 100px;
}

.line5f {
    position: absolute;
    top: 115px;
    left: 51px;
    width: 3px;
    height: 5px;
    transform: rotate(70deg);
    background-color: black;
    border-radius: 100px;
}

.line6f {
    position: absolute;
    top: 116px;
    left: 47px;
    width: 3px;
    height: 4px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line7f {
    position: absolute;
    top: 10px;
    left: 46px;
    width: 3px;
    height: 109px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line8f {
    position: absolute;
    top: 6px;
    left: 49px;
    width: 3px;
    height: 8px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line9f {
    position: absolute;
    top: 8px;
    left: 54px;
    width: 3px;
    height: 5px;
    transform: rotate(100deg);
    background-color: black;
    border-radius: 100px;
}

.line10f {
    position: absolute;
    top: 10px;
    left: 57px;
    width: 3px;
    height: 6px;
    transform: rotate(140deg);
    background-color: black;
    border-radius: 100px;
}

.line11f {
    position: absolute;
    top: -4px;
    left: 82px;
    width: 3px;
    height: 50px;
    transform: rotate(104deg);
    background-color: black;
    border-radius: 100px;
}



.boxG {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1g {
    position: absolute;
    top: 3px;
    left: 90px;
    width: 3px;
    height: 6px;
    transform: rotate(60deg);
    background-color: black;
    border-radius: 100px;
}

.line2g {
    position: absolute;
    top: -2px;
    left: 62px;
    width: 3px;
    height: 80px;
    transform: rotate(40deg);
    background-color: black;
    border-radius: 100px;
}

.line3g {
    position: absolute;
    top: 55px;
    left: 63px;
    width: 3px;
    height: 75px;
    transform: rotate(134deg);
    background-color: black;
    border-radius: 100px;
}

.line4g {
    position: absolute;
    top: 78px;
    left: 88px;
    width: 3px;
    height: 40px;
    transform: rotate(-5deg);
    background-color: black;
    border-radius: 100px;
}

.line5g {
    position: absolute;
    top: 40px;
    left: 88px;
    width: 3px;
    height: 40px;
    transform: rotate(5deg);
    background-color: black;
    border-radius: 100px;
}

.boxH {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1h {
    position: absolute;
    top: 40px;
    left: 90px;
    width: 3px;
    height: 80px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line2h {
    position: absolute;
    top: 23px;
    left: 65px;
    width: 3px;
    height: 50px;
    transform: rotate(75deg);
    background-color: black;
    border-radius: 100px;
}

.line3h {
    position: absolute;
    top: 20px;
    left: 42px;
    width: 3px;
    height: 35px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line4h {
    position: absolute;
    top: 13px;
    left: 41px;
    width: 3px;
    height: 8px;
    transform: rotate(-14deg);
    background-color: black;
    border-radius: 100px;
}

.line5h {
    position: absolute;
    top: 6px;
    left: 39px;
    width: 3px;
    height: 8px;
    transform: rotate(-20deg);
    background-color: black;
    border-radius: 100px;
}

.line6h {
    position: absolute;
    top: 0px;
    left: 35px;
    width: 3px;
    height: 8px;
    transform: rotate(-45deg);
    background-color: black;
    border-radius: 100px;
}

.line7h {
    position: absolute;
    top: 54px;
    left: 42px;
    width: 3px;
    height: 20px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line8h {
    position: absolute;
    top: 73px;
    left: 44px;
    width: 3px;
    height: 15px;
    transform: rotate(165deg);
    background-color: black;
    border-radius: 100px;
}

.line9h {
    position: absolute;
    top: 80px;
    left: 51px;
    width: 3px;
    height: 12px;
    transform: rotate(86deg);
    background-color: black;
    border-radius: 100px;
}

.line10h {
    position: absolute;
    top: 85px;
    left: 57px;
    width: 3px;
    height: 15px;
    transform: rotate(173deg);
    background-color: black;
    border-radius: 100px;
}

.line11h {
    position: absolute;
    top: 98px;
    left: 57px;
    width: 3px;
    height: 18px;
    transform: rotate(185deg);
    background-color: black;
    border-radius: 100px;
}

.boxI {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1i {
    position: absolute;
    top: 90px;
    left: 50px;
    width: 3px;
    height: 27px;
    transform: rotate(10deg);
    background-color: black;
    border-radius: 100px;
}

.line2i {
    position: absolute;
    top: 65px;
    left: 54px;
    width: 3px;
    height: 27px;
    transform: rotate(8deg);
    background-color: black;
    border-radius: 100px;
}

.line3i {
    position: absolute;
    top: 8px;
    left: 58px;
    width: 3px;
    height: 60px;
    transform: rotate(5deg);
    background-color: black;
    border-radius: 100px;
}



.boxJ {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1j {
    position: absolute;
    top: 90px;
    left: 70px;
    width: 3px;
    height: 27px;
    transform: rotate(10deg);
    background-color: black;
    border-radius: 100px;
}

.line2j {
    position: absolute;
    top: 22px;
    left: 75px;
    width: 3px;
    height: 70px;
    transform: rotate(5deg);
    background-color: black;
    border-radius: 100px;
}

.line3j {
    position: absolute;
    top: -16px;
    left: 73px;
    width: 3px;
    height: 85px;
    transform: rotate(60deg);
    background-color: black;
    border-radius: 100px;
}

.line4j {
    position: absolute;
    top: 109px;
    left: 62px;
    width: 3px;
    height: 12px;
    transform: rotate(95deg);
    background-color: black;
    border-radius: 100px;
}

.line5j {
    position: absolute;
    top: 111px;
    left: 55px;
    width: 3px;
    height: 5px;
    transform: rotate(115deg);
    background-color: black;
    border-radius: 100px;
}

.line6j {
    position: absolute;
    top: 89px;
    left: 51px;
    width: 3px;
    height: 25px;
    transform: rotate(-10deg);
    background-color: black;
    border-radius: 100px;
}

.line7j {
    position: absolute;
    top: 83px;
    left: 47px;
    width: 3px;
    height: 8px;
    transform: rotate(-30deg);
    background-color: black;
    border-radius: 100px;
}

.line8j {
    position: absolute;
    top: 78px;
    left: 45px;
    width: 3px;
    height: 7px;
    transform: rotate(-10deg);
    background-color: black;
    border-radius: 100px;
}

.line9j {
    position: absolute;
    top: 75px;
    left: 43px;
    width: 3px;
    height: 5px;
    transform: rotate(-50deg);
    background-color: black;
    border-radius: 100px;
}



.boxK {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1k {
    position: absolute;
    top: 80px;
    left: 30px;
    width: 3px;
    height: 40px;
    transform: rotate(-8deg);
    background-color: black;
    border-radius: 100px;
}

.line2k {
    position: absolute;
    top: 32px;
    left: 29px;
    width: 3px;
    height: 50px;
    transform: rotate(3deg);
    background-color: black;
    border-radius: 100px;
}

.line3k {
    position: absolute;
    top: 14px;
    left: 29px;
    width: 3px;
    height: 20px;
    transform: rotate(-7deg);
    background-color: black;
    border-radius: 100px;
}

.line4k {
    position: absolute;
    top: 30px;
    left: 40px;
    width: 3px;
    height: 20px;
    transform: rotate(65deg);
    background-color: black;
    border-radius: 100px;
}

.line5k {
    position: absolute;
    top: 17px;
    left: 62px;
    width: 3px;
    height: 30px;
    transform: rotate(74deg);
    background-color: black;
    border-radius: 100px;
}

.line6k {
    position: absolute;
    top: 73px;
    left: 39px;
    width: 3px;
    height: 25px;
    transform: rotate(110deg);
    background-color: black;
    border-radius: 100px;
}

.line7k {
    position: absolute;
    top: 88px;
    left: 52px;
    width: 3px;
    height: 30px;
    transform: rotate(170deg);
    background-color: black;
    border-radius: 100px;
}



.boxL {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1l {
    position: absolute;
    top: 70px;
    left: 30px;
    width: 3px;
    height: 35px;
    transform: rotate(6deg);
    background-color: black;
    border-radius: 100px;
}

.line2l {
    position: absolute;
    top: 87px;
    left: 47px;
    width: 3px;
    height: 40px;
    transform: rotate(100deg);
    background-color: black;
    border-radius: 100px;
}

.line3l {
    position: absolute;
    top: 66px;
    left: 28px;
    width: 3px;
    height: 10px;
    transform: rotate(100deg);
    background-color: black;
    border-radius: 100px;
}

.line4l {
    position: absolute;
    top: 66px;
    left: 23px;
    width: 3px;
    height: 5px;
    transform: rotate(150deg);
    background-color: black;
    border-radius: 100px;
}

.line5l {
    position: absolute;
    top: 62px;
    left: 22px;
    width: 3px;
    height: 5px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line6l {
    position: absolute;
    top: 57px;
    left: 22px;
    width: 3px;
    height: 6px;
    transform: rotate(5deg);
    background-color: black;
    border-radius: 100px;
}

.line7l {
    position: absolute;
    top: 43px;
    left: 21px;
    width: 3px;
    height: 15px;
    transform: rotate(-10deg);
    background-color: black;
    border-radius: 100px;
}

.line8l {
    position: absolute;
    top: 28px;
    left: 21px;
    width: 3px;
    height: 16px;
    transform: rotate(8deg);
    background-color: black;
    border-radius: 100px;
}

.line9l {
    position: absolute;
    top: 14px;
    left: 21px;
    width: 3px;
    height: 16px;
    transform: rotate(-6deg);
    background-color: black;
    border-radius: 100px;
}

.line10l {
    position: absolute;
    top: 9px;
    left: 19px;
    width: 3px;
    height: 6px;
    transform: rotate(-30deg);
    background-color: black;
    border-radius: 100px;
}

.line11l {
    position: absolute;
    top: 3px;
    left: 14px;
    width: 3px;
    height: 10px;
    transform: rotate(-60deg);
    background-color: black;
    border-radius: 100px;
}



.boxM {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1m {
    position: absolute;
    top: 85px;
    left: 20px;
    width: 3px;
    height: 20px;
    transform: rotate(-1deg);
    background-color: black;
    border-radius: 100px;
}

.line2m {
    position: absolute;
    top: 79px;
    left: 20px;
    width: 3px;
    height: 7px;
    transform: rotate(10deg);
    background-color: black;
    border-radius: 100px;
}

.line3m {
    position: absolute;
    top: 75px;
    left: 22px;
    width: 3px;
    height: 5px;
    transform: rotate(25deg);
    background-color: black;
    border-radius: 100px;
}

.line4m {
    position: absolute;
    top: 72px;
    left: 25px;
    width: 3px;
    height: 7px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line5m {
    position: absolute;
    top: 73px;
    left: 30px;
    width: 3px;
    height: 7px;
    transform: rotate(110deg);
    background-color: black;
    border-radius: 100px;
}

.line6m {
    position: absolute;
    top: 80px;
    left: 38px;
    width: 3px;
    height: 8px;
    transform: rotate(140deg);
    background-color: black;
    border-radius: 100px;
}

.line7m {
    position: absolute;
    top: 77px;
    left: 34px;
    width: 3px;
    height: 5px;
    transform: rotate(140deg);
    background-color: black;
    border-radius: 100px;
}

.line8m {
    position: absolute;
    top: 86px;
    left: 41px;
    width: 3px;
    height: 10px;
    transform: rotate(-10deg);
    background-color: black;
    border-radius: 100px;
}

.line9m {
    position: absolute;
    top: 95px;
    left: 44px;
    width: 3px;
    height: 13px;
    transform: rotate(-20deg);
    background-color: black;
    border-radius: 100px;
}

.line10m {
    position: absolute;
    top: 105px;
    left: 47px;
    width: 3px;
    height: 5px;
    transform: rotate(140deg);
    background-color: black;
    border-radius: 100px;
}

.line11m {
    position: absolute;
    top: 107px;
    left: 50px;
    width: 3px;
    height: 5px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line12m {
    position: absolute;
    top: 95px;
    left: 53px;
    width: 3px;
    height: 15px;
    transform: rotate(10deg);
    background-color: black;
    border-radius: 100px;
}

.line13m {
    position: absolute;
    top: 86px;
    left: 54px;
    width: 3px;
    height: 10px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line14m {
    position: absolute;
    top: 60px;
    left: 53px;
    width: 3px;
    height: 30px;
    transform: rotate(-6deg);
    background-color: black;
    border-radius: 100px;
}

.line15m {
    position: absolute;
    top: 46px;
    left: 52px;
    width: 3px;
    height: 18px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line16m {
    position: absolute;
    top: 32px;
    left: 53px;
    width: 3px;
    height: 18px;
    transform: rotate(9deg);
    background-color: black;
    border-radius: 100px;
}

.line17m {
    position: absolute;
    top: 17px;
    left: 56px;
    width: 3px;
    height: 18px;
    transform: rotate(15deg);
    background-color: black;
    border-radius: 100px;
}

.line18m {
    position: absolute;
    top: 6px;
    left: 61px;
    width: 3px;
    height: 13px;
    transform: rotate(22deg);
    background-color: black;
    border-radius: 100px;
}

.line19m {
    position: absolute;
    top: 6px;
    left: 66px;
    width: 3px;
    height: 50px;
    transform: rotate(-7deg);
    background-color: black;
    border-radius: 100px;
}

.line20m {
    position: absolute;
    top: 52px;
    left: 73px;
    width: 3px;
    height: 45px;
    transform: rotate(-11deg);
    background-color: black;
    border-radius: 100px;
}

.line21m {
    position: absolute;
    top: 95px;
    left: 80px;
    width: 3px;
    height: 20px;
    transform: rotate(-17deg);
    background-color: black;
    border-radius: 100px;
}



.boxN {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1n {
    position: absolute;
    top: 85px;
    left: 20px;
    width: 3px;
    height: 20px;
    transform: rotate(-1deg);
    background-color: black;
    border-radius: 100px;
}

.line2n {
    position: absolute;
    top: 79px;
    left: 20px;
    width: 3px;
    height: 7px;
    transform: rotate(10deg);
    background-color: black;
    border-radius: 100px;
}

.line3n {
    position: absolute;
    top: 75px;
    left: 22px;
    width: 3px;
    height: 5px;
    transform: rotate(25deg);
    background-color: black;
    border-radius: 100px;
}

.line4n {
    position: absolute;
    top: 72px;
    left: 25px;
    width: 3px;
    height: 7px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line5n {
    position: absolute;
    top: 73px;
    left: 30px;
    width: 3px;
    height: 7px;
    transform: rotate(110deg);
    background-color: black;
    border-radius: 100px;
}

.line6n {
    position: absolute;
    top: 80px;
    left: 38px;
    width: 3px;
    height: 8px;
    transform: rotate(140deg);
    background-color: black;
    border-radius: 100px;
}

.line7n {
    position: absolute;
    top: 77px;
    left: 34px;
    width: 3px;
    height: 5px;
    transform: rotate(140deg);
    background-color: black;
    border-radius: 100px;
}

.line8n {
    position: absolute;
    top: 86px;
    left: 41px;
    width: 3px;
    height: 10px;
    transform: rotate(-10deg);
    background-color: black;
    border-radius: 100px;
}

.line9n {
    position: absolute;
    top: 95px;
    left: 44px;
    width: 3px;
    height: 13px;
    transform: rotate(-20deg);
    background-color: black;
    border-radius: 100px;
}

.line10n {
    position: absolute;
    top: 105px;
    left: 47px;
    width: 3px;
    height: 5px;
    transform: rotate(140deg);
    background-color: black;
    border-radius: 100px;
}

.line11n {
    position: absolute;
    top: 107px;
    left: 50px;
    width: 3px;
    height: 5px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line12n {
    position: absolute;
    top: 95px;
    left: 53px;
    width: 3px;
    height: 15px;
    transform: rotate(10deg);
    background-color: black;
    border-radius: 100px;
}

.line13n {
    position: absolute;
    top: 86px;
    left: 54px;
    width: 3px;
    height: 10px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line14n {
    position: absolute;
    top: 60px;
    left: 53px;
    width: 3px;
    height: 30px;
    transform: rotate(-6deg);
    background-color: black;
    border-radius: 100px;
}

.line15n {
    position: absolute;
    top: 46px;
    left: 52px;
    width: 3px;
    height: 18px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line16n {
    position: absolute;
    top: 32px;
    left: 53px;
    width: 3px;
    height: 18px;
    transform: rotate(9deg);
    background-color: black;
    border-radius: 100px;
}

.line17n {
    position: absolute;
    top: 17px;
    left: 56px;
    width: 3px;
    height: 18px;
    transform: rotate(15deg);
    background-color: black;
    border-radius: 100px;
}

.line18n {
    position: absolute;
    top: 6px;
    left: 61px;
    width: 3px;
    height: 13px;
    transform: rotate(22deg);
    background-color: black;
    border-radius: 100px;
}



.boxO {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1o {
    position: absolute;
    top: 85px;
    left: 50px;
    width: 3px;
    height: 35px;
    transform: rotate(105deg);
    background-color: black;
    border-radius: 100px;
}

.line2o {
    position: absolute;
    top: 96px;
    left: 34px;
    width: 3px;
    height: 10px;
    transform: rotate(100deg);
    background-color: black;
    border-radius: 100px;
}

.line3o {
    position: absolute;
    top: 92px;
    left: 27px;
    width: 3px;
    height: 10px;
    transform: rotate(140deg);
    background-color: black;
    border-radius: 100px;
}

.line4o {
    position: absolute;
    top: 84px;
    left: 22px;
    width: 3px;
    height: 10px;
    transform: rotate(155deg);
    background-color: black;
    border-radius: 100px;
}

.line5o {
    position: absolute;
    top: 66px;
    left: 19px;
    width: 3px;
    height: 20px;
    transform: rotate(173deg);
    background-color: black;
    border-radius: 100px;
}

.line6o {
    position: absolute;
    top: 48px;
    left: 18px;
    width: 3px;
    height: 20px;
    transform: rotate(180deg);
    background-color: black;
    border-radius: 100px;
}

.line7o {
    position: absolute;
    top: 34px;
    left: 20px;
    width: 3px;
    height: 15px;
    transform: rotate(195deg);
    background-color: black;
    border-radius: 100px;
}

.line8o {
    position: absolute;
    top: 26px;
    left: 24px;
    width: 3px;
    height: 10px;
    transform: rotate(205deg);
    background-color: black;
    border-radius: 100px;
}

.line9o {
    position: absolute;
    top: 16px;
    left: 31px;
    width: 3px;
    height: 15px;
    transform: rotate(233deg);
    background-color: black;
    border-radius: 100px;
}

.line10o {
    position: absolute;
    top: 13px;
    left: 40px;
    width: 3px;
    height: 10px;
    transform: rotate(245deg);
    background-color: black;
    border-radius: 100px;
}

.line11o {
    position: absolute;
    top: 11px;
    left: 46px;
    width: 3px;
    height: 7px;
    transform: rotate(235deg);
    background-color: black;
    border-radius: 100px;
}

.line12o {
    position: absolute;
    top: 10px;
    left: 50px;
    width: 3px;
    height: 5px;
    transform: rotate(80deg);
    background-color: black;
    border-radius: 100px;
}

.line13o {
    position: absolute;
    top: 11px;
    left: 50px;
    width: 3px;
    height: 5px;
    transform: rotate(100deg);
    background-color: black;
    border-radius: 100px;
}

.line14o {
    position: absolute;
    top: 11px;
    left: 50px;
    width: 3px;
    height: 5px;
    transform: rotate(105deg);
    background-color: black;
    border-radius: 100px;
}

.line15o {
    position: absolute;
    top: 12px;
    left: 54px;
    width: 3px;
    height: 6px;
    transform: rotate(110deg);
    background-color: black;
    border-radius: 100px;
}

.line16o {
    position: absolute;
    top: 102px;
    left: 70px;
    width: 3px;
    height: 10px;
    transform: rotate(94deg);
    background-color: black;
    border-radius: 100px;
}

.line17o {
    position: absolute;
    top: 102px;
    left: 78px;
    width: 3px;
    height: 8px;
    transform: rotate(75deg);
    background-color: black;
    border-radius: 100px;
}

.line18o {
    position: absolute;
    top: 98px;
    left: 85px;
    width: 3px;
    height: 10px;
    transform: rotate(60deg);
    background-color: black;
    border-radius: 100px;
}

.line19o {
    position: absolute;
    top: 92px;
    left: 92px;
    width: 3px;
    height: 10px;
    transform: rotate(40deg);
    background-color: black;
    border-radius: 100px;
}

.line20o {
    position: absolute;
    top: 88px;
    left: 95px;
    width: 3px;
    height: 7px;
    transform: rotate(10deg);
    background-color: black;
    border-radius: 100px;
}

.line21o {
    position: absolute;
    top: 83px;
    left: 98px;
    width: 3px;
    height: 8px;
    transform: rotate(50deg);
    background-color: black;
    border-radius: 100px;
}

.line22o {
    position: absolute;
    top: 78px;
    left: 101px;
    width: 3px;
    height: 7px;
    transform: rotate(10deg);
    background-color: black;
    border-radius: 100px;
}

.line23o {
    position: absolute;
    top: 72px;
    left: 101px;
    width: 3px;
    height: 7px;
    transform: rotate(-9deg);
    background-color: black;
    border-radius: 100px;
}

.line24o {
    position: absolute;
    top: 58px;
    left: 100px;
    width: 3px;
    height: 15px;
    transform: rotate(-8deg);
    background-color: black;
    border-radius: 100px;
}

.line25o {
    position: absolute;
    top: 49px;
    left: 98px;
    width: 3px;
    height: 10px;
    transform: rotate(-13deg);
    background-color: black;
    border-radius: 100px;
}

.line26o {
    position: absolute;
    top: 41px;
    left: 95px;
    width: 3px;
    height: 10px;
    transform: rotate(-25deg);
    background-color: black;
    border-radius: 100px;
}

.line27o {
    position: absolute;
    top: 34px;
    left: 91px;
    width: 3px;
    height: 10px;
    transform: rotate(-35deg);
    background-color: black;
    border-radius: 100px;
}

.line28o {
    position: absolute;
    top: 28px;
    left: 86px;
    width: 3px;
    height: 10px;
    transform: rotate(-45deg);
    background-color: black;
    border-radius: 100px;
}

.line29o {
    position: absolute;
    top: 7px;
    left: 70px;
    width: 3px;
    height: 32px;
    transform: rotate(-62deg);
    background-color: black;
    border-radius: 100px;
}



.boxP {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1p {
    position: absolute;
    top: -10px;
    left: 50px;
    width: 3px;
    height: 40px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line2p {
    position: absolute;
    top: 9px;
    left: 69px;
    width: 3px;
    height: 60px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line3p {
    position: absolute;
    top: 57px;
    left: 58px;
    width: 3px;
    height: 25px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line4p {
    position: absolute;
    top: 41px;
    left: 45px;
    width: 3px;
    height: 30px;
    transform: rotate(175deg);
    background-color: black;
    border-radius: 100px;
}

.line5p {
    position: absolute;
    top: 10px;
    left: 31px;
    width: 3px;
    height: 73px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line6p {
    position: absolute;
    top: 61px;
    left: 51px;
    width: 3px;
    height: 40px;
    transform: rotate(89deg);
    background-color: black;
    border-radius: 100px;
}

.line7p {
    position: absolute;
    top: 79px;
    left: 72px;
    width: 3px;
    height: 6px;
    transform: rotate(135deg);
    background-color: black;
    border-radius: 100px;
}

.line8p {
    position: absolute;
    top: 83px;
    left: 74px;
    width: 3px;
    height: 10px;
    transform: rotate(175deg);
    background-color: black;
    border-radius: 100px;
}

.line9p {
    position: absolute;
    top: 91px;
    left: 76px;
    width: 3px;
    height: 6px;
    transform: rotate(135deg);
    background-color: black;
    border-radius: 100px;
}

.line10p {
    position: absolute;
    top: 90px;
    left: 82px;
    width: 3px;
    height: 10px;
    transform: rotate(80deg);
    background-color: black;
    border-radius: 100px;
}

.line11p {
    position: absolute;
    top: 93px;
    left: 88px;
    width: 3px;
    height: 6px;
    transform: rotate(135deg);
    background-color: black;
    border-radius: 100px;
}

.line12p {
    position: absolute;
    top: 97px;
    left: 90px;
    width: 3px;
    height: 10px;
    transform: rotate(175deg);
    background-color: black;
    border-radius: 100px;
}



.boxQ {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1q {
    position: absolute;
    top: 85px;
    left: 50px;
    width: 3px;
    height: 35px;
    transform: rotate(105deg);
    background-color: black;
    border-radius: 100px;
}

.line2q {
    position: absolute;
    top: 96px;
    left: 34px;
    width: 3px;
    height: 10px;
    transform: rotate(100deg);
    background-color: black;
    border-radius: 100px;
}

.line3q {
    position: absolute;
    top: 92px;
    left: 27px;
    width: 3px;
    height: 10px;
    transform: rotate(140deg);
    background-color: black;
    border-radius: 100px;
}

.line4q {
    position: absolute;
    top: 84px;
    left: 22px;
    width: 3px;
    height: 10px;
    transform: rotate(155deg);
    background-color: black;
    border-radius: 100px;
}

.line5q {
    position: absolute;
    top: 66px;
    left: 19px;
    width: 3px;
    height: 20px;
    transform: rotate(173deg);
    background-color: black;
    border-radius: 100px;
}

.line6q {
    position: absolute;
    top: 48px;
    left: 18px;
    width: 3px;
    height: 20px;
    transform: rotate(180deg);
    background-color: black;
    border-radius: 100px;
}

.line7q {
    position: absolute;
    top: 34px;
    left: 20px;
    width: 3px;
    height: 15px;
    transform: rotate(195deg);
    background-color: black;
    border-radius: 100px;
}

.line8q {
    position: absolute;
    top: 26px;
    left: 24px;
    width: 3px;
    height: 10px;
    transform: rotate(205deg);
    background-color: black;
    border-radius: 100px;
}

.line9q {
    position: absolute;
    top: 16px;
    left: 31px;
    width: 3px;
    height: 15px;
    transform: rotate(233deg);
    background-color: black;
    border-radius: 100px;
}

.line10q {
    position: absolute;
    top: 13px;
    left: 40px;
    width: 3px;
    height: 10px;
    transform: rotate(245deg);
    background-color: black;
    border-radius: 100px;
}

.line11q {
    position: absolute;
    top: 11px;
    left: 46px;
    width: 3px;
    height: 7px;
    transform: rotate(235deg);
    background-color: black;
    border-radius: 100px;
}

.line12q {
    position: absolute;
    top: 10px;
    left: 50px;
    width: 3px;
    height: 5px;
    transform: rotate(80deg);
    background-color: black;
    border-radius: 100px;
}

.line13q {
    position: absolute;
    top: 11px;
    left: 50px;
    width: 3px;
    height: 5px;
    transform: rotate(100deg);
    background-color: black;
    border-radius: 100px;
}

.line14q {
    position: absolute;
    top: 11px;
    left: 50px;
    width: 3px;
    height: 5px;
    transform: rotate(105deg);
    background-color: black;
    border-radius: 100px;
}

.line15q {
    position: absolute;
    top: 12px;
    left: 54px;
    width: 3px;
    height: 6px;
    transform: rotate(110deg);
    background-color: black;
    border-radius: 100px;
}

.line16q {
    position: absolute;
    top: 102px;
    left: 70px;
    width: 3px;
    height: 10px;
    transform: rotate(94deg);
    background-color: black;
    border-radius: 100px;
}

.line17q {
    position: absolute;
    top: 102px;
    left: 78px;
    width: 3px;
    height: 8px;
    transform: rotate(75deg);
    background-color: black;
    border-radius: 100px;
}

.line18q {
    position: absolute;
    top: 98px;
    left: 85px;
    width: 3px;
    height: 10px;
    transform: rotate(60deg);
    background-color: black;
    border-radius: 100px;
}

.line19q {
    position: absolute;
    top: 92px;
    left: 92px;
    width: 3px;
    height: 10px;
    transform: rotate(40deg);
    background-color: black;
    border-radius: 100px;
}

.line20q {
    position: absolute;
    top: 88px;
    left: 95px;
    width: 3px;
    height: 7px;
    transform: rotate(10deg);
    background-color: black;
    border-radius: 100px;
}

.line21q {
    position: absolute;
    top: 83px;
    left: 98px;
    width: 3px;
    height: 8px;
    transform: rotate(50deg);
    background-color: black;
    border-radius: 100px;
}

.line22q {
    position: absolute;
    top: 78px;
    left: 101px;
    width: 3px;
    height: 7px;
    transform: rotate(10deg);
    background-color: black;
    border-radius: 100px;
}

.line23q {
    position: absolute;
    top: 72px;
    left: 101px;
    width: 3px;
    height: 7px;
    transform: rotate(-9deg);
    background-color: black;
    border-radius: 100px;
}

.line24q {
    position: absolute;
    top: 58px;
    left: 100px;
    width: 3px;
    height: 15px;
    transform: rotate(-8deg);
    background-color: black;
    border-radius: 100px;
}

.line25q {
    position: absolute;
    top: 49px;
    left: 98px;
    width: 3px;
    height: 10px;
    transform: rotate(-13deg);
    background-color: black;
    border-radius: 100px;
}

.line26q {
    position: absolute;
    top: 41px;
    left: 95px;
    width: 3px;
    height: 10px;
    transform: rotate(-25deg);
    background-color: black;
    border-radius: 100px;
}

.line27q {
    position: absolute;
    top: 34px;
    left: 91px;
    width: 3px;
    height: 10px;
    transform: rotate(-35deg);
    background-color: black;
    border-radius: 100px;
}

.line28q {
    position: absolute;
    top: 28px;
    left: 86px;
    width: 3px;
    height: 10px;
    transform: rotate(-45deg);
    background-color: black;
    border-radius: 100px;
}

.line29q {
    position: absolute;
    top: 7px;
    left: 70px;
    width: 3px;
    height: 32px;
    transform: rotate(-62deg);
    background-color: black;
    border-radius: 100px;
}

.line30q {
    position: absolute;
    top: 60px;
    left: 75px;
    width: 3px;
    height: 25px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line31q {
    position: absolute;
    top: 71px;
    left: 89px;
    width: 3px;
    height: 25px;
    transform: rotate(170deg);
    background-color: black;
    border-radius: 100px;
}

.line32q {
    position: absolute;
    top: 94px;
    left: 95px;
    width: 3px;
    height: 25px;
    transform: rotate(160deg);
    background-color: black;
    border-radius: 100px;
}



.boxR {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1r {
    position: absolute;
    top: -10px;
    left: 50px;
    width: 3px;
    height: 40px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line2r {
    position: absolute;
    top: 9px;
    left: 69px;
    width: 3px;
    height: 60px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line3r {
    position: absolute;
    top: 57px;
    left: 58px;
    width: 3px;
    height: 25px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line4r {
    position: absolute;
    top: 41px;
    left: 45px;
    width: 3px;
    height: 30px;
    transform: rotate(175deg);
    background-color: black;
    border-radius: 100px;
}

.line5r {
    position: absolute;
    top: 10px;
    left: 31px;
    width: 3px;
    height: 73px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line6r {
    position: absolute;
    top: 61px;
    left: 51px;
    width: 3px;
    height: 40px;
    transform: rotate(89deg);
    background-color: black;
    border-radius: 100px;
}

.line7r {
    position: absolute;
    top: 79px;
    left: 72px;
    width: 3px;
    height: 6px;
    transform: rotate(135deg);
    background-color: black;
    border-radius: 100px;
}

.line8r {
    position: absolute;
    top: 83px;
    left: 74px;
    width: 3px;
    height: 10px;
    transform: rotate(175deg);
    background-color: black;
    border-radius: 100px;
}

.line9r {
    position: absolute;
    top: 91px;
    left: 76px;
    width: 3px;
    height: 6px;
    transform: rotate(135deg);
    background-color: black;
    border-radius: 100px;
}

.line10r {
    position: absolute;
    top: 90px;
    left: 82px;
    width: 3px;
    height: 10px;
    transform: rotate(80deg);
    background-color: black;
    border-radius: 100px;
}

.line11r {
    position: absolute;
    top: 93px;
    left: 88px;
    width: 3px;
    height: 6px;
    transform: rotate(135deg);
    background-color: black;
    border-radius: 100px;
}

.line12r {
    position: absolute;
    top: 97px;
    left: 90px;
    width: 3px;
    height: 10px;
    transform: rotate(175deg);
    background-color: black;
    border-radius: 100px;
}

.line13r {
    position: absolute;
    top: 80px;
    left: 35px;
    width: 3px;
    height: 30px;
    transform: rotate(185deg);
    background-color: black;
    border-radius: 100px;
}



.boxS {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1s {
    position: absolute;
    top: -25px;
    left: 75px;
    width: 3px;
    height: 60px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line2s {
    position: absolute;
    top: 3px;
    left: 50px;
    width: 3px;
    height: 60px;
    transform: rotate(170deg);
    background-color: black;
    border-radius: 100px;
}

.line3s {
    position: absolute;
    top: 45px;
    left: 69px;
    width: 3px;
    height: 30px;
    transform: rotate(85deg);
    background-color: black;
    border-radius: 100px;
}

.line4s {
    position: absolute;
    top: 52px;
    left: 90px;
    width: 3px;
    height: 15px;
    transform: rotate(95deg);
    background-color: black;
    border-radius: 100px;
}

.line5s {
    position: absolute;
    top: 59px;
    left: 95px;
    width: 3px;
    height: 10px;
    transform: rotate(195deg);
    background-color: black;
    border-radius: 100px;
}

.line6s {
    position: absolute;
    top: 67px;
    left: 97px;
    width: 3px;
    height: 43px;
    transform: rotate(171deg);
    background-color: black;
    border-radius: 100px;
}

.line7s {
    position: absolute;
    top: 80px;
    left: 74px;
    width: 3px;
    height: 55px;
    transform: rotate(92deg);
    background-color: black;
    border-radius: 100px;
}



.boxT {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1t {
    position: absolute;
    top: -15px;
    left: 50px;
    width: 3px;
    height: 75px;
    transform: rotate(60deg);
    background-color: black;
    border-radius: 100px;
}

.line2t {
    position: absolute;
    top: 24px;
    left: 55px;
    width: 3px;
    height: 90px;
    transform: rotate(170deg);
    background-color: black;
    border-radius: 100px;
}



.boxU {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1u {
    position: absolute;
    top: 10px;
    left: 95px;
    width: 3px;
    height: 45px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line2u {
    position: absolute;
    top: 53px;
    left: 91px;
    width: 3px;
    height: 45px;
    transform: rotate(190deg);
    background-color: black;
    border-radius: 100px;
}

.line3u {
    position: absolute;
    top: 96px;
    left: 84px;
    width: 3px;
    height: 15px;
    transform: rotate(205deg);
    background-color: black;
    border-radius: 100px;
}

.line4u {
    position: absolute;
    top: 106px;
    left: 78px;
    width: 3px;
    height: 10px;
    transform: rotate(240deg);
    background-color: black;
    border-radius: 100px;
}

.line5u {
    position: absolute;
    top: 106px;
    left: 67px;
    width: 3px;
    height: 15px;
    transform: rotate(265deg);
    background-color: black;
    border-radius: 100px;
}

.line6u {
    position: absolute;
    top: 110px;
    left: 58px;
    width: 3px;
    height: 7px;
    transform: rotate(275deg);
    background-color: black;
    border-radius: 100px;
}

.line7u {
    position: absolute;
    top: 108px;
    left: 52px;
    width: 3px;
    height: 8px;
    transform: rotate(290deg);
    background-color: black;
    border-radius: 100px;
}

.line8u {
    position: absolute;
    top: 106px;
    left: 47px;
    width: 3px;
    height: 6px;
    transform: rotate(320deg);
    background-color: black;
    border-radius: 100px;
}

.line9u {
    position: absolute;
    top: 100px;
    left: 45px;
    width: 3px;
    height: 8px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line10u {
    position: absolute;
    top: 94px;
    left: 43px;
    width: 3px;
    height: 8px;
    transform: rotate(-40deg);
    background-color: black;
    border-radius: 100px;
}

.line11u {
    position: absolute;
    top: 82px;
    left: 38px;
    width: 3px;
    height: 16px;
    transform: rotate(-30deg);
    background-color: black;
    border-radius: 100px;
}

.line12u {
    position: absolute;
    top: 65px;
    left: 32px;
    width: 3px;
    height: 20px;
    transform: rotate(-15deg);
    background-color: black;
    border-radius: 100px;
}

.line13u {
    position: absolute;
    top: 45px;
    left: 28px;
    width: 3px;
    height: 22px;
    transform: rotate(-7deg);
    background-color: black;
    border-radius: 100px;
}

.line14u {
    position: absolute;
    top: 37px;
    left: 26px;
    width: 3px;
    height: 10px;
    transform: rotate(-9deg);
    background-color: black;
    border-radius: 100px;
}

.line15u {
    position: absolute;
    top: 29px;
    left: 24px;
    width: 3px;
    height: 10px;
    transform: rotate(-19deg);
    background-color: black;
    border-radius: 100px;
}

.line16u {
    position: absolute;
    top: 23px;
    left: 22px;
    width: 3px;
    height: 8px;
    transform: rotate(-8deg);
    background-color: black;
    border-radius: 100px;
}

.line17u {
    position: absolute;
    top: 19px;
    left: 22px;
    width: 3px;
    height: 5px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line17u {
    position: absolute;
    top: 14px;
    left: 22px;
    width: 3px;
    height: 10px;
    transform: rotate(7deg);
    background-color: black;
    border-radius: 100px;
}

.line18u {
    position: absolute;
    top: 8px;
    left: 24px;
    width: 3px;
    height: 8px;
    transform: rotate(25deg);
    background-color: black;
    border-radius: 100px;
}



.boxV {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1v {
    position: absolute;
    top: 3px;
    left: 95px;
    width: 3px;
    height: 50px;
    transform: rotate(-3deg);
    background-color: black;
    border-radius: 100px;
}

.line2v {
    position: absolute;
    top: 51px;
    left: 96px;
    width: 3px;
    height: 60px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line3v {
    position: absolute;
    top: 99px;
    left: 85px;
    width: 3px;
    height: 25px;
    transform: rotate(90deg);
    background-color: black;
    border-radius: 100px;
}

.line4v {
    position: absolute;
    top: 106px;
    left: 71px;
    width: 3px;
    height: 8px;
    transform: rotate(120deg);
    background-color: black;
    border-radius: 100px;
}

.line5v {
    position: absolute;
    top: 90px;
    left: 63px;
    width: 3px;
    height: 20px;
    transform: rotate(150deg);
    background-color: black;
    border-radius: 100px;
}

.line6v {
    position: absolute;
    top: 47px;
    left: 44px;
    width: 3px;
    height: 55px;
    transform: rotate(142deg);
    background-color: black;
    border-radius: 100px;
}



.boxW {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1w {
    position: absolute;
    top: 25px;
    left: 12px;
    width: 3px;
    height: 40px;
    transform: rotate(-27deg);
    background-color: black;
    border-radius: 100px;
}

.line2w {
    position: absolute;
    top: 60px;
    left: 30px;
    width: 3px;
    height: 54px;
    transform: rotate(-20deg);
    background-color: black;
    border-radius: 100px;
}

.line3w {
    position: absolute;
    top: 33px;
    left: 47px;
    width: 3px;
    height: 80px;
    transform: rotate(10deg);
    background-color: black;
    border-radius: 100px;
}

.line4w {
    position: absolute;
    top: 10px;
    left: 57px;
    width: 3px;
    height: 25px;
    transform: rotate(15deg);
    background-color: black;
    border-radius: 100px;
}

.line5w {
    position: absolute;
    top: 10px;
    left: 63px;
    width: 3px;
    height: 25px;
    transform: rotate(-15deg);
    background-color: black;
    border-radius: 100px;
}

.line6w {
    position: absolute;
    top: 33px;
    left: 73px;
    width: 3px;
    height: 80px;
    transform: rotate(-10deg);
    background-color: black;
    border-radius: 100px;
}

.line7w {
    position: absolute;
    top: 60px;
    left: 90px;
    width: 3px;
    height: 54px;
    transform: rotate(20deg);
    background-color: black;
    border-radius: 100px;
}

.line8w {
    position: absolute;
    top: 25px;
    left: 108px;
    width: 3px;
    height: 40px;
    transform: rotate(27deg);
    background-color: black;
    border-radius: 100px;
}



.boxX {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1x {
    position: absolute;
    top: 2px;
    left: 30px;
    width: 3px;
    height: 60px;
    transform: rotate(-60deg);
    background-color: black;
    border-radius: 100px;
}

.line2x {
    position: absolute;
    top: 44px;
    left: 59px;
    width: 3px;
    height: 15px;
    transform: rotate(140deg);
    background-color: black;
    border-radius: 100px;
}

.line3x {
    position: absolute;
    top: 56px;
    left: 64px;
    width: 3px;
    height: 5px;
    transform: rotate(-10deg);
    background-color: black;
    border-radius: 100px;
}

.line3x {
    position: absolute;
    top: 56px;
    left: 63px;
    width: 3px;
    height: 6px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line4x {
    position: absolute;
    top: 61px;
    left: 62px;
    width: 3px;
    height: 6px;
    transform: rotate(15deg);
    background-color: black;
    border-radius: 100px;
}

.line5x {
    position: absolute;
    top: 66px;
    left: 61px;
    width: 3px;
    height: 10px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}

.line6x {
    position: absolute;
    top: 75px;
    left: 62px;
    width: 3px;
    height: 10px;
    transform: rotate(-10deg);
    background-color: black;
    border-radius: 100px;
}

.line7x {
    position: absolute;
    top: 83px;
    left: 65px;
    width: 3px;
    height: 10px;
    transform: rotate(-26deg);
    background-color: black;
    border-radius: 100px;
}

.line8x {
    position: absolute;
    top: 90px;
    left: 72px;
    width: 3px;
    height: 25px;
    transform: rotate(-25deg);
    background-color: black;
    border-radius: 100px;
}

.line9x {
    position: absolute;
    top: -4px;
    left: 62px;
    width: 3px;
    height: 90px;
    transform: rotate(55deg);
    background-color: black;
    border-radius: 100px;
}

.line10x {
    position: absolute;
    top: 65px;
    left: 26px;
    width: 3px;
    height: 54px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}



.boxY {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1y {
    position: absolute;
    top: 2px;
    left: 15px;
    width: 3px;
    height: 25px;
    transform: rotate(89deg);
    background-color: black;
    border-radius: 100px;
}

.line2y {
    position: absolute;
    top: 13px;
    left: 28px;
    width: 3px;
    height: 5px;
    transform: rotate(140deg);
    background-color: black;
    border-radius: 100px;
}

.line3y {
    position: absolute;
    top: 12px;
    left: 42px;
    width: 3px;
    height: 40px;
    transform: rotate(140deg);
    background-color: black;
    border-radius: 100px;
}

.line4y {
    position: absolute;
    top: 14px;
    left: 64px;
    width: 3px;
    height: 35px;
    transform: rotate(35deg);
    background-color: black;
    border-radius: 100px;
}

.line5y {
    position: absolute;
    top: 46px;
    left: 53px;
    width: 3px;
    height: 6px;
    transform: rotate(10deg);
    background-color: black;
    border-radius: 100px;
}

.line6y {
    position: absolute;
    top: 51px;
    left: 53px;
    width: 3px;
    height: 6px;
    transform: rotate(-9deg);
    background-color: black;
    border-radius: 100px;
}

.line7y {
    position: absolute;
    top: 55px;
    left: 55px;
    width: 3px;
    height: 7px;
    transform: rotate(-40deg);
    background-color: black;
    border-radius: 100px;
}

.line8y {
    position: absolute;
    top: 59px;
    left: 60px;
    width: 3px;
    height: 7px;
    transform: rotate(120deg);
    background-color: black;
    border-radius: 100px;
}

.line9y {
    position: absolute;
    top: 61px;
    left: 67px;
    width: 3px;
    height: 10px;
    transform: rotate(110deg);
    background-color: black;
    border-radius: 100px;
}

.line10y {
    position: absolute;
    top: 66px;
    left: 72px;
    width: 3px;
    height: 7px;
    transform: rotate(150deg);
    background-color: black;
    border-radius: 100px;
}

.line11y {
    position: absolute;
    top: 70px;
    left: 73px;
    width: 3px;
    height: 45px;
    transform: rotate(0deg);
    background-color: black;
    border-radius: 100px;
}



.boxZ {
    width: 120px;
    height: 120px;
    background: white;
    display: inline-block;
    position: relative;
}

.line1z {
    position: absolute;
    top: -20px;
    left: 40px;
    width: 3px;
    height: 70px;
    transform: rotate(89deg);
    background-color: black;
    border-radius: 100px;
}

.line2z {
    position: absolute;
    top: 5px;
    left: 51px;
    width: 3px;
    height: 65px;
    transform: rotate(-135deg);
    background-color: black;
    border-radius: 100px;
}

.line3z {
    position: absolute;
    top: 59px;
    left: 28px;
    width: 3px;
    height: 15px;
    transform: rotate(185deg);
    background-color: black;
    border-radius: 100px;
}

.line4z {
    position: absolute;
    top: 72px;
    left: 28px;
    width: 3px;
    height: 10px;
    transform: rotate(-185deg);
    background-color: black;
    border-radius: 100px;
}

.line5z {
    position: absolute;
    top: 60px;
    left: 47px;
    width: 3px;
    height: 40px;
    transform: rotate(85deg);
    background-color: black;
    border-radius: 100px;
}

.line6z {
    position: absolute;
    top: 60px;
    left: 85px;
    width: 3px;
    height: 40px;
    -webkit-transform: rotate(95deg);
    background-color: black;
    border-radius: 100px;
}






/*website.html*/


.donkeytop {
    position: fixed;
    top: 75%;
    left: 20%;
    z-index: 1;
}

.donkeybottom {
    position: fixed;
    top: 75%;
    left: 80%;
    z-index: 1;
}



.wrapper {
    width: 8580px;
    height: 6660px;
    margin: 0 auto;
    position: relative;
}



/*mountains*/

.mountainsbox {
    width: 700px;
    height: 500px;
    background: white;
    position: absolute;
    top: 0%;
    left: 48%;
}

.mountainsline1 {
    position: absolute;
    top: 55px;
    left: 20px;
    width: 6px;
    height: 300px;
    transform: rotate(25deg);
    background-color: black;
    border-radius: 100px;
}

.mountainsline2 {
    position: absolute;
    top: 44px;
    left: 182px;
    width: 6px;
    height: 400px;
    transform: rotate(-30deg);
    background-color: black;
    border-radius: 100px;
}

.mountainsline3 {
    position: absolute;
    top: 170px;
    left: 240px;
    width: 6px;
    height: 120px;
    transform: rotate(40deg);
    background-color: black;
    border-radius: 100px;
}

.mountainsline4 {
    position: absolute;
    top: 180px;
    left: 291px;
    width: 6px;
    height: 80px;
    transform: rotate(-20deg);
    background-color: black;
    border-radius: 100px;
}

.mountainsline5 {
    position: absolute;
    top: 35px;
    left: 344px;
    width: 6px;
    height: 200px;
    transform: rotate(30deg);
    background-color: black;
    border-radius: 100px;
}

.mountainsline6 {
    position: absolute;
    top: 25px;
    left: 480px;
    width: 6px;
    height: 350px;
    transform: rotate(-30deg);
    background-color: black;
    border-radius: 100px;
}



/*sea*/

.seabox {
    width: 700px;
    height: 100px;
    background: white;
    position: absolute;
    top: 98%;
    left: 50%;
}

.sealine1 {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 6px;
    height: 100px;
    transform: rotate(30deg);
    background-color: black;
    border-radius: 100px;
}

.sealine2 {
    position: absolute;
    top: 0%;
    left: 7%;
    width: 6px;
    height: 100px;
    transform: rotate(-30deg);
    background-color: black;
    border-radius: 100px;
}

.sealine3 {
    position: absolute;
    top: 0%;
    left: 14%;
    width: 6px;
    height: 100px;
    transform: rotate(30deg);
    background-color: black;
    border-radius: 100px;
}

.sealine4 {
    position: absolute;
    top: 0%;
    left: 21%;
    width: 6px;
    height: 100px;
    transform: rotate(-30deg);
    background-color: black;
    border-radius: 100px;
}

.sealine5 {
    position: absolute;
    top: 0%;
    left: 28%;
    width: 6px;
    height: 100px;
    transform: rotate(30deg);
    background-color: black;
    border-radius: 100px;
}

.sealine6 {
    position: absolute;
    top: 0%;
    left: 35%;
    width: 6px;
    height: 100px;
    transform: rotate(-30deg);
    background-color: black;
    border-radius: 100px;
}

.sealine7 {
    position: absolute;
    top: 0%;
    left: 42%;
    width: 6px;
    height: 100px;
    transform: rotate(30deg);
    background-color: black;
    border-radius: 100px;
}

.sealine8 {
    position: absolute;
    top: 0%;
    left: 49%;
    width: 6px;
    height: 100px;
    transform: rotate(-30deg);
    background-color: black;
    border-radius: 100px;
}

.sealine9 {
    position: absolute;
    top: 0%;
    left: 56%;
    width: 6px;
    height: 100px;
    transform: rotate(30deg);
    background-color: black;
    border-radius: 100px;
}

.sealine10 {
    position: absolute;
    top: 0%;
    left: 63%;
    width: 6px;
    height: 100px;
    transform: rotate(-30deg);
    background-color: black;
    border-radius: 100px;
}


    
.resize { /*gia to resizing tis fotografias*/
   max-width:35%;
   max-height:35%;
}
 

 
.box1 {
     width: 800px;
     height: 400px;
     position: absolute;
     top: 25%;
     left: 5%;
 }  

.image1 {
    position: absolute;
    top: 44%;
    left: 60%;
    width: 1000px;
}

.text1 {
    position: absolute;
    top: 40%;
    left: 10%;
    color: black;
    font-family: Futura;
    width: 400px;
}



.box2 {
     width: 1500px;
     height: 1000px;
     position: absolute;
     top: 75%;
     left: 46%;
 }
 
 .boxnatural {
    position: absolute;
    top: 60%;
    left: 40%;
}

 .boxfactors {
    position: absolute;
    top: 80%;
    left: 40%;
}

.image2 {
    position: absolute;
    top: 15%;
    left: 40%;
}

.image10 {
    position: absolute;
    top: 40%;
    left: 15%;
}

.text2 {
    position: absolute;
    top: 17%;
    left: 10%;
    color: black;
    font-family: Futura;
    width: 400px;
    font-size: 20px;
}


.box3 {
    width: 1200px;
    height: 1000px;
    position: absolute;
    top: 95%;
    left: 62%;
}

.image3 {
    position: absolute;
    top: 20%;
    left: 20%;
}

.text3 {
    position: absolute;
    top: 35%;
    left: 52%;
    color: black;
    font-family: Futura;
    width: 300px;
    font-size: 20px;
}



.box4 {
     width: 1500px;
     height: 1000px;
     position: absolute;
     top: 4%;
     left: 70%;
 }

.image4 {
    position: absolute;
    top: 45%;
    left: 8%;
}

.image26 {
    position: absolute;
    top: 35%;
    left: 32%;
}

.text4 {
    position: absolute;
    top: 80%;
    left: 33%;
    color: black;
    font-family: Futura;
    width: 300px;
    font-size: 20px;
}

.boxvillage {
     width: 1500px;
     height: 120px;
     position: absolute;
     top: 4%;
     left: 5%;
 }
 
 .boxatmosphere {
     width: 1300px;
     height: 120px;
     position: absolute;
     top: 17%;
     left: 5%;
 }



.box5 {
     width: 2000px;
     height: 1000px;
     position: absolute;
     top: 23%;
     left: 85%;
 }

.image5 {
    position: absolute;
    top: 38%;
    left: 17%;
}

.image27 {
    position: absolute;
    top: 33%;
    left: 35%;
    width: 1000px;
}

.text5 {
    position: absolute;
    top: 65%;
    left: 35%;
    color: black;
    font-family: Futura;
    width: 450px;
    font-size: 20px;
}

.boxunique {
    width: 1300px;
    height: 120px;
    position: absolute;
    top: 0%;
    left: 5%;
}
 
.boxstyle {
    width: 1300px;
    height: 120px;
    position: absolute;
    top: 17%;
    left: 5%;
}



.box6 {
     width: 1000px;
     height: 800px;
     position: absolute;
     top: 77%;
     left: 3%;
 } 

.image6 {
    position: absolute;
    top: 25%;
    left: 35%;
    width: 1000px;
}

.text6 {
    position: absolute;
    top: 35%;
    left: 75%;
    color: black;
    font-family: Futura;
    width: 300px;
    font-size: 20px;
}

.boxreligion {
    width: 1100px;
    height: 120px;
    position: absolute;
    top: 4%;
    left: 1%;
}




.box7 {
     width: 1600px;
     height: 1000px;
     position: absolute;
     top: 65%;
     left: 95%;
 } 

.image7 {
    position: absolute;
    top: 30%;
    left: 33%;
    width: 1000px;
}

.image30 {
    position: absolute;
    top: 5%;
    left: 7%;
}

.boxdovecote {
    width: 1400px;
    height: 120px;
    position: absolute;
    top: 60%;
    left: 1%;
}

.boxlocations {
    width: 1400px;
    height: 120px;
    position: absolute;
    top:75%;
    left: 1%;
}

.text7 {
    position: absolute;
    top: 5%;
    left: 35%;
    color: black;
    font-family: Futura;
    width: 350px;
    font-size: 20px;
}



.box8 {
     width: 900px;
     height: 800px;
     position: absolute;
     top: 40%;
     left: 3%;
} 

.image8 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 1000px;
}

.boxwhite {
    width: 1000px;
    height: 120px;
    position: absolute;
    top: 1%;
    left: 1%;
}

.text8 {
    position: absolute;
    top: 23%;
    left: 65%;
    color: black;
    font-family: Futura;
    width: 200px;
    font-size: 20px;
}



.box9 {
     width: 1500px;
     height: 800px;
     position: absolute;
     top: 20%;
     left: 25%;
} 

.image9 {
    position: absolute;
    top: 40%;
    left: 20%;
}

.text9 {
    position: absolute;
    top: 40%;
    left: 1%;
    color: black;
    font-family: Futura;
    width: 200px;
    font-size: 20px;
}

.boxcivilization {
    width: 1600px;
    height: 120px;
    position: absolute;
    top: 1%;
    left: 10%;
}

.boxinfluence {
    width: 1200px;
    height: 120px;
    position: absolute;
    top: 20%;
    left: 15%;
}




.box11 {
     width: 1500px;
     height: 800px;
     position: absolute;
     top: 7%;
     left: 27%;
} 

.image11 {
    position: absolute;
    top: 20%;
    left: 5%;
    width: 3000px;
}

.boxcycladic {
    width: 1300px;
    height: 120px;
    position: absolute;
    top: 1%;
    left: 1%;
}

.boximage {
    width: 1200px;
    height: 120px;
    position: absolute;
    top: 1%;
    left: 75%;
}

.text11 {
    position: absolute;
    top: 25%;
    left: 70%;
    color: black;
    font-family: Futura;
    width: 500px;
    font-size: 20px;
}



.box12 {
     width: 1600px;
     height: 800px;
     position: absolute;
     top: 78%;
     left: 28%;
} 

.image12 {
    position: absolute;
    top: 0%;
    left: 10%;
}

.text12 {
    position: absolute;
    top: 10%;
    left: 35%;
    color: black;
    font-family: Futura;
    width: 300px;
    font-size: 20px;
}

.boxcycladic2 {
    width: 1400px;
    height: 120px;
    position: absolute;
    top: 60%;
    left: 1%;
}

.boxcountryside {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 85%;
    left: 1%;
}



.box13 {
     width: 1000px;
     height: 800px;
     position: absolute;
     top: 98%;
     left: 82%;
}

.image13 {
    position: absolute;
    top: 20%;
    left: 1%;
}

.image25 {
    position: absolute;
    top: 30%;
    left: 38%;
    width: 1000px;
}

.boxwhite2 {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 75%;
    left: 1%;
}

.boxchoice {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 93%;
    left: 1%;
}

.text13 {
    position: absolute;
    top: 2%;
    left: 41%;
    color: black;
    font-family: Futura;
    width: 300px;
    font-size: 20px;
}



.box14 {
     width: 1400px;
     height: 800px;
     position: absolute;
     top: 40%;
     left: 67%;
}

.image14 {
    position: absolute;
    top: 48%;
    left: 65%;
    width: 1500px;
}

.text14 {
    position: absolute;
    top: 65%;
    left: 15%;
    color: black;
    font-family: Futura;
    width: 500px;
    font-size: 20px;
}

.boxtraditional {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 1%;
    left: 1%;
}

.boxcycladic3 {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 20%;
    left: 1%;
}

.boxhouses {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 40%;
    left: 1%;
}



.box15 {
     width: 1300px;
     height: 1000px;
     position: absolute;
     top: 30%;
     left: 40%;
}

.image15 {
    position: absolute;
    top: 1%;
    left: 40%;
    width: 1000px;
}

.boxlabyrinth {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 75%;
    left: 1%;
}

.boxlayout {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 93%;
    left: 15%;
}

.text15 {
    position: absolute;
    top: 20%;
    left: 15%;
    color: black;
    font-family: Futura;
    width: 250px;
    font-size: 20px;
}



.box16 {
     width: 1300px;
     height: 700px;
     position: absolute;
     top: 7%;
     left: 3%;
}

.image16 {
    position: absolute;
    top: 5%;
    left: 2%;
    width: 1000px;
}

.text16 {
    position: absolute;
    top: 10%;
    left: 35%;
    color: black;
    font-family: Futura;
    width: 400px;
    font-size: 20px;
}

.boxdovecotes {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 70%;
    left: 1%;
}



.box17 {
     width: 1500px;
     height: 900px;
     position: absolute;
     top: 61%;
     left: 20%;
}

.image17 {
    position: absolute;
    top: 48%;
    left: 17%;
    width: 1000px;
}

.boxflourishing {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 10%;
    left: 1%;
}

.boxeconomy {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 30%;
    left: 1%;
}

.text17 {
    position: absolute;
    top: 50%;
    left: 50%;
    color: black;
    font-family: Futura;
    width: 400px;
    font-size: 20px;
}



.box18 {
     width: 1000px;
     height: 900px;
     position: absolute;
     top: 12%;
     left: 50%;
}

.image18 {
    position: absolute;
    top: 23%;
    left: 40%;
    width: 1000px;
}

.text18 {
    position: absolute;
    top: 30%;
    left: 1%;
    color: black;
    font-family: Futura;
    width: 400px;
    font-size: 20px;
}

.boxlight {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 5%;
    left: 1%;
}



.box19 {
     width: 1000px;
     height: 900px;
     position: absolute;
     top: 60%;
     left: 58%;
}

.image19 {
    position: absolute;
    top: 23%;
    left: 2%;
    width: 1000px;
}

.text19 {
    position: absolute;
    top: 10%;
    left: 4%;
    color: black;
    font-family: Futura;
    width: 300px;
    font-size: 20px;
}

.boxpure {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 10%;
    left: 40%;
}

.boxand {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 30%;
    left: 45%;
}

.boxsimple {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 50%;
    left: 38%;
}



.box20 {
     width: 1500px;
     height: 1000px;
     position: absolute;
     top: 52%;
     left: 40%;
}

.image20 {
    position: absolute;
    top: 1%;
    left: 30%;
    width: 1000px;
}

.text20 {
    position: absolute;
    top: 5%;
    left: 1%;
    color: black;
    font-family: Futura;
    width: 400px;
    font-size: 20px;
}

.boxchurches {
    width: 1100px;
    height: 120px;
    position: absolute;
    top: 33%;
    left: 27%;
}



.box21 {
     width: 1500px;
     height: 700px;
     position: absolute;
     top: 23%;
     left: 62%;
}

.image21 {
    position: absolute;
    top: 1%;
    left: 30%;
    width: 1000px;
}

.image24 {
    position: absolute;
    top: 15%;
    left: 56%;
    width: 1000px;
}

.text21 {
    position: absolute;
    top: 10%;
    left: 1%;
    color: black;
    font-family: Futura;
    width: 400px;
    font-size: 20px;
}

.boxconstruction {
    width: 1700px;
    height: 120px;
    position: absolute;
    top: 75%;
    left: 1%;
}



.box22 {
     width: 1400px;
     height: 1000px;
     position: absolute;
     top: 70%;
     left: 70%;
}

.image22 {
    position: absolute;
    top: 10%;
    left: 5%;
}

.text22 {
    position: absolute;
    top: 65%;
    left: 20%;
    color: black;
    font-family: Futura;
    width: 800px;
    font-size: 20px;
}

.boxwhite3 {
    width: 1700px;
    height: 120px;
    position: absolute;
    top: 1%;
    left: 30%;
}

.boxand2 {
    width: 1700px;
    height: 120px;
    position: absolute;
    top: 15%;
    left: 40%;
}

.boxblue {
    width: 1700px;
    height: 120px;
    position: absolute;
    top: 30%;
    left: 35%;
}

.boxhistory {
    width: 1700px;
    height: 120px;
    position: absolute;
    top: 45%;
    left: 35%;
}





.box28 {
     width: 1500px;
     height: 1000px;
     position: absolute;
     top: 95%;
     left: 1%;
}

.image28 {
    position: absolute;
    top: 15%;
    left: 1%;
    width: 1000px;
}

.text28 {
    position: absolute;
    top: 60%;
    left: 35%;
    color: black;
    font-family: Futura;
    width: 900px;
    font-size: 20px;
}

.boxdovecote3 {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 1%;
    left: 35%;
}

.boxdecorative {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 20%;
    left: 30%;
}

.boxdetails {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 40%;
    left: 35%;
}



.box23 {
     width: 2000px;
     height: 1000px;
     position: absolute;
     top: 99%;
     left: 27%;
}

.image23 {
    position: absolute;
    top: 20%;
    left: 1%;
    width: 1000px;
}

.text23 {
    position: absolute;
    top: 60%;
    left: 1%;
    color: black;
    font-family: Futura;
    width: 1100px;
    font-size: 20px;
}

.boxarchitectural {
    width: 1800px;
    height: 120px;
    position: absolute;
    top: 1%;
    left: 1%;
}

.boxresponse {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 20%;
    left: 20%;
}

.boxto {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 20%;
    left: 75%;
}

.boxpiracy {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 38%;
    left: 20%;
}



/*.box29 {
     width: 1500px;
     height: 800px;
     position: absolute;
     top: 17%;
     left: 100%;
}

.image29 {
    position: absolute;
    top: 1%;
    left: 1%;
}

.text29 {
    position: absolute;
    top: 1%;
    left: 25%;
    color: black;
    font-family: Futura;
    width: 600px;
    font-size: 20px;
}

.boxtemperature {
    width: 1800px;
    height: 120px;
    position: absolute;
    top: 65%;
    left: 1%;
}
 */



.box31 {
     width: 1300px;
     height: 900px;
     position: absolute;
     top: 43%;
     left: 95%;
}

.image31 {
    position: absolute;
    top: 21%;
    left: 9%;
    width: 1000px;
}

.image33 {
    position: absolute;
    top: 70%;
    left: 45%;
    width: 1000px;
}

.text31 {
    position: absolute;
    top: 45%;
    left: 48%;
    color: black;
    font-family: Futura;
    width: 300px;
    font-size: 20px;
}

.boxlack {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 1%;
    left: 5%;
}

.boxof {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 1%;
    left: 50%;
}

.boxwood {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 25%;
    left: 40%;
}



.box32 {
     width: 1300px;
     height: 1000px;
     position: absolute;
     top: 1%;
     left: 90%;
}

.image32 {
    position: absolute;
    top: 1%;
    left: 70%;
    width: 1000px;
}

.text32 {
    position: absolute;
    top: 15%;
    left: 40%;
    color: black;
    font-family: Futura;
    width: 250px;
    font-size: 20px;
}

.boxdovecote2 {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 58%;
    left: 18%;
}

.boxinfluence2 {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 75%;
    left: 10%;
}




.box34 {
     width: 1800px;
     height: 1000px;
     position: absolute;
     top: 85%;
     left: 98%;
}

.image34 {
    position: absolute;
    top: 45%;
    left: 45%;
    width: 1000px;
}

.text34 {
    position: absolute;
    top: 60%;
    left:10%;
    color: black;
    font-family: Futura;
    width: 500px;
    font-size: 20px;
}

.boxecclesiastical {
    width: 1800px;
    height: 120px;
    position: absolute;
    top: 1%;
    left: 1%;
}

.boxarchitecture {
    width: 1550px;
    height: 120px;
    position: absolute;
    top: 25%;
    left: 1%;
}



.box35 {
     width: 1800px;
     height: 1000px;
     position: absolute;
     top: 55%;
     left: 1%;
}

.image35 {
    position: absolute;
    top: 55%;
    left: 1%;
    width: 1300px;
}

.text35 {
    position: absolute;
    top: 60%;
    left: 30%;
    color: black;
    font-family: Futura;
    width: 500px;
    font-size: 20px;
}

.boxmedieval {
    width: 1100px;
    height: 120px;
    position: absolute;
    top: 1%;
    left: 1%;
}

.boxpirate {
    width: 1000px;
    height: 120px;
    position: absolute;
    top: 20%;
    left: 1%;
}

.boxinvasions {
    width: 1300px;
    height: 120px;
    position: absolute;
    top: 35%;
    left: 1%;
}



.box36 {
     width: 1100px;
     height: 1000px;
     position: absolute;
     top: 38%;
     left: 20%;
}

.image36 {
    position: absolute;
    top: 38%;
    left: 10%;
    width: 1000px;
}

.text36 {
    position: absolute;
    top: 45%;
    left: 50%;
    color: black;
    font-family: Futura;
    width: 350px;
    font-size: 20px;
}

.boxcycladic4 {
    width: 1300px;
    height: 120px;
    position: absolute;
    top: 1%;
    left: 1%;
}

.boxidentity {
    width: 1300px;
    height: 120px;
    position: absolute;
    top: 20%;
    left: 1%;
}