/** Twinkle Events Company - Landing site **/
/** By Jonathan Mortimer **/


 
h1, h2, h3 {
    font-family: 'Amatic SC', cursive;
} 

h1 {
    font-size: 48px;
    line-height: 58px;
    margin: 16px;
}

h2 {
    font-size: 36px;
    line-height: 44px;
    margin: 13px;
}

h3 {
    font-size: 33px;
    line-height: 40px;
    margin: 10px;
}

.ctas {text-align:center!important;padding-left:15%!important; padding-right:15%!important;}

/*p {
    font-size: 18px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 200;
}*/

 

.header {
    display: flex;
}

.heading {
    width: 80%;
}

#logoblock img {margin-top:-15px!important;}

#headerblock {width:100%!important;position:relative!important;}
#logoblock {width:15%!important; margin-right: 3%!important;float:left!important;}
#headerintro {width:92%!important;padding-top:4px!important; }

#headerintro h1 {margin-top:22px!important;line-height:47px!important;text-align:center!important;font-size:38px!important;color:#6d6654!important;}


.logo {
    width: 20%;
}

.heading h1, .heading h2 {
 
    color: #6d6654;
}

.intro {
    background-color: #efefef;
    padding: 20px 30px;
    justify-content: center;
}

.container .row {
   /* display: flex;*/
}

.container .row .block {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    flex-direction: column;
}

/*.container .row .block p {
    width: 100%;
    text-align: center;
}

.container .btn {
    background-color: #6d6654;
    color: #fff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.2s ease-in-out;
    margin: 20px 0;
}

.container .btn:hover {
    background-color: #000;
}

.container .btn a {
    color: #fff;
    text-decoration: none;
}*/

.intro {text-align:center!important;}

.container .row.ctas {
   /* justify-content: space-around;
    flex: 1 1 auto;*/
    padding: 40px 30px 10px 30px;
    background-color: #e3dbce;
    overflow:auto!important;
}

p {font-size:32px!important;font-family: 'Amatic SC', cursive; color:#000!important; font-weight:500!important; margin-top:5px!important; margin-bottom:5px!important; }

.container .row.ctas .block {
    width: 39%;
    position: relative;
    
    float:left!important;
    
   
    min-height:600px!important;
}
.row.ctas .block:first-child {margin-right:5%!important;}


.container .row.ctas .block {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-filter: brightness(100%);
}

.container .row.ctas .block:hover {
    -webkit-filter: brightness(70%);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.container .row .block.weddings {
    background-image: url("../images/weddings.jpg");
}

.container .row .block.events {
    background-image: url("../images/events3.jpg");
}

.container .row.ctas .cta .cta-title {
    position: absolute;
    top: 10%;
    background-color: rgba(0,0,0,0.4);
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    width: 80%;
    text-align: center;
}

.container .row .block.info {
    background-color: #e3dbce;
}

.container .row .block.mobile {
    display: none;
}

.container .row .block.desktop {
    display: block;
}

@media screen and (max-width: 1400px) {
    /*.intro {
        width: 85%;
        left: 4%;
    } */
}


@media screen and (max-width: 1700px) {
    
    #headerintro h1 {
        font-size:33px!important;
    }
}
    
    
    
@media screen and (max-width: 1550px) {

    #headerintro h1 {
        font-size:36px!important;
    }
}
    
@media screen and (max-width: 1450px) {
    
    #headerintro h1 {
        font-size:37px!important;
        line-height: 42px!important;
        text-align:center!important;
    }
    #logoblock {
        padding-top:1%!important;
    }
    
    .ctas {text-align:center!important;padding-left:9%!important; padding-right:9%!important;}
}

@media screen and (max-width: 1300px) {
 .ctas {text-align:center!important;padding-left:5%!important; padding-right:5%!important;}
 
    #headerintro h1 {
        font-size:30px!important;
    }
    }
@media screen and (max-width: 1100px) {
    
    #headerintro h1 {
        font-size:30px!important;
        line-height: 35px!important;
        text-align:center!important;
    }
    
    #headerintro {width:76%!important; float:right!important;}
    

    
    .container .row.ctas .block {width:38%!important;}
}
    
@media screen and (max-width: 900px) {
      .container .row.ctas .block {width:36%!important;}
    #headerintro h1 {
        margin-left:25px!important;
    }
}

@media screen and (max-width: 767px) {
    .container .row .block {
        width: 100%;
        min-height: 400px;
    }

.container .row.ctas .block {width:84%!important;margin-bottom:40px!important;}

    #logoblock {width:100%!important; text-align:center!important;margin-right:0%!important; }
    
    #headerintro {width:97%!important; text-align:center!important;}
    
       #headerintro h1 { margin-left:0px!important;}
       
       .intro  {width:88%!important;padding-top:0%!important;}
       
       #headerintro h1 {font-size:28px!important;}
       h2 {font-size:26px!important;}
       
       p {font-size:27px!important; margin-bottom:30px!important;}

    .container .row {
       
        height: auto;
    }

    .intro {
        width: 100%;
        position: relative;
        top: 0%;
        left: 0%;
        background-color: #fefefe;
        /* border: 6px double #333; */
        box-shadow: none;
    }

    .container {
        width: 100%;
    }

    .container .row .block.mobile {
        display: block;
    }

    .container .row .block.desktop {
        display: none;
    }
    
    .container .row .block {padding:0px 40px!important;}
    
    .intro::before, .intro::after {
        content: '';
    }
}

@media screen and (max-width: 450px) {
    
.container .row.ctas .block {width:75%!important;}
.intro {padding:0px!important;width: 100%!important; }


}