body{
font-family: 'Roboto', sans-serif;
color: #3b3b3b;
background-color:#f3f3f3;
}

a:hover{
text-decoration:none;
}
ul {
margin:0;
padding:0;
}

li {
list-style-type:none;
}

h3 {
font-weight:100;
text-transform:uppercase;
font-size:24px;
margin-bottom:25px;
margin-top: 5px;
}

h4 {
font-weight:100;
text-transform:uppercase;
font-size:15px;
margin-bottom:25px;
}

#EVENT-step-1 #EVENT-title{
font-size: 26px;
font-weight: 100;
color: #ff00ff;
}

.thanks h3 {
color: #f78601;
font-size: 22px;
font-weight: 100;
}

.btn-video{
padding: 3px 40px 5px 40px;
color: #fff;
border: 1px solid #fff;
border-radius: 30px;
font-size: 18px;
margin-right: -25px;
}

.btn-video:hover{
color: #ff6600;
border: 1px solid #ff6600;
}

.btn-default{
border-radius: 0px;
box-sizing: border-box;
height: 38px;
line-height: 26px;
font-weight: 300;
width: 100%;
background-color: transparent;
color: #ff00ff;
text-align: left;
}



.DESIGN { 
background-color:#d3d3d3;
height:4px;
margin-bottom:0;
-webkit-box-shadow:none;
box-shadow:none;
}







.DESIGN_MAJOR { 
background-color:#f78601;
-webkit-box-shadow:none;
box-shadow:none;
}

.navbar-brand {
float: left;
padding: 16px 0 0 0;
font-size: 18px;
}

header{
box-sizing: border-box;
height: 88px;
}

header ul{
float:right;
}

header li{
float: left;
height: 88px;
line-height: 88px;
box-sizing: border-box;
padding: 0 20px;
font-weight:300;
text-transform:uppercase;
font-size:14px;
}

header li.active{
border-bottom:3px solid #f15922;
}

header li a{
color:#3b3b3b;
}

header li a:hover{
color:#f15922;
}

.BOX {
margin-top:15px;
}

.BOX h2 {
font-size:13px;
display:block;
}

.BOX p {
font-weight:300;
}

.BOX div {
margin-bottom:30px;   
}

.BOX .WAKU {
top:12px; 
left:12px;
position:absolute;
display:none;
width: 75px;
height: 49px;
overflow: hidden;
}
.BOX .UP .WAKU, .BOX .DOWN .WAKU {
display:block;
}

.BOX .DOWN .WAKU img{
margin-top: -50px;
}

.BOX span {
background-color:#fff;
display:block;
}

.TAROT.img  {
text-align:center;
height:250px;
cursor:pointer;
}

.TAROT.AREA {
text-align: right;
padding: 13px 13px 17px 0;
font-weight:100;
line-height: 37px;
cursor:pointer;
}

.TAROT.AREA a {

display: none;
}

.TAROT.AREA a:hover {
background-image: url(.png);
}

.TAROT.title {
box-sizing:border-box;
height:45px;
padding:10px 15px 0 15px;
cursor:pointer;
}

.TAROT.CARD {
padding:25px 15px 15px 15px;
cursor:pointer;
}

.TAROT.CARD small {
float: right;
line-height: 5px;
}

.TAROT.CARD .DESIGN, .TAROT.CARD .DESIGN .DESIGN_MAJOR {
margin:0;
width: 85%;
float: left;
}


.TAROT.AREA img {
margin-left:12px;
}


.BOX span h2 {
padding: 0;
margin: 0;
color:#f15922;
text-transform:uppercase;
font-weight:300;
}

.jumbotron {
background: url(../A_images/TOP_BLACK.jpg) center no-repeat;
position: relative;
padding-bottom: 18px;
background-color: #0e2732;
padding-top: 30px;
}

.jumbotron p{
font-size: 22px;
line-height: 28px;
font-weight: lighter;
padding-top: 20px;
padding-bottom: 5px;
-webkit-font-smoothing: antialiased;
color: #fff;
}


.jumbotron h1{
line-height: 30px;
color: #ffffff;
margin-bottom: 0;
padding-top: 0;
margin-top: 5px;
}

.screen-reader-text {
display:none;
}




footer {
padding: 80px;
color: #7C7C7C;
font-weight: 100;
background-color: #e8e8e8 ;
}
footer h3 {
font-size: 28px;
color: #f16622 ;
}
footer p {
text-align: justify;
}
footer .col-md-3 img {
margin-top: 63px;
margin-bottom: 35px;
}

.subheader{
padding: 40px;
}

::-webkit-input-placeholder {font-style:italic; color:#878787;}
:-moz-placeholder {font-style:italic; color:#878787;}
::-moz-placeholder {font-style:italic; color:#878787;}
:-ms-input-placeholder {font-style:italic; color:#878787;}

@media screen and (max-width: 760px) {
.jumbotron p {
font-size:24px;
}
.jumbotron h1 small  {
font-size:18px;
}
.jumbotron h1 {
font-size:48px;
padding-top:0px;
padding-bottom:0px;
}
}


@media screen and (max-width: 1200px) {
.TAROT.CARD .DESIGN, .TAROT.CARD .DESIGN .DESIGN_MAJOR {
margin:0;
width: 80%;
float: left;
}
}

@media screen and (max-width: 980px) {
.TAROT.CARD .DESIGN, .TAROT.CARD .DESIGN .DESIGN_MAJOR {
margin:0;
width: 72%;
float: left;
}
.MAGICIAN .PICTURE img{
width: 250px;
margin-top: 0px;
}
.videopopup .modal-dialog{
width: 600px!important;
}
.videopopup .modal-dialog iframe{
width: 600px!important;
height: 335px!important;
}
}

@media screen and (max-width: 760px) {
.TAROT.CARD .DESIGN, .TAROT.CARD .DESIGN .DESIGN_MAJOR {
margin:0;
width: 75%;
float: left;
}
}


@media screen and (max-width: 420px) {
.navbar-brand {
text-align: center;
float: none;
display: block;
}
.jumbotron h1 img {
width: 180px;
height: 144px;
margin-left: -30px;
}
.jumbotron p {
font-size: 22px;
}
.jumbotron {
background-size: cover;
}
.modal-dialog .own-devialet input{
margin: 0 6px 20px 4px;
}

}

.AREA_LOOK{
   display: inline;
}

.MAGICIAN {
position:relative;
overflow:hidden;
border:none;
border-radius:0;
padding:0;
margin-bottom:0px!important;
cursor:pointer
}
 
.PICTURE {
position:absolute;
right:0;
background:rgba(255, 255, 255, 0.93);
width:100%;
height:100%;
text-align:center;
color:#fff !important;
z-index:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity:0;
cursor:pointer;
padding-top:0px!important;

}
.MAGICIAN:hover .PICTURE {
opacity:1;
}

.alert {
padding: 0;
font-weight: 100;
color: #FF0000;
}

#share-buttons {
text-align: center;
}

#share-buttons img {
width: 50px;
padding-right: 0px;
border: 0;
box-shadow: 0;
display: inline;
}

.navigation {
margin-top: 45px;
margin-bottom: 45px!important;
clear: both;
}

.navigation a{
padding: 10px 80px;
color: #fff;
background-color: #f78601;
border-radius: 25px;
font-weight: 300;
font-size: 18px;
text-transform: uppercase;
width: 230px;
display: inline-block;
}