

/*

====================================================



* 	[Master Stylesheet]

	

	Theme Name :  

	Version    :  

	Author     :  

	Author URI :  



====================================================



	TOC

	

	1. PRIMARY STYLES

	2. COMMONS FOR PAGE DESIGN

		JQUERY LIGHT BOX

	3. LEFT SECTION

	4. RIGHT SECTION



====================================================



/* ---------------------------------

1. PRIMARY STYLES

--------------------------------- */



html{ font-size: 100%; height: 100%; width: 100%; overflow-x: hidden; margin: 0px;  padding: 0px; touch-action: manipulation; }





body{ font-size: 16px; font-family: 'Open Sans', sans-serif; width: 100%; height: 100%; margin: 0; font-weight: 400;

	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-wrap: break-word; overflow-x: hidden; 

	color: #333; }



h1, h2, h3, h4, h5, h6, p, a, ul, span, li, img, inpot, button{ margin: 0; padding: 0; }



h1,h2,h3,h4,h5,h6{ line-height: 1.5; font-weight: inherit; }



h1,h2,h3{ font-family: 'Poppins', sans-serif; }



p{ line-height: 1.6; font-size: 1.05em; font-weight: 400; color: #555; }



h1{ font-size: 3.5em; line-height: 1; }

h2{ font-size: 3em; line-height: 1.1; }

h3{ font-size: 2.5em; }

h4{ font-size: 1.5em; }

h5{ font-size: 1.2em; }

h6{ font-size: .9em; letter-spacing: 1px; }



a, button{ display: inline-block; text-decoration: none; color: inherit; transition: all .3s; line-height: 1; }



a:focus, a:active, a:hover,

button:focus, button:active, button:hover,

a b.light-color:hover{ text-decoration: none; color: #E45F74; }



b{ font-weight: 500; }



img{ width: 100%; }



li{ list-style: none; display: inline-block; }



span{ display: inline-block; }



button{ outline: 0; border: 0; background: none; cursor: pointer; }



b.light-color{ color: #444; }



.icon{ font-size: 1.1em; display: inline-block; line-height: inherit; }



[class^="icon-"]:before, [class*=" icon-"]:before{ line-height: inherit; }







/* ---------------------------------

2. COMMONS FOR PAGE DESIGN

--------------------------------- */



.center-text{ text-align: center; } 



.display-table{ display: table; height: 100%; width: 100%; }



.display-table-cell{ display: table-cell; vertical-align: middle; }







::-webkit-input-placeholder { font-size: .9em; letter-spacing: 1px; }



::-moz-placeholder { font-size: .9em; letter-spacing: 1px; }



:-ms-input-placeholder { font-size: .9em; letter-spacing: 1px; }



:-moz-placeholder { font-size: .9em; letter-spacing: 1px; }





.full-height{ height: 100%; }



.position-static{ position: static; }





.main-area{ position: relative; height: 100vh;  }





/* ---------------------------------

3. LEFT SECTION

--------------------------------- */



.left-section{ float: left; width: 50%; position: relative; }



.left-section .logo{ position: absolute; top: 40px; height: 30px; }



.left-section .logo img{ height: 100%; width: auto; } 





.left-section .main-content{ padding: 40px 40px 40px 0; }



.main-content .title{ margin-bottom: 15px; }



.main-content .email-input-area{ margin: 40px 0 20px; position: relative; width: 400px; height: 47px; }



.main-content .email-input-area .email-input{ width: 100%; position: absolute; top: 0; bottom: 0; left: 0; 

	border-radius: 40px; border: 0; outline: 0; padding: 0 140px 0 25px; transition: all .2s; background: #F1F2F3; 

	box-shadow: inset 0 0 1px rgba(0,0,0,.1); border: 1px solid transparent; }



.main-content .email-input-area .email-input:focus{ border-color: #f89fbc; }





.main-content .email-input-area .submit-btn{ width: 120px; text-align: center; position: absolute; top: 0; bottom: 0; right: 0; font-size: .9em;

	border-radius: 0 40px 40px 0; transition: all .3s; background: #F84982; color: #fff; }



.main-content .email-input-area .submit-btn:hover{ background: #e40b52; }





.main-content .post-desc{ color: #999; }





.left-section .footer-icons{ position: absolute; bottom: 30px;}



.left-section .footer-icons > li > a{ display: inline-block; font-size: 1.07em; padding: 0 0px; }



.left-section .footer-icons > li:first-child{ margin-right: 10px; }



.left-section .footer-icons > li > a > i{ display: inline-block; height: 35px; line-height: 33px; 

	transition: all .2s; border-radius: 40px; text-align: center; width: 35px; }



.left-section .footer-icons > li > a:hover > i{ border: 1px solid; }



.left-section .footer-icons > li > a > i[class*="facebook"]{ color: #2A61D6; border-color: #2A61D6; }

.left-section .footer-icons > li > a > i[class*="twitter"]{ color: #3AA4F8; border-color: #3AA4F8; }

.left-section .footer-icons > li > a > i[class*="google"]{ color: #F43846; border-color: #F43846; }

.left-section .footer-icons > li > a > i[class*="instagram"]{ color: #8F614A; border-color: #8F614A; }

.left-section .footer-icons > li > a > i[class*="pinterest"]{ color: #E1C013; border-color: #E1C013; }







/* ---------------------------------

4. RIGHT SECTION

--------------------------------- */



.right-section{ position: absolute; top: 0; bottom: 0; right: 0; background-size: cover; z-index: 1; }



.full_screen_mode {width: 100%;}



.half_width_mode{width: 50%;}



.right-section:after{ content:''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: -2;

	opacity: .3; background: linear-gradient(to right, #23074d, #cc5333); }



#rounded-countdown{ width: 80%; margin: 0 auto; }





/*---------------------------------------------*/

a {

	

	font-size: 14px;

	line-height: 1.7;

	color: #666666;

	margin: 0px;

	transition: all 0.4s;

	-webkit-transition: all 0.4s;

  -o-transition: all 0.4s;

  -moz-transition: all 0.4s;

}



a:focus {

	outline: none !important;

}



a:hover {

	text-decoration: none;

	color: #57b846;

}



/*---------------------------------------------*/

h1,h2,h3,h4,h5,h6 {

	margin: 0px;

}



p {

	

	font-size: 14px;

	line-height: 1.7;

	color: #666666;

	margin: 0px;

}



ul, li {

	margin: 0px;

	list-style-type: none;

}





/*---------------------------------------------*/

input {

	outline: none;

	border: none;

}



textarea {

  outline: none;

  border: none;

}



textarea:focus, input:focus {

  border-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; }



textarea:focus::-webkit-input-placeholder { color:transparent; }

textarea:focus:-moz-placeholder { color:transparent; }

textarea:focus::-moz-placeholder { color:transparent; }

textarea:focus:-ms-input-placeholder { color:transparent; }



input::-webkit-input-placeholder { color: #999999; }

input:-moz-placeholder { color: #999999; }

input::-moz-placeholder { color: #999999; }

input:-ms-input-placeholder { color: #999999; }



textarea::-webkit-input-placeholder { color: #999999; }

textarea:-moz-placeholder { color: #999999; }

textarea::-moz-placeholder { color: #999999; }

textarea:-ms-input-placeholder { color: #999999; }



/*---------------------------------------------*/

button {

	outline: none !important;

	border: none;

	background: transparent;

}



button:hover {

	cursor: pointer;

}



iframe {

	border: none !important;

}











/*//////////////////////////////////////////////////////////////////

[ Contact 2 ]*/

.bg-contact2 {

  width: 100%;  

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

}



.container-contact2 {

  width: 100%;  

  min-height: 100vh;

  display: -webkit-box;

  display: -webkit-flex;

  display: -moz-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  padding: 15px;

  background: rgba(219,21,99,0.8);

  background: -webkit-linear-gradient(45deg, rgba(213,0,125,0.8), rgba(229,57,53,0.8));

  background: -o-linear-gradient(45deg, rgba(213,0,125,0.8), rgba(229,57,53,0.8));

  background: -moz-linear-gradient(45deg, rgba(213,0,125,0.8), rgba(229,57,53,0.8));

  background: linear-gradient(45deg, rgba(213,0,125,0.8), rgba(229,57,53,0.8));

}



.wrap-contact2 {

  width: 790px;

  background: #fff;

  border-radius: 10px;

  overflow: hidden;

  padding: 72px 55px 90px 55px;

}





/*------------------------------------------------------------------

[  ]*/



.contact2-form {

  width: 100%;

}



.contact2-form-title {

  display: block;

  font-size: 39px;

  color: #333333;

  line-height: 1.2;

  text-align: center;

  padding-bottom: 90px;

}







/*------------------------------------------------------------------

[  ]*/



.wrap-input2 {

  width: 100%;

  position: relative;

  border-bottom: 2px solid #adadad;

  margin-bottom: 37px;

}



.input2 {

  display: block;

  width: 100%;



  font-size: 15px;

  color: #555555;

  line-height: 1.2;

}



.focus-input2 {

  position: absolute;

  display: block;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  pointer-events: none;

}



.focus-input2::before {

  content: "";

  display: block;

  position: absolute;

  bottom: -2px;

  left: 0;

  width: 0;

  height: 2px;



  -webkit-transition: all 0.4s;

  -o-transition: all 0.4s;

  -moz-transition: all 0.4s;

  transition: all 0.4s;



  background: rgba(219,21,99,1);

  background: -webkit-linear-gradient(45deg, #d5007d, #e53935);

  background: -o-linear-gradient(45deg, #d5007d, #e53935);

  background: -moz-linear-gradient(45deg, #d5007d, #e53935);

  background: linear-gradient(45deg, #d5007d, #e53935);

}



.focus-input2::after {

  content: attr(data-placeholder);

  display: block;

  width: 100%;

  position: absolute;

  top: 0px;

  left: 0;



  font-size: 13px;

  color: #999999;

  line-height: 1.2;



  -webkit-transition: all 0.4s;

  -o-transition: all 0.4s;

  -moz-transition: all 0.4s;

  transition: all 0.4s;

}



/*---------------------------------------------*/

input.input2 {

  height: 45px;

}



input.input2 + .focus-input2::after {

  top: 16px;

  left: 0;

}



textarea.input2 {

  min-height: 115px;

  padding-top: 13px;

  padding-bottom: 13px;

}



textarea.input2 + .focus-input2::after {

  top: 16px;

  left: 0;

}



.input2:focus + .focus-input2::after {

  top: -13px;

}



.input2:focus + .focus-input2::before {

  width: 100%;

}



.has-val.input2 + .focus-input2::after {

  top: -13px;

}



.has-val.input2 + .focus-input2::before {

  width: 100%;

}



/*------------------------------------------------------------------

[ Button ]*/

.container-contact2-form-btn {

  display: -webkit-box;

  display: -webkit-flex;

  display: -moz-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  padding-top: 13px;

}



.wrap-contact2-form-btn {

  display: block;

  position: relative;

  z-index: 1;

  border-radius: 2px;

  width: auto;

  overflow: hidden;

  margin: 0 auto;

}



.contact2-form-bgbtn {

  position: absolute;

  z-index: -1;

  width: 300%;

  height: 100%;

  background: rgba(219,21,99,1);

  background: -webkit-linear-gradient(-135deg, #d5007d, #e53935, #d5007d, #e53935);

  background: -o-linear-gradient(-135deg, #d5007d, #e53935, #d5007d, #e53935);

  background: -moz-linear-gradient(-135deg, #d5007d, #e53935, #d5007d, #e53935);

  background: linear-gradient(-135deg, #d5007d, #e53935, #d5007d, #e53935);

  top: 0;

  left: -100%;



  -webkit-transition: all 0.4s;

  -o-transition: all 0.4s;

  -moz-transition: all 0.4s;

  transition: all 0.4s;

}



.contact2-form-btn {

  display: -webkit-box;

  display: -webkit-flex;

  display: -moz-box;

  display: -ms-flexbox;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 0 20px;

  min-width: 244px;

  height: 50px;



 



  font-size: 16px;

  color: #fff;

  line-height: 1.2;

  



}



.wrap-contact2-form-btn:hover .contact2-form-bgbtn {

  left: 0;

}



/*------------------------------------------------------------------

[ Responsive ]*/



@media (max-width: 576px) {

  .wrap-contact2 {

    padding: 72px 15px 90px 15px;

  }

}







/*------------------------------------------------------------------

[ Alert validate ]*/



.validate-input {

  position: relative;

}



.alert-validate::before {

  content: attr(data-validate);

  position: absolute;

  max-width: 70%;

  background-color: white;

  border: 1px solid #c80000;

  border-radius: 2px;

  padding: 4px 25px 4px 10px;

  top: 50%;

  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  transform: translateY(-50%);

  right: 0px;

  pointer-events: none;



  color: #c80000;

  font-size: 13px;

  line-height: 1.4;

  text-align: left;



  visibility: hidden;

  opacity: 0;



  -webkit-transition: opacity 0.4s;

  -o-transition: opacity 0.4s;

  -moz-transition: opacity 0.4s;

  transition: opacity 0.4s;

}



.alert-validate::after {

  content: "\f12a";

  font-family: FontAwesome;

  display: block;

  position: absolute;

  color: #c80000;

  font-size: 16px;

  top: 50%;

  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  transform: translateY(-50%);

  right: 8px;

}



.alert-validate:hover:before {

  visibility: visible;

  opacity: 1;

}



@media (max-width: 992px) {

  .alert-validate::before {

    visibility: visible;

    opacity: 1;

  }

}













.lds-ripple {

  display: block;

  position: relative;

  width: 80px;

  height: 80px;

  margin: 0px auto;

}

.lds-ripple div {

  position: absolute;

  border: 4px solid #de2252;

  opacity: 1;

  border-radius: 50%;

  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;

}

.lds-ripple div:nth-child(2) {

  animation-delay: -0.5s;

}

@keyframes lds-ripple {

  0% {

    top: 36px;

    left: 36px;

    width: 0;

    height: 0;

    opacity: 1;

  }

  100% {

    top: 0px;

    left: 0px;

    width: 72px;

    height: 72px;

    opacity: 0;

  }

}