/* ===========
FB Details
============== */
/*
@import url(https://db.onlinewebfonts.com/c/012353322f649f02f19d7806cf74b7f8?family=fontello);

@font-face {
    font-family: "fontello";
    src: url("https://db.onlinewebfonts.com/t/012353322f649f02f19d7806cf74b7f8.eot");
    src: url("https://db.onlinewebfonts.com/t/012353322f649f02f19d7806cf74b7f8.eot?#iefix") format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/012353322f649f02f19d7806cf74b7f8.woff2") format("woff2"),
        url("https://db.onlinewebfonts.com/t/012353322f649f02f19d7806cf74b7f8.woff") format("woff"),
        url("https://db.onlinewebfonts.com/t/012353322f649f02f19d7806cf74b7f8.ttf") format("truetype"),
        url("https://db.onlinewebfonts.com/t/012353322f649f02f19d7806cf74b7f8.svg#fontello") format("svg");
}
*/


body,
html {
    overflow-x: hidden;
}

h1,
h2,
h3 {
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-style: normal;
    font-weight: 700;
}

h2 {
    font-size: 44px;
    text-align: center;
}


h4,
h5 {
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-style: normal;
    font-weight: 500;
}

h5 {
    font-size: 22px;
    line-height: 36px;
    font-weight: 300;
    padding-bottom: 20px;
}

p,
a,
span,
li,
input,
textarea {
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-style: normal;
    font-weight: 300;
}



p {
    font-size: 18px;
    line-height: 30px;
    color: #6a7079;
}

p.center {
    text-align: center;
    padding: 0 40px;
    margin: 0 auto 100px;
}

p.center a {
    color: #fc9707
}

p.center a:hover {
    text-decoration: none;
    color: #000;
}

.red {
    color: #ef2828;
}

.brL {
    border-left: 0;
}

.brR {
    border-right: 0;
}

.myIcon {
    color: #ffb311;
    margin-right: 0px;
}

.noPadding {
    padding: 0 !important;
}



#innerBody {
    position: relative;
    background: url(../images/fb-detail-bg.svg) 15% 0 no-repeat #e4f3ff;
    background-size: 540%, cover;
}

#ytBG {
    position: relative;
    background: url(../images/yt-detail-bg.svg) 15% 0 no-repeat #e4f3ff;
    background-size: 540%, cover;
}

#twitBG {
    position: relative;
    background: url(../images/twit-detail-bg.svg) 15% 0 no-repeat #e4f3ff;
    background-size: 540%, cover;
}

#instaBG {
    position: relative;
    background: url(../images/insta-detail-bg.svg) 15% 0 no-repeat #e4f3ff;
    background-size: 540%, cover;
}

#tiktokBG {
    position: relative;
    background: url(../images/tiktok-detail-bg.svg) 15% 0 no-repeat #e4f3ff;
    background-size: 540%, cover;
}


#innerHeader {
    overflow: hidden;
    position: relative;
    height: 150px;
    padding-bottom: 100px;
}


.logoSVG {
  width: 140px;
}



.backNow {
    position: absolute;
    left: 0;
    top: 20px;
    color: #fff;
    font-size: 18px;
    padding: 8px 25px;
}

a:hover.backNow {
    color: #fc9707;
    text-decoration: none;
}

.innerLogo {
    position: absolute;
    right: 0;
    top: 20px;
    padding: 0 20px 0 0;
}

#orderDetailsBox {
    padding: 100px 30px 0;
}

#orderDetailsBox .space {
    padding: 0 20px 0 0;
    overflow-y: scroll; 
    margin: 0pt auto;
}

#orderDetails {
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 6px 35px 0px rgba(38, 124, 198, 0.2);
    padding-bottom: 40px;

}


#orderDetails h2 {
    padding: 60px 0 20px;
}

#orderDetails table {
    width: 1190px;
    margin: 0pt auto 20px;
    background: url(../images/table-bg.svg) 0 0 no-repeat;
    background-size: 100%, cover;
    padding: 0 15px;
}


