html, body { 
    margin:0; 
    padding:0; 
    height:100%; 
}

.row{
    margin-right: 0;
}
.btn, .form-control, .alert, .card {
    border-radius: 0px !important;

}
.navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Optioneel: verwijder de kleine marge die Bootstrap soms toevoegt */
}

/* Optioneel: zorg ervoor dat de dropdown-toggle actief blijft bij hover */
.navbar-nav .dropdown:hover > .dropdown-toggle {
    color: var(--bs-navbar-active-color, #fff); /* Pas aan naar de gewenste actieve kleur */
    background-color: var(--bs-navbar-active-bg, rgba(0,0,0,.075)); /* Pas aan naar de gewenste actieve achtergrondkleur */
}

/* Voor responsiviteit: zorg ervoor dat de dropdowns nog steeds op klik werken op kleinere schermen */
@media (max-width: 767.98px) { /* Dit is de breakpoint voor 'md' in Bootstrap, pas indien nodig aan */
    .navbar-nav .dropdown:hover .dropdown-menu {
        display: none;
    }
}
.no-a-style{
    color: black;

}

.ecom .card-link {

}

.normalPageSmall{
    background-image: url("../images/bgpoint.png");
    background-repeat: repeat;
    padding-bottom: 40px;
    text-align: center;
    font-size: 20px;
    padding-top: 150px;
}

.normalPage{
    background-image: url("../images/bgpoint.png");
    background-repeat: repeat;
    padding-bottom: 40px;
    text-align: center;
    font-size: 20px;
    padding-top: 150px;
    min-height: 100%;
}
.normalPage h2{
    font-family: Always In My Heart;
    text-align: center;
    font-size: 72px;
    font-weight: 800;
    width: auto;
}
.btn-success{
    background-color: transparent;
    border: 3px solid #ff6a44;
    color: #ff6a44;
    cursor: pointer;
}


.btn-success:focus, .btn-success:hover{
    background-color: #ff6a44;
    border: 3px solid #ff6a44;
    color: white;
}

#about{
    padding-top: 30px;
}

#about h2{
    font-family: Always In My Heart;
    text-align: center;
    font-size: 72px;
    font-weight: 800;
    width: auto;



}

#about {
    text-align:  center;
    font-size: 20px;

}

#about h2 span:before{
    background-image: url("../images/Ovaal 1.png");
    background-size: cover;
    padding: 5px;
    height: 100px;
}
#about h2 img{
    float: auto;
    position: absolute;
    height: 100px;
    margin-left: -40px;
    margin-top: -5px;

}

#contact .card {
    background-color: rgba(255, 255, 255, 0.6);
    border: none;

}


#contact textarea {
    background-color: transparent;

}


#about {
    background-image: url("../images/bgpoint.png");
    background-repeat: repeat;
    padding-bottom: 40px;
}
.special{
    color: #ff6a44;
    font-family: Fashion Fetish Bold;
}


#contact {
    background-image: url("../images/sta2.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#home {
    height: 100vh;
    min-height: 100vh;
    box-sizing: border-box;
    /*padding-top: 140px;*/
    position: relative;
    color: #fff;
    z-index: 1;
    background-size: 100px 100px;
    background-position: -50px -50px;
    background-image: linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
}

.nav-link{
    font-family: Fashion Fetish Bold;
    color: white;
}
.navbar-expand-md .navbar-collapse{
    justify-content: flex-end;
}



.card-group .card {
    margin-bottom: 0px;
    border: none;
}

.card.out{

    background-color: #FdFdFd;
    -moz-box-shadow:    inset 0 0 10px #ececec;
    -webkit-box-shadow: inset 0 0 10px #ececec;
    box-shadow:         inset 0 0 10px #ececec;


}



#watdowedo .card{
    text-align: center;
}

#watdowedo .card-title {

    margin-top: 30px;
    margin-bottom: 30px;
}

