/* 
    This file contains all the locally used stuff, the second layer. 
    
    Page.html -> - style.css (code used across all pages like the navbar or custom buttons and animations)
                 - Page.css (code that is specific for that page and that page only wich is not included in the other pages)
*/

body {
    background-position: 0% 85vh;
    background-size: 100% 150vh;
}


/*************************************** | Home Section | ****************************************/

#HomeSection {
    height: 85vh;
}

#HomeTitleRow {
    max-width: 1200px;
}

@media(min-width: 1200px) {
    #HomeTitleRow {
        margin-left: calc(50% - 600px);
    }
}
@media(max-width:320px)
{
    
#HomeTitle {margin-top: -25%;}
#AboutTitle {font-size: 25px; margin-top: 15%;}
#AboutSubtitle{font-size: 14.5px;}
}
#HomeTitle {
    font-size: var(--FontSizeTitleHuge);
    font-weight: var(--FontWeightTitleHuge);
}

#TeamNumber {
    display: inline-block;
}

#HomeSubTitleRO {
    -webkit-user-select: none;  
    -moz-user-select: none;
    -ms-user-select: none; 
    user-select: none;
    

}

@media(max-width: 900px) {
    #HomeSubTitle {
        margin-top: 30px;
        font-size: 30px;
    }
}

#HomeElement {
    margin-top: 15vh;
    margin-bottom: 5vh;
}


/*************************************** | About Section | ****************************************/

#AboutSection {
    min-height: 80vh;
}

#AboutSubTitle {
    padding-top: 20px;
    padding-bottom: 50px;
}

@media(max-width: 900px) {
    #AboutSubTitle {
        font-size: 30px;
    }
}

#AboutTitleRow {
    max-width: 78%;

}



#AboutTitle {
    margin-top: 0vh;
}


/*************************************** | Sponsors Section | ****************************************/

#SponsorsSection {
    margin-top: -1px;
}

#SponsorsRobotContainer {
    padding: 0;
    overflow-x: hidden;
    height: 400px;
}

#SponsorsBox0box:hover,
#SponsorsBox1box:hover,
#SponsorsBox2box:hover,
#SponsorsBox3box:hover,
#SponsorsBox0boxmoveoff:hover,
#SponsorsBox1boxmoveoff:hover,
#SponsorsBox2boxmoveoff:hover,
#SponsorsBox3boxmoveoff:hover,
#SponsorsBox0boxrise:hover,
#SponsorsBox1boxrise:hover,
#SponsorsBox2boxrise:hover,
#SponsorsBox3boxrise:hover {
    opacity: 80%;
}

/*************************************** | Contact Section + Location | ****************************************/


.map-responsive{

    overflow:hidden;

    padding-bottom:56.25%;

    position:relative;

    height:0;

}

.map-responsive iframe{

    left:0;

    top:0;

    height:100%;

    width:100%;

    position:absolute;

}

/*************************************** | Blog Section | ****************************************/

#BlogSection {
    min-height: 70vh;
}

#BlogContainer {
    min-height: 200%;
}

.BlogDelete {
    display: none;
}

.BlogDeleteMargin {
    margin-bottom: 100vh;
}

.BlogReadMore {
    border: none;
    background-color: var(--BackgroundDarkSecondary);
}

.BlogPost {
    margin-top: 50px;
    width: 90%;
    height: 1000px;
    margin-left: 5%;
}

.BlogImage {
    background-size: 100% 100%;
    border-radius: 15px;
    height: 550px;
    max-width: 850px;
}

@media(min-width: 800px) {
    .BlogImage:hover,
    .BlogVideo:hover {
        opacity: 80%;
        filter: blur(2px);
        -webkit-filter: blur(2px);
    }
}

.BlogVideo {
    background-size: 100% 100%;
    border-radius: 15px;
    max-width: 850px;
    overflow: hidden;
}

.Video {
    height: 550px;
    max-width: 850px;
}

video {
    object-fit: fill;
}

.BlogImageRight,
.BlogVideoRight {
    margin-left: calc(50% - 525px);
}