#orderDetails tr th {
    font-size: 18px;
    font-weight: 700;
    padding: 18px 15px 15px;
    border-right: solid 1px #cee0ee;
    color: #181b3d;
}

#orderDetails tr th:last-child { 
    border: 0;

}

#orderDetails tr td {
    padding: 30px 15px 0;
    font-size: 18px;
    color: #6b6e98;
    border-right: solid 1px #cee0ee;
}

#orderDetails tr td:last-child { 
    border: 0;

}

.cs {
    background: #fc9707;
    padding: 20px 25px 15px;
    display: block;
    margin: 150px auto 100px;
    width: 310px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

a:hover.cs {
    text-decoration: none;
    background: #fff;
    color: #181b3d;
}


#expired {
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 6px 35px 0px rgba(38, 124, 198, 0.2);
    padding: 40px 40px 30px;
    width: 90%;
    margin: 100px auto;
}

#expired p {
    text-align: center;
}



#summary {
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 6px 35px 0px rgba(38, 124, 198, 0.2);
    padding: 40px 35px 30px;
    width: 90%;
    margin: 100px auto 40px;
}

#summary h2 {
    padding-bottom: 20px;
}


#summary ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#summary ul li {
    border-top: solid 1px #d1e0f2;
    padding-top: 20px;
    overflow: hidden;
}

#summary ul li:last-child {
        padding: 40px 25px;
    }

#summary ul li p {
    text-align: center;
    font-weight: 500;
    font-size: 18px;
}

#summary ul li .price {
    color: #fb9606;
    font-size: 32px;
    font-weight: 700;
}

#summary ul li .url {
    font-weight: 700;
    color: #181b3d;
}

#summary .cs {
    margin: 0 auto;
    width: 100%;
}
    
#summary a:hover.cs {
    background: #f2f2f2
}

/* The container */
#summary label.container {
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 6px 35px 0px rgba(38, 124, 198, 0.2);
    border: solid 1px #d1e0f2;
    display: block;
    position: relative;
    padding: 25px 25px 25px 65px;
    margin-bottom: 12px;
    cursor: pointer;
    font-weight: 500;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#summary label.borderColor {
    border: solid 2px #f33737;
}

/* Hide the browser's default radio button */
#summary label.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 23px;
  left: 25px;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border-radius: 50%;
  border: solid 1px #d1e0f2;
}


/* On mouse-over, add a grey background color */
#summary label.container:hover input ~ .checkmark {
  background-color: #f2f2f2;
}

/* When the radio button is checked, add a blue background */
#summary label.container input:checked ~ .checkmark {
  background-color: #fff;
  border: solid 2px #f33737;
}


/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
#summary label.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
#summary label.container .checkmark:after {
    top: 5px;
    left: 5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #f33737;
}

#summary label.container img {
    width: auto;
    margin-top: 10px;
    display: block;
}




#twitBG label.borderColor,
#twitBG #summary label.container input:checked ~ .checkmark {
  border: solid 2px #06b0f0;
}

#twitBG #summary label.container .checkmark:after {
    background: #06b0f0;
}


#instaBG label.borderColor,
#instaBG #summary label.container input:checked ~ .checkmark {
  border: solid 2px #a263d9;
}

#instaBG #summary label.container .checkmark:after {
    background: #a263d9;
}

#innerBody label.borderColor,
#innerBody #summary label.container input:checked ~ .checkmark {
  border: solid 2px #4a63a6;
}

#innerBody #summary label.container .checkmark:after {
    background: #4a63a6;
}



#orderNow {
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 6px 35px 0px rgba(38, 124, 198, 0.2);
    padding: 40px 15px 30px;
    width: 90%;
    margin: 100px auto 40px;
}

#orderNow h2 {
    padding-bottom: 20px;
}

#orderNow p {
    text-align: center;
    padding: 0;
}