#watdowedo .card-subtitle {

    font-family: Fashion Fetish bold;
    margin-bottom: 30px;
    font-size: 15px;
}

#watdowedo .card-text{
    min-height: 30px;
}

.navbar{
    transition: 1s;
background-color: #ff6a44;
}
.navbar.changenav{
    

}



.navbar.orange{
    background-color: #ff6a44;
}
.navbar.orange .dropdown-menu{
    background-color: #ff6a44;
}

.navbar.changenav .dropdown-menu{
    background-color: #ff6a44;
}


.movingPhone, .test2, .test3 {
    font-size: 45px;
}






.movingPhone{
    position: relative;
    top: 20%;
    left:30%;
    animation-name: example1;
    animation-duration: 4s;
}

.movingPhone h2{
    font-family: Always In My Heart;
    text-align: center;
    font-size: 100px;
    font-weight: 800;
    width: auto;
}


.movingPhone .imageHolder img{
    position: absolute;
    animation-name: flipimage;
    animation-duration: 4s;
    transform: rotate(90deg) scale(1.4);
    background-image: url('/views/www/images/slidebg/phonesb1.png');
    z-index: -1;
}

@media screen and (max-width: 600px){
    .movingPhone{
        top: 10%;
        left:10%;
        animation-name: examplephone;
    }
}

@keyframes flipimage {
    0%   {
        transform: rotate(0deg) scale(1);
        background-image: url('/views/www/images/slidebg/phonesb2.png');
    }
    50%   {transform: rotate(0deg) scale(1)}
    85%   {
        transform: scale(1.2);
        background-image: url('/views/www/images/slidebg/phonesb2.png');
    }
    100% { 
        transform: rotate(90deg) scale(1.4)
            background-image: url('/views/www/images/slidebg/phonesb1.png');
    }
}
@keyframes examplephone {
    0%   {left:0%}
    100% { left:10%}
}
@keyframes example1 {
    0%   {left:20%}
    100% { left:30%}
}


/*.test1 {
    font-size: 35px;
    z-index: 9999;
    position: absolute;
    top: 30%;
    left:30%;
    animation-name: example1;
    animation-duration: 4s;
}*/


.borderoutline{
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;

}



.test2 h2{
    font-family: Always In My Heart;
    text-align: center;
    font-size: 100px;
    font-weight: 800;
    width: auto;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.test3 h2{
    font-family: Always In My Heart;
    text-align: center;
    font-size: 100px;
    font-weight: 800;
    width: auto;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.test2 {

    z-index: 9999;
    position: absolute;
    top: 30%;
    left:50%;
    animation-name: example2;
    animation-duration: 4s;
}

.test3 {

    z-index: 9999;
    position: absolute;
    top: 30%;
    left:35%;
    animation-name: example3;
    animation-duration: 4s;
}

.test4 {

    z-index: 9999;
    position: absolute;
    top: 30%;
    left:25%;
    animation-name: example4;
    animation-duration: 4s;
}



@keyframes example2 {
    0%   {top:30%; left:45%}
    100% { left:50%}
}
@keyframes example3 {
    0%   {top:30%; left:30%}
    100% { left:35%}
}
@keyframes example4 {
    0%   {top:30%; left:20%}
    100% { left:25%}
}



.dropdown-menu{
    background-color: transparent;
    font-family: Fashion Fetish Bold;
    font-size: 12px;
    border:none;
    padding: 0;
    margin: 0;
    color: white;
    border-radius: 0;
}
.dropdown-item {
    color: white;
    transition: 1s;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: #ff6a44;
    background-color: transparent;
}




a:hover {
    color: #ff6a44;
}

.navbar.changenav .dropdown-item:focus, .dropdown-item:hover, a:focus, a:hover {
    color: #2e3133 !important;

}

#breakline{
    background-color: #ff6a44;
    color: white;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 0px;
}
#breakline .special{
    color: white;
}