.BlogImageLeft,
.BlogVideoLeft {
    margin-left: calc(50% - 325px);
}

.BlogTextContainer {
    padding: 50px;
    border-radius: 15px;
    margin-top: -225px;
    max-width: 600px;
    box-shadow: -2px -5px 18px #000000;
    position: absolute;
}

.BlogTextRight {
    margin-left: calc(50% - 175px);
}

.BlogTextLeft {
    margin-left: calc(50% - 625px);
}

.BlogText {
    padding-top: 50px;
    padding-bottom: 50px;
}

.BlogActivator {
    margin-top: -100px;
}

#BlogTitle {
    margin-bottom: 100px;
}

#ContentChooserRow {
    margin-bottom: 200px;
}

@media(max-width: 1300px) {
    .BlogImage,
    .BlogImageLeft,
    .BlogImageRight,
    .BlogVideo,
    .BlogVideoLeft,
    .BlogVideoRight {
        margin-left: 15%;
        width: 70%;
        height: 500px;
        max-width: none;
    }
    .BlogTextContainer,
    .BlogTextLeft,
    .BlogTextRight {
        position: relative;
        margin-left: 20%;
        margin-top: -150px;
        max-width: none;
        width: 60%;
    }
}

@media(max-width: 900px) {
    .BlogImage,
    .BlogImageLeft,
    .BlogImageRight,
    .BlogVideo,
    .BlogVideoLeft,
    .BlogVideoRight,
    .Video {
        margin-left: 1%;
        width: 98%;
        height: 400px;
        max-width: none;
    }
    .Video {
        border-radius: 30px;
    }
    .BlogTextContainer,
    .BlogTextLeft,
    .BlogTextRight {
        margin-top: -120px;
        width: 70%;
        margin-left: 15%;
    }
    .BlogText {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .BlogActivator {
        margin-top: -100px;
    }
    #ContentChooserRow {
        margin-bottom: 175px;
    }
}