#orderNow form label {
    display: block;
    font-size: 18px;
    font-weight: 500px;
    padding-top: 20px;
}

#orderNow form input[type=text] {
    display: block;
    border-radius: 50px;
    background: #ebf2f9;
    padding: 15px 20px;
    font-size: 18px;
    width: 100%;
    border: solid 3px #fff;
}

#orderNow form input[type=text]:focus {
    border: solid 3px #fe9a9a;
    outline: none;
}

#orderNow form input[type=url] {
    display: block;
    border-radius: 50px;
    background: #ebf2f9;
    padding: 15px 20px;
    font-size: 18px;
    width: 100%;
    border: solid 3px #fff;
}

#orderNow form input[type=url]:focus {
    border: solid 3px #fe9a9a;
    outline: none;
}

#orderNow form span.error {
    font-size: 14px;
    color: #ed1c24;
    display: block;
    padding: 5px 0;
    display: none;
}



.custom-select-wrapper {
     position: relative;
     user-select: none;
     width: 100%;
}


 .custom-select {
     position: relative;
     display: contents;
     flex-direction: column;
     border: 0;
     user-select: none;
}




 .custom-select__trigger {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 22px 0 3px;
     font-size: 20px;
     font-weight: 300;
     color: #3b3b3b;
     height: 60px;
     line-height: 60px;
     background: #fe9a9a;
     cursor: pointer;
     border-radius: 50px;
}

 .custom-options {
     position: absolute;
     display: block;
     top: 105%;
     left: 0;
     right: 0;
     background: #ebf2f9;
     border-radius: 20px;
     transition: all 0.5s;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     z-index: 2;
     overflow: scroll;
    height: 170px;

}
 .custom-select.open .custom-options {
     opacity: 1;
     visibility: visible;
     pointer-events: all;
}
 .custom-option {
     position: relative;
     display: block;
     padding: 0 22px 0 22px;
     font-size: 22px;
     font-weight: 300;
     line-height: 60px;
     cursor: pointer;
     transition: all 0.5s;
}
 .custom-option:hover {
     cursor: pointer;
     background-color: #b2b2b2;
}
 .custom-option.selected {
     background-color: #305c91;
}

.arrow {
     position: relative;
     height: 15px;
     width: 15px;
}
 .arrow::before, .arrow::after {
     content: "";
     position: absolute;
     bottom: 0px;
     width: 0.15rem;
     height: 100%;
     transition: all 0.5s;
}
 .arrow::before {
     left: -5px;
     transform: rotate(-45deg);
     background-color: #fff;
}
 .arrow::after {
     left: 5px;
     transform: rotate(45deg);
     background-color: #fff;
}
 .open .arrow::before {
     left: -5px;
     transform: rotate(45deg);
}
 .open .arrow::after {
     left: 5px;
     transform: rotate(-45deg);
}


.selected-data {
    width: 100%;
}

.packOption {
    float: left;
    font-size: 16px;
    font-weight: 700;
    width: 89%;
    line-height: 43px;
    background: #ebf2f9;
    border-radius: 50px 0 0 50px;
    padding: 6px 10px 2px;
}

.countNum {
    color: #9196a3;
    font-weight: 300;
    padding-left: 10px;
}

.custom-option .packOption {
    padding-left: 0;
    background: none;
}

span.price {
    text-align: right;
    float: right;
    font-size: 18px;
    font-weight: 700;
    padding-top: 3px;
}


.packOption b {
    display: none;
}


#orderNow .cs {
    margin-top: 40px;
    width: 100%;
}


/* The container */
#orderNow .container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #9d9ea7;
}

/* Hide the browser's default checkbox */
#orderNow .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
#orderNow .checkmark {
  position: absolute;
  top: 22px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ebf2f9;
  border-radius: 5px;
  border: solid 1px #d1e0f2;
}

/* On mouse-over, add a grey background color */
#orderNow .container:hover input ~ .checkmark {
  background-color: #ebf2f9;
}

