/************************* General *************************/
@import url("https://use.typekit.net/jfp6voy.css");

:root{
  --dark-blue: #24293D;
  --dark-blue-30: #3a3e50;
  --dark-blue-60: #1d2131;
  --medium-blue: #2F3855;
  --medium-blue-20: #979caa;
  --medium-blue-60: #262d44;
  --light-blue: #8EBBFF;
  --off-white: #F4F4FC;
  --white: #FFFFFF;
  --black: #000000;
}

html, body{margin: 0;height: 100%;}
body{font-family: proxima-nova, sans-serif;font-style: normal;}


/************************* Contact Page *************************/
.contact{width: 100%;height:100vh;background-color: var(--medium-blue);background-image: url("../images/bkg2.png");background-position: bottom;background-size: cover;display: flex;justify-content: center;align-items: flex-start;flex-direction: column;padding: 116px 10% 32px 10%;transition: .5s;}
.contact .heading2, .contact .heading4{color: var(--light-blue);}
.contact .heading4{font-weight: 600;}

/* Section */
.contact_section{display: flex;flex-direction: column;width: 100%;}
.contact_section .info{display: flex;align-items: center;justify-content: flex-start;flex-direction: row;margin-bottom: 16px;}
.contact_section .info i, .contact_section .info span{color: var(--off-white);font-size: 24px;}
.contact_section .info p{color: var(--off-white);font-size: 16px;margin-left: 8px;}

/* Icons */
.icons_socials{margin:8vh 0 16vh 0;display: flex;justify-content: flex-start;align-items: center;flex-direction: row;}
.icons_socials:focus{outline: none;box-shadow: none;}
.icons_socials a{text-decoration: none;margin-right: 40px;padding: 8px;background-color: var(--dark-blue);border-radius: 4px;}
.icons_socials a:focus{outline: 1px solid var(--light-blue);border-radius: 4px;}
.icons_socials i{color: var(--off-white);font-size: 40px;transition: .5s;}
.icons_socials i:hover{color: var(--medium-blue-20)}

/* Form */
::placeholder{font-family: proxima-nova, sans-serif;color: var(--medium-blue-20);}

.contact form{display: flex;flex-direction: column;margin-top: 24px;background-color:inherit}
.contact form label{color: var(--medium-blue-20);}

input, textarea{font-family: proxima-nova, sans-serif;border-radius: 4px;color: var(--medium-blue-20);background-color: var(--dark-blue);border: none;height: 48px;padding: 0 16px;margin: 8px 0 16px 0}
input:focus, textarea:focus{outline: 1px solid var(--light-blue);background-color: var(--dark-blue);border-radius: 4px;}
textarea{padding-top: 16px;height: 150px;}

.submitbtn{background-color: var(--medium-blue);border: 1px solid var(--off-white);color:var(--off-white);width: fit-content;}
.submitbtn:hover{background-color: var(--off-white);color: var(--medium-blue);transition: .5s;}

.contact_row{width: 100%;margin-bottom: 8px;}
.contact_col{float: left;width: 50%;display: flex;flex-direction: column;}
.contact_col:nth-child(1){padding-right: 8px;}
.contact_col:nth-child(2){padding-left: 8px;}


/************************* Thank You Page *************************/
.thankyou{width: 100%;height: 100%;margin: 0;}
.thankyou_page{width: 100%;height: 100%;background-color: var(--dark-blue);display: flex;justify-content: center;align-items: center;}
.thankyou_page .divider_section{width: 33%;height: 100%;background-color: var(--medium-blue);transform: skewX(20deg);z-index: 2;transition: .5s;}

/* Content */
.thankyou_page .content{position: absolute;z-index: 10;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.thankyou_page .content p{color: var(--off-white);text-align: center;line-height: 1.4;}
.thankyou_page .content .heading1{color: var(--light-blue);margin-bottom: 32px;}
.thankyou_page .content a.button{border: 1px solid var(--off-white);color:var(--off-white);margin-top: 32px;}
.thankyou_page .content a.button:hover{background-color: var(--off-white);color: var(--medium-blue);transition: .5s;}


/************************* Responsive *************************/
@media screen and (max-width: 1500px){
  .icons_socials{margin:4vh 0 8vh 0;}
}

@media screen and (max-width: 1250px){
  .icons_col{width: 100%;transition: .5s;}
  .icons_socials a{margin-right: 24px;transition: .5s;}
}

@media screen and (max-width: 800px){
  /* Contact */
  .contact{padding: 88px 24px 32px 24px;}
  .contact form{margin-top: 24px;}
  .contact_section .info p{font-size: 14px;margin-left: 4px;}
  .contact_section .info i{font-size: 16px;}

  .icons_col{width: 33%;}
  .icons_socials i{font-size: 24px;transition: .5s;}

  textarea{height: 120px;}

  /* Thank You */
  .thankyou_page .divider_section{width: 50%;transition: .5s;}
}

@media screen and (max-width: 450px){
  .contact{padding-top: 100px;}
  .contact_col{width: 100%;}
  .icons_socials{margin:3vh 0 6vh 0;}
  .icons_socials a{margin-right: 16px;}
}

/************************* Tablet *************************/
@media screen and (min-width: 450px) and (min-height: 800px){
  .contact{padding-top:88px;}
}

@media screen and (width: 768px) and (height: 1024px){
  .contact{padding-top: 0;}
}