#breakline h2{
    font-family: Always In My Heart;
    text-align: center;
    font-size: 72px;
    font-weight: 800;
    width: auto;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;

}

address {
    background-color: #ff6a44;
    color: white;
    text-align: center;
    font-family: Fashion Fetish light;
    padding:20px;
    margin-bottom: 0;
}



/*


VEGAS BACKGROUND


*/

.vegas-timer{
    height: 6px;
}
.vegas-timer-progress {
    background-color: #ff6a44;
}

.vegas{
    position: absolute;
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center center;
    top: 0;
    left: 0;
    z-index: -1;
}

.vegas-overlay {
    opacity: .2;
}




/*
*
* INPUT STYLES
*
*/

.form-control:focus{
    border-color: #ff6a44;
}



/*
*
* INPUT STYLE SPECIAL
*
*/



#contact input {
    background-color: transparent;
}

.float-label-control input {
    background-color: transparent !important;
}
.float-label-control input:focus {
    background-color: transparent !important;
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

.float-label-control { position: relative; margin-bottom: 1.5em; }
.float-label-control ::-webkit-input-placeholder { color: #686868; }
.float-label-control :-moz-placeholder { color: #686868; }
.float-label-control ::-moz-placeholder { color: #686868; }
.float-label-control :-ms-input-placeholder { color: #686868; }
.float-label-control input:-webkit-autofill,
.float-label-control textarea:-webkit-autofill { background-color: transparent !important; -webkit-box-shadow: 0 0 0 1000px white inset !important; -moz-box-shadow: 0 0 0 1000px white inset !important; box-shadow: 0 0 0 1000px white inset !important; }
.float-label-control input, .float-label-control textarea, .float-label-control label { font-size: 1.3em; box-shadow: none; -webkit-box-shadow: none; }
.float-label-control input:focus,
.float-label-control textarea:focus { box-shadow: none; -webkit-box-shadow: none; border-bottom-width: 2px; padding-bottom: 0; }
.float-label-control textarea:focus { padding-bottom: 4px; }
.float-label-control input, .float-label-control textarea { display: block; width: 100%; padding: 0.1em 0em 1px 0em; border: none; border-radius: 0px; border-bottom: 1px solid #aaa; outline: none; margin: 0px; background: none; }
.float-label-control textarea { padding: 0.1em 0em 5px 0em; }
.float-label-control label { position: absolute; font-weight: normal; top: -1.0em; left: 0.08em; color: #aaaaaa; z-index: -1; font-size: 0.85em; -moz-animation: float-labels 300ms none ease-out; -webkit-animation: float-labels 300ms none ease-out; -o-animation: float-labels 300ms none ease-out; -ms-animation: float-labels 300ms none ease-out; -khtml-animation: float-labels 300ms none ease-out; animation: float-labels 300ms none ease-out; /* There is a bug sometimes pausing the animation. This avoids that.*/ animation-play-state: running !important; -webkit-animation-play-state: running !important; }
.float-label-control input.empty + label,
.float-label-control textarea.empty + label { top: 0.1em; font-size: 1.5em; animation: none; -webkit-animation: none; }
.float-label-control input:not(.empty) + label,
.float-label-control textarea:not(.empty) + label { z-index: 1; }
.float-label-control input:not(.empty):focus + label,
.float-label-control textarea:not(.empty):focus + label { color: #aaaaaa; }
.float-label-control.label-bottom label { -moz-animation: float-labels-bottom 300ms none ease-out; -webkit-animation: float-labels-bottom 300ms none ease-out; -o-animation: float-labels-bottom 300ms none ease-out; -ms-animation: float-labels-bottom 300ms none ease-out; -khtml-animation: float-labels-bottom 300ms none ease-out; animation: float-labels-bottom 300ms none ease-out; }
.float-label-control.label-bottom input:not(.empty) + label,
.float-label-control.label-bottom textarea:not(.empty) + label { top: 3em; }



/*
*
* FONTS
*
*/


@font-face {
    font-family: Fashion Fetish Light;
    src: url("../fonts/Fashion Fetish Light.ttf");
}
@font-face {
    font-family: Fashion Fetish Bold;
    src: url("../fonts/Fashion Fetish Bold.ttf");
}
@font-face {
    font-family: Always In My Heart;
    src: url("../fonts/Always In My Heart.ttf");
}


/*
*
* KEYFRAMES
*
*/ 



@keyframes float-labels {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: -1em; opacity: 1; }
}

@-webkit-keyframes float-labels {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: -1em; opacity: 1; }
}

@keyframes float-labels-bottom {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: 3em; opacity: 1; }
}

@-webkit-keyframes float-labels-bottom {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: 3em; opacity: 1; }
}


/*
*
* HOSTING
*
*/

.hosting .col-lg-4{ padding: 0 !important;}
.hosting .blocks{ border:1px solid #EEEEEE; background-color: white;}
.hosting .blocks:hover{box-shadow:0px 0px 10px #D9E0DB;}
.hosting .block-header{ height: 95px; text-align: center; width: 100%; padding: 8%; background: #ff6a44; color: #333333;}
.hosting .block-container p:hover{background:#F8F8F8;}
.hosting .block-header h4{ font-weight: bold; vertical-align: center;}
.hosting .block-container{ text-align: center;}
.hosting .block-container p{ border-bottom:1px solid #F4F7F8; margin: 0; padding: 2%; }
.hosting .block-container p:last-child{ border-bottom:none;}
.hosting .price{font-size: 50px; font-family: PT Serif; color: #FF592D; font-weight: bold;}
.hosting .renew-price{font-size: 12px; color: #333333; font-style: italic; font-weight: normal;}
.hosting .block-footer{text-align: center; padding: 10%;}
.hosting .order-now{border: 1px solid #FF592D; padding: 15px; border-radius: 4%; color:#333333; font-weight: bold; }
.hosting .order-now:hover{text-decoration: none; background: #FF592D; color: #fff;}
.hosting .active-block { box-shadow:0px 0px 10px #D9E0DB;}
.hosting .active-block .block-header{ background: #ff6a44; color: #fff;}
.hosting .active-block .price{ color:#ff6a44;}
.hosting .active-block .block-footer a{ background: #45BA76; color: #fff; border:none;}
.hosting .active-block .block-footer a:hover{ background: #EEEEEE; color: #333333; border:1px solid #45BA76;}



/*
*
* NEWS SECTION PROJECT/WEBAPPS/NEWS
*
*/


.news .vegas {
    /*    height: 80vh;*/
}


.news .btn {
    position: absolute;
    top: 0;
    left: 0;
}

.news .time{
    position: absolute;
    top: 0;
    right: 0;
    padding: 20px;
    color:rgba(255,106,68,0.7);
    font-family: Fashion Fetish Bold;
    font-size: 40px;
}
.news .info{
    background-color: rgba(255,106,68,0.6);
    width: 100%;
    text-align: center;
    margin-top: -100px;
    position: absolute;
    bottom: 50px;
}


.news h2{
    font-family: Fashion Fetish Bold;
    margin-top: 20px;
    font-size: 30px;
    padding: 15px;
    color:white;

}
.news p{
    font-size: 20px;
    color:white;
}


/*


FOOTER


*/

footer {
    background-color: #ff6a44;
    color: white;
    text-align: center;
    font-family: Fashion Fetish light;
    padding:20px;
    margin-bottom: 0;
}
footer a{
    color: white;
}
footer a:focus, footer a:hover {
    color: white;
}


/*
*
*
* project-websites-icons
*
*
*/

.project-websites-icons .icon{
    min-height: 100px;
}
.project-websites-icons h3{
    font-family: Fashion Fetish light;
    min-height: 100px;
}