/* When the checkbox is checked, add a blue background */
#orderNow .container input:checked ~ .checkmark {
  background-color: #fc8e8e;
  border-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
#orderNow .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
#orderNow .container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
#orderNow .container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


#orderNow .submitNow {
    border-radius: 50px;
    margin: 40px auto 0;
    padding: 0;
    position: relative;
    display: block;
    width: 238px;
}

#orderNow .submitNow input[type=submit] {
    color: #fff;
    text-transform: uppercase;
    background: none;
    font-weight: 700;
    border: 0;
    letter-spacing: 1.5px;
    font-size: 18px;    
    cursor: pointer;
    padding: 16px 80px 15px 60px;
    background: #fc9707;
    border-radius: 30px;
}

#orderNow .submitNow .fa-chevron-right {
    color: #fff;
    position: absolute;
    top: 20px;
    right: 50px;
}




#twitBG #orderNow form input[type=text]:focus {
    border: solid 3px #85dbfa;
}


#twitBG .custom-select__trigger {
     background: #85dbfa;
}

#twitBG #orderNow .container input:checked ~ .checkmark {
    background-color: #85dbfa;

}


#innerBody #orderNow form input[type=text]:focus {
    border: solid 3px #9dabcf;
}


#innerBody .custom-select__trigger {
     background: #9dabcf;
}

#innerBody #orderNow .container input:checked ~ .checkmark {
    background-color: #9dabcf;

}

#instaBG #orderNow form input[type=text]:focus {
    border: solid 3px #c68dd0;
}


#instaBG .custom-select__trigger {
     background: #c68dd0;
}

#instaBG #orderNow .container input:checked ~ .checkmark {
    background-color: #c68dd0;

}

#tiktokBG #orderNow form input[type=text]:focus {
    border: solid 3px #FE2C55;
}


#tiktokBG .custom-select__trigger {
    background: #FE2C55;
}

#tiktokBG #orderNow .container input:checked ~ .checkmark {
    background-color: #FE2C55;

}
/* Extra small devices (portrait phones, greater than 414px) */
@media only screen and (min-width: 374.98px) {
    
  

}


/* Extra small devices (portrait phones, greater than 414px) */
@media only screen and (min-width: 413.98px) {
   
}

/*Small devices (landscape phones, greater than 768px)*/
@media only screen and (min-width: 767.98px) {

   #innerBody {
        background: url(../images/fb-detail-bg.svg) 56% 0 no-repeat #e4f3ff;
        background-size: 230%, cover;
    }

    #ytBG {
        background: url(../images/yt-detail-bg.svg) 56% 0 no-repeat #e4f3ff;
        background-size: 230%, cover;
    }

    #twitBG {
        background: url(../images/twit-detail-bg.svg) 56% 0 no-repeat #e4f3ff;
        background-size: 230%, cover;
    }

    #instaBG {
        background: url(../images/insta-detail-bg.svg) 56% 0 no-repeat #e4f3ff;
        background-size: 230%, cover;
    }

	#tiktokBG {
        background: url(../images/tiktok-detail-bg.svg) 56% 0 no-repeat #e4f3ff;
        background-size: 230%, cover;
    }
    
    #expired {
        width: 642px;
        padding: 100px;
    }

    #summary {
        width: 670px;
        padding: 80px 45px;
        overflow: hidden;
    }

    #summary h2 {
        padding-bottom: 40px;
    }

    #summary ul li p {
        text-align: left;
    }
    
    #summary ul li p.price,
    #summary ul li p.url {
        text-align: right;
    }

    #summary label.container {
        float: left;
        width: 44.9%;
        height: 125px;
        margin: 14px;
    }
    
    #summary label:last-child {
        width: 95%;
    }
    
    #summary ul li:last-child {
        padding: 40px 10px;
    }

    #summary .cs {
        width: 275px;
    }


    #orderNow {
        width: 700px;
        padding: 80px 45px;
        overflow: hidden;
    }

    


    #orderNow p {
        text-align: center;
        padding: 0 50px 20px;
    }
        
    .packOption {
        float: left;
        font-size: 18px;
        font-weight: 700;
        width: 94.5%;
        line-height: 52px;
        background: #ebf2f9;
        border-radius: 50px 0 0 50px;
        padding: 0 20px;
    }

    .countNum {
        color: #9196a3;
        font-weight: 300;
        padding-left: 10px;
    }


    .packOption b {
        display: block;
        float: left;
    }

    span.price {
        text-align: right;
        float: right;
        font-size: 22px;
        font-weight: 700;
        padding-top: 2px;
        padding-bottom: 0;
    }

    #orderNow .container {
        width: 400px;
        margin: 0pt auto;
    }

}