@media(max-width: 700px) {
    .BlogImage,
    .BlogImageLeft,
    .BlogImageRight,
    .BlogVideo,
    .BlogVideoLeft,
    .BlogVideoRight,
    .Video {
        height: 400px;
    }
    .BlogText {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}

@media(max-width: 600px) {
    .BlogImage,
    .BlogImageLeft,
    .BlogImageRight,
    .BlogVideo,
    .BlogVideoLeft,
    .BlogVideoRight,
    .Video {
        height: 300px;
    }
    .BlogTextContainer,
    .BlogTextLeft,
    .BlogTextRight {
        margin-top: -50px;
        width: 80%;
        margin-left: 10%;
        padding: 15px;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .BlogActivator {
        margin-top: -275px;
    }
    #ContentChooserRow {
        margin-bottom: 325px;
    }
}

@media(max-width: 500px) {
    .BlogImage,
    .BlogImageLeft,
    .BlogImageRight,
    .BlogVideo,
    .BlogVideoLeft,
    .BlogVideoRight,
    .Video {
        height: 250px;
    }
    .BlogTextContainer,
    .BlogTextLeft,
    .BlogTextRight {
        margin-top: 0px;
        width: 98%;
        margin-left: 1%;
    }
    .BlogText {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}

@media(max-width: 425px) {
    .BlogImage,
    .BlogImageLeft,
    .BlogImageRight,
    .BlogVideo,
    .BlogVideoLeft,
    .BlogVideoRight,
    .Video {
        height: 200px;
    }
    .BlogTextContainer,
    .BlogTextLeft,
    .BlogTextRight {
        margin-top: 10px;
    }
    #BlogTitle {
        margin-top: -125px;
    }
}

@media(max-width: 350px) {
    .BlogImage,
    .BlogImageLeft,
    .BlogImageRight,
    .BlogVideo,
    .BlogVideoLeft,
    .BlogVideoRight,
    .Video {
        height: 160px;
    }
    .BlogTextContainer,
    .BlogTextLeft,
    .BlogTextRight {
        padding: 15px;
    }
    .BlogText {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media(max-width: 300px) {
    .BlogTextContainer,
    .BlogTextLeft,
    .BlogTextRight {
        padding: 12px;
    }
}

@media(min-width: 649px) {
    .PhoneContentChooser {
        display: none;
    }
    .ContentChooserText {
        font-size: 27px;
    }
}

@media(max-width: 650px) {
    .PCContentChooser {
        display: none;
    }
    .ContentChooserText {
        font-size: 20px;
    }
}

.ContentChooserOpacity {
    opacity: 40%;
}

#map-responsive
{
    border-radius: 14px;
    overflow: hidden;
}

/*************************************** | Social Media Section | ****************************************/
.SocialMedia
{
    overflow: hidden;
    padding-top: 23vh;
    padding-bottom: 10vh;
}

.SocialMediaTitle
{
    float: left;
    width: 50%;
    margin-top: 4vh;
    margin-bottom: 4vh;
    padding-top: 3rem!important;
    padding-bottom: 3rem!important;
    padding-left:12vw ;
}
.SocialMedias
{
    width: 47%;
    float: right;
}

.SocialMediaDivs
{
    margin-top: 1vh;
    width: 100%;
}

.SocialMediaCol
{
    margin-top: 3vh;
    margin-left: 10%;
    width: 100%;
    margin-right: 28%;
}
/*************************************** | Team Section | ****************************************/



.wrapper
{
  width:100%;
}
.wrapper .carousel 
{
  max-width: 80%;
  margin: auto;
  padding: 0 30px;
  max-height: 70%;

}
.carousel .card
{
  /* background: red; */
  line-height: 250px;
  text-align: center;
  color: #fff;
  
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0,0,0,0.2);

}

.TeamContentContainer
{
  width: 100%;
}
.blank
{
 
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 24%;
}

.mentors
{
    height: 75vh !important;
    margin-bottom: 12vh;
}


/*************************************** | Achiuevements Section | ****************************************/


.title-lite {
	display: inline-block;
	font-weight: 900;
	width: 100%;
	text-align: center;
	font-size: 2em;
	color: #eee;
}
.sidebar {
	float: left;
	width: 25%;
	height: 100vh;
}
.sidebar-content {
	position: fixed;
	width: 25%;
	height: 100%;
	background: #121212;
	
}
.sidebar-list {
	position: absolute;
	top: 32%;
	
}
.sidebar-list-menu {
	position: relative;
	list-style: none;
	margin-left: 100px;
	padding: 0;
}
.sidebar-list-menu::after {
	position: absolute;
	content: ' ';
	top: 0;
	bottom: 0;
	left: -20px;
	width: 2px;
	height: 100%;
	background: #333;
	z-index: 9;
}
.sidebar-list-menu li a {
	position: relative;
	display: inline-block;
	line-height: 50px;
	font-weight: 600;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
}
.sidebar-list-menu li a.active {
	font-weight: 900;
}
.sidebar-list-menu-active-bar {
	position: absolute;
	width: 6px;
	height: 50px;
	background: #fff;
	top: 0;
	left: -22px;
	z-index: 999;
	-webkit-transition: all .5s;
	   -moz-transition: all .5s;
	    -ms-transition: all .5s;
	     -o-transition: all .5s;
	        transition: all .5s;
	transition-delay: 0;
}
.content {
	display: inline-block;
	width: 75%;
}
.content > .content-container {
	width: 100%;
	height: 100vh;
}
.content > .content-container:nth-child(n) {
	background: #121212;
}
.content > .content-container:nth-child(2n) {
	background: #121212;
}
.content--center {
	position: relative;
	width: 100vw;
	height: 100vh;
	display: table-cell;
	vertical-align: middle;
}

#sidebar-list
{
    position: fixed;
}

#phone-achievements{
    display: none;
}
#pc-achievements{
    display: block;
}

@media screen and (max-width: 860px) {
    #phone-achievements{
        display: block;
    }
    #pc-achievements{
        display: none;
    }
}