/*Ipad Pro (tablets, greater than 834px)*/
@media only screen and (min-width: 833.98px) {
    #innerBody, 
    #ytBG,
    #twitBG,
    #instaBG,
    #tiktokBG
     {
        position: relative;
        background-size: 200%, cover;
    }

   
}


/*Medium devices (tablets, greater than 992px)*/
@media only screen and (min-width: 991.98px) {

   

}

/*Large devices (desktops, greater than 1024px)*/
@media only screen and (min-width: 1023.98px) {
    
   #summary {
        width: 900px;
    }
    
    #summary label.container {
        width: 30%;
        margin: 10px;
    }
    
    #summary label:last-child {
        width: 63%;
    }

    #summary ul li:last-child {
        padding: 40px 0 40px 20px;
    }

} 

/*ipad pro landscape (desktops, greater than 1112px)*/
@media only screen and (min-width: 1111.98px) {
    
   #innerBody,
   #ytBG,
   #twitBG,
    #instaBG,
    #tiktokBG
    {
        background-size: 160%, cover;
    }


}

/*ipad pro landscape (desktops, greater than 1175px)*/
@media only screen and (min-width: 1174.98px) {
    
   

}


/*Large devices (desktops, greater than 1200px)*/
@media only screen and (min-width: 1199.98px) {
    #innerBody,
    #ytBG,
    #twitBG,
    #instaBG,
    #tiktokBG
     {
        background-size: 144%, cover;
    }


    #orderDetailsBox .space {
        padding: 0;
    }

    #orderDetailsBox {
        max-width: 1200px;
    }
}


/*Large devices (desktops, greater than 1366px)*/
@media only screen and (min-width: 1249.98px) {

    #innerBody,
    #ytBG,
    #twitBG,
    #instaBG,
    #tiktokBG {
        background-size: 134%, cover;
    }


    .innerLogo {
        right: 50%;
        top: 20px;
        padding: 0;
        margin-right: -95px;
    }

     #orderDetailsBox {
        max-width: 1300px;
    }
    
    #expired {
        margin-top: 200px;
    }
}


/*Large devices (desktops, greater than 1440px)*/
@media only screen and (min-width: 1439.98px) {
    
    #orderDetailsBox {
        padding: 200px 30px 0;
        display: block;
    }

}

/*Large devices (desktops, greater than 1680px)*/
@media only screen and (min-width: 1679.98px) {
    
    #innerBody,
    #ytBG,
    #twitBG,
    #instaBG,
    #tiktokBG {
        background-size: 113%, cover;
    }

    #expired {
        margin-top: 250px;
    }
	

}

/*Large devices (desktops, greater than 1920px)*/
@media only screen and (min-width: 1919.98px) {

   #innerBody,
   #ytBG,
   #twitBG,
    #instaBG,
    #tiktokBG {
        background-size: 100%, cover;
    }

 
    #orderDetailsBox {
        padding: 300px 30px 0;
    }



}


/*Large devices (desktops, greater than 2200px)*/
@media only screen and (min-width: 2149.98px) {
    
    #innerHeader {
        margin-top: 30px;
        display: block;
    }

  

    #orderDetailsBox {
        padding: 400px 30px 0;
    